fix: canvasDivider can't work (#1075)

opentiny · Feb 6, 2025 · 22a525d · 22a525d
1 parent 15b6a9c
commit 22a525d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 11 deletions.
diff --git a/packages/canvas/container/src/components/CanvasDivider.vue b/packages/canvas/container/src/components/CanvasDivider.vue
@@ -23,6 +23,7 @@
 
 <script>
 import { reactive, watch } from 'vue'
+import { useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { getCurrent, updateRect } from '../container'
 
@@ -86,6 +87,12 @@ export default {
       const index = parent.children.findIndex(({ id }) => id === schema.id)
 
       parent.children.splice(index + 1, 0, extend(true, {}, COL_SNIPPET))
+
+      useCanvas().operateNode({
+        type: 'updateAttributes',
+        id: parent.id,
+        value: { children: parent.children }
+      })
       updateRect()
     }
 
@@ -97,6 +104,12 @@ export default {
       if (schema.componentName === 'CanvasRow') {
         parent.children.splice(index + 1, 0, extend(true, {}, ROW_SNIPPET))
 
+        useCanvas().operateNode({
+          type: 'updateAttributes',
+          id: parent.id,
+          value: { children: parent.children }
+        })
+
         return
       }
 
@@ -123,6 +136,12 @@ export default {
           // 已经切割过了，直接加一行
           schema.children.push(extend(true, {}, ROW_SNIPPET))
         }
+
+        useCanvas().operateNode({
+          type: 'updateAttributes',
+          id: parent.id,
+          value: { children: parent.children }
+        })
       }
 
       updateRect()

diff --git a/packages/canvas/container/src/components/CanvasResizeBorder.vue b/packages/canvas/container/src/components/CanvasResizeBorder.vue
@@ -8,7 +8,7 @@
 
 <script>
 import { reactive, watch } from 'vue'
-import { useLayout } from '@opentiny/tiny-engine-meta-register'
+import { useLayout, useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { getCurrent, updateRect, selectState, querySelectById } from '../container'
 
 export default {
@@ -54,10 +54,6 @@ export default {
 
       const { parent, schema } = getCurrent()
 
-      if (!schema.props) {
-        schema.props = {}
-      }
-
       if (state.direction === 'horizontal') {
         let dis = state.startPosition.x - clientX
 
@@ -75,18 +71,32 @@ export default {
         // 最小宽度32
         newWidth = Math.max(newWidth, 32)
 
-        schema.props.flexBasis = `${newWidth}px`
-        schema.props.widthType = 'fixed'
+        useCanvas().operateNode({
+          type: 'changeProps',
+          id: schema.id,
+          value: {
+            props: {
+              flexBasis: `${newWidth}px`,
+              widthType: 'fixed'
+            }
+          }
+        })
       }
 
       if (state.direction === 'vertical') {
         let target = schema.componentName === 'CanvasRow' ? schema : parent
-        if (!target.props) {
-          target.props = {}
-        }
         const dis = clientY - state.startPosition.y
         const minHeight = state.startPosition.height + dis
-        target.props.minHeight = `${minHeight}px`
+
+        useCanvas().operateNode({
+          type: 'changeProps',
+          id: target.id,
+          value: {
+            props: {
+              minHeight: `${minHeight}px`
+            }
+          }
+        })
       }
 
       updateRect()