workflow-editor 0.0.7-up → 0.0.8-up

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

@@ -1,212 +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') {
-        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>