microboard-temp 0.4.68 → 0.4.70

package/dist/esm/node.js

@@ -50099,8 +50099,7 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: "",
-  isInDeck: false
+  backsideUrl: ""
 };
 var CARD_DIMENSIONS = { width: 250, height: 400 };
 
@@ -50109,7 +50108,6 @@ class Card extends BaseItem {
   faceUrl = "";
   backsideUrl = "";
   isOpen = false;
-  isInDeck = false;
   throttledBringToFront;
   face = null;
   backside = null;
@@ -50145,35 +50143,20 @@ class Card extends BaseItem {
     };
     this.updateImageToRender();
   }
-  setIsInDeck(isInDeck) {
-    this.emit({
-      class: "Card",
-      method: "setIsInDeck",
-      item: [this.getId()],
-      newData: { isInDeck },
-      prevData: { isInDeck: this.isInDeck }
-    });
-  }
   updateImageToRender() {
     this.imageToRender = this.backside;
     if (this.isOpen) {
       this.imageToRender = this.face;
     }
   }
-  render(context, deckRenderData) {
-    if (this.transformationRenderBlock || this.isInDeck && !deckRenderData) {
+  render(context) {
+    if (this.transformationRenderBlock) {
       return;
     }
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      let left = this.left;
-      let top = this.top;
-      if (deckRenderData) {
-        left = deckRenderData.left + 2 * deckRenderData.cardPosition;
-        top = deckRenderData.top;
-      }
-      ctx.drawImage(this.imageToRender, left, top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, this.left, this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -50184,12 +50167,6 @@ class Card extends BaseItem {
     this.right = this.left + CARD_DIMENSIONS.width * scaleX;
     this.bottom = this.top + CARD_DIMENSIONS.height * scaleY;
   }
-  getMbr() {
-    if (this.isInDeck) {
-      return new Mbr(1e4, 1e4, 1e4, 1e4);
-    }
-    return super.getMbr();
-  }
   getPath() {
     return new Path(this.getMbr().getLines());
   }
@@ -50222,9 +50199,6 @@ class Card extends BaseItem {
             this.isOpen = op.newData.isOpen;
             this.updateImageToRender();
             break;
-          case "setIsInDeck":
-            this.isInDeck = op.newData.isInDeck;
-            break;
         }
         break;
     }
@@ -50237,22 +50211,17 @@ registerItem({
 });
 // src/Items/Examples/CardGame/Deck/Deck.ts
 var defaultDeckData = {
-  itemType: "Deck",
-  cardIds: []
+  itemType: "Deck"
 };
 
 class Deck extends BaseItem {
   subject = new Subject;
   shouldUseCustomRender = false;
-  cardIds = [];
-  cards = [];
   constructor(board, id = "", defaultData2, cards) {
-    super(board, id, defaultDeckData);
+    super(board, id, defaultDeckData, true);
     if (cards) {
-      this.cards = cards;
-      cards.forEach((card) => card.setIsInDeck(true));
       this.transformation.matrix = cards[cards.length - 1].transformation.matrix;
-      this.cardIds = cards.map((card) => card.getId());
+      this.applyAddChildren(cards.map((card) => card.getId()));
     }
     this.transformation.subject.subscribe(() => {
       this.updateMbr();
@@ -50260,128 +50229,113 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  applyAddChildren(childIds) {
+    if (!this.index) {
+      return;
+    }
+    childIds.forEach((childId) => {
+      const foundItem = this.board.items.getById(childId);
+      if (this.parent !== childId && this.getId() !== childId) {
+        if (!this.index?.getById(childId) && foundItem && foundItem.itemType === "Card") {
+          foundItem.transformation.apply({
+            class: "Transformation",
+            method: "translateTo",
+            item: [this.id],
+            x: this.left + (this.index?.list().length || 0) * 2,
+            y: this.top
+          });
+          foundItem.parent = this.getId();
+          this.board.items.index.remove(foundItem);
+          this.index?.insert(foundItem);
+        }
+      }
+    });
+    this.updateMbr();
+    this.subject.publish(this);
+  }
+  applyRemoveChildren(childIds) {
+    if (!this.index) {
+      return;
+    }
+    childIds.forEach((childId) => {
+      const foundItem = this.index?.getById(childId);
+      if (this.parent !== childId && this.getId() !== childId) {
+        if (foundItem) {
+          foundItem.transformation.apply({
+            class: "Transformation",
+            method: "translateTo",
+            item: [this.id],
+            x: this.left,
+            y: this.top - this.getHeight() / 2
+          });
+          foundItem.parent = "Board";
+          this.index?.remove(foundItem);
+          this.board.items.index.insert(foundItem);
+        }
+      }
+    });
+    this.updateMbr();
+    this.subject.publish(this);
+  }
   getDeck() {
-    return this.cards;
+    return this.index?.list() || [];
   }
   getTopCard() {
-    const cardId = this.cardIds[this.cardIds.length - 1];
-    return this.getCards([cardId])[0];
+    const card = this.index?.list()[this.index?.list().length - 1];
+    if (card) {
+      this.removeChildItems(card);
+      return card;
+    }
   }
   getBottomCard() {
-    const cardId = this.cardIds[0];
-    return this.getCards([cardId])[0];
+    const card = this.index?.list()[0];
+    if (card) {
+      this.removeChildItems(card);
+      return card;
+    }
   }
   getRandomCard() {
-    const cardId = this.cardIds[Math.ceil(Math.random() * this.cardIds.length) - 1];
-    return this.getCards([cardId])[0];
-  }
-  getCards(cardIds) {
-    const cards = this.findCardsOnBoard(cardIds);
-    this.removeCards(cards);
-    return cards;
-  }
-  findCardsOnBoard(cardIds) {
-    return cardIds.map((cardId) => {
-      return this.board.items.getById(cardId);
-    }).filter((card) => !!card);
-  }
-  updateCards() {
-    if (this.cardIds.length === this.cards.length) {
-      return this.cards;
+    const card = this.index?.list()[Math.floor(Math.random() * this.index?.list().length)];
+    if (card) {
+      this.removeChildItems(card);
+      return card;
     }
-    this.cards = this.findCardsOnBoard(this.cardIds);
-    return this.cards;
   }
   shuffleDeck() {
-    const shuffled = [...this.cardIds];
+    if (!this.index) {
+      return;
+    }
+    const shuffled = [...this.index.list()];
     for (let i = shuffled.length - 1;i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
       [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
     }
-    const cards = this.findCardsOnBoard(shuffled);
-    this.addCards(cards, true);
-  }
-  addCards(cards, shouldReplaceExistingCards = false) {
-    cards.forEach((card) => {
-      card.setIsInDeck(true);
-    });
-    this.board.bringToFront(cards);
-    this.emit({
-      class: "Deck",
-      method: "addCards",
-      item: [this.getId()],
-      newData: {
-        cardIds: cards.map((card) => card.getId()),
-        shouldReplaceExistingCards
-      },
-      prevData: { cardIds: this.cardIds, shouldReplaceExistingCards }
-    });
-  }
-  removeCards(cards) {
-    cards.forEach((card) => {
-      card.setIsInDeck(false);
-    });
-    this.emit({
-      class: "Deck",
-      method: "removeCards",
-      item: [this.getId()],
-      newData: { cardIds: cards.map((card) => card.getId()) },
-      prevData: { cardIds: this.cardIds }
-    });
+    this.index.clear();
+    shuffled.forEach((card) => this.index.insert(card));
   }
   apply(op) {
     super.apply(op);
-    switch (op.class) {
-      case "Deck":
-        switch (op.method) {
-          case "addCards":
-            if (op.newData.shouldReplaceExistingCards) {
-              this.cardIds = op.newData.cardIds;
-              this.cards = this.findCardsOnBoard(this.cardIds);
-            } else {
-              this.cardIds = [
-                ...op.newData.cardIds,
-                ...this.cardIds
-              ];
-              this.updateCards();
-              this.updateMbr();
-            }
-            break;
-          case "removeCards":
-            this.cardIds = this.cardIds.filter((card) => {
-              return !op.newData.cardIds.includes(card);
-            });
-            this.updateCards();
-            this.updateMbr();
-            break;
-        }
-        break;
-    }
     this.subject.publish(this);
   }
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY } = this.transformation.matrix;
+    const { right, bottom } = this.index.getMbr();
     this.left = translateX;
     this.top = translateY;
-    this.right = this.left + CARD_DIMENSIONS.width * scaleX + 2 * this.cardIds.length;
-    this.bottom = this.top + CARD_DIMENSIONS.height * scaleY;
+    this.right = right;
+    this.bottom = bottom;
   }
   deserialize(data) {
     super.deserialize(data);
-    this.updateCards();
+    this.updateMbr();
+    this.subject.publish(this);
     return this;
   }
   render(context) {
     if (this.transformationRenderBlock) {
       return;
     }
-    this.cards.forEach((card, index2) => {
-      card.render(context, {
-        top: this.top,
-        left: this.left,
-        cardPosition: index2 + 1
-      });
-    });
+    super.render(context);
   }
 }
 registerItem({
@@ -50697,6 +50651,8 @@ class Hand extends BaseItem {
   ownerId;
   subject = new Subject;
   path;
+  borderWidth = 1;
+  backgroundColor = "#FFFFFF";
   constructor(board, id = "", ownerId = "") {
     super(board, id, defaultHandData, true);
     this.ownerId = ownerId;
@@ -50710,8 +50666,74 @@ class Hand extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    switch (op.class) {
+      case "Hand":
+        switch (op.method) {
+          case "setBorderWidth":
+            this.applyBorderWidth(op.newData.borderWidth);
+            break;
+          case "setBackgroundColor":
+            this.applyBackgroundColor(op.newData.backgroundColor);
+            break;
+          case "setBorderColor":
+            this.applyBorderColor(op.newData.borderColor);
+            break;
+        }
+        break;
+    }
     this.subject.publish(this);
   }
+  getBackgroundColor() {
+    return this.backgroundColor;
+  }
+  getBorderStyle() {
+    return this.borderStyle;
+  }
+  getStrokeColor() {
+    return this.borderColor;
+  }
+  getStrokeWidth() {
+    return this.borderWidth;
+  }
+  applyBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    this.path.setBackgroundColor(backgroundColor);
+  }
+  setBackgroundColor(backgroundColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBackgroundColor",
+      item: [this.getId()],
+      newData: { backgroundColor },
+      prevData: { backgroundColor: this.backgroundColor }
+    });
+  }
+  applyBorderWidth(borderWidth) {
+    this.borderWidth = borderWidth;
+    this.path.setBorderWidth(borderWidth);
+  }
+  setBorderWidth(borderWidth) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderWidth",
+      item: [this.getId()],
+      newData: { borderWidth },
+      prevData: { borderWidth: this.borderWidth }
+    });
+  }
+  applyBorderColor(borderColor) {
+    this.borderColor = borderColor;
+    this.path.setBorderColor(borderColor);
+  }
+  setBorderColor(borderColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderColor",
+      item: [this.getId()],
+      newData: { borderColor },
+      prevData: { borderColor: this.borderColor }
+    });
+  }
   applyOwnerId(ownerId) {
     this.ownerId = ownerId;
   }
@@ -50720,6 +50742,7 @@ class Hand extends BaseItem {
     this.path.transform(this.transformation.matrix);
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
+    this.path.setBorderWidth(this.borderWidth);
   }
   updateMbr() {
     const { left, top, right, bottom } = this.path.getMbr();

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

@@ -6,12 +6,6 @@ import { Path } from "Items/Path/Path";
 import { Subject } from "Subject";
 import { Paths } from "Items/Path/Paths";
 import { CardOperation } from "Items/Examples/CardGame/Card/CardOperation";
-import { Mbr } from "Items/Mbr/Mbr";
-export type DeckRenderData = {
-    left: number;
-    top: number;
-    cardPosition: number;
-};
 export declare const defaultCardData: BaseItemData;
 export declare const CARD_DIMENSIONS: {
     width: number;
@@ -22,7 +16,6 @@ export declare class Card extends BaseItem {
     private faceUrl;
     private backsideUrl;
     private isOpen;
-    private isInDeck;
     private throttledBringToFront;
     face: HTMLImageElement | null;
     backside: HTMLImageElement | null;
@@ -33,11 +26,9 @@ export declare class Card extends BaseItem {
         backsideUrl: string;
     });
     createImages(): void;
-    setIsInDeck(isInDeck: boolean): void;
     updateImageToRender(): void;
-    render(context: DrawingContext, deckRenderData?: DeckRenderData): void;
+    render(context: DrawingContext): void;
     updateMbr(): void;
-    getMbr(): Mbr;
     getPath(): Path | Paths;
     renderHTML(documentFactory: DocumentFactory): HTMLElement;
     deserialize(data: SerializedItemData): this;

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

@@ -8,19 +8,14 @@ export declare const defaultDeckData: BaseItemData;
 export declare class Deck extends BaseItem {
     readonly subject: Subject<Deck>;
     shouldUseCustomRender: boolean;
-    cardIds: string[];
-    cards: Card[];
     constructor(board: Board, id?: string, defaultData?: BaseItemData, cards?: Card[]);
+    applyAddChildren(childIds: string[]): void;
+    applyRemoveChildren(childIds: string[]): void;
     getDeck(): Card[];
     getTopCard(): Card | undefined;
     getBottomCard(): Card | undefined;
     getRandomCard(): Card | undefined;
-    private getCards;
-    private findCardsOnBoard;
-    updateCards(): Card[];
     shuffleDeck(): void;
-    addCards(cards: Card[], shouldReplaceExistingCards?: boolean): void;
-    removeCards(cards: Card[]): void;
     apply(op: DeckOperation): void;
     updateMbr(): void;
     deserialize(data: SerializedItemData): this;

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

@@ -2,14 +2,27 @@ import { BaseItem, BaseItemData, SerializedItemData } from "Items/BaseItem/BaseI
 import { Board } from "Board";
 import { Subject } from "Subject";
 import { DrawingContext } from "Items/DrawingContext";
-import { DeckOperation } from "Items/Examples/CardGame/Deck/DeckOperation";
+import { BorderWidth } from "../../../Path";
+import { HandOperation } from "./HandOperation";
 export declare const defaultHandData: BaseItemData;
 export declare class Hand extends BaseItem {
     private ownerId;
     readonly subject: Subject<Hand>;
     private path;
+    private borderWidth;
+    backgroundColor: string;
     constructor(board: Board, id?: string, ownerId?: string);
-    apply(op: DeckOperation): void;
+    apply(op: HandOperation): void;
+    getBackgroundColor(): string;
+    getBorderStyle(): string;
+    getStrokeColor(): string;
+    getStrokeWidth(): number;
+    private applyBackgroundColor;
+    setBackgroundColor(backgroundColor: string): void;
+    private applyBorderWidth;
+    setBorderWidth(borderWidth: BorderWidth): void;
+    private applyBorderColor;
+    setBorderColor(borderColor: string): void;
     applyOwnerId(ownerId: string): void;
     private transformPath;
     updateMbr(): void;

package/dist/types/Items/Examples/CardGame/Hand/HandOperation.d.ts

@@ -0,0 +1,21 @@
+import { BaseOperation } from "Events/EventsOperations";
+export type HandOperation = SetBackgroundColor | SetBorderColor | SetBorderWidth;
+interface SetBackgroundColor extends BaseOperation<{
+    backgroundColor: string;
+}> {
+    class: "Hand";
+    method: "setBackgroundColor";
+}
+interface SetBorderColor extends BaseOperation<{
+    borderColor: string;
+}> {
+    class: "Hand";
+    method: "setBorderColor";
+}
+export interface SetBorderWidth extends BaseOperation<{
+    borderWidth: number;
+}> {
+    class: "Hand";
+    method: "setBorderWidth";
+}
+export {};

package/package.json

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