fix(canvas): move and split actions has no effect(#1406)

packages/canvas/DesignCanvas/src/api/useCanvas.js

@@ -356,6 +356,34 @@ const operationTypeMap = {
       previous: node
     }
   },
+  /**
+   * move node in canvas
+   * @param {object} operation
+   * @param {string} operation.id - node id to move
+   * @param {string} operation.parentId - target parent node id
+   * @param {string} operation.referTargetNodeId - target parent node's child node id
+   * @param {string} operation.position - position to insert(before/after)
+   */
+  move: (operation) => {
+    const { id, parentId, position, referTargetNodeId } = operation
+    const targetNode = getNode(id, true)
+    if (!targetNode) {
+      return
+    }
+    /**
+     * delete node from parent
+     */
+    operationTypeMap.delete({ id })
+    /**
+     * add node to new parent
+     */
+    operationTypeMap.insert({
+      parentId,
+      position,
+      referTargetNodeId,
+      newNodeData: targetNode.node
+    })
+  },
   changeProps: (operation) => {
     const { id, value, option: changeOption } = operation
     let { node } = getNode(id, true) || {}

packages/canvas/container/src/components/CanvasAction.vue

@@ -128,6 +128,7 @@ import {
   selectNode,
   updateRect,
   copyNode,
+  moveChildNode,
   getRenderer,
   dragStart,
   getCurrentElement
@@ -193,33 +194,14 @@ export default {
       removeNodeById(getCurrent().schema?.id)
     }
 
-    const moveChild = (list, selected, addend) => {
-      if (!list || list.length < 2) {
-        return
-      }
-
-      const index = list.indexOf(selected)
-
-      if (index > -1) {
-        const toIndex = index + addend
-
-        if (toIndex > -1 && toIndex < list.length) {
-          // eslint-disable-next-line no-extra-semi
-          ;[list[index], list[toIndex]] = [list[toIndex], list[index]]
-
-          updateRect()
-        }
-      }
-    }
-
     const moveUp = () => {
       const { parent, schema } = getCurrent()
-      moveChild(parent?.children, schema, -1)
+      moveChildNode(parent, schema, -1)
     }
 
     const moveDown = () => {
       const { parent, schema } = getCurrent()
-      moveChild(parent?.children, schema, 1)
+      moveChildNode(parent, schema, 1)
     }
 
     const selectParent = () => {

packages/canvas/container/src/components/CanvasDivider.vue

@@ -24,7 +24,7 @@
 <script>
 import { reactive, watch } from 'vue'
 import { extend } from '@opentiny/vue-renderless/common/object'
-import { getCurrent, updateRect } from '../container'
+import { POSITION, getCurrent, insertNode, removeNode } from '../container'
 
 const LEGAL_DIVIDER_COMPONENT = ['CanvasRow', 'CanvasCol']
 
@@ -82,32 +82,54 @@ export default {
 
     const handleSplit = () => {
       const { parent, schema } = getCurrent()
-
-      const index = parent.children.findIndex(({ id }) => id === schema.id)
-
-      parent.children.splice(index + 1, 0, extend(true, {}, COL_SNIPPET))
-      updateRect()
+      insertNode(
+        {
+          parent: parent,
+          node: schema,
+          data: extend(true, {}, COL_SNIPPET)
+        },
+        POSITION.RIGHT
+      )
     }
 
     const handleSplitRow = () => {
       const { parent, schema } = getCurrent()
 
-      const index = parent.children.findIndex(({ id }) => id === schema.id)
-
       if (schema.componentName === 'CanvasRow') {
-        parent.children.splice(index + 1, 0, extend(true, {}, ROW_SNIPPET))
-
+        insertNode(
+          {
+            parent: parent,
+            node: schema,
+            data: extend(true, {}, ROW_SNIPPET)
+          },
+          POSITION.RIGHT
+        )
         return
       }
 
       // 当前选中组件是 CanvasCol 横向切割
       if (schema.componentName === 'CanvasCol') {
         // 当前组件为空组件，直接切成两行
         if (!schema.children?.length) {
-          schema.children = [extend(true, {}, ROW_SNIPPET), extend(true, {}, ROW_SNIPPET)]
+          insertNode(
+            {
+              parent,
+              node: schema,
+              data: extend(true, {}, ROW_SNIPPET)
+            },
+            POSITION.IN
+          )
+          insertNode(
+            {
+              parent,
+              node: schema,
+              data: extend(true, {}, ROW_SNIPPET)
+            },
+            POSITION.IN
+          )
         } else if (schema.children[0].componentName !== 'CanvasRow') {
           // 当前组件不为空组件且第一个孩子不为 row，则是第一次切割，切割成两行，需要将原来有的 children 放置到第一个 row 的 col
-          schema.children = [
+          const children = [
             {
               ...extend(true, {}, ROW_SNIPPET),
               children: [
@@ -119,13 +141,35 @@ export default {
             },
             extend(true, {}, ROW_SNIPPET)
           ]
+          const index = parent.children.findIndex(({ id }) => {
+            return id === schema.id
+          })
+          const node = index - 1 > -1 ? parent.children[index - 1] : parent.children[index + 1]
+          const position = index - 1 > -1 ? POSITION.RIGHT : POSITION.LEFT
+          removeNode(schema.id)
+          insertNode(
+            {
+              parent: parent,
+              node: node,
+              data: {
+                ...schema,
+                children
+              }
+            },
+            position
+          )
         } else {
           // 已经切割过了，直接加一行
-          schema.children.push(extend(true, {}, ROW_SNIPPET))
+          insertNode(
+            {
+              parent,
+              node: schema,
+              data: extend(true, {}, ROW_SNIPPET)
+            },
+            POSITION.IN
+          )
         }
       }
-
-      updateRect()
     }
 
     watch(

packages/canvas/container/src/container.js

@@ -271,7 +271,7 @@ const getRect = (element) => {
   return element.getBoundingClientRect()
 }
 
-const inserAfter = ({ parent, node, data }) => {
+const insertAfter = ({ parent, node, data }) => {
   if (!data.id) {
     data.id = utils.guid()
   }
@@ -319,6 +319,34 @@ export const removeNode = (id) => {
   })
 }
 
+export const moveChildNode = (parent, selected, addend) => {
+  const { children: list } = parent || {}
+  if (!list || list.length < 2) {
+    return
+  }
+
+  const index = list.indexOf(selected)
+
+  if (index > -1) {
+    const toIndex = index + addend
+
+    if (toIndex > -1 && toIndex < list.length) {
+      const copyList = [...list]
+      // eslint-disable-next-line no-extra-semi
+      ;[copyList[index], copyList[toIndex]] = [copyList[toIndex], copyList[index]]
+      const position = copyList[toIndex - 1] ? 'after' : 'before'
+      const referTargetNodeId = copyList[toIndex - 1] ? copyList[toIndex - 1].id : copyList[toIndex + 1].id
+      useCanvas().operateNode({
+        type: 'move',
+        id: selected.id,
+        parentId: parent.id,
+        position,
+        referTargetNodeId
+      })
+    }
+  }
+}
+
 export const removeNodeById = (id) => {
   if (!id) {
     return
@@ -735,7 +763,7 @@ export const insertNode = (node, position = POSITION.IN, select = true) => {
         break
       case POSITION.BOTTOM:
       case POSITION.RIGHT:
-        inserAfter(node)
+        insertAfter(node)
         break
       case POSITION.IN:
         insertInner(node)
@@ -764,7 +792,7 @@ export const copyNode = (id) => {
 
   const { node, parent } = useCanvas().getNodeWithParentById(id)
 
-  inserAfter({ parent, node, data: copyObject(node) })
+  insertAfter({ parent, node, data: copyObject(node) })
   getController().addHistory()
 }
 
@@ -863,6 +891,7 @@ export const canvasApi = {
   hoverNode,
   insertNode,
   removeNode,
+  moveChildNode,
   addComponent,
   addScript,
   addStyle,