@flowgram.ai/minimap-plugin 0.1.0-alpha.10

package/dist/esm/index.js

@@ -0,0 +1,611 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// 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)",
+          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/service.ts
+import { debounce } from "lodash";
+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, 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);
+  };
+  MinimapDraw2.backgroundColor = (params) => {
+    const { canvas, context, color } = params;
+    context.fillStyle = color;
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  };
+  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);
+      context.lineTo(x + width - radius, y);
+      context.quadraticCurveTo(x + width, y, x + width, y + radius);
+      context.lineTo(x + width, y + height - radius);
+      context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+      context.lineTo(x + radius, y + height);
+      context.quadraticCurveTo(x, y + height, x, y + height - radius);
+      context.lineTo(x, y + radius);
+      context.quadraticCurveTo(x, y, x + radius, y);
+      context.closePath();
+    };
+    drawRoundedRectPath();
+    context.fillStyle = color;
+    context.fill();
+    if (borderColor && borderWidth > 0) {
+      context.strokeStyle = borderColor;
+      context.lineWidth = borderWidth;
+      if (borderDashLength) {
+        context.setLineDash([borderDashLength, borderDashLength]);
+      } else {
+        context.setLineDash([]);
+      }
+      context.stroke();
+      context.setLineDash([]);
+    }
+  };
+  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(
+      0,
+      (rect.y + rect.height + offset.y) * scale,
+      canvas.width,
+      canvas.height - (rect.y + rect.height + offset.y) * scale
+    );
+    context.fillRect(
+      0,
+      (rect.y + offset.y) * scale,
+      (rect.x + offset.x) * scale,
+      rect.height * scale
+    );
+    context.fillRect(
+      (rect.x + rect.width + offset.x) * scale,
+      (rect.y + offset.y) * scale,
+      canvas.width - (rect.x + rect.width + offset.x) * scale,
+      rect.height * scale
+    );
+  };
+})(MinimapDraw || (MinimapDraw = {}));
+
+// src/service.ts
+var FlowMinimapService = class {
+  constructor() {
+    this.onActive = (callback) => {
+      this.onActiveCallbacks.add(callback);
+      return {
+        dispose: () => {
+          this.onActiveCallbacks.delete(callback);
+        }
+      };
+    };
+    /**
+     * 触发渲染
+     */
+    this.render = this._render;
+    this.handleWheel = (event) => {
+    };
+    this.handleStartDrag = (event) => {
+      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: clientX - canvasRect.left,
+        y: clientY - canvasRect.top
+      };
+      const viewRectOnCanvas = this.rectOnCanvas({
+        rect: viewRect,
+        scale,
+        offset
+      });
+      if (!this.isPointInRect({ point: mousePoint, rect: viewRectOnCanvas })) {
+        return;
+      }
+      this.isDragging = true;
+      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;
+      MouseTouchEvent.preventDefault(event);
+      event.stopPropagation();
+      const renderContext = this.createRenderContext();
+      const { scale } = renderContext;
+      const canvasRect = this.canvas.getBoundingClientRect();
+      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);
+      this.dragStart = { x: mouseX, y: mouseY };
+      this.render();
+    };
+    this.handleEndDrag = (event) => {
+      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));
+    };
+    this.handleCursor = (event) => {
+      if (!this.activated) return;
+      const renderContext = this.createRenderContext();
+      const { viewRect, scale, offset } = renderContext;
+      const canvasRect = this.canvas.getBoundingClientRect();
+      const mousePoint = {
+        x: event.clientX - canvasRect.left,
+        y: event.clientY - canvasRect.top
+      };
+      const viewRectOnCanvas = this.rectOnCanvas({
+        rect: viewRect,
+        scale,
+        offset
+      });
+      if (this.isPointInRect({ point: mousePoint, rect: viewRectOnCanvas })) {
+        this.canvas.style.cursor = "grab";
+      } else {
+        this.canvas.style.cursor = "default";
+      }
+    };
+    this.canvas = document.createElement("canvas");
+    this.context2D = this.canvas.getContext("2d");
+    this.initialized = !!this.context2D;
+    this.onActiveCallbacks = /* @__PURE__ */ new Set();
+    this.toDispose = new DisposableCollection();
+    this.render = this._render;
+    this.activated = false;
+    this.isDragging = false;
+  }
+  init(options) {
+    this.options = MinimapDefaultOptions;
+    Object.assign(this.options, options);
+    this.setDebounce({
+      enableDebounce: this.options.enableInactiveDebounce,
+      debounceTime: this.options.inactiveDebounceTime
+    });
+    this.initStyle();
+    this.mountListener();
+  }
+  dispose() {
+    this.toDispose.dispose();
+    this.initialized = false;
+    this.activated = false;
+    this.removeEventListeners();
+  }
+  setActivate(activate) {
+    if (activate === this.activated) {
+      return;
+    }
+    if (!activate && this.isDragging) {
+      return;
+    }
+    this.activated = activate;
+    if (activate) {
+      this.setDebounce({
+        enableDebounce: this.options.enableActiveDebounce,
+        debounceTime: this.options.activeDebounceTime
+      });
+      this.addEventListeners();
+    } else {
+      this.setDebounce({
+        enableDebounce: this.options.enableInactiveDebounce,
+        debounceTime: this.options.inactiveDebounceTime
+      });
+      this.removeEventListeners();
+    }
+    this.render();
+    this.onActiveCallbacks.forEach((callback) => callback(activate));
+  }
+  initStyle() {
+    if (!this.initialized) {
+      return;
+    }
+    const { canvasClassName, canvasStyle } = this.options;
+    this.canvas.className = canvasClassName;
+    this.style = {
+      ...MinimapDefaultCanvasStyle,
+      ...canvasStyle
+    };
+    this.canvas.width = this.style.canvasWidth;
+    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;
+    }
+  }
+  _render() {
+    if (!this.initialized) {
+      return;
+    }
+    const renderContext = this.createRenderContext();
+    this.renderCanvas(renderContext);
+  }
+  createRenderContext() {
+    const { canvas, context2D, nodes } = this;
+    const nodeTransforms = this.nodeTransforms(nodes);
+    const nodeRects = nodeTransforms.map((transform) => transform.bounds);
+    const viewRect = this.viewRect();
+    const renderRect = this.renderRect(nodeRects).withPadding({
+      top: this.style.canvasPadding,
+      bottom: this.style.canvasPadding,
+      left: this.style.canvasPadding,
+      right: this.style.canvasPadding
+    });
+    const canvasRect = Rectangle.enlarge([viewRect, renderRect]);
+    const { scale, offset } = this.calculateScaleAndOffset({ canvasRect });
+    return {
+      canvas,
+      context2D,
+      nodeRects,
+      canvasRect,
+      viewRect,
+      renderRect,
+      scale,
+      offset
+    };
+  }
+  renderCanvas(renderContext) {
+    const { canvas, context2D, nodeRects, viewRect, scale, offset } = renderContext;
+    MinimapDraw.clear({ canvas, context: context2D });
+    MinimapDraw.backgroundColor({
+      canvas,
+      context: context2D,
+      color: this.style.canvasBackground
+    });
+    MinimapDraw.roundRectangle({
+      context: context2D,
+      rect: this.rectOnCanvas({ rect: viewRect, scale, offset }),
+      color: this.style.viewportBackground,
+      radius: this.style.viewportBorderRadius
+    });
+    nodeRects.forEach((nodeRect) => {
+      MinimapDraw.roundRectangle({
+        context: context2D,
+        rect: this.rectOnCanvas({ rect: nodeRect, scale, offset }),
+        color: this.style.nodeColor,
+        radius: this.style.nodeBorderRadius,
+        borderWidth: this.style.nodeBorderWidth,
+        borderColor: this.style.nodeBorderColor
+      });
+    });
+    MinimapDraw.roundRectangle({
+      context: context2D,
+      rect: this.rectOnCanvas({ rect: viewRect, scale, offset }),
+      color: "rgba(255, 255, 255, 0)",
+      radius: this.style.viewportBorderRadius,
+      borderColor: this.style.viewportBorderColor,
+      borderWidth: this.style.viewportBorderWidth,
+      borderDashLength: this.style.viewportBorderDashLength
+    });
+    MinimapDraw.overlay({
+      canvas,
+      context: context2D,
+      offset,
+      scale,
+      rect: viewRect,
+      color: this.style.overlayColor
+    });
+  }
+  calculateScaleAndOffset(params) {
+    const { canvasRect } = params;
+    const { width: canvasWidth, height: canvasHeight } = this.canvas;
+    const scaleX = canvasWidth / canvasRect.width;
+    const scaleY = canvasHeight / canvasRect.height;
+    const scale = Math.min(scaleX, scaleY);
+    const scaledWidth = canvasRect.width * scale;
+    const scaledHeight = canvasRect.height * scale;
+    const centerOffsetX = (canvasWidth - scaledWidth) / 2;
+    const centerOffsetY = (canvasHeight - scaledHeight) / 2;
+    const offset = {
+      x: centerOffsetX / scale - canvasRect.x,
+      y: centerOffsetY / scale - canvasRect.y
+    };
+    return { scale, offset };
+  }
+  get nodes() {
+    return this.document.getAllNodes().filter((node) => {
+      if (node.hidden) return false;
+      if (node.flowNodeType === FlowNodeBaseType.ROOT) return;
+      if (!this.options.enableDisplayAllNodes && node.parent && node.parent.flowNodeType !== FlowNodeBaseType.ROOT)
+        return;
+      return true;
+    });
+  }
+  nodeTransforms(nodes) {
+    return nodes.map((node) => node.getData(FlowNodeTransformData)).filter(Boolean);
+  }
+  renderRect(rects) {
+    return Rectangle.enlarge(rects);
+  }
+  viewRect() {
+    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;
+    return new Rectangle(
+      (rect.x + offset.x) * scale,
+      (rect.y + offset.y) * scale,
+      rect.width * scale,
+      rect.height * scale
+    );
+  }
+  isPointInRect(params) {
+    const { point, rect } = params;
+    return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+  }
+  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();
+    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;
+    this.playgroundConfig.updateConfig({
+      scrollX: scrollX + deltaX * zoom,
+      scrollY: scrollY + deltaY * zoom
+    });
+  }
+};
+__decorateClass([
+  inject(FlowDocument)
+], FlowMinimapService.prototype, "document", 2);
+__decorateClass([
+  inject(EntityManager)
+], FlowMinimapService.prototype, "entityManager", 2);
+__decorateClass([
+  inject(PlaygroundConfigEntity)
+], FlowMinimapService.prototype, "playgroundConfig", 2);
+FlowMinimapService = __decorateClass([
+  injectable()
+], FlowMinimapService);
+
+// 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";
+var FlowMinimapLayer = class extends Layer {
+  constructor() {
+    super();
+    this.className = "gedit-minimap-layer gedit-playground-layer";
+    this.node = domUtils.createDivWithClass(this.className);
+    this.node.style.zIndex = "9999";
+  }
+  render() {
+    if (this.options.disableLayer) {
+      return /* @__PURE__ */ React2.createElement(React2.Fragment, null);
+    }
+    return /* @__PURE__ */ React2.createElement(
+      MinimapRender,
+      {
+        service: this.service,
+        panelStyles: this.options.panelStyles,
+        containerStyles: this.options.containerStyles,
+        inactiveStyle: this.options.inactiveStyle
+      }
+    );
+  }
+};
+FlowMinimapLayer.type = "FlowMinimapLayer";
+__decorateClass([
+  inject2(FlowMinimapService)
+], FlowMinimapLayer.prototype, "service", 2);
+FlowMinimapLayer = __decorateClass([
+  injectable2()
+], FlowMinimapLayer);
+
+// src/create-plugin.ts
+var createMinimapPlugin = definePluginCreator({
+  onBind: ({ bind }) => {
+    bind(FlowMinimapService).toSelf().inSingletonScope();
+  },
+  onInit: (ctx, opts) => {
+    ctx.playground.registerLayer(FlowMinimapLayer, opts);
+    ctx.get(FlowMinimapService).init(opts);
+  },
+  onDispose: (ctx) => {
+    ctx.get(FlowMinimapService).dispose();
+  }
+});
+export {
+  FlowMinimapLayer,
+  FlowMinimapService,
+  MinimapDefaultCanvasStyle,
+  MinimapDefaultInactiveStyle,
+  MinimapDefaultOptions,
+  MinimapRender,
+  createMinimapPlugin
+};
+//# sourceMappingURL=index.js.map