microboard-ui-temp 0.1.55 → 0.1.57

package/dist/index.js

@@ -230226,7 +230226,15 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    div.id = this.id;
+    const { translateX, translateY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
+    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;
   }
@@ -255879,6 +255887,8 @@ class Card extends BaseItem {
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
+    this.face.crossOrigin = "anonymous";
+    this.backside.crossOrigin = "anonymous";
     this.face.src = this.faceUrl;
     this.backside.src = this.backsideUrl;
     this.face.onload = () => {
@@ -255909,6 +255919,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;
@@ -256139,6 +256163,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];
@@ -256732,6 +256773,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-ui-temp",
-  "version": "0.1.55",
+  "version": "0.1.57",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "type": "module",
@@ -60,7 +60,7 @@
     "i18next-browser-languagedetector": "^8.2.0",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
-    "microboard-temp": "^0.5.15",
+    "microboard-temp": "^0.5.17",
     "nanoid": "^5.1.5",
     "prop-types": "^15.8.1",
     "react-hot-toast": "2.4.1",