microboard-temp 0.11.2 → 0.11.4

package/dist/cjs/browser.js

@@ -17752,9 +17752,15 @@ class TransformationCommand {
   transformation;
   operation;
   reverse;
-  constructor(transformation, operation) {
+  itemsMap = new Map;
+  constructor(transformation, operation, items) {
     this.transformation = transformation;
     this.operation = operation;
+    if (items) {
+      for (const item of items) {
+        this.itemsMap.set(item.transformation, item);
+      }
+    }
     this.reverse = this.getReverse();
   }
   merge(op) {
@@ -17764,12 +17770,22 @@ class TransformationCommand {
   }
   apply() {
     for (const transformation of this.transformation) {
-      transformation.apply(this.operation);
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(this.operation);
+      } else {
+        transformation.apply(this.operation);
+      }
     }
   }
   revert() {
-    this.reverse.forEach(({ item, operation }) => {
-      item.apply(operation);
+    this.reverse.forEach(({ item: transformation, operation }) => {
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(operation);
+      } else {
+        transformation.apply(operation);
+      }
     });
   }
   getReverse() {
@@ -19754,7 +19770,7 @@ function createRichTextCommand(items, operation, board) {
   }
 }
 function createTransformationCommand(items, operation) {
-  return new TransformationCommand(items.map((item) => item.transformation), operation);
+  return new TransformationCommand(items.map((item) => item.transformation), operation, items);
 }
 function createLinkToCommand(items, operation) {
   return new LinkToCommand(items.map((item) => item.linkTo), operation);
@@ -21778,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;
@@ -21869,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),
@@ -21878,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);
@@ -21906,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);
@@ -22031,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);
@@ -22828,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);
@@ -41064,6 +41094,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -41071,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;
@@ -41347,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

@@ -17752,9 +17752,15 @@ class TransformationCommand {
   transformation;
   operation;
   reverse;
-  constructor(transformation, operation) {
+  itemsMap = new Map;
+  constructor(transformation, operation, items) {
     this.transformation = transformation;
     this.operation = operation;
+    if (items) {
+      for (const item of items) {
+        this.itemsMap.set(item.transformation, item);
+      }
+    }
     this.reverse = this.getReverse();
   }
   merge(op) {
@@ -17764,12 +17770,22 @@ class TransformationCommand {
   }
   apply() {
     for (const transformation of this.transformation) {
-      transformation.apply(this.operation);
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(this.operation);
+      } else {
+        transformation.apply(this.operation);
+      }
     }
   }
   revert() {
-    this.reverse.forEach(({ item, operation }) => {
-      item.apply(operation);
+    this.reverse.forEach(({ item: transformation, operation }) => {
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(operation);
+      } else {
+        transformation.apply(operation);
+      }
     });
   }
   getReverse() {
@@ -19754,7 +19770,7 @@ function createRichTextCommand(items, operation, board) {
   }
 }
 function createTransformationCommand(items, operation) {
-  return new TransformationCommand(items.map((item) => item.transformation), operation);
+  return new TransformationCommand(items.map((item) => item.transformation), operation, items);
 }
 function createLinkToCommand(items, operation) {
   return new LinkToCommand(items.map((item) => item.linkTo), operation);
@@ -21778,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;
@@ -21869,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),
@@ -21878,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);
@@ -21906,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);
@@ -22031,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);
@@ -22828,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);
@@ -41064,6 +41094,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -41071,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;
@@ -41347,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

@@ -20292,9 +20292,15 @@ class TransformationCommand {
   transformation;
   operation;
   reverse;
-  constructor(transformation, operation) {
+  itemsMap = new Map;
+  constructor(transformation, operation, items) {
     this.transformation = transformation;
     this.operation = operation;
+    if (items) {
+      for (const item of items) {
+        this.itemsMap.set(item.transformation, item);
+      }
+    }
     this.reverse = this.getReverse();
   }
   merge(op) {
@@ -20304,12 +20310,22 @@ class TransformationCommand {
   }
   apply() {
     for (const transformation of this.transformation) {
-      transformation.apply(this.operation);
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(this.operation);
+      } else {
+        transformation.apply(this.operation);
+      }
     }
   }
   revert() {
-    this.reverse.forEach(({ item, operation }) => {
-      item.apply(operation);
+    this.reverse.forEach(({ item: transformation, operation }) => {
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(operation);
+      } else {
+        transformation.apply(operation);
+      }
     });
   }
   getReverse() {
@@ -22293,7 +22309,7 @@ function createRichTextCommand(items, operation, board) {
   }
 }
 function createTransformationCommand(items, operation) {
-  return new TransformationCommand(items.map((item) => item.transformation), operation);
+  return new TransformationCommand(items.map((item) => item.transformation), operation, items);
 }
 function createLinkToCommand(items, operation) {
   return new LinkToCommand(items.map((item) => item.linkTo), operation);
@@ -24250,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;
@@ -24341,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),
@@ -24350,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);
@@ -24378,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);
@@ -24503,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);
@@ -25300,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);
@@ -43537,6 +43567,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -43544,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;
@@ -43820,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

@@ -17581,9 +17581,15 @@ class TransformationCommand {
   transformation;
   operation;
   reverse;
-  constructor(transformation, operation) {
+  itemsMap = new Map;
+  constructor(transformation, operation, items) {
     this.transformation = transformation;
     this.operation = operation;
+    if (items) {
+      for (const item of items) {
+        this.itemsMap.set(item.transformation, item);
+      }
+    }
     this.reverse = this.getReverse();
   }
   merge(op) {
@@ -17593,12 +17599,22 @@ class TransformationCommand {
   }
   apply() {
     for (const transformation of this.transformation) {
-      transformation.apply(this.operation);
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(this.operation);
+      } else {
+        transformation.apply(this.operation);
+      }
     }
   }
   revert() {
-    this.reverse.forEach(({ item, operation }) => {
-      item.apply(operation);
+    this.reverse.forEach(({ item: transformation, operation }) => {
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(operation);
+      } else {
+        transformation.apply(operation);
+      }
     });
   }
   getReverse() {
@@ -19583,7 +19599,7 @@ function createRichTextCommand(items, operation, board) {
   }
 }
 function createTransformationCommand(items, operation) {
-  return new TransformationCommand(items.map((item) => item.transformation), operation);
+  return new TransformationCommand(items.map((item) => item.transformation), operation, items);
 }
 function createLinkToCommand(items, operation) {
   return new LinkToCommand(items.map((item) => item.linkTo), operation);
@@ -21607,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;
@@ -21698,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),
@@ -21707,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);
@@ -21735,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);
@@ -21860,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);
@@ -22657,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);
@@ -40893,6 +40923,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -40900,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;
@@ -41176,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

@@ -17574,9 +17574,15 @@ class TransformationCommand {
   transformation;
   operation;
   reverse;
-  constructor(transformation, operation) {
+  itemsMap = new Map;
+  constructor(transformation, operation, items) {
     this.transformation = transformation;
     this.operation = operation;
+    if (items) {
+      for (const item of items) {
+        this.itemsMap.set(item.transformation, item);
+      }
+    }
     this.reverse = this.getReverse();
   }
   merge(op) {
@@ -17586,12 +17592,22 @@ class TransformationCommand {
   }
   apply() {
     for (const transformation of this.transformation) {
-      transformation.apply(this.operation);
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(this.operation);
+      } else {
+        transformation.apply(this.operation);
+      }
     }
   }
   revert() {
-    this.reverse.forEach(({ item, operation }) => {
-      item.apply(operation);
+    this.reverse.forEach(({ item: transformation, operation }) => {
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(operation);
+      } else {
+        transformation.apply(operation);
+      }
     });
   }
   getReverse() {
@@ -19576,7 +19592,7 @@ function createRichTextCommand(items, operation, board) {
   }
 }
 function createTransformationCommand(items, operation) {
-  return new TransformationCommand(items.map((item) => item.transformation), operation);
+  return new TransformationCommand(items.map((item) => item.transformation), operation, items);
 }
 function createLinkToCommand(items, operation) {
   return new LinkToCommand(items.map((item) => item.linkTo), operation);
@@ -21600,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;
@@ -21691,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),
@@ -21700,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);
@@ -21728,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);
@@ -21853,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);
@@ -22650,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);
@@ -40886,6 +40916,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -40893,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;
@@ -41169,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

@@ -20109,9 +20109,15 @@ class TransformationCommand {
   transformation;
   operation;
   reverse;
-  constructor(transformation, operation) {
+  itemsMap = new Map;
+  constructor(transformation, operation, items) {
     this.transformation = transformation;
     this.operation = operation;
+    if (items) {
+      for (const item of items) {
+        this.itemsMap.set(item.transformation, item);
+      }
+    }
     this.reverse = this.getReverse();
   }
   merge(op) {
@@ -20121,12 +20127,22 @@ class TransformationCommand {
   }
   apply() {
     for (const transformation of this.transformation) {
-      transformation.apply(this.operation);
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(this.operation);
+      } else {
+        transformation.apply(this.operation);
+      }
     }
   }
   revert() {
-    this.reverse.forEach(({ item, operation }) => {
-      item.apply(operation);
+    this.reverse.forEach(({ item: transformation, operation }) => {
+      const item = this.itemsMap.get(transformation);
+      if (item) {
+        item.apply(operation);
+      } else {
+        transformation.apply(operation);
+      }
     });
   }
   getReverse() {
@@ -22110,7 +22126,7 @@ function createRichTextCommand(items, operation, board) {
   }
 }
 function createTransformationCommand(items, operation) {
-  return new TransformationCommand(items.map((item) => item.transformation), operation);
+  return new TransformationCommand(items.map((item) => item.transformation), operation, items);
 }
 function createLinkToCommand(items, operation) {
   return new LinkToCommand(items.map((item) => item.linkTo), operation);
@@ -24067,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;
@@ -24158,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),
@@ -24167,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);
@@ -24195,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);
@@ -24320,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);
@@ -25117,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);
@@ -43354,6 +43384,7 @@ class Frame2 extends BaseItem {
       scaleY = 1;
       translateY = 0;
     }
+    const oldMatrix = this.transformation.toMatrix();
     this.transformation.scaleByTranslateBy({
       x: scaleX,
       y: scaleY
@@ -43361,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;
@@ -43637,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/dist/types/Items/Transformation/TransformationCommand.d.ts

@@ -1,6 +1,11 @@
 import { Transformation } from "./Transformation";
 import { TransformationOperation } from "./TransformationOperations";
-import { Command } from "../../Events";
+import { Command, Operation } from "../../Events";
+/** Minimal interface to avoid circular import with BaseItem/Item */
+interface TransformableItem {
+    apply(op: Operation): void;
+    transformation: Transformation;
+}
 export declare class TransformationCommand implements Command {
     private transformation;
     private operation;
@@ -8,7 +13,9 @@ export declare class TransformationCommand implements Command {
         item: Transformation;
         operation: TransformationOperation;
     }[];
-    constructor(transformation: Transformation[], operation: TransformationOperation);
+    /** Map from Transformation → Item, populated when items are passed to the constructor. */
+    private itemsMap;
+    constructor(transformation: Transformation[], operation: TransformationOperation, items?: TransformableItem[]);
     merge(op: TransformationOperation): this;
     apply(): void;
     revert(): void;
@@ -17,3 +24,4 @@ export declare class TransformationCommand implements Command {
         operation: TransformationOperation;
     }[];
 }
+export {};

package/package.json

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