下面这个，就是元素面板，起码在 gg-editor 里它是这么叫的。
board.png

gg-editor 暴露了 ItemPanel 和 Item，分别是元素面板、元素。

  1. import { ItemPanel, Item } from "gg-editor"

元素面板中，可以放 HTML，但需要被 Item 组件包裹起来，大概就这么个用法。

上个版本的文档里就有的，这块内容感觉挺好的，就没舍得删除重写。

  1. <ItemPanel>
  2.   <Item
  3.     model={{
  4.       type: "circle",
  5.       size: 80,
  6.       label: "circle",
  7.     }}
  8.   >
  9.     <img
  10.       src="https://gw.alicdn.com/tfs/TB1IRuSnRr0gK0jSZFnXXbRRXXa-110-112.png"
  11.       width="90"
  12.       height="90"
  13.       draggable={false}
  14.     />
  15.   </Item>
  16. </ItemPanel>

API

ItemPanel

image (1).png

style 行内样式
className CSS类名

Item

image (2).png

style 行内样式
className CSS类名
type 元素类型
可枚举，分别有 node 和 edge 可选
model 元素的数据模型
查看源码溯源发现，它其实是继承自 antv/g6 的 NodeConfig，大意是节点配置，可参考地址有：
1. https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/defaultNode#内置节点类型说明
1. https://g6.antv.vision/zh/docs/api/Items/itemProperties
1. https://g6.antv.vision/zh/docs/api/Items/nodeProperties

注意：

  1. Item 下的 img 需要将 draggable 设置为 false，禁止其可拖放。
  2. Item 下的 img 需要设置一下宽高。
  3. Item 的 model 必填，因为它会被注入到 Page（画布）的数据模型中，方便我们后续点击画布中的节点时获取相应数据。