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

package/packages/workflow-editor/src/json-object-templates/transition.js

@@ -0,0 +1,26 @@
+export default function newTransition() {
+  return {
+    attr: {
+      id: '',
+      from: '',
+      to: ''
+    },
+    g: {},
+
+    basicProperties: {
+      remark: '',
+      isOriginalUser: false,
+      condition: ''
+    },
+    inform: {
+      informType: 'mail',
+      userCondition: '',
+      subject: '',
+      content: ''
+    },
+    autoFilledFields: {
+      field: []
+    },
+    onTransit: false // 触发流过事件
+  }
+}

package/packages/workflow-editor/src/main/admin-save-dialog.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-dialog
+    model-value
+    :title="$t('workflowEditorPublicModel.tipTitle')"
+    :center="true"
+    top="10vh"
+    append-to-body
+    @open="$emit('open')"
+    @opend="$emit('opend')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <div>
+      {{ $t('workflowEditorMessage.adminSaveTip') }}
+    </div>
+    <ul>
+      <li>
+        {{ $t('workflowEditorMessage.adminSaveTip1') }}
+      </li>
+      <li>
+        {{ $t('workflowEditorMessage.adminSaveTip2') }}
+      </li>
+      <li>
+        {{ $t('workflowEditorMessage.adminSaveTip3') }}
+      </li>
+      <li>
+        {{ $t('workflowEditorMessage.adminSaveTip4') }}
+      </li>
+    </ul>
+    <div>
+      {{ $t('workflowEditorMessage.adminSaveTip5') }}
+    </div>
+    <template #footer>
+      <el-button @click="updateWfVersion">
+        {{ $t('workflowEditorMessage.updateVersion') }}
+      </el-button>
+      <el-button type="primary" @click="addWfVersion">
+        {{ $t('workflowEditorMessage.addVersion') }}
+      </el-button>
+      <el-button @click="$emit('close')">
+        {{ $t('workflowEditorPublicModel.cancel') }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'AdminSaveDialog',
+  data() {
+    return {
+      dialogVisible: true
+
+    }
+  },
+  methods: {
+    updateWfVersion() {
+      this.$emit('update')
+    },
+    addWfVersion() {
+      this.$emit('add')
+    }
+  }
+}
+</script>
+

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

@@ -0,0 +1,493 @@
+<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"
+      /> -->
+      <!--必须这样写，否则线条不显示-->
+      <component :is="'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 AutoTask from '../taches/auto-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 AutoTaskPropertiesEditor from '../properties-editors/auto-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,
+    AutoTask,
+    AutoTaskPropertiesEditor
+  },
+  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'
+    ])
+  },
+  watch:{
+    propertiesEditorFor(newValue,oldVal){
+      console.log('wathch----propertiesEditorFor----newValue=',newValue,'oldVal=',oldVal)
+    }
+  },
+  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
+        controlPoints[pointIndex] = this.currentPosition
+        // 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>