React 支持

[pubuzhixing8]

主要讨论支持 React 的方案及落地计划。

当前框架及主要插件对 Angular 的依赖情况

@plait/core

1. 入口 board 组件
2. 元素渲染组件 children/element 组件
3. 自定义插件组件渲染继承基类：PlaitPluginElementComponent
4. PlaitContextService：目前主要用它存储下上传中的图片列表，可以移除
5. utils/common 用到 rxjs 中的 timer
6. uitls/weak-maps 用到了组件实例，它记录组件实例和元素的对应关系

@plait/common

1. image-base.component 图片渲染需要继承该基类组件，utils/image 依赖该组件也需要处理
2. ImageGenerator 图片渲染器，配合 image 组件完成最终渲染，因为 plait/draw 和 plait/mind 都有图片、处理类似，所以把它抽取到了 common 中
3. CommonPluginElement 基于 PlaitPluginElementComponent 基类封装了一些东西，比较容易处理
4. utils/text 依赖 slate-angular 出来了一些文本相关的东西

@plait/text

1. 核心依赖了 slate-angular 处理 text，需要替换为 slate-react
2. 包含基本富文的处理，主要有两个组件：richtext.component、text.component

@plait/draw

draw 已经属于业务插件了，用到地方不多，主要是实现插件自定义渲染的部分继承了 PlaitPluginElementComponent：geometry.component、image.component、line.component

@plait/mind

和 @plait/draw 类似，只不过场景多了 emoji 的支持。

初步落地方案

前期有两个非常重要的事情需要搞定：

1. 将 plait/core 重构成框架无依赖的
2. 将 plait/text 改造成框架无依赖，目前仅支持 Angular 框架下的 slate-angular，可以考虑使用 slate-react

实现基于 react 的渲染

这块的主要工作应该是基于 react 组件将 plait 的数据渲染出来，目前 plait 绘图元素渲染主要还是基于 SVG，基于 angular 框架主要是为了实现基于数据驱动的渲染模式，另外一个就是自定义插件的渲染也是提供的 angular 组件（只不过这个组件是要受框架约束的，继承一个基类），具体的工作：

1. 基于 react 实现数据渲染的组件：plait-board、plait-children、plait-element
2. renderElement 可以暂时设计为返回 react 组件
3. weak-map 应该也可以存储 react 组件的实例对象

计划任务：

• 前期先在 react 分支 尝试方案
• 在项目根层目录建一个 demos 的文件，里面放一个 angular 和 一个 react 的应用
• 在 react 的 Demos 中跑通 plait-board 组件和插件机制
• 确定最终的 packages 的划分，插件机制的 API
• 处理 plait/core 适配 react
• 处理 plait/text ，适配 slate-react

[pubuzhixing8]

先写一个基于 React 的画图示例（ https://github.com/plait-board/react-drawing-tourist ），实现画图的基本功能，参考： https://github.com/worktile/plait  里面的 board 组件和插件机制

[pubuzhixing8]

Framework agnostic
@plait/core
@plait/common
@plait/draw
@plait/mind
@plait/layouts

Angular framework
@plait/angular-board
@plait/angular-text

React framework
@plait/react-board
@plait/react-text