ingenious-flow-designer/packages/flow-designer/src/nodes/Start.ts

[演示地址](http://antd-vben5-pro.madong.tech/)

import { GraphModel, h, CircleNode, CircleNodeModel, ConnectRule } from "@logicflow/core";
import { ColorEnum, NodeStateEnum } from "../types/enums";

class StartModel extends CircleNodeModel {
  constructor(data: any, graphModel: GraphModel) {
    super(data, graphModel);
  }

  setAttributes(): void {
    this.r = 20;
    if((this.text && this.text.value == "") || !this.text) {
      this.text.value = "开始";
    }
    this.text.draggable = false;
    this.text.editable = false;

    if (this.properties._width) {
      this.r = this.properties._width / 2;
    }
    if (this.properties._stroke) {
      this.properties.stroke = this.properties._stroke;
    }
    if (this.properties._fill) {
      this.properties.fill = this.properties._fill;
    }
    if (this.properties._strokeWidth) {
      this.properties.strokeWidth = this.properties._strokeWidth;
    }
    if (this.properties._opacity) {
      this.properties.opacity = this.properties._opacity;
    }
  }

  getConnectedTargetRules(): ConnectRule[] {
    const rules = super.getConnectedTargetRules();
    rules.push({
      message: "开始节点不能是边的目标节点",
      validate: () => false
    });
    return rules;
  }

  getNodeStyle() {
    const style = super.getNodeStyle();
    const state = this.properties.state;

    if(state === NodeStateEnum.history) {
      style.stroke = ColorEnum.historyColor;
      style.fill = `${ColorEnum.historyColor}10`;
    } else if(state === NodeStateEnum.active) {
      style.stroke = ColorEnum.activeColor;
      style.fill = `${ColorEnum.activeColor}10`;
    } else if(state === NodeStateEnum.error) {
      style.stroke = ColorEnum.errorColor;
      style.fill = `${ColorEnum.errorColor}10`;
    } else {
      style.stroke = ColorEnum.successColor;
      style.fill = `${ColorEnum.successColor}10`;
    }

    if (this.properties._stroke) {
      style.stroke = this.properties._stroke;
    }
    if (this.properties._fill) {
      style.fill = this.properties._fill;
    }
    if (this.properties._strokeWidth) {
      style.strokeWidth = this.properties._strokeWidth;
    }
    if (this.properties._opacity !== undefined) {
      style.opacity = this.properties._opacity;
    }

    return style;
  }
}

class StartView extends CircleNode {
  private getStartIcon() {
    const { model } = this.props;
    const { x, y } = model;
    const style = model.getNodeStyle();
    const iconSize = 16;

    return h("circle", {
      cx: x,
      cy: y,
      r: iconSize / 2,
      fill: "none",
      stroke: style.stroke,
      strokeWidth: 1.5
    });
  }

  getResizeShape() {
    const { model } = this.props;
    const { x, y, r } = model;
    const style = model.getNodeStyle();
    return h("g", {}, [
      h("circle", {
        ...style,
        cx: x,
        cy: y,
        r
      }),
      this.getStartIcon()
    ]);
  }

  getShape() {
    return this.getResizeShape();
  }
}

export default {
  type: "start",
  view: StartView,
  model: StartModel,
};