microboard-temp 0.4.69 → 0.4.70

package/dist/esm/index.js

@@ -47631,8 +47631,7 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: "",
-  isInDeck: false
+  backsideUrl: ""
 };
 var CARD_DIMENSIONS = { width: 250, height: 400 };
 
@@ -47641,7 +47640,6 @@ class Card extends BaseItem {
   faceUrl = "";
   backsideUrl = "";
   isOpen = false;
-  isInDeck = false;
   throttledBringToFront;
   face = null;
   backside = null;
@@ -47677,35 +47675,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();
     }
   }
@@ -47716,12 +47699,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());
   }
@@ -47754,9 +47731,6 @@ class Card extends BaseItem {
             this.isOpen = op.newData.isOpen;
             this.updateImageToRender();
             break;
-          case "setIsInDeck":
-            this.isInDeck = op.newData.isInDeck;
-            break;
         }
         break;
     }
@@ -47769,22 +47743,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();
@@ -47792,128 +47761,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({
@@ -48261,6 +48215,18 @@ class Hand extends BaseItem {
     }
     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);

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({
@@ -50729,6 +50683,18 @@ class Hand extends BaseItem {
     }
     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);

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;