feat: support outlinetree multiple select

Author: chilingling

designer-demo/engine.config.js

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

packages/canvas/container/src/CanvasContainer.vue

@@ -121,7 +121,8 @@ export default {
     const handleNodeInteractions = async (event) => {
       const { clientX, clientY } = event
       closeMenu()
-      await updateSelectedNode(event)
+      const isMultipleSelect = event.ctrlKey || event.metaKey
+      await updateSelectedNode(event, '', isMultipleSelect)
       // TODO: 需要支持多选状态下的拖拽逻辑
       const node = selectState.value[0]?.node
 
@@ -233,7 +234,6 @@ export default {
 
           insertPosition.value = false
           insertContainer.value = false
-          // handleNodeInteractions(event)
           target.value = event.target
         })
 

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

@@ -3,7 +3,7 @@
     v-show="hoverState.rect.height && hoverState.rect.width && !hoverState.isInactiveNode"
     class="canvas-rect common-hover hover"
   >
-    <div class="corner-mark-left" @click="handleSelectHoverNode">
+    <div class="corner-mark-left" @click="(e) => handleSelectHoverNode(e)">
       {{ hoverState.componentName }}
     </div>
     <div v-show="hoverState.configure?.isContainer" class="corner-mark-bottom-right">拖放元素到容器内</div>
@@ -29,7 +29,7 @@ export default {
     }
   },
   setup(props) {
-    const handleSelectHoverNode = () => {
+    const handleSelectHoverNode = (e) => {
       const node = props.hoverState.node
       const element = props.hoverState.element
 
@@ -38,11 +38,12 @@ export default {
       }
 
       const { selectNodeById, updateSelectedNode } = useSelectNode()
+      const isMultipleSelect = e.ctrlKey || e.metaKey
 
       if (element) {
-        updateSelectedNode({ target: element })
+        updateSelectedNode({ target: element }, '', isMultipleSelect)
       } else {
-        selectNodeById(node.id)
+        selectNodeById(node.id, '', isMultipleSelect)
       }
     }
 
@@ -66,6 +67,7 @@ export default {
     left: v-bind("hoverState.rect.left + 'px'");
     height: v-bind("hoverState.rect.height + 'px'");
     width: v-bind("hoverState.rect.width + 'px'");
+    transition: all 0.15s ease-in-out;
     .corner-mark-left {
       height: 14px;
       top: -14px;

packages/canvas/container/src/container.ts

@@ -383,7 +383,6 @@ export const scrollToNode = (element?: Element | null) => {
   return nextTick()
 }
 
-// TODO:
 export const updateRect = () => {
   const { clearHover } = useHoverNode()
   const { updateSelectedRect } = useSelectNode()
@@ -662,10 +661,10 @@ export const dragMove = (event: DragEvent) => {
  * @param {*} type
  * @returns
  */
-export const selectNode = async (id: string, type?: string) => {
+export const selectNode = async (id: string, type?: string, isMultipleSelect = false) => {
   const { selectNodeById } = useSelectNode()
 
-  selectNodeById(id, type || '')
+  selectNodeById(id, type || '', isMultipleSelect)
 }
 
 /**
@@ -833,10 +832,10 @@ export const canvasApi = {
 
     return clearSelect()
   },
-  selectNodeById: (id: string, type: string) => {
+  selectNodeById: (id: string, type: string, isMultipleSelect = false) => {
     const { selectNodeById } = useSelectNode()
 
-    return selectNodeById(id, type)
+    return selectNodeById(id, type, isMultipleSelect)
   },
   selectNode,
   hoverNode,

packages/canvas/container/src/interactions/common.ts

@@ -110,13 +110,14 @@ export const hoverNodeById = (id: string, updateHoverNode: (e: MouseEvent) => vo
 }
 
 export const selectNodeById = async (
-  updateSelectedNode: (e: MouseEvent, type: string) => void,
+  updateSelectedNode: (e: MouseEvent, type: string, isMultipleSelect: boolean) => void,
   id: string,
-  type: string
+  type: string,
+  isMultipleSelect: boolean
 ) => {
   const element = querySelectById(id)
 
   if (element) {
-    updateSelectedNode({ target: element } as unknown as MouseEvent, type)
+    updateSelectedNode({ target: element } as unknown as MouseEvent, type, isMultipleSelect)
   }
 }

…src/interactions/default-interactions.ts …er/src/interactions/html-interactions.tspackages/canvas/container/src/interactions/default-interactions.ts renamed to packages/canvas/container/src/interactions/html-interactions.ts packages/canvas/container/src/interactions/default-interactions.ts renamed to packages/canvas/container/src/interactions/html-interactions.ts

@@ -18,7 +18,7 @@
  * 缺陷：
  * 1. 如果画布无法挂载 data-uid 属性到 DOM 节点上，那么该节点无法反查到对应的 node 节点，导致 hover 、选中等逻辑无法生效。
  */
-import { nextTick, ref } from 'vue'
+import { ref } from 'vue'
 import { useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { NODE_TAG, NODE_UID, NODE_INACTIVE_UID } from '../../../common'
 import { getConfigure, scrollToNode, canvasState, getDocument, querySelectById } from '../container'
@@ -27,7 +27,8 @@ import {
   clearHover as commonClearHover,
   getClosedElementHasUid,
   getWindowRect,
-  hoverNodeById as commonHoverNodeById
+  hoverNodeById as commonHoverNodeById,
+  selectNodeById as commonSelectNodeById
 } from './common'
 import type { HoverOrSelectState } from './common'
 
@@ -112,7 +113,7 @@ export const useHoverNode = () => {
   }
 }
 
-const updateSelectedNode = async (e: MouseEvent, type: string) => {
+const updateSelectedNode = async (e: MouseEvent, type: string, isMultipleSelect = false) => {
   let res = getRectAndNode(e)
 
   if (!res) {
@@ -121,8 +122,6 @@ const updateSelectedNode = async (e: MouseEvent, type: string) => {
     return
   }
 
-  const isMultipleSelect = e.ctrlKey || e.metaKey
-
   // 选中的是非当前编辑页的节点，改为选中顶层节点
   if (!res.node && res.isInactiveNode) {
     // 多选选中非激活节点，忽略
@@ -171,44 +170,8 @@ const updateSelectedNode = async (e: MouseEvent, type: string) => {
   }
 }
 
-// TODO: 支持多选
-const selectNodeById = async (id: string, type: string) => {
-  // commonSelectNodeById(updateSelectedNode, id, type)
-  const element = querySelectById(id)
-  const { node, parent } = useCanvas().getNodeWithParentById(id) || {}
-
-  if (!element || !node) {
-    clearSelect()
-
-    return
-  }
-
-  const rect = element.getBoundingClientRect()
-  const componentName = node.componentName
-  const configure = getConfigure(componentName)
-
-  canvasState.current = node
-  canvasState.parent = parent
-  selectState.value = [
-    {
-      rect: {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height
-      },
-      node,
-      configure,
-      element,
-      componentName,
-      isInactiveNode: false
-    }
-  ]
-
-  // TODO: 改成事件通知
-  canvasState.emit('selected', node, parent, type, node?.id)
-  await nextTick()
-  await scrollToNode(element)
+const selectNodeById = async (id: string, type: string, isMultipleSelect = false) => {
+  commonSelectNodeById(updateSelectedNode, id, type, isMultipleSelect)
 }
 
 const updateSelectedRect = () => {
@@ -218,31 +181,29 @@ const updateSelectedRect = () => {
     }
 
     selectState.value = selectState.value.map((stateItem) => {
+      // 优先需要尝试使用 querySelectById 计算 位置
+      const element = querySelectById(stateItem.node.id)
+
+      if (element) {
+        const rect = element.getBoundingClientRect()
+
+        return {
+          ...stateItem,
+          rect: {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height
+          }
+        }
+      }
+
       const res = getRectAndNode({ target: stateItem.element } as unknown as MouseEvent)
 
       if (res?.node) {
         return res
       }
 
-      // 通过节点没法直接计算到 rect，可能是没法挂载 data-uid 属性，需要尝试使用 querySelectById
-      if (!res?.node) {
-        const element = querySelectById(stateItem.node.id)
-
-        if (element) {
-          const rect = element.getBoundingClientRect()
-
-          return {
-            ...stateItem,
-            rect: {
-              top: rect.top,
-              left: rect.left,
-              width: rect.width,
-              height: rect.height
-            }
-          }
-        }
-      }
-
       return stateItem
     })
   }, 0)

packages/canvas/container/src/interactions/index.ts

@@ -12,30 +12,32 @@
 import { ref } from 'vue'
 import { getMergeMeta } from '@opentiny/tiny-engine-meta-register'
 import { useHoverNode as useVueHoverNode, useSelectNode as useVueSelectNode } from './vue-interactions'
-import { useHoverNode as useDefaultHoverNode, useSelectNode as useDefaultSelectNode } from './default-interactions'
+import { useHoverNode as useDefaultHoverNode, useSelectNode as useDefaultSelectNode } from './html-interactions'
 
 const interactionHooksMap = {
   vue: {
     useHoverNode: useVueHoverNode,
     useSelectNode: useVueSelectNode
   },
-  default: {
+  html: {
     useHoverNode: useDefaultHoverNode,
     useSelectNode: useDefaultSelectNode
   }
 }
 
+type IInteractionHooksMap = typeof interactionHooksMap
+
 const getInteractionFn = () => {
-  const dslMode = getMergeMeta('engine.config')?.dslMode?.toLowerCase?.() as keyof typeof interactionHooksMap
+  const selectMode = getMergeMeta('engine.config')?.selectMode?.toLowerCase?.() as keyof IInteractionHooksMap
 
-  if (interactionHooksMap[dslMode]) {
-    return interactionHooksMap[dslMode]
+  if (interactionHooksMap[selectMode]) {
+    return interactionHooksMap[selectMode]
   }
 
-  return interactionHooksMap.default
+  return interactionHooksMap.vue
 }
 
-const interactionsFn = ref<typeof interactionHooksMap[keyof typeof interactionHooksMap] | null>(null)
+const interactionsFn = ref<IInteractionHooksMap[keyof IInteractionHooksMap] | null>(null)
 
 export const useHoverNode = () => {
   if (!interactionsFn.value) {

packages/canvas/container/src/interactions/vue-interactions.ts

@@ -24,7 +24,7 @@
 import { ref } from 'vue'
 import { useCanvas } from '@opentiny/tiny-engine-meta-register'
 import { NODE_TAG, NODE_UID } from '../../../common'
-import { canvasState, getConfigure, scrollToNode, getDocument } from '../container'
+import { canvasState, getConfigure, scrollToNode, getDocument, querySelectById } from '../container'
 import {
   initialHoverState,
   clearHover as commonClearHover,
@@ -56,9 +56,7 @@ export const getClosedVueElement = (element: HTMLElementWithVue | null): VueInst
 }
 
 const curHoverState = ref<HoverOrSelectState>(structuredClone(initialHoverState))
-
 const selectState = ref<HoverOrSelectState[]>([])
-
 const clearHover = () => commonClearHover(curHoverState)
 
 const getRectAndNode = (e: { target: HTMLElementWithVue }): HoverOrSelectState => {
@@ -82,15 +80,7 @@ const getRectAndNode = (e: { target: HTMLElementWithVue }): HoverOrSelectState =
   if (!uid) {
     let closedVueEle: VueInstanceInternal | undefined = instance
 
-    // TODO: 同步 develop 主干分支后，确认是否仍然需要  closedVueEle?.props?.schema?.id （当前没有的话选不中表格插槽里面的组件）
-    while (
-      closedVueEle &&
-      !(
-        closedVueEle.props?.schema?.id ||
-        closedVueEle.attrs?.[NODE_UID] ||
-        closedVueEle.attrs?.[NODE_TAG] === 'RouterView'
-      )
-    ) {
+    while (closedVueEle && !(closedVueEle.attrs?.[NODE_UID] || closedVueEle.attrs?.[NODE_TAG] === 'RouterView')) {
       closedVueEle = closedVueEle.parent
     }
 
@@ -149,16 +139,14 @@ const hoverNodeById = (id: string): void => {
   commonHoverNodeById(id, updateHoverNode)
 }
 
-const updateSelectedNode = async (e: MouseEvent, type: string): Promise<void> => {
+const updateSelectedNode = async (e: MouseEvent, type: string, isMultipleSelect = false): Promise<void> => {
   let res = getRectAndNode({ target: e.target as HTMLElementWithVue })
 
   if (!res) {
     clearSelect()
     return
   }
 
-  const isMultipleSelect = e.ctrlKey || e.metaKey
-
   if (!res.node && res.isInactiveNode) {
     // 多选选中非激活节点，忽略
     if (isMultipleSelect) {
@@ -213,8 +201,8 @@ const updateSelectedNode = async (e: MouseEvent, type: string): Promise<void> =>
   }
 }
 
-const selectNodeById = (id: string, type: string): void => {
-  commonSelectNodeById(updateSelectedNode, id, type)
+const selectNodeById = (id: string, type: string, isMultipleSelect = false): void => {
+  commonSelectNodeById(updateSelectedNode, id, type, isMultipleSelect)
 }
 
 export const useHoverNode = () => {
@@ -233,9 +221,18 @@ const updateSelectedRect = (): void => {
       return
     }
 
-    selectState.value = selectState.value.map((state) =>
-      getRectAndNode({ target: state.element as HTMLElementWithVue })
-    )
+    selectState.value = selectState.value.map((state) => {
+      // 这里不能直接计算原来的 element 来获取 rect，因为 element 可能已经被移除
+      // 或者是 text 节点，直接更新文本，并没有更新 element。
+      // 需要优先使用 querySelectById 来获取
+      const target = querySelectById(state.node?.id)
+
+      if (target) {
+        return getRectAndNode({ target: target as HTMLElementWithVue })
+      }
+
+      return getRectAndNode({ target: state.element as HTMLElementWithVue })
+    })
   }, 0)
 }