lloydzhou / antv-x6-vue Goto Github PK
View Code? Open in Web Editor NEWthe vue toolkit for graph analysis based on x6
License: MIT License
the vue toolkit for graph analysis based on x6
License: MIT License
const CustomNode = defineComponent({
name: 'CustomNode',
props: [...VueShapeProps, 'otherOptions'],
inject: [contextSymbol],
setup(props, context) {
const cell = useVueShape(props, context)
useCellEvent('node:click', (e) => context.emit('click', e), { cell })
return () => null
}
})
// template
<CustomNode
v-if="visible"
primer="circle"
id="4"
:x="400" :y="y"
:attrs="{circle: {fill: '#ddd', stroke: '#333'}, label: {text: 'CustomNode'}}"
@added="added"
@click="click"
@cell:change:position="changed"
>
<span>Hello</span>
</CustomNode>
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 | 鼠标滚轮,支持使用滚轮实现画布放大缩小 |
名称 | 描述 |
---|---|
Snapline | 对齐线 |
Selection | 点选/框选 |
MiniMap | 小地图 |
Stencil | 内置的带分组和搜索功能的拖拽组件,还提供StencilGroup 以实现分组功能 |
StencilGroup
的情况)https://github.com/lloydzhou/x6-html-shape
import createRender from 'x6-html-shape/dist/vue'
const render = createRender(Component)
register({
shape: 'vue3-node',
render,
width: 100,
height: 40,
})
当前仓库中通过watch指定的字段,然后调用x6的api更新节点。
这种模式代码写得很复杂,而且可能出现有一些属性没有提前监听到的情况。
参考最近新写的这个react hooks的逻辑,更新的时候,尝试使用createNode创建一个新的临时节点,然后通过getProp拿到两个store的数据进行对比再重新更新到画布。
antvis/X6#2834
https://github.com/lloydzhou/antv-x6-react-practice/blob/master/src/lib/hooks.js#L15
升级到2.x版本
使用teleport优化节点,但是一旦设置 node 的visible =false, 然后visible还原为true,此时,修改node的属性(比如移动位置,修改大小)不会触发视图刷新,好像是model层的变化不会被view层接收到了,希望这问题早点能解决。
https://v3.cn.vuejs.org/guide/teleport.html
支持将子节点渲染到组件外部。
所以可以考虑将子节点渲染到vue-shape的foConten元素里面去。
优点:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.