@knotx/plugins-viewport-render

English version: README.en.md

基于 flatbush 实现的 Knotx 视口渲染插件。在节点数量较多的场景下，能够显著提升渲染性能。

特性

• 基于 flatbush 实现的高性能空间索引
• 支持视口内节点和边的智能缓存
• 可配置的搜索范围和缓存容量
• 支持首屏优化
• 支持动态更新节点和边
• 支持强制显示指定节点和边

安装

npm install @knotx/plugins-viewport-render
# 或者
yarn add @knotx/plugins-viewport-render
# 或者
pnpm add @knotx/plugins-viewport-render

使用方法

import { ViewportRender } from '@knotx/plugins-viewport-render'
import { Knotx } from '@knotx/react'

function App() {
  return (
    <Knotx
      nodes={nodes}
      edges={edges}
      plugins={[ViewportRender]}
      pluginConfig={{
        viewportRender: {
          enable: true,
          searchScale: 1.4,
          nodeCacheCapacity: 200,
          edgeCacheCapacity: 400
        }
      }}
    />
  )
}

配置选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | enable | boolean | true | 是否启用视口渲染 | | searchScale | number | 1 | 搜索范围缩放比例，值越大搜索范围越大 | | nodeCacheCapacity | number | 200 | 视口内节点缓存容量 | | edgeCacheCapacity | number | nodeCacheCapacity * 2 | 视口内边缓存容量 |

高级用法

强制显示指定节点和边

可以通过插件提供的 API 强制显示指定的节点和边，即使它们不在当前视口内：

@inject.viewportRender.setForceActiveNodes()
setForceActiveNodes!: PluginData['viewportRender']['setForceActiveNodes']

性能优化

• 使用 flatbush 进行空间索引，提供高效的视口查询
• 实现 LRU 缓存策略，智能管理视口内元素
• 首屏渲染优化，确保首次加载性能
• 支持动态调整搜索范围，平衡性能和用户体验
• 使用 requestIdleCallback 进行边的延迟渲染，提高交互流畅度

依赖

• @knotx/core
• @knotx/decorators
• @knotx/plugins-canvas
• flatbush

许可证

MIT