@knotx/plugins-base-render

基础渲染插件，提供节点和边的基本渲染功能。

安装

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 使用

基本使用

import { BaseRender } from '@knotx/plugins-base-render'

// 创建基础渲染插件实例
const baseRender = new BaseRender()

// 在引擎中注册插件
engine.use(baseRender)

注册节点类型

import { nodeType } from '@knotx/decorators'

class MyPlugin extends BasePlugin {
  @nodeType('custom-node')
  customNodeRenderer = (props) => {
    return <div>{props.node.data.label}</div>
  }
}

注册边类型

import { edgeType } from '@knotx/decorators'
import { BezierEdge } from '@knotx/render'

class MyPlugin extends BasePlugin {
  @edgeType('bezier')
  bezierEdgeRenderer = BezierEdge
}

注册节点层级获取器

// 为节点分层渲染注册层级获取器
const unregister = baseRender.registerNodeLevelGetter((node) => {
  return node.data.level || 0
})

// 取消注册
unregister()

强制重渲染

// 强制重渲染所有节点和边
baseRender.forceRerender({ node: true, edge: true })

// 只重渲染节点
baseRender.forceRerender({ node: true, edge: false })

自定义渲染属性

// 覆盖节点渲染属性
baseRender.overrideNodeRenderProps(props => ({
  ...props,
  customProp: 'custom value'
}))

// 覆盖边渲染属性
baseRender.overrideEdgeRenderProps(props => ({
  ...props,
  customProp: 'custom value'
}))

接口定义

BaseRenderNodeWrapperProps

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

interface BaseRenderEdgeWrapperProps {
  id: string
  renderVersion?: number
  useEdge: (id: string) => Edge | undefined
  useNode: (id: string) => Node | undefined
  getEdgeRenderer: (type?: string) => EdgeRender
}

插件数据接口

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