refactor: optimize Vue canvas interaction logic, extract element positioning and interaction methods

重构: 优化 Vue 画布交互逻辑，提取元素定位和交互方法

Author: chilingling

designer-demo/engine.config.js

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

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 }
 }

packages/canvas/container/src/CanvasContainer.vue

@@ -1,19 +1,18 @@
 <template>
-  <div v-for="state in multiSelectedStates" :key="state.id">
+  <div v-for="state in selectState" :key="state.id">
     <canvas-action
-      :hoverState="hoverState"
-      :inactiveHoverState="inactiveHoverState"
       :selectState="state"
-      :lineState="lineState"
       :windowGetClickEventTarget="target"
       :resize="canvasState.type === 'absolute'"
       :multiStateLength="multiStateLength"
       @select-slot="selectSlot"
       @setting="settingModel"
     ></canvas-action>
   </div>
-  <canvas-router-jumper :hoverState="hoverState" :inactiveHoverState="inactiveHoverState"></canvas-router-jumper>
-  <canvas-viewer-switcher :hoverState="hoverState" :inactiveHoverState="inactiveHoverState"></canvas-viewer-switcher>
+  <canvas-hover :hoverState="curHoverState"></canvas-hover>
+  <canvas-insert-line :lineState="lineState" :hoverState="curHoverState"></canvas-insert-line>
+  <canvas-router-jumper :hoverState="curHoverState"></canvas-router-jumper>
+  <canvas-viewer-switcher :hoverState="curHoverState"></canvas-viewer-switcher>
   <canvas-divider :selectState="computedSelectState"></canvas-divider>
   <canvas-resize-border :selectState="computedSelectState" :iframe="iframe"></canvas-resize-border>
   <canvas-resize>
@@ -53,7 +52,7 @@
 import { onMounted, ref, computed, onUnmounted, watch, watchEffect } from 'vue'
 import { iframeMonitoring } from '@opentiny/tiny-engine-common/js/monitor'
 import { useTranslate, useCanvas, useMessage, useResource } from '@opentiny/tiny-engine-meta-register'
-import { NODE_UID, NODE_LOOP, DESIGN_MODE } from '../../common'
+import { DESIGN_MODE } from '../../common'
 import { registerHotkeyEvent, removeHotkeyEvent } from './keyboard'
 import CanvasMenu, { closeMenu, openMenu } from './components/CanvasMenu.vue'
 import CanvasAction from './components/CanvasAction.vue'
@@ -62,27 +61,22 @@ import CanvasViewerSwitcher from './components/CanvasViewerSwitcher.vue'
 import CanvasResize from './components/CanvasResize.vue'
 import CanvasDivider from './components/CanvasDivider.vue'
 import CanvasResizeBorder from './components/CanvasResizeBorder.vue'
-import { useMultiSelect } from './composables/useMultiSelect'
+import CanvasHover from './components/CanvasHover.vue'
+import CanvasInsertLine from './components/CanvasInsertLine.vue'
 import {
   canvasState,
   onMouseUp,
   dragMove,
   dragState,
-  initialRectState,
-  hoverState,
-  inactiveHoverState,
   lineState,
   removeNodeById,
   syncNodeScroll,
-  getElement,
   dragStart,
-  selectNode,
   initCanvas,
   clearLineState,
-  querySelectById,
-  getCurrent,
   canvasApi
 } from './container'
+import { useHoverNode, useSelectNode } from './interactions'
 
 export default {
   components: {
@@ -92,7 +86,9 @@ export default {
     CanvasDivider,
     CanvasResizeBorder,
     CanvasRouterJumper,
-    CanvasViewerSwitcher
+    CanvasViewerSwitcher,
+    CanvasHover,
+    CanvasInsertLine
   },
   props: {
     controller: Object,
@@ -109,44 +105,29 @@ export default {
     const showSettingModel = ref(false)
     const target = ref(null)
     const srcAttrName = computed(() => (props.canvasSrc ? 'src' : 'srcdoc'))
-
     const containerPanel = ref(null)
     const insertContainer = ref(false)
-
-    const { multiSelectedStates } = useMultiSelect()
-
-    const multiStateLength = computed(() => multiSelectedStates.value.length)
-
+    const { selectState, updateSelectedNode, defaultSelectState } = useSelectNode()
+    const { curHoverState, updateHoverNode } = useHoverNode()
+    const multiStateLength = computed(() => selectState.value.length)
     const computedSelectState = computed(() => {
-      if (multiSelectedStates.value.length === 1) {
-        return multiSelectedStates.value[0]
+      if (selectState.value.length === 1) {
+        return selectState.value[0]
       }
 
-      return initialRectState
+      return defaultSelectState
     })
 
-    const setCurrentNode = async (event) => {
+    const handleNodeInteractions = async (event) => {
       const { clientX, clientY } = event
-      const element = getElement(event.target)
       closeMenu()
-      let node = getCurrent().schema
-
-      if (element) {
-        const currentElement = querySelectById(getCurrent().schema?.id)
-
-        if (!currentElement?.contains(element) || event.button === 0) {
-          const isCtrlKey = event.ctrlKey || event.metaKey
-          const loopId = element.getAttribute(NODE_LOOP)
-          if (loopId) {
-            node = await selectNode(element.getAttribute(NODE_UID), `loop-id=${loopId}`, isCtrlKey)
-          } else {
-            node = await selectNode(element.getAttribute(NODE_UID), undefined, isCtrlKey)
-          }
-        }
-
-        if (event.button === 0 && element !== element.ownerDocument.body) {
-          const { x, y } = element.getBoundingClientRect()
+      await updateSelectedNode(event)
+      const node = selectState.value.node
 
+      if (node) {
+        const element = selectState.value.element
+        if (event.button === 0 && element !== element?.ownerDocument?.body) {
+          const { left: x, top: y } = selectState.value.rect
           dragStart(node, element, { offsetX: clientX - x, offsetY: clientY - y })
         }
 
@@ -211,38 +192,47 @@ export default {
         // 以下是内部iframe监听的事件
         win.addEventListener('mousedown', (event) => {
           handleCanvasEvent(() => {
-            // html元素使用scroll和mouseup事件处理
-            if (event.target === doc.documentElement) {
-              isScrolling = false
-              return
-            }
+            insertPosition.value = false
+            insertContainer.value = false
+            handleNodeInteractions(event)
+            target.value = event.target
+          })
 
-            const element = getElement(event.target)
-            if (!element) {
+          useMessage().publish({ topic: 'canvas-mousedown', data: { event } })
+        })
+        win.addEventListener('contextmenu', (event) => {
+          handleCanvasEvent(() => {
+            if (event.target === doc.documentElement) {
               return
             }
 
             insertPosition.value = false
             insertContainer.value = false
-            setCurrentNode(event)
+            handleNodeInteractions(event)
             target.value = event.target
           })
-
-          useMessage().publish({ topic: 'canvas-mousedown', data: { event } })
         })
 
+        let scrollTimeout = null
         win.addEventListener('scroll', () => {
           isScrolling = true
+
+          clearTimeout(scrollTimeout)
+
+          scrollTimeout = setTimeout(() => {
+            isScrolling = false
+          }, 100)
         })
 
+        // TODO: 需要确认下该事件还是否需要
         win.addEventListener('mouseup', (event) => {
           if (event.target !== doc.documentElement || isScrolling) {
             return
           }
 
           insertPosition.value = false
           insertContainer.value = false
-          setCurrentNode(event)
+          // handleNodeInteractions(event)
           target.value = event.target
         })
 
@@ -257,9 +247,10 @@ export default {
           onMouseUp(ev)
         })
 
-        win.addEventListener('mousemove', (ev) => {
+        win.addEventListener('mouseover', (ev) => {
           handleCanvasEvent(() => {
-            dragMove(ev, true)
+            // 更新当前鼠标 hover 的节点
+            updateHoverNode(ev)
           })
         })
 
@@ -311,8 +302,9 @@ export default {
       insertPosition.value = position
     }
 
-    const selectSlot = (slotName) => {
-      hoverState.slot = slotName
+    // TODO: 需要确认下该事件还是否需要
+    const selectSlot = (_slotName) => {
+      // hoverState.slot = slotName
     }
 
     onMounted(() => run(iframe))
@@ -329,11 +321,9 @@ export default {
     return {
       iframe,
       dragState,
-      hoverState,
-      inactiveHoverState,
+      // hoverState,
       computedSelectState,
       lineState,
-      multiSelectedStates,
       multiStateLength,
       removeNodeById,
       selectSlot,
@@ -347,7 +337,9 @@ export default {
       insertPosition,
       insertContainer,
       loading,
-      srcAttrName
+      srcAttrName,
+      selectState,
+      curHoverState
     }
   }
 }