microboard-temp 0.2.4 → 0.3.0

package/dist/esm/browser.js

@@ -33402,6 +33402,7 @@ class BaseItem extends Mbr {
   transformationRenderBlock = undefined;
   board;
   id;
+  onRemoveCallbacks = [];
   shouldUseCustomRender = false;
   shouldRenderOutsideViewRect = true;
   itemType = "";
@@ -33479,6 +33480,12 @@ class BaseItem extends Mbr {
         break;
     }
   }
+  addOnRemoveCallback(cb) {
+    this.onRemoveCallbacks.push(cb);
+  }
+  onRemove() {
+    this.onRemoveCallbacks.forEach((cb) => cb());
+  }
   render(context) {}
   renderHTML(documentFactory) {
     return documentFactory.createElement("div");
@@ -38735,6 +38742,9 @@ class VideoItem extends BaseItem {
     this.loadCallbacks.push(callback);
   };
   getStorageId() {
+    if (!this.isStorageUrl) {
+      return;
+    }
     return this.url.split("/").pop();
   }
   getIsStorageUrl() {
@@ -39007,6 +39017,13 @@ class VideoItem extends BaseItem {
       linkElem.click();
     }
   }
+  onRemove() {
+    const storageId = this.getStorageId();
+    if (storageId) {
+      deleteMedia([storageId], this.board.getBoardId());
+    }
+    super.onRemove();
+  }
 }
 // src/Items/Image/calculatePosition.ts
 function calculatePosition(boardImage, board) {
@@ -39437,432 +39454,122 @@ var captureFrame = (frameTime, video) => {
     return null;
   }
 };
-// src/Items/Audio/Audio.ts
-class AudioItem extends BaseItem {
+// src/Items/Placeholder/Placeholder.ts
+var PlaceholderImg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 11.1L7 9.1L12.5 14.6L16 11.1L19 14.1V5H5V11.1ZM4 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3ZM15.5 10C15.1022 10 14.7206 9.84196 14.4393 9.56066C14.158 9.27936 14 8.89782 14 8.5C14 8.10218 14.158 7.72064 14.4393 7.43934C14.7206 7.15804 15.1022 7 15.5 7C15.8978 7 16.2794 7.15804 16.5607 7.43934C16.842 7.72064 17 8.10218 17 8.5C17 8.89782 16.842 9.27936 16.5607 9.56066C16.2794 9.84196 15.8978 10 15.5 10Z" fill="white" fill-opacity="0.6"/>
+</svg>`;
+
+class Placeholder extends BaseItem {
   events;
-  extension;
-  itemType = "Audio";
+  miroData;
+  backgroundColor;
+  icon;
+  itemType = "Placeholder";
+  shapeType = "Rectangle";
   parent = "Board";
   transformation;
-  linkTo;
+  path = Shapes[this.shapeType].path.copy();
+  mbr = Shapes[this.shapeType].path.getMbr().copy();
   subject = new Subject;
-  loadCallbacks = [];
-  beforeLoadCallbacks = [];
   transformationRenderBlock = undefined;
-  url = "";
-  isPlaying = false;
-  currentTime = 0;
-  isStorageUrl = true;
-  constructor(board, isStorageUrl, url, events, id = "", extension2) {
+  iconImage;
+  constructor(board, events, miroData, id = "", backgroundColor = "#E5E5EA", icon = PlaceholderImg?.toString() || "") {
     super(board, id);
     this.events = events;
-    this.extension = extension2;
-    this.linkTo = new LinkTo(this.id, events);
-    this.board = board;
-    this.isStorageUrl = isStorageUrl;
-    if (url) {
-      this.applyUrl(url);
-    }
-    this.transformation = new Transformation(id, events);
-    this.linkTo.subject.subscribe(() => {
+    this.miroData = miroData;
+    this.backgroundColor = backgroundColor;
+    this.icon = icon;
+    this.transformation = new Transformation(this.id, this.events);
+    this.transformation.subject.subscribe((_subject) => {
+      this.transformPath();
       this.updateMbr();
       this.subject.publish(this);
     });
-    this.transformation.subject.subscribe(this.onTransform);
-    this.right = this.left + conf.AUDIO_DIMENSIONS.width;
-    this.bottom = this.top + conf.AUDIO_DIMENSIONS.height;
-    this.shouldUseCustomRender = true;
-  }
-  setCurrentTime(time) {
-    this.currentTime = time;
-  }
-  getCurrentTime() {
-    return this.currentTime;
-  }
-  getIsStorageUrl() {
-    return this.isStorageUrl;
-  }
-  onTransform = () => {
     this.updateMbr();
-    this.subject.publish(this);
-  };
-  doOnceBeforeOnLoad = (callback) => {
-    this.loadCallbacks.push(callback);
-  };
-  doOnceOnLoad = (callback) => {
-    this.loadCallbacks.push(callback);
-  };
-  setIsPlaying(isPlaying) {
-    this.isPlaying = isPlaying;
-    this.shouldRenderOutsideViewRect = isPlaying;
-    this.subject.publish(this);
-  }
-  getIsPlaying() {
-    return this.isPlaying;
+    this.loadIconImage();
   }
-  applyUrl(url) {
-    if (this.isStorageUrl) {
-      try {
-        const newUrl = new URL(url);
-        this.url = `${window.location.origin}${newUrl.pathname}`;
-      } catch (_) {}
+  emit(operation) {
+    if (this.events) {
+      const command = new PlaceholderCommand([this], operation);
+      command.apply();
+      this.events.emit(operation, command);
     } else {
-      this.url = url;
-    }
-  }
-  setUrl(url) {
-    this.emit({
-      class: "Audio",
-      method: "setUrl",
-      item: [this.getId()],
-      url
-    });
-  }
-  getStorageId() {
-    return this.url.split("/").pop();
-  }
-  getUrl() {
-    return this.url;
-  }
-  onLoad = async () => {
-    this.shootBeforeLoadCallbacks();
-    this.updateMbr();
-    this.subject.publish(this);
-    this.shootLoadCallbacks();
-  };
-  onError = (_error) => {
-    this.updateMbr();
-    this.subject.publish(this);
-    this.shootLoadCallbacks();
-  };
-  updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + conf.AUDIO_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + conf.AUDIO_DIMENSIONS.height * scaleY;
-  }
-  render(context) {
-    if (this.transformationRenderBlock) {
-      return;
-    }
-    const ctx = context.ctx;
-    const radius = 12 * this.transformation.getScale().x;
-    ctx.save();
-    ctx.globalCompositeOperation = "destination-out";
-    ctx.beginPath();
-    ctx.moveTo(this.left + radius, this.top);
-    ctx.lineTo(this.left + this.getWidth() - radius, this.top);
-    ctx.quadraticCurveTo(this.left + this.getWidth(), this.top, this.left + this.getWidth(), this.top + radius);
-    ctx.lineTo(this.left + this.getWidth(), this.top + this.getHeight() - radius);
-    ctx.quadraticCurveTo(this.left + this.getWidth(), this.top + this.getHeight(), this.left + this.getWidth() - radius, this.top + this.getHeight());
-    ctx.lineTo(this.left + radius, this.top + this.getHeight());
-    ctx.quadraticCurveTo(this.left, this.top + this.getHeight(), this.left, this.top + this.getHeight() - radius);
-    ctx.lineTo(this.left, this.top + radius);
-    ctx.quadraticCurveTo(this.left, this.top, this.left + radius, this.top);
-    ctx.closePath();
-    ctx.fill();
-    ctx.restore();
-  }
-  renderHTML(documentFactory) {
-    const div = documentFactory.createElement("audio-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    div.id = this.getId();
-    div.style.width = `${conf.AUDIO_DIMENSIONS.width}px`;
-    div.style.height = `${conf.AUDIO_DIMENSIONS.height}px`;
-    div.style.transformOrigin = "top left";
-    div.style.transform = transform;
-    div.style.position = "absolute";
-    div.setAttribute("audio-url", this.getUrl());
-    if (this.extension) {
-      div.setAttribute("extension", this.extension);
-    }
-    if (this.isStorageUrl) {
-      div.setAttribute("is-storage-url", "true");
+      this.apply(operation);
     }
-    div.setAttribute("data-link-to", "");
-    return div;
   }
   serialize() {
     return {
-      itemType: "Audio",
-      url: this.url,
+      itemType: "Placeholder",
+      backgroundColor: this.backgroundColor,
+      icon: this.icon,
       transformation: this.transformation.serialize(),
-      isStorageUrl: this.isStorageUrl,
-      extension: this.extension
+      miroData: this.miroData
     };
   }
   deserialize(data) {
-    if (data.isStorageUrl) {
-      this.isStorageUrl = data.isStorageUrl;
-    }
+    this.initPath();
+    this.backgroundColor = data.backgroundColor ?? this.backgroundColor;
+    this.icon = data.icon ?? this.icon;
+    this.miroData = data.miroData;
     if (data.transformation) {
       this.transformation.deserialize(data.transformation);
+      this.transformPath();
     }
-    if (data.url) {
-      this.setUrl(data.url);
-    }
-    if (data.extension) {
-      this.extension = data.extension;
-    }
+    this.subject.publish(this);
+    return this;
+  }
+  setId(id) {
+    this.id = id;
+    this.transformation.setId(id);
     return this;
   }
+  getId() {
+    return this.id;
+  }
   apply(op) {
     switch (op.class) {
+      case "Placeholder":
+        this.applyPlaceholder(op);
+        this.updateMbr();
+        break;
       case "Transformation":
         this.transformation.apply(op);
         break;
-      case "LinkTo":
-        this.linkTo.apply(op);
+      default:
+        return;
+    }
+    this.subject.publish(this);
+  }
+  applyPlaceholder(op) {
+    switch (op.method) {
+      case "setBackgroundColor":
+        this.applyBackgroundColor(op.backgroundColor);
         break;
-      case "Audio":
-        if (op.method === "setUrl") {
-          this.applyUrl(op.url);
-        }
-        this.subject.publish(this);
+      case "setIcon":
+        this.applyIcon(op.icon);
+        break;
+      case "setMiroData":
+        this.applyMiroData(op.miroData);
         break;
     }
   }
-  emit(operation) {
-    if (this.events) {
-      const command = new AudioCommand([this], operation);
-      command.apply();
-      this.events.emit(operation, command);
-    } else {
-      this.apply(operation);
-    }
+  getBackgroundColor() {
+    return this.backgroundColor;
   }
-  setId(id) {
-    this.id = id;
-    this.transformation.setId(id);
-    return this;
+  applyBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    this.path.setBackgroundColor(backgroundColor);
   }
-  getId() {
-    return this.id;
+  setBackgroundColor(backgroundColor) {
+    this.emit({
+      class: "Placeholder",
+      method: "setBackgroundColor",
+      item: [this.getId()],
+      backgroundColor
+    });
   }
-  shootLoadCallbacks() {
-    while (this.loadCallbacks.length > 0) {
-      this.loadCallbacks.shift()(this);
-    }
-  }
-  shootBeforeLoadCallbacks() {
-    while (this.beforeLoadCallbacks.length > 0) {
-      this.beforeLoadCallbacks.shift()(this);
-    }
-  }
-  getPath() {
-    const { left, top, right, bottom } = this.getMbr();
-    const leftTop = new Point(left, top);
-    const rightTop = new Point(right, top);
-    const rightBottom = new Point(right, bottom);
-    const leftBottom = new Point(left, bottom);
-    return new Path([
-      new Line(leftTop, rightTop),
-      new Line(rightTop, rightBottom),
-      new Line(rightBottom, leftBottom),
-      new Line(leftBottom, leftTop)
-    ], true);
-  }
-  getSnapAnchorPoints() {
-    const mbr = this.getMbr();
-    const width2 = mbr.getWidth();
-    const height2 = mbr.getHeight();
-    return [
-      new Point(mbr.left + width2 / 2, mbr.top),
-      new Point(mbr.left + width2 / 2, mbr.bottom),
-      new Point(mbr.left, mbr.top + height2 / 2),
-      new Point(mbr.right, mbr.top + height2 / 2)
-    ];
-  }
-  isClosed() {
-    return true;
-  }
-  getRichText() {
-    return null;
-  }
-  getLinkTo() {
-    return;
-  }
-  getExtension() {
-    return this.extension;
-  }
-  download() {
-    if (this.extension) {
-      const linkElem = conf.documentFactory.createElement("a");
-      linkElem.href = this.url;
-      linkElem.setAttribute("download", `${this.board.getBoardId()}.${this.extension}`);
-      linkElem.click();
-    }
-  }
-}
-// src/Items/Audio/AudioHelpers.ts
-var uploadAudioToStorage = async (hash, audioBlob, accessToken, boardId) => {
-  return new Promise((resolve2, reject) => {
-    fetch(`${window.location.origin}/api/v1/media/audio/${boardId}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": audioBlob.type,
-        "x-audio-id": hash,
-        Authorization: `Bearer ${accessToken}`
-      },
-      body: audioBlob
-    }).then(async (response) => {
-      if (response.status !== 200) {
-        return catchErrorResponse(response, "audio");
-      }
-      return response.json();
-    }).then((data) => {
-      console.log(data);
-      resolve2(data.src);
-    }).catch((error) => {
-      console.error("Media storage error:", error);
-      reject(error);
-    });
-  });
-};
-var prepareAudio = (file, accessToken, boardId) => {
-  return new Promise((resolve2, reject) => {
-    const audio = document.createElement("audio");
-    audio.src = URL.createObjectURL(file);
-    audio.onloadedmetadata = () => {
-      fileTosha256(file).then((hash) => {
-        uploadAudioToStorage(hash, file, accessToken, boardId).then((url) => {
-          resolve2(url);
-        }).catch(reject);
-      }).catch(() => {
-        reject(new Error("Failed to generate hash"));
-      });
-    };
-    audio.onerror = () => {
-      reject(new Error("Failed to load audio"));
-    };
-  });
-};
-var calculateAudioPosition = (board, audioItem) => {
-  const cameraMbr = board.camera.getMbr();
-  const cameraWidth = cameraMbr.getWidth();
-  const translateX = cameraMbr.left + cameraWidth * 0.34;
-  const translateY = cameraMbr.getCenter().y - audioItem.getHeight() / 2;
-  const scale = cameraWidth * 0.32 / audioItem.getWidth();
-  return new Matrix2(translateX, translateY, scale, scale);
-};
-// src/Items/Placeholder/Placeholder.ts
-var PlaceholderImg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 11.1L7 9.1L12.5 14.6L16 11.1L19 14.1V5H5V11.1ZM4 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3ZM15.5 10C15.1022 10 14.7206 9.84196 14.4393 9.56066C14.158 9.27936 14 8.89782 14 8.5C14 8.10218 14.158 7.72064 14.4393 7.43934C14.7206 7.15804 15.1022 7 15.5 7C15.8978 7 16.2794 7.15804 16.5607 7.43934C16.842 7.72064 17 8.10218 17 8.5C17 8.89782 16.842 9.27936 16.5607 9.56066C16.2794 9.84196 15.8978 10 15.5 10Z" fill="white" fill-opacity="0.6"/>
-</svg>`;
-
-class Placeholder extends BaseItem {
-  events;
-  miroData;
-  backgroundColor;
-  icon;
-  itemType = "Placeholder";
-  shapeType = "Rectangle";
-  parent = "Board";
-  transformation;
-  path = Shapes[this.shapeType].path.copy();
-  mbr = Shapes[this.shapeType].path.getMbr().copy();
-  subject = new Subject;
-  transformationRenderBlock = undefined;
-  iconImage;
-  constructor(board, events, miroData, id = "", backgroundColor = "#E5E5EA", icon = PlaceholderImg?.toString() || "") {
-    super(board, id);
-    this.events = events;
-    this.miroData = miroData;
-    this.backgroundColor = backgroundColor;
-    this.icon = icon;
-    this.transformation = new Transformation(this.id, this.events);
-    this.transformation.subject.subscribe((_subject) => {
-      this.transformPath();
-      this.updateMbr();
-      this.subject.publish(this);
-    });
-    this.updateMbr();
-    this.loadIconImage();
-  }
-  emit(operation) {
-    if (this.events) {
-      const command = new PlaceholderCommand([this], operation);
-      command.apply();
-      this.events.emit(operation, command);
-    } else {
-      this.apply(operation);
-    }
-  }
-  serialize() {
-    return {
-      itemType: "Placeholder",
-      backgroundColor: this.backgroundColor,
-      icon: this.icon,
-      transformation: this.transformation.serialize(),
-      miroData: this.miroData
-    };
-  }
-  deserialize(data) {
-    this.initPath();
-    this.backgroundColor = data.backgroundColor ?? this.backgroundColor;
-    this.icon = data.icon ?? this.icon;
-    this.miroData = data.miroData;
-    if (data.transformation) {
-      this.transformation.deserialize(data.transformation);
-      this.transformPath();
-    }
-    this.subject.publish(this);
-    return this;
-  }
-  setId(id) {
-    this.id = id;
-    this.transformation.setId(id);
-    return this;
-  }
-  getId() {
-    return this.id;
-  }
-  apply(op) {
-    switch (op.class) {
-      case "Placeholder":
-        this.applyPlaceholder(op);
-        this.updateMbr();
-        break;
-      case "Transformation":
-        this.transformation.apply(op);
-        break;
-      default:
-        return;
-    }
-    this.subject.publish(this);
-  }
-  applyPlaceholder(op) {
-    switch (op.method) {
-      case "setBackgroundColor":
-        this.applyBackgroundColor(op.backgroundColor);
-        break;
-      case "setIcon":
-        this.applyIcon(op.icon);
-        break;
-      case "setMiroData":
-        this.applyMiroData(op.miroData);
-        break;
-    }
-  }
-  getBackgroundColor() {
-    return this.backgroundColor;
-  }
-  applyBackgroundColor(backgroundColor) {
-    this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(backgroundColor);
-  }
-  setBackgroundColor(backgroundColor) {
-    this.emit({
-      class: "Placeholder",
-      method: "setBackgroundColor",
-      item: [this.getId()],
-      backgroundColor
-    });
-  }
-  getIcon() {
-    return this.icon;
+  getIcon() {
+    return this.icon;
   }
   applyIcon(icon) {
     this.icon = icon;
@@ -40106,100 +39813,374 @@ class ImageItem extends BaseItem {
     this.shootLoadCallbacks();
   };
   onError = (_error) => {
-    this.image = getPlaceholderImage(this.board);
+    this.image = getPlaceholderImage(this.board);
+    this.updateMbr();
+    this.subject.publish(this);
+    this.shootLoadCallbacks();
+  };
+  onTransform = () => {
+    this.updateMbr();
+    this.subject.publish(this);
+  };
+  updateMbr() {
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    this.left = translateX;
+    this.top = translateY;
+    this.right = this.left + this.image.width * scaleX;
+    this.bottom = this.top + this.image.height * scaleY;
+  }
+  doOnceBeforeOnLoad = (callback) => {
+    this.loadCallbacks.push(callback);
+  };
+  doOnceOnLoad = (callback) => {
+    this.loadCallbacks.push(callback);
+  };
+  setId(id) {
+    this.id = id;
+    this.transformation.setId(id);
+    this.linkTo.setId(id);
+    return this;
+  }
+  getId() {
+    return this.id;
+  }
+  serialize() {
+    return {
+      itemType: "Image",
+      storageLink: this.storageLink,
+      imageDimension: this.imageDimension,
+      transformation: this.transformation.serialize(),
+      linkTo: this.linkTo.serialize()
+    };
+  }
+  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;
+    this.subject.publish(this);
+  }
+  shootBeforeLoadCallbacks() {
+    while (this.beforeLoadCallbacks.length > 0) {
+      this.beforeLoadCallbacks.shift()(this);
+    }
+  }
+  shootLoadCallbacks() {
+    while (this.loadCallbacks.length > 0) {
+      this.loadCallbacks.shift()(this);
+    }
+  }
+  deserialize(data) {
+    if (data.transformation) {
+      this.transformation.deserialize(data.transformation);
+    }
+    this.linkTo.deserialize(data.linkTo);
+    this.image.onload = () => {
+      this.setCoordinates();
+      this.shootLoadCallbacks();
+    };
+    if (data.storageLink) {
+      this.setStorageLink(data.storageLink);
+    }
+    if (this.image.src) {
+      return this;
+    }
+    this.image = getPlaceholderImage(this.board, data.imageDimension);
+    const storageImage = new Image;
+    storageImage.onload = () => {
+      this.image = storageImage;
+      this.onLoad();
+    };
+    storageImage.onerror = this.onError;
+    storageImage.src = this.storageLink;
+    return this;
+  }
+  emit(operation) {
+    if (this.events) {
+      const command = new ImageCommand([this], operation);
+      command.apply();
+      this.events.emit(operation, command);
+    } else {
+      this.apply(operation);
+    }
+  }
+  setDimensions(dim) {
+    this.imageDimension = dim;
+  }
+  apply(op) {
+    switch (op.class) {
+      case "Transformation":
+        this.transformation.apply(op);
+        break;
+      case "LinkTo":
+        this.linkTo.apply(op);
+        break;
+      case "Image":
+        if (op.data.base64) {
+          this.image.src = op.data.base64;
+        }
+        this.setStorageLink(op.data.storageLink);
+        this.setDimensions(op.data.imageDimension);
+        this.subject.publish(this);
+        break;
+    }
+  }
+  render(context) {
+    if (this.transformationRenderBlock) {
+      return;
+    }
+    const ctx = context.ctx;
+    ctx.save();
+    this.transformation.matrix.applyToContext(ctx);
+    ctx.drawImage(this.image, 0, 0);
+    ctx.restore();
+    if (this.getLinkTo()) {
+      const { top, right } = this.getMbr();
+      this.linkTo.render(context, top, right, this.board.camera.getScale());
+    }
+  }
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("image-item");
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.backgroundImage = `url(${this.storageLink})`;
+    div.id = this.getId();
+    div.style.width = `${this.imageDimension.width}px`;
+    div.style.height = `${this.imageDimension.height}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.style.backgroundSize = "cover";
+    div.setAttribute("data-link-to", this.linkTo.serialize() || "");
+    if (this.getLinkTo()) {
+      const linkElement = this.linkTo.renderHTML(documentFactory);
+      scaleElementBy(linkElement, 1 / scaleX, 1 / scaleY);
+      translateElementBy(linkElement, (this.getMbr().getWidth() - parseInt(linkElement.style.width)) / scaleX, 0);
+      div.appendChild(linkElement);
+    }
+    return div;
+  }
+  getPath() {
+    const { left, top, right, bottom } = this.getMbr();
+    const leftTop = new Point(left, top);
+    const rightTop = new Point(right, top);
+    const rightBottom = new Point(right, bottom);
+    const leftBottom = new Point(left, bottom);
+    return new Path([
+      new Line(leftTop, rightTop),
+      new Line(rightTop, rightBottom),
+      new Line(rightBottom, leftBottom),
+      new Line(leftBottom, leftTop)
+    ], true);
+  }
+  getSnapAnchorPoints() {
+    const mbr = this.getMbr();
+    const width2 = mbr.getWidth();
+    const height2 = mbr.getHeight();
+    return [
+      new Point(mbr.left + width2 / 2, mbr.top),
+      new Point(mbr.left + width2 / 2, mbr.bottom),
+      new Point(mbr.left, mbr.top + height2 / 2),
+      new Point(mbr.right, mbr.top + height2 / 2)
+    ];
+  }
+  isClosed() {
+    return true;
+  }
+  getRichText() {
+    return null;
+  }
+  getLinkTo() {
+    return this.linkTo.link;
+  }
+  download() {
+    const linkElem = document.createElement("a");
+    linkElem.href = this.storageLink;
+    linkElem.setAttribute("download", "");
+    linkElem.click();
+  }
+  onRemove() {
+    const storageId = this.getStorageId();
+    if (storageId) {
+      deleteMedia([storageId], this.board.getBoardId());
+    }
+    super.onRemove();
+  }
+}
+// src/Items/Audio/Audio.ts
+class AudioItem extends BaseItem {
+  events;
+  extension;
+  itemType = "Audio";
+  parent = "Board";
+  transformation;
+  linkTo;
+  subject = new Subject;
+  loadCallbacks = [];
+  beforeLoadCallbacks = [];
+  transformationRenderBlock = undefined;
+  url = "";
+  isPlaying = false;
+  currentTime = 0;
+  isStorageUrl = true;
+  constructor(board, isStorageUrl, url, events, id = "", extension2) {
+    super(board, id);
+    this.events = events;
+    this.extension = extension2;
+    this.linkTo = new LinkTo(this.id, events);
+    this.board = board;
+    this.isStorageUrl = isStorageUrl;
+    if (url) {
+      this.applyUrl(url);
+    }
+    this.transformation = new Transformation(id, events);
+    this.linkTo.subject.subscribe(() => {
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.transformation.subject.subscribe(this.onTransform);
+    this.right = this.left + conf.AUDIO_DIMENSIONS.width;
+    this.bottom = this.top + conf.AUDIO_DIMENSIONS.height;
+    this.shouldUseCustomRender = true;
+  }
+  setCurrentTime(time) {
+    this.currentTime = time;
+  }
+  getCurrentTime() {
+    return this.currentTime;
+  }
+  getIsStorageUrl() {
+    return this.isStorageUrl;
+  }
+  onTransform = () => {
+    this.updateMbr();
+    this.subject.publish(this);
+  };
+  doOnceBeforeOnLoad = (callback) => {
+    this.loadCallbacks.push(callback);
+  };
+  doOnceOnLoad = (callback) => {
+    this.loadCallbacks.push(callback);
+  };
+  setIsPlaying(isPlaying) {
+    this.isPlaying = isPlaying;
+    this.shouldRenderOutsideViewRect = isPlaying;
+    this.subject.publish(this);
+  }
+  getIsPlaying() {
+    return this.isPlaying;
+  }
+  applyUrl(url) {
+    if (this.isStorageUrl) {
+      try {
+        const newUrl = new URL(url);
+        this.url = `${window.location.origin}${newUrl.pathname}`;
+      } catch (_) {}
+    } else {
+      this.url = url;
+    }
+  }
+  setUrl(url) {
+    this.emit({
+      class: "Audio",
+      method: "setUrl",
+      item: [this.getId()],
+      url
+    });
+  }
+  getStorageId() {
+    if (!this.isStorageUrl) {
+      return;
+    }
+    return this.url.split("/").pop();
+  }
+  getUrl() {
+    return this.url;
+  }
+  onLoad = async () => {
+    this.shootBeforeLoadCallbacks();
+    this.updateMbr();
+    this.subject.publish(this);
+    this.shootLoadCallbacks();
+  };
+  onError = (_error) => {
     this.updateMbr();
     this.subject.publish(this);
     this.shootLoadCallbacks();
   };
-  onTransform = () => {
-    this.updateMbr();
-    this.subject.publish(this);
-  };
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
     this.top = translateY;
-    this.right = this.left + this.image.width * scaleX;
-    this.bottom = this.top + this.image.height * scaleY;
+    this.right = this.left + conf.AUDIO_DIMENSIONS.width * scaleX;
+    this.bottom = this.top + conf.AUDIO_DIMENSIONS.height * scaleY;
   }
-  doOnceBeforeOnLoad = (callback) => {
-    this.loadCallbacks.push(callback);
-  };
-  doOnceOnLoad = (callback) => {
-    this.loadCallbacks.push(callback);
-  };
-  setId(id) {
-    this.id = id;
-    this.transformation.setId(id);
-    this.linkTo.setId(id);
-    return this;
+  render(context) {
+    if (this.transformationRenderBlock) {
+      return;
+    }
+    const ctx = context.ctx;
+    const radius = 12 * this.transformation.getScale().x;
+    ctx.save();
+    ctx.globalCompositeOperation = "destination-out";
+    ctx.beginPath();
+    ctx.moveTo(this.left + radius, this.top);
+    ctx.lineTo(this.left + this.getWidth() - radius, this.top);
+    ctx.quadraticCurveTo(this.left + this.getWidth(), this.top, this.left + this.getWidth(), this.top + radius);
+    ctx.lineTo(this.left + this.getWidth(), this.top + this.getHeight() - radius);
+    ctx.quadraticCurveTo(this.left + this.getWidth(), this.top + this.getHeight(), this.left + this.getWidth() - radius, this.top + this.getHeight());
+    ctx.lineTo(this.left + radius, this.top + this.getHeight());
+    ctx.quadraticCurveTo(this.left, this.top + this.getHeight(), this.left, this.top + this.getHeight() - radius);
+    ctx.lineTo(this.left, this.top + radius);
+    ctx.quadraticCurveTo(this.left, this.top, this.left + radius, this.top);
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
   }
-  getId() {
-    return this.id;
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("audio-item");
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.id = this.getId();
+    div.style.width = `${conf.AUDIO_DIMENSIONS.width}px`;
+    div.style.height = `${conf.AUDIO_DIMENSIONS.height}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.setAttribute("audio-url", this.getUrl());
+    if (this.extension) {
+      div.setAttribute("extension", this.extension);
+    }
+    if (this.isStorageUrl) {
+      div.setAttribute("is-storage-url", "true");
+    }
+    div.setAttribute("data-link-to", "");
+    return div;
   }
   serialize() {
     return {
-      itemType: "Image",
-      storageLink: this.storageLink,
-      imageDimension: this.imageDimension,
+      itemType: "Audio",
+      url: this.url,
       transformation: this.transformation.serialize(),
-      linkTo: this.linkTo.serialize()
+      isStorageUrl: this.isStorageUrl,
+      extension: this.extension
     };
   }
-  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;
-    this.subject.publish(this);
-  }
-  shootBeforeLoadCallbacks() {
-    while (this.beforeLoadCallbacks.length > 0) {
-      this.beforeLoadCallbacks.shift()(this);
-    }
-  }
-  shootLoadCallbacks() {
-    while (this.loadCallbacks.length > 0) {
-      this.loadCallbacks.shift()(this);
-    }
-  }
   deserialize(data) {
+    if (data.isStorageUrl) {
+      this.isStorageUrl = data.isStorageUrl;
+    }
     if (data.transformation) {
       this.transformation.deserialize(data.transformation);
     }
-    this.linkTo.deserialize(data.linkTo);
-    this.image.onload = () => {
-      this.setCoordinates();
-      this.shootLoadCallbacks();
-    };
-    if (data.storageLink) {
-      this.setStorageLink(data.storageLink);
+    if (data.url) {
+      this.setUrl(data.url);
     }
-    if (this.image.src) {
-      return this;
+    if (data.extension) {
+      this.extension = data.extension;
     }
-    this.image = getPlaceholderImage(this.board, data.imageDimension);
-    const storageImage = new Image;
-    storageImage.onload = () => {
-      this.image = storageImage;
-      this.onLoad();
-    };
-    storageImage.onerror = this.onError;
-    storageImage.src = this.storageLink;
     return this;
   }
-  emit(operation) {
-    if (this.events) {
-      const command = new ImageCommand([this], operation);
-      command.apply();
-      this.events.emit(operation, command);
-    } else {
-      this.apply(operation);
-    }
-  }
-  setDimensions(dim) {
-    this.imageDimension = dim;
-  }
   apply(op) {
     switch (op.class) {
       case "Transformation":
@@ -40208,50 +40189,40 @@ class ImageItem extends BaseItem {
       case "LinkTo":
         this.linkTo.apply(op);
         break;
-      case "Image":
-        if (op.data.base64) {
-          this.image.src = op.data.base64;
+      case "Audio":
+        if (op.method === "setUrl") {
+          this.applyUrl(op.url);
         }
-        this.setStorageLink(op.data.storageLink);
-        this.setDimensions(op.data.imageDimension);
         this.subject.publish(this);
         break;
     }
   }
-  render(context) {
-    if (this.transformationRenderBlock) {
-      return;
+  emit(operation) {
+    if (this.events) {
+      const command = new AudioCommand([this], operation);
+      command.apply();
+      this.events.emit(operation, command);
+    } else {
+      this.apply(operation);
     }
-    const ctx = context.ctx;
-    ctx.save();
-    this.transformation.matrix.applyToContext(ctx);
-    ctx.drawImage(this.image, 0, 0);
-    ctx.restore();
-    if (this.getLinkTo()) {
-      const { top, right } = this.getMbr();
-      this.linkTo.render(context, top, right, this.board.camera.getScale());
+  }
+  setId(id) {
+    this.id = id;
+    this.transformation.setId(id);
+    return this;
+  }
+  getId() {
+    return this.id;
+  }
+  shootLoadCallbacks() {
+    while (this.loadCallbacks.length > 0) {
+      this.loadCallbacks.shift()(this);
     }
   }
-  renderHTML(documentFactory) {
-    const div = documentFactory.createElement("image-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    div.style.backgroundImage = `url(${this.storageLink})`;
-    div.id = this.getId();
-    div.style.width = `${this.imageDimension.width}px`;
-    div.style.height = `${this.imageDimension.height}px`;
-    div.style.transformOrigin = "top left";
-    div.style.transform = transform;
-    div.style.position = "absolute";
-    div.style.backgroundSize = "cover";
-    div.setAttribute("data-link-to", this.linkTo.serialize() || "");
-    if (this.getLinkTo()) {
-      const linkElement = this.linkTo.renderHTML(documentFactory);
-      scaleElementBy(linkElement, 1 / scaleX, 1 / scaleY);
-      translateElementBy(linkElement, (this.getMbr().getWidth() - parseInt(linkElement.style.width)) / scaleX, 0);
-      div.appendChild(linkElement);
+  shootBeforeLoadCallbacks() {
+    while (this.beforeLoadCallbacks.length > 0) {
+      this.beforeLoadCallbacks.shift()(this);
     }
-    return div;
   }
   getPath() {
     const { left, top, right, bottom } = this.getMbr();
@@ -40284,15 +40255,78 @@ class ImageItem extends BaseItem {
     return null;
   }
   getLinkTo() {
-    return this.linkTo.link;
+    return;
+  }
+  getExtension() {
+    return this.extension;
   }
   download() {
-    const linkElem = document.createElement("a");
-    linkElem.href = this.storageLink;
-    linkElem.setAttribute("download", "");
-    linkElem.click();
+    if (this.extension) {
+      const linkElem = conf.documentFactory.createElement("a");
+      linkElem.href = this.url;
+      linkElem.setAttribute("download", `${this.board.getBoardId()}.${this.extension}`);
+      linkElem.click();
+    }
+  }
+  onRemove() {
+    const storageId = this.getStorageId();
+    if (storageId) {
+      deleteMedia([storageId], this.board.getBoardId());
+    }
+    super.onRemove();
   }
 }
+// src/Items/Audio/AudioHelpers.ts
+var uploadAudioToStorage = async (hash, audioBlob, accessToken, boardId) => {
+  return new Promise((resolve2, reject) => {
+    fetch(`${window.location.origin}/api/v1/media/audio/${boardId}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": audioBlob.type,
+        "x-audio-id": hash,
+        Authorization: `Bearer ${accessToken}`
+      },
+      body: audioBlob
+    }).then(async (response) => {
+      if (response.status !== 200) {
+        return catchErrorResponse(response, "audio");
+      }
+      return response.json();
+    }).then((data) => {
+      console.log(data);
+      resolve2(data.src);
+    }).catch((error) => {
+      console.error("Media storage error:", error);
+      reject(error);
+    });
+  });
+};
+var prepareAudio = (file, accessToken, boardId) => {
+  return new Promise((resolve2, reject) => {
+    const audio = document.createElement("audio");
+    audio.src = URL.createObjectURL(file);
+    audio.onloadedmetadata = () => {
+      fileTosha256(file).then((hash) => {
+        uploadAudioToStorage(hash, file, accessToken, boardId).then((url) => {
+          resolve2(url);
+        }).catch(reject);
+      }).catch(() => {
+        reject(new Error("Failed to generate hash"));
+      });
+    };
+    audio.onerror = () => {
+      reject(new Error("Failed to load audio"));
+    };
+  });
+};
+var calculateAudioPosition = (board, audioItem) => {
+  const cameraMbr = board.camera.getMbr();
+  const cameraWidth = cameraMbr.getWidth();
+  const translateX = cameraMbr.left + cameraWidth * 0.34;
+  const translateY = cameraMbr.getCenter().y - audioItem.getHeight() / 2;
+  const scale = cameraWidth * 0.32 / audioItem.getWidth();
+  return new Matrix2(translateX, translateY, scale, scale);
+};
 // src/isSafari.ts
 function isSafari() {
   if (typeof navigator === "undefined") {
@@ -51990,14 +52024,15 @@ class Board {
   }
   applyAddItems(op) {
     if (Array.isArray(op.item)) {
+      const data = op.data;
       const items = op.item.map((item2) => {
-        const created = this.createItem(item2, op.data[item2]);
+        const created = this.createItem(item2, data[item2]);
         this.index.insert(created);
         return created;
       });
       items.forEach((item2) => {
-        if (item2.itemType === "Connector" && op.data[item2.getId()]) {
-          const connectorData = op.data[item2.getId()];
+        if (item2 instanceof Connector2 && data[item2.getId()]) {
+          const connectorData = data[item2.getId()];
           item2.applyStartPoint(connectorData.startPoint);
           item2.applyEndPoint(connectorData.endPoint);
         }
@@ -52026,7 +52061,7 @@ class Board {
     this.findItemAndApply(op.item, (item) => {
       this.index.remove(item);
       this.selection.remove(item);
-      if (item.itemType === "Connector") {
+      if (item instanceof Connector2) {
         item.clearObservedItems();
       }
       removedItems.push(item);
@@ -52034,7 +52069,7 @@ class Board {
   }
   applyRemoveLockedGroupOperation(op) {
     const item = this.index.getById(op.item[0]);
-    if (!item || item.itemType !== "Group") {
+    if (!item || !(item instanceof Group)) {
       return;
     }
     item.getChildren().forEach((item2) => {
@@ -52050,9 +52085,11 @@ class Board {
     });
   }
   applyItemOperation(op) {
-    this.findItemAndApply(op.item, (item) => {
-      item.apply(op);
-    });
+    if ("item" in op) {
+      this.findItemAndApply(op.item, (item) => {
+        item.apply(op);
+      });
+    }
   }
   findItemAndApply(item, apply) {
     if (Array.isArray(item)) {
@@ -52141,9 +52178,8 @@ class Board {
     if (withConnectors) {
       connectors = this.items.getLinkedConnectorsById(item.getId()).map((connector) => connector.getId());
     }
-    const shouldClearStorageUsage = item.itemType === "Image" || item.itemType === "Video" && item.getIsStorageUrl() || item.itemType === "Audio" && item.getIsStorageUrl();
-    if (shouldClearStorageUsage) {
-      deleteMedia([item.getStorageId()], this.boardId);
+    if ("onRemove" in item) {
+      item.onRemove();
     }
     this.emit({
       class: "Board",