workflow-editor 0.0.81-up-tmp11 → 0.0.81-up-tmp15

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

@@ -1,113 +0,0 @@
-<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

@@ -1,91 +0,0 @@
-<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

@@ -1,177 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-<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

@@ -1,99 +0,0 @@
-<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

@@ -1,80 +0,0 @@
-<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>
-