workflow-editor 0.9.84-dw-tmp8 → 0.9.84-dw-tmp10

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

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

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

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

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