@fieldnotes/core 0.50.1 → 0.50.3

package/dist/index.cjs

@@ -2320,6 +2320,9 @@ var MAX_DEPTH = 8;
 function intersects(a, b) {
   return a.x <= b.x + b.w && a.x + a.w >= b.x && a.y <= b.y + b.h && a.y + a.h >= b.y;
 }
+function contains(outer, inner) {
+  return inner.x >= outer.x && inner.x + inner.w <= outer.x + outer.w && inner.y >= outer.y && inner.y + inner.h <= outer.y + outer.h;
+}
 var QuadNode = class _QuadNode {
   constructor(bounds, depth) {
     this.bounds = bounds;
@@ -2372,6 +2375,14 @@ var QuadNode = class _QuadNode {
       }
     }
   }
+  collect(result) {
+    result.push(...this.items);
+    if (this.children) {
+      for (const child of this.children) {
+        child.collect(result);
+      }
+    }
+  }
   getChildIndex(itemBounds) {
     const midX = this.bounds.x + this.bounds.w / 2;
     const midY = this.bounds.y + this.bounds.h / 2;
@@ -2435,6 +2446,7 @@ var Quadtree = class {
     return this._size;
   }
   insert(id, bounds) {
+    this.expandToFit(bounds);
     this.root.insert({ id, bounds });
     this._size++;
   }
@@ -2459,6 +2471,24 @@ var Quadtree = class {
     this.root = new QuadNode(this.worldBounds, 0);
     this._size = 0;
   }
+  expandToFit(bounds) {
+    const current = this.root.bounds;
+    if (contains(current, bounds)) return;
+    const currentRight = current.x + current.w;
+    const currentBottom = current.y + current.h;
+    const requiredWidth = Math.max(currentRight, bounds.x + bounds.w) - Math.min(current.x, bounds.x);
+    const requiredHeight = Math.max(currentBottom, bounds.y + bounds.h) - Math.min(current.y, bounds.y);
+    const width = Math.max(current.w * 2, requiredWidth);
+    const height = Math.max(current.h * 2, requiredHeight);
+    const x = bounds.x < current.x ? currentRight - width : current.x;
+    const y = bounds.y < current.y ? currentBottom - height : current.y;
+    const entries = [];
+    this.root.collect(entries);
+    this.root = new QuadNode({ x, y, w: width, h: height }, 0);
+    for (const entry of entries) {
+      this.root.insert(entry);
+    }
+  }
 };
 
 // src/elements/stroke-smoothing.ts
@@ -3680,7 +3710,7 @@ function renderSquareGrid(ctx, bounds, cellSize, strokeColor, strokeWidth, opaci
   ctx.save();
   ctx.strokeStyle = strokeColor;
   ctx.lineWidth = strokeWidth;
-  ctx.globalAlpha = opacity;
+  ctx.globalAlpha *= opacity;
   ctx.beginPath();
   for (const x of verticals) {
     ctx.moveTo(x, bounds.minY);
@@ -3711,7 +3741,7 @@ function renderHexGrid(ctx, bounds, cellSize, orientation, strokeColor, strokeWi
   ctx.save();
   ctx.strokeStyle = strokeColor;
   ctx.lineWidth = strokeWidth;
-  ctx.globalAlpha = opacity;
+  ctx.globalAlpha *= opacity;
   ctx.beginPath();
   if (orientation === "pointy") {
     const hexW = Math.sqrt(3) * cellSize;
@@ -5471,41 +5501,70 @@ async function exportImage(store, options = {}, layerManager) {
   const renderer = new ElementRenderer();
   renderer.setStore(store);
   const grids = [];
-  for (const el of visibleElements) {
-    if (el.type === "grid") {
-      grids.push(el);
-      continue;
-    }
+  const renderElement = (target, el) => {
     if (el.type === "note") {
       const b = getElementBounds(el);
-      withRotation(ctx, el, b ? center(b) : el.position, () => renderNoteOnCanvas(ctx, el));
-      continue;
+      withRotation(target, el, b ? center(b) : el.position, () => renderNoteOnCanvas(target, el));
+      return;
     }
     if (el.type === "text") {
       const b = getElementBounds(el);
-      withRotation(ctx, el, b ? center(b) : el.position, () => renderTextOnCanvas(ctx, el));
-      continue;
+      withRotation(target, el, b ? center(b) : el.position, () => renderTextOnCanvas(target, el));
+      return;
     }
     if (el.type === "html") {
-      continue;
+      return;
     }
     if (el.type === "image") {
       const img = imageCache.get(el.id);
       if (img) {
         const b = getElementBounds(el);
         withRotation(
-          ctx,
+          target,
           el,
           b ? center(b) : el.position,
-          () => ctx.drawImage(img, el.position.x, el.position.y, el.size.w, el.size.h)
+          () => target.drawImage(img, el.position.x, el.position.y, el.size.w, el.size.h)
         );
       }
+      return;
+    }
+    renderer.renderCanvasElement(target, el);
+  };
+  const layerGroups = /* @__PURE__ */ new Map();
+  for (const el of visibleElements) {
+    if (el.type === "grid") {
+      grids.push(el);
+      continue;
+    }
+    const group = layerGroups.get(el.layerId) ?? [];
+    group.push(el);
+    layerGroups.set(el.layerId, group);
+  }
+  for (const [layerId, elements] of layerGroups) {
+    const opacity = layerManager?.getLayer?.(layerId)?.opacity ?? 1;
+    if (opacity === 1) {
+      for (const el of elements) renderElement(ctx, el);
       continue;
     }
-    renderer.renderCanvasElement(ctx, el);
+    const layerCanvas = document.createElement("canvas");
+    layerCanvas.width = canvas.width;
+    layerCanvas.height = canvas.height;
+    const layerCtx = layerCanvas.getContext("2d");
+    if (!layerCtx) continue;
+    layerCtx.scale(scale, scale);
+    layerCtx.translate(-bounds.x, -bounds.y);
+    for (const el of elements) renderElement(layerCtx, el);
+    ctx.save();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.globalAlpha = opacity;
+    ctx.drawImage(layerCanvas, 0, 0);
+    ctx.restore();
   }
   for (const grid of grids) {
+    ctx.save();
+    ctx.globalAlpha = layerManager?.getLayer?.(grid.layerId)?.opacity ?? 1;
     renderGridForBounds(ctx, grid, bounds);
+    ctx.restore();
   }
   return new Promise((resolve) => {
     canvas.toBlob((blob) => resolve(blob), "image/png");
@@ -5825,11 +5884,19 @@ async function exportSvg(store, options = {}, layerManager) {
   if (options.background) {
     body += `<rect x="${n(bounds.x)}" y="${n(bounds.y)}" width="${n(bounds.w)}" height="${n(bounds.h)}" fill="${esc(options.background)}" />`;
   }
+  const layerBodies = /* @__PURE__ */ new Map();
   for (const el of visibleElements) {
-    body += emitElement(el, imageDataUris, rasterScale, firstGrid, store);
+    const emitted = emitElement(el, imageDataUris, rasterScale, firstGrid, store);
+    layerBodies.set(el.layerId, (layerBodies.get(el.layerId) ?? "") + emitted);
+  }
+  for (const [layerId, emitted] of layerBodies) {
+    const opacity = layerManager?.getLayer?.(layerId)?.opacity ?? 1;
+    body += opacity === 1 || emitted === "" ? emitted : `<g opacity="${n(opacity)}">${emitted}</g>`;
   }
   for (const grid of grids) {
-    body += emitGrid(grid, bounds);
+    const emitted = emitGrid(grid, bounds);
+    const opacity = layerManager?.getLayer?.(grid.layerId)?.opacity ?? 1;
+    body += opacity === 1 ? emitted : `<g opacity="${n(opacity)}">${emitted}</g>`;
   }
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${n(bounds.w)}" height="${n(bounds.h)}" viewBox="${n(bounds.x)} ${n(bounds.y)} ${n(bounds.w)} ${n(bounds.h)}">${body}</svg>`;
 }
@@ -6148,6 +6215,7 @@ var DomNodeManager = class {
   getVersion;
   lastSyncedVersion = /* @__PURE__ */ new Map();
   lastSyncedZIndex = /* @__PURE__ */ new Map();
+  lastSyncedOpacity = /* @__PURE__ */ new Map();
   constructor(deps) {
     this.domLayer = deps.domLayer;
     this.onEditRequest = deps.onEditRequest;
@@ -6167,6 +6235,7 @@ var DomNodeManager = class {
     this.htmlContent.delete(elementId);
     this.lastSyncedVersion.delete(elementId);
     this.lastSyncedZIndex.delete(elementId);
+    this.lastSyncedOpacity.delete(elementId);
     const node = this.domNodes.get(elementId);
     if (!node) return;
     while (node.firstChild) {
@@ -6174,7 +6243,7 @@ var DomNodeManager = class {
     }
     delete node.dataset["initialized"];
   }
-  syncDomNode(element, zIndex = 0) {
+  syncDomNode(element, zIndex = 0, opacity = 1) {
     let node = this.domNodes.get(element.id);
     if (!node) {
       node = document.createElement("div");
@@ -6189,13 +6258,15 @@ var DomNodeManager = class {
       const currentVersion = this.getVersion(element.id);
       const lastVersion = this.lastSyncedVersion.get(element.id);
       const lastZ = this.lastSyncedZIndex.get(element.id);
-      if (lastVersion === currentVersion && lastZ === zIndex) {
+      const lastOpacity = this.lastSyncedOpacity.get(element.id);
+      if (lastVersion === currentVersion && lastZ === zIndex && lastOpacity === opacity) {
         return;
       }
     }
     if (this.getVersion) {
       this.lastSyncedVersion.set(element.id, this.getVersion(element.id));
       this.lastSyncedZIndex.set(element.id, zIndex);
+      this.lastSyncedOpacity.set(element.id, opacity);
     }
     const size = "size" in element ? element.size : null;
     Object.assign(node.style, {
@@ -6205,6 +6276,7 @@ var DomNodeManager = class {
       width: size ? `${size.w}px` : "auto",
       height: size ? `${size.h}px` : "auto",
       zIndex: String(zIndex),
+      opacity: String(opacity),
       transform: element.rotation ? `rotate(${element.rotation}rad)` : "",
       transformOrigin: "50% 50%"
     });
@@ -6218,6 +6290,7 @@ var DomNodeManager = class {
     this.htmlContent.delete(id);
     this.lastSyncedVersion.delete(id);
     this.lastSyncedZIndex.delete(id);
+    this.lastSyncedOpacity.delete(id);
     const node = this.domNodes.get(id);
     if (node) {
       node.remove();
@@ -6230,6 +6303,7 @@ var DomNodeManager = class {
     this.htmlContent.clear();
     this.lastSyncedVersion.clear();
     this.lastSyncedZIndex.clear();
+    this.lastSyncedOpacity.clear();
   }
   reattachHtmlContent(store) {
     for (const el of store.getElementsByType("html")) {
@@ -6468,11 +6542,12 @@ var RenderLoop = class {
   }
   markAllLayersDirty() {
     this.layerCache.markAllDirty();
+    this.gridCacheDirty = true;
   }
   getStats() {
     return this.stats.getSnapshot();
   }
-  compositeLayerCache(ctx, layerId) {
+  compositeLayerCache(ctx, layerId, opacity) {
     const cached = this.layerCache.getCanvas(layerId);
     const offset = this.marginViewport.compositeOffset(
       this.camera.position.x,
@@ -6480,6 +6555,7 @@ var RenderLoop = class {
     );
     ctx.save();
     ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.globalAlpha = opacity;
     ctx.drawImage(cached, offset.x, offset.y);
     ctx.restore();
   }
@@ -6559,11 +6635,12 @@ var RenderLoop = class {
         continue;
       }
       if (this.renderer.isDomElement(element)) {
+        const layerOpacity = this.layerManager.getLayer?.(element.layerId)?.opacity ?? 1;
         const elBounds = getElementBounds(element);
         if (elBounds && !boundsIntersect(elBounds, cullingRect)) {
           this.domNodeManager.hideDomNode(element.id);
         } else {
-          this.domNodeManager.syncDomNode(element, domZIndex++);
+          this.domNodeManager.syncDomNode(element, domZIndex++, layerOpacity);
         }
         continue;
       }
@@ -6580,15 +6657,16 @@ var RenderLoop = class {
     }
     for (const [layerId, elements] of this.layerGroups) {
       const isActiveDrawingLayer = layerId === this.activeDrawingLayerId;
+      const layerOpacity = this.layerManager.getLayer?.(layerId)?.opacity ?? 1;
       if (!this.layerCache.isDirty(layerId)) {
         const compT0 = performance.now();
-        this.compositeLayerCache(ctx, layerId);
+        this.compositeLayerCache(ctx, layerId, layerOpacity);
         compositeMs += performance.now() - compT0;
         continue;
       }
       if (isActiveDrawingLayer) {
         const compT0 = performance.now();
-        this.compositeLayerCache(ctx, layerId);
+        this.compositeLayerCache(ctx, layerId, layerOpacity);
         compositeMs += performance.now() - compT0;
         continue;
       }
@@ -6608,7 +6686,7 @@ var RenderLoop = class {
         this.layerCache.markClean(layerId);
         layersMs += performance.now() - layerT0;
         const compT0 = performance.now();
-        this.compositeLayerCache(ctx, layerId);
+        this.compositeLayerCache(ctx, layerId, layerOpacity);
         compositeMs += performance.now() - compT0;
       }
     }
@@ -6632,7 +6710,10 @@ var RenderLoop = class {
           this.marginViewport.applyRenderTransform(gc);
           try {
             for (const grid of gridElements) {
+              gc.save();
+              gc.globalAlpha = this.layerManager.getLayer?.(grid.layerId)?.opacity ?? 1;
               this.renderer.renderCanvasElement(gc, grid);
+              gc.restore();
             }
           } finally {
             gc.restore();
@@ -6653,7 +6734,10 @@ var RenderLoop = class {
         ctx.restore();
       } else {
         for (const grid of gridElements) {
+          ctx.save();
+          ctx.globalAlpha = this.layerManager.getLayer?.(grid.layerId)?.opacity ?? 1;
           this.renderer.renderCanvasElement(ctx, grid);
+          ctx.restore();
         }
       }
       gridMs = performance.now() - gridT0;
@@ -7558,6 +7642,7 @@ var Viewport = class {
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
+      this.renderLoop.markAllLayersDirty();
       this.minimap?.scheduleDraw();
       this.requestRender();
     });
@@ -10621,7 +10706,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.50.1";
+var VERSION = "0.50.3";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,