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

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

import { GraphModel, h, DiamondNode, DiamondNodeModel } from "@logicflow/core";
import { ColorEnum, NodeStateEnum } from "../types/enums";

class DecisionModel extends DiamondNodeModel {
  constructor(data: any, graphModel: GraphModel) {
    super(data, graphModel);
  }

  setAttributes(): void {
    this.text.value = "";
    this.text.draggable = false;
    this.text.editable = false;

    const baseSize = 48;
    if (this.properties._width) {
      this.rx = this.properties._width / 2;
      this.ry = this.properties._width / 2;
    } else if (this.properties._height) {
      this.rx = this.properties._height / 2;
      this.ry = this.properties._height / 2;
    } else {
      this.rx = baseSize / 2;
      this.ry = baseSize / 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;
    }

    if (!this.properties.conditions) {
      this.properties.conditions = [
        {
          id: `cond_${Date.now()}_1`,
          name: "条件1",
          expression: "condition1 == true",
          targetNode: ""
        },
        {
          id: `cond_${Date.now()}_2`,
          name: "条件2",
          expression: "condition2 == true",
          targetNode: ""
        }
      ];
    }
  }

  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 = '#e6a23c';
      style.fill = '#fdf6ec';
    }

    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;
  }

  addCondition(condition: any) {
    if (!this.properties.conditions) {
      this.properties.conditions = [];
    }
    this.properties.conditions.push({
      id: `cond_${Date.now()}`,
      ...condition
    });
    this.setProperties(this.properties);
  }

  removeCondition(conditionId: string) {
    if (this.properties.conditions) {
      this.properties.conditions = this.properties.conditions.filter(
        (cond: any) => cond.id !== conditionId
      );
      this.setProperties(this.properties);
    }
  }

  updateCondition(conditionId: string, updates: any) {
    if (this.properties.conditions) {
      const index = this.properties.conditions.findIndex(
        (cond: any) => cond.id === conditionId
      );
      if (index > -1) {
        this.properties.conditions[index] = {
          ...this.properties.conditions[index],
          ...updates
        };
        this.setProperties(this.properties);
      }
    }
  }
}

class DecisionView extends DiamondNode {
  private getDecisionIcon() {
    const { model } = this.props;
    const { x, y } = model;
    const style = model.getNodeStyle();
    const iconSize = 16;

    const halfSize = iconSize / 2;
    return h("g", {}, [
      h("line", {
        x1: x - halfSize,
        y1: y - halfSize,
        x2: x + halfSize,
        y2: y + halfSize,
        stroke: style.stroke,
        strokeWidth: 2,
        strokeLinecap: "round"
      }),
      h("line", {
        x1: x + halfSize,
        y1: y - halfSize,
        x2: x - halfSize,
        y2: y + halfSize,
        stroke: style.stroke,
        strokeWidth: 2,
        strokeLinecap: "round"
      })
    ]);
  }

  getResizeShape() {
    const { model } = this.props;
    const { x, y, width, height } = model;
    const style = model.getNodeStyle();
    return h("g", {}, [
      h("path", {
        ...style,
        d: `M ${x} ${y - height/2} L ${x + width/2} ${y} L ${x} ${y + height/2} L ${x - width/2} ${y} Z`
      }),
      this.getDecisionIcon()
    ]);
  }

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

export default {
  type: "decision",
  view: DecisionView,
  model: DecisionModel,
};