microboard-temp 0.14.26 → 0.14.28

package/dist/cjs/browser.js

@@ -11945,6 +11945,7 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
+  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12297,6 +12298,7 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
+      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -12508,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();
   }
@@ -40919,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) {
@@ -43143,7 +43157,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.borderOpacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -44206,7 +44220,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -60523,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);
@@ -62978,6 +62992,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
 
@@ -62994,7 +63009,6 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
-  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -63008,14 +63022,12 @@ class Drawing extends BaseItem {
       points.push({ x: point5.x, y: point5.y });
     }
     return {
-      id: this.id,
+      ...super.serialize(),
       itemType: "Drawing",
       points,
-      transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole,
-      linkTo: this.linkTo.serialize()
+      colorRole: this.colorRole
     };
   }
   deserialize(data) {
@@ -63033,6 +63045,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
+    this.opacity = data.opacity ?? this.opacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -63147,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.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63277,7 +63289,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63287,7 +63299,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63333,7 +63345,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -64355,7 +64367,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -68841,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);
       }
@@ -73315,7 +73327,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/cjs/index.js

@@ -11945,6 +11945,7 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
+  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12297,6 +12298,7 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
+      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -12508,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();
   }
@@ -40919,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) {
@@ -43143,7 +43157,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.borderOpacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -44206,7 +44220,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -60523,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);
@@ -62978,6 +62992,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
 
@@ -62994,7 +63009,6 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
-  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -63008,14 +63022,12 @@ class Drawing extends BaseItem {
       points.push({ x: point5.x, y: point5.y });
     }
     return {
-      id: this.id,
+      ...super.serialize(),
       itemType: "Drawing",
       points,
-      transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole,
-      linkTo: this.linkTo.serialize()
+      colorRole: this.colorRole
     };
   }
   deserialize(data) {
@@ -63033,6 +63045,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
+    this.opacity = data.opacity ?? this.opacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -63147,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.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63277,7 +63289,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63287,7 +63299,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63333,7 +63345,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -64355,7 +64367,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -68841,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);
       }
@@ -73315,7 +73327,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/cjs/node.js

@@ -12981,6 +12981,7 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
+  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -13333,6 +13334,7 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
+      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -13544,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();
   }
@@ -43391,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) {
@@ -45615,7 +45629,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.borderOpacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -46678,7 +46692,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -62996,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);
@@ -65451,6 +65465,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
 
@@ -65467,7 +65482,6 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
-  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -65481,14 +65495,12 @@ class Drawing extends BaseItem {
       points.push({ x: point5.x, y: point5.y });
     }
     return {
-      id: this.id,
+      ...super.serialize(),
       itemType: "Drawing",
       points,
-      transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole,
-      linkTo: this.linkTo.serialize()
+      colorRole: this.colorRole
     };
   }
   deserialize(data) {
@@ -65506,6 +65518,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
+    this.opacity = data.opacity ?? this.opacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -65620,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.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -65750,7 +65762,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -65760,7 +65772,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -65806,7 +65818,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -66828,7 +66840,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -71314,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);
       }
@@ -75788,7 +75800,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/esm/browser.js

@@ -11719,6 +11719,7 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
+  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12071,6 +12072,7 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
+      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -12282,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();
   }
@@ -40701,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) {
@@ -42925,7 +42939,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.borderOpacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -43988,7 +44002,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -60305,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);
@@ -62760,6 +62774,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
 
@@ -62776,7 +62791,6 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
-  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -62790,14 +62804,12 @@ class Drawing extends BaseItem {
       points.push({ x: point5.x, y: point5.y });
     }
     return {
-      id: this.id,
+      ...super.serialize(),
       itemType: "Drawing",
       points,
-      transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole,
-      linkTo: this.linkTo.serialize()
+      colorRole: this.colorRole
     };
   }
   deserialize(data) {
@@ -62815,6 +62827,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
+    this.opacity = data.opacity ?? this.opacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -62929,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.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63059,7 +63071,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63069,7 +63081,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63115,7 +63127,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -64137,7 +64149,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -68623,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);
       }
@@ -73097,7 +73109,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/esm/index.js

@@ -11712,6 +11712,7 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
+  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12064,6 +12065,7 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
+      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -12275,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();
   }
@@ -40694,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) {
@@ -42918,7 +42932,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.borderOpacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -43981,7 +43995,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -60298,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);
@@ -62753,6 +62767,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
 
@@ -62769,7 +62784,6 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
-  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -62783,14 +62797,12 @@ class Drawing extends BaseItem {
       points.push({ x: point5.x, y: point5.y });
     }
     return {
-      id: this.id,
+      ...super.serialize(),
       itemType: "Drawing",
       points,
-      transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole,
-      linkTo: this.linkTo.serialize()
+      colorRole: this.colorRole
     };
   }
   deserialize(data) {
@@ -62808,6 +62820,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
+    this.opacity = data.opacity ?? this.opacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -62922,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.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63052,7 +63064,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63062,7 +63074,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63108,7 +63120,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -64130,7 +64142,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -68616,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);
       }
@@ -73090,7 +73102,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

package/dist/esm/node.js

@@ -12495,6 +12495,7 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
+  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12847,6 +12848,7 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
+      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -13058,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();
   }
@@ -43161,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) {
@@ -45385,7 +45399,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.borderOpacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -46448,7 +46462,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.render(context);
+      item.renderWithOpacity?.(context) ?? item.render(context);
     });
   }
 }
@@ -62766,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);
@@ -65221,6 +65235,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
 
@@ -65237,7 +65252,6 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
-  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -65251,14 +65265,12 @@ class Drawing extends BaseItem {
       points.push({ x: point5.x, y: point5.y });
     }
     return {
-      id: this.id,
+      ...super.serialize(),
       itemType: "Drawing",
       points,
-      transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole,
-      linkTo: this.linkTo.serialize()
+      colorRole: this.colorRole
     };
   }
   deserialize(data) {
@@ -65276,6 +65288,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
+    this.opacity = data.opacity ?? this.opacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -65390,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.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -65520,7 +65532,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -65530,7 +65542,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -65576,7 +65588,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -66598,7 +66610,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.render(context);
+      this.item.renderWithOpacity(context);
       this.bounds.render(context);
     }
   }
@@ -71084,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);
       }
@@ -75558,7 +75570,7 @@ class AddHighlighter extends AddDrawing {
   }
   applyDrawingRole(drawing) {
     drawing.setColorRole("background");
-    drawing.apply(propertyOps.setProperty([drawing], "borderOpacity", 0.5));
+    drawing.apply(propertyOps.setProperty([drawing], "opacity", 0.5));
   }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({

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

@@ -29,6 +29,7 @@ export interface BaseItemData {
     linkTo?: string;
     childIds?: string[];
     parent?: string;
+    opacity?: number;
     [key: string]: unknown;
 }
 export type SerializedItemData<T extends BaseItemData = BaseItemData> = T & {
@@ -53,6 +54,7 @@ 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;
@@ -156,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/dist/types/Items/Drawing/Drawing.d.ts

@@ -23,6 +23,7 @@ export interface DrawingData {
     strokeStyle: ColorValue | string;
     strokeWidth: number;
     colorRole?: ColorRole;
+    opacity?: number;
     linkTo?: string;
     [key: string]: unknown;
 }
@@ -38,7 +39,6 @@ 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";
     }>>;
+    opacity: z.ZodOptional<z.ZodNumber>;
     linkTo: z.ZodOptional<z.ZodString>;
 }, z.core.$strip>;
 export type DrawingData = z.infer<typeof DrawingDataSchema>;

package/package.json

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