microboard-temp 0.5.17 → 0.5.19

package/dist/cjs/browser.js

@@ -47857,8 +47857,6 @@ 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 = () => {
@@ -48138,15 +48136,21 @@ class Deck extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
-    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    if (!topCard) {
       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")})`;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
+    const topCardElement = topCard.renderHTML(documentFactory);
+    div.appendChild(topCardElement);
+    const offset = ((this.index?.list().length || 0) - 1) * 2;
+    topCardElement.style.transform = `translate(${offset}px, ${0}px) scale(1, 1)`;
     div.id = this.getId();
     div.style.width = `${this.getWidth()}px`;
     div.style.height = `${this.getHeight()}px`;
+    div.style.boxShadow = `${offset}px 0px 0px 0px rgba(34, 60, 80, 0.74) inset`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -48602,6 +48606,41 @@ class Dice extends BaseItem {
       this.drawingContext = null;
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const mbr = this.getMbr();
+    const width2 = mbr.getWidth();
+    const height3 = mbr.getHeight();
+    const unscaledWidth = width2 / scaleX;
+    const unscaledHeight = height3 / scaleY;
+    const svg3 = documentFactory.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg3.setAttribute("width", `${unscaledWidth}px`);
+    svg3.setAttribute("height", `${unscaledHeight}px`);
+    svg3.setAttribute("viewBox", `0 0 ${unscaledWidth} ${unscaledHeight}`);
+    svg3.setAttribute("transform-origin", "0 0");
+    svg3.setAttribute("transform", `scale(${1 / scaleX}, ${1 / scaleY})`);
+    svg3.setAttribute("style", "position: absolute; overflow: visible;");
+    const pathElement = Shapes["RoundedRectangle"].path.copy().renderHTML(documentFactory);
+    const paths = Array.isArray(pathElement) ? pathElement : [pathElement];
+    paths.forEach((element4) => {
+      element4.setAttribute("fill", this.backgroundColor);
+      element4.setAttribute("stroke", this.borderColor);
+      element4.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
+      element4.setAttribute("stroke-width", this.borderWidth.toString());
+      element4.setAttribute("transform-origin", "0 0");
+      element4.setAttribute("transform", `scale(${scaleX}, ${scaleY})`);
+    });
+    svg3.append(...paths);
+    div.appendChild(svg3);
+    div.id = this.getId();
+    div.style.width = unscaledWidth + "px";
+    div.style.height = unscaledHeight + "px";
+    div.style.transformOrigin = "left top";
+    div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.position = "absolute";
+    return div;
+  }
 }
 registerItem({
   item: Dice,

package/dist/cjs/index.js

@@ -47857,8 +47857,6 @@ 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 = () => {
@@ -48138,15 +48136,21 @@ class Deck extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
-    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    if (!topCard) {
       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")})`;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
+    const topCardElement = topCard.renderHTML(documentFactory);
+    div.appendChild(topCardElement);
+    const offset = ((this.index?.list().length || 0) - 1) * 2;
+    topCardElement.style.transform = `translate(${offset}px, ${0}px) scale(1, 1)`;
     div.id = this.getId();
     div.style.width = `${this.getWidth()}px`;
     div.style.height = `${this.getHeight()}px`;
+    div.style.boxShadow = `${offset}px 0px 0px 0px rgba(34, 60, 80, 0.74) inset`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -48602,6 +48606,41 @@ class Dice extends BaseItem {
       this.drawingContext = null;
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const mbr = this.getMbr();
+    const width2 = mbr.getWidth();
+    const height3 = mbr.getHeight();
+    const unscaledWidth = width2 / scaleX;
+    const unscaledHeight = height3 / scaleY;
+    const svg3 = documentFactory.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg3.setAttribute("width", `${unscaledWidth}px`);
+    svg3.setAttribute("height", `${unscaledHeight}px`);
+    svg3.setAttribute("viewBox", `0 0 ${unscaledWidth} ${unscaledHeight}`);
+    svg3.setAttribute("transform-origin", "0 0");
+    svg3.setAttribute("transform", `scale(${1 / scaleX}, ${1 / scaleY})`);
+    svg3.setAttribute("style", "position: absolute; overflow: visible;");
+    const pathElement = Shapes["RoundedRectangle"].path.copy().renderHTML(documentFactory);
+    const paths = Array.isArray(pathElement) ? pathElement : [pathElement];
+    paths.forEach((element4) => {
+      element4.setAttribute("fill", this.backgroundColor);
+      element4.setAttribute("stroke", this.borderColor);
+      element4.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
+      element4.setAttribute("stroke-width", this.borderWidth.toString());
+      element4.setAttribute("transform-origin", "0 0");
+      element4.setAttribute("transform", `scale(${scaleX}, ${scaleY})`);
+    });
+    svg3.append(...paths);
+    div.appendChild(svg3);
+    div.id = this.getId();
+    div.style.width = unscaledWidth + "px";
+    div.style.height = unscaledHeight + "px";
+    div.style.transformOrigin = "left top";
+    div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.position = "absolute";
+    return div;
+  }
 }
 registerItem({
   item: Dice,

package/dist/cjs/node.js

@@ -50330,8 +50330,6 @@ 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 = () => {
@@ -50611,15 +50609,21 @@ class Deck extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
-    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    if (!topCard) {
       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")})`;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
+    const topCardElement = topCard.renderHTML(documentFactory);
+    div.appendChild(topCardElement);
+    const offset = ((this.index?.list().length || 0) - 1) * 2;
+    topCardElement.style.transform = `translate(${offset}px, ${0}px) scale(1, 1)`;
     div.id = this.getId();
     div.style.width = `${this.getWidth()}px`;
     div.style.height = `${this.getHeight()}px`;
+    div.style.boxShadow = `${offset}px 0px 0px 0px rgba(34, 60, 80, 0.74) inset`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -51075,6 +51079,41 @@ class Dice extends BaseItem {
       this.drawingContext = null;
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const mbr = this.getMbr();
+    const width2 = mbr.getWidth();
+    const height3 = mbr.getHeight();
+    const unscaledWidth = width2 / scaleX;
+    const unscaledHeight = height3 / scaleY;
+    const svg3 = documentFactory.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg3.setAttribute("width", `${unscaledWidth}px`);
+    svg3.setAttribute("height", `${unscaledHeight}px`);
+    svg3.setAttribute("viewBox", `0 0 ${unscaledWidth} ${unscaledHeight}`);
+    svg3.setAttribute("transform-origin", "0 0");
+    svg3.setAttribute("transform", `scale(${1 / scaleX}, ${1 / scaleY})`);
+    svg3.setAttribute("style", "position: absolute; overflow: visible;");
+    const pathElement = Shapes["RoundedRectangle"].path.copy().renderHTML(documentFactory);
+    const paths = Array.isArray(pathElement) ? pathElement : [pathElement];
+    paths.forEach((element3) => {
+      element3.setAttribute("fill", this.backgroundColor);
+      element3.setAttribute("stroke", this.borderColor);
+      element3.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
+      element3.setAttribute("stroke-width", this.borderWidth.toString());
+      element3.setAttribute("transform-origin", "0 0");
+      element3.setAttribute("transform", `scale(${scaleX}, ${scaleY})`);
+    });
+    svg3.append(...paths);
+    div.appendChild(svg3);
+    div.id = this.getId();
+    div.style.width = unscaledWidth + "px";
+    div.style.height = unscaledHeight + "px";
+    div.style.transformOrigin = "left top";
+    div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.position = "absolute";
+    return div;
+  }
 }
 registerItem({
   item: Dice,