feat: supports lod tile size configuring

packages/g6/src/runtime/controller/item.ts

@@ -763,7 +763,11 @@ export class ItemController {
   }
 
   private onViewportChange = debounce(
-    ({ transform, effectTiming }: ViewportChangeHookParams) => {
+    ({
+      transform,
+      effectTiming,
+      tileLodSize = 1000,
+    }: ViewportChangeHookParams) => {
       const { zoom } = transform;
       if (zoom) {
         const zoomRatio = this.graph.getZoom();
@@ -780,10 +784,9 @@ export class ItemController {
           else itemsOutViewport.push(item);
         });
         const sortedItems = itemsInViewport.concat(itemsOutViewport);
-        const size = 1000;
-        const sections = Math.ceil(nodeItems.length / size);
+        const sections = Math.ceil(nodeItems.length / tileLodSize);
         const itemSections = Array.from({ length: sections }, (v, i) =>
-          sortedItems.slice(i * size, i * size + size),
+          sortedItems.slice(i * tileLodSize, i * tileLodSize + tileLodSize),
         );
         let requestId;
         const update = () => {

packages/g6/src/runtime/graph.ts

@@ -526,9 +526,11 @@ export default class Graph<B extends BehaviorRegistry, T extends ThemeRegistry>
     options: GraphTransformOptions,
     effectTiming?: CameraAnimationOptions,
   ): Promise<void> {
+    const { tileLodSize } = this.specification.optimize || {};
     await this.hooks.viewportchange.emitLinearAsync({
       transform: options,
       effectTiming,
+      tileLodSize,
     });
     this.emit('viewportchange', options);
   }

packages/g6/src/types/hook.ts

@@ -24,6 +24,7 @@ export interface IHook<T> {
 export type ViewportChangeHookParams = {
   transform: GraphTransformOptions;
   effectTiming?: Partial<CameraAnimationOptions>;
+  tileLodSize?: number;
 };
 
 export interface Hooks {

packages/g6/src/types/spec.ts

@@ -47,11 +47,18 @@ export interface Specification<
         headless: boolean;
       };
   zoom?: number;
+  /** Global optimize configuration. */
   optimize?: {
+    /** Whether enable tile rendering for first time. */
     tileFirstRender?: boolean | number;
+    /** Tile size for first rendering. */
     tileFirstRenderSize?: number;
+    /** Whether enable tile hiding / showing for behaivors, e.g. hiding shapes while drag-canvas, zoom-canvas. The enableOptimize in behavior configuration has higher priority. */
     tileBehavior?: boolean | number;
+    /** Tile size for shape optimizing by behaviors, e.g. hiding shapes while drag-canvas, zoom-canvas.  The enableOptimize in behavior configuration has higher priority. */
     tileBehaviorSize?: number;
+    /** Tile size for level of detial changing. */
+    tileLodSize?: number;
   };
   autoFit?:
     | 'view'