rh-vue3-snakerflow-designer/packages/SnakerFlowDesigner/src/snakerflow/start/index.ts

情怀！N年前使用的工作流引擎，虽然原作者已经不再维护，但是还是有那么一波人还在使用。个人看来其核心功能尚好，麻雀虽少，五脏俱全，是用来学习工作流引擎的好项目。但其流程设计器所用的技术栈可能就跟不上时代了（2016年前的开源项目）。为了让大伙或自己用得更舒心，或者也为了让更多人认识或重新认识这个工作流引擎。本人就花些许时间，使用现阶段前端主流的技术栈重新开发此款流程设计器。如大家在使用的过程中如有啥问题，欢迎留言或进群交流！

import { CircleNode, CircleNodeModel, ConnectRule, GraphModel, h, NodeConfig } from '@logicflow/core'
import { nodeStyleHandle } from '../tool'

class StartModel extends CircleNodeModel {
  static extendKey = 'StartModel';
  constructor (data: NodeConfig, graphModel: GraphModel) {
    if (!data.text) {
      data.text = ''
    }
    if (data.text && typeof data.text === 'string') {
      data.text = {
        value: data.text,
        x: data.x,
        y: data.y + 40
      }
    }
    super(data, graphModel)
  }

  setAttributes (): void {
    this.r = 18
  }

  getConnectedTargetRules (): ConnectRule[] {
    const rules = super.getConnectedTargetRules()
    const notAsTarget = {
      message: '起始节点不能作为边的终点',
      validate: () => false
    }
    rules.push(notAsTarget)
    return rules
  }

  getNodeStyle (): {
    [x: string]: any;
    r?: number;
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    strokeDasharray?:string;
    } {
    const style = super.getNodeStyle()
    style.fill = '#ffffff'
    style.stroke = '#2c89ff'
    style.strokeDasharray = '6 3'
    return nodeStyleHandle(this, style)
  }
}

class StartView extends CircleNode {
  static extendKey = 'StartNode';

  getShape ():h.JSX.Element {
    const { model } = this.props
    const style = model.getNodeStyle()
    style.fill = '#2c89ff'
    const { x, y, r } = model
    const outCircle = super.getShape()
    return h(
      'g',
      {},
      outCircle,
      h('circle', {
        ...style,
        cx: x,
        cy: y,
        r: r - 5
      })
    )
  }
}

const Start = {
  type: 'snaker:start',
  view: StartView,
  model: StartModel
}

export { StartModel, StartView }
export default Start