京东低代码平台：浅谈水滴拖拽画布的设计与实现
京东水滴平台面向企业内部后台管理系统场景，提供可视化搭建等低代码配置、构建及部署能力。
水滴画布作为水滴低代码的核心能力之一，具备灵活、易用的特点，用户可以通过简单拖拉拽的方式，在不需要具备前端知识的前提下，即可搭建出理想的页面。下面将为大家介绍水滴低代码画布的设计与实现。
画布的概念：用户可以向画布中添加物料，并对物料进行拖/拉/拽布局，搭建出自己想要的页面。
这个概念延伸于艺术家的画板，画家在绘画的过程中，会将颜料进行调色，并在画布中进行绘制。而低代码平台用户在页面搭建的过程中，需要选择相应的物料，在画布中使用拖拉拽的方式放置到正确的位置，并对物料进行一些属性配置来达到最理想的展示效果。用户的搭建过程与艺术家的绘制方式非常的相似，因此这个概念也来源于此。
画布的类型：低代码画布可以根据业务场景的不同可分为多种类型，目前主要的类型有以下几种：
水滴低代码画布目前主要用于页面的搭建，也是本次需要介绍和讲解的画布的类型 - 页面类型。
在开发水滴画布之前，就京东内其他低代码平台和国外的主流低代码平台 Retool （https://retool.com）做了调研。下面将对这些低代码平台的画布能力做一个分析，并和水滴画布进行对比。
通过调研的情况和一些能力的对比，我们可以发现：京东内其他平台使用了 Block 块布局、Retool 使用了 Grid 网格布局，这些布局特性在带来页面自适应能力的同时，也会丢失物料自定义宽高的适配能力，使得一旦需要固定宽高和自适应内容高度的时候，就会让展示的效果不够理想。京东内其他平台和 Retool 都对此做了一些弥补和取舍，例如京东内其他平台将前端的布局配置展示了出来，让用户自己去调整，在增加了布局场景的同时，也提高了非前端用户的使用门槛。而 Retool 则在精准搭建方面做了一部分的妥协，为了提高易用性，做了一些强制性的约束。
水滴画布面向的人群有运营、产品、测试、开发人员等，这些人群中有些是有前端的基础，而大部分都不具备前端的知识，所以在设计画布的过程中，要尽可能地降低用户的学习成本和上手成本。于是，我们选取了以下几种功能特性，并做出了开发的目标：
布局： absolute绝对定位布局 + grid网格布局
拖拽：
目标：
水滴画布 drip-layout 给出了一种新的低代码画布的设计方案，将搭建层和渲染层分离，并且通过算法转换层来适配搭建页在不同屏幕下的展示效果。
首先在搭建层获得物料的在页面中的定位信息 - layouts 和 物料的个性化布局配置 - config。
通过算法转换层来适配页面在不同屏幕下的位置/宽高信息 - layouts。
渲染层根据算法转换后的layouts信息，对页面内的所有物料进行渲染、展示。渲染层的画布会在浏览器视口大小发生变化时，进行回流到算法转换层，重新布局计算、动态适配页面大小。
下图展示了水滴画布的方案设计：
在搭建层的物料拖拽和缩放的交互上，使用了 react-grid-layout （https://github.com/react-grid-layout/react-grid-layout）底层库，并将 grid 网格的 row col 大小都设置成了 1，使得以绝对定位的方式拖拉拽后的物料定位信息 layouts，单位都精确到了 1px。最后在渲染层，根据真实页面的宽高，对渲染区域进行 grid 网格划分，并根据计算层转换后的位置信息 layouts，将物料使用 grid 的方式进行布局渲染。
下图展示水滴画布的一些底层库的选取，和提供的一些能力，以及在计算层使用的一些主要的算法：
# 容器自适应物料高度 - moduleResizeObserver
在大多数场景下，物料在页面中需要能够根据自身的真实高度进行展示，例如表格的一页数据全展示、表单内容的动态删减导致模块高度变化。这些动态的高度，都需要实时地体现在画布中，那么就需要动态监听物料的宽高的变化，并将真实宽高展示在画布中。
这里使用了浏览器的 ResizeObserver （https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver）api，对物料的宽高实时监听，下面是实现的逻辑代码：
# 页面扩张情况自适应 - 固定宽度模块的收缩对相邻模块的影响
在一些大屏幕下，页面的宽度大小是要比画布中的宽度要大，画布就需要被拉伸扩展。在这种情况下，画布内的弹性模块就可以直接被等比拉伸，固定模块由于宽度需要保持固定，就会空出空间（下图紫色区域），那么相邻的模块就会受到影响。受到的影响主要有以下几种情况：
相邻为弹性模块，可以被直接拉伸，来填充空间
相邻为固定模块，且对齐方式相同，则会被影响，因此需要平移相同的距离
相邻为固定模块，且对齐方式不相同，则不会被影响
【ps】: “对齐方式”是用来确定在页面发生形变的情况下，模块在画布的水平轴上的对齐方式
由于模块之间的影响具有传染性，通过深度优先遍历的方式，处理了所有固定模块，及其相邻的模块，来消除固定模块的收缩带来的影响。
# 页面压缩情况自适应 - 固定模块的拉伸对相邻模块的影响
在一些屏幕下，页面的大小是要比画布中的宽度要小，画布就需要被压缩。画布内的弹性模块可以被直接等比压缩，固定模块由于宽度需要保持固定，就会发生一定比例的膨胀（下图紫色区域），那么相邻的模块就会受到挤压。相邻模块受到的影响主要有以下几种情况：
相邻为弹性模块，则会被直接压缩
相邻为固定模块，由于宽度固定，受到挤压之后，需要进行等距离的平移
所以当前行的整体宽度不够，那么右侧的模块需要进行换行处理
【ps】: “对齐方式”是用来确定在页面发生形变的情况下，模块在画布的水平轴上的对齐方式
由于模块之间的影响具有传染性，通过深度优先遍历的方式，处理了所有固定模块，及其相邻的模块，来消除固定模块的拉伸带来的影响。
# 边界处理
由于 JavaScript 在进行数值计算时，存在精度丢失的情况，可能会导致两个紧密相邻模块的计算结果，在定位上出现交叉的情况。这种定位交叉的情况，又会在画布的边界碰撞检测处理下，出现画布布局错乱的问题。但是如果使用保留 n 位小数的方式进行精度计算，又会导致相邻模块之间由于取整导致小数位丢失，从而模块间会出现缝隙的视觉效果。
精度丢失计算场景：A.x + A.w === B.x => 1.3 + 1.6 === 2.9 => 结果：false
因此水滴画布做了一些假设：如果两个模块边界之间的差距小于 1px，则对两个模块的边界之间进行粘合，来消除 JavaScript 精度丢失带来的影响。
目前水滴画布归纳了常规页面搭建场景中，主要使用的几种基础布局类型。在已经支持的组合组件的嵌套能力下，用户可以对物料进行简单地排列、组合和布局配置，就可以搭建出丰富、精细化的页面场景。下图是这些基础布局场景的渲染效果：
左右布局场景（左侧固定，右侧自适应）
右左布局场景（右侧固定，左侧自适应）
左中右布局场景（左右两侧自适应，中间居中固定）
高度自适应场景（表格高度跟随内容的大小自适应，将表格数据一页全展示）
一屏展示场景（高度支持百分比设置，让物料撑满页面可视区域）
组合嵌套，精细化搭建（支持组合的概念，组合的布局能力继承外部画布，形成嵌套结构）
# 搭建页面的操作场景
从图中可以看出，用户通过简单的拖拉拽，就可以快速地搭建出自己想要的页面效果。
# 复杂页面的渲染效果
目前水滴低代码平台已经完成了页面自举的能力，平台历史开发的页面，已经使用搭建化的方式进行了替代，下图展示的是平台首页搭建的效果。
# 1. 辅助搭建
在搭建场景使用绝对定位布局的方式，给用户的操作带来了很大的开放性，但随之而来的问题就是搭建精确度的保证。很多情况下，用户需要手动调整模块的间隔，以及模块之间的对齐。这样势必会带来用户操作次数的增加，同时也会造成精准度的丢失。
因此，参考我们日常使用 PPT 的行为方式，水滴画布会给用户在搭建过程中提供一些辅助搭建工具，并帮助用户自动完成一些细节上的操作。
# 2. 布局模板
通过沉淀搭建过程中常用的页面布局，物料模块会新增一些布局模版的物料，让用户可以一键添加自己想要的布局场景，快速搭建页面。
# 3. 拓展布局配置项
增加更多的语义化布局配置项，来适配特殊场景的搭建。因为目前对一些通用的布局场景做到了覆盖，后续会在开发和用户搭建的过程中，沉淀更多的特殊场景的布局能力，添加布局配置项，使得布局场景覆盖的能力更加广泛。
水滴画布采用了不同于主流的低代码搭建和布局的方式，给出了一种新的低代码画布的设计方案。但是依然存在不少有待改进的地方，比如各种功能模块内容的丰富、降低学习及上手门槛等等。本着灵活、易用的研发目标，水滴低代码画布会持续加强画布的能力，不断提升用户的搭建体验。水滴低代码平台目前还在京东内部使用，期待未来与大家见面！后续有新的设计感悟和研发进展，水滴团队也会继续给大家带来分享～
最后，欢迎大家来了解水滴前端团队的开源项目，多多 star🌟：水滴表单（https://github.com/JDFED/drip-form），水滴表格（http://drip-table.jd.com/），MicroApp微前端（https://micro-zoe.github.io/micro-app/）