@fieldnotes/core 0.50.1 → 0.50.2

package/dist/index.d.cts

@@ -1123,6 +1123,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.50.1";
+declare const VERSION = "0.50.2";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, type RotateDirection, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInRectangle, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.d.ts

@@ -1123,6 +1123,6 @@ declare class LaserTool implements Tool {
     private notifyOptionsChange;
 }
 
-declare const VERSION = "0.50.1";
+declare const VERSION = "0.50.2";
 
 export { type ActiveFormats, type AlignEdge, type ArrowElement, type ArrowStrokeStyle, ArrowTool, type ArrowToolOptions, AutoSave, type AutoSaveOptions, type BackgroundOptions, type BackgroundPattern, type Binding, type Bounds, Camera, type CameraChangeInfo, type CameraOptions, type CanvasElement, type CanvasState, type Command, DEFAULT_NOTE_FONT_SIZE, type DistributeAxis, type ElementChangeMeta, ElementStore, type ElementStyle, type ElementType, type ElementUpdateEvent, EraserTool, type EraserToolOptions, type ExportImageOptions, type ExportSvgOptions, type FontSizePreset, type GridElement, type GridInfo, HandTool, type HexOrientation, HistoryStack, type HistoryStackOptions, type HtmlElement, type ImageElement, ImageTool, type ImageToolOptions, IndexedDBAdapter, type IndexedDBAdapterOptions, LaserTool, type LaserToolOptions, type Layer, LayerManager, LocalStorageAdapter, MeasureTool, type MeasureToolOptions, type Measurement, MemoryAdapter, type NoteElement, NoteTool, type NoteToolOptions, PencilTool, type PencilToolOptions, type Point, type PointerState, type RenderStatsSnapshot, type RotateDirection, SelectTool, type ShapeElement, type ShapeKind, ShapeTool, type ShapeToolOptions, type ShortcutBindings, type ShortcutOptions, type ShortcutsApi, type Size, type StorageAdapter, type StrokeElement, type StrokePoint, type TemplateElement, type TemplateRenderStyle, type TemplateShape, TemplateTool, type TemplateToolOptions, type TextElement, TextTool, type TextToolOptions, type Tool, type ToolContext, ToolManager, type ToolName, VERSION, Viewport, type ViewportOptions, boundsIntersect, createArrow, createGrid, createHtmlElement, createImage, createNote, createShape, createStroke, createTemplate, createText, drawHexPath, exportImage, exportSvg, getActiveFormats, getArrowBounds, getArrowControlPoint, getArrowMidpoint, getArrowTangentAngle, getBendFromPoint, getElementBounds, getElementStyle, getElementsBoundingBox, getHexCellsInCone, getHexCellsInLine, getHexCellsInRadius, getHexCellsInRectangle, getHexCellsInSquare, getHexDistance, isNearBezier, setFontSize, smartSnap, snapPoint, snapToHexCenter, styleToPatch, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline };

package/dist/index.js

@@ -3593,7 +3593,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);
@@ -3624,7 +3624,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;
@@ -5384,41 +5384,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");
@@ -5738,11 +5767,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>`;
 }
@@ -6061,6 +6098,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;
@@ -6080,6 +6118,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) {
@@ -6087,7 +6126,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");
@@ -6102,13 +6141,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, {
@@ -6118,6 +6159,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%"
     });
@@ -6131,6 +6173,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();
@@ -6143,6 +6186,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")) {
@@ -6381,11 +6425,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,
@@ -6393,6 +6438,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();
   }
@@ -6472,11 +6518,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;
       }
@@ -6493,15 +6540,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;
       }
@@ -6521,7 +6569,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;
       }
     }
@@ -6545,7 +6593,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();
@@ -6566,7 +6617,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;
@@ -7471,6 +7525,7 @@ var Viewport = class {
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
+      this.renderLoop.markAllLayersDirty();
       this.minimap?.scheduleDraw();
       this.requestRender();
     });
@@ -10534,7 +10589,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.50.1";
+var VERSION = "0.50.2";
 export {
   ArrowTool,
   AutoSave,