microboard-temp 0.13.7 → 0.13.9

package/dist/cjs/browser.js

@@ -22208,7 +22208,6 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
-  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22230,7 +22229,6 @@ class RichText extends BaseItem {
     this.autoSize = autoSize;
     this.insideOf = insideOf;
     this.initialTextStyles = initialTextStyles;
-    this.localArea = container.copy();
     counter = counter + 1;
     this.rtCounter = counter;
     this.linkTo = linkTo || new LinkTo(this.id, this.board.events);
@@ -22383,7 +22381,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22463,7 +22461,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22491,16 +22489,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const width = this.localArea.getWidth();
-    const height = this.localArea.getHeight();
+    const container = this.getTransformedContainer();
+    const width = container.getWidth();
+    const height = container.getHeight();
     this.clipPath = new conf.path2DFactory;
     this.clipPath.rect(0, 0, width, height);
   }
   setContainer(container) {
     this.isContainerSet = true;
-    this.localArea = container.copy();
     this.container = container;
-    this.updateElement();
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22523,8 +22521,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return this.localArea.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22866,7 +22864,7 @@ class RichText extends BaseItem {
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
         this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
-        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22896,7 +22894,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.left, this.top);
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23037,7 +23035,7 @@ class RichText extends BaseItem {
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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");
@@ -23133,19 +23131,6 @@ class RichText extends BaseItem {
   getPrevMbr() {
     return this.prevMbr;
   }
-  getMbr() {
-    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();
-    }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return new Mbr(this.left, this.top, this.right, this.bottom).getTransformed(scaledMatrix);
-  }
 }
 
 // src/Items/Mbr/updateRects.ts
@@ -41045,8 +41030,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
-var HEADING_TOP_OFFSET = -45;
-var HEADING_BOTTOM_OFFSET = -12;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -41062,7 +41047,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -41083,12 +41068,13 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
     this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
@@ -41123,11 +41109,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -41270,9 +41262,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
-      this.textContainer.top = HEADING_TOP_OFFSET;
-      this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-      this.text.setContainer(this.textContainer.copy());
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -41288,15 +41278,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);

package/dist/cjs/index.js

@@ -22208,7 +22208,6 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
-  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22230,7 +22229,6 @@ class RichText extends BaseItem {
     this.autoSize = autoSize;
     this.insideOf = insideOf;
     this.initialTextStyles = initialTextStyles;
-    this.localArea = container.copy();
     counter = counter + 1;
     this.rtCounter = counter;
     this.linkTo = linkTo || new LinkTo(this.id, this.board.events);
@@ -22383,7 +22381,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22463,7 +22461,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22491,16 +22489,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const width = this.localArea.getWidth();
-    const height = this.localArea.getHeight();
+    const container = this.getTransformedContainer();
+    const width = container.getWidth();
+    const height = container.getHeight();
     this.clipPath = new conf.path2DFactory;
     this.clipPath.rect(0, 0, width, height);
   }
   setContainer(container) {
     this.isContainerSet = true;
-    this.localArea = container.copy();
     this.container = container;
-    this.updateElement();
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22523,8 +22521,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return this.localArea.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22866,7 +22864,7 @@ class RichText extends BaseItem {
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
         this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
-        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22896,7 +22894,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.left, this.top);
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23037,7 +23035,7 @@ class RichText extends BaseItem {
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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");
@@ -23133,19 +23131,6 @@ class RichText extends BaseItem {
   getPrevMbr() {
     return this.prevMbr;
   }
-  getMbr() {
-    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();
-    }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return new Mbr(this.left, this.top, this.right, this.bottom).getTransformed(scaledMatrix);
-  }
 }
 
 // src/Items/Mbr/updateRects.ts
@@ -41045,8 +41030,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
-var HEADING_TOP_OFFSET = -45;
-var HEADING_BOTTOM_OFFSET = -12;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -41062,7 +41047,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -41083,12 +41068,13 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
     this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
@@ -41123,11 +41109,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -41270,9 +41262,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
-      this.textContainer.top = HEADING_TOP_OFFSET;
-      this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-      this.text.setContainer(this.textContainer.copy());
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -41288,15 +41278,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);

package/dist/cjs/node.js

@@ -24680,7 +24680,6 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
-  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -24702,7 +24701,6 @@ class RichText extends BaseItem {
     this.autoSize = autoSize;
     this.insideOf = insideOf;
     this.initialTextStyles = initialTextStyles;
-    this.localArea = container.copy();
     counter = counter + 1;
     this.rtCounter = counter;
     this.linkTo = linkTo || new LinkTo(this.id, this.board.events);
@@ -24855,7 +24853,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -24935,7 +24933,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -24963,16 +24961,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const width = this.localArea.getWidth();
-    const height = this.localArea.getHeight();
+    const container = this.getTransformedContainer();
+    const width = container.getWidth();
+    const height = container.getHeight();
     this.clipPath = new conf.path2DFactory;
     this.clipPath.rect(0, 0, width, height);
   }
   setContainer(container) {
     this.isContainerSet = true;
-    this.localArea = container.copy();
     this.container = container;
-    this.updateElement();
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -24995,8 +24993,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return this.localArea.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -25338,7 +25336,7 @@ class RichText extends BaseItem {
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
         this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
-        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -25368,7 +25366,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.left, this.top);
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -25509,7 +25507,7 @@ class RichText extends BaseItem {
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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");
@@ -25605,19 +25603,6 @@ class RichText extends BaseItem {
   getPrevMbr() {
     return this.prevMbr;
   }
-  getMbr() {
-    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();
-    }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return new Mbr(this.left, this.top, this.right, this.bottom).getTransformed(scaledMatrix);
-  }
 }
 
 // src/Items/Mbr/updateRects.ts
@@ -43518,8 +43503,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
-var HEADING_TOP_OFFSET = -45;
-var HEADING_BOTTOM_OFFSET = -12;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -43535,7 +43520,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -43556,12 +43541,13 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
     this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
@@ -43596,11 +43582,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -43743,9 +43735,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
-      this.textContainer.top = HEADING_TOP_OFFSET;
-      this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-      this.text.setContainer(this.textContainer.copy());
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -43761,15 +43751,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);

package/dist/esm/browser.js

@@ -22037,7 +22037,6 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
-  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22059,7 +22058,6 @@ class RichText extends BaseItem {
     this.autoSize = autoSize;
     this.insideOf = insideOf;
     this.initialTextStyles = initialTextStyles;
-    this.localArea = container.copy();
     counter = counter + 1;
     this.rtCounter = counter;
     this.linkTo = linkTo || new LinkTo(this.id, this.board.events);
@@ -22212,7 +22210,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22292,7 +22290,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22320,16 +22318,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const width = this.localArea.getWidth();
-    const height = this.localArea.getHeight();
+    const container = this.getTransformedContainer();
+    const width = container.getWidth();
+    const height = container.getHeight();
     this.clipPath = new conf.path2DFactory;
     this.clipPath.rect(0, 0, width, height);
   }
   setContainer(container) {
     this.isContainerSet = true;
-    this.localArea = container.copy();
     this.container = container;
-    this.updateElement();
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22352,8 +22350,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return this.localArea.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22695,7 +22693,7 @@ class RichText extends BaseItem {
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
         this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
-        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22725,7 +22723,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.left, this.top);
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -22866,7 +22864,7 @@ class RichText extends BaseItem {
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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");
@@ -22962,19 +22960,6 @@ class RichText extends BaseItem {
   getPrevMbr() {
     return this.prevMbr;
   }
-  getMbr() {
-    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();
-    }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return new Mbr(this.left, this.top, this.right, this.bottom).getTransformed(scaledMatrix);
-  }
 }
 
 // src/Items/Mbr/updateRects.ts
@@ -40874,8 +40859,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
-var HEADING_TOP_OFFSET = -45;
-var HEADING_BOTTOM_OFFSET = -12;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -40891,7 +40876,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -40912,12 +40897,13 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
     this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
@@ -40952,11 +40938,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -41099,9 +41091,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
-      this.textContainer.top = HEADING_TOP_OFFSET;
-      this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-      this.text.setContainer(this.textContainer.copy());
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -41117,15 +41107,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);

package/dist/esm/index.js

@@ -22030,7 +22030,6 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
-  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22052,7 +22051,6 @@ class RichText extends BaseItem {
     this.autoSize = autoSize;
     this.insideOf = insideOf;
     this.initialTextStyles = initialTextStyles;
-    this.localArea = container.copy();
     counter = counter + 1;
     this.rtCounter = counter;
     this.linkTo = linkTo || new LinkTo(this.id, this.board.events);
@@ -22205,7 +22203,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22285,7 +22283,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22313,16 +22311,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const width = this.localArea.getWidth();
-    const height = this.localArea.getHeight();
+    const container = this.getTransformedContainer();
+    const width = container.getWidth();
+    const height = container.getHeight();
     this.clipPath = new conf.path2DFactory;
     this.clipPath.rect(0, 0, width, height);
   }
   setContainer(container) {
     this.isContainerSet = true;
-    this.localArea = container.copy();
     this.container = container;
-    this.updateElement();
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22345,8 +22343,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return this.localArea.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22688,7 +22686,7 @@ class RichText extends BaseItem {
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
         this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
-        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22718,7 +22716,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.left, this.top);
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -22859,7 +22857,7 @@ class RichText extends BaseItem {
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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");
@@ -22955,19 +22953,6 @@ class RichText extends BaseItem {
   getPrevMbr() {
     return this.prevMbr;
   }
-  getMbr() {
-    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();
-    }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return new Mbr(this.left, this.top, this.right, this.bottom).getTransformed(scaledMatrix);
-  }
 }
 
 // src/Items/Mbr/updateRects.ts
@@ -40867,8 +40852,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
-var HEADING_TOP_OFFSET = -45;
-var HEADING_BOTTOM_OFFSET = -12;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -40884,7 +40869,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -40905,12 +40890,13 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
     this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
@@ -40945,11 +40931,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -41092,9 +41084,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
-      this.textContainer.top = HEADING_TOP_OFFSET;
-      this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-      this.text.setContainer(this.textContainer.copy());
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -41110,15 +41100,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);

package/dist/esm/node.js

@@ -24497,7 +24497,6 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
-  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -24519,7 +24518,6 @@ class RichText extends BaseItem {
     this.autoSize = autoSize;
     this.insideOf = insideOf;
     this.initialTextStyles = initialTextStyles;
-    this.localArea = container.copy();
     counter = counter + 1;
     this.rtCounter = counter;
     this.linkTo = linkTo || new LinkTo(this.id, this.board.events);
@@ -24672,7 +24670,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -24752,7 +24750,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -24780,16 +24778,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const width = this.localArea.getWidth();
-    const height = this.localArea.getHeight();
+    const container = this.getTransformedContainer();
+    const width = container.getWidth();
+    const height = container.getHeight();
     this.clipPath = new conf.path2DFactory;
     this.clipPath.rect(0, 0, width, height);
   }
   setContainer(container) {
     this.isContainerSet = true;
-    this.localArea = container.copy();
     this.container = container;
-    this.updateElement();
+    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -24812,8 +24810,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return this.localArea.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -25155,7 +25153,7 @@ class RichText extends BaseItem {
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
         this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
-        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
+        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -25185,7 +25183,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.left, this.top);
+    ctx.translate(this.container.left, this.container.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -25326,7 +25324,7 @@ class RichText extends BaseItem {
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    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");
@@ -25422,19 +25420,6 @@ class RichText extends BaseItem {
   getPrevMbr() {
     return this.prevMbr;
   }
-  getMbr() {
-    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();
-    }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    return new Mbr(this.left, this.top, this.right, this.bottom).getTransformed(scaledMatrix);
-  }
 }
 
 // src/Items/Mbr/updateRects.ts
@@ -43335,8 +43320,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
-var HEADING_TOP_OFFSET = -45;
-var HEADING_BOTTOM_OFFSET = -12;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -43352,7 +43337,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -43373,12 +43358,13 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
     this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
@@ -43413,11 +43399,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.textContainer.top = HEADING_TOP_OFFSET;
-    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -43560,9 +43552,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
-      this.textContainer.top = HEADING_TOP_OFFSET;
-      this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
-      this.text.setContainer(this.textContainer.copy());
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -43578,15 +43568,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);

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

@@ -52,6 +52,7 @@ export declare class Frame extends BaseItem {
      * false - if outside of the frame
      */
     private initPath;
+    private updateTextContainer;
     getPaths(): Path | Paths;
     getPath(): Path | Paths;
     copyPaths(): Path | Paths;

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

@@ -44,7 +44,6 @@ export declare class RichText extends BaseItem {
     private autoSizeScale;
     private containerMaxWidth?;
     readonly linkTo: LinkTo;
-    private localArea;
     maxHeight: number;
     private selection?;
     transformationRenderBlock?: boolean;
@@ -154,5 +153,4 @@ export declare class RichText extends BaseItem {
     getRichText(): RichText;
     getLinkTo(): string | undefined;
     getPrevMbr(): Mbr | null;
-    getMbr(): Mbr;
 }

package/package.json

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