snakerflow-designer-vue-plus/packages/SnakerFlowDesigner/src/snakerflow/transition/index.js

首先感谢snakerflow-designer-vue的原作者，提供了一个如此好用的工具。本人在此基础上，添加了子流程相关的节点，并将折线改为横线，横线文字说明可跟着横线的位置自动跟随移动。

// // 折线
// import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core'
// 直线
// eslint-disable-next-line no-unused-vars
import { LineEdge, LineEdgeModel, h } from '@logicflow/core'
// // 贝塞尔曲线
// import { BezierEdge, BezierEdgeModel } from "@logicflow/core";

class TransitionModel extends LineEdgeModel {
  static extendKey = 'TransitionModel';
  getEdgeStyle () {
    const style = super.getEdgeStyle()
    if (this.properties.state === 'active') {
      style.stroke = '#ff0000'
    } else if (this.properties.state === 'history') {
      style.stroke = '#00ff00'
    }
    if (this.properties.isAnimation) {
      style.stroke = '#0023ff'
    }
    return style
  }

  initEdgeData (data) {
    super.initEdgeData(data)
    this.customTextPosition = true
  }

  setAttributes () {
    this.properties.isAnimation = false
  }

  setHovered (isHovered) {
    super.setHovered(isHovered)
    this.properties.isAnimation = isHovered
  }

  getEdgeAnimationStyle () {
    const style = super.getEdgeAnimationStyle()
    style.strokeDasharray = '5 5'
    style.strokeDashoffset = '100%'
    style.animationDuration = '10s'
    return style
  }

  getTextPosition () {
    const position = super.getTextPosition()
    const currentPositionList = this.points.split(' ')
    const pointsList = []
    currentPositionList &&
    currentPositionList.forEach((item) => {
      const [x, y] = item.split(',')
      pointsList.push({ x: Number(x), y: Number(y) })
    })
    if (pointsList.length > 1) {
      const { x: x1, y: y1 } = pointsList[0]
      const { x: x2, y: y2 } = pointsList[1]
      let distence = 50
      // 垂直
      if (x1 === x2) {
        if (y2 < y1) {
          // 上
          distence = -50
        }
        position.y = y1 + distence
        position.x = x1
      } else {
        // 水平
        if (x2 < x1) {
          // 左
          distence = -50
        }
        position.x = x1 + distence
        position.y = y1 - 10
      }
    }
    return position
  }
}

class TransitionView extends LineEdge {
  static extendKey = 'TransitionEdge';
}

const Transition = {
  type: 'snaker:transition',
  view: TransitionView,
  model: TransitionModel
}

export { TransitionView, TransitionModel }
export default Transition