microboard-temp 0.4.24 → 0.4.25

package/dist/cjs/browser.js

@@ -46227,27 +46227,37 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 2000;
 var defaultDiceData = {
   itemType: "Dice",
+  type: "common",
   backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
   borderStyle: "solid",
   borderWidth: 1,
-  value: 1,
-  range: { min: 1, max: 6 }
+  valueIndex: 0,
+  values: [1, 2, 3, 4, 5, 6]
 };
 
 class Dice extends BaseItem {
   itemType = "Dice";
+  type = "common";
   path;
   subject = new Subject;
   borderWidth = 1;
-  value = 1;
-  range = { min: 1, max: 6 };
+  valueIndex = 0;
+  values = [];
+  renderValues = {};
   animationFrameId;
   drawingContext = null;
-  constructor(board, id = "") {
+  constructor(board, id = "", type, values2) {
     super(board, id, defaultDiceData);
+    if (type) {
+      this.type = type;
+    }
+    if (values2) {
+      this.values = values2;
+    }
+    this.createRenderValues();
     this.transformPath();
     this.transformation.subject.subscribe(() => {
       this.transformPath();
@@ -46263,6 +46273,24 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
+  createRenderValues() {
+    this.values.forEach((value, index2) => {
+      if (typeof value === "number") {
+        this.renderValues[index2] = value;
+      } else {
+        const image2 = conf.documentFactory.createElement("img");
+        image2.src = value;
+        this.renderValues[index2] = image2;
+        image2.onload = () => {
+          this.subject.publish(this);
+        };
+        image2.onerror = () => {
+          this.renderValues[index2] = 1;
+          this.subject.publish(this);
+        };
+      }
+    });
+  }
   render(context) {
     this.drawingContext = context;
     if (this.transformationRenderBlock) {
@@ -46283,11 +46311,25 @@ class Dice extends BaseItem {
     const mbr = this.getMbr();
     const centerX = (mbr.left + mbr.right) / 2;
     const centerY = (mbr.top + mbr.bottom) / 2;
-    context.ctx.fillStyle = "black";
-    context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
-    context.ctx.textAlign = "center";
-    context.ctx.textBaseline = "middle";
-    context.ctx.fillText(String(this.value), centerX, centerY);
+    const valueToRender = this.renderValues[this.valueIndex];
+    if (typeof valueToRender === "number") {
+      context.ctx.fillStyle = "black";
+      context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
+      context.ctx.textAlign = "center";
+      context.ctx.textBaseline = "middle";
+      context.ctx.fillText(String(valueToRender), centerX, centerY);
+    } else if (valueToRender instanceof HTMLImageElement) {
+      const size = this.getHeight() / 3;
+      if (valueToRender.complete && valueToRender.naturalWidth > 0) {
+        context.ctx.drawImage(valueToRender, centerX - size / 2, centerY - size / 2, size, size);
+      } else {
+        context.ctx.fillStyle = "black";
+        context.ctx.font = `bold ${size}px sans-serif`;
+        context.ctx.textAlign = "center";
+        context.ctx.textBaseline = "middle";
+        context.ctx.fillText("?", centerX, centerY);
+      }
+    }
     context.ctx.restore();
   }
   updateMbr() {
@@ -46314,7 +46356,10 @@ class Dice extends BaseItem {
     return !!this.animationFrameId;
   }
   getRange() {
-    return this.range;
+    if (this.type === "custom") {
+      return { min: 1, max: this.values.length };
+    }
+    return { min: this.values[0], max: this.values[this.values.length - 1] };
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
@@ -46355,26 +46400,26 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setValuesRange(range) {
+  setValues(values2) {
     this.emit({
       class: "Dice",
-      method: "changeValuesRange",
+      method: "changeValues",
       item: [this.getId()],
-      newData: range,
-      prevData: this.range
+      newData: { values: values2 },
+      prevData: { values: this.values }
     });
   }
-  setValue(value) {
+  setValueIndex(valueIndex) {
     this.emit({
       class: "Dice",
-      method: "changeValue",
+      method: "changeValueIndex",
       item: [this.getId()],
-      newData: { value, shouldRotate: true, timeStamp: Date.now() },
-      prevData: { value: this.value, shouldRotate: false }
+      newData: { valueIndex, shouldRotate: true, timeStamp: Date.now() },
+      prevData: { value: this.valueIndex, shouldRotate: false }
     });
   }
   throwDice() {
-    this.setValue(Math.floor(Math.random() * (this.range.max - this.range.min + 1)) + this.range.min);
+    this.setValueIndex(Math.floor(Math.random() * this.values.length));
   }
   apply(op) {
     super.apply(op);
@@ -46390,19 +46435,22 @@ class Dice extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
-          case "changeValue":
+          case "changeValueIndex":
             if (op.newData.shouldRotate && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 1e4) {
               this.startRotation();
               setTimeout(() => {
                 this.stopRotation();
-                this.value = op.newData.value;
+                this.valueIndex = op.newData.valueIndex;
               }, TIMEOUT);
             } else {
-              this.value = op.newData.value;
+              this.valueIndex = op.newData.valueIndex;
             }
             break;
-          case "changeValuesRange":
-            this.range = op.newData;
+          case "changeValues":
+            if (!op.newData.values[this.valueIndex]) {
+              this.valueIndex = 0;
+            }
+            this.values = op.newData.values;
             break;
         }
         break;

package/dist/cjs/index.js

@@ -46227,27 +46227,37 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 2000;
 var defaultDiceData = {
   itemType: "Dice",
+  type: "common",
   backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
   borderStyle: "solid",
   borderWidth: 1,
-  value: 1,
-  range: { min: 1, max: 6 }
+  valueIndex: 0,
+  values: [1, 2, 3, 4, 5, 6]
 };
 
 class Dice extends BaseItem {
   itemType = "Dice";
+  type = "common";
   path;
   subject = new Subject;
   borderWidth = 1;
-  value = 1;
-  range = { min: 1, max: 6 };
+  valueIndex = 0;
+  values = [];
+  renderValues = {};
   animationFrameId;
   drawingContext = null;
-  constructor(board, id = "") {
+  constructor(board, id = "", type, values2) {
     super(board, id, defaultDiceData);
+    if (type) {
+      this.type = type;
+    }
+    if (values2) {
+      this.values = values2;
+    }
+    this.createRenderValues();
     this.transformPath();
     this.transformation.subject.subscribe(() => {
       this.transformPath();
@@ -46263,6 +46273,24 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
+  createRenderValues() {
+    this.values.forEach((value, index2) => {
+      if (typeof value === "number") {
+        this.renderValues[index2] = value;
+      } else {
+        const image2 = conf.documentFactory.createElement("img");
+        image2.src = value;
+        this.renderValues[index2] = image2;
+        image2.onload = () => {
+          this.subject.publish(this);
+        };
+        image2.onerror = () => {
+          this.renderValues[index2] = 1;
+          this.subject.publish(this);
+        };
+      }
+    });
+  }
   render(context) {
     this.drawingContext = context;
     if (this.transformationRenderBlock) {
@@ -46283,11 +46311,25 @@ class Dice extends BaseItem {
     const mbr = this.getMbr();
     const centerX = (mbr.left + mbr.right) / 2;
     const centerY = (mbr.top + mbr.bottom) / 2;
-    context.ctx.fillStyle = "black";
-    context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
-    context.ctx.textAlign = "center";
-    context.ctx.textBaseline = "middle";
-    context.ctx.fillText(String(this.value), centerX, centerY);
+    const valueToRender = this.renderValues[this.valueIndex];
+    if (typeof valueToRender === "number") {
+      context.ctx.fillStyle = "black";
+      context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
+      context.ctx.textAlign = "center";
+      context.ctx.textBaseline = "middle";
+      context.ctx.fillText(String(valueToRender), centerX, centerY);
+    } else if (valueToRender instanceof HTMLImageElement) {
+      const size = this.getHeight() / 3;
+      if (valueToRender.complete && valueToRender.naturalWidth > 0) {
+        context.ctx.drawImage(valueToRender, centerX - size / 2, centerY - size / 2, size, size);
+      } else {
+        context.ctx.fillStyle = "black";
+        context.ctx.font = `bold ${size}px sans-serif`;
+        context.ctx.textAlign = "center";
+        context.ctx.textBaseline = "middle";
+        context.ctx.fillText("?", centerX, centerY);
+      }
+    }
     context.ctx.restore();
   }
   updateMbr() {
@@ -46314,7 +46356,10 @@ class Dice extends BaseItem {
     return !!this.animationFrameId;
   }
   getRange() {
-    return this.range;
+    if (this.type === "custom") {
+      return { min: 1, max: this.values.length };
+    }
+    return { min: this.values[0], max: this.values[this.values.length - 1] };
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
@@ -46355,26 +46400,26 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setValuesRange(range) {
+  setValues(values2) {
     this.emit({
       class: "Dice",
-      method: "changeValuesRange",
+      method: "changeValues",
       item: [this.getId()],
-      newData: range,
-      prevData: this.range
+      newData: { values: values2 },
+      prevData: { values: this.values }
     });
   }
-  setValue(value) {
+  setValueIndex(valueIndex) {
     this.emit({
       class: "Dice",
-      method: "changeValue",
+      method: "changeValueIndex",
       item: [this.getId()],
-      newData: { value, shouldRotate: true, timeStamp: Date.now() },
-      prevData: { value: this.value, shouldRotate: false }
+      newData: { valueIndex, shouldRotate: true, timeStamp: Date.now() },
+      prevData: { value: this.valueIndex, shouldRotate: false }
     });
   }
   throwDice() {
-    this.setValue(Math.floor(Math.random() * (this.range.max - this.range.min + 1)) + this.range.min);
+    this.setValueIndex(Math.floor(Math.random() * this.values.length));
   }
   apply(op) {
     super.apply(op);
@@ -46390,19 +46435,22 @@ class Dice extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
-          case "changeValue":
+          case "changeValueIndex":
             if (op.newData.shouldRotate && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 1e4) {
               this.startRotation();
               setTimeout(() => {
                 this.stopRotation();
-                this.value = op.newData.value;
+                this.valueIndex = op.newData.valueIndex;
               }, TIMEOUT);
             } else {
-              this.value = op.newData.value;
+              this.valueIndex = op.newData.valueIndex;
             }
             break;
-          case "changeValuesRange":
-            this.range = op.newData;
+          case "changeValues":
+            if (!op.newData.values[this.valueIndex]) {
+              this.valueIndex = 0;
+            }
+            this.values = op.newData.values;
             break;
         }
         break;

package/dist/cjs/node.js

@@ -48767,27 +48767,37 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 2000;
 var defaultDiceData = {
   itemType: "Dice",
+  type: "common",
   backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
   borderStyle: "solid",
   borderWidth: 1,
-  value: 1,
-  range: { min: 1, max: 6 }
+  valueIndex: 0,
+  values: [1, 2, 3, 4, 5, 6]
 };
 
 class Dice extends BaseItem {
   itemType = "Dice";
+  type = "common";
   path;
   subject = new Subject;
   borderWidth = 1;
-  value = 1;
-  range = { min: 1, max: 6 };
+  valueIndex = 0;
+  values = [];
+  renderValues = {};
   animationFrameId;
   drawingContext = null;
-  constructor(board, id = "") {
+  constructor(board, id = "", type, values2) {
     super(board, id, defaultDiceData);
+    if (type) {
+      this.type = type;
+    }
+    if (values2) {
+      this.values = values2;
+    }
+    this.createRenderValues();
     this.transformPath();
     this.transformation.subject.subscribe(() => {
       this.transformPath();
@@ -48803,6 +48813,24 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
+  createRenderValues() {
+    this.values.forEach((value, index2) => {
+      if (typeof value === "number") {
+        this.renderValues[index2] = value;
+      } else {
+        const image2 = conf.documentFactory.createElement("img");
+        image2.src = value;
+        this.renderValues[index2] = image2;
+        image2.onload = () => {
+          this.subject.publish(this);
+        };
+        image2.onerror = () => {
+          this.renderValues[index2] = 1;
+          this.subject.publish(this);
+        };
+      }
+    });
+  }
   render(context) {
     this.drawingContext = context;
     if (this.transformationRenderBlock) {
@@ -48823,11 +48851,25 @@ class Dice extends BaseItem {
     const mbr = this.getMbr();
     const centerX = (mbr.left + mbr.right) / 2;
     const centerY = (mbr.top + mbr.bottom) / 2;
-    context.ctx.fillStyle = "black";
-    context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
-    context.ctx.textAlign = "center";
-    context.ctx.textBaseline = "middle";
-    context.ctx.fillText(String(this.value), centerX, centerY);
+    const valueToRender = this.renderValues[this.valueIndex];
+    if (typeof valueToRender === "number") {
+      context.ctx.fillStyle = "black";
+      context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
+      context.ctx.textAlign = "center";
+      context.ctx.textBaseline = "middle";
+      context.ctx.fillText(String(valueToRender), centerX, centerY);
+    } else if (valueToRender instanceof HTMLImageElement) {
+      const size = this.getHeight() / 3;
+      if (valueToRender.complete && valueToRender.naturalWidth > 0) {
+        context.ctx.drawImage(valueToRender, centerX - size / 2, centerY - size / 2, size, size);
+      } else {
+        context.ctx.fillStyle = "black";
+        context.ctx.font = `bold ${size}px sans-serif`;
+        context.ctx.textAlign = "center";
+        context.ctx.textBaseline = "middle";
+        context.ctx.fillText("?", centerX, centerY);
+      }
+    }
     context.ctx.restore();
   }
   updateMbr() {
@@ -48854,7 +48896,10 @@ class Dice extends BaseItem {
     return !!this.animationFrameId;
   }
   getRange() {
-    return this.range;
+    if (this.type === "custom") {
+      return { min: 1, max: this.values.length };
+    }
+    return { min: this.values[0], max: this.values[this.values.length - 1] };
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
@@ -48895,26 +48940,26 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setValuesRange(range) {
+  setValues(values2) {
     this.emit({
       class: "Dice",
-      method: "changeValuesRange",
+      method: "changeValues",
       item: [this.getId()],
-      newData: range,
-      prevData: this.range
+      newData: { values: values2 },
+      prevData: { values: this.values }
     });
   }
-  setValue(value) {
+  setValueIndex(valueIndex) {
     this.emit({
       class: "Dice",
-      method: "changeValue",
+      method: "changeValueIndex",
       item: [this.getId()],
-      newData: { value, shouldRotate: true, timeStamp: Date.now() },
-      prevData: { value: this.value, shouldRotate: false }
+      newData: { valueIndex, shouldRotate: true, timeStamp: Date.now() },
+      prevData: { value: this.valueIndex, shouldRotate: false }
     });
   }
   throwDice() {
-    this.setValue(Math.floor(Math.random() * (this.range.max - this.range.min + 1)) + this.range.min);
+    this.setValueIndex(Math.floor(Math.random() * this.values.length));
   }
   apply(op) {
     super.apply(op);
@@ -48930,19 +48975,22 @@ class Dice extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
-          case "changeValue":
+          case "changeValueIndex":
             if (op.newData.shouldRotate && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 1e4) {
               this.startRotation();
               setTimeout(() => {
                 this.stopRotation();
-                this.value = op.newData.value;
+                this.valueIndex = op.newData.valueIndex;
               }, TIMEOUT);
             } else {
-              this.value = op.newData.value;
+              this.valueIndex = op.newData.valueIndex;
             }
             break;
-          case "changeValuesRange":
-            this.range = op.newData;
+          case "changeValues":
+            if (!op.newData.values[this.valueIndex]) {
+              this.valueIndex = 0;
+            }
+            this.values = op.newData.values;
             break;
         }
         break;

package/dist/esm/browser.js

@@ -46077,27 +46077,37 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 2000;
 var defaultDiceData = {
   itemType: "Dice",
+  type: "common",
   backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
   borderStyle: "solid",
   borderWidth: 1,
-  value: 1,
-  range: { min: 1, max: 6 }
+  valueIndex: 0,
+  values: [1, 2, 3, 4, 5, 6]
 };
 
 class Dice extends BaseItem {
   itemType = "Dice";
+  type = "common";
   path;
   subject = new Subject;
   borderWidth = 1;
-  value = 1;
-  range = { min: 1, max: 6 };
+  valueIndex = 0;
+  values = [];
+  renderValues = {};
   animationFrameId;
   drawingContext = null;
-  constructor(board, id = "") {
+  constructor(board, id = "", type, values2) {
     super(board, id, defaultDiceData);
+    if (type) {
+      this.type = type;
+    }
+    if (values2) {
+      this.values = values2;
+    }
+    this.createRenderValues();
     this.transformPath();
     this.transformation.subject.subscribe(() => {
       this.transformPath();
@@ -46113,6 +46123,24 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
+  createRenderValues() {
+    this.values.forEach((value, index2) => {
+      if (typeof value === "number") {
+        this.renderValues[index2] = value;
+      } else {
+        const image2 = conf.documentFactory.createElement("img");
+        image2.src = value;
+        this.renderValues[index2] = image2;
+        image2.onload = () => {
+          this.subject.publish(this);
+        };
+        image2.onerror = () => {
+          this.renderValues[index2] = 1;
+          this.subject.publish(this);
+        };
+      }
+    });
+  }
   render(context) {
     this.drawingContext = context;
     if (this.transformationRenderBlock) {
@@ -46133,11 +46161,25 @@ class Dice extends BaseItem {
     const mbr = this.getMbr();
     const centerX = (mbr.left + mbr.right) / 2;
     const centerY = (mbr.top + mbr.bottom) / 2;
-    context.ctx.fillStyle = "black";
-    context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
-    context.ctx.textAlign = "center";
-    context.ctx.textBaseline = "middle";
-    context.ctx.fillText(String(this.value), centerX, centerY);
+    const valueToRender = this.renderValues[this.valueIndex];
+    if (typeof valueToRender === "number") {
+      context.ctx.fillStyle = "black";
+      context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
+      context.ctx.textAlign = "center";
+      context.ctx.textBaseline = "middle";
+      context.ctx.fillText(String(valueToRender), centerX, centerY);
+    } else if (valueToRender instanceof HTMLImageElement) {
+      const size = this.getHeight() / 3;
+      if (valueToRender.complete && valueToRender.naturalWidth > 0) {
+        context.ctx.drawImage(valueToRender, centerX - size / 2, centerY - size / 2, size, size);
+      } else {
+        context.ctx.fillStyle = "black";
+        context.ctx.font = `bold ${size}px sans-serif`;
+        context.ctx.textAlign = "center";
+        context.ctx.textBaseline = "middle";
+        context.ctx.fillText("?", centerX, centerY);
+      }
+    }
     context.ctx.restore();
   }
   updateMbr() {
@@ -46164,7 +46206,10 @@ class Dice extends BaseItem {
     return !!this.animationFrameId;
   }
   getRange() {
-    return this.range;
+    if (this.type === "custom") {
+      return { min: 1, max: this.values.length };
+    }
+    return { min: this.values[0], max: this.values[this.values.length - 1] };
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
@@ -46205,26 +46250,26 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setValuesRange(range) {
+  setValues(values2) {
     this.emit({
       class: "Dice",
-      method: "changeValuesRange",
+      method: "changeValues",
       item: [this.getId()],
-      newData: range,
-      prevData: this.range
+      newData: { values: values2 },
+      prevData: { values: this.values }
     });
   }
-  setValue(value) {
+  setValueIndex(valueIndex) {
     this.emit({
       class: "Dice",
-      method: "changeValue",
+      method: "changeValueIndex",
       item: [this.getId()],
-      newData: { value, shouldRotate: true, timeStamp: Date.now() },
-      prevData: { value: this.value, shouldRotate: false }
+      newData: { valueIndex, shouldRotate: true, timeStamp: Date.now() },
+      prevData: { value: this.valueIndex, shouldRotate: false }
     });
   }
   throwDice() {
-    this.setValue(Math.floor(Math.random() * (this.range.max - this.range.min + 1)) + this.range.min);
+    this.setValueIndex(Math.floor(Math.random() * this.values.length));
   }
   apply(op) {
     super.apply(op);
@@ -46240,19 +46285,22 @@ class Dice extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
-          case "changeValue":
+          case "changeValueIndex":
             if (op.newData.shouldRotate && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 1e4) {
               this.startRotation();
               setTimeout(() => {
                 this.stopRotation();
-                this.value = op.newData.value;
+                this.valueIndex = op.newData.valueIndex;
               }, TIMEOUT);
             } else {
-              this.value = op.newData.value;
+              this.valueIndex = op.newData.valueIndex;
             }
             break;
-          case "changeValuesRange":
-            this.range = op.newData;
+          case "changeValues":
+            if (!op.newData.values[this.valueIndex]) {
+              this.valueIndex = 0;
+            }
+            this.values = op.newData.values;
             break;
         }
         break;

package/dist/esm/index.js

@@ -46070,27 +46070,37 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 2000;
 var defaultDiceData = {
   itemType: "Dice",
+  type: "common",
   backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
   borderStyle: "solid",
   borderWidth: 1,
-  value: 1,
-  range: { min: 1, max: 6 }
+  valueIndex: 0,
+  values: [1, 2, 3, 4, 5, 6]
 };
 
 class Dice extends BaseItem {
   itemType = "Dice";
+  type = "common";
   path;
   subject = new Subject;
   borderWidth = 1;
-  value = 1;
-  range = { min: 1, max: 6 };
+  valueIndex = 0;
+  values = [];
+  renderValues = {};
   animationFrameId;
   drawingContext = null;
-  constructor(board, id = "") {
+  constructor(board, id = "", type, values2) {
     super(board, id, defaultDiceData);
+    if (type) {
+      this.type = type;
+    }
+    if (values2) {
+      this.values = values2;
+    }
+    this.createRenderValues();
     this.transformPath();
     this.transformation.subject.subscribe(() => {
       this.transformPath();
@@ -46106,6 +46116,24 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
+  createRenderValues() {
+    this.values.forEach((value, index2) => {
+      if (typeof value === "number") {
+        this.renderValues[index2] = value;
+      } else {
+        const image2 = conf.documentFactory.createElement("img");
+        image2.src = value;
+        this.renderValues[index2] = image2;
+        image2.onload = () => {
+          this.subject.publish(this);
+        };
+        image2.onerror = () => {
+          this.renderValues[index2] = 1;
+          this.subject.publish(this);
+        };
+      }
+    });
+  }
   render(context) {
     this.drawingContext = context;
     if (this.transformationRenderBlock) {
@@ -46126,11 +46154,25 @@ class Dice extends BaseItem {
     const mbr = this.getMbr();
     const centerX = (mbr.left + mbr.right) / 2;
     const centerY = (mbr.top + mbr.bottom) / 2;
-    context.ctx.fillStyle = "black";
-    context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
-    context.ctx.textAlign = "center";
-    context.ctx.textBaseline = "middle";
-    context.ctx.fillText(String(this.value), centerX, centerY);
+    const valueToRender = this.renderValues[this.valueIndex];
+    if (typeof valueToRender === "number") {
+      context.ctx.fillStyle = "black";
+      context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
+      context.ctx.textAlign = "center";
+      context.ctx.textBaseline = "middle";
+      context.ctx.fillText(String(valueToRender), centerX, centerY);
+    } else if (valueToRender instanceof HTMLImageElement) {
+      const size = this.getHeight() / 3;
+      if (valueToRender.complete && valueToRender.naturalWidth > 0) {
+        context.ctx.drawImage(valueToRender, centerX - size / 2, centerY - size / 2, size, size);
+      } else {
+        context.ctx.fillStyle = "black";
+        context.ctx.font = `bold ${size}px sans-serif`;
+        context.ctx.textAlign = "center";
+        context.ctx.textBaseline = "middle";
+        context.ctx.fillText("?", centerX, centerY);
+      }
+    }
     context.ctx.restore();
   }
   updateMbr() {
@@ -46157,7 +46199,10 @@ class Dice extends BaseItem {
     return !!this.animationFrameId;
   }
   getRange() {
-    return this.range;
+    if (this.type === "custom") {
+      return { min: 1, max: this.values.length };
+    }
+    return { min: this.values[0], max: this.values[this.values.length - 1] };
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
@@ -46198,26 +46243,26 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setValuesRange(range) {
+  setValues(values2) {
     this.emit({
       class: "Dice",
-      method: "changeValuesRange",
+      method: "changeValues",
       item: [this.getId()],
-      newData: range,
-      prevData: this.range
+      newData: { values: values2 },
+      prevData: { values: this.values }
     });
   }
-  setValue(value) {
+  setValueIndex(valueIndex) {
     this.emit({
       class: "Dice",
-      method: "changeValue",
+      method: "changeValueIndex",
       item: [this.getId()],
-      newData: { value, shouldRotate: true, timeStamp: Date.now() },
-      prevData: { value: this.value, shouldRotate: false }
+      newData: { valueIndex, shouldRotate: true, timeStamp: Date.now() },
+      prevData: { value: this.valueIndex, shouldRotate: false }
     });
   }
   throwDice() {
-    this.setValue(Math.floor(Math.random() * (this.range.max - this.range.min + 1)) + this.range.min);
+    this.setValueIndex(Math.floor(Math.random() * this.values.length));
   }
   apply(op) {
     super.apply(op);
@@ -46233,19 +46278,22 @@ class Dice extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
-          case "changeValue":
+          case "changeValueIndex":
             if (op.newData.shouldRotate && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 1e4) {
               this.startRotation();
               setTimeout(() => {
                 this.stopRotation();
-                this.value = op.newData.value;
+                this.valueIndex = op.newData.valueIndex;
               }, TIMEOUT);
             } else {
-              this.value = op.newData.value;
+              this.valueIndex = op.newData.valueIndex;
             }
             break;
-          case "changeValuesRange":
-            this.range = op.newData;
+          case "changeValues":
+            if (!op.newData.values[this.valueIndex]) {
+              this.valueIndex = 0;
+            }
+            this.values = op.newData.values;
             break;
         }
         break;

package/dist/esm/node.js

@@ -48605,27 +48605,37 @@ class AddDice extends ShapeTool {
 var TIMEOUT = 2000;
 var defaultDiceData = {
   itemType: "Dice",
+  type: "common",
   backgroundColor: "#FFFFFF",
   backgroundOpacity: 1,
   borderColor: "#000207",
   borderOpacity: 1,
   borderStyle: "solid",
   borderWidth: 1,
-  value: 1,
-  range: { min: 1, max: 6 }
+  valueIndex: 0,
+  values: [1, 2, 3, 4, 5, 6]
 };
 
 class Dice extends BaseItem {
   itemType = "Dice";
+  type = "common";
   path;
   subject = new Subject;
   borderWidth = 1;
-  value = 1;
-  range = { min: 1, max: 6 };
+  valueIndex = 0;
+  values = [];
+  renderValues = {};
   animationFrameId;
   drawingContext = null;
-  constructor(board, id = "") {
+  constructor(board, id = "", type, values2) {
     super(board, id, defaultDiceData);
+    if (type) {
+      this.type = type;
+    }
+    if (values2) {
+      this.values = values2;
+    }
+    this.createRenderValues();
     this.transformPath();
     this.transformation.subject.subscribe(() => {
       this.transformPath();
@@ -48641,6 +48651,24 @@ class Dice extends BaseItem {
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
   }
+  createRenderValues() {
+    this.values.forEach((value, index2) => {
+      if (typeof value === "number") {
+        this.renderValues[index2] = value;
+      } else {
+        const image2 = conf.documentFactory.createElement("img");
+        image2.src = value;
+        this.renderValues[index2] = image2;
+        image2.onload = () => {
+          this.subject.publish(this);
+        };
+        image2.onerror = () => {
+          this.renderValues[index2] = 1;
+          this.subject.publish(this);
+        };
+      }
+    });
+  }
   render(context) {
     this.drawingContext = context;
     if (this.transformationRenderBlock) {
@@ -48661,11 +48689,25 @@ class Dice extends BaseItem {
     const mbr = this.getMbr();
     const centerX = (mbr.left + mbr.right) / 2;
     const centerY = (mbr.top + mbr.bottom) / 2;
-    context.ctx.fillStyle = "black";
-    context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
-    context.ctx.textAlign = "center";
-    context.ctx.textBaseline = "middle";
-    context.ctx.fillText(String(this.value), centerX, centerY);
+    const valueToRender = this.renderValues[this.valueIndex];
+    if (typeof valueToRender === "number") {
+      context.ctx.fillStyle = "black";
+      context.ctx.font = `bold ${this.getHeight() / 3}px sans-serif`;
+      context.ctx.textAlign = "center";
+      context.ctx.textBaseline = "middle";
+      context.ctx.fillText(String(valueToRender), centerX, centerY);
+    } else if (valueToRender instanceof HTMLImageElement) {
+      const size = this.getHeight() / 3;
+      if (valueToRender.complete && valueToRender.naturalWidth > 0) {
+        context.ctx.drawImage(valueToRender, centerX - size / 2, centerY - size / 2, size, size);
+      } else {
+        context.ctx.fillStyle = "black";
+        context.ctx.font = `bold ${size}px sans-serif`;
+        context.ctx.textAlign = "center";
+        context.ctx.textBaseline = "middle";
+        context.ctx.fillText("?", centerX, centerY);
+      }
+    }
     context.ctx.restore();
   }
   updateMbr() {
@@ -48692,7 +48734,10 @@ class Dice extends BaseItem {
     return !!this.animationFrameId;
   }
   getRange() {
-    return this.range;
+    if (this.type === "custom") {
+      return { min: 1, max: this.values.length };
+    }
+    return { min: this.values[0], max: this.values[this.values.length - 1] };
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
@@ -48733,26 +48778,26 @@ class Dice extends BaseItem {
       prevData: { borderColor: this.borderColor }
     });
   }
-  setValuesRange(range) {
+  setValues(values2) {
     this.emit({
       class: "Dice",
-      method: "changeValuesRange",
+      method: "changeValues",
       item: [this.getId()],
-      newData: range,
-      prevData: this.range
+      newData: { values: values2 },
+      prevData: { values: this.values }
     });
   }
-  setValue(value) {
+  setValueIndex(valueIndex) {
     this.emit({
       class: "Dice",
-      method: "changeValue",
+      method: "changeValueIndex",
       item: [this.getId()],
-      newData: { value, shouldRotate: true, timeStamp: Date.now() },
-      prevData: { value: this.value, shouldRotate: false }
+      newData: { valueIndex, shouldRotate: true, timeStamp: Date.now() },
+      prevData: { value: this.valueIndex, shouldRotate: false }
     });
   }
   throwDice() {
-    this.setValue(Math.floor(Math.random() * (this.range.max - this.range.min + 1)) + this.range.min);
+    this.setValueIndex(Math.floor(Math.random() * this.values.length));
   }
   apply(op) {
     super.apply(op);
@@ -48768,19 +48813,22 @@ class Dice extends BaseItem {
           case "setBorderColor":
             this.applyBorderColor(op.newData.borderColor);
             break;
-          case "changeValue":
+          case "changeValueIndex":
             if (op.newData.shouldRotate && op.newData.timeStamp && Date.now() - op.newData.timeStamp < 1e4) {
               this.startRotation();
               setTimeout(() => {
                 this.stopRotation();
-                this.value = op.newData.value;
+                this.valueIndex = op.newData.valueIndex;
               }, TIMEOUT);
             } else {
-              this.value = op.newData.value;
+              this.valueIndex = op.newData.valueIndex;
             }
             break;
-          case "changeValuesRange":
-            this.range = op.newData;
+          case "changeValues":
+            if (!op.newData.values[this.valueIndex]) {
+              this.valueIndex = 0;
+            }
+            this.values = op.newData.values;
             break;
         }
         break;

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

@@ -5,21 +5,22 @@ import { Board } from "../../../../Board";
 import { DrawingContext } from "../../../DrawingContext";
 import { DocumentFactory } from "../../../../api/DocumentFactory";
 import { DiceOperation } from "./DiceOperation";
+export type DiceType = "common" | "custom";
 export declare const defaultDiceData: BaseItemData;
 export declare class Dice extends BaseItem {
     readonly itemType = "Dice";
+    private type;
     private path;
     readonly subject: Subject<Dice>;
     private borderWidth;
-    value: number;
-    range: {
-        min: number;
-        max: number;
-    };
+    valueIndex: number;
+    values: number[] | string[];
+    renderValues: Record<number, number | HTMLImageElement>;
     private animationFrameId?;
     drawingContext: DrawingContext | null;
-    constructor(board: Board, id?: string);
+    constructor(board: Board, id?: string, type?: DiceType, values?: number[] | string[]);
     private transformPath;
+    createRenderValues(): void;
     render(context: DrawingContext): void;
     updateMbr(): void;
     getPath(): Path;
@@ -36,11 +37,8 @@ export declare class Dice extends BaseItem {
     setBorderWidth(borderWidth: BorderWidth): void;
     private applyBorderColor;
     setBorderColor(borderColor: string): void;
-    setValuesRange(range: {
-        min: number;
-        max: number;
-    }): void;
-    setValue(value: number): void;
+    setValues(values: number[]): void;
+    setValueIndex(valueIndex: number): void;
     throwDice(): void;
     apply(op: DiceOperation): void;
     startRotation(): void;

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

@@ -1,19 +1,18 @@
 import { BaseOperation } from "Events/EventsOperations";
-export type DiceOperation = ChangeValue | ChangeValuesRange | SetBackgroundColor | SetBorderColor | SetBorderWidth;
-interface ChangeValue extends BaseOperation<{
-    value: number;
+export type DiceOperation = ChangeValueIndex | ChangeValues | SetBackgroundColor | SetBorderColor | SetBorderWidth;
+interface ChangeValueIndex extends BaseOperation<{
+    valueIndex: number;
     shouldRotate: boolean;
     timeStamp?: number;
 }> {
     class: "Dice";
-    method: "changeValue";
+    method: "changeValueIndex";
 }
-interface ChangeValuesRange extends BaseOperation<{
-    min: number;
-    max: number;
+interface ChangeValues extends BaseOperation<{
+    values: number[];
 }> {
     class: "Dice";
-    method: "changeValuesRange";
+    method: "changeValues";
 }
 interface SetBackgroundColor extends BaseOperation<{
     backgroundColor: string;

package/package.json

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