feat: support showLine #89

Author: ChuChencheng

examples/Feature.vue

@@ -138,6 +138,53 @@
       </div>
     </div>
 
+    <!-- 连接线 -->
+    <div class="panel">
+      <div class="header">连接线</div>
+      <div class="body">
+        <div class="interface">
+          <div style="height: 300px">
+            <VTree
+              ref="basicTreeRef"
+              :data="showLineTreeData"
+              :showLine="{ type: showLineType, polyline: showLinePolyline }"
+              defaultExpandAll
+            />
+          </div>
+        </div>
+        <div class="desc">
+          <div class="desc-block">
+            传入 showLine 可展示连接线，type 可指定连接线类型
+          </div>
+          <div class="desc-block">
+            showLine 传入对象可设置连接线的宽度，连线类型与颜色等<br/>
+            showLine.type:
+
+            <button
+              v-for="showLineType in (['solid', 'dashed'] as showLineType[])"
+              :key="showLineType"
+              @click="onShowLineTypeBtnClick(showLineType)"
+            >
+              {{ showLineType }}
+            </button>
+            <p>当前连接线类型：{{showLineType}}</p>
+          </div>
+          <div class="desc-block">
+            showLine.polyline:
+
+            <button
+              v-for="polyline in [true, false]"
+              :key="polyline"
+              @click="onShowLinePolylineBtnClick(polyline)"
+            >
+              {{ polyline }}
+            </button>
+            <p>是否启用折线：{{showLinePolyline}}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 远程 -->
     <div class="panel">
       <div class="header">远程</div>
@@ -165,6 +212,7 @@
 
 <script lang="ts">
 import VTree, { TreeNode } from '../src'
+import { showLineType } from '../src/constants'
 import { IgnoreType } from '../src/types'
 import treeDataGenerator from '../tests/tree-data-generator'
 import { defineComponent, ref, nextTick } from 'vue'
@@ -214,6 +262,80 @@ export default defineComponent({
     const checkableCascade = ref(true)
     const both = ref(genData().data)
     const bothValue = ref([])
+    const showLineTreeData = ref([
+      {
+        title: 'node-1',
+        id: 'node-1',
+        children: [
+          {
+            title: 'node-1-1',
+            id: 'node-1-1',
+            children: [
+              {
+                title: 'node-1-1-1',
+                id: 'node-1-1-1',
+              },
+              {
+                title: 'node-1-1-2',
+                id: 'node-1-1-2',
+              },
+              {
+                title: 'node-1-1-3',
+                id: 'node-1-1-3',
+              },
+            ],
+          },
+          {
+            title: 'node-1-2',
+            id: 'node-1-2',
+            children: [
+              {
+                title: 'node-1-2-1',
+                id: 'node-1-2-1',
+              },
+              {
+                title: 'node-1-2-2',
+                id: 'node-1-2-2',
+              },
+            ],
+          },
+          {
+            title: 'node-1-3',
+            id: 'node-1-3',
+            children: [
+              {
+                title: 'node-1-3-1',
+                id: 'node-1-3-1',
+              },
+              {
+                title: 'node-1-3-2',
+                id: 'node-1-3-2',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        title: 'node-2',
+        id: 'node-2',
+        children: [
+          {
+            title: 'node-2-1',
+            id: 'node-2-1',
+            children: [
+              {
+                title: 'node-2-1-1',
+                id: 'node-2-1-1',
+              },
+              {
+                title: 'node-2-1-2',
+                id: 'node-2-1-2',
+              },
+            ],
+          },
+        ],
+      },
+    ])
     const remoteShow = ref(false)
     const remoteLoad = (
       node: TreeNode | null,
@@ -285,6 +407,16 @@ export default defineComponent({
       console.log('node-right-click mouse position', e.x, e.y)
     }
 
+    const showLineType = ref()
+    const onShowLineTypeBtnClick = (type: showLineType) => {
+      showLineType.value = type
+    }
+
+    const showLinePolyline = ref(false)
+    const onShowLinePolylineBtnClick = (polyline: boolean) => {
+      showLinePolyline.value = polyline
+    }
+
     return {
       // 基本用法
       basicUsage,
@@ -314,6 +446,13 @@ export default defineComponent({
       both,
       bothValue,
 
+      // 连接线
+      showLineTreeData,
+      showLineType,
+      onShowLineTypeBtnClick,
+      showLinePolyline,
+      onShowLinePolylineBtnClick,
+
       // 远程
       remoteShow,
       remoteLoad,

examples/Performance.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <div class="tree">
-      <VTree ref="tree" :data="treeData" checkable selectable></VTree>
+      <VTree ref="tree" :data="treeData" checkable selectable :showLine="{ polyline: true }"></VTree>
     </div>
     <div class="control">
       <div class="desc-block">

src/components/Tree.vue

@@ -15,6 +15,7 @@
           :key="node[keyField]"
           :data="node"
           :getNode="getNode"
+          :noSiblingNodeMap="noSiblingNodeMap"
           v-on="treeNodeListeners"
           :class="
             typeof nodeClassName === 'function'
@@ -23,7 +24,6 @@
           "
           :style="{
             minHeight: `${nodeMinHeight}px`,
-            paddingLeft: `${node._level * nodeIndent}px`
           }"
           @check="handleNodeCheck"
           @select="handleNodeSelect"
@@ -150,6 +150,8 @@ export interface TreeProps {
   /** 节点根元素的 class ，传入函数以对每个节点定制 class */
   nodeClassName?: string | object | Array<string | object> | ((node: TreeNode) => string | object | Array<string | object>),
 
+  /** 连接线 */
+  showLine?: boolean | ShowLine
 
   /** 子节点缩进 */
   nodeIndent?: number,
@@ -204,6 +206,9 @@ import {
   watch,
   onMounted,
   onBeforeUnmount,
+  computed,
+  reactive,
+  toRefs,
 } from 'vue'
 import TreeStore, { TreeNode } from '../store'
 import CTreeNode from './TreeNode.vue'
@@ -213,7 +218,7 @@ import {
   dragHoverPartEnum,
 } from '../constants'
 import { STORE_EVENTS, TREE_EVENTS, TREE_NODE_EVENTS } from '../constants/events'
-import { TreeNodeKeyType, INonReactiveData, IgnoreType, AnyPropsArrayType, LoadFn } from '../types'
+import { TreeNodeKeyType, INonReactiveData, IgnoreType, AnyPropsArrayType, LoadFn, ShowLine } from '../types'
 import { useTreeCls } from '../hooks/useTreeCls'
 import { useVirtualList } from '../hooks/useVirtualList'
 import { useIframeResize } from '../hooks/useIframeResize'
@@ -342,6 +347,43 @@ const {
   updateRender,
 })
 
+const noSiblingNodeMap = computed(() => {
+  const parentsOfFirstNode: TreeNode[] = []
+  let nodeParent = renderNodes.value[0]?._parent
+
+  while (nodeParent) {
+    parentsOfFirstNode.push(nodeParent)
+    nodeParent = nodeParent._parent
+  }
+
+  const nodesToIterate = parentsOfFirstNode.concat(renderNodes.value)
+
+  const map: Record<string, true> = {}
+  const stack: TreeNode[] = []
+  nodesToIterate.forEach((renderNode) => {
+    const currentNodeLevel = renderNode._level
+    let length = stack.length
+    while (length) {
+      const stackNode = stack[length - 1]
+      const stackNodeLevel = stackNode._level
+      if (stackNodeLevel > currentNodeLevel) {
+        map[stackNode[props.keyField]] = true
+        stack.pop()
+      } else if (stackNodeLevel === currentNodeLevel) {
+        stack.pop()
+        break
+      } else break
+      length--
+    }
+    stack.push(renderNode)
+  })
+  stack.forEach((node) => {
+    map[node[props.keyField]] = true
+  })
+
+  return map
+})
+
 type VModelType = TreeNodeKeyType | TreeNodeKeyType[]
 
 const sameValue = (newVal: VModelType, valueCache: VModelType | undefined): boolean => {
@@ -555,9 +597,11 @@ const treeNodePropKeys = [
   'draggable',
   'droppable',
   'render',
+  'nodeIndent',
+  'showLine',
 ] as const
 
-const treeNodeProps = pickReadonly(props, ...treeNodePropKeys)
+const treeNodeProps = reactive(pickReadonly(toRefs(props), ...treeNodePropKeys))
 
 defineExpose({
   setData,