workflow-editor 0.0.7-up → 0.0.8-up

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

@@ -1,66 +0,0 @@
-<template>
-  <el-dialog
-    visible
-    :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>
-    <div slot="footer" class="dialog-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>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-
-export default {
-  name: 'AdminSaveDialog',
-  data() {
-    return {
-
-    }
-  },
-  methods: {
-    updateWfVersion() {
-      this.$emit('update')
-    },
-    addWfVersion() {
-      this.$emit('add')
-    }
-  }
-}
-</script>
-

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

@@ -1,483 +0,0 @@
-<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 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'
-    ])
-  },
-  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

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

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