vue-wiring-diagram 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-wiring-diagram",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "A Vue 3.x component for wiring diagram",
   "type": "module",
   "main": "dist/vue-wiring-diagram.umd.js",

package/packages/components/editor/index.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script setup>
-import {onMounted, reactive, ref, shallowRef} from "vue";
+import {defineComponent, onMounted, reactive, ref, shallowRef} from "vue";
 import moment from 'moment'
 import {ElMessage, ElTooltip} from "element-plus";
 import {getData, showPorts} from "../common.js";
@@ -75,22 +75,26 @@ import edgeControl from "../edge-control/index.vue";
 import Shortcuts from "../Shortcuts.vue";
 import {Graph} from "@antv/x6";
 import {Stencil} from '@antv/x6-plugin-stencil'
-import {Transform} from "@antv/x6-plugin-transform";
-import {Snapline} from "@antv/x6-plugin-snapline";
-import {Clipboard} from '@antv/x6-plugin-clipboard'
-import {Keyboard} from "@antv/x6-plugin-keyboard";
-import {Selection} from '@antv/x6-plugin-selection'
-import {History} from '@antv/x6-plugin-history'
 import {Export} from "@antv/x6-plugin-export";
 import imageControl from "../image-control/index.vue";
-import {imageOptions} from "../image-control/imageOptions.js";
 import {baseShape} from "../baseShape.js";
 import {portsOptions} from "../portsOptions.js";
 import {Document, View, ArrowDown} from "@element-plus/icons-vue";
 import WiringDiagramPreview from "../preview/index.vue";
 import ImageManagement from "../image-control/image-management.vue";
 import {get} from "packages/http.js";
-import towerPoles from "packages/assets/image/tower-poles.svg";
+import {
+  clipboard,
+  keyboard,
+  snapLine,
+  transform,
+  history,
+  selection,
+  setMathRandom,
+  deleteCell,
+  copyCell,
+  pasteCell, undoCell, redoCell, addLineTools
+} from "packages/components/tools.js";
 
 defineOptions({
   name: 'editor'
@@ -106,7 +110,7 @@ const props = defineProps({
 const graph = ref() // 画布实例
 // 控制器
 const controls = reactive({
-  label: null, // 控制器
+  label: '', // 控制器
   component: shallowRef(null), // 控制器组件
 })
 const controlsKey = ref(null) // 控制器key
@@ -117,13 +121,15 @@ const payload = ref(null)
  */
 const initGraph = () => {
   const container = document.getElementById('drawing-board')
-  window.__x6_instances__ = []
   graph.value = new Graph({
     container: container,
     autoResize: true,
     panning: true,
     mousewheel: true,
     connecting: {
+      snap: true,
+      allowEdge: true,
+      highlight: true,
       router: 'orth',
       connectionPoint: {
         name: 'anchor',
@@ -138,91 +144,74 @@ const initGraph = () => {
           zIndex: 0,
         })
       }
-    }
-  })
-  window.__x6_instances__.push(graph.value)
-
-  graph.value.use(
-      new Transform({
-        resizing: {
-          enabled: true,
-          preserveAspectRatio: false
-        },
-        rotating: true,
-      })
-  )
-
-  graph.value.use(new Keyboard())
-  graph.value.use(new Snapline())
-  graph.value.use(new Clipboard({
-    format(key) {
-      return key.replace(/\s/g, '').replace('cmd', 'command')
     },
-  }))
-  graph.value.use(new History())
-  graph.value.use(new Selection({
-    enabled: true,
-    multiple: true, //多选
-    rubberband: true, //框选节点
-    modifiers: ['alt'],
-    showNodeSelectionBox: true,
-  }))
-
+  })
+  graph.value.use(transform())
+  graph.value.use(keyboard())
+  graph.value.use(snapLine())
+  graph.value.use(clipboard())
+  graph.value.use(history())
+  graph.value.use(selection())
   graph.value.bindKey(['delete', 'backspace'], () => {
-    const cells = graph.value.getSelectedCells()
-    if (cells.length) {
-      graph.value.removeCells(cells)
-    }
-    return false
+    deleteCell(graph.value)
   })
-
   graph.value.bindKey(['ctrl+c', 'cmd + c'], () => {
-    const cells = graph.value.getSelectedCells()
-    if (cells.length) {
-      graph.value.copy(cells)
-      ElMessage.success('复制成功')
-    }
-    return false
+    copyCell(graph.value)
   })
-
   graph.value.bindKey(['ctrl+v', 'cmd + v'], () => {
-    if (!graph.value.isClipboardEmpty()) {
-      const cells = graph.value.paste({offset: 32})
-      graph.value.cleanSelection()
-      graph.value.select(cells)
-      ElMessage.success('粘贴成功')
-    }
-    return false
+    pasteCell(graph.value)
   })
-
   graph.value.bindKey(['ctrl+z', 'cmd + z'], () => {
-    if (graph.value.canUndo()) {
-      graph.value.undo()
-    }
-    return false
+    undoCell(graph.value)
   })
-
   graph.value.bindKey(['ctrl+y', 'cmd + y'], () => {
-    if (graph.value.canRedo()) {
-      graph.value.redo()
-    }
-    return false
+    redoCell(graph.value)
+  })
+
+  let setZIndexTimer = null
+
+  //给线添加拐点
+  graph.value.on('edge:mouseenter', ({cell}) => {
+    clearTimeout(setZIndexTimer)
+    cell.toFront()
+    addLineTools(cell)
+  })
+
+  // 隐藏线段的拐点
+  graph.value.on('edge:mouseleave', ({cell}) => {
+    setZIndexTimer = setTimeout(() => {
+      cell.toBack()
+      cell.removeTools()
+    }, 300)
+
+  })
+
+  //连接桩显示
+  graph.value.on('node:mouseenter', () => {
+    showPorts('#drawing-board', true)
+  })
+
+  //连接桩隐藏
+  graph.value.on('node:mouseleave', () => {
+    showPorts("#drawing-board", false)
   })
 
+  // 导出插件
+  graph.value.use(new Export())
+
   //选中画布
   graph.value.on('blank:click', ({e, x, y}) => {
     payload.value = graph
     controls.component = GraphControl
     controls.label = '画布属性'
-    controlsKey.value = moment().valueOf()
+    controlsKey.value = setMathRandom()
   })
 
 
   //选中节点
   graph.value.on('cell:click', ({cell}) => {
-    console.log('cell:click', cell, cell?.data?.type ?? cell?.shape)
     payload.value = cell
-    controlsKey.value = moment().valueOf()
+    controlsKey.value = setMathRandom()
     if (cell.data?.type === 'text') {
       controls.component = textControl
       controls.label = '文本属性'
@@ -246,43 +235,6 @@ const initGraph = () => {
     controls.component = null
     controls.label = null
   })
-
-  //给线添加拐点
-  graph.value.on('edge:mouseenter', ({cell}) => {
-    cell.addTools([
-      {
-        name: 'vertices',
-        args: {
-          snapRadius: 3,
-          attrs: {
-            r: 3,
-            fill: '#239edd',
-            cursor: 'move',
-            'stroke-width': 0
-          },
-          modifiers: ['alt']
-        },
-      },
-    ]);
-  })
-
-  // 隐藏线段的拐点
-  graph.value.on('edge:mouseleave', ({cell}) => {
-    cell.removeTools()
-  })
-
-  //连接桩显示
-  graph.value.on('node:mouseenter', () => {
-    showPorts('#drawing-board', true)
-  })
-
-  //连接桩隐藏
-  graph.value.on('node:mouseleave', () => {
-    showPorts("#drawing-board", false)
-  })
-
-  // 导出插件
-  graph.value.use(new Export())
 }
 
 const stencil = ref()
@@ -343,7 +295,6 @@ const initStencil = () => {
       document.getElementById('stencil').appendChild(stencil.value.container)
     })
   }).finally(() => {
-    // 添加 hover 事件监听器
     setTimeout(() => {
       const nodes = stencil.value.container.querySelectorAll('.x6-node');
       nodes.forEach((node, index) => {
@@ -358,7 +309,6 @@ const initStencil = () => {
             text.style.fill = '#ffffff';
           }
         }
-        // 添加 hover 事件监听器
         node.addEventListener('mouseenter', (e) => {
           if (index > baseShape.length) {
             const text = node.querySelector('text');
@@ -376,7 +326,7 @@ const initStencil = () => {
           }
         })
       });
-    }, 20)
+    }, 200)
   })
 }
 
@@ -469,7 +419,6 @@ const drawLine = () => {
  */
 const adaptive = () => {
   graph.value.zoomToFit({maxScale: 1, padding: 20})
-  // ElMessage.success('自适应成功')
 }
 
 const dialog = reactive({show: false}) // 弹窗

package/packages/components/graph-control/index.vue

@@ -76,7 +76,6 @@ import {ref} from "vue";
 const props = defineProps({
   payload: Object
 })
-console.log(props.payload.value.options.grid)
 const color = ref(props.payload.value.options.background?.color || null) // 画布背景颜色
 const visible = ref(props.payload.value.options?.grid?.visible || null) // 网格是否显示
 const size = ref(props.payload.value.options?.grid?.size || 10) // 网格大小

package/packages/components/settings.js

@@ -33,6 +33,7 @@ export const stencilOptions = {
     },
 }
 
+// 连接桩配置
 export const portOption = {
     position: 'absolute',
     args: {
@@ -93,7 +94,7 @@ export const textOptions = {
 }
 
 
-// 基础线配置
+// 线配置
 export const lineOptions = {
     line: {
         stroke: '#ffffff',
@@ -105,7 +106,7 @@ export const lineOptions = {
                 offset: 0,
             },
             name: null
-        }, //取消箭头
+        },
         targetMarker: {
             args: {
                 width: 10,
@@ -113,13 +114,6 @@ export const lineOptions = {
                 offset: 0,
             },
             name: null
-        }, //取消箭头
-    },
-    ports: {
-        groups: {
-            ports: {
-                portOption
-            },
-        }
+        },
     },
 }

package/packages/components/tools.js

@@ -0,0 +1,196 @@
+import {Transform} from "@antv/x6-plugin-transform";
+import {Keyboard} from "@antv/x6-plugin-keyboard";
+import {Snapline} from "@antv/x6-plugin-snapline";
+import {Clipboard} from "@antv/x6-plugin-clipboard";
+import {History} from "@antv/x6-plugin-history";
+import {Selection} from "@antv/x6-plugin-selection";
+
+/**
+ * 图形变换
+ * @returns {Transform}
+ */
+export const transform = () => {
+    return new Transform({
+        resizing: {
+            enabled: true,
+            preserveAspectRatio: false
+        },
+        rotating: true,
+    })
+}
+
+/**
+ * 快捷键
+ * @returns {Keyboard}
+ */
+export const keyboard = () => {
+    return new Keyboard()
+}
+
+/**
+ * 吸附线
+ * @returns {Snapline}
+ */
+export const snapLine = () => {
+    return new Snapline()
+}
+
+/**
+ * 复制粘贴
+ * @returns {Clipboard|*}
+ */
+export const clipboard = () => {
+    return new Clipboard({
+        format(key) {
+            return key.replace(/\s/g, '').replace('cmd', 'command')
+        },
+    })
+}
+
+// 排除撤销重做的命令
+const excludeHistoryCommand = [
+    'tools',
+    'ports'
+]
+
+/**
+ * 撤销重做
+ * @returns {History}
+ */
+export const history = () => {
+    return new History({
+        beforeAddCommand: (name, args) => {
+            if (excludeHistoryCommand.includes(args.key)) {
+                return false
+            }
+        }
+    })
+}
+
+/**
+ * 框选
+ * @returns {Selection}
+ */
+export const selection = () => {
+    return new Selection({
+        enabled: true,
+        multiple: true, //多选
+        rubberband: true, //框选节点
+        modifiers: ['alt'],
+        showNodeSelectionBox: true,
+    })
+}
+
+/**
+ * 删除
+ * @param graph
+ * @returns {boolean}
+ */
+export const deleteCell = (graph) => {
+    const cells = graph.getSelectedCells()
+    if (cells.length) {
+        graph.removeCells(cells)
+    }
+}
+
+/**
+ * 复制
+ * @param graph
+ * @returns {boolean}
+ */
+export const copyCell = (graph) => {
+    const cells = graph.getSelectedCells()
+    if (cells.length) {
+        graph.copy(cells)
+    }
+}
+
+/**
+ * 粘贴
+ * @param graph
+ * @returns {boolean}
+ */
+export const pasteCell = (graph) => {
+    if (!graph.isClipboardEmpty()) {
+        const cells = graph.paste({offset: 32})
+        graph.cleanSelection()
+        graph.select(cells)
+    }
+}
+
+/**
+ * 撤销
+ * @param graph
+ * @returns {boolean}
+ */
+export const undoCell = (graph) => {
+    if (graph.canUndo()) {
+        graph.undo()
+    }
+}
+
+/**
+ * 重做
+ * @param graph
+ * @returns {boolean}
+ */
+export const redoCell = (graph) => {
+    if (graph.canRedo()) {
+        graph.redo()
+    }
+}
+
+/**
+ * 添加线工具
+ * @param cell
+ */
+export const addLineTools = (cell) => {
+    cell.addTools([
+        {
+            name: 'vertices',
+            args: {
+                snapRadius: 3,
+                attrs: {
+                    r: 3,
+                    fill: '#239edd',
+                    cursor: 'move',
+                    'stroke-width': 2
+                },
+            },
+        },
+        {
+            name: 'segments',
+            args: {
+                attrs: {
+                    stroke: '#239edd',
+                    strokeWidth: 2,
+                    strokeDasharray: '5 5',
+                },
+            },
+        },
+        {
+            name: 'source-arrowhead',
+            args: {
+                attrs: {
+                    stroke: '#239edd',
+                },
+            },
+        },
+        {
+            name: 'target-arrowhead',
+            args: {
+                attrs: {
+                    stroke: '#239edd',
+                },
+            },
+        },
+    ]);
+}
+
+/**
+ * 设置随机数
+ * @returns {number}
+ */
+export const setMathRandom = () => {
+    return Math.random()
+}