import { Graph, Markup } from "@antv/x6";

Graph.registerNode("custom-node", {
  inherit: "rect",
  width: 224,
  height: 70,
  attrs: {
    body: {
      strokeWidth: 0,
    },
    head: {
      fill: "#005087",
      stroke: "#005087",
      strokeWidth: 1,
      refWidth: "100%",
      height: 32,
      rx: 4,
      ry: 4,
    },
    content: {
      stroke: "#DCDFE6",
      strokeWidth: 1,
      refWidth: "100%",
      refY: 28,
      height: 42,
      rx: 4,
      ry: 4,
    },
    divide: {
      fill: "#005087",
      stroke: "#005087",
      strokeWidth: 1,
      height: 4,
      refWidth: "100%",
      refY: 28,
    },
    title: {
      text: "Node",
      refX: 14,
      refY: 9,
      fill: "#ffffff",
      fontSize: 14,
      "text-anchor": "start",
    },
    text: {
      text: "this is content text",
      refX: 14,
      refY: 50,
      fontSize: 14,
      fill: "#000000",
      "text-anchor": "start",
    },
  },
  markup: [
    {
      tagName: "g",
      selector: "body",
      children: [
        {
          tagName: "rect",
          selector: "content",
        },
        {
          tagName: "rect",
          selector: "head",
        },
        {
          tagName: "rect",
          selector: "divide",
        },
        {
          tagName: "text",
          selector: "title",
        },
        {
          tagName: "text",
          selector: "text",
        },
      ],
    },
  ],
  ports: {
    groups: {
      top: {
        position: "top",
        attrs: {
          circle: {
            r: 5,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
      right: {
        position: "right",
        attrs: {
          circle: {
            r: 5,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
      bottom: {
        position: "bottom",
        attrs: {
          circle: {
            r: 5,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
      left: {
        position: "left",
        attrs: {
          circle: {
            r: 5,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 1,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
    },
    items: [
      {
        group: "top",
      },
      {
        group: "right",
      },
      {
        group: "bottom",
      },
      {
        group: "left",
      },
    ],
  },
});

export default {};
