@fieldnotes/core 0.50.0 → 0.50.2

package/dist/index.cjs

@@ -367,7 +367,7 @@ function migrateElement(obj) {
   if (obj["type"] === "note" && typeof obj["textColor"] !== "string") {
     obj["textColor"] = "#000000";
   }
-  if (obj["type"] === "note" && typeof obj["text"] === "string") {
+  if ((obj["type"] === "note" || obj["type"] === "text") && typeof obj["text"] === "string") {
     obj["text"] = sanitizeNoteHtml(obj["text"]);
   }
 }
@@ -2580,6 +2580,11 @@ function transferStrokeRenderData(prev, next) {
 }
 
 // src/elements/element-store.ts
+function sanitizeRichText(element) {
+  if (element.type !== "note" && element.type !== "text") return element;
+  const text = sanitizeNoteHtml(element.text);
+  return text === element.text ? element : { ...element, text };
+}
 var ElementStore = class {
   elements = /* @__PURE__ */ new Map();
   bus = new EventBus();
@@ -2624,6 +2629,7 @@ var ElementStore = class {
     return angle === 0 ? bounds : rotatedAABB(bounds, angle);
   }
   add(element, meta) {
+    element = sanitizeRichText(element);
     this.sortedCache = null;
     this._versions.set(element.id, 0);
     this.elements.set(element.id, element);
@@ -2650,7 +2656,7 @@ var ElementStore = class {
       const arrow = updated;
       arrow.cachedControlPoint = getArrowControlPoint(arrow.from, arrow.to, arrow.bend);
     }
-    if (updated.type === "note" && "text" in partial) {
+    if ((updated.type === "note" || updated.type === "text") && "text" in partial) {
       updated.text = sanitizeNoteHtml(updated.text);
     }
     this.elements.set(id, updated);
@@ -2680,11 +2686,12 @@ var ElementStore = class {
     return this.getAll().map((el) => ({ ...el }));
   }
   loadSnapshot(elements, meta) {
+    const sanitizedElements = elements.map(sanitizeRichText);
     this.sortedCache = null;
     this._versions.clear();
     this.elements.clear();
     this.spatialIndex.clear();
-    for (const el of elements) {
+    for (const el of sanitizedElements) {
       this.elements.set(el.id, el);
       this._versions.set(el.id, 0);
       const bounds = this.indexBounds(el);
@@ -2697,7 +2704,7 @@ var ElementStore = class {
       }
     }
     this.bus.emit("clear", null, meta);
-    for (const el of elements) {
+    for (const el of sanitizedElements) {
       this.bus.emit("add", el, meta);
     }
   }
@@ -3673,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);
@@ -3704,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;
@@ -4112,7 +4119,7 @@ function createText(input) {
     locked: input.locked ?? false,
     layerId: input.layerId ?? "",
     size: input.size ?? { w: 200, h: 28 },
-    text: input.text ?? "",
+    text: sanitizeNoteHtml(input.text ?? ""),
     fontSize: input.fontSize ?? 16,
     color: input.color ?? "#1a1a1a",
     textAlign: input.textAlign ?? "left"
@@ -5464,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");
@@ -5818,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>`;
 }
@@ -6141,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;
@@ -6160,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) {
@@ -6167,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");
@@ -6182,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, {
@@ -6198,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%"
     });
@@ -6211,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();
@@ -6223,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")) {
@@ -6461,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,
@@ -6473,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();
   }
@@ -6552,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;
       }
@@ -6573,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;
       }
@@ -6601,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;
       }
     }
@@ -6625,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();
@@ -6646,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;
@@ -7551,6 +7612,7 @@ var Viewport = class {
     ];
     this.layerManager.on("change", () => {
       this.toolContext.activeLayerId = this.layerManager.activeLayerId;
+      this.renderLoop.markAllLayersDirty();
       this.minimap?.scheduleDraw();
       this.requestRender();
     });
@@ -10614,7 +10676,7 @@ var LaserTool = class {
 };
 
 // src/index.ts
-var VERSION = "0.50.0";
+var VERSION = "0.50.2";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ArrowTool,