microboard-temp 0.5.14 → 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;
   }
@@ -41467,16 +41475,14 @@ class AudioItem extends BaseItem {
   url = "";
   isPlaying = false;
   currentTime = 0;
-  isStorageUrl = true;
-  constructor(board, isStorageUrl, url, events, id = "", extension2) {
+  constructor(board, url, events, id = "", extension2) {
     super(board, id);
     this.events = events;
     this.extension = extension2;
     this.linkTo = new LinkTo(this.id, events);
     this.board = board;
-    this.isStorageUrl = isStorageUrl;
     if (url) {
-      this.applyUrl(url);
+      this.url = url;
     }
     this.transformation = new Transformation(id, events);
     this.linkTo.subject.subscribe(() => {
@@ -41494,9 +41500,6 @@ class AudioItem extends BaseItem {
   getCurrentTime() {
     return this.currentTime;
   }
-  getIsStorageUrl() {
-    return this.isStorageUrl;
-  }
   onTransform = () => {
     this.updateMbr();
     this.subject.publish(this);
@@ -41515,17 +41518,8 @@ class AudioItem extends BaseItem {
   getIsPlaying() {
     return this.isPlaying;
   }
-  applyUrl(url) {
-    if (this.isStorageUrl) {
-      try {
-        const newUrl = new URL(url);
-        this.url = `${window.location.origin}${newUrl.pathname}`;
-      } catch (_) {}
-    } else {
-      this.url = url;
-    }
-  }
   setUrl(url) {
+    this.url = url;
     this.emit({
       class: "Audio",
       method: "setUrl",
@@ -41534,9 +41528,6 @@ class AudioItem extends BaseItem {
     });
   }
   getStorageId() {
-    if (!this.isStorageUrl) {
-      return;
-    }
     return this.url.split("/").pop();
   }
   getUrl() {
@@ -41596,9 +41587,6 @@ class AudioItem extends BaseItem {
     if (this.extension) {
       div.setAttribute("extension", this.extension);
     }
-    if (this.isStorageUrl) {
-      div.setAttribute("is-storage-url", "true");
-    }
     div.setAttribute("data-link-to", "");
     return div;
   }
@@ -41607,14 +41595,10 @@ class AudioItem extends BaseItem {
       itemType: "Audio",
       url: this.url,
       transformation: this.transformation.serialize(),
-      isStorageUrl: this.isStorageUrl,
       extension: this.extension
     };
   }
   deserialize(data) {
-    if (data.isStorageUrl) {
-      this.isStorageUrl = data.isStorageUrl;
-    }
     if (data.transformation) {
       this.transformation.deserialize(data.transformation);
     }
@@ -41636,7 +41620,7 @@ class AudioItem extends BaseItem {
         break;
       case "Audio":
         if (op.method === "setUrl") {
-          this.applyUrl(op.url);
+          this.url = op.url;
         }
         this.subject.publish(this);
         break;
@@ -42109,10 +42093,7 @@ class ImageItem extends BaseItem {
     this.transformation.subject.subscribe(this.onTransform);
   }
   setStorageLink(link2) {
-    try {
-      const url = new URL(link2);
-      this.storageLink = `${window?.location.origin}${url.pathname}`;
-    } catch (_) {}
+    this.storageLink = link2;
   }
   getStorageId() {
     return this.storageLink.split("/").pop();
@@ -47906,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;
@@ -48139,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];
@@ -48736,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;
   }
@@ -41467,16 +41475,14 @@ class AudioItem extends BaseItem {
   url = "";
   isPlaying = false;
   currentTime = 0;
-  isStorageUrl = true;
-  constructor(board, isStorageUrl, url, events, id = "", extension2) {
+  constructor(board, url, events, id = "", extension2) {
     super(board, id);
     this.events = events;
     this.extension = extension2;
     this.linkTo = new LinkTo(this.id, events);
     this.board = board;
-    this.isStorageUrl = isStorageUrl;
     if (url) {
-      this.applyUrl(url);
+      this.url = url;
     }
     this.transformation = new Transformation(id, events);
     this.linkTo.subject.subscribe(() => {
@@ -41494,9 +41500,6 @@ class AudioItem extends BaseItem {
   getCurrentTime() {
     return this.currentTime;
   }
-  getIsStorageUrl() {
-    return this.isStorageUrl;
-  }
   onTransform = () => {
     this.updateMbr();
     this.subject.publish(this);
@@ -41515,17 +41518,8 @@ class AudioItem extends BaseItem {
   getIsPlaying() {
     return this.isPlaying;
   }
-  applyUrl(url) {
-    if (this.isStorageUrl) {
-      try {
-        const newUrl = new URL(url);
-        this.url = `${window.location.origin}${newUrl.pathname}`;
-      } catch (_) {}
-    } else {
-      this.url = url;
-    }
-  }
   setUrl(url) {
+    this.url = url;
     this.emit({
       class: "Audio",
       method: "setUrl",
@@ -41534,9 +41528,6 @@ class AudioItem extends BaseItem {
     });
   }
   getStorageId() {
-    if (!this.isStorageUrl) {
-      return;
-    }
     return this.url.split("/").pop();
   }
   getUrl() {
@@ -41596,9 +41587,6 @@ class AudioItem extends BaseItem {
     if (this.extension) {
       div.setAttribute("extension", this.extension);
     }
-    if (this.isStorageUrl) {
-      div.setAttribute("is-storage-url", "true");
-    }
     div.setAttribute("data-link-to", "");
     return div;
   }
@@ -41607,14 +41595,10 @@ class AudioItem extends BaseItem {
       itemType: "Audio",
       url: this.url,
       transformation: this.transformation.serialize(),
-      isStorageUrl: this.isStorageUrl,
       extension: this.extension
     };
   }
   deserialize(data) {
-    if (data.isStorageUrl) {
-      this.isStorageUrl = data.isStorageUrl;
-    }
     if (data.transformation) {
       this.transformation.deserialize(data.transformation);
     }
@@ -41636,7 +41620,7 @@ class AudioItem extends BaseItem {
         break;
       case "Audio":
         if (op.method === "setUrl") {
-          this.applyUrl(op.url);
+          this.url = op.url;
         }
         this.subject.publish(this);
         break;
@@ -42109,10 +42093,7 @@ class ImageItem extends BaseItem {
     this.transformation.subject.subscribe(this.onTransform);
   }
   setStorageLink(link2) {
-    try {
-      const url = new URL(link2);
-      this.storageLink = `${window?.location.origin}${url.pathname}`;
-    } catch (_) {}
+    this.storageLink = link2;
   }
   getStorageId() {
     return this.storageLink.split("/").pop();
@@ -47906,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;
@@ -48139,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];
@@ -48736,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;
   }
@@ -43940,16 +43948,14 @@ class AudioItem extends BaseItem {
   url = "";
   isPlaying = false;
   currentTime = 0;
-  isStorageUrl = true;
-  constructor(board, isStorageUrl, url, events, id = "", extension2) {
+  constructor(board, url, events, id = "", extension2) {
     super(board, id);
     this.events = events;
     this.extension = extension2;
     this.linkTo = new LinkTo(this.id, events);
     this.board = board;
-    this.isStorageUrl = isStorageUrl;
     if (url) {
-      this.applyUrl(url);
+      this.url = url;
     }
     this.transformation = new Transformation(id, events);
     this.linkTo.subject.subscribe(() => {
@@ -43967,9 +43973,6 @@ class AudioItem extends BaseItem {
   getCurrentTime() {
     return this.currentTime;
   }
-  getIsStorageUrl() {
-    return this.isStorageUrl;
-  }
   onTransform = () => {
     this.updateMbr();
     this.subject.publish(this);
@@ -43988,17 +43991,8 @@ class AudioItem extends BaseItem {
   getIsPlaying() {
     return this.isPlaying;
   }
-  applyUrl(url) {
-    if (this.isStorageUrl) {
-      try {
-        const newUrl = new URL(url);
-        this.url = `${window.location.origin}${newUrl.pathname}`;
-      } catch (_) {}
-    } else {
-      this.url = url;
-    }
-  }
   setUrl(url) {
+    this.url = url;
     this.emit({
       class: "Audio",
       method: "setUrl",
@@ -44007,9 +44001,6 @@ class AudioItem extends BaseItem {
     });
   }
   getStorageId() {
-    if (!this.isStorageUrl) {
-      return;
-    }
     return this.url.split("/").pop();
   }
   getUrl() {
@@ -44069,9 +44060,6 @@ class AudioItem extends BaseItem {
     if (this.extension) {
       div.setAttribute("extension", this.extension);
     }
-    if (this.isStorageUrl) {
-      div.setAttribute("is-storage-url", "true");
-    }
     div.setAttribute("data-link-to", "");
     return div;
   }
@@ -44080,14 +44068,10 @@ class AudioItem extends BaseItem {
       itemType: "Audio",
       url: this.url,
       transformation: this.transformation.serialize(),
-      isStorageUrl: this.isStorageUrl,
       extension: this.extension
     };
   }
   deserialize(data) {
-    if (data.isStorageUrl) {
-      this.isStorageUrl = data.isStorageUrl;
-    }
     if (data.transformation) {
       this.transformation.deserialize(data.transformation);
     }
@@ -44109,7 +44093,7 @@ class AudioItem extends BaseItem {
         break;
       case "Audio":
         if (op.method === "setUrl") {
-          this.applyUrl(op.url);
+          this.url = op.url;
         }
         this.subject.publish(this);
         break;
@@ -44582,10 +44566,7 @@ class ImageItem extends BaseItem {
     this.transformation.subject.subscribe(this.onTransform);
   }
   setStorageLink(link2) {
-    try {
-      const url = new URL(link2);
-      this.storageLink = `${window?.location.origin}${url.pathname}`;
-    } catch (_) {}
+    this.storageLink = link2;
   }
   getStorageId() {
     return this.storageLink.split("/").pop();
@@ -50379,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;
@@ -50612,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];
@@ -51209,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;
   }
@@ -41313,16 +41321,14 @@ class AudioItem extends BaseItem {
   url = "";
   isPlaying = false;
   currentTime = 0;
-  isStorageUrl = true;
-  constructor(board, isStorageUrl, url, events, id = "", extension2) {
+  constructor(board, url, events, id = "", extension2) {
     super(board, id);
     this.events = events;
     this.extension = extension2;
     this.linkTo = new LinkTo(this.id, events);
     this.board = board;
-    this.isStorageUrl = isStorageUrl;
     if (url) {
-      this.applyUrl(url);
+      this.url = url;
     }
     this.transformation = new Transformation(id, events);
     this.linkTo.subject.subscribe(() => {
@@ -41340,9 +41346,6 @@ class AudioItem extends BaseItem {
   getCurrentTime() {
     return this.currentTime;
   }
-  getIsStorageUrl() {
-    return this.isStorageUrl;
-  }
   onTransform = () => {
     this.updateMbr();
     this.subject.publish(this);
@@ -41361,17 +41364,8 @@ class AudioItem extends BaseItem {
   getIsPlaying() {
     return this.isPlaying;
   }
-  applyUrl(url) {
-    if (this.isStorageUrl) {
-      try {
-        const newUrl = new URL(url);
-        this.url = `${window.location.origin}${newUrl.pathname}`;
-      } catch (_) {}
-    } else {
-      this.url = url;
-    }
-  }
   setUrl(url) {
+    this.url = url;
     this.emit({
       class: "Audio",
       method: "setUrl",
@@ -41380,9 +41374,6 @@ class AudioItem extends BaseItem {
     });
   }
   getStorageId() {
-    if (!this.isStorageUrl) {
-      return;
-    }
     return this.url.split("/").pop();
   }
   getUrl() {
@@ -41442,9 +41433,6 @@ class AudioItem extends BaseItem {
     if (this.extension) {
       div.setAttribute("extension", this.extension);
     }
-    if (this.isStorageUrl) {
-      div.setAttribute("is-storage-url", "true");
-    }
     div.setAttribute("data-link-to", "");
     return div;
   }
@@ -41453,14 +41441,10 @@ class AudioItem extends BaseItem {
       itemType: "Audio",
       url: this.url,
       transformation: this.transformation.serialize(),
-      isStorageUrl: this.isStorageUrl,
       extension: this.extension
     };
   }
   deserialize(data) {
-    if (data.isStorageUrl) {
-      this.isStorageUrl = data.isStorageUrl;
-    }
     if (data.transformation) {
       this.transformation.deserialize(data.transformation);
     }
@@ -41482,7 +41466,7 @@ class AudioItem extends BaseItem {
         break;
       case "Audio":
         if (op.method === "setUrl") {
-          this.applyUrl(op.url);
+          this.url = op.url;
         }
         this.subject.publish(this);
         break;
@@ -41955,10 +41939,7 @@ class ImageItem extends BaseItem {
     this.transformation.subject.subscribe(this.onTransform);
   }
   setStorageLink(link2) {
-    try {
-      const url = new URL(link2);
-      this.storageLink = `${window?.location.origin}${url.pathname}`;
-    } catch (_) {}
+    this.storageLink = link2;
   }
   getStorageId() {
     return this.storageLink.split("/").pop();
@@ -47752,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;
@@ -47985,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];
@@ -48582,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;
   }
@@ -41306,16 +41314,14 @@ class AudioItem extends BaseItem {
   url = "";
   isPlaying = false;
   currentTime = 0;
-  isStorageUrl = true;
-  constructor(board, isStorageUrl, url, events, id = "", extension2) {
+  constructor(board, url, events, id = "", extension2) {
     super(board, id);
     this.events = events;
     this.extension = extension2;
     this.linkTo = new LinkTo(this.id, events);
     this.board = board;
-    this.isStorageUrl = isStorageUrl;
     if (url) {
-      this.applyUrl(url);
+      this.url = url;
     }
     this.transformation = new Transformation(id, events);
     this.linkTo.subject.subscribe(() => {
@@ -41333,9 +41339,6 @@ class AudioItem extends BaseItem {
   getCurrentTime() {
     return this.currentTime;
   }
-  getIsStorageUrl() {
-    return this.isStorageUrl;
-  }
   onTransform = () => {
     this.updateMbr();
     this.subject.publish(this);
@@ -41354,17 +41357,8 @@ class AudioItem extends BaseItem {
   getIsPlaying() {
     return this.isPlaying;
   }
-  applyUrl(url) {
-    if (this.isStorageUrl) {
-      try {
-        const newUrl = new URL(url);
-        this.url = `${window.location.origin}${newUrl.pathname}`;
-      } catch (_) {}
-    } else {
-      this.url = url;
-    }
-  }
   setUrl(url) {
+    this.url = url;
     this.emit({
       class: "Audio",
       method: "setUrl",
@@ -41373,9 +41367,6 @@ class AudioItem extends BaseItem {
     });
   }
   getStorageId() {
-    if (!this.isStorageUrl) {
-      return;
-    }
     return this.url.split("/").pop();
   }
   getUrl() {
@@ -41435,9 +41426,6 @@ class AudioItem extends BaseItem {
     if (this.extension) {
       div.setAttribute("extension", this.extension);
     }
-    if (this.isStorageUrl) {
-      div.setAttribute("is-storage-url", "true");
-    }
     div.setAttribute("data-link-to", "");
     return div;
   }
@@ -41446,14 +41434,10 @@ class AudioItem extends BaseItem {
       itemType: "Audio",
       url: this.url,
       transformation: this.transformation.serialize(),
-      isStorageUrl: this.isStorageUrl,
       extension: this.extension
     };
   }
   deserialize(data) {
-    if (data.isStorageUrl) {
-      this.isStorageUrl = data.isStorageUrl;
-    }
     if (data.transformation) {
       this.transformation.deserialize(data.transformation);
     }
@@ -41475,7 +41459,7 @@ class AudioItem extends BaseItem {
         break;
       case "Audio":
         if (op.method === "setUrl") {
-          this.applyUrl(op.url);
+          this.url = op.url;
         }
         this.subject.publish(this);
         break;
@@ -41948,10 +41932,7 @@ class ImageItem extends BaseItem {
     this.transformation.subject.subscribe(this.onTransform);
   }
   setStorageLink(link2) {
-    try {
-      const url = new URL(link2);
-      this.storageLink = `${window?.location.origin}${url.pathname}`;
-    } catch (_) {}
+    this.storageLink = link2;
   }
   getStorageId() {
     return this.storageLink.split("/").pop();
@@ -47745,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;
@@ -47978,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];
@@ -48575,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;
   }
@@ -43774,16 +43782,14 @@ class AudioItem extends BaseItem {
   url = "";
   isPlaying = false;
   currentTime = 0;
-  isStorageUrl = true;
-  constructor(board, isStorageUrl, url, events, id = "", extension2) {
+  constructor(board, url, events, id = "", extension2) {
     super(board, id);
     this.events = events;
     this.extension = extension2;
     this.linkTo = new LinkTo(this.id, events);
     this.board = board;
-    this.isStorageUrl = isStorageUrl;
     if (url) {
-      this.applyUrl(url);
+      this.url = url;
     }
     this.transformation = new Transformation(id, events);
     this.linkTo.subject.subscribe(() => {
@@ -43801,9 +43807,6 @@ class AudioItem extends BaseItem {
   getCurrentTime() {
     return this.currentTime;
   }
-  getIsStorageUrl() {
-    return this.isStorageUrl;
-  }
   onTransform = () => {
     this.updateMbr();
     this.subject.publish(this);
@@ -43822,17 +43825,8 @@ class AudioItem extends BaseItem {
   getIsPlaying() {
     return this.isPlaying;
   }
-  applyUrl(url) {
-    if (this.isStorageUrl) {
-      try {
-        const newUrl = new URL(url);
-        this.url = `${window.location.origin}${newUrl.pathname}`;
-      } catch (_) {}
-    } else {
-      this.url = url;
-    }
-  }
   setUrl(url) {
+    this.url = url;
     this.emit({
       class: "Audio",
       method: "setUrl",
@@ -43841,9 +43835,6 @@ class AudioItem extends BaseItem {
     });
   }
   getStorageId() {
-    if (!this.isStorageUrl) {
-      return;
-    }
     return this.url.split("/").pop();
   }
   getUrl() {
@@ -43903,9 +43894,6 @@ class AudioItem extends BaseItem {
     if (this.extension) {
       div.setAttribute("extension", this.extension);
     }
-    if (this.isStorageUrl) {
-      div.setAttribute("is-storage-url", "true");
-    }
     div.setAttribute("data-link-to", "");
     return div;
   }
@@ -43914,14 +43902,10 @@ class AudioItem extends BaseItem {
       itemType: "Audio",
       url: this.url,
       transformation: this.transformation.serialize(),
-      isStorageUrl: this.isStorageUrl,
       extension: this.extension
     };
   }
   deserialize(data) {
-    if (data.isStorageUrl) {
-      this.isStorageUrl = data.isStorageUrl;
-    }
     if (data.transformation) {
       this.transformation.deserialize(data.transformation);
     }
@@ -43943,7 +43927,7 @@ class AudioItem extends BaseItem {
         break;
       case "Audio":
         if (op.method === "setUrl") {
-          this.applyUrl(op.url);
+          this.url = op.url;
         }
         this.subject.publish(this);
         break;
@@ -44416,10 +44400,7 @@ class ImageItem extends BaseItem {
     this.transformation.subject.subscribe(this.onTransform);
   }
   setStorageLink(link2) {
-    try {
-      const url = new URL(link2);
-      this.storageLink = `${window?.location.origin}${url.pathname}`;
-    } catch (_) {}
+    this.storageLink = link2;
   }
   getStorageId() {
     return this.storageLink.split("/").pop();
@@ -50213,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;
@@ -50446,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];
@@ -51043,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/Audio/Audio.d.ts

@@ -13,7 +13,6 @@ export interface AudioItemData {
     itemType: "Audio";
     url: string;
     transformation: TransformationData;
-    isStorageUrl: boolean;
     extension?: string;
 }
 export declare class AudioItem extends BaseItem {
@@ -30,17 +29,14 @@ export declare class AudioItem extends BaseItem {
     private url;
     private isPlaying;
     private currentTime;
-    private isStorageUrl;
-    constructor(board: Board, isStorageUrl: boolean, url?: string, events?: Events | undefined, id?: string, extension?: string | undefined);
+    constructor(board: Board, url?: string, events?: Events | undefined, id?: string, extension?: string | undefined);
     setCurrentTime(time: number): void;
     getCurrentTime(): number;
-    getIsStorageUrl(): boolean;
     onTransform: () => void;
     doOnceBeforeOnLoad: (callback: (audio: AudioItem) => void) => void;
     doOnceOnLoad: (callback: (audio: AudioItem) => void) => void;
     setIsPlaying(isPlaying: boolean): void;
     getIsPlaying(): boolean;
-    applyUrl(url: string): void;
     setUrl(url: string): void;
     getStorageId(): string | undefined;
     getUrl(): string;

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.14",
+  "version": "0.5.16",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",