customNode.js 2.14 KB
/*
 * @Date: 2025-03-13 16:11:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-16 00:39:21
 * @FilePath: /logic-flow2/src/views/adv-menu/customNode.js
 * @Description: 文件描述
 */
import { RectNode, RectNodeModel } from "@logicflow/core";

class CustomModel extends RectNodeModel {
  setAttributes() {
    this.radius = 10;
    const {
      properties: { isDisabledNode },
    } = this;
    // 设置节点是否可以被连接
    this.sourceRules.push({
      message: "禁用节点不能作为连接源",
      validate: () => !isDisabledNode
    });
    this.targetRules.push({
      message: "禁用节点不能作为连接目标",
      validate: () => !isDisabledNode
    });
    if (!isDisabledNode) {
      // 单独为非禁用的元素设置菜单。
      this.menu = [
        {
          className: "lf-menu-delete",
          icon: true,
          text: "delete",
          callback: (node) => {
            this.graphModel.deleteNode(node.id);
            this.graphModel.eventCenter.emit("custom:event", node);
          },
        },
        {
          text: "edit",
          className: "lf-menu-item",
          callback: (node) => {
            this.graphModel.setElementStateById(node.id, 2);
          },
        },
        {
          text: "copy",
          className: "lf-menu-item",
          callback: (node) => {
            this.graphModel.cloneNode(node.id);
          },
        },
      ];
    }
  }

  // 添加 getNodeStyle 方法
  getNodeStyle() {
    const style = super.getNodeStyle();
    const { isDisabledNode } = this.properties;
    if (isDisabledNode) {
      style.stroke = "#999999";
      style.fill = "#f0f0f0";
      style.strokeDasharray = "3 3";
    } else {
      style.stroke = "#1E90FF";
      style.fill = "#F0F8FF";
    }
    return style;
  }
}

class CustomNode extends RectNode {
  getNodeStyle() {
    const style = super.getNodeStyle();
    const {
      properties: { isDisabledNode },
    } = this.props.model;
    if (isDisabledNode) {
      style.cursor = "not-allowed";
    }
    return style;
  }
}

export default {
  type: "custom-node",
  view: CustomNode,
  model: CustomModel,
};