fix: canvas drag and drop issue

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

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) => {

packages/common/component/CanvasDragItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div draggable="true" class="drag-item" @dragstart="dragstart" @click="handleClick">
+  <div draggable="true" class="drag-item" @dragstart="dragstart" @dragend="dragend" @click="handleClick">
     <slot></slot>
   </div>
 </template>
@@ -30,6 +30,13 @@ export default {
       }
     }
 
+    const dragend = (e) => {
+      // 拖拽结束，但是此时的 dropEffect 为 none ，说明此时没有完成拖拽，需要清理一下拖拽状态
+      if (e.dataTransfer?.dropEffect === 'none') {
+        canvasApi.value?.dragEnd?.()
+      }
+    }
+
     const handleClick = () => {
       if (props.data) {
         const data = deepClone(props.data)
@@ -40,6 +47,7 @@ export default {
 
     return {
       dragstart,
+      dragend,
       handleClick
     }
   }