Tango 低码前端编辑器原理学习
一、实现原理
1. 初始化渲染逻辑
实例化工作区
相关代码
Workspace（工作区状态）功能
- 管理当前工作区的文件列表，并且进行转义
- 管理页面路由、store、service 配置文件
- 管理当前的路由、当前选中的视图文件与选中的文件
- 创建通信机制
- 管理 Workspace 历史记录
初始化引擎
引擎包括两部分
- Workspace - 工作区状态
- Designer - 设置器状态
初始化变量配置
自定义配置数据
初始化沙箱 Query 工具
一个 DOM Query 工具，通过引用的方式来与 Iframe 沙箱进行通信
渲染布局
布局很好理解，包括以下部分
- DesignerPanel：壳子
- Sidebar：左侧工具栏面板
- WorkspacePanel
- WorkspaceView design 模式
- WorkspaceView code 模式
- SettingPanel：右侧设置器
初始化沙箱
- 这里的沙箱指的是 WorkspaceView design 模式用到的 CodeSandbox 核心功能，是整个低码编辑器的核心，这里需要引入 CodeSandbox 的 bundler。
- 在沙箱加载完成之后，会设置
MenuData和ComponentPrototypes
- 根据用户操作渲染左侧组件面板和组件的设置面板
2. 沙箱原理
Sandbox 包括 PreviewSandbox 和 DesignSandbox 两种，其中PreviewSandbox直接渲染了CodeSandbox的预览模式
DesignSandbox渲染了CodeSandbox的 Design 模式，添加 useDnD 逻辑，并且监听代码或边框更新的情况重新设置选中的边框
CodeSandbox 对接原理
- 通过 iframe 加载并渲染
codesandbox-client资源
- 在加载完成后注册监听逻辑，并修改 domain，以便让外部页面和 iframe 页面在同一个域名下，主要目的是为了直接监听 iframe 页面的事件
- 加载完成后实例化
Manager，即开始构建页面，其中Manager是一个管理者的角色，从大局上把控整个转译和执行的流程（通过 IFrameProtocol 来进行通信）
- 将 iframe ref 传给
Manager作为实例化参数，当构建完成后，会将构建的页面 dom 设置给 iframe ref
3. 插入、复制、删除、移动原理
useDnd 的原理
useDnd 是在渲染沙箱的时候会使用到，宿主会有三个渲染元素，分包用于选中高亮（SelectionTools）、插入提示（InsertionPrompt）、拖拽占位图层（DraggingMask）而
useDnd 本身会有以下功能：- 处理当前选中的元素、拖拽相关的元素，显示提示
- 处理当前元素的拖拽逻辑，给出拖拽高亮提示
- 操作完成后，执行 Workspace 的 dropNode 能力，对文件进行操作
withDnd 的原理
withDnd 是一个 HOC，每个物料都需要使用该 HOC 定义当前组件的布局属性，并渲染 tango-dndBox 壳子来配合实现 Dnd 逻辑，如：- 是否允许拖拽
- 布局的基本样式
block、inline-block、inline
- 注入
DND 追踪标记（data-dnd）
其中
DND 追踪标记是 Workspace 创建 TangoViewModule 的时候调用 traverseViewFile 注入的二、框架、物料设计
1. 物料设计
目录结构
物料核心包（TangoAntd）是应用必带的基础包，NPM 地址见
@music163/antd，主要有以下功能：暴露物料的 MenuData
暴露物料的组件，包括 withDnD 的逻辑
默认情况下 withDnd 会在组件外层包裹一层 dnd 容器，以便于组件能够在设计器中被拖拽：
- draggable 属性表示该区域可以被拖拽
- data-dnd 用来追踪渲染的 dom 元素
暴露物料组件的基本描述和设置器设置
2. 应用框架设计
应用框架核心包(TangoBoot) 指的是在该编辑开发的应用所要遵循的开发规范以及框架，方便后续解析和操作
目录结构
在 Workspace 中定义的文件类型
路由、状态管理（略）
这里有个遗留问题，assets 中允许存非文本文件吗？至少 CodeSandbox 是支持的