linjinyu
/
g6
同期ミラー https://gitee.com/antvis/g6.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>自定义卡片节点</title>
</head>
<body>
  <div id="mountNode"></div>
  <script src="../build/g6.js"></script>
  <script>
    const ERROR_COLOR = "#F5222D";
    const getNodeConfig = node => {
      if (node.nodeError) {
        return {
          basicColor: ERROR_COLOR,
          fontColor: "#FFF",
          borderColor: ERROR_COLOR,
          bgColor: "#E66A6C"
        };
      }
      let config = {
        basicColor: "#722ED1",
        fontColor: "#722ED1",
        borderColor: "#722ED1",
        bgColor: "#F6EDFC"
      };
      switch (node.type) {
        case "root": {
          config = {
            basicColor: "#E3E6E8",
            fontColor: "rgba(0,0,0,0.85)",
            borderColor: "#E3E6E8",
            bgColor: "#F7F9FA"
          };
          break;
        }
        default:
          break;
      }
      return config;
    };
    
    const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
      return [
        ["M", x - r, y],
        ["a", r, r, 0, 1, 0, r * 2, 0],
        ["a", r, r, 0, 1, 0, -r * 2, 0],
        ["M", x - r + 4, y],
        ["L", x - r + 2 * r - 4, y]
      ];
    };
    const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
      return [
        ["M", x - r, y],
        ["a", r, r, 0, 1, 0, r * 2, 0],
        ["a", r, r, 0, 1, 0, -r * 2, 0],
        ["M", x - r + 4, y],
        ["L", x - r + 2 * r - 4, y],
        ["M", x - r + r, y - r + 4],
        ["L", x, y + r - 4]
      ];
    };
    
    const nodeBasicMethod = {
      createNodeBox: (group, config, width, height, isRoot) => {
        /* 最外面的大矩形 */
        const container = group.addShape("rect", {
          attrs: {
            x: 0,
            y: 0,
            width,
            height
          }
        });
        if (!isRoot) {
          /* 左边的小圆点 */
          group.addShape("circle", {
            attrs: {
              x: 3,
              y: height / 2,
              r: 6,
              fill: config.basicColor
            }
          });
        }
        /* 矩形 */
        group.addShape("rect", {
          attrs: {
            x: 3,
            y: 0,
            width: width - 19,
            height,
            fill: config.bgColor,
            stroke: config.borderColor,
            radius: 2,
            cursor: "pointer"
          }
        });

        /* 左边的粗线 */
        group.addShape("rect", {
          attrs: {
            x: 3,
            y: 0,
            width: 3,
            height,
            fill: config.basicColor,
            radius: 1.5
          }
        });
        return container;
      },
      /* 生成树上的 marker */
      createNodeMarker: (group, collapsed, x, y) => {
        group.addShape("circle", {
          attrs: {
            x,
            y,
            r: 13,
            fill: "rgba(47, 84, 235, 0.05)",
            opacity: 0,
            zIndex: -2
          },
          className: "collapse-icon-bg"
        });
        group.addShape("marker", {
          attrs: {
            x,
            y,
            radius: 7,
            symbol: collapsed ? EXPAND_ICON : COLLAPSE_ICON,
            stroke: "rgba(0,0,0,0.25)",
            fill: "rgba(0,0,0,0)",
            lineWidth: 1,
            cursor: "pointer"
          },
          className: "collapse-icon"
        });
      },
      afterDraw: (cfg, group) => {
        /* 操作 marker 的背景色显示隐藏 */
        const icon = group.findByClassName("collapse-icon");
        if (icon) {
          const bg = group.findByClassName("collapse-icon-bg");
          icon.on("mouseenter", () => {
            bg.attr("opacity", 1);
            graph.get("canvas").draw();
          });
          icon.on("mouseleave", () => {
            bg.attr("opacity", 0);
            graph.get("canvas").draw();
          });
        }
        /* ip 显示 */
        const ipBox = group.findByClassName("ip-box");
        if (ipBox) {
          /* ip 复制的几个元素 */
          const ipLine = group.findByClassName("ip-cp-line");
          const ipBG = group.findByClassName("ip-cp-bg");
          const ipIcon = group.findByClassName("ip-cp-icon");
          const ipCPBox = group.findByClassName("ip-cp-box");

          const onMouseEnter = () => {
            this.ipHideTimer && clearTimeout(this.ipHideTimer);
            ipLine.attr("opacity", 1);
            ipBG.attr("opacity", 1);
            ipIcon.attr("opacity", 1);
            graph.get("canvas").draw();
          };
          const onMouseLeave = () => {
            this.ipHideTimer = setTimeout(() => {
              ipLine.attr("opacity", 0);
              ipBG.attr("opacity", 0);
              ipIcon.attr("opacity", 0);
              graph.get("canvas").draw();
            }, 100);
          };
          ipBox.on("mouseenter", () => {
            onMouseEnter();
          });
          ipBox.on("mouseleave", () => {
            onMouseLeave();
          });
          ipCPBox.on("mouseenter", () => {
            onMouseEnter();
          });
          ipCPBox.on("mouseleave", () => {
            onMouseLeave();
          });
          ipCPBox.on("click", () => {});
        }
      },
      setState: (name, value, item) => {
        const hasOpacityClass = [
          "ip-cp-line",
          "ip-cp-bg",
          "ip-cp-icon",
          "ip-cp-box",
          "ip-box",
          "collapse-icon-bg"
        ];
        const group = item.getContainer();
        const childrens = group.get("children");
        graph.setAutoPaint(false);
        if (name === "emptiness") {
          if (value) {
            childrens.forEach(shape => {
              if (hasOpacityClass.indexOf(shape.get("className")) > -1) {
                return;
              }
              shape.attr("opacity", 0.4);
            });
          } else {
            childrens.forEach(shape => {
              if (hasOpacityClass.indexOf(shape.get("className")) > -1) {
                return;
              }
              shape.attr("opacity", 1);
            });
          }
        }
        graph.setAutoPaint(true);
      }
    };

    /**
       * 计算字符串的长度
       * @param {string} str 指定的字符串
       */
       const calcStrLen = (str) => {
        let len = 0;
        for (let i = 0; i < str.length; i++) {
          if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
            len++;
          } else {
            len += 2;
          }
        }
        return len;
      }
    
    G6.registerNode(
      'card-node',
      {
        drawShape: (cfg, group) => {
          const config = getNodeConfig(cfg);
          const isRoot = cfg.type === "root";
          const nodeError = cfg.nodeError;
          /* 最外面的大矩形 */
          const container = nodeBasicMethod.createNodeBox(
            group,
            config,
            243,
            64,
            isRoot
          );

          if (cfg.type !== "root") {
            /* 上边的 type */
            group.addShape("text", {
              attrs: {
                text: cfg.type,
                x: 3,
                y: -10,
                fontSize: 12,
                textAlign: "left",
                textBaseline: "middle",
                fill: "rgba(0,0,0,0.65)"
              }
            });
          }

          let ipWidth = 0;
          if (cfg.ip) {
            /* ip start */
            /* ipBox */
            const ipRect = group.addShape("rect", {
              attrs: {
                fill: nodeError ? null : "#FFF",
                stroke: nodeError ? "rgba(255,255,255,0.65)" : null,
                radius: 2,
                cursor: "pointer"
              }
            });

            /* ip */
            const ipText = group.addShape("text", {
              attrs: {
                text: cfg.ip,
                x: 0,
                y: 19,
                fontSize: 12,
                textAlign: "left",
                textBaseline: "middle",
                fill: nodeError ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.65)",
                cursor: "pointer"
              }
            });

            const ipBBox = ipText.getBBox();
            /* ip 的文字总是距离右边 12px */
            ipText.attr({
              x: 224 - 12 - ipBBox.width
            });
            /* ipBox */
            ipRect.attr({
              x: 224 - 12 - ipBBox.width - 4,
              y: ipBBox.minY - 5,
              width: ipBBox.width + 8,
              height: ipBBox.height + 10
            });

            /* 在 IP 元素上面覆盖一层透明层，方便监听 hover 事件 */
            group.addShape("rect", {
              attrs: {
                stroke: "",
                cursor: "pointer",
                x: 224 - 12 - ipBBox.width - 4,
                y: ipBBox.minY - 5,
                width: ipBBox.width + 8,
                height: ipBBox.height + 10,
                fill: "#fff",
                opacity: 0
              },
              className: "ip-box"
            });

            /* copyIpLine */
            group.addShape("rect", {
              attrs: {
                x: 194,
                y: 7,
                width: 1,
                height: 24,
                fill: "#E3E6E8",
                opacity: 0
              },
              className: "ip-cp-line"
            });
            /* copyIpBG */
            group.addShape("rect", {
              attrs: {
                x: 195,
                y: 8,
                width: 22,
                height: 22,
                fill: "#FFF",
                cursor: "pointer",
                opacity: 0
              },
              className: "ip-cp-bg"
            });
            /* copyIpIcon */
            group.addShape("image", {
              attrs: {
                x: 200,
                y: 13,
                height: 12,
                width: 10,
                img: "https://os.alipayobjects.com/rmsportal/DFhnQEhHyPjSGYW.png",
                cursor: "pointer",
                opacity: 0
              },
              className: "ip-cp-icon"
            });
            /* 放一个透明的矩形在 icon 区域上，方便监听点击 */
            group.addShape("rect", {
              attrs: {
                x: 195,
                y: 8,
                width: 22,
                height: 22,
                fill: "#FFF",
                cursor: "pointer",
                opacity: 0
              },
              className: "ip-cp-box",
              tooltip: "复制IP"
            });

            const ipRectBBox = ipRect.getBBox();
            ipWidth = ipRectBBox.width;
            /* ip end */
          }

          /* name */
          const nameText = group.addShape("text", {
            attrs: {
              text: cfg.name,
              x: 19,
              y: 19,
              fontSize: 14,
              fontWeight: 700,
              textAlign: "left",
              textBaseline: "middle",
              fill: config.fontColor,
              cursor: "pointer"
            }
            // tooltip: cfg.name,
          });

          /* 下面的文字 */
          const remarkText = group.addShape("text", {
            attrs: {
              text: cfg.keyInfo,
              x: 19,
              y: 45,
              fontSize: 14,
              textAlign: "left",
              textBaseline: "middle",
              fill: config.fontColor,
              cursor: "pointer"
            }
          });

          if (nodeError) {
            group.addShape("text", {
              attrs: {
                x: 191,
                y: 62,
                text: '⚠️',
                fill: '#000',
                fontSize: 18
              }
            });
          }

          const hasChildren = cfg.children && cfg.children.length > 0;
          if (hasChildren) {
            nodeBasicMethod.createNodeMarker(group, cfg.collapsed, 236, 32);
          }
          return container;
        },
        afterDraw: nodeBasicMethod.afterDraw,
        setState: nodeBasicMethod.setState
      },
      "single-shape"
    );  

    const data = {
      nodes: [
        {
          name: 'cardNodeApp',
          ip: '127.0.0.1',
          nodeError: true,
          type: 'root',
          keyInfo: 'this is a card node info',
          x: 100,
          y: 50
        },
        {
          name: 'cardNodeApp',
          ip: '127.0.0.1',
          nodeError: false,
          type: 'subRoot',
          keyInfo: 'this is sub root',
          x: 100,
          y: 150
        },
        {
          name: 'cardNodeApp',
          ip: '127.0.0.1',
          nodeError: false,
          type: 'subRoot',
          keyInfo: 'this is sub root',
          x: 100,
          y: 250,
          children: [
            {
              name: 'sub'
            }
          ]
        }
      ],
      edges: []
    }

    const graph = new G6.Graph({
      container: 'mountNode',
      width: 800,
      height: 600,
      defaultNode: {
        shape: 'card-node'
      }
    })

    graph.data(data)
    graph.render()
  </script>
</body>
</html>