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

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

import { GraphModel, h, NodeConfig, RectNode, RectNodeModel } from '@logicflow/core'
import { nodeStyleHandle } from '../tool'
class TaskModel extends RectNodeModel {
  static extendKey = 'TaskModel';
  constructor (data: NodeConfig, graphModel: GraphModel) {
    super(data, graphModel)
    if (data.properties) {
      this.width = (data.properties.width ? data.properties.width : 120) as number
      this.height = (data.properties.height ? data.properties.height : 80) as number
    }
  }

  getNodeStyle ():{
    [x: string]: any;
    width?: number;
    height?: number;
    radius?: number;
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    } {
    const style = super.getNodeStyle()
    style.fill = '#ffffff'
    style.stroke = '#2e88ff'
    return nodeStyleHandle(this, style)
  }
}

class TaskView extends RectNode {
  static extendKey = 'TaskNode';
  getLabelShape ():h.JSX.Element {
    const { model } = this.props
    const { x, y, width, height } = model
    const style = model.getNodeStyle()
    console.log(y, height / 2)
    return h(
      'svg',
      {
        x: x - width / 2 + 5,
        y: y - height / 2 + 5,
        width: 25,
        height: 25,
        viewBox: '0 0 1274 1024'
      },
      h('path', {
        fill: style.stroke,
        d:
          'M655.807326 287.35973m-223.989415 0a218.879 218.879 0 1 0 447.978829 0 218.879 218.879 0 1 0-447.978829 0ZM1039.955839 895.482975c-0.490184-212.177424-172.287821-384.030443-384.148513-384.030443-211.862739 0-383.660376 171.85302-384.15056 384.030443L1039.955839 895.482975z'
      })
    )
  }

  getShape ():h.JSX.Element {
    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 Task = {
  type: 'snaker:task',
  view: TaskView,
  model: TaskModel
}

export { TaskView, TaskModel }
export default Task