microboard-temp 0.4.14 → 0.4.16

package/dist/esm/browser.js

@@ -46072,6 +46072,211 @@ registerItem({
   item: Deck,
   defaultData: defaultDeckData
 });
+// 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: ShapeTool }
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",
@@ -56181,6 +56386,7 @@ export {
   EditorContainer,
   DrawingContext,
   Drawing,
+  Dice,
   DefaultTransformationData,
   DefaultShapeData,
   Deck,

package/dist/esm/index.js

@@ -46065,6 +46065,211 @@ registerItem({
   item: Deck,
   defaultData: defaultDeckData
 });
+// 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: ShapeTool }
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",
@@ -56079,6 +56284,7 @@ export {
   EditorContainer,
   DrawingContext,
   Drawing,
+  Dice,
   DefaultTransformationData,
   DefaultShapeData,
   Deck,

package/dist/esm/node.js

@@ -48600,6 +48600,211 @@ registerItem({
   item: Deck,
   defaultData: defaultDeckData
 });
+// 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: ShapeTool }
+});
 // src/Pointer/Cursor.ts
 var defaultCursors = [
   "default",
@@ -58714,6 +58919,7 @@ export {
   EditorContainer,
   DrawingContext,
   Drawing,
+  Dice,
   DefaultTransformationData,
   DefaultShapeData,
   Deck,

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

@@ -0,0 +1,42 @@
+import { BaseItem, BaseItemData, SerializedItemData } from "../../../BaseItem/BaseItem";
+import { BorderWidth, Path } from "../../../Path";
+import { Subject } from "../../../../Subject";
+import { Board } from "../../../../Board";
+import { DrawingContext } from "../../../DrawingContext";
+import { DocumentFactory } from "../../../../api/DocumentFactory";
+import { DiceOperation } from "./DiceOperation";
+export declare const defaultDiceData: BaseItemData;
+export declare class Dice extends BaseItem {
+    readonly itemType = "Dice";
+    private path;
+    readonly subject: Subject<Dice>;
+    private borderWidth;
+    isRotating: boolean;
+    value: number;
+    range: {
+        min: number;
+        max: number;
+    };
+    constructor(board: Board, id?: string);
+    private transformPath;
+    render(context: DrawingContext): void;
+    updateMbr(): void;
+    getPath(): Path;
+    renderHTML(documentFactory: DocumentFactory): HTMLElement;
+    deserialize(data: SerializedItemData): this;
+    isClosed(): boolean;
+    private applyBackgroundColor;
+    setBackgroundColor(backgroundColor: string): void;
+    private applyBorderWidth;
+    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;
+    throwDice(): void;
+    apply(op: DiceOperation): void;
+}