workflow-editor 0.9.68-dw → 0.9.68

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

@@ -0,0 +1,177 @@
+<template>
+  <g @mousedown.stop="">
+    <rect
+      :x="jointContainer.x"
+      :y="jointContainer.y"
+      :class="{'joint-container':true,'joint-activated':isActivated}"
+      width="20"
+      height="20"
+      rx="3"
+      ry="3"
+      @mousemove.stop="enterJoint"
+      @mouseout.stop="leaveJoint"
+      @mousedown.stop="setContextMenuVisible(false);setStartJoint({parent:parent,position:position})"
+      @mouseup="mouseup"
+    />
+    <circle v-show="!isActivated" :cx="joint.x" :cy="joint.y" r="3" class="joint" />
+  </g>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import { getJoint, processTemplate, findOutgoingTransitionsByTacheId } from '../util'
+export default {
+  name: 'Joint',
+  props: {
+    parent: {
+      type: Object,
+      default: null
+    },
+    position: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      isActivated: false
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'transitions',
+      'startJoint',
+      'endJoint',
+      'draggerToMove'
+    ]),
+    joint() {
+      return getJoint(this.parent, this.position)
+    },
+    jointContainer() {
+      return {
+        x: this.joint.x - 10,
+        y: this.joint.y - 10
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setStartJoint',
+      'setEndJoint',
+      'stopDrawingLine',
+      'setDraggerToMove',
+      'setContextMenuVisible'
+    ]),
+    // 流向是否有效的判断规则
+    isValidTransition(startJoint, endJoint) {
+      // 防御性编程，没有起点就直接是无效流向了，确保后续代码一定能取到startJoint
+      if (!startJoint) return false
+      // 目前不支持transition的起点和终点都在同一个环节上，如果需要自循环的节点，可以改这里
+      if (startJoint.parent === endJoint.parent) {
+        this.$alert(this.$t('workflowEditorMessage.theStartAndEndOfTheFlowDirectionCannotBeTheSame'))
+        return false
+      }
+      if (startJoint.parent.type !== 'Decision' && startJoint.parent.type !== 'Fork' && startJoint.parent.type !== 'HumanDecision') {
+        // 除了分支和条件判断节点外，其他节点只能有一条外出流向，那么新建流向时，这些节点上的流向数量应该为零
+        let maxCount = 0
+        // 移动流向的端点后，流向的起始环节上最多只能有一条外出流向
+        if (this.draggerToMove) {
+          maxCount = 1
+        }
+        const transitions = findOutgoingTransitionsByTacheId(startJoint.parent.id)
+        if (transitions.length > maxCount) {
+          this.$alert(this.$t('workflowEditorMessage.onlyConditionJudgmentBranchAndManualJudgmentCanHaveMultipleOutboundFlows'))
+          return false
+        }
+      }
+
+      if (startJoint.parent.type === 'Start' && endJoint.parent.type === 'End') {
+        this.$alert(this.$t('workflowEditorMessage.startAndEndNodesCannotBeConnectedDirectly'))
+        return false
+      }
+      if (startJoint.parent.type === 'End') {
+        this.$alert(this.$t('workflowEditorMessage.endNodeCannotHaveOutFlowDirection'))
+        return false
+      }
+      return true
+    },
+    mouseup() {
+      console.log('joint mouseup')
+      // 如果正在移动transition
+      if (this.draggerToMove) {
+        const position = this.draggerToMove.position
+        const joint = { parent: this.parent, position: this.position }
+        if (position === 'start') {
+          this.draggerToMove.owner.startJoint = joint
+        } else {
+          this.draggerToMove.owner.endJoint = joint
+        }
+        if (this.isValidTransition(this.draggerToMove.owner.startJoint, this.draggerToMove.owner.endJoint)) {
+          // 改变流向的id和xml的对应信息
+          const transition = this.draggerToMove.owner
+          transition.id = 'flow_' + transition.startJoint.parent.id + '_to_' + transition.endJoint.parent.id
+          transition.ref.attr = {
+            id: transition.id,
+            from: transition.startJoint.parent.id,
+            to: transition.endJoint.parent.id
+          }
+        } else {
+          // 改变端点无效时还原流向
+          this.draggerToMove.owner.startJoint = this.draggerToMove.originStartJoint
+          this.draggerToMove.owner.endJoint = this.draggerToMove.originEndJoint
+        }
+
+        this.setDraggerToMove(null)
+      } else {
+        // 说明正在画流向
+        this.addTransition()
+      }
+    },
+    addTransition() {
+      const endJoint = { parent: this.parent, position: this.position }
+      if (this.isValidTransition(this.startJoint, endJoint)) {
+        this.setEndJoint(endJoint)
+        const transition = {
+          id: 'flow_' + this.startJoint.parent.id + '_to_' + this.endJoint.parent.id,
+          startJoint: this.startJoint,
+          endJoint: this.endJoint,
+          isSelected: false,
+          // controlPoint这个属性也得定义，动态增加的属性vue默认是不监听的（除非用vue.$set方法），就不会有任何动态效果
+          lineInfo: { type: 'StraightLine', controlPoint: null }
+        }
+        transition.ref = processTemplate.newTransition()
+        transition.ref.attr = {
+          id: transition.id,
+          from: this.startJoint.parent.id,
+          to: this.endJoint.parent.id
+        }
+        this.transitions.push(transition)
+      }
+      this.stopDrawingLine()
+    },
+    enterJoint() {
+      this.isActivated = true
+      this.$emit('enter-joint')
+    },
+    leaveJoint() {
+      this.isActivated = false
+      this.$emit('leave-joint')
+    }
+  }
+}
+</script>
+<style>
+  .joint-container{
+    stroke-width: 0;
+    fill: #fff;
+    fill-opacity: 0
+  }
+  .joint{
+    fill:#00f;
+    stroke-width: 1px
+  }
+  .joint-activated{
+    fill: #f00;
+    stroke-width:1px;
+    fill-opacity: 1;
+  }
+</style>

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

@@ -0,0 +1,76 @@
+<template>
+  <g
+    @mousedown.stop="startDrag"
+    @mouseup="endDrag"
+    @mouseenter="showJoints"
+    @mouseleave="hideJoints"
+    @dblclick.stop="setPropertiesEditorFor('')"
+  >
+    <rect
+      :width="model.width"
+      :height="model.height"
+      :class="{'draggable':true,'start':!model.isSelected, 'selected':model.isSelected}"
+      :x="model.x"
+      :y="model.y"
+      rx="6"
+      ry="6"
+    />
+    <use
+      xlink:href="#icon-start"
+      :x="model.x"
+      :y="model.y"
+      :width="model.width"
+      :height="model.height"
+      fill="#67C23A"
+      class="draggable"
+    />
+    <joint
+      v-for="position in jointPoints"
+      :key="position"
+      :parent="model"
+      :position="position"
+    />
+  </g>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import Joint from './joint'
+import tacheMethods from './common-methods'
+export default {
+  name: 'Start',
+  components: {
+    Joint
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 一个tache有上右下左四个连接点，这四个连接点的坐标根据tache的位置和大小计算出来
+      jointPoints: []
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches'
+    ])
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible'
+    ]),
+    ...tacheMethods
+  }
+}
+</script>
+<style>
+  .start{
+    stroke-width: 0;
+    fill:#fff;
+  }
+</style>
+

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

@@ -0,0 +1,99 @@
+<template>
+  <g
+    @mousedown.stop="startDrag"
+    @mouseup="endDrag"
+    @mouseenter="showJoints"
+    @mouseleave="hideJoints"
+    @dblclick.stop="setPropertiesEditorFor('Subprocess')"
+  >
+    <rect
+      ref="tache"
+      :width="model.width"
+      :height="model.height"
+      :class="{'draggable':true,'task-tache':true, 'selected':model.isSelected}"
+      :x="model.x"
+      :y="model.y"
+      rx="6"
+      ry="6"
+    />
+    <text
+      :x="text.x"
+      :y="text.y"
+      text-anchor="middle"
+      class="draggable"
+    >
+      {{ name }}
+    </text>
+    <joint
+      v-for="position in jointPoints"
+      :key="position"
+      :parent="model"
+      :position="position"
+    />
+    <tache-resizer
+      v-for="position in resizers"
+      :key="position"
+      :owner="model"
+      :position="position"
+    />
+  </g>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import Joint from './joint'
+import TacheResizer from './tache-resizer'
+import tacheMethods from './common-methods'
+import { watchShowName } from '../util'
+export default {
+  name: 'Subprocess',
+  components: {
+    Joint,
+    TacheResizer
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 一个tache有上右下左四个连接点，这四个连接点的坐标根据tache的位置和大小计算出来
+      jointPoints: [],
+      resizers: ['NW', 'NE', 'SW', 'SE'],
+      name: this.model.name
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches',
+      'processI18n'
+    ]),
+    text() {
+      return {
+        x: this.model.x + this.model.width / 2,
+        y: this.model.y + this.model.height / 2
+      }
+    }
+  },
+  created() {
+    this.name = watchShowName(this, this.name)
+  },
+  mounted() {
+    this.$watch('model.name', function(newVal) {
+      this.name = watchShowName(this, newVal)
+    })
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible'
+    ]),
+    ...tacheMethods
+  }
+}
+</script>
+<style>
+
+</style>
+

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>
+