Skip to content

Commit

Permalink
React support doc (#948)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pubuzhixing8
pubuzhixing8 authored Jul 7, 2024
1 parent 88cd9dc commit ab29bdc
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 40 deletions.
56 changes: 36 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,16 @@
<a href="https://t.me/plaitboard"><img src="https://img.shields.io/badge/-Telegram-red?style=social&logo=telegram" height=20></a>
</p>
<h2>
A modern drawing framework for building all-in-one whiteboard tools </br>
such as mind maps, flow charts, hand writing, etc.
A modern drawing framework for building an all-in-one whiteboard tool </br>
for interactive drawing features such as mind maps, flowcharts, and freehand drawing.
</h3>
</div>


Plait is positioned as a drawing framework that provides a plugin mechanism, allowing developers to extend functionality through plugins. It only provides a basic drawing whiteboard at the bottom, which only includes basic functions such as zooming in, zooming out, and moving the canvas. It does not include any business functions. All business functions need to be expanded through plugins to achieve free combination and can be easily implemented independently. Or an all-in-one drawing tool.
Plait is a modern drawing framework that provides a plugin mechanism, allowing developers to extend drawing functionalities through plugins. It is particularly suitable for the development of interactive whiteboard tools.


Plait does not rely on any frontend UI framework at its core, but it provides solutions for integrating with mainstream frontend UI frameworks to ensure a good development experience for upper-layer developers and to reuse mainstream framework components.


[中文文档](https://github.com/worktile/plait/blob/develop/README.zh-CN.md)
Expand All @@ -31,47 +34,60 @@ Plait will also provide some basic functional plugins, which have been implement

- Draw plugin

- Flow plugin

- GraphViz plugin

- Flow plugin

Plait architecture is inspired by the rich text editor framework Slate and is used for web-side interactive drawing business development.

![online demo screen](https://github.com/worktile/plait/blob/develop/.docgeni/public/assets/mind-draw-flow.gif?raw=true)


- 👉 [Online example (Draw)](https://plait-gamma.vercel.app?init=draw)
- 👉 [Online example (Mind)](https://plait-gamma.vercel.app?init=mind)
- 👉 [Online example (GraphViz)](https://plait-gamma.vercel.app/graph-viz?init=force-atlas)
- 👉 [Online example (Flow)](https://plait-gamma.vercel.app/flow)
- 👉 [Documentation](https://plait-docs.vercel.app)

#### Features

- Provide basic drawing board capabilities
- Independent of UI frameworks
- Provides basic board capabilities, such as zooming in, zooming out, and moving
- Plugin mechanism
- Data model (supports collaboration)
- Component-based development (currently only supports Angular framework)
- Basic drawing tool functions
- Basic drawing utility functions


#### UI Framework Integration

The implementation of the framework requires components from frontend UI frameworks as carriers. This ensures that the development of drawing functionalities follows mainstream development patterns (data-driven). Currently, integration with Angular and React frameworks is supported.

Text rendering in the plait is based on the Slate framework, enabling rich text rendering and editing on the board. Slate is an excellent rich text editor framework, and Plait was inspired by the Slate framework in its design


#### Packages

|Package Name|Description
|---|---|
|@plait/core|Core of the framework: 1. Plugin mechanism 2. Provide data model and transform functions 3. Provide basic board components|
|@plait/common|Some logic reused by different drawing plugins: 1. Basic tool functions 2. Basic plugins 3. Basic rendering logic|
|@plait/text|Text support, dependent on packages slate and slate-angular|
|@plait/mind|Mind plugin implementation, based on an independent automatic layout algorithm, currently supports: logical layout, standard layout, indented layout|
|@plait/draw|Flowchart plugin implementation, including interactive creation and modification of basic graphics, standard flowchart graphics, connections, free pictures and other elements|
|@plait/flow|Flow plugin, which can be used for visual configuration of process status|
|@plait/layouts|Mind support library, including automatic layout algorithms|

|@plait/core| Framework core: plugin mechanism design, providing data models, data transformation functions, zooming, scrolling, etc |
|@plait/common|Common functionalities for interactive drawing, text rendering, and editing|
|@plait/text-plugins| General text extension functionalities, UI framework-independent, relies on the Slate rich text editor framework |
|@plait/mind| Mind map plugin, based on an independent automatic layout algorithm, supports: logical layout, standard layout, indent layout |
|@plait/draw| Flowchart plugin, supports: basic shapes, flowchart shapes, connections, free images, etc |
|@plait/flow| Process orchestration plugin, supports: standard nodes, connections, custom nodes, and connections |
|@plait/graph-viz| graph visualization，supports: force atlas(Knowledge graph) |
|@plait/layouts| Mind map layout algorithms |
|@plait/angular-text| Text rendering component, relies on the Angular framework, Slate rich text editor framework, Angular view layer |
|@plait/angular-board| Whiteboard view layer component, relies on the Angular framework |
|@plait/react-text| Text rendering component, relies on the React framework, Slate rich text editor framework, React view layer |
|@plait/react-board| Whiteboard view layer component, relies on the React framework |


React view layer, text rendering component：[https://github.com/plait-board/drawnix](https://github.com/plait-board/drawnix)

#### Who is using

- 🔥🔥🔥 [PingCode Wiki](https://pingcode.com/solutions/knowledge-manage)

- 🔥 [Drawnix](https://github.com/plait-board/drawnix)

### Development

Expand All @@ -92,7 +108,7 @@ HTML：

```
<plait-board [plaitPlugins]="plugins" [plaitValue]="value"
(plaitBoardInitialized)="plaitBoardInitialized($event)" (plaitChange)="change($event)">
(plaitBoardInitialized)="plaitBoardInitialized($event)" (onChange)="change($event)">
</plait-board>
```

Expand All @@ -114,7 +130,7 @@ export class BasicBoardComponent {
board!: PlaitBoard;
change(event: PlaitBoardChangeEvent) {
change(event: OnChangeData) {
// console.log(event.children);
}
Expand Down
55 changes: 35 additions & 20 deletions README.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,61 +14,76 @@
<a href="https://t.me/plaitboard"><img src="https://img.shields.io/badge/-Telegram-red?style=social&logo=telegram" height=20></a>
</p>
<h2>
一款现代化的绘图框架用于构建一体化的白板工具产品 </br>
比如思维导图、流程图、自由画笔等等
一款现代化的画图框架用于构建一体化的白板工具</br>
实现如思维导图、流程图、自由画笔等交互式画图功能
</h3>
</div>


Plait 被定位为一个绘图框架，提供插件机制，允许开发者通过插件的方式扩展功能。它底层只提供一个基础的绘图白板，仅仅包含放大、缩小、移动画布等基础功能，而不包含任何业务功能，所有业务功能均需要通过插件的方式扩展，实现自由组合，可以方便的实现独立的或者一体化的绘图工具。
Plait 是一款现代化的画图框架，提供插件机制，允许开发者通过插件的方式扩展画图功能，特别适用于交互式白板工具的开发。

Plait 也会提供一些基础的功能插件，目前已经实现：
Plait 底层不依赖任何前端 UI 框架，但是它为集成到主流的前端 UI 框架提供了解决方案，以保证上层开发者的开发体验、复用主流的框架组件。

当前已支持功能插件：

- 思维导图插件

- 流程图插件

- Flow 插件

- 图形可视化插件


Plait 架构以富文本编辑器框架 Slate 为灵感，用于 Web 端交互式绘图业务开发。
- 流程编排插件

![online demo screen](https://github.com/worktile/plait/blob/develop/.docgeni/public/assets/mind-draw-flow.gif?raw=true)


- 👉 [在线示例 (流程图)](https://plait-gamma.vercel.app?init=draw)
- 👉 [在线示例 (思维导图)](https://plait-gamma.vercel.app?init=mind)
- 👉 [在线示例 (图形可视化)](https://plait-gamma.vercel.app/graph-viz?init=force-atlas)
- 👉 [在线示例 (流程控制)](https://plait-gamma.vercel.app/flow)
- 👉 [在线文档](https://plait-docs.vercel.app)

#### 框架特性

- 不依赖 UI 框架
- 提供基础画板能力，比如放大、缩小、移动
- 插件机制，提供插件机制用于扩展绘图功能
- 插件机制，提供插件机制用于扩展画图功能
- 数据模型，提供基础数据模型及数据变换函数（支持协同）
- 前端组件化，基于组件组织业务逻辑（目前仅支持 Angular 框架）
- 基础绘图工具函数
- 基础画图工具函数


#### UI 框架集成

框架落地需要以前端 UI 框架组件作为载体，这样可以保证画图图功能开发沿用主流开发模式进行（数据驱动），当前已支持 Angular 和 React 框架的集成。

Plait 中的文本渲染基于 Slate 框架，实现画板中富文本的渲染和编辑，Slate 是一款优秀的富文本编辑器框架，Plait 在设计上就是一 Slate 框架为灵感。


#### 模块

|包名|说明
|---|---|
|@plait/core|框架核心：1.插件机制设计 2.提供数据模型、数据变换函数 3.提供基础的 board 组件，包含放大、缩小、滚动方案实现|
|@plait/common|不同绘图插件复用的一些逻辑：1.基础工具函数 2.基础插件 3.基础渲染逻辑|
|@plait/text|文本支持，依赖 slate 及 slate-angular|
|@plait/mind|思维导图插件实现，基于独立的自动布局算法，目前支持：逻辑布局、标准布局、缩进布局|
|@plait/draw|流程图插件实现，包括基础图形、标准流程图图形、连线、自由图片等元素交互式创建及修改|
|@plait/flow|Flow 插件，可以用于流程状态的可视化编排|
|@plait/layouts|思维导图支持库，包含自动布局算法|
|@plait/core|框架核心：插件机制设计、提供数据模型、数据变换函数、放大、缩小、滚动等方案|
|@plait/common|交互画图业务通用功能、文本渲染与编辑|
|@plait/text-plugins|文本扩展通用功能、UI 框架无关、依赖 Slate 富文本编辑器框架 |
|@plait/mind|思维导图插件，基于独立的自动布局算法，支持：逻辑布局、标准布局、缩进布局|
|@plait/draw|流程图插件，支持：基础图形、流程图图形、连线、自由图片等|
|@plait/flow|流程编排插件，支持：标准节点、连线、自定节点与连线|
|@plait/graph-viz|数据可视化插件，支持：知识图谱|
|@plait/layouts|思维导图布局算法|
|@plait/angular-text|文本渲染组件，依赖 Angular 框架、富文本编辑器框架 Slate、Angular 视图层|
|@plait/angular-board|白板视图层组件，依赖 Angular 框架|
|@plait/react-text|文本渲染组件，依赖 React 框架、富文本编辑器框架 Slate、React 视图层|
|@plait/react-board|白板视图层组件，依赖 React 框架|


React 视图层、文本渲染组件：[https://github.com/plait-board/drawnix](https://github.com/plait-board/drawnix)


#### 谁在使用

- 🔥🔥🔥 [PingCode Wiki](https://pingcode.com/solutions/knowledge-manage)
- 🔥 [Drawnix](https://github.com/plait-board/drawnix)


### 开发
Expand All @@ -91,7 +106,7 @@ HTML 模版：

```
<plait-board [plaitPlugins]="plugins" [plaitValue]="value"
(plaitBoardInitialized)="plaitBoardInitialized($event)" (plaitChange)="change($event)">
(plaitBoardInitialized)="plaitBoardInitialized($event)" (onChange)="change($event)">
</plait-board>
```

Expand All @@ -113,7 +128,7 @@ export class BasicBoardComponent {
board!: PlaitBoard;
change(event: PlaitBoardChangeEvent) {
change(event: OnChangeData) {
// console.log(event.children);
}
Expand Down

0 comments on commit ab29bdc

Please sign in to comment.