workflow-editor 0.9.66-dw → 0.9.66-pv3

package/packages/workflow-editor/src/taches/tache-resizer.vue

@@ -0,0 +1,80 @@
+<template>
+  <rect
+    v-if="owner.isSelected&&selectedTaches.length==1"
+    :x="area.x"
+    :y="area.y"
+    :width="area.width"
+    :height="area.height"
+    :style="{cursor:area.cursor}"
+    class="resizer"
+    @mousedown.stop="setContextMenuVisible(false);setResizerToMove({owner,position})"
+    @mouseup.stop="setResizerToMove(null)"
+  />
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+export default {
+  name: 'TacheResizer',
+  props: {
+    owner: {
+      type: Object,
+      default: null
+    },
+    position: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches'
+    ]),
+    area() {
+      const width = 8
+      const height = 8
+      let x, y
+      switch (this.position) {
+        case 'NW':
+          x = this.owner.x
+          y = this.owner.y
+          break
+        case 'NE':
+          x = this.owner.x + this.owner.width
+          y = this.owner.y
+          break
+        case 'SW':
+          x = this.owner.x
+          y = this.owner.y + this.owner.height
+          break
+        case 'SE':
+          x = this.owner.x + this.owner.width
+          y = this.owner.y + this.owner.height
+          break
+      }
+      // 环节的四个顶点是resizer的中心点
+      x = x - width / 2
+      y = y - height / 2
+      const cursor = this.position.toLowerCase() + '-resize'
+      return {
+        x, y, width, height, cursor
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setMovingResizer',
+      'setResizerToMove',
+      'setContextMenuVisible'
+    ])
+
+  }
+}
+</script>
+<style>
+  .resizer{
+    stroke: blue;
+    stroke-width: 1;
+    fill: white;
+  }
+</style>
+

package/packages/workflow-editor/src/transitions/broken-line.vue

@@ -0,0 +1,91 @@
+<template>
+  <g>
+    <path
+      :d="path"
+      marker-end="url(#arrow)"
+    />
+    <template v-if="owner.isSelected">
+      <template v-if="controlPoint">
+        <circle
+          v-for="(point,index) in controlPoint"
+          :key="point.x+point.y"
+          :cx="point.x"
+          :cy="point.y"
+          r="3"
+          class="control-point"
+          @mousedown.stop="startDrag(index, $event)"
+          @mouseup.stop="endDrag"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+<script>
+import { getJoint } from '../util'
+import { mapMutations } from 'vuex'
+export default {
+  name: 'BrokenLine',
+  props: {
+    owner: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    // 二次贝塞尔曲线由两个端点和一个控制点组成，Q命令就是用来画二次曲线的
+    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
+    },
+    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() {
+    console.log('this.owner.lineInfo=', this.owner.lineInfo)
+    // controlPoint没有值是需要给一个初始值：默认的控制点是起点的x坐标和终点的y坐标结合
+    if (!this.owner.lineInfo.controlPoint) {
+      const x = this.startPoint.x + (this.endPoint.x - this.startPoint.x) / 2
+      const y = this.startPoint.y + (this.endPoint.y - this.startPoint.y) / 2
+      this.owner.lineInfo.controlPoint = [{ x, y }]
+    }
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setControlPointToMove'
+    ]),
+    startDrag(pointIndex, $event) {
+      console.log('brokenLine--startDrag-----')
+      this.setControlPointToMove({
+        owner: this.owner,
+        pointIndex: pointIndex
+      })
+    },
+    endDrag() {
+      this.setControlPointToMove(null)
+    }
+  }
+}
+</script>
+<style scoped>
+  .control-point{
+    fill: #fff;
+    cursor: move;
+  }
+  .control-line {
+    stroke-dasharray: 2 2
+  }
+</style>
+

package/packages/workflow-editor/src/transitions/curve-line.vue

@@ -0,0 +1,91 @@
+<template>
+  <g>
+    <path
+      :d="path"
+      marker-end="url(#arrow)"
+    />
+    <template v-if="owner.isSelected">
+      <path :d="pathToStartPoint" class="control-line" />
+      <path :d="pathToEndPoint" class="control-line" />
+      <circle
+        :cx="controlPoint.x"
+        :cy="controlPoint.y"
+        r="3"
+        class="control-point"
+        @mousedown.stop="startDrag"
+        @mouseup.stop="endDrag"
+      />
+    </template>
+  </g>
+</template>
+<script>
+import { getJoint } from '../util'
+import { mapMutations } from 'vuex'
+export default {
+  name: 'CurveLine',
+  props: {
+    owner: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    // 二次贝塞尔曲线由两个端点和一个控制点组成，Q命令就是用来画二次曲线的
+    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
+    },
+    path() {
+      return 'M ' + this.startPoint.x + ' ' + this.startPoint.y + ' ' +
+             'Q ' + this.controlPoint.x + ' ' + this.controlPoint.y + ' ' +
+                    this.endPoint.x + ' ' + this.endPoint.y
+    },
+    pathToStartPoint() {
+      return 'M ' + this.controlPoint.x + ' ' + this.controlPoint.y +
+             'L ' + this.startPoint.x + ' ' + this.startPoint.y
+    },
+    pathToEndPoint() {
+      return 'M ' + this.controlPoint.x + ' ' + this.controlPoint.y +
+             'L ' + this.endPoint.x + ' ' + this.endPoint.y
+    }
+  },
+  created: function() {
+    // controlPoint没有值是需要给一个初始值：默认的控制点是起点的x坐标和终点的y坐标结合
+    if (!this.owner.lineInfo.controlPoint) {
+      let x = this.startPoint.x + (this.endPoint.x - this.startPoint.x) / 2
+      if (x + 10 < this.startPoint.x || x < this.startPoint.x + 10) {
+        x = this.startPoint.x + 30
+      }
+      this.owner.lineInfo.controlPoint = { x, y: this.endPoint.y }
+    }
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setControlPointToMove'
+    ]),
+    startDrag(event) {
+      this.setControlPointToMove({
+        owner: this.owner
+      })
+    },
+    endDrag() {
+      this.setControlPointToMove(null)
+    }
+  }
+}
+</script>
+<style scoped>
+  .control-point{
+    fill: #fff;
+    cursor: move;
+  }
+  .control-line {
+    stroke-dasharray: 2 2
+  }
+</style>
+

package/packages/workflow-editor/src/transitions/straight-line.vue

@@ -0,0 +1,26 @@
+<template>
+  <path
+    :d="path"
+    marker-end="url(#arrow)"
+  />
+</template>
+<script>
+import { getJoint } from '../util'
+export default {
+  name: 'StraightLine',
+  props: {
+    owner: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    path() {
+      const startPoint = getJoint(this.owner.startJoint.parent, this.owner.startJoint.position)
+      const endPoint = getJoint(this.owner.endJoint.parent, this.owner.endJoint.position)
+      return 'M' + startPoint.x + ' ' + startPoint.y + ' L' + endPoint.x + ' ' + endPoint.y
+    }
+  }
+}
+</script>
+

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>