microboard-temp 0.4.9 → 0.4.11

package/dist/esm/index.js

@@ -37174,12 +37174,19 @@ class Shape extends BaseItem {
       this.shapeType = data.shapeType;
       this.initPath();
     }
+    if (data.linkTo) {
+      this.linkTo.deserialize(data.linkTo);
+    }
     this.backgroundColor = data.backgroundColor ?? this.backgroundColor;
     this.backgroundOpacity = data.backgroundOpacity ?? this.backgroundOpacity;
     this.borderColor = data.borderColor ?? this.borderColor;
     this.borderOpacity = data.borderOpacity ?? this.borderOpacity;
     this.borderStyle = data.borderStyle ?? this.borderStyle;
     this.borderWidth = data.borderWidth ?? this.borderWidth;
+    if (data.transformation) {
+      this.transformation.deserialize(data.transformation);
+      this.transformPath();
+    }
     if (data.text) {
       this.text.deserialize(data.text);
     }
@@ -45424,7 +45431,9 @@ function registerItem({
   const { itemType } = defaultData2;
   itemFactories[itemType] = createItemFactory(item, defaultData2);
   itemValidators[itemType] = createItemValidator(defaultData2);
-  registeredTools[toolData.name] = toolData.tool;
+  if (toolData) {
+    registeredTools[toolData.name] = toolData.tool;
+  }
   itemCommandFactories[itemType] = createItemCommandFactory(itemType);
 }
 function createItemFactory(item, defaultData2) {
@@ -45738,6 +45747,318 @@ registerItem({
   defaultData: defaultCounterData,
   toolData: { name: "AddCounter", tool: AddCounter }
 });
+// src/utils.ts
+function throttle(func, delay) {
+  let lastCall = 0;
+  let timeoutId = null;
+  return function(...args) {
+    const now = Date.now();
+    if (lastCall + delay <= now) {
+      lastCall = now;
+      func(...args);
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+    } else if (!timeoutId) {
+      timeoutId = setTimeout(() => {
+        lastCall = Date.now();
+        timeoutId = null;
+        func(...args);
+      }, delay - (now - lastCall));
+    }
+  };
+}
+
+// src/Items/Examples/CardGame/Card/Card.ts
+var defaultCardData = {
+  itemType: "Card",
+  isOpen: false,
+  name: "",
+  isInDeck: false
+};
+var CARD_DIMENSIONS = { width: 250, height: 400 };
+
+class Card extends BaseItem {
+  subject = new Subject;
+  name = "";
+  isOpen = false;
+  isInDeck = false;
+  throttledBringToFront;
+  image = null;
+  backside = null;
+  imageToRender = null;
+  shouldUseCustomRender = false;
+  constructor(board, id = "", defaultData2, name) {
+    super(board, id, defaultCardData);
+    this.name = name;
+    this.createImages();
+    this.throttledBringToFront = throttle(() => {
+      this.board.bringToFront(this);
+    }, 1000);
+    this.transformation.subject.subscribe(() => {
+      this.throttledBringToFront();
+      this.updateMbr();
+      this.updateImageToRender();
+      this.subject.publish(this);
+    });
+    this.updateMbr();
+  }
+  createImages() {
+    this.image = conf.documentFactory.createElement("img");
+    this.backside = conf.documentFactory.createElement("img");
+    this.image.src = `/Assets/Cards/${this.name}.png`;
+    this.backside.src = `/Assets/Cards/backside.png`;
+    this.image.onload = () => {
+      this.subject.publish(this);
+    };
+    this.backside.onload = () => {
+      this.subject.publish(this);
+    };
+  }
+  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.image;
+    }
+  }
+  render(context, deckRenderData) {
+    if (this.transformationRenderBlock || this.isInDeck && !deckRenderData) {
+      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.restore();
+    }
+  }
+  updateMbr() {
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    this.left = translateX;
+    this.top = translateY;
+    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());
+  }
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("card-item");
+    return div;
+  }
+  deserialize(data) {
+    super.deserialize(data);
+    this.updateMbr();
+    this.createImages();
+    this.subject.publish(this);
+    return this;
+  }
+  toggleIsOpen() {
+    this.emit({
+      class: "Card",
+      method: "setIsOpen",
+      item: [this.getId()],
+      newData: { isOpen: !this.isOpen },
+      prevData: { isOpen: this.isOpen }
+    });
+  }
+  apply(op) {
+    super.apply(op);
+    switch (op.class) {
+      case "Card":
+        switch (op.method) {
+          case "setIsOpen":
+            this.isOpen = op.newData.isOpen;
+            this.updateImageToRender();
+            break;
+          case "setIsInDeck":
+            this.isInDeck = op.newData.isInDeck;
+            break;
+        }
+        break;
+    }
+    this.subject.publish(this);
+  }
+}
+registerItem({
+  item: Card,
+  defaultData: defaultCardData
+});
+// src/Items/Examples/CardGame/Deck/Deck.ts
+var defaultDeckData = {
+  itemType: "Deck",
+  cardIds: []
+};
+
+class Deck extends BaseItem {
+  subject = new Subject;
+  shouldUseCustomRender = false;
+  cardIds = [];
+  cards = [];
+  constructor(board, id = "", defaultData2, cards) {
+    super(board, id, defaultDeckData);
+    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.transformation.subject.subscribe(() => {
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.updateMbr();
+  }
+  getDeck() {
+    return this.cards;
+  }
+  getTopCard() {
+    const cardId = this.cardIds[this.cardIds.length - 1];
+    return this.getCards([cardId])[0];
+  }
+  getBottomCard() {
+    const cardId = this.cardIds[0];
+    return this.getCards([cardId])[0];
+  }
+  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;
+    }
+    this.cards = this.findCardsOnBoard(this.cardIds);
+    return this.cards;
+  }
+  shuffleDeck() {
+    const shuffled = [...this.cardIds];
+    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 }
+    });
+  }
+  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;
+    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;
+  }
+  deserialize(data) {
+    super.deserialize(data);
+    this.updateCards();
+    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
+      });
+    });
+  }
+}
+registerItem({
+  item: Deck,
+  defaultData: defaultDeckData
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",
@@ -46250,27 +46571,6 @@ class Camera {
     requestAnimationFrame(animate);
   }
 }
-function throttle(func, delay) {
-  let lastCall = 0;
-  let timeoutId = null;
-  return function(...args) {
-    const now = Date.now();
-    if (lastCall + delay <= now) {
-      lastCall = now;
-      func(...args);
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-        timeoutId = null;
-      }
-    } else if (!timeoutId) {
-      timeoutId = setTimeout(() => {
-        lastCall = Date.now();
-        timeoutId = null;
-        func(...args);
-      }, delay - (now - lastCall));
-    }
-  };
-}
 // src/hotkeys.json
 var hotkeys_default = {
   select: {
@@ -55775,6 +56075,7 @@ export {
   Drawing,
   DefaultTransformationData,
   DefaultShapeData,
+  Deck,
   DEFAULT_SHAPE,
   CubicBezier,
   Counter,
@@ -55782,6 +56083,7 @@ export {
   Connector2 as Connector,
   ConnectionLineWidths,
   Comment,
+  Card,
   Camera,
   CURSORS_IDLE_CLEANUP_DELAY,
   CURSORS_ANIMATION_DURATION,