customNode.js 1.66 KB
/*
 * @Date: 2025-03-13 16:11:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-03-13 17:09:32
 * @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;
    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();
    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,
};