npm package: @knotx/plugins-base-render
Description: Base Render Plugin for Knotx
Author: boenfu
Latest version: 0.5.10

# @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