microboard-temp 0.5.119 → 0.5.120

package/dist/cjs/browser.js

@@ -41171,7 +41171,7 @@ class VideoItem extends BaseItem {
     this.playBtnMbr = new Mbr(this.left + this.getWidth() / 2 - scaledPlayBtn / 2, this.top + this.getHeight() / 2 - scaledPlayBtn / 2, this.right - this.getWidth() / 2 + scaledPlayBtn / 2, this.bottom - this.getHeight() / 2 + scaledPlayBtn / 2);
   }
   render(context) {
-    if (this.transformationRenderBlock || !this.preview.complete) {
+    if (this.transformationRenderBlock || !this.preview.complete || this.preview.naturalWidth === 0) {
       return;
     }
     const ctx = context.ctx;
@@ -48068,7 +48068,7 @@ class Card extends BaseItem {
       return;
     }
     const ctx = context.ctx;
-    if (this.imageToRender && this.imageToRender.complete) {
+    if (this.imageToRender && this.imageToRender.complete && this.imageToRender.naturalWidth > 0) {
       ctx.save();
       let { x: centerX, y: centerY } = this.getMbr().getCenter();
       const width2 = this.getWidth();
@@ -48708,19 +48708,19 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
-  updateRenderValues() {
-    this.values.forEach((value, index2) => {
+  async updateRenderValues() {
+    this.values.forEach(async (value, index2) => {
       if (typeof value === "number") {
         this.renderValues[index2] = value;
       } else {
         const image2 = conf.documentFactory.createElement("img");
-        image2.src = value;
+        image2.src = await getMediaSignedUrl(value, this.board.getAccount()?.accessToken || null) || "";
         this.renderValues[index2] = image2;
         image2.onload = () => {
           this.subject.publish(this);
         };
         image2.onerror = () => {
-          this.renderValues[index2] = 1;
+          this.renderValues[index2] = index2 + 1;
           this.subject.publish(this);
         };
       }
@@ -49140,12 +49140,19 @@ class Screen extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  applyBackgroundUrl(url) {
+  async applyBackgroundUrl(url) {
     this.backgroundUrl = url || "";
     if (url) {
-      this.backgroundImage = new Image;
-      this.backgroundImage.src = url;
+      this.backgroundImage = conf.documentFactory.createElement("img");
+      this.backgroundImage.src = await getMediaSignedUrl(url, this.board.getAccount()?.accessToken || null) || "";
       this.applyBackgroundColor("none");
+      this.backgroundImage.onload = () => {
+        this.subject.publish(this);
+      };
+      this.backgroundImage.onerror = () => {
+        this.backgroundImage = null;
+        this.subject.publish(this);
+      };
     } else {
       this.backgroundImage = null;
     }
@@ -49206,7 +49213,7 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    if (this.backgroundImage && this.backgroundImage.complete) {
+    if (this.backgroundImage && this.backgroundImage.complete && this.backgroundImage.naturalWidth > 0) {
       const ctx = context.ctx;
       ctx.save();
       ctx.drawImage(this.backgroundImage, this.left, this.top, this.getWidth(), this.getHeight());

package/dist/cjs/index.js

@@ -41171,7 +41171,7 @@ class VideoItem extends BaseItem {
     this.playBtnMbr = new Mbr(this.left + this.getWidth() / 2 - scaledPlayBtn / 2, this.top + this.getHeight() / 2 - scaledPlayBtn / 2, this.right - this.getWidth() / 2 + scaledPlayBtn / 2, this.bottom - this.getHeight() / 2 + scaledPlayBtn / 2);
   }
   render(context) {
-    if (this.transformationRenderBlock || !this.preview.complete) {
+    if (this.transformationRenderBlock || !this.preview.complete || this.preview.naturalWidth === 0) {
       return;
     }
     const ctx = context.ctx;
@@ -48068,7 +48068,7 @@ class Card extends BaseItem {
       return;
     }
     const ctx = context.ctx;
-    if (this.imageToRender && this.imageToRender.complete) {
+    if (this.imageToRender && this.imageToRender.complete && this.imageToRender.naturalWidth > 0) {
       ctx.save();
       let { x: centerX, y: centerY } = this.getMbr().getCenter();
       const width2 = this.getWidth();
@@ -48708,19 +48708,19 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
-  updateRenderValues() {
-    this.values.forEach((value, index2) => {
+  async updateRenderValues() {
+    this.values.forEach(async (value, index2) => {
       if (typeof value === "number") {
         this.renderValues[index2] = value;
       } else {
         const image2 = conf.documentFactory.createElement("img");
-        image2.src = value;
+        image2.src = await getMediaSignedUrl(value, this.board.getAccount()?.accessToken || null) || "";
         this.renderValues[index2] = image2;
         image2.onload = () => {
           this.subject.publish(this);
         };
         image2.onerror = () => {
-          this.renderValues[index2] = 1;
+          this.renderValues[index2] = index2 + 1;
           this.subject.publish(this);
         };
       }
@@ -49140,12 +49140,19 @@ class Screen extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  applyBackgroundUrl(url) {
+  async applyBackgroundUrl(url) {
     this.backgroundUrl = url || "";
     if (url) {
-      this.backgroundImage = new Image;
-      this.backgroundImage.src = url;
+      this.backgroundImage = conf.documentFactory.createElement("img");
+      this.backgroundImage.src = await getMediaSignedUrl(url, this.board.getAccount()?.accessToken || null) || "";
       this.applyBackgroundColor("none");
+      this.backgroundImage.onload = () => {
+        this.subject.publish(this);
+      };
+      this.backgroundImage.onerror = () => {
+        this.backgroundImage = null;
+        this.subject.publish(this);
+      };
     } else {
       this.backgroundImage = null;
     }
@@ -49206,7 +49213,7 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    if (this.backgroundImage && this.backgroundImage.complete) {
+    if (this.backgroundImage && this.backgroundImage.complete && this.backgroundImage.naturalWidth > 0) {
       const ctx = context.ctx;
       ctx.save();
       ctx.drawImage(this.backgroundImage, this.left, this.top, this.getWidth(), this.getHeight());

package/dist/cjs/node.js

@@ -43644,7 +43644,7 @@ class VideoItem extends BaseItem {
     this.playBtnMbr = new Mbr(this.left + this.getWidth() / 2 - scaledPlayBtn / 2, this.top + this.getHeight() / 2 - scaledPlayBtn / 2, this.right - this.getWidth() / 2 + scaledPlayBtn / 2, this.bottom - this.getHeight() / 2 + scaledPlayBtn / 2);
   }
   render(context) {
-    if (this.transformationRenderBlock || !this.preview.complete) {
+    if (this.transformationRenderBlock || !this.preview.complete || this.preview.naturalWidth === 0) {
       return;
     }
     const ctx = context.ctx;
@@ -50541,7 +50541,7 @@ class Card extends BaseItem {
       return;
     }
     const ctx = context.ctx;
-    if (this.imageToRender && this.imageToRender.complete) {
+    if (this.imageToRender && this.imageToRender.complete && this.imageToRender.naturalWidth > 0) {
       ctx.save();
       let { x: centerX, y: centerY } = this.getMbr().getCenter();
       const width2 = this.getWidth();
@@ -51181,19 +51181,19 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
-  updateRenderValues() {
-    this.values.forEach((value, index2) => {
+  async updateRenderValues() {
+    this.values.forEach(async (value, index2) => {
       if (typeof value === "number") {
         this.renderValues[index2] = value;
       } else {
         const image2 = conf.documentFactory.createElement("img");
-        image2.src = value;
+        image2.src = await getMediaSignedUrl(value, this.board.getAccount()?.accessToken || null) || "";
         this.renderValues[index2] = image2;
         image2.onload = () => {
           this.subject.publish(this);
         };
         image2.onerror = () => {
-          this.renderValues[index2] = 1;
+          this.renderValues[index2] = index2 + 1;
           this.subject.publish(this);
         };
       }
@@ -51613,12 +51613,19 @@ class Screen extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  applyBackgroundUrl(url) {
+  async applyBackgroundUrl(url) {
     this.backgroundUrl = url || "";
     if (url) {
-      this.backgroundImage = new Image;
-      this.backgroundImage.src = url;
+      this.backgroundImage = conf.documentFactory.createElement("img");
+      this.backgroundImage.src = await getMediaSignedUrl(url, this.board.getAccount()?.accessToken || null) || "";
       this.applyBackgroundColor("none");
+      this.backgroundImage.onload = () => {
+        this.subject.publish(this);
+      };
+      this.backgroundImage.onerror = () => {
+        this.backgroundImage = null;
+        this.subject.publish(this);
+      };
     } else {
       this.backgroundImage = null;
     }
@@ -51679,7 +51686,7 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    if (this.backgroundImage && this.backgroundImage.complete) {
+    if (this.backgroundImage && this.backgroundImage.complete && this.backgroundImage.naturalWidth > 0) {
       const ctx = context.ctx;
       ctx.save();
       ctx.drawImage(this.backgroundImage, this.left, this.top, this.getWidth(), this.getHeight());

package/dist/esm/browser.js

@@ -41015,7 +41015,7 @@ class VideoItem extends BaseItem {
     this.playBtnMbr = new Mbr(this.left + this.getWidth() / 2 - scaledPlayBtn / 2, this.top + this.getHeight() / 2 - scaledPlayBtn / 2, this.right - this.getWidth() / 2 + scaledPlayBtn / 2, this.bottom - this.getHeight() / 2 + scaledPlayBtn / 2);
   }
   render(context) {
-    if (this.transformationRenderBlock || !this.preview.complete) {
+    if (this.transformationRenderBlock || !this.preview.complete || this.preview.naturalWidth === 0) {
       return;
     }
     const ctx = context.ctx;
@@ -47912,7 +47912,7 @@ class Card extends BaseItem {
       return;
     }
     const ctx = context.ctx;
-    if (this.imageToRender && this.imageToRender.complete) {
+    if (this.imageToRender && this.imageToRender.complete && this.imageToRender.naturalWidth > 0) {
       ctx.save();
       let { x: centerX, y: centerY } = this.getMbr().getCenter();
       const width2 = this.getWidth();
@@ -48552,19 +48552,19 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
-  updateRenderValues() {
-    this.values.forEach((value, index2) => {
+  async updateRenderValues() {
+    this.values.forEach(async (value, index2) => {
       if (typeof value === "number") {
         this.renderValues[index2] = value;
       } else {
         const image2 = conf.documentFactory.createElement("img");
-        image2.src = value;
+        image2.src = await getMediaSignedUrl(value, this.board.getAccount()?.accessToken || null) || "";
         this.renderValues[index2] = image2;
         image2.onload = () => {
           this.subject.publish(this);
         };
         image2.onerror = () => {
-          this.renderValues[index2] = 1;
+          this.renderValues[index2] = index2 + 1;
           this.subject.publish(this);
         };
       }
@@ -48984,12 +48984,19 @@ class Screen extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  applyBackgroundUrl(url) {
+  async applyBackgroundUrl(url) {
     this.backgroundUrl = url || "";
     if (url) {
-      this.backgroundImage = new Image;
-      this.backgroundImage.src = url;
+      this.backgroundImage = conf.documentFactory.createElement("img");
+      this.backgroundImage.src = await getMediaSignedUrl(url, this.board.getAccount()?.accessToken || null) || "";
       this.applyBackgroundColor("none");
+      this.backgroundImage.onload = () => {
+        this.subject.publish(this);
+      };
+      this.backgroundImage.onerror = () => {
+        this.backgroundImage = null;
+        this.subject.publish(this);
+      };
     } else {
       this.backgroundImage = null;
     }
@@ -49050,7 +49057,7 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    if (this.backgroundImage && this.backgroundImage.complete) {
+    if (this.backgroundImage && this.backgroundImage.complete && this.backgroundImage.naturalWidth > 0) {
       const ctx = context.ctx;
       ctx.save();
       ctx.drawImage(this.backgroundImage, this.left, this.top, this.getWidth(), this.getHeight());

package/dist/esm/index.js

@@ -41008,7 +41008,7 @@ class VideoItem extends BaseItem {
     this.playBtnMbr = new Mbr(this.left + this.getWidth() / 2 - scaledPlayBtn / 2, this.top + this.getHeight() / 2 - scaledPlayBtn / 2, this.right - this.getWidth() / 2 + scaledPlayBtn / 2, this.bottom - this.getHeight() / 2 + scaledPlayBtn / 2);
   }
   render(context) {
-    if (this.transformationRenderBlock || !this.preview.complete) {
+    if (this.transformationRenderBlock || !this.preview.complete || this.preview.naturalWidth === 0) {
       return;
     }
     const ctx = context.ctx;
@@ -47905,7 +47905,7 @@ class Card extends BaseItem {
       return;
     }
     const ctx = context.ctx;
-    if (this.imageToRender && this.imageToRender.complete) {
+    if (this.imageToRender && this.imageToRender.complete && this.imageToRender.naturalWidth > 0) {
       ctx.save();
       let { x: centerX, y: centerY } = this.getMbr().getCenter();
       const width2 = this.getWidth();
@@ -48545,19 +48545,19 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
-  updateRenderValues() {
-    this.values.forEach((value, index2) => {
+  async updateRenderValues() {
+    this.values.forEach(async (value, index2) => {
       if (typeof value === "number") {
         this.renderValues[index2] = value;
       } else {
         const image2 = conf.documentFactory.createElement("img");
-        image2.src = value;
+        image2.src = await getMediaSignedUrl(value, this.board.getAccount()?.accessToken || null) || "";
         this.renderValues[index2] = image2;
         image2.onload = () => {
           this.subject.publish(this);
         };
         image2.onerror = () => {
-          this.renderValues[index2] = 1;
+          this.renderValues[index2] = index2 + 1;
           this.subject.publish(this);
         };
       }
@@ -48977,12 +48977,19 @@ class Screen extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  applyBackgroundUrl(url) {
+  async applyBackgroundUrl(url) {
     this.backgroundUrl = url || "";
     if (url) {
-      this.backgroundImage = new Image;
-      this.backgroundImage.src = url;
+      this.backgroundImage = conf.documentFactory.createElement("img");
+      this.backgroundImage.src = await getMediaSignedUrl(url, this.board.getAccount()?.accessToken || null) || "";
       this.applyBackgroundColor("none");
+      this.backgroundImage.onload = () => {
+        this.subject.publish(this);
+      };
+      this.backgroundImage.onerror = () => {
+        this.backgroundImage = null;
+        this.subject.publish(this);
+      };
     } else {
       this.backgroundImage = null;
     }
@@ -49043,7 +49050,7 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    if (this.backgroundImage && this.backgroundImage.complete) {
+    if (this.backgroundImage && this.backgroundImage.complete && this.backgroundImage.naturalWidth > 0) {
       const ctx = context.ctx;
       ctx.save();
       ctx.drawImage(this.backgroundImage, this.left, this.top, this.getWidth(), this.getHeight());

package/dist/esm/node.js

@@ -43476,7 +43476,7 @@ class VideoItem extends BaseItem {
     this.playBtnMbr = new Mbr(this.left + this.getWidth() / 2 - scaledPlayBtn / 2, this.top + this.getHeight() / 2 - scaledPlayBtn / 2, this.right - this.getWidth() / 2 + scaledPlayBtn / 2, this.bottom - this.getHeight() / 2 + scaledPlayBtn / 2);
   }
   render(context) {
-    if (this.transformationRenderBlock || !this.preview.complete) {
+    if (this.transformationRenderBlock || !this.preview.complete || this.preview.naturalWidth === 0) {
       return;
     }
     const ctx = context.ctx;
@@ -50373,7 +50373,7 @@ class Card extends BaseItem {
       return;
     }
     const ctx = context.ctx;
-    if (this.imageToRender && this.imageToRender.complete) {
+    if (this.imageToRender && this.imageToRender.complete && this.imageToRender.naturalWidth > 0) {
       ctx.save();
       let { x: centerX, y: centerY } = this.getMbr().getCenter();
       const width2 = this.getWidth();
@@ -51013,19 +51013,19 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
-  updateRenderValues() {
-    this.values.forEach((value, index2) => {
+  async updateRenderValues() {
+    this.values.forEach(async (value, index2) => {
       if (typeof value === "number") {
         this.renderValues[index2] = value;
       } else {
         const image2 = conf.documentFactory.createElement("img");
-        image2.src = value;
+        image2.src = await getMediaSignedUrl(value, this.board.getAccount()?.accessToken || null) || "";
         this.renderValues[index2] = image2;
         image2.onload = () => {
           this.subject.publish(this);
         };
         image2.onerror = () => {
-          this.renderValues[index2] = 1;
+          this.renderValues[index2] = index2 + 1;
           this.subject.publish(this);
         };
       }
@@ -51445,12 +51445,19 @@ class Screen extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  applyBackgroundUrl(url) {
+  async applyBackgroundUrl(url) {
     this.backgroundUrl = url || "";
     if (url) {
-      this.backgroundImage = new Image;
-      this.backgroundImage.src = url;
+      this.backgroundImage = conf.documentFactory.createElement("img");
+      this.backgroundImage.src = await getMediaSignedUrl(url, this.board.getAccount()?.accessToken || null) || "";
       this.applyBackgroundColor("none");
+      this.backgroundImage.onload = () => {
+        this.subject.publish(this);
+      };
+      this.backgroundImage.onerror = () => {
+        this.backgroundImage = null;
+        this.subject.publish(this);
+      };
     } else {
       this.backgroundImage = null;
     }
@@ -51511,7 +51518,7 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    if (this.backgroundImage && this.backgroundImage.complete) {
+    if (this.backgroundImage && this.backgroundImage.complete && this.backgroundImage.naturalWidth > 0) {
       const ctx = context.ctx;
       ctx.save();
       ctx.drawImage(this.backgroundImage, this.left, this.top, this.getWidth(), this.getHeight());

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

@@ -20,7 +20,7 @@ export declare class Dice extends BaseItem {
     drawingContext: DrawingContext | null;
     constructor(board: Board, id?: string, type?: DiceType, values?: (number | string)[]);
     private transformPath;
-    updateRenderValues(): void;
+    updateRenderValues(): Promise<void>;
     render(context: DrawingContext): void;
     updateMbr(): void;
     getPath(): Path;

package/package.json

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