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 实例。

巴特西

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