refactor(minimap-plugin): use throttle to improve the performance of minimap, api inactiveDebounceTime -> inactiveThrottleTime (#762)

* refactor(minimap-plugin): use throttle to improve the performance of minimap, api inactiveDebounceTime -> inactiveThrottleTime

* feat(minimap-plugin): remove enableActiveDebounce and enableInactiveDebounce

* fix(minimap-plugin): change MinimapRender service props as optional

* fix(minimap-plugin): render canvas from flowDocument.renderTree

apps/demo-fixed-layout-simple/src/components/minimap.tsx

@@ -3,38 +3,33 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/fixed-layout-editor';
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
-export const Minimap = () => {
-  const minimapService = useService(FlowMinimapService);
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: 16,
-        bottom: 51,
-        zIndex: 100,
-        width: 198,
+export const Minimap = () => (
+  <div
+    style={{
+      position: 'absolute',
+      left: 16,
+      bottom: 51,
+      zIndex: 100,
+      width: 198,
+    }}
+  >
+    <MinimapRender
+      containerStyles={{
+        pointerEvents: 'auto',
+        position: 'relative',
+        top: 'unset',
+        right: 'unset',
+        bottom: 'unset',
+        left: 'unset',
       }}
-    >
-      <MinimapRender
-        service={minimapService}
-        containerStyles={{
-          pointerEvents: 'auto',
-          position: 'relative',
-          top: 'unset',
-          right: 'unset',
-          bottom: 'unset',
-          left: 'unset',
-        }}
-        inactiveStyle={{
-          opacity: 1,
-          scale: 1,
-          translateX: 0,
-          translateY: 0,
-        }}
-      />
-    </div>
-  );
-};
+      inactiveStyle={{
+        opacity: 1,
+        scale: 1,
+        translateX: 0,
+        translateY: 0,
+      }}
+    />
+  </div>
+);

apps/demo-fixed-layout-simple/src/hooks/use-editor-props.tsx

@@ -182,7 +182,6 @@ export function useEditorProps(
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
       ],
     }),

apps/demo-fixed-layout/src/components/node-adder/styles.tsx

@@ -26,7 +26,4 @@ export const Wrap = styled.div`
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  svg: {
-    transform: scale(0.7);
-  }
 `;

apps/demo-fixed-layout/src/components/tools/minimap.tsx

@@ -3,20 +3,17 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/fixed-layout-editor';
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
 import { MinimapContainer } from './styles';
 
 export const Minimap = ({ visible }: { visible?: boolean }) => {
-  const minimapService = useService(FlowMinimapService);
   if (!visible) {
     return <></>;
   }
   return (
     <MinimapContainer>
       <MinimapRender
-        service={minimapService}
         panelStyles={{}}
         containerStyles={{
           pointerEvents: 'auto',

apps/demo-fixed-layout/src/hooks/use-editor-props.ts

@@ -265,7 +265,6 @@ export function useEditorProps(
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
         /**
          * Group plugin

apps/demo-free-layout-simple/src/components/minimap.tsx

@@ -3,38 +3,33 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/free-layout-editor';
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
-export const Minimap = () => {
-  const minimapService = useService(FlowMinimapService);
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: 226,
-        bottom: 51,
-        zIndex: 100,
-        width: 198,
+export const Minimap = () => (
+  <div
+    style={{
+      position: 'absolute',
+      left: 226,
+      bottom: 51,
+      zIndex: 100,
+      width: 198,
+    }}
+  >
+    <MinimapRender
+      containerStyles={{
+        pointerEvents: 'auto',
+        position: 'relative',
+        top: 'unset',
+        right: 'unset',
+        bottom: 'unset',
+        left: 'unset',
       }}
-    >
-      <MinimapRender
-        service={minimapService}
-        containerStyles={{
-          pointerEvents: 'auto',
-          position: 'relative',
-          top: 'unset',
-          right: 'unset',
-          bottom: 'unset',
-          left: 'unset',
-        }}
-        inactiveStyle={{
-          opacity: 1,
-          scale: 1,
-          translateX: 0,
-          translateY: 0,
-        }}
-      />
-    </div>
-  );
-};
+      inactiveStyle={{
+        opacity: 1,
+        scale: 1,
+        translateX: 0,
+        translateY: 0,
+      }}
+    />
+  </div>
+);

apps/demo-free-layout-simple/src/hooks/use-editor-props.tsx

@@ -173,7 +173,6 @@ export const useEditorProps = () =>
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
         /**
          * Snap plugin

apps/demo-free-layout/src/components/tools/minimap.tsx

@@ -3,20 +3,17 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/free-layout-editor';
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
 import { MinimapContainer } from './styles';
 
 export const Minimap = ({ visible }: { visible?: boolean }) => {
-  const minimapService = useService(FlowMinimapService);
   if (!visible) {
     return <></>;
   }
   return (
     <MinimapContainer>
       <MinimapRender
-        service={minimapService}
         panelStyles={{}}
         containerStyles={{
           pointerEvents: 'auto',

apps/demo-free-layout/src/hooks/use-editor-props.tsx

@@ -318,7 +318,6 @@ export function useEditorProps(
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0.55)',
           },
-          inactiveDebounceTime: 1,
         }),
 
         /**

apps/demo-nextjs-antd/src/editor/hooks/use-editor-props.tsx

@@ -154,7 +154,6 @@ export const useEditorProps = (initialData: WorkflowJSON, nodeRegistries: FlowNo
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
         /**
          * Snap plugin

apps/demo-nextjs/src/editor/hooks/use-editor-props.tsx

@@ -123,7 +123,6 @@ export const useEditorProps = () =>
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
         /**
          * Snap plugin

apps/demo-node-form/src/hooks/use-editor-props.tsx

@@ -151,7 +151,6 @@ export const useEditorProps = ({
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
         /**
          * Snap plugin

apps/demo-react-16/src/components/minimap.tsx

@@ -5,38 +5,33 @@
 
 import React from 'react';
 
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/free-layout-editor';
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
-export const Minimap = () => {
-  const minimapService = useService(FlowMinimapService);
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: 226,
-        bottom: 51,
-        zIndex: 100,
-        width: 198,
+export const Minimap = () => (
+  <div
+    style={{
+      position: 'absolute',
+      left: 226,
+      bottom: 51,
+      zIndex: 100,
+      width: 198,
+    }}
+  >
+    <MinimapRender
+      containerStyles={{
+        pointerEvents: 'auto',
+        position: 'relative',
+        top: 'unset',
+        right: 'unset',
+        bottom: 'unset',
+        left: 'unset',
       }}
-    >
-      <MinimapRender
-        service={minimapService}
-        containerStyles={{
-          pointerEvents: 'auto',
-          position: 'relative',
-          top: 'unset',
-          right: 'unset',
-          bottom: 'unset',
-          left: 'unset',
-        }}
-        inactiveStyle={{
-          opacity: 1,
-          scale: 1,
-          translateX: 0,
-          translateY: 0,
-        }}
-      />
-    </div>
-  );
-};
+      inactiveStyle={{
+        opacity: 1,
+        scale: 1,
+        translateX: 0,
+        translateY: 0,
+      }}
+    />
+  </div>
+);

apps/demo-react-16/src/hooks/use-editor-props.tsx

@@ -141,7 +141,6 @@ export const useEditorProps = () =>
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
         /**
          * Snap plugin

apps/demo-vite/src/components/minimap.tsx

@@ -3,38 +3,33 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/free-layout-editor';
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
-export const Minimap = () => {
-  const minimapService = useService(FlowMinimapService);
-  return (
-    <div
-      style={{
-        position: 'absolute',
-        left: 226,
-        bottom: 51,
-        zIndex: 100,
-        width: 198,
+export const Minimap = () => (
+  <div
+    style={{
+      position: 'absolute',
+      left: 226,
+      bottom: 51,
+      zIndex: 100,
+      width: 198,
+    }}
+  >
+    <MinimapRender
+      containerStyles={{
+        pointerEvents: 'auto',
+        position: 'relative',
+        top: 'unset',
+        right: 'unset',
+        bottom: 'unset',
+        left: 'unset',
       }}
-    >
-      <MinimapRender
-        service={minimapService}
-        containerStyles={{
-          pointerEvents: 'auto',
-          position: 'relative',
-          top: 'unset',
-          right: 'unset',
-          bottom: 'unset',
-          left: 'unset',
-        }}
-        inactiveStyle={{
-          opacity: 1,
-          scale: 1,
-          translateX: 0,
-          translateY: 0,
-        }}
-      />
-    </div>
-  );
-};
+      inactiveStyle={{
+        opacity: 1,
+        scale: 1,
+        translateX: 0,
+        translateY: 0,
+      }}
+    />
+  </div>
+);

apps/demo-vite/src/hooks/use-editor-props.tsx

@@ -151,7 +151,6 @@ export const useEditorProps = () =>
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
         /**
          * Snap plugin

apps/docs/src/en/examples/free-layout/free-layout-simple.mdx

@@ -267,7 +267,6 @@ export const useEditorProps = () =>
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
         // Auto-alignment plugin
         createFreeSnapPlugin({
@@ -356,11 +355,9 @@ export const Tools: React.FC = () => {
 };
 
 // src/components/minimap.tsx
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/free-layout-editor';
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
 export const Minimap = () => {
-  const minimapService = useService(FlowMinimapService);
   return (
     <div
       style={{
@@ -372,7 +369,6 @@ export const Minimap = () => {
       }}
     >
       <MinimapRender
-        service={minimapService}
         containerStyles={{
           pointerEvents: 'auto',
           position: 'relative',

apps/docs/src/en/guide/advanced/minimap.mdx

@@ -38,7 +38,6 @@ import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin'
         nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
         overlayColor: 'rgba(255, 255, 255, 0)',
       },
-      inactiveDebounceTime: 1,
     }),
   ]
 }
@@ -47,12 +46,9 @@ import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin'
 ## Minimap Component
 
 ```tsx pure
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/editor'; // or free-layout-editor
-
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
 export const Minimap = () => {
-  const minimapService = useService(FlowMinimapService);
   return (
     <div
       style={{
@@ -64,7 +60,6 @@ export const Minimap = () => {
       }}
     >
       <MinimapRender
-        service={minimapService}
         containerStyles={{
           pointerEvents: 'auto',
           position: 'relative',

apps/docs/src/zh/examples/free-layout/free-layout-simple.mdx

@@ -267,7 +267,6 @@ export const useEditorProps = () =>
             nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
             overlayColor: 'rgba(255, 255, 255, 0)',
           },
-          inactiveDebounceTime: 1,
         }),
         // 自动对齐插件
         createFreeSnapPlugin({
@@ -358,11 +357,9 @@ export const Tools: React.FC = () => {
 };
 
 // src/components/minimap.tsx
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/free-layout-editor';
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
 export const Minimap = () => {
-  const minimapService = useService(FlowMinimapService);
   return (
     <div
       style={{
@@ -374,7 +371,6 @@ export const Minimap = () => {
       }}
     >
       <MinimapRender
-        service={minimapService}
         containerStyles={{
           pointerEvents: 'auto',
           position: 'relative',

apps/docs/src/zh/guide/advanced/minimap.mdx

@@ -38,7 +38,6 @@ import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin'
         nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
         overlayColor: 'rgba(255, 255, 255, 0)',
       },
-      inactiveDebounceTime: 1,
     }),
   ]
 }
@@ -47,12 +46,10 @@ import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin'
 ## 缩略图组件
 
 ```tsx pure
-import { FlowMinimapService, MinimapRender } from '@flowgram.ai/minimap-plugin';
-import { useService } from '@flowgram.ai/editor'; // 或 free-layout-editor
+import { MinimapRender } from '@flowgram.ai/minimap-plugin';
 
 
 export const Minimap = () => {
-  const minimapService = useService(FlowMinimapService);
   return (
     <div
       style={{
@@ -64,7 +61,6 @@ export const Minimap = () => {
       }}
     >
       <MinimapRender
-        service={minimapService}
         containerStyles={{
           pointerEvents: 'auto',
           position: 'relative',

packages/plugins/minimap-plugin/src/component.tsx

@@ -5,28 +5,27 @@
 
 import React, { CSSProperties, useEffect, useRef, useState } from 'react';
 
+import { usePlaygroundContainer } from '@flowgram.ai/core';
+
 import { MinimapInactiveStyle } from './type';
 import { FlowMinimapService } from './service';
 import { MinimapDefaultInactiveStyle } from './constant';
 
 interface MinimapProps {
-  service: FlowMinimapService;
+  service?: FlowMinimapService;
   panelStyles?: CSSProperties;
   containerStyles?: CSSProperties;
   inactiveStyle?: Partial<MinimapInactiveStyle>;
 }
 
 export const MinimapRender: React.FC<MinimapProps> = (props) => {
-  const {
-    service,
-    panelStyles = {},
-    containerStyles = {},
-    inactiveStyle: customInactiveStyle = {},
-  } = props;
+  const { panelStyles = {}, containerStyles = {}, inactiveStyle: customInactiveStyle = {} } = props;
   const inactiveStyle = {
     ...MinimapDefaultInactiveStyle,
     ...customInactiveStyle,
   };
+  const playgroundContainer = usePlaygroundContainer();
+  const service = props.service || playgroundContainer?.get(FlowMinimapService);
   const panelRef = useRef<HTMLDivElement>(null);
   const [activated, setActivated] = useState<boolean>(false);
 
@@ -38,10 +37,13 @@ export const MinimapRender: React.FC<MinimapProps> = (props) => {
     const disposer = service.onActive((activate: boolean) => {
       setActivated(activate);
     });
+    service.setVisible(true);
+    service.render();
     return () => {
       disposer.dispose();
+      service.setVisible(false);
     };
-  }, []);
+  }, [service]);
 
   // 计算缩放比例和透明度
   const scale: number = activated ? 1 : inactiveStyle.scale;

packages/plugins/minimap-plugin/src/constant.ts

@@ -33,9 +33,7 @@ export const MinimapDefaultInactiveStyle: MinimapInactiveStyle = {
 export const MinimapDefaultOptions: MinimapServiceOptions = {
   canvasStyle: MinimapDefaultCanvasStyle,
   canvasClassName: 'gedit-minimap-canvas',
-  enableActiveDebounce: false,
-  enableInactiveDebounce: true,
   enableDisplayAllNodes: false,
-  activeDebounceTime: 0,
-  inactiveDebounceTime: 5,
+  activeThrottleTime: 0,
+  inactiveThrottleTime: 24,
 };

packages/plugins/minimap-plugin/src/layer.tsx

@@ -6,8 +6,18 @@
 import React from 'react';
 
 import { inject, injectable } from 'inversify';
-import { Layer } from '@flowgram.ai/core';
 import { domUtils } from '@flowgram.ai/utils';
+import {
+  FlowNodeEntity,
+  FlowNodeTransformData,
+  FlowDocumentTransformerEntity,
+} from '@flowgram.ai/document';
+import {
+  Layer,
+  observeEntityDatas,
+  observeEntity,
+  PlaygroundConfigEntity,
+} from '@flowgram.ai/core';
 
 import { MinimapLayerOptions } from './type';
 import { FlowMinimapService } from './service';
@@ -19,6 +29,14 @@ export class FlowMinimapLayer extends Layer<MinimapLayerOptions> {
 
   @inject(FlowMinimapService) private readonly service: FlowMinimapService;
 
+  @observeEntityDatas(FlowNodeEntity, FlowNodeTransformData)
+  transformDatas: FlowNodeTransformData[];
+
+  @observeEntity(PlaygroundConfigEntity) configEntity: PlaygroundConfigEntity;
+
+  @observeEntity(FlowDocumentTransformerEntity)
+  readonly documentTransformer: FlowDocumentTransformerEntity;
+
   public readonly node: HTMLElement;
 
   private readonly className = 'gedit-minimap-layer gedit-playground-layer';
@@ -30,6 +48,9 @@ export class FlowMinimapLayer extends Layer<MinimapLayerOptions> {
   }
 
   public render(): JSX.Element {
+    if (this.documentTransformer.loading) return <></>;
+    this.documentTransformer.refresh();
+    this.service.render();
     if (this.options.disableLayer) {
       return <></>;
     }

packages/plugins/minimap-plugin/src/service.ts

@@ -3,13 +3,13 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { debounce } from 'lodash-es';
+import { throttle } from 'lodash-es';
 import { inject, injectable } from 'inversify';
 import { Disposable, DisposableCollection, IPoint, Rectangle } from '@flowgram.ai/utils';
-import { FlowNodeEntity, FlowNodeTransformData } from '@flowgram.ai/document';
+import { FlowNodeTransformData } from '@flowgram.ai/document';
 import { FlowNodeBaseType } from '@flowgram.ai/document';
 import { FlowDocument } from '@flowgram.ai/document';
-import { EntityManager, MouseTouchEvent, PlaygroundConfigEntity } from '@flowgram.ai/core';
+import { MouseTouchEvent, PlaygroundConfigEntity } from '@flowgram.ai/core';
 
 import type { MinimapRenderContext, MinimapServiceOptions, MinimapCanvasStyle } from './type';
 import { MinimapDraw } from './draw';
@@ -19,8 +19,6 @@ import { MinimapDefaultCanvasStyle, MinimapDefaultOptions } from './constant';
 export class FlowMinimapService {
   @inject(FlowDocument) private readonly document: FlowDocument;
 
-  @inject(EntityManager) private readonly entityManager: EntityManager;
-
   @inject(PlaygroundConfigEntity)
   private readonly playgroundConfig: PlaygroundConfigEntity;
 
@@ -38,6 +36,8 @@ export class FlowMinimapService {
 
   private initialized;
 
+  private visible: boolean = false;
+
   private isDragging;
 
   private style: MinimapCanvasStyle;
@@ -58,12 +58,8 @@ export class FlowMinimapService {
   public init(options?: Partial<MinimapServiceOptions>) {
     this.options = MinimapDefaultOptions;
     Object.assign(this.options, options);
-    this.setDebounce({
-      enableDebounce: this.options.enableInactiveDebounce,
-      debounceTime: this.options.inactiveDebounceTime,
-    });
+    this.setThrottle(this.options.inactiveThrottleTime);
     this.initStyle();
-    this.mountListener();
   }
 
   public dispose(): void {
@@ -73,6 +69,10 @@ export class FlowMinimapService {
     this.removeEventListeners();
   }
 
+  setVisible(visible: boolean) {
+    this.visible = visible;
+  }
+
   public setActivate(activate: boolean): void {
     if (activate === this.activated) {
       return;
@@ -83,16 +83,10 @@ export class FlowMinimapService {
     }
     this.activated = activate;
     if (activate) {
-      this.setDebounce({
-        enableDebounce: this.options.enableActiveDebounce,
-        debounceTime: this.options.activeDebounceTime,
-      });
+      this.setThrottle(this.options.activeThrottleTime);
       this.addEventListeners();
     } else {
-      this.setDebounce({
-        enableDebounce: this.options.enableInactiveDebounce,
-        debounceTime: this.options.inactiveDebounceTime,
-      });
+      this.setThrottle(this.options.inactiveThrottleTime);
       this.removeEventListeners();
     }
     this.render();
@@ -125,22 +119,17 @@ export class FlowMinimapService {
       : 'unset';
   }
 
-  private setDebounce(params: { enableDebounce: boolean; debounceTime: number }) {
-    const { enableDebounce, debounceTime } = params;
-    if (enableDebounce) {
-      this.render = debounce(this._render, debounceTime);
-    } else {
-      this.render = this._render;
-    }
+  private setThrottle(throttleTime: number) {
+    this.render = throttle(this._render, throttleTime);
   }
 
   /**
    * 触发渲染
    */
-  private render: () => void = this._render;
+  public render: () => void = this._render;
 
   private _render(): void {
-    if (!this.initialized) {
+    if (!this.initialized || !this.visible) {
       return;
     }
     const renderContext = this.createRenderContext();
@@ -148,8 +137,8 @@ export class FlowMinimapService {
   }
 
   private createRenderContext(): MinimapRenderContext {
-    const { canvas, context2D, nodes } = this;
-    const nodeTransforms: FlowNodeTransformData[] = this.nodeTransforms(nodes);
+    const { canvas, context2D } = this;
+    const nodeTransforms: FlowNodeTransformData[] = this.transformVisibles;
     const nodeRects: Rectangle[] = nodeTransforms.map((transform) => transform.bounds);
     const viewRect: Rectangle = this.viewRect();
     const renderRect: Rectangle = this.renderRect(nodeRects).withPadding({
@@ -258,8 +247,13 @@ export class FlowMinimapService {
     return { scale, offset };
   }
 
-  private get nodes(): FlowNodeEntity[] {
-    return this.document.getAllNodes().filter((node) => {
+  private get transformVisibles(): FlowNodeTransformData[] {
+    const transformVisible = this.document.getRenderDatas<FlowNodeTransformData>(
+      FlowNodeTransformData,
+      false
+    );
+    return transformVisible.filter((transform) => {
+      const node = transform.entity;
       // 去除不可见节点
       if (node.hidden) return false;
       // 去除根节点
@@ -275,10 +269,6 @@ export class FlowMinimapService {
     });
   }
 
-  private nodeTransforms(nodes: FlowNodeEntity[]): FlowNodeTransformData[] {
-    return nodes.map((node) => node.getData(FlowNodeTransformData)).filter(Boolean);
-  }
-
   private renderRect(rects: Rectangle[]): Rectangle {
     return Rectangle.enlarge(rects);
   }
@@ -288,11 +278,6 @@ export class FlowMinimapService {
     return new Rectangle(scrollX / zoom, scrollY / zoom, width / zoom, height / zoom);
   }
 
-  private mountListener(): void {
-    const entityManagerDisposer = this.entityManager.onEntityChange(() => this.render());
-    this.toDispose.push(entityManagerDisposer);
-  }
-
   /** 计算画布坐标系下的矩形 */
   private rectOnCanvas(params: { rect: Rectangle; scale: number; offset: IPoint }): Rectangle {
     const { rect, scale, offset } = params;

packages/plugins/minimap-plugin/src/type.ts

@@ -35,11 +35,9 @@ export interface MinimapInactiveStyle {
 export interface MinimapServiceOptions {
   canvasStyle: Partial<MinimapCanvasStyle>;
   canvasClassName: string;
-  enableInactiveDebounce: boolean;
-  enableActiveDebounce: boolean;
   enableDisplayAllNodes: boolean;
-  activeDebounceTime: number;
-  inactiveDebounceTime: number;
+  activeThrottleTime: number;
+  inactiveThrottleTime: number;
 }
 
 export interface MinimapLayerOptions {