microboard-ui-temp 0.1.129 → 0.1.131

package/dist/index.js

@@ -276454,7 +276454,7 @@ class AddScreen extends ShapeTool {
     return true;
   }
 }
-var handPath = new Path2([
+var screenPath = new Path2([
   new Line(new Point3(0, 0), new Point3(100, 0)),
   new Line(new Point3(100, 0), new Point3(100, 100)),
   new Line(new Point3(100, 100), new Point3(0, 100)),
@@ -276462,7 +276462,8 @@ var handPath = new Path2([
 ], true, "#FFFFFF", "#000000");
 var defaultScreenData = {
   itemType: "Screen",
-  ownerId: ""
+  ownerId: "",
+  backgroundUrl: ""
 };
 
 class Screen extends BaseItem {
@@ -276471,6 +276472,8 @@ class Screen extends BaseItem {
   path;
   borderWidth = 1;
   backgroundColor = "#FFFFFF";
+  backgroundUrl = "";
+  backgroundImage = null;
   constructor(board, id2 = "", ownerId = "") {
     super(board, id2, defaultScreenData, true);
     this.ownerId = ownerId;
@@ -276496,6 +276499,9 @@ class Screen extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
+          case "setBackgroundUrl":
+            this.applyBackgroundUrl(op.newData.backgroundUrl);
+            break;
         }
         break;
     }
@@ -276519,7 +276525,7 @@ class Screen extends BaseItem {
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBackgroundColor",
       item: [this.getId()],
       newData: { backgroundColor },
@@ -276532,7 +276538,7 @@ class Screen extends BaseItem {
   }
   setBorderWidth(borderWidth) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderWidth",
       item: [this.getId()],
       newData: { borderWidth },
@@ -276545,18 +276551,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);
@@ -276579,6 +276604,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);
+      ctx.restore();
+    }
     this.path.render(context);
     if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
       super.render(context);
@@ -375276,6 +375308,8 @@ function SpreadCards({ rounded = "none" }) {
         card.transformation.translateTo(right + 5 + width2 * index4, top);
       });
     }
+    board.selection.items.removeAll();
+    board.selection.add(cards);
     if (deck.getDeck().length === 0) {
       board.remove(deck);
     }

package/dist/spa.js

@@ -276454,7 +276454,7 @@ class AddScreen extends ShapeTool {
     return true;
   }
 }
-var handPath = new Path2([
+var screenPath = new Path2([
   new Line(new Point3(0, 0), new Point3(100, 0)),
   new Line(new Point3(100, 0), new Point3(100, 100)),
   new Line(new Point3(100, 100), new Point3(0, 100)),
@@ -276462,7 +276462,8 @@ var handPath = new Path2([
 ], true, "#FFFFFF", "#000000");
 var defaultScreenData = {
   itemType: "Screen",
-  ownerId: ""
+  ownerId: "",
+  backgroundUrl: ""
 };
 
 class Screen extends BaseItem {
@@ -276471,6 +276472,8 @@ class Screen extends BaseItem {
   path;
   borderWidth = 1;
   backgroundColor = "#FFFFFF";
+  backgroundUrl = "";
+  backgroundImage = null;
   constructor(board, id2 = "", ownerId = "") {
     super(board, id2, defaultScreenData, true);
     this.ownerId = ownerId;
@@ -276496,6 +276499,9 @@ class Screen extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
+          case "setBackgroundUrl":
+            this.applyBackgroundUrl(op.newData.backgroundUrl);
+            break;
         }
         break;
     }
@@ -276519,7 +276525,7 @@ class Screen extends BaseItem {
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBackgroundColor",
       item: [this.getId()],
       newData: { backgroundColor },
@@ -276532,7 +276538,7 @@ class Screen extends BaseItem {
   }
   setBorderWidth(borderWidth) {
     this.emit({
-      class: "Dice",
+      class: "Screen",
       method: "setBorderWidth",
       item: [this.getId()],
       newData: { borderWidth },
@@ -276545,18 +276551,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);
@@ -276579,6 +276604,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);
+      ctx.restore();
+    }
     this.path.render(context);
     if (localStorage.getItem("currentUser") === this.ownerId || localStorage.getItem("screenOwnerId") === this.ownerId || !this.ownerId) {
       super.render(context);
@@ -375276,6 +375308,8 @@ function SpreadCards({ rounded = "none" }) {
         card.transformation.translateTo(right + 5 + width2 * index4, top);
       });
     }
+    board.selection.items.removeAll();
+    board.selection.add(cards);
     if (deck.getDeck().length === 0) {
       board.remove(deck);
     }

package/package.json

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