microboard-ui-temp 0.3.5 → 0.3.7

package/dist/{chunk-bdkn78st.js → chunk-c47kwavk.js}

@@ -228592,43 +228592,25 @@ var __getProtoOf2 = Object.getPrototypeOf;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropNames2 = Object.getOwnPropertyNames;
 var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
 var __toESM2 = (mod2, isNodeMode, target) => {
-  var canCache = mod2 != null && typeof mod2 === "object";
-  if (canCache) {
-    var cache2 = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache2.get(mod2);
-    if (cached)
-      return cached;
-  }
   target = mod2 != null ? __create2(__getProtoOf2(mod2)) : {};
   const to = isNodeMode || !mod2 || !mod2.__esModule ? __defProp2(target, "default", { value: mod2, enumerable: true }) : target;
   for (let key of __getOwnPropNames2(mod2))
     if (!__hasOwnProp2.call(to, key))
       __defProp2(to, key, {
-        get: __accessProp.bind(mod2, key),
+        get: () => mod2[key],
         enumerable: true
       });
-  if (canCache)
-    cache2.set(mod2, to);
   return to;
 };
 var __commonJS2 = (cb, mod2) => () => (mod2 || cb((mod2 = { exports: {} }).exports, mod2), mod2.exports);
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
 var __export2 = (target, all) => {
   for (var name in all)
     __defProp2(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __require2 = /* @__PURE__ */ ((x) => __require)(function(x) {
@@ -228641,13 +228623,13 @@ var require_extend = __commonJS2((exports2, module2) => {
   var toStr2 = Object.prototype.toString;
   var defineProperty = Object.defineProperty;
   var gOPD = Object.getOwnPropertyDescriptor;
-  var isArray = function isArray2(arr2) {
+  var isArray = function isArray(arr2) {
     if (typeof Array.isArray === "function") {
       return Array.isArray(arr2);
     }
     return toStr2.call(arr2) === "[object Array]";
   };
-  var isPlainObject22 = function isPlainObject3(obj) {
+  var isPlainObject22 = function isPlainObject(obj) {
     if (!obj || toStr2.call(obj) !== "[object Object]") {
       return false;
     }
@@ -228660,7 +228642,7 @@ var require_extend = __commonJS2((exports2, module2) => {
     for (key in obj) {}
     return typeof key === "undefined" || hasOwn.call(obj, key);
   };
-  var setProperty = function setProperty2(target, options2) {
+  var setProperty = function setProperty(target, options2) {
     if (defineProperty && options2.name === "__proto__") {
       defineProperty(target, options2.name, {
         enumerable: true,
@@ -228672,7 +228654,7 @@ var require_extend = __commonJS2((exports2, module2) => {
       target[options2.name] = options2.newValue;
     }
   };
-  var getProperty = function getProperty2(obj, name) {
+  var getProperty = function getProperty(obj, name) {
     if (name === "__proto__") {
       if (!hasOwn.call(obj, name)) {
         return;
@@ -229366,7 +229348,7 @@ function safeRequestAnimationFrame(callback) {
   if (typeof requestAnimationFrame === "function") {
     return requestAnimationFrame(callback);
   } else {
-    callback();
+    setTimeout(callback, 0);
   }
 }
 function isFiniteNumber(value) {
@@ -229741,205 +229723,6 @@ class Mbr {
     }
   }
 }
-function updateRects(board, ref, mbr, verticalOffset, horizontalOffset, fit = "contextPanel") {
-  const { selection, camera } = board;
-  const panel = ref.current;
-  const selectionMbr = mbr ?? selection.getMbr();
-  const selectionItems = selection.items;
-  const richTextSelection = selectionItems.getSingle() instanceof RichText ? selectionItems.list()[0] : undefined;
-  if (panel && selectionMbr) {
-    if (fit === "contextPanel") {
-      const panelRect = getContextPanelRect(selectionMbr, camera, panel, !!richTextSelection, horizontalOffset, verticalOffset);
-      return panelRect;
-    }
-    if (fit === "linkToBtn") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitLinkToBtn(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
-      return panelRect;
-    }
-    if (fit === "comment") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitComment(selectionMbr.getTransformed(camera.getMatrix()), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
-      return panelRect;
-    }
-    if (fit === "threadPanel") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitThreadPanel(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
-      return panelRect;
-    }
-    if (fit === "boardMenu") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitBoardMenu(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
-      return panelRect;
-    }
-    if (fit === "hyperLink") {
-      if (!mbr) {
-        return null;
-      }
-      const panelRect = fitHyperLink(selectionMbr.getTransformed(camera.getMatrix()), Mbr.fromDomRect(panel.getBoundingClientRect()), camera.window.getMbr(), verticalOffset);
-      return panelRect;
-    }
-  }
-  return null;
-}
-function getContextPanelRect(selectionMbr, camera, panel, toLeft, horizontalOffset, verticalOffset) {
-  const transformedMbr = selectionMbr.getTransformed(camera.getMatrix());
-  const windowMbr = camera.window.getMbr();
-  const panelRectFromDom = Mbr.fromDomRect(panel.getBoundingClientRect());
-  const panelRect = toLeft ? fitContextPanelToLeft(transformedMbr, windowMbr, panelRectFromDom, verticalOffset, horizontalOffset) : fitContextPanelToCenter(transformedMbr, windowMbr, panelRectFromDom, verticalOffset, horizontalOffset);
-  return panelRect;
-}
-function fitContextPanelToLeft(selectionMbr, view, panel, verticalOffset = 40, horizontalOffset = 80) {
-  const panelHeight = panel.getHeight();
-  const panelWidth = panel.getWidth();
-  const newPanel = new Mbr;
-  const topSpace = selectionMbr.top - view.top;
-  const hasEnoughTopSpace = topSpace >= panelHeight + verticalOffset;
-  if (hasEnoughTopSpace) {
-    newPanel.top = selectionMbr.top - panelHeight - verticalOffset;
-    if (newPanel.top < view.top) {
-      newPanel.top = view.top + verticalOffset;
-    }
-  } else {
-    const usePanelTop = panel.top > 1 && panel.top > selectionMbr.top + verticalOffset;
-    newPanel.top = usePanelTop ? panel.top : selectionMbr.bottom + verticalOffset;
-    const isOverflowingBottom = newPanel.top + panelHeight > view.bottom;
-    const isLargeOffsetForRichText = newPanel.top >= selectionMbr.bottom + verticalOffset * 2;
-    if (isOverflowingBottom || isLargeOffsetForRichText) {
-      newPanel.top = selectionMbr.bottom - (panelHeight + verticalOffset);
-    }
-  }
-  newPanel.bottom = newPanel.top + panelHeight;
-  fitContextPanelInViewRect(newPanel, view, verticalOffset);
-  const itemMbr = selectionMbr.getMbr();
-  newPanel.left = itemMbr.left;
-  adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset);
-  return newPanel;
-}
-function fitContextPanelToCenter(selectionMbr, view, panel, verticalOffset = 40, horizontalOffset = 80) {
-  const panelHeight = panel.getHeight();
-  const panelWidth = panel.getWidth();
-  const newPanel = new Mbr;
-  const topSpace = selectionMbr.top - view.top;
-  const bottomSpace = view.bottom - selectionMbr.bottom;
-  const shouldPlaceAbove = topSpace > bottomSpace - panelHeight;
-  if (shouldPlaceAbove) {
-    newPanel.top = selectionMbr.top - panelHeight - verticalOffset;
-    if (newPanel.top < view.top) {
-      newPanel.top = view.top + verticalOffset;
-    }
-  } else {
-    newPanel.top = selectionMbr.bottom + verticalOffset;
-    const isOverflowingBottom = newPanel.top + panelHeight > view.bottom;
-    const isLargeOffsetForRichText = newPanel.top >= selectionMbr.bottom + verticalOffset * 2;
-    if (isOverflowingBottom || isLargeOffsetForRichText) {
-      newPanel.top = selectionMbr.bottom - (panelHeight + verticalOffset);
-    }
-  }
-  newPanel.bottom = newPanel.top + panelHeight;
-  fitContextPanelInViewRect(newPanel, view, verticalOffset);
-  const itemCenter = selectionMbr.getCenter();
-  newPanel.left = itemCenter.x - panelWidth / 2;
-  adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset);
-  return newPanel;
-}
-function adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset) {
-  newPanel.right = newPanel.left + panelWidth;
-  if (newPanel.left < view.left + horizontalOffset) {
-    newPanel.left = view.left + horizontalOffset;
-  } else if (newPanel.right + horizontalOffset > view.right) {
-    newPanel.left = view.right - (panelWidth + horizontalOffset);
-  }
-  newPanel.right = newPanel.left + panelWidth;
-}
-function fitContextPanelInViewRect(panel, view, verticalOffset) {
-  const panelHeight = panel.getHeight();
-  if (panel.top <= view.top + verticalOffset) {
-    panel.top = view.top + 2 * verticalOffset;
-    panel.bottom = panel.top + panelHeight;
-  }
-  if (panel.bottom >= view.bottom - verticalOffset) {
-    panel.bottom = view.bottom - 2 * verticalOffset;
-    panel.top = panel.bottom - panelHeight;
-  }
-}
-function fitLinkToBtn(itemMbr, view, panel, verticalOffset = -2, horizontalOffset = -2) {
-  const panelHeight = panel.getHeight();
-  const newPanel = new Mbr;
-  newPanel.top = itemMbr.top - panelHeight - verticalOffset;
-  newPanel.top = newPanel.top + panelHeight;
-  newPanel.bottom = newPanel.top + panelHeight * 2;
-  const panelWidth = panel.getWidth();
-  newPanel.left = itemMbr.right - panelWidth + horizontalOffset;
-  return newPanel;
-}
-function fitHyperLink(linkMbr, panel, view, offset = 20) {
-  const panelHeight = panel.getHeight();
-  const newPanel = new Mbr;
-  newPanel.top = linkMbr.bottom;
-  newPanel.bottom = panelHeight + newPanel.top;
-  const panelWidth = panel.getWidth();
-  newPanel.left = linkMbr.left;
-  newPanel.right = newPanel.left + panelWidth;
-  return newPanel;
-}
-function fitComment(anchor, panel, verticalOffset = 0, horizontalOffset = 0) {
-  const panelHeight = panel.getHeight();
-  const newPanel = new Mbr;
-  newPanel.top = anchor.top - panelHeight - verticalOffset;
-  newPanel.bottom = newPanel.top + panelHeight;
-  const panelWidth = panel.getWidth();
-  newPanel.left = anchor.left - panelWidth / 2 - horizontalOffset;
-  newPanel.right = newPanel.left + panelWidth;
-  return newPanel;
-}
-function fitBoardMenu(anchor, view, panel, verticalOffset = 20, horizontalOffset = 20) {
-  const panelHeight = panel.getHeight();
-  const panelWidth = panel.getWidth();
-  const newPanel = new Mbr;
-  newPanel.top = anchor.top;
-  newPanel.bottom = newPanel.top + panelHeight;
-  if (newPanel.bottom > view.bottom - verticalOffset) {
-    newPanel.bottom = view.bottom - verticalOffset;
-    newPanel.top = newPanel.bottom - panelHeight;
-  }
-  newPanel.left = anchor.left;
-  newPanel.right = newPanel.left + panelWidth;
-  if (newPanel.right > view.right - horizontalOffset) {
-    newPanel.right = view.right - horizontalOffset;
-    newPanel.left = newPanel.right - panelWidth;
-  }
-  return newPanel;
-}
-function fitThreadPanel(anchor, view, panel, verticalOffset = 50, horizontalOffset = 50) {
-  const panelHeight = panel.getHeight();
-  const panelWidth = panel.getWidth();
-  const newPanel = new Mbr;
-  newPanel.top = anchor.top - panelHeight / 2;
-  if (newPanel.top < view.top + verticalOffset) {
-    newPanel.top = view.top + verticalOffset;
-  }
-  newPanel.bottom = newPanel.top + panelHeight;
-  if (newPanel.bottom > view.bottom - verticalOffset) {
-    newPanel.bottom = view.bottom - verticalOffset;
-    newPanel.top = newPanel.bottom - panelHeight;
-  }
-  newPanel.left = anchor.left;
-  newPanel.right = newPanel.left + panelWidth;
-  if (newPanel.right > view.right - horizontalOffset) {
-    newPanel.right = anchor.right;
-    newPanel.left = newPanel.right - panelWidth;
-  }
-  return newPanel;
-}
 function getLinesRelationType(lineA, lineB) {
   let denominator = (lineB.end.y - lineB.start.y) * (lineA.end.x - lineA.start.x) - (lineB.end.x - lineB.start.x) * (lineA.end.y - lineA.start.y);
   if (denominator === Infinity || denominator === -Infinity) {
@@ -231857,6 +231640,229 @@ class Arc {
     return new Arc(this.center.copy(), this.radiusX, this.radiusY, this.startAngle, this.endAngle, this.clockwise);
   }
 }
+var _sessionStorage;
+if (typeof window !== "undefined" && window.sessionStorage) {
+  _sessionStorage = window.sessionStorage;
+} else {
+
+  class NodeStoragePolyfill {
+    _store = {};
+    clear() {
+      this._store = {};
+    }
+    getItem(key) {
+      return Object.prototype.hasOwnProperty.call(this._store, key) ? this._store[key] : null;
+    }
+    key(index) {
+      const keys = Object.keys(this._store);
+      return keys[index] ?? null;
+    }
+    removeItem(key) {
+      delete this._store[key];
+    }
+    setItem(key, value) {
+      this._store[key] = value;
+    }
+    get length() {
+      return Object.keys(this._store).length;
+    }
+  }
+  _sessionStorage = new NodeStoragePolyfill;
+}
+
+class SessionStorage {
+  set(key, value) {
+    const boardId = this.getBoardId() || "";
+    _sessionStorage.setItem(boardId + "_" + key, JSON.stringify(value));
+  }
+  get(key) {
+    const boardId = this.getBoardId() || "";
+    const item = _sessionStorage.getItem(boardId + "_" + key);
+    if (!item || item === "undefined") {
+      return;
+    }
+    return JSON.parse(item);
+  }
+  remove(key) {
+    const boardId = this.getBoardId() || "";
+    _sessionStorage.removeItem(boardId + "_" + key);
+  }
+  setConnectorStrokeStyle(color) {
+    this.set(`connectorStrokeStyle`, color);
+  }
+  getConnectorStrokeStyle() {
+    return this.get("connectorStrokeStyle");
+  }
+  setConnectorLineWidth(width) {
+    this.set(`connectorLineWidth`, width);
+  }
+  getConnectorLineWidth() {
+    return this.get("connectorLineWidth");
+  }
+  setConnectorFillColor(color) {
+    this.set(`connectorFillColor`, color);
+  }
+  getConnectorFillColor() {
+    return this.get("connectorFillColor");
+  }
+  setConnectorPointer(type, edge) {
+    this.set(`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`, type);
+  }
+  getConnectorPointer(edge) {
+    return this.get(`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`);
+  }
+  setConnectorLineStyle(type) {
+    this.set("connectorLineStyle", type);
+  }
+  getConnectorLineStyle() {
+    return this.get("connectorLineStyle");
+  }
+  setShapeData(data) {
+    this.set("lastShapeData", data);
+  }
+  getShapeData() {
+    return this.get("lastShapeData");
+  }
+  setStickerData(data) {
+    this.set("lastSticker", data);
+  }
+  getStickerData() {
+    return this.get("lastSticker");
+  }
+  setShapeWidth(width) {
+    this.set("shapeWidth", width);
+  }
+  getShapeWidth() {
+    return this.get("shapeWidth");
+  }
+  setShapeHeight(height) {
+    this.set("shapeHeight", height);
+  }
+  getShapeHeight() {
+    return this.get("shapeHeight");
+  }
+  setImageDimensions(dimension) {
+    this.set("imageDimensions", dimension);
+  }
+  getImageDimensions() {
+    return this.get("imageDimensions");
+  }
+  setFontSize(itemType, size2) {
+    this.set(`fontSize_${itemType}`, size2);
+  }
+  getFontSize(itemType) {
+    return this.get(`fontSize_${itemType}`);
+  }
+  setFontStyles(itemType, styles) {
+    this.set(`fontStyles_${itemType}`, styles);
+  }
+  getFontStyles(itemType) {
+    return this.get(`fontStyles_${itemType}`);
+  }
+  setFontColor(itemType, color) {
+    this.set(`fontColor_${itemType}`, color);
+  }
+  getFontColor(itemType) {
+    return this.get(`fontColor_${itemType}`);
+  }
+  setFontHighlight(itemType, highlightColor) {
+    this.set(`fontHighlightColor_${itemType}`, highlightColor);
+  }
+  getFontHighlight(itemType) {
+    return this.get(`fontHighlightColor_${itemType}`);
+  }
+  setHorizontalAlignment(itemType, horizontalAlignment) {
+    this.set(`fontHorizontalAlignment_${itemType}`, horizontalAlignment);
+  }
+  getHorizontalAlignment(itemType) {
+    return this.get(`fontHorizontalAlignment_${itemType}`);
+  }
+  setVerticalAlignment(itemType, verticalAlignment) {
+    this.set(`fontVerticalAlignment_${itemType}`, verticalAlignment);
+  }
+  getVerticalAlignment(itemType) {
+    return this.get(`fontVerticalAlignment_${itemType}`);
+  }
+  setLastAIRequest(request) {
+    _sessionStorage.setItem("lastAIRequest", request);
+  }
+  getLastAIRequest() {
+    return _sessionStorage.getItem("lastAIRequest");
+  }
+  removeLastAIRequest() {
+    _sessionStorage.removeItem("lastAIRequest");
+  }
+  clear() {
+    _sessionStorage.clear();
+  }
+  getBoardId() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    return window.location.href.split("/").pop()?.split("?")[0];
+  }
+}
+var tempStorage = new SessionStorage;
+function getTranslationFromHTML(el) {
+  const transform = el.style.transform;
+  const translateMatch = transform.match(/translate\(([^)]+)\)/);
+  const [translateX, translateY] = translateMatch ? translateMatch[1].split(",").map((value) => parseFloat(value)) : [0, 0];
+  return [translateX, translateY];
+}
+function getScaleFromHTML(el) {
+  const transform = el.style.transform;
+  const scaleMatch = transform.match(/scale\(([^)]+)\)/);
+  const [scaleX, scaleY] = scaleMatch ? scaleMatch[1].split(",").map((value) => parseFloat(value)) : [1, 1];
+  return [scaleX, scaleY];
+}
+function translateElementBy(el, x, y) {
+  const [exX, exY] = getTranslationFromHTML(el);
+  const [newX, newY] = [exX + x, exY + y];
+  const [scaleX, scaleY] = getScaleFromHTML(el);
+  el.style.transform = `translate(${newX}px, ${newY}px) scale(${scaleX}, ${scaleY})`;
+  return el;
+}
+function scaleElementBy(el, scaleX, scaleY) {
+  const [currentScaleX, currentScaleY] = getScaleFromHTML(el);
+  const [newScaleX, newScaleY] = [
+    currentScaleX * scaleX,
+    currentScaleY * scaleY
+  ];
+  const [translateX, translateY] = getTranslationFromHTML(el);
+  el.style.transform = `translate(${translateX}px, ${translateY}px) scale(${newScaleX}, ${newScaleY})`;
+  return el;
+}
+function resetElementScale(el) {
+  const [x, y] = getTranslationFromHTML(el);
+  el.style.transform = `translate(${x}px, ${y}px) scale(1, 1)`;
+  return el;
+}
+function positionRelatively(toPosition, positionBy, padding2 = 0) {
+  const [translateX, translateY] = getTranslationFromHTML(toPosition);
+  const [frameX, frameY] = getTranslationFromHTML(positionBy);
+  const [dx, dy] = [translateX - frameX, translateY - frameY];
+  const verticalAlignment = toPosition.getAttribute("data-vertical-alignment");
+  const horizontalAlignment = toPosition.getAttribute("data-vertical-alignment");
+  let paddingX = padding2;
+  let paddingY = padding2;
+  if (verticalAlignment && verticalAlignment === "bottom") {
+    paddingY = -padding2;
+  }
+  if (horizontalAlignment && horizontalAlignment === "right") {
+    paddingX = -padding2;
+  }
+  const [scaleX, scaleY] = getScaleFromHTML(toPosition);
+  toPosition.style.transform = `translate(${dx + paddingX}px, ${dy + paddingY}px) scale(${scaleX}, ${scaleY})`;
+  return toPosition;
+}
+function positionAbsolutely(toPosition, positionBy) {
+  const [translateX, translateY] = getTranslationFromHTML(toPosition);
+  const [frameX, frameY] = getTranslationFromHTML(positionBy);
+  const [dx, dy] = [translateX + frameX, translateY + frameY];
+  const [scaleX, scaleY] = getScaleFromHTML(toPosition);
+  toPosition.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
+  return toPosition;
+}
 
 class BrowserDocumentFactory {
   createElement(tagName) {
@@ -232032,6 +232038,151 @@ class MockPath2D {
   }
 }
 
+class Matrix2 {
+  translateX;
+  translateY;
+  scaleX;
+  scaleY;
+  shearX;
+  shearY;
+  constructor(translateX = 0, translateY = 0, scaleX = 1, scaleY = 1, shearX = 0, shearY = 0) {
+    this.translateX = translateX;
+    this.translateY = translateY;
+    this.scaleX = scaleX;
+    this.scaleY = scaleY;
+    this.shearX = shearX;
+    this.shearY = shearY;
+    this.translateX = toFiniteNumber(translateX);
+    this.translateY = toFiniteNumber(translateY);
+    this.scaleX = toFiniteNumber(scaleX, 1);
+    this.scaleY = toFiniteNumber(scaleY, 1);
+    this.shearX = toFiniteNumber(shearX);
+    this.shearY = toFiniteNumber(shearY);
+  }
+  translate(x, y) {
+    this.translateX += x;
+    this.translateY += y;
+  }
+  scale(x, y) {
+    this.scaleX = this.scaleX * x;
+    this.scaleY = this.scaleY * y;
+  }
+  multiplyByMatrix(matrix) {
+    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = this;
+    this.translateX = scaleX * matrix.translateX + shearX * matrix.translateY + translateX;
+    this.translateY = shearY * matrix.translateX + scaleY * matrix.translateY + translateY;
+    this.scaleX = scaleX * matrix.scaleX + shearX * matrix.shearY;
+    this.scaleY = shearY * matrix.shearX + scaleY * matrix.scaleY;
+    this.shearX = scaleX * matrix.shearX + shearX * matrix.scaleY;
+    this.shearY = shearY * matrix.scaleX + scaleY * matrix.shearY;
+    return this;
+  }
+  multiplyByMatrixies(matrixies) {
+    for (const matrix of matrixies) {
+      this.multiplyByMatrix(matrix);
+    }
+    return this;
+  }
+  multiply(value) {
+    if (Array.isArray(value)) {
+      this.multiplyByMatrixies(value);
+    } else {
+      this.multiplyByMatrix(value);
+    }
+    return this;
+  }
+  copy() {
+    return new Matrix2(this.translateX, this.translateY, this.scaleX, this.scaleY, this.shearX, this.shearY);
+  }
+  invert() {
+    const { scaleX, shearY, shearX, scaleY, translateX, translateY } = this;
+    const denom = scaleX * scaleY - shearX * shearY;
+    this.scaleX = scaleY / denom;
+    this.shearY = shearY / -denom;
+    this.shearX = shearX / -denom;
+    this.scaleY = scaleX / denom;
+    this.translateX = (scaleY * translateX - shearX * translateY) / -denom;
+    this.translateY = (shearY * translateX - scaleX * translateY) / denom;
+  }
+  getInverse() {
+    const inverse = this.copy();
+    inverse.invert();
+    return inverse;
+  }
+  rotateByRadian(radian) {
+    const cosAngle = Math.cos(radian);
+    const sinAngle = Math.sin(radian);
+    const rotationMatrix = new Matrix2(0, 0, cosAngle, cosAngle, -sinAngle, sinAngle);
+    return this.multiply(rotationMatrix);
+  }
+  rotateBy(degree) {
+    const radian = degree * Math.PI / 180;
+    this.rotateByRadian(radian);
+  }
+  rotateByObjectCenter(degree, size2, scale) {
+    const angle = degree * (Math.PI / 180);
+    const width = size2.width * scale.x;
+    const height = size2.height * scale.y;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const x = centerX - (centerX * Math.cos(angle) - centerY * Math.sin(angle));
+    const y = centerY - (centerX * Math.sin(angle) + centerY * Math.cos(angle));
+    this.rotateBy(degree);
+    this.translate(x, y);
+  }
+  rotateByRelativeTo(degree, x, y) {
+    this.translateX += x;
+    this.translateY += y;
+    this.rotateBy(degree);
+    this.translateX -= x;
+    this.translateY -= y;
+  }
+  rotateByRadianRelativeTo(radian, x, y) {
+    this.translateX += x;
+    this.translateY += y;
+    this.rotateByRadian(radian);
+    this.translateX -= x;
+    this.translateY -= y;
+  }
+  apply(point3) {
+    const { x, y } = point3;
+    point3.x = this.scaleX * x + this.shearX * y + this.translateX;
+    point3.y = this.shearY * x + this.scaleY * y + this.translateY;
+  }
+  applyToContext(ctx) {
+    ctx.transform(this.scaleX, this.shearY, this.shearX, this.scaleY, this.translateX, this.translateY);
+  }
+  getAffineMatrix() {
+    return {
+      a: this.scaleX,
+      b: this.shearY,
+      c: this.shearX,
+      d: this.scaleY,
+      e: this.translateX,
+      f: this.translateY
+    };
+  }
+  getCssString() {
+    return `matrix(${this.scaleX},${this.shearY},${this.shearX},${this.scaleY},${this.translateX},${this.translateY})`;
+  }
+  identity() {
+    return new Matrix2;
+  }
+  mirrorOrigin() {
+    return new Matrix2(0, 0, -1, -1);
+  }
+  mirrorX() {
+    return new Matrix2(0, 0, 1, -1);
+  }
+  mirrorY() {
+    return new Matrix2(0, 0, -1, 1);
+  }
+  compare(matrix) {
+    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = matrix;
+    return this.translateX === translateX && this.translateY === translateY && this.scaleX === scaleX && this.scaleY === scaleY && this.shearX === shearX && this.shearY === shearY;
+  }
+}
+
 class Subject {
   observers = [];
   subscribe(observer) {
@@ -234955,7 +235106,7 @@ var Browser = /* @__PURE__ */ function() {
   }
   _createClass(Browser2, [{
     key: "init",
-    value: function init2(services) {
+    value: function init(services) {
       var options2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
       var i18nOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       this.services = services || {
@@ -235010,7 +235161,7 @@ var Browser = /* @__PURE__ */ function() {
     }
   }, {
     key: "cacheUserLanguage",
-    value: function cacheUserLanguage4(lng, caches) {
+    value: function cacheUserLanguage(lng, caches) {
       var _this2 = this;
       if (!caches)
         caches = this.options.caches;
@@ -235404,772 +235555,6 @@ var conf = {
   CONNECTOR_ITEM_OFFSET: 20
 };
 initDefaultI18N();
-
-class Matrix2 {
-  translateX;
-  translateY;
-  scaleX;
-  scaleY;
-  shearX;
-  shearY;
-  constructor(translateX = 0, translateY = 0, scaleX = 1, scaleY = 1, shearX = 0, shearY = 0) {
-    this.translateX = translateX;
-    this.translateY = translateY;
-    this.scaleX = scaleX;
-    this.scaleY = scaleY;
-    this.shearX = shearX;
-    this.shearY = shearY;
-    this.translateX = toFiniteNumber(translateX);
-    this.translateY = toFiniteNumber(translateY);
-    this.scaleX = toFiniteNumber(scaleX, 1);
-    this.scaleY = toFiniteNumber(scaleY, 1);
-    this.shearX = toFiniteNumber(shearX);
-    this.shearY = toFiniteNumber(shearY);
-  }
-  translate(x, y) {
-    this.translateX += x;
-    this.translateY += y;
-  }
-  scale(x, y) {
-    this.scaleX = this.scaleX * x;
-    this.scaleY = this.scaleY * y;
-  }
-  multiplyByMatrix(matrix) {
-    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = this;
-    this.translateX = scaleX * matrix.translateX + shearX * matrix.translateY + translateX;
-    this.translateY = shearY * matrix.translateX + scaleY * matrix.translateY + translateY;
-    this.scaleX = scaleX * matrix.scaleX + shearX * matrix.shearY;
-    this.scaleY = shearY * matrix.shearX + scaleY * matrix.scaleY;
-    this.shearX = scaleX * matrix.shearX + shearX * matrix.scaleY;
-    this.shearY = shearY * matrix.scaleX + scaleY * matrix.shearY;
-    return this;
-  }
-  multiplyByMatrixies(matrixies) {
-    for (const matrix of matrixies) {
-      this.multiplyByMatrix(matrix);
-    }
-    return this;
-  }
-  multiply(value) {
-    if (Array.isArray(value)) {
-      this.multiplyByMatrixies(value);
-    } else {
-      this.multiplyByMatrix(value);
-    }
-    return this;
-  }
-  copy() {
-    return new Matrix2(this.translateX, this.translateY, this.scaleX, this.scaleY, this.shearX, this.shearY);
-  }
-  invert() {
-    const { scaleX, shearY, shearX, scaleY, translateX, translateY } = this;
-    const denom = scaleX * scaleY - shearX * shearY;
-    this.scaleX = scaleY / denom;
-    this.shearY = shearY / -denom;
-    this.shearX = shearX / -denom;
-    this.scaleY = scaleX / denom;
-    this.translateX = (scaleY * translateX - shearX * translateY) / -denom;
-    this.translateY = (shearY * translateX - scaleX * translateY) / denom;
-  }
-  getInverse() {
-    const inverse = this.copy();
-    inverse.invert();
-    return inverse;
-  }
-  rotateByRadian(radian) {
-    const cosAngle = Math.cos(radian);
-    const sinAngle = Math.sin(radian);
-    const rotationMatrix = new Matrix2(0, 0, cosAngle, cosAngle, -sinAngle, sinAngle);
-    return this.multiply(rotationMatrix);
-  }
-  rotateBy(degree) {
-    const radian = degree * Math.PI / 180;
-    this.rotateByRadian(radian);
-  }
-  rotateByObjectCenter(degree, size2, scale) {
-    const angle = degree * (Math.PI / 180);
-    const width = size2.width * scale.x;
-    const height = size2.height * scale.y;
-    const centerX = width / 2;
-    const centerY = height / 2;
-    const x = centerX - (centerX * Math.cos(angle) - centerY * Math.sin(angle));
-    const y = centerY - (centerX * Math.sin(angle) + centerY * Math.cos(angle));
-    this.rotateBy(degree);
-    this.translate(x, y);
-  }
-  rotateByRelativeTo(degree, x, y) {
-    this.translateX += x;
-    this.translateY += y;
-    this.rotateBy(degree);
-    this.translateX -= x;
-    this.translateY -= y;
-  }
-  rotateByRadianRelativeTo(radian, x, y) {
-    this.translateX += x;
-    this.translateY += y;
-    this.rotateByRadian(radian);
-    this.translateX -= x;
-    this.translateY -= y;
-  }
-  apply(point3) {
-    const { x, y } = point3;
-    point3.x = this.scaleX * x + this.shearX * y + this.translateX;
-    point3.y = this.shearY * x + this.scaleY * y + this.translateY;
-  }
-  applyToContext(ctx) {
-    ctx.transform(this.scaleX, this.shearY, this.shearX, this.scaleY, this.translateX, this.translateY);
-  }
-  getAffineMatrix() {
-    return {
-      a: this.scaleX,
-      b: this.shearY,
-      c: this.shearX,
-      d: this.scaleY,
-      e: this.translateX,
-      f: this.translateY
-    };
-  }
-  getCssString() {
-    return `matrix(${this.scaleX},${this.shearY},${this.shearX},${this.scaleY},${this.translateX},${this.translateY})`;
-  }
-  identity() {
-    return new Matrix2;
-  }
-  mirrorOrigin() {
-    return new Matrix2(0, 0, -1, -1);
-  }
-  mirrorX() {
-    return new Matrix2(0, 0, 1, -1);
-  }
-  mirrorY() {
-    return new Matrix2(0, 0, -1, 1);
-  }
-  compare(matrix) {
-    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = matrix;
-    return this.translateX === translateX && this.translateY === translateY && this.scaleX === scaleX && this.scaleY === scaleY && this.shearX === shearX && this.shearY === shearY;
-  }
-}
-
-class SubjectOperation {
-  observers = [];
-  subscribe(observer) {
-    const index = this.observers.indexOf(observer);
-    if (index === -1) {
-      this.observers.push(observer);
-    }
-  }
-  unsubscribe(observer) {
-    const index = this.observers.indexOf(observer);
-    if (index !== -1) {
-      this.observers.splice(index, 1);
-    }
-  }
-  publish(subject, op) {
-    for (const observer of this.observers) {
-      observer(subject, op);
-    }
-  }
-}
-function mapItemsByOperation(item, getCallback) {
-  const items = Array.isArray(item) ? item : [item];
-  return items.map((item2) => {
-    const operation = getCallback(item2);
-    return { item: item2, operation };
-  });
-}
-
-class TransformationCommand {
-  transformation;
-  operation;
-  reverse;
-  constructor(transformation, operation) {
-    this.transformation = transformation;
-    this.operation = operation;
-    this.reverse = this.getReverse();
-  }
-  merge(op) {
-    this.operation = op;
-    this.reverse = this.getReverse();
-    return this;
-  }
-  apply() {
-    for (const transformation of this.transformation) {
-      transformation.apply(this.operation);
-    }
-  }
-  revert() {
-    this.reverse.forEach(({ item, operation }) => {
-      item.apply(operation);
-    });
-  }
-  getReverse() {
-    const op = this.operation;
-    switch (this.operation.method) {
-      case "applyMatrix": {
-        const op2 = this.operation;
-        return this.transformation.map((t3) => {
-          const itemOp = op2.items.find((i) => i.id === t3.getId());
-          if (!itemOp)
-            return { item: t3, operation: op2 };
-          return {
-            item: t3,
-            operation: {
-              class: "Transformation",
-              method: "applyMatrix",
-              items: [{
-                id: t3.getId(),
-                matrix: {
-                  translateX: -itemOp.matrix.translateX,
-                  translateY: -itemOp.matrix.translateY,
-                  scaleX: 1 / itemOp.matrix.scaleX,
-                  scaleY: 1 / itemOp.matrix.scaleY,
-                  shearX: 0,
-                  shearY: 0
-                }
-              }]
-            }
-          };
-        });
-      }
-      case "translateTo":
-        return mapItemsByOperation(this.transformation, (transformation) => {
-          return {
-            ...this.operation,
-            x: transformation.getTranslation().x,
-            y: transformation.getTranslation().y
-          };
-        });
-      case "translateBy": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...this.operation,
-            x: -op2.x,
-            y: -op2.y
-          };
-        });
-      }
-      case "scaleTo":
-      case "scaleToRelativeTo": {
-        return mapItemsByOperation(this.transformation, (transformation) => {
-          return {
-            ...op,
-            x: transformation.getScale().x,
-            y: transformation.getScale().y
-          };
-        });
-      }
-      case "scaleBy":
-      case "scaleByRelativeTo": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...op2,
-            x: 1 / op2.x,
-            y: 1 / op2.y
-          };
-        });
-      }
-      case "rotateTo":
-        return mapItemsByOperation(this.transformation, (transformation) => {
-          return {
-            ...this.operation,
-            degree: transformation.getRotation()
-          };
-        });
-      case "scaleByTranslateBy": {
-        const op2 = this.operation;
-        const scaleTransformation = mapItemsByOperation(this.transformation, () => {
-          const scaleX = 1 / op2.scale.x;
-          const scaleY = 1 / op2.scale.y;
-          const translateX = -op2.translate.x;
-          const translateY = -op2.translate.y;
-          return {
-            ...op2,
-            scale: {
-              x: scaleX,
-              y: scaleY
-            },
-            translate: {
-              x: translateX,
-              y: translateY
-            }
-          };
-        });
-        return scaleTransformation;
-      }
-      case "rotateBy": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...this.operation,
-            degree: -op2.degree
-          };
-        });
-      }
-      case "transformMany": {
-        const { operation, transformation } = this;
-        return transformation.map((currTrans) => {
-          const op2 = operation.items[currTrans.getId()];
-          const m = op2.method === "applyMatrix" ? op2.matrix : op2.method === "scaleByTranslateBy" ? { translateX: -op2.translate.x, translateY: -op2.translate.y, scaleX: 1 / op2.scale.x, scaleY: 1 / op2.scale.y, shearX: 0, shearY: 0 } : { translateX: 0, translateY: 0, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 };
-          return {
-            item: currTrans,
-            operation: {
-              class: "Transformation",
-              method: "applyMatrix",
-              items: [{
-                id: currTrans.getId(),
-                matrix: {
-                  translateX: op2.method === "applyMatrix" ? -m.translateX : m.translateX,
-                  translateY: op2.method === "applyMatrix" ? -m.translateY : m.translateY,
-                  scaleX: op2.method === "applyMatrix" ? 1 / m.scaleX : m.scaleX,
-                  scaleY: op2.method === "applyMatrix" ? 1 / m.scaleY : m.scaleY,
-                  shearX: 0,
-                  shearY: 0
-                }
-              }]
-            }
-          };
-        });
-      }
-      case "locked": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...op2,
-            item: [...op2.item],
-            method: "unlocked",
-            locked: false
-          };
-        });
-      }
-      case "unlocked": {
-        const op2 = this.operation;
-        return mapItemsByOperation(this.transformation, () => {
-          return {
-            ...op2,
-            item: [...op2.item],
-            method: "locked",
-            locked: true
-          };
-        });
-      }
-      default:
-        return [
-          { item: this.transformation[0], operation: this.operation }
-        ];
-    }
-  }
-}
-
-class DefaultTransformationData {
-  translateX;
-  translateY;
-  scaleX;
-  scaleY;
-  rotate;
-  isLocked;
-  constructor(translateX = 0, translateY = 0, scaleX = 1, scaleY = 1, rotate = 0, isLocked = false) {
-    this.translateX = translateX;
-    this.translateY = translateY;
-    this.scaleX = scaleX;
-    this.scaleY = scaleY;
-    this.rotate = rotate;
-    this.isLocked = isLocked;
-  }
-}
-var defaultData = new DefaultTransformationData;
-
-class Transformation {
-  id;
-  events;
-  subject = new SubjectOperation;
-  matrix = new Matrix2;
-  previous = new Matrix2;
-  rotate = defaultData.rotate;
-  isLocked = false;
-  constructor(id2 = "", events2) {
-    this.id = id2;
-    this.events = events2;
-  }
-  serialize() {
-    return {
-      translateX: this.matrix.translateX,
-      translateY: this.matrix.translateY,
-      scaleX: this.matrix.scaleX,
-      scaleY: this.matrix.scaleY,
-      rotate: this.rotate,
-      isLocked: this.isLocked
-    };
-  }
-  deserialize(data) {
-    this.previous = this.matrix.copy();
-    if (data.translateX) {
-      this.matrix.translateX = data.translateX;
-    }
-    if (data.translateY) {
-      this.matrix.translateY = data.translateY;
-    }
-    if (data.scaleX) {
-      this.matrix.scaleX = data.scaleX;
-    }
-    if (data.scaleY) {
-      this.matrix.scaleY = data.scaleY;
-    }
-    if (data.isLocked) {
-      this.isLocked = data.isLocked;
-    }
-    if (data.rotate) {
-      this.rotate = data.rotate;
-    }
-    this.subject.publish(this, {
-      class: "Transformation",
-      method: "deserialize",
-      item: [this.id],
-      data
-    });
-    return this;
-  }
-  copy(id2) {
-    const { translateX, translateY, scaleX, scaleY } = this.matrix;
-    const { rotate } = this;
-    return new Transformation(id2 || "", this.events).deserialize({
-      translateX,
-      translateY,
-      scaleX,
-      scaleY,
-      rotate,
-      isLocked: false
-    });
-  }
-  emit(operation) {
-    if (this.events) {
-      const command = new TransformationCommand([this], operation);
-      command.apply();
-      this.events.emit(operation, command);
-    } else {
-      this.apply(operation);
-    }
-  }
-  setId(id2) {
-    this.id = id2;
-  }
-  apply(op) {
-    this.previous = this.matrix.copy();
-    switch (op.method) {
-      case "applyMatrix": {
-        const itemOp = op.items.find((i) => i.id === this.id);
-        if (itemOp) {
-          this.matrix.scale(itemOp.matrix.scaleX, itemOp.matrix.scaleY);
-          this.matrix.translate(itemOp.matrix.translateX, itemOp.matrix.translateY);
-        }
-        break;
-      }
-      case "translateTo":
-        this.applyTranslateTo(op.x, op.y);
-        break;
-      case "translateBy":
-        this.applyTranslateBy(op.x, op.y);
-        break;
-      case "scaleTo":
-        this.applyScaleTo(op.x, op.y);
-        break;
-      case "scaleBy":
-        this.applyScaleBy(op.x, op.y);
-        break;
-      case "scaleToRelativeTo":
-        this.applyScaleToRelativeTo(op.x, op.y, op.point);
-        break;
-      case "scaleByRelativeTo":
-        this.applyScaleByRelativeTo(op.x, op.y, op.point);
-        break;
-      case "rotateTo":
-        this.applyRotateTo(op.degree);
-        break;
-      case "rotateBy":
-        this.applyRotateBy(op.degree);
-        break;
-      case "scaleByTranslateBy":
-        this.applyScaleByTranslateBy(op.scale, op.translate);
-        break;
-      case "transformMany":
-        this.applyTransformMany(op.items[this.id]);
-        break;
-      case "locked":
-        this.applyLocked(op.locked);
-        break;
-      case "unlocked":
-        this.applyUnlocked(op.locked);
-        break;
-      default:
-        return;
-    }
-    this.subject.publish(this, op);
-  }
-  applyTranslateTo(x, y) {
-    this.matrix.translateX = x;
-    this.matrix.translateY = y;
-  }
-  applyTranslateBy(x, y) {
-    this.matrix.translate(x, y);
-  }
-  applyScaleTo(x, y) {
-    this.matrix.scaleX = x;
-    this.matrix.scaleY = y;
-  }
-  applyScaleBy(x, y) {
-    this.matrix.scale(x, y);
-  }
-  applyScaleByTranslateBy(scale, translate) {
-    this.matrix.scale(scale.x, scale.y);
-    this.matrix.translate(translate.x, translate.y);
-  }
-  applyTransformMany(op) {
-    if (op.method === "applyMatrix") {
-      this.matrix.scale(op.matrix.scaleX, op.matrix.scaleY);
-      this.matrix.translate(op.matrix.translateX, op.matrix.translateY);
-    } else if (op.method === "scaleByTranslateBy") {
-      this.applyScaleByTranslateBy(op.scale, op.translate);
-    } else if (op.method === "scaleBy") {
-      this.applyScaleBy(op.x, op.y);
-    } else if (op.method === "translateBy") {
-      this.applyTranslateBy(op.x, op.y);
-    } else if (op.method === "translateTo") {
-      this.applyTranslateTo(op.x, op.y);
-    }
-  }
-  applyScaleByRelativeTo(x, y, point3) {
-    const scaleX = this.matrix.scaleX * x;
-    const scaleY = this.matrix.scaleY * y;
-    this.matrix.translateX = -point3.x * scaleX + point3.x;
-    this.matrix.translateY = -point3.y * scaleY + point3.y;
-    this.matrix.scaleX = scaleX;
-    this.matrix.scaleY = scaleY;
-  }
-  applyScaleToRelativeTo(x, y, point3) {
-    this.applyTranslateBy(-point3.x, -point3.y);
-    this.applyScaleTo(x, y);
-    this.applyTranslateBy(point3.x, point3.y);
-  }
-  applyRotateTo(degree) {
-    if (degree > 0) {
-      while (degree > 360) {
-        degree -= 360;
-      }
-      if (degree === 360) {
-        degree = 0;
-      }
-    } else {
-      while (degree < -360) {
-        degree += 360;
-      }
-      if (degree === -360) {
-        degree = 0;
-      }
-    }
-    this.rotate = degree;
-  }
-  applyRotateBy(degree) {
-    this.applyRotateTo(this.rotate + degree);
-  }
-  applyLocked(locked7) {
-    this.isLocked = locked7;
-  }
-  applyUnlocked(locked7) {
-    this.isLocked = locked7;
-  }
-  getTranslation() {
-    return { x: this.matrix.translateX, y: this.matrix.translateY };
-  }
-  getScale() {
-    return { x: this.matrix.scaleX, y: this.matrix.scaleY };
-  }
-  getRotation() {
-    return this.rotate;
-  }
-  getInverse() {
-    const copy22 = this.copy();
-    copy22.matrix.invert();
-    return copy22;
-  }
-  getId() {
-    return this.id;
-  }
-  emitMatrix(matrix, timeStamp) {
-    this.emit({
-      class: "Transformation",
-      method: "applyMatrix",
-      items: [{ id: this.id, matrix }],
-      timeStamp
-    });
-  }
-  translateTo(x, y, timeStamp) {
-    if (!this.id) {}
-    this.emitMatrix({
-      translateX: x - this.matrix.translateX,
-      translateY: y - this.matrix.translateY,
-      scaleX: 1,
-      scaleY: 1,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  translateBy(x, y, timeStamp) {
-    if (!this.id) {}
-    if (x === 0 && y === 0) {
-      return;
-    }
-    this.emitMatrix({
-      translateX: x,
-      translateY: y,
-      scaleX: 1,
-      scaleY: 1,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  scaleTo(x, y, timeStamp) {
-    this.emitMatrix({
-      translateX: 0,
-      translateY: 0,
-      scaleX: x / this.matrix.scaleX,
-      scaleY: y / this.matrix.scaleY,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  scaleBy(x, y, timeStamp) {
-    if (x === 0 && y === 0) {
-      return;
-    }
-    this.emitMatrix({
-      translateX: 0,
-      translateY: 0,
-      scaleX: x,
-      scaleY: y,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  scaleByTranslateBy(scale, translate, timeStamp) {
-    if (scale.x === 0 && scale.y === 0 && translate.x === 0 && translate.y === 0) {
-      return;
-    }
-    this.emitMatrix({
-      translateX: translate.x,
-      translateY: translate.y,
-      scaleX: scale.x,
-      scaleY: scale.y,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  rotateTo(degree, timeStamp) {
-    this.emit({
-      class: "Transformation",
-      method: "rotateTo",
-      item: [this.id],
-      degree,
-      timeStamp
-    });
-  }
-  rotateBy(degree, timeStamp) {
-    this.emit({
-      class: "Transformation",
-      method: "rotateBy",
-      item: [this.id],
-      degree,
-      timeStamp
-    });
-  }
-  scaleToRelativeTo(x, y, _point, timeStamp) {
-    this.emitMatrix({
-      translateX: 0,
-      translateY: 0,
-      scaleX: x / this.matrix.scaleX,
-      scaleY: y / this.matrix.scaleY,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  scaleByRelativeTo(x, y, point3, timeStamp) {
-    const { scaleX: sx0, scaleY: sy0, translateX: tx0, translateY: ty0 } = this.matrix;
-    const newSx = sx0 * x;
-    const newSy = sy0 * y;
-    this.emitMatrix({
-      translateX: -point3.x * newSx + point3.x - tx0,
-      translateY: -point3.y * newSy + point3.y - ty0,
-      scaleX: x,
-      scaleY: y,
-      shearX: 0,
-      shearY: 0
-    }, timeStamp);
-  }
-  setIsLocked(isLocked, timestamp) {
-    if (isLocked) {
-      this.emit({
-        class: "Transformation",
-        method: "locked",
-        item: [this.id],
-        locked: true,
-        timestamp
-      });
-    } else {
-      this.emit({
-        class: "Transformation",
-        method: "unlocked",
-        item: [this.id],
-        locked: false,
-        timestamp
-      });
-    }
-  }
-}
-
-class DrawingContext {
-  camera;
-  ctx;
-  cursorCtx;
-  matrix;
-  isBorderInvisible = false;
-  shapeVisibilityTreshold = 3;
-  rectangleVisibilyTreshold = 2;
-  constructor(camera, ctx, cursorCtx, matrix = new Matrix2) {
-    this.camera = camera;
-    this.ctx = ctx;
-    this.cursorCtx = cursorCtx;
-    this.matrix = matrix;
-    this.setCamera(camera);
-  }
-  dpi() {
-    return conf.getDPI();
-  }
-  setCamera(camera) {
-    this.camera = camera;
-    this.matrix = camera.getMatrix();
-    const scale = this.matrix.scaleX;
-    this.isBorderInvisible = 4 * scale < 0.1;
-  }
-  clear() {
-    this.ctx.setTransform(1 * this.dpi(), 0, 0, 1 * this.dpi(), 0, 0);
-    this.ctx.clearRect(0, 0, conf.getDocumentWidth(), conf.getDocumentHeight());
-    this.matrix.applyToContext(this.ctx);
-  }
-  clearCursor() {
-    if (!this.cursorCtx) {
-      return;
-    }
-    this.cursorCtx.setTransform(1 * this.dpi(), 0, 0, 1 * this.dpi(), 0, 0);
-    this.cursorCtx.clearRect(0, 0, conf.getDocumentWidth(), conf.getDocumentHeight());
-    this.matrix.applyToContext(this.cursorCtx);
-  }
-  applyChanges() {
-    this.matrix.applyToContext(this.ctx);
-  }
-  getCameraScale() {
-    return this.camera.getScale();
-  }
-}
 var LinePatterns = {
   solid: [],
   dot: [1, 2],
@@ -236803,388 +236188,30 @@ class Paths {
     return !isAllPathsOpened;
   }
 }
-
-class ConnectorCommand {
-  connector;
-  operation;
-  reverse;
-  constructor(connector, operation) {
-    this.connector = connector;
-    this.operation = operation;
-    this.reverse = this.getReverse();
-  }
-  merge(op) {
-    this.operation = op;
-    return this;
-  }
-  apply() {
-    for (const connector of this.connector) {
-      connector.apply(this.operation);
-    }
-  }
-  revert() {
-    for (const { item, operation } of this.reverse) {
-      item.apply(operation);
-    }
-  }
-  getReverse() {
-    const reverse = [];
-    switch (this.operation.method) {
-      case "setStartPoint":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              startPointData: connector.getStartPoint().serialize()
-            }
-          });
-        }
-        break;
-      case "setEndPoint":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              endPointData: connector.getEndPoint().serialize()
-            }
-          });
-        }
-        break;
-      case "setMiddlePoint":
-        for (const connector of this.connector) {
-          const middlePoint = connector.getMiddlePoint();
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              middlePointData: middlePoint ? middlePoint.serialize() : null
-            }
-          });
-        }
-        break;
-      case "setStartPointerStyle":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              startPointerStyle: connector.getStartPointerStyle()
-            }
-          });
-        }
-        break;
-      case "setEndPointerStyle":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              endPointerStyle: connector.getEndPointerStyle()
-            }
-          });
-        }
-        break;
-      case "setLineStyle":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              lineStyle: connector.getLineStyle()
-            }
-          });
-        }
-        break;
-      case "setBorderStyle":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              borderStyle: connector.getBorderStyle()
-            }
-          });
-        }
-        break;
-      case "setLineWidth":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              lineWidth: connector.getLineWidth()
-            }
-          });
-        }
-        break;
-      case "setLineColor":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: {
-              ...this.operation,
-              lineColor: connector.getLineColor()
-            }
-          });
-        }
-        break;
-      case "switchPointers":
-        for (const connector of this.connector) {
-          reverse.push({
-            item: connector,
-            operation: this.operation
-          });
-        }
-        break;
-    }
-    return reverse;
-  }
-}
-var _sessionStorage;
-if (typeof window !== "undefined" && window.sessionStorage) {
-  _sessionStorage = window.sessionStorage;
-} else {
-
-  class NodeStoragePolyfill {
-    _store = {};
-    clear() {
-      this._store = {};
-    }
-    getItem(key) {
-      return Object.prototype.hasOwnProperty.call(this._store, key) ? this._store[key] : null;
-    }
-    key(index) {
-      const keys = Object.keys(this._store);
-      return keys[index] ?? null;
-    }
-    removeItem(key) {
-      delete this._store[key];
-    }
-    setItem(key, value) {
-      this._store[key] = value;
-    }
-    get length() {
-      return Object.keys(this._store).length;
-    }
-  }
-  _sessionStorage = new NodeStoragePolyfill;
-}
-
-class SessionStorage {
-  set(key, value) {
-    const boardId = this.getBoardId() || "";
-    _sessionStorage.setItem(boardId + "_" + key, JSON.stringify(value));
-  }
-  get(key) {
-    const boardId = this.getBoardId() || "";
-    const item = _sessionStorage.getItem(boardId + "_" + key);
-    if (!item || item === "undefined") {
-      return;
-    }
-    return JSON.parse(item);
-  }
-  remove(key) {
-    const boardId = this.getBoardId() || "";
-    _sessionStorage.removeItem(boardId + "_" + key);
-  }
-  setConnectorStrokeStyle(color) {
-    this.set(`connectorStrokeStyle`, color);
-  }
-  getConnectorStrokeStyle() {
-    return this.get("connectorStrokeStyle");
-  }
-  setConnectorLineWidth(width) {
-    this.set(`connectorLineWidth`, width);
-  }
-  getConnectorLineWidth() {
-    return this.get("connectorLineWidth");
-  }
-  setConnectorFillColor(color) {
-    this.set(`connectorFillColor`, color);
-  }
-  getConnectorFillColor() {
-    return this.get("connectorFillColor");
-  }
-  setConnectorPointer(type, edge) {
-    this.set(`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`, type);
-  }
-  getConnectorPointer(edge) {
-    return this.get(`connector${edge.charAt(0).toUpperCase() + edge.slice(1)}Pointer`);
-  }
-  setConnectorLineStyle(type) {
-    this.set("connectorLineStyle", type);
-  }
-  getConnectorLineStyle() {
-    return this.get("connectorLineStyle");
-  }
-  setShapeData(data) {
-    this.set("lastShapeData", data);
-  }
-  getShapeData() {
-    return this.get("lastShapeData");
-  }
-  setStickerData(data) {
-    this.set("lastSticker", data);
-  }
-  getStickerData() {
-    return this.get("lastSticker");
-  }
-  setShapeWidth(width) {
-    this.set("shapeWidth", width);
-  }
-  getShapeWidth() {
-    return this.get("shapeWidth");
-  }
-  setShapeHeight(height) {
-    this.set("shapeHeight", height);
-  }
-  getShapeHeight() {
-    return this.get("shapeHeight");
-  }
-  setImageDimensions(dimension) {
-    this.set("imageDimensions", dimension);
-  }
-  getImageDimensions() {
-    return this.get("imageDimensions");
-  }
-  setFontSize(itemType, size2) {
-    this.set(`fontSize_${itemType}`, size2);
-  }
-  getFontSize(itemType) {
-    return this.get(`fontSize_${itemType}`);
-  }
-  setFontStyles(itemType, styles) {
-    this.set(`fontStyles_${itemType}`, styles);
-  }
-  getFontStyles(itemType) {
-    return this.get(`fontStyles_${itemType}`);
-  }
-  setFontColor(itemType, color) {
-    this.set(`fontColor_${itemType}`, color);
-  }
-  getFontColor(itemType) {
-    return this.get(`fontColor_${itemType}`);
-  }
-  setFontHighlight(itemType, highlightColor) {
-    this.set(`fontHighlightColor_${itemType}`, highlightColor);
-  }
-  getFontHighlight(itemType) {
-    return this.get(`fontHighlightColor_${itemType}`);
-  }
-  setHorizontalAlignment(itemType, horizontalAlignment) {
-    this.set(`fontHorizontalAlignment_${itemType}`, horizontalAlignment);
-  }
-  getHorizontalAlignment(itemType) {
-    return this.get(`fontHorizontalAlignment_${itemType}`);
-  }
-  setVerticalAlignment(itemType, verticalAlignment) {
-    this.set(`fontVerticalAlignment_${itemType}`, verticalAlignment);
-  }
-  getVerticalAlignment(itemType) {
-    return this.get(`fontVerticalAlignment_${itemType}`);
-  }
-  setLastAIRequest(request) {
-    _sessionStorage.setItem("lastAIRequest", request);
-  }
-  getLastAIRequest() {
-    return _sessionStorage.getItem("lastAIRequest");
-  }
-  removeLastAIRequest() {
-    _sessionStorage.removeItem("lastAIRequest");
-  }
-  clear() {
-    _sessionStorage.clear();
-  }
-  getBoardId() {
-    if (typeof window === "undefined") {
-      return;
-    }
-    return window.location.href.split("/").pop()?.split("?")[0];
-  }
-}
-var tempStorage = new SessionStorage;
-function getTranslationFromHTML(el) {
-  const transform = el.style.transform;
-  const translateMatch = transform.match(/translate\(([^)]+)\)/);
-  const [translateX, translateY] = translateMatch ? translateMatch[1].split(",").map((value) => parseFloat(value)) : [0, 0];
-  return [translateX, translateY];
-}
-function getScaleFromHTML(el) {
-  const transform = el.style.transform;
-  const scaleMatch = transform.match(/scale\(([^)]+)\)/);
-  const [scaleX, scaleY] = scaleMatch ? scaleMatch[1].split(",").map((value) => parseFloat(value)) : [1, 1];
-  return [scaleX, scaleY];
-}
-function translateElementBy(el, x, y) {
-  const [exX, exY] = getTranslationFromHTML(el);
-  const [newX, newY] = [exX + x, exY + y];
-  const [scaleX, scaleY] = getScaleFromHTML(el);
-  el.style.transform = `translate(${newX}px, ${newY}px) scale(${scaleX}, ${scaleY})`;
-  return el;
-}
-function scaleElementBy(el, scaleX, scaleY) {
-  const [currentScaleX, currentScaleY] = getScaleFromHTML(el);
-  const [newScaleX, newScaleY] = [
-    currentScaleX * scaleX,
-    currentScaleY * scaleY
-  ];
-  const [translateX, translateY] = getTranslationFromHTML(el);
-  el.style.transform = `translate(${translateX}px, ${translateY}px) scale(${newScaleX}, ${newScaleY})`;
-  return el;
-}
-function resetElementScale(el) {
-  const [x, y] = getTranslationFromHTML(el);
-  el.style.transform = `translate(${x}px, ${y}px) scale(1, 1)`;
-  return el;
-}
-function positionRelatively(toPosition, positionBy, padding2 = 0) {
-  const [translateX, translateY] = getTranslationFromHTML(toPosition);
-  const [frameX, frameY] = getTranslationFromHTML(positionBy);
-  const [dx, dy] = [translateX - frameX, translateY - frameY];
-  const verticalAlignment = toPosition.getAttribute("data-vertical-alignment");
-  const horizontalAlignment = toPosition.getAttribute("data-vertical-alignment");
-  let paddingX = padding2;
-  let paddingY = padding2;
-  if (verticalAlignment && verticalAlignment === "bottom") {
-    paddingY = -padding2;
-  }
-  if (horizontalAlignment && horizontalAlignment === "right") {
-    paddingX = -padding2;
-  }
-  const [scaleX, scaleY] = getScaleFromHTML(toPosition);
-  toPosition.style.transform = `translate(${dx + paddingX}px, ${dy + paddingY}px) scale(${scaleX}, ${scaleY})`;
-  return toPosition;
-}
-function positionAbsolutely(toPosition, positionBy) {
-  const [translateX, translateY] = getTranslationFromHTML(toPosition);
-  const [frameX, frameY] = getTranslationFromHTML(positionBy);
-  const [dx, dy] = [translateX + frameX, translateY + frameY];
-  const [scaleX, scaleY] = getScaleFromHTML(toPosition);
-  toPosition.style.transform = `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`;
-  return toPosition;
-}
 var Custom = {
   name: "Custom",
   textBounds: new Mbr(0, -10, 100, -1),
-  path: new Path2([
-    new Line(new Point3(0, 0), new Point3(100, 0)),
-    new Line(new Point3(100, 0), new Point3(100, 100)),
-    new Line(new Point3(100, 100), new Point3(0, 100)),
-    new Line(new Point3(0, 100), new Point3(0, 0))
-  ], true),
+  get path() {
+    return new Path2([
+      new Line(new Point3(0, 0), new Point3(100, 0)),
+      new Line(new Point3(100, 0), new Point3(100, 100)),
+      new Line(new Point3(100, 100), new Point3(0, 100)),
+      new Line(new Point3(0, 100), new Point3(0, 0))
+    ], true);
+  },
   anchorPoints: [new Point3(0, 50), new Point3(100, 50), new Point3(50, 0), new Point3(50, 100)]
 };
 var Frame16x9 = {
   name: "16:9",
   textBounds: new Mbr(0, -10, 200, -1),
-  path: new Path2([
-    new Line(new Point3(0, 0), new Point3(200, 0)),
-    new Line(new Point3(200, 0), new Point3(200, 200 * (739 / 1314))),
-    new Line(new Point3(200, 200 * (739 / 1314)), new Point3(0, 200 * (739 / 1314))),
-    new Line(new Point3(0, 200 * (739 / 1314)), new Point3(0, 0))
-  ], true),
+  get path() {
+    return new Path2([
+      new Line(new Point3(0, 0), new Point3(200, 0)),
+      new Line(new Point3(200, 0), new Point3(200, 200 * (739 / 1314))),
+      new Line(new Point3(200, 200 * (739 / 1314)), new Point3(0, 200 * (739 / 1314))),
+      new Line(new Point3(0, 200 * (739 / 1314)), new Point3(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point3(0, 100 * (739 / 1314)),
     new Point3(200, 100 * (739 / 1314)),
@@ -237195,12 +236222,14 @@ var Frame16x9 = {
 var Frame4x3 = {
   name: "4:3",
   textBounds: new Mbr(0, -10, 200, -1),
-  path: new Path2([
-    new Line(new Point3(0, 0), new Point3(200, 0)),
-    new Line(new Point3(200, 0), new Point3(200, 200 * (853 / 1138))),
-    new Line(new Point3(200, 200 * (853 / 1138)), new Point3(0, 200 * (853 / 1138))),
-    new Line(new Point3(0, 200 * (853 / 1138)), new Point3(0, 0))
-  ], true),
+  get path() {
+    return new Path2([
+      new Line(new Point3(0, 0), new Point3(200, 0)),
+      new Line(new Point3(200, 0), new Point3(200, 200 * (853 / 1138))),
+      new Line(new Point3(200, 200 * (853 / 1138)), new Point3(0, 200 * (853 / 1138))),
+      new Line(new Point3(0, 200 * (853 / 1138)), new Point3(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point3(0, 100 * (853 / 1138)),
     new Point3(200, 100 * (853 / 1138)),
@@ -237211,12 +236240,14 @@ var Frame4x3 = {
 var A4 = {
   name: "A4",
   textBounds: new Mbr(0, -15, 100, -1),
-  path: new Path2([
-    new Line(new Point3(0, 0), new Point3(100, 0)),
-    new Line(new Point3(100, 0), new Point3(100, 100 * (1172 / 828))),
-    new Line(new Point3(100, 100 * (1172 / 828)), new Point3(0, 100 * (1172 / 828))),
-    new Line(new Point3(0, 100 * (1172 / 828)), new Point3(0, 0))
-  ], true),
+  get path() {
+    return new Path2([
+      new Line(new Point3(0, 0), new Point3(100, 0)),
+      new Line(new Point3(100, 0), new Point3(100, 100 * (1172 / 828))),
+      new Line(new Point3(100, 100 * (1172 / 828)), new Point3(0, 100 * (1172 / 828))),
+      new Line(new Point3(0, 100 * (1172 / 828)), new Point3(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point3(0, 50 * (1172 / 828)),
     new Point3(100, 50 * (1172 / 828)),
@@ -237227,12 +236258,14 @@ var A4 = {
 var Letter = {
   name: "Letter",
   textBounds: new Mbr(0, -10, 100, -1),
-  path: new Path2([
-    new Line(new Point3(0, 0), new Point3(100, 0)),
-    new Line(new Point3(100, 0), new Point3(100, 100 * (1120 / 867))),
-    new Line(new Point3(100, 100 * (1120 / 867)), new Point3(0, 100 * (1120 / 867))),
-    new Line(new Point3(0, 100 * (1120 / 867)), new Point3(0, 0))
-  ], true),
+  get path() {
+    return new Path2([
+      new Line(new Point3(0, 0), new Point3(100, 0)),
+      new Line(new Point3(100, 0), new Point3(100, 100 * (1120 / 867))),
+      new Line(new Point3(100, 100 * (1120 / 867)), new Point3(0, 100 * (1120 / 867))),
+      new Line(new Point3(0, 100 * (1120 / 867)), new Point3(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point3(0, 50 * (1120 / 867)),
     new Point3(100, 50 * (1120 / 867)),
@@ -237243,23 +236276,27 @@ var Letter = {
 var Frame1x1 = {
   name: "1:1",
   textBounds: new Mbr(0, -10, 100, -1),
-  path: new Path2([
-    new Line(new Point3(0, 0), new Point3(100, 0)),
-    new Line(new Point3(100, 0), new Point3(100, 100)),
-    new Line(new Point3(100, 100), new Point3(0, 100)),
-    new Line(new Point3(0, 100), new Point3(0, 0))
-  ], true),
+  get path() {
+    return new Path2([
+      new Line(new Point3(0, 0), new Point3(100, 0)),
+      new Line(new Point3(100, 0), new Point3(100, 100)),
+      new Line(new Point3(100, 100), new Point3(0, 100)),
+      new Line(new Point3(0, 100), new Point3(0, 0))
+    ], true);
+  },
   anchorPoints: [new Point3(0, 50), new Point3(100, 50), new Point3(50, 0), new Point3(50, 100)]
 };
 var Frame3x2 = {
   name: "3:2",
   textBounds: new Mbr(0, -10, 200, -1),
-  path: new Path2([
-    new Line(new Point3(0, 0), new Point3(200, 0)),
-    new Line(new Point3(200, 0), new Point3(200, 200 * (200 / 300))),
-    new Line(new Point3(200, 200 * (200 / 300)), new Point3(0, 200 * (200 / 300))),
-    new Line(new Point3(0, 200 * (200 / 300)), new Point3(0, 0))
-  ], true),
+  get path() {
+    return new Path2([
+      new Line(new Point3(0, 0), new Point3(200, 0)),
+      new Line(new Point3(200, 0), new Point3(200, 200 * (200 / 300))),
+      new Line(new Point3(200, 200 * (200 / 300)), new Point3(0, 200 * (200 / 300))),
+      new Line(new Point3(0, 200 * (200 / 300)), new Point3(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point3(0, 100 * (200 / 300)),
     new Point3(200, 100 * (200 / 300)),
@@ -237270,12 +236307,14 @@ var Frame3x2 = {
 var Frame9x18 = {
   name: "9:18",
   textBounds: new Mbr(0, -10, 200, -1),
-  path: new Path2([
-    new Line(new Point3(0, 0), new Point3(200, 0)),
-    new Line(new Point3(200, 0), new Point3(200, 200 * (1230 / 612))),
-    new Line(new Point3(200, 200 * (1230 / 612)), new Point3(0, 200 * (1230 / 612))),
-    new Line(new Point3(0, 200 * (1230 / 612)), new Point3(0, 0))
-  ], true),
+  get path() {
+    return new Path2([
+      new Line(new Point3(0, 0), new Point3(200, 0)),
+      new Line(new Point3(200, 0), new Point3(200, 200 * (1230 / 612))),
+      new Line(new Point3(200, 200 * (1230 / 612)), new Point3(0, 200 * (1230 / 612))),
+      new Line(new Point3(0, 200 * (1230 / 612)), new Point3(0, 0))
+    ], true);
+  },
   anchorPoints: [
     new Point3(0, 100 * (1230 / 612)),
     new Point3(200, 100 * (1230 / 612)),
@@ -237724,6 +236763,34 @@ function parseHTMLAINode(el) {
   return aiNodeData;
 }
 
+class SubjectOperation {
+  observers = [];
+  subscribe(observer) {
+    const index = this.observers.indexOf(observer);
+    if (index === -1) {
+      this.observers.push(observer);
+    }
+  }
+  unsubscribe(observer) {
+    const index = this.observers.indexOf(observer);
+    if (index !== -1) {
+      this.observers.splice(index, 1);
+    }
+  }
+  publish(subject, op) {
+    for (const observer of this.observers) {
+      observer(subject, op);
+    }
+  }
+}
+function mapItemsByOperation(item, getCallback) {
+  const items = Array.isArray(item) ? item : [item];
+  return items.map((item2) => {
+    const operation = getCallback(item2);
+    return { item: item2, operation };
+  });
+}
+
 class LinkToCommand {
   linkTo;
   operation;
@@ -239352,7 +238419,10 @@ var setLink = (editor, link, selection) => {
     return;
   }
   const format = link ? "rgba(71, 120, 245, 1)" : "rgb(20, 21, 26)";
-  Editor.addMark(editor, "fontColor", format);
+  Transforms.setNodes(editor, { fontColor: format }, {
+    match: (n4) => !Editor.isEditor(n4) && n4.type === "text",
+    split: true
+  });
   for (const [node3, path22] of Editor.nodes(editor, {
     match: (n4) => !Editor.isEditor(n4) && n4.type === "text"
   })) {
@@ -245327,7 +244397,7 @@ function persistLeafFormats(children) {
   }, {});
 }
 function plugin(opts) {
-  var compiler2 = function compiler3(node22) {
+  var compiler2 = function compiler(node22) {
     return node22.children.map(function(c) {
       return deserialize(c, opts);
     });
@@ -245439,6 +244509,7 @@ class MarkdownProcessor {
   isProcessingChunk = false;
   stopProcessingMarkDownCb = null;
   currentNode = "";
+  doneResolvers = [];
   editor;
   subject = new Subject;
   constructor(editor) {
@@ -245450,6 +244521,19 @@ class MarkdownProcessor {
   getStopProcessingMarkDownCb() {
     return this.stopProcessingMarkDownCb;
   }
+  waitForDone() {
+    if (!this.isProcessingChunk && this.chunksQueue.length === 0) {
+      return Promise.resolve();
+    }
+    return new Promise((resolve) => {
+      this.doneResolvers.push(resolve);
+    });
+  }
+  notifyDone() {
+    const resolvers = this.doneResolvers;
+    this.doneResolvers = [];
+    resolvers.forEach((r2) => r2());
+  }
   deserializeMarkdown(isNewParagraphNeeded) {
     const lastNode = this.getText()[this.getText().length - 1];
     if (lastNode.type !== "paragraph") {
@@ -245506,6 +244590,7 @@ class MarkdownProcessor {
   async processNextChunk() {
     if (this.chunksQueue.length === 0) {
       this.isProcessingChunk = false;
+      this.notifyDone();
       return;
     }
     this.isProcessingChunk = true;
@@ -245513,6 +244598,7 @@ class MarkdownProcessor {
     if (chunk === "StopProcessingMarkdown") {
       await this.deserializeMarkdownAsync(false);
       this.isProcessingChunk = false;
+      this.notifyDone();
       this.currentNode = "";
       if (this.stopProcessingMarkDownCb) {
         selectWholeText(this.editor);
@@ -245774,10 +244860,22 @@ function setSelectionFontStyle(editor, style) {
     const isAllNodesContainStyle = selectionStyles.every((styleArr) => styleArr.includes(style2));
     const isSomeNodeContainStyle = selectionStyles.some((styleArr) => styleArr.includes(style2));
     const isAllNodesNotContainStyle = selectionStyles.every((styleArr) => !styleArr.includes(style2));
+    let value;
     if (isAllNodesContainStyle) {
-      Editor.addMark(editor, style2, false);
+      value = false;
     } else if (isSomeNodeContainStyle || isAllNodesNotContainStyle) {
-      Editor.addMark(editor, style2, true);
+      value = true;
+    } else {
+      continue;
+    }
+    const { selection } = editor;
+    if (selection && Range.isExpanded(selection)) {
+      Transforms.setNodes(editor, { [style2]: value }, {
+        match: (n4) => !Editor.isEditor(n4) && n4.type === "text",
+        split: true
+      });
+    } else {
+      Editor.addMark(editor, style2, value);
     }
   }
 }
@@ -246382,6 +245480,589 @@ function setEditorFocus(editor, selectionContext) {
   }
 }
 
+class TransformationCommand {
+  transformation;
+  operation;
+  reverse;
+  constructor(transformation, operation) {
+    this.transformation = transformation;
+    this.operation = operation;
+    this.reverse = this.getReverse();
+  }
+  merge(op) {
+    this.operation = op;
+    this.reverse = this.getReverse();
+    return this;
+  }
+  apply() {
+    for (const transformation of this.transformation) {
+      transformation.apply(this.operation);
+    }
+  }
+  revert() {
+    this.reverse.forEach(({ item, operation }) => {
+      item.apply(operation);
+    });
+  }
+  getReverse() {
+    const op = this.operation;
+    switch (this.operation.method) {
+      case "applyMatrix": {
+        const op2 = this.operation;
+        return this.transformation.map((t3) => {
+          const itemOp = op2.items.find((i) => i.id === t3.getId());
+          if (!itemOp)
+            return { item: t3, operation: op2 };
+          return {
+            item: t3,
+            operation: {
+              class: "Transformation",
+              method: "applyMatrix",
+              items: [{
+                id: t3.getId(),
+                matrix: {
+                  translateX: -itemOp.matrix.translateX,
+                  translateY: -itemOp.matrix.translateY,
+                  scaleX: 1 / itemOp.matrix.scaleX,
+                  scaleY: 1 / itemOp.matrix.scaleY,
+                  shearX: 0,
+                  shearY: 0
+                }
+              }]
+            }
+          };
+        });
+      }
+      case "translateTo":
+        return mapItemsByOperation(this.transformation, (transformation) => {
+          return {
+            ...this.operation,
+            x: transformation.getTranslation().x,
+            y: transformation.getTranslation().y
+          };
+        });
+      case "translateBy": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...this.operation,
+            x: -op2.x,
+            y: -op2.y
+          };
+        });
+      }
+      case "scaleTo":
+      case "scaleToRelativeTo": {
+        return mapItemsByOperation(this.transformation, (transformation) => {
+          return {
+            ...op,
+            x: transformation.getScale().x,
+            y: transformation.getScale().y
+          };
+        });
+      }
+      case "scaleBy":
+      case "scaleByRelativeTo": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...op2,
+            x: 1 / op2.x,
+            y: 1 / op2.y
+          };
+        });
+      }
+      case "scaleByTranslateBy": {
+        const op2 = this.operation;
+        const scaleTransformation = mapItemsByOperation(this.transformation, () => {
+          const scaleX = 1 / op2.scale.x;
+          const scaleY = 1 / op2.scale.y;
+          const translateX = -op2.translate.x;
+          const translateY = -op2.translate.y;
+          return {
+            ...op2,
+            scale: {
+              x: scaleX,
+              y: scaleY
+            },
+            translate: {
+              x: translateX,
+              y: translateY
+            }
+          };
+        });
+        return scaleTransformation;
+      }
+      case "rotateTo":
+        return mapItemsByOperation(this.transformation, (transformation) => {
+          return {
+            ...this.operation,
+            degree: transformation.getRotation()
+          };
+        });
+      case "rotateBy": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...this.operation,
+            degree: -op2.degree
+          };
+        });
+      }
+      case "transformMany": {
+        const { operation, transformation } = this;
+        return transformation.map((currTrans) => {
+          const op2 = operation.items[currTrans.getId()];
+          const m = op2.method === "applyMatrix" ? op2.matrix : op2.method === "scaleByTranslateBy" ? { translateX: -op2.translate.x, translateY: -op2.translate.y, scaleX: 1 / op2.scale.x, scaleY: 1 / op2.scale.y, shearX: 0, shearY: 0 } : { translateX: 0, translateY: 0, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 };
+          return {
+            item: currTrans,
+            operation: {
+              class: "Transformation",
+              method: "applyMatrix",
+              items: [{
+                id: currTrans.getId(),
+                matrix: {
+                  translateX: op2.method === "applyMatrix" ? -m.translateX : m.translateX,
+                  translateY: op2.method === "applyMatrix" ? -m.translateY : m.translateY,
+                  scaleX: op2.method === "applyMatrix" ? 1 / m.scaleX : m.scaleX,
+                  scaleY: op2.method === "applyMatrix" ? 1 / m.scaleY : m.scaleY,
+                  shearX: 0,
+                  shearY: 0
+                }
+              }]
+            }
+          };
+        });
+      }
+      case "locked": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...op2,
+            item: [...op2.item],
+            method: "unlocked",
+            locked: false
+          };
+        });
+      }
+      case "unlocked": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => {
+          return {
+            ...op2,
+            item: [...op2.item],
+            method: "locked",
+            locked: true
+          };
+        });
+      }
+      default:
+        return [
+          { item: this.transformation[0], operation: this.operation }
+        ];
+    }
+  }
+}
+
+class DefaultTransformationData {
+  translateX;
+  translateY;
+  scaleX;
+  scaleY;
+  rotate;
+  isLocked;
+  constructor(translateX = 0, translateY = 0, scaleX = 1, scaleY = 1, rotate = 0, isLocked = false) {
+    this.translateX = translateX;
+    this.translateY = translateY;
+    this.scaleX = scaleX;
+    this.scaleY = scaleY;
+    this.rotate = rotate;
+    this.isLocked = isLocked;
+  }
+}
+var defaultData = new DefaultTransformationData;
+
+class Transformation {
+  id;
+  events;
+  subject = new SubjectOperation;
+  _matrix = new Matrix2;
+  previous = new Matrix2;
+  rotate = defaultData.rotate;
+  isLocked = false;
+  constructor(id2 = "", events2) {
+    this.id = id2;
+    this.events = events2;
+  }
+  getMatrixData() {
+    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = this._matrix;
+    return { translateX, translateY, scaleX, scaleY, shearX, shearY };
+  }
+  toMatrix() {
+    return this._matrix.copy();
+  }
+  applyToContext(ctx) {
+    this._matrix.applyToContext(ctx);
+  }
+  getTranslation() {
+    return { x: this._matrix.translateX, y: this._matrix.translateY };
+  }
+  getScale() {
+    return { x: this._matrix.scaleX, y: this._matrix.scaleY };
+  }
+  getRotation() {
+    return this.rotate;
+  }
+  setLocal(xOrData, y, scaleX, scaleY) {
+    this.previous = this._matrix.copy();
+    if (typeof xOrData === "object") {
+      if (xOrData.translateX !== undefined)
+        this._matrix.translateX = xOrData.translateX;
+      if (xOrData.translateY !== undefined)
+        this._matrix.translateY = xOrData.translateY;
+      if (xOrData.scaleX !== undefined)
+        this._matrix.scaleX = xOrData.scaleX;
+      if (xOrData.scaleY !== undefined)
+        this._matrix.scaleY = xOrData.scaleY;
+    } else {
+      this._matrix.translateX = xOrData;
+      this._matrix.translateY = y;
+      if (scaleX !== undefined)
+        this._matrix.scaleX = scaleX;
+      if (scaleY !== undefined)
+        this._matrix.scaleY = scaleY;
+    }
+    this.subject.publish(this, {
+      class: "Transformation",
+      method: "applyMatrix",
+      items: [{ id: this.id, matrix: this.getMatrixData() }]
+    });
+  }
+  serialize() {
+    return {
+      translateX: this._matrix.translateX,
+      translateY: this._matrix.translateY,
+      scaleX: this._matrix.scaleX,
+      scaleY: this._matrix.scaleY,
+      rotate: this.rotate,
+      isLocked: this.isLocked
+    };
+  }
+  deserialize(data) {
+    this.previous = this._matrix.copy();
+    if (data.translateX) {
+      this._matrix.translateX = data.translateX;
+    }
+    if (data.translateY) {
+      this._matrix.translateY = data.translateY;
+    }
+    if (data.scaleX) {
+      this._matrix.scaleX = data.scaleX;
+    }
+    if (data.scaleY) {
+      this._matrix.scaleY = data.scaleY;
+    }
+    if (data.isLocked) {
+      this.isLocked = data.isLocked;
+    }
+    if (data.rotate) {
+      this.rotate = data.rotate;
+    }
+    this.subject.publish(this, {
+      class: "Transformation",
+      method: "deserialize",
+      item: [this.id],
+      data
+    });
+    return this;
+  }
+  copy(id2) {
+    const { translateX, translateY, scaleX, scaleY } = this._matrix;
+    const { rotate } = this;
+    return new Transformation(id2 || "", this.events).deserialize({
+      translateX,
+      translateY,
+      scaleX,
+      scaleY,
+      rotate,
+      isLocked: false
+    });
+  }
+  getInverse() {
+    const copy22 = this.copy();
+    copy22._matrix.invert();
+    return copy22;
+  }
+  getId() {
+    return this.id;
+  }
+  setId(id2) {
+    this.id = id2;
+  }
+  emit(operation) {
+    if (this.events) {
+      const command = new TransformationCommand([this], operation);
+      command.apply();
+      this.events.emit(operation, command);
+    } else {
+      this.apply(operation);
+    }
+  }
+  emitMatrix(matrix, timeStamp) {
+    this.emit({
+      class: "Transformation",
+      method: "applyMatrix",
+      items: [{ id: this.id, matrix }],
+      timeStamp
+    });
+  }
+  translateTo(x, y, timeStamp) {
+    if (!this.id) {}
+    this.emitMatrix({
+      translateX: x - this._matrix.translateX,
+      translateY: y - this._matrix.translateY,
+      scaleX: 1,
+      scaleY: 1,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
+  }
+  translateBy(x, y, timeStamp) {
+    if (!this.id) {}
+    if (x === 0 && y === 0) {
+      return;
+    }
+    this.emitMatrix({
+      translateX: x,
+      translateY: y,
+      scaleX: 1,
+      scaleY: 1,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
+  }
+  scaleTo(x, y, timeStamp) {
+    this.emitMatrix({
+      translateX: 0,
+      translateY: 0,
+      scaleX: x / this._matrix.scaleX,
+      scaleY: y / this._matrix.scaleY,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
+  }
+  scaleBy(x, y, timeStamp) {
+    if (x === 0 && y === 0) {
+      return;
+    }
+    this.emitMatrix({
+      translateX: 0,
+      translateY: 0,
+      scaleX: x,
+      scaleY: y,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
+  }
+  scaleByTranslateBy(scale, translate, timeStamp) {
+    if (scale.x === 0 && scale.y === 0 && translate.x === 0 && translate.y === 0) {
+      return;
+    }
+    this.emitMatrix({
+      translateX: translate.x,
+      translateY: translate.y,
+      scaleX: scale.x,
+      scaleY: scale.y,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
+  }
+  rotateTo(degree, timeStamp) {
+    this.emit({
+      class: "Transformation",
+      method: "rotateTo",
+      item: [this.id],
+      degree,
+      timeStamp
+    });
+  }
+  rotateBy(degree, timeStamp) {
+    this.emit({
+      class: "Transformation",
+      method: "rotateBy",
+      item: [this.id],
+      degree,
+      timeStamp
+    });
+  }
+  scaleToRelativeTo(x, y, _point, timeStamp) {
+    this.emitMatrix({
+      translateX: 0,
+      translateY: 0,
+      scaleX: x / this._matrix.scaleX,
+      scaleY: y / this._matrix.scaleY,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
+  }
+  scaleByRelativeTo(x, y, point32, timeStamp) {
+    const { scaleX: sx0, scaleY: sy0, translateX: tx0, translateY: ty0 } = this._matrix;
+    const newSx = sx0 * x;
+    const newSy = sy0 * y;
+    this.emitMatrix({
+      translateX: -point32.x * newSx + point32.x - tx0,
+      translateY: -point32.y * newSy + point32.y - ty0,
+      scaleX: x,
+      scaleY: y,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
+  }
+  setIsLocked(isLocked, timestamp) {
+    if (isLocked) {
+      this.emit({
+        class: "Transformation",
+        method: "locked",
+        item: [this.id],
+        locked: true,
+        timestamp
+      });
+    } else {
+      this.emit({
+        class: "Transformation",
+        method: "unlocked",
+        item: [this.id],
+        locked: false,
+        timestamp
+      });
+    }
+  }
+  apply(op) {
+    this.previous = this._matrix.copy();
+    switch (op.method) {
+      case "applyMatrix": {
+        const itemOp = op.items.find((i) => i.id === this.id);
+        if (itemOp) {
+          this._matrix.scale(itemOp.matrix.scaleX, itemOp.matrix.scaleY);
+          this._matrix.translate(itemOp.matrix.translateX, itemOp.matrix.translateY);
+        }
+        break;
+      }
+      case "translateTo":
+        this.applyTranslateTo(op.x, op.y);
+        break;
+      case "translateBy":
+        this.applyTranslateBy(op.x, op.y);
+        break;
+      case "scaleTo":
+        this.applyScaleTo(op.x, op.y);
+        break;
+      case "scaleBy":
+        this.applyScaleBy(op.x, op.y);
+        break;
+      case "scaleToRelativeTo":
+        this.applyScaleToRelativeTo(op.x, op.y, op.point);
+        break;
+      case "scaleByRelativeTo":
+        this.applyScaleByRelativeTo(op.x, op.y, op.point);
+        break;
+      case "scaleByTranslateBy":
+        this.applyScaleByTranslateBy(op.scale, op.translate);
+        break;
+      case "rotateTo":
+        this.applyRotateTo(op.degree);
+        break;
+      case "rotateBy":
+        this.applyRotateBy(op.degree);
+        break;
+      case "transformMany":
+        this.applyTransformMany(op.items[this.id]);
+        break;
+      case "locked":
+        this.applyLocked(op.locked);
+        break;
+      case "unlocked":
+        this.applyUnlocked(op.locked);
+        break;
+      default:
+        return;
+    }
+    this.subject.publish(this, op);
+  }
+  applyTranslateTo(x, y) {
+    this._matrix.translateX = x;
+    this._matrix.translateY = y;
+  }
+  applyTranslateBy(x, y) {
+    this._matrix.translate(x, y);
+  }
+  applyScaleTo(x, y) {
+    this._matrix.scaleX = x;
+    this._matrix.scaleY = y;
+  }
+  applyScaleBy(x, y) {
+    this._matrix.scale(x, y);
+  }
+  applyScaleByTranslateBy(scale, translate) {
+    this._matrix.scale(scale.x, scale.y);
+    this._matrix.translate(translate.x, translate.y);
+  }
+  applyTransformMany(op) {
+    if (op.method === "applyMatrix") {
+      this._matrix.scale(op.matrix.scaleX, op.matrix.scaleY);
+      this._matrix.translate(op.matrix.translateX, op.matrix.translateY);
+    } else if (op.method === "scaleByTranslateBy") {
+      this.applyScaleByTranslateBy(op.scale, op.translate);
+    } else if (op.method === "scaleBy") {
+      this.applyScaleBy(op.x, op.y);
+    } else if (op.method === "translateBy") {
+      this.applyTranslateBy(op.x, op.y);
+    } else if (op.method === "translateTo") {
+      this.applyTranslateTo(op.x, op.y);
+    }
+  }
+  applyScaleByRelativeTo(x, y, point32) {
+    const scaleX = this._matrix.scaleX * x;
+    const scaleY = this._matrix.scaleY * y;
+    this._matrix.translateX = -point32.x * scaleX + point32.x;
+    this._matrix.translateY = -point32.y * scaleY + point32.y;
+    this._matrix.scaleX = scaleX;
+    this._matrix.scaleY = scaleY;
+  }
+  applyScaleToRelativeTo(x, y, point32) {
+    this.applyTranslateBy(-point32.x, -point32.y);
+    this.applyScaleTo(x, y);
+    this.applyTranslateBy(point32.x, point32.y);
+  }
+  applyRotateTo(degree) {
+    if (degree > 0) {
+      while (degree > 360) {
+        degree -= 360;
+      }
+      if (degree === 360) {
+        degree = 0;
+      }
+    } else {
+      while (degree < -360) {
+        degree += 360;
+      }
+      if (degree === -360) {
+        degree = 0;
+      }
+    }
+    this.rotate = degree;
+  }
+  applyRotateBy(degree) {
+    this.applyRotateTo(this.rotate + degree);
+  }
+  applyLocked(locked7) {
+    this.isLocked = locked7;
+  }
+  applyUnlocked(locked7) {
+    this.isLocked = locked7;
+  }
+}
+
 class ShapeCommand {
   shape;
   operation;
@@ -246714,6 +246395,145 @@ function applyRedo(board, operation) {
 addOperationHandler("undo", applyUndo);
 addOperationHandler("redo", applyRedo);
 
+class ConnectorCommand {
+  connector;
+  operation;
+  reverse;
+  constructor(connector, operation) {
+    this.connector = connector;
+    this.operation = operation;
+    this.reverse = this.getReverse();
+  }
+  merge(op) {
+    this.operation = op;
+    return this;
+  }
+  apply() {
+    for (const connector of this.connector) {
+      connector.apply(this.operation);
+    }
+  }
+  revert() {
+    for (const { item, operation } of this.reverse) {
+      item.apply(operation);
+    }
+  }
+  getReverse() {
+    const reverse = [];
+    switch (this.operation.method) {
+      case "setStartPoint":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              startPointData: connector.getStartPoint().serialize()
+            }
+          });
+        }
+        break;
+      case "setEndPoint":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              endPointData: connector.getEndPoint().serialize()
+            }
+          });
+        }
+        break;
+      case "setMiddlePoint":
+        for (const connector of this.connector) {
+          const middlePoint = connector.getMiddlePoint();
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              middlePointData: middlePoint ? middlePoint.serialize() : null
+            }
+          });
+        }
+        break;
+      case "setStartPointerStyle":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              startPointerStyle: connector.getStartPointerStyle()
+            }
+          });
+        }
+        break;
+      case "setEndPointerStyle":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              endPointerStyle: connector.getEndPointerStyle()
+            }
+          });
+        }
+        break;
+      case "setLineStyle":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              lineStyle: connector.getLineStyle()
+            }
+          });
+        }
+        break;
+      case "setBorderStyle":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              borderStyle: connector.getBorderStyle()
+            }
+          });
+        }
+        break;
+      case "setLineWidth":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              lineWidth: connector.getLineWidth()
+            }
+          });
+        }
+        break;
+      case "setLineColor":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: {
+              ...this.operation,
+              lineColor: connector.getLineColor()
+            }
+          });
+        }
+        break;
+      case "switchPointers":
+        for (const connector of this.connector) {
+          reverse.push({
+            item: connector,
+            operation: this.operation
+          });
+        }
+        break;
+    }
+    return reverse;
+  }
+}
+
 class DrawingCommand {
   item;
   operation;
@@ -246955,8 +246775,13 @@ class CommentCommand {
     }
   }
 }
-var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native_default = { randomUUID };
+var byteToHex = [];
+for (let i = 0;i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr2, offset = 0) {
+  return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
+}
 var getRandomValues;
 var rnds8 = new Uint8Array(16);
 function rng() {
@@ -246968,13 +246793,8 @@ function rng() {
   }
   return getRandomValues(rnds8);
 }
-var byteToHex = [];
-for (let i = 0;i < 256; ++i) {
-  byteToHex.push((i + 256).toString(16).slice(1));
-}
-function unsafeStringify(arr2, offset = 0) {
-  return (byteToHex[arr2[offset + 0]] + byteToHex[arr2[offset + 1]] + byteToHex[arr2[offset + 2]] + byteToHex[arr2[offset + 3]] + "-" + byteToHex[arr2[offset + 4]] + byteToHex[arr2[offset + 5]] + "-" + byteToHex[arr2[offset + 6]] + byteToHex[arr2[offset + 7]] + "-" + byteToHex[arr2[offset + 8]] + byteToHex[arr2[offset + 9]] + "-" + byteToHex[arr2[offset + 10]] + byteToHex[arr2[offset + 11]] + byteToHex[arr2[offset + 12]] + byteToHex[arr2[offset + 13]] + byteToHex[arr2[offset + 14]] + byteToHex[arr2[offset + 15]]).toLowerCase();
-}
+var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native_default = { randomUUID };
 function v4(options2, buf, offset) {
   if (native_default.randomUUID && !buf && !options2) {
     return native_default.randomUUID();
@@ -247225,12 +247045,11 @@ class Comment {
     });
   }
   transform() {
-    const matrix = this.transformation.matrix;
-    if (matrix.translateX && matrix.translateY) {
-      this.anchor = new Point3(matrix.translateX, matrix.translateY);
+    const { translateX, translateY } = this.transformation.getMatrixData();
+    if (translateX && translateY) {
+      this.anchor = new Point3(translateX, translateY);
     } else {
-      matrix.translateX = this.anchor.x;
-      matrix.translateY = this.anchor.y;
+      this.transformation.setLocal(this.anchor.x, this.anchor.y);
     }
   }
   getUnreadMessages(userId = ANONYMOUS_ID) {
@@ -247339,7 +247158,7 @@ class Comment {
   render(context) {}
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("comment-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
@@ -248488,18 +248307,25 @@ class RTreeIndex {
   }
 }
 
-class Container extends Mbr {
+class Container {
   id;
   item;
   layer;
   zIndex;
+  left;
+  top;
+  right;
+  bottom;
   constructor(id2, item, layer, zIndex) {
-    const rect = item.getMbrWithChildren();
-    super(rect.left, rect.top, rect.right, rect.bottom);
     this.id = id2;
     this.item = item;
     this.layer = layer;
     this.zIndex = zIndex;
+    const rect = item.getMbrWithChildren();
+    this.left = rect.left;
+    this.top = rect.top;
+    this.right = rect.right;
+    this.bottom = rect.bottom;
   }
 }
 
@@ -249846,7 +249672,7 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    const { translateX, translateY } = this.transformation.matrix;
+    const { translateX, translateY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
     div.style.backgroundColor = "#b2b0c3";
     div.id = this.getId();
@@ -249987,7 +249813,7 @@ class RichText extends BaseItem {
         mbr.right += 20;
         mbr.bottom += 20;
       }
-      const linkMbr = mbr.getTransformed(this.transformation.matrix);
+      const linkMbr = mbr.getTransformed(this.transformation.toMatrix());
       if (linkMbr.isUnderPoint(point32)) {
         return { hyperLink, linkMbr };
       }
@@ -250184,12 +250010,13 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    let matrix = this.transformation.matrix;
     if (this.insideOf === "Frame") {
+      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
       const scaleY = this.getMbr().getHeight() * 2 / 10;
-      matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, scaleY);
+      const matrix = new Matrix2(translateX, translateY, scaleX, scaleY);
+      return this.container.getTransformed(matrix);
     }
-    return this.container.getTransformed(matrix);
+    return this.container.getTransformed(this.transformation.toMatrix());
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -250550,7 +250377,7 @@ class RichText extends BaseItem {
     ctx.translate(this.left, this.top);
     const shouldScale = !this.isInShape && !this.autoSize;
     if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.matrix;
+      const { scaleX, scaleY } = this.transformation.getMatrixData();
       ctx.scale(scaleX, scaleY);
     }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
@@ -250683,7 +250510,7 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     const elements = this.editor.editor.children.map(renderNode);
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     const transformedWidth = this.getTransformedContainer().getWidth();
     const transformedHeight = this.getTransformedContainer().getHeight();
@@ -250781,6 +250608,250 @@ class RichText extends BaseItem {
     return this.prevMbr;
   }
 }
+function updateRects(board, ref, mbr, verticalOffset, horizontalOffset, fit = "contextPanel") {
+  const { selection, camera } = board;
+  const panel = ref.current;
+  const selectionMbr = mbr ?? selection.getMbr();
+  const selectionItems = selection.items;
+  const richTextSelection = selectionItems.getSingle() instanceof RichText ? selectionItems.list()[0] : undefined;
+  if (panel && selectionMbr) {
+    if (fit === "contextPanel") {
+      const panelRect = getContextPanelRect(selectionMbr, camera, panel, !!richTextSelection, horizontalOffset, verticalOffset);
+      return panelRect;
+    }
+    if (fit === "linkToBtn") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitLinkToBtn(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
+      return panelRect;
+    }
+    if (fit === "comment") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitComment(selectionMbr.getTransformed(camera.getMatrix()), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
+      return panelRect;
+    }
+    if (fit === "threadPanel") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitThreadPanel(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
+      return panelRect;
+    }
+    if (fit === "boardMenu") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitBoardMenu(selectionMbr.getTransformed(camera.getMatrix()), camera.window.getMbr(), Mbr.fromDomRect(panel.getBoundingClientRect()), verticalOffset, horizontalOffset);
+      return panelRect;
+    }
+    if (fit === "hyperLink") {
+      if (!mbr) {
+        return null;
+      }
+      const panelRect = fitHyperLink(selectionMbr.getTransformed(camera.getMatrix()), Mbr.fromDomRect(panel.getBoundingClientRect()), camera.window.getMbr(), verticalOffset);
+      return panelRect;
+    }
+  }
+  return null;
+}
+function getContextPanelRect(selectionMbr, camera, panel, toLeft, horizontalOffset, verticalOffset) {
+  const transformedMbr = selectionMbr.getTransformed(camera.getMatrix());
+  const windowMbr = camera.window.getMbr();
+  const panelRectFromDom = Mbr.fromDomRect(panel.getBoundingClientRect());
+  const panelRect = toLeft ? fitContextPanelToLeft(transformedMbr, windowMbr, panelRectFromDom, verticalOffset, horizontalOffset) : fitContextPanelToCenter(transformedMbr, windowMbr, panelRectFromDom, verticalOffset, horizontalOffset);
+  return panelRect;
+}
+function fitContextPanelToLeft(selectionMbr, view, panel, verticalOffset = 40, horizontalOffset = 80) {
+  const panelHeight = panel.getHeight();
+  const panelWidth = panel.getWidth();
+  const newPanel = new Mbr;
+  const topSpace = selectionMbr.top - view.top;
+  const hasEnoughTopSpace = topSpace >= panelHeight + verticalOffset;
+  if (hasEnoughTopSpace) {
+    newPanel.top = selectionMbr.top - panelHeight - verticalOffset;
+    if (newPanel.top < view.top) {
+      newPanel.top = view.top + verticalOffset;
+    }
+  } else {
+    const usePanelTop = panel.top > 1 && panel.top > selectionMbr.top + verticalOffset;
+    newPanel.top = usePanelTop ? panel.top : selectionMbr.bottom + verticalOffset;
+    const isOverflowingBottom = newPanel.top + panelHeight > view.bottom;
+    const isLargeOffsetForRichText = newPanel.top >= selectionMbr.bottom + verticalOffset * 2;
+    if (isOverflowingBottom || isLargeOffsetForRichText) {
+      newPanel.top = selectionMbr.bottom - (panelHeight + verticalOffset);
+    }
+  }
+  newPanel.bottom = newPanel.top + panelHeight;
+  fitContextPanelInViewRect(newPanel, view, verticalOffset);
+  const itemMbr = selectionMbr.getMbr();
+  newPanel.left = itemMbr.left;
+  adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset);
+  return newPanel;
+}
+function fitContextPanelToCenter(selectionMbr, view, panel, verticalOffset = 40, horizontalOffset = 80) {
+  const panelHeight = panel.getHeight();
+  const panelWidth = panel.getWidth();
+  const newPanel = new Mbr;
+  const topSpace = selectionMbr.top - view.top;
+  const bottomSpace = view.bottom - selectionMbr.bottom;
+  const shouldPlaceAbove = topSpace > bottomSpace - panelHeight;
+  if (shouldPlaceAbove) {
+    newPanel.top = selectionMbr.top - panelHeight - verticalOffset;
+    if (newPanel.top < view.top) {
+      newPanel.top = view.top + verticalOffset;
+    }
+  } else {
+    newPanel.top = selectionMbr.bottom + verticalOffset;
+    const isOverflowingBottom = newPanel.top + panelHeight > view.bottom;
+    const isLargeOffsetForRichText = newPanel.top >= selectionMbr.bottom + verticalOffset * 2;
+    if (isOverflowingBottom || isLargeOffsetForRichText) {
+      newPanel.top = selectionMbr.bottom - (panelHeight + verticalOffset);
+    }
+  }
+  newPanel.bottom = newPanel.top + panelHeight;
+  fitContextPanelInViewRect(newPanel, view, verticalOffset);
+  const itemCenter = selectionMbr.getCenter();
+  newPanel.left = itemCenter.x - panelWidth / 2;
+  adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset);
+  return newPanel;
+}
+function adjustPanelHorizontal(newPanel, panelWidth, view, horizontalOffset) {
+  newPanel.right = newPanel.left + panelWidth;
+  if (newPanel.left < view.left + horizontalOffset) {
+    newPanel.left = view.left + horizontalOffset;
+  } else if (newPanel.right + horizontalOffset > view.right) {
+    newPanel.left = view.right - (panelWidth + horizontalOffset);
+  }
+  newPanel.right = newPanel.left + panelWidth;
+}
+function fitContextPanelInViewRect(panel, view, verticalOffset) {
+  const panelHeight = panel.getHeight();
+  if (panel.top <= view.top + verticalOffset) {
+    panel.top = view.top + 2 * verticalOffset;
+    panel.bottom = panel.top + panelHeight;
+  }
+  if (panel.bottom >= view.bottom - verticalOffset) {
+    panel.bottom = view.bottom - 2 * verticalOffset;
+    panel.top = panel.bottom - panelHeight;
+  }
+}
+function fitLinkToBtn(itemMbr, view, panel, verticalOffset = -2, horizontalOffset = -2) {
+  const panelHeight = panel.getHeight();
+  const newPanel = new Mbr;
+  newPanel.top = itemMbr.top - panelHeight - verticalOffset;
+  newPanel.top = newPanel.top + panelHeight;
+  newPanel.bottom = newPanel.top + panelHeight * 2;
+  const panelWidth = panel.getWidth();
+  newPanel.left = itemMbr.right - panelWidth + horizontalOffset;
+  return newPanel;
+}
+function fitHyperLink(linkMbr, panel, view, offset = 20) {
+  const panelHeight = panel.getHeight();
+  const newPanel = new Mbr;
+  newPanel.top = linkMbr.bottom;
+  newPanel.bottom = panelHeight + newPanel.top;
+  const panelWidth = panel.getWidth();
+  newPanel.left = linkMbr.left;
+  newPanel.right = newPanel.left + panelWidth;
+  return newPanel;
+}
+function fitComment(anchor, panel, verticalOffset = 0, horizontalOffset = 0) {
+  const panelHeight = panel.getHeight();
+  const newPanel = new Mbr;
+  newPanel.top = anchor.top - panelHeight - verticalOffset;
+  newPanel.bottom = newPanel.top + panelHeight;
+  const panelWidth = panel.getWidth();
+  newPanel.left = anchor.left - panelWidth / 2 - horizontalOffset;
+  newPanel.right = newPanel.left + panelWidth;
+  return newPanel;
+}
+function fitBoardMenu(anchor, view, panel, verticalOffset = 20, horizontalOffset = 20) {
+  const panelHeight = panel.getHeight();
+  const panelWidth = panel.getWidth();
+  const newPanel = new Mbr;
+  newPanel.top = anchor.top;
+  newPanel.bottom = newPanel.top + panelHeight;
+  if (newPanel.bottom > view.bottom - verticalOffset) {
+    newPanel.bottom = view.bottom - verticalOffset;
+    newPanel.top = newPanel.bottom - panelHeight;
+  }
+  newPanel.left = anchor.left;
+  newPanel.right = newPanel.left + panelWidth;
+  if (newPanel.right > view.right - horizontalOffset) {
+    newPanel.right = view.right - horizontalOffset;
+    newPanel.left = newPanel.right - panelWidth;
+  }
+  return newPanel;
+}
+function fitThreadPanel(anchor, view, panel, verticalOffset = 50, horizontalOffset = 50) {
+  const panelHeight = panel.getHeight();
+  const panelWidth = panel.getWidth();
+  const newPanel = new Mbr;
+  newPanel.top = anchor.top - panelHeight / 2;
+  if (newPanel.top < view.top + verticalOffset) {
+    newPanel.top = view.top + verticalOffset;
+  }
+  newPanel.bottom = newPanel.top + panelHeight;
+  if (newPanel.bottom > view.bottom - verticalOffset) {
+    newPanel.bottom = view.bottom - verticalOffset;
+    newPanel.top = newPanel.bottom - panelHeight;
+  }
+  newPanel.left = anchor.left;
+  newPanel.right = newPanel.left + panelWidth;
+  if (newPanel.right > view.right - horizontalOffset) {
+    newPanel.right = anchor.right;
+    newPanel.left = newPanel.right - panelWidth;
+  }
+  return newPanel;
+}
+
+class DrawingContext2 {
+  camera;
+  ctx;
+  cursorCtx;
+  matrix;
+  isBorderInvisible = false;
+  shapeVisibilityTreshold = 3;
+  rectangleVisibilyTreshold = 2;
+  constructor(camera, ctx, cursorCtx, matrix = new Matrix2) {
+    this.camera = camera;
+    this.ctx = ctx;
+    this.cursorCtx = cursorCtx;
+    this.matrix = matrix;
+    this.setCamera(camera);
+  }
+  dpi() {
+    return conf.getDPI();
+  }
+  setCamera(camera) {
+    this.camera = camera;
+    this.matrix = camera.getMatrix();
+    const scale = this.matrix.scaleX;
+    this.isBorderInvisible = 4 * scale < 0.1;
+  }
+  clear() {
+    this.ctx.setTransform(1 * this.dpi(), 0, 0, 1 * this.dpi(), 0, 0);
+    this.ctx.clearRect(0, 0, conf.getDocumentWidth(), conf.getDocumentHeight());
+    this.matrix.applyToContext(this.ctx);
+  }
+  clearCursor() {
+    if (!this.cursorCtx) {
+      return;
+    }
+    this.cursorCtx.setTransform(1 * this.dpi(), 0, 0, 1 * this.dpi(), 0, 0);
+    this.cursorCtx.clearRect(0, 0, conf.getDocumentWidth(), conf.getDocumentHeight());
+    this.matrix.applyToContext(this.cursorCtx);
+  }
+  applyChanges() {
+    this.matrix.applyToContext(this.ctx);
+  }
+  getCameraScale() {
+    return this.camera.getScale();
+  }
+}
 
 class Schema {
   constructor(property, normal, space) {
@@ -262271,10 +262342,10 @@ function zwitch(key, options2) {
   const settings = options2 || {};
   function one4(value, ...parameters) {
     let fn = one4.invalid;
-    const handlers3 = one4.handlers;
+    const handlers2 = one4.handlers;
     if (value && own6.call(value, key)) {
       const id2 = String(value[key]);
-      fn = own6.call(handlers3, id2) ? handlers3[id2] : one4.unknown;
+      fn = own6.call(handlers2, id2) ? handlers2[id2] : one4.unknown;
     }
     if (fn) {
       return fn.call(this, value, ...parameters);
@@ -263625,17 +263696,17 @@ class AINode extends BaseItem {
   }
   transformPath() {
     const { left, right, top, bottom } = this.text.getTransformedContainer();
-    const { scaleX, scaleY } = this.transformation.matrix;
+    const { scaleX, scaleY, translateX: nodeTranslateX, translateY: nodeTranslateY } = this.transformation.getMatrixData();
     const minScale = Math.min(scaleX, scaleY);
     const leftOffset = 20 * minScale;
     const topOffset = 20 * minScale;
     const nodeRight = right + 80 * minScale;
     const nodeBottom = bottom + (bottom - top > 400 ? 60 : 40) * minScale;
     if (!this.path || this.text.left < this.path.getMbr().left + leftOffset && this.text.top < this.path.getMbr().top + topOffset) {
-      this.text.left = this.transformation.matrix.translateX + leftOffset;
-      this.text.top = this.transformation.matrix.translateY + topOffset;
+      this.text.left = nodeTranslateX + leftOffset;
+      this.text.top = nodeTranslateY + topOffset;
     }
-    this.path = createNodePath(new Mbr(left, top, nodeRight, nodeBottom), this.transformation.matrix);
+    this.path = createNodePath(new Mbr(left, top, nodeRight, nodeBottom), this.transformation.toMatrix());
     const scaledSize = BUTTON_SIZE * minScale;
     this.buttonMbr = new Mbr(nodeRight - scaledSize * 2, nodeBottom - scaledSize * 2, nodeRight - scaledSize, nodeBottom - scaledSize);
   }
@@ -263796,7 +263867,7 @@ class AINode extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("ainode-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width = mbr.getWidth();
     const height = mbr.getHeight();
@@ -264041,14 +264112,13 @@ function getControlPoint(data, findItem2) {
   }
 }
 function toRelativePoint(point5, item) {
-  const matrix = item.transformation?.matrix || new Matrix2;
-  const inverse = matrix.getInverse();
+  const inverse = item.transformation ? item.transformation.getInverse().toMatrix() : new Matrix2;
   point5 = point5.copy();
   point5.transform(inverse);
   return point5;
 }
 function fromRelativePoint(relativePoint, item, edge) {
-  const matrix = item.transformation?.matrix.copy() || new Matrix2;
+  const matrix = item.transformation?.toMatrix() ?? new Matrix2;
   const point5 = relativePoint.copy();
   point5.transform(matrix);
   if (item instanceof RichText || item instanceof AINode) {
@@ -265253,7 +265323,7 @@ class Connector2 extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("connector-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width = mbr.getWidth();
     const height = mbr.getHeight();
@@ -265318,7 +265388,7 @@ class Connector2 extends BaseItem {
     return div;
   }
   renderPathHTML(documentFactory, path22) {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const pathElement = path22.renderHTML(documentFactory);
     const paths = Array.isArray(pathElement) ? pathElement : [pathElement];
     paths.forEach((element4) => {
@@ -265340,8 +265410,7 @@ class Connector2 extends BaseItem {
     text5.transformation = undefined;
     const mbr = this.getMbr();
     const transformation = new Transformation;
-    transformation.matrix.translateX = mbr.left;
-    transformation.matrix.translateY = mbr.top;
+    transformation.setLocal(mbr.left, mbr.top);
     return {
       itemType: "Connector",
       transformation: transformation.serialize(),
@@ -265421,7 +265490,7 @@ class Connector2 extends BaseItem {
     previous22.translateX = 0;
     previous22.translateY = 0;
     previous22.invert();
-    const currUnscaled = this.transformation.matrix.copy();
+    const currUnscaled = this.transformation.toMatrix();
     currUnscaled.translateX = 0;
     currUnscaled.translateY = 0;
     const delta = previous22.multiplyByMatrix(currUnscaled);
@@ -265448,7 +265517,7 @@ class Connector2 extends BaseItem {
     previous22.scaleX = 1;
     previous22.scaleY = 1;
     previous22.invert();
-    const currUnscaled = this.transformation.matrix.copy();
+    const currUnscaled = this.transformation.toMatrix();
     currUnscaled.scaleX = 1;
     currUnscaled.scaleY = 1;
     const delta = previous22.multiplyByMatrix(currUnscaled);
@@ -267322,7 +267391,7 @@ class Shape extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("shape-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width = mbr.getWidth();
     const height = mbr.getHeight();
@@ -267411,8 +267480,8 @@ class Shape extends BaseItem {
     this.path = Shapes[this.shapeType].createPath(this.mbr);
     this.textContainer = Shapes[this.shapeType].textBounds.copy();
     this.text.setContainer(this.textContainer.copy());
-    this.textContainer.transform(this.transformation.matrix);
-    this.path.transform(this.transformation.matrix);
+    this.textContainer.transform(this.transformation.toMatrix());
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderColor(this.borderColor);
@@ -267427,7 +267496,7 @@ class Shape extends BaseItem {
     const anchorPoints = Shapes[this.shapeType].anchorPoints;
     const points = [];
     for (const anchorPoint of anchorPoints) {
-      points.push(anchorPoint.getTransformed(this.transformation.matrix));
+      points.push(anchorPoint.getTransformed(this.transformation.toMatrix()));
     }
     return points;
   }
@@ -267595,10 +267664,9 @@ class Sticker extends BaseItem {
     }
     this.stickerPath = StickerShape.stickerPath.copy();
     this.textContainer = StickerShape.textBounds.copy();
-    const matrix = this.transformation.matrix;
-    this.stickerPath.transform(matrix);
+    this.stickerPath.transform(this.transformation.toMatrix());
     this.text.setContainer(this.textContainer.copy());
-    this.textContainer.transform(this.transformation.matrix);
+    this.textContainer.transform(this.transformation.toMatrix());
     this.stickerPath.setBackgroundColor(this.backgroundColor);
     this.saveStickerData();
   }
@@ -267699,7 +267767,7 @@ class Sticker extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("sticker-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${Math.round(translateX)}px, ${Math.round(translateY)}px) scale(${scaleX}, ${scaleY})`;
     const itemMbr = this.getMbr();
     const height2 = itemMbr.getHeight();
@@ -267780,7 +267848,7 @@ class Sticker extends BaseItem {
     const anchorPoints = StickerShape.anchorPoints;
     const points = [];
     for (const anchorPoint of anchorPoints) {
-      points.push(anchorPoint.getTransformed(this.transformation.matrix));
+      points.push(anchorPoint.getTransformed(this.transformation.toMatrix()));
     }
     return points;
   }
@@ -267794,20 +267862,7 @@ class Sticker extends BaseItem {
     if (line.end.y < line.start.y) {
       y -= l2 * height;
     }
-    this.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.id],
-      x,
-      y
-    });
-    this.transformation.apply({
-      class: "Transformation",
-      method: "scaleTo",
-      item: [this.id],
-      x: l2,
-      y: l2
-    });
+    this.transformation.setLocal(x, y, l2, l2);
     this.saveStickerData();
   }
   applyTransformToCenter(pt, newWidth) {
@@ -267815,35 +267870,9 @@ class Sticker extends BaseItem {
       const scale = newWidth / width;
       const w = width * scale;
       const h2 = height * scale;
-      this.transformation.apply({
-        class: "Transformation",
-        method: "translateTo",
-        item: [this.id],
-        x: pt.x - w / 2,
-        y: pt.y - h2 / 2
-      });
-      this.transformation.apply({
-        class: "Transformation",
-        method: "scaleTo",
-        item: [this.id],
-        x: scale,
-        y: scale
-      });
+      this.transformation.setLocal(pt.x - w / 2, pt.y - h2 / 2, scale, scale);
     } else {
-      this.transformation.apply({
-        class: "Transformation",
-        method: "translateTo",
-        item: [this.id],
-        x: pt.x - width / 2,
-        y: pt.y - height / 2
-      });
-      this.transformation.apply({
-        class: "Transformation",
-        method: "scaleTo",
-        item: [this.id],
-        x: 1,
-        y: 1
-      });
+      this.transformation.setLocal(pt.x - width / 2, pt.y - height / 2, 1, 1);
     }
   }
   doResize(resizeType, pointer, mbr, opposite, startMbr, timeStamp) {
@@ -267930,7 +267959,7 @@ async function exportBoardSnapshot({
     const selectionMatrix = new Matrix2(translationX, translationY, scaleX, scaleY);
     camera.matrix = selectionMatrix;
   }
-  const context = new DrawingContext(camera, ctx);
+  const context = new DrawingContext2(camera, ctx);
   context.setCamera(camera);
   context.ctx.setTransform(upscaleFactor, 0, 0, upscaleFactor, 0, 0);
   context.matrix.applyToContext(context.ctx);
@@ -268144,7 +268173,7 @@ class Frame2 extends BaseItem {
     const res = this.getCanChangeRatio() ? getResize(resizeType, pointer, mbr, opposite) : getProportionalResize(resizeType, pointer, mbr, opposite);
     if (!res) {
       return {
-        matrix: this.transformation.matrix,
+        matrix: this.transformation.toMatrix(),
         mbr: this.getMbr()
       };
     }
@@ -268243,8 +268272,9 @@ class Frame2 extends BaseItem {
     return this;
   }
   getSavedProportionsMatrix() {
-    const newScale = Math.min(this.transformation.matrix.scaleX, this.transformation.matrix.scaleY);
-    const newMatrix = this.transformation.matrix.copy();
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    const newScale = Math.min(scaleX, scaleY);
+    const newMatrix = this.transformation.toMatrix();
     newMatrix.scaleX = newScale;
     newMatrix.scaleY = newScale;
     return newMatrix;
@@ -268258,8 +268288,8 @@ class Frame2 extends BaseItem {
       this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
-      this.path.transform(this.transformation.matrix);
-      this.textContainer.transform(this.transformation.matrix);
+      this.path.transform(this.transformation.toMatrix());
+      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBackgroundOpacity(this.backgroundOpacity);
@@ -268315,7 +268345,7 @@ class Frame2 extends BaseItem {
     const anchorPoints = Frames[this.shapeType].anchorPoints;
     const points = [];
     for (const anchorPoint of anchorPoints) {
-      points.push(anchorPoint.getTransformed(this.transformation.matrix));
+      points.push(anchorPoint.getTransformed(this.transformation.toMatrix()));
     }
     return points;
   }
@@ -268491,7 +268521,7 @@ class Frame2 extends BaseItem {
     div.style.borderColor = this.borderColor;
     div.style.borderWidth = `${this.borderWidth}px`;
     div.style.borderStyle = this.borderStyle;
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${Math.round(translateX)}px, ${Math.round(translateY)}px) scale(1, 1)`;
     const width2 = this.getMbr().getWidth();
     const height2 = this.getMbr().getHeight();
@@ -268801,13 +268831,13 @@ class VideoItem extends BaseItem {
     this.shootLoadCallbacks();
   };
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     this.left = translateX;
     this.top = translateY;
     this.right = this.left + this.videoDimension.width * scaleX;
     this.bottom = this.top + this.videoDimension.height * scaleY;
     const playBtnSize = 50;
-    const scaledPlayBtn = playBtnSize * this.transformation.matrix.scaleX;
+    const scaledPlayBtn = playBtnSize * this.transformation.getMatrixData().scaleX;
     this.playBtnMbr = new Mbr(this.left + this.getWidth() / 2 - scaledPlayBtn / 2, this.top + this.getHeight() / 2 - scaledPlayBtn / 2, this.right - this.getWidth() / 2 + scaledPlayBtn / 2, this.bottom - this.getHeight() / 2 + scaledPlayBtn / 2);
   }
   render(context) {
@@ -268823,7 +268853,7 @@ class VideoItem extends BaseItem {
       return;
     }
     ctx.save();
-    this.transformation.matrix.applyToContext(ctx);
+    this.transformation.applyToContext(ctx);
     ctx.drawImage(this.preview, 0, 0);
     if (this.shouldShowControls && this.previewUrl) {
       ctx.restore();
@@ -268844,7 +268874,7 @@ class VideoItem extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("video-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = this.previewUrl ? `url(${this.previewUrl})` : `url(${createPlaceholderImage(this.videoDimension.width, this.videoDimension.height).src})`;
     div.id = this.getId();
@@ -269289,7 +269319,7 @@ class AudioItem extends BaseItem {
     this.shootLoadCallbacks();
   };
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     this.left = translateX;
     this.top = translateY;
     this.right = this.left + conf.AUDIO_DIMENSIONS.width * scaleX;
@@ -269319,7 +269349,7 @@ class AudioItem extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("audio-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.id = this.getId();
     div.style.width = `${conf.AUDIO_DIMENSIONS.width}px`;
@@ -269669,7 +269699,7 @@ class Placeholder extends BaseItem {
     const anchorPoints = Shapes[this.shapeType].anchorPoints;
     const points = [];
     for (const anchorPoint of anchorPoints) {
-      points.push(anchorPoint.getTransformed(this.transformation.matrix));
+      points.push(anchorPoint.getTransformed(this.transformation.toMatrix()));
     }
     return points;
   }
@@ -269687,7 +269717,7 @@ class Placeholder extends BaseItem {
   }
   transformPath() {
     this.path = Shapes[this.shapeType].createPath(this.mbr);
-    this.path.transform(this.transformation.matrix);
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor("transparent");
   }
@@ -269754,7 +269784,7 @@ class Placeholder extends BaseItem {
 function getPlaceholderImage(board, imageDimension) {
   const placeholderCanvas = conf.documentFactory.createElement("canvas");
   const placeholderContext = placeholderCanvas.getContext("2d");
-  const context = new DrawingContext(board.camera, placeholderContext);
+  const context = new DrawingContext2(board.camera, placeholderContext);
   const placeholder = new Placeholder(board);
   if (imageDimension) {
     placeholderCanvas.width = imageDimension.width;
@@ -269882,7 +269912,7 @@ class ImageItem extends BaseItem {
     this.subject.publish(this);
   };
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const rotation = this.transformation.getRotation();
     const width2 = this.image.width * scaleX;
     const height2 = this.image.height * scaleY;
@@ -269925,10 +269955,11 @@ class ImageItem extends BaseItem {
     };
   }
   setCoordinates() {
-    this.left = this.transformation.matrix.translateX;
-    this.top = this.transformation.matrix.translateY;
-    this.right = this.left + this.image.width * this.transformation.matrix.scaleX;
-    this.bottom = this.top + this.image.height * this.transformation.matrix.scaleY;
+    const { translateX: coordX, translateY: coordY, scaleX: coordScaleX, scaleY: coordScaleY } = this.transformation.getMatrixData();
+    this.left = coordX;
+    this.top = coordY;
+    this.right = this.left + this.image.width * coordScaleX;
+    this.bottom = this.top + this.image.height * coordScaleY;
     this.subject.publish(this);
   }
   shootBeforeLoadCallbacks() {
@@ -269995,7 +270026,7 @@ class ImageItem extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    this.transformation.matrix.applyToContext(ctx);
+    this.transformation.applyToContext(ctx);
     const rotation = this.transformation.getRotation();
     if (rotation !== 0) {
       const imgWidth = this.image.width || 0;
@@ -270013,7 +270044,7 @@ class ImageItem extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("image-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.storageLink})`;
     div.id = this.getId();
@@ -270164,7 +270195,7 @@ class Drawing extends BaseItem {
     untransformedMbr.top -= offset;
     untransformedMbr.right += offset;
     untransformedMbr.bottom += offset;
-    const mbr = untransformedMbr.getTransformed(this.transformation.matrix);
+    const mbr = untransformedMbr.getTransformed(this.transformation.toMatrix());
     this.left = mbr.left;
     this.top = mbr.top;
     this.right = mbr.right;
@@ -270211,7 +270242,7 @@ class Drawing extends BaseItem {
   }
   updateLines() {
     this.lines = [];
-    const matrix = this.transformation.matrix;
+    const matrix = this.transformation.toMatrix();
     if (this.points.length < 2) {
       return;
     }
@@ -270259,7 +270290,7 @@ class Drawing extends BaseItem {
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
-    this.transformation.matrix.applyToContext(ctx);
+    this.transformation.applyToContext(ctx);
     ctx.stroke(this.path2d.nativePath);
     ctx.restore();
     if (this.getLinkTo()) {
@@ -270269,7 +270300,7 @@ class Drawing extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("drawing-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width2 = mbr.getWidth();
     const height2 = mbr.getHeight();
@@ -270458,8 +270489,9 @@ class Drawing extends BaseItem {
     return null;
   }
   isPointNearLine(point5, threshold = 10) {
-    const transformedMouseX = (point5.x - this.transformation.matrix.translateX) / this.transformation.matrix.scaleX;
-    const transformedMouseY = (point5.y - this.transformation.matrix.translateY) / this.transformation.matrix.scaleY;
+    const { translateX: drawingTranslateX, translateY: drawingTranslateY, scaleX: drawingScaleX, scaleY: drawingScaleY } = this.transformation.getMatrixData();
+    const transformedMouseX = (point5.x - drawingTranslateX) / drawingScaleX;
+    const transformedMouseY = (point5.y - drawingTranslateY) / drawingScaleY;
     const transformedMouse = new Point3(transformedMouseX, transformedMouseY);
     for (let i = 0;i < this.points.length - 1; i++) {
       const p1 = this.points[i];
@@ -271779,40 +271811,16 @@ class AddFrame extends BoardTool {
     this.applyTranslateBy(-this.frame.getMbr().getWidth() / 2, -this.frame.getMbr().getHeight() / 2);
   }
   applyScaleTo(x, y) {
-    this.frame.transformation.apply({
-      class: "Transformation",
-      method: "scaleTo",
-      item: [this.frame.getId()],
-      x,
-      y
-    });
+    this.frame.transformation.setLocal({ scaleX: x, scaleY: y });
   }
   applyScaleBy(x, y) {
-    this.frame.transformation.apply({
-      class: "Transformation",
-      method: "scaleBy",
-      item: [this.frame.getId()],
-      x,
-      y
-    });
+    this.frame.transformation.scaleBy(x, y);
   }
   applyTranslateTo(x, y) {
-    this.frame.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.frame.getId()],
-      x,
-      y
-    });
+    this.frame.transformation.setLocal(x, y);
   }
   applyTranslateBy(x, y) {
-    this.frame.transformation.apply({
-      class: "Transformation",
-      method: "translateBy",
-      item: [this.frame.getId()],
-      x,
-      y
-    });
+    this.frame.transformation.translateBy(x, y);
   }
   applyAddChildren(children) {
     const childrenIds = children.map((child) => {
@@ -271880,20 +271888,7 @@ class AddShape extends BoardTool {
   initTransformation(sx, sy) {
     sx = sx || this.bounds.getWidth() / 100;
     sy = sy || this.bounds.getHeight() / 100;
-    this.shape.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.shape.getId()],
-      x: this.bounds.left,
-      y: this.bounds.top
-    });
-    this.shape.transformation.apply({
-      class: "Transformation",
-      method: "scaleTo",
-      item: [this.shape.getId()],
-      x: sx,
-      y: sy
-    });
+    this.shape.transformation.setLocal(this.bounds.left, this.bounds.top, sx, sy);
   }
   leftButtonDown() {
     if (this.type === "None") {
@@ -272416,11 +272411,11 @@ class ExportSnapshot extends Tool {
     const cameraCenter = this.board.camera.getMbr().getCenter();
     this.mbr = new Mbr(cameraCenter.x - conf.EXPORT_SELECTION_BOX_WIDTH / 2, cameraCenter.y - conf.EXPORT_SELECTION_BOX_HEIGHT / 2, cameraCenter.x + conf.EXPORT_SELECTION_BOX_WIDTH / 2, cameraCenter.y + conf.EXPORT_SELECTION_BOX_HEIGHT / 2, "transparent", "transparent", 1);
     this.board.selection.disable();
-    this.tempDrawingContext = new DrawingContext(board.camera, this.tempCtx);
+    this.tempDrawingContext = new DrawingContext2(board.camera, this.tempCtx);
   }
   rectMoveTo(x, y) {
     this.transformation.translateTo(x, y);
-    this.mbr.transform(this.transformation.matrix);
+    this.mbr.transform(this.transformation.toMatrix());
     this.board.tools.publish();
   }
   resize() {
@@ -272702,7 +272697,7 @@ function createCanvasDrawer(board) {
     const camera = new Camera;
     const newCameraMatix = new Matrix2(-mbr.left, -mbr.top, 1, 1);
     camera.matrix = newCameraMatix;
-    const context = new DrawingContext(camera, ctx);
+    const context = new DrawingContext2(camera, ctx);
     context.setCamera(camera);
     context.ctx.setTransform(board2.camera.getMatrix().scaleX, 0, 0, board2.camera.getMatrix().scaleY, 0, 0);
     context.matrix.applyToContext(context.ctx);
@@ -274599,20 +274594,7 @@ class ShapeTool extends CustomTool {
   initTransformation(sx, sy) {
     sx = sx || this.bounds.getWidth() / 100;
     sy = sy || this.bounds.getHeight() / 100;
-    this.item.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.item.getId()],
-      x: this.bounds.left,
-      y: this.bounds.top
-    });
-    this.item.transformation.apply({
-      class: "Transformation",
-      method: "scaleTo",
-      item: [this.item.getId()],
-      x: sx,
-      y: sy
-    });
+    this.item.transformation.setLocal(this.bounds.left, this.bounds.top, sx, sy);
   }
   pointerDown() {
     this.isDown = true;
@@ -274683,22 +274665,10 @@ class StickerTool extends CustomTool {
   }
   pointerDown() {
     const point5 = this.board.pointer.point;
-    this.item.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.item.getId()],
-      x: point5.x - this.settings.width / 2,
-      y: point5.y - this.settings.height / 2
-    });
+    this.item.transformation.setLocal(point5.x - this.settings.width / 2, point5.y - this.settings.height / 2);
     const width2 = this.item.getWidth();
     const height3 = this.item.getHeight();
-    this.item.transformation.apply({
-      class: "Transformation",
-      method: "scaleBy",
-      item: [this.item.getId()],
-      x: width2 / this.settings.width,
-      y: height3 / this.settings.height
-    });
+    this.item.transformation.scaleBy(width2 / this.settings.width, height3 / this.settings.height);
     const addedItem = this.board.add(this.item);
     this.board.selection.removeAll();
     this.board.selection.add(addedItem);
@@ -275307,7 +275277,7 @@ class Star2 extends BaseItem {
   }
   transformPath() {
     this.path = starPath.copy();
-    this.path.transform(this.transformation.matrix);
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
@@ -275335,7 +275305,7 @@ class Star2 extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("star-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const unscaledWidth = mbr.getWidth() / scaleX;
     const unscaledHeight = mbr.getHeight() / scaleY;
@@ -275422,13 +275392,7 @@ class AddCounter extends StickerTool {
     const x = (left + right) / 2 - COUNTER_DIMENSIONS.width / 2;
     const y = (top + bottom) / 2 - COUNTER_DIMENSIONS.height / 2;
     const counter2 = new Counter(this.board, "");
-    counter2.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [counter2.getId()],
-      x,
-      y
-    });
+    counter2.transformation.setLocal(x, y);
     const addedCounter = this.board.add(counter2);
     this.board.selection.add(addedCounter);
   }
@@ -275466,7 +275430,7 @@ class Counter extends BaseItem {
     }
   }
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     this.left = translateX;
     this.top = translateY;
     this.right = this.left + COUNTER_DIMENSIONS.width * scaleX;
@@ -275658,7 +275622,7 @@ class Card extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
@@ -275672,7 +275636,7 @@ class Card extends BaseItem {
     return div;
   }
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const rotation = this.transformation.getRotation();
     const height3 = this.dimensions.height * scaleY;
     const width2 = this.dimensions.width * scaleX;
@@ -275822,24 +275786,12 @@ class Deck extends BaseItem {
         const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
-          foundItem.transformation.apply({
-            class: "Transformation",
-            method: "translateTo",
-            item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET),
-            y: this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0)
-          });
+          foundItem.transformation.setLocal(this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET), this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0));
           if (firstCard) {
-            const { scaleX, scaleY } = foundItem.transformation.matrix;
-            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            const { scaleX, scaleY } = foundItem.transformation.getMatrixData();
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.getMatrixData();
             if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
-              foundItem.transformation.apply({
-                class: "Transformation",
-                method: "scaleTo",
-                item: [this.id],
-                x: targetScaleX,
-                y: targetScaleY
-              });
+              foundItem.transformation.setLocal({ scaleX: targetScaleX, scaleY: targetScaleY });
             }
           }
           this.board.selection.remove(foundItem);
@@ -275941,7 +275893,7 @@ class Deck extends BaseItem {
     this.subject.publish(this);
   }
   updateMbr() {
-    const { translateX, translateY } = this.transformation.matrix;
+    const { translateX, translateY } = this.transformation.getMatrixData();
     const items = this.index.list();
     const itemsMbr = items[0]?.getMbr().combine(items.slice(1).map((item) => item.getMbr()));
     this.left = translateX;
@@ -276015,7 +275967,7 @@ class Deck extends BaseItem {
     if (!topCard) {
       return div;
     }
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
     const topCardElement = topCard.renderHTML(documentFactory);
     div.appendChild(topCardElement);
@@ -276170,13 +276122,7 @@ function createDeck(event, board) {
   const onlyCards = board.selection.items.isAllItemsType("Card");
   if (onlyCards) {
     const deck = new Deck(board, "");
-    deck.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [deck.getId()],
-      x: cardsOrDecks[cardsOrDecks.length - 1].left,
-      y: cardsOrDecks[cardsOrDecks.length - 1].top
-    });
+    deck.transformation.setLocal(cardsOrDecks[cardsOrDecks.length - 1].left, cardsOrDecks[cardsOrDecks.length - 1].top);
     const addedDeck = board.add(deck);
     board.selection.items.removeAll();
     addedDeck.addChildItems(cardsOrDecks);
@@ -276261,7 +276207,7 @@ class Dice extends BaseItem {
   }
   transformPath() {
     this.path = createRoundedRectanglePath(this).copy();
-    this.path.transform(this.transformation.matrix);
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
@@ -276483,7 +276429,7 @@ class Dice extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width2 = mbr.getWidth();
     const height3 = mbr.getHeight();
@@ -276732,7 +276678,7 @@ class Screen extends BaseItem {
   }
   transformPath() {
     this.path = screenPath.copy();
-    this.path.transform(this.transformation.matrix);
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
@@ -276846,8 +276792,11 @@ class Camera {
   boardId = "";
   observableItem = null;
   throttledZoom;
-  isAnimating = false;
   isTrackingAnimation = false;
+  localAnimationTarget = null;
+  localAnimationId = null;
+  localLastTime = null;
+  localSpringVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0 };
   trackingAnimationId = null;
   trackingTarget = null;
   lastTrackingTime = null;
@@ -276927,7 +276876,7 @@ class Camera {
   }
   view(_left, _top, _scale) {}
   zoomRelativeToPointerBy(scale) {
-    this.zoomRelativeToPointBy(scale, this.pointer.x, this.pointer.y, 0);
+    this.zoomRelativeToPointBy(scale, this.pointer.x, this.pointer.y);
   }
   zoomRelativeToPointBy(scale, x, y, duration = 400) {
     const startScaleX = this.matrix.scaleX;
@@ -276953,23 +276902,12 @@ class Camera {
       this.subject.publish(this);
       return;
     }
-    const startTime = performance.now();
-    const animate = (currentTime) => {
-      if (!currentTime) {
-        currentTime = performance.now();
-      }
-      const progress = Math.min((currentTime - startTime) / duration, 1);
-      const easedProgress = this.easeOutQuad(progress);
-      this.matrix.translateX = this.lerp(startTranslateX, targetTranslateX, easedProgress);
-      this.matrix.translateY = this.lerp(startTranslateY, targetTranslateY, easedProgress);
-      this.matrix.scaleX = this.lerp(startScaleX, finalScaleX, easedProgress);
-      this.matrix.scaleY = this.lerp(startScaleY, finalScaleY, easedProgress);
-      this.subject.publish(this);
-      if (progress < 1) {
-        safeRequestAnimationFrame(animate);
-      }
-    };
-    safeRequestAnimationFrame(animate);
+    this.animateLocalToTarget({
+      translateX: targetTranslateX,
+      translateY: targetTranslateY,
+      scaleX: finalScaleX,
+      scaleY: finalScaleY
+    });
   }
   saveDownEvent(event) {
     this.touchEvents.set(event.pointerId, event);
@@ -277199,13 +277137,6 @@ class Camera {
     }
   }
   viewRectangle(mbr, offsetInPercent = 10, duration = 500) {
-    if (duration <= 0) {
-      duration = 1;
-    }
-    if (this.isAnimating) {
-      return;
-    }
-    this.isAnimating = true;
     if (mbr.left === mbr.right && mbr.bottom === mbr.top) {
       mbr.left -= 100;
       mbr.right += 100;
@@ -277228,9 +277159,6 @@ class Camera {
     targetScale = Math.min(targetScale, this.maxScale);
     const translationX = this.window.width / 2 - (mbrWithOffset.left + mbrWidth / 2) * targetScale;
     const translationY = this.window.height / 2 - (mbrWithOffset.top + mbrHeight / 2) * targetScale;
-    const startTranslationX = this.matrix.translateX;
-    const startTranslationY = this.matrix.translateY;
-    const startScale = this.matrix.scaleX;
     if (duration === 0) {
       this.matrix.translateX = translationX;
       this.matrix.translateY = translationY;
@@ -277239,29 +277167,76 @@ class Camera {
       this.subject.publish(this);
       return;
     }
-    const startTime = performance.now();
-    const animate = () => {
-      const currentTime = performance.now();
-      const progress = Math.min((currentTime - startTime) / duration, 1);
-      const easedProgress = this.easeOutQuad(progress);
-      this.matrix.translateX = this.lerp(startTranslationX, translationX, easedProgress);
-      this.matrix.translateY = this.lerp(startTranslationY, translationY, easedProgress);
-      this.matrix.scaleX = this.lerp(startScale, targetScale, easedProgress);
-      this.matrix.scaleY = this.matrix.scaleX;
+    this.animateLocalToTarget({
+      translateX: translationX,
+      translateY: translationY,
+      scaleX: targetScale,
+      scaleY: targetScale
+    });
+  }
+  cancelLocalAnimation() {
+    if (this.localAnimationId !== null) {
+      cancelAnimationFrame(this.localAnimationId);
+      this.localAnimationId = null;
+    }
+    this.localAnimationTarget = null;
+    this.localLastTime = null;
+    this.localSpringVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0 };
+  }
+  animateLocalToTarget(target) {
+    this.localAnimationTarget = target;
+    if (this.localAnimationId !== null) {
+      return;
+    }
+    this.localLastTime = null;
+    const STIFFNESS = 150;
+    const DAMPING = 28;
+    const SNAP_PX = 0.5;
+    const SNAP_SCALE = 0.0005;
+    const SNAP_VEL = 1;
+    const springStep = (pos, tgt, vel, dt) => {
+      const acc = STIFFNESS * (tgt - pos) - DAMPING * vel;
+      const newVel = vel + acc * dt;
+      return [pos + newVel * dt, newVel];
+    };
+    const loop = () => {
+      const tgt = this.localAnimationTarget;
+      if (!tgt) {
+        this.localAnimationId = null;
+        return;
+      }
+      const now = performance.now();
+      const dt = Math.min(this.localLastTime !== null ? now - this.localLastTime : 16, 50) / 1000;
+      this.localLastTime = now;
+      const v = this.localSpringVelocity;
+      const [tx, vtx] = springStep(this.matrix.translateX, tgt.translateX, v.translateX, dt);
+      const [ty, vty] = springStep(this.matrix.translateY, tgt.translateY, v.translateY, dt);
+      const [sx, vsx] = springStep(this.matrix.scaleX, tgt.scaleX, v.scaleX, dt);
+      const [sy, vsy] = springStep(this.matrix.scaleY, tgt.scaleY, v.scaleY, dt);
+      this.matrix.translateX = tx;
+      this.matrix.translateY = ty;
+      this.matrix.scaleX = sx;
+      this.matrix.scaleY = sy;
+      this.localSpringVelocity = { translateX: vtx, translateY: vty, scaleX: vsx, scaleY: vsy };
+      this.updateBoardPointer();
       this.subject.publish(this);
-      if (progress < 1) {
-        safeRequestAnimationFrame(animate);
-      } else {
-        this.isAnimating = false;
+      const settled = Math.abs(tgt.translateX - tx) < SNAP_PX && Math.abs(tgt.translateY - ty) < SNAP_PX && Math.abs(tgt.scaleX - sx) < SNAP_SCALE && Math.abs(vtx) < SNAP_VEL && Math.abs(vty) < SNAP_VEL;
+      if (settled) {
+        this.matrix.translateX = tgt.translateX;
+        this.matrix.translateY = tgt.translateY;
+        this.matrix.scaleX = tgt.scaleX;
+        this.matrix.scaleY = tgt.scaleY;
+        this.localSpringVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0 };
+        this.localAnimationTarget = null;
+        this.localAnimationId = null;
+        this.localLastTime = null;
+        this.updateBoardPointer();
+        this.subject.publish(this);
+        return;
       }
+      this.localAnimationId = safeRequestAnimationFrame(loop) || null;
     };
-    safeRequestAnimationFrame(animate);
-  }
-  lerp(a2, b2, time2) {
-    return a2 + (b2 - a2) * time2;
-  }
-  easeOutQuad(time2) {
-    return time2 * (2 - time2);
+    this.localAnimationId = safeRequestAnimationFrame(loop) || null;
   }
   zoomToFit(rect, offsetInPercent = 10, duration = 480) {
     this.viewRectangle(rect, offsetInPercent, duration);
@@ -277270,11 +277245,13 @@ class Camera {
     return { x: 0, y: 0 };
   }
   translateTo(x, y) {
+    this.cancelLocalAnimation();
     this.matrix.translate(x, y);
     this.updateBoardPointer();
     this.subject.publish(this);
   }
   translateBy(x, y) {
+    this.cancelLocalAnimation();
     this.matrix.translate(x * this.matrix.scaleX, y * this.matrix.scaleY);
     this.updateBoardPointer();
     this.subject.publish(this);
@@ -279267,8 +279244,8 @@ function handleMultipleItemsResize({
     let itemX = item.getMbr().left;
     let itemY = item.getMbr().top;
     if (item.itemType === "Drawing") {
-      itemX = item.transformation.matrix.translateX;
-      itemY = item.transformation.matrix.translateY;
+      itemX = item.transformation.getMatrixData().translateX;
+      itemY = item.transformation.getMatrixData().translateY;
     }
     const deltaX = itemX - initMbr.left;
     const translateX = deltaX * matrix.scaleX - deltaX + matrix.translateX;
@@ -283638,6 +283615,21 @@ function insertEventsFromOtherConnectionsIntoList(value, list6, board) {
   }
   const events2 = expandEvents(eventArray);
   board.selection.memoize();
+  const focusedTextId = board.selection.memorySnapshot?.focus?.textToEdit;
+  let localOpOriginalSelection = null;
+  if (focusedTextId) {
+    const allUnconfirmed = [...list6.getRecordsToSend(), ...list6.getNewRecords()];
+    for (const rec of allUnconfirmed) {
+      const op = rec.event.body.operation;
+      if (op.class === "RichText" && op.method === "edit") {
+        const items = Array.isArray(op.item) ? op.item : [op.item];
+        if (items.includes(focusedTextId)) {
+          localOpOriginalSelection = op.selection;
+          break;
+        }
+      }
+    }
+  }
   const createdItems = [];
   const updatedText = [];
   const filter = (rec) => {
@@ -283647,6 +283639,10 @@ function insertEventsFromOtherConnectionsIntoList(value, list6, board) {
       createdItems.push(...creating);
       return false;
     }
+    if (op.class === "RichText" && op.method === "edit") {
+      const items = Array.isArray(op.item) ? op.item : [op.item];
+      updatedText.push(...items);
+    }
     return true;
   };
   list6.revertUnconfirmed(filter);
@@ -283665,7 +283661,28 @@ function insertEventsFromOtherConnectionsIntoList(value, list6, board) {
     return arr2.some((item) => lookup9.has(item));
   };
   const currSelection = board.selection.list().map((item) => item.getId());
-  if (hasAnyOverlap(currSelection, createdItems) || hasAnyOverlap(currSelection, updatedText)) {
+  const memoizedCursor = board.selection.memorySnapshot?.focus?.selection;
+  if (focusedTextId && localOpOriginalSelection && memoizedCursor && hasAnyOverlap(currSelection, updatedText)) {
+    const rt = board.items.getById(focusedTextId)?.getRichText();
+    if (rt) {
+      const otAdjustedCursor = rt.editor.getSelection();
+      if (otAdjustedCursor && memoizedCursor.anchor.path.length > 0 && memoizedCursor.focus.path.length > 0) {
+        const deltaAnchor = otAdjustedCursor.anchor.offset - (localOpOriginalSelection?.anchor?.offset ?? 0);
+        const deltaFocus = otAdjustedCursor.focus.offset - (localOpOriginalSelection?.focus?.offset ?? 0);
+        const adjustedSelection = {
+          anchor: {
+            path: memoizedCursor.anchor.path,
+            offset: memoizedCursor.anchor.offset + deltaAnchor
+          },
+          focus: {
+            path: memoizedCursor.focus.path,
+            offset: memoizedCursor.focus.offset + deltaFocus
+          }
+        };
+        rt.editorTransforms.select(rt.editor.editor, adjustedSelection);
+      }
+    }
+  } else if (hasAnyOverlap(currSelection, createdItems) || hasAnyOverlap(currSelection, updatedText)) {
     board.selection.applyMemoizedCaretOrRange();
   }
 }
@@ -283938,16 +283955,16 @@ function createEvents(board, connection, lastIndex) {
   return new Events2(board, connection, lastIndex);
 }
 function createMessageRouter() {
-  const handlers3 = new Map;
+  const handlers2 = new Map;
   function addHandler(type, handler) {
-    handlers3.set(type, (message, board) => {
+    handlers2.set(type, (message, board) => {
       if (message.type === type) {
         handler(message, board);
       }
     });
   }
   function handleMessage(message, board) {
-    const handler = handlers3.get(message.type);
+    const handler = handlers2.get(message.type);
     if (handler) {
       handler(message, board);
     } else {
@@ -364809,7 +364826,7 @@ class CanvasBase extends React106.Component {
     if (!ctx || !cursorsCtx) {
       return;
     }
-    const context = new DrawingContext(this.props.board.camera, ctx, cursorsCtx);
+    const context = new DrawingContext2(this.props.board.camera, ctx, cursorsCtx);
     const { board } = this.props;
     context.setCamera(board.camera);
     context.clear();
@@ -364996,7 +365013,7 @@ var CanvasNoRouter = ({ app, board, children }) => {
     if (!ctx || !cursorsCtx) {
       return;
     }
-    const context = new DrawingContext(board.camera, ctx, cursorsCtx);
+    const context = new DrawingContext2(board.camera, ctx, cursorsCtx);
     context.setCamera(board.camera);
     context.clear();
     context.clearCursor();