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

发表于 2年以前 | 总阅读数：1057 次

背景

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

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

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

布局效果

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

磁贴布局介绍

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

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

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

纵向挤占和横向挤占

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

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

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

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

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

磁贴嵌套

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

高度自适应

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

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

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

宜搭报表的磁贴布局实现

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

其中，大小调整、位置调整、自动挤占、错行渲染这些基础的磁贴布局能力，我们选择直接借助React-grid-layout这一非常棒的开源库，而物料拖拽、拖动滚屏、空位插入等功能，我们是对设计器的底层——集团低代码引擎进行了相应的适配改造。在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轴坐标每有一单位的改变，都会重新进行碰撞检测和布局计算。我们改造成：

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

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

最后

我们提供了《低代码引擎技术白皮书》，希望通过对低代码技术原理进行一个全面的介绍，让大家对低代码引擎有一个全面的认识。当然也希望借此能够吸引到更多志趣相投的小伙伴通过开源社区进行共建，一起加速低代码行业快速发展。除此之外，我们也希望社区的小伙伴在了解低代码引擎之后，能结合自己的经验或者低代码业务场景发现我们的不足，提出改进建议，我们将感激不尽。