html布局自然流加浮动,基于自然流布局的H5编辑器brick design 介绍篇

brick design 的一些疑问

brick design是什么？

brick design是一款开源的，基于自然流布局设计，支持多维组件拖拽嵌套组合的H5编辑器。组件就像高楼大厦中的每一块砖，它建设复杂炫酷页面的基础。brick design 赋予了组件很多实用的能力，让你编辑页面更简单。开源地址https://github.com/brick-design/react-visual-editor

什么是自然流布局？

自然流布局我认为组件之间根据CSS布局样式约束展现的布局模式，涵盖了CSS的所有布局模式，自然流布局可以让你在编辑页面时像是在写页面代码一样完成页面的编辑，自然流布局赋予了brick design更多可能性，也是brick design与其他页面编辑器最大的不同。

brick design与其他页面编辑器有什么优势？

目前大多数开源的low-code、no-code页面编辑器，大部分是以绝对布局的形式对组件进行一维平面的拖拽排序组合，可实现的页面结构固定有限，因为使用绝对布局的排布所以对屏幕尺寸适配上比较困难，由于只可以实现一维平面的拖拽排序，很难实现页面组件的组合嵌套，导致了开发人员需要开发和维护大量的组件，React组件最强大的组合能力无法施展，导致适用的业务场景有限。

brick design是基于自然流布局的多维拖拽组合形式的页面编辑器，它包含了绝对布局流形式的编辑器的所有功能，同时也支持所有CSS布局模式，brick design的多维组件拖拽组合嵌套，让页面编辑有了更多的可能性，不在局限于一维平面的排序组合，可以充分的利用React组件强大的组件组合能力，实现更复杂的页面编辑，自然流布局和多维组件组合形式的结合也可以充分利用CSS样式的所有能力，实现炫酷页面的编辑能力。

brick design 目前的能力

1、组件自由拖拽嵌套

brick design 利用H5原生拖拽功能赋予组件可拖拽的能力，brick design 为什么不使用流行的拖拽库呢？一般拖拽库在设计之初对组件做了不支持H5 拖拽属性 draggable的假设，因此都会在组件的最外层包裹一层Html标签,以确保组件可以拖拽，但是这样就造成无形中破坏了组件的结构，很有可能导致最终的渲染页面与编辑页面的不一致，为了保证编辑的页面与渲染的页面一致性，实现所见即所得，brick design假设所有的组件都支持 draggable 属性，这样虽然对组件编写有了一定的要求(组件编写时根标签支持draggable属性)，但是确保了所见即所得。

brick design依托H5的draggable属性，以及React 组件组合特性赋予了组件的拖拽自由嵌套能力，其中包括子组件(children属性)嵌套拖拽，节点属性(除了children以外的值为React组件的属性)的自由拖拽嵌套。

2、组件拖拽缩放

brick design支持组件拖拽缩放，支持8个方位的拖拉更改组件的宽高，并且任何方位的拖拉都是丝滑流畅的。当然在不对组件做任何处理的情况下要保证组件可以拖拉缩放，对组件也是有一定的要求，那么是什么要求呢？brick design 对组件做了一个假设，组件根标签支持style 和className属性，为甚做这个假设呢?我会在后续brick design实现原理篇做介绍。

3、参考线与组件间距查看

brick design 支持组件之间的组件间距查看，以及辅助参考线实时展示，当你的鼠标放在某一组件时会实时展示对应的辅助线，当你选中某一组件并将鼠标悬浮在其他组件时会展示选中组件与鼠标所在组件之间的间距展示，这样的功能方便设计人员对比还原UI设计稿，同时在编辑页面之初就完成大部分UI设计，减少后期的UI设计还原时间。

4、组件的增删改清

组价增删改是最基本的功能，brick design允许你通过拖拽往页面增加组件，允许你在页面编辑区拖拽组件夸组件嵌套，同时也支持页面选中组件对组件做删除，修改属性、修改样式，以及清除子组件的能力，让你可以就近完成你想要的操作，简单方便。

5、模板生成与添加

在页面代码开发过程中，你经常会发现一些组件组合可能会在以后的业务开发中再次使用，然后你就把他们单独抽离封装成一个单独的组件以供以后的开发中使用，brick design 同样也有这样的能力，当你在编辑页面时你发现某些组件的组合使用场景比较多，你可以选中任何你认为可以作为模板的组件组合，保存他们，在以后的编辑中遇到需要同样组合的组件时，再将他们拖拽增添到页面里，减少了重复操作的时间，提高了页面编辑的效率。

6、撤销与重做

在页面编辑时总会出现错误操作，你又不想重做，怎么办呢？brick design 在你操作时已将你的每一步操作保存下来了，为你提供了专属“后悔药”，当然“后悔药”吃多了后悔过头了怎么办？别怕，brick design 也将你的后悔操作也做了保存，使你可以再重新回到未来。

7、样式修改实时预览

在页面编辑过程中总会调整组件的样式，但是样式修改了，怎么知道修改的对不对呢？brick design 赋予了组件样式修改实时预览的功能，当你修改了某个选中组件的样式时，页面会实时展示你修改后的样式效果，让你不在为调整样式而发愁。样式配置面板是一个纯表单(目前不完善)，你可以根据自己的业务Ui风格去实现。

8、属性修改实时预览

在页面编辑过程中总会调整组件的属性，当你选中某个组件时，brick design的属性配置面板就会拿到这个组件的组件schema信息，然后根据schema展示属性相应类型的交互组件，你对于大多组件来说你可以设置组件的属性配置实时预览，有些组件某些属性是相互依赖的，那么你可以禁用实时预览，等待完全设置好在去设置。属性配置面板是一个纯表单，你可以根据自己的业务Ui风格去实现。

9、父子组件约束

在开发中总会出现某些组件之间有强耦合效应，只有这些组件组合才能展示组件的功能与效果，比如antd 的 [Menu](导航菜单 Menu - Ant Design) 其下包含了Menu.SubMenu、Menu.Item、Menu.ItemGroup、Menu.Divider组件，这些组件只有在Menu组件下才能发挥作用，为了保证组件的正确放置，防止错误放置导致的不必要错误，brick design 为组件设计了父组件约束与子组件约束，通过这些约束让你在拖拽中当发生错误嵌套时不应用你的嵌套操作，并且提示错误信息告知你为什么没有你想要的效果。

10、组件树

由于brick design 是多维组件组合嵌套形式的编辑，所以有的时候在页面编辑时很难选中某一深层次的组件，或者操作某一节点属性的子节点，怎么办呢？brick design 提供了组件树来映射表示页面中的组件，同时也展现了页面的结构，并且组件树同样支持，组件的增删改清功能，在此基础上还有其特有的拖拽排序功能，跨组件拖拽排序功能，组件树与页面编辑区域是实时映射相应的，也就是说在你操作组件树或者操作页面中某一组件时，组件树与页面编辑区域都会实时反馈你的操作。

11、扩展能力

brick design 的设计与开发是由我工作之余做的，时间精力与想法都有限，某些功能比如，变量绑定、页码逻辑渲染、组件联动等功能还在修炼中，也许你在使用或你在参考时有一些新的想法，但是无法去验证怎么办？brick design 对外留有一个自定义reducer属性，你可以通过自定义reducer来操作页面的配置信息或者其他state，去扩展页面配置信息，来实现你想要的功能。如果你有新的想法，或者对brick design 有功能上的改进建议，希望可以一起共建brick design。

brick design 正在修炼的能力

1、页面支持拖拽排序

目前页面编辑区域，只支持跨组件拖拽嵌套，不支持组件排序，页面中的组件同级排序需要依赖组件树完成，后续开发将支持页面编辑区的组件拖拽排序。

2、页面变量绑定

由于最新重构版没有在业务中使用，所以一直在做交互与其他功能的开发，变量绑定在后续开发中增加。

3、代码生成与页面编辑实时交互

brick design 在最初的版本中，是有代码生成功能的，但是由于最初版本的brick design 数据结构复杂，导致最初生成的代码都是一次性买卖，无法返回重写编辑，最新版的数据结构结合AST使代码生成与页面编辑实时交互成为可能，配合代码编辑器，可实现云开发。

4、页面逻辑渲染

页面逻辑渲染是最常见的代码开发方式，但是目前还没有想到好的方法去实现，如果你有好的想法希望可以交流一下。

5、组件联动

页面开发中组件联动也是常见业务需求，目前也没有想到比较好的实现方法。

6、npm 组件导入

brick design 目前实现组件可视化属性配置是通过组件schema手动配置实现的，并且组件需要提前内置到平台，并不方便，看过云凤蝶的实现原理，它的实现需要后端完成，所以放到后边做平台时再想怎么做。

7、其他功能

如果你有什么新的想法新的功能，希望可以交流一下。