G6 registerNode afterDraw createNodeBox contextMenu ToolBar 的综合使用

效果：

 

 

 

 代码：

import G6 from "@antv/g6";

// 提示
const graphDiv = document.getElementById("container");
const descriptionDiv = document.createElement("p");
descriptionDiv.style.padding = 0;
descriptionDiv.style.margin = 0;
descriptionDiv.style.fontSize = "12px";
descriptionDiv.style.color = "#999";
descriptionDiv.innerHTML =
  "    *提示：灰色任务代表“禁用”状态，右键进行对任务的删除、启用/禁用操作。";
graphDiv.appendChild(descriptionDiv);
// 右键
const contextMenu = new G6.Menu({
  getContent(evt) {
    const { dataType } = evt.item.getModel();
    const flag = dataType === "disabled";
    return `<div eventType = '1' style="cursor:pointer">删除</div>${
      flag
        ? '<div eventType="2" style="cursor:pointer">启用</div>'
        : '<div eventType="3" style="cursor:pointer">禁用</div>'
    }`;
  },
  shouldBegin(evt) {
    const { dataType } = evt.item.getModel();
    if (dataType && dataType === "root") {
      return false;
    } else {
      return true;
    }
  },
  handleMenuClick: (target, item) => {
    console.log(item.getModel());
    const eventType = target.getAttribute("eventType");
    switch (eventType) {
      default:
        return;
      case "1":
        console.log(1, eventType);
        break;
      case "2":
        console.log(2, eventType);
        break;
      case "3":
        console.log(3, eventType);
        break;
    }
  },
  offsetX: 16,
  offsetY: 0,
  itemTypes: ["node"]
});
// 工具栏按钮定制
const toolbar = new G6.ToolBar({
  position: { x: 700, y: 10 },
  getContent: () => {
    return `
      <ul>
        <li code='switch'>切换</li>
        <li code='fitView'>适应</li>
      </ul>
    `;
  },
  handleClick(code, graph) {
    switch (code) {
      case "switch": // 横、纵切换
        const controler = graph.get("layoutController");
        const { rankdir } = controler.layoutMethod;
        if (rankdir === "H") {
          controler.updateLayoutCfg({ rankdir: "LR" });
        } else {
          controler.updateLayoutCfg({ rankdir: "H" });
        }
        controler.relayout();
        graph.fitView();
        break;
      case "fitView": // 适应屏幕
        graph.fitView();
        break;
      default:
        return;
    }
  }
});

const ERROR_COLOR = "#F5222D";
const getNodeConfig = (node) => {
  if (node.nodeError) {
    return {
      basicColor: ERROR_COLOR,
      fontColor: "#FFF",
      borderColor: ERROR_COLOR,
      bgColor: "#E66A6C"
    };
  }
  let config = {
    basicColor: "#5B8FF9",
    fontColor: "#5B8FF9",
    borderColor: "#5B8FF9",
    bgColor: "#C6E5FF"
  };
  return config;
};
const nodeBasicMethod = {
  createNodeBox: (group, config, w, h, cfg) => {
    const nodeError = cfg.nodeError;
    /* 最外面的大矩形 */
    const container = group.addShape("rect", {
      attrs: {
        x: 3,
        y: 0,
        width: w,
        height: h,
        fill: config.bgColor,
        stroke: config.borderColor,
        radius: 2,
        cursor: "pointer"
      },
      name: "rect-shape"
    });
    /* 左边的粗线 */
    group.addShape("rect", {
      attrs: {
        x: 3,
        y: 0,
        width: 3,
        height: h,
        fill: config.basicColor,
        radius: 1.5
      },
      name: "left-border-shape"
    });
    // 启用、禁用 按钮 外框
    const ipRect = group.addShape("rect", {
      attrs: {
        fill: nodeError ? "transparent" : "#FFF",
        stroke: nodeError ? "rgba(255,255,255,0.65)" : null,
        radius: 2,
        cursor: "pointer",
        opacity: 0
      },
      name: "ip-container-shape"
    });
    // 启用、禁用 按钮 文字
    const ipText = group.addShape("text", {
      attrs: {
        text: cfg.ip,
        x: 40,
        y: 19,
        fontSize: 12,
        textAlign: "left",
        textBaseline: "middle",
        fill: nodeError ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.65)",
        cursor: "pointer",
        opacity: 0
      },
      name: "ip-text-shape"
    });
    // 移除 按钮外框
    const moveItemRect = group.addShape("rect", {
      attrs: {
        fill: nodeError ? "transparent" : "#E66A6C",
        stroke: nodeError ? "rgba(255,255,255,0.65)" : null,
        radius: 2,
        cursor: "pointer",
        opacity: 0
      },
      name: "remove-rect"
    });
    // 移除 按钮文字
    const moveItemText = group.addShape("text", {
      attrs: {
        text: "移除",
        x: 40,
        y: 19,
        fontSize: 12,
        textAlign: "left",
        textBaseline: "middle",
        fill: nodeError ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.65)",
        cursor: "pointer",
        opacity: 0
      },
      name: "remove-text"
    });
    const ipBBox = ipText.getBBox();
    const ipTextX = w - 20 - 2 * ipBBox.width;
    const ipTextY = ipBBox.minY - 5;
    const moveItemTextX = w - 10 - ipBBox.width;
    const moveItemTextY = ipBBox.minY - 5;
    ipText.attr({
      x: ipTextX
    });
    ipRect.attr({
      x: ipTextX - 4,
      y: ipTextY,
      width: ipBBox.width + 8,
      height: ipBBox.height + 10
    });
    moveItemText.attr({
      x: moveItemTextX + 4
    });
    moveItemRect.attr({
      x: moveItemTextX,
      y: moveItemTextY,
      width: ipBBox.width + 8,
      height: ipBBox.height + 10
    });
    // 任务 名称文字
    group.addShape("text", {
      attrs: {
        text: cfg.name,
        x: 12,
        y: 19,
        fontSize: 14,
        fontWeight: 700,
        textAlign: "left",
        textBaseline: "middle",
        fill: config.fontColor,
        cursor: "pointer"
      },
      name: "name-text-shape"
    });
    // 任务 内容文字
    group.addShape("text", {
      attrs: {
        text: cfg.keyInfo,
        x: 12,
        y: 45,
        fontSize: 14,
        textAlign: "left",
        textBaseline: "middle",
        fill: config.fontColor,
        cursor: "pointer"
      },
      name: "bottom-text-shape"
    });
    return container;
  },
  afterDraw: (cfg, group) => {
    // 添加 移入/移出 事件
    const ipLine = group.find(
      (element) => element.get("name") === "ip-container-shape"
    );
    const ipBG = group.find(
      (element) => element.get("name") === "ip-text-shape"
    );
    const removeRect = group.find(
      (element) => element.get("name") === "remove-rect"
    );
    const removeText = group.find(
      (element) => element.get("name") === "remove-text"
    );
    const onMouseEnter = () => {
      ipLine && ipLine.attr("opacity", 1);
      ipBG && ipBG.attr("opacity", 1);
      removeRect && removeRect.attr("opacity", 1);
      removeText && removeText.attr("opacity", 1);
      graph.get("canvas").draw();
    };
    const onMouseLeave = () => {
      ipLine && ipLine.attr("opacity", 0);
      ipBG && ipBG.attr("opacity", 0);
      removeRect && removeRect.attr("opacity", 0);
      removeText && removeText.attr("opacity", 0);
      graph.get("canvas").draw();
    };
    const lineclick = (e) => {
      console.log(e.target.getParent().get("item").getModel());
    };
    group.on("mouseenter", () => {
      onMouseEnter();
    });
    group.on("mouseleave", () => {
      onMouseLeave();
    });
    ipBG &&
      ipBG.on("click", (e) => {
        lineclick(e);
      });
    ipLine &&
      ipLine.on("click", (e) => {
        lineclick(e);
      });
  }
};
G6.registerNode(
  "card-node",
  {
    draw: (cfg, group) => {
      const config = getNodeConfig(cfg);
      /* 最外面的大矩形 */
      const container = nodeBasicMethod.createNodeBox(
        group,
        config,
        140,
        60,
        cfg
      );
      return container;
    },
    afterDraw: nodeBasicMethod.afterDraw,
    getAnchorPoints() {
      return [
        [0.5, 0],
        [0.5, 1],
        [0, 0.5],
        [1, 0.5]
      ];
    }
  },
  "rect"
);
G6.registerNode("sql", {
  drawShape(cfg, group) {
    const rect = group.addShape("rect", {
      attrs: {
        width: 100,
        height: 50,
        radius: 5,
        stroke: "#5B8FF9",
        fill: "#C6E5FF"
      },
      name: "rect-shape"
    });
    group.addShape("text", {
      attrs: {
        text: cfg.name,
        x: 50,
        y: 25,
        fill: "#00287E",
        fontSize: 14,
        textAlign: "center",
        textBaseline: "middle",
        fontWeight: "bold"
      },
      name: "text-shape"
    });
    return rect;
  },
  // 设置 节点 之间 锚点 连接位置
  getAnchorPoints() {
    return [
      [0.5, 0], // top-center
      [0.5, 1] // bottom-center
    ];
  }
});
const data = {
  nodes: [
    {
      id: "1",
      dataType: "root",
      name: "等级1",
      type: "sql"
    },
    {
      name: "任务1",
      ip: "启用",
      nodeError: true,
      keyInfo:
        "lsy3.novalocalsy3.novalocalsy3.novalocalsy3.novalocalsy3.novaloca",
      id: "2",
      comboId: "A",
      dataType: "disabled",
      type: "card-node"
    },
    {
      name: "任务1",
      ip: "启用",
      nodeError: true,
      keyInfo: "lsy3.novaloca",
      id: "12",
      comboId: "A",
      dataType: "disabled",
      type: "card-node"
    },
    {
      name: "任务1",
      ip: "启用",
      nodeError: true,
      keyInfo: "lsy3.novaloca",
      id: "22",
      comboId: "A",
      dataType: "disabled",
      type: "card-node"
    },
    {
      name: "任务1",
      ip: "启用",
      nodeError: true,
      keyInfo: "lsy3.novaloca",
      id: "32",
      comboId: "A",
      dataType: "disabled",
      type: "card-node"
    },
    {
      id: "3",
      name: "任务2",
      comboId: "A",
      ip: "禁用",
      nodeError: false,
      keyInfo: "lsy3.novaloca",
      type: "card-node"
    },
    {
      id: "13",
      name: "任务2",
      comboId: "A",
      ip: "禁用",
      nodeError: false,
      keyInfo: "lsy3.novaloca",
      type: "card-node"
    },
    {
      id: "4",
      dataType: "root",
      name: "等级2",
      type: "sql"
    },
    {
      id: "5",
      name: "任务1",
      comboId: "B",
      ip: "禁用",
      nodeError: false,
      keyInfo: "lsy3.novaloca",
      type: "card-node"
    },
    {
      id: "6",
      name: "任务2",
      comboId: "B",
      ip: "禁用",
      nodeError: false,
      keyInfo: "lsy3.novaloca",
      type: "card-node"
    },
    {
      id: "7",
      dataType: "root",
      name: "等级3",
      type: "sql"
    },
    {
      id: "8",
      name: "任务1",
      comboId: "C",
      ip: "禁用",
      nodeError: false,
      keyInfo: "lsy3.novaloca",
      type: "card-node"
    },
    {
      id: "9",
      name: "任务2",
      comboId: "C",
      ip: "禁用",
      nodeError: false,
      keyInfo: "lsy3.novaloca",
      type: "card-node"
    }
  ],
  edges: [
    {
      source: "1",
      target: "2"
    },
    {
      source: "1",
      target: "12"
    },
    {
      source: "1",
      target: "22"
    },
    {
      source: "1",
      target: "32"
    },
    {
      source: "1",
      target: "3"
    },
    {
      source: "1",
      target: "13"
    },
    {
      source: "2",
      target: "4"
    },
    {
      source: "12",
      target: "4"
    },
    {
      source: "22",
      target: "4"
    },
    {
      source: "32",
      target: "4"
    },
    {
      source: "3",
      target: "4"
    },
    {
      source: "13",
      target: "4"
    },
    {
      source: "4",
      target: "5"
    },
    {
      source: "4",
      target: "6"
    },

    {
      source: "5",
      target: "7"
    },
    {
      source: "6",
      target: "7"
    },
    {
      source: "7",
      target: "8"
    },
    {
      source: "7",
      target: "9"
    }
  ],
  combos: [
    {
      id: "A"
    },
    {
      id: "B"
    },
    {
      id: "C"
    }
  ]
};

const width = 800;
const height = 800;
const graph = new G6.Graph({
  container: "container",
  width,
  height,
  layout: {
    type: "dagre",
    controlPoints: true,
    rankdir: "H" // H 从上到下，LR 从左到右
  },
  plugins: [contextMenu, toolbar],
  defaultEdge: {
    style: {
      endArrow: true,
      offset: 45,
      stroke: "#C2C8D5"
    }
  },
  modes: {
    default: ["drag-canvas", "zoom-canvas"]
  },
  fitView: true,
  defaultCombo: {
    type: "rect"
  }
});
graph.data(data);
graph.render();

地址：https://codesandbox.io/s/suspicious-bose-qonry?file=/index.js