microboard-temp 0.14.28 → 0.14.29

package/dist/cjs/browser.js

@@ -11945,7 +11945,6 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
-  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12298,7 +12297,6 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
-      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -12510,16 +12508,6 @@ 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();
   }
@@ -40931,9 +40919,7 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  const element2 = renderer.render(item, documentFactory);
-  element2.style.opacity = `${item.opacity}`;
-  return element2;
+  return renderer.render(item, documentFactory);
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -42703,6 +42689,7 @@ function parseHTMLDrawing(el) {
     transformation,
     strokeStyle: pathElement.getAttribute("stroke") || "",
     strokeWidth: parseFloat(pathElement.getAttribute("stroke-width") || "1"),
+    borderOpacity: parseFloat(pathElement.getAttribute("stroke-opacity") || el.style.opacity || "1"),
     linkTo: el.getAttribute("data-link-to") || undefined
   };
 }
@@ -43157,7 +43144,7 @@ class DrawingHTMLRenderer {
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData(drawing));
     pathElement.setAttribute("stroke", resolveColor(drawing.borderColor, conf.theme, drawing.colorRole));
-    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.getStrokeOpacity()}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -44220,7 +44207,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.renderWithOpacity?.(context) ?? item.render(context);
+      item.render(context);
     });
   }
 }
@@ -60537,7 +60524,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.renderWithOpacity?.(context) ?? item.render(context);
+    item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -62992,6 +62979,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  borderOpacity: exports_external.number().optional(),
   opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
@@ -63009,6 +62997,7 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -63027,7 +63016,8 @@ class Drawing extends BaseItem {
       points,
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole
+      colorRole: this.colorRole,
+      borderOpacity: this.borderOpacity
     };
   }
   deserialize(data) {
@@ -63045,7 +63035,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
-    this.opacity = data.opacity ?? this.opacity;
+    this.borderOpacity = data.borderOpacity ?? data.opacity ?? this.borderOpacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -63160,6 +63150,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63289,7 +63280,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63299,7 +63290,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63345,7 +63336,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -64367,7 +64358,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.renderWithOpacity(context);
+      this.item.render(context);
       this.bounds.render(context);
     }
   }
@@ -68853,13 +68844,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.renderWithOpacity(context);
+            item.render(context);
             context.ctx.restore();
           } else {
-            item.renderWithOpacity(context);
+            item.render(context);
           }
         } else {
-          item.renderWithOpacity(context);
+          item.render(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }
@@ -73327,7 +73318,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/cjs/index.js

@@ -11945,7 +11945,6 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
-  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12298,7 +12297,6 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
-      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -12510,16 +12508,6 @@ 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();
   }
@@ -40931,9 +40919,7 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  const element2 = renderer.render(item, documentFactory);
-  element2.style.opacity = `${item.opacity}`;
-  return element2;
+  return renderer.render(item, documentFactory);
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -42703,6 +42689,7 @@ function parseHTMLDrawing(el) {
     transformation,
     strokeStyle: pathElement.getAttribute("stroke") || "",
     strokeWidth: parseFloat(pathElement.getAttribute("stroke-width") || "1"),
+    borderOpacity: parseFloat(pathElement.getAttribute("stroke-opacity") || el.style.opacity || "1"),
     linkTo: el.getAttribute("data-link-to") || undefined
   };
 }
@@ -43157,7 +43144,7 @@ class DrawingHTMLRenderer {
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData(drawing));
     pathElement.setAttribute("stroke", resolveColor(drawing.borderColor, conf.theme, drawing.colorRole));
-    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.getStrokeOpacity()}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -44220,7 +44207,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.renderWithOpacity?.(context) ?? item.render(context);
+      item.render(context);
     });
   }
 }
@@ -60537,7 +60524,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.renderWithOpacity?.(context) ?? item.render(context);
+    item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -62992,6 +62979,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  borderOpacity: exports_external.number().optional(),
   opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
@@ -63009,6 +62997,7 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -63027,7 +63016,8 @@ class Drawing extends BaseItem {
       points,
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole
+      colorRole: this.colorRole,
+      borderOpacity: this.borderOpacity
     };
   }
   deserialize(data) {
@@ -63045,7 +63035,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
-    this.opacity = data.opacity ?? this.opacity;
+    this.borderOpacity = data.borderOpacity ?? data.opacity ?? this.borderOpacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -63160,6 +63150,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63289,7 +63280,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63299,7 +63290,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63345,7 +63336,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -64367,7 +64358,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.renderWithOpacity(context);
+      this.item.render(context);
       this.bounds.render(context);
     }
   }
@@ -68853,13 +68844,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.renderWithOpacity(context);
+            item.render(context);
             context.ctx.restore();
           } else {
-            item.renderWithOpacity(context);
+            item.render(context);
           }
         } else {
-          item.renderWithOpacity(context);
+          item.render(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }
@@ -73327,7 +73318,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/cjs/node.js

@@ -12981,7 +12981,6 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
-  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -13334,7 +13333,6 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
-      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -13546,16 +13544,6 @@ 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();
   }
@@ -43403,9 +43391,7 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  const element = renderer.render(item, documentFactory);
-  element.style.opacity = `${item.opacity}`;
-  return element;
+  return renderer.render(item, documentFactory);
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -45175,6 +45161,7 @@ function parseHTMLDrawing(el) {
     transformation,
     strokeStyle: pathElement.getAttribute("stroke") || "",
     strokeWidth: parseFloat(pathElement.getAttribute("stroke-width") || "1"),
+    borderOpacity: parseFloat(pathElement.getAttribute("stroke-opacity") || el.style.opacity || "1"),
     linkTo: el.getAttribute("data-link-to") || undefined
   };
 }
@@ -45629,7 +45616,7 @@ class DrawingHTMLRenderer {
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData(drawing));
     pathElement.setAttribute("stroke", resolveColor(drawing.borderColor, conf.theme, drawing.colorRole));
-    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.getStrokeOpacity()}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -46692,7 +46679,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.renderWithOpacity?.(context) ?? item.render(context);
+      item.render(context);
     });
   }
 }
@@ -63010,7 +62997,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.renderWithOpacity?.(context) ?? item.render(context);
+    item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -65465,6 +65452,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  borderOpacity: exports_external.number().optional(),
   opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
@@ -65482,6 +65470,7 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -65500,7 +65489,8 @@ class Drawing extends BaseItem {
       points,
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole
+      colorRole: this.colorRole,
+      borderOpacity: this.borderOpacity
     };
   }
   deserialize(data) {
@@ -65518,7 +65508,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
-    this.opacity = data.opacity ?? this.opacity;
+    this.borderOpacity = data.borderOpacity ?? data.opacity ?? this.borderOpacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -65633,6 +65623,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -65762,7 +65753,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -65772,7 +65763,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -65818,7 +65809,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -66840,7 +66831,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.renderWithOpacity(context);
+      this.item.render(context);
       this.bounds.render(context);
     }
   }
@@ -71326,13 +71317,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.renderWithOpacity(context);
+            item.render(context);
             context.ctx.restore();
           } else {
-            item.renderWithOpacity(context);
+            item.render(context);
           }
         } else {
-          item.renderWithOpacity(context);
+          item.render(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }
@@ -75800,7 +75791,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/esm/browser.js

@@ -11719,7 +11719,6 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
-  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12072,7 +12071,6 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
-      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -12284,16 +12282,6 @@ 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();
   }
@@ -40713,9 +40701,7 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  const element2 = renderer.render(item, documentFactory);
-  element2.style.opacity = `${item.opacity}`;
-  return element2;
+  return renderer.render(item, documentFactory);
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -42485,6 +42471,7 @@ function parseHTMLDrawing(el) {
     transformation,
     strokeStyle: pathElement.getAttribute("stroke") || "",
     strokeWidth: parseFloat(pathElement.getAttribute("stroke-width") || "1"),
+    borderOpacity: parseFloat(pathElement.getAttribute("stroke-opacity") || el.style.opacity || "1"),
     linkTo: el.getAttribute("data-link-to") || undefined
   };
 }
@@ -42939,7 +42926,7 @@ class DrawingHTMLRenderer {
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData(drawing));
     pathElement.setAttribute("stroke", resolveColor(drawing.borderColor, conf.theme, drawing.colorRole));
-    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.getStrokeOpacity()}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -44002,7 +43989,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.renderWithOpacity?.(context) ?? item.render(context);
+      item.render(context);
     });
   }
 }
@@ -60319,7 +60306,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.renderWithOpacity?.(context) ?? item.render(context);
+    item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -62774,6 +62761,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  borderOpacity: exports_external.number().optional(),
   opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
@@ -62791,6 +62779,7 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -62809,7 +62798,8 @@ class Drawing extends BaseItem {
       points,
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole
+      colorRole: this.colorRole,
+      borderOpacity: this.borderOpacity
     };
   }
   deserialize(data) {
@@ -62827,7 +62817,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
-    this.opacity = data.opacity ?? this.opacity;
+    this.borderOpacity = data.borderOpacity ?? data.opacity ?? this.borderOpacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -62942,6 +62932,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63071,7 +63062,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63081,7 +63072,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63127,7 +63118,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -64149,7 +64140,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.renderWithOpacity(context);
+      this.item.render(context);
       this.bounds.render(context);
     }
   }
@@ -68635,13 +68626,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.renderWithOpacity(context);
+            item.render(context);
             context.ctx.restore();
           } else {
-            item.renderWithOpacity(context);
+            item.render(context);
           }
         } else {
-          item.renderWithOpacity(context);
+          item.render(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }
@@ -73109,7 +73100,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/esm/index.js

@@ -11712,7 +11712,6 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
-  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12065,7 +12064,6 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
-      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -12277,16 +12275,6 @@ 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();
   }
@@ -40706,9 +40694,7 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  const element2 = renderer.render(item, documentFactory);
-  element2.style.opacity = `${item.opacity}`;
-  return element2;
+  return renderer.render(item, documentFactory);
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -42478,6 +42464,7 @@ function parseHTMLDrawing(el) {
     transformation,
     strokeStyle: pathElement.getAttribute("stroke") || "",
     strokeWidth: parseFloat(pathElement.getAttribute("stroke-width") || "1"),
+    borderOpacity: parseFloat(pathElement.getAttribute("stroke-opacity") || el.style.opacity || "1"),
     linkTo: el.getAttribute("data-link-to") || undefined
   };
 }
@@ -42932,7 +42919,7 @@ class DrawingHTMLRenderer {
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData(drawing));
     pathElement.setAttribute("stroke", resolveColor(drawing.borderColor, conf.theme, drawing.colorRole));
-    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.getStrokeOpacity()}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -43995,7 +43982,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.renderWithOpacity?.(context) ?? item.render(context);
+      item.render(context);
     });
   }
 }
@@ -60312,7 +60299,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.renderWithOpacity?.(context) ?? item.render(context);
+    item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -62767,6 +62754,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  borderOpacity: exports_external.number().optional(),
   opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
@@ -62784,6 +62772,7 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -62802,7 +62791,8 @@ class Drawing extends BaseItem {
       points,
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole
+      colorRole: this.colorRole,
+      borderOpacity: this.borderOpacity
     };
   }
   deserialize(data) {
@@ -62820,7 +62810,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
-    this.opacity = data.opacity ?? this.opacity;
+    this.borderOpacity = data.borderOpacity ?? data.opacity ?? this.borderOpacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -62935,6 +62925,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63064,7 +63055,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63074,7 +63065,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63120,7 +63111,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -64142,7 +64133,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.renderWithOpacity(context);
+      this.item.render(context);
       this.bounds.render(context);
     }
   }
@@ -68628,13 +68619,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.renderWithOpacity(context);
+            item.render(context);
             context.ctx.restore();
           } else {
-            item.renderWithOpacity(context);
+            item.render(context);
           }
         } else {
-          item.renderWithOpacity(context);
+          item.render(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }
@@ -73102,7 +73093,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/esm/node.js

@@ -12495,7 +12495,6 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
-  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12848,7 +12847,6 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
-      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -13060,16 +13058,6 @@ 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();
   }
@@ -43173,9 +43161,7 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  const element = renderer.render(item, documentFactory);
-  element.style.opacity = `${item.opacity}`;
-  return element;
+  return renderer.render(item, documentFactory);
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -44945,6 +44931,7 @@ function parseHTMLDrawing(el) {
     transformation,
     strokeStyle: pathElement.getAttribute("stroke") || "",
     strokeWidth: parseFloat(pathElement.getAttribute("stroke-width") || "1"),
+    borderOpacity: parseFloat(pathElement.getAttribute("stroke-opacity") || el.style.opacity || "1"),
     linkTo: el.getAttribute("data-link-to") || undefined
   };
 }
@@ -45399,7 +45386,7 @@ class DrawingHTMLRenderer {
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData(drawing));
     pathElement.setAttribute("stroke", resolveColor(drawing.borderColor, conf.theme, drawing.colorRole));
-    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.getStrokeOpacity()}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -46462,7 +46449,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.renderWithOpacity?.(context) ?? item.render(context);
+      item.render(context);
     });
   }
 }
@@ -62780,7 +62767,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.renderWithOpacity?.(context) ?? item.render(context);
+    item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -65235,6 +65222,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  borderOpacity: exports_external.number().optional(),
   opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
@@ -65252,6 +65240,7 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -65270,7 +65259,8 @@ class Drawing extends BaseItem {
       points,
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole
+      colorRole: this.colorRole,
+      borderOpacity: this.borderOpacity
     };
   }
   deserialize(data) {
@@ -65288,7 +65278,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
-    this.opacity = data.opacity ?? this.opacity;
+    this.borderOpacity = data.borderOpacity ?? data.opacity ?? this.borderOpacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -65403,6 +65393,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -65532,7 +65523,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -65542,7 +65533,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -65588,7 +65579,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -66610,7 +66601,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.renderWithOpacity(context);
+      this.item.render(context);
       this.bounds.render(context);
     }
   }
@@ -71096,13 +71087,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.renderWithOpacity(context);
+            item.render(context);
             context.ctx.restore();
           } else {
-            item.renderWithOpacity(context);
+            item.render(context);
           }
         } else {
-          item.renderWithOpacity(context);
+          item.render(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }
@@ -75570,7 +75561,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

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

@@ -29,7 +29,6 @@ export interface BaseItemData {
     linkTo?: string;
     childIds?: string[];
     parent?: string;
-    opacity?: number;
     [key: string]: unknown;
 }
 export type SerializedItemData<T extends BaseItemData = BaseItemData> = T & {
@@ -54,7 +53,6 @@ export declare class BaseItem<T extends BaseItem<any> = any> implements Geometry
     shouldUseRelativeAlignment: boolean;
     resizeEnabled: boolean;
     onlyProportionalResize: boolean;
-    opacity: number;
     itemType: ItemType;
     childIds: string[];
     isHoverHighlighted: boolean;
@@ -158,7 +156,6 @@ 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/dist/types/Items/Drawing/Drawing.d.ts

@@ -23,6 +23,7 @@ export interface DrawingData {
     strokeStyle: ColorValue | string;
     strokeWidth: number;
     colorRole?: ColorRole;
+    borderOpacity?: number;
     opacity?: number;
     linkTo?: string;
     [key: string]: unknown;
@@ -39,6 +40,7 @@ export declare class Drawing extends BaseItem<Drawing> {
     borderStyle: BorderStyle;
     colorRole: ColorRole;
     private linePattern;
+    private borderOpacity;
     transformationRenderBlock?: boolean;
     points: Point[];
     constructor(board: Board, id?: string);

package/dist/types/Items/Drawing/Drawing.schema.d.ts

@@ -37,6 +37,7 @@ export declare const DrawingDataSchema: z.ZodObject<{
         background: "background";
         foreground: "foreground";
     }>>;
+    borderOpacity: z.ZodOptional<z.ZodNumber>;
     opacity: z.ZodOptional<z.ZodNumber>;
     linkTo: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;

package/package.json

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