feat: upgrade angular 21 (#1139)

.changeset/easy-bikes-win.md

@@ -0,0 +1,5 @@
+---
+'@plait/angular-board': minor
+---
+
+rename output events from onChange to change and plaitBoardInitialized to initialized

.changeset/proud-trees-pick.md

@@ -0,0 +1,6 @@
+---
+'@plait/angular-board': minor
+'@plait/angular-text': minor
+---
+
+bump angular into 21

README.md

@@ -19,75 +19,67 @@
   </h3>
 </div>
 
-
 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)
 
 Plait will also provide some basic functional plugins, which have been implemented so far:
 
-- Mind plugin
+-   Mind plugin
 
-- Draw plugin
+-   Draw plugin
 
-- GraphViz plugin
-
-- Flow plugin
+-   GraphViz plugin
 
+-   Flow plugin
 
 ![online demo screen](https://github.com/worktile/plait/blob/develop/.docgeni/public/assets/mind-draw-flow.gif?raw=true)
 
-
-- 👉 [Online example (Draw)](https://https://plait.pages.dev?init=draw)
-- 👉 [Online example (Mind)](https://https://plait.pages.dev?init=mind)
-- 👉 [Online example (GraphViz)](https://https://plait.pages.dev/graph-viz?init=force-atlas)
-- 👉 [Online example (Flow)](https://https://plait.pages.dev/flow)
-- 👉 [Documentation](https://plait-docs.pages.dev)
+-   👉 [Online example (Draw)](https://https://plait.pages.dev?init=draw)
+-   👉 [Online example (Mind)](https://https://plait.pages.dev?init=mind)
+-   👉 [Online example (GraphViz)](https://https://plait.pages.dev/graph-viz?init=force-atlas)
+-   👉 [Online example (Flow)](https://https://plait.pages.dev/flow)
+-   👉 [Documentation](https://plait-docs.pages.dev)
 
 #### Features
 
-- Independent of UI frameworks
-- Provides basic board capabilities, such as zooming in, zooming out, and moving
-- Plugin mechanism
-- Data model (supports collaboration)
-- Basic drawing utility functions
-
+-   Independent of UI frameworks
+-   Provides basic board capabilities, such as zooming in, zooming out, and moving
+-   Plugin mechanism
+-   Data model (supports collaboration)
+-   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| 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 |
-
+| Package Name         | Description                                                                                                                   |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| @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)
+-   🔥🔥🔥 [PingCode Wiki](https://pingcode.com/solutions/knowledge-manage)
+-   🔥🔥🔥 [Drawnix](https://github.com/plait-board/drawnix)
 
 ### Development
 
@@ -99,7 +91,6 @@ npm run build
 npm run start
 ```
 
-
 ### Usage
 
 Basic usage (integrated @plait/mind plugin)
@@ -108,7 +99,7 @@ HTML：
 
 ```
 <plait-board [plaitPlugins]="plugins" [plaitValue]="value"
-    (plaitBoardInitialized)="plaitBoardInitialized($event)" (onChange)="change($event)">
+    (initialized)="initialized($event)" (change)="change($event)">
 </plait-board>
 ```
 
@@ -134,34 +125,26 @@ export class BasicBoardComponent {
     // console.log(event.children);
   }
 
-  plaitBoardInitialized(value: PlaitBoard) {
+  initialized(value: PlaitBoard) {
     this.board = value;
   }
 }
 ```
 
-For more detailed examples refer to：  [https://github.com/pubuzhixing8/plait-basic](https://github.com/pubuzhixing8/plait-basic)  
-
-
+For more detailed examples refer to： [https://github.com/pubuzhixing8/plait-basic](https://github.com/pubuzhixing8/plait-basic)
 
 ### Thanks
 
-- [slate](https://github.com/ianstormtaylor/slate)
-
-- [slate-angular](https://github.com/worktile/slate-angular)
-
-- [rough](https://github.com/rough-stuff/rough)
+-   [slate](https://github.com/ianstormtaylor/slate)
 
+-   [slate-angular](https://github.com/worktile/slate-angular)
 
+-   [rough](https://github.com/rough-stuff/rough)
 
 ### Contributing
 
 Everyone is welcome to contribute to Plait and build a new generation of drawing framework together. Any Issue or PR is acceptable, and we hope to get your ⭐️ support.
 
-
-
 ### LICENSE
 
-  [MIT License](https://github.com/worktile/slate-angular/blob/master/LICENSE)  
-
-
+[MIT License](https://github.com/worktile/slate-angular/blob/master/LICENSE)

README.zh-CN.md

@@ -19,72 +19,65 @@
   </h3>
 </div>
 
-
 Plait 是一款现代化的画图框架，提供插件机制，允许开发者通过插件的方式扩展画图功能，特别适用于交互式白板工具的开发。
 
 Plait 底层不依赖任何前端 UI 框架，但是它为集成到主流的前端 UI 框架提供了解决方案，以保证上层开发者的开发体验、复用主流的框架组件。
 
 当前已支持功能插件：
 
-- 思维导图插件
+-   思维导图插件
 
-- 流程图插件
+-   流程图插件
 
-- 图形可视化插件
+-   图形可视化插件
 
-- 流程编排插件
+-   流程编排插件
 
 ![online demo screen](https://github.com/worktile/plait/blob/develop/.docgeni/public/assets/mind-draw-flow.gif?raw=true)
 
-
-- 👉 [在线示例 (流程图)](https://https://plait.pages.dev?init=draw)
-- 👉 [在线示例 (思维导图)](https://https://plait.pages.dev?init=mind)
-- 👉 [在线示例 (图形可视化)](https://https://plait.pages.dev/graph-viz?init=force-atlas)
-- 👉 [在线示例 (流程控制)](https://https://plait.pages.dev/flow)
-- 👉 [在线文档](https://plait-docs.pages.dev)
+-   👉 [在线示例 (流程图)](https://https://plait.pages.dev?init=draw)
+-   👉 [在线示例 (思维导图)](https://https://plait.pages.dev?init=mind)
+-   👉 [在线示例 (图形可视化)](https://https://plait.pages.dev/graph-viz?init=force-atlas)
+-   👉 [在线示例 (流程控制)](https://https://plait.pages.dev/flow)
+-   👉 [在线文档](https://plait-docs.pages.dev)
 
 #### 框架特性
 
-- 不依赖 UI 框架
-- 提供基础画板能力，比如放大、缩小、移动
-- 插件机制，提供插件机制用于扩展画图功能
-- 数据模型，提供基础数据模型及数据变换函数（支持协同）
-- 基础画图工具函数
-
+-   不依赖 UI 框架
+-   提供基础画板能力，比如放大、缩小、移动
+-   插件机制，提供插件机制用于扩展画图功能
+-   数据模型，提供基础数据模型及数据变换函数（支持协同）
+-   基础画图工具函数
 
 #### UI 框架集成
 
 框架落地需要以前端 UI 框架组件作为载体，这样可以保证画图图功能开发沿用主流开发模式进行（数据驱动），当前已支持 Angular 和 React 框架的集成。
 
 Plait 中的文本渲染基于 Slate 框架，实现画板中富文本的渲染和编辑，Slate 是一款优秀的富文本编辑器框架，Plait 在设计上就是一 Slate 框架为灵感。
 
-
 #### 模块
 
-|包名|说明
-|---|---|
-|@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 框架|
-
+| 包名                 | 说明                                                                       |
+| -------------------- | -------------------------------------------------------------------------- |
+| @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)
-
+-   🔥🔥🔥 [PingCode Wiki](https://pingcode.com/solutions/knowledge-manage)
+-   🔥🔥🔥 [Drawnix](https://github.com/plait-board/drawnix)
 
 ### 开发
 
@@ -96,8 +89,6 @@ npm run build
 npm run start
 ```
 
-
-
 ### 使用
 
 基本使用（集成 @plait/mind 插件）
@@ -106,7 +97,7 @@ HTML 模版：
 
 ```
 <plait-board [plaitPlugins]="plugins" [plaitValue]="value"
-    (plaitBoardInitialized)="plaitBoardInitialized($event)" (onChange)="change($event)">
+    (initialized)="initialized($event)" (change)="change($event)">
 </plait-board>
 ```
 
@@ -132,35 +123,26 @@ export class BasicBoardComponent {
     // console.log(event.children);
   }
 
-  plaitBoardInitialized(value: PlaitBoard) {
+  initialized(value: PlaitBoard) {
     this.board = value;
   }
 }
 ```
 
-更详细的示例说明参考：  [https://github.com/pubuzhixing8/plait-basic](https://github.com/pubuzhixing8/plait-basic)  
-
-
+更详细的示例说明参考： [https://github.com/pubuzhixing8/plait-basic](https://github.com/pubuzhixing8/plait-basic)
 
 ### 感谢
 
-- [slate](https://github.com/ianstormtaylor/slate)
-
-- [slate-angular](https://github.com/worktile/slate-angular)
-
-- [rough](https://github.com/rough-stuff/rough)
+-   [slate](https://github.com/ianstormtaylor/slate)
 
+-   [slate-angular](https://github.com/worktile/slate-angular)
 
+-   [rough](https://github.com/rough-stuff/rough)
 
 ### 贡献
 
 欢迎大家贡献 Plait ，一起构建新一代的画图框架，任何的 Issue、PR 都是可以，也希望得到大家的 ⭐️ 支持。
 
-
-
 ### 开源协议
 
-  [MIT License](https://github.com/worktile/slate-angular/blob/master/LICENSE)  
-
-
-
+[MIT License](https://github.com/worktile/slate-angular/blob/master/LICENSE)

docs/guides/api/baord.md

@@ -37,8 +37,8 @@
 
 #### 输出参数
 
-plaitChange
+change
 
 
 
-plaitBoardInitialized
+initialized

docs/guides/getting-started.md

@@ -9,7 +9,7 @@ HTML 模版：
 
 ```
 <plait-board [plaitPlugins]="plugins" [plaitValue]="value"
-    (plaitBoardInitialized)="plaitBoardInitialized($event)" (plaitChange)="change($event)">
+    (initialized)="initialized($event)" (change)="change($event)">
 </plait-board>
 ```
 
@@ -35,7 +35,7 @@ export class BasicBoardComponent {
     // console.log(event.children);
   }
 
-  plaitBoardInitialized(value: PlaitBoard) {
+  initialized(value: PlaitBoard) {
     this.board = value;
   }
 }

docs/guides/intro.md

@@ -50,7 +50,7 @@ HTML 模版：
 
 ```
 <plait-board [plaitPlugins]="plugins" [plaitValue]="value"
-    (plaitBoardInitialized)="plaitBoardInitialized($event)" (plaitChange)="change($event)">
+    (initialized)="initialized($event)" (change)="change($event)">
 </plait-board>
 ```
 
@@ -76,7 +76,7 @@ export class BasicBoardComponent {
     // console.log(event.children);
   }
 
-  plaitBoardInitialized(value: PlaitBoard) {
+  initialized(value: PlaitBoard) {
     this.board = value;
   }
 }