microboard-temp 0.13.6 → 0.13.7

package/dist/cjs/browser.js

@@ -22208,6 +22208,7 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
+  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22229,6 +22230,7 @@ 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);
@@ -22381,7 +22383,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22461,7 +22463,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22489,16 +22491,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const container = this.getTransformedContainer();
-    const width = container.getWidth();
-    const height = container.getHeight();
+    const width = this.localArea.getWidth();
+    const height = this.localArea.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.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.updateElement();
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22521,8 +22523,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
-    return this.container.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.localArea.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22864,7 +22866,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.getTransformedContainer(), this.editor.verticalAlignment);
+        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22894,7 +22896,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    ctx.translate(this.left, this.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23035,7 +23037,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.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.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");
@@ -23131,6 +23133,19 @@ 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
@@ -41030,6 +41045,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -45;
+var HEADING_BOTTOM_OFFSET = -12;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -41067,14 +41084,14 @@ class Frame2 extends BaseItem {
     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);
     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");
-    this.textContainer.top = -45;
-    this.textContainer.bottom = -12;
     this.text.customTransformationMatrix = () => {
       const matrix = this.transformation.toMatrix();
       return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
@@ -41107,6 +41124,8 @@ 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();
   }
@@ -41251,6 +41270,9 @@ 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.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);

package/dist/cjs/index.js

@@ -22208,6 +22208,7 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
+  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22229,6 +22230,7 @@ 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);
@@ -22381,7 +22383,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22461,7 +22463,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22489,16 +22491,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const container = this.getTransformedContainer();
-    const width = container.getWidth();
-    const height = container.getHeight();
+    const width = this.localArea.getWidth();
+    const height = this.localArea.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.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.updateElement();
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22521,8 +22523,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
-    return this.container.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.localArea.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22864,7 +22866,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.getTransformedContainer(), this.editor.verticalAlignment);
+        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22894,7 +22896,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    ctx.translate(this.left, this.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23035,7 +23037,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.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.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");
@@ -23131,6 +23133,19 @@ 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
@@ -41030,6 +41045,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -45;
+var HEADING_BOTTOM_OFFSET = -12;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -41067,14 +41084,14 @@ class Frame2 extends BaseItem {
     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);
     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");
-    this.textContainer.top = -45;
-    this.textContainer.bottom = -12;
     this.text.customTransformationMatrix = () => {
       const matrix = this.transformation.toMatrix();
       return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
@@ -41107,6 +41124,8 @@ 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();
   }
@@ -41251,6 +41270,9 @@ 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.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);

package/dist/cjs/node.js

@@ -24680,6 +24680,7 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
+  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -24701,6 +24702,7 @@ 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);
@@ -24853,7 +24855,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -24933,7 +24935,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -24961,16 +24963,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const container = this.getTransformedContainer();
-    const width = container.getWidth();
-    const height = container.getHeight();
+    const width = this.localArea.getWidth();
+    const height = this.localArea.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.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.updateElement();
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -24993,8 +24995,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
-    return this.container.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.localArea.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -25336,7 +25338,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.getTransformedContainer(), this.editor.verticalAlignment);
+        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -25366,7 +25368,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    ctx.translate(this.left, this.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -25507,7 +25509,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.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.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");
@@ -25603,6 +25605,19 @@ 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
@@ -43503,6 +43518,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -45;
+var HEADING_BOTTOM_OFFSET = -12;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -43540,14 +43557,14 @@ class Frame2 extends BaseItem {
     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);
     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");
-    this.textContainer.top = -45;
-    this.textContainer.bottom = -12;
     this.text.customTransformationMatrix = () => {
       const matrix = this.transformation.toMatrix();
       return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
@@ -43580,6 +43597,8 @@ 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();
   }
@@ -43724,6 +43743,9 @@ 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.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);

package/dist/esm/browser.js

@@ -22037,6 +22037,7 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
+  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22058,6 +22059,7 @@ 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);
@@ -22210,7 +22212,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22290,7 +22292,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22318,16 +22320,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const container = this.getTransformedContainer();
-    const width = container.getWidth();
-    const height = container.getHeight();
+    const width = this.localArea.getWidth();
+    const height = this.localArea.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.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.updateElement();
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22350,8 +22352,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
-    return this.container.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.localArea.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22693,7 +22695,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.getTransformedContainer(), this.editor.verticalAlignment);
+        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22723,7 +22725,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    ctx.translate(this.left, this.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -22864,7 +22866,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.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.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");
@@ -22960,6 +22962,19 @@ 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
@@ -40859,6 +40874,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -45;
+var HEADING_BOTTOM_OFFSET = -12;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -40896,14 +40913,14 @@ class Frame2 extends BaseItem {
     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);
     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");
-    this.textContainer.top = -45;
-    this.textContainer.bottom = -12;
     this.text.customTransformationMatrix = () => {
       const matrix = this.transformation.toMatrix();
       return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
@@ -40936,6 +40953,8 @@ 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();
   }
@@ -41080,6 +41099,9 @@ 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.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);

package/dist/esm/index.js

@@ -22030,6 +22030,7 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
+  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22051,6 +22052,7 @@ 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);
@@ -22203,7 +22205,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22283,7 +22285,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22311,16 +22313,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const container = this.getTransformedContainer();
-    const width = container.getWidth();
-    const height = container.getHeight();
+    const width = this.localArea.getWidth();
+    const height = this.localArea.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.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.updateElement();
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22343,8 +22345,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
-    return this.container.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.localArea.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22686,7 +22688,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.getTransformedContainer(), this.editor.verticalAlignment);
+        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22716,7 +22718,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    ctx.translate(this.left, this.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -22857,7 +22859,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.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.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");
@@ -22953,6 +22955,19 @@ 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
@@ -40852,6 +40867,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -45;
+var HEADING_BOTTOM_OFFSET = -12;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -40889,14 +40906,14 @@ class Frame2 extends BaseItem {
     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);
     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");
-    this.textContainer.top = -45;
-    this.textContainer.bottom = -12;
     this.text.customTransformationMatrix = () => {
       const matrix = this.transformation.toMatrix();
       return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
@@ -40929,6 +40946,8 @@ 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();
   }
@@ -41073,6 +41092,9 @@ 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.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);

package/dist/esm/node.js

@@ -24497,6 +24497,7 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
+  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -24518,6 +24519,7 @@ 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);
@@ -24670,7 +24672,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -24750,7 +24752,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -24778,16 +24780,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const container = this.getTransformedContainer();
-    const width = container.getWidth();
-    const height = container.getHeight();
+    const width = this.localArea.getWidth();
+    const height = this.localArea.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.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.updateElement();
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -24810,8 +24812,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
-    return this.container.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.localArea.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -25153,7 +25155,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.getTransformedContainer(), this.editor.verticalAlignment);
+        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -25183,7 +25185,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    ctx.translate(this.left, this.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -25324,7 +25326,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.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.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");
@@ -25420,6 +25422,19 @@ 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
@@ -43320,6 +43335,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -45;
+var HEADING_BOTTOM_OFFSET = -12;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -43357,14 +43374,14 @@ class Frame2 extends BaseItem {
     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);
     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");
-    this.textContainer.top = -45;
-    this.textContainer.bottom = -12;
     this.text.customTransformationMatrix = () => {
       const matrix = this.transformation.toMatrix();
       return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
@@ -43397,6 +43414,8 @@ 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();
   }
@@ -43541,6 +43560,9 @@ 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.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);

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

@@ -44,6 +44,7 @@ export declare class RichText extends BaseItem {
     private autoSizeScale;
     private containerMaxWidth?;
     readonly linkTo: LinkTo;
+    private localArea;
     maxHeight: number;
     private selection?;
     transformationRenderBlock?: boolean;
@@ -153,4 +154,5 @@ 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.6",
+  "version": "0.13.7",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",