microboard-temp 0.4.93 → 0.4.95

package/dist/cjs/browser.js

@@ -21474,6 +21474,7 @@ class BaseItem extends Mbr {
   onRemoveCallbacks = [];
   shouldUseCustomRender = false;
   shouldRenderOutsideViewRect = true;
+  shouldUseRelativeAlignment = true;
   itemType = "";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
@@ -45714,10 +45715,10 @@ class AlignmentHelper {
       }
     };
     nearbyItems.forEach((item) => {
-      if (item === movingItem || item.itemType === "Comment") {
+      if (item === movingItem || item.itemType === "Comment" || item instanceof BaseItem && !item.shouldUseRelativeAlignment) {
         return;
       }
-      const itemMbr = item.itemType === "Shape" ? item.getPath().getMbr() : item.getMbr();
+      const itemMbr = item.getPathMbr();
       const centerXMoving = (movingMBR.left + movingMBR.right) / 2;
       const centerXItem = (itemMbr.left + itemMbr.right) / 2;
       const centerYMoving = (movingMBR.top + movingMBR.bottom) / 2;
@@ -47835,7 +47836,7 @@ class Card extends BaseItem {
       this.board.bringToFront(this);
     }, 1000);
     this.transformation.subject.subscribe((_, op) => {
-      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+      if (this.parent === "Board" && op.method === "translateBy") {
         this.throttledBringToFront();
       }
       this.updateMbr();
@@ -47862,14 +47863,14 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
-  render(context) {
+  render(context, left) {
     if (this.transformationRenderBlock) {
       return;
     }
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, left ? left : this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -47956,6 +47957,7 @@ class Deck extends BaseItem {
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.shouldUseRelativeAlignment = false;
           this.index?.insert(foundItem);
         }
       }
@@ -47980,6 +47982,7 @@ class Deck extends BaseItem {
           });
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.shouldUseRelativeAlignment = true;
           this.board.items.index.insert(foundItem);
         }
       }
@@ -48066,14 +48069,16 @@ class Deck extends BaseItem {
     if (!width2 || !height3) {
       return;
     }
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width2;
-    tempCanvas.height = height3;
+    const tempCanvas = conf.documentFactory.createElement("canvas");
+    tempCanvas.width = 1e4;
+    tempCanvas.height = 1e4;
     const tempCtx = tempCanvas.getContext("2d");
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.render(tempContext);
+    this.index?.list().forEach((item, index2) => {
+      item.render(tempContext, index2 * 2);
+    });
     this.cachedCanvas = tempCanvas;
   }
 }

package/dist/cjs/index.js

@@ -21474,6 +21474,7 @@ class BaseItem extends Mbr {
   onRemoveCallbacks = [];
   shouldUseCustomRender = false;
   shouldRenderOutsideViewRect = true;
+  shouldUseRelativeAlignment = true;
   itemType = "";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
@@ -45714,10 +45715,10 @@ class AlignmentHelper {
       }
     };
     nearbyItems.forEach((item) => {
-      if (item === movingItem || item.itemType === "Comment") {
+      if (item === movingItem || item.itemType === "Comment" || item instanceof BaseItem && !item.shouldUseRelativeAlignment) {
         return;
       }
-      const itemMbr = item.itemType === "Shape" ? item.getPath().getMbr() : item.getMbr();
+      const itemMbr = item.getPathMbr();
       const centerXMoving = (movingMBR.left + movingMBR.right) / 2;
       const centerXItem = (itemMbr.left + itemMbr.right) / 2;
       const centerYMoving = (movingMBR.top + movingMBR.bottom) / 2;
@@ -47835,7 +47836,7 @@ class Card extends BaseItem {
       this.board.bringToFront(this);
     }, 1000);
     this.transformation.subject.subscribe((_, op) => {
-      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+      if (this.parent === "Board" && op.method === "translateBy") {
         this.throttledBringToFront();
       }
       this.updateMbr();
@@ -47862,14 +47863,14 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
-  render(context) {
+  render(context, left) {
     if (this.transformationRenderBlock) {
       return;
     }
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, left ? left : this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -47956,6 +47957,7 @@ class Deck extends BaseItem {
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.shouldUseRelativeAlignment = false;
           this.index?.insert(foundItem);
         }
       }
@@ -47980,6 +47982,7 @@ class Deck extends BaseItem {
           });
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.shouldUseRelativeAlignment = true;
           this.board.items.index.insert(foundItem);
         }
       }
@@ -48066,14 +48069,16 @@ class Deck extends BaseItem {
     if (!width2 || !height3) {
       return;
     }
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width2;
-    tempCanvas.height = height3;
+    const tempCanvas = conf.documentFactory.createElement("canvas");
+    tempCanvas.width = 1e4;
+    tempCanvas.height = 1e4;
     const tempCtx = tempCanvas.getContext("2d");
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.render(tempContext);
+    this.index?.list().forEach((item, index2) => {
+      item.render(tempContext, index2 * 2);
+    });
     this.cachedCanvas = tempCanvas;
   }
 }

package/dist/cjs/node.js

@@ -23946,6 +23946,7 @@ class BaseItem extends Mbr {
   onRemoveCallbacks = [];
   shouldUseCustomRender = false;
   shouldRenderOutsideViewRect = true;
+  shouldUseRelativeAlignment = true;
   itemType = "";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
@@ -48187,10 +48188,10 @@ class AlignmentHelper {
       }
     };
     nearbyItems.forEach((item) => {
-      if (item === movingItem || item.itemType === "Comment") {
+      if (item === movingItem || item.itemType === "Comment" || item instanceof BaseItem && !item.shouldUseRelativeAlignment) {
         return;
       }
-      const itemMbr = item.itemType === "Shape" ? item.getPath().getMbr() : item.getMbr();
+      const itemMbr = item.getPathMbr();
       const centerXMoving = (movingMBR.left + movingMBR.right) / 2;
       const centerXItem = (itemMbr.left + itemMbr.right) / 2;
       const centerYMoving = (movingMBR.top + movingMBR.bottom) / 2;
@@ -50308,7 +50309,7 @@ class Card extends BaseItem {
       this.board.bringToFront(this);
     }, 1000);
     this.transformation.subject.subscribe((_, op) => {
-      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+      if (this.parent === "Board" && op.method === "translateBy") {
         this.throttledBringToFront();
       }
       this.updateMbr();
@@ -50335,14 +50336,14 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
-  render(context) {
+  render(context, left) {
     if (this.transformationRenderBlock) {
       return;
     }
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, left ? left : this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -50429,6 +50430,7 @@ class Deck extends BaseItem {
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.shouldUseRelativeAlignment = false;
           this.index?.insert(foundItem);
         }
       }
@@ -50453,6 +50455,7 @@ class Deck extends BaseItem {
           });
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.shouldUseRelativeAlignment = true;
           this.board.items.index.insert(foundItem);
         }
       }
@@ -50539,14 +50542,16 @@ class Deck extends BaseItem {
     if (!width2 || !height3) {
       return;
     }
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width2;
-    tempCanvas.height = height3;
+    const tempCanvas = conf.documentFactory.createElement("canvas");
+    tempCanvas.width = 1e4;
+    tempCanvas.height = 1e4;
     const tempCtx = tempCanvas.getContext("2d");
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.render(tempContext);
+    this.index?.list().forEach((item, index2) => {
+      item.render(tempContext, index2 * 2);
+    });
     this.cachedCanvas = tempCanvas;
   }
 }

package/dist/esm/browser.js

@@ -21323,6 +21323,7 @@ class BaseItem extends Mbr {
   onRemoveCallbacks = [];
   shouldUseCustomRender = false;
   shouldRenderOutsideViewRect = true;
+  shouldUseRelativeAlignment = true;
   itemType = "";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
@@ -45563,10 +45564,10 @@ class AlignmentHelper {
       }
     };
     nearbyItems.forEach((item) => {
-      if (item === movingItem || item.itemType === "Comment") {
+      if (item === movingItem || item.itemType === "Comment" || item instanceof BaseItem && !item.shouldUseRelativeAlignment) {
         return;
       }
-      const itemMbr = item.itemType === "Shape" ? item.getPath().getMbr() : item.getMbr();
+      const itemMbr = item.getPathMbr();
       const centerXMoving = (movingMBR.left + movingMBR.right) / 2;
       const centerXItem = (itemMbr.left + itemMbr.right) / 2;
       const centerYMoving = (movingMBR.top + movingMBR.bottom) / 2;
@@ -47684,7 +47685,7 @@ class Card extends BaseItem {
       this.board.bringToFront(this);
     }, 1000);
     this.transformation.subject.subscribe((_, op) => {
-      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+      if (this.parent === "Board" && op.method === "translateBy") {
         this.throttledBringToFront();
       }
       this.updateMbr();
@@ -47711,14 +47712,14 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
-  render(context) {
+  render(context, left) {
     if (this.transformationRenderBlock) {
       return;
     }
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, left ? left : this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -47805,6 +47806,7 @@ class Deck extends BaseItem {
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.shouldUseRelativeAlignment = false;
           this.index?.insert(foundItem);
         }
       }
@@ -47829,6 +47831,7 @@ class Deck extends BaseItem {
           });
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.shouldUseRelativeAlignment = true;
           this.board.items.index.insert(foundItem);
         }
       }
@@ -47915,14 +47918,16 @@ class Deck extends BaseItem {
     if (!width2 || !height3) {
       return;
     }
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width2;
-    tempCanvas.height = height3;
+    const tempCanvas = conf.documentFactory.createElement("canvas");
+    tempCanvas.width = 1e4;
+    tempCanvas.height = 1e4;
     const tempCtx = tempCanvas.getContext("2d");
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.render(tempContext);
+    this.index?.list().forEach((item, index2) => {
+      item.render(tempContext, index2 * 2);
+    });
     this.cachedCanvas = tempCanvas;
   }
 }

package/dist/esm/index.js

@@ -21316,6 +21316,7 @@ class BaseItem extends Mbr {
   onRemoveCallbacks = [];
   shouldUseCustomRender = false;
   shouldRenderOutsideViewRect = true;
+  shouldUseRelativeAlignment = true;
   itemType = "";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
@@ -45556,10 +45557,10 @@ class AlignmentHelper {
       }
     };
     nearbyItems.forEach((item) => {
-      if (item === movingItem || item.itemType === "Comment") {
+      if (item === movingItem || item.itemType === "Comment" || item instanceof BaseItem && !item.shouldUseRelativeAlignment) {
         return;
       }
-      const itemMbr = item.itemType === "Shape" ? item.getPath().getMbr() : item.getMbr();
+      const itemMbr = item.getPathMbr();
       const centerXMoving = (movingMBR.left + movingMBR.right) / 2;
       const centerXItem = (itemMbr.left + itemMbr.right) / 2;
       const centerYMoving = (movingMBR.top + movingMBR.bottom) / 2;
@@ -47677,7 +47678,7 @@ class Card extends BaseItem {
       this.board.bringToFront(this);
     }, 1000);
     this.transformation.subject.subscribe((_, op) => {
-      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+      if (this.parent === "Board" && op.method === "translateBy") {
         this.throttledBringToFront();
       }
       this.updateMbr();
@@ -47704,14 +47705,14 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
-  render(context) {
+  render(context, left) {
     if (this.transformationRenderBlock) {
       return;
     }
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, left ? left : this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -47798,6 +47799,7 @@ class Deck extends BaseItem {
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.shouldUseRelativeAlignment = false;
           this.index?.insert(foundItem);
         }
       }
@@ -47822,6 +47824,7 @@ class Deck extends BaseItem {
           });
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.shouldUseRelativeAlignment = true;
           this.board.items.index.insert(foundItem);
         }
       }
@@ -47908,14 +47911,16 @@ class Deck extends BaseItem {
     if (!width2 || !height3) {
       return;
     }
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width2;
-    tempCanvas.height = height3;
+    const tempCanvas = conf.documentFactory.createElement("canvas");
+    tempCanvas.width = 1e4;
+    tempCanvas.height = 1e4;
     const tempCtx = tempCanvas.getContext("2d");
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.render(tempContext);
+    this.index?.list().forEach((item, index2) => {
+      item.render(tempContext, index2 * 2);
+    });
     this.cachedCanvas = tempCanvas;
   }
 }

package/dist/esm/node.js

@@ -23783,6 +23783,7 @@ class BaseItem extends Mbr {
   onRemoveCallbacks = [];
   shouldUseCustomRender = false;
   shouldRenderOutsideViewRect = true;
+  shouldUseRelativeAlignment = true;
   itemType = "";
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
@@ -48024,10 +48025,10 @@ class AlignmentHelper {
       }
     };
     nearbyItems.forEach((item) => {
-      if (item === movingItem || item.itemType === "Comment") {
+      if (item === movingItem || item.itemType === "Comment" || item instanceof BaseItem && !item.shouldUseRelativeAlignment) {
         return;
       }
-      const itemMbr = item.itemType === "Shape" ? item.getPath().getMbr() : item.getMbr();
+      const itemMbr = item.getPathMbr();
       const centerXMoving = (movingMBR.left + movingMBR.right) / 2;
       const centerXItem = (itemMbr.left + itemMbr.right) / 2;
       const centerYMoving = (movingMBR.top + movingMBR.bottom) / 2;
@@ -50145,7 +50146,7 @@ class Card extends BaseItem {
       this.board.bringToFront(this);
     }, 1000);
     this.transformation.subject.subscribe((_, op) => {
-      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+      if (this.parent === "Board" && op.method === "translateBy") {
         this.throttledBringToFront();
       }
       this.updateMbr();
@@ -50172,14 +50173,14 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
-  render(context) {
+  render(context, left) {
     if (this.transformationRenderBlock) {
       return;
     }
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, left ? left : this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -50266,6 +50267,7 @@ class Deck extends BaseItem {
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.shouldUseRelativeAlignment = false;
           this.index?.insert(foundItem);
         }
       }
@@ -50290,6 +50292,7 @@ class Deck extends BaseItem {
           });
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.shouldUseRelativeAlignment = true;
           this.board.items.index.insert(foundItem);
         }
       }
@@ -50376,14 +50379,16 @@ class Deck extends BaseItem {
     if (!width2 || !height3) {
       return;
     }
-    const tempCanvas = document.createElement("canvas");
-    tempCanvas.width = width2;
-    tempCanvas.height = height3;
+    const tempCanvas = conf.documentFactory.createElement("canvas");
+    tempCanvas.width = 1e4;
+    tempCanvas.height = 1e4;
     const tempCtx = tempCanvas.getContext("2d");
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.render(tempContext);
+    this.index?.list().forEach((item, index2) => {
+      item.render(tempContext, index2 * 2);
+    });
     this.cachedCanvas = tempCanvas;
   }
 }

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

@@ -36,6 +36,7 @@ export declare class BaseItem extends Mbr implements Geometry {
     onRemoveCallbacks: (() => void)[];
     shouldUseCustomRender: boolean;
     shouldRenderOutsideViewRect: boolean;
+    shouldUseRelativeAlignment: boolean;
     itemType: string;
     constructor(board: Board, id?: string, defaultItemData?: BaseItemData | undefined, isGroupItem?: boolean);
     getId(): string;

package/dist/types/Items/Examples/CardGame/Card/Card.d.ts

@@ -26,7 +26,7 @@ export declare class Card extends BaseItem {
     });
     createImages(): void;
     updateImageToRender(): void;
-    render(context: DrawingContext): void;
+    render(context: DrawingContext, left?: number): void;
     updateMbr(): void;
     getPath(): Path | Paths;
     deserialize(data: SerializedItemData): this;

package/package.json

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