microboard-temp 0.5.56 → 0.5.58

package/dist/cjs/browser.js

@@ -48918,7 +48918,7 @@ class AddScreen extends ShapeTool {
 }
 
 // src/Items/Examples/CardGame/Screen/Screen.ts
-var handPath = new Path([
+var screenPath = new Path([
   new Line(new Point(0, 0), new Point(100, 0)),
   new Line(new Point(100, 0), new Point(100, 100)),
   new Line(new Point(100, 100), new Point(0, 100)),
@@ -48926,7 +48926,8 @@ var handPath = new Path([
 ], true, "#FFFFFF", "#000000");
 var defaultScreenData = {
   itemType: "Screen",
-  ownerId: ""
+  ownerId: "",
+  backgroundUrl: ""
 };
 
 class Screen extends BaseItem {
@@ -48935,6 +48936,8 @@ class Screen extends BaseItem {
   path;
   borderWidth = 1;
   backgroundColor = "#FFFFFF";
+  backgroundUrl = "";
+  backgroundImage = null;
   constructor(board, id = "", ownerId = "") {
     super(board, id, defaultScreenData, true);
     this.ownerId = ownerId;
@@ -48960,6 +48963,9 @@ class Screen extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
+          case "setBackgroundUrl":
+            this.applyBackgroundUrl(op.newData.backgroundUrl);
+            break;
         }
         break;
     }
@@ -48983,7 +48989,7 @@ class Screen extends BaseItem {
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBackgroundColor",
       item: [this.getId()],
       newData: { backgroundColor },
@@ -48996,7 +49002,7 @@ class Screen extends BaseItem {
   }
   setBorderWidth(borderWidth) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderWidth",
       item: [this.getId()],
       newData: { borderWidth },
@@ -49009,18 +49015,37 @@ class Screen extends BaseItem {
   }
   setBorderColor(borderColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderColor",
       item: [this.getId()],
       newData: { borderColor },
       prevData: { borderColor: this.borderColor }
     });
   }
+  applyBackgroundUrl(url) {
+    this.backgroundUrl = url || "";
+    if (url) {
+      this.backgroundImage = new Image;
+      this.backgroundImage.src = url;
+      this.applyBackgroundColor("none");
+    } else {
+      this.backgroundImage = null;
+    }
+  }
+  setBackgroundUrl(url) {
+    this.emit({
+      class: "Screen",
+      method: "setBackgroundUrl",
+      item: [this.getId()],
+      newData: { backgroundUrl: url },
+      prevData: { backgroundUrl: this.backgroundUrl }
+    });
+  }
   applyOwnerId(ownerId) {
     this.ownerId = ownerId;
   }
   transformPath() {
-    this.path = handPath.copy();
+    this.path = screenPath.copy();
     this.path.transform(this.transformation.matrix);
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
@@ -49043,6 +49068,13 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    if (this.backgroundImage && this.backgroundImage.complete) {
+      const ctx = context.ctx;
+      ctx.save();
+      this.transformation.matrix.applyToContext(ctx);
+      ctx.drawImage(this.backgroundImage, 0, 0, this.getWidth(), this.getHeight());
+      ctx.restore();
+    }
     this.path.render(context);
     if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
       super.render(context);

package/dist/cjs/index.js

@@ -48918,7 +48918,7 @@ class AddScreen extends ShapeTool {
 }
 
 // src/Items/Examples/CardGame/Screen/Screen.ts
-var handPath = new Path([
+var screenPath = new Path([
   new Line(new Point(0, 0), new Point(100, 0)),
   new Line(new Point(100, 0), new Point(100, 100)),
   new Line(new Point(100, 100), new Point(0, 100)),
@@ -48926,7 +48926,8 @@ var handPath = new Path([
 ], true, "#FFFFFF", "#000000");
 var defaultScreenData = {
   itemType: "Screen",
-  ownerId: ""
+  ownerId: "",
+  backgroundUrl: ""
 };
 
 class Screen extends BaseItem {
@@ -48935,6 +48936,8 @@ class Screen extends BaseItem {
   path;
   borderWidth = 1;
   backgroundColor = "#FFFFFF";
+  backgroundUrl = "";
+  backgroundImage = null;
   constructor(board, id = "", ownerId = "") {
     super(board, id, defaultScreenData, true);
     this.ownerId = ownerId;
@@ -48960,6 +48963,9 @@ class Screen extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
+          case "setBackgroundUrl":
+            this.applyBackgroundUrl(op.newData.backgroundUrl);
+            break;
         }
         break;
     }
@@ -48983,7 +48989,7 @@ class Screen extends BaseItem {
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBackgroundColor",
       item: [this.getId()],
       newData: { backgroundColor },
@@ -48996,7 +49002,7 @@ class Screen extends BaseItem {
   }
   setBorderWidth(borderWidth) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderWidth",
       item: [this.getId()],
       newData: { borderWidth },
@@ -49009,18 +49015,37 @@ class Screen extends BaseItem {
   }
   setBorderColor(borderColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderColor",
       item: [this.getId()],
       newData: { borderColor },
       prevData: { borderColor: this.borderColor }
     });
   }
+  applyBackgroundUrl(url) {
+    this.backgroundUrl = url || "";
+    if (url) {
+      this.backgroundImage = new Image;
+      this.backgroundImage.src = url;
+      this.applyBackgroundColor("none");
+    } else {
+      this.backgroundImage = null;
+    }
+  }
+  setBackgroundUrl(url) {
+    this.emit({
+      class: "Screen",
+      method: "setBackgroundUrl",
+      item: [this.getId()],
+      newData: { backgroundUrl: url },
+      prevData: { backgroundUrl: this.backgroundUrl }
+    });
+  }
   applyOwnerId(ownerId) {
     this.ownerId = ownerId;
   }
   transformPath() {
-    this.path = handPath.copy();
+    this.path = screenPath.copy();
     this.path.transform(this.transformation.matrix);
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
@@ -49043,6 +49068,13 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    if (this.backgroundImage && this.backgroundImage.complete) {
+      const ctx = context.ctx;
+      ctx.save();
+      this.transformation.matrix.applyToContext(ctx);
+      ctx.drawImage(this.backgroundImage, 0, 0, this.getWidth(), this.getHeight());
+      ctx.restore();
+    }
     this.path.render(context);
     if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
       super.render(context);

package/dist/cjs/node.js

@@ -51391,7 +51391,7 @@ class AddScreen extends ShapeTool {
 }
 
 // src/Items/Examples/CardGame/Screen/Screen.ts
-var handPath = new Path([
+var screenPath = new Path([
   new Line(new Point(0, 0), new Point(100, 0)),
   new Line(new Point(100, 0), new Point(100, 100)),
   new Line(new Point(100, 100), new Point(0, 100)),
@@ -51399,7 +51399,8 @@ var handPath = new Path([
 ], true, "#FFFFFF", "#000000");
 var defaultScreenData = {
   itemType: "Screen",
-  ownerId: ""
+  ownerId: "",
+  backgroundUrl: ""
 };
 
 class Screen extends BaseItem {
@@ -51408,6 +51409,8 @@ class Screen extends BaseItem {
   path;
   borderWidth = 1;
   backgroundColor = "#FFFFFF";
+  backgroundUrl = "";
+  backgroundImage = null;
   constructor(board, id = "", ownerId = "") {
     super(board, id, defaultScreenData, true);
     this.ownerId = ownerId;
@@ -51433,6 +51436,9 @@ class Screen extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
+          case "setBackgroundUrl":
+            this.applyBackgroundUrl(op.newData.backgroundUrl);
+            break;
         }
         break;
     }
@@ -51456,7 +51462,7 @@ class Screen extends BaseItem {
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBackgroundColor",
       item: [this.getId()],
       newData: { backgroundColor },
@@ -51469,7 +51475,7 @@ class Screen extends BaseItem {
   }
   setBorderWidth(borderWidth) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderWidth",
       item: [this.getId()],
       newData: { borderWidth },
@@ -51482,18 +51488,37 @@ class Screen extends BaseItem {
   }
   setBorderColor(borderColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderColor",
       item: [this.getId()],
       newData: { borderColor },
       prevData: { borderColor: this.borderColor }
     });
   }
+  applyBackgroundUrl(url) {
+    this.backgroundUrl = url || "";
+    if (url) {
+      this.backgroundImage = new Image;
+      this.backgroundImage.src = url;
+      this.applyBackgroundColor("none");
+    } else {
+      this.backgroundImage = null;
+    }
+  }
+  setBackgroundUrl(url) {
+    this.emit({
+      class: "Screen",
+      method: "setBackgroundUrl",
+      item: [this.getId()],
+      newData: { backgroundUrl: url },
+      prevData: { backgroundUrl: this.backgroundUrl }
+    });
+  }
   applyOwnerId(ownerId) {
     this.ownerId = ownerId;
   }
   transformPath() {
-    this.path = handPath.copy();
+    this.path = screenPath.copy();
     this.path.transform(this.transformation.matrix);
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
@@ -51516,6 +51541,13 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    if (this.backgroundImage && this.backgroundImage.complete) {
+      const ctx = context.ctx;
+      ctx.save();
+      this.transformation.matrix.applyToContext(ctx);
+      ctx.drawImage(this.backgroundImage, 0, 0, this.getWidth(), this.getHeight());
+      ctx.restore();
+    }
     this.path.render(context);
     if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
       super.render(context);

package/dist/esm/browser.js

@@ -48764,7 +48764,7 @@ class AddScreen extends ShapeTool {
 }
 
 // src/Items/Examples/CardGame/Screen/Screen.ts
-var handPath = new Path([
+var screenPath = new Path([
   new Line(new Point(0, 0), new Point(100, 0)),
   new Line(new Point(100, 0), new Point(100, 100)),
   new Line(new Point(100, 100), new Point(0, 100)),
@@ -48772,7 +48772,8 @@ var handPath = new Path([
 ], true, "#FFFFFF", "#000000");
 var defaultScreenData = {
   itemType: "Screen",
-  ownerId: ""
+  ownerId: "",
+  backgroundUrl: ""
 };
 
 class Screen extends BaseItem {
@@ -48781,6 +48782,8 @@ class Screen extends BaseItem {
   path;
   borderWidth = 1;
   backgroundColor = "#FFFFFF";
+  backgroundUrl = "";
+  backgroundImage = null;
   constructor(board, id = "", ownerId = "") {
     super(board, id, defaultScreenData, true);
     this.ownerId = ownerId;
@@ -48806,6 +48809,9 @@ class Screen extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
+          case "setBackgroundUrl":
+            this.applyBackgroundUrl(op.newData.backgroundUrl);
+            break;
         }
         break;
     }
@@ -48829,7 +48835,7 @@ class Screen extends BaseItem {
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBackgroundColor",
       item: [this.getId()],
       newData: { backgroundColor },
@@ -48842,7 +48848,7 @@ class Screen extends BaseItem {
   }
   setBorderWidth(borderWidth) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderWidth",
       item: [this.getId()],
       newData: { borderWidth },
@@ -48855,18 +48861,37 @@ class Screen extends BaseItem {
   }
   setBorderColor(borderColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderColor",
       item: [this.getId()],
       newData: { borderColor },
       prevData: { borderColor: this.borderColor }
     });
   }
+  applyBackgroundUrl(url) {
+    this.backgroundUrl = url || "";
+    if (url) {
+      this.backgroundImage = new Image;
+      this.backgroundImage.src = url;
+      this.applyBackgroundColor("none");
+    } else {
+      this.backgroundImage = null;
+    }
+  }
+  setBackgroundUrl(url) {
+    this.emit({
+      class: "Screen",
+      method: "setBackgroundUrl",
+      item: [this.getId()],
+      newData: { backgroundUrl: url },
+      prevData: { backgroundUrl: this.backgroundUrl }
+    });
+  }
   applyOwnerId(ownerId) {
     this.ownerId = ownerId;
   }
   transformPath() {
-    this.path = handPath.copy();
+    this.path = screenPath.copy();
     this.path.transform(this.transformation.matrix);
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
@@ -48889,6 +48914,13 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    if (this.backgroundImage && this.backgroundImage.complete) {
+      const ctx = context.ctx;
+      ctx.save();
+      this.transformation.matrix.applyToContext(ctx);
+      ctx.drawImage(this.backgroundImage, 0, 0, this.getWidth(), this.getHeight());
+      ctx.restore();
+    }
     this.path.render(context);
     if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
       super.render(context);

package/dist/esm/index.js

@@ -48757,7 +48757,7 @@ class AddScreen extends ShapeTool {
 }
 
 // src/Items/Examples/CardGame/Screen/Screen.ts
-var handPath = new Path([
+var screenPath = new Path([
   new Line(new Point(0, 0), new Point(100, 0)),
   new Line(new Point(100, 0), new Point(100, 100)),
   new Line(new Point(100, 100), new Point(0, 100)),
@@ -48765,7 +48765,8 @@ var handPath = new Path([
 ], true, "#FFFFFF", "#000000");
 var defaultScreenData = {
   itemType: "Screen",
-  ownerId: ""
+  ownerId: "",
+  backgroundUrl: ""
 };
 
 class Screen extends BaseItem {
@@ -48774,6 +48775,8 @@ class Screen extends BaseItem {
   path;
   borderWidth = 1;
   backgroundColor = "#FFFFFF";
+  backgroundUrl = "";
+  backgroundImage = null;
   constructor(board, id = "", ownerId = "") {
     super(board, id, defaultScreenData, true);
     this.ownerId = ownerId;
@@ -48799,6 +48802,9 @@ class Screen extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
+          case "setBackgroundUrl":
+            this.applyBackgroundUrl(op.newData.backgroundUrl);
+            break;
         }
         break;
     }
@@ -48822,7 +48828,7 @@ class Screen extends BaseItem {
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBackgroundColor",
       item: [this.getId()],
       newData: { backgroundColor },
@@ -48835,7 +48841,7 @@ class Screen extends BaseItem {
   }
   setBorderWidth(borderWidth) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderWidth",
       item: [this.getId()],
       newData: { borderWidth },
@@ -48848,18 +48854,37 @@ class Screen extends BaseItem {
   }
   setBorderColor(borderColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderColor",
       item: [this.getId()],
       newData: { borderColor },
       prevData: { borderColor: this.borderColor }
     });
   }
+  applyBackgroundUrl(url) {
+    this.backgroundUrl = url || "";
+    if (url) {
+      this.backgroundImage = new Image;
+      this.backgroundImage.src = url;
+      this.applyBackgroundColor("none");
+    } else {
+      this.backgroundImage = null;
+    }
+  }
+  setBackgroundUrl(url) {
+    this.emit({
+      class: "Screen",
+      method: "setBackgroundUrl",
+      item: [this.getId()],
+      newData: { backgroundUrl: url },
+      prevData: { backgroundUrl: this.backgroundUrl }
+    });
+  }
   applyOwnerId(ownerId) {
     this.ownerId = ownerId;
   }
   transformPath() {
-    this.path = handPath.copy();
+    this.path = screenPath.copy();
     this.path.transform(this.transformation.matrix);
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
@@ -48882,6 +48907,13 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    if (this.backgroundImage && this.backgroundImage.complete) {
+      const ctx = context.ctx;
+      ctx.save();
+      this.transformation.matrix.applyToContext(ctx);
+      ctx.drawImage(this.backgroundImage, 0, 0, this.getWidth(), this.getHeight());
+      ctx.restore();
+    }
     this.path.render(context);
     if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
       super.render(context);

package/dist/esm/node.js

@@ -51225,7 +51225,7 @@ class AddScreen extends ShapeTool {
 }
 
 // src/Items/Examples/CardGame/Screen/Screen.ts
-var handPath = new Path([
+var screenPath = new Path([
   new Line(new Point(0, 0), new Point(100, 0)),
   new Line(new Point(100, 0), new Point(100, 100)),
   new Line(new Point(100, 100), new Point(0, 100)),
@@ -51233,7 +51233,8 @@ var handPath = new Path([
 ], true, "#FFFFFF", "#000000");
 var defaultScreenData = {
   itemType: "Screen",
-  ownerId: ""
+  ownerId: "",
+  backgroundUrl: ""
 };
 
 class Screen extends BaseItem {
@@ -51242,6 +51243,8 @@ class Screen extends BaseItem {
   path;
   borderWidth = 1;
   backgroundColor = "#FFFFFF";
+  backgroundUrl = "";
+  backgroundImage = null;
   constructor(board, id = "", ownerId = "") {
     super(board, id, defaultScreenData, true);
     this.ownerId = ownerId;
@@ -51267,6 +51270,9 @@ class Screen extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
+          case "setBackgroundUrl":
+            this.applyBackgroundUrl(op.newData.backgroundUrl);
+            break;
         }
         break;
     }
@@ -51290,7 +51296,7 @@ class Screen extends BaseItem {
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBackgroundColor",
       item: [this.getId()],
       newData: { backgroundColor },
@@ -51303,7 +51309,7 @@ class Screen extends BaseItem {
   }
   setBorderWidth(borderWidth) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderWidth",
       item: [this.getId()],
       newData: { borderWidth },
@@ -51316,18 +51322,37 @@ class Screen extends BaseItem {
   }
   setBorderColor(borderColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderColor",
       item: [this.getId()],
       newData: { borderColor },
       prevData: { borderColor: this.borderColor }
     });
   }
+  applyBackgroundUrl(url) {
+    this.backgroundUrl = url || "";
+    if (url) {
+      this.backgroundImage = new Image;
+      this.backgroundImage.src = url;
+      this.applyBackgroundColor("none");
+    } else {
+      this.backgroundImage = null;
+    }
+  }
+  setBackgroundUrl(url) {
+    this.emit({
+      class: "Screen",
+      method: "setBackgroundUrl",
+      item: [this.getId()],
+      newData: { backgroundUrl: url },
+      prevData: { backgroundUrl: this.backgroundUrl }
+    });
+  }
   applyOwnerId(ownerId) {
     this.ownerId = ownerId;
   }
   transformPath() {
-    this.path = handPath.copy();
+    this.path = screenPath.copy();
     this.path.transform(this.transformation.matrix);
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
@@ -51350,6 +51375,13 @@ class Screen extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    if (this.backgroundImage && this.backgroundImage.complete) {
+      const ctx = context.ctx;
+      ctx.save();
+      this.transformation.matrix.applyToContext(ctx);
+      ctx.drawImage(this.backgroundImage, 0, 0, this.getWidth(), this.getHeight());
+      ctx.restore();
+    }
     this.path.render(context);
     if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
       super.render(context);

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

@@ -12,6 +12,8 @@ export declare class Screen extends BaseItem {
     private path;
     private borderWidth;
     backgroundColor: string;
+    backgroundUrl: string;
+    backgroundImage: HTMLImageElement | null;
     constructor(board: Board, id?: string, ownerId?: string);
     apply(op: ScreenOperation): void;
     getBackgroundColor(): string;
@@ -24,6 +26,8 @@ export declare class Screen extends BaseItem {
     setBorderWidth(borderWidth: BorderWidth): void;
     private applyBorderColor;
     setBorderColor(borderColor: string): void;
+    private applyBackgroundUrl;
+    setBackgroundUrl(url?: string): void;
     applyOwnerId(ownerId: string): void;
     private transformPath;
     updateMbr(): void;

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

@@ -1,5 +1,5 @@
 import { BaseOperation } from "../../../../Events/EventsOperations";
-export type ScreenOperation = SetBackgroundColor | SetBorderColor | SetBorderWidth;
+export type ScreenOperation = SetBackgroundColor | SetBorderColor | SetBorderWidth | SetBackgroundUrl;
 interface SetBackgroundColor extends BaseOperation<{
     backgroundColor: string;
 }> {
@@ -18,4 +18,10 @@ export interface SetBorderWidth extends BaseOperation<{
     class: "Screen";
     method: "setBorderWidth";
 }
+export interface SetBackgroundUrl extends BaseOperation<{
+    backgroundUrl?: string;
+}> {
+    class: "Screen";
+    method: "setBackgroundUrl";
+}
 export {};

package/package.json

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