workflow-editor 0.9.65 → 0.9.66

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

@@ -0,0 +1,212 @@
+<template>
+  <g
+    :class="{'no-events': draggerToMove!=null}"
+    @mousedown.stop="select"
+    @dblclick.stop="showPropertiesEditor"
+  >
+    <text
+      :x="text.x"
+      :y="text.y"
+      text-anchor="middle"
+      class="draggable"
+    >
+      {{ name }}
+    </text>
+    <component :is="model.lineInfo.type" :owner="model" :class="{'transition':true,'selected':model.isSelected||(model.startJoint.parent.isSelected&&model.endJoint.parent.isSelected)}" />
+    <!-- <straight-line :owner="model" :class="{'transition':true,'selected':model.isSelected||(model.startJoint.parent.isSelected&&model.endJoint.parent.isSelected)}"/> -->
+    <g v-if="model.isSelected">
+      <circle
+        v-for="dragger in draggers"
+        :key="dragger.position"
+        :cx="dragger.x"
+        :cy="dragger.y"
+        class="transition-dragger"
+        r="4"
+        @mousedown.stop="startDrag($event,dragger.position)"
+        @mouseup="endDrag"
+      />
+    </g>
+  </g>
+</template>
+<script>
+import { getJoint, getMousePosition, clearAllSelectedComponents, watchShowName } from '../util'
+import { mapGetters, mapMutations } from 'vuex'
+import StraightLine from './straight-line'
+import CurveLine from './curve-line'
+import BrokenLine from './broken-line'
+export default {
+  name: 'Transition',
+  components: {
+    StraightLine,
+    CurveLine,
+    BrokenLine
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    const point = this.getTextPoint()
+    return {
+      text: {
+        x: point.x,
+        y: point.y
+      },
+      name: this.model.remark
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'draggerToMove',
+      'processI18n'
+    ]),
+    draggers() {
+      const startPoint = getJoint(this.model.startJoint.parent, this.model.startJoint.position)
+      startPoint.position = 'start'
+      const endPoint = getJoint(this.model.endJoint.parent, this.model.endJoint.position)
+      endPoint.position = 'end'
+      return [startPoint, endPoint]
+    },
+    path() {
+      return 'M' + this.draggers[0].x + ' ' + this.draggers[0].y + ' L' + this.draggers[1].x + ' ' + this.draggers[1].y
+    }
+  },
+  created() {
+    this.name = watchShowName(this, this.name)
+  },
+  mounted() {
+    // 线条名称内容修改时
+    this.$watch('model.remark', function(newVal) {
+      this.name = watchShowName(this, newVal)
+      if (this.name && this.name !== '') {
+      // 计算文本框的x、y坐标
+        const point = this.getTextPoint()
+        this.text.x = point.x
+        this.text.y = point.y
+      }
+    })
+    // 右键菜单更改线条方式时
+    this.$watch('model.lineInfo.type', function(newVal) {
+      // 计算文本框的x、y坐标
+      const point = this.getTextPoint()
+      this.text.x = point.x
+      this.text.y = point.y
+    })
+    // 拖动控制点的位置时
+    this.$watch('model.lineInfo.controlPoint', function(newVal) {
+      // 计算文本框的x、y坐标
+      const point = this.getTextPoint()
+      this.text.x = point.x
+      this.text.y = point.y
+    })
+    // 水平拖动起点节点
+    this.$watch('model.startJoint.parent.x', function(newVal) {
+      // 计算文本框的x、y坐标
+      const point = this.getTextPoint()
+      this.text.x = point.x
+      this.text.y = point.y
+    })
+    // 垂直拖动起点节点
+    this.$watch('model.startJoint.parent.y', function(newVal) {
+      // 计算文本框的x、y坐标
+      const point = this.getTextPoint()
+      this.text.x = point.x
+      this.text.y = point.y
+    })
+    // 水平拖动终点节点
+    this.$watch('model.endJoint.parent.x', function(newVal) {
+      // 计算文本框的x、y坐标
+      const point = this.getTextPoint()
+      this.text.x = point.x
+      this.text.y = point.y
+    })
+    // 垂直拖动终点节点
+    this.$watch('model.endJoint.parent.y', function(newVal) {
+      // 计算文本框的x、y坐标
+      const point = this.getTextPoint()
+      this.text.x = point.x
+      this.text.y = point.y
+    })
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setMouseDownPosition',
+      'setDraggerToMove',
+      'setSelectedTransition',
+      'setPropertiesEditorFor'
+    ]),
+    getTextPoint() {
+      const startPoint = getJoint(this.model.startJoint.parent, this.model.startJoint.position)
+      const endPoint = getJoint(this.model.endJoint.parent, this.model.endJoint.position)
+      let minX = startPoint.x < endPoint.x ? startPoint.x : endPoint.x
+      let minY = startPoint.y < endPoint.y ? startPoint.y : endPoint.y
+      let textX = minX + Math.abs(startPoint.x - endPoint.x) / 2
+      let textY = minY + Math.abs(startPoint.y - endPoint.y) / 2
+      if (this.model.lineInfo.type === 'CurveLine') {
+        // 曲线
+        const point = this.model.lineInfo.controlPoint
+        if (point) {
+          minX = startPoint.x < point.x ? startPoint.x : parseFloat(point.x)
+          minY = startPoint.y < point.y ? startPoint.y : parseFloat(point.y)
+          textX = minX + Math.abs(startPoint.x - point.x) / 2 + 10
+          textY = minY + Math.abs(startPoint.y - point.y) / 2 - 10
+        }
+      } else if (this.model.lineInfo.type === 'BrokenLine') {
+        const point = this.model.lineInfo.controlPoint[0]
+        if (point) {
+          minX = startPoint.x < point.x ? startPoint.x : parseFloat(point.x)
+          minY = startPoint.y < point.y ? startPoint.y : parseFloat(point.y)
+          textX = minX + Math.abs(startPoint.x - point.x) / 2
+          textY = minY + Math.abs(startPoint.y - point.y) / 2 - 10
+        }
+      }
+      return { x: textX, y: textY }
+    },
+    select(event) {
+      clearAllSelectedComponents()
+      this.model.isSelected = true
+      this.setSelectedTransition(this.model)
+    },
+    startDrag(event, position) {
+      console.log('start dragging line')
+      this.setMouseDownPosition(getMousePosition(event))
+      this.setDraggerToMove({
+        owner: this.model,
+        position,
+        originStartJoint: this.model.startJoint,
+        originEndJoint: this.model.endJoint
+      })
+    },
+    endDrag() {
+      // this.setSe
+    },
+    showPropertiesEditor() {
+      if (this.model.endJoint.parent.type !== 'Decision') {
+        this.setPropertiesEditorFor('Transition')
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+  .transition{
+    stroke-width: 2;
+    stroke:#666;
+    fill: none;
+    cursor: pointer;
+  }
+  .selected{
+    stroke:red;
+  }
+  .transition-dragger{
+    stroke: red;
+    stroke-width: 1;
+    fill: white;
+    cursor:move;
+  }
+  .no-events{
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <g>
+    <path v-show="path" :d="path" class="virtual-transition" marker-end="url(#arrow)" />
+  </g>
+</template>
+<script>
+import { getJoint } from '../util'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'VirtualTransition',
+  props: {
+    toPosition: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'startJoint'
+    ]),
+    path() {
+      if (!this.startJoint) {
+        return null
+      }
+      const startJoint = getJoint(this.startJoint.parent, this.startJoint.position)
+      // 虚线的endJoint存的就是鼠标的当前位置，此时还没有连接到任何环节上
+      const endJoint = this.toPosition
+      return 'M' + startJoint.x + ' ' + startJoint.y + ' L' + endJoint.x + ' ' + endJoint.y
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+<style>
+  .virtual-transition{
+    stroke-width: 2;
+    stroke:#000;
+    stroke-dasharray: 2 2;
+    fill: none;
+  }
+</style>