Antv x6 failed to use `children` property in `Makrkup`

33 Views Asked by At

Issue Description

I want to create a custom Node; however, the children property in Markup is not working. Initially, I thought it might be due to layering issues and made modifications by using zIndex, but it still doesn't work. How should I fix this issue?

CodeSandbox Link

Code

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

Graph.registerNode("progress-node", {
  inherit: "rect",
  markup: [
    {
      tagName: "rect",
      selector: "body",
      children: [
        {
          tagName: "rect",
          selector: "progress",
        },
      ],
    },
  ],
  attrs: {
    body: {
      refWidth: "100%",
      height: 20,
      // refHeight: "100%",
      fill: "#e0e0e0",
      rx: 10, // 圆角
      ry: 10,
    },
    progress: {
      refWidth: "50%", // 初始宽度
      height: 20,
      rx: 10,
      ry: 10,
      fill: "#007bff",
    },
  },
});

const graph = new Graph({
  container: document.getElementById("container")!,
  width: 800,
  height: 600,
});

graph.addNode({
  x: 40,
  y: 40,
  width: 200,
  height: 40,
  shape: "progress-node",
});

Expected

child svg element progress can be rendered on body

Platform

  • Operation System: [macOS, Linux]
  • Browser: [Google Chrome, Safari, Firefox ...]
  • X6 Version: [2.11.1 ...]

ScreenShot

No response

0

There are 0 best solutions below