Merge pull request #101 from wsfe/feat/dash-density

feat: add dashDensity in showLine

examples/Feature.vue

@@ -147,7 +147,7 @@
           <div style="height: 300px">
             <VTree
               :data="showLineTreeData"
-              :showLine="{ type: showLineType, polyline: showLinePolyline }"
+              :showLine="{ type: showLineType, polyline: showLinePolyline, dashDensity }"
               defaultExpandAll
               animation
             />
@@ -169,6 +169,9 @@
               {{ showLineType }}
             </button>
             <p>当前连接线类型：{{showLineType}}</p>
+            <p v-if="showLineType === 'dashed'">
+              虚线密度：<input type="range" v-model.number="dashDensity" :min="1" :max="10" :step="1" /> {{ dashDensity }}
+            </p>
           </div>
           <div class="desc-block">
             showLine.polyline:
@@ -437,6 +440,8 @@ export default defineComponent({
       showLineType.value = type
     }
 
+    const dashDensity = ref(3)
+
     const showLinePolyline = ref(false)
     const onShowLinePolylineBtnClick = (polyline: boolean) => {
       showLinePolyline.value = polyline
@@ -485,6 +490,7 @@ export default defineComponent({
       onShowLineTypeBtnClick,
       showLinePolyline,
       onShowLinePolylineBtnClick,
+      dashDensity,
 
       // 自定义节点
       nodeSlotDescText,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wsfe/vue-tree",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "types": "./types",
   "description": "A vue tree component using virtual list.",
   "main": "./dist/vue-tree.umd.js",
@@ -67,7 +67,6 @@
     "@vue/repl": "^4.3.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
-    "@wsfe/vue-tree": "^4.0.1",
     "autoprefixer": "^10.4.19",
     "happy-dom": "^14.12.0",
     "less": "^4.2.0",

site/.vitepress/code/ShowLine.vue

@@ -19,6 +19,12 @@
       <input type="radio" id="showline-polyline-false" :value="false" v-model="polyline" />
       <label for="showline-polyline-false">false</label>
     </div>
+
+    <div v-if="type === 'dashed'">
+      <span>showLine.dashDensity: </span>
+      <input type="range" :min="1" :max="10" :step="1" v-model.number="dashDensity" />
+      <span>{{ dashDensity }}</span>
+    </div>
   </div>
   <VTree :data="data" :showLine="showLine" animation defaultExpandAll />
 </template>
@@ -29,11 +35,13 @@ import VTree from '@wsfe/vue-tree'
 
 const type = ref('solid')
 const polyline = ref(false)
+const dashDensity = ref(3)
 
 const showLine = computed(() => {
   return {
     type: type.value,
     polyline: polyline.value,
+    dashDensity: dashDensity.value,
   }
 })
 

site/.vitepress/components/PlaygroundLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <a :href="withBase(`/playground${serializedCode}`)" target="_blank" rel="noreferrer noopener">{{ text || i18n.openInPlayground }}</a>
+  <a :href="withBase('/playground') + serializedCode" target="_blank" rel="noreferrer noopener">{{ text || i18n.openInPlayground }}</a>
 </template>
 
 <script setup lang="ts">

site/.vitepress/config.mts

@@ -1,3 +1,4 @@
+import path from 'node:path'
 import { defineConfig } from 'vitepress'
 import zh from './zh.mjs'
 import en from './en.mjs'
@@ -31,6 +32,14 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/wsfe/vue-tree' }
     ]
   },
+  vite: {
+    resolve: {
+      alias: {
+        '@wsfe/vue-tree/style.css': path.resolve('src/styles/index.less'),
+        '@wsfe/vue-tree': path.resolve('src'),
+      },
+    },
+  },
 
   locales: {
     root: {

src/components/TreeNode.vue

@@ -10,9 +10,9 @@
             width: `${nodeIndent}px`,
           }"
         >
-          <polyline
+          <path
             fill="none"
-            :points="polylinePoints(index === data._level - 1)"
+            :d="polylinePoints(index === data._level - 1)"
             :stroke-width="strokeWidth"
             :stroke="showLineParams.color"
             :stroke-dasharray="strokeDasharray"
@@ -114,14 +114,21 @@ const showLineParams = computed(() => {
     type: showLineType.solid,
     color: '#D3D3D3',
     polyline: false,
+    dashDensity: 3,
   }
   let params: Required<ShowLine> = defaultParams
   if (typeof props.showLine === 'object') {
+    let dashDensity = defaultParams.dashDensity
+    if (typeof props.showLine.dashDensity === 'number' && props.showLine.dashDensity >= 1 && props.showLine.dashDensity <= 10) {
+      dashDensity = props.showLine.dashDensity
+    }
+
     params = {
       width: props.showLine.width ?? defaultParams.width,
       type: props.showLine.type ?? defaultParams.type,
       color: props.showLine.color ?? defaultParams.color,
       polyline: props.showLine.polyline ?? defaultParams.polyline,
+      dashDensity,
     }
   }
   return params
@@ -132,18 +139,18 @@ const strokeWidth = computed(() => showLineParams.value.width * 100 / props.node
 const strokeDasharray = computed(() => {
   switch (showLineParams.value.type) {
     case showLineType.dashed:
-      return '25'
+      return 100 / (showLineParams.value.dashDensity * 2)
     default:
       break
   }
   return 'none'
 })
 
 const polylinePoints = (isDirectParentLine: boolean) => {
-  if (!showLineParams.value.polyline || !isDirectParentLine) return '50,0 50,100'
+  if (!showLineParams.value.polyline || !isDirectParentLine) return 'M50,0 L50,100'
   const parent = props.getNode(props.data[props.keyField])?._parent
-  if (parent && props.noSiblingNodeMap[parent[props.keyField]] && props.noSiblingNodeMap[props.data[props.keyField]]) return '50,0 50,50 100,50 50,50'
-  return '50,0 50,50 100,50 50,50 50,100'
+  if (parent && props.noSiblingNodeMap[parent[props.keyField]] && props.noSiblingNodeMap[props.data[props.keyField]]) return 'M50,0 L50,50 M100,50 L50,50'
+  return 'M50,0 L50,100 M100,50 L50,50'
 }
 
 const {

src/types/index.ts

@@ -31,10 +31,18 @@ export interface INonReactiveData {
   blockNodes: TreeNode[]
 }
 
+// Utils to generate types like 1 | 2 | 3
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
+  ? Acc[number]
+  : Enumerate<N, [...Acc, Acc['length']]>
+
+type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>
+
 export interface ShowLine {
   /** 连接线宽度，svg stroke-width， 默认 1px */
   width?: number
   type?: showLineType
   color?: string
   polyline?: boolean
+  dashDensity?: IntRange<1, 11>
 }