MagicBox Decorator - 魔方装修工具
MagicBox(魔方) 是装修工具的名称,也是核心组件的名称。
1.整体设计思路
1.1 栅格布局
设计器整体采用行列布局,也就是 Row( MRow 类) 和 Column( MCol 类) 模型,此设计参考了 Bootstrap 的栅格布局模型。
MRow 表示一行,MCol 表示一列,MRow 中只能放置 MCol。虽然组件没有约束一行中最多放多少列,但是建议参考 Bootstrap 的思路,最多放 12 列。
MCol 内部可以放真正的业务组件,也可以继续放置 MRow,可以形成无限嵌套。
1.2 数据驱动
Designer 和 Renderer 都基于数据驱动模式工作,整体是一份巨大的 JSON 数据。
1.3 数据与 UI 分离
数据中只记录组件类型和数据,不记录组件具体的展示逻辑,UI 展示逻辑由不同类型的 Render 具体负责,在对页面布局要求不高的场景下,PC、手机端、Pad 可以共用一份数据。
数据格式示例:
{
index: 0,
id: 'df019a54-e3fb-40f8-b916-d2cde8325475',
pid: -1,
childNodes: [
{
type: 'MRow',
id: '9c40cfe6-c6ff-418f-8ae6-5e1818189172',
title: 'MRow',
pid: 'df019a54-e3fb-40f8-b916-d2cde8325475',
index: 0,
childNodes: [
{
type: 'MCol',
id: '9d027c88-ad6d-43c3-850e-ab8bae6b8ab4',
title: 'MCol',
pid: '9c40cfe6-c6ff-418f-8ae6-5e1818189172',
index: 0,
childNodes: [
{
type: 'GalaryTemplate4',
id: '80c970f7-5f30-4f72-b6a9-455399ac2aea',
title: '4 Images',
pid: '9d027c88-ad6d-43c3-850e-ab8bae6b8ab4',
index: 0,
},
],
},
],
}
...
2.主体目录结构
├─assets //资源文件目录,共用的图片和 CSS 文件等
├─common
├─components //支持拖拽布局的所有组件都在此目录中,FISHX 原生的组件需要经过简单包装之后才能用在 Designer 中
├─config
├─locale
├─models
├─pages
│ ├─layout //设计器主体界面结构放在此目录中:顶部导航条、左侧边栏、中间主体绘图容器区域、右侧属性配置面板
│ ├─MGenerator //主入口组件,外部使用者只要引用此组件即可
│ └─property-panel //属性配置面板,每个组件都对应一个自己的属性配置面板
└─utils
3.核心类
设计器的核心组件有2个:
- MagicBox: 封装拖动逻辑和无限递归渲染逻辑, 需要被拖动到设计器中的组件都需要在外面包一层 MagicBox,包装方式参考 MRow 组件。
- DropZone: 封装放置区域逻辑,当把对象拖动到 DropZone 并放开鼠标时,会触发 drop 动作。
MagicBox 和 DropZone 基于 react-dnd 进行了再次封装,它们是内部核心机制,设计器的外部调用方不需要关心这两个类的实现细节,只要关注暴露的参数即可,下是 MagicBox 的核心参数:
id,
pid,
index,
nodeData,
children,
onHover,
onDrop,
componentMap,
acceptTypes = ['MagicBox', 'MRow'], //盒子内部可以接受的类型只有 MagicBox 和 MRow,MagicBox 默认可以接受自己,形成无限嵌套。
isValidDest = false,
canDrag = true,
isLeaf = false,
isSelected = false,
innerDirection = 'vertical',