microboard-temp 0.4.17 → 0.4.18

package/dist/cjs/browser.js

@@ -46233,7 +46233,7 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -46248,9 +46248,10 @@ class Dice extends BaseItem {
   path;
   subject = new Subject;
   borderWidth = 1;
-  isRotating = false;
   value = 1;
   range = { min: 1, max: 6 };
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDiceData);
     this.transformPath();
@@ -46269,11 +46270,12 @@ class Dice extends BaseItem {
     this.path.setBorderWidth(this.borderWidth);
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
     context.ctx.save();
-    if (this.isRotating) {
+    if (this.animationFrameId) {
       const now = Date.now();
       const angle = now % 1000 / 1000 * 2 * Math.PI;
       const mbr2 = this.getMbr();
@@ -46360,15 +46362,6 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setIsRotating(isRotating) {
-    this.emit({
-      class: "Dice",
-      method: "setIsRotating",
-      item: [this.getId()],
-      newData: { isRotating },
-      prevData: { isRotating: false }
-    });
-  }
   setValuesRange(range) {
     this.emit({
       class: "Dice",
@@ -46387,11 +46380,19 @@ class Dice extends BaseItem {
       prevData: { value: this.value }
     });
   }
+  setIsRotating(isRotating) {
+    this.emit({
+      class: "Dice",
+      method: "setIsRotating",
+      item: [this.getId()],
+      newData: { isRotating },
+      prevData: { isRotating: false }
+    });
+  }
   throwDice() {
     this.setIsRotating(true);
     setTimeout(() => {
       this.setValue(Math.ceil(Math.random() * (this.range.max - this.range.min)) + this.range.min);
-      this.isRotating = false;
     }, TIMEOUT);
   }
   apply(op) {
@@ -46409,16 +46410,15 @@ class Dice extends BaseItem {
             this.applyBorderColor(op.newData.borderColor);
             break;
           case "setIsRotating":
-            this.isRotating = op.newData.isRotating;
             if (op.newData.isRotating) {
+              this.startRotation();
               setTimeout(() => {
-                this.isRotating = false;
+                this.stopRotation();
               }, TIMEOUT);
             }
             break;
           case "changeValue":
             this.value = op.newData.value;
-            this.isRotating = false;
             break;
           case "changeValuesRange":
             this.range = op.newData;
@@ -46428,6 +46428,24 @@ class Dice extends BaseItem {
     }
     this.subject.publish(this);
   }
+  startRotation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.render(this.drawingContext);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopRotation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
 }
 registerItem({
   item: Dice,

package/dist/cjs/index.js

@@ -46233,7 +46233,7 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -46248,9 +46248,10 @@ class Dice extends BaseItem {
   path;
   subject = new Subject;
   borderWidth = 1;
-  isRotating = false;
   value = 1;
   range = { min: 1, max: 6 };
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDiceData);
     this.transformPath();
@@ -46269,11 +46270,12 @@ class Dice extends BaseItem {
     this.path.setBorderWidth(this.borderWidth);
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
     context.ctx.save();
-    if (this.isRotating) {
+    if (this.animationFrameId) {
       const now = Date.now();
       const angle = now % 1000 / 1000 * 2 * Math.PI;
       const mbr2 = this.getMbr();
@@ -46360,15 +46362,6 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setIsRotating(isRotating) {
-    this.emit({
-      class: "Dice",
-      method: "setIsRotating",
-      item: [this.getId()],
-      newData: { isRotating },
-      prevData: { isRotating: false }
-    });
-  }
   setValuesRange(range) {
     this.emit({
       class: "Dice",
@@ -46387,11 +46380,19 @@ class Dice extends BaseItem {
       prevData: { value: this.value }
     });
   }
+  setIsRotating(isRotating) {
+    this.emit({
+      class: "Dice",
+      method: "setIsRotating",
+      item: [this.getId()],
+      newData: { isRotating },
+      prevData: { isRotating: false }
+    });
+  }
   throwDice() {
     this.setIsRotating(true);
     setTimeout(() => {
       this.setValue(Math.ceil(Math.random() * (this.range.max - this.range.min)) + this.range.min);
-      this.isRotating = false;
     }, TIMEOUT);
   }
   apply(op) {
@@ -46409,16 +46410,15 @@ class Dice extends BaseItem {
             this.applyBorderColor(op.newData.borderColor);
             break;
           case "setIsRotating":
-            this.isRotating = op.newData.isRotating;
             if (op.newData.isRotating) {
+              this.startRotation();
               setTimeout(() => {
-                this.isRotating = false;
+                this.stopRotation();
               }, TIMEOUT);
             }
             break;
           case "changeValue":
             this.value = op.newData.value;
-            this.isRotating = false;
             break;
           case "changeValuesRange":
             this.range = op.newData;
@@ -46428,6 +46428,24 @@ class Dice extends BaseItem {
     }
     this.subject.publish(this);
   }
+  startRotation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.render(this.drawingContext);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopRotation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
 }
 registerItem({
   item: Dice,

package/dist/cjs/node.js

@@ -48773,7 +48773,7 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -48788,9 +48788,10 @@ class Dice extends BaseItem {
   path;
   subject = new Subject;
   borderWidth = 1;
-  isRotating = false;
   value = 1;
   range = { min: 1, max: 6 };
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDiceData);
     this.transformPath();
@@ -48809,11 +48810,12 @@ class Dice extends BaseItem {
     this.path.setBorderWidth(this.borderWidth);
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
     context.ctx.save();
-    if (this.isRotating) {
+    if (this.animationFrameId) {
       const now = Date.now();
       const angle = now % 1000 / 1000 * 2 * Math.PI;
       const mbr2 = this.getMbr();
@@ -48900,15 +48902,6 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setIsRotating(isRotating) {
-    this.emit({
-      class: "Dice",
-      method: "setIsRotating",
-      item: [this.getId()],
-      newData: { isRotating },
-      prevData: { isRotating: false }
-    });
-  }
   setValuesRange(range) {
     this.emit({
       class: "Dice",
@@ -48927,11 +48920,19 @@ class Dice extends BaseItem {
       prevData: { value: this.value }
     });
   }
+  setIsRotating(isRotating) {
+    this.emit({
+      class: "Dice",
+      method: "setIsRotating",
+      item: [this.getId()],
+      newData: { isRotating },
+      prevData: { isRotating: false }
+    });
+  }
   throwDice() {
     this.setIsRotating(true);
     setTimeout(() => {
       this.setValue(Math.ceil(Math.random() * (this.range.max - this.range.min)) + this.range.min);
-      this.isRotating = false;
     }, TIMEOUT);
   }
   apply(op) {
@@ -48949,16 +48950,15 @@ class Dice extends BaseItem {
             this.applyBorderColor(op.newData.borderColor);
             break;
           case "setIsRotating":
-            this.isRotating = op.newData.isRotating;
             if (op.newData.isRotating) {
+              this.startRotation();
               setTimeout(() => {
-                this.isRotating = false;
+                this.stopRotation();
               }, TIMEOUT);
             }
             break;
           case "changeValue":
             this.value = op.newData.value;
-            this.isRotating = false;
             break;
           case "changeValuesRange":
             this.range = op.newData;
@@ -48968,6 +48968,24 @@ class Dice extends BaseItem {
     }
     this.subject.publish(this);
   }
+  startRotation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.render(this.drawingContext);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopRotation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
 }
 registerItem({
   item: Dice,

package/dist/esm/browser.js

@@ -46083,7 +46083,7 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -46098,9 +46098,10 @@ class Dice extends BaseItem {
   path;
   subject = new Subject;
   borderWidth = 1;
-  isRotating = false;
   value = 1;
   range = { min: 1, max: 6 };
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDiceData);
     this.transformPath();
@@ -46119,11 +46120,12 @@ class Dice extends BaseItem {
     this.path.setBorderWidth(this.borderWidth);
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
     context.ctx.save();
-    if (this.isRotating) {
+    if (this.animationFrameId) {
       const now = Date.now();
       const angle = now % 1000 / 1000 * 2 * Math.PI;
       const mbr2 = this.getMbr();
@@ -46210,15 +46212,6 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setIsRotating(isRotating) {
-    this.emit({
-      class: "Dice",
-      method: "setIsRotating",
-      item: [this.getId()],
-      newData: { isRotating },
-      prevData: { isRotating: false }
-    });
-  }
   setValuesRange(range) {
     this.emit({
       class: "Dice",
@@ -46237,11 +46230,19 @@ class Dice extends BaseItem {
       prevData: { value: this.value }
     });
   }
+  setIsRotating(isRotating) {
+    this.emit({
+      class: "Dice",
+      method: "setIsRotating",
+      item: [this.getId()],
+      newData: { isRotating },
+      prevData: { isRotating: false }
+    });
+  }
   throwDice() {
     this.setIsRotating(true);
     setTimeout(() => {
       this.setValue(Math.ceil(Math.random() * (this.range.max - this.range.min)) + this.range.min);
-      this.isRotating = false;
     }, TIMEOUT);
   }
   apply(op) {
@@ -46259,16 +46260,15 @@ class Dice extends BaseItem {
             this.applyBorderColor(op.newData.borderColor);
             break;
           case "setIsRotating":
-            this.isRotating = op.newData.isRotating;
             if (op.newData.isRotating) {
+              this.startRotation();
               setTimeout(() => {
-                this.isRotating = false;
+                this.stopRotation();
               }, TIMEOUT);
             }
             break;
           case "changeValue":
             this.value = op.newData.value;
-            this.isRotating = false;
             break;
           case "changeValuesRange":
             this.range = op.newData;
@@ -46278,6 +46278,24 @@ class Dice extends BaseItem {
     }
     this.subject.publish(this);
   }
+  startRotation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.render(this.drawingContext);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopRotation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
 }
 registerItem({
   item: Dice,

package/dist/esm/index.js

@@ -46076,7 +46076,7 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -46091,9 +46091,10 @@ class Dice extends BaseItem {
   path;
   subject = new Subject;
   borderWidth = 1;
-  isRotating = false;
   value = 1;
   range = { min: 1, max: 6 };
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDiceData);
     this.transformPath();
@@ -46112,11 +46113,12 @@ class Dice extends BaseItem {
     this.path.setBorderWidth(this.borderWidth);
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
     context.ctx.save();
-    if (this.isRotating) {
+    if (this.animationFrameId) {
       const now = Date.now();
       const angle = now % 1000 / 1000 * 2 * Math.PI;
       const mbr2 = this.getMbr();
@@ -46203,15 +46205,6 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setIsRotating(isRotating) {
-    this.emit({
-      class: "Dice",
-      method: "setIsRotating",
-      item: [this.getId()],
-      newData: { isRotating },
-      prevData: { isRotating: false }
-    });
-  }
   setValuesRange(range) {
     this.emit({
       class: "Dice",
@@ -46230,11 +46223,19 @@ class Dice extends BaseItem {
       prevData: { value: this.value }
     });
   }
+  setIsRotating(isRotating) {
+    this.emit({
+      class: "Dice",
+      method: "setIsRotating",
+      item: [this.getId()],
+      newData: { isRotating },
+      prevData: { isRotating: false }
+    });
+  }
   throwDice() {
     this.setIsRotating(true);
     setTimeout(() => {
       this.setValue(Math.ceil(Math.random() * (this.range.max - this.range.min)) + this.range.min);
-      this.isRotating = false;
     }, TIMEOUT);
   }
   apply(op) {
@@ -46252,16 +46253,15 @@ class Dice extends BaseItem {
             this.applyBorderColor(op.newData.borderColor);
             break;
           case "setIsRotating":
-            this.isRotating = op.newData.isRotating;
             if (op.newData.isRotating) {
+              this.startRotation();
               setTimeout(() => {
-                this.isRotating = false;
+                this.stopRotation();
               }, TIMEOUT);
             }
             break;
           case "changeValue":
             this.value = op.newData.value;
-            this.isRotating = false;
             break;
           case "changeValuesRange":
             this.range = op.newData;
@@ -46271,6 +46271,24 @@ class Dice extends BaseItem {
     }
     this.subject.publish(this);
   }
+  startRotation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.render(this.drawingContext);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopRotation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
 }
 registerItem({
   item: Dice,

package/dist/esm/node.js

@@ -48611,7 +48611,7 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -48626,9 +48626,10 @@ class Dice extends BaseItem {
   path;
   subject = new Subject;
   borderWidth = 1;
-  isRotating = false;
   value = 1;
   range = { min: 1, max: 6 };
+  animationFrameId;
+  drawingContext = null;
   constructor(board, id = "") {
     super(board, id, defaultDiceData);
     this.transformPath();
@@ -48647,11 +48648,12 @@ class Dice extends BaseItem {
     this.path.setBorderWidth(this.borderWidth);
   }
   render(context) {
+    this.drawingContext = context;
     if (this.transformationRenderBlock) {
       return;
     }
     context.ctx.save();
-    if (this.isRotating) {
+    if (this.animationFrameId) {
       const now = Date.now();
       const angle = now % 1000 / 1000 * 2 * Math.PI;
       const mbr2 = this.getMbr();
@@ -48738,15 +48740,6 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setIsRotating(isRotating) {
-    this.emit({
-      class: "Dice",
-      method: "setIsRotating",
-      item: [this.getId()],
-      newData: { isRotating },
-      prevData: { isRotating: false }
-    });
-  }
   setValuesRange(range) {
     this.emit({
       class: "Dice",
@@ -48765,11 +48758,19 @@ class Dice extends BaseItem {
       prevData: { value: this.value }
     });
   }
+  setIsRotating(isRotating) {
+    this.emit({
+      class: "Dice",
+      method: "setIsRotating",
+      item: [this.getId()],
+      newData: { isRotating },
+      prevData: { isRotating: false }
+    });
+  }
   throwDice() {
     this.setIsRotating(true);
     setTimeout(() => {
       this.setValue(Math.ceil(Math.random() * (this.range.max - this.range.min)) + this.range.min);
-      this.isRotating = false;
     }, TIMEOUT);
   }
   apply(op) {
@@ -48787,16 +48788,15 @@ class Dice extends BaseItem {
             this.applyBorderColor(op.newData.borderColor);
             break;
           case "setIsRotating":
-            this.isRotating = op.newData.isRotating;
             if (op.newData.isRotating) {
+              this.startRotation();
               setTimeout(() => {
-                this.isRotating = false;
+                this.stopRotation();
               }, TIMEOUT);
             }
             break;
           case "changeValue":
             this.value = op.newData.value;
-            this.isRotating = false;
             break;
           case "changeValuesRange":
             this.range = op.newData;
@@ -48806,6 +48806,24 @@ class Dice extends BaseItem {
     }
     this.subject.publish(this);
   }
+  startRotation() {
+    if (!this.animationFrameId) {
+      const animate = () => {
+        if (this.drawingContext) {
+          this.render(this.drawingContext);
+          this.animationFrameId = requestAnimationFrame(animate);
+        }
+      };
+      this.animationFrameId = requestAnimationFrame(animate);
+    }
+  }
+  stopRotation() {
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = undefined;
+      this.drawingContext = null;
+    }
+  }
 }
 registerItem({
   item: Dice,

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

@@ -11,12 +11,13 @@ export declare class Dice extends BaseItem {
     private path;
     readonly subject: Subject<Dice>;
     private borderWidth;
-    isRotating: boolean;
     value: number;
     range: {
         min: number;
         max: number;
     };
+    private animationFrameId?;
+    drawingContext: DrawingContext | null;
     constructor(board: Board, id?: string);
     private transformPath;
     render(context: DrawingContext): void;
@@ -31,12 +32,14 @@ export declare class Dice extends BaseItem {
     setBorderWidth(borderWidth: BorderWidth): void;
     private applyBorderColor;
     setBorderColor(borderColor: string): void;
-    setIsRotating(isRotating: boolean): void;
     setValuesRange(range: {
         min: number;
         max: number;
     }): void;
     setValue(value: number): void;
+    setIsRotating(isRotating: boolean): void;
     throwDice(): void;
     apply(op: DiceOperation): void;
+    startRotation(): void;
+    stopRotation(): void;
 }

package/package.json

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