@flowgram.ai/minimap-plugin 0.4.6 → 0.4.8

package/dist/index.d.mts

@@ -1,7 +1,8 @@
 import React, { CSSProperties } from 'react';
 import { Rectangle, IPoint, Disposable } from '@flowgram.ai/utils';
 import * as _flowgram_ai_core from '@flowgram.ai/core';
-import { Layer } from '@flowgram.ai/core';
+import { Layer, PlaygroundConfigEntity } from '@flowgram.ai/core';
+import { FlowNodeTransformData, FlowDocumentTransformerEntity } from '@flowgram.ai/document';
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -34,11 +35,9 @@ interface MinimapInactiveStyle {
 interface MinimapServiceOptions {
     canvasStyle: Partial<MinimapCanvasStyle>;
     canvasClassName: string;
-    enableInactiveDebounce: boolean;
-    enableActiveDebounce: boolean;
     enableDisplayAllNodes: boolean;
-    activeDebounceTime: number;
-    inactiveDebounceTime: number;
+    activeThrottleTime: number;
+    inactiveThrottleTime: number;
 }
 interface MinimapLayerOptions {
     disableLayer?: boolean;
@@ -66,7 +65,6 @@ interface MinimapRenderContext {
 
 declare class FlowMinimapService {
     private readonly document;
-    private readonly entityManager;
     private readonly playgroundConfig;
     readonly canvas: HTMLCanvasElement;
     readonly context2D: CanvasRenderingContext2D;
@@ -75,29 +73,29 @@ declare class FlowMinimapService {
     private options;
     private toDispose;
     private initialized;
+    private visible;
     private isDragging;
     private style;
     private dragStart?;
     constructor();
     init(options?: Partial<MinimapServiceOptions>): void;
     dispose(): void;
+    setVisible(visible: boolean): void;
     setActivate(activate: boolean): void;
     onActive: (callback: (activated: boolean) => void) => Disposable;
     private initStyle;
-    private setDebounce;
+    private setThrottle;
     /**
      * 触发渲染
      */
-    private render;
+    render: () => void;
     private _render;
     private createRenderContext;
     private renderCanvas;
     private calculateScaleAndOffset;
-    private get nodes();
-    private nodeTransforms;
+    private get transformVisibles();
     private renderRect;
     private viewRect;
-    private mountListener;
     /** 计算画布坐标系下的矩形 */
     private rectOnCanvas;
     private isPointInRect;
@@ -118,7 +116,7 @@ declare class FlowMinimapService {
  */
 
 interface MinimapProps {
-    service: FlowMinimapService;
+    service?: FlowMinimapService;
     panelStyles?: CSSProperties;
     containerStyles?: CSSProperties;
     inactiveStyle?: Partial<MinimapInactiveStyle>;
@@ -144,6 +142,9 @@ declare const createMinimapPlugin: _flowgram_ai_core.PluginCreator<CreateMinimap
 declare class FlowMinimapLayer extends Layer<MinimapLayerOptions> {
     static type: string;
     private readonly service;
+    transformDatas: FlowNodeTransformData[];
+    configEntity: PlaygroundConfigEntity;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
     readonly node: HTMLElement;
     private readonly className;
     constructor();

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import React, { CSSProperties } from 'react';
 import { Rectangle, IPoint, Disposable } from '@flowgram.ai/utils';
 import * as _flowgram_ai_core from '@flowgram.ai/core';
-import { Layer } from '@flowgram.ai/core';
+import { Layer, PlaygroundConfigEntity } from '@flowgram.ai/core';
+import { FlowNodeTransformData, FlowDocumentTransformerEntity } from '@flowgram.ai/document';
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
@@ -34,11 +35,9 @@ interface MinimapInactiveStyle {
 interface MinimapServiceOptions {
     canvasStyle: Partial<MinimapCanvasStyle>;
     canvasClassName: string;
-    enableInactiveDebounce: boolean;
-    enableActiveDebounce: boolean;
     enableDisplayAllNodes: boolean;
-    activeDebounceTime: number;
-    inactiveDebounceTime: number;
+    activeThrottleTime: number;
+    inactiveThrottleTime: number;
 }
 interface MinimapLayerOptions {
     disableLayer?: boolean;
@@ -66,7 +65,6 @@ interface MinimapRenderContext {
 
 declare class FlowMinimapService {
     private readonly document;
-    private readonly entityManager;
     private readonly playgroundConfig;
     readonly canvas: HTMLCanvasElement;
     readonly context2D: CanvasRenderingContext2D;
@@ -75,29 +73,29 @@ declare class FlowMinimapService {
     private options;
     private toDispose;
     private initialized;
+    private visible;
     private isDragging;
     private style;
     private dragStart?;
     constructor();
     init(options?: Partial<MinimapServiceOptions>): void;
     dispose(): void;
+    setVisible(visible: boolean): void;
     setActivate(activate: boolean): void;
     onActive: (callback: (activated: boolean) => void) => Disposable;
     private initStyle;
-    private setDebounce;
+    private setThrottle;
     /**
      * 触发渲染
      */
-    private render;
+    render: () => void;
     private _render;
     private createRenderContext;
     private renderCanvas;
     private calculateScaleAndOffset;
-    private get nodes();
-    private nodeTransforms;
+    private get transformVisibles();
     private renderRect;
     private viewRect;
-    private mountListener;
     /** 计算画布坐标系下的矩形 */
     private rectOnCanvas;
     private isPointInRect;
@@ -118,7 +116,7 @@ declare class FlowMinimapService {
  */
 
 interface MinimapProps {
-    service: FlowMinimapService;
+    service?: FlowMinimapService;
     panelStyles?: CSSProperties;
     containerStyles?: CSSProperties;
     inactiveStyle?: Partial<MinimapInactiveStyle>;
@@ -144,6 +142,9 @@ declare const createMinimapPlugin: _flowgram_ai_core.PluginCreator<CreateMinimap
 declare class FlowMinimapLayer extends Layer<MinimapLayerOptions> {
     static type: string;
     private readonly service;
+    transformDatas: FlowNodeTransformData[];
+    configEntity: PlaygroundConfigEntity;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
     readonly node: HTMLElement;
     private readonly className;
     constructor();

package/dist/index.js

@@ -50,129 +50,10 @@ module.exports = __toCommonJS(src_exports);
 
 // src/component.tsx
 var import_react = __toESM(require("react"));
-
-// src/constant.ts
-var MinimapDefaultCanvasStyle = {
-  canvasWidth: 250,
-  canvasHeight: 250,
-  canvasPadding: 50,
-  canvasBackground: "rgba(242, 243, 245, 1)",
-  canvasBorderRadius: 10,
-  viewportBackground: "rgba(255, 255, 255, 1)",
-  viewportBorderRadius: 4,
-  viewportBorderColor: "rgba(6, 7, 9, 0.10)",
-  viewportBorderWidth: 1,
-  viewportBorderDashLength: void 0,
-  nodeColor: "rgba(0, 0, 0, 0.10)",
-  nodeBorderRadius: 2,
-  nodeBorderWidth: 0.145,
-  nodeBorderColor: "rgba(6, 7, 9, 0.10)",
-  overlayColor: "rgba(255, 255, 255, 0.55)"
-};
-var MinimapDefaultInactiveStyle = {
-  scale: 0.7,
-  opacity: 1,
-  translateX: 15,
-  translateY: 15
-};
-var MinimapDefaultOptions = {
-  canvasStyle: MinimapDefaultCanvasStyle,
-  canvasClassName: "gedit-minimap-canvas",
-  enableActiveDebounce: false,
-  enableInactiveDebounce: true,
-  enableDisplayAllNodes: false,
-  activeDebounceTime: 0,
-  inactiveDebounceTime: 5
-};
-
-// src/component.tsx
-var MinimapRender = (props) => {
-  const {
-    service,
-    panelStyles = {},
-    containerStyles = {},
-    inactiveStyle: customInactiveStyle = {}
-  } = props;
-  const inactiveStyle = {
-    ...MinimapDefaultInactiveStyle,
-    ...customInactiveStyle
-  };
-  const panelRef = (0, import_react.useRef)(null);
-  const [activated, setActivated] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
-    const canvasContainer = panelRef.current;
-    if (canvasContainer && service.canvas) {
-      canvasContainer.appendChild(service.canvas);
-    }
-    const disposer = service.onActive((activate) => {
-      setActivated(activate);
-    });
-    return () => {
-      disposer.dispose();
-    };
-  }, []);
-  const scale = activated ? 1 : inactiveStyle.scale;
-  const opacity = activated ? 1 : inactiveStyle.opacity;
-  const translateX = activated ? 0 : inactiveStyle.translateX;
-  const translateY = activated ? 0 : inactiveStyle.translateY;
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: "minimap-container",
-      style: {
-        position: "fixed",
-        right: 30,
-        bottom: 70,
-        transition: "all 0.3s ease",
-        // 添加过渡效果
-        transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,
-        opacity,
-        transformOrigin: "bottom right",
-        // 设置变换的原点
-        ...containerStyles
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: "minimap-panel",
-        style: {
-          display: "flex",
-          width: "100%",
-          height: "100%",
-          borderRadius: "10px",
-          backgroundColor: "rgba(255, 255, 255, 1)",
-          border: "0.572px solid rgba(6, 7, 9, 0.10)",
-          overflow: "hidden",
-          boxShadow: "0px 2.289px 6.867px 0px rgba(0, 0, 0, 0.08), 0px 4.578px 13.733px 0px rgba(0, 0, 0, 0.04)",
-          boxSizing: "border-box",
-          padding: 8,
-          ...panelStyles
-        },
-        "data-flow-editor-selectable": "false",
-        ref: panelRef,
-        onMouseEnter: () => {
-          service.setActivate(true);
-        },
-        onMouseLeave: () => {
-          service.setActivate(false);
-        },
-        onTouchStartCapture: () => {
-          service.setActivate(true);
-        },
-        onTouchEndCapture: () => {
-          service.setActivate(false);
-        }
-      }
-    )
-  );
-};
-
-// src/create-plugin.ts
-var import_core3 = require("@flowgram.ai/core");
+var import_core2 = require("@flowgram.ai/core");
 
 // src/service.ts
-var import_lodash = require("lodash");
+var import_lodash_es = require("lodash-es");
 var import_inversify = require("inversify");
 var import_utils = require("@flowgram.ai/utils");
 var import_document = require("@flowgram.ai/document");
@@ -263,9 +144,42 @@ var MinimapDraw;
   };
 })(MinimapDraw || (MinimapDraw = {}));
 
+// src/constant.ts
+var MinimapDefaultCanvasStyle = {
+  canvasWidth: 250,
+  canvasHeight: 250,
+  canvasPadding: 50,
+  canvasBackground: "rgba(242, 243, 245, 1)",
+  canvasBorderRadius: 10,
+  viewportBackground: "rgba(255, 255, 255, 1)",
+  viewportBorderRadius: 4,
+  viewportBorderColor: "rgba(6, 7, 9, 0.10)",
+  viewportBorderWidth: 1,
+  viewportBorderDashLength: void 0,
+  nodeColor: "rgba(0, 0, 0, 0.10)",
+  nodeBorderRadius: 2,
+  nodeBorderWidth: 0.145,
+  nodeBorderColor: "rgba(6, 7, 9, 0.10)",
+  overlayColor: "rgba(255, 255, 255, 0.55)"
+};
+var MinimapDefaultInactiveStyle = {
+  scale: 0.7,
+  opacity: 1,
+  translateX: 15,
+  translateY: 15
+};
+var MinimapDefaultOptions = {
+  canvasStyle: MinimapDefaultCanvasStyle,
+  canvasClassName: "gedit-minimap-canvas",
+  enableDisplayAllNodes: false,
+  activeThrottleTime: 0,
+  inactiveThrottleTime: 24
+};
+
 // src/service.ts
 var FlowMinimapService = class {
   constructor() {
+    this.visible = false;
     this.onActive = (callback) => {
       this.onActiveCallbacks.add(callback);
       return {
@@ -367,12 +281,8 @@ var FlowMinimapService = class {
   init(options) {
     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();
   }
   dispose() {
     this.toDispose.dispose();
@@ -380,6 +290,9 @@ var FlowMinimapService = class {
     this.activated = false;
     this.removeEventListeners();
   }
+  setVisible(visible) {
+    this.visible = visible;
+  }
   setActivate(activate) {
     if (activate === this.activated) {
       return;
@@ -389,16 +302,10 @@ var FlowMinimapService = class {
     }
     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();
@@ -418,24 +325,19 @@ var FlowMinimapService = class {
     this.canvas.height = this.style.canvasHeight;
     this.canvas.style.borderRadius = this.style.canvasBorderRadius ? `${this.style.canvasBorderRadius}px` : "unset";
   }
-  setDebounce(params) {
-    const { enableDebounce, debounceTime } = params;
-    if (enableDebounce) {
-      this.render = (0, import_lodash.debounce)(this._render, debounceTime);
-    } else {
-      this.render = this._render;
-    }
+  setThrottle(throttleTime) {
+    this.render = (0, import_lodash_es.throttle)(this._render, throttleTime);
   }
   _render() {
-    if (!this.initialized) {
+    if (!this.initialized || !this.visible) {
       return;
     }
     const renderContext = this.createRenderContext();
     this.renderCanvas(renderContext);
   }
   createRenderContext() {
-    const { canvas, context2D, nodes } = this;
-    const nodeTransforms = this.nodeTransforms(nodes);
+    const { canvas, context2D } = this;
+    const nodeTransforms = this.transformVisibles;
     const nodeRects = nodeTransforms.map((transform) => transform.bounds);
     const viewRect = this.viewRect();
     const renderRect = this.renderRect(nodeRects).withPadding({
@@ -515,8 +417,13 @@ var FlowMinimapService = class {
     };
     return { scale, offset };
   }
-  get nodes() {
-    return this.document.getAllNodes().filter((node) => {
+  get transformVisibles() {
+    const transformVisible = this.document.getRenderDatas(
+      import_document.FlowNodeTransformData,
+      false
+    );
+    return transformVisible.filter((transform) => {
+      const node = transform.entity;
       if (node.hidden) return false;
       if (node.flowNodeType === import_document2.FlowNodeBaseType.ROOT) return;
       if (!this.options.enableDisplayAllNodes && node.parent && node.parent.flowNodeType !== import_document2.FlowNodeBaseType.ROOT)
@@ -524,9 +431,6 @@ var FlowMinimapService = class {
       return true;
     });
   }
-  nodeTransforms(nodes) {
-    return nodes.map((node) => node.getData(import_document.FlowNodeTransformData)).filter(Boolean);
-  }
   renderRect(rects) {
     return import_utils.Rectangle.enlarge(rects);
   }
@@ -534,10 +438,6 @@ var FlowMinimapService = class {
     const { width, height, scrollX, scrollY, zoom } = this.playgroundConfig.config;
     return new import_utils.Rectangle(scrollX / zoom, scrollY / zoom, width / zoom, height / zoom);
   }
-  mountListener() {
-    const entityManagerDisposer = this.entityManager.onEntityChange(() => this.render());
-    this.toDispose.push(entityManagerDisposer);
-  }
   /** 计算画布坐标系下的矩形 */
   rectOnCanvas(params) {
     const { rect, scale, offset } = params;
@@ -580,9 +480,6 @@ var FlowMinimapService = class {
 __decorateClass([
   (0, import_inversify.inject)(import_document3.FlowDocument)
 ], FlowMinimapService.prototype, "document", 2);
-__decorateClass([
-  (0, import_inversify.inject)(import_core.EntityManager)
-], FlowMinimapService.prototype, "entityManager", 2);
 __decorateClass([
   (0, import_inversify.inject)(import_core.PlaygroundConfigEntity)
 ], FlowMinimapService.prototype, "playgroundConfig", 2);
@@ -590,12 +487,99 @@ FlowMinimapService = __decorateClass([
   (0, import_inversify.injectable)()
 ], FlowMinimapService);
 
+// src/component.tsx
+var MinimapRender = (props) => {
+  const { panelStyles = {}, containerStyles = {}, inactiveStyle: customInactiveStyle = {} } = props;
+  const inactiveStyle = {
+    ...MinimapDefaultInactiveStyle,
+    ...customInactiveStyle
+  };
+  const playgroundContainer = (0, import_core2.usePlaygroundContainer)();
+  const service = props.service || playgroundContainer?.get(FlowMinimapService);
+  const panelRef = (0, import_react.useRef)(null);
+  const [activated, setActivated] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    const canvasContainer = panelRef.current;
+    if (canvasContainer && service.canvas) {
+      canvasContainer.appendChild(service.canvas);
+    }
+    const disposer = service.onActive((activate) => {
+      setActivated(activate);
+    });
+    service.setVisible(true);
+    service.render();
+    return () => {
+      disposer.dispose();
+      service.setVisible(false);
+    };
+  }, [service]);
+  const scale = activated ? 1 : inactiveStyle.scale;
+  const opacity = activated ? 1 : inactiveStyle.opacity;
+  const translateX = activated ? 0 : inactiveStyle.translateX;
+  const translateY = activated ? 0 : inactiveStyle.translateY;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "minimap-container",
+      style: {
+        position: "fixed",
+        right: 30,
+        bottom: 70,
+        transition: "all 0.3s ease",
+        // 添加过渡效果
+        transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,
+        opacity,
+        transformOrigin: "bottom right",
+        // 设置变换的原点
+        ...containerStyles
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "minimap-panel",
+        style: {
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          borderRadius: "10px",
+          backgroundColor: "rgba(255, 255, 255, 1)",
+          border: "0.572px solid rgba(6, 7, 9, 0.10)",
+          overflow: "hidden",
+          boxShadow: "0px 2.289px 6.867px 0px rgba(0, 0, 0, 0.08), 0px 4.578px 13.733px 0px rgba(0, 0, 0, 0.04)",
+          boxSizing: "border-box",
+          padding: 8,
+          ...panelStyles
+        },
+        "data-flow-editor-selectable": "false",
+        ref: panelRef,
+        onMouseEnter: () => {
+          service.setActivate(true);
+        },
+        onMouseLeave: () => {
+          service.setActivate(false);
+        },
+        onTouchStartCapture: () => {
+          service.setActivate(true);
+        },
+        onTouchEndCapture: () => {
+          service.setActivate(false);
+        }
+      }
+    )
+  );
+};
+
+// src/create-plugin.ts
+var import_core4 = require("@flowgram.ai/core");
+
 // src/layer.tsx
 var import_react2 = __toESM(require("react"));
 var import_inversify2 = require("inversify");
-var import_core2 = require("@flowgram.ai/core");
 var import_utils2 = require("@flowgram.ai/utils");
-var FlowMinimapLayer = class extends import_core2.Layer {
+var import_document4 = require("@flowgram.ai/document");
+var import_core3 = require("@flowgram.ai/core");
+var FlowMinimapLayer = class extends import_core3.Layer {
   constructor() {
     super();
     this.className = "gedit-minimap-layer gedit-playground-layer";
@@ -603,6 +587,9 @@ var FlowMinimapLayer = class extends import_core2.Layer {
     this.node.style.zIndex = "9999";
   }
   render() {
+    if (this.documentTransformer.loading) return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null);
+    this.documentTransformer.refresh();
+    this.service.render();
     if (this.options.disableLayer) {
       return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null);
     }
@@ -621,12 +608,21 @@ FlowMinimapLayer.type = "FlowMinimapLayer";
 __decorateClass([
   (0, import_inversify2.inject)(FlowMinimapService)
 ], FlowMinimapLayer.prototype, "service", 2);
+__decorateClass([
+  (0, import_core3.observeEntityDatas)(import_document4.FlowNodeEntity, import_document4.FlowNodeTransformData)
+], FlowMinimapLayer.prototype, "transformDatas", 2);
+__decorateClass([
+  (0, import_core3.observeEntity)(import_core3.PlaygroundConfigEntity)
+], FlowMinimapLayer.prototype, "configEntity", 2);
+__decorateClass([
+  (0, import_core3.observeEntity)(import_document4.FlowDocumentTransformerEntity)
+], FlowMinimapLayer.prototype, "documentTransformer", 2);
 FlowMinimapLayer = __decorateClass([
   (0, import_inversify2.injectable)()
 ], FlowMinimapLayer);
 
 // src/create-plugin.ts
-var createMinimapPlugin = (0, import_core3.definePluginCreator)({
+var createMinimapPlugin = (0, import_core4.definePluginCreator)({
   onBind: ({ bind }) => {
     bind(FlowMinimapService).toSelf().inSingletonScope();
   },