@flowgram-vue/minimap-plugin 0.2.0

package/dist/index.js

@@ -0,0 +1,626 @@
+import { defineComponent, inject as inject$1, shallowRef, onMounted, onBeforeUnmount, h, provide } from 'vue';
+import { PlaygroundConfigEntity, PlaygroundVueContainerKey, PlaygroundVueRefKey, Playground, PlaygroundContainerFactory, observeEntityDatas, observeEntity, definePluginCreator, MouseTouchEvent, Layer } from '@flowgram-vue/core';
+import { throttle } from 'lodash-es';
+import { inject, injectable } from 'inversify';
+import { DisposableCollection, Rectangle, domUtils } from '@flowgram-vue/utils';
+import { FlowDocument, FlowNodeEntity, FlowNodeTransformData, FlowDocumentTransformerEntity, FlowNodeBaseType } from '@flowgram-vue/document';
+
+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/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/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 {
+        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.setThrottle(this.options.inactiveThrottleTime);
+    this.initStyle();
+  }
+  dispose() {
+    this.toDispose.dispose();
+    this.initialized = false;
+    this.activated = false;
+    this.removeEventListeners();
+  }
+  setVisible(visible) {
+    this.visible = visible;
+  }
+  setActivate(activate) {
+    if (activate === this.activated) {
+      return;
+    }
+    if (!activate && this.isDragging) {
+      return;
+    }
+    this.activated = activate;
+    if (activate) {
+      this.setThrottle(this.options.activeThrottleTime);
+      this.addEventListeners();
+    } else {
+      this.setThrottle(this.options.inactiveThrottleTime);
+      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";
+  }
+  setThrottle(throttleTime) {
+    this.render = throttle(this._render, throttleTime);
+  }
+  _render() {
+    if (!this.initialized || !this.visible) {
+      return;
+    }
+    const renderContext = this.createRenderContext();
+    this.renderCanvas(renderContext);
+  }
+  createRenderContext() {
+    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({
+      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 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)
+        return;
+      return true;
+    });
+  }
+  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);
+  }
+  /** 计算画布坐标系下的矩形 */
+  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(PlaygroundConfigEntity)
+], FlowMinimapService.prototype, "playgroundConfig", 2);
+FlowMinimapService = __decorateClass([
+  injectable()
+], FlowMinimapService);
+
+// src/component.ts
+var MinimapRender = defineComponent({
+  name: "MinimapRender",
+  props: {
+    service: { type: Object },
+    panelStyles: { type: Object, default: () => ({}) },
+    containerStyles: { type: Object, default: () => ({}) },
+    inactiveStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const inactiveStyle = {
+      ...MinimapDefaultInactiveStyle,
+      ...props.inactiveStyle
+    };
+    const playgroundContainer = inject$1(PlaygroundVueContainerKey, void 0);
+    const service = props.service || playgroundContainer?.get(FlowMinimapService);
+    const panelRef = shallowRef(null);
+    const activated = shallowRef(false);
+    let disposer;
+    onMounted(() => {
+      const canvasContainer = panelRef.value;
+      if (canvasContainer && service.canvas) {
+        canvasContainer.appendChild(service.canvas);
+      }
+      disposer = service.onActive((activate) => {
+        activated.value = activate;
+      });
+      service.setVisible(true);
+      service.render();
+    });
+    onBeforeUnmount(() => {
+      disposer?.dispose();
+      service.setVisible(false);
+    });
+    return () => {
+      const scale = activated.value ? 1 : inactiveStyle.scale;
+      const opacity = activated.value ? 1 : inactiveStyle.opacity;
+      const translateX = activated.value ? 0 : inactiveStyle.translateX;
+      const translateY = activated.value ? 0 : inactiveStyle.translateY;
+      return h(
+        "div",
+        {
+          class: "minimap-container",
+          style: {
+            position: "fixed",
+            right: "30px",
+            bottom: "70px",
+            transition: "all 0.3s ease",
+            transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`,
+            opacity,
+            transformOrigin: "bottom right",
+            ...props.containerStyles
+          }
+        },
+        [
+          h("div", {
+            class: "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: "8px",
+              ...props.panelStyles
+            },
+            "data-flow-editor-selectable": "false",
+            ref: (el) => {
+              panelRef.value = el || null;
+            },
+            onMouseenter: () => {
+              service.setActivate(true);
+            },
+            onMouseleave: () => {
+              service.setActivate(false);
+            },
+            onTouchstartCapture: () => {
+              service.setActivate(true);
+            },
+            onTouchendCapture: () => {
+              service.setActivate(false);
+            }
+          })
+        ]
+      );
+    };
+  }
+});
+var LayerVueProvide = defineComponent({
+  name: "LayerVueProvide",
+  props: {
+    factory: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const factory = props.factory;
+    provide(PlaygroundVueContainerKey, factory);
+    try {
+      provide(PlaygroundVueRefKey, factory.get(Playground));
+    } catch {
+    }
+  },
+  render() {
+    return this.$slots.default?.();
+  }
+});
+function wrapLayerRender(factory, children) {
+  return h(LayerVueProvide, { factory }, () => children);
+}
+
+// src/layer.ts
+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.documentTransformer.loading) return null;
+    this.documentTransformer.refresh();
+    this.service.render();
+    if (this.options.disableLayer) {
+      return null;
+    }
+    return wrapLayerRender(
+      this.playgroundContainer,
+      h(MinimapRender, {
+        service: this.service,
+        panelStyles: this.options.panelStyles,
+        containerStyles: this.options.containerStyles,
+        inactiveStyle: this.options.inactiveStyle
+      })
+    );
+  }
+};
+FlowMinimapLayer.type = "FlowMinimapLayer";
+__decorateClass([
+  inject(FlowMinimapService)
+], FlowMinimapLayer.prototype, "service", 2);
+__decorateClass([
+  inject(PlaygroundContainerFactory)
+], FlowMinimapLayer.prototype, "playgroundContainer", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeTransformData)
+], FlowMinimapLayer.prototype, "transformDatas", 2);
+__decorateClass([
+  observeEntity(PlaygroundConfigEntity)
+], FlowMinimapLayer.prototype, "configEntity", 2);
+__decorateClass([
+  observeEntity(FlowDocumentTransformerEntity)
+], FlowMinimapLayer.prototype, "documentTransformer", 2);
+FlowMinimapLayer = __decorateClass([
+  injectable()
+], 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
+//# sourceMappingURL=index.js.map