Building the `create-loader` module

uiuing commented 2 years ago

用于实现绘制与操作，对客户端渲染提供api
creat-loader包含creat的相关操作API，包括数据导入导出等逻辑，它并不直接与渲染框架联系，给予 creat-render API。

以下内容更新于：2022/10/30 03:43 (图片较大，可能需要加载一会)

`creat-loader` 模块目录结构设计

creat-loader模块目录结构设计

support 提供渲染等基础渲染/需要高复用的 function，类似通用模版。
components 负责提供需要的的 element 对 DOM与渲染负责，例如文字、图形，当然还有一些 base 内容。
classFile 它的核心需求就是对事件与操作负责，当然也包括了一些 element ，例如鼠标事件监听、历史操作、渲染操作。
common 包括负责 通用计算与基本数据 ，例如坐标计算、键位存储。
API 将所有内容封装成一个 class ，里面需要不少代码，相当于一个对所有代码进行集合，对外提供操作/挂载/消息发布与订阅接口，类似Vue的 createApp(app).mount('#app')，React的 ReactDOM.createPortal(child, container)。

`creat-loader` 模块内部实现设计

creat-loader模块内部实现设计

`creat-loader` 模块协作下数据同步设计

creat-loader模块协作下数据同步设计

uiuing commented 2 years ago

也许可以这样设计：

creat-loader 结构

support 提供拖拽等基础渲染/需要高复用的 function，类似通用模版
components 负责提供需要的的 element 对 DOM与渲染负责，例如文字、图形，当然还有一些 base 内容
classFile 它的核心需求就是对事件与操作负责，当然也包括了一些 element ，例如鼠标事件监听、历史操作、渲染操作
common 包括负责 通用计算与基本数据 ，例如坐标计算、键位存储
API 将所有内容封装成一个 class ，对外提供操作/挂载，类似Vue的 createApp(app).mount('#app')，React的 ReactDOM.createPortal(child, container)

uiuing commented 2 years ago

create-loader 模块的底层逻辑就是：将所有canvas、DOM、事件等操作聚焦于一个被挂载DOM上，构造成一个虚拟容器，通过实例化对象内部API操作这个虚拟容器。

uiuing commented 2 years ago

目前实现即将完成，但具体实现代码较为混乱，待后期完善，优先考虑产出结果，类型暂且有限使用any，数据更新结果暂时以全量输出，后续可以做diff

uiuing commented 2 years ago

每个Element节点需有一个独立id，作为唯一标识符判断

uiuing commented 2 years ago

目前基本同步API，数据内容，与基本格式以完成，目前还需要对代码进行重构，确保后期的稳定性，并且需要测试与标准处理，所以暂时不提交，预计十一月三号左右完成，并提交完整代码

uiuing commented 2 years ago

2020/11/1

已支持API

✅ zoom 缩放
✅ 图形缩放（上面是指这个页面的缩放，这里是单个图形的大小缩放）
✅ 样式设置（可以通过这里设置每个使用者不同的颜色）
✅ 多选
✅ 快捷键
✅ 权限：可编辑/只读
✅ 网格
✅ 重新定位（回到最中间）
✅ 删除（或者叫擦除更合适？🤔）
✅ 清空（全部删掉）
✅ 撤回和撤回撤回🤣（即redo和undo）
✅ 旋转
✅ 拖动
✅ 自定义导出图片（例如要不要背景，或者是否全部导出之类的）
✅ 自动大小（想怎么画怎么画）
✅ 可以添加的图形：图片、三角形、圆形、线段、矩形、菱形、箭头、画笔（这里的图形都是参考别的平台，常见的一些图形，受时间限制，难度大的就先搁浅了）
✅ 导出/导入专属数据文件

待支持与优化的问题

⌛️ 数据增量优化（包括发布者的增量的diff处理和消费者的增量数据的插入）
❌ 虽然是用了 ‘TypeScript’ ，但受制于时间，总体来说类型的支持还是很混乱，可读性和可维护性只能说勉强，但短期内不考虑优化
❌ 所有逻辑基于鼠标事件判断，并且结合canvas实现逻辑与其它处理，性能只能说还能用，但短期内不考虑优化（当然也不会太差🥲）

目前安排

明日将逐一测试并逐一提交，预计还需两、三天，四天内将全部完成 ‘crest-loader’ 模块的提交

后续安排

讨论数据同步数据格式 #7
后续将与 ‘server’ 模块对接，测试数据同步可用性 #5
开发 ‘creat-render’ 模块，基于 ‘crest-loader’ 模块提供的底层API，开发web应用。

@JavanTang

uiuing commented 2 years ago

✅ 目前已测试完成

⌛️ 明天将逐步整理并提交

uiuing commented 1 year ago

暂时开发完成，接下来解决 #14

uiuing / creat