microboard-temp 0.5.53 → 0.5.55

package/dist/cjs/browser.js

@@ -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, yPos - 2, this.getWidth(), 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();

package/dist/cjs/index.js

@@ -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, yPos - 2, this.getWidth(), 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();

package/dist/cjs/node.js

@@ -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, yPos - 2, this.getWidth(), 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();

package/dist/esm/browser.js

@@ -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, yPos - 2, this.getWidth(), 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();

package/dist/esm/index.js

@@ -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, yPos - 2, this.getWidth(), 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();

package/dist/esm/node.js

@@ -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, yPos - 2, this.getWidth(), 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();

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.53",
+  "version": "0.5.55",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",