microboard-temp 0.14.25 → 0.14.27

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
     };
   }
@@ -43143,7 +43145,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);
@@ -62978,6 +62980,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 +62997,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 +63010,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 +63033,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 +63148,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.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63277,7 +63278,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63287,7 +63288,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63333,7 +63334,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -73315,7 +73316,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
     };
   }
@@ -43143,7 +43145,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);
@@ -62978,6 +62980,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 +62997,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 +63010,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 +63033,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 +63148,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.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63277,7 +63278,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63287,7 +63288,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63333,7 +63334,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -73315,7 +73316,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
     };
   }
@@ -45615,7 +45617,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);
@@ -65451,6 +65453,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 +65470,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 +65483,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 +65506,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 +65621,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.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -65750,7 +65751,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -65760,7 +65761,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -65806,7 +65807,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -75788,7 +75789,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/overlayIconManifest.js

@@ -32,7 +32,7 @@ const overlayIconManifest = {
   "overlay-icons/Items/Dice/icons/Throw.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20d%3D%22M12%204a8%208%200%201%201-7.45%2011%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m6%2013%201.5%204L3.5%2016z%22%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Dice/icons/Tool.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%221.5%22%20fill%3D%22currentColor%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%221.5%22%20fill%3D%22currentColor%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%229%22%20r%3D%221.5%22%20fill%3D%22currentColor%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2215%22%20r%3D%221.5%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Drawing/icons/Eraser.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.16%206.38%202.03%2010.5l4.33%204.33h1.95l3.15-3.15zm1.17-1.18%205.31%205.31%202.36-2.36-5.31-5.31zm3.34%209.63h5a.83.83%200%201%201%200%201.67H9l-3.33.01L.26%2011.1a.83.83%200%200%201%200-1.18L9.1%201.08a.83.83%200%200%201%201.18%200l6.48%206.48a.83.83%200%200%201%200%201.18z%22%2F%3E%3C%2Fsvg%3E",
-  "overlay-icons/Items/Drawing/icons/Highlighter.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%2017.33A8.33%208.33%200%201%200%209%20.67a8.33%208.33%200%200%200%200%2016.66m2.72-2.24A6.66%206.66%200%200%201%209%2015.67a6.66%206.66%200%200%201-2.72-.58l.27-4.42h4.9zM6.5%209V7.22c0-.43.28-.81.68-.95l3-1c.65-.22%201.32.27%201.32.95V9h.6c.19%200%20.37.06.51.18.15.11.25.27.3.45l.18%202.66A6.65%206.65%200%200%200%2015.67%209%206.67%206.67%200%201%200%204.91%2014.3l.18-2.67c.04-.18.15-.34.29-.45A.83.83%200%200%201%205.9%209z%22%2F%3E%3C%2Fsvg%3E",
+  "overlay-icons/Items/Drawing/icons/Highlighter.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.7209%2015.0883C10.865%2015.4714%209.93767%2015.6686%209.00002%2015.6667C8.06237%2015.6686%207.13499%2015.4715%206.27919%2015.0883L6.55169%2010.6667H11.4484L11.7209%2015.0883ZM0.666687%209.00001C0.666687%2013.6025%204.39752%2017.3333%209.00002%2017.3333C13.6025%2017.3333%2017.3334%2013.6025%2017.3334%209.00001C17.3334%204.39751%2013.6025%200.666672%209.00002%200.666672C4.39752%200.666672%200.666687%204.39751%200.666687%209.00001ZM12.1%209.00001H11.5V6.22076C11.5%205.53821%2010.8313%205.05624%2010.1838%205.27208L7.18379%206.27208C6.77545%206.4082%206.50002%206.79033%206.50002%207.22076V9.00001H5.90002C5.71439%209.0002%205.53414%209.06236%205.38785%209.17664C5.24157%209.29092%205.13763%209.45077%205.09252%209.63084L4.79085%2014.17C3.72337%2013.3009%202.95109%2012.1226%202.58007%2010.797C2.20905%209.47141%202.25747%208.06345%202.71869%206.76646C3.17991%205.46947%204.03131%204.34706%205.15599%203.55333C6.28066%202.75961%207.62347%202.33349%209.00002%202.33349C10.3766%202.33349%2011.7194%202.75961%2012.8441%203.55333C13.9687%204.34706%2014.8201%205.46947%2015.2813%206.76646C15.7426%208.06345%2015.791%209.47141%2015.42%2010.797C15.0489%2012.1226%2014.2767%2013.3009%2013.2092%2014.17L12.9084%209.63084C12.8632%209.45063%2012.7591%209.29068%2012.6127%209.17638C12.4662%209.06209%2012.2858%209.00001%2012.1%209.00001Z%22%20%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Drawing/icons/Pen.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13.95%204.12a3.82%203.82%200%200%201%205.4%205.41l-8.56%208.58h8.77a.94.94%200%201%201%200%201.89H4.44a.94.94%200%200%201-.94-.94v-4.08c0-.25.1-.49.28-.67zM8.12%2018.11l7.48-7.5-2.73-2.74-7.48%207.5v2.74zm6.09-11.58%202.73%202.74%201.08-1.08a1.93%201.93%200%200%200-2.73-2.74z%22%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Frame/Basic/1-1/1-1.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%221.5%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Frame/Basic/16-9/16-9.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%2216%22%20height%3D%229%22%20rx%3D%221.5%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E",

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
     };
   }
@@ -42925,7 +42927,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);
@@ -62760,6 +62762,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 +62779,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 +62792,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 +62815,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 +62930,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.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63059,7 +63060,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63069,7 +63070,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63115,7 +63116,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -73097,7 +73098,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
     };
   }
@@ -42918,7 +42920,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);
@@ -62753,6 +62755,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 +62772,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 +62785,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 +62808,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 +62923,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.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63052,7 +63053,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63062,7 +63063,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63108,7 +63109,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -73090,7 +73091,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
     };
   }
@@ -45385,7 +45387,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);
@@ -65221,6 +65223,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 +65240,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 +65253,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 +65276,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 +65391,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.globalAlpha = this.opacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -65520,7 +65521,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "borderOpacity",
+      "opacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -65530,7 +65531,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.borderOpacity;
+    return this.opacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -65576,7 +65577,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    borderOpacity: 1,
+    opacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -75558,7 +75559,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/overlayIconManifest.js

@@ -31,7 +31,7 @@ export const overlayIconManifest = {
   "overlay-icons/Items/Dice/icons/Throw.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20d%3D%22M12%204a8%208%200%201%201-7.45%2011%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m6%2013%201.5%204L3.5%2016z%22%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Dice/icons/Tool.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%223%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%221.5%22%20fill%3D%22currentColor%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%221.5%22%20fill%3D%22currentColor%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%229%22%20r%3D%221.5%22%20fill%3D%22currentColor%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2215%22%20r%3D%221.5%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Drawing/icons/Eraser.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.16%206.38%202.03%2010.5l4.33%204.33h1.95l3.15-3.15zm1.17-1.18%205.31%205.31%202.36-2.36-5.31-5.31zm3.34%209.63h5a.83.83%200%201%201%200%201.67H9l-3.33.01L.26%2011.1a.83.83%200%200%201%200-1.18L9.1%201.08a.83.83%200%200%201%201.18%200l6.48%206.48a.83.83%200%200%201%200%201.18z%22%2F%3E%3C%2Fsvg%3E",
-  "overlay-icons/Items/Drawing/icons/Highlighter.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%2017.33A8.33%208.33%200%201%200%209%20.67a8.33%208.33%200%200%200%200%2016.66m2.72-2.24A6.66%206.66%200%200%201%209%2015.67a6.66%206.66%200%200%201-2.72-.58l.27-4.42h4.9zM6.5%209V7.22c0-.43.28-.81.68-.95l3-1c.65-.22%201.32.27%201.32.95V9h.6c.19%200%20.37.06.51.18.15.11.25.27.3.45l.18%202.66A6.65%206.65%200%200%200%2015.67%209%206.67%206.67%200%201%200%204.91%2014.3l.18-2.67c.04-.18.15-.34.29-.45A.83.83%200%200%201%205.9%209z%22%2F%3E%3C%2Fsvg%3E",
+  "overlay-icons/Items/Drawing/icons/Highlighter.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.7209%2015.0883C10.865%2015.4714%209.93767%2015.6686%209.00002%2015.6667C8.06237%2015.6686%207.13499%2015.4715%206.27919%2015.0883L6.55169%2010.6667H11.4484L11.7209%2015.0883ZM0.666687%209.00001C0.666687%2013.6025%204.39752%2017.3333%209.00002%2017.3333C13.6025%2017.3333%2017.3334%2013.6025%2017.3334%209.00001C17.3334%204.39751%2013.6025%200.666672%209.00002%200.666672C4.39752%200.666672%200.666687%204.39751%200.666687%209.00001ZM12.1%209.00001H11.5V6.22076C11.5%205.53821%2010.8313%205.05624%2010.1838%205.27208L7.18379%206.27208C6.77545%206.4082%206.50002%206.79033%206.50002%207.22076V9.00001H5.90002C5.71439%209.0002%205.53414%209.06236%205.38785%209.17664C5.24157%209.29092%205.13763%209.45077%205.09252%209.63084L4.79085%2014.17C3.72337%2013.3009%202.95109%2012.1226%202.58007%2010.797C2.20905%209.47141%202.25747%208.06345%202.71869%206.76646C3.17991%205.46947%204.03131%204.34706%205.15599%203.55333C6.28066%202.75961%207.62347%202.33349%209.00002%202.33349C10.3766%202.33349%2011.7194%202.75961%2012.8441%203.55333C13.9687%204.34706%2014.8201%205.46947%2015.2813%206.76646C15.7426%208.06345%2015.791%209.47141%2015.42%2010.797C15.0489%2012.1226%2014.2767%2013.3009%2013.2092%2014.17L12.9084%209.63084C12.8632%209.45063%2012.7591%209.29068%2012.6127%209.17638C12.4662%209.06209%2012.2858%209.00001%2012.1%209.00001Z%22%20%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Drawing/icons/Pen.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%20%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13.95%204.12a3.82%203.82%200%200%201%205.4%205.41l-8.56%208.58h8.77a.94.94%200%201%201%200%201.89H4.44a.94.94%200%200%201-.94-.94v-4.08c0-.25.1-.49.28-.67zM8.12%2018.11l7.48-7.5-2.73-2.74-7.48%207.5v2.74zm6.09-11.58%202.73%202.74%201.08-1.08a1.93%201.93%200%200%200-2.73-2.74z%22%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Frame/Basic/1-1/1-1.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%226%22%20y%3D%226%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%221.5%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E",
   "overlay-icons/Items/Frame/Basic/16-9/16-9.icon.svg": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%224%22%20y%3D%227%22%20width%3D%2216%22%20height%3D%229%22%20rx%3D%221.5%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E",

package/dist/overlay-icons/Items/Drawing/icons/Highlighter.icon.svg

@@ -1,3 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none">
-  <path fill="currentColor" d="M9 17.33A8.33 8.33 0 1 0 9 .67a8.33 8.33 0 0 0 0 16.66m2.72-2.24A6.66 6.66 0 0 1 9 15.67a6.66 6.66 0 0 1-2.72-.58l.27-4.42h4.9zM6.5 9V7.22c0-.43.28-.81.68-.95l3-1c.65-.22 1.32.27 1.32.95V9h.6c.19 0 .37.06.51.18.15.11.25.27.3.45l.18 2.66A6.65 6.65 0 0 0 15.67 9 6.67 6.67 0 1 0 4.91 14.3l.18-2.67c.04-.18.15-.34.29-.45A.83.83 0 0 1 5.9 9z"/>
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M11.7209 15.0883C10.865 15.4714 9.93767 15.6686 9.00002 15.6667C8.06237 15.6686 7.13499 15.4715 6.27919 15.0883L6.55169 10.6667H11.4484L11.7209 15.0883ZM0.666687 9.00001C0.666687 13.6025 4.39752 17.3333 9.00002 17.3333C13.6025 17.3333 17.3334 13.6025 17.3334 9.00001C17.3334 4.39751 13.6025 0.666672 9.00002 0.666672C4.39752 0.666672 0.666687 4.39751 0.666687 9.00001ZM12.1 9.00001H11.5V6.22076C11.5 5.53821 10.8313 5.05624 10.1838 5.27208L7.18379 6.27208C6.77545 6.4082 6.50002 6.79033 6.50002 7.22076V9.00001H5.90002C5.71439 9.0002 5.53414 9.06236 5.38785 9.17664C5.24157 9.29092 5.13763 9.45077 5.09252 9.63084L4.79085 14.17C3.72337 13.3009 2.95109 12.1226 2.58007 10.797C2.20905 9.47141 2.25747 8.06345 2.71869 6.76646C3.17991 5.46947 4.03131 4.34706 5.15599 3.55333C6.28066 2.75961 7.62347 2.33349 9.00002 2.33349C10.3766 2.33349 11.7194 2.75961 12.8441 3.55333C13.9687 4.34706 14.8201 5.46947 15.2813 6.76646C15.7426 8.06345 15.791 9.47141 15.42 10.797C15.0489 12.1226 14.2767 13.3009 13.2092 14.17L12.9084 9.63084C12.8632 9.45063 12.7591 9.29068 12.6127 9.17638C12.4662 9.06209 12.2858 9.00001 12.1 9.00001Z"
+  />
 </svg>

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;

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