workflow-editor 0.0.90-up → 0.0.91-up

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "workflow-editor",
   "private": false,
-  "version": "0.0.90-up",
+  "version": "0.0.91-up",
   "type": "module",
   "main": "./lib/workflow-editor.js",
   "scripts": {

package/packages/workflow-editor/src/main/canvas.vue

@@ -438,6 +438,10 @@ export default {
         const controlPoints = transition.lineInfo.controlPoint
         controlPoints[pointIndex] = this.currentPosition
         // this.$set(controlPoints, pointIndex, this.currentPosition)
+      } else if (transition.lineInfo && transition.lineInfo.type === 'RightAngleLine') {
+        const pointIndex = this.controlPointToMove.pointIndex
+        const controlPoints = transition.lineInfo.controlPoint
+        controlPoints[pointIndex] = this.currentPosition
       }
     },
     endDrag(event) {

package/packages/workflow-editor/src/main/context-menu.vue

@@ -9,6 +9,7 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import IconSvg from './icon-svg'
+import { getJoint, createRightAngleControlPoints } from '../util'
 export default {
   name: 'ContextMenu',
   components: {
@@ -20,6 +21,7 @@ export default {
         { name: 'switch-line-type-StraightLine', label: this.$t('workflowEditor.main.straightLine'), icon: 'switch' },
         { name: 'switch-line-type-CurveLine', label: this.$t('workflowEditor.main.curveLine'), icon: 'switch' },
         { name: 'switch-line-type-BrokenLine', label: this.$t('workflowEditor.main.brokenLine'), icon: 'switch' },
+        { name: 'switch-line-type-RightAngleLine', label: this.$t('workflowEditor.main.rightAngleLine'), icon: 'switch' },
         { name: 'remove', label: this.$t('workflowEditor.common.remove'), icon: 'delete' },
         { name: 'properties', label: this.$t('workflowEditor.common.attribute'), icon: 'properties' }
       ],
@@ -78,6 +80,12 @@ export default {
     switchLineType(lineType) {
       this.selectedTransition.lineInfo.controlPoint = null
       this.selectedTransition.lineInfo.type = lineType
+      // 直角折线：切换后（包括再次点击同一个线型，此时组件不会重建、created钩子不会执行）立即生成默认折点
+      if (lineType === 'RightAngleLine') {
+        const startPoint = getJoint(this.selectedTransition.startJoint.parent, this.selectedTransition.startJoint.position)
+        const endPoint = getJoint(this.selectedTransition.endJoint.parent, this.selectedTransition.endJoint.position)
+        this.selectedTransition.lineInfo.controlPoint = createRightAngleControlPoints(startPoint, endPoint)
+      }
     },
     execute(menu) {
       console.log('menu:' + menu)

package/packages/workflow-editor/src/transitions/right-angle-line.vue

@@ -0,0 +1,139 @@
+<template>
+  <g>
+    <path
+      :d="path"
+      marker-end="url(#arrow)"
+      @dblclick.stop="addBreakPoint"
+    />
+    <template v-if="owner.isSelected">
+      <template v-if="controlPoint">
+        <circle
+          v-for="(point,index) in controlPoint"
+          :key="index"
+          :cx="point.x"
+          :cy="point.y"
+          r="3"
+          class="control-point"
+          @mousedown.stop="startDrag(index, $event)"
+          @mouseup.stop="endDrag"
+          @dblclick.stop="removeBreakPoint(index)"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+<script>
+import { getJoint, getMousePosition, createRightAngleControlPoints } from '../util'
+import { mapMutations } from 'vuex'
+export default {
+  name: 'RightAngleLine',
+  props: {
+    owner: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    startPoint() {
+      return getJoint(this.owner.startJoint.parent, this.owner.startJoint.position)
+    },
+    endPoint() {
+      return getJoint(this.owner.endJoint.parent, this.owner.endJoint.position)
+    },
+    controlPoint() {
+      return this.owner.lineInfo.controlPoint
+    },
+    // 直角折线由两个折点、三段组成，默认形成 Z 字形
+    path() {
+      let myPath = 'M ' + this.startPoint.x + ' ' + this.startPoint.y + ' '
+      if (this.controlPoint) {
+        this.controlPoint.forEach(point => {
+          myPath += 'L ' + point.x + ' ' + point.y
+        })
+      }
+      myPath += 'L ' + this.endPoint.x + ' ' + this.endPoint.y
+      return myPath
+    }
+  },
+  created: function() {
+    // controlPoint没有值时需要给一个初始值：默认生成两个折点（保证不重合），形成 Z 字形直角折线
+    if (!this.owner.lineInfo.controlPoint || this.owner.lineInfo.controlPoint.length === 0) {
+      this.initDefaultControlPoints()
+    }
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setControlPointToMove'
+    ]),
+    // 生成默认的两个折点，保证两个点不重合、不会都堆在中间
+    initDefaultControlPoints() {
+      this.owner.lineInfo.controlPoint = createRightAngleControlPoints(this.startPoint, this.endPoint)
+    },
+    // 所有顶点（起点、折点、终点）
+    allPoints() {
+      const points = [{ x: this.startPoint.x, y: this.startPoint.y }]
+      if (this.controlPoint) {
+        this.controlPoint.forEach(p => points.push({ x: parseFloat(p.x), y: parseFloat(p.y) }))
+      }
+      points.push({ x: this.endPoint.x, y: this.endPoint.y })
+      return points
+    },
+    // 双击线段：在该线段上新增一个折点（吸附到线段，保持整条线横平竖直）
+    addBreakPoint($event) {
+      if (!$event) return
+      // 防御：折点为空时（例如切换线型后未初始化）先补上默认折点
+      if (!this.controlPoint || this.controlPoint.length === 0) {
+        this.initDefaultControlPoints()
+      }
+      const pos = getMousePosition($event)
+      const points = this.allPoints()
+      // 点击位置离某个已有顶点太近时不做处理，避免产生多余的微小线段
+      for (const p of points) {
+        if (Math.hypot(pos.x - p.x, pos.y - p.y) < 8) {
+          return
+        }
+      }
+      let bestIndex = -1
+      let bestDist = Infinity
+      let newPoint = null
+      for (let i = 0; i < points.length - 1; i++) {
+        const p1 = points[i]
+        const p2 = points[i + 1]
+        // 把点击点投影到线段所在的水平/垂直线上
+        const isHorizontal = Math.abs(p1.y - p2.y) < Math.abs(p1.x - p2.x)
+        const proj = isHorizontal ? { x: pos.x, y: p1.y } : { x: p1.x, y: pos.y }
+        const dist = Math.hypot(pos.x - proj.x, pos.y - proj.y)
+        if (dist < bestDist) {
+          bestDist = dist
+          bestIndex = i
+          newPoint = proj
+        }
+      }
+      if (bestIndex >= 0 && newPoint) {
+        this.controlPoint.splice(bestIndex, 0, newPoint)
+      }
+    },
+    // 双击折点：删除该折点（至少保留一个折点）
+    removeBreakPoint(index) {
+      if (this.controlPoint && this.controlPoint.length > 1) {
+        this.controlPoint.splice(index, 1)
+      }
+    },
+    startDrag(pointIndex, $event) {
+      this.setControlPointToMove({
+        owner: this.owner,
+        pointIndex: pointIndex
+      })
+    },
+    endDrag() {
+      this.setControlPointToMove(null)
+    }
+  }
+}
+</script>
+<style scoped>
+.control-point{
+  fill: #fff;
+  cursor: move;
+}
+</style>

package/packages/workflow-editor/src/transitions/transition.vue

@@ -39,12 +39,14 @@ import { mapGetters, mapMutations } from 'vuex'
 import StraightLine from './straight-line'
 import CurveLine from './curve-line'
 import BrokenLine from './broken-line'
+import RightAngleLine from './right-angle-line'
 export default {
   name: 'Transition',
   components: {
     StraightLine,
     CurveLine,
-    BrokenLine
+    BrokenLine,
+    RightAngleLine
   },
   props: {
     model: {
@@ -102,7 +104,7 @@ export default {
       const point = this.getTextPoint()
       this.text.x = point.x
       this.text.y = point.y
-    })
+    }, { deep: true })
     // 水平拖动起点节点
     this.$watch('model.startJoint.parent.x', function (newVal) {
       // 计算文本框的x、y坐标
@@ -165,6 +167,24 @@ export default {
             textY = minY + Math.abs(startPoint.y - point.y) / 2 - 10
           }
         }
+      } else if (this.model.lineInfo.type === 'RightAngleLine') {
+        // 直角折线：文字放在所有折点（含端点）包围盒的中心
+        if (this.model.lineInfo.controlPoint && this.model.lineInfo.controlPoint.length > 0) {
+          let minX = Math.min(startPoint.x, endPoint.x)
+          let minY = Math.min(startPoint.y, endPoint.y)
+          let maxX = Math.max(startPoint.x, endPoint.x)
+          let maxY = Math.max(startPoint.y, endPoint.y)
+          this.model.lineInfo.controlPoint.forEach(p => {
+            const px = parseFloat(p.x)
+            const py = parseFloat(p.y)
+            minX = Math.min(minX, px)
+            minY = Math.min(minY, py)
+            maxX = Math.max(maxX, px)
+            maxY = Math.max(maxY, py)
+          })
+          textX = (minX + maxX) / 2
+          textY = (minY + maxY) / 2
+        }
       }
       return { x: textX, y: textY }
     },

package/packages/workflow-editor/src/util.js

@@ -175,6 +175,36 @@ function getJoint(parent, position) {
       return { position: '', x: parent.x, y: parent.y }
   }
 }
+
+// 生成直角折线的默认折点（两个），保证两个点不重合、有间距
+function createRightAngleControlPoints(startPoint, endPoint) {
+  const dx = Math.abs(endPoint.x - startPoint.x)
+  const dy = Math.abs(endPoint.y - startPoint.y)
+  if (dy < 20) {
+    // 两个节点横向排列：两个折点沿水平线错开（约 1/3、2/3 处），不做纵向凸起
+    const x1 = startPoint.x + (endPoint.x - startPoint.x) / 3
+    const x2 = startPoint.x + 2 * (endPoint.x - startPoint.x) / 3
+    return [
+      { x: x1, y: startPoint.y },
+      { x: x2, y: endPoint.y }
+    ]
+  } else if (dx < 20) {
+    // 两个节点纵向排列：两个折点沿垂直线错开（约 1/3、2/3 处），不做横向凸起
+    const y1 = startPoint.y + (endPoint.y - startPoint.y) / 3
+    const y2 = startPoint.y + 2 * (endPoint.y - startPoint.y) / 3
+    return [
+      { x: startPoint.x, y: y1 },
+      { x: endPoint.x, y: y2 }
+    ]
+  } else {
+    // 一般斜向：经典 Z 字形，中间竖段位于水平中点，两个折点一上一下
+    const midX = startPoint.x + (endPoint.x - startPoint.x) / 2
+    return [
+      { x: midX, y: startPoint.y },
+      { x: midX, y: endPoint.y }
+    ]
+  }
+}
 // 根据鼠标的位置clientX,clientY算出对应的SVG中的坐标
 function getMousePosition(evt) {
   const CTM = document.getElementById('svg').getScreenCTM()
@@ -371,7 +401,7 @@ function generateTransitions(type, arr) {
         x: point[0],
         y: point[1]
       }
-    } else if (transition.g.lineType === 'BrokenLine' && transition.g.coordinate) {
+    } else if ((transition.g.lineType === 'BrokenLine' || transition.g.lineType === 'RightAngleLine') && transition.g.coordinate) {
       const points = transition.g.coordinate.split(';')
       const controlPoints = []
       points.forEach(pointXY => {
@@ -476,7 +506,7 @@ function watchShowName(vm, newVal) {
   return showName
 }
 export {
-  clearAllSelectedComponents, deepCopy, endDragTache, findIncomingTransitionsByTacheId, findOutgoingTransitionsByTacheId, findTacheById, getClientMousePosition, getComponentInfo, getI18n, getJoint, getMouseOffset, getMousePosition, getRealRegion, getVirtualRegion, initializeProcessData, removeTextProperty, startDragTache, updateTransitionsWhenTacheIdChanged,
+  clearAllSelectedComponents, createRightAngleControlPoints, deepCopy, endDragTache, findIncomingTransitionsByTacheId, findOutgoingTransitionsByTacheId, findTacheById, getClientMousePosition, getComponentInfo, getI18n, getJoint, getMouseOffset, getMousePosition, getRealRegion, getVirtualRegion, initializeProcessData, removeTextProperty, startDragTache, updateTransitionsWhenTacheIdChanged,
   validateTacheCode, watchShowName
 }
 

package/packages/workflow-editor/src/workflow-editor.vue

@@ -432,7 +432,7 @@ export default {
         }
         if (transition.lineInfo.type === 'CurveLine' && transition.lineInfo.controlPoint) {
           transition.ref.g.coordinate = transition.lineInfo.controlPoint.x + ',' + transition.lineInfo.controlPoint.y
-        } else if (transition.lineInfo.type === 'BrokenLine' && transition.lineInfo.controlPoint) {
+        } else if ((transition.lineInfo.type === 'BrokenLine' || transition.lineInfo.type === 'RightAngleLine') && transition.lineInfo.controlPoint) {
           let coordinate = ''
           transition.lineInfo.controlPoint.forEach((point) => {
             coordinate += point.x + ',' + point.y + ';'

package/src/i18n/langs/cn.js

@@ -108,7 +108,8 @@ const cn = {
       tacheType: '环节类型',
       straightLine: '直线',
       curveLine: '曲线',
-      brokenLine: '折线'
+      brokenLine: '折线',
+      rightAngleLine: '直角线'
     },
     // 公共属性
     common: {

package/src/i18n/langs/en.js

@@ -108,7 +108,8 @@ const en = {
       tacheType: 'Tache Type',
       straightLine: 'Straight Line',
       curveLine: 'Curve Line',
-      brokenLine: 'Broken Line'
+      brokenLine: 'Broken Line',
+      rightAngleLine: 'Right Angle Line'
     },
     // 公共属性
     common: {