@fieldnotes/core 0.50.1 → 0.50.2

package/dist/index.cjs

@@ -3680,7 +3680,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 +3711,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 +5471,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 +5854,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 +6185,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 +6205,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 +6213,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 +6228,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 +6246,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 +6260,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 +6273,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 +6512,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 +6525,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 +6605,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 +6627,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 +6656,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 +6680,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 +6704,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 +7612,7 @@ var Viewport = class {
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
+      this.renderLoop.markAllLayersDirty();
       this.minimap?.scheduleDraw();
       this.requestRender();
     });
@@ -10621,7 +10676,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.50.1";
+var VERSION = "0.50.2";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,