microboard-temp 0.13.0 → 0.13.2

package/dist/cjs/browser.js

@@ -22506,10 +22506,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
     if (this.customTransformationMatrix) {
-      return this.container.getTransformed(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, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22850,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);
@@ -22867,20 +22876,25 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
-    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 cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    context.matrix = scaledMatrix;
+    context.applyChanges();
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    const cameraScale = context.getCameraScale();
-    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
-    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
+    this.layoutNodes.render(ctx, autoSizeScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -23005,12 +23019,19 @@ 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 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();
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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`;
@@ -41046,9 +41067,8 @@ class Frame2 extends BaseItem {
     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);
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
     };
     this.text.renderingScale = (cameraScale) => {
       return Math.max(1, Math.min(5, 1 / cameraScale));

package/dist/cjs/index.js

@@ -22506,10 +22506,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
     if (this.customTransformationMatrix) {
-      return this.container.getTransformed(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, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22850,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);
@@ -22867,20 +22876,25 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
-    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 cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    context.matrix = scaledMatrix;
+    context.applyChanges();
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    const cameraScale = context.getCameraScale();
-    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
-    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
+    this.layoutNodes.render(ctx, autoSizeScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -23005,12 +23019,19 @@ 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 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();
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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`;
@@ -41046,9 +41067,8 @@ class Frame2 extends BaseItem {
     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);
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
     };
     this.text.renderingScale = (cameraScale) => {
       return Math.max(1, Math.min(5, 1 / cameraScale));

package/dist/cjs/node.js

@@ -24978,10 +24978,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
     if (this.customTransformationMatrix) {
-      return this.container.getTransformed(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, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -25322,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);
@@ -25339,20 +25348,25 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
-    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 cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    context.matrix = scaledMatrix;
+    context.applyChanges();
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    const cameraScale = context.getCameraScale();
-    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
-    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
+    this.layoutNodes.render(ctx, autoSizeScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -25477,12 +25491,19 @@ 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 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();
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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`;
@@ -43519,9 +43540,8 @@ class Frame2 extends BaseItem {
     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);
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
     };
     this.text.renderingScale = (cameraScale) => {
       return Math.max(1, Math.min(5, 1 / cameraScale));

package/dist/esm/browser.js

@@ -22335,10 +22335,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
     if (this.customTransformationMatrix) {
-      return this.container.getTransformed(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, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22679,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);
@@ -22696,20 +22705,25 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
-    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 cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    context.matrix = scaledMatrix;
+    context.applyChanges();
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    const cameraScale = context.getCameraScale();
-    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
-    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
+    this.layoutNodes.render(ctx, autoSizeScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -22834,12 +22848,19 @@ 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 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();
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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`;
@@ -40875,9 +40896,8 @@ class Frame2 extends BaseItem {
     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);
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
     };
     this.text.renderingScale = (cameraScale) => {
       return Math.max(1, Math.min(5, 1 / cameraScale));

package/dist/esm/index.js

@@ -22328,10 +22328,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
     if (this.customTransformationMatrix) {
-      return this.container.getTransformed(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, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22672,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);
@@ -22689,20 +22698,25 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
-    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 cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    context.matrix = scaledMatrix;
+    context.applyChanges();
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    const cameraScale = context.getCameraScale();
-    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
-    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
+    this.layoutNodes.render(ctx, autoSizeScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -22827,12 +22841,19 @@ 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 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();
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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`;
@@ -40868,9 +40889,8 @@ class Frame2 extends BaseItem {
     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);
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
     };
     this.text.renderingScale = (cameraScale) => {
       return Math.max(1, Math.min(5, 1 / cameraScale));

package/dist/esm/node.js

@@ -24795,10 +24795,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
     if (this.customTransformationMatrix) {
-      return this.container.getTransformed(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, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -25139,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);
@@ -25156,20 +25165,25 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
-    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 cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    context.matrix = scaledMatrix;
+    context.applyChanges();
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
     }
     const autoSizeScale = this.autoSize ? this.autoSizeScale : undefined;
-    const cameraScale = context.getCameraScale();
-    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
-    this.layoutNodes.render(ctx, autoSizeScale ? autoSizeScale * extraScale : extraScale);
+    this.layoutNodes.render(ctx, autoSizeScale);
     ctx.restore();
     if (this.getLinkTo() && (this.insideOf === "RichText" || !this.insideOf)) {
       const { top, right } = this.getMbr();
@@ -25294,12 +25308,19 @@ 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 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();
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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`;
@@ -43336,9 +43357,8 @@ class Frame2 extends BaseItem {
     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);
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
     };
     this.text.renderingScale = (cameraScale) => {
       return Math.max(1, Math.min(5, 1 / cameraScale));

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

@@ -10,6 +10,7 @@ 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;

package/package.json

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