microboard-temp 0.5.15 → 0.5.16

package/dist/cjs/browser.js

@@ -21735,7 +21735,15 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    div.id = this.id;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundColor = "#b2b0c3";
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
     div.setAttribute("serialized-data", JSON.stringify(this.serialize()));
     return div;
   }
@@ -47879,6 +47887,20 @@ class Card extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
+    div.id = this.getId();
+    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
+    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
@@ -48112,6 +48134,23 @@ class Deck extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+      return div;
+    }
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.cachedCanvas.toDataURL("image/png")})`;
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateCache(context) {
     const cards = this.index?.list();
     const topCard = cards[cards.length - 1];
@@ -48709,6 +48748,14 @@ class Screen extends BaseItem {
       super.render(context);
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    div.style.backgroundColor = this.backgroundColor;
+    div.style.borderColor = this.borderColor;
+    div.style.borderWidth = `${this.borderWidth}px`;
+    div.style.borderStyle = this.borderStyle;
+    return div;
+  }
 }
 registerItem({
   item: Screen,

package/dist/cjs/index.js

@@ -21735,7 +21735,15 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    div.id = this.id;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundColor = "#b2b0c3";
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
     div.setAttribute("serialized-data", JSON.stringify(this.serialize()));
     return div;
   }
@@ -47879,6 +47887,20 @@ class Card extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
+    div.id = this.getId();
+    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
+    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
@@ -48112,6 +48134,23 @@ class Deck extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+      return div;
+    }
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.cachedCanvas.toDataURL("image/png")})`;
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateCache(context) {
     const cards = this.index?.list();
     const topCard = cards[cards.length - 1];
@@ -48709,6 +48748,14 @@ class Screen extends BaseItem {
       super.render(context);
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    div.style.backgroundColor = this.backgroundColor;
+    div.style.borderColor = this.borderColor;
+    div.style.borderWidth = `${this.borderWidth}px`;
+    div.style.borderStyle = this.borderStyle;
+    return div;
+  }
 }
 registerItem({
   item: Screen,

package/dist/cjs/node.js

@@ -24207,7 +24207,15 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    div.id = this.id;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundColor = "#b2b0c3";
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
     div.setAttribute("serialized-data", JSON.stringify(this.serialize()));
     return div;
   }
@@ -50352,6 +50360,20 @@ class Card extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
+    div.id = this.getId();
+    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
+    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
@@ -50585,6 +50607,23 @@ class Deck extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+      return div;
+    }
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.cachedCanvas.toDataURL("image/png")})`;
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateCache(context) {
     const cards = this.index?.list();
     const topCard = cards[cards.length - 1];
@@ -51182,6 +51221,14 @@ class Screen extends BaseItem {
       super.render(context);
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    div.style.backgroundColor = this.backgroundColor;
+    div.style.borderColor = this.borderColor;
+    div.style.borderWidth = `${this.borderWidth}px`;
+    div.style.borderStyle = this.borderStyle;
+    return div;
+  }
 }
 registerItem({
   item: Screen,

package/dist/esm/browser.js

@@ -21581,7 +21581,15 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    div.id = this.id;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundColor = "#b2b0c3";
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
     div.setAttribute("serialized-data", JSON.stringify(this.serialize()));
     return div;
   }
@@ -47725,6 +47733,20 @@ class Card extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
+    div.id = this.getId();
+    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
+    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
@@ -47958,6 +47980,23 @@ class Deck extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+      return div;
+    }
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.cachedCanvas.toDataURL("image/png")})`;
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateCache(context) {
     const cards = this.index?.list();
     const topCard = cards[cards.length - 1];
@@ -48555,6 +48594,14 @@ class Screen extends BaseItem {
       super.render(context);
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    div.style.backgroundColor = this.backgroundColor;
+    div.style.borderColor = this.borderColor;
+    div.style.borderWidth = `${this.borderWidth}px`;
+    div.style.borderStyle = this.borderStyle;
+    return div;
+  }
 }
 registerItem({
   item: Screen,

package/dist/esm/index.js

@@ -21574,7 +21574,15 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    div.id = this.id;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundColor = "#b2b0c3";
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
     div.setAttribute("serialized-data", JSON.stringify(this.serialize()));
     return div;
   }
@@ -47718,6 +47726,20 @@ class Card extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
+    div.id = this.getId();
+    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
+    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
@@ -47951,6 +47973,23 @@ class Deck extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+      return div;
+    }
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.cachedCanvas.toDataURL("image/png")})`;
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateCache(context) {
     const cards = this.index?.list();
     const topCard = cards[cards.length - 1];
@@ -48548,6 +48587,14 @@ class Screen extends BaseItem {
       super.render(context);
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    div.style.backgroundColor = this.backgroundColor;
+    div.style.borderColor = this.borderColor;
+    div.style.borderWidth = `${this.borderWidth}px`;
+    div.style.borderStyle = this.borderStyle;
+    return div;
+  }
 }
 registerItem({
   item: Screen,

package/dist/esm/node.js

@@ -24041,7 +24041,15 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    div.id = this.id;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundColor = "#b2b0c3";
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
     div.setAttribute("serialized-data", JSON.stringify(this.serialize()));
     return div;
   }
@@ -50186,6 +50194,20 @@ class Card extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
+    div.id = this.getId();
+    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
+    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
@@ -50419,6 +50441,23 @@ class Deck extends BaseItem {
       ctx.restore();
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+      return div;
+    }
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.cachedCanvas.toDataURL("image/png")})`;
+    div.id = this.getId();
+    div.style.width = `${this.getWidth()}px`;
+    div.style.height = `${this.getHeight()}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    return div;
+  }
   updateCache(context) {
     const cards = this.index?.list();
     const topCard = cards[cards.length - 1];
@@ -51016,6 +51055,14 @@ class Screen extends BaseItem {
       super.render(context);
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    div.style.backgroundColor = this.backgroundColor;
+    div.style.borderColor = this.borderColor;
+    div.style.borderWidth = `${this.borderWidth}px`;
+    div.style.borderStyle = this.borderStyle;
+    return div;
+  }
 }
 registerItem({
   item: Screen,

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

@@ -1,6 +1,7 @@
 import { BaseItem, BaseItemData, SerializedItemData } from "../../../BaseItem/BaseItem";
 import { Board } from "../../../../Board";
 import { DrawingContext } from "../../../DrawingContext";
+import { DocumentFactory } from "../../../../api/DocumentFactory";
 import { Path } from "../../../Path/Path";
 import { Subject } from "../../../../Subject";
 import { Paths } from "../../../Path/Paths";
@@ -25,6 +26,7 @@ export declare class Card extends BaseItem {
     updateImageToRender(): void;
     getImage(): HTMLImageElement | null;
     render(context: DrawingContext, left?: number, top?: number): void;
+    renderHTML(documentFactory: DocumentFactory): HTMLElement;
     updateMbr(): void;
     getPath(): Path | Paths;
     deserialize(data: SerializedItemData): this;

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

@@ -5,6 +5,7 @@ import { Card } from "../../../Examples/CardGame/Card/Card";
 import { DrawingContext } from "../../../DrawingContext";
 import { DeckOperation } from "../../../Examples/CardGame/Deck/DeckOperation";
 import { Path } from "../../../Path";
+import { DocumentFactory } from "../../../../api/DocumentFactory";
 export declare const defaultDeckData: BaseItemData;
 export declare class Deck extends BaseItem {
     readonly subject: Subject<Deck>;
@@ -26,6 +27,7 @@ export declare class Deck extends BaseItem {
     updateMbr(): void;
     deserialize(data: SerializedItemData): this;
     render(context: DrawingContext): void;
+    renderHTML(documentFactory: DocumentFactory): HTMLElement;
     private updateCache;
 }
 export declare function createDeck(event?: KeyboardEvent, board?: Board): void;

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

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

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

@@ -4,6 +4,7 @@ import { Subject } from "../../../../Subject";
 import { DrawingContext } from "../../../DrawingContext";
 import { BorderWidth } from "../../../Path";
 import { ScreenOperation } from "./ScreenOperation";
+import { DocumentFactory } from "../../../../api/DocumentFactory";
 export declare const defaultScreenData: BaseItemData;
 export declare class Screen extends BaseItem {
     private ownerId;
@@ -28,4 +29,5 @@ export declare class Screen extends BaseItem {
     updateMbr(): void;
     deserialize(data: SerializedItemData): this;
     render(context: DrawingContext): void;
+    renderHTML(documentFactory: DocumentFactory): HTMLElement;
 }

package/package.json

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