Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

自定义Node时,在Markup中添加的children Markup不生效 #4196

Closed
leo0807 opened this issue Feb 2, 2024 · 3 comments
Closed

自定义Node时,在Markup中添加的children Markup不生效 #4196

leo0807 opened this issue Feb 2, 2024 · 3 comments

Comments

@leo0807
Copy link

leo0807 commented Feb 2, 2024

问题描述

image

自定义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 ...]

屏幕截图或视频(可选)

Screen Shot 2024-02-02 at 9 54 40 pm ### 补充说明(可选)

No response

@x6-bot
Copy link
Contributor

x6-bot bot commented Feb 2, 2024

👋 @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 leo0807 changed the title Markup创建children的Markup不生效 自定义Node时,在Markup中添加的children Markup不生效 Feb 2, 2024
@leo0807
Copy link
Author

leo0807 commented Feb 8, 2024

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

@leo0807 leo0807 closed this as completed Feb 8, 2024
@x6-bot
Copy link
Contributor

x6-bot bot commented Feb 8, 2025

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.

@x6-bot x6-bot bot locked as resolved and limited conversation to collaborators Feb 8, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant