microboard-temp 0.14.27 → 0.14.28

package/dist/cjs/browser.js

@@ -12510,6 +12510,16 @@ class BaseItem {
       this.index.render(context);
     }
   }
+  renderWithOpacity(context) {
+    if (this.opacity === 1) {
+      this.render(context);
+      return;
+    }
+    context.ctx.save();
+    context.ctx.globalAlpha *= this.opacity;
+    this.render(context);
+    context.ctx.restore();
+  }
   getSnapAnchorPoints() {
     return this.getMbr().getSnapAnchorPoints();
   }
@@ -40921,7 +40931,9 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  return renderer.render(item, documentFactory);
+  const element2 = renderer.render(item, documentFactory);
+  element2.style.opacity = `${item.opacity}`;
+  return element2;
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -44208,7 +44220,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -60525,7 +60537,7 @@ async function exportBoardScreenshot({
   const { left, top, right, bottom } = selection;
   const inView = board.items.index.listEnclosedOrCrossedBy(left, top, right, bottom);
   for (const item of inView) {
-    item.render(context);
+    item.renderWithOpacity?.(context) ?? item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -63148,7 +63160,6 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -64356,7 +64367,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -68842,13 +68853,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.render(context);
+            item.renderWithOpacity(context);
             context.ctx.restore();
           } else {
-            item.render(context);
+            item.renderWithOpacity(context);
           }
         } else {
-          item.render(context);
+          item.renderWithOpacity(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }

package/dist/cjs/index.js

@@ -12510,6 +12510,16 @@ class BaseItem {
       this.index.render(context);
     }
   }
+  renderWithOpacity(context) {
+    if (this.opacity === 1) {
+      this.render(context);
+      return;
+    }
+    context.ctx.save();
+    context.ctx.globalAlpha *= this.opacity;
+    this.render(context);
+    context.ctx.restore();
+  }
   getSnapAnchorPoints() {
     return this.getMbr().getSnapAnchorPoints();
   }
@@ -40921,7 +40931,9 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  return renderer.render(item, documentFactory);
+  const element2 = renderer.render(item, documentFactory);
+  element2.style.opacity = `${item.opacity}`;
+  return element2;
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -44208,7 +44220,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -60525,7 +60537,7 @@ async function exportBoardScreenshot({
   const { left, top, right, bottom } = selection;
   const inView = board.items.index.listEnclosedOrCrossedBy(left, top, right, bottom);
   for (const item of inView) {
-    item.render(context);
+    item.renderWithOpacity?.(context) ?? item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -63148,7 +63160,6 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -64356,7 +64367,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -68842,13 +68853,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.render(context);
+            item.renderWithOpacity(context);
             context.ctx.restore();
           } else {
-            item.render(context);
+            item.renderWithOpacity(context);
           }
         } else {
-          item.render(context);
+          item.renderWithOpacity(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }

package/dist/cjs/node.js

@@ -13546,6 +13546,16 @@ class BaseItem {
       this.index.render(context);
     }
   }
+  renderWithOpacity(context) {
+    if (this.opacity === 1) {
+      this.render(context);
+      return;
+    }
+    context.ctx.save();
+    context.ctx.globalAlpha *= this.opacity;
+    this.render(context);
+    context.ctx.restore();
+  }
   getSnapAnchorPoints() {
     return this.getMbr().getSnapAnchorPoints();
   }
@@ -43393,7 +43403,9 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  return renderer.render(item, documentFactory);
+  const element = renderer.render(item, documentFactory);
+  element.style.opacity = `${item.opacity}`;
+  return element;
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -46680,7 +46692,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -62998,7 +63010,7 @@ async function exportBoardScreenshot({
   const { left, top, right, bottom } = selection;
   const inView = board.items.index.listEnclosedOrCrossedBy(left, top, right, bottom);
   for (const item of inView) {
-    item.render(context);
+    item.renderWithOpacity?.(context) ?? item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -65621,7 +65633,6 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -66829,7 +66840,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -71315,13 +71326,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.render(context);
+            item.renderWithOpacity(context);
             context.ctx.restore();
           } else {
-            item.render(context);
+            item.renderWithOpacity(context);
           }
         } else {
-          item.render(context);
+          item.renderWithOpacity(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }

package/dist/esm/browser.js

@@ -12284,6 +12284,16 @@ class BaseItem {
       this.index.render(context);
     }
   }
+  renderWithOpacity(context) {
+    if (this.opacity === 1) {
+      this.render(context);
+      return;
+    }
+    context.ctx.save();
+    context.ctx.globalAlpha *= this.opacity;
+    this.render(context);
+    context.ctx.restore();
+  }
   getSnapAnchorPoints() {
     return this.getMbr().getSnapAnchorPoints();
   }
@@ -40703,7 +40713,9 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  return renderer.render(item, documentFactory);
+  const element2 = renderer.render(item, documentFactory);
+  element2.style.opacity = `${item.opacity}`;
+  return element2;
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -43990,7 +44002,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -60307,7 +60319,7 @@ async function exportBoardScreenshot({
   const { left, top, right, bottom } = selection;
   const inView = board.items.index.listEnclosedOrCrossedBy(left, top, right, bottom);
   for (const item of inView) {
-    item.render(context);
+    item.renderWithOpacity?.(context) ?? item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -62930,7 +62942,6 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -64138,7 +64149,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -68624,13 +68635,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.render(context);
+            item.renderWithOpacity(context);
             context.ctx.restore();
           } else {
-            item.render(context);
+            item.renderWithOpacity(context);
           }
         } else {
-          item.render(context);
+          item.renderWithOpacity(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }

package/dist/esm/index.js

@@ -12277,6 +12277,16 @@ class BaseItem {
       this.index.render(context);
     }
   }
+  renderWithOpacity(context) {
+    if (this.opacity === 1) {
+      this.render(context);
+      return;
+    }
+    context.ctx.save();
+    context.ctx.globalAlpha *= this.opacity;
+    this.render(context);
+    context.ctx.restore();
+  }
   getSnapAnchorPoints() {
     return this.getMbr().getSnapAnchorPoints();
   }
@@ -40696,7 +40706,9 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  return renderer.render(item, documentFactory);
+  const element2 = renderer.render(item, documentFactory);
+  element2.style.opacity = `${item.opacity}`;
+  return element2;
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -43983,7 +43995,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -60300,7 +60312,7 @@ async function exportBoardScreenshot({
   const { left, top, right, bottom } = selection;
   const inView = board.items.index.listEnclosedOrCrossedBy(left, top, right, bottom);
   for (const item of inView) {
-    item.render(context);
+    item.renderWithOpacity?.(context) ?? item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -62923,7 +62935,6 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -64131,7 +64142,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -68617,13 +68628,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.render(context);
+            item.renderWithOpacity(context);
             context.ctx.restore();
           } else {
-            item.render(context);
+            item.renderWithOpacity(context);
           }
         } else {
-          item.render(context);
+          item.renderWithOpacity(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }

package/dist/esm/node.js

@@ -13060,6 +13060,16 @@ class BaseItem {
       this.index.render(context);
     }
   }
+  renderWithOpacity(context) {
+    if (this.opacity === 1) {
+      this.render(context);
+      return;
+    }
+    context.ctx.save();
+    context.ctx.globalAlpha *= this.opacity;
+    this.render(context);
+    context.ctx.restore();
+  }
   getSnapAnchorPoints() {
     return this.getMbr().getSnapAnchorPoints();
   }
@@ -43163,7 +43173,9 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  return renderer.render(item, documentFactory);
+  const element = renderer.render(item, documentFactory);
+  element.style.opacity = `${item.opacity}`;
+  return element;
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -46450,7 +46462,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -62768,7 +62780,7 @@ async function exportBoardScreenshot({
   const { left, top, right, bottom } = selection;
   const inView = board.items.index.listEnclosedOrCrossedBy(left, top, right, bottom);
   for (const item of inView) {
-    item.render(context);
+    item.renderWithOpacity?.(context) ?? item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -65391,7 +65403,6 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -66599,7 +66610,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -71085,13 +71096,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.render(context);
+            item.renderWithOpacity(context);
             context.ctx.restore();
           } else {
-            item.render(context);
+            item.renderWithOpacity(context);
           }
         } else {
-          item.render(context);
+          item.renderWithOpacity(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }

package/dist/types/Items/BaseItem/BaseItem.d.ts

@@ -158,6 +158,7 @@ export declare class BaseItem<T extends BaseItem<any> = any> implements Geometry
     clearHighlightMbr(): void;
     renderHoverHighlight(context: DrawingContext): void;
     render(context: DrawingContext): void;
+    renderWithOpacity(context: DrawingContext): void;
     getSnapAnchorPoints(): Point[];
     getPointOnEdge(point: Point, _edge?: string): Point;
     handleTransform(params: TransformParams): TransformResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-temp",
-  "version": "0.14.27",
+  "version": "0.14.28",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",