H5 Dooring 可视化编辑器源码分析H5 Dooring可视化编辑器源码阅读笔记，实现简单巧妙，没有过多复杂的逻辑

一、UI设计

二、项目分析

项目主要有两部分，一个是可视化编辑器（editor），一个是预览（preview）。使用了lerna包管理多个项目。

1、Editor 编辑器

编辑器可视化工作区域，使用了Preview预览editor模式。

动态表单模块，包括表单项

2、Preview 预览

预览主要承载两个功能，一个是view模式，一个是editor模式。

UI组件库

三、功能分析

头部功能区域包括：

模版库 -- 未实现
保存 -- 主要保存两份数据，组件数据（pointData）
导入/导出 -- pointData
复制/粘贴/重做/撤销/删除 -- 操作pointData
预览 -- 打开Preview

左侧组件库区域：

组件类别（category），eg：基础类别、多媒体、图表
每个类别下面，还包含组件类型（type），eg：文本、图片、...

中间编辑区域：

工作区 -- 可以拖动
上刻度、左刻度
画布 -- 页面制作白色区域，组件布局
控制条（toolbar）-- 主要是缩放

右侧属性区域：

组件属性表单

四、组件分析

1、Editor 容器组件

编辑器布局，上面Header、下面分左边组件库、中间区域工作画布、右边属性表单。布局容器里面用到React DND来处理拖放，Draggable 来处理布局工作画布拖动，缩放。

2、Header 功能组件

功能区，包括保存、导出、导入、预览、复制、粘贴、撤销、重做等。

3、 TabPane 组件库面板

组件库面板，所有组件列表存放的地方。可拖动的组件都放在这个区域。

使用到了第三方库Antd的Tabs。

4、SourceBox 组件

拖拽源容器，所有的组件都需要这个容器包裹，才能具备拖拽能力。实际上组件库渲染的时候已经全部被该容器包裹。

使用了第三方库React DND

5、TargetBox 组件

拖放源容器，接收拖拽源的组件数据，调用ViewRender渲染到画布上。

使用了第三方库React DND

使用了Draggable使整个容器可在工作区域随意拖动。

6、CanvasControl 组件

控制工作画布放大缩小

7、MenuProvider右键菜单组件

为工作画布区域的组件提供右键菜单。使用第三方库react-contexify。

8、Calibration 刻度组件

为工作区域提供尺寸参考。

9、FormRender 动态表单组件

右边属性区域，渲染组件的属性，可编辑。主要基于Antd的Form组件实现。

10、FormItem 表单组件库

包含各种类型的表单组件，图片、文本、颜色、输入框等。

11、ViewRender 渲染组件

预览界面的容器，最外层是一个可拖拽的盒子组件（第三方react-grid-layout组件），里面循环渲染所有的DynamicEngine组件，循环的数据就是PointData。

12、DynamicEngine 组件

这个是实现动态渲染的组件，主要使用Umijs的dynamic动态加载UI组件功能。输入PointDataItem数据，根据类型（type），类别（category）查找到需要渲染的组件目录，动态import组件。

13、UI组件库

组件分不同的类别（category），每个类别下面有不同类型（type）的组件。比如：

base 基础组件，图片、输入框、文本等
visual可视化组件，饼图、折线图、柱状图等
media多媒体，视频、音频等
其他自定义的组件

五、数据结构

1、UI组件数据结构 (template, schema)

定义一个UI组件，必须包含template定义、schema定义两部分数据。

template 组件模板定义，主要是在编辑器组件列表里面显示

{
  // 类型
  type: 'Footer',
  // 网格规则的坐标，主要用在React Grid Layout的布局h属性
  h: 10,
  // 组件库显示的名称
  displayName: '页脚组件',
  // 组件类别
  category: 'base',
  // 网格规则的坐标，主要用在React Grid Layout的布局x属性
  x?: 0,
}

schema 组件schema定义，包含可编辑属性（editData）、props属性配置（config）

// schema 对象
{
  // 可编辑属性列表
	editData: [ ... ],
  // 可编辑属性默认值           
  config: { ... }
}

// editData item
{
  // 属性key，主要设置在css
  key: 'bgColor',
  // 属性名称，显示在动态表单label
  name: '背景色',
  // 表单组件类型
  type: 'Color',
}

2、布局数据结构（point data）

ViewRender组件主要遍历pointData，调用DynamicEngine来动态渲染组件。这是一个数组，单个项结构如下：

{ 
  id: 'string',
  // React Grid Layout网格规则, 布局用
  point: { x: number, y: number,  w: number, h: number, ... },
  // 组件拖拽数据源
  item: {
    category: string,
    type: string,
    // 右侧动态表单的数据，主要是组件的外观、布局属性，用的都是style
    config: json
    ...
  },
  // 布局状态，暂时没搞清除有什么用
  status: 'inToCanvas'
}

3、组件拖拽数据源 (source data)

从组件库拖拽一个组件的时候，数据源如下，拖放区域可以接收到这部分数据。

{
  // 组件类型，模版配置下面的type
  type: template.type,
  // 组件默认值
  config: schema.config,
  // 网格规则的坐标，主要用在React Grid Layout的布局h属性
  h: template.h,
  // 属性列表
  editableEl: schema.editData,
  // 组件类型
  category: template.category,
  // 网格规则的坐标，主要用在React Grid Layout的布局x属性, 很多组件是没有配置这个属性
  x: template.x || 0,
}