microboard-temp 0.11.3 → 0.11.4

package/dist/cjs/browser.js

@@ -21794,15 +21794,32 @@ class BaseItem extends Mbr {
   getId() {
     return this.id;
   }
-  getWorldMatrix() {
+  getParentWorldMatrix() {
     if (this.parent === "Board") {
-      return this.transformation.toMatrix();
+      return new Matrix;
     }
     const container = this.board.items.getById(this.parent);
     if (!container) {
+      return new Matrix;
+    }
+    const matrix = container.getWorldMatrix();
+    if (container.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
+  }
+  getWorldMatrix() {
+    if (this.parent === "Board") {
       return this.transformation.toMatrix();
     }
-    return this.transformation.toMatrix().composeWith(container.getWorldMatrix());
+    return this.transformation.toMatrix().composeWith(this.getParentWorldMatrix());
+  }
+  getNestingMatrix() {
+    const matrix = this.getWorldMatrix();
+    if (this.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
   }
   setId(id) {
     this.id = id;
@@ -21885,7 +21902,7 @@ class BaseItem extends Mbr {
     const container = this.board.items.getById(this.parent);
     if (!container)
       return this.getMbr();
-    const worldMatrix = container.getWorldMatrix();
+    const parentMatrix = this.getParentWorldMatrix();
     const local = this.getMbr();
     const corners = [
       new Point(local.left, local.top),
@@ -21894,19 +21911,19 @@ class BaseItem extends Mbr {
       new Point(local.left, local.bottom)
     ];
     for (const c of corners)
-      worldMatrix.apply(c);
+      parentMatrix.apply(c);
     return new Mbr(Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y), Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y));
   }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (!this.index?.getById(childId) && foundItem) {
-          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerWorldMatrix);
+          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
           foundItem.transformation.setLocalMatrix(localMatrix);
@@ -21922,12 +21939,12 @@ class BaseItem extends Mbr {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.index?.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (foundItem) {
-          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerWorldMatrix);
+          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
           foundItem.transformation.setLocalMatrix(worldMatrix);
@@ -22047,7 +22064,7 @@ class BaseItem extends Mbr {
         if (this.parent !== "Board") {
           const container = this.board.items.getById(this.parent);
           if (container?.transformation) {
-            transformOp = toLocalTransformOp(transformOp, container.getWorldMatrix(), this.id);
+            transformOp = toLocalTransformOp(transformOp, container.getNestingMatrix(), this.id);
           }
         }
         this.transformation.apply(transformOp);
@@ -22844,11 +22861,8 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX, scaleY);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -41080,6 +41094,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -41087,6 +41102,16 @@ class Frame2 extends BaseItem {
       x: translateX,
       y: translateY
     }, timeStamp);
+    const newMatrix = this.transformation.toMatrix();
+    if (newMatrix.translateX !== oldMatrix.translateX || newMatrix.translateY !== oldMatrix.translateY) {
+      const dx = newMatrix.translateX - oldMatrix.translateX;
+      const dy = newMatrix.translateY - oldMatrix.translateY;
+      this.index?.list().forEach((child) => {
+        if (child instanceof BaseItem) {
+          child.transformation.translateBy(-dx, -dy, timeStamp);
+        }
+      });
+    }
     this.setLastFrameScale();
     res.mbr = this.getMbr();
     return res;
@@ -41363,8 +41388,9 @@ class Frame2 extends BaseItem {
     this.renderPath(context);
     const ctx = context.ctx;
     ctx.save();
-    this.transformation.applyToContext(ctx);
-    for (const child of this.index.list()) {
+    const { translateX, translateY } = this.getWorldMatrix();
+    ctx.translate(translateX, translateY);
+    for (const child of this.index.items.listAll()) {
       child.render(context);
     }
     ctx.restore();

package/dist/cjs/index.js

@@ -21794,15 +21794,32 @@ class BaseItem extends Mbr {
   getId() {
     return this.id;
   }
-  getWorldMatrix() {
+  getParentWorldMatrix() {
     if (this.parent === "Board") {
-      return this.transformation.toMatrix();
+      return new Matrix;
     }
     const container = this.board.items.getById(this.parent);
     if (!container) {
+      return new Matrix;
+    }
+    const matrix = container.getWorldMatrix();
+    if (container.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
+  }
+  getWorldMatrix() {
+    if (this.parent === "Board") {
       return this.transformation.toMatrix();
     }
-    return this.transformation.toMatrix().composeWith(container.getWorldMatrix());
+    return this.transformation.toMatrix().composeWith(this.getParentWorldMatrix());
+  }
+  getNestingMatrix() {
+    const matrix = this.getWorldMatrix();
+    if (this.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
   }
   setId(id) {
     this.id = id;
@@ -21885,7 +21902,7 @@ class BaseItem extends Mbr {
     const container = this.board.items.getById(this.parent);
     if (!container)
       return this.getMbr();
-    const worldMatrix = container.getWorldMatrix();
+    const parentMatrix = this.getParentWorldMatrix();
     const local = this.getMbr();
     const corners = [
       new Point(local.left, local.top),
@@ -21894,19 +21911,19 @@ class BaseItem extends Mbr {
       new Point(local.left, local.bottom)
     ];
     for (const c of corners)
-      worldMatrix.apply(c);
+      parentMatrix.apply(c);
     return new Mbr(Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y), Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y));
   }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (!this.index?.getById(childId) && foundItem) {
-          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerWorldMatrix);
+          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
           foundItem.transformation.setLocalMatrix(localMatrix);
@@ -21922,12 +21939,12 @@ class BaseItem extends Mbr {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.index?.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (foundItem) {
-          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerWorldMatrix);
+          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
           foundItem.transformation.setLocalMatrix(worldMatrix);
@@ -22047,7 +22064,7 @@ class BaseItem extends Mbr {
         if (this.parent !== "Board") {
           const container = this.board.items.getById(this.parent);
           if (container?.transformation) {
-            transformOp = toLocalTransformOp(transformOp, container.getWorldMatrix(), this.id);
+            transformOp = toLocalTransformOp(transformOp, container.getNestingMatrix(), this.id);
           }
         }
         this.transformation.apply(transformOp);
@@ -22844,11 +22861,8 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX, scaleY);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -41080,6 +41094,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -41087,6 +41102,16 @@ class Frame2 extends BaseItem {
       x: translateX,
       y: translateY
     }, timeStamp);
+    const newMatrix = this.transformation.toMatrix();
+    if (newMatrix.translateX !== oldMatrix.translateX || newMatrix.translateY !== oldMatrix.translateY) {
+      const dx = newMatrix.translateX - oldMatrix.translateX;
+      const dy = newMatrix.translateY - oldMatrix.translateY;
+      this.index?.list().forEach((child) => {
+        if (child instanceof BaseItem) {
+          child.transformation.translateBy(-dx, -dy, timeStamp);
+        }
+      });
+    }
     this.setLastFrameScale();
     res.mbr = this.getMbr();
     return res;
@@ -41363,8 +41388,9 @@ class Frame2 extends BaseItem {
     this.renderPath(context);
     const ctx = context.ctx;
     ctx.save();
-    this.transformation.applyToContext(ctx);
-    for (const child of this.index.list()) {
+    const { translateX, translateY } = this.getWorldMatrix();
+    ctx.translate(translateX, translateY);
+    for (const child of this.index.items.listAll()) {
       child.render(context);
     }
     ctx.restore();

package/dist/cjs/node.js

@@ -24266,15 +24266,32 @@ class BaseItem extends Mbr {
   getId() {
     return this.id;
   }
-  getWorldMatrix() {
+  getParentWorldMatrix() {
     if (this.parent === "Board") {
-      return this.transformation.toMatrix();
+      return new Matrix;
     }
     const container = this.board.items.getById(this.parent);
     if (!container) {
+      return new Matrix;
+    }
+    const matrix = container.getWorldMatrix();
+    if (container.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
+  }
+  getWorldMatrix() {
+    if (this.parent === "Board") {
       return this.transformation.toMatrix();
     }
-    return this.transformation.toMatrix().composeWith(container.getWorldMatrix());
+    return this.transformation.toMatrix().composeWith(this.getParentWorldMatrix());
+  }
+  getNestingMatrix() {
+    const matrix = this.getWorldMatrix();
+    if (this.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
   }
   setId(id) {
     this.id = id;
@@ -24357,7 +24374,7 @@ class BaseItem extends Mbr {
     const container = this.board.items.getById(this.parent);
     if (!container)
       return this.getMbr();
-    const worldMatrix = container.getWorldMatrix();
+    const parentMatrix = this.getParentWorldMatrix();
     const local = this.getMbr();
     const corners = [
       new Point(local.left, local.top),
@@ -24366,19 +24383,19 @@ class BaseItem extends Mbr {
       new Point(local.left, local.bottom)
     ];
     for (const c of corners)
-      worldMatrix.apply(c);
+      parentMatrix.apply(c);
     return new Mbr(Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y), Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y));
   }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (!this.index?.getById(childId) && foundItem) {
-          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerWorldMatrix);
+          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
           foundItem.transformation.setLocalMatrix(localMatrix);
@@ -24394,12 +24411,12 @@ class BaseItem extends Mbr {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.index?.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (foundItem) {
-          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerWorldMatrix);
+          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
           foundItem.transformation.setLocalMatrix(worldMatrix);
@@ -24519,7 +24536,7 @@ class BaseItem extends Mbr {
         if (this.parent !== "Board") {
           const container = this.board.items.getById(this.parent);
           if (container?.transformation) {
-            transformOp = toLocalTransformOp(transformOp, container.getWorldMatrix(), this.id);
+            transformOp = toLocalTransformOp(transformOp, container.getNestingMatrix(), this.id);
           }
         }
         this.transformation.apply(transformOp);
@@ -25316,11 +25333,8 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX, scaleY);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -43553,6 +43567,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -43560,6 +43575,16 @@ class Frame2 extends BaseItem {
       x: translateX,
       y: translateY
     }, timeStamp);
+    const newMatrix = this.transformation.toMatrix();
+    if (newMatrix.translateX !== oldMatrix.translateX || newMatrix.translateY !== oldMatrix.translateY) {
+      const dx = newMatrix.translateX - oldMatrix.translateX;
+      const dy = newMatrix.translateY - oldMatrix.translateY;
+      this.index?.list().forEach((child) => {
+        if (child instanceof BaseItem) {
+          child.transformation.translateBy(-dx, -dy, timeStamp);
+        }
+      });
+    }
     this.setLastFrameScale();
     res.mbr = this.getMbr();
     return res;
@@ -43836,8 +43861,9 @@ class Frame2 extends BaseItem {
     this.renderPath(context);
     const ctx = context.ctx;
     ctx.save();
-    this.transformation.applyToContext(ctx);
-    for (const child of this.index.list()) {
+    const { translateX, translateY } = this.getWorldMatrix();
+    ctx.translate(translateX, translateY);
+    for (const child of this.index.items.listAll()) {
       child.render(context);
     }
     ctx.restore();

package/dist/esm/browser.js

@@ -21623,15 +21623,32 @@ class BaseItem extends Mbr {
   getId() {
     return this.id;
   }
-  getWorldMatrix() {
+  getParentWorldMatrix() {
     if (this.parent === "Board") {
-      return this.transformation.toMatrix();
+      return new Matrix;
     }
     const container = this.board.items.getById(this.parent);
     if (!container) {
+      return new Matrix;
+    }
+    const matrix = container.getWorldMatrix();
+    if (container.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
+  }
+  getWorldMatrix() {
+    if (this.parent === "Board") {
       return this.transformation.toMatrix();
     }
-    return this.transformation.toMatrix().composeWith(container.getWorldMatrix());
+    return this.transformation.toMatrix().composeWith(this.getParentWorldMatrix());
+  }
+  getNestingMatrix() {
+    const matrix = this.getWorldMatrix();
+    if (this.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
   }
   setId(id) {
     this.id = id;
@@ -21714,7 +21731,7 @@ class BaseItem extends Mbr {
     const container = this.board.items.getById(this.parent);
     if (!container)
       return this.getMbr();
-    const worldMatrix = container.getWorldMatrix();
+    const parentMatrix = this.getParentWorldMatrix();
     const local = this.getMbr();
     const corners = [
       new Point(local.left, local.top),
@@ -21723,19 +21740,19 @@ class BaseItem extends Mbr {
       new Point(local.left, local.bottom)
     ];
     for (const c of corners)
-      worldMatrix.apply(c);
+      parentMatrix.apply(c);
     return new Mbr(Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y), Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y));
   }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (!this.index?.getById(childId) && foundItem) {
-          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerWorldMatrix);
+          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
           foundItem.transformation.setLocalMatrix(localMatrix);
@@ -21751,12 +21768,12 @@ class BaseItem extends Mbr {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.index?.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (foundItem) {
-          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerWorldMatrix);
+          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
           foundItem.transformation.setLocalMatrix(worldMatrix);
@@ -21876,7 +21893,7 @@ class BaseItem extends Mbr {
         if (this.parent !== "Board") {
           const container = this.board.items.getById(this.parent);
           if (container?.transformation) {
-            transformOp = toLocalTransformOp(transformOp, container.getWorldMatrix(), this.id);
+            transformOp = toLocalTransformOp(transformOp, container.getNestingMatrix(), this.id);
           }
         }
         this.transformation.apply(transformOp);
@@ -22673,11 +22690,8 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX, scaleY);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -40909,6 +40923,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -40916,6 +40931,16 @@ class Frame2 extends BaseItem {
       x: translateX,
       y: translateY
     }, timeStamp);
+    const newMatrix = this.transformation.toMatrix();
+    if (newMatrix.translateX !== oldMatrix.translateX || newMatrix.translateY !== oldMatrix.translateY) {
+      const dx = newMatrix.translateX - oldMatrix.translateX;
+      const dy = newMatrix.translateY - oldMatrix.translateY;
+      this.index?.list().forEach((child) => {
+        if (child instanceof BaseItem) {
+          child.transformation.translateBy(-dx, -dy, timeStamp);
+        }
+      });
+    }
     this.setLastFrameScale();
     res.mbr = this.getMbr();
     return res;
@@ -41192,8 +41217,9 @@ class Frame2 extends BaseItem {
     this.renderPath(context);
     const ctx = context.ctx;
     ctx.save();
-    this.transformation.applyToContext(ctx);
-    for (const child of this.index.list()) {
+    const { translateX, translateY } = this.getWorldMatrix();
+    ctx.translate(translateX, translateY);
+    for (const child of this.index.items.listAll()) {
       child.render(context);
     }
     ctx.restore();

package/dist/esm/index.js

@@ -21616,15 +21616,32 @@ class BaseItem extends Mbr {
   getId() {
     return this.id;
   }
-  getWorldMatrix() {
+  getParentWorldMatrix() {
     if (this.parent === "Board") {
-      return this.transformation.toMatrix();
+      return new Matrix;
     }
     const container = this.board.items.getById(this.parent);
     if (!container) {
+      return new Matrix;
+    }
+    const matrix = container.getWorldMatrix();
+    if (container.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
+  }
+  getWorldMatrix() {
+    if (this.parent === "Board") {
       return this.transformation.toMatrix();
     }
-    return this.transformation.toMatrix().composeWith(container.getWorldMatrix());
+    return this.transformation.toMatrix().composeWith(this.getParentWorldMatrix());
+  }
+  getNestingMatrix() {
+    const matrix = this.getWorldMatrix();
+    if (this.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
   }
   setId(id) {
     this.id = id;
@@ -21707,7 +21724,7 @@ class BaseItem extends Mbr {
     const container = this.board.items.getById(this.parent);
     if (!container)
       return this.getMbr();
-    const worldMatrix = container.getWorldMatrix();
+    const parentMatrix = this.getParentWorldMatrix();
     const local = this.getMbr();
     const corners = [
       new Point(local.left, local.top),
@@ -21716,19 +21733,19 @@ class BaseItem extends Mbr {
       new Point(local.left, local.bottom)
     ];
     for (const c of corners)
-      worldMatrix.apply(c);
+      parentMatrix.apply(c);
     return new Mbr(Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y), Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y));
   }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (!this.index?.getById(childId) && foundItem) {
-          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerWorldMatrix);
+          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
           foundItem.transformation.setLocalMatrix(localMatrix);
@@ -21744,12 +21761,12 @@ class BaseItem extends Mbr {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.index?.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (foundItem) {
-          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerWorldMatrix);
+          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
           foundItem.transformation.setLocalMatrix(worldMatrix);
@@ -21869,7 +21886,7 @@ class BaseItem extends Mbr {
         if (this.parent !== "Board") {
           const container = this.board.items.getById(this.parent);
           if (container?.transformation) {
-            transformOp = toLocalTransformOp(transformOp, container.getWorldMatrix(), this.id);
+            transformOp = toLocalTransformOp(transformOp, container.getNestingMatrix(), this.id);
           }
         }
         this.transformation.apply(transformOp);
@@ -22666,11 +22683,8 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX, scaleY);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -40902,6 +40916,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -40909,6 +40924,16 @@ class Frame2 extends BaseItem {
       x: translateX,
       y: translateY
     }, timeStamp);
+    const newMatrix = this.transformation.toMatrix();
+    if (newMatrix.translateX !== oldMatrix.translateX || newMatrix.translateY !== oldMatrix.translateY) {
+      const dx = newMatrix.translateX - oldMatrix.translateX;
+      const dy = newMatrix.translateY - oldMatrix.translateY;
+      this.index?.list().forEach((child) => {
+        if (child instanceof BaseItem) {
+          child.transformation.translateBy(-dx, -dy, timeStamp);
+        }
+      });
+    }
     this.setLastFrameScale();
     res.mbr = this.getMbr();
     return res;
@@ -41185,8 +41210,9 @@ class Frame2 extends BaseItem {
     this.renderPath(context);
     const ctx = context.ctx;
     ctx.save();
-    this.transformation.applyToContext(ctx);
-    for (const child of this.index.list()) {
+    const { translateX, translateY } = this.getWorldMatrix();
+    ctx.translate(translateX, translateY);
+    for (const child of this.index.items.listAll()) {
       child.render(context);
     }
     ctx.restore();

package/dist/esm/node.js

@@ -24083,15 +24083,32 @@ class BaseItem extends Mbr {
   getId() {
     return this.id;
   }
-  getWorldMatrix() {
+  getParentWorldMatrix() {
     if (this.parent === "Board") {
-      return this.transformation.toMatrix();
+      return new Matrix;
     }
     const container = this.board.items.getById(this.parent);
     if (!container) {
+      return new Matrix;
+    }
+    const matrix = container.getWorldMatrix();
+    if (container.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
+  }
+  getWorldMatrix() {
+    if (this.parent === "Board") {
       return this.transformation.toMatrix();
     }
-    return this.transformation.toMatrix().composeWith(container.getWorldMatrix());
+    return this.transformation.toMatrix().composeWith(this.getParentWorldMatrix());
+  }
+  getNestingMatrix() {
+    const matrix = this.getWorldMatrix();
+    if (this.itemType === "Frame") {
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1, 0, 0);
+    }
+    return matrix;
   }
   setId(id) {
     this.id = id;
@@ -24174,7 +24191,7 @@ class BaseItem extends Mbr {
     const container = this.board.items.getById(this.parent);
     if (!container)
       return this.getMbr();
-    const worldMatrix = container.getWorldMatrix();
+    const parentMatrix = this.getParentWorldMatrix();
     const local = this.getMbr();
     const corners = [
       new Point(local.left, local.top),
@@ -24183,19 +24200,19 @@ class BaseItem extends Mbr {
       new Point(local.left, local.bottom)
     ];
     for (const c of corners)
-      worldMatrix.apply(c);
+      parentMatrix.apply(c);
     return new Mbr(Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y), Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y));
   }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (!this.index?.getById(childId) && foundItem) {
-          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerWorldMatrix);
+          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
           foundItem.transformation.setLocalMatrix(localMatrix);
@@ -24211,12 +24228,12 @@ class BaseItem extends Mbr {
     if (!this.index) {
       return;
     }
-    const containerWorldMatrix = this.getWorldMatrix();
+    const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.index?.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (foundItem) {
-          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerWorldMatrix);
+          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerNestingMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
           foundItem.transformation.setLocalMatrix(worldMatrix);
@@ -24336,7 +24353,7 @@ class BaseItem extends Mbr {
         if (this.parent !== "Board") {
           const container = this.board.items.getById(this.parent);
           if (container?.transformation) {
-            transformOp = toLocalTransformOp(transformOp, container.getWorldMatrix(), this.id);
+            transformOp = toLocalTransformOp(transformOp, container.getNestingMatrix(), this.id);
           }
         }
         this.transformation.apply(transformOp);
@@ -25133,11 +25150,8 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
-    const shouldScale = !this.isInShape && !this.autoSize;
-    if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
-    }
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    ctx.scale(scaleX, scaleY);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -43370,6 +43384,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -43377,6 +43392,16 @@ class Frame2 extends BaseItem {
       x: translateX,
       y: translateY
     }, timeStamp);
+    const newMatrix = this.transformation.toMatrix();
+    if (newMatrix.translateX !== oldMatrix.translateX || newMatrix.translateY !== oldMatrix.translateY) {
+      const dx = newMatrix.translateX - oldMatrix.translateX;
+      const dy = newMatrix.translateY - oldMatrix.translateY;
+      this.index?.list().forEach((child) => {
+        if (child instanceof BaseItem) {
+          child.transformation.translateBy(-dx, -dy, timeStamp);
+        }
+      });
+    }
     this.setLastFrameScale();
     res.mbr = this.getMbr();
     return res;
@@ -43653,8 +43678,9 @@ class Frame2 extends BaseItem {
     this.renderPath(context);
     const ctx = context.ctx;
     ctx.save();
-    this.transformation.applyToContext(ctx);
-    for (const child of this.index.list()) {
+    const { translateX, translateY } = this.getWorldMatrix();
+    ctx.translate(translateX, translateY);
+    for (const child of this.index.items.listAll()) {
       child.render(context);
     }
     ctx.restore();

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

@@ -47,12 +47,23 @@ export declare class BaseItem extends Mbr implements Geometry {
     constructor(board: Board, id?: string, defaultItemData?: BaseItemData | undefined, isGroupItem?: boolean);
     updateChildrenIds(): void;
     getId(): string;
+    /**
+     * Returns the parent's world matrix. For Frames, only the translation component
+     * is returned to ensure children are not affected by frame scaling.
+     */
+    getParentWorldMatrix(): Matrix;
     /**
      * Returns the full world-space matrix by walking up the parent chain.
      * For top-level items (parent === "Board") this is identical to the item's
-     * own transformation matrix. For nested items it is parentWorld × localMatrix.
+     * own transformation matrix. For nested items it is parentTransform × localMatrix.
+     * Note: Frames act as non-scaling containers.
      */
     getWorldMatrix(): Matrix;
+    /**
+     * Returns the matrix used for nesting children. For Frames, this is only
+     * the translation part. For other items it is the full world matrix.
+     */
+    getNestingMatrix(): Matrix;
     setId(id: string): this;
     getChildrenIds(): string[] | null;
     addChildItems(children: BaseItem[]): void;

package/package.json

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