京东低代码平台：浅谈水滴拖拽画布的设计与实现-六虎

水滴低代码渠道简介

京东水滴渠道面向企业内部后台管理体系场景，供给可视化建立等低代码装备、构建及布置才能。

水滴画布作为水滴低代码的核心才能之一，具有灵敏、易用的特色，用户能够经过简略迁延拽的方法，在不需求具有前端常识的前提下，即可建立出抱负的页面。下面将为咱们介绍水滴低代码画布的规划与完结。

低代码画布的概念及类型

画布的概念： 用户能够向画布中增加物料，并对物料进行拖/拉/拽布局，建立出自己想要的页面。
这个概念延伸于艺术家的画板，画家在绘画的过程中，会将颜料进行调色，并在画布中进行绘制。而低代码渠道用户在页面建立的过程中，需求选择相应的物料，在画布中运用迁延拽的方法放置到正确的方位，并对物料进行一些属性装备来达到最抱负的展现作用。用户的建立过程与艺术家的绘制方法十分的类似，因而这个概念也来源于此。

画布的类型： 低代码画布能够依据事务场景的不同可分为多种类型，现在首要的类型有以下几种：

页面类型：用于网页的建立，包含 web 页面及 H5 页面
流程类型：用于流程图的建立，包含审批流程及函数流程
数据大屏类型：用于数据报表与可视化剖析东西的建立

水滴低代码画布现在首要用于页面的建立，也是本次需求介绍和解说的画布的类型 – 页面类型。

主流低代码画布的调研状况

在开发水滴画布之前，就京东内其他低代码渠道和国外的主流低代码渠道 Retool 做了调研。下面将对这些低代码渠道的画布才能做一个剖析，并和水滴画布进行比照。

画布特色	京东内其他渠道	Retool	水滴
面向用户	前端开发	普通用户	普通用户
是否可拖动	✅	✅	✅
宽高拖拽	宽度	宽度	宽度 + 高度
布局	block	grid	absolute + grid
装备杂乱度	杂乱	简略	简略
UI复原度	中	中	高
上手成本	高	低	低

经过调研的状况和一些才能的比照，咱们能够发现：京东内其他渠道运用了 Block 块布局、Retool 运用了 Grid 网格布局，这些布局特性在带来页面自适应才能的一起，也会丢掉物料自定义宽高的适配才能，使得一旦需求固定宽高和自适应内容高度的时候，就会让展现的作用不够抱负。
京东内其他渠道和 Retool 都对此做了一些弥补和取舍，例如京东内其他渠道将前端的布局装备展现了出来，让用户自己去调整，在增加了布局场景的一起，也提高了非前端用户的运用门槛。而 Retool 则在精准建立方面做了一部分的退让，为了提高易用性，做了一些强制性的束缚。

水滴画布的研制目标

水滴画布面向的人群有运营、产品、测试、开发人员等，这些人群中有些是有前端的根底，而大部分都不具有前端的常识，所以在规划画布的过程中，要尽或许地下降用户的学习成本和上手成本。于是，咱们选取了以下几种功用特性，并做出了开发的目标：

布局： absolute肯定定位布局 + grid网格布局
拖拽：
1. 支撑物料宽度和高度的拖拽、缩放；
2. 支撑物料在画布中灵敏定位
目标：
1. 简略易用 – 拖拽建立无限制，自由灵敏；
2. 操作流畅 – 确保用户频频操作过程中的页面性能；
3. 掩盖面广 – 支撑展现、内容、工作台、管理等 B 端常见场景。

水滴画布的规划方案

水滴画布 drip-layout 给出了一种新的低代码画布的规划方案，将建立层和烘托层分离，并且经过算法转化层来适配建立页在不同屏幕下的展现作用。

首先在建立层取得物料的在页面中的定位信息 – layouts 和物料的个性化布局装备 – config。
经过算法转化层来适配页面在不同屏幕下的方位/宽高信息 – layouts。
烘托层依据算法转化后的layouts信息，对页面内的一切物料进行烘托、展现。烘托层的画布会在浏览器视口巨细产生改变时，进行回流到算法转化层，从头布局核算、动态适配页面巨细。

下图展现了水滴画布的方案规划：

在建立层的物料拖拽和缩放的交互上，运用了 react-grid-layout 底层库，并将 grid 网格的 row col 巨细都设置成了 1，使得以肯定定位的方法迁延拽后的物料定位信息 layouts，单位都精确到了 1px。最后在烘托层，依据实在页面的宽高，对烘托区域进行 grid 网格划分，并依据核算层转化后的方位信息 layouts，将物料运用 grid 的方法进行布局烘托。

水滴画布的完结架构

下图展现水滴画布的一些底层库的选取，和供给的一些才能，以及在核算层运用的一些首要的算法：

水滴画布核算层完结算法

容器自适应物料高度 – moduleResizeObserver

在大多数场景下，物料在页面中需求能够依据本身的实在高度进行展现，例如表格的一页数据全展现、表单内容的动态删减导致模块高度改变。这些动态的高度，都需求实时地体现在画布中，那么就需求动态监听物料的框高的改变，并将实在宽高展现在画布中。
这里运用了浏览器的 ResizeObserver api，对物料的宽高实时监听，下面是完结的逻辑代码：

页面扩张状况自适应 – 固定宽度模块的收缩对相邻模块的影响

在一些大屏幕下，页面的宽度巨细是要比画布中的宽度要大，画布就需求被拉伸扩展。在这种状况下，画布内的弹性模块就能够直接被等比拉伸，固定模块由于宽度需求坚持固定，就会空出空间（下图紫色区域），那么相邻的模块就会遭到影响。遭到的影响首要有以下几种状况：

相邻为弹性模块，能够被直接拉伸，来填充空间
相邻为固定模块，且对齐方法相同，则会被影响，因而需求平移相同的距离
相邻为固定模块，且对齐方法不相同，则不会被影响
【ps】: “对齐方法”是用来确定在页面产生形变的状况下，模块在画布的水平轴上的对齐方法

由于模块之间的影响具有传染性，经过深度优先遍历的方法，处理了一切固定模块，及其相邻的模块，来消除固定模块的收缩带来的影响。

页面紧缩状况自适应 – 固定模块的拉伸对相邻模块的影响

在一些屏幕下，页面的巨细是要比画布中的宽度要小，画布就需求被紧缩。画布内的弹性模块能够被直接等比紧缩，固定模块由于宽度需求坚持固定，就会产生必定份额的膨胀（下图紫色区域），那么相邻的模块就会遭到揉捏。相邻模块遭到的影响首要有以下几种状况：

相邻为弹性模块，则会被直接紧缩
相邻为固定模块，由于宽度固定，遭到揉捏之后，需求进行等距离的平移
所以当前行的全体宽度不够，那么右侧的模块需求进行换行处理
【ps】: “对齐方法”是用来确定在页面产生形变的状况下，模块在画布的水平轴上的对齐方法

由于模块之间的影响具有传染性，经过深度优先遍历的方法，处理了一切固定模块，及其相邻的模块，来消除固定模块的拉伸带来的影响。

鸿沟处理

由于 JavaScript 在进行数值核算时，存在精度丢掉的状况，或许会导致两个紧密相邻模块的核算结果，在定位上呈现穿插的状况。这种定位穿插的状况，又会在画布的鸿沟碰撞检测处理下，呈现画布布局错乱的问题。可是假如运用保留 n 位小数的方法进行精度核算，又会导致相邻模块之间由于取整导致小数位丢掉，然后模块间会呈现缝隙的视觉作用。
精度丢掉核算场景：A.x + A.w === B.x => 1.3 + 1.6 === 2.9 => 结果：false
因而水滴画布做了一些假定：假如两个模块鸿沟之间的距离小于 1px，则对两个模块的鸿沟之间进行粘合，来消除 JavaScript 精度丢掉带来的影响。