microboard-temp 0.5.17 → 0.5.19

package/dist/esm/node.js

@@ -50164,8 +50164,6 @@ class Card extends BaseItem {
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
-    this.face.crossOrigin = "anonymous";
-    this.backside.crossOrigin = "anonymous";
     this.face.src = this.faceUrl;
     this.backside.src = this.backsideUrl;
     this.face.onload = () => {
@@ -50445,15 +50443,21 @@ class Deck extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
-    if (!this.cachedCanvas || !this.cachedCanvas.width || !this.cachedCanvas.height) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    if (!topCard) {
       return div;
     }
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    div.style.backgroundImage = `url(${this.cachedCanvas.toDataURL("image/png")})`;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
+    const topCardElement = topCard.renderHTML(documentFactory);
+    div.appendChild(topCardElement);
+    const offset = ((this.index?.list().length || 0) - 1) * 2;
+    topCardElement.style.transform = `translate(${offset}px, ${0}px) scale(1, 1)`;
     div.id = this.getId();
     div.style.width = `${this.getWidth()}px`;
     div.style.height = `${this.getHeight()}px`;
+    div.style.boxShadow = `${offset}px 0px 0px 0px rgba(34, 60, 80, 0.74) inset`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -50909,6 +50913,41 @@ class Dice extends BaseItem {
       this.drawingContext = null;
     }
   }
+  renderHTML(documentFactory) {
+    const div = super.renderHTML(documentFactory);
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const mbr = this.getMbr();
+    const width2 = mbr.getWidth();
+    const height3 = mbr.getHeight();
+    const unscaledWidth = width2 / scaleX;
+    const unscaledHeight = height3 / scaleY;
+    const svg3 = documentFactory.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg3.setAttribute("width", `${unscaledWidth}px`);
+    svg3.setAttribute("height", `${unscaledHeight}px`);
+    svg3.setAttribute("viewBox", `0 0 ${unscaledWidth} ${unscaledHeight}`);
+    svg3.setAttribute("transform-origin", "0 0");
+    svg3.setAttribute("transform", `scale(${1 / scaleX}, ${1 / scaleY})`);
+    svg3.setAttribute("style", "position: absolute; overflow: visible;");
+    const pathElement = Shapes["RoundedRectangle"].path.copy().renderHTML(documentFactory);
+    const paths = Array.isArray(pathElement) ? pathElement : [pathElement];
+    paths.forEach((element3) => {
+      element3.setAttribute("fill", this.backgroundColor);
+      element3.setAttribute("stroke", this.borderColor);
+      element3.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
+      element3.setAttribute("stroke-width", this.borderWidth.toString());
+      element3.setAttribute("transform-origin", "0 0");
+      element3.setAttribute("transform", `scale(${scaleX}, ${scaleY})`);
+    });
+    svg3.append(...paths);
+    div.appendChild(svg3);
+    div.id = this.getId();
+    div.style.width = unscaledWidth + "px";
+    div.style.height = unscaledHeight + "px";
+    div.style.transformOrigin = "left top";
+    div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.position = "absolute";
+    return div;
+  }
 }
 registerItem({
   item: Dice,
@@ -56551,7 +56590,7 @@ class Board {
   }
 }
 // src/Events/Merge.ts
-import { Path as Path13 } from "slate";
+import { Path as Path14 } from "slate";
 function areItemsTheSame(opA, opB) {
   if (opA.method === "transformMany" && opB.method === "transformMany") {
     const itemsA = Object.keys(opA.items);
@@ -56784,7 +56823,7 @@ function mergeRichTextOperations(opA, opB) {
       ops: [...opA.ops, ...opB.ops]
     };
   }
-  if (B.type === "insert_text" && A.type === "insert_text" && B.offset === A.offset + A.text.length && Path13.equals(B.path, A.path)) {
+  if (B.type === "insert_text" && A.type === "insert_text" && B.offset === A.offset + A.text.length && Path14.equals(B.path, A.path)) {
     return {
       ...opB,
       ops: [
@@ -56796,7 +56835,7 @@ function mergeRichTextOperations(opA, opB) {
       ]
     };
   }
-  if (B.type === "remove_text" && A.type === "remove_text" && B.offset + B.text.length === A.offset && Path13.equals(B.path, A.path)) {
+  if (B.type === "remove_text" && A.type === "remove_text" && B.offset + B.text.length === A.offset && Path14.equals(B.path, A.path)) {
     return {
       ...opB,
       ops: [
@@ -56808,7 +56847,7 @@ function mergeRichTextOperations(opA, opB) {
       ]
     };
   }
-  if (B.type === "split_node" && A.type === "split_node" && Path13.isChild(A.path, B.path)) {
+  if (B.type === "split_node" && A.type === "split_node" && Path14.isChild(A.path, B.path)) {
     return {
       ...opB,
       ops: [...opA.ops, ...opB.ops]
@@ -56960,10 +56999,10 @@ function createSyncLog() {
 }
 
 // src/Events/Transform/removeText_removeText.ts
-import { Path as Path14 } from "slate";
+import { Path as Path15 } from "slate";
 function removeText_removeText(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path14.equals(confirmed.path, toTransform.path)) {
+  if (Path15.equals(confirmed.path, toTransform.path)) {
     const confirmedStart = confirmed.offset;
     const confirmedEnd = confirmed.offset + confirmed.text.length;
     const toTransformStart = toTransform.offset;
@@ -56992,10 +57031,10 @@ function removeText_removeText(confirmed, toTransform) {
 }
 
 // src/Events/Transform/insertText_insertText.ts
-import { Path as Path15 } from "slate";
+import { Path as Path16 } from "slate";
 function insertText_insertText(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path15.equals(confirmed.path, toTransform.path)) {
+  if (Path16.equals(confirmed.path, toTransform.path)) {
     if (confirmed.offset <= toTransform.offset) {
       transformed.offset += confirmed.text.length;
     }
@@ -57004,10 +57043,10 @@ function insertText_insertText(confirmed, toTransform) {
 }
 
 // src/Events/Transform/removeText_insertText.ts
-import { Path as Path16 } from "slate";
+import { Path as Path17 } from "slate";
 function removeText_insertText(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path16.equals(confirmed.path, toTransform.path)) {
+  if (Path17.equals(confirmed.path, toTransform.path)) {
     if (confirmed.offset <= toTransform.offset) {
       transformed.offset -= confirmed.text.length;
     }
@@ -57016,17 +57055,17 @@ function removeText_insertText(confirmed, toTransform) {
 }
 
 // src/Events/Transform/splitNode_insertText.ts
-import { Path as Path18 } from "slate";
+import { Path as Path19 } from "slate";
 
 // src/Events/Transform/transformPath.ts
-import { Path as Path17 } from "slate";
+import { Path as Path18 } from "slate";
 function transformPath(confirmed, toTransform) {
-  const newPath = Path17.transform(toTransform.path, confirmed);
+  const newPath = Path18.transform(toTransform.path, confirmed);
   if (newPath) {
     toTransform.path = newPath;
   }
   if ("newPath" in toTransform) {
-    const newPathUpdated = Path17.transform(toTransform.newPath, confirmed);
+    const newPathUpdated = Path18.transform(toTransform.newPath, confirmed);
     if (newPathUpdated) {
       toTransform.newPath = newPathUpdated;
     }
@@ -57038,7 +57077,7 @@ function splitNode_insertText(confirmed, toTransform) {
   const transformed = { ...toTransform };
   const confPath = confirmed.path;
   const tPath = transformed.path;
-  if (Path18.equals(confPath, tPath)) {
+  if (Path19.equals(confPath, tPath)) {
     if (transformed.offset >= confirmed.position) {
       transformed.offset -= confirmed.position;
       transformed.path = [...confPath];
@@ -57065,10 +57104,10 @@ function insertNode_insertText(confirmed, toTransform) {
 }
 
 // src/Events/Transform/mergeNode_insertText.ts
-import { Path as Path19 } from "slate";
+import { Path as Path20 } from "slate";
 function mergeNode_insertText(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path19.equals(confirmed.path, transformed.path)) {
+  if (Path20.equals(confirmed.path, transformed.path)) {
     transformed.offset += confirmed.position;
     return transformed;
   }
@@ -57077,10 +57116,10 @@ function mergeNode_insertText(confirmed, toTransform) {
 }
 
 // src/Events/Transform/insertText_removeText.ts
-import { Path as Path20 } from "slate";
+import { Path as Path21 } from "slate";
 function insertText_removeText(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path20.equals(confirmed.path, toTransform.path)) {
+  if (Path21.equals(confirmed.path, toTransform.path)) {
     if (confirmed.offset <= toTransform.offset) {
       transformed.offset += confirmed.text.length;
     }
@@ -57096,10 +57135,10 @@ function insertNode_removeText(confirmed, toTransform) {
 }
 
 // src/Events/Transform/splitNode_removeText.ts
-import { Path as Path21 } from "slate";
+import { Path as Path22 } from "slate";
 function splitNode_removeText(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path21.equals(confirmed.path, transformed.path)) {
+  if (Path22.equals(confirmed.path, transformed.path)) {
     if (confirmed.position <= transformed.offset) {
       transformed.offset -= confirmed.position;
     }
@@ -57118,10 +57157,10 @@ function splitNode_removeText(confirmed, toTransform) {
 }
 
 // src/Events/Transform/mergeNode_removeText.ts
-import { Path as Path22 } from "slate";
+import { Path as Path23 } from "slate";
 function mergeNode_removeText(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path22.equals(confirmed.path, toTransform.path)) {
+  if (Path23.equals(confirmed.path, toTransform.path)) {
     transformed.offset += confirmed.position;
   }
   transformPath(confirmed, transformed);
@@ -57192,12 +57231,12 @@ function removeNode_removeNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/splitNode_insertNode.ts
-import { Path as Path23 } from "slate";
+import { Path as Path24 } from "slate";
 function splitNode_insertNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
   const conf2 = confirmed.path;
   const path2 = transformed.path;
-  if (Path23.equals(conf2, path2)) {
+  if (Path24.equals(conf2, path2)) {
     return transformed;
   }
   const isDescendant = path2.length > conf2.length && path2.slice(0, conf2.length).every((seg, i) => seg === conf2[i]);
@@ -57207,19 +57246,19 @@ function splitNode_insertNode(confirmed, toTransform) {
     transformed.path = newPath;
     return transformed;
   }
-  if (Path23.isBefore(conf2, path2)) {
+  if (Path24.isBefore(conf2, path2)) {
     transformPath(confirmed, transformed);
   }
   return transformed;
 }
 
 // src/Events/Transform/splitNode_removeNode.ts
-import { Path as Path24 } from "slate";
+import { Path as Path25 } from "slate";
 function splitNode_removeNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
   const conf2 = confirmed.path;
   const path2 = transformed.path;
-  if (Path24.equals(conf2, path2)) {
+  if (Path25.equals(conf2, path2)) {
     return transformed;
   }
   if (path2.length === conf2.length + 1 && path2.slice(0, conf2.length).every((seg, i) => seg === conf2[i])) {
@@ -57233,18 +57272,18 @@ function splitNode_removeNode(confirmed, toTransform) {
     return transformed;
   }
   const isDescendant = path2.length > conf2.length && path2.slice(0, conf2.length).every((seg, i) => seg === conf2[i]);
-  if (Path24.isBefore(conf2, path2) && !isDescendant) {
+  if (Path25.isBefore(conf2, path2) && !isDescendant) {
     transformPath(confirmed, transformed);
   }
   return transformed;
 }
 
 // src/Events/Transform/mergeNode_insertNode.ts
-import { Path as Path25 } from "slate";
+import { Path as Path26 } from "slate";
 function mergeNode_insertNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  const isDescendant = Path25.isAncestor(confirmed.path, transformed.path);
-  const isAfter = Path25.isBefore(confirmed.path, transformed.path);
+  const isDescendant = Path26.isAncestor(confirmed.path, transformed.path);
+  const isAfter = Path26.isBefore(confirmed.path, transformed.path);
   if (confirmed.path.length === 1 && isAfter && !isDescendant || confirmed.path.length > 1 && (isAfter || isDescendant)) {
     transformPath(confirmed, transformed);
   }
@@ -57252,40 +57291,40 @@ function mergeNode_insertNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/mergeNode_removeNode.ts
-import { Path as Path26 } from "slate";
+import { Path as Path27 } from "slate";
 function mergeNode_removeNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path26.isBefore(confirmed.path, transformed.path)) {
+  if (Path27.isBefore(confirmed.path, transformed.path)) {
     transformPath(confirmed, transformed);
   }
   return transformed;
 }
 
 // src/Events/Transform/setNode_insertNode.ts
-import { Path as Path27 } from "slate";
+import { Path as Path28 } from "slate";
 function setNode_insertNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path27.isBefore(confirmed.path, transformed.path)) {
+  if (Path28.isBefore(confirmed.path, transformed.path)) {
     transformPath(confirmed, transformed);
   }
   return transformed;
 }
 
 // src/Events/Transform/setNode_removeNode.ts
-import { Path as Path28 } from "slate";
+import { Path as Path29 } from "slate";
 function setNode_removeNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path28.isBefore(confirmed.path, transformed.path)) {
+  if (Path29.isBefore(confirmed.path, transformed.path)) {
     transformPath(confirmed, transformed);
   }
   return transformed;
 }
 
 // src/Events/Transform/insertText_mergeNode.ts
-import { Path as Path29 } from "slate";
+import { Path as Path30 } from "slate";
 function insertText_mergeNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path29.isBefore(confirmed.path, toTransform.path) && Path29.isSibling(confirmed.path, toTransform.path)) {
+  if (Path30.isBefore(confirmed.path, toTransform.path) && Path30.isSibling(confirmed.path, toTransform.path)) {
     if (confirmed.offset <= toTransform.position) {
       transformed.position += confirmed.text.length;
     }
@@ -57326,12 +57365,12 @@ function removeNode_mergeNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/splitNode_mergeNode.ts
-import { Path as Path30 } from "slate";
+import { Path as Path31 } from "slate";
 function splitNode_mergeNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
   const confPath = confirmed.path;
   const tPath = transformed.path;
-  if (Path30.equals(confPath, tPath)) {
+  if (Path31.equals(confPath, tPath)) {
     if (confirmed.position <= transformed.position) {
       transformed.position -= confirmed.position;
     }
@@ -57342,10 +57381,10 @@ function splitNode_mergeNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/mergeNode_mergeNode.ts
-import { Path as Path31 } from "slate";
+import { Path as Path32 } from "slate";
 function mergeNode_mergeNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path31.equals(confirmed.path, transformed.path)) {
+  if (Path32.equals(confirmed.path, transformed.path)) {
     transformed.position += confirmed.position;
     return transformed;
   }
@@ -57360,10 +57399,10 @@ function mergeNode_mergeNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/insertText_splitNode.ts
-import { Path as Path32 } from "slate";
+import { Path as Path33 } from "slate";
 function insertText_splitNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  const newPath = Path32.transform(transformed.path, confirmed);
+  const newPath = Path33.transform(transformed.path, confirmed);
   if (newPath) {
     transformed.path = newPath;
   }
@@ -57406,12 +57445,12 @@ function removeNode_splitNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/mergeNode_splitNode.ts
-import { Path as Path33 } from "slate";
+import { Path as Path34 } from "slate";
 function mergeNode_splitNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
   const rem = confirmed.path;
   const orig = transformed.path;
-  if (Path33.equals(rem, orig)) {
+  if (Path34.equals(rem, orig)) {
     transformed.position += confirmed.position;
     return transformed;
   }
@@ -57422,7 +57461,7 @@ function mergeNode_splitNode(confirmed, toTransform) {
   if (rem.length > 1) {
     const depth = rem.length - 1;
     const prefix2 = rem.slice(0, depth);
-    if (newPath.length > depth && Path33.equals(prefix2, newPath.slice(0, depth)) && newPath[depth] > rem[depth]) {
+    if (newPath.length > depth && Path34.equals(prefix2, newPath.slice(0, depth)) && newPath[depth] > rem[depth]) {
       newPath[depth] = newPath[depth] - 1;
     }
   }
@@ -57431,10 +57470,10 @@ function mergeNode_splitNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/splitNode_splitNode.ts
-import { Path as Path34 } from "slate";
+import { Path as Path35 } from "slate";
 function splitNode_splitNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  const samePath = Path34.equals(confirmed.path, transformed.path);
+  const samePath = Path35.equals(confirmed.path, transformed.path);
   if (samePath && confirmed.position <= transformed.position) {
     transformed.position -= confirmed.position;
   }
@@ -57458,12 +57497,12 @@ function setNode_splitNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/splitNode_setNode.ts
-import { Path as Path35 } from "slate";
+import { Path as Path36 } from "slate";
 function splitNode_setNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
   const confirmedPath = confirmed.path;
   const currentPath = transformed.path;
-  const isSame = Path35.equals(currentPath, confirmedPath);
+  const isSame = Path36.equals(currentPath, confirmedPath);
   const isDeepNestedDescendant = confirmedPath.length > 1 && currentPath.length > confirmedPath.length && currentPath.slice(0, confirmedPath.length).every((seg, i) => seg === confirmedPath[i]);
   if (!isSame && !isDeepNestedDescendant) {
     transformPath(confirmed, transformed);
@@ -57486,11 +57525,11 @@ function insertNode_setNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/removeNode_setNode.ts
-import { Path as Path36 } from "slate";
+import { Path as Path37 } from "slate";
 function removeNode_setNode(confirmed, toTransform) {
   const removalPath = confirmed.path;
   const originalPath = toTransform.path;
-  if (Path36.equals(removalPath, originalPath)) {
+  if (Path37.equals(removalPath, originalPath)) {
     return;
   }
   const transformedOp = { ...toTransform };
@@ -57501,7 +57540,7 @@ function removeNode_setNode(confirmed, toTransform) {
   if (removalPath.length > 1) {
     const depthIndex = removalPath.length - 1;
     const parentPrefix = removalPath.slice(0, depthIndex);
-    if (newPath.length > depthIndex && Path36.equals(parentPrefix, newPath.slice(0, depthIndex)) && newPath[depthIndex] > removalPath[depthIndex]) {
+    if (newPath.length > depthIndex && Path37.equals(parentPrefix, newPath.slice(0, depthIndex)) && newPath[depthIndex] > removalPath[depthIndex]) {
       newPath[depthIndex] = newPath[depthIndex] - 1;
     }
   }
@@ -57510,10 +57549,10 @@ function removeNode_setNode(confirmed, toTransform) {
 }
 
 // src/Events/Transform/setNode_setNode.ts
-import { Path as Path37 } from "slate";
+import { Path as Path38 } from "slate";
 function setNode_setNode(confirmed, toTransform) {
   const transformed = { ...toTransform };
-  if (Path37.equals(confirmed.path, toTransform.path)) {
+  if (Path38.equals(confirmed.path, toTransform.path)) {
     transformed.newProperties = {
       ...toTransform.newProperties,
       ...confirmed.newProperties

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

@@ -1,8 +1,9 @@
 import { BaseItem, BaseItemData, SerializedItemData } from "../../../BaseItem/BaseItem";
-import { BorderWidth, Path } from "../../../Path";
+import { BorderWidth, Path } from "../../../../Items";
 import { Subject } from "../../../../Subject";
 import { Board } from "../../../../Board";
-import { DrawingContext } from "../../../DrawingContext";
+import { DrawingContext } from "../../../../Items";
+import { DocumentFactory } from "../../../../api/DocumentFactory";
 import { DiceOperation } from "./DiceOperation";
 export type DiceType = "common" | "custom";
 export declare const defaultDiceData: BaseItemData;
@@ -46,4 +47,5 @@ export declare class Dice extends BaseItem {
     apply(op: DiceOperation): void;
     startRotation(): void;
     stopRotation(): void;
+    renderHTML(documentFactory: DocumentFactory): HTMLElement;
 }

package/package.json

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