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

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

import { h, RectNode, RectNodeModel } from '@logicflow/core'
import { nodeStyleHandle } from '../tool'
class SubProcessModel extends RectNodeModel {
  static extendKey = 'SubProcessModel';
  constructor (data, graphModel) {
    super(data, graphModel)
    this.width = data.properties.width ? data.properties.width : 130
    this.height = data.properties.height ? data.properties.height : 50
  }

  getNodeStyle () {
    const style = super.getNodeStyle()
    const styleHandle = nodeStyleHandle(this, style)
    styleHandle.fill = '#ff0c00'
    styleHandle.fillOpacity = 0.1
    return styleHandle
  }
}

class SubProcessView extends RectNode {
  static extendKey = 'SubProcessNode';
  getLabelShape () {
    const { model } = this.props
    const { x, y, width, height } = model
    // eslint-disable-next-line no-unused-vars
    const style = model.getNodeStyle()
    return h(
      'svg',
      {
        x: x - width / 2 + 5,
        y: y - height / 2 + 5,
        width: 25,
        height: 25,
        viewBox: '0 0 1274 1024'
      }
    )
  }

  getShape () {
    const { model } = this.props
    const { x, y, width, height, radius } = model
    const style = model.getNodeStyle()
    // todo: 将basic-shape对外暴露，在这里可以直接用。现在纯手写有点麻烦。
    return h('g', {}, [
      h('rect', {
        ...style,
        x: x - width / 2,
        y: y - height / 2,
        rx: radius,
        ry: radius,
        width,
        height
      }),
      this.getLabelShape()
    ])
  }
}

const SubProcess = {
  type: 'snaker:subprocess',
  view: SubProcessView,
  model: SubProcessModel
}

export { SubProcessView, SubProcessModel }
export default SubProcess