X6
X6 copied to clipboard
Published
20 hours ago •
antvis
antvis
如何参与到 X6 开源开发
功能描述
X6 在 2020 年 11.22 正式对外开源，在这一年多内有了很多用户，同时也有一些贡献者参与到项目中来，但是还远远达不到一个活跃的开源社区的水平，我们最近也一直在探索怎么将社区建设得更好。正好 X6 2.0 正在开发中，有很多小伙伴来问我怎么参与到 X6 的开发中来，所以有了这篇文章，主要目的是吸引更多对 X6 感兴趣的贡献者，以及为想参与贡献的同学推荐一个适合的方向。
期望解决方案
没有直接参与X6，但是自己参照@antv/Graphin的模式封装了一个vue的UI库。https://github.com/lloydzhou/antv-x6-vue
主要思想：
- x6主要用于编辑，所以将所有内置的
Shape抽象成节点和边（一个vue的Component），每一个Node/Edge挂载的时候，会自己负责调用graph.addCell或者graph.removeCell将自己挂载到画布/从画布卸载。 - 针对复杂节点，使用
@antv/x6-vue-shape封装一次（这里使用了一个小技巧，将当前组件的slots.default挂载到x6-vue-shape内部，这样渲染的数据可以来自Graph外部的组件）
这样可以做到图结构相关的逻辑交给X6，用户只需将精力集中到自己的业务逻辑上面。
以下是一个简单的demo
<Graph>
<Node id="1" :x="100" :y="100" @added="added" label="node1" />
<Node id="2" :x="200" :y="200" label="node2" />
<Edge id="e1" source="1" target="2" @added="added" label="edge1" />
<VueShape primer="rect" id="3" :x="200" :y="300" :width="160" :attrs="{rect: {fill: '#ddd', stroke: '#333'}, label: {text: 'VueShape'}}" @added="added" @cell:change:zIndex="changed">
<div>这里是一个vue的组件</div>
<img style="width: 30px;height:30px;" src="https://v3.cn.vuejs.org/logo.png" />
</VueShape>
<Edge id="e2" source="1" target="3" @added="added" />
</Graph>
@lloydzhou 👍👍👍 将当前组件的slots.default挂载到x6-vue-shape内部，这样渲染的数据可以来自Graph外部的组件 思路非常棒，沉淀一个 vue-x6 组件库也是我们今年的规划之一，后续多多交流。
@NewByVector 其实之前看了x6的packages下面预留的x6-react目录，一直在想啥时候这个目录更新了，也可以参考参考。 不过自己项目要用，等不及，所以就参考graphin那边的思路做了一些抽象。用起来会比原来所有逻辑都在一个地方去操作graph对象要舒服一些。
请教以下，如果使用dom作为节点，无法预先知道节点的大小，可不可以动态设置节点的高度呢？
我使用过g6似乎很难支持，如果使用vue组件为节点可以动态设置其高度吗？
按着yarn start 的错误
