@flowgram.ai/minimap-plugin 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/esm/index.js

@@ -11,132 +11,21 @@ var __decorateClass = (decorators, target, key, kind) => {
 
 // src/component.tsx
 import React, { useEffect, useRef, useState } from "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 = useRef(null);
-  const [activated, setActivated] = useState(false);
-  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__ */ React.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__ */ React.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)",
-          padding: 8,
-          ...panelStyles
-        },
-        "data-flow-editor-selectable": "false",
-        ref: panelRef,
-        onMouseEnter: () => {
-          service.setActivate(true);
-        },
-        onMouseLeave: () => {
-          service.setActivate(false);
-        }
-      }
-    )
-  );
-};
-
-// src/create-plugin.ts
-import { definePluginCreator } from "@flowgram.ai/core";
+import { usePlaygroundContainer } from "@flowgram.ai/core";
 
 // src/service.ts
-import { debounce } from "lodash";
+import { throttle } from "lodash-es";
 import { inject, injectable } from "inversify";
 import { DisposableCollection, Rectangle } from "@flowgram.ai/utils";
 import { FlowNodeTransformData } from "@flowgram.ai/document";
 import { FlowNodeBaseType } from "@flowgram.ai/document";
 import { FlowDocument } from "@flowgram.ai/document";
-import { EntityManager, PlaygroundConfigEntity } from "@flowgram.ai/core";
+import { MouseTouchEvent, PlaygroundConfigEntity } from "@flowgram.ai/core";
 
 // src/draw.ts
 var MinimapDraw;
 ((MinimapDraw2) => {
+  const isRectValid = (rect) => rect.width > 0 && rect.height > 0;
   MinimapDraw2.clear = (params) => {
     const { canvas, context } = params;
     context.clearRect(0, 0, canvas.width, canvas.height);
@@ -148,12 +37,18 @@ var MinimapDraw;
   };
   MinimapDraw2.rectangle = (params) => {
     const { context, rect, color } = params;
+    if (!isRectValid(rect)) {
+      return;
+    }
     context.fillStyle = color;
     context.fillRect(rect.x, rect.y, rect.width, rect.height);
   };
   MinimapDraw2.roundRectangle = (params) => {
     const { context, rect, color, radius, borderColor, borderDashLength, borderWidth = 0 } = params;
     const { x, y, width, height } = rect;
+    if (!isRectValid(rect)) {
+      return;
+    }
     context.beginPath();
     const drawRoundedRectPath = () => {
       context.moveTo(x + radius, y);
@@ -184,6 +79,9 @@ var MinimapDraw;
   };
   MinimapDraw2.overlay = (params) => {
     const { canvas, context, offset, scale, rect, color } = params;
+    if (!isRectValid(rect)) {
+      return;
+    }
     context.fillStyle = color;
     context.fillRect(0, 0, canvas.width, (rect.y + offset.y) * scale);
     context.fillRect(
@@ -207,9 +105,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 {
@@ -225,14 +156,15 @@ var FlowMinimapService = class {
     this.handleWheel = (event) => {
     };
     this.handleStartDrag = (event) => {
-      event.preventDefault();
+      MouseTouchEvent.preventDefault(event);
       event.stopPropagation();
       const renderContext = this.createRenderContext();
       const { viewRect, scale, offset } = renderContext;
       const canvasRect = this.canvas.getBoundingClientRect();
+      const { clientX, clientY } = MouseTouchEvent.getEventCoord(event);
       const mousePoint = {
-        x: event.clientX - canvasRect.left,
-        y: event.clientY - canvasRect.top
+        x: clientX - canvasRect.left,
+        y: clientY - canvasRect.top
       };
       const viewRectOnCanvas = this.rectOnCanvas({
         rect: viewRect,
@@ -246,16 +178,20 @@ var FlowMinimapService = class {
       this.dragStart = mousePoint;
       document.addEventListener("mousemove", this.handleDragging);
       document.addEventListener("mouseup", this.handleEndDrag);
+      document.addEventListener("touchmove", this.handleDragging, { passive: false });
+      document.addEventListener("touchend", this.handleEndDrag);
+      document.addEventListener("touchcancel", this.handleEndDrag);
     };
     this.handleDragging = (event) => {
       if (!this.isDragging || !this.dragStart) return;
-      event.preventDefault();
+      MouseTouchEvent.preventDefault(event);
       event.stopPropagation();
       const renderContext = this.createRenderContext();
       const { scale } = renderContext;
       const canvasRect = this.canvas.getBoundingClientRect();
-      const mouseX = event.clientX - canvasRect.left;
-      const mouseY = event.clientY - canvasRect.top;
+      const { clientX, clientY } = MouseTouchEvent.getEventCoord(event);
+      const mouseX = clientX - canvasRect.left;
+      const mouseY = clientY - canvasRect.top;
       const deltaX = (mouseX - this.dragStart.x) / scale;
       const deltaY = (mouseY - this.dragStart.y) / scale;
       this.updateScrollPosition(deltaX, deltaY);
@@ -263,10 +199,13 @@ var FlowMinimapService = class {
       this.render();
     };
     this.handleEndDrag = (event) => {
-      event.preventDefault();
+      MouseTouchEvent.preventDefault(event);
       event.stopPropagation();
       document.removeEventListener("mousemove", this.handleDragging);
       document.removeEventListener("mouseup", this.handleEndDrag);
+      document.removeEventListener("touchmove", this.handleDragging);
+      document.removeEventListener("touchend", this.handleEndDrag);
+      document.removeEventListener("touchcancel", this.handleEndDrag);
       this.isDragging = false;
       this.dragStart = void 0;
       this.setActivate(this.isMouseInCanvas(event));
@@ -303,12 +242,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();
@@ -316,6 +251,9 @@ var FlowMinimapService = class {
     this.activated = false;
     this.removeEventListeners();
   }
+  setVisible(visible) {
+    this.visible = visible;
+  }
   setActivate(activate) {
     if (activate === this.activated) {
       return;
@@ -325,16 +263,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();
@@ -354,24 +286,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 = debounce(this._render, debounceTime);
-    } else {
-      this.render = this._render;
-    }
+  setThrottle(throttleTime) {
+    this.render = 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({
@@ -451,8 +378,13 @@ var FlowMinimapService = class {
     };
     return { scale, offset };
   }
-  get nodes() {
-    return this.document.getAllNodes().filter((node) => {
+  get transformVisibles() {
+    const transformVisible = this.document.getRenderDatas(
+      FlowNodeTransformData,
+      false
+    );
+    return transformVisible.filter((transform) => {
+      const node = transform.entity;
       if (node.hidden) return false;
       if (node.flowNodeType === FlowNodeBaseType.ROOT) return;
       if (!this.options.enableDisplayAllNodes && node.parent && node.parent.flowNodeType !== FlowNodeBaseType.ROOT)
@@ -460,9 +392,6 @@ var FlowMinimapService = class {
       return true;
     });
   }
-  nodeTransforms(nodes) {
-    return nodes.map((node) => node.getData(FlowNodeTransformData)).filter(Boolean);
-  }
   renderRect(rects) {
     return Rectangle.enlarge(rects);
   }
@@ -470,10 +399,6 @@ var FlowMinimapService = class {
     const { width, height, scrollX, scrollY, zoom } = this.playgroundConfig.config;
     return new 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;
@@ -491,16 +416,19 @@ var FlowMinimapService = class {
   addEventListeners() {
     this.canvas.addEventListener("wheel", this.handleWheel);
     this.canvas.addEventListener("mousedown", this.handleStartDrag);
+    this.canvas.addEventListener("touchstart", this.handleStartDrag, { passive: false });
     this.canvas.addEventListener("mousemove", this.handleCursor);
   }
   removeEventListeners() {
     this.canvas.removeEventListener("wheel", this.handleWheel);
     this.canvas.removeEventListener("mousedown", this.handleStartDrag);
+    this.canvas.removeEventListener("touchstart", this.handleStartDrag);
     this.canvas.removeEventListener("mousemove", this.handleCursor);
   }
   isMouseInCanvas(event) {
     const canvasRect = this.canvas.getBoundingClientRect();
-    return event.clientX >= canvasRect.left && event.clientX <= canvasRect.right && event.clientY >= canvasRect.top && event.clientY <= canvasRect.bottom;
+    const { clientX, clientY } = MouseTouchEvent.getEventCoord(event);
+    return clientX >= canvasRect.left && clientX <= canvasRect.right && clientY >= canvasRect.top && clientY <= canvasRect.bottom;
   }
   updateScrollPosition(deltaX, deltaY) {
     const { scrollX, scrollY, zoom } = this.playgroundConfig.config;
@@ -513,9 +441,6 @@ var FlowMinimapService = class {
 __decorateClass([
   inject(FlowDocument)
 ], FlowMinimapService.prototype, "document", 2);
-__decorateClass([
-  inject(EntityManager)
-], FlowMinimapService.prototype, "entityManager", 2);
 __decorateClass([
   inject(PlaygroundConfigEntity)
 ], FlowMinimapService.prototype, "playgroundConfig", 2);
@@ -523,11 +448,107 @@ FlowMinimapService = __decorateClass([
   injectable()
 ], FlowMinimapService);
 
+// src/component.tsx
+var MinimapRender = (props) => {
+  const { panelStyles = {}, containerStyles = {}, inactiveStyle: customInactiveStyle = {} } = props;
+  const inactiveStyle = {
+    ...MinimapDefaultInactiveStyle,
+    ...customInactiveStyle
+  };
+  const playgroundContainer = usePlaygroundContainer();
+  const service = props.service || playgroundContainer?.get(FlowMinimapService);
+  const panelRef = useRef(null);
+  const [activated, setActivated] = useState(false);
+  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__ */ React.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__ */ React.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
+import { definePluginCreator } from "@flowgram.ai/core";
+
 // src/layer.tsx
 import React2 from "react";
 import { inject as inject2, injectable as injectable2 } from "inversify";
-import { Layer } from "@flowgram.ai/core";
 import { domUtils } from "@flowgram.ai/utils";
+import {
+  FlowNodeEntity,
+  FlowNodeTransformData as FlowNodeTransformData2,
+  FlowDocumentTransformerEntity
+} from "@flowgram.ai/document";
+import {
+  Layer,
+  observeEntityDatas,
+  observeEntity,
+  PlaygroundConfigEntity as PlaygroundConfigEntity2
+} from "@flowgram.ai/core";
 var FlowMinimapLayer = class extends Layer {
   constructor() {
     super();
@@ -536,6 +557,9 @@ var FlowMinimapLayer = class extends Layer {
     this.node.style.zIndex = "9999";
   }
   render() {
+    if (this.documentTransformer.loading) return /* @__PURE__ */ React2.createElement(React2.Fragment, null);
+    this.documentTransformer.refresh();
+    this.service.render();
     if (this.options.disableLayer) {
       return /* @__PURE__ */ React2.createElement(React2.Fragment, null);
     }
@@ -554,6 +578,15 @@ FlowMinimapLayer.type = "FlowMinimapLayer";
 __decorateClass([
   inject2(FlowMinimapService)
 ], FlowMinimapLayer.prototype, "service", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeTransformData2)
+], FlowMinimapLayer.prototype, "transformDatas", 2);
+__decorateClass([
+  observeEntity(PlaygroundConfigEntity2)
+], FlowMinimapLayer.prototype, "configEntity", 2);
+__decorateClass([
+  observeEntity(FlowDocumentTransformerEntity)
+], FlowMinimapLayer.prototype, "documentTransformer", 2);
 FlowMinimapLayer = __decorateClass([
   injectable2()
 ], FlowMinimapLayer);