@knotx/plugins-viewport-render v0.4.2

@knotx/plugins-viewport-render

基于 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
        }
      }}
    />
  )
}

配置选项

高级用法

强制显示指定节点和边

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

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

性能优化

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

依赖

• @knotx/core: ^0.3.4
• @knotx/decorators: ^0.3.4
• @knotx/plugins-canvas: ^0.3.4
• @knotx/react: ^0.3.4
• react: >=17
• flatbush: ^4.3.0

许可证

MIT