workflow-editor 0.0.81-up-tmp8 → 0.0.81-up-tmp10

package/packages/workflow-editor/src/taches/human-task.vue

@@ -0,0 +1,113 @@
+<template>
+  <g
+    @mousedown.stop="startDrag"
+    @mouseup="endDrag"
+    @mouseenter="showJoints"
+    @mouseleave="hideJoints"
+    @dblclick.stop="setPropertiesEditorFor('HumanTask')"
+  >
+    <rect
+      ref="tache"
+      :width="model.width"
+      :height="model.height"
+      :class="['draggable','task-tache', {'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: 'HumanTask',
+  components: {
+    Joint,
+    TacheResizer
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+    // displayMode: {
+    //   type: String,
+    //   default: 'normal'
+    // }
+  },
+  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
+      }
+    }
+    // tacheStyle() {
+    //   switch (this.displayMode) {
+    //     case 'passed':
+    //       return 'passed-tache'
+    //     case 'current':
+    //       return 'current-tache'
+    //     default:
+    //       return 'task-tache'
+    //   }
+    // }
+  },
+  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/join.vue

@@ -0,0 +1,91 @@
+<template>
+  <g
+    @mousedown.stop="startDrag"
+    @mouseup="endDrag"
+    @mouseenter="showJoints"
+    @mouseleave="hideJoints"
+    @dblclick.stop="setPropertiesEditorFor('Join')"
+  >
+    <rect
+      :width="model.width"
+      :height="model.height"
+      :class="{'draggable':true,'decision':!model.isSelected, 'selected':model.isSelected}"
+      :x="model.x"
+      :y="model.y"
+      rx="6"
+      ry="6"
+    />
+    <use
+      xlink:href="#icon-join"
+      :x="model.x"
+      :y="model.y"
+      :width="model.width"
+      :height="model.height"
+      fill="#999"
+      class="draggable"
+    />
+    <text
+      :x="text.x"
+      :y="text.y"
+      text-anchor="middle"
+      class="draggable"
+    >
+      {{ model.name }}
+    </text>
+    <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: 'Join',
+  components: {
+    Joint
+  },
+  props: {
+    model: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 一个tache有上右下左四个连接点，这四个连接点的坐标根据tache的位置和大小计算出来
+      jointPoints: []
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches'
+    ]),
+    text() {
+      return {
+        x: this.model.x + this.model.width / 2,
+        // TODO: 12应该是字体大小加上一点空隙，换成变量值表示
+        y: this.model.y + this.model.height + 12
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible'
+    ]),
+    ...tacheMethods
+  }
+}
+</script>
+<style>
+  .decision{
+    stroke-width: 0;
+    fill:#fff;
+  }
+</style>
+

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