microboard-temp 0.14.27 → 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
     };
   }
@@ -42691,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
   };
 }
@@ -43145,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);
@@ -62980,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()
 });
@@ -62997,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 = "") {
@@ -63015,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) {
@@ -63033,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;
   }
@@ -63148,7 +63150,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63278,7 +63280,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63288,7 +63290,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63334,7 +63336,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -73316,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
     };
   }
@@ -42691,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
   };
 }
@@ -43145,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);
@@ -62980,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()
 });
@@ -62997,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 = "") {
@@ -63015,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) {
@@ -63033,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;
   }
@@ -63148,7 +63150,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63278,7 +63280,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63288,7 +63290,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63334,7 +63336,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -73316,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
     };
   }
@@ -45163,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
   };
 }
@@ -45617,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);
@@ -65453,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()
 });
@@ -65470,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 = "") {
@@ -65488,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) {
@@ -65506,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;
   }
@@ -65621,7 +65623,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -65751,7 +65753,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -65761,7 +65763,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -65807,7 +65809,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -75789,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
     };
   }
@@ -42473,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
   };
 }
@@ -42927,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);
@@ -62762,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()
 });
@@ -62779,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 = "") {
@@ -62797,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) {
@@ -62815,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;
   }
@@ -62930,7 +62932,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63060,7 +63062,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63070,7 +63072,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63116,7 +63118,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -73098,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
     };
   }
@@ -42466,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
   };
 }
@@ -42920,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);
@@ -62755,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()
 });
@@ -62772,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 = "") {
@@ -62790,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) {
@@ -62808,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;
   }
@@ -62923,7 +62925,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63053,7 +63055,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63063,7 +63065,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63109,7 +63111,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -73091,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
     };
   }
@@ -44933,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
   };
 }
@@ -45387,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);
@@ -65223,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()
 });
@@ -65240,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 = "") {
@@ -65258,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) {
@@ -65276,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;
   }
@@ -65391,7 +65393,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
-    ctx.globalAlpha = this.opacity;
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -65521,7 +65523,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -65531,7 +65533,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -65577,7 +65579,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -75559,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;

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.27",
+  "version": "0.14.29",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",