microboard-temp 0.12.9 → 0.13.1

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,13 +22506,17 @@ 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);
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22851,7 +22857,9 @@ class RichText extends BaseItem {
     this.insideOf = data.insideOf;
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
-        this.updateElement();
+        this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+        this.transformCanvas();
       });
     }
     this.subject.publish(this);
@@ -22868,12 +22876,11 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX * extraScale, scaleY * extraScale);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23004,10 +23011,12 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     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 transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -40933,11 +40942,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 +40991,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 +41051,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.text.layoutNodes.height * scaleX / 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,13 +22506,17 @@ 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);
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22851,7 +22857,9 @@ class RichText extends BaseItem {
     this.insideOf = data.insideOf;
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
-        this.updateElement();
+        this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+        this.transformCanvas();
       });
     }
     this.subject.publish(this);
@@ -22868,12 +22876,11 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX * extraScale, scaleY * extraScale);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23004,10 +23011,12 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     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 transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -40933,11 +40942,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 +40991,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 +41051,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.text.layoutNodes.height * scaleX / 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,13 +24978,17 @@ 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);
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -25323,7 +25329,9 @@ class RichText extends BaseItem {
     this.insideOf = data.insideOf;
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
-        this.updateElement();
+        this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+        this.transformCanvas();
       });
     }
     this.subject.publish(this);
@@ -25340,12 +25348,11 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX * extraScale, scaleY * extraScale);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -25476,10 +25483,12 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     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 transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -43406,11 +43415,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 +43464,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 +43524,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.text.layoutNodes.height * scaleX / 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,13 +22335,17 @@ 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);
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22680,7 +22686,9 @@ class RichText extends BaseItem {
     this.insideOf = data.insideOf;
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
-        this.updateElement();
+        this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+        this.transformCanvas();
       });
     }
     this.subject.publish(this);
@@ -22697,12 +22705,11 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX * extraScale, scaleY * extraScale);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -22833,10 +22840,12 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     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 transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -40762,11 +40771,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 +40820,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 +40880,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.text.layoutNodes.height * scaleX / 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,13 +22328,17 @@ 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);
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22673,7 +22679,9 @@ class RichText extends BaseItem {
     this.insideOf = data.insideOf;
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
-        this.updateElement();
+        this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+        this.transformCanvas();
       });
     }
     this.subject.publish(this);
@@ -22690,12 +22698,11 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX * extraScale, scaleY * extraScale);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -22826,10 +22833,12 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     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 transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -40755,11 +40764,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 +40813,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 +40873,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.text.layoutNodes.height * scaleX / 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,13 +24795,17 @@ 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);
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -25140,7 +25146,9 @@ class RichText extends BaseItem {
     this.insideOf = data.insideOf;
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
-        this.updateElement();
+        this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+        this.transformCanvas();
       });
     }
     this.subject.publish(this);
@@ -25157,12 +25165,11 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX * extraScale, scaleY * extraScale);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -25293,10 +25300,12 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     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 transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -43223,11 +43232,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 +43281,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 +43341,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.text.layoutNodes.height * scaleX / 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,10 +6,11 @@ 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";
+import { LayoutBlockNodes } from "./CanvasText/LayoutBlockNodes";
 import { BlockNode, BlockType } from "./Editor/BlockNode";
 import { TextStyle } from "./Editor/TextNode";
 import { EditorContainer } from "./EditorContainer";
@@ -37,7 +38,7 @@ export declare class RichText extends BaseItem {
     readonly editorEditor: import("slate").EditorInterface;
     private isContainerSet;
     isRenderEnabled: boolean;
-    private layoutNodes;
+    layoutNodes: LayoutBlockNodes;
     private clipPath;
     private updateRequired;
     private autoSizeScale;
@@ -52,6 +53,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.1",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",