microboard-temp 0.14.28 → 0.14.30

package/dist/cjs/node.js

@@ -6293,7 +6293,7 @@ function mergeSetPropertyOperations(opA, opB) {
   }
   return {
     ...opB,
-    prevValue: opA.prevValue
+    prevValues: opA.prevValues
   };
 }
 function mergeBoardOperations(opA, opB) {
@@ -12981,7 +12981,6 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
-  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -13334,7 +13333,6 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
-      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -13546,16 +13544,6 @@ class BaseItem {
       this.index.render(context);
     }
   }
-  renderWithOpacity(context) {
-    if (this.opacity === 1) {
-      this.render(context);
-      return;
-    }
-    context.ctx.save();
-    context.ctx.globalAlpha *= this.opacity;
-    this.render(context);
-    context.ctx.restore();
-  }
   getSnapAnchorPoints() {
     return this.getMbr().getSnapAnchorPoints();
   }
@@ -28763,6 +28751,14 @@ var AudioOperationSchema = exports_external.object({
   item: StringArraySchema,
   url: exports_external.string()
 }).passthrough();
+var ItemSetPropertyOperationSchema = exports_external.object({
+  class: exports_external.literal("Item"),
+  method: exports_external.literal("setProperty"),
+  item: StringArraySchema,
+  property: exports_external.string(),
+  value: exports_external.unknown(),
+  prevValues: exports_external.array(exports_external.unknown())
+}).passthrough();
 var SocketOperationSchema = exports_external.union([
   UndoOperationSchema,
   RedoOperationSchema,
@@ -28782,7 +28778,8 @@ var SocketOperationSchema = exports_external.union([
   ...CommentOperationSchemas,
   ImageOperationSchema,
   VideoOperationSchema,
-  AudioOperationSchema
+  AudioOperationSchema,
+  ItemSetPropertyOperationSchema
 ]);
 var SocketBoardEventBodySchema = exports_external.object({
   eventId: exports_external.string(),
@@ -43403,9 +43400,7 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  const element = renderer.render(item, documentFactory);
-  element.style.opacity = `${item.opacity}`;
-  return element;
+  return renderer.render(item, documentFactory);
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -45175,6 +45170,7 @@ function parseHTMLDrawing(el) {
     transformation,
     strokeStyle: pathElement.getAttribute("stroke") || "",
     strokeWidth: parseFloat(pathElement.getAttribute("stroke-width") || "1"),
+    borderOpacity: parseFloat(pathElement.getAttribute("stroke-opacity") || el.style.opacity || "1"),
     linkTo: el.getAttribute("data-link-to") || undefined
   };
 }
@@ -45629,7 +45625,7 @@ class DrawingHTMLRenderer {
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData(drawing));
     pathElement.setAttribute("stroke", resolveColor(drawing.borderColor, conf.theme, drawing.colorRole));
-    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.getStrokeOpacity()}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -46692,7 +46688,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.renderWithOpacity?.(context) ?? item.render(context);
+      item.render(context);
     });
   }
 }
@@ -61447,7 +61443,7 @@ var addShapeToolOverlay = {
   createsItemType: "Shape",
   family: "shape",
   icon: {
-    ...overlayAssetIcon("src/Items/Shape/icons/Tool.icon.svg"),
+    ...symbolIcon("Shape"),
     state: {
       note: "UI may swap the top-level icon to the selected shape option when desired."
     }
@@ -63010,7 +63006,7 @@ async function exportBoardScreenshot({
   const { left, top, right, bottom } = selection;
   const inView = board.items.index.listEnclosedOrCrossedBy(left, top, right, bottom);
   for (const item of inView) {
-    item.renderWithOpacity?.(context) ?? item.render(context);
+    item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -65465,6 +65461,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  borderOpacity: exports_external.number().optional(),
   opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
@@ -65482,6 +65479,7 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -65500,7 +65498,8 @@ class Drawing extends BaseItem {
       points,
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole
+      colorRole: this.colorRole,
+      borderOpacity: this.borderOpacity
     };
   }
   deserialize(data) {
@@ -65518,7 +65517,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
-    this.opacity = data.opacity ?? this.opacity;
+    this.borderOpacity = data.borderOpacity ?? data.opacity ?? this.borderOpacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -65633,6 +65632,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -65762,7 +65762,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -65772,7 +65772,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -65818,7 +65818,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -66840,7 +66840,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.renderWithOpacity(context);
+      this.item.render(context);
       this.bounds.render(context);
     }
   }
@@ -69613,15 +69613,15 @@ class Keyboard {
   }
 }
 
-// src/HTMLAdapter/BoardHTMLAdapter.ts
-function parseHTML(el) {
+// src/HTMLAdapter/LegacyBoardHTMLAdapter.ts
+function parseLegacyHTML(el) {
   const parser = parsersHTML[el.tagName.toLowerCase()];
   if (!parser) {
     throw new Error(`Unknown element tag: ${el.tagName.toLowerCase()}`);
   }
   return parser(el);
 }
-function serializeBoardToHTML(board) {
+function serializeBoardToLegacyHTML(board) {
   const boardName = board.getName() || board.getBoardId();
   const items = board.index.items.getWholeHTML(conf.documentFactory);
   const itemsDiv = `<div id="items">${items}</div>`;
@@ -69647,14 +69647,14 @@ function serializeBoardToHTML(board) {
       </head>`.replace(/\t|\n/g, "");
   return `${head}${body}`;
 }
-function deserializeHTMLAndEmitToBoard(board, stringedHTML) {
+function deserializeLegacyHTMLAndEmitToBoard(board, stringedHTML) {
   const parser = conf.getDOMParser();
   const doc2 = parser.parseFromString(stringedHTML, "text/html");
   const items = doc2.body.querySelector("#items");
   if (items) {
     const idsMap = {};
     const addedConnectors = [];
-    const data = Array.from(items.children).map((el) => parseHTML(el));
+    const data = Array.from(items.children).map((el) => parseLegacyHTML(el));
     for (const parsedData of data) {
       if ("childrenMap" in parsedData) {
         const frameData = parsedData;
@@ -69702,14 +69702,14 @@ function deserializeHTMLAndEmitToBoard(board, stringedHTML) {
   }
   return [];
 }
-function deserializeHTMLToBoard(board, stringedHTML) {
+function deserializeLegacyHTMLToBoard(board, stringedHTML) {
   const parser = conf.getDOMParser();
   const doc2 = parser.parseFromString(stringedHTML, "text/html");
   const itemsDiv = doc2.body.querySelector("#items");
   if (!itemsDiv) {
     return;
   }
-  const items = Array.from(itemsDiv.children).map((el) => parseHTML(el));
+  const items = Array.from(itemsDiv.children).map((el) => parseLegacyHTML(el));
   board.index.clear();
   const createdConnectors = {};
   const createdGroups = {};
@@ -69750,6 +69750,20 @@ function deserializeHTMLToBoard(board, stringedHTML) {
   }
 }
 
+// src/HTMLAdapter/BoardHTMLAdapter.ts
+function parseHTML(el) {
+  return parseLegacyHTML(el);
+}
+function serializeBoardToHTML(board) {
+  return serializeBoardToLegacyHTML(board);
+}
+function deserializeHTMLAndEmitToBoard(board, stringedHTML) {
+  return deserializeLegacyHTMLAndEmitToBoard(board, stringedHTML);
+}
+function deserializeHTMLToBoard(board, stringedHTML) {
+  deserializeLegacyHTMLToBoard(board, stringedHTML);
+}
+
 // src/Presence/consts.ts
 var PRESENCE_COLORS = [
   "rgb(71,120,245)",
@@ -71326,13 +71340,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.renderWithOpacity(context);
+            item.render(context);
             context.ctx.restore();
           } else {
-            item.renderWithOpacity(context);
+            item.render(context);
           }
         } else {
-          item.renderWithOpacity(context);
+          item.render(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }
@@ -75800,7 +75814,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/protocol.js

@@ -14254,6 +14254,14 @@ var AudioOperationSchema = exports_external.object({
   item: StringArraySchema,
   url: exports_external.string()
 }).passthrough();
+var ItemSetPropertyOperationSchema = exports_external.object({
+  class: exports_external.literal("Item"),
+  method: exports_external.literal("setProperty"),
+  item: StringArraySchema,
+  property: exports_external.string(),
+  value: exports_external.unknown(),
+  prevValues: exports_external.array(exports_external.unknown())
+}).passthrough();
 var SocketOperationSchema = exports_external.union([
   UndoOperationSchema,
   RedoOperationSchema,
@@ -14273,7 +14281,8 @@ var SocketOperationSchema = exports_external.union([
   ...CommentOperationSchemas,
   ImageOperationSchema,
   VideoOperationSchema,
-  AudioOperationSchema
+  AudioOperationSchema,
+  ItemSetPropertyOperationSchema
 ]);
 var SocketBoardEventBodySchema = exports_external.object({
   eventId: exports_external.string(),

package/dist/esm/browser.js

@@ -5030,7 +5030,7 @@ function mergeSetPropertyOperations(opA, opB) {
   }
   return {
     ...opB,
-    prevValue: opA.prevValue
+    prevValues: opA.prevValues
   };
 }
 function mergeBoardOperations(opA, opB) {
@@ -11719,7 +11719,6 @@ class BaseItem {
   shouldUseRelativeAlignment = true;
   resizeEnabled = true;
   onlyProportionalResize = false;
-  opacity = 1;
   itemType = "";
   childIds = [];
   isHoverHighlighted = false;
@@ -12072,7 +12071,6 @@ class BaseItem {
       itemType: this.itemType,
       childIds: this.childIds,
       parent: this.parent,
-      opacity: this.opacity,
       resizeEnabled: this.resizeEnabled
     };
   }
@@ -12284,16 +12282,6 @@ class BaseItem {
       this.index.render(context);
     }
   }
-  renderWithOpacity(context) {
-    if (this.opacity === 1) {
-      this.render(context);
-      return;
-    }
-    context.ctx.save();
-    context.ctx.globalAlpha *= this.opacity;
-    this.render(context);
-    context.ctx.restore();
-  }
   getSnapAnchorPoints() {
     return this.getMbr().getSnapAnchorPoints();
   }
@@ -27501,6 +27489,14 @@ var AudioOperationSchema = exports_external.object({
   item: StringArraySchema,
   url: exports_external.string()
 }).passthrough();
+var ItemSetPropertyOperationSchema = exports_external.object({
+  class: exports_external.literal("Item"),
+  method: exports_external.literal("setProperty"),
+  item: StringArraySchema,
+  property: exports_external.string(),
+  value: exports_external.unknown(),
+  prevValues: exports_external.array(exports_external.unknown())
+}).passthrough();
 var SocketOperationSchema = exports_external.union([
   UndoOperationSchema,
   RedoOperationSchema,
@@ -27520,7 +27516,8 @@ var SocketOperationSchema = exports_external.union([
   ...CommentOperationSchemas,
   ImageOperationSchema,
   VideoOperationSchema,
-  AudioOperationSchema
+  AudioOperationSchema,
+  ItemSetPropertyOperationSchema
 ]);
 var SocketBoardEventBodySchema = exports_external.object({
   eventId: exports_external.string(),
@@ -40713,9 +40710,7 @@ function registerHTMLRenderer(itemType, renderer) {
 }
 function renderItemToHTML(item, documentFactory) {
   const renderer = renderers[item.itemType] || defaultRenderer;
-  const element2 = renderer.render(item, documentFactory);
-  element2.style.opacity = `${item.opacity}`;
-  return element2;
+  return renderer.render(item, documentFactory);
 }
 var defaultRenderer = {
   render(item, documentFactory) {
@@ -42485,6 +42480,7 @@ function parseHTMLDrawing(el) {
     transformation,
     strokeStyle: pathElement.getAttribute("stroke") || "",
     strokeWidth: parseFloat(pathElement.getAttribute("stroke-width") || "1"),
+    borderOpacity: parseFloat(pathElement.getAttribute("stroke-opacity") || el.style.opacity || "1"),
     linkTo: el.getAttribute("data-link-to") || undefined
   };
 }
@@ -42939,7 +42935,7 @@ class DrawingHTMLRenderer {
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData(drawing));
     pathElement.setAttribute("stroke", resolveColor(drawing.borderColor, conf.theme, drawing.colorRole));
-    pathElement.setAttribute("stroke-opacity", `${drawing.opacity}`);
+    pathElement.setAttribute("stroke-opacity", `${drawing.getStrokeOpacity()}`);
     pathElement.setAttribute("stroke-width", `${drawing.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg.appendChild(pathElement);
@@ -44002,7 +43998,7 @@ class SimpleSpatialIndex {
   }
   render(context) {
     this.itemsArray.forEach((item) => {
-      item.renderWithOpacity?.(context) ?? item.render(context);
+      item.render(context);
     });
   }
 }
@@ -58756,7 +58752,7 @@ var addShapeToolOverlay = {
   createsItemType: "Shape",
   family: "shape",
   icon: {
-    ...overlayAssetIcon("src/Items/Shape/icons/Tool.icon.svg"),
+    ...symbolIcon("Shape"),
     state: {
       note: "UI may swap the top-level icon to the selected shape option when desired."
     }
@@ -60319,7 +60315,7 @@ async function exportBoardScreenshot({
   const { left, top, right, bottom } = selection;
   const inView = board.items.index.listEnclosedOrCrossedBy(left, top, right, bottom);
   for (const item of inView) {
-    item.renderWithOpacity?.(context) ?? item.render(context);
+    item.render(context);
   }
   const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });
   const dataUrl = await convertBlobToDataUrl(blob);
@@ -62774,6 +62770,7 @@ var DrawingDataSchema = exports_external.object({
   strokeStyle: ColorValueSchema,
   strokeWidth: exports_external.number(),
   colorRole: exports_external.enum(["foreground", "background"]).optional(),
+  borderOpacity: exports_external.number().optional(),
   opacity: exports_external.number().optional(),
   linkTo: exports_external.string().optional()
 });
@@ -62791,6 +62788,7 @@ class Drawing extends BaseItem {
   borderStyle = "solid";
   colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+  borderOpacity = 1;
   transformationRenderBlock = undefined;
   points = [];
   constructor(board, id = "") {
@@ -62809,7 +62807,8 @@ class Drawing extends BaseItem {
       points,
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
-      colorRole: this.colorRole
+      colorRole: this.colorRole,
+      borderOpacity: this.borderOpacity
     };
   }
   deserialize(data) {
@@ -62827,7 +62826,7 @@ class Drawing extends BaseItem {
     if (data.colorRole) {
       this.colorRole = data.colorRole;
     }
-    this.opacity = data.opacity ?? this.opacity;
+    this.borderOpacity = data.borderOpacity ?? data.opacity ?? this.borderOpacity;
     this.updateVisuals({ method: "deserialize", class: this.itemType }, "FullRebuild" /* FullRebuild */);
     return this;
   }
@@ -62942,6 +62941,7 @@ class Drawing extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -63071,7 +63071,7 @@ class Drawing extends BaseItem {
       "borderColor",
       "strokeWidth",
       "borderStyle",
-      "opacity",
+      "borderOpacity",
       "colorRole",
       "strokeStyle"
     ];
@@ -63081,7 +63081,7 @@ class Drawing extends BaseItem {
     return super.getPropertyUpdateHint(property);
   }
   getStrokeOpacity() {
-    return this.opacity;
+    return this.borderOpacity;
   }
   getBorderStyle() {
     return this.borderStyle;
@@ -63127,7 +63127,7 @@ registerItem({
     itemType: "Drawing",
     points: [],
     borderColor: coerceColorValue("#000000"),
-    opacity: 1,
+    borderOpacity: 1,
     borderStyle: "solid",
     strokeWidth: 2,
     transformation: new DefaultTransformationData
@@ -64149,7 +64149,7 @@ class ShapeTool extends CustomTool {
   }
   render(context) {
     if (this.isDown) {
-      this.item.renderWithOpacity(context);
+      this.item.render(context);
       this.bounds.render(context);
     }
   }
@@ -66922,15 +66922,15 @@ class Keyboard {
   }
 }
 
-// src/HTMLAdapter/BoardHTMLAdapter.ts
-function parseHTML(el) {
+// src/HTMLAdapter/LegacyBoardHTMLAdapter.ts
+function parseLegacyHTML(el) {
   const parser = parsersHTML[el.tagName.toLowerCase()];
   if (!parser) {
     throw new Error(`Unknown element tag: ${el.tagName.toLowerCase()}`);
   }
   return parser(el);
 }
-function serializeBoardToHTML(board) {
+function serializeBoardToLegacyHTML(board) {
   const boardName = board.getName() || board.getBoardId();
   const items = board.index.items.getWholeHTML(conf.documentFactory);
   const itemsDiv = `<div id="items">${items}</div>`;
@@ -66956,14 +66956,14 @@ function serializeBoardToHTML(board) {
       </head>`.replace(/\t|\n/g, "");
   return `${head}${body}`;
 }
-function deserializeHTMLAndEmitToBoard(board, stringedHTML) {
+function deserializeLegacyHTMLAndEmitToBoard(board, stringedHTML) {
   const parser = conf.getDOMParser();
   const doc2 = parser.parseFromString(stringedHTML, "text/html");
   const items = doc2.body.querySelector("#items");
   if (items) {
     const idsMap = {};
     const addedConnectors = [];
-    const data = Array.from(items.children).map((el) => parseHTML(el));
+    const data = Array.from(items.children).map((el) => parseLegacyHTML(el));
     for (const parsedData of data) {
       if ("childrenMap" in parsedData) {
         const frameData = parsedData;
@@ -67011,14 +67011,14 @@ function deserializeHTMLAndEmitToBoard(board, stringedHTML) {
   }
   return [];
 }
-function deserializeHTMLToBoard(board, stringedHTML) {
+function deserializeLegacyHTMLToBoard(board, stringedHTML) {
   const parser = conf.getDOMParser();
   const doc2 = parser.parseFromString(stringedHTML, "text/html");
   const itemsDiv = doc2.body.querySelector("#items");
   if (!itemsDiv) {
     return;
   }
-  const items = Array.from(itemsDiv.children).map((el) => parseHTML(el));
+  const items = Array.from(itemsDiv.children).map((el) => parseLegacyHTML(el));
   board.index.clear();
   const createdConnectors = {};
   const createdGroups = {};
@@ -67059,6 +67059,20 @@ function deserializeHTMLToBoard(board, stringedHTML) {
   }
 }
 
+// src/HTMLAdapter/BoardHTMLAdapter.ts
+function parseHTML(el) {
+  return parseLegacyHTML(el);
+}
+function serializeBoardToHTML(board) {
+  return serializeBoardToLegacyHTML(board);
+}
+function deserializeHTMLAndEmitToBoard(board, stringedHTML) {
+  return deserializeLegacyHTMLAndEmitToBoard(board, stringedHTML);
+}
+function deserializeHTMLToBoard(board, stringedHTML) {
+  deserializeLegacyHTMLToBoard(board, stringedHTML);
+}
+
 // src/Presence/consts.ts
 var PRESENCE_COLORS = [
   "rgb(71,120,245)",
@@ -68635,13 +68649,13 @@ function createCanvasDrawer(board) {
           if (container2) {
             context.ctx.save();
             container2.getNestingMatrix().applyToContext(context.ctx);
-            item.renderWithOpacity(context);
+            item.render(context);
             context.ctx.restore();
           } else {
-            item.renderWithOpacity(context);
+            item.render(context);
           }
         } else {
-          item.renderWithOpacity(context);
+          item.render(context);
         }
         board2.selection.renderItemMbr(context, item, board2.camera.getMatrix().scaleX);
       }
@@ -73109,7 +73123,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({