workflow-editor 0.9.67-dw → 0.9.67

package/packages/workflow-editor/src/main/canvas.vue

@@ -0,0 +1,479 @@
+<template>
+  <div ref="svgContainer" style="position:relative">
+    <svg
+      id="svg"
+      width="2000"
+      height="2000"
+      @mousedown="mousedown"
+      @mousemove="mousemove"
+      @mouseup="mouseup"
+      @mouseleave="mouseleave"
+      @dblclick="setPropertiesEditorFor('Process')"
+    >
+      <defs>
+        <marker id="arrow" markerWidth="10" markerHeight="10" refX="6" refY="2" orient="auto" markerUnits="strokeWidth">
+          <path d="M0,0 L0,4 L6,2 z" fill="#666" />
+        </marker>
+      </defs>
+      <component
+        :is="tache.type"
+        v-for="tache in taches"
+        :key="tache.id"
+        :model="tache"
+        @mouseenter.native="showTacheHistoryTooltip"
+        @mouseleave.native="hideTacheHistoryTooltip"
+        @mousemove.native="updateTacheHistoryTooltipPosition"
+      />
+      <transition
+        v-for="transition in transitions"
+        :key="transition.id"
+        :model="transition"
+      />
+      <virtual-transition :toPosition="currentPosition" />
+      <selection-region :region="region" />
+    </svg>
+    <component
+      :is="propertiesEditorFor+'PropertiesEditor'"
+      v-if="!showHistory&&propertiesEditorFor"
+      :model="selectedTaches[0]||selectedTransition||process"
+      @close="setPropertiesEditorFor('')"
+    />
+    <tache-history-tooltip v-if="showHistory&&showTacheHistory" :style="tooltipPosition" />
+  </div>
+</template>
+
+<script>
+import Start from '../taches/start'
+import End from '../taches/end'
+import HumanTask from '../taches/human-task'
+import Decision from '../taches/decision'
+import Subprocess from '../taches/subprocess'
+import CustomTask from '../taches/custom-task'
+import Fork from '../taches/fork'
+import Join from '../taches/join'
+import HumanDecision from '../taches/human-decision'
+import CopyTask from '../taches/copy-task'
+import Transition from '../transitions/transition'
+import VirtualTransition from '../transitions/virtual-transition'
+import SelectionRegion from './selection-region'
+import HumanTaskPropertiesEditor from '../properties-editors/human-task'
+import ProcessPropertiesEditor from '../properties-editors/process'
+import DecisionPropertiesEditor from '../properties-editors/decision'
+import TransitionPropertiesEditor from '../properties-editors/transition'
+import ForkPropertiesEditor from '../properties-editors/fork'
+import JoinPropertiesEditor from '../properties-editors/join'
+import HumanDecisionPropertiesEditor from '../properties-editors/human-decision'
+import CopyTaskPropertiesEditor from '../properties-editors/copy-task'
+import SubprocessPropertiesEditor from '../properties-editors/subprocess'
+import TacheHistoryTooltip from './tache-history-tooltip'
+import { mapGetters, mapMutations } from 'vuex'
+import { getMousePosition, getVirtualRegion, getRealRegion, clearAllSelectedComponents } from '../util'
+
+export default {
+  name: 'Canvas',
+  components: {
+    Start,
+    End,
+    HumanTask,
+    Decision,
+    Subprocess,
+    CustomTask,
+    Fork,
+    Join,
+    HumanDecision,
+    CopyTask,
+    Transition,
+    VirtualTransition,
+    SelectionRegion,
+    HumanTaskPropertiesEditor,
+    ProcessPropertiesEditor,
+    DecisionPropertiesEditor,
+    TransitionPropertiesEditor,
+    ForkPropertiesEditor,
+    JoinPropertiesEditor,
+    HumanDecisionPropertiesEditor,
+    CopyTaskPropertiesEditor,
+    SubprocessPropertiesEditor,
+    TacheHistoryTooltip
+  },
+  props: {
+    process: {
+      type: Object,
+      default: null
+    },
+    showHistory: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function() {
+    return {
+      inputArea: null,
+      currentPosition: null,
+      originPosition: null,
+      offset: null,
+      startPoint: null,
+      region: null,
+      endPoint: null,
+      transitionsInRegion: [],
+      showTacheHistory: false,
+      tooltipPosition: null
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'taches',
+      'transitions',
+      'isMovingTache',
+      'mouseDownPosition',
+      'startJoint',
+      'endJoint',
+      'isDrawingRegion',
+      'isMovingRegion',
+      'selectedTransition',
+      'selectedTaches',
+      'resizerToMove',
+      'draggerToMove',
+      'controlPointToMove',
+      'propertiesEditorFor',
+      'contextMenuVisible'
+    ])
+  },
+  mounted: function() {
+
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setTaches',
+      'setTransitions',
+      'resetState',
+      'setMovingTache',
+      'stopDrawingLine',
+      'setSelectedTaches',
+      'setDrawingRegion',
+      'setResizerToMove',
+      'setDraggerToMove',
+      'setControlPointToMove',
+      'setPropertiesEditorFor'
+    ]),
+    forbidSelection() {
+      return false
+    },
+    add: function() {
+      // const tache = new TacheUI(this.snap, 50, 50)
+      // tache.draw()
+    },
+    // 各个组件上的mousedown，组件会自行处理，不会传播到canvas上来，这里发生的mousedown表示点击了canvas的空白区域
+    mousedown(event) {
+      console.log('mousedown')
+      // 鼠标按下时先清除上次选中的环节
+      this.unselectAll()
+
+      // 准备画新的选择区域
+      // isDrawingRegion标识是否可以开始画选择区域了，当mouseup时会重置
+      this.setDrawingRegion(true)
+      // startPoint和endPoint记录选择区域的起点和终点，当mouseup的时候如果有选中的tache则保留值，没有选中则清空值
+      this.startPoint = getMousePosition(event)
+    },
+    mousemove(event) {
+      // console.log('mousemove')
+      // 显示流转历史的时候不需要拖动环节
+      if (this.showHistory) return
+      // 给起始位置附上初始值，这个起始位置是个相对概念，每次mousemove后，这个值就变成最新的鼠标位置，作为下一次mousemove的起点
+      if (!this.originPosition && this.mouseDownPosition) {
+        this.originPosition = this.mouseDownPosition
+      }
+      this.currentPosition = getMousePosition(event)
+      if (this.isMovingTache) {
+        this.moveTache(this.selectedTaches[0])
+      }
+      this.drawVirtualSelectionRegion()
+
+      this.moveSelectionRegion()
+
+      this.resizeSelectedTache()
+
+      this.moveTransition()
+
+      this.adjustCurveLine()
+
+      this.originPosition = this.currentPosition
+    },
+    // 有些组件上的mouseup，会传播到canvas上来
+    mouseup(event) {
+      console.log('mouseup')
+      if (this.isMovingTache) {
+        this.setMovingTache(false)
+      }
+      // 在画布的空白地方mouseup时，停止画虚拟的流向，此时没有找到任何endJoint（在joint上mouseup才会设置endJoint）
+      if (this.startJoint) {
+        this.stopDrawingLine()
+      }
+      // 鼠标起来时，需要判断是否选中了tache，并显示选择区域
+      this.drawRegionWhenNeeded()
+
+      // tache变到最小时，继续移动鼠标会从resizer上移出去，如果此时松开鼠标就不会触发resizer的mouseup
+      if (this.resizerToMove) {
+        this.setResizerToMove(null)
+      }
+
+      this.resetMovedTransition()
+    },
+    mouseleave(event) {
+      this.drawRegionWhenNeeded()
+
+      this.resetMovedTransition()
+
+      this.resetState()
+    },
+    drawRegionWhenNeeded() {
+      if (this.isDrawingRegion) {
+        this.selectComponents()
+        this.drawRealSelectionRegion()
+        this.setDrawingRegion(false)
+      }
+    },
+    resetMovedTransition() {
+      // 如果正在移动transition，那么要清除掉状态，并还原transition的位置
+      if (this.draggerToMove) {
+        this.draggerToMove.owner.startJoint = this.draggerToMove.originStartJoint
+        this.draggerToMove.owner.endJoint = this.draggerToMove.originEndJoint
+        this.setDraggerToMove(null)
+      }
+    },
+    unselectAll() {
+      clearAllSelectedComponents()
+      // 选中的线也清除掉，此时线的状态并不是selected，这个只是为了移动控制点而增加的组件变量
+      this.transitionsInRegion = []
+      this.startPoint = null
+      this.region = null
+    },
+    selectComponents() {
+      // 如果选择区域缺少起点或终点，那么不需要选中任何东西，同时清除已有起点或者终点信息
+      if (!this.startPoint || !this.region) {
+        this.startPoint = null
+        this.region = null
+        return
+      }
+      // 判断环节是否在选择区域里面，如果在就选中
+      for (const tache of this.taches) {
+        if (this.isInsideSelectionRegion(tache)) {
+          tache.isSelected = true
+          this.selectedTaches.push(tache)
+        }
+      }
+
+      for (const transition of this.transitions) {
+        if (transition.startJoint.parent.isSelected && transition.endJoint.parent.isSelected) {
+          this.transitionsInRegion.push(transition)
+        }
+      }
+    },
+    isInsideSelectionRegion(tache) {
+      const isLeftTopCornerInside = (tache.x >= this.region.x && tache.y >= this.region.y)
+      const isRightDownCornerInside = ((tache.x + tache.width) <= (this.region.x + this.region.width) && (tache.y + tache.height) <= (this.region.y + this.region.height))
+      return isLeftTopCornerInside && isRightDownCornerInside
+    },
+    moveTache(tache) {
+      const x = this.currentPosition.x - this.originPosition.x
+      const y = this.currentPosition.y - this.originPosition.y
+      tache.x += x
+      tache.y += y
+      if (tache.x < 0) {
+        tache.x = 2
+      }
+      if (tache.y < 0) {
+        tache.y = 2
+      }
+    },
+
+    drawVirtualSelectionRegion() {
+      if (this.isDrawingRegion && this.startPoint) {
+        this.region = getVirtualRegion(this.startPoint, this.currentPosition)
+      }
+    },
+    drawRealSelectionRegion() {
+      // 如果只选中了一个环节，那么选择区域也不需要显示了，这时把起点和region也重置了
+      if (this.selectedTaches.length <= 1) {
+        this.startPoint = null
+        this.region = null
+        return
+      }
+
+      this.region = getRealRegion(this.selectedTaches)
+      // this.startPoint = area.startPoint
+    },
+    moveSelectionRegion() {
+      if (!this.isMovingRegion) {
+        return
+      }
+      // 移动选择区域
+      let dx = this.currentPosition.x - this.originPosition.x
+      let dy = this.currentPosition.y - this.originPosition.y
+      // 控制不能移出canvas的边界，保留2像素的间距
+      if (this.region.x + dx < 0) {
+        dx = 2 - this.region.x
+      }
+      if (this.region.y + dy < 0) {
+        dy = 2 - this.region.y
+      }
+      this.region.x = this.region.x + dx
+      this.region.y = this.region.y + dy
+
+      this.moveTachesInRegion(dx, dy)
+      this.moveTransitionControlPoints(dx, dy)
+    },
+    moveTachesInRegion(dx, dy) {
+      for (const tache of this.selectedTaches) {
+        tache.x += dx
+        tache.y += dy
+      }
+    },
+    moveTransitionControlPoints(dx, dy) {
+      for (const transition of this.transitionsInRegion) {
+        if (transition.lineInfo.type === 'CurveLine') {
+          transition.lineInfo.controlPoint.x += dx
+          transition.lineInfo.controlPoint.y += dy
+        } else if (transition.lineInfo.type === 'BrokenLine') {
+          transition.lineInfo.controlPoint.forEach(point => {
+            point.x += dx
+            point.y += dy
+          })
+        }
+      }
+    },
+    resizeSelectedTache() {
+      if (!this.resizerToMove) {
+        return
+      }
+      let dx = this.currentPosition.x - this.originPosition.x
+      let dy = this.currentPosition.y - this.originPosition.y
+      const tache = this.resizerToMove.owner
+      /**
+       * 1.拖动某个resizer时，对角线上的另一个resizer是不动的
+       * 2.拖动不同的resizer时，dx，dy即使出现负数时也可能是变大，这个时候就得做减法了
+      */
+      switch (this.resizerToMove.position) {
+        case 'NW':
+          if (tache.width - dx < 80) {
+            dx = tache.width - 80
+          }
+          if (tache.height - dy < 40) {
+            dy = tache.height - 40
+          }
+          tache.width -= dx
+          tache.height -= dy
+          tache.x += dx
+          tache.y += dy
+          break
+        case 'NE':
+          if (tache.width + dx < 80) {
+            dx = 80 - tache.width
+          }
+          if (tache.height - dy < 40) {
+            dy = tache.height - 40
+          }
+          tache.width += dx
+          tache.height -= dy
+          tache.y += dy
+          break
+        case 'SW':
+          if (tache.width - dx < 80) {
+            dx = tache.width - 80
+          }
+          if (tache.height + dy < 40) {
+            dy = 40 - tache.height
+          }
+          tache.width -= dx
+          tache.height += dy
+          tache.x += dx
+          break
+        case 'SE':
+          if (tache.width + dx < 80) {
+            dx = 80 - tache.width
+          }
+          if (tache.height + dy < 40) {
+            dy = 40 - tache.height
+          }
+          tache.width += dx
+          tache.height += dy
+          break
+      }
+    },
+    moveTransition() {
+      if (!this.draggerToMove) {
+        return
+      }
+      const transition = this.draggerToMove.owner
+      const position = this.draggerToMove.position
+      const virtualJoint = { parent: this.currentPosition, position: '' }
+      if (position === 'start') {
+        transition.startJoint = virtualJoint
+      } else {
+        transition.endJoint = virtualJoint
+      }
+    },
+    adjustCurveLine() {
+      if (!this.controlPointToMove) {
+        return
+      }
+      const transition = this.controlPointToMove.owner
+      if (transition.lineInfo && transition.lineInfo.type === 'CurveLine') {
+        transition.lineInfo.controlPoint = this.currentPosition
+      } else if (transition.lineInfo && transition.lineInfo.type === 'BrokenLine') {
+        const pointIndex = this.controlPointToMove.pointIndex
+        const controlPoints = transition.lineInfo.controlPoint
+        this.$set(controlPoints, pointIndex, this.currentPosition)
+      }
+    },
+    endDrag(event) {
+
+    },
+    showTacheHistoryTooltip(event) {
+      this.showTacheHistory = true
+    },
+    hideTacheHistoryTooltip() {
+      this.showTacheHistory = false
+    },
+    updateTacheHistoryTooltipPosition(event) {
+      const position = getMousePosition(event)
+      this.tooltipPosition = {
+        left: position.x + 'px',
+        top: position.y + 'px'
+      }
+    }
+  }
+}
+</script>
+<style>
+  #svg{
+    /* border:1px solid red; */
+    background: white;
+    background-image:
+        linear-gradient(rgba(242,242,242,.7) 1px, transparent 0),
+        linear-gradient(90deg, rgba(242,242,242,.7) 1px, transparent 0),
+        linear-gradient(#e5e5e5 1px, transparent 0),
+        linear-gradient(90deg,#e5e5e5 1px, transparent 0);
+    background-size:
+            15px 15px,
+            15px 15px,
+            75px 75px,
+            75px 75px;
+  }
+  g{
+    font-size: 16px;
+  }
+  g text{
+    dominant-baseline: middle;
+  }
+  .selected{
+    fill: #fff;
+    stroke: #f00;
+    stroke-width: 2;
+  }
+  .task-tache{
+    fill: #fff;
+    stroke: #666;
+    stroke-width: 2;
+  }
+</style>

package/packages/workflow-editor/src/main/context-menu.vue

@@ -0,0 +1,132 @@
+<template>
+  <ul class="context-menu">
+    <li v-for="menu in menus" :key="menu.name" @mousedown.stop="execute(menu.name)">
+      <icon-svg :icon="menu.icon" /><span>{{ menu.label }}</span>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import IconSvg from './icon-svg'
+export default {
+  name: 'ContextMenu',
+  components: {
+    IconSvg
+  },
+  data() {
+    return {
+      menusForTransition: [
+        { name: 'switch-line-type-StraightLine', label: this.$t('workflowEditor.main.straightLine'), icon: 'switch' },
+        { name: 'switch-line-type-CurveLine', label: this.$t('workflowEditor.main.curveLine'), icon: 'switch' },
+        { name: 'switch-line-type-BrokenLine', label: this.$t('workflowEditor.main.brokenLine'), icon: 'switch' },
+        { name: 'remove', label: this.$t('workflowEditor.common.remove'), icon: 'delete' },
+        { name: 'properties', label: this.$t('workflowEditor.common.attribute'), icon: 'properties' }
+      ],
+      menusForTache: [
+        { name: 'remove', label: this.$t('workflowEditor.common.remove'), icon: 'delete' },
+        { name: 'properties', label: this.$t('workflowEditor.common.attribute'), icon: 'properties' }
+      ],
+      menusForProcess: [
+        { name: 'properties', label: this.$t('workflowEditor.common.attribute'), icon: 'properties' }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'taches',
+      'transitions',
+      'selectedTransition',
+      'selectedTaches'
+    ]),
+    menuType() {
+      let type = ''
+      if (this.selectedTransition) {
+        type = 'Transition'
+      } else if (this.selectedTaches.length === 1) {
+        type = 'Tache'
+      }
+      if (this.selectedTransition === null && this.selectedTaches.length === 0) {
+        type = 'Process'
+      }
+      return type
+    },
+    menus() {
+      if (this.menuType) {
+        return this['menusFor' + this.menuType]
+      } else {
+        return []
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setPropertiesEditorFor',
+      'setContextMenuVisible'
+    ]),
+    switchLineType(lineType) {
+      this.selectedTransition.lineInfo.controlPoint = null
+      this.selectedTransition.lineInfo.type = lineType
+    },
+    execute(menu) {
+      console.log('menu:' + menu)
+      if (menu.indexOf('switch-line-type-') >= 0) {
+        const lineType = menu.substring(menu.lastIndexOf('-') + 1)
+        this.switchLineType(lineType)
+      }
+      if (menu === 'remove') {
+        if (this.menuType === 'Tache') {
+          this.taches.splice(this.taches.indexOf(this.selectedTaches[0]), 1)
+        } else if (this.menuType === 'Transition') {
+          this.transitions.splice(this.transitions.indexOf(this.selectedTransition), 1)
+        }
+      }
+
+      const componentsWithoutPropertiesEditor = ['Start', 'End']
+      if (menu === 'properties') {
+        if (this.menuType === 'Tache') {
+          this.setPropertiesEditorFor(
+            componentsWithoutPropertiesEditor.indexOf(this.selectedTaches[0].type) >= 0 ? '' : this.selectedTaches[0].type
+          )
+        } else if (this.menuType === 'Transition') {
+          this.setPropertiesEditorFor('Transition')
+        } else {
+          this.setPropertiesEditorFor('Process')
+        }
+      }
+      this.setContextMenuVisible(false)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+li {
+  color: #333;
+}
+.context-menu {
+  position: fixed;
+  background: #fff;
+  z-index: 999;
+  padding:5px;
+  margin:0
+}
+.context-menu li {
+  min-width: 75px;
+  height: 28px;
+  line-height: 28px;
+  text-align: left;
+  color: #1a1a1a;
+}
+.context-menu li:hover {
+  background: #42b983;
+  color: #fff;
+}
+.context-menu {
+    border: 1px solid #eee;
+    box-shadow: 0 0.5em 1em 0 rgba(0,0,0,.1);
+    border-radius: 5px;
+}
+li {
+    list-style-type:none;
+}
+</style>

package/packages/workflow-editor/src/main/icon-svg.vue

@@ -0,0 +1,32 @@
+<template>
+  <svg class="svg-icon" aria-hidden="true">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'IconSvg',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    iconName() {
+      return `#icon-${this.icon}`
+    }
+  }
+}
+</script>
+
+<style>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>

package/packages/workflow-editor/src/main/selection-region.vue

@@ -0,0 +1,66 @@
+<template>
+  <g>
+    <rect
+      v-if="region"
+      :x="region.x"
+      :y="region.y"
+      :width="region.width"
+      :height="region.height"
+      :class="{'draggable':true,'selection-region':true,'dashed':selectedTaches.length<1}"
+      @mousedown.stop="startDrag"
+      @mouseup.stop="endDrag"
+    />
+  </g>
+</template>
+<script>
+import { mapGetters, mapMutations } from 'vuex'
+import { getMousePosition } from '../util'
+export default {
+  name: 'SelectionRegion',
+  props: {
+    region: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    ...mapGetters('wfEditor', [
+      'selectedTaches'
+    ])
+  },
+  methods: {
+    ...mapMutations('wfEditor', [
+      'setDrawingRegion',
+      'setMovingRegion',
+      'setMouseDownPosition'
+    ]),
+    startDrag(event) {
+      console.log('region mousedown')
+      const mouseDownPosition = getMousePosition(event)
+      this.setMouseDownPosition(mouseDownPosition)
+      this.setMovingRegion(true)
+    },
+    endDrag(event) {
+      console.log('region mouseup')
+
+      this.setMovingRegion(false)
+      this.setMouseDownPosition(null)
+    }
+  }
+}
+</script>
+<style>
+  .selection-region{
+    stroke: blue;
+    stroke-width: 1;
+    fill: white;
+    fill-opacity: 0;
+    opacity: 1;
+    cursor: move;
+  }
+  .dashed{
+    stroke-dasharray: 10 2;
+    /* 控制region在画的过程中不响应任何事件，只有画完后才能响应 */
+    pointer-events:none;
+  }
+</style>