microboard-temp 0.12.9 → 0.13.0

package/dist/cjs/browser.js

@@ -22211,6 +22211,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id = "", transformation = new Transformation(id, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id);
@@ -22504,11 +22506,8 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    if (this.customTransformationMatrix) {
+      return this.container.getTransformed(this.customTransformationMatrix());
     }
     return this.container.getTransformed(this.transformation.toMatrix());
   }
@@ -22879,7 +22878,9 @@ class RichText extends BaseItem {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    this.layoutNodes.render(ctx, autoSizeScale);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -23005,7 +23006,9 @@ class RichText extends BaseItem {
     };
     const elements = this.editor.editor.children.map(renderNode);
     const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getTransformedContainer().getWidth();
     const transformedHeight = this.getTransformedContainer().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -40933,11 +40936,11 @@ function convertBlobToDataUrl(blob) {
 }
 
 // src/Items/Frame/FrameData.ts
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -40982,7 +40985,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -41042,6 +41045,14 @@ class Frame2 extends BaseItem {
     this.linkTo = new LinkTo(this.id, board.events);
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
     this.text.setSelectionHorisontalAlignment("left");
+    this.text.customTransformationMatrix = () => {
+      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
+      const scaleY = this.getMbr().getHeight() * 2 / 10;
+      return new Matrix(translateX, translateY, scaleX, scaleY);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(5, 1 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();

package/dist/cjs/index.js

@@ -22211,6 +22211,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id = "", transformation = new Transformation(id, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id);
@@ -22504,11 +22506,8 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    if (this.customTransformationMatrix) {
+      return this.container.getTransformed(this.customTransformationMatrix());
     }
     return this.container.getTransformed(this.transformation.toMatrix());
   }
@@ -22879,7 +22878,9 @@ class RichText extends BaseItem {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    this.layoutNodes.render(ctx, autoSizeScale);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -23005,7 +23006,9 @@ class RichText extends BaseItem {
     };
     const elements = this.editor.editor.children.map(renderNode);
     const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getTransformedContainer().getWidth();
     const transformedHeight = this.getTransformedContainer().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -40933,11 +40936,11 @@ function convertBlobToDataUrl(blob) {
 }
 
 // src/Items/Frame/FrameData.ts
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -40982,7 +40985,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -41042,6 +41045,14 @@ class Frame2 extends BaseItem {
     this.linkTo = new LinkTo(this.id, board.events);
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
     this.text.setSelectionHorisontalAlignment("left");
+    this.text.customTransformationMatrix = () => {
+      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
+      const scaleY = this.getMbr().getHeight() * 2 / 10;
+      return new Matrix(translateX, translateY, scaleX, scaleY);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(5, 1 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();

package/dist/cjs/node.js

@@ -24683,6 +24683,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id = "", transformation = new Transformation(id, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id);
@@ -24976,11 +24978,8 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    if (this.customTransformationMatrix) {
+      return this.container.getTransformed(this.customTransformationMatrix());
     }
     return this.container.getTransformed(this.transformation.toMatrix());
   }
@@ -25351,7 +25350,9 @@ class RichText extends BaseItem {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    this.layoutNodes.render(ctx, autoSizeScale);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -25477,7 +25478,9 @@ class RichText extends BaseItem {
     };
     const elements = this.editor.editor.children.map(renderNode);
     const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getTransformedContainer().getWidth();
     const transformedHeight = this.getTransformedContainer().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -43406,11 +43409,11 @@ function convertBlobToDataUrl(blob) {
 }
 
 // src/Items/Frame/FrameData.ts
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -43455,7 +43458,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -43515,6 +43518,14 @@ class Frame2 extends BaseItem {
     this.linkTo = new LinkTo(this.id, board.events);
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
     this.text.setSelectionHorisontalAlignment("left");
+    this.text.customTransformationMatrix = () => {
+      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
+      const scaleY = this.getMbr().getHeight() * 2 / 10;
+      return new Matrix(translateX, translateY, scaleX, scaleY);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(5, 1 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();

package/dist/esm/browser.js

@@ -22040,6 +22040,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id = "", transformation = new Transformation(id, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id);
@@ -22333,11 +22335,8 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    if (this.customTransformationMatrix) {
+      return this.container.getTransformed(this.customTransformationMatrix());
     }
     return this.container.getTransformed(this.transformation.toMatrix());
   }
@@ -22708,7 +22707,9 @@ class RichText extends BaseItem {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    this.layoutNodes.render(ctx, autoSizeScale);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -22834,7 +22835,9 @@ class RichText extends BaseItem {
     };
     const elements = this.editor.editor.children.map(renderNode);
     const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getTransformedContainer().getWidth();
     const transformedHeight = this.getTransformedContainer().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -40762,11 +40765,11 @@ function convertBlobToDataUrl(blob) {
 }
 
 // src/Items/Frame/FrameData.ts
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -40811,7 +40814,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -40871,6 +40874,14 @@ class Frame2 extends BaseItem {
     this.linkTo = new LinkTo(this.id, board.events);
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
     this.text.setSelectionHorisontalAlignment("left");
+    this.text.customTransformationMatrix = () => {
+      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
+      const scaleY = this.getMbr().getHeight() * 2 / 10;
+      return new Matrix(translateX, translateY, scaleX, scaleY);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(5, 1 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();

package/dist/esm/index.js

@@ -22033,6 +22033,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id = "", transformation = new Transformation(id, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id);
@@ -22326,11 +22328,8 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    if (this.customTransformationMatrix) {
+      return this.container.getTransformed(this.customTransformationMatrix());
     }
     return this.container.getTransformed(this.transformation.toMatrix());
   }
@@ -22701,7 +22700,9 @@ class RichText extends BaseItem {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    this.layoutNodes.render(ctx, autoSizeScale);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -22827,7 +22828,9 @@ class RichText extends BaseItem {
     };
     const elements = this.editor.editor.children.map(renderNode);
     const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getTransformedContainer().getWidth();
     const transformedHeight = this.getTransformedContainer().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -40755,11 +40758,11 @@ function convertBlobToDataUrl(blob) {
 }
 
 // src/Items/Frame/FrameData.ts
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -40804,7 +40807,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -40864,6 +40867,14 @@ class Frame2 extends BaseItem {
     this.linkTo = new LinkTo(this.id, board.events);
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
     this.text.setSelectionHorisontalAlignment("left");
+    this.text.customTransformationMatrix = () => {
+      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
+      const scaleY = this.getMbr().getHeight() * 2 / 10;
+      return new Matrix(translateX, translateY, scaleX, scaleY);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(5, 1 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();

package/dist/esm/node.js

@@ -24500,6 +24500,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id = "", transformation = new Transformation(id, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id);
@@ -24793,11 +24795,8 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    if (this.customTransformationMatrix) {
+      return this.container.getTransformed(this.customTransformationMatrix());
     }
     return this.container.getTransformed(this.transformation.toMatrix());
   }
@@ -25168,7 +25167,9 @@ class RichText extends BaseItem {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    this.layoutNodes.render(ctx, autoSizeScale);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -25294,7 +25295,9 @@ class RichText extends BaseItem {
     };
     const elements = this.editor.editor.children.map(renderNode);
     const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getTransformedContainer().getWidth();
     const transformedHeight = this.getTransformedContainer().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -43223,11 +43226,11 @@ function convertBlobToDataUrl(blob) {
 }
 
 // src/Items/Frame/FrameData.ts
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -43272,7 +43275,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -43332,6 +43335,14 @@ class Frame2 extends BaseItem {
     this.linkTo = new LinkTo(this.id, board.events);
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
     this.text.setSelectionHorisontalAlignment("left");
+    this.text.customTransformationMatrix = () => {
+      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
+      const scaleY = this.getMbr().getHeight() * 2 / 10;
+      return new Matrix(translateX, translateY, scaleX, scaleY);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(5, 1 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();

package/dist/types/Items/Frame/FrameData.d.ts

@@ -3,11 +3,11 @@ import { RichTextData } from '../RichText';
 import { BorderStyle, BorderWidth } from '../Path';
 import { FrameType } from './Basic';
 import { ColorValue } from '../../..';
-export declare const FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+export declare const FRAME_BORDER_COLOR: import("../../..").SemanticColor;
 export declare const FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 export declare const FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 export declare const FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-export declare const FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+export declare const FRAME_TITLE_COLOR: import("../../..").SemanticColor;
 export declare const FRAME_TYPES: readonly [{
     readonly id: "Custom";
     readonly label: "Custom";

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

@@ -6,7 +6,7 @@ import { SelectionContext } from "../../Selection";
 import { DefaultTextStyles } from "../../Settings";
 import { Subject } from "../../Subject";
 import { BaseRange, BaseSelection, Descendant, Operation as SlateOp } from "slate";
-import { ItemType, Mbr, Point, RichTextData, Transformation } from "..";
+import { ItemType, Matrix, Mbr, Point, RichTextData, Transformation } from "..";
 import { HorisontalAlignment, VerticalAlignment } from "../Alignment";
 import { DrawingContext } from "../DrawingContext";
 import { LinkTo } from "../LinkTo/LinkTo";
@@ -52,6 +52,8 @@ export declare class RichText extends BaseItem {
     private _onLimitReached;
     private shrinkWidth;
     prevMbr: Mbr | null;
+    customTransformationMatrix?: () => Matrix;
+    renderingScale?: (cameraScale: number) => number;
     rtCounter: number;
     constructor(board: Board, container: Mbr, id?: string, transformation?: Transformation, linkTo?: LinkTo, placeholderText?: string, isInShape?: boolean, autoSize?: boolean, insideOf?: ItemType | undefined, initialTextStyles?: DefaultTextStyles);
     isClosed(): boolean;

package/dist/types/Items/RichText/editorHelpers/common/getParagraph.d.ts

@@ -1,5 +1,6 @@
+import type { ColorValue } from '../../../../Color/index.js';
 import { HorisontalAlignment } from '../../../Alignment.js';
 import { BlockNode } from '../../Editor/BlockNode.js';
 import { TextNode, TextStyle } from '../../Editor/TextNode.js';
-export declare function getParagraph(fontStyles: TextStyle[], fontColor: string, fontSize: number, fontFamily: string, defaultHorizontalAlignment: HorisontalAlignment, text: string): BlockNode[];
+export declare function getParagraph(fontStyles: TextStyle[], fontColor: string | ColorValue, fontSize: number, fontFamily: string, defaultHorizontalAlignment: HorisontalAlignment, text: string): BlockNode[];
 export declare function getParagraphWithPassedTextNode(textNode: TextNode): BlockNode[];

package/package.json

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