vue-wiring-diagram 1.0.15 → 1.0.17

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, isLineOrPipe
+} 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,14 +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',
@@ -133,97 +138,88 @@ const initGraph = () => {
       createEdge() {
         return graph.value.createEdge({
           inherit: 'edge',
-          attrs: {
-            ...lineOptions,
+          ...lineOptions,
+          data: {
+            type: isLineOrPipe(),
           },
           zIndex: 0,
         })
       }
-    }
+    },
+  })
+  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'], () => {
+    deleteCell(graph.value)
+  })
+  graph.value.bindKey(['ctrl+c', 'cmd + c'], () => {
+    copyCell(graph.value)
+  })
+  graph.value.bindKey(['ctrl+v', 'cmd + v'], () => {
+    pasteCell(graph.value)
+  })
+  graph.value.bindKey(['ctrl+z', 'cmd + z'], () => {
+    undoCell(graph.value)
+  })
+  graph.value.bindKey(['ctrl+y', 'cmd + y'], () => {
+    redoCell(graph.value)
   })
-  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,
-  }))
+  let setZIndexTimer = null
 
-  graph.value.bindKey(['delete', 'backspace'], () => {
-    const cells = graph.value.getSelectedCells()
-    if (cells.length) {
-      graph.value.removeCells(cells)
-    }
-    return false
+  graph.value.on('edge:click', ({cell}) => {
+    payload.value = cell
+    controls.component = edgeControl
+    controls.label = '线段属性'
+    controlsKey.value = setMathRandom()
   })
 
-  graph.value.bindKey(['ctrl+c', 'cmd + c'], () => {
-    const cells = graph.value.getSelectedCells()
-    if (cells.length) {
-      graph.value.copy(cells)
-      ElMessage.success('复制成功')
-    }
-    return false
+  //给线添加拐点
+  graph.value.on('edge:mouseenter', ({cell}) => {
+    clearTimeout(setZIndexTimer)
+    cell.toFront()
+    addLineTools(cell)
   })
 
-  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
+  // 隐藏线段的拐点
+  graph.value.on('edge:mouseleave', ({cell}) => {
+    setZIndexTimer = setTimeout(() => {
+      cell.toBack()
+      cell.removeTools()
+    }, 300)
+
   })
 
-  graph.value.bindKey(['ctrl+z', 'cmd + z'], () => {
-    if (graph.value.canUndo()) {
-      graph.value.undo()
-    }
-    return false
+  //连接桩显示
+  graph.value.on('node:mouseenter', () => {
+    showPorts('#drawing-board', true)
   })
 
-  graph.value.bindKey(['ctrl+y', 'cmd + y'], () => {
-    if (graph.value.canRedo()) {
-      graph.value.redo()
-    }
-    return false
+  //连接桩隐藏
+  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 = '文本属性'
@@ -247,43 +243,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()
@@ -344,7 +303,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) => {
@@ -359,7 +317,6 @@ const initStencil = () => {
             text.style.fill = '#ffffff';
           }
         }
-        // 添加 hover 事件监听器
         node.addEventListener('mouseenter', (e) => {
           if (index > baseShape.length) {
             const text = node.querySelector('text');
@@ -377,7 +334,7 @@ const initStencil = () => {
           }
         })
       });
-    }, 20)
+    }, 200)
   })
 }
 
@@ -442,9 +399,9 @@ const drawLine = () => {
       edge.value = graph.value.addEdge({
         source: {x: x, y: y},
         target: {x: x, y: y},
-        attrs: lineOptions,
+        ...lineOptions,
         data: {
-          type: 'edge',
+          type: isLineOrPipe(),
           isConnector: false,
         },
         zIndex: 0,
@@ -470,7 +427,6 @@ const drawLine = () => {
  */
 const adaptive = () => {
   graph.value.zoomToFit({maxScale: 1, padding: 20})
-  // ElMessage.success('自适应成功')
 }
 
 const dialog = reactive({show: false}) // 弹窗
@@ -582,3 +538,5 @@ onMounted(() => {
 <style lang="scss" scoped>
 @use "../../styles/editor";
 </style>
+
+<style></style>

package/packages/components/enums.js

@@ -0,0 +1,60 @@
+// 线类型
+export const typeList = [{
+    label: '直线',
+    value: 'line',
+}, {
+    label: '管道',
+    value: 'pipe',
+}]
+
+// 箭头类型
+export const arrowList = [
+    {
+        label: 'Block',
+        value: 'block'
+    },
+    {
+        label: 'Classic',
+        value: 'classic'
+    },
+    {
+        label: 'Diamond',
+        value: 'diamond'
+    },
+    {
+        label: 'Cross',
+        value: 'cross'
+    },
+    {
+        label: 'Async',
+        value: 'async'
+    },
+    {
+        label: 'Circle',
+        value: 'circle'
+    },
+    {
+        label: 'CirclePlus',
+        value: 'circlePlus'
+    },
+    {
+        label: 'Ellipse',
+        value: 'ellipse'
+    },
+]
+
+export const STOP = 'stop'
+export const FORWARD_PIPE = 'forward-pipe'
+export const REVERSE_PIPE = 'reverse-pipe'
+
+// 管道方向
+export const directionList = [{
+    label: '停止',
+    value: STOP,
+}, {
+    label: '正向',
+    value: FORWARD_PIPE ,
+}, {
+    label: '反向',
+    value: REVERSE_PIPE,
+}]

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/preview/index.vue

@@ -12,6 +12,7 @@ import {onMounted, onUnmounted, ref, shallowRef} from "vue";
 import {Graph} from "@antv/x6";
 import {getData, getRealData, showPorts} from "../common.js";
 import {ElMessage} from "element-plus";
+import {defaultMatch, defaultText, setPipeDirection} from "packages/components/tools.js";
 
 defineOptions({
   name: 'wiring-diagram-preview'
@@ -42,9 +43,6 @@ const props = defineProps({
   }
 })
 
-// 所有字段
-const allFields = ref([])
-
 // 画布
 const graph = ref()
 
@@ -94,7 +92,7 @@ const renderData = async () => {
   if (props.id) {
     const {background: bg, grid: gd, data: dt} = await getData(props.id);
     background = bg;
-    grid = {};
+    grid = gd;
     data = dt;
   } else {
     background = props.background;
@@ -110,30 +108,27 @@ const renderData = async () => {
 
 // 定时器
 const timer = ref(null)
-// 获取所有节点中 data.type 为 text 的节点
-const textNodes = ref([])
+// 节点
+const cells = ref([])
+// 参数
+const allFields = ref([])
 
 /**
  * 刷新数据
  */
 const refreshData = () => {
-  textNodes.value = getNodes()
-  const regex = /\$\{(.*?)\}/g;
+  cells.value = graph.value.getCells().filter(cell => cell?.data?.type === 'text' || cell?.data?.type === 'pipe')
+  cells.value.forEach(item => {
+    if (item?.data?.fields?.length) {
+      item.data.fields.forEach(field => {
+        if (field.field) {
+          allFields.value.push({id: item?.id, fields: item?.data.fields})
+        }
+      })
 
-  textNodes.value.forEach(node => {
-    // 确保 node.data 和 node.data.field 存在
-    if (!node.data || !node.data.field) return;
-
-    const matches = node.data.content.match(regex);
-    allFields.value.push(...node.data.field);
-
-    if (matches) {
-      node.matches = matches;
     }
-  });
-  if (!textNodes) {
-    return
-  }
+  })
+  console.log('所有字段', allFields.value)
   setFieldData()
 }
 
@@ -160,61 +155,69 @@ const setFieldData = async () => {
 
   isAllowRefresh.value = false
 
-  const realData = await getRealData(allFields.value)
+  let realData = await getRealData(allFields.value).catch(() => {
+    isAllowRefresh.value = true
+  })
 
   isAllowRefresh.value = true
 
-  if (!Array.isArray(realData) || !realData.length) {
-    return
-  }
-
-  let length = 0
-  textNodes.value.forEach((node, index) => {
-    // 确保 node.data 和 node.data.field 存在
-    if (!node.data || !node.data.field) return;
-
-    const matches = node.matches;
-    if (matches) {
-      const start = index === 0 ? 0 : length || 0;
-      const end = length = start + node.data.field.length;
-      node.label = replaceAllTemplateLiteralsWithArray(node.data.content, realData.slice(start, end));
+  realData?.forEach(item => {
+    const cell = graph.value.getCellById(item.id)
+    if (cell.data.type === 'text') {
+      cell.label = replaceAllTemplateLiteralsWithArray(cell.data.content, item.fields)
     }
-  });
+    if (cell.data.type === 'pipe') {
+      console.log('管道详情', cell, item.fields?.[0].value)
+      setPipe(cell, item.fields?.[0].value)
+      // TODO: 暂时不支持管道
+    }
+  })
   timer.value = setTimeout(() => {
     setFieldData()
   }, 10000)
 }
 
-
 /**
- * 获取所有节点中 data.type 为 text 的节点
+ * 替换模板字符串
+ * @param str 模板字符串
+ * @param fields 替换数组
+ * @returns {*}
  */
-const getNodes = () => {
-  const nodes = graph.value.getNodes()
-  return nodes.filter(node => node.data?.type === 'text')
+const replaceAllTemplateLiteralsWithArray = (str, fields) => {
+  let index = 0
+  return str.replace(defaultMatch, (match, p1) => {
+    const field = fields.find(item => item.index === index)
+    index++
+    if (field) {
+      return field.value
+    } else {
+      return defaultText
+    }
+  })
 }
 
 /**
- * 替换模板字符串
- * @param str 模板字符串
- * @param replacements 替换数组
- * @returns {*}
+ * 设置管道
+ * @param cell
+ * @param value
  */
-const replaceAllTemplateLiteralsWithArray = (str, replacements) => {
-  let index = 0;
-  return str.replace(/\$\{.*?\}/g, () => {
-    if (index < replacements.length) {
-      return replacements[index++];
+const setPipe = (cell, value) => {
+  if(!cell.data.isCondition) {
+    return false
+  }
+  for (let i = 0; i < cell.data.condition.length; i++) {
+    if (value > cell.data.condition[i].min && value <= cell.data.condition[i].max) {
+      cell.attr('line2/style/animation', setPipeDirection(cell.data.condition[i].direction))
+      return false
     }
-    return '--'; // 如果替换数组长度不够，返回空字符串或其他默认值
-  });
+  }
 }
 
 /**
  * \@description 画布自适应
  */
 const zoomToFit = () => {
-  graph.value.zoomToFit({maxScale: 10, padding: 20})
+  graph.value.zoomToFit({maxScale: 1.4, padding: 20})
 }
 
 const previewRef = shallowRef()

package/packages/components/settings.js

@@ -33,6 +33,7 @@ export const stencilOptions = {
     },
 }
 
+// 连接桩配置
 export const portOption = {
     position: 'absolute',
     args: {
@@ -81,7 +82,7 @@ export const textOptions = {
     data: {
         type: 'text',
         content: '文本',
-        field: []
+        fields: []
     },
     ports: {
         groups: {
@@ -93,33 +94,51 @@ export const textOptions = {
 }
 
 
-// 基础线配置
+// 线配置
 export const lineOptions = {
-    line: {
-        stroke: '#ffffff',
-        strokeWidth: 1,
-        sourceMarker: {
-            args: {
-                width: 10,
-                height: 10,
-                offset: 0,
-            },
-            name: null
-        }, //取消箭头
-        targetMarker: {
-            args: {
-                width: 10,
-                height: 10,
-                offset: 0,
+    markup: [
+        {
+            tagName: 'path',
+            selector: 'line1',
+            groupSelector: 'lines'
+        },
+        {
+            tagName: 'path',
+            selector: 'line2',
+            groupSelector: 'lines'
+        },
+    ],
+    attrs: {
+        lines: {
+            connection: true,
+            strokeLinejoin: 'round',
+            fill: 'none',
+            strokeWidth: 2,
+        },
+        line1: {
+            stroke: '#2364DD',
+            strokeWidth: 1,
+        },
+        line2: {
+            stroke: '#ffffff',
+            strokeWidth: 1,
+            strokeDasharray: 0,
+            sourceMarker: {
+                args: {
+                    width: 10,
+                    height: 10,
+                    offset: 0,
+                },
+                name: null
             },
-            name: null
-        }, //取消箭头
-    },
-    ports: {
-        groups: {
-            ports: {
-                portOption
+            targetMarker: {
+                args: {
+                    width: 10,
+                    height: 10,
+                    offset: 0,
+                },
+                name: null
             },
-        }
-    },
+        },
+    }
 }