From d22f1f78488e61783e8f5b680e8e652a52dea817 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Tue, 12 May 2026 08:00:07 +0000 Subject: [PATCH 1/4] =?UTF-8?q?!277=20feat:=20=E5=8D=87=E7=BA=A7vue3-sketc?= =?UTF-8?q?h-ruler=E5=88=B02X?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Merge pull request !277 from kakajun/master --- package.json | 2 +- pnpm-lock.yaml | 26 +- src/plugins/customComponents.ts | 2 +- .../chartLayoutStore/chartLayoutStore.d.ts | 2 - .../chartLayoutStore/chartLayoutStore.ts | 5 - .../chart/ContentConfigurations/index.vue | 115 ++++--- .../components/EditBottom/index.vue | 10 +- .../components/EditRange/index.vue | 12 +- .../ContentEdit/components/EditRule/index.vue | 306 +++++++----------- .../components/EditTools/index.vue | 1 + src/views/chart/ContentEdit/index.vue | 27 +- 11 files changed, 214 insertions(+), 294 deletions(-) diff --git a/package.json b/package.json index 804b2097..d1af92d1 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,7 @@ "vue-i18n": "9.2.2", "vue-router": "4.0.12", "vue3-lazyload": "^0.2.5-beta", - "vue3-sketch-ruler": "^1.3.3", + "vue3-sketch-ruler": "^2.4.1", "vuedraggable": "^4.1.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9704bd87..701fcea8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -111,8 +111,8 @@ importers: specifier: ^0.2.5-beta version: 0.2.5-beta(@vue/compiler-sfc@3.5.16)(vue@3.5.16(typescript@4.6.3)) vue3-sketch-ruler: - specifier: ^1.3.3 - version: 1.3.16(vue@3.5.16(typescript@4.6.3)) + specifier: ^2.4.1 + version: 2.4.1 vuedraggable: specifier: ^4.1.0 version: 4.1.0(vue@3.5.16(typescript@4.6.3)) @@ -3946,18 +3946,8 @@ packages: '@vue/compiler-sfc': '>=3.0.0' vue: '>=3.0.0' - vue3-sketch-ruler@1.3.16: - resolution: {integrity: sha512-k/TBOwbueU9eWOF7k/emsZMwtEqFk/FxG+h//TlaZ2B8RWbxhIe6hPFgggO4Jng10ARsuH4cMGAR+ZOuN4ozgg==} - deprecated: This version is deprecated. Please upgrade to version 2X for better features and performance.See https://github.com/kakajun/vue3-sketch-ruler - hasBin: true - peerDependencies: - '@vue/composition-api': ^1.1.0 - vue: ^2.6.0 || ^3.2.0 - peerDependenciesMeta: - '@vue/composition-api': - optional: true - vue: - optional: true + vue3-sketch-ruler@2.4.1: + resolution: {integrity: sha512-TMMJ5v3cqDA94DPUa1iFHBx4D+FqEqpNXwzGU310aaMDllqyvyFfZigBFryeCRO7Q7EuOD5J5Zwc++LOCHB7Jw==} vue@3.5.16: resolution: {integrity: sha512-rjOV2ecxMd5SiAmof2xzh2WxntRcigkX/He4YFJ6WdRvVUrbt6DxC1Iujh10XLl8xCDRDtGKMeO3D+pRQ1PP9w==} @@ -4323,7 +4313,7 @@ snapshots: '@types/node': 20.5.1 chalk: 4.1.2 cosmiconfig: 8.3.6(typescript@5.8.3) - cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.8.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.8.3))(typescript@5.8.3) + cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.6.3))(typescript@5.8.3) lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 lodash.uniq: 4.5.0 @@ -5556,7 +5546,7 @@ snapshots: core-util-is@1.0.3: {} - cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.8.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.8.3))(typescript@5.8.3): + cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.6.3))(typescript@5.8.3): dependencies: '@types/node': 20.5.1 cosmiconfig: 8.3.6(typescript@5.8.3) @@ -8186,9 +8176,7 @@ snapshots: '@vue/compiler-sfc': 3.5.16 vue: 3.5.16(typescript@4.6.3) - vue3-sketch-ruler@1.3.16(vue@3.5.16(typescript@4.6.3)): - optionalDependencies: - vue: 3.5.16(typescript@4.6.3) + vue3-sketch-ruler@2.4.1: {} vue@3.5.16(typescript@4.6.3): dependencies: diff --git a/src/plugins/customComponents.ts b/src/plugins/customComponents.ts index 0fad1075..35e7b5db 100644 --- a/src/plugins/customComponents.ts +++ b/src/plugins/customComponents.ts @@ -1,7 +1,7 @@ import type { App } from 'vue' import { GoSkeleton } from '@/components/GoSkeleton' import { GoLoading } from '@/components/GoLoading' -import { SketchRule } from 'vue3-sketch-ruler' +import SketchRule from 'vue3-sketch-ruler' /** * 全局注册自定义组件 diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts index b485dd59..f387799e 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts @@ -31,6 +31,4 @@ export interface ChartLayoutType { [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum // 当前正在加载的数量 [ChartLayoutStoreEnum.PERCENTAGE]: number - // 是否重置当前画布位置 - [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean } diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts index 95a0cb70..74983bec 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts +++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts @@ -49,9 +49,6 @@ export const useChartLayoutStore = defineStore({ }, getPercentage(): number { return this.percentage - }, - getRePositionCanvas(): boolean { - return this.rePositionCanvas } }, actions: { @@ -65,8 +62,6 @@ export const useChartLayoutStore = defineStore({ }) // 存储本地 setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state) - // 这里需要标记重置画布位置 - this.rePositionCanvas = true; // 重新计算拖拽区域缩放比例 if (computedScale) { setTimeout(() => { diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue index 110a3c2f..9c37280d 100644 --- a/src/views/chart/ContentConfigurations/index.vue +++ b/src/views/chart/ContentConfigurations/index.vue @@ -37,7 +37,13 @@ - + @@ -297,60 +269,10 @@ window.onKeySpacePressHold = (isHold: boolean) => { width: 100%; height: 100%; - .edit-screens { - position: absolute; - width: 100%; - height: 100%; - overflow: auto; - user-select: none; - padding-bottom: 0px; - - /* firefox */ - scrollbar-color: rgba(144, 146, 152, 0.3) transparent; - scrollbar-width: thin; - - /* chrome */ - &::-webkit-scrollbar, - &::-webkit-scrollbar-track-piece { - background-color: transparent; - } - - &::-webkit-scrollbar { - width: 7px; - } - - &::-webkit-scrollbar-thumb { - border-radius: 5px; - background-color: rgba(144, 146, 152, 0.3); - } - // 修复右下角白点用的 - &::-webkit-scrollbar-corner { - background-color: transparent; - } - } - - .fix-edit-screens-block { - position: absolute; - bottom: 0; - right: 0; - width: 10px; - height: 10px; - background-color: $--color-dark-bg-1; - } - - .edit-screen-container { - position: absolute; - height: v-bind('containerHeight'); - top: 0; - left: 0; - } - .canvas { position: absolute; - top:50%; - left: 50%; - transform-origin: 50% 0; - transform: translateY(-50%); + top: 0; + left: 0; &:hover { cursor: v-bind('cursorStyle'); diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue index c92e578c..4537ce67 100644 --- a/src/views/chart/ContentEdit/components/EditTools/index.vue +++ b/src/views/chart/ContentEdit/components/EditTools/index.vue @@ -223,6 +223,7 @@ $asideBottom: 70px; @include go('chart-edit-tools') { @extend .go-background-filter; + z-index: 9; position: absolute; display: flex; justify-content: space-around; diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index d44393d4..f8d538fc 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -1,5 +1,4 @@ diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue index e8034055..f10054c2 100644 --- a/src/views/chart/ContentEdit/components/EditRange/index.vue +++ b/src/views/chart/ContentEdit/components/EditRange/index.vue @@ -3,10 +3,6 @@ - - - -
@@ -18,9 +14,7 @@ import { useSizeStyle } from '../../hooks/useStyle.hook' import { canvasModelIndex } from '@/settings/designSetting' import { mousedownBoxSelect } from '../../hooks/useDrag.hook' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { EditAlignLine } from '../EditAlignLine' import { EditWatermark } from '../EditWatermark' -import { EditSelect } from '../EditSelect' const chartEditStore = useChartEditStore() @@ -47,7 +41,7 @@ const rangeModelStyle = computed(() => { position: relative; transform-origin: left top; background-size: cover; - overflow: hidden; + overflow: visible; @include fetch-border-color('hover-border-color'); @include fetch-bg-color('background-color2'); @include go(edit-range-model) { diff --git a/src/views/chart/ContentEdit/components/EditSelect/index.ts b/src/views/chart/ContentEdit/components/EditSelect/index.ts deleted file mode 100644 index 88b3334f..00000000 --- a/src/views/chart/ContentEdit/components/EditSelect/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import EditSelect from './index.vue' - -export { EditSelect } diff --git a/src/views/chart/ContentEdit/components/EditSelect/index.vue b/src/views/chart/ContentEdit/components/EditSelect/index.vue deleted file mode 100644 index 5526e8ed..00000000 --- a/src/views/chart/ContentEdit/components/EditSelect/index.vue +++ /dev/null @@ -1,113 +0,0 @@ - - - - - diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 758680ff..be7a6365 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -5,7 +5,10 @@ import { ConfigType } from '@/packages/index.d' import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d' import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' +import { useDesignStore } from '@/store/modules/designStore/designStore' +import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d' +import { selectBoxIndex } from '@/settings/designSetting' import { loadingStart, loadingFinish, loadingError, setComponentPosition, JSONParse } from '@/utils' import { throttle, cloneDeep } from 'lodash' @@ -73,6 +76,23 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C mousedownHandleUnStop(e) + // 框选容器（.go-edit-range），框选框会 append 到这里 + const container = e.currentTarget as HTMLElement + // 主题色（每次框选时读取，跟随主题切换） + const themeColor = useDesignStore().getAppTheme + + // 创建框选框 DOM（鼠标抬起时销毁，不走 store 响应式，避免卡顿） + // 将主题色（hex）转为带透明度的背景色 + const hexToRgba = (hex: string, alpha: number) => { + const r = parseInt(hex.slice(1, 3), 16) + const g = parseInt(hex.slice(3, 5), 16) + const b = parseInt(hex.slice(5, 7), 16) + return `rgba(${r},${g},${b},${alpha})` + } + const selectEl = document.createElement('div') + selectEl.style.cssText = `position:absolute;left:0;top:0;z-index:${selectBoxIndex};pointer-events:none;border:1px dashed ${themeColor};background:${hexToRgba(themeColor, 0.06)};` + container.appendChild(selectEl) + // 记录点击初始位置 const startOffsetX = e.offsetX const startOffsetY = e.offsetY @@ -82,8 +102,6 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C // 记录缩放 const scale = chartEditStore.getEditCanvas.scale - chartEditStore.setMousePosition(undefined, undefined, startOffsetX, startOffsetY) - // 移动框选 const mousemove = throttle((moveEvent: MouseEvent) => { // 取消当前选中 @@ -93,7 +111,6 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C // 这里先把相对值算好，不然组件无法获取 startScreenX 和 startScreenY 的值 const currX = startOffsetX + moveEvent.screenX - startScreenX const currY = startOffsetY + moveEvent.screenY - startScreenY - chartEditStore.setMousePosition(currX, currY) // 计算框选的左上角和右下角 const selectAttr = { @@ -130,11 +147,20 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C selectAttr.y2 = startOffsetY } + // 直接操作 DOM 绘制框选框，绕开 store 响应式 + const left = Math.min(selectAttr.x1, selectAttr.x2) + const top = Math.min(selectAttr.y1, selectAttr.y2) + const width = Math.abs(selectAttr.x2 - selectAttr.x1) + const height = Math.abs(selectAttr.y2 - selectAttr.y1) + selectEl.style.left = `${left}px` + selectEl.style.top = `${top}px` + selectEl.style.width = `${width}px` + selectEl.style.height = `${height}px` + // 遍历组件 chartEditStore.getComponentList.forEach(item => { if (!chartEditStore.getTargetChart.selectId.includes(item.id)) { // 处理左上角 - let isSelect = false const { x, y, w, h } = item.attr const targetAttr = { // 左上角 @@ -144,16 +170,15 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C x2: x + w, y2: y + h } - // 全包含则选中 + // 部分相交即选中 if ( - targetAttr.x1 - selectAttr.x1 >= 0 && - targetAttr.y1 - selectAttr.y1 >= 0 && - targetAttr.x2 - selectAttr.x2 <= 0 && - targetAttr.y2 - selectAttr.y2 <= 0 && + targetAttr.x1 < selectAttr.x2 && + targetAttr.x2 > selectAttr.x1 && + targetAttr.y1 < selectAttr.y2 && + targetAttr.y2 > selectAttr.y1 && !item.status.lock && !item.status.hide ) { - isSelect = true chartEditStore.setTargetSelectChart(item.id, true) } } @@ -166,6 +191,8 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C mousemove.cancel() chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_SELECT, false) chartEditStore.setMousePosition(0, 0, 0, 0) + // 销毁框选框 DOM + selectEl.remove() document.removeEventListener('mousemove', mousemove) document.removeEventListener('mouseup', mouseup) } @@ -173,6 +200,128 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C document.addEventListener('mouseup', mouseup) } +// ---- 对齐线 DOM 操作（纯命令式，不走 Vue 响应式）---- + +let _alignEls: HTMLElement[] = [] + +const _clearAlignLines = () => { + _alignEls.forEach(el => el.remove()) + _alignEls = [] +} + +const _drawAlignLine = ( + container: HTMLElement, + isRow: boolean, + fixedCoord: number, + spanStart: number, + spanEnd: number, + label: string, + color: string +) => { + if (spanStart >= spanEnd) return + const el = document.createElement('div') + if (isRow) { + // 横线：固定 top，left~width 表示水平范围 + el.style.cssText = `position:absolute;pointer-events:none;z-index:9999;background:${color};left:${spanStart}px;top:${fixedCoord}px;width:${spanEnd - spanStart}px;height:1px;` + } else { + // 竖线：固定 left，top~height 表示垂直范围 + el.style.cssText = `position:absolute;pointer-events:none;z-index:9999;background:${color};left:${fixedCoord}px;top:${spanStart}px;width:1px;height:${spanEnd - spanStart}px;` + } + const tag = document.createElement('span') + tag.textContent = label + tag.style.cssText = `position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:${color};color:#fff;font-size:11px;line-height:1;padding:2px 5px;border-radius:2px;white-space:nowrap;` + el.appendChild(tag) + container.appendChild(el) + _alignEls.push(el) +} + +type AlignRef = { id: string; attr: { x: number; y: number; w: number; h: number } } + +/** + * 吸附对齐：检测 sel 与所有 refs 的边界对齐，返回吸附后坐标并绘制对齐线。 + * 对齐线只绘制两个对象之间的覆盖范围，中间显示吸附前偏差 px。 + */ +const _runAlignSnap = ( + container: HTMLElement, + selectId: string, + sel: { x: number; y: number; w: number; h: number }, + refs: AlignRef[], + color: string, + minDist: number +): { x: number; y: number } => { + _clearAlignLines() + + const { x: sx, y: sy, w: sw, h: sh } = sel + + type Hit = { coord: number; newOrig: number; delta: number; ref: AlignRef } + let bestX: Hit | null = null + let bestY: Hit | null = null + + for (const ref of refs) { + if (ref.id === selectId) continue + const { x: cx, y: cy, w: cw, h: ch } = ref.attr + const cR = cx + cw, cB = cy + ch + const cCx = cx + cw / 2, cCy = cy + ch / 2 + + // X 对齐检测 → 竖线 + // [sel边, ref边, 吸附后的新 sx] + const xChecks: [number, number, number][] = [ + [sx, cx, cx], // 左-左 + [sx, cCx, cCx], // 左-中 + [sx, cR, cR], // 左-右 + [sx+sw/2, cx, cx-sw/2], // 中-左 + [sx+sw/2, cCx, cCx-sw/2], // 中-中 + [sx+sw/2, cR, cR-sw/2], // 中-右 + [sx+sw, cx, cx-sw], // 右-左 + [sx+sw, cCx, cCx-sw], // 右-中 + [sx+sw, cR, cR-sw], // 右-右 + ] + for (const [a, b, newSx] of xChecks) { + const delta = Math.abs(a - b) + if (delta <= minDist && (!bestX || delta < bestX.delta)) { + bestX = { coord: b, newOrig: newSx, delta, ref } + } + } + + // Y 对齐检测 → 横线 + const yChecks: [number, number, number][] = [ + [sy, cy, cy], + [sy, cCy, cCy], + [sy, cB, cB], + [sy+sh/2, cy, cy-sh/2], + [sy+sh/2, cCy, cCy-sh/2], + [sy+sh/2, cB, cB-sh/2], + [sy+sh, cy, cy-sh], + [sy+sh, cCy, cCy-sh], + [sy+sh, cB, cB-sh], + ] + for (const [a, b, newSy] of yChecks) { + const delta = Math.abs(a - b) + if (delta <= minDist && (!bestY || delta < bestY.delta)) { + bestY = { coord: b, newOrig: newSy, delta, ref } + } + } + } + + const finalX = bestX ? Math.round(bestX.newOrig) : sx + const finalY = bestY ? Math.round(bestY.newOrig) : sy + + if (bestX) { + const { y: ry, h: rh } = bestX.ref.attr + const spanStart = Math.min(finalY, ry) + const spanEnd = Math.max(finalY + sh, ry + rh) + _drawAlignLine(container, false, bestX.coord, spanStart, spanEnd, `${Math.round(bestX.delta)}px`, color) + } + if (bestY) { + const { x: rx, w: rw } = bestY.ref.attr + const spanStart = Math.min(finalX, rx) + const spanEnd = Math.max(finalX + sw, rx + rw) + _drawAlignLine(container, true, bestY.coord, spanStart, spanEnd, `${Math.round(bestY.delta)}px`, color) + } + + return { x: finalX, y: finalY } +} + // * 鼠标事件 export const useMouseHandle = () => { // * Click 事件, 松开鼠标触发 @@ -212,8 +361,9 @@ export const useMouseHandle = () => { if (e.buttons === MouseEventButton.RIGHT) return const scale = chartEditStore.getEditCanvas.scale - const canvasWidth = chartEditStore.getEditCanvasConfig.width - const canvasHeight = chartEditStore.getEditCanvasConfig.height + // 读取对齐配置（在 mousedown 时快照，避免拖拽过程中反复读 store） + const themeColor = useDesignStore().getAppTheme + const minDist = useSettingStore().getChartAlignRange // 记录图表初始位置和大小 const targetMap = new Map() @@ -233,57 +383,76 @@ export const useMouseHandle = () => { let prevComponentInstance: Array = [] chartEditStore.getTargetChart.selectId.forEach(id => { if (!targetMap.has(id)) return - const index = chartEditStore.fetchTargetIndex(id) - // 拿到初始位置数据 prevComponentInstance.push(cloneDeep(chartEditStore.getComponentList[index])) }) // 记录初始位置 chartEditStore.setMousePosition(undefined, undefined, startX, startY) + // 对齐线直接绘制到画布容器 + const alignContainer = document.querySelector('.go-edit-range') as HTMLElement | null + // 移动-计算偏移量 const mousemove = throttle((moveEvent: MouseEvent) => { chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, true) chartEditStore.setMousePosition(moveEvent.screenX, moveEvent.screenY) - // 当前偏移量，处理 scale 比例问题 - let offsetX = (moveEvent.screenX - startX) / scale - let offsetY = (moveEvent.screenY - startY) / scale + const offsetX = (moveEvent.screenX - startX) / scale + const offsetY = (moveEvent.screenY - startY) / scale - chartEditStore.getTargetChart.selectId.forEach(id => { + const currentSelectIds = chartEditStore.getTargetChart.selectId + + if (currentSelectIds.length === 1) { + // 单选：做对齐吸附 + const id = currentSelectIds[0] if (!targetMap.has(id)) return - - const index = chartEditStore.fetchTargetIndex(id) - // 拿到初始位置数据 const { x, y, w, h } = targetMap.get(id) - const componentInstance = chartEditStore.getComponentList[index] - let currX = Math.round(x + offsetX) let currY = Math.round(y + offsetY) - // 要预留的距离 - const distance = 50 - - // 基于左上角位置检测 - currX = currX < -w + distance ? -w + distance : currX - currY = currY < -h + distance ? -h + distance : currY - - // 基于右下角位置检测 - currX = currX > canvasWidth - distance ? canvasWidth - distance : currX - currY = currY > canvasHeight - distance ? canvasHeight - distance : currY - if (componentInstance) { - componentInstance.attr = Object.assign(componentInstance.attr, { - x: currX, - y: currY + if (alignContainer) { + // 构造参照列表（所有其他组件 + 画布） + // 直接引用 attr，避免每帧构造新对象 + const refs: AlignRef[] = (chartEditStore.getComponentList as Array).map(c => ({ + id: c.id, + attr: c.attr as { x: number; y: number; w: number; h: number } + })) + refs.push({ + id: '__canvas__', + attr: { x: 0, y: 0, w: chartEditStore.getEditCanvasConfig.width, h: chartEditStore.getEditCanvasConfig.height } }) + const snapped = _runAlignSnap(alignContainer, id, { x: currX, y: currY, w, h }, refs, themeColor, minDist) + currX = snapped.x + currY = snapped.y } - }) - return + + const index = chartEditStore.fetchTargetIndex(id) + const componentInstance = chartEditStore.getComponentList[index] + if (componentInstance) { + componentInstance.attr = Object.assign(componentInstance.attr, { x: currX, y: currY }) + } + } else { + // 多选：无对齐，直接移动 + _clearAlignLines() + currentSelectIds.forEach(id => { + if (!targetMap.has(id)) return + const index = chartEditStore.fetchTargetIndex(id) + const { x, y } = targetMap.get(id) + const componentInstance = chartEditStore.getComponentList[index] + if (componentInstance) { + componentInstance.attr = Object.assign(componentInstance.attr, { + x: Math.round(x + offsetX), + y: Math.round(y + offsetY) + }) + } + }) + } }, 20) const mouseup = () => { try { + _clearAlignLines() chartEditStore.setMousePosition(0, 0, 0, 0) chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_DRAG, false) // 加入历史栈 diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 6e917f5f..975b8bfa 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -205,7 +205,6 @@ onMounted(() => { @include background-image('background-point'); @include goId('chart-edit-content') { - overflow: hidden; height: 100%; @extend .go-transition; @include fetch-theme('box-shadow'); diff --git a/src/views/preview/utils/style.ts b/src/views/preview/utils/style.ts index 945aa8c0..ac34e1ea 100644 --- a/src/views/preview/utils/style.ts +++ b/src/views/preview/utils/style.ts @@ -51,6 +51,7 @@ export const getEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => { } return { position: 'relative' as const, + overflow: 'hidden' as const, width: canvas.width ? `${canvas.width || 100}px` : '100%', height: canvas.height ? `${canvas.height}px` : '100%', ...computedBackground