@knotx/plugins-base-render 0.4.12 → 0.4.14

package/README.en.md

@@ -0,0 +1,171 @@
+# @knotx/plugins-base-render
+
+Base rendering plugin that provides basic rendering capabilities for nodes and edges.
+
+## Installation
+
+```bash
+npm install @knotx/plugins-base-render
+```
+
+## Overview
+
+`@knotx/plugins-base-render` is the fundamental rendering plugin for the KnotX framework, responsible for providing basic rendering capabilities for nodes and edges. It serves as the foundation for other rendering-related plugins and provides core rendering capabilities for graph visualization.
+
+## Implementation Principles
+
+The plugin implements a node and edge rendering system through the decorator pattern:
+
+1. **Node Rendering**: Registers node types via `@nodeType` decorator and provides default node renderers
+2. **Edge Rendering**: Registers edge types via `@edgeType` decorator and provides default edge renderers
+3. **Layered Rendering**: Implements layered rendering through `@layer` decorator to optimize rendering performance
+4. **Reactive Updates**: Uses RxJS for reactive data updates and re-rendering
+
+## Dependencies
+
+This plugin depends on the following packages:
+
+- `@knotx/core` - Core functionality
+- `@knotx/decorators` - Decorator support
+- `@knotx/render` - Rendering utilities
+- `@knotx/jsx` - JSX support (peer dependency)
+- `rxjs` - Reactive programming
+
+## API Usage
+
+### Basic Usage
+
+```typescript
+import { BaseRender } from '@knotx/plugins-base-render'
+
+// Create base render plugin instance
+const baseRender = new BaseRender()
+
+// Register plugin in engine
+engine.use(baseRender)
+```
+
+### Register Node Types
+
+```tsx
+import { nodeType } from '@knotx/decorators'
+
+class MyPlugin extends BasePlugin {
+  @nodeType('custom-node')
+  customNodeRenderer = (props) => {
+    return <div>{props.node.data.label}</div>
+  }
+}
+```
+
+### Register Edge Types
+
+```typescript
+import { edgeType } from '@knotx/decorators'
+import { BezierEdge } from '@knotx/render'
+
+class MyPlugin extends BasePlugin {
+  @edgeType('bezier')
+  bezierEdgeRenderer = BezierEdge
+}
+```
+
+### Register Node Level Getter
+
+```typescript
+// Register level getter for node layered rendering
+const unregister = baseRender.registerNodeLevelGetter((node) => {
+  return node.data.level || 0
+})
+
+// Unregister
+unregister()
+```
+
+### Force Re-render
+
+```typescript
+// Force re-render all nodes and edges
+baseRender.forceRerender({ node: true, edge: true })
+
+// Only re-render nodes
+baseRender.forceRerender({ node: true, edge: false })
+```
+
+### Custom Render Properties
+
+```typescript
+// Override node render properties
+baseRender.overrideNodeRenderProps(props => ({
+  ...props,
+  customProp: 'custom value'
+}))
+
+// Override edge render properties
+baseRender.overrideEdgeRenderProps(props => ({
+  ...props,
+  customProp: 'custom value'
+}))
+```
+
+## Interface Definitions
+
+### BaseRenderNodeWrapperProps
+
+```typescript
+interface BaseRenderNodeWrapperProps {
+  id: string
+  renderVersion?: number
+  useNode: (id: string) => Node | undefined
+  getNodeRenderer: (type?: string) => NodeRenderType
+  getNodePosition: (node: Node) => NodePosition
+  getNodeMeasured: (node: Node) => NodeMeasured | undefined
+  getNodeLevel: (node: Node) => number | undefined
+}
+```
+
+### BaseRenderEdgeWrapperProps
+
+```typescript
+interface BaseRenderEdgeWrapperProps {
+  id: string
+  renderVersion?: number
+  useEdge: (id: string) => Edge | undefined
+  useNode: (id: string) => Node | undefined
+  getEdgeRenderer: (type?: string) => EdgeRender
+}
+```
+
+### Plugin Data Interface
+
+```typescript
+declare module '@knotx/core' {
+  interface PluginData {
+    baseRender: {
+      registerNodeLevelGetter: (getter: (node: Node) => number | undefined) => (() => void)
+      overrideNodeRenderProps: (fn: (props: BaseRenderNodesWrapperProps) => Partial<BaseRenderNodesWrapperProps>) => void
+      overrideEdgeRenderProps: (fn: (props: BaseRenderEdgesWrapperProps) => Partial<BaseRenderEdgesWrapperProps>) => void
+      forceRerender: (params: { node?: boolean, edge?: boolean }) => void
+    }
+  }
+}
+```
+
+## File Directory Structure
+
+```
+packages/plugins-base-render/
+├── src/
+│   ├── base-render.tsx       # Base render plugin main file
+│   └── index.ts             # Export file
+├── dist/                    # Build output directory
+├── CHANGELOG.md            # Change log
+├── package.json            # Package configuration
+├── build.config.ts         # Build configuration
+├── eslint.config.mjs       # ESLint configuration
+└── tsconfig.json           # TypeScript configuration
+```
+
+## License
+
+MIT

package/README.md

@@ -0,0 +1,171 @@
+# @knotx/plugins-base-render
+
+基础渲染插件，提供节点和边的基本渲染功能。
+
+## 安装
+
+```bash
+npm install @knotx/plugins-base-render
+```
+
+## 基本概述
+
+`@knotx/plugins-base-render` 是 KnotX 框架的基础渲染插件，负责提供节点和边的基本渲染功能。它是其他渲染相关插件的基础，为图形可视化提供核心的渲染能力。
+
+## 实现原理
+
+该插件通过装饰器模式实现了节点和边的渲染系统：
+
+1. **节点渲染**：通过 `@nodeType` 装饰器注册节点类型，并提供默认的节点渲染器
+2. **边渲染**：通过 `@edgeType` 装饰器注册边类型，并提供默认的边渲染器
+3. **分层渲染**：通过 `@layer` 装饰器实现分层渲染，优化渲染性能
+4. **响应式更新**：使用 RxJS 实现响应式的数据更新和重渲染
+
+## 依赖插件
+
+该插件依赖以下包：
+
+- `@knotx/core` - 核心功能
+- `@knotx/decorators` - 装饰器支持
+- `@knotx/render` - 渲染工具
+- `@knotx/jsx` - JSX 支持（peer dependency）
+- `rxjs` - 响应式编程
+
+## API 使用
+
+### 基本使用
+
+```typescript
+import { BaseRender } from '@knotx/plugins-base-render'
+
+// 创建基础渲染插件实例
+const baseRender = new BaseRender()
+
+// 在引擎中注册插件
+engine.use(baseRender)
+```
+
+### 注册节点类型
+
+```tsx
+import { nodeType } from '@knotx/decorators'
+
+class MyPlugin extends BasePlugin {
+  @nodeType('custom-node')
+  customNodeRenderer = (props) => {
+    return <div>{props.node.data.label}</div>
+  }
+}
+```
+
+### 注册边类型
+
+```typescript
+import { edgeType } from '@knotx/decorators'
+import { BezierEdge } from '@knotx/render'
+
+class MyPlugin extends BasePlugin {
+  @edgeType('bezier')
+  bezierEdgeRenderer = BezierEdge
+}
+```
+
+### 注册节点层级获取器
+
+```typescript
+// 为节点分层渲染注册层级获取器
+const unregister = baseRender.registerNodeLevelGetter((node) => {
+  return node.data.level || 0
+})
+
+// 取消注册
+unregister()
+```
+
+### 强制重渲染
+
+```typescript
+// 强制重渲染所有节点和边
+baseRender.forceRerender({ node: true, edge: true })
+
+// 只重渲染节点
+baseRender.forceRerender({ node: true, edge: false })
+```
+
+### 自定义渲染属性
+
+```typescript
+// 覆盖节点渲染属性
+baseRender.overrideNodeRenderProps(props => ({
+  ...props,
+  customProp: 'custom value'
+}))
+
+// 覆盖边渲染属性
+baseRender.overrideEdgeRenderProps(props => ({
+  ...props,
+  customProp: 'custom value'
+}))
+```
+
+## 接口定义
+
+### BaseRenderNodeWrapperProps
+
+```typescript
+interface BaseRenderNodeWrapperProps {
+  id: string
+  renderVersion?: number
+  useNode: (id: string) => Node | undefined
+  getNodeRenderer: (type?: string) => NodeRenderType
+  getNodePosition: (node: Node) => NodePosition
+  getNodeMeasured: (node: Node) => NodeMeasured | undefined
+  getNodeLevel: (node: Node) => number | undefined
+}
+```
+
+### BaseRenderEdgeWrapperProps
+
+```typescript
+interface BaseRenderEdgeWrapperProps {
+  id: string
+  renderVersion?: number
+  useEdge: (id: string) => Edge | undefined
+  useNode: (id: string) => Node | undefined
+  getEdgeRenderer: (type?: string) => EdgeRender
+}
+```
+
+### 插件数据接口
+
+```typescript
+declare module '@knotx/core' {
+  interface PluginData {
+    baseRender: {
+      registerNodeLevelGetter: (getter: (node: Node) => number | undefined) => (() => void)
+      overrideNodeRenderProps: (fn: (props: BaseRenderNodesWrapperProps) => Partial<BaseRenderNodesWrapperProps>) => void
+      overrideEdgeRenderProps: (fn: (props: BaseRenderEdgesWrapperProps) => Partial<BaseRenderEdgesWrapperProps>) => void
+      forceRerender: (params: { node?: boolean, edge?: boolean }) => void
+    }
+  }
+}
+```
+
+## 文件目录结构
+
+```
+packages/plugins-base-render/
+├── src/
+│   ├── base-render.tsx       # 基础渲染插件主文件
+│   └── index.ts             # 导出文件
+├── dist/                    # 编译输出目录
+├── CHANGELOG.md            # 变更日志
+├── package.json            # 包配置
+├── build.config.ts         # 构建配置
+├── eslint.config.mjs       # ESLint 配置
+└── tsconfig.json           # TypeScript 配置
+```
+
+## 许可证
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knotx/plugins-base-render",
-  "version": "0.4.12",
+  "version": "0.4.14",
   "description": "Base Render Plugin for Knotx",
   "author": "boenfu",
   "license": "MIT",
@@ -28,19 +28,19 @@
     "dist"
   ],
   "peerDependencies": {
-    "@knotx/jsx": "0.4.12"
+    "@knotx/jsx": "0.4.14"
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "@knotx/core": "0.4.12",
-    "@knotx/decorators": "0.4.12",
-    "@knotx/render": "0.4.12"
+    "@knotx/core": "0.4.14",
+    "@knotx/decorators": "0.4.14",
+    "@knotx/render": "0.4.14"
   },
   "devDependencies": {
-    "@knotx/build-config": "0.4.12",
-    "@knotx/eslint-config": "0.4.12",
-    "@knotx/jsx": "0.4.12",
-    "@knotx/typescript-config": "0.4.12"
+    "@knotx/build-config": "0.4.14",
+    "@knotx/eslint-config": "0.4.14",
+    "@knotx/jsx": "0.4.14",
+    "@knotx/typescript-config": "0.4.14"
   },
   "scripts": {
     "build": "unbuild",