From c39f1346f66d5d5552238e0b934640b9043708cd Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 29 May 2025 19:53:57 +0800 Subject: [PATCH 1/4] fix: canvas drag and drop issue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 修复从物料列表拖拽取消后，点击选中画布的节点，会导致选中的节点被移动到画布最后的 bug 2. 修复往表格列插槽拖动时，有可能拖动节点到插槽的顶层，导致节点被插入到 TinyGrid children，导致表格显示的 bug。 --- packages/canvas/DesignCanvas/src/api/useCanvas.ts | 12 +++++++++++- packages/canvas/container/src/container.ts | 4 ++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/canvas/DesignCanvas/src/api/useCanvas.ts b/packages/canvas/DesignCanvas/src/api/useCanvas.ts index 9799496f53..29fcbf9bf9 100644 --- a/packages/canvas/DesignCanvas/src/api/useCanvas.ts +++ b/packages/canvas/DesignCanvas/src/api/useCanvas.ts @@ -93,12 +93,22 @@ const handleTinyGridColumnsSlots = (node: Node) => { for (const slotItem of Object.values(columnItem.slots)) { if (Array.isArray(slotItem?.value)) { + // 这里要给 TinyGrid 的表格列插槽添加一个虚拟 Template 节点 + // 不然有可能在拖拽的时候，拖拽到插槽的同级节点上，此时由于插槽的父节点是 TinyGrid，导致插入到了TinyGrid 的 children 中。添加一个父节点可以避免该问题 + const virtualNode = { + id: utils.guid(), + componentName: 'Template', + props: {}, + children: slotItem.value + } + nodesMap.value.set(virtualNode.id, { node: virtualNode, parent: node }) + slotItem.value.forEach((item: Node) => { if (!item.id) { item.id = utils.guid() } - nodesMap.value.set(item.id, { node: item, parent: node }) + nodesMap.value.set(item.id, { node: item, parent: virtualNode }) if (Array.isArray(item.children)) { // eslint-disable-next-line @typescript-eslint/no-use-before-define diff --git a/packages/canvas/container/src/container.ts b/packages/canvas/container/src/container.ts index 8c152d6d2d..68a2cfa47a 100644 --- a/packages/canvas/container/src/container.ts +++ b/packages/canvas/container/src/container.ts @@ -927,8 +927,8 @@ export const onMouseUp = () => { const absolute = canvasState.type === 'absolute' const lineId = lineState.id const { getNodeWithParentById, getSchema } = useCanvas() - - if (draging && !forbidden) { + // 如果lineId为空，说明找不到参照物节点，则不进行插入 + if (draging && !forbidden && !['', null, undefined].includes(lineId)) { const { parent, node } = getNodeWithParentById(lineId) || {} // target const data = dragState.data! const sourceId = data.id From 0f78e952b63edf96076b341cad3e44d0c3a43aa4 Mon Sep 17 00:00:00 2001 From: chilingling Date: Thu, 29 May 2025 21:57:41 +0800 Subject: [PATCH 2/4] fix: use dragEnd clear function --- packages/canvas/container/src/container.ts | 3 ++- packages/common/component/CanvasDragItem.vue | 10 +++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/canvas/container/src/container.ts b/packages/canvas/container/src/container.ts index 68a2cfa47a..fe93bef154 100644 --- a/packages/canvas/container/src/container.ts +++ b/packages/canvas/container/src/container.ts @@ -1041,7 +1041,8 @@ export const canvasApi = { }, updateCanvas: (...args: any[]) => { return canvasState.renderer.updateCanvas(...args) - } + }, + dragEnd } export const initCanvas = ({ renderer, iframe, emit, controller }: any) => { diff --git a/packages/common/component/CanvasDragItem.vue b/packages/common/component/CanvasDragItem.vue index 83d2503e1d..84a2599a73 100644 --- a/packages/common/component/CanvasDragItem.vue +++ b/packages/common/component/CanvasDragItem.vue @@ -1,5 +1,5 @@ @@ -30,6 +30,13 @@ export default { } } + const dragend = () => { + // 拖拽结束，使用一个延迟 setTimeout 触发 dragEnd 的事件清理 + setTimeout(() => { + canvasApi.value?.dragEnd?.() + }, 0) + } + const handleClick = () => { if (props.data) { const data = deepClone(props.data) @@ -40,6 +47,7 @@ export default { return { dragstart, + dragend, handleClick } } From 96471fb2c9b22ca2deed3986f8fd88e35f283a62 Mon Sep 17 00:00:00 2001 From: chilingling Date: Fri, 30 May 2025 09:07:52 +0800 Subject: [PATCH 3/4] fix: remove old lineId condition solution --- packages/canvas/container/src/container.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/canvas/container/src/container.ts b/packages/canvas/container/src/container.ts index fe93bef154..f81e18444a 100644 --- a/packages/canvas/container/src/container.ts +++ b/packages/canvas/container/src/container.ts @@ -927,8 +927,8 @@ export const onMouseUp = () => { const absolute = canvasState.type === 'absolute' const lineId = lineState.id const { getNodeWithParentById, getSchema } = useCanvas() - // 如果lineId为空，说明找不到参照物节点，则不进行插入 - if (draging && !forbidden && !['', null, undefined].includes(lineId)) { + + if (draging && !forbidden) { const { parent, node } = getNodeWithParentById(lineId) || {} // target const data = dragState.data! const sourceId = data.id From 924be079df018ab4c1987efc74390179099540a2 Mon Sep 17 00:00:00 2001 From: chilingling Date: Fri, 30 May 2025 09:57:46 +0800 Subject: [PATCH 4/4] fix: optimize drag end handling by checking dropEffect status --- packages/common/component/CanvasDragItem.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/common/component/CanvasDragItem.vue b/packages/common/component/CanvasDragItem.vue index 84a2599a73..5e50e51566 100644 --- a/packages/common/component/CanvasDragItem.vue +++ b/packages/common/component/CanvasDragItem.vue @@ -30,11 +30,11 @@ export default { } } - const dragend = () => { - // 拖拽结束，使用一个延迟 setTimeout 触发 dragEnd 的事件清理 - setTimeout(() => { + const dragend = (e) => { + // 拖拽结束，但是此时的 dropEffect 为 none ，说明此时没有完成拖拽，需要清理一下拖拽状态 + if (e.dataTransfer?.dropEffect === 'none') { canvasApi.value?.dragEnd?.() - }, 0) + } } const handleClick = () => {