vue-wiring-diagram 1.0.15 → 1.0.17

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

@@ -146,10 +146,12 @@
 <script setup>
 import {onMounted, reactive, ref,} from "vue";
 import {DeleteFilled} from '@element-plus/icons-vue'
-import {showPorts} from "../common.js";
+import {getFieldList, showPorts} from "../common.js";
 import {get} from '../../http.js'
 import {ElMessageBox} from "element-plus";
 import {portOption} from "../settings.js";
+import {defaultMatch, defaultText} from "packages/components/tools.js";
+import {getDeviceList} from "/packages/components/common.js";
 
 defineOptions({
   name: 'text-control'
@@ -168,10 +170,8 @@ const fieldList = ref([])
 /**
  * 获取设备列表
  */
-const getDeviceList = () => {
-  get('/cny/custom/deviceList').then(res => {
-    deviceList.value = res.data
-  })
+const getDevices = async () => {
+  deviceList.value = await getDeviceList()
 }
 
 const deviceCode = ref() // 设备编码
@@ -190,19 +190,13 @@ const checkDevice = () => {
 /**
  * 获取字段列表
  */
-const getFields = () => {
-  get('/cny/custom/monitorInfo', {
-    deviceCode: currentDevice.deviceCode,
-    fieldType: 1
-  }).then(res => {
-    fieldList.value = res.data
-  })
+const getFields = async () => {
+  fieldList.value = await getFieldList(currentDevice.deviceCode)
 }
 
-const regexp = /\$\{(.*?)\}/g // 匹配${}
 
 const replace = (str) => {
-  return str.replace(regexp, '--')
+  return str.replace(defaultMatch, defaultText)
 }
 
 /**
@@ -219,16 +213,15 @@ const checkField = (row) => {
     const content = props.payload.data.content
     props.payload.data.content = text.value = content + '${' + currentDevice.deviceName + '.' + row.name + '}' + unit
     // 查找所有${}
-    const matches = content.match(regexp)
+    const matches = content.match(defaultMatch)
     const index = matches?.length || 0
-    props.payload.data.field.push({
+    props.payload.data.fields.push({
       index: index,
       deviceName: currentDevice.deviceName,
       deviceCode: currentDevice.deviceCode,
       field: row.dataField,
     })
     props.payload.label = replace(props.payload.data.content)
-    console.log('label:', props.payload.label, 'content:', props.payload.data.content, 'field:', props.payload.data.field)
   })
 }
 
@@ -271,11 +264,11 @@ const changeContent = () => {
     // 判断是否删除的是}
     if (props.payload.data.content.endsWith('}')) {
       // 找出所有的${}
-      const matches = props.payload.data.content.match(regexp)
+      const matches = props.payload.data.content.match(defaultMatch)
       if (matches) {
         const index = matches.length - 1
         // 删除数组中最后一个元素
-        props.payload.data.field.splice(index, 1)
+        props.payload.data.fields.splice(index, 1)
         // 删除字符串中最后一个${}
         text.value = props.payload.data.content.substring(0, props.payload.data.content.lastIndexOf('${'))
       }
@@ -362,7 +355,7 @@ const deletePort = (id) => {
 
 onMounted(() => {
   getPorts()
-  getDeviceList()
+  getDevices()
   document.addEventListener('selectionchange', () => {
     // 判断是否在输入框内
     if (document.activeElement.tagName === 'TEXTAREA') {

package/packages/components/tools.js

@@ -0,0 +1,231 @@
+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";
+import {lineOptions} from "packages/components/settings.js";
+import {STOP} from "packages/components/enums.js";
+
+/**
+ * 图形变换
+ * @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
+                },
+                modifiers: ['shift']
+            },
+        },
+        {
+            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',
+                },
+            },
+        },
+    ]);
+}
+
+/**
+ * 判断是直线还是管道
+ */
+export const isLineOrPipe = () => {
+    return lineOptions.attrs.line2.strokeDasharray === 0 ? 'line' : 'pipe'
+}
+
+/**
+ * 设置管道方向
+ * @param direction none无 forward-pipe正向 reverse-pipe反向
+ */
+export const setPipeDirection = (direction) => {
+    if (direction !== 'none') {
+        return direction + ' 30s infinite linear'
+    } else {
+        return ''
+    }
+}
+
+/**
+ * 设置随机数
+ * @returns {number}
+ */
+export const setMathRandom = () => {
+    return Math.random()
+}
+
+// 默认展示的字符串
+export const defaultText = '--'
+
+// 默认匹配字符串
+export const defaultMatch = /\$\{(.*?)\}/g
+
+// 默认条件单挑配置
+export const defaultCondition = {
+    min: 0,
+    max: 0,
+    direction: STOP,
+}