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

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

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

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

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

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

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