diff --git a/src/components/editor/Canvas.vue b/src/components/editor/Canvas.vue index 7b99ccd..8f15084 100644 --- a/src/components/editor/Canvas.vue +++ b/src/components/editor/Canvas.vue @@ -9,17 +9,30 @@ import { useEditor } from '../../composables/useEditor' import ElementView from './ElementView.vue' const canvasRef = ref() -const canvasFrameRef = ref() +const canvasFrameRef = ref() // 注意:绑定 .canvas-frame(不含 stage 的 padding),scale 以它为基准 const { - drag, editing, + drag, marquee, editing, onCanvasMouseDown, onMouseMove, onMouseUp, onContentEditableFocus } = useEditor() const slide = computed(() => store.currentSlide.value) const selectedId = computed(() => store.selectedId.value) +const selectedIds = computed(() => store.selectedIds.value || []) const HANDLES = ['tl', 'tm', 'tr', 'lm', 'rm', 'bl', 'bm', 'br'] +/** 框选矩形样式(% → CSS) */ +const marqueeBox = computed(() => { + const m = marquee.value + if (!m) return null + return { + left: Math.min(m.x0, m.x1) + '%', + top: Math.min(m.y0, m.y1) + '%', + width: Math.abs(m.x1 - m.x0) + '%', + height: Math.abs(m.y1 - m.y0) + '%' + } +}) + function fitCanvas() { if (!canvasFrameRef.value || !canvasRef.value) return const rect = canvasFrameRef.value.getBoundingClientRect() @@ -53,24 +66,42 @@ function liveBox(elId: string) { return null } +/** 多选组拖拽中各元素的实时位置 */ +function liveMultiBox(elId: string) { + const d = drag.value + if (d && d.mode === 'multi-move' && d.multiResult) { + const r = d.multiResult.find(t => t.id === elId) + if (r) return { left: r.x + '%', top: r.y + '%' } + } + return null +} + const onResize = () => fitCanvas() +/** 监听 frame 尺寸:v-show 隐藏→显示、窗口缩放、布局变化都会触发(隐藏时 rect=0,onMounted 的 rAF 会空跑) */ +let frameObserver: ResizeObserver | null = null + onMounted(() => { window.addEventListener('resize', onResize) document.addEventListener('mousemove', onMouseMove) document.addEventListener('mouseup', onMouseUp) requestAnimationFrame(fitCanvas) + if (typeof ResizeObserver !== 'undefined' && canvasFrameRef.value) { + frameObserver = new ResizeObserver(() => fitCanvas()) + frameObserver.observe(canvasFrameRef.value) + } }) onUnmounted(() => { window.removeEventListener('resize', onResize) document.removeEventListener('mousemove', onMouseMove) document.removeEventListener('mouseup', onMouseUp) + if (frameObserver) { frameObserver.disconnect(); frameObserver = null } }) + + diff --git a/src/components/modals/PrintModal.vue b/src/components/modals/PrintModal.vue index 2f7f55e..1cf6be5 100644 --- a/src/components/modals/PrintModal.vue +++ b/src/components/modals/PrintModal.vue @@ -1,30 +1,32 @@