refact: canvas interaction logic

Author: chilingling

designer-demo/engine.config.js

@@ -3,5 +3,6 @@ export default {
   theme: 'light',
   material: ['/mock/bundle.json'],
   scripts: [],
-  styles: []
+  styles: [],
+  selectMode: 'vue'
 }

packages/canvas/DesignCanvas/src/DesignCanvas.vue

@@ -42,7 +42,8 @@ import {
 import { constants } from '@opentiny/tiny-engine-utils'
 import * as ast from '@opentiny/tiny-engine-common/js/ast'
 import { initCanvas } from '../../init-canvas/init-canvas'
-import { useMultiSelect } from '../../container/src/composables/useMultiSelect'
+// import { useMultiSelect } from '../../container/src/composables/useMultiSelect'
+import { useSelectNode } from '../../container/src/interactions'
 import { getImportMapData } from './importMap'
 import meta from '../meta'
 
@@ -153,8 +154,10 @@ export default {
       }
     )
 
-    const { multiSelectedStates } = useMultiSelect()
-    const multiStateLength = computed(() => multiSelectedStates.value.length)
+    // const { multiSelectedStates } = useMultiSelect()
+    // const multiStateLength = computed(() => multiSelectedStates.value.length)
+    const { selectState } = useSelectNode()
+    const multiStateLength = computed(() => selectState.value.length)
 
     const nodeSelected = (node, parent, type, id) => {
       const { leftPanelFixed, rightPanelFixed } = getFixedPanelsStatus()
@@ -180,7 +183,7 @@ export default {
 
       // 如果选中的节点是画布，就设置成默认选中最外层schema
       useProperties().getProps(schemaItem || pageSchema, parent)
-      const multiSchemas = multiSelectedStates.value.map(({ schema }) => schema)
+      const multiSchemas = selectState.value.map(({ node }) => node)
       const currentSchema = multiStateLength.value > 1 ? multiSchemas : schemaItem || pageSchema
       useCanvas().setCurrentSchema(currentSchema)
       footData.value = getNodePath(schemaItem?.id)

packages/canvas/container/index.ts

@@ -1,10 +1,10 @@
 import CanvasContainer from './src/CanvasContainer.vue'
-import { useMultiSelect } from './src/composables/useMultiSelect'
+import { useSelectNode } from './src/interactions'
 import { registerHotkeyEvent, removeHotkeyEvent } from './src/keyboard'
 import metaData from './meta'
 
 export default {
   ...metaData,
   entry: CanvasContainer,
-  api: { useMultiSelect, registerHotkeyEvent, removeHotkeyEvent }
+  api: { useSelectNode, registerHotkeyEvent, removeHotkeyEvent }
 }