X6
X6 copied to clipboard
如何参与到 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对象要舒服一些。
@lloydzhou 期待你的实践和反馈💕💕
请教以下,如果使用dom作为节点,无法预先知道节点的大小,可不可以动态设置节点的高度呢?
我使用过g6似乎很难支持,如果使用vue组件为节点可以动态设置其高度吗?
@chenghongyao 可以知道高度后重新 resize 节点
👍
按着yarn start 的错误
👍
这个项目官方文档还在维护吗,文档上的官方群 都进不去, 怎么试都进不去, 而且文档感觉很多内容都不全
想进钉钉群, 参与开发, 不知道作者能加一下不,有问题能快速响应
@yaojin2070 👍👍 先加我 钉钉号(vectorse) 我拉你。
这是来自QQ邮箱的假期自动回复邮件。 你好,我最近正在休假中,无法亲自回复你的邮件。我将在假期结束后,尽快给你回复。
这是来自QQ邮箱的假期自动回复邮件。 你好,我最近正在休假中,无法亲自回复你的邮件。我将在假期结束后,尽快给你回复。