microboard-temp 0.12.5 → 0.12.7

package/dist/cjs/browser.js

@@ -21809,6 +21809,7 @@ class BaseItem extends Mbr {
   updateChildrenIds() {
     this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
   }
+  onParentChanged(_newParent) {}
   getId() {
     return this.id;
   }
@@ -21944,6 +21945,7 @@ class BaseItem extends Mbr {
           const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.onParentChanged(this.getId());
           foundItem.transformation.setLocalMatrix(localMatrix);
           this.index?.insert(foundItem);
         }
@@ -21965,6 +21967,7 @@ class BaseItem extends Mbr {
           const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.onParentChanged("Board");
           foundItem.transformation.setLocalMatrix(worldMatrix);
           this.board.items.index.insert(foundItem);
         }
@@ -22437,7 +22440,7 @@ class RichText extends BaseItem {
       height,
       maxWidth: maxWidth ? maxWidth + 1 : undefined,
       maxHeight,
-      textScale: this.getScale()
+      textScale: this.isInShape && !this.autoSize ? 1 : this.getScale()
     };
   }
   transformCanvas() {
@@ -40470,7 +40473,7 @@ var stickerColors = {
 var width = 200;
 var height = 200;
 var StickerShape = {
-  textBounds: new Mbr(6.67, 6.67, width - 6.67, height - 6.67),
+  textBounds: new Mbr(8, 8, width - 8, height - 8),
   stickerPath: new Path([
     new Line(new Point(0, 0), new Point(width, 0)),
     new Line(new Point(width, 0), new Point(width, height)),
@@ -40711,16 +40714,19 @@ class Sticker extends BaseItem {
     div.style.boxShadow = "0px 18px 24px rgba(20, 21, 26, 0.25), 0px 8px 8px rgba(20, 21, 26, 0.125)";
     const autoScale = this.text.isAutosize() && this.text.getAutoSizeScale() || 1;
     const textElement = this.text.renderHTML(documentFactory);
-    const padding = 6;
+    const padding = 8;
     textElement.id = `${this.getId()}_text`;
     textElement.style.overflow = "auto";
     positionRelatively(textElement, div, padding);
     resetElementScale(textElement);
     scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
     scaleElementBy(textElement, autoScale, autoScale);
-    textElement.style.maxWidth = `${(width / autoScale - 2 * padding / autoScale) * scaleX}px`;
+    const maxAvailableWidth = unscaledWidth - 2 * padding;
+    textElement.style.maxWidth = `${maxAvailableWidth * scaleX}px`;
     if (autoScale < 1) {
-      textElement.style.width = `${parseInt(textElement.style.width) / (scaleX * autoScale) - 2 * padding * scaleX}px`;
+      textElement.style.width = `${maxAvailableWidth * scaleX}px`;
+    } else {
+      textElement.style.width = "100%";
     }
     const textHeight = this.text.layoutNodes.height * autoScale;
     if (textHeight < height2) {

package/dist/cjs/index.js

@@ -21809,6 +21809,7 @@ class BaseItem extends Mbr {
   updateChildrenIds() {
     this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
   }
+  onParentChanged(_newParent) {}
   getId() {
     return this.id;
   }
@@ -21944,6 +21945,7 @@ class BaseItem extends Mbr {
           const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.onParentChanged(this.getId());
           foundItem.transformation.setLocalMatrix(localMatrix);
           this.index?.insert(foundItem);
         }
@@ -21965,6 +21967,7 @@ class BaseItem extends Mbr {
           const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.onParentChanged("Board");
           foundItem.transformation.setLocalMatrix(worldMatrix);
           this.board.items.index.insert(foundItem);
         }
@@ -22437,7 +22440,7 @@ class RichText extends BaseItem {
       height,
       maxWidth: maxWidth ? maxWidth + 1 : undefined,
       maxHeight,
-      textScale: this.getScale()
+      textScale: this.isInShape && !this.autoSize ? 1 : this.getScale()
     };
   }
   transformCanvas() {
@@ -40470,7 +40473,7 @@ var stickerColors = {
 var width = 200;
 var height = 200;
 var StickerShape = {
-  textBounds: new Mbr(6.67, 6.67, width - 6.67, height - 6.67),
+  textBounds: new Mbr(8, 8, width - 8, height - 8),
   stickerPath: new Path([
     new Line(new Point(0, 0), new Point(width, 0)),
     new Line(new Point(width, 0), new Point(width, height)),
@@ -40711,16 +40714,19 @@ class Sticker extends BaseItem {
     div.style.boxShadow = "0px 18px 24px rgba(20, 21, 26, 0.25), 0px 8px 8px rgba(20, 21, 26, 0.125)";
     const autoScale = this.text.isAutosize() && this.text.getAutoSizeScale() || 1;
     const textElement = this.text.renderHTML(documentFactory);
-    const padding = 6;
+    const padding = 8;
     textElement.id = `${this.getId()}_text`;
     textElement.style.overflow = "auto";
     positionRelatively(textElement, div, padding);
     resetElementScale(textElement);
     scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
     scaleElementBy(textElement, autoScale, autoScale);
-    textElement.style.maxWidth = `${(width / autoScale - 2 * padding / autoScale) * scaleX}px`;
+    const maxAvailableWidth = unscaledWidth - 2 * padding;
+    textElement.style.maxWidth = `${maxAvailableWidth * scaleX}px`;
     if (autoScale < 1) {
-      textElement.style.width = `${parseInt(textElement.style.width) / (scaleX * autoScale) - 2 * padding * scaleX}px`;
+      textElement.style.width = `${maxAvailableWidth * scaleX}px`;
+    } else {
+      textElement.style.width = "100%";
     }
     const textHeight = this.text.layoutNodes.height * autoScale;
     if (textHeight < height2) {

package/dist/cjs/node.js

@@ -24281,6 +24281,7 @@ class BaseItem extends Mbr {
   updateChildrenIds() {
     this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
   }
+  onParentChanged(_newParent) {}
   getId() {
     return this.id;
   }
@@ -24416,6 +24417,7 @@ class BaseItem extends Mbr {
           const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.onParentChanged(this.getId());
           foundItem.transformation.setLocalMatrix(localMatrix);
           this.index?.insert(foundItem);
         }
@@ -24437,6 +24439,7 @@ class BaseItem extends Mbr {
           const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.onParentChanged("Board");
           foundItem.transformation.setLocalMatrix(worldMatrix);
           this.board.items.index.insert(foundItem);
         }
@@ -24909,7 +24912,7 @@ class RichText extends BaseItem {
       height,
       maxWidth: maxWidth ? maxWidth + 1 : undefined,
       maxHeight,
-      textScale: this.getScale()
+      textScale: this.isInShape && !this.autoSize ? 1 : this.getScale()
     };
   }
   transformCanvas() {
@@ -42943,7 +42946,7 @@ var stickerColors = {
 var width = 200;
 var height = 200;
 var StickerShape = {
-  textBounds: new Mbr(6.67, 6.67, width - 6.67, height - 6.67),
+  textBounds: new Mbr(8, 8, width - 8, height - 8),
   stickerPath: new Path([
     new Line(new Point(0, 0), new Point(width, 0)),
     new Line(new Point(width, 0), new Point(width, height)),
@@ -43184,16 +43187,19 @@ class Sticker extends BaseItem {
     div.style.boxShadow = "0px 18px 24px rgba(20, 21, 26, 0.25), 0px 8px 8px rgba(20, 21, 26, 0.125)";
     const autoScale = this.text.isAutosize() && this.text.getAutoSizeScale() || 1;
     const textElement = this.text.renderHTML(documentFactory);
-    const padding = 6;
+    const padding = 8;
     textElement.id = `${this.getId()}_text`;
     textElement.style.overflow = "auto";
     positionRelatively(textElement, div, padding);
     resetElementScale(textElement);
     scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
     scaleElementBy(textElement, autoScale, autoScale);
-    textElement.style.maxWidth = `${(width / autoScale - 2 * padding / autoScale) * scaleX}px`;
+    const maxAvailableWidth = unscaledWidth - 2 * padding;
+    textElement.style.maxWidth = `${maxAvailableWidth * scaleX}px`;
     if (autoScale < 1) {
-      textElement.style.width = `${parseInt(textElement.style.width) / (scaleX * autoScale) - 2 * padding * scaleX}px`;
+      textElement.style.width = `${maxAvailableWidth * scaleX}px`;
+    } else {
+      textElement.style.width = "100%";
     }
     const textHeight = this.text.layoutNodes.height * autoScale;
     if (textHeight < height2) {

package/dist/esm/browser.js

@@ -21638,6 +21638,7 @@ class BaseItem extends Mbr {
   updateChildrenIds() {
     this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
   }
+  onParentChanged(_newParent) {}
   getId() {
     return this.id;
   }
@@ -21773,6 +21774,7 @@ class BaseItem extends Mbr {
           const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.onParentChanged(this.getId());
           foundItem.transformation.setLocalMatrix(localMatrix);
           this.index?.insert(foundItem);
         }
@@ -21794,6 +21796,7 @@ class BaseItem extends Mbr {
           const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.onParentChanged("Board");
           foundItem.transformation.setLocalMatrix(worldMatrix);
           this.board.items.index.insert(foundItem);
         }
@@ -22266,7 +22269,7 @@ class RichText extends BaseItem {
       height,
       maxWidth: maxWidth ? maxWidth + 1 : undefined,
       maxHeight,
-      textScale: this.getScale()
+      textScale: this.isInShape && !this.autoSize ? 1 : this.getScale()
     };
   }
   transformCanvas() {
@@ -40299,7 +40302,7 @@ var stickerColors = {
 var width = 200;
 var height = 200;
 var StickerShape = {
-  textBounds: new Mbr(6.67, 6.67, width - 6.67, height - 6.67),
+  textBounds: new Mbr(8, 8, width - 8, height - 8),
   stickerPath: new Path([
     new Line(new Point(0, 0), new Point(width, 0)),
     new Line(new Point(width, 0), new Point(width, height)),
@@ -40540,16 +40543,19 @@ class Sticker extends BaseItem {
     div.style.boxShadow = "0px 18px 24px rgba(20, 21, 26, 0.25), 0px 8px 8px rgba(20, 21, 26, 0.125)";
     const autoScale = this.text.isAutosize() && this.text.getAutoSizeScale() || 1;
     const textElement = this.text.renderHTML(documentFactory);
-    const padding = 6;
+    const padding = 8;
     textElement.id = `${this.getId()}_text`;
     textElement.style.overflow = "auto";
     positionRelatively(textElement, div, padding);
     resetElementScale(textElement);
     scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
     scaleElementBy(textElement, autoScale, autoScale);
-    textElement.style.maxWidth = `${(width / autoScale - 2 * padding / autoScale) * scaleX}px`;
+    const maxAvailableWidth = unscaledWidth - 2 * padding;
+    textElement.style.maxWidth = `${maxAvailableWidth * scaleX}px`;
     if (autoScale < 1) {
-      textElement.style.width = `${parseInt(textElement.style.width) / (scaleX * autoScale) - 2 * padding * scaleX}px`;
+      textElement.style.width = `${maxAvailableWidth * scaleX}px`;
+    } else {
+      textElement.style.width = "100%";
     }
     const textHeight = this.text.layoutNodes.height * autoScale;
     if (textHeight < height2) {

package/dist/esm/index.js

@@ -21631,6 +21631,7 @@ class BaseItem extends Mbr {
   updateChildrenIds() {
     this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
   }
+  onParentChanged(_newParent) {}
   getId() {
     return this.id;
   }
@@ -21766,6 +21767,7 @@ class BaseItem extends Mbr {
           const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.onParentChanged(this.getId());
           foundItem.transformation.setLocalMatrix(localMatrix);
           this.index?.insert(foundItem);
         }
@@ -21787,6 +21789,7 @@ class BaseItem extends Mbr {
           const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.onParentChanged("Board");
           foundItem.transformation.setLocalMatrix(worldMatrix);
           this.board.items.index.insert(foundItem);
         }
@@ -22259,7 +22262,7 @@ class RichText extends BaseItem {
       height,
       maxWidth: maxWidth ? maxWidth + 1 : undefined,
       maxHeight,
-      textScale: this.getScale()
+      textScale: this.isInShape && !this.autoSize ? 1 : this.getScale()
     };
   }
   transformCanvas() {
@@ -40292,7 +40295,7 @@ var stickerColors = {
 var width = 200;
 var height = 200;
 var StickerShape = {
-  textBounds: new Mbr(6.67, 6.67, width - 6.67, height - 6.67),
+  textBounds: new Mbr(8, 8, width - 8, height - 8),
   stickerPath: new Path([
     new Line(new Point(0, 0), new Point(width, 0)),
     new Line(new Point(width, 0), new Point(width, height)),
@@ -40533,16 +40536,19 @@ class Sticker extends BaseItem {
     div.style.boxShadow = "0px 18px 24px rgba(20, 21, 26, 0.25), 0px 8px 8px rgba(20, 21, 26, 0.125)";
     const autoScale = this.text.isAutosize() && this.text.getAutoSizeScale() || 1;
     const textElement = this.text.renderHTML(documentFactory);
-    const padding = 6;
+    const padding = 8;
     textElement.id = `${this.getId()}_text`;
     textElement.style.overflow = "auto";
     positionRelatively(textElement, div, padding);
     resetElementScale(textElement);
     scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
     scaleElementBy(textElement, autoScale, autoScale);
-    textElement.style.maxWidth = `${(width / autoScale - 2 * padding / autoScale) * scaleX}px`;
+    const maxAvailableWidth = unscaledWidth - 2 * padding;
+    textElement.style.maxWidth = `${maxAvailableWidth * scaleX}px`;
     if (autoScale < 1) {
-      textElement.style.width = `${parseInt(textElement.style.width) / (scaleX * autoScale) - 2 * padding * scaleX}px`;
+      textElement.style.width = `${maxAvailableWidth * scaleX}px`;
+    } else {
+      textElement.style.width = "100%";
     }
     const textHeight = this.text.layoutNodes.height * autoScale;
     if (textHeight < height2) {

package/dist/esm/node.js

@@ -24098,6 +24098,7 @@ class BaseItem extends Mbr {
   updateChildrenIds() {
     this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
   }
+  onParentChanged(_newParent) {}
   getId() {
     return this.id;
   }
@@ -24233,6 +24234,7 @@ class BaseItem extends Mbr {
           const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.onParentChanged(this.getId());
           foundItem.transformation.setLocalMatrix(localMatrix);
           this.index?.insert(foundItem);
         }
@@ -24254,6 +24256,7 @@ class BaseItem extends Mbr {
           const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.onParentChanged("Board");
           foundItem.transformation.setLocalMatrix(worldMatrix);
           this.board.items.index.insert(foundItem);
         }
@@ -24726,7 +24729,7 @@ class RichText extends BaseItem {
       height,
       maxWidth: maxWidth ? maxWidth + 1 : undefined,
       maxHeight,
-      textScale: this.getScale()
+      textScale: this.isInShape && !this.autoSize ? 1 : this.getScale()
     };
   }
   transformCanvas() {
@@ -42760,7 +42763,7 @@ var stickerColors = {
 var width = 200;
 var height = 200;
 var StickerShape = {
-  textBounds: new Mbr(6.67, 6.67, width - 6.67, height - 6.67),
+  textBounds: new Mbr(8, 8, width - 8, height - 8),
   stickerPath: new Path([
     new Line(new Point(0, 0), new Point(width, 0)),
     new Line(new Point(width, 0), new Point(width, height)),
@@ -43001,16 +43004,19 @@ class Sticker extends BaseItem {
     div.style.boxShadow = "0px 18px 24px rgba(20, 21, 26, 0.25), 0px 8px 8px rgba(20, 21, 26, 0.125)";
     const autoScale = this.text.isAutosize() && this.text.getAutoSizeScale() || 1;
     const textElement = this.text.renderHTML(documentFactory);
-    const padding = 6;
+    const padding = 8;
     textElement.id = `${this.getId()}_text`;
     textElement.style.overflow = "auto";
     positionRelatively(textElement, div, padding);
     resetElementScale(textElement);
     scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
     scaleElementBy(textElement, autoScale, autoScale);
-    textElement.style.maxWidth = `${(width / autoScale - 2 * padding / autoScale) * scaleX}px`;
+    const maxAvailableWidth = unscaledWidth - 2 * padding;
+    textElement.style.maxWidth = `${maxAvailableWidth * scaleX}px`;
     if (autoScale < 1) {
-      textElement.style.width = `${parseInt(textElement.style.width) / (scaleX * autoScale) - 2 * padding * scaleX}px`;
+      textElement.style.width = `${maxAvailableWidth * scaleX}px`;
+    } else {
+      textElement.style.width = "100%";
     }
     const textHeight = this.text.layoutNodes.height * autoScale;
     if (textHeight < height2) {

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

@@ -47,6 +47,11 @@ export declare class BaseItem extends Mbr implements Geometry {
     static readonly HOVER_HIGHLIGHT_COLOR = "rgba(71, 120, 245, 0.7)";
     constructor(board: Board, id?: string, defaultItemData?: BaseItemData | undefined, isGroupItem?: boolean);
     updateChildrenIds(): void;
+    /**
+     * Called when this item's parent changes. Subclasses override this to
+     * propagate the new parent to child objects (e.g. text.parent in Sticker/Shape).
+     */
+    protected onParentChanged(_newParent: string): void;
     getId(): string;
     /**
      * Returns the parent's world matrix. For Frames, only the translation component

package/package.json

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