优化布局方式，提升性能、解决历史问题，解耦逻辑。

问题

G2 4.x 版本中的布局，主要的问题在于：

  1. 组件内部的布局和组件外部布局互相耦合

组件内部布局：比如 axis 的 label 互相碰撞的问题
组件外部布局：组件 和 图形之间的全局布局

  1. 布局逻辑耦合

纯 js 逻辑根据组件位置，进行 padding 的 bbox 剪裁，对于一个方向多个组件的时候，一堆 bug，且样式丑陋。

解法

约束布局。

方案一

  • layout able

可布局的。所有的需要参入布局的组件都实现 Layoutable 接口，定义好用于布局的方法、布局变量。

  • 根据类型，确定每个组件中变量的值

比如 y axis 的宽度等等，这些值是常量值。

  • 根据组件配置的位置，生成横纵的约束表达式

无需多言。

  • 转化成约束公式，求解

带入到求解器获得各个变量的具体值。

  • 组件更新位置，渲染

方案二

  • layout class 收集图形、组件

布局模式，拿到所有的组件和图形，每个组件都有对应的 id。

  • 初始化约束变量

根据组件和图形，生成约束布局需要的变量，也就是每个组件的 x y width height

  • 生成约束公示，求解
  • 组件更新数据，渲染

考虑到方案一，实现接口，会在组件或者组件的包装层，额外处理一些内容，不够解耦，所以使用方案二，方案二的代码更加内聚。