如何渲染到指定节点？

[lqPrototype]

问题描述

const SelectComponent = ({ node, graph }: { node: Node; graph: Graph }) => {
  const ref = useRef();

  useEffect(() => {
    if (!node.prop("children")) {
      const ifNode = graph.addNode({
        shape: "if",
      });
      const elseNode = graph.addNode({
        shape: "else",
        ports: {
          ...ports,
          items: [
            {
              group: "right",
            },
          ],
        },
      });
      node.addChild(ifNode);
      node.addChild(elseNode);
    }
  }, []);

  const addNode = () => {
    const newNode = graph.addNode({
      shape: "if",
      ports: {
        ...ports,
        items: [
          {
            group: "right",
          },
        ],
      },
    });
    node.addChild(newNode);
  };

  return (
    <CommonChildrenComponent node={node}>
      {
        <Button
          icon="far fa-plus"
          level="link"
          className="text-info text-xl"
          onClick={addNode}
        >
          新增分支
        </Button>
      }
      <div ref={ref} style={{ width: "100%", height: "100%" }}></div>
    </CommonChildrenComponent>
  );
};

register({
  shape: "select",
  width: 660,
  height: 400,
  component: SelectComponent,
});

问题： node 如何渲染到ref节点中？新增的节点如何不重叠并且流式布局

重现链接

/

重现步骤

预期行为

平台

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

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[x6-bot]

👋 @lqPrototype

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.