G6 3.3 需要调整的地方

G6 3.x 从 2018 年 12 月份开发到现在，一年的时间，基本上达到了当初的预期，当要在当前的基础上再开发下去，存在很多不便的地方，充当其冲的就是技术选型，G6 3.x 是基于 JS 开发的，里面有很多 mixin 的操作，不利于后期的继续扩展，其次，当初状态管理的设计也存在不合理的地方，且没有考虑分组的情况。基于种种原因，我们准备接下来基于 TS 来重构 G6，增强可扩展性的同时优化之前存在的不足。

总结下来，目前 G6 存在的问题：

• 技术选型；
• 状态管理不便于使用；
• 节点分组方案不适用复杂的场景；
• changeData 有BUG；
• 自定义Shape比较复杂，将更新的逻辑交给了用户；
• 性能比较差，节点数量多的时候比较卡；
• 事件不灵敏；
• plugin 可靠性及扩展性差；
• 复杂的交互，定义 Behavior 时比较麻烦。

重点调整的内容

针对上面存在的种种问题，我们接下来会重点从以下方面进行调整：

• 工程化改造：使用 TS 重构；
• 升级底层渲染引擎 G 至 G4.0；
• 重新设计 state 机制；
• 设计节点分组方案；
• 集成图算法；
• 重新设计自定义 Shape 的机制；
• 新增常用的组件；
• 重新设计 Plugin 机制，考虑如何与组件融合。

对于这些调整的内容，我们计划逐步推进，循序渐进地来调整，在不改变整体架构的前提下，先完成 TS 重构和底层渲染引擎 G 的升级。完成这两部分工作以后，接下来会重点设计 state 和节点分组机制，在实现这两个功能多的过程中，可能会涉及到架构的修改。

里程碑

通过工程化改造，可以增强 G6 的可扩展性，通过升级底层渲染引擎G，可以解决性能和事件的问题。

工程化改造

使用 TS 重构一遍现在的 G6，整体架构先保持不变。

State

目前的 State 机制存在以下问题：

• 只对 KeyShape 起作用，不支持 KeyShape 之前的其他部分；
• Shape、Item 、Behavior 及定义 自定义Shape时都可以设置状态，相互之间都有影响；

节点分组

目前的分组方案比较简单，不适用于稍微复杂的场景，希望分组方案能够满足以下功能：

• 自定义分组：自定义样式、大小等；
• 分组可根据数据自定渲染；
• 能设置分组的层级；
• 能动态改变分组样式和大小；
• 能够自由拖拽分组，并且分组中节点随着移动；
• 节点拖入、拖出到分组；
• 分组拖入、拖出分组；
• 收起展开分组，可以自定义动画：收起时里面的节点也慢慢消失；
• 拖拽分组中的节点，可根据不同交互区分是拖出去还是分组自动变化。

需要讨论的问题：

• 分组与节点、边的层级，如何解决遮挡问题。

自定义 Shape 机制

交互语法