microboard-temp 0.5.52 → 0.5.54

package/dist/cjs/browser.js

@@ -46528,10 +46528,10 @@ class Select extends Tool {
         return false;
       }
       const draggingMbr = draggingItem.getMbr();
-      const frames = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => item instanceof Frame2);
-      frames.forEach((frame) => {
-        if (frame.handleNesting(draggingItem)) {
-          this.nestingHighlighter.add(frame, draggingItem);
+      const groups = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => !!(("index" in item) && item.index));
+      groups.forEach((group) => {
+        if (group.handleNesting(draggingItem)) {
+          this.nestingHighlighter.add(group, draggingItem);
         } else {
           this.nestingHighlighter.remove(draggingItem);
         }
@@ -46582,13 +46582,13 @@ class Select extends Tool {
     }
   }
   updateFramesNesting(selectionMbr, selection) {
-    const frames = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => item instanceof Frame2).filter((frame) => !selection.items.list().includes(frame));
-    const draggingFramesIds = selection.list().filter((item) => item instanceof Frame2).map((frame) => frame.getId());
+    const groups = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => !!(("index" in item) && item.index)).filter((group) => !selection.items.list().includes(group));
+    const draggingGroupsIds = selection.list().filter((item) => !!(("index" in item) && item.index)).map((group) => group.getId());
     selection.list().forEach((item) => {
-      if (!(item instanceof Frame2) && !draggingFramesIds.includes(item.parent)) {
-        frames.forEach((frame) => {
-          if (frame.handleNesting(item)) {
-            this.nestingHighlighter.add(frame, item);
+      if (!(("index" in item) && item.index) && !draggingGroupsIds.includes(item.parent)) {
+        groups.forEach((group) => {
+          if (group.handleNesting(item)) {
+            this.nestingHighlighter.add(group, item);
           } else {
             this.nestingHighlighter.remove(item);
           }
@@ -48141,6 +48141,8 @@ class Deck extends BaseItem {
   resizeEnabled = false;
   path = null;
   isPerpendicular = undefined;
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -48251,6 +48253,7 @@ class Deck extends BaseItem {
       const j = Math.floor(Math.random() * (i + 1));
       [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
     }
+    this.emitAnimation();
     this.removeChildItems(this.index.list());
     this.addChildItems(shuffled);
   }
@@ -48267,6 +48270,12 @@ class Deck extends BaseItem {
   apply(op) {
     super.apply(op);
     if (op.class === "Deck") {
+      if (op.method === "startAnimation" && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 4000) {
+        this.startAnimation();
+        setTimeout(() => {
+          this.stopAnimation();
+        }, 2000);
+      }
       this.isCacheDirty = true;
     }
     this.subject.publish(this);
@@ -48291,6 +48300,7 @@ class Deck extends BaseItem {
     return this;
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
@@ -48302,9 +48312,42 @@ class Deck extends BaseItem {
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();
       ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      if (this.animationFrameId) {
+        const now = Date.now();
+        const progress = now % 2000 / 2000;
+        const yPos = this.top + this.getHeight() * Math.abs(Math.sin(progress * Math.PI));
+        ctx.fillStyle = conf.SELECTION_COLOR;
+        ctx.fillRect(this.left + 5, yPos - 2, this.getWidth() - 10, 4);
+      }
       ctx.restore();
     }
   }
+  emitAnimation() {
+    this.emit({
+      class: "Deck",
+      method: "startAnimation",
+      item: [this.getId()],
+      newData: { timeStamp: Date.now() }
+    });
+  }
+  startAnimation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.subject.publish(this);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopAnimation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
     const cards = this.index?.list();
@@ -48851,7 +48894,19 @@ class AddScreen extends ShapeTool {
       localStorage.setItem("screenOwnerId", screenOwnerId);
     }
     this.item.applyOwnerId(screenOwnerId);
-    return super.pointerUp();
+    const currMbr = this.item.getMbr();
+    const screenChildren = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board").filter((item) => this.item.handleNesting(item));
+    const width2 = this.bounds.getWidth() < 2 ? 100 : this.bounds.getWidth();
+    const height3 = this.bounds.getHeight() < 2 ? 100 : this.bounds.getHeight();
+    this.initTransformation(width2 / 100, height3 / 100);
+    const screen = this.board.add(this.item);
+    screen.emitNesting(screenChildren);
+    this.isDown = false;
+    this.board.selection.removeAll();
+    this.board.selection.add(screen);
+    this.board.tools.select();
+    this.board.tools.publish();
+    return true;
   }
 }
 
@@ -51950,7 +52005,7 @@ function updateFrameChildren({
 }) {
   const groups = board.items.getGroupItemsEnclosedOrCrossed(mbr.left, mbr.top, mbr.right, mbr.bottom);
   board.selection.items.list().forEach((item) => {
-    if ("getChildrenIds" in item && item.getChildrenIds()) {
+    if ("index" in item && item.index) {
       const currMbr = item.getMbr();
       const itemsToCheck = board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom);
       itemsToCheck.forEach((currItem) => {

package/dist/cjs/index.js

@@ -46528,10 +46528,10 @@ class Select extends Tool {
         return false;
       }
       const draggingMbr = draggingItem.getMbr();
-      const frames = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => item instanceof Frame2);
-      frames.forEach((frame) => {
-        if (frame.handleNesting(draggingItem)) {
-          this.nestingHighlighter.add(frame, draggingItem);
+      const groups = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => !!(("index" in item) && item.index));
+      groups.forEach((group) => {
+        if (group.handleNesting(draggingItem)) {
+          this.nestingHighlighter.add(group, draggingItem);
         } else {
           this.nestingHighlighter.remove(draggingItem);
         }
@@ -46582,13 +46582,13 @@ class Select extends Tool {
     }
   }
   updateFramesNesting(selectionMbr, selection) {
-    const frames = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => item instanceof Frame2).filter((frame) => !selection.items.list().includes(frame));
-    const draggingFramesIds = selection.list().filter((item) => item instanceof Frame2).map((frame) => frame.getId());
+    const groups = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => !!(("index" in item) && item.index)).filter((group) => !selection.items.list().includes(group));
+    const draggingGroupsIds = selection.list().filter((item) => !!(("index" in item) && item.index)).map((group) => group.getId());
     selection.list().forEach((item) => {
-      if (!(item instanceof Frame2) && !draggingFramesIds.includes(item.parent)) {
-        frames.forEach((frame) => {
-          if (frame.handleNesting(item)) {
-            this.nestingHighlighter.add(frame, item);
+      if (!(("index" in item) && item.index) && !draggingGroupsIds.includes(item.parent)) {
+        groups.forEach((group) => {
+          if (group.handleNesting(item)) {
+            this.nestingHighlighter.add(group, item);
           } else {
             this.nestingHighlighter.remove(item);
           }
@@ -48141,6 +48141,8 @@ class Deck extends BaseItem {
   resizeEnabled = false;
   path = null;
   isPerpendicular = undefined;
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -48251,6 +48253,7 @@ class Deck extends BaseItem {
       const j = Math.floor(Math.random() * (i + 1));
       [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
     }
+    this.emitAnimation();
     this.removeChildItems(this.index.list());
     this.addChildItems(shuffled);
   }
@@ -48267,6 +48270,12 @@ class Deck extends BaseItem {
   apply(op) {
     super.apply(op);
     if (op.class === "Deck") {
+      if (op.method === "startAnimation" && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 4000) {
+        this.startAnimation();
+        setTimeout(() => {
+          this.stopAnimation();
+        }, 2000);
+      }
       this.isCacheDirty = true;
     }
     this.subject.publish(this);
@@ -48291,6 +48300,7 @@ class Deck extends BaseItem {
     return this;
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
@@ -48302,9 +48312,42 @@ class Deck extends BaseItem {
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();
       ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      if (this.animationFrameId) {
+        const now = Date.now();
+        const progress = now % 2000 / 2000;
+        const yPos = this.top + this.getHeight() * Math.abs(Math.sin(progress * Math.PI));
+        ctx.fillStyle = conf.SELECTION_COLOR;
+        ctx.fillRect(this.left + 5, yPos - 2, this.getWidth() - 10, 4);
+      }
       ctx.restore();
     }
   }
+  emitAnimation() {
+    this.emit({
+      class: "Deck",
+      method: "startAnimation",
+      item: [this.getId()],
+      newData: { timeStamp: Date.now() }
+    });
+  }
+  startAnimation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.subject.publish(this);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopAnimation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
     const cards = this.index?.list();
@@ -48851,7 +48894,19 @@ class AddScreen extends ShapeTool {
       localStorage.setItem("screenOwnerId", screenOwnerId);
     }
     this.item.applyOwnerId(screenOwnerId);
-    return super.pointerUp();
+    const currMbr = this.item.getMbr();
+    const screenChildren = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board").filter((item) => this.item.handleNesting(item));
+    const width2 = this.bounds.getWidth() < 2 ? 100 : this.bounds.getWidth();
+    const height3 = this.bounds.getHeight() < 2 ? 100 : this.bounds.getHeight();
+    this.initTransformation(width2 / 100, height3 / 100);
+    const screen = this.board.add(this.item);
+    screen.emitNesting(screenChildren);
+    this.isDown = false;
+    this.board.selection.removeAll();
+    this.board.selection.add(screen);
+    this.board.tools.select();
+    this.board.tools.publish();
+    return true;
   }
 }
 
@@ -51950,7 +52005,7 @@ function updateFrameChildren({
 }) {
   const groups = board.items.getGroupItemsEnclosedOrCrossed(mbr.left, mbr.top, mbr.right, mbr.bottom);
   board.selection.items.list().forEach((item) => {
-    if ("getChildrenIds" in item && item.getChildrenIds()) {
+    if ("index" in item && item.index) {
       const currMbr = item.getMbr();
       const itemsToCheck = board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom);
       itemsToCheck.forEach((currItem) => {

package/dist/cjs/node.js

@@ -49001,10 +49001,10 @@ class Select extends Tool {
         return false;
       }
       const draggingMbr = draggingItem.getMbr();
-      const frames = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => item instanceof Frame2);
-      frames.forEach((frame) => {
-        if (frame.handleNesting(draggingItem)) {
-          this.nestingHighlighter.add(frame, draggingItem);
+      const groups = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => !!(("index" in item) && item.index));
+      groups.forEach((group) => {
+        if (group.handleNesting(draggingItem)) {
+          this.nestingHighlighter.add(group, draggingItem);
         } else {
           this.nestingHighlighter.remove(draggingItem);
         }
@@ -49055,13 +49055,13 @@ class Select extends Tool {
     }
   }
   updateFramesNesting(selectionMbr, selection) {
-    const frames = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => item instanceof Frame2).filter((frame) => !selection.items.list().includes(frame));
-    const draggingFramesIds = selection.list().filter((item) => item instanceof Frame2).map((frame) => frame.getId());
+    const groups = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => !!(("index" in item) && item.index)).filter((group) => !selection.items.list().includes(group));
+    const draggingGroupsIds = selection.list().filter((item) => !!(("index" in item) && item.index)).map((group) => group.getId());
     selection.list().forEach((item) => {
-      if (!(item instanceof Frame2) && !draggingFramesIds.includes(item.parent)) {
-        frames.forEach((frame) => {
-          if (frame.handleNesting(item)) {
-            this.nestingHighlighter.add(frame, item);
+      if (!(("index" in item) && item.index) && !draggingGroupsIds.includes(item.parent)) {
+        groups.forEach((group) => {
+          if (group.handleNesting(item)) {
+            this.nestingHighlighter.add(group, item);
           } else {
             this.nestingHighlighter.remove(item);
           }
@@ -50614,6 +50614,8 @@ class Deck extends BaseItem {
   resizeEnabled = false;
   path = null;
   isPerpendicular = undefined;
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -50724,6 +50726,7 @@ class Deck extends BaseItem {
       const j = Math.floor(Math.random() * (i + 1));
       [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
     }
+    this.emitAnimation();
     this.removeChildItems(this.index.list());
     this.addChildItems(shuffled);
   }
@@ -50740,6 +50743,12 @@ class Deck extends BaseItem {
   apply(op) {
     super.apply(op);
     if (op.class === "Deck") {
+      if (op.method === "startAnimation" && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 4000) {
+        this.startAnimation();
+        setTimeout(() => {
+          this.stopAnimation();
+        }, 2000);
+      }
       this.isCacheDirty = true;
     }
     this.subject.publish(this);
@@ -50764,6 +50773,7 @@ class Deck extends BaseItem {
     return this;
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
@@ -50775,9 +50785,42 @@ class Deck extends BaseItem {
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();
       ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      if (this.animationFrameId) {
+        const now = Date.now();
+        const progress = now % 2000 / 2000;
+        const yPos = this.top + this.getHeight() * Math.abs(Math.sin(progress * Math.PI));
+        ctx.fillStyle = conf.SELECTION_COLOR;
+        ctx.fillRect(this.left + 5, yPos - 2, this.getWidth() - 10, 4);
+      }
       ctx.restore();
     }
   }
+  emitAnimation() {
+    this.emit({
+      class: "Deck",
+      method: "startAnimation",
+      item: [this.getId()],
+      newData: { timeStamp: Date.now() }
+    });
+  }
+  startAnimation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.subject.publish(this);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopAnimation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
     const cards = this.index?.list();
@@ -51324,7 +51367,19 @@ class AddScreen extends ShapeTool {
       localStorage.setItem("screenOwnerId", screenOwnerId);
     }
     this.item.applyOwnerId(screenOwnerId);
-    return super.pointerUp();
+    const currMbr = this.item.getMbr();
+    const screenChildren = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board").filter((item) => this.item.handleNesting(item));
+    const width2 = this.bounds.getWidth() < 2 ? 100 : this.bounds.getWidth();
+    const height3 = this.bounds.getHeight() < 2 ? 100 : this.bounds.getHeight();
+    this.initTransformation(width2 / 100, height3 / 100);
+    const screen = this.board.add(this.item);
+    screen.emitNesting(screenChildren);
+    this.isDown = false;
+    this.board.selection.removeAll();
+    this.board.selection.add(screen);
+    this.board.tools.select();
+    this.board.tools.publish();
+    return true;
   }
 }
 
@@ -54423,7 +54478,7 @@ function updateFrameChildren({
 }) {
   const groups = board.items.getGroupItemsEnclosedOrCrossed(mbr.left, mbr.top, mbr.right, mbr.bottom);
   board.selection.items.list().forEach((item) => {
-    if ("getChildrenIds" in item && item.getChildrenIds()) {
+    if ("index" in item && item.index) {
       const currMbr = item.getMbr();
       const itemsToCheck = board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom);
       itemsToCheck.forEach((currItem) => {

package/dist/esm/browser.js

@@ -46374,10 +46374,10 @@ class Select extends Tool {
         return false;
       }
       const draggingMbr = draggingItem.getMbr();
-      const frames = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => item instanceof Frame2);
-      frames.forEach((frame) => {
-        if (frame.handleNesting(draggingItem)) {
-          this.nestingHighlighter.add(frame, draggingItem);
+      const groups = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => !!(("index" in item) && item.index));
+      groups.forEach((group) => {
+        if (group.handleNesting(draggingItem)) {
+          this.nestingHighlighter.add(group, draggingItem);
         } else {
           this.nestingHighlighter.remove(draggingItem);
         }
@@ -46428,13 +46428,13 @@ class Select extends Tool {
     }
   }
   updateFramesNesting(selectionMbr, selection) {
-    const frames = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => item instanceof Frame2).filter((frame) => !selection.items.list().includes(frame));
-    const draggingFramesIds = selection.list().filter((item) => item instanceof Frame2).map((frame) => frame.getId());
+    const groups = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => !!(("index" in item) && item.index)).filter((group) => !selection.items.list().includes(group));
+    const draggingGroupsIds = selection.list().filter((item) => !!(("index" in item) && item.index)).map((group) => group.getId());
     selection.list().forEach((item) => {
-      if (!(item instanceof Frame2) && !draggingFramesIds.includes(item.parent)) {
-        frames.forEach((frame) => {
-          if (frame.handleNesting(item)) {
-            this.nestingHighlighter.add(frame, item);
+      if (!(("index" in item) && item.index) && !draggingGroupsIds.includes(item.parent)) {
+        groups.forEach((group) => {
+          if (group.handleNesting(item)) {
+            this.nestingHighlighter.add(group, item);
           } else {
             this.nestingHighlighter.remove(item);
           }
@@ -47987,6 +47987,8 @@ class Deck extends BaseItem {
   resizeEnabled = false;
   path = null;
   isPerpendicular = undefined;
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -48097,6 +48099,7 @@ class Deck extends BaseItem {
       const j = Math.floor(Math.random() * (i + 1));
       [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
     }
+    this.emitAnimation();
     this.removeChildItems(this.index.list());
     this.addChildItems(shuffled);
   }
@@ -48113,6 +48116,12 @@ class Deck extends BaseItem {
   apply(op) {
     super.apply(op);
     if (op.class === "Deck") {
+      if (op.method === "startAnimation" && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 4000) {
+        this.startAnimation();
+        setTimeout(() => {
+          this.stopAnimation();
+        }, 2000);
+      }
       this.isCacheDirty = true;
     }
     this.subject.publish(this);
@@ -48137,6 +48146,7 @@ class Deck extends BaseItem {
     return this;
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
@@ -48148,9 +48158,42 @@ class Deck extends BaseItem {
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();
       ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      if (this.animationFrameId) {
+        const now = Date.now();
+        const progress = now % 2000 / 2000;
+        const yPos = this.top + this.getHeight() * Math.abs(Math.sin(progress * Math.PI));
+        ctx.fillStyle = conf.SELECTION_COLOR;
+        ctx.fillRect(this.left + 5, yPos - 2, this.getWidth() - 10, 4);
+      }
       ctx.restore();
     }
   }
+  emitAnimation() {
+    this.emit({
+      class: "Deck",
+      method: "startAnimation",
+      item: [this.getId()],
+      newData: { timeStamp: Date.now() }
+    });
+  }
+  startAnimation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.subject.publish(this);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopAnimation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
     const cards = this.index?.list();
@@ -48697,7 +48740,19 @@ class AddScreen extends ShapeTool {
       localStorage.setItem("screenOwnerId", screenOwnerId);
     }
     this.item.applyOwnerId(screenOwnerId);
-    return super.pointerUp();
+    const currMbr = this.item.getMbr();
+    const screenChildren = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board").filter((item) => this.item.handleNesting(item));
+    const width2 = this.bounds.getWidth() < 2 ? 100 : this.bounds.getWidth();
+    const height3 = this.bounds.getHeight() < 2 ? 100 : this.bounds.getHeight();
+    this.initTransformation(width2 / 100, height3 / 100);
+    const screen = this.board.add(this.item);
+    screen.emitNesting(screenChildren);
+    this.isDown = false;
+    this.board.selection.removeAll();
+    this.board.selection.add(screen);
+    this.board.tools.select();
+    this.board.tools.publish();
+    return true;
   }
 }
 
@@ -51796,7 +51851,7 @@ function updateFrameChildren({
 }) {
   const groups = board.items.getGroupItemsEnclosedOrCrossed(mbr.left, mbr.top, mbr.right, mbr.bottom);
   board.selection.items.list().forEach((item) => {
-    if ("getChildrenIds" in item && item.getChildrenIds()) {
+    if ("index" in item && item.index) {
       const currMbr = item.getMbr();
       const itemsToCheck = board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom);
       itemsToCheck.forEach((currItem) => {

package/dist/esm/index.js

@@ -46367,10 +46367,10 @@ class Select extends Tool {
         return false;
       }
       const draggingMbr = draggingItem.getMbr();
-      const frames = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => item instanceof Frame2);
-      frames.forEach((frame) => {
-        if (frame.handleNesting(draggingItem)) {
-          this.nestingHighlighter.add(frame, draggingItem);
+      const groups = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => !!(("index" in item) && item.index));
+      groups.forEach((group) => {
+        if (group.handleNesting(draggingItem)) {
+          this.nestingHighlighter.add(group, draggingItem);
         } else {
           this.nestingHighlighter.remove(draggingItem);
         }
@@ -46421,13 +46421,13 @@ class Select extends Tool {
     }
   }
   updateFramesNesting(selectionMbr, selection) {
-    const frames = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => item instanceof Frame2).filter((frame) => !selection.items.list().includes(frame));
-    const draggingFramesIds = selection.list().filter((item) => item instanceof Frame2).map((frame) => frame.getId());
+    const groups = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => !!(("index" in item) && item.index)).filter((group) => !selection.items.list().includes(group));
+    const draggingGroupsIds = selection.list().filter((item) => !!(("index" in item) && item.index)).map((group) => group.getId());
     selection.list().forEach((item) => {
-      if (!(item instanceof Frame2) && !draggingFramesIds.includes(item.parent)) {
-        frames.forEach((frame) => {
-          if (frame.handleNesting(item)) {
-            this.nestingHighlighter.add(frame, item);
+      if (!(("index" in item) && item.index) && !draggingGroupsIds.includes(item.parent)) {
+        groups.forEach((group) => {
+          if (group.handleNesting(item)) {
+            this.nestingHighlighter.add(group, item);
           } else {
             this.nestingHighlighter.remove(item);
           }
@@ -47980,6 +47980,8 @@ class Deck extends BaseItem {
   resizeEnabled = false;
   path = null;
   isPerpendicular = undefined;
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -48090,6 +48092,7 @@ class Deck extends BaseItem {
       const j = Math.floor(Math.random() * (i + 1));
       [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
     }
+    this.emitAnimation();
     this.removeChildItems(this.index.list());
     this.addChildItems(shuffled);
   }
@@ -48106,6 +48109,12 @@ class Deck extends BaseItem {
   apply(op) {
     super.apply(op);
     if (op.class === "Deck") {
+      if (op.method === "startAnimation" && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 4000) {
+        this.startAnimation();
+        setTimeout(() => {
+          this.stopAnimation();
+        }, 2000);
+      }
       this.isCacheDirty = true;
     }
     this.subject.publish(this);
@@ -48130,6 +48139,7 @@ class Deck extends BaseItem {
     return this;
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
@@ -48141,9 +48151,42 @@ class Deck extends BaseItem {
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();
       ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      if (this.animationFrameId) {
+        const now = Date.now();
+        const progress = now % 2000 / 2000;
+        const yPos = this.top + this.getHeight() * Math.abs(Math.sin(progress * Math.PI));
+        ctx.fillStyle = conf.SELECTION_COLOR;
+        ctx.fillRect(this.left + 5, yPos - 2, this.getWidth() - 10, 4);
+      }
       ctx.restore();
     }
   }
+  emitAnimation() {
+    this.emit({
+      class: "Deck",
+      method: "startAnimation",
+      item: [this.getId()],
+      newData: { timeStamp: Date.now() }
+    });
+  }
+  startAnimation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.subject.publish(this);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopAnimation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
     const cards = this.index?.list();
@@ -48690,7 +48733,19 @@ class AddScreen extends ShapeTool {
       localStorage.setItem("screenOwnerId", screenOwnerId);
     }
     this.item.applyOwnerId(screenOwnerId);
-    return super.pointerUp();
+    const currMbr = this.item.getMbr();
+    const screenChildren = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board").filter((item) => this.item.handleNesting(item));
+    const width2 = this.bounds.getWidth() < 2 ? 100 : this.bounds.getWidth();
+    const height3 = this.bounds.getHeight() < 2 ? 100 : this.bounds.getHeight();
+    this.initTransformation(width2 / 100, height3 / 100);
+    const screen = this.board.add(this.item);
+    screen.emitNesting(screenChildren);
+    this.isDown = false;
+    this.board.selection.removeAll();
+    this.board.selection.add(screen);
+    this.board.tools.select();
+    this.board.tools.publish();
+    return true;
   }
 }
 
@@ -51789,7 +51844,7 @@ function updateFrameChildren({
 }) {
   const groups = board.items.getGroupItemsEnclosedOrCrossed(mbr.left, mbr.top, mbr.right, mbr.bottom);
   board.selection.items.list().forEach((item) => {
-    if ("getChildrenIds" in item && item.getChildrenIds()) {
+    if ("index" in item && item.index) {
       const currMbr = item.getMbr();
       const itemsToCheck = board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom);
       itemsToCheck.forEach((currItem) => {

package/dist/esm/node.js

@@ -48835,10 +48835,10 @@ class Select extends Tool {
         return false;
       }
       const draggingMbr = draggingItem.getMbr();
-      const frames = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => item instanceof Frame2);
-      frames.forEach((frame) => {
-        if (frame.handleNesting(draggingItem)) {
-          this.nestingHighlighter.add(frame, draggingItem);
+      const groups = this.board.items.getEnclosedOrCrossed(draggingMbr.left, draggingMbr.top, draggingMbr.right, draggingMbr.bottom).filter((item) => !!(("index" in item) && item.index));
+      groups.forEach((group) => {
+        if (group.handleNesting(draggingItem)) {
+          this.nestingHighlighter.add(group, draggingItem);
         } else {
           this.nestingHighlighter.remove(draggingItem);
         }
@@ -48889,13 +48889,13 @@ class Select extends Tool {
     }
   }
   updateFramesNesting(selectionMbr, selection) {
-    const frames = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => item instanceof Frame2).filter((frame) => !selection.items.list().includes(frame));
-    const draggingFramesIds = selection.list().filter((item) => item instanceof Frame2).map((frame) => frame.getId());
+    const groups = this.board.items.getEnclosedOrCrossed(selectionMbr.left, selectionMbr.top, selectionMbr.right, selectionMbr.bottom).filter((item) => !!(("index" in item) && item.index)).filter((group) => !selection.items.list().includes(group));
+    const draggingGroupsIds = selection.list().filter((item) => !!(("index" in item) && item.index)).map((group) => group.getId());
     selection.list().forEach((item) => {
-      if (!(item instanceof Frame2) && !draggingFramesIds.includes(item.parent)) {
-        frames.forEach((frame) => {
-          if (frame.handleNesting(item)) {
-            this.nestingHighlighter.add(frame, item);
+      if (!(("index" in item) && item.index) && !draggingGroupsIds.includes(item.parent)) {
+        groups.forEach((group) => {
+          if (group.handleNesting(item)) {
+            this.nestingHighlighter.add(group, item);
           } else {
             this.nestingHighlighter.remove(item);
           }
@@ -50448,6 +50448,8 @@ class Deck extends BaseItem {
   resizeEnabled = false;
   path = null;
   isPerpendicular = undefined;
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -50558,6 +50560,7 @@ class Deck extends BaseItem {
       const j = Math.floor(Math.random() * (i + 1));
       [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
     }
+    this.emitAnimation();
     this.removeChildItems(this.index.list());
     this.addChildItems(shuffled);
   }
@@ -50574,6 +50577,12 @@ class Deck extends BaseItem {
   apply(op) {
     super.apply(op);
     if (op.class === "Deck") {
+      if (op.method === "startAnimation" && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 4000) {
+        this.startAnimation();
+        setTimeout(() => {
+          this.stopAnimation();
+        }, 2000);
+      }
       this.isCacheDirty = true;
     }
     this.subject.publish(this);
@@ -50598,6 +50607,7 @@ class Deck extends BaseItem {
     return this;
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
@@ -50609,9 +50619,42 @@ class Deck extends BaseItem {
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();
       ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      if (this.animationFrameId) {
+        const now = Date.now();
+        const progress = now % 2000 / 2000;
+        const yPos = this.top + this.getHeight() * Math.abs(Math.sin(progress * Math.PI));
+        ctx.fillStyle = conf.SELECTION_COLOR;
+        ctx.fillRect(this.left + 5, yPos - 2, this.getWidth() - 10, 4);
+      }
       ctx.restore();
     }
   }
+  emitAnimation() {
+    this.emit({
+      class: "Deck",
+      method: "startAnimation",
+      item: [this.getId()],
+      newData: { timeStamp: Date.now() }
+    });
+  }
+  startAnimation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.subject.publish(this);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopAnimation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
     const cards = this.index?.list();
@@ -51158,7 +51201,19 @@ class AddScreen extends ShapeTool {
       localStorage.setItem("screenOwnerId", screenOwnerId);
     }
     this.item.applyOwnerId(screenOwnerId);
-    return super.pointerUp();
+    const currMbr = this.item.getMbr();
+    const screenChildren = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board").filter((item) => this.item.handleNesting(item));
+    const width2 = this.bounds.getWidth() < 2 ? 100 : this.bounds.getWidth();
+    const height3 = this.bounds.getHeight() < 2 ? 100 : this.bounds.getHeight();
+    this.initTransformation(width2 / 100, height3 / 100);
+    const screen = this.board.add(this.item);
+    screen.emitNesting(screenChildren);
+    this.isDown = false;
+    this.board.selection.removeAll();
+    this.board.selection.add(screen);
+    this.board.tools.select();
+    this.board.tools.publish();
+    return true;
   }
 }
 
@@ -54257,7 +54312,7 @@ function updateFrameChildren({
 }) {
   const groups = board.items.getGroupItemsEnclosedOrCrossed(mbr.left, mbr.top, mbr.right, mbr.bottom);
   board.selection.items.list().forEach((item) => {
-    if ("getChildrenIds" in item && item.getChildrenIds()) {
+    if ("index" in item && item.index) {
       const currMbr = item.getMbr();
       const itemsToCheck = board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom);
       itemsToCheck.forEach((currItem) => {

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

@@ -15,6 +15,8 @@ export declare class Deck extends BaseItem {
     resizeEnabled: boolean;
     path: Path | null;
     private isPerpendicular;
+    private animationFrameId?;
+    drawingContext: DrawingContext | null;
     constructor(board: Board, id?: string);
     getIsPerpendicular(): boolean | undefined;
     applyAddChildren(childIds: string[]): void;
@@ -29,6 +31,9 @@ export declare class Deck extends BaseItem {
     updateMbr(): void;
     deserialize(data: SerializedItemData): this;
     render(context: DrawingContext): void;
+    emitAnimation(): void;
+    startAnimation(): void;
+    stopAnimation(): void;
     renderHTML(documentFactory: DocumentFactory): HTMLElement;
     private updateCache;
     getFirstCard(): Card | undefined;

package/dist/types/Items/Examples/CardGame/Deck/DeckOperation.d.ts

@@ -1,15 +1,8 @@
 import { BaseOperation } from "../../../../Events/EventsOperations";
-export type DeckOperation = AddCards | RemoveCards;
-export interface AddCards extends BaseOperation<{
-    cardIds: string[];
-    shouldReplaceExistingCards: boolean;
+export type DeckOperation = StartAnimation;
+export interface StartAnimation extends BaseOperation<{
+    timeStamp?: number;
 }> {
     class: "Deck";
-    method: "addCards";
-}
-export interface RemoveCards extends BaseOperation<{
-    cardIds: string[];
-}> {
-    class: "Deck";
-    method: "removeCards";
+    method: "startAnimation";
 }

package/package.json

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