diff --git a/package.json b/package.json index 29338ce..8650eb2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "happa-mission-plan", "private": true, - "version": "0.0.8", + "version": "0.0.9", "type": "module", "scripts": { "dev": "vite", diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock index a97d5fe..257f912 100644 --- a/src-tauri/Cargo.lock +++ b/src-tauri/Cargo.lock @@ -3180,7 +3180,7 @@ dependencies = [ [[package]] name = "spectral-insight-mission-plan" -version = "0.0.7" +version = "0.0.8" dependencies = [ "byteorder", "chrono", diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml index 03fd684..d4087a3 100644 --- a/src-tauri/Cargo.toml +++ b/src-tauri/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "spectral-insight-mission-plan" -version = "0.0.8" +version = "0.0.9" description = "Spectral Insight Mission Plan" authors = ["you"] edition = "2021" diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index d4ff6bc..4068c8e 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "https://schema.tauri.app/config/2", "productName": "Spectral Insight Mission Plan", - "version": "0.0.8", + "version": "0.0.9", "identifier": "com.spectral-insight.mission-plan", "build": { "beforeDevCommand": "npm run dev", diff --git a/src/components/planner/ScanCanvas.vue b/src/components/planner/ScanCanvas.vue index cf1402f..246e998 100644 --- a/src/components/planner/ScanCanvas.vue +++ b/src/components/planner/ScanCanvas.vue @@ -11,10 +11,11 @@ import { ref, onMounted, watch } from 'vue'; import type { ScanRegion, ScanMode, ScanShape } from '../../types/path-plan'; import type { PathLineRecord } from '../../types/path-line'; -const props = defineProps<{ +const props = withDefaults(defineProps<{ records: PathLineRecord[]; mode: ScanMode; backgroundImage?: string; drawingMode: boolean; drawingShape?: ScanShape; selectedIndex?: number; -}>(); + xMin?: number; xMax?: number; yMin?: number; yMax?: number; +}>(), { xMin: 0, xMax: 100, yMin: 0, yMax: 100 }); const regions = defineModel('regions', { required: true }); const emit = defineEmits<{ 'add-region': [region: ScanRegion]; 'select-region': [index: number]; 'deselect': [] }>(); @@ -23,13 +24,13 @@ const isDrawing = ref(false); const isDragging = ref(false); const isResizing = const resizeCorner = ref(''); const dragTarget = ref(-1); const dragStart = ref({ x: 0, y: 0 }); const regionStart = ref(null); const drawingRect = ref(null); const bgImage = ref(null); -const padding = 40; +let padding = 40; const COLORS = ['#2080f0', '#f0a020', '#18a058', '#d03050', '#a060e0', '#e06080']; function gs() { const r = canvasContainer.value?.getBoundingClientRect(); return { w: r?.width || 600, h: r?.height || 400 }; } function tc(cx: number, cy: number) { const r = canvas.value!.getBoundingClientRect(); return { x: cx - r.left, y: cy - r.top }; } -function tw(cx: number, cy: number) { const { w, h } = gs(); const dw = w - padding * 2, dh = h - padding * 2; return { x: Math.max(0, Math.min(100, (cx - padding) / dw * 100)), y: Math.max(0, Math.min(100, 100 - (cy - padding) / dh * 100)) }; } -function w2c(wx: number, wy: number) { const { w, h } = gs(); const dw = w - padding * 2, dh = h - padding * 2; return { x: padding + (wx / 100) * dw, y: padding + ((100 - wy) / 100) * dh }; } +function tw(cx: number, cy: number) { const { w, h } = gs(); const dw = w - padding * 2, dh = h - padding * 2, rx = props.xMax - props.xMin, ry = props.yMax - props.yMin; const da = rx / ry, ca = dw / dh, drawW = da > ca ? dw : dh * da, drawH = da > ca ? dw / da : dh, offX = da > ca ? 0 : (dw - drawW) / 2, offY = da > ca ? (dh - drawH) / 2 : 0; return { x: Math.max(props.xMin, Math.min(props.xMax, props.xMin + (cx - padding - offX) / drawW * rx)), y: Math.max(props.yMin, Math.min(props.yMax, props.yMax - (cy - padding - offY) / drawH * ry)) }; } +function w2c(wx: number, wy: number) { const { w, h } = gs(); const dw = w - padding * 2, dh = h - padding * 2, rx = props.xMax - props.xMin, ry = props.yMax - props.yMin; const da = rx / ry, ca = dw / dh, drawW = da > ca ? dw : dh * da, drawH = da > ca ? dw / da : dh, offX = da > ca ? 0 : (dw - drawW) / 2, offY = da > ca ? (dh - drawH) / 2 : 0; return { x: padding + offX + ((wx - props.xMin) / rx) * drawW, y: padding + offY + ((props.yMax - wy) / ry) * drawH }; } function findR(p: { x: number; y: number }): number { const r = regions.value; for (let i = r.length - 1; i >= 0; i--) { if (p.x >= r[i].xMin && p.x <= r[i].xMax && p.y >= r[i].yMin && p.y <= r[i].yMax) return i; } return -1; } function findC(p: { x: number; y: number }): { i: number; c: string } | null { const th = 3; for (let i = 0; i < regions.value.length; i++) { const r = regions.value[i]; for (const [c, cx, cy] of [['tl', r.xMin, r.yMax] as const, ['tr', r.xMax, r.yMax] as const, ['bl', r.xMin, r.yMin] as const, ['br', r.xMax, r.yMin] as const]) { if (Math.abs(p.x - cx) < th && Math.abs(p.y - cy) < th) return { i, c }; } } return null; } @@ -45,22 +46,31 @@ function draw() { canvas.value!.style.width = w + 'px'; canvas.value!.style.height = h + 'px'; ctx.scale(dpr, dpr); ctx.fillStyle = '#f8f8f8'; ctx.fillRect(0, 0, w, h); if (bgImage.value) { ctx.globalAlpha = 0.5; ctx.drawImage(bgImage.value, 0, 0, w, h); ctx.globalAlpha = 1.0; } + ctx.font = '10px sans-serif'; + const maxYLabel = Math.max( + ctx.measureText(props.yMin.toFixed(1)).width, + ctx.measureText(props.yMax.toFixed(1)).width + ); + padding = Math.max(40, Math.ceil(24 + 4 + maxYLabel + 4 + 16 + 2)); const dw = w - padding * 2, dh = h - padding * 2, ax = 16; + const rx = props.xMax - props.xMin, ry = props.yMax - props.yMin; + const da = rx / ry, ca = dw / dh; + const drawW = da > ca ? dw : dh * da, drawH = da > ca ? dw / da : dh; + const offX = da > ca ? 0 : (dw - drawW) / 2, offY = da > ca ? (dh - drawH) / 2 : 0; ctx.strokeStyle = '#e8e8e8'; ctx.lineWidth = 1; - for (let i = 0; i <= 10; i++) { const x = padding + (i / 10) * dw; ctx.beginPath(); ctx.moveTo(x, padding); ctx.lineTo(x, padding + dh); ctx.stroke(); } - for (let i = 0; i <= 10; i++) { const y = padding + (i / 10) * dh; ctx.beginPath(); ctx.moveTo(padding, y); ctx.lineTo(padding + dw, y); ctx.stroke(); } + for (let i = 0; i <= 10; i++) { const x = padding + offX + (i / 10) * drawW; ctx.beginPath(); ctx.moveTo(x, padding + offY); ctx.lineTo(x, padding + offY + drawH); ctx.stroke(); } + for (let i = 0; i <= 10; i++) { const y = padding + offY + (i / 10) * drawH; ctx.beginPath(); ctx.moveTo(padding + offX, y); ctx.lineTo(padding + offX + drawW, y); ctx.stroke(); } ctx.strokeStyle = '#666'; ctx.lineWidth = 1.5; - ctx.beginPath(); ctx.moveTo(padding - ax, padding + dh); ctx.lineTo(padding + dw + ax, padding + dh); ctx.stroke(); - ctx.beginPath(); ctx.moveTo(padding, padding + dh + ax); ctx.lineTo(padding, padding - ax); ctx.stroke(); + ctx.beginPath(); ctx.moveTo(padding + offX - ax, padding + offY + drawH); ctx.lineTo(padding + offX + drawW + ax, padding + offY + drawH); ctx.stroke(); + ctx.beginPath(); ctx.moveTo(padding + offX, padding + offY + drawH + ax); ctx.lineTo(padding + offX, padding + offY - ax); ctx.stroke(); ctx.fillStyle = '#888'; ctx.font = '10px sans-serif'; ctx.textAlign = 'center'; - for (let i = 0; i <= 10; i++) { const x = padding + (i / 10) * dw; ctx.fillText(String(i * 10), x, padding + dh + ax + 12); ctx.beginPath(); ctx.moveTo(x, padding + dh + ax - 3); ctx.lineTo(x, padding + dh + ax + 3); ctx.stroke(); } + for (let i = 0; i <= 10; i++) { const x = padding + offX + (i / 10) * drawW; ctx.fillText((props.xMin + (i / 10) * rx).toFixed(1), x, padding + offY + drawH + ax + 12); ctx.beginPath(); ctx.moveTo(x, padding + offY + drawH + ax - 3); ctx.lineTo(x, padding + offY + drawH + ax + 3); ctx.stroke(); } ctx.textAlign = 'right'; - for (let i = 0; i <= 10; i++) { const y = padding + (i / 10) * dh; ctx.fillText(String((10 - i) * 10), padding - ax - 4, y + 4); ctx.beginPath(); ctx.moveTo(padding - ax - 3, y); ctx.lineTo(padding - ax + 3, y); ctx.stroke(); } + for (let i = 0; i <= 10; i++) { const y = padding + offY + (i / 10) * drawH; ctx.fillText((props.yMin + (1 - i / 10) * ry).toFixed(1), padding + offX - ax - 4, y + 4); ctx.beginPath(); ctx.moveTo(padding + offX - ax - 3, y); ctx.lineTo(padding + offX - ax + 3, y); ctx.stroke(); } ctx.textAlign = 'start'; ctx.font = '11px sans-serif'; - ctx.fillText('X (cm)', padding + dw + ax - 10, padding + dh + ax + 24); - ctx.save(); ctx.translate(padding - ax - 24, 10); ctx.rotate(-Math.PI / 2); ctx.fillText('Y (cm)', 0, 0); ctx.restore(); - ctx.strokeStyle = '#f0a020'; ctx.lineWidth = 1; ctx.setLineDash([4, 4]); const z1 = w2c(0, 0), z2 = w2c(100, 100); ctx.strokeRect(z1.x, z1.y, z2.x - z1.x, z2.y - z1.y); ctx.setLineDash([]); + ctx.fillText('X (cm)', padding + offX + drawW + ax - 10, padding + offY + drawH + ax + 24); + ctx.save(); ctx.translate(padding + offX - ax - 24, 10); ctx.rotate(-Math.PI / 2); ctx.fillText('Y (cm)', 0, 0); ctx.restore(); for (let i = 0; i < regions.value.length; i++) { const r = regions.value[i]; const p1 = w2c(r.xMin, r.yMin), p2 = w2c(r.xMax, r.yMax); @@ -102,8 +112,8 @@ function onMouseDown(e: MouseEvent) { function onMouseMove(e: MouseEvent) { const cp = tc(e.clientX, e.clientY); if (isDrawing.value && props.drawingMode) { const p1 = tw(dragStart.value.x, dragStart.value.y), p2 = tw(cp.x, cp.y); drawingRect.value = { shape: props.drawingShape || 'Rect', xMin: Math.min(p1.x, p2.x), xMax: Math.max(p1.x, p2.x), yMin: Math.min(p1.y, p2.y), yMax: Math.max(p1.y, p2.y) }; draw(); return; } - if (isDragging.value && dragTarget.value >= 0 && regionStart.value) { const dx = (cp.x - dragStart.value.x) / (gs().w - padding * 2) * 100, dy = -(cp.y - dragStart.value.y) / (gs().h - padding * 2) * 100; const rs = regionStart.value, rw = rs.xMax - rs.xMin, rh = rs.yMax - rs.yMin; const arr = [...regions.value]; arr[dragTarget.value] = { ...arr[dragTarget.value], xMin: Math.max(0, Math.min(100 - rw, rs.xMin + dx)), xMax: Math.max(rs.xMin + dx + 1, Math.min(100, rs.xMax + dx)), yMin: Math.max(0, Math.min(100 - rh, rs.yMin + dy)), yMax: Math.max(rs.yMin + dy + 1, Math.min(100, rs.yMax + dy)) }; regions.value = arr; draw(); return; } - if (isResizing.value && dragTarget.value >= 0 && regionStart.value) { const p1 = tw(dragStart.value.x, dragStart.value.y), p2 = tw(cp.x, cp.y); const dx = p2.x - p1.x, dy = p2.y - p1.y, rs = regionStart.value; let xMin = rs.xMin, xMax = rs.xMax, yMin = rs.yMin, yMax = rs.yMax; const c = resizeCorner.value; if (c.includes('l')) xMin = Math.min(rs.xMin + dx, rs.xMax - 1); if (c.includes('r')) xMax = Math.max(rs.xMax + dx, rs.xMin + 1); if (c.includes('b')) yMin = Math.min(rs.yMin + dy, rs.yMax - 1); if (c.includes('t')) yMax = Math.max(rs.yMax + dy, rs.yMin + 1); xMin = Math.max(0, xMin); xMax = Math.min(100, xMax); yMin = Math.max(0, yMin); yMax = Math.min(100, yMax); if (xMax - xMin > 1 && yMax - yMin > 1) { const arr = [...regions.value]; arr[dragTarget.value] = { ...arr[dragTarget.value], xMin, xMax, yMin, yMax }; regions.value = arr; draw(); } } + if (isDragging.value && dragTarget.value >= 0 && regionStart.value) { const rx = props.xMax - props.xMin, ry = props.yMax - props.yMin; const dw = gs().w - padding * 2, dh = gs().h - padding * 2, da = rx / ry, ca = dw / dh; const drawW = da > ca ? dw : dh * da, drawH = da > ca ? dw / da : dh; const dx = (cp.x - dragStart.value.x) / drawW * rx, dy = -(cp.y - dragStart.value.y) / drawH * ry; const rs = regionStart.value, rw = rs.xMax - rs.xMin, rh = rs.yMax - rs.yMin; const arr = [...regions.value]; arr[dragTarget.value] = { ...arr[dragTarget.value], xMin: Math.max(props.xMin, Math.min(props.xMax - rw, rs.xMin + dx)), xMax: Math.max(rs.xMin + dx + 1, Math.min(props.xMax, rs.xMax + dx)), yMin: Math.max(props.yMin, Math.min(props.yMax - rh, rs.yMin + dy)), yMax: Math.max(rs.yMin + dy + 1, Math.min(props.yMax, rs.yMax + dy)) }; regions.value = arr; draw(); return; } + if (isResizing.value && dragTarget.value >= 0 && regionStart.value) { const p1 = tw(dragStart.value.x, dragStart.value.y), p2 = tw(cp.x, cp.y); const dx = p2.x - p1.x, dy = p2.y - p1.y, rs = regionStart.value; let xMin = rs.xMin, xMax = rs.xMax, yMin = rs.yMin, yMax = rs.yMax; const c = resizeCorner.value; if (c.includes('l')) xMin = Math.min(rs.xMin + dx, rs.xMax - 1); if (c.includes('r')) xMax = Math.max(rs.xMax + dx, rs.xMin + 1); if (c.includes('b')) yMin = Math.min(rs.yMin + dy, rs.yMax - 1); if (c.includes('t')) yMax = Math.max(rs.yMax + dy, rs.yMin + 1); xMin = Math.max(props.xMin, xMin); xMax = Math.min(props.xMax, xMax); yMin = Math.max(props.yMin, yMin); yMax = Math.min(props.yMax, yMax); if (xMax - xMin > 1 && yMax - yMin > 1) { const arr = [...regions.value]; arr[dragTarget.value] = { ...arr[dragTarget.value], xMin, xMax, yMin, yMax }; regions.value = arr; draw(); } } } function onMouseUp() { @@ -112,7 +122,7 @@ function onMouseUp() { } onMounted(() => { loadBG(props.backgroundImage); window.addEventListener('resize', draw); }); -watch(() => [regions.value, props.records, props.mode, props.drawingMode, props.drawingShape, props.selectedIndex], () => { draw(); }); +watch(() => [regions.value, props.records, props.mode, props.drawingMode, props.drawingShape, props.selectedIndex, props.xMin, props.xMax, props.yMin, props.yMax], () => { draw(); }); watch(() => props.backgroundImage, (v) => { loadBG(v); }); diff --git a/src/components/planner/ScanParamPanel.vue b/src/components/planner/ScanParamPanel.vue index b5e5653..d11cf1f 100644 --- a/src/components/planner/ScanParamPanel.vue +++ b/src/components/planner/ScanParamPanel.vue @@ -2,20 +2,14 @@
- - - - - - - - - - - - - - + + + + + + + + diff --git a/src/views/MissionEditorView.vue b/src/views/MissionEditorView.vue index f3d0372..1d50ef5 100644 --- a/src/views/MissionEditorView.vue +++ b/src/views/MissionEditorView.vue @@ -421,7 +421,8 @@ async function drawPathPreview() { const ctx = canvas.getContext('2d'); if (!ctx) return; ctx.scale(dpr, dpr); ctx.fillStyle = '#f8f8f8'; ctx.fillRect(0, 0, w, h); - let xMin = Infinity, xMax = -Infinity, yMin = Infinity, yMax = -Infinity; + const sc = missionStore.mission.scanConfig; + let xMin = sc.xMin, xMax = sc.xMax, yMin = sc.yMin, yMax = sc.yMax; for (const r of records) { xMin = Math.min(xMin, r.targetXMinPosition, r.targetXMaxPosition); xMax = Math.max(xMax, r.targetXMinPosition, r.targetXMaxPosition); yMin = Math.min(yMin, r.targetYPosition); yMax = Math.max(yMax, r.targetYPosition); } const rangeX = xMax - xMin || 1, rangeY = yMax - yMin || 1, pad = 30, drawW = w - pad * 2, drawH = h - pad * 2; const toCanvas = (wx: number, wy: number) => ({ x: pad + ((wx - xMin) / rangeX) * drawW, y: pad + ((yMax - wy) / rangeY) * drawH }); diff --git a/src/views/PathPlannerView.vue b/src/views/PathPlannerView.vue index 1703fed..277bc80 100644 --- a/src/views/PathPlannerView.vue +++ b/src/views/PathPlannerView.vue @@ -31,7 +31,7 @@ - +