磁贴布局在钉钉宜搭报表设计引擎中的实现

在原来的宜搭报表中，要想搭建一个图表排列紧凑、工整有序的典型报表页面，我们通常需要在流式布局的基础上，通过套「分栏组件」、「容器组件」来包裹图表组件完成布局。如果想要实现如下图的错行渲染的效果，还少不了定义高度等各种样式。在流式布局基础上搭建报表页面有一定的成本。

纵观各类 BI 产品（QuickBI、BDP）以及和宜搭同类型低代码产品（简道云、氚云），报表/仪表盘页面搭建场景基本上都使用磁贴布局，这也说明磁贴布局适用于报表场景是经过了充分验证的。

趁着报表升级项目的契机，我们把磁贴布局的改造提上了日程。

先来看看报表磁贴布局改造完成的大致效果~

下图很好地概括了磁贴布局的基础能力。 

尽管这些功能各家产品的磁贴布局能力都基本具备，但到画布上实际操作，我们会发现每家的具体交互、体验效果还是有很多不一样的地方。比如说物料新增的方式、拖动的效果、磁贴挤占的算法，这些虽然不影响最终搭建出来的效果，但会对搭建时的体验会有较大影响。另外，是否支持磁贴嵌套，磁贴块高度自适应，这些能力会影响到运行态页面的效果。

磁贴挤占方式、磁贴嵌套、磁贴块高度自适应具体是什么样的效果，接下来想给大家一一介绍一下：

纵向挤占布局时，元素会在垂直方向（y轴方向）紧凑布局

• 优点：从上往下，符合直觉
• 缺点：这种挤占方式使得横向相邻的元素无法方便地交换位置（当横向拖拽磁铁块时，被碰撞到的磁贴块会在纵轴方向移动，腾出空间给正在拖拽的磁铁块）

横向挤占布局时，元素会在横轴方向（x轴方向）紧凑布局

• 优点：这种布局可以实现横向元素的位置交换
• 缺点：在调整上方磁贴块高度时，纵轴方向下方的元素不会自动跟随

由于页面是从上往下排的，因此整体来说纵向挤占布局更加符合直觉，这也是大部分产品使用纵向挤占的原因。

如下图就是磁贴嵌套的场景，Tab 标签组件作为页面中的磁贴块，同时它自己本身又是一个磁贴容器，往里面拖入图表也会生成磁贴块。

高度自适应主要适用于图表高度会改变的组件，如下图展示的表格组件，筛选条件的变化会触发它行数量的变化，导致它高度发生变化。如果此时还是用磁贴块固定的高度信息，当数据减少时，就会在磁铁块内出现内容空白，导致页面整体不美观。高度自适应的功能就是用来解决这个问题的。图表组件开启高度自适应后，它只有宽度能被调整，其高度在每次重新渲染时动态计算。

上面介绍的磁贴布局的能力，大部分参考了下列这些优秀的产品，其中 BDP、简道云、氚云的组件配置和页面布局分离的操作让我们眼前一亮，QuickBI 实现的磁贴嵌套、高度自适应十分值得学习。

	QuickBI	BDP	简道云
大小调整方式	8 个方向可调整大小	右下角可调整	右下角可调整
位置调整方式	图表区域拖拽	图表左上角小范围可拖拽	图表区域拖拽
物料新增	点击新增时，若当前选中的是画布则将图表放到最后； 若当前选中的是某个图表，则替换当前选中图表类型； 拖拽时显示鼠标位置，释放时添加图表计算布局	直接添加到画布最后或 根据鼠标位置添加图表	布局和组件配置分离
拖动效果	有占位背景提示和辅助线，实时计算布局； 可拖动滚屏	有占位背景提示，无拖动滚屏	有占位背景提示，无拖动滚屏
挤占方式	纵向挤占	纵向挤占	纵向挤占
是否支持嵌套	是	否；无容器类组件	否，无容器类组件
是否支持高度自适应	是	否	否

参考了上面这些产品的磁贴布局实现，我们根据自己的情况实现了一版磁贴布局。

其中，大小调整、位置调整、自动挤占、错行渲染这些基础的磁贴布局能力，我们选择直接借助React-grid-layout这一非常棒的开源库，而物料拖拽、拖动滚屏、空位插入等功能，我们是对设计器的底层——集团低代码引擎进行了相应的适配改造。在React-grid-layout和低代码引擎的有机结合基础之上，我们继续增强了磁贴布局的能力。除了前文提到的高度自适应以外，我们还实现了磁贴&流式布局的混排，以及横纵方向的同时紧凑布局。

首先，我们先简单介绍一下React-grid-layout，它是一个基于 React 实现的磁贴布局库，上面挤占方式的介绍就是它的Demo（https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html），感兴趣的同学可以打开站点拖拖看。

它的使用方法非常简单，只需要传入行列以及布局信息即可，它会自动将其子组件包裹成磁铁块。

结构化的 layout 布局描述，和我们的页面 schema 十分相似。因此，很容易可以联想到，只需要对容器组件稍加改造，增加一个 layout 的 prop，并在子组件外层再包裹上 GridLayout 就完成了。

最后，我们需要将 React-grid-layout 的能力封装成RGLContainer组件，这样任何需要改造为磁贴容器的组件，只需要如下图消费即可。

RGLContainer是 React-grid-layout 和 低代码引擎通信的桥梁。React-grid-layout 每次在布局信息更新之后，都会执行 onLayoutChange prop 的回调函数，参数为新的布局信息，有了新的布局信息，我们就通过低代码引擎提供的 setPropValue API 更新 schema 中的 layout prop。

（lowcode-rgl-container 代码片段）

RGLContainer和低代码引擎的交互方式可以简化到如下图：

我们定义了磁贴布局下的「保留 prop」 —— rglConfig，目前扩展了 3个 属性，分别是图表拖入时的默认宽（w）、默认高（h），以及是否开启高度自适应（isHeightAuto）。

当组件开启高度自适应时，则在渲染该子组件时，对开启了高度自适应的子组件添加固定 className，用 ResizeObserver 监听这些需要高度自适应的组件，当组件尺寸发生变化时重新计算它们的宽高，更新布局信息，React-grid-layout 在接收到新的布局信息后，会触发布局计算，得到最终的布局信息。

在宜搭报表中，页面整体为磁贴布局，由容器和分栏组件来支持原来的流式布局。

磁贴 & 流式布局混排，将原来流式布局的能力的保留，可以适应更多灵活的、自定义的场景。在容器和分栏布局组件中依然保留了原来的样式设置面板，如果实在有需要定制的样式和布局，可以在容器组件中完成。

上文我们介绍过纵向挤占和横向挤占两种方式，它们各有优缺点。纵向挤占的算法符合页面从上往下布局的直觉，但是横向交换元素不方便，横向挤占的算法可以实现横向元素交换，但是纵向的元素不会自动跟随。为了更好的体验，我们实现了一版横纵同时紧凑的布局，也可以理解为左上角方向的挤占布局。

原挤占算法（以纵轴挤占为例）

• Y 轴坐标越小的元素有优先布局权（当 Y 轴坐标相等时再看 X 轴坐标）
• 按顺序计算每一个元素的布局
• 每一个元素的 y 坐标初始值为：当前已排好的元素的底部边界的 y 坐标与该元素原来的 y 坐标的最小值

// compageWith 为已排好的元素的数组，bottom 函数负责计算这些已排好的元素底部边界的 y 坐标Math.min(bottom(compareWith), l.y)

• 不断减小元素的 y 坐标值，直到检测碰撞到已经布局好的元素，或 y 坐标等于 0 为止
• 以此类推，直到所有元素都排列完

优化后的挤占算法

• 元素按 Y 轴紧凑布局的逻辑排序：Y 轴坐标越小的元素有优先布局权（当 Y 轴坐标相等时再看 X 轴坐标）
• 按顺序计算每一个元素的布局
• 每一个元素的坐标初始值为「最后一个已排好的元素」的坐标，或者 为 （0，0）
• 利用原来 按 X 轴优先 的挤占算法（优先往水平方向排），计算元素的坐标位置
• 以此类推，直到所有元素都排列完

这一步完成之后我们就获得了，横纵方向都紧凑的布局；横轴方向也可以交换图表位置，纵轴方向调整图表高度时，位于下方的组件也能够自动跟随。

拖拽抖动优化
但是，在上面的排序挤占算法改造完后，还带来了新的问题——拖拽时很容易出现抖动，横向拖拽时会出现两个图表在一直相互挤占、不断交换位置的情况。因此，我们还相应地改造了碰撞检测触发重新布局的算法。
在原来的算法中，拖拽时只要 X 轴 或 Y轴坐标每有一单位的改变，都会重新进行碰撞检测和布局计算。我们改造成：

• 每次拖拽时检查当前拖拽的方向（上下左右），找到当前拖拽方向上碰撞的第一个元素
• 当拖拽的距离超过碰撞元素宽或高的一半时（上下拖拽时看是否达到高度的一半，左右拖拽时看是否达到宽度的一半），直接交换当前元素和碰撞元素的坐标，作为新的布局信息
• 重新计算布局

算法改造到这一步后，我们收获了一个拖拽效果比较好的磁贴布局。相同尺寸的图表之间可以横着交换位置、也可以竖着交换、甚至可以斜着交换。