microboard-temp 0.4.16 → 0.4.18

package/dist/cjs/browser.js

@@ -46222,11 +46222,18 @@ registerItem({
   item: Deck,
   defaultData: defaultDeckData
 });
+// src/Items/Examples/CardGame/Dice/AddDice.ts
+class AddDice extends ShapeTool {
+  constructor(board, name) {
+    super(board, name, Dice, { cursorName: "crosshair", fixedRatio: true });
+  }
+}
+
 // src/Items/Examples/CardGame/Dice/Dice.ts
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -46241,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();
@@ -46262,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();
@@ -46353,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",
@@ -46380,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) {
@@ -46402,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;
@@ -46421,11 +46428,29 @@ 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,
   defaultData: defaultDiceData,
-  toolData: { name: "AddDice", tool: ShapeTool }
+  toolData: { name: "AddDice", tool: AddDice }
 });
 // src/Pointer/Cursor.ts
 var defaultCursors = [

package/dist/cjs/index.js

@@ -46222,11 +46222,18 @@ registerItem({
   item: Deck,
   defaultData: defaultDeckData
 });
+// src/Items/Examples/CardGame/Dice/AddDice.ts
+class AddDice extends ShapeTool {
+  constructor(board, name) {
+    super(board, name, Dice, { cursorName: "crosshair", fixedRatio: true });
+  }
+}
+
 // src/Items/Examples/CardGame/Dice/Dice.ts
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -46241,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();
@@ -46262,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();
@@ -46353,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",
@@ -46380,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) {
@@ -46402,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;
@@ -46421,11 +46428,29 @@ 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,
   defaultData: defaultDiceData,
-  toolData: { name: "AddDice", tool: ShapeTool }
+  toolData: { name: "AddDice", tool: AddDice }
 });
 // src/Pointer/Cursor.ts
 var defaultCursors = [

package/dist/cjs/node.js

@@ -48762,11 +48762,18 @@ registerItem({
   item: Deck,
   defaultData: defaultDeckData
 });
+// src/Items/Examples/CardGame/Dice/AddDice.ts
+class AddDice extends ShapeTool {
+  constructor(board, name) {
+    super(board, name, Dice, { cursorName: "crosshair", fixedRatio: true });
+  }
+}
+
 // src/Items/Examples/CardGame/Dice/Dice.ts
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -48781,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();
@@ -48802,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();
@@ -48893,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",
@@ -48920,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) {
@@ -48942,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;
@@ -48961,11 +48968,29 @@ 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,
   defaultData: defaultDiceData,
-  toolData: { name: "AddDice", tool: ShapeTool }
+  toolData: { name: "AddDice", tool: AddDice }
 });
 // src/Pointer/Cursor.ts
 var defaultCursors = [

package/dist/esm/browser.js

@@ -46072,11 +46072,18 @@ registerItem({
   item: Deck,
   defaultData: defaultDeckData
 });
+// src/Items/Examples/CardGame/Dice/AddDice.ts
+class AddDice extends ShapeTool {
+  constructor(board, name) {
+    super(board, name, Dice, { cursorName: "crosshair", fixedRatio: true });
+  }
+}
+
 // src/Items/Examples/CardGame/Dice/Dice.ts
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -46091,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();
@@ -46112,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();
@@ -46203,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",
@@ -46230,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) {
@@ -46252,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;
@@ -46271,11 +46278,29 @@ 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,
   defaultData: defaultDiceData,
-  toolData: { name: "AddDice", tool: ShapeTool }
+  toolData: { name: "AddDice", tool: AddDice }
 });
 // src/Pointer/Cursor.ts
 var defaultCursors = [

package/dist/esm/index.js

@@ -46065,11 +46065,18 @@ registerItem({
   item: Deck,
   defaultData: defaultDeckData
 });
+// src/Items/Examples/CardGame/Dice/AddDice.ts
+class AddDice extends ShapeTool {
+  constructor(board, name) {
+    super(board, name, Dice, { cursorName: "crosshair", fixedRatio: true });
+  }
+}
+
 // src/Items/Examples/CardGame/Dice/Dice.ts
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -46084,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();
@@ -46105,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();
@@ -46196,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",
@@ -46223,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) {
@@ -46245,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;
@@ -46264,11 +46271,29 @@ 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,
   defaultData: defaultDiceData,
-  toolData: { name: "AddDice", tool: ShapeTool }
+  toolData: { name: "AddDice", tool: AddDice }
 });
 // src/Pointer/Cursor.ts
 var defaultCursors = [

package/dist/esm/node.js

@@ -48600,11 +48600,18 @@ registerItem({
   item: Deck,
   defaultData: defaultDeckData
 });
+// src/Items/Examples/CardGame/Dice/AddDice.ts
+class AddDice extends ShapeTool {
+  constructor(board, name) {
+    super(board, name, Dice, { cursorName: "crosshair", fixedRatio: true });
+  }
+}
+
 // src/Items/Examples/CardGame/Dice/Dice.ts
 var TIMEOUT = 3000;
 var defaultDiceData = {
   itemType: "Dice",
-  backgroundColor: "#000207",
+  backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
@@ -48619,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();
@@ -48640,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();
@@ -48731,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",
@@ -48758,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) {
@@ -48780,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;
@@ -48799,11 +48806,29 @@ 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,
   defaultData: defaultDiceData,
-  toolData: { name: "AddDice", tool: ShapeTool }
+  toolData: { name: "AddDice", tool: AddDice }
 });
 // src/Pointer/Cursor.ts
 var defaultCursors = [

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

@@ -0,0 +1,5 @@
+import { Board } from "Board";
+import { ShapeTool } from "Tools/CustomTool";
+export declare class AddDice extends ShapeTool {
+    constructor(board: Board, name: string);
+}

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.16",
+  "version": "0.4.18",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",