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 ...]
