自定义Node时，在Markup中添加的children Markup不生效

[leo0807]

问题描述

自定义Node的时候，Markup的children不生效，一开始以为是因为图层原因被覆盖了，修改之后也无效，是我的使用方法不正确吗？

重现链接

https://codesandbox.io/p/sandbox/friendly-silence-yp4t4v?file=%2Findex.ts%3A36%2C51&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls4ohvz800063b6hsyj1xmfj%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls4ohvz800023b6hc8ble7f5%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls4ohvz800033b6hrdkajm6k%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls4ohvz800053b6hs7qk4cs0%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls4ohvz800023b6hc8ble7f5%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls4ohvz800013b6hy2tx8ax5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A36%252C%2522startColumn%2522%253A51%252C%2522endLineNumber%2522%253A36%252C%2522endColumn%2522%253A51%257D%255D%257D%255D%252C%2522id%2522%253A%2522cls4ohvz800023b6hc8ble7f5%2522%252C%2522activeTabId%2522%253A%2522cls4ohvz800013b6hy2tx8ax5%2522%257D%252C%2522cls4ohvz800053b6hs7qk4cs0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls4ohvz800043b6h2u0ynum5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cls4ohvz800053b6hs7qk4cs0%2522%252C%2522activeTabId%2522%253A%2522cls4ohvz800043b6h2u0ynum5%2522%257D%252C%2522cls4ohvz800033b6hrdkajm6k%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cls4ohvz800033b6hrdkajm6k%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

重现步骤

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",
});

预期行为

子元素progress渲染在body上，但是目前不生效

平台

• 操作系统: [macOS, Linux]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

补充说明（可选）

No response

[x6-bot[bot]]

👋 @leo0807

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. To help make it easier for us to investigate your issue, please follow the contributing guidelines. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[leo0807]

rect元素里本来就不能放text元素，可以通过其他方法解决，如将rect元素替换为svg等