lowcodeEngine设计器源码简析(创建流程，主要对象), 怎么生成一个左侧面板

lowcodeEngine 怎么生成一个左侧面板

初始化流程

如何生成一个左侧面板

1. 初始化插件时往skeleton.leftArea新增按钮，新增按钮时往skeleton.leftFloatArea新增面板对象
2. 点击按钮时，调用panel方法，处理面板的显示隐藏
3. workBench-->leftFloatArea --> skeleton.leftFloatRea.container.items.map(item=>item.content)--->Panel-->PanelView(widget-view)

主要类

lowcodeEngine有很多同名的类，shell下为对外开放的API, 保持内部类的引用

Designer：

设计器主体，保存editor, project, dragon等索引。

designer模块创建和管理所有ComponentMeta ，其他模块通过 designer 来获取指定的 ComponentMeta 实例;

注册dragon.onDrag onDragend等事件

Dragon:

拖拽引擎（Dragon）核心完成的工作是将被拖拽对象拖拽到目标位置, 内部有自己的EventEmiter对象（与editor的EventEmitter相互独立）

editor:

编辑器上下文 editor，主要包含：消息通知、插件引用等

继承EventEmitter来处理事件, 保存skeleton,plugins,designer等对象，

skeleton:

提供API能力, 内部保存inner-skeleton

inner-skeleton(editor-skeleton):

整体面板的管理扩展（对象保存，创建）

存放containers（widgetContainer实例，与Area对象中的container 是同一个对象实例）,Area对象(leftArea,rightArea, toolBar等)， widgets（存放具体的组件）

Area：

Area对象的管理(新增，删除，显示 ，隐藏),内部有WidgetContainer对象实例

WidgetContainer:

Widget对象的管理（存放实例对象items, 新增，删除，读取）。新增时是调用skeleton的createWidget方法创建Widget实例(根据不同类型生成PanelDock, Dock, Widget)

PanelDock对象

mobx化之后的content对应左侧面板的按钮

Panel控制类 LeftFloatPane组件展示

面板的显示隐藏

模型系统

官方介绍很详情，移步官方介绍

项目模型（Project）

项目模型提供项目管理能力，模型系统最顶层的模型。项目模型实例下可以持有多个文档模型的实例，其他模型实例（Document , Node, Prop等）均需要通过 project 来获得

文档模型（DocumentModel）

文档模型提供文档管理的能力，每一个页面即一个文档流，对应一个文档模型。文档模型包含了一组 Node 组成的一颗树，类似于 DOM。

节点模型(Node)

节点模型聚焦于单层级的 schema 相关操作：

属性模型（Props, Prop）

组件描述模型（ComponentMeta）

每一个组件对应一个 ComponentMeta 的实例，其属性和方法就是描述协议中的所有字段，所有 ComponentMeta 都由设计器器的 designer 模块进行创建和管理，其他模块通过 designer 来获取指定的 ComponentMeta 实例，尤其是每个 Node 实例上都会挂载对应的 ComponentMeta 实例。