workflow-editor 0.0.81-up-tmp12 → 0.0.81-up-tmp16

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

package/packages/workflow-editor/src/transitions/transition.vue

@@ -1,209 +0,0 @@
-<template>
-  <g :class="{ 'no-events': draggerToMove != null }" @mousedown.stop="select" @dblclick.stop="showPropertiesEditor">
-    <text :x="text.x" :y="text.y" text-anchor="middle" class="draggable">
-      {{ name }}
-    </text>
-    <component
-      :is="model.lineInfo.type"
-      :owner="model"
-      :class="{
-        transition: true,
-        selected: model.isSelected || (model.startJoint.parent.isSelected && model.endJoint.parent.isSelected)
-      }"
-    />
-    <!-- <straight-line :owner="model" :class="{'transition':true,'selected':model.isSelected||(model.startJoint.parent.isSelected&&model.endJoint.parent.isSelected)}"/> -->
-    <g v-if="model.isSelected">
-      <circle
-        v-for="dragger in draggers"
-        :key="dragger.position"
-        :cx="dragger.x"
-        :cy="dragger.y"
-        class="transition-dragger"
-        r="4"
-        @mousedown.stop="startDrag($event, dragger.position)"
-        @mouseup="endDrag"
-      />
-    </g>
-  </g>
-</template>
-<script>
-import { getJoint, getMousePosition, clearAllSelectedComponents, watchShowName } from '../util'
-import { mapGetters, mapMutations } from 'vuex'
-import StraightLine from './straight-line'
-import CurveLine from './curve-line'
-import BrokenLine from './broken-line'
-export default {
-  name: 'Transition',
-  components: {
-    StraightLine,
-    CurveLine,
-    BrokenLine
-  },
-  props: {
-    model: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    const point = this.getTextPoint()
-    return {
-      text: {
-        x: point.x,
-        y: point.y
-      },
-      name: this.model.remark
-    }
-  },
-  computed: {
-    ...mapGetters('wfEditor', ['draggerToMove', 'processI18n']),
-    draggers() {
-      const startPoint = getJoint(this.model.startJoint.parent, this.model.startJoint.position)
-      startPoint.position = 'start'
-      const endPoint = getJoint(this.model.endJoint.parent, this.model.endJoint.position)
-      endPoint.position = 'end'
-      return [startPoint, endPoint]
-    },
-    path() {
-      return 'M' + this.draggers[0].x + ' ' + this.draggers[0].y + ' L' + this.draggers[1].x + ' ' + this.draggers[1].y
-    }
-  },
-  created() {
-    this.name = watchShowName(this, this.name)
-  },
-  mounted() {
-    // 线条名称内容修改时
-    this.$watch('model.remark', function (newVal) {
-      this.name = watchShowName(this, newVal)
-      if (this.name && this.name !== '') {
-        // 计算文本框的x、y坐标
-        const point = this.getTextPoint()
-        this.text.x = point.x
-        this.text.y = point.y
-      }
-    })
-    // 右键菜单更改线条方式时
-    this.$watch('model.lineInfo.type', function (newVal) {
-      // 计算文本框的x、y坐标
-      const point = this.getTextPoint()
-      this.text.x = point.x
-      this.text.y = point.y
-    })
-    // 拖动控制点的位置时
-    this.$watch('model.lineInfo.controlPoint', function (newVal) {
-      // 计算文本框的x、y坐标
-      const point = this.getTextPoint()
-      this.text.x = point.x
-      this.text.y = point.y
-    })
-    // 水平拖动起点节点
-    this.$watch('model.startJoint.parent.x', function (newVal) {
-      // 计算文本框的x、y坐标
-      const point = this.getTextPoint()
-      this.text.x = point.x
-      this.text.y = point.y
-    })
-    // 垂直拖动起点节点
-    this.$watch('model.startJoint.parent.y', function (newVal) {
-      // 计算文本框的x、y坐标
-      const point = this.getTextPoint()
-      this.text.x = point.x
-      this.text.y = point.y
-    })
-    // 水平拖动终点节点
-    this.$watch('model.endJoint.parent.x', function (newVal) {
-      // 计算文本框的x、y坐标
-      const point = this.getTextPoint()
-      this.text.x = point.x
-      this.text.y = point.y
-    })
-    // 垂直拖动终点节点
-    this.$watch('model.endJoint.parent.y', function (newVal) {
-      // 计算文本框的x、y坐标
-      const point = this.getTextPoint()
-      this.text.x = point.x
-      this.text.y = point.y
-    })
-  },
-  methods: {
-    ...mapMutations('wfEditor', [
-      'setMouseDownPosition',
-      'setDraggerToMove',
-      'setSelectedTransition',
-      'setPropertiesEditorFor'
-    ]),
-    getTextPoint() {
-      const startPoint = getJoint(this.model.startJoint.parent, this.model.startJoint.position)
-      const endPoint = getJoint(this.model.endJoint.parent, this.model.endJoint.position)
-      let minX = startPoint.x < endPoint.x ? startPoint.x : endPoint.x
-      let minY = startPoint.y < endPoint.y ? startPoint.y : endPoint.y
-      let textX = minX + Math.abs(startPoint.x - endPoint.x) / 2
-      let textY = minY + Math.abs(startPoint.y - endPoint.y) / 2
-      if (this.model.lineInfo.type === 'CurveLine') {
-        // 曲线
-        const point = this.model.lineInfo.controlPoint
-        if (point) {
-          minX = startPoint.x < point.x ? startPoint.x : parseFloat(point.x)
-          minY = startPoint.y < point.y ? startPoint.y : parseFloat(point.y)
-          textX = minX + Math.abs(startPoint.x - point.x) / 2 + 10
-          textY = minY + Math.abs(startPoint.y - point.y) / 2 - 10
-        }
-      } else if (this.model.lineInfo.type === 'BrokenLine') {
-        if (this.model.lineInfo.controlPoint && this.model.lineInfo.controlPoint.length > 0) {
-          const point = this.model.lineInfo.controlPoint[0]
-          if (point) {
-            minX = startPoint.x < point.x ? startPoint.x : parseFloat(point.x)
-            minY = startPoint.y < point.y ? startPoint.y : parseFloat(point.y)
-            textX = minX + Math.abs(startPoint.x - point.x) / 2
-            textY = minY + Math.abs(startPoint.y - point.y) / 2 - 10
-          }
-        }
-      }
-      return { x: textX, y: textY }
-    },
-    select(event) {
-      clearAllSelectedComponents()
-      this.model.isSelected = true
-      this.setSelectedTransition(this.model)
-    },
-    startDrag(event, position) {
-      console.log('start dragging line')
-      this.setMouseDownPosition(getMousePosition(event))
-      this.setDraggerToMove({
-        owner: this.model,
-        position,
-        originStartJoint: this.model.startJoint,
-        originEndJoint: this.model.endJoint
-      })
-    },
-    endDrag() {
-      // this.setSe
-    },
-    showPropertiesEditor() {
-      if (this.model.endJoint.parent.type !== 'Decision') {
-        this.setPropertiesEditorFor('Transition')
-      }
-    }
-  }
-}
-</script>
-<style scoped>
-.transition {
-  stroke-width: 2;
-  stroke: #666;
-  fill: none;
-  cursor: pointer;
-}
-.selected {
-  stroke: red;
-}
-.transition-dragger {
-  stroke: red;
-  stroke-width: 1;
-  fill: white;
-  cursor: move;
-}
-.no-events {
-  pointer-events: none;
-}
-</style>

package/packages/workflow-editor/src/transitions/virtual-transition.vue

@@ -1,43 +0,0 @@
-<template>
-  <g>
-    <path v-show="path" :d="path" class="virtual-transition" marker-end="url(#arrow)" />
-  </g>
-</template>
-<script>
-import { getJoint } from '../util'
-import { mapGetters } from 'vuex'
-export default {
-  name: 'VirtualTransition',
-  props: {
-    toPosition: {
-      type: Object,
-      default: null
-    }
-  },
-  computed: {
-    ...mapGetters('wfEditor', [
-      'startJoint'
-    ]),
-    path() {
-      if (!this.startJoint) {
-        return null
-      }
-      const startJoint = getJoint(this.startJoint.parent, this.startJoint.position)
-      // 虚线的endJoint存的就是鼠标的当前位置，此时还没有连接到任何环节上
-      const endJoint = this.toPosition
-      return 'M' + startJoint.x + ' ' + startJoint.y + ' L' + endJoint.x + ' ' + endJoint.y
-    }
-  },
-  methods: {
-
-  }
-}
-</script>
-<style>
-  .virtual-transition{
-    stroke-width: 2;
-    stroke:#000;
-    stroke-dasharray: 2 2;
-    fill: none;
-  }
-</style>