microboard-temp 0.13.9 → 0.13.11

package/dist/cjs/browser.js

@@ -22408,10 +22408,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -22882,6 +22882,7 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    ctx.translate(this.left, this.top);
     const cameraScale = context.getCameraScale();
     const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     let matrix;
@@ -22890,11 +22891,13 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    context.matrix = scaledMatrix;
-    context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    const { scaleX, scaleY } = matrix;
+    const shouldScale = !this.isInShape && !this.autoSize;
+    if (shouldScale) {
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
+    }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23033,9 +23036,8 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getMbr().getWidth();
     const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -40023,7 +40025,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -40574,6 +40578,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {

package/dist/cjs/index.js

@@ -22408,10 +22408,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -22882,6 +22882,7 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    ctx.translate(this.left, this.top);
     const cameraScale = context.getCameraScale();
     const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     let matrix;
@@ -22890,11 +22891,13 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    context.matrix = scaledMatrix;
-    context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    const { scaleX, scaleY } = matrix;
+    const shouldScale = !this.isInShape && !this.autoSize;
+    if (shouldScale) {
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
+    }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23033,9 +23036,8 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getMbr().getWidth();
     const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -40023,7 +40025,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -40574,6 +40578,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {

package/dist/cjs/node.js

@@ -24880,10 +24880,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -25354,6 +25354,7 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    ctx.translate(this.left, this.top);
     const cameraScale = context.getCameraScale();
     const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     let matrix;
@@ -25362,11 +25363,13 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    context.matrix = scaledMatrix;
-    context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    const { scaleX, scaleY } = matrix;
+    const shouldScale = !this.isInShape && !this.autoSize;
+    if (shouldScale) {
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
+    }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -25505,9 +25508,8 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getMbr().getWidth();
     const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -42496,7 +42498,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -43047,6 +43051,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {

package/dist/esm/browser.js

@@ -22237,10 +22237,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -22711,6 +22711,7 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    ctx.translate(this.left, this.top);
     const cameraScale = context.getCameraScale();
     const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     let matrix;
@@ -22719,11 +22720,13 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    context.matrix = scaledMatrix;
-    context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    const { scaleX, scaleY } = matrix;
+    const shouldScale = !this.isInShape && !this.autoSize;
+    if (shouldScale) {
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
+    }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -22862,9 +22865,8 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getMbr().getWidth();
     const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -39852,7 +39854,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -40403,6 +40407,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {

package/dist/esm/index.js

@@ -22230,10 +22230,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -22704,6 +22704,7 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    ctx.translate(this.left, this.top);
     const cameraScale = context.getCameraScale();
     const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     let matrix;
@@ -22712,11 +22713,13 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    context.matrix = scaledMatrix;
-    context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    const { scaleX, scaleY } = matrix;
+    const shouldScale = !this.isInShape && !this.autoSize;
+    if (shouldScale) {
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
+    }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -22855,9 +22858,8 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getMbr().getWidth();
     const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -39845,7 +39847,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -40396,6 +40400,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {

package/dist/esm/node.js

@@ -24697,10 +24697,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -25171,6 +25171,7 @@ class RichText extends BaseItem {
     }
     const { ctx } = context;
     ctx.save();
+    ctx.translate(this.left, this.top);
     const cameraScale = context.getCameraScale();
     const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
     let matrix;
@@ -25179,11 +25180,13 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    context.matrix = scaledMatrix;
-    context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    const { scaleX, scaleY } = matrix;
+    const shouldScale = !this.isInShape && !this.autoSize;
+    if (shouldScale) {
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
+    }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -25322,9 +25325,8 @@ class RichText extends BaseItem {
     } else {
       matrix = this.transformation.toMatrix();
     }
-    const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
     const transformedWidth = this.getMbr().getWidth();
     const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -42313,7 +42315,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -42864,6 +42868,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {

package/package.json

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