Components
lloydzhou opened this issue · 2 comments
lloydzhou commented
Components
- 提供
Graph容器以及GraphContext.useContext获取x6的graph对象。可以利用这个对象操作画布，绑定事件。 - 包装
Shape作为vue组件＋使用x6-vue-shape封装自定义组件，暴露的组件有：
| 类 | shape 名称 | 描述 |
|---|---|---|
| Node | rect | 等同于Shape.Rect |
| Edge | edge | 等同于Shape.Edge |
| VueShape | vue-shape | 使用@antv/x6-vue渲染的自定义vue组件的容器，可以将slots.default内容渲染到节点内。 |
| Shape.Rect | rect | 矩形。 |
| Shape.Circle | circle | 圆形。 |
| Shape.Ellipse | ellipse | 椭圆。 |
| Shape.Polygon | polygon | 多边形。 |
| Shape.Polyline | polyline | 折线。 |
| Shape.Path | path | 路径。 |
| Shape.Image | image | 图片。 |
| Shape.HTML | html | HTML 节点，使用 foreignObject 渲染 HTML 片段。 |
| Shape.TextBlock | text-block | 文本节点，使用 foreignObject 渲染文本。 |
| Shape.BorderedImage | image-bordered | 带边框的图片。 |
| Shape.EmbeddedImage | image-embedded | 内嵌入矩形的图片。 |
| Shape.InscribedImage | image-inscribed | 内嵌入椭圆的图片。 |
| Shape.Cylinder | cylinder | 圆柱。 |
| Shape.Edge | edge | 边。 |
| Shape.DoubleEdge | double-edge | 双线边。 |
| Shape.ShadowEdge | shadow-edge | 阴影边。 |
另外提供帮助函数
| 名称 | 描述 |
|---|---|
| useCell | 使用这个函数可以通过传递markup之类的参数自定义节点 |
| useVueShape | 使用这个函数自定义vue的渲染内容定制更加复杂的节点 |
| useCellEvent | 通过这个函数绑定事件到cell上面 |
- 提供内置的一些组件
| 名称 | 描述 |
|---|---|
| Grid | 渲染网格 |
| Background | 渲染背景 |
| Scroller | 滚动组件 |
| Clipboard | 剪贴板，配合Keyboard组件可以使用ctrl+c/ctrl+x/ctrl+v |
| Keyboard | 键盘快捷键 |
| MouseWheel | 鼠标滚轮，支持使用滚轮实现画布放大缩小 |
- Widgets
| 名称 | 描述 |
|---|---|
| Snapline | 对齐线 |
| Selection | 点选/框选 |
| MiniMap | 小地图 |
| Stencil | 内置的带分组和搜索功能的拖拽组件，还提供StencilGroup以实现分组功能 |
TODO
- Stencil支持默认分组（不使用
StencilGroup的情况） - Dnd也作为组件实现
- ContextMenu：实现一个默认的menu，同时暴露一个useContextMenu方便用户定制
lloydzhou commented
- 实现Connecting，也作为组件使用
- 抽象Port和PortGroup
lloydzhou commented
- 增加useTeleport，返回一个TeleportContainer，将所有VueShape的conponent放到这个组件内部。但是通过vue3内置的Teleport将渲染到节点内部。
- 内置一个默认view id叫做
vue-shape-teleport-view的TeleportContainer，和默认的useVueShape的view对应起来。