microboard-temp 0.4.15 → 0.4.17

package/dist/cjs/browser.js

@@ -744,6 +744,7 @@ __export(exports_browser, {
   EditorContainer: () => EditorContainer,
   DrawingContext: () => DrawingContext,
   Drawing: () => Drawing,
+  Dice: () => Dice,
   DefaultTransformationData: () => DefaultTransformationData,
   DefaultShapeData: () => DefaultShapeData,
   Deck: () => Deck,
@@ -46221,6 +46222,218 @@ 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",
+  backgroundOpacity: 1,
+  borderColor: "#000207",
+  borderOpacity: 1,
+  borderStyle: "solid",
+  borderWidth: 1,
+  value: 1,
+  range: { min: 1, max: 6 }
+};
+
+class Dice extends BaseItem {
+  itemType = "Dice";
+  path;
+  subject = new Subject;
+  borderWidth = 1;
+  isRotating = false;
+  value = 1;
+  range = { min: 1, max: 6 };
+  constructor(board, id = "") {
+    super(board, id, defaultDiceData);
+    this.transformPath();
+    this.transformation.subject.subscribe(() => {
+      this.transformPath();
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.updateMbr();
+  }
+  transformPath() {
+    this.path = createRoundedRectanglePath(this).copy();
+    this.path.transform(this.transformation.matrix);
+    this.path.setBackgroundColor(this.backgroundColor);
+    this.path.setBorderColor(this.borderColor);
+    this.path.setBorderWidth(this.borderWidth);
+  }
+  render(context) {
+    if (this.transformationRenderBlock) {
+      return;
+    }
+    context.ctx.save();
+    if (this.isRotating) {
+      const now = Date.now();
+      const angle = now % 1000 / 1000 * 2 * Math.PI;
+      const mbr2 = this.getMbr();
+      const centerX2 = (mbr2.left + mbr2.right) / 2;
+      const centerY2 = (mbr2.top + mbr2.bottom) / 2;
+      context.ctx.translate(centerX2, centerY2);
+      context.ctx.rotate(angle);
+      context.ctx.translate(-centerX2, -centerY2);
+    }
+    this.path.render(context);
+    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);
+    if (this.getLinkTo()) {
+      const { top, right } = this.getMbr();
+      this.linkTo.render(context, top, right, this.board.camera.getScale());
+    }
+    context.ctx.restore();
+  }
+  updateMbr() {
+    const { left, top, right, bottom } = this.path.getMbr();
+    this.left = left;
+    this.right = right;
+    this.top = top;
+    this.bottom = bottom;
+  }
+  getPath() {
+    return this.path.copy();
+  }
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("dice-item");
+    return div;
+  }
+  deserialize(data) {
+    super.deserialize(data);
+    this.transformPath();
+    this.subject.publish(this);
+    return this;
+  }
+  isClosed() {
+    return true;
+  }
+  applyBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    this.path.setBackgroundColor(backgroundColor);
+  }
+  setBackgroundColor(backgroundColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBackgroundColor",
+      item: [this.getId()],
+      newData: { backgroundColor },
+      prevData: { backgroundColor: this.backgroundColor }
+    });
+  }
+  applyBorderWidth(borderWidth) {
+    this.borderWidth = borderWidth;
+    this.path.setBorderWidth(borderWidth);
+  }
+  setBorderWidth(borderWidth) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderWidth",
+      item: [this.getId()],
+      newData: { borderWidth },
+      prevData: { borderWidth: this.borderWidth }
+    });
+  }
+  applyBorderColor(borderColor) {
+    this.borderColor = borderColor;
+    this.path.setBorderColor(borderColor);
+  }
+  setBorderColor(borderColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderColor",
+      item: [this.getId()],
+      newData: { borderColor },
+      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",
+      method: "changeValuesRange",
+      item: [this.getId()],
+      newData: range,
+      prevData: this.range
+    });
+  }
+  setValue(value) {
+    this.emit({
+      class: "Dice",
+      method: "changeValue",
+      item: [this.getId()],
+      newData: { value },
+      prevData: { value: this.value }
+    });
+  }
+  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) {
+    super.apply(op);
+    switch (op.class) {
+      case "Dice":
+        switch (op.method) {
+          case "setBorderWidth":
+            this.applyBorderWidth(op.newData.borderWidth);
+            break;
+          case "setBackgroundColor":
+            this.applyBackgroundColor(op.newData.backgroundColor);
+            break;
+          case "setBorderColor":
+            this.applyBorderColor(op.newData.borderColor);
+            break;
+          case "setIsRotating":
+            this.isRotating = op.newData.isRotating;
+            if (op.newData.isRotating) {
+              setTimeout(() => {
+                this.isRotating = false;
+              }, TIMEOUT);
+            }
+            break;
+          case "changeValue":
+            this.value = op.newData.value;
+            this.isRotating = false;
+            break;
+          case "changeValuesRange":
+            this.range = op.newData;
+            break;
+        }
+        break;
+    }
+    this.subject.publish(this);
+  }
+}
+registerItem({
+  item: Dice,
+  defaultData: defaultDiceData,
+  toolData: { name: "AddDice", tool: AddDice }
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",

package/dist/cjs/index.js

@@ -744,6 +744,7 @@ __export(exports_src, {
   EditorContainer: () => EditorContainer,
   DrawingContext: () => DrawingContext,
   Drawing: () => Drawing,
+  Dice: () => Dice,
   DefaultTransformationData: () => DefaultTransformationData,
   DefaultShapeData: () => DefaultShapeData,
   Deck: () => Deck,
@@ -46221,6 +46222,218 @@ 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",
+  backgroundOpacity: 1,
+  borderColor: "#000207",
+  borderOpacity: 1,
+  borderStyle: "solid",
+  borderWidth: 1,
+  value: 1,
+  range: { min: 1, max: 6 }
+};
+
+class Dice extends BaseItem {
+  itemType = "Dice";
+  path;
+  subject = new Subject;
+  borderWidth = 1;
+  isRotating = false;
+  value = 1;
+  range = { min: 1, max: 6 };
+  constructor(board, id = "") {
+    super(board, id, defaultDiceData);
+    this.transformPath();
+    this.transformation.subject.subscribe(() => {
+      this.transformPath();
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.updateMbr();
+  }
+  transformPath() {
+    this.path = createRoundedRectanglePath(this).copy();
+    this.path.transform(this.transformation.matrix);
+    this.path.setBackgroundColor(this.backgroundColor);
+    this.path.setBorderColor(this.borderColor);
+    this.path.setBorderWidth(this.borderWidth);
+  }
+  render(context) {
+    if (this.transformationRenderBlock) {
+      return;
+    }
+    context.ctx.save();
+    if (this.isRotating) {
+      const now = Date.now();
+      const angle = now % 1000 / 1000 * 2 * Math.PI;
+      const mbr2 = this.getMbr();
+      const centerX2 = (mbr2.left + mbr2.right) / 2;
+      const centerY2 = (mbr2.top + mbr2.bottom) / 2;
+      context.ctx.translate(centerX2, centerY2);
+      context.ctx.rotate(angle);
+      context.ctx.translate(-centerX2, -centerY2);
+    }
+    this.path.render(context);
+    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);
+    if (this.getLinkTo()) {
+      const { top, right } = this.getMbr();
+      this.linkTo.render(context, top, right, this.board.camera.getScale());
+    }
+    context.ctx.restore();
+  }
+  updateMbr() {
+    const { left, top, right, bottom } = this.path.getMbr();
+    this.left = left;
+    this.right = right;
+    this.top = top;
+    this.bottom = bottom;
+  }
+  getPath() {
+    return this.path.copy();
+  }
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("dice-item");
+    return div;
+  }
+  deserialize(data) {
+    super.deserialize(data);
+    this.transformPath();
+    this.subject.publish(this);
+    return this;
+  }
+  isClosed() {
+    return true;
+  }
+  applyBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    this.path.setBackgroundColor(backgroundColor);
+  }
+  setBackgroundColor(backgroundColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBackgroundColor",
+      item: [this.getId()],
+      newData: { backgroundColor },
+      prevData: { backgroundColor: this.backgroundColor }
+    });
+  }
+  applyBorderWidth(borderWidth) {
+    this.borderWidth = borderWidth;
+    this.path.setBorderWidth(borderWidth);
+  }
+  setBorderWidth(borderWidth) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderWidth",
+      item: [this.getId()],
+      newData: { borderWidth },
+      prevData: { borderWidth: this.borderWidth }
+    });
+  }
+  applyBorderColor(borderColor) {
+    this.borderColor = borderColor;
+    this.path.setBorderColor(borderColor);
+  }
+  setBorderColor(borderColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderColor",
+      item: [this.getId()],
+      newData: { borderColor },
+      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",
+      method: "changeValuesRange",
+      item: [this.getId()],
+      newData: range,
+      prevData: this.range
+    });
+  }
+  setValue(value) {
+    this.emit({
+      class: "Dice",
+      method: "changeValue",
+      item: [this.getId()],
+      newData: { value },
+      prevData: { value: this.value }
+    });
+  }
+  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) {
+    super.apply(op);
+    switch (op.class) {
+      case "Dice":
+        switch (op.method) {
+          case "setBorderWidth":
+            this.applyBorderWidth(op.newData.borderWidth);
+            break;
+          case "setBackgroundColor":
+            this.applyBackgroundColor(op.newData.backgroundColor);
+            break;
+          case "setBorderColor":
+            this.applyBorderColor(op.newData.borderColor);
+            break;
+          case "setIsRotating":
+            this.isRotating = op.newData.isRotating;
+            if (op.newData.isRotating) {
+              setTimeout(() => {
+                this.isRotating = false;
+              }, TIMEOUT);
+            }
+            break;
+          case "changeValue":
+            this.value = op.newData.value;
+            this.isRotating = false;
+            break;
+          case "changeValuesRange":
+            this.range = op.newData;
+            break;
+        }
+        break;
+    }
+    this.subject.publish(this);
+  }
+}
+registerItem({
+  item: Dice,
+  defaultData: defaultDiceData,
+  toolData: { name: "AddDice", tool: AddDice }
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",

package/dist/cjs/node.js

@@ -1781,6 +1781,7 @@ __export(exports_node, {
   EditorContainer: () => EditorContainer,
   DrawingContext: () => DrawingContext,
   Drawing: () => Drawing,
+  Dice: () => Dice,
   DefaultTransformationData: () => DefaultTransformationData,
   DefaultShapeData: () => DefaultShapeData,
   Deck: () => Deck,
@@ -48761,6 +48762,218 @@ 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",
+  backgroundOpacity: 1,
+  borderColor: "#000207",
+  borderOpacity: 1,
+  borderStyle: "solid",
+  borderWidth: 1,
+  value: 1,
+  range: { min: 1, max: 6 }
+};
+
+class Dice extends BaseItem {
+  itemType = "Dice";
+  path;
+  subject = new Subject;
+  borderWidth = 1;
+  isRotating = false;
+  value = 1;
+  range = { min: 1, max: 6 };
+  constructor(board, id = "") {
+    super(board, id, defaultDiceData);
+    this.transformPath();
+    this.transformation.subject.subscribe(() => {
+      this.transformPath();
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.updateMbr();
+  }
+  transformPath() {
+    this.path = createRoundedRectanglePath(this).copy();
+    this.path.transform(this.transformation.matrix);
+    this.path.setBackgroundColor(this.backgroundColor);
+    this.path.setBorderColor(this.borderColor);
+    this.path.setBorderWidth(this.borderWidth);
+  }
+  render(context) {
+    if (this.transformationRenderBlock) {
+      return;
+    }
+    context.ctx.save();
+    if (this.isRotating) {
+      const now = Date.now();
+      const angle = now % 1000 / 1000 * 2 * Math.PI;
+      const mbr2 = this.getMbr();
+      const centerX2 = (mbr2.left + mbr2.right) / 2;
+      const centerY2 = (mbr2.top + mbr2.bottom) / 2;
+      context.ctx.translate(centerX2, centerY2);
+      context.ctx.rotate(angle);
+      context.ctx.translate(-centerX2, -centerY2);
+    }
+    this.path.render(context);
+    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);
+    if (this.getLinkTo()) {
+      const { top, right } = this.getMbr();
+      this.linkTo.render(context, top, right, this.board.camera.getScale());
+    }
+    context.ctx.restore();
+  }
+  updateMbr() {
+    const { left, top, right, bottom } = this.path.getMbr();
+    this.left = left;
+    this.right = right;
+    this.top = top;
+    this.bottom = bottom;
+  }
+  getPath() {
+    return this.path.copy();
+  }
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("dice-item");
+    return div;
+  }
+  deserialize(data) {
+    super.deserialize(data);
+    this.transformPath();
+    this.subject.publish(this);
+    return this;
+  }
+  isClosed() {
+    return true;
+  }
+  applyBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    this.path.setBackgroundColor(backgroundColor);
+  }
+  setBackgroundColor(backgroundColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBackgroundColor",
+      item: [this.getId()],
+      newData: { backgroundColor },
+      prevData: { backgroundColor: this.backgroundColor }
+    });
+  }
+  applyBorderWidth(borderWidth) {
+    this.borderWidth = borderWidth;
+    this.path.setBorderWidth(borderWidth);
+  }
+  setBorderWidth(borderWidth) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderWidth",
+      item: [this.getId()],
+      newData: { borderWidth },
+      prevData: { borderWidth: this.borderWidth }
+    });
+  }
+  applyBorderColor(borderColor) {
+    this.borderColor = borderColor;
+    this.path.setBorderColor(borderColor);
+  }
+  setBorderColor(borderColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderColor",
+      item: [this.getId()],
+      newData: { borderColor },
+      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",
+      method: "changeValuesRange",
+      item: [this.getId()],
+      newData: range,
+      prevData: this.range
+    });
+  }
+  setValue(value) {
+    this.emit({
+      class: "Dice",
+      method: "changeValue",
+      item: [this.getId()],
+      newData: { value },
+      prevData: { value: this.value }
+    });
+  }
+  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) {
+    super.apply(op);
+    switch (op.class) {
+      case "Dice":
+        switch (op.method) {
+          case "setBorderWidth":
+            this.applyBorderWidth(op.newData.borderWidth);
+            break;
+          case "setBackgroundColor":
+            this.applyBackgroundColor(op.newData.backgroundColor);
+            break;
+          case "setBorderColor":
+            this.applyBorderColor(op.newData.borderColor);
+            break;
+          case "setIsRotating":
+            this.isRotating = op.newData.isRotating;
+            if (op.newData.isRotating) {
+              setTimeout(() => {
+                this.isRotating = false;
+              }, TIMEOUT);
+            }
+            break;
+          case "changeValue":
+            this.value = op.newData.value;
+            this.isRotating = false;
+            break;
+          case "changeValuesRange":
+            this.range = op.newData;
+            break;
+        }
+        break;
+    }
+    this.subject.publish(this);
+  }
+}
+registerItem({
+  item: Dice,
+  defaultData: defaultDiceData,
+  toolData: { name: "AddDice", tool: AddDice }
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",

package/dist/esm/browser.js

@@ -46072,6 +46072,218 @@ 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",
+  backgroundOpacity: 1,
+  borderColor: "#000207",
+  borderOpacity: 1,
+  borderStyle: "solid",
+  borderWidth: 1,
+  value: 1,
+  range: { min: 1, max: 6 }
+};
+
+class Dice extends BaseItem {
+  itemType = "Dice";
+  path;
+  subject = new Subject;
+  borderWidth = 1;
+  isRotating = false;
+  value = 1;
+  range = { min: 1, max: 6 };
+  constructor(board, id = "") {
+    super(board, id, defaultDiceData);
+    this.transformPath();
+    this.transformation.subject.subscribe(() => {
+      this.transformPath();
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.updateMbr();
+  }
+  transformPath() {
+    this.path = createRoundedRectanglePath(this).copy();
+    this.path.transform(this.transformation.matrix);
+    this.path.setBackgroundColor(this.backgroundColor);
+    this.path.setBorderColor(this.borderColor);
+    this.path.setBorderWidth(this.borderWidth);
+  }
+  render(context) {
+    if (this.transformationRenderBlock) {
+      return;
+    }
+    context.ctx.save();
+    if (this.isRotating) {
+      const now = Date.now();
+      const angle = now % 1000 / 1000 * 2 * Math.PI;
+      const mbr2 = this.getMbr();
+      const centerX2 = (mbr2.left + mbr2.right) / 2;
+      const centerY2 = (mbr2.top + mbr2.bottom) / 2;
+      context.ctx.translate(centerX2, centerY2);
+      context.ctx.rotate(angle);
+      context.ctx.translate(-centerX2, -centerY2);
+    }
+    this.path.render(context);
+    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);
+    if (this.getLinkTo()) {
+      const { top, right } = this.getMbr();
+      this.linkTo.render(context, top, right, this.board.camera.getScale());
+    }
+    context.ctx.restore();
+  }
+  updateMbr() {
+    const { left, top, right, bottom } = this.path.getMbr();
+    this.left = left;
+    this.right = right;
+    this.top = top;
+    this.bottom = bottom;
+  }
+  getPath() {
+    return this.path.copy();
+  }
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("dice-item");
+    return div;
+  }
+  deserialize(data) {
+    super.deserialize(data);
+    this.transformPath();
+    this.subject.publish(this);
+    return this;
+  }
+  isClosed() {
+    return true;
+  }
+  applyBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    this.path.setBackgroundColor(backgroundColor);
+  }
+  setBackgroundColor(backgroundColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBackgroundColor",
+      item: [this.getId()],
+      newData: { backgroundColor },
+      prevData: { backgroundColor: this.backgroundColor }
+    });
+  }
+  applyBorderWidth(borderWidth) {
+    this.borderWidth = borderWidth;
+    this.path.setBorderWidth(borderWidth);
+  }
+  setBorderWidth(borderWidth) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderWidth",
+      item: [this.getId()],
+      newData: { borderWidth },
+      prevData: { borderWidth: this.borderWidth }
+    });
+  }
+  applyBorderColor(borderColor) {
+    this.borderColor = borderColor;
+    this.path.setBorderColor(borderColor);
+  }
+  setBorderColor(borderColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderColor",
+      item: [this.getId()],
+      newData: { borderColor },
+      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",
+      method: "changeValuesRange",
+      item: [this.getId()],
+      newData: range,
+      prevData: this.range
+    });
+  }
+  setValue(value) {
+    this.emit({
+      class: "Dice",
+      method: "changeValue",
+      item: [this.getId()],
+      newData: { value },
+      prevData: { value: this.value }
+    });
+  }
+  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) {
+    super.apply(op);
+    switch (op.class) {
+      case "Dice":
+        switch (op.method) {
+          case "setBorderWidth":
+            this.applyBorderWidth(op.newData.borderWidth);
+            break;
+          case "setBackgroundColor":
+            this.applyBackgroundColor(op.newData.backgroundColor);
+            break;
+          case "setBorderColor":
+            this.applyBorderColor(op.newData.borderColor);
+            break;
+          case "setIsRotating":
+            this.isRotating = op.newData.isRotating;
+            if (op.newData.isRotating) {
+              setTimeout(() => {
+                this.isRotating = false;
+              }, TIMEOUT);
+            }
+            break;
+          case "changeValue":
+            this.value = op.newData.value;
+            this.isRotating = false;
+            break;
+          case "changeValuesRange":
+            this.range = op.newData;
+            break;
+        }
+        break;
+    }
+    this.subject.publish(this);
+  }
+}
+registerItem({
+  item: Dice,
+  defaultData: defaultDiceData,
+  toolData: { name: "AddDice", tool: AddDice }
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",
@@ -56181,6 +56393,7 @@ export {
   EditorContainer,
   DrawingContext,
   Drawing,
+  Dice,
   DefaultTransformationData,
   DefaultShapeData,
   Deck,

package/dist/esm/index.js

@@ -46065,6 +46065,218 @@ 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",
+  backgroundOpacity: 1,
+  borderColor: "#000207",
+  borderOpacity: 1,
+  borderStyle: "solid",
+  borderWidth: 1,
+  value: 1,
+  range: { min: 1, max: 6 }
+};
+
+class Dice extends BaseItem {
+  itemType = "Dice";
+  path;
+  subject = new Subject;
+  borderWidth = 1;
+  isRotating = false;
+  value = 1;
+  range = { min: 1, max: 6 };
+  constructor(board, id = "") {
+    super(board, id, defaultDiceData);
+    this.transformPath();
+    this.transformation.subject.subscribe(() => {
+      this.transformPath();
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.updateMbr();
+  }
+  transformPath() {
+    this.path = createRoundedRectanglePath(this).copy();
+    this.path.transform(this.transformation.matrix);
+    this.path.setBackgroundColor(this.backgroundColor);
+    this.path.setBorderColor(this.borderColor);
+    this.path.setBorderWidth(this.borderWidth);
+  }
+  render(context) {
+    if (this.transformationRenderBlock) {
+      return;
+    }
+    context.ctx.save();
+    if (this.isRotating) {
+      const now = Date.now();
+      const angle = now % 1000 / 1000 * 2 * Math.PI;
+      const mbr2 = this.getMbr();
+      const centerX2 = (mbr2.left + mbr2.right) / 2;
+      const centerY2 = (mbr2.top + mbr2.bottom) / 2;
+      context.ctx.translate(centerX2, centerY2);
+      context.ctx.rotate(angle);
+      context.ctx.translate(-centerX2, -centerY2);
+    }
+    this.path.render(context);
+    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);
+    if (this.getLinkTo()) {
+      const { top, right } = this.getMbr();
+      this.linkTo.render(context, top, right, this.board.camera.getScale());
+    }
+    context.ctx.restore();
+  }
+  updateMbr() {
+    const { left, top, right, bottom } = this.path.getMbr();
+    this.left = left;
+    this.right = right;
+    this.top = top;
+    this.bottom = bottom;
+  }
+  getPath() {
+    return this.path.copy();
+  }
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("dice-item");
+    return div;
+  }
+  deserialize(data) {
+    super.deserialize(data);
+    this.transformPath();
+    this.subject.publish(this);
+    return this;
+  }
+  isClosed() {
+    return true;
+  }
+  applyBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    this.path.setBackgroundColor(backgroundColor);
+  }
+  setBackgroundColor(backgroundColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBackgroundColor",
+      item: [this.getId()],
+      newData: { backgroundColor },
+      prevData: { backgroundColor: this.backgroundColor }
+    });
+  }
+  applyBorderWidth(borderWidth) {
+    this.borderWidth = borderWidth;
+    this.path.setBorderWidth(borderWidth);
+  }
+  setBorderWidth(borderWidth) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderWidth",
+      item: [this.getId()],
+      newData: { borderWidth },
+      prevData: { borderWidth: this.borderWidth }
+    });
+  }
+  applyBorderColor(borderColor) {
+    this.borderColor = borderColor;
+    this.path.setBorderColor(borderColor);
+  }
+  setBorderColor(borderColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderColor",
+      item: [this.getId()],
+      newData: { borderColor },
+      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",
+      method: "changeValuesRange",
+      item: [this.getId()],
+      newData: range,
+      prevData: this.range
+    });
+  }
+  setValue(value) {
+    this.emit({
+      class: "Dice",
+      method: "changeValue",
+      item: [this.getId()],
+      newData: { value },
+      prevData: { value: this.value }
+    });
+  }
+  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) {
+    super.apply(op);
+    switch (op.class) {
+      case "Dice":
+        switch (op.method) {
+          case "setBorderWidth":
+            this.applyBorderWidth(op.newData.borderWidth);
+            break;
+          case "setBackgroundColor":
+            this.applyBackgroundColor(op.newData.backgroundColor);
+            break;
+          case "setBorderColor":
+            this.applyBorderColor(op.newData.borderColor);
+            break;
+          case "setIsRotating":
+            this.isRotating = op.newData.isRotating;
+            if (op.newData.isRotating) {
+              setTimeout(() => {
+                this.isRotating = false;
+              }, TIMEOUT);
+            }
+            break;
+          case "changeValue":
+            this.value = op.newData.value;
+            this.isRotating = false;
+            break;
+          case "changeValuesRange":
+            this.range = op.newData;
+            break;
+        }
+        break;
+    }
+    this.subject.publish(this);
+  }
+}
+registerItem({
+  item: Dice,
+  defaultData: defaultDiceData,
+  toolData: { name: "AddDice", tool: AddDice }
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",
@@ -56079,6 +56291,7 @@ export {
   EditorContainer,
   DrawingContext,
   Drawing,
+  Dice,
   DefaultTransformationData,
   DefaultShapeData,
   Deck,

package/dist/esm/node.js

@@ -48600,6 +48600,218 @@ 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",
+  backgroundOpacity: 1,
+  borderColor: "#000207",
+  borderOpacity: 1,
+  borderStyle: "solid",
+  borderWidth: 1,
+  value: 1,
+  range: { min: 1, max: 6 }
+};
+
+class Dice extends BaseItem {
+  itemType = "Dice";
+  path;
+  subject = new Subject;
+  borderWidth = 1;
+  isRotating = false;
+  value = 1;
+  range = { min: 1, max: 6 };
+  constructor(board, id = "") {
+    super(board, id, defaultDiceData);
+    this.transformPath();
+    this.transformation.subject.subscribe(() => {
+      this.transformPath();
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.updateMbr();
+  }
+  transformPath() {
+    this.path = createRoundedRectanglePath(this).copy();
+    this.path.transform(this.transformation.matrix);
+    this.path.setBackgroundColor(this.backgroundColor);
+    this.path.setBorderColor(this.borderColor);
+    this.path.setBorderWidth(this.borderWidth);
+  }
+  render(context) {
+    if (this.transformationRenderBlock) {
+      return;
+    }
+    context.ctx.save();
+    if (this.isRotating) {
+      const now = Date.now();
+      const angle = now % 1000 / 1000 * 2 * Math.PI;
+      const mbr2 = this.getMbr();
+      const centerX2 = (mbr2.left + mbr2.right) / 2;
+      const centerY2 = (mbr2.top + mbr2.bottom) / 2;
+      context.ctx.translate(centerX2, centerY2);
+      context.ctx.rotate(angle);
+      context.ctx.translate(-centerX2, -centerY2);
+    }
+    this.path.render(context);
+    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);
+    if (this.getLinkTo()) {
+      const { top, right } = this.getMbr();
+      this.linkTo.render(context, top, right, this.board.camera.getScale());
+    }
+    context.ctx.restore();
+  }
+  updateMbr() {
+    const { left, top, right, bottom } = this.path.getMbr();
+    this.left = left;
+    this.right = right;
+    this.top = top;
+    this.bottom = bottom;
+  }
+  getPath() {
+    return this.path.copy();
+  }
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("dice-item");
+    return div;
+  }
+  deserialize(data) {
+    super.deserialize(data);
+    this.transformPath();
+    this.subject.publish(this);
+    return this;
+  }
+  isClosed() {
+    return true;
+  }
+  applyBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    this.path.setBackgroundColor(backgroundColor);
+  }
+  setBackgroundColor(backgroundColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBackgroundColor",
+      item: [this.getId()],
+      newData: { backgroundColor },
+      prevData: { backgroundColor: this.backgroundColor }
+    });
+  }
+  applyBorderWidth(borderWidth) {
+    this.borderWidth = borderWidth;
+    this.path.setBorderWidth(borderWidth);
+  }
+  setBorderWidth(borderWidth) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderWidth",
+      item: [this.getId()],
+      newData: { borderWidth },
+      prevData: { borderWidth: this.borderWidth }
+    });
+  }
+  applyBorderColor(borderColor) {
+    this.borderColor = borderColor;
+    this.path.setBorderColor(borderColor);
+  }
+  setBorderColor(borderColor) {
+    this.emit({
+      class: "Dice",
+      method: "setBorderColor",
+      item: [this.getId()],
+      newData: { borderColor },
+      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",
+      method: "changeValuesRange",
+      item: [this.getId()],
+      newData: range,
+      prevData: this.range
+    });
+  }
+  setValue(value) {
+    this.emit({
+      class: "Dice",
+      method: "changeValue",
+      item: [this.getId()],
+      newData: { value },
+      prevData: { value: this.value }
+    });
+  }
+  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) {
+    super.apply(op);
+    switch (op.class) {
+      case "Dice":
+        switch (op.method) {
+          case "setBorderWidth":
+            this.applyBorderWidth(op.newData.borderWidth);
+            break;
+          case "setBackgroundColor":
+            this.applyBackgroundColor(op.newData.backgroundColor);
+            break;
+          case "setBorderColor":
+            this.applyBorderColor(op.newData.borderColor);
+            break;
+          case "setIsRotating":
+            this.isRotating = op.newData.isRotating;
+            if (op.newData.isRotating) {
+              setTimeout(() => {
+                this.isRotating = false;
+              }, TIMEOUT);
+            }
+            break;
+          case "changeValue":
+            this.value = op.newData.value;
+            this.isRotating = false;
+            break;
+          case "changeValuesRange":
+            this.range = op.newData;
+            break;
+        }
+        break;
+    }
+    this.subject.publish(this);
+  }
+}
+registerItem({
+  item: Dice,
+  defaultData: defaultDiceData,
+  toolData: { name: "AddDice", tool: AddDice }
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",
@@ -58714,6 +58926,7 @@ export {
   EditorContainer,
   DrawingContext,
   Drawing,
+  Dice,
   DefaultTransformationData,
   DefaultShapeData,
   Deck,

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/index.d.ts

@@ -0,0 +1 @@
+export { Dice } from './Dice';

package/dist/types/Items/index.d.ts

@@ -25,5 +25,6 @@ export { Star } from "./Examples/Star";
 export { Counter } from "./Examples/Counter";
 export { Card } from "./Examples/CardGame/Card";
 export { Deck } from "./Examples/CardGame/Deck";
+export { Dice } from "./Examples/CardGame/Dice";
 export { Comment } from "./Comment";
 export type { HorisontalAlignment, VerticalAlignment } from "./Alignment";

package/package.json

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