microboard-temp 0.4.68 → 0.4.70

package/dist/esm/browser.js

@@ -47638,8 +47638,7 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: "",
-  isInDeck: false
+  backsideUrl: ""
 };
 var CARD_DIMENSIONS = { width: 250, height: 400 };
 
@@ -47648,7 +47647,6 @@ class Card extends BaseItem {
   faceUrl = "";
   backsideUrl = "";
   isOpen = false;
-  isInDeck = false;
   throttledBringToFront;
   face = null;
   backside = null;
@@ -47684,35 +47682,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();
     }
   }
@@ -47723,12 +47706,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());
   }
@@ -47761,9 +47738,6 @@ class Card extends BaseItem {
             this.isOpen = op.newData.isOpen;
             this.updateImageToRender();
             break;
-          case "setIsInDeck":
-            this.isInDeck = op.newData.isInDeck;
-            break;
         }
         break;
     }
@@ -47776,22 +47750,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();
@@ -47799,128 +47768,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({
@@ -48236,6 +48190,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;
@@ -48249,8 +48205,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;
   }
@@ -48259,6 +48281,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();