microboard-temp 0.4.9 → 0.4.11

package/dist/esm/node.js

@@ -39709,12 +39709,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);
     }
@@ -47959,7 +47966,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) {
@@ -48273,6 +48282,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",
@@ -48785,27 +49106,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: {
@@ -58410,6 +58710,7 @@ export {
   Drawing,
   DefaultTransformationData,
   DefaultShapeData,
+  Deck,
   DEFAULT_SHAPE,
   CubicBezier,
   Counter,
@@ -58417,6 +58718,7 @@ export {
   Connector2 as Connector,
   ConnectionLineWidths,
   Comment,
+  Card,
   Camera,
   CURSORS_IDLE_CLEANUP_DELAY,
   CURSORS_ANIMATION_DURATION,

package/dist/types/Camera/Camera.d.ts

@@ -85,4 +85,3 @@ export declare class Camera {
     onWindowResize(): void;
     smoothTranslateTo(keyboard: Keyboard, shouldTranslate: boolean): void;
 }
-export declare function throttle<T extends (...args: any[]) => unknown>(func: T, delay: number): (...args: Parameters<T>) => void;

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

@@ -0,0 +1,42 @@
+import { BaseItem, BaseItemData, SerializedItemData } from "Items/BaseItem/BaseItem";
+import { Board } from "Board";
+import { DrawingContext } from "Items/DrawingContext";
+import { DocumentFactory } from "api/DocumentFactory";
+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;
+    height: number;
+};
+export declare class Card extends BaseItem {
+    readonly subject: Subject<Card>;
+    private name;
+    private isOpen;
+    private isInDeck;
+    private throttledBringToFront;
+    image: HTMLImageElement | null;
+    backside: HTMLImageElement | null;
+    private imageToRender;
+    shouldUseCustomRender: boolean;
+    constructor(board: Board, id: string | undefined, defaultData: BaseItemData | undefined, name: string);
+    createImages(): void;
+    setIsInDeck(isInDeck: boolean): void;
+    updateImageToRender(): void;
+    render(context: DrawingContext, deckRenderData?: DeckRenderData): void;
+    updateMbr(): void;
+    getMbr(): Mbr;
+    getPath(): Path | Paths;
+    renderHTML(documentFactory: DocumentFactory): HTMLElement;
+    deserialize(data: SerializedItemData): this;
+    toggleIsOpen(): void;
+    apply(op: CardOperation): void;
+}

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

@@ -0,0 +1,14 @@
+import { BaseOperation } from "Events/EventsOperations";
+export type CardOperation = SetIsOpen | SetIsInDeck;
+export interface SetIsOpen extends BaseOperation<{
+    isOpen: boolean;
+}> {
+    class: "Card";
+    method: "setIsOpen";
+}
+export interface SetIsInDeck extends BaseOperation<{
+    isInDeck: boolean;
+}> {
+    class: "Card";
+    method: "setIsInDeck";
+}

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

@@ -0,0 +1 @@
+export { Card } from "./Card";

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

@@ -0,0 +1,28 @@
+import { BaseItem, BaseItemData, SerializedItemData } from "Items/BaseItem/BaseItem";
+import { Board } from "Board";
+import { Subject } from "Subject";
+import { Card } from "Items/Examples/CardGame/Card/Card";
+import { DrawingContext } from "Items/DrawingContext";
+import { DeckOperation } from "Items/Examples/CardGame/Deck/DeckOperation";
+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[]);
+    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;
+    render(context: DrawingContext): void;
+}

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

@@ -0,0 +1,15 @@
+import { BaseOperation } from "Events/EventsOperations";
+export type DeckOperation = AddCards | RemoveCards;
+export interface AddCards extends BaseOperation<{
+    cardIds: string[];
+    shouldReplaceExistingCards: boolean;
+}> {
+    class: "Deck";
+    method: "addCards";
+}
+export interface RemoveCards extends BaseOperation<{
+    cardIds: string[];
+}> {
+    class: "Deck";
+    method: "removeCards";
+}

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

@@ -0,0 +1 @@
+export { Deck } from "./Deck";

package/dist/types/Items/RegisterItem.d.ts

@@ -3,7 +3,7 @@ import { BaseItemData } from "Items/BaseItem/BaseItem";
 type RegisterItemArgs = {
     item: any;
     defaultData: BaseItemData;
-    toolData: {
+    toolData?: {
         name: string;
         tool: typeof CustomTool;
     };

package/dist/types/Items/index.d.ts

@@ -23,5 +23,7 @@ export type { Item, ItemType, ItemData } from "./Item";
 export { registerItem } from "./RegisterItem";
 export { Star } from "./Examples/Star";
 export { Counter } from "./Examples/Counter";
+export { Card } from "./Examples/CardGame/Card";
+export { Deck } from "./Examples/CardGame/Deck";
 export { Comment } from "./Comment";
 export type { HorisontalAlignment, VerticalAlignment } from "./Alignment";

package/dist/types/utils.d.ts

@@ -0,0 +1 @@
+export declare function throttle<T extends (...args: any[]) => unknown>(func: T, delay: number): (...args: Parameters<T>) => void;

package/package.json

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