可视化搭建编辑器【0】--开篇
随着互联网的发展、数字化基础设施建设速度加快，很多公司特别是工业互联网公司对数字孪生的需求增大，前端需要实现各种数字孪生、可视化大屏的需求。传统的开发方式开发和维护成本比较大，需要做工具提高生产力，因此可视化搭建（本栏目称为二维编辑器）称为各个大中型公司的的核心产品（比如光启元、乐吾乐 做的都不错）。
业务场景
有需求才有市场，有哪些场景需要可视化搭建编辑器呢？
可视化大屏
大屏项目是比较常见的，但是有时候客户描述的需求和客户真实想要的效果是有比较大的差距的，细节上交付时需要调整很多。如果有了可视化搭建编辑器，一方面历史沉淀的组件会积累的越来越多，开发实现成本会降低、交付效率会提升；另一方面售前在和客户沟通的时候就可以通过拖拽搭建的方式跟客户演示，避免需求层客户的理解和开发需求上有差异，快速搭建出客户真正满意的大屏页面；
数字孪生
数字映射（Digital twin），或译作数字孪生、数字分身、数位双生，指在信息化平台内模拟物理实体、流程或者系统，类似实体系统在信息化平台中的双胞胎。借助于数字映射，可以在信息化平台上了解物理实体的状态，甚至可以对物理实体里面预定义的接口组件进行控制。
我个人理解：数字孪生不止是实体（比如工厂产线）的数字图像可视化，让实际实体（产线）的实际运行状态通过数字图像实时展现在我们面前；同时我们还可以操作页面图像数字符号来控制实体（产线）对象，也就是反控。总结为两个方向，一个方向是真实实体映射到虚拟的数字图像上；另一个方向是我们操作数字图像虚拟符号映射作用到真实世界的实体对象上。
行业现状
目前有些公司产品做的已经很成熟了，我们可以摸着这些公司过河，参考一下这些公司的产品功能设计，如果大家急需这些功能，想快速搭建出场景，或者自己公司没有研发团队，想直接用，也可以直接购买这些公司的产品，这里推荐光启元和乐吾乐，可以看一下他们的产品界面：
光启元
光启元有2D和3D搭建的产品，其中2D产品编辑器内部左侧分为UI层和场景层，将2D大屏和3D模型巧妙结合在一起，是一个很优秀的设计，另外组件的配置设置也很清晰，在产品设计层面有很多值得学习的地方：
乐吾乐
乐吾乐有2D和3D搭建的产品，其中2D产品的组件很全面，而且开源了一个meta2d.js，产品设计也很优秀：
产品功能梳理
从这些优秀的产品中，我们可以梳理总结出一些通用的功能和特色的功能，我们自己开发可视化搭建编辑器的时候可以按照雷瑟的架构去实现：
布局
布局上，都是中间区域是编辑区；左侧为页面大纲导航或者组件列表导航；顶部是节点分类导航或者工具栏；右边区域都是配置面板区域（配置数据的样式、数据、事件 和其他拓展功能）
节点类型
如果是流程引擎可能会多出很多逻辑、流程编排等功能节点，这里先不考虑流程引擎和规则引擎，先做可视化大屏和数字孪生页面搭建，所以组件上以数据报表、图标；页面功能、业务组件为主
- 数据图表（Echarts 图标类型的封装）
- 文本、图片、音频、视频
- 基本形状
- 时间、天气、按钮 等基本部件
- 下拉选择、输入框、时间范围选择 表单等（antd）基础UI组件
- 弹窗、气泡提示 等交互组件
画布基础功能
- 画布尺寸、是否可拖拽编辑
- 快读自适应视图
- 导出图片
- 画布渲染
- 节点自定义封装
- 节点拖拽、配置编辑
- 节点选中和菜单选中联动，侧边栏节点拖拽进入画布
- 快捷键：删除、撤销、回退、重做、置顶、置底
- 新建群组、解散群组
- 辅助线 对齐
- 多节点快速布局：左对齐、右对齐、顶部对齐、底部对齐、居中对齐等等
配置面板
- 基础配置（样式配置）
- 节点名称
- 快速布局
- 配色方案
- 位置
- 尺寸
- 对齐方式
- 透明度
- 数据配置
- 静态数据：在线编辑配置静态数据
- WebApi:配置接口地址、参数，返回数据过滤配置等操作获取数据
- WS、离线文件等其他类型可以拓展，但是最主要实现以上两种方式即可
- 事件配置
- 触发条件：单击、双击、鼠标移入、鼠标移除、值变化(这里值变化可以读取已经暴露出来的参数值变化、选择节点树联动配置)
- 实现动作（节点树选择节点及该节点暴露出去的方法）
- 其他（如节点文档）
工具栏
- 放大、缩小
- 快速自适应调整到合适的视窗
- 图片导出
- 历史版本及回退到指定历史版本
- 预览
实现过程
梳理完核心功能点之后稍微清晰了，如果只是实现核心功能点觉得还是可行的，画布底层就不自己实现了，需要找第三方库，然后再画布之上封装实现一个可视化搭建编辑器。
技术选型
后续
今天就写到这里了，下期见~
转载自:https://juejin.cn/post/7385487628458508351