feat: add HTML node, g node, react node

[Aarebecca]

HTML Node

G Node

React Node

• 添加 HTML 节点元素 / Add HTML node element

const graph = new Graph({
  node: {
    style: {
      type: 'html', // 👈🏻 Node shape type.
      size: [240, 80],
      innerHTML: (d) => `
<div style="width: 100%; height: 100%; background: ${d.style.color}; display: flex; justify-content: center; align-items: center;">
  <span style="color: #fff; font-size: 20px;">
    ${d.data.content}
  </span>
</div>`,
    },
  },
});

• 添加 JSX 写法的 G Node / Add GNode element can be written in JSX

const graph = new Graph({
  node: {
    style: {
      type: 'g',
      component: () => (
        <Rect width={100} height={100}>
          <Circle radius={10} />
        </Rect>
      ),
    },
  },
});

• 添加 ReactNode 元素 / Add ReactNode element

const graph = new Graph({
  node: {
    style: {
      type: 'react',
      component: () => (
        <div>
          <span>Title</span>
        </div>
      ),
    },
  },
});

• Graph 未传入尺寸时使用容器尺寸 / Graph Uses container dimensions when no size is passed in
• 完善 Graph 销毁后调用 render/draw 的场景校验 / Perfect the scene verification by calling render/draw after Graph destruction

[hustcc]

innerHTML 要 omit 掉

[hustcc]

不是直接从 react-dom import 吗？这个区别是啥

[Aarebecca]

createRoot 是从 react-dom/client 导出的，react-dom 并没有导出

[hustcc]

这个好像不需要用到？

[Aarebecca]

这个是之前的逻辑，忘删了