lowcodeEngine设计器源码简析(创建流程，主要对象), 怎么生成一个左侧面板
lowcodeEngine 怎么生成一个左侧面板
初始化流程
如何生成一个左侧面板
- 初始化插件时往skeleton.leftArea新增按钮，新增按钮时往skeleton.leftFloatArea新增面板对象
- 点击按钮时，调用panel方法，处理面板的显示隐藏
- 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 实例。
