@fieldnotes/core 0.42.0 → 0.43.0

package/dist/index.cjs

@@ -4360,6 +4360,135 @@ var ContextMenu = class {
   }
 };
 
+// src/canvas/minimap-transform.ts
+function unionBounds(a, b) {
+  const minX = Math.min(a.x, b.x);
+  const minY = Math.min(a.y, b.y);
+  const maxX = Math.max(a.x + a.w, b.x + b.w);
+  const maxY = Math.max(a.y + a.h, b.y + b.h);
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function computeMinimapTransform(mapping, miniW, miniH, padding) {
+  const availW = Math.max(1, miniW - 2 * padding);
+  const availH = Math.max(1, miniH - 2 * padding);
+  const w = Math.max(mapping.w, 1);
+  const h = Math.max(mapping.h, 1);
+  const scale = Math.min(availW / w, availH / h);
+  const offsetX = (miniW - mapping.w * scale) / 2 - mapping.x * scale;
+  const offsetY = (miniH - mapping.h * scale) / 2 - mapping.y * scale;
+  return { scale, offsetX, offsetY };
+}
+function worldToMini(t, p) {
+  return { x: p.x * t.scale + t.offsetX, y: p.y * t.scale + t.offsetY };
+}
+function miniToWorld(t, p) {
+  return { x: (p.x - t.offsetX) / t.scale, y: (p.y - t.offsetY) / t.scale };
+}
+
+// src/canvas/minimap.ts
+var WIDTH = 200;
+var HEIGHT = 140;
+var MARGIN = 16;
+var PADDING = 8;
+var NEUTRAL = "rgba(100,116,139,0.6)";
+var VIEWPORT_STROKE = "#3b82f6";
+function elementColor(el) {
+  return "color" in el && typeof el.color === "string" ? el.color : NEUTRAL;
+}
+var Minimap = class {
+  constructor(deps) {
+    this.deps = deps;
+    const canvas = document.createElement("canvas");
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+    Object.assign(canvas.style, {
+      position: "absolute",
+      right: `${MARGIN}px`,
+      bottom: `${MARGIN}px`,
+      width: `${WIDTH}px`,
+      height: `${HEIGHT}px`,
+      background: "rgba(255,255,255,0.85)",
+      border: "1px solid rgba(0,0,0,0.15)",
+      borderRadius: "4px",
+      touchAction: "none",
+      cursor: "pointer",
+      zIndex: "10"
+    });
+    canvas.addEventListener("pointerdown", this.onPointerDown);
+    canvas.addEventListener("pointermove", this.onPointerMove);
+    canvas.addEventListener("pointerup", this.onPointerUp);
+    this.deps.container.appendChild(canvas);
+    this.canvas = canvas;
+  }
+  canvas;
+  rafId = null;
+  dragging = false;
+  scheduleDraw() {
+    if (this.rafId !== null) return;
+    this.rafId = this.deps.requestFrame(this.draw);
+  }
+  destroy() {
+    if (this.rafId !== null) {
+      this.deps.cancelFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.canvas.removeEventListener("pointerdown", this.onPointerDown);
+    this.canvas.removeEventListener("pointermove", this.onPointerMove);
+    this.canvas.removeEventListener("pointerup", this.onPointerUp);
+    this.canvas.remove();
+  }
+  currentTransform() {
+    const viewport = this.deps.getViewportRect();
+    const content = this.deps.getContentBounds();
+    const mapping = content ? unionBounds(content, viewport) : viewport;
+    return computeMinimapTransform(mapping, WIDTH, HEIGHT, PADDING);
+  }
+  draw = () => {
+    this.rafId = null;
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) return;
+    const t = this.currentTransform();
+    const viewport = this.deps.getViewportRect();
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
+    for (const el of this.deps.getElements()) {
+      const b = getElementBounds(el);
+      if (!b) continue;
+      const tl = worldToMini(t, { x: b.x, y: b.y });
+      ctx.fillStyle = elementColor(el);
+      ctx.fillRect(tl.x, tl.y, Math.max(1, b.w * t.scale), Math.max(1, b.h * t.scale));
+    }
+    const vtl = worldToMini(t, { x: viewport.x, y: viewport.y });
+    ctx.strokeStyle = VIEWPORT_STROKE;
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(vtl.x, vtl.y, viewport.w * t.scale, viewport.h * t.scale);
+  };
+  navigateFromEvent(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    const world = miniToWorld(this.currentTransform(), point);
+    this.deps.navigateTo(world);
+  }
+  onPointerDown = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    this.dragging = true;
+    this.canvas.setPointerCapture?.(e.pointerId);
+    this.navigateFromEvent(e);
+  };
+  onPointerMove = (e) => {
+    if (!this.dragging) return;
+    e.stopPropagation();
+    this.navigateFromEvent(e);
+  };
+  onPointerUp = (e) => {
+    this.dragging = false;
+    try {
+      this.canvas.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+};
+
 // src/canvas/viewport-dom.ts
 function createWrapper() {
   const el = document.createElement("div");
@@ -6485,7 +6614,7 @@ function getElementStyle(element) {
 }
 
 // src/canvas/selection-ops.ts
-function unionBounds(list) {
+function unionBounds2(list) {
   let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
   for (const b of list) {
     minX = Math.min(minX, b.x);
@@ -6580,7 +6709,7 @@ var SelectionOps = class {
   align(edge) {
     const bounded = this.boundedSelection();
     if (bounded.length < 2) return;
-    const B = unionBounds(bounded.map((e) => e.bounds));
+    const B = unionBounds2(bounded.map((e) => e.bounds));
     this.deps.recorder.begin();
     const moved = [];
     for (const { id, el, bounds: b } of bounded) {
@@ -6987,6 +7116,27 @@ var Viewport = class {
       });
     }
     this.unsubToolChange = this.toolManager.onChange(() => this.contextMenu?.close());
+    if (options.minimap) {
+      const visibleEls = () => this.store.getAll().filter((el) => this.layerManager.isLayerVisible(el.layerId));
+      this.minimap = new Minimap({
+        container: this.wrapper,
+        getElements: visibleEls,
+        getContentBounds: () => getElementsBoundingBox(visibleEls()),
+        getViewportRect: () => this.camera.getVisibleRect(this.canvasEl.clientWidth, this.canvasEl.clientHeight),
+        navigateTo: (w) => {
+          const z = this.camera.zoom;
+          this.camera.moveTo(
+            this.canvasEl.clientWidth / 2 - w.x * z,
+            this.canvasEl.clientHeight / 2 - w.y * z
+          );
+        },
+        requestFrame: (cb) => typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame(cb) : 0,
+        cancelFrame: (id) => {
+          if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(id);
+        }
+      });
+      this.minimap.scheduleDraw();
+    }
     this.domNodeManager = new DomNodeManager({
       domLayer: this.domLayer,
       onEditRequest: (id) => this.interactions.startEditingElement(id),
@@ -7019,6 +7169,7 @@ var Viewport = class {
       this.applyCameraTransform();
       this.noteEditor.updateToolbarPosition();
       this.contextMenu?.close();
+      this.minimap?.scheduleDraw();
       this.requestRender();
     });
     this.gridController = new GridController({
@@ -7033,6 +7184,7 @@ var Viewport = class {
       this.store.on("add", (el) => {
         if (el.type === "grid") this.gridController.syncContext();
         this.renderLoop.markLayerDirty(el.layerId);
+        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("remove", (el) => {
@@ -7040,6 +7192,7 @@ var Viewport = class {
         this.unbindArrowsFrom(el);
         this.domNodeManager.removeDomNode(el.id);
         this.renderLoop.markLayerDirty(el.layerId);
+        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("update", ({ previous, current }) => {
@@ -7048,17 +7201,20 @@ var Viewport = class {
         if (previous.layerId !== current.layerId) {
           this.renderLoop.markLayerDirty(previous.layerId);
         }
+        this.minimap?.scheduleDraw();
         this.requestRender();
       }),
       this.store.on("clear", () => {
         this.domNodeManager.clearDomNodes();
         this.renderLoop.markAllLayersDirty();
         this.gridController.syncContext();
+        this.minimap?.scheduleDraw();
         this.requestRender();
       })
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
+      this.minimap?.scheduleDraw();
       this.requestRender();
     });
     this.interactions = new ViewportInteractions({
@@ -7118,6 +7274,7 @@ var Viewport = class {
   gridController;
   interactions;
   contextMenu = null;
+  minimap = null;
   htmlRenderers = /* @__PURE__ */ new Map();
   get ctx() {
     return this.canvasEl.getContext("2d");
@@ -7391,6 +7548,7 @@ var Viewport = class {
     this.arrowLabelEditor.cancel();
     this.historyRecorder.destroy();
     this.contextMenu?.dispose();
+    this.minimap?.destroy();
     this.wrapper.removeEventListener("pointerdown", this.interactions.onTapDown);
     this.wrapper.removeEventListener("pointerup", this.interactions.onDoubleTap);
     this.wrapper.removeEventListener("dragover", this.interactions.onDragOver);
@@ -9893,7 +10051,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.42.0";
+var VERSION = "0.43.0";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,