microboard-temp 0.7.0 → 0.8.1

package/dist/cjs/browser.js

@@ -7211,7 +7211,7 @@ var conf = {
     "rgb(231, 232, 238)",
     "rgb(156, 156, 156)"
   ],
-  DEFAULT_STICKER_COLOR: "rgb(233, 208, 255)",
+  DEFAULT_STICKER_COLOR: semanticColor("contrastBlue"),
   STICKER_COLOR_NAMES: [
     "purple",
     "pink",
@@ -7421,7 +7421,7 @@ var conf = {
   DEFAULT_TEXT_STYLES: {
     fontFamily: "Manrope",
     fontSize: 14,
-    fontColor: "rgb(20, 21, 26)",
+    fontColor: semanticColor("contrastNeutral"),
     fontHighlight: "",
     lineHeight: 1.4,
     bold: false,
@@ -9105,7 +9105,7 @@ function getTextStyle(data) {
   const leafStyle = {
     fontStyle: "normal",
     fontWeight: "normal",
-    color: data.fontColor ?? "black",
+    color: data.fontColor ?? semanticColor("contrastNeutral"),
     backgroundColor: data.fontHighlight,
     fontSize: data.fontSize ?? 14,
     fontFamily: data.fontFamily ?? "Arial"
@@ -9565,7 +9565,7 @@ function fillHighlight(ctx, textBlock) {
     return;
   }
   const measure = textBlock.measure;
-  ctx.fillStyle = textBlock.style.backgroundColor;
+  ctx.fillStyle = resolveColor(textBlock.style.backgroundColor, conf.theme, "background");
   ctx.fillRect(textBlock.x, textBlock.y - measure.ascent, measure.width, measure.height);
 }
 function underline(ctx, textBlock) {
@@ -9577,14 +9577,13 @@ function underline(ctx, textBlock) {
   const style = textBlock.style;
   const measure = textBlock.measure;
   const width = measure.width - (textBlock.marginLeft || 0);
-  const color = style.color;
-  ctx.strokeStyle = color;
+  ctx.strokeStyle = resolveColor(style.color, conf.theme, "foreground");
   ctx.lineWidth = textBlock.fontSize / 14;
   ctx.beginPath();
   ctx.moveTo(x, y + 2 * textBlock.fontSize / 14);
   ctx.lineTo(x + width, y + 2 * textBlock.fontSize / 14);
   ctx.stroke();
-  ctx.strokeStyle = style.backgroundColor ?? "black";
+  ctx.strokeStyle = style.backgroundColor ? resolveColor(style.backgroundColor, conf.theme, "background") : "black";
   ctx.lineWidth = 2;
 }
 function cross(ctx, textBlock) {
@@ -9597,19 +9596,18 @@ function cross(ctx, textBlock) {
   const measure = textBlock.measure;
   const width = measure.width;
   const height = measure.height;
-  const color = style.color;
-  ctx.strokeStyle = color;
+  ctx.strokeStyle = resolveColor(style.color, conf.theme, "foreground");
   ctx.lineWidth = textBlock.fontSize / 14;
   ctx.beginPath();
   ctx.moveTo(x, y - height / 4);
   ctx.lineTo(x + width, y - height / 4);
   ctx.stroke();
-  ctx.strokeStyle = style.backgroundColor ?? "black";
+  ctx.strokeStyle = style.backgroundColor ? resolveColor(style.backgroundColor, conf.theme, "background") : "black";
   ctx.lineWidth = 2;
 }
 function fillText(ctx, textBlock) {
   const { text, style, x, y } = textBlock;
-  ctx.fillStyle = style.color;
+  ctx.fillStyle = resolveColor(style.color, conf.theme, "foreground");
   ctx.fillText(text, x, y);
   if (textBlock.listMark) {
     ctx.fillText(textBlock.listMark, x - measureText(textBlock.listMark, style).width - 4, y);
@@ -16896,7 +16894,7 @@ function setSelectionFontHighlight(editor, format, selectionContext) {
   }
   if (format === "none") {
     import_slate25.Editor.removeMark(editor, "fontHighlight");
-  } else if (marks.fontHighlight === format) {
+  } else if (typeof format === "string" && marks.fontHighlight === format) {
     import_slate25.Editor.removeMark(editor, "fontHighlight");
   } else {
     import_slate25.Editor.addMark(editor, "fontHighlight", format);
@@ -22651,8 +22649,8 @@ class RichText extends BaseItem {
             node2.underline ? "underline" : "",
             node2["line-through"] ? "line-through" : ""
           ].filter(Boolean).join(" "),
-          color: node2.fontColor || conf.DEFAULT_TEXT_STYLES.fontColor,
-          backgroundColor: node2.fontHighlight || conf.DEFAULT_TEXT_STYLES.fontHighlight,
+          color: node2.fontColor ? resolveColor(node2.fontColor, conf.theme, "foreground") : conf.DEFAULT_TEXT_STYLES.fontColor,
+          backgroundColor: node2.fontHighlight ? resolveColor(node2.fontHighlight, conf.theme, "background") : conf.DEFAULT_TEXT_STYLES.fontHighlight,
           fontSize: node2.fontSize ? `${node2.fontSize}px` : `${conf.DEFAULT_TEXT_STYLES.fontSize}px`,
           fontFamily: node2.fontFamily || conf.DEFAULT_TEXT_STYLES.fontFamily
         });
@@ -37817,6 +37815,12 @@ class Connector2 extends BaseItem {
     mbr.strokeWidth = 3;
     mbr.borderStyle = "solid";
     this.clipText(context);
+    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
+    this.lines.setBorderColor(resolvedLineColor);
+    this.startPointer.path.setBorderColor(resolvedLineColor);
+    this.startPointer.path.setBackgroundColor(resolvedLineColor);
+    this.endPointer.path.setBorderColor(resolvedLineColor);
+    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     if (!this.text.isRenderEnabled && this.board.selection.getContext() !== "EditTextUnderPointer") {
       this.lines.render(context);
     }
@@ -38098,17 +38102,11 @@ class Connector2 extends BaseItem {
     const endPoint = this.endPoint;
     this.lines = getLine(this.lineStyle, startPoint, endPoint, this.middlePoint).addConnectedItemType(this.itemType);
     this.startPointer = getStartPointer(startPoint, this.startPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
-    this.startPointer.path.setBorderColor(resolvedLineColor);
     this.startPointer.path.setBorderWidth(this.lineWidth);
-    this.startPointer.path.setBackgroundColor(resolvedLineColor);
     this.endPointer = getEndPointer(endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.endPointer.path.setBorderColor(resolvedLineColor);
     this.endPointer.path.setBorderWidth(this.lineWidth);
-    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     this.offsetLines();
     this.lines.setBorderWidth(this.lineWidth);
-    this.lines.setBorderColor(resolvedLineColor);
     this.lines.setBorderStyle(this.borderStyle);
     this.updateTitle();
   }
@@ -39888,7 +39886,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -39924,7 +39921,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(resolveColor(borderColor, conf.theme, "foreground"));
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -40032,6 +40028,8 @@ class Shape extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
+    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.render(context);
     this.text.render(context);
     if (this.getLinkTo()) {
@@ -40132,9 +40130,7 @@ class Shape extends BaseItem {
     this.text.setContainer(this.textContainer.copy());
     this.textContainer.transform(this.transformation.toMatrix());
     this.path.transform(this.transformation.toMatrix());
-    this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -40183,7 +40179,7 @@ class StickerData {
   linkTo;
   text;
   itemType = "Sticker";
-  constructor(backgroundColor = fixedColor(stickerColors["Sky Blue"]), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
+  constructor(backgroundColor = semanticColor("contrastBlue"), transformation = new DefaultTransformationData, linkTo, text5 = new DefaultRichTextData([], "center", undefined)) {
     this.backgroundColor = backgroundColor;
     this.transformation = transformation;
     this.linkTo = linkTo;
@@ -40321,7 +40317,6 @@ class Sticker extends BaseItem {
     this.stickerPath.transform(this.transformation.toMatrix());
     this.text.setContainer(this.textContainer.copy());
     this.textContainer.transform(this.transformation.toMatrix());
-    this.stickerPath.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.saveStickerData();
   }
   setId(id) {
@@ -40365,7 +40360,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -40412,6 +40406,7 @@ class Sticker extends BaseItem {
       return;
     }
     this.renderShadow(context);
+    this.stickerPath.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.stickerPath.render(context);
     this.text.render(context);
     if (this.getLinkTo()) {
@@ -40954,9 +40949,7 @@ class Frame2 extends BaseItem {
       this.path.transform(this.transformation.toMatrix());
       this.textContainer.transform(this.transformation.toMatrix());
     }
-    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -41107,7 +41100,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -41155,6 +41147,8 @@ class Frame2 extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
+    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.render(context);
     this.renderNewShape(context);
     if (this.getLinkTo()) {
@@ -42817,8 +42811,9 @@ class Drawing extends BaseItem {
   lines = [];
   linkTo;
   strokeWidth = 1;
-  borderColor = fixedColor(conf.PEN_DEFAULT_COLOR);
+  borderColor = semanticColor("contrastNeutral");
   borderStyle = "solid";
+  colorRole = "foreground";
   linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
   borderOpacity = 1;
   transformationRenderBlock = undefined;
@@ -42852,6 +42847,7 @@ class Drawing extends BaseItem {
       transformation: this.transformation.serialize(),
       strokeStyle: this.borderColor,
       strokeWidth: this.strokeWidth,
+      colorRole: this.colorRole,
       linkTo: this.linkTo.serialize()
     };
   }
@@ -42865,6 +42861,9 @@ class Drawing extends BaseItem {
     this.transformation.deserialize(data.transformation);
     this.borderColor = coerceColorValue(data.strokeStyle);
     this.strokeWidth = data.strokeWidth;
+    if (data.colorRole) {
+      this.colorRole = data.colorRole;
+    }
     this.updateGeometry();
     return this;
   }
@@ -42971,7 +42970,8 @@ class Drawing extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, "foreground");
+    ctx.strokeStyle = resolveColor(this.borderColor, conf.theme, this.colorRole);
+    ctx.globalAlpha = this.borderOpacity;
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
@@ -42998,7 +42998,8 @@ class Drawing extends BaseItem {
     svg3.setAttribute("style", "position: absolute; overflow: visible;");
     const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
     pathElement.setAttribute("d", this.getPathData());
-    pathElement.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, "foreground"));
+    pathElement.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, this.colorRole));
+    pathElement.setAttribute("stroke-opacity", `${this.borderOpacity}`);
     pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
     pathElement.setAttribute("fill", "none");
     svg3.appendChild(pathElement);
@@ -43154,6 +43155,13 @@ class Drawing extends BaseItem {
   getStrokeColor() {
     return this.borderColor;
   }
+  setColorRole(role) {
+    this.colorRole = role;
+    return this;
+  }
+  getColorRole() {
+    return this.colorRole;
+  }
   setStrokeWidth(width2) {
     this.emit({
       class: "Drawing",
@@ -44139,7 +44147,7 @@ class AddDrawing extends BoardTool {
   drawing = null;
   isDown = false;
   strokeWidth = conf.PEN_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.PEN_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastNeutral");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44194,6 +44202,9 @@ class AddDrawing extends BoardTool {
   isHighlighter() {
     return false;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("foreground");
+  }
   leftButtonDown() {
     if (this.strokeColor === "none") {
       return false;
@@ -44233,9 +44244,10 @@ class AddDrawing extends BoardTool {
     }
     const drawing = new Drawing(this.board, points);
     drawing.transformation.translateTo(x, y);
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     this.board.add(drawing).updateMbr();
     this.board.selection.removeAll();
     this.drawing = null;
@@ -44274,16 +44286,17 @@ class AddDrawing extends BoardTool {
       return;
     }
     const drawing = this.drawing;
-    drawing.setStrokeColor(this.strokeColor);
+    drawing.setStrokeColor(coerceColorValue(this.strokeColor));
     drawing.setStrokeWidth(this.strokeWidth);
     drawing.setBorderStyle(this.strokeStyle);
+    this.applyDrawingRole(drawing);
     drawing.render(context);
   }
 }
 // src/Tools/AddDrawing/AddHighlighter.ts
 class AddHighlighter extends AddDrawing {
   strokeWidth = conf.HIGHLIGHTER_INITIAL_STROKE_WIDTH;
-  strokeColor = conf.HIGHLIGHTER_DEFAULT_COLOR;
+  strokeColor = semanticColor("contrastGreen");
   strokeStyle = conf.PEN_STROKE_STYLE;
   constructor(board) {
     super(board);
@@ -44301,6 +44314,10 @@ class AddHighlighter extends AddDrawing {
   isHighlighter() {
     return true;
   }
+  applyDrawingRole(drawing) {
+    drawing.setColorRole("background");
+    drawing.setStrokeOpacity(0.5);
+  }
   updateSettings() {
     localStorage.setItem(conf.HIGHLIGHTER_SETTINGS_KEY, JSON.stringify({
       strokeWidth: this.strokeWidth,
@@ -44720,7 +44737,8 @@ class AddSticker extends BoardTool {
   }
   setCursor(color2) {
     if (conf.STICKER_COLOR_NAMES) {
-      const colorName = color2 ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(color2)] : undefined;
+      const cssColor = color2 ? resolveColor(color2, conf.theme, "background") : undefined;
+      const colorName = cssColor ? conf.STICKER_COLOR_NAMES[conf.STICKER_COLORS.indexOf(cssColor)] : undefined;
       this.board.pointer.setCursor(colorName ? `sticker-${colorName}` : "crosshair");
     } else {
       this.board.pointer.setCursor("crosshair");
@@ -44731,7 +44749,7 @@ class AddSticker extends BoardTool {
       class: "Sticker",
       method: "setBackgroundColor",
       item: [this.sticker.getId()],
-      backgroundColor: color2
+      backgroundColor: coerceColorValue(color2)
     });
     this.setCursor(color2);
     this.board.tools.publish();