microboard-temp 0.4.41 → 0.4.42

package/dist/esm/node.js

@@ -22020,433 +22020,6 @@ class NoOpCommand {
   }
 }
 
-// src/isSafari.ts
-function isSafari() {
-  if (typeof navigator === "undefined") {
-    return false;
-  }
-  const agent = navigator.userAgent;
-  const vendor = navigator.vendor;
-  const is = vendor !== undefined && vendor.includes("Apple") && agent !== undefined && !agent.includes("CriOS") && !agent.includes("FxiOS");
-  return is;
-}
-
-// src/Items/Drawing/Drawing.ts
-class Drawing extends BaseItem {
-  points;
-  events;
-  itemType = "Drawing";
-  parent = "Board";
-  transformation;
-  path2d = new conf.path2DFactory;
-  subject = new Subject;
-  untransformedMbr = new Mbr;
-  lines = [];
-  linkTo;
-  strokeWidth = 1;
-  borderStyle = "solid";
-  linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
-  borderOpacity = 1;
-  transformationRenderBlock = undefined;
-  constructor(board, points, events, id = "") {
-    super(board, id);
-    this.points = points;
-    this.events = events;
-    this.transformation = new Transformation(id, events);
-    this.linkTo = new LinkTo(this.id, this.events);
-    this.transformation.subject.subscribe(() => {
-      this.updateMbr();
-      this.updateLines();
-      this.subject.publish(this);
-    });
-    this.linkTo.subject.subscribe(() => {
-      this.updateMbr();
-      this.updateLines();
-      this.subject.publish(this);
-    });
-    this.updateLines();
-  }
-  serialize() {
-    this.optimizePoints();
-    const points = [];
-    for (const point3 of this.points) {
-      points.push({ x: point3.x, y: point3.y });
-    }
-    return {
-      itemType: "Drawing",
-      points,
-      transformation: this.transformation.serialize(),
-      strokeStyle: this.borderColor,
-      strokeWidth: this.strokeWidth,
-      linkTo: this.linkTo.serialize()
-    };
-  }
-  deserialize(data) {
-    this.points = [];
-    for (const point3 of data.points) {
-      this.points.push(new Point(point3.x, point3.y));
-    }
-    this.linkTo.deserialize(data.linkTo);
-    this.optimizePoints();
-    this.transformation.deserialize(data.transformation);
-    this.borderColor = data.strokeStyle;
-    this.strokeWidth = data.strokeWidth;
-    this.updateGeometry();
-    return this;
-  }
-  updateGeometry() {
-    this.updatePath2d();
-    this.updateLines();
-    this.updateMbr();
-  }
-  updateMbr() {
-    const offset = this.getStrokeWidth() / 2;
-    const untransformedMbr = this.untransformedMbr.copy();
-    untransformedMbr.left -= offset;
-    untransformedMbr.top -= offset;
-    untransformedMbr.right += offset;
-    untransformedMbr.bottom += offset;
-    const mbr = untransformedMbr.getTransformed(this.transformation.matrix);
-    this.left = mbr.left;
-    this.top = mbr.top;
-    this.right = mbr.right;
-    this.bottom = mbr.bottom;
-  }
-  updatePath2d() {
-    this.path2d = new conf.path2DFactory;
-    const context = this.path2d;
-    const points = this.points;
-    if (points.length < 3) {
-      context.arc(points[0].x, points[0].y, 0.5, 0, Math.PI * 2, true);
-      context.closePath();
-    } else {
-      context.moveTo(points[0].x, points[0].y);
-      let j = 1;
-      for (;j < points.length - 2; j++) {
-        const cx = (points[j].x + points[j + 1].x) / 2;
-        const cy = (points[j].y + points[j + 1].y) / 2;
-        context.quadraticCurveTo(points[j].x, points[j].y, cx, cy);
-      }
-      const x = points[j].x === points[j + 1].x && isSafari() ? points[j + 1].x + 0.01 : points[j + 1].x;
-      const y = points[j].y === points[j + 1].y && isSafari() ? points[j + 1].y + 0.01 : points[j + 1].y;
-      context.quadraticCurveTo(points[j].x, points[j].y, x, y);
-    }
-    let left = Number.MAX_SAFE_INTEGER;
-    let right = Number.MIN_SAFE_INTEGER;
-    let top = Number.MAX_SAFE_INTEGER;
-    let bottom = Number.MIN_SAFE_INTEGER;
-    for (const { x, y } of this.points) {
-      if (x < left) {
-        left = x;
-      }
-      if (x > right) {
-        right = x;
-      }
-      if (y < top) {
-        top = y;
-      }
-      if (y > bottom) {
-        bottom = y;
-      }
-    }
-    this.untransformedMbr = new Mbr(left, top, right, bottom);
-  }
-  updateLines() {
-    this.lines = [];
-    const matrix = this.transformation.matrix;
-    if (this.points.length < 2) {
-      return;
-    }
-    for (let i = 0;i < this.points.length - 2; i++) {
-      const p1 = this.points[i];
-      const p2 = this.points[i + 1];
-      const line = new Line(p1.copy(), p2.copy());
-      line.transform(matrix);
-      this.lines.push(line);
-    }
-  }
-  optimizePoints() {
-    const dp = douglasPeucker(this.points, 1);
-    dp.push(this.points[this.points.length - 1]);
-    this.points = dp;
-  }
-  addPoint(point3) {
-    const previous2 = this.points[this.points.length - 1];
-    if (previous2) {
-      const distance = point3.getDistance(previous2);
-      if (distance >= 2) {
-        this.points.push(point3);
-      }
-    } else {
-      this.points.push(point3);
-    }
-    this.updateGeometry();
-  }
-  setId(id) {
-    this.id = id;
-    this.transformation.setId(id);
-    this.linkTo.setId(id);
-    return this;
-  }
-  getId() {
-    return this.id;
-  }
-  render(context) {
-    if (this.transformationRenderBlock) {
-      return;
-    }
-    const ctx = context.ctx;
-    ctx.save();
-    ctx.strokeStyle = this.borderColor;
-    ctx.lineWidth = this.strokeWidth;
-    ctx.lineCap = "round";
-    ctx.setLineDash(this.linePattern);
-    this.transformation.matrix.applyToContext(ctx);
-    ctx.stroke(this.path2d.nativePath);
-    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("drawing-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    const mbr = this.getMbr();
-    const width = mbr.getWidth();
-    const height = mbr.getHeight();
-    const unscaledWidth = width / scaleX;
-    const unscaledHeight = height / scaleY;
-    const svg = documentFactory.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.setAttribute("width", `${unscaledWidth}px`);
-    svg.setAttribute("height", `${unscaledHeight}px`);
-    svg.setAttribute("viewBox", `0 0 ${unscaledWidth} ${unscaledHeight}`);
-    svg.setAttribute("style", "position: absolute; overflow: visible;");
-    const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
-    pathElement.setAttribute("d", this.getPathData());
-    pathElement.setAttribute("stroke", this.borderColor);
-    pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
-    pathElement.setAttribute("fill", "none");
-    svg.appendChild(pathElement);
-    div.appendChild(svg);
-    div.id = this.getId();
-    div.style.width = unscaledWidth + "px";
-    div.style.height = unscaledHeight + "px";
-    div.style.transformOrigin = "left top";
-    div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    div.style.position = "absolute";
-    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, (width - parseInt(linkElement.style.width)) / scaleX, 0);
-      div.appendChild(linkElement);
-    }
-    return div;
-  }
-  getPathData() {
-    const points = this.points;
-    if (points.length < 2) {
-      return "";
-    }
-    let pathData = `M ${points[0].x} ${points[0].y}`;
-    if (points.length < 3) {
-      pathData += ` L ${points[0].x + 0.5} ${points[0].y}`;
-    } else {
-      let j = 1;
-      for (;j < points.length - 2; j++) {
-        const cx = (points[j].x + points[j + 1].x) / 2;
-        const cy = (points[j].y + points[j + 1].y) / 2;
-        pathData += ` Q ${points[j].x} ${points[j].y} ${cx} ${cy}`;
-      }
-      const x = points[j].x === points[j + 1].x && isSafari() ? points[j + 1].x + 0.01 : points[j + 1].x;
-      const y = points[j].y === points[j + 1].y && isSafari() ? points[j + 1].y + 0.01 : points[j + 1].y;
-      pathData += ` Q ${points[j].x} ${points[j].y} ${x} ${y}`;
-    }
-    return pathData;
-  }
-  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 width = mbr.getWidth();
-    const height = mbr.getHeight();
-    return [
-      new Point(mbr.left + width / 2, mbr.top),
-      new Point(mbr.left + width / 2, mbr.bottom),
-      new Point(mbr.left, mbr.top + height / 2),
-      new Point(mbr.right, mbr.top + height / 2)
-    ];
-  }
-  getLines() {
-    return this.lines;
-  }
-  isClosed() {
-    return true;
-  }
-  isEnclosedOrCrossedBy(rect) {
-    for (const line of this.lines) {
-      if (line.isEnclosedOrCrossedBy(rect)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  emit(operation) {
-    if (this.events) {
-      const command = new DrawingCommand([this], operation);
-      command.apply();
-      this.events.emit(operation, command);
-    } else {
-      this.apply(operation);
-    }
-  }
-  apply(op) {
-    switch (op.class) {
-      case "Drawing":
-        switch (op.method) {
-          case "setStrokeColor":
-            this.borderColor = op.color;
-            break;
-          case "setStrokeWidth":
-            this.strokeWidth = op.width;
-            this.linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
-            break;
-          case "setStrokeOpacity":
-            this.borderOpacity = op.opacity;
-            break;
-          case "setStrokeStyle":
-            this.borderStyle = op.style;
-            this.linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
-            break;
-        }
-        this.updateMbr();
-        break;
-      case "Transformation":
-        this.transformation.apply(op);
-        break;
-      case "LinkTo":
-        this.linkTo.apply(op);
-        break;
-      default:
-        return;
-    }
-    this.subject.publish(this);
-  }
-  setStrokeOpacity(opacity) {
-    this.emit({
-      class: "Drawing",
-      method: "setStrokeOpacity",
-      item: [this.id],
-      opacity
-    });
-    return this;
-  }
-  getStrokeOpacity() {
-    return this.borderOpacity;
-  }
-  setBorderStyle(style) {
-    this.emit({
-      class: "Drawing",
-      method: "setStrokeStyle",
-      item: [this.id],
-      style
-    });
-    return this;
-  }
-  getBorderStyle() {
-    return this.borderStyle;
-  }
-  setStrokeColor(color) {
-    this.emit({
-      class: "Drawing",
-      method: "setStrokeColor",
-      item: [this.id],
-      color
-    });
-    return this;
-  }
-  getStrokeColor() {
-    return this.borderColor;
-  }
-  setStrokeWidth(width) {
-    this.emit({
-      class: "Drawing",
-      method: "setStrokeWidth",
-      item: [this.id],
-      width,
-      prevWidth: this.strokeWidth
-    });
-    return this;
-  }
-  getLinkTo() {
-    return this.linkTo.link;
-  }
-  getStrokeWidth() {
-    return this.strokeWidth;
-  }
-  getRichText() {
-    return null;
-  }
-  isPointNearLine(point3, threshold = 10) {
-    const transformedMouseX = (point3.x - this.transformation.matrix.translateX) / this.transformation.matrix.scaleX;
-    const transformedMouseY = (point3.y - this.transformation.matrix.translateY) / this.transformation.matrix.scaleY;
-    const transformedMouse = new Point(transformedMouseX, transformedMouseY);
-    for (let i = 0;i < this.points.length - 1; i++) {
-      const p1 = this.points[i];
-      const p2 = this.points[i + 1];
-      const distance = getPerpendicularDistance(transformedMouse, p1, p2);
-      if (distance < threshold) {
-        return true;
-      }
-    }
-    return false;
-  }
-}
-function getPerpendicularDistance(point3, lineStart, lineEnd) {
-  const { x: px, y: py } = point3;
-  const { x: sx, y: sy } = lineStart;
-  const { x: ex, y: ey } = lineEnd;
-  const numerator = Math.abs((ey - sy) * px - (ex - sx) * py + ex * sy - ey * sx);
-  const denominator = Math.sqrt(Math.pow(ey - sy, 2) + Math.pow(ex - sx, 2));
-  return numerator / denominator;
-}
-function douglasPeucker(points, epsilon2) {
-  if (points.length < 3) {
-    return points;
-  }
-  const start = points[0];
-  const end = points[points.length - 1];
-  let maxDistance = 0;
-  let maxIndex = 0;
-  for (let i = 1;i < points.length - 1; i++) {
-    const distance = getPerpendicularDistance(points[i], start, end);
-    if (distance > maxDistance) {
-      maxDistance = distance;
-      maxIndex = i;
-    }
-  }
-  if (maxDistance > epsilon2) {
-    const leftSubPoints = points.slice(0, maxIndex + 1);
-    const rightSubPoints = points.slice(maxIndex);
-    const leftRecursiveResult = douglasPeucker(leftSubPoints, epsilon2);
-    const rightRecursiveResult = douglasPeucker(rightSubPoints, epsilon2);
-    return leftRecursiveResult.slice(0, -1).concat(rightRecursiveResult);
-  } else {
-    return [start, end];
-  }
-}
 // src/SpatialIndex/LayeredIndex/Layers.ts
 class Layers {
   getNewLayer;
@@ -23769,12 +23342,12 @@ class Items {
     if (enclosed.length === 0) {
       enclosed = underPointer;
     }
-    if (underPointer.some((item) => item instanceof Drawing)) {
+    if (underPointer.some((item) => item.itemType === "Drawing")) {
       enclosed = [...underPointer, ...enclosed];
     }
     const { nearest } = enclosed.reduce((acc, item) => {
       const area = item.getMbr().getHeight() * item.getMbr().getWidth();
-      if (item instanceof Drawing && !item.isPointNearLine(this.pointer.point)) {
+      if (item.itemType === "Drawing" && !item.isPointNearLine(this.pointer.point)) {
         return acc;
       }
       const isItemTransparent = item instanceof Shape && item?.getBackgroundColor() === "none";
@@ -44660,202 +44233,455 @@ class Placeholder extends BaseItem {
   renderHTML(documentFactory) {
     return documentFactory.createElement("div");
   }
-  getLinkTo() {
-    return;
+  getLinkTo() {
+    return;
+  }
+  getRichText() {
+    return null;
+  }
+}
+// src/Items/Image/Image.ts
+function getPlaceholderImage(board, imageDimension) {
+  const placeholderCanvas = conf.documentFactory.createElement("canvas");
+  const placeholderContext = placeholderCanvas.getContext("2d");
+  const context = new DrawingContext(board.camera, placeholderContext);
+  const placeholder = new Placeholder(board);
+  if (imageDimension) {
+    placeholderCanvas.width = imageDimension.width;
+    placeholderCanvas.height = imageDimension.height;
+    placeholder.transformation.scaleTo(imageDimension.width / 100, imageDimension.height / 100);
+  } else {
+    placeholderCanvas.width = 250;
+    placeholderCanvas.height = 50;
+    placeholder.transformation.scaleTo(250 / 100, 50 / 100);
+  }
+  const placeholderImage = new Image;
+  placeholderImage.src = placeholderCanvas.toDataURL();
+  return placeholderImage;
+}
+
+class ImageItem extends BaseItem {
+  events;
+  itemType = "Image";
+  parent = "Board";
+  image;
+  transformation;
+  linkTo;
+  subject = new Subject;
+  loadCallbacks = [];
+  beforeLoadCallbacks = [];
+  transformationRenderBlock = undefined;
+  storageLink;
+  imageDimension;
+  board;
+  constructor({ base64, storageLink, imageDimension }, board, events, id = "") {
+    super(board, id);
+    this.events = events;
+    this.linkTo = new LinkTo(this.id, events);
+    this.board = board;
+    this.setStorageLink(storageLink);
+    this.imageDimension = imageDimension;
+    this.transformation = new Transformation(id, events);
+    this.image = new Image;
+    this.image.crossOrigin = "anonymous";
+    this.image.onload = this.onLoad;
+    this.image.onerror = this.onError;
+    if (typeof base64 === "string") {
+      this.image.src = base64;
+    }
+    this.linkTo.subject.subscribe(() => {
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.transformation.subject.subscribe(this.onTransform);
+  }
+  setStorageLink(link2) {
+    try {
+      const url = new URL(link2);
+      this.storageLink = `${window?.location.origin}${url.pathname}`;
+    } catch (_) {}
+  }
+  getStorageId() {
+    return this.storageLink.split("/").pop();
+  }
+  handleError = () => {
+    console.error("Invalid dataUrl or image failed to load.");
+    this.image = getPlaceholderImage(this.board);
+    this.updateMbr();
+    this.subject.publish(this);
+    this.shootLoadCallbacks();
+  };
+  onLoad = async () => {
+    this.shootBeforeLoadCallbacks();
+    this.updateMbr();
+    this.subject.publish(this);
+    this.shootLoadCallbacks();
+  };
+  onError = (_error) => {
+    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) {
+      conf.hooks.beforeMediaRemove([storageId], this.board.getBoardId());
+    }
+    super.onRemove();
+  }
 }
-// src/Items/Image/Image.ts
-function getPlaceholderImage(board, imageDimension) {
-  const placeholderCanvas = conf.documentFactory.createElement("canvas");
-  const placeholderContext = placeholderCanvas.getContext("2d");
-  const context = new DrawingContext(board.camera, placeholderContext);
-  const placeholder = new Placeholder(board);
-  if (imageDimension) {
-    placeholderCanvas.width = imageDimension.width;
-    placeholderCanvas.height = imageDimension.height;
-    placeholder.transformation.scaleTo(imageDimension.width / 100, imageDimension.height / 100);
-  } else {
-    placeholderCanvas.width = 250;
-    placeholderCanvas.height = 50;
-    placeholder.transformation.scaleTo(250 / 100, 50 / 100);
+// src/isSafari.ts
+function isSafari() {
+  if (typeof navigator === "undefined") {
+    return false;
   }
-  const placeholderImage = new Image;
-  placeholderImage.src = placeholderCanvas.toDataURL();
-  return placeholderImage;
+  const agent = navigator.userAgent;
+  const vendor = navigator.vendor;
+  const is2 = vendor !== undefined && vendor.includes("Apple") && agent !== undefined && !agent.includes("CriOS") && !agent.includes("FxiOS");
+  return is2;
 }
 
-class ImageItem extends BaseItem {
+// src/Items/Drawing/Drawing.ts
+class Drawing extends BaseItem {
+  points;
   events;
-  itemType = "Image";
+  itemType = "Drawing";
   parent = "Board";
-  image;
   transformation;
-  linkTo;
+  path2d = new conf.path2DFactory;
   subject = new Subject;
-  loadCallbacks = [];
-  beforeLoadCallbacks = [];
+  untransformedMbr = new Mbr;
+  lines = [];
+  linkTo;
+  strokeWidth = 1;
+  borderStyle = "solid";
+  linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+  borderOpacity = 1;
   transformationRenderBlock = undefined;
-  storageLink;
-  imageDimension;
-  board;
-  constructor({ base64, storageLink, imageDimension }, board, events, id = "") {
+  constructor(board, points, events, id = "") {
     super(board, id);
+    this.points = points;
     this.events = events;
-    this.linkTo = new LinkTo(this.id, events);
-    this.board = board;
-    this.setStorageLink(storageLink);
-    this.imageDimension = imageDimension;
     this.transformation = new Transformation(id, events);
-    this.image = new Image;
-    this.image.crossOrigin = "anonymous";
-    this.image.onload = this.onLoad;
-    this.image.onerror = this.onError;
-    if (typeof base64 === "string") {
-      this.image.src = base64;
-    }
+    this.linkTo = new LinkTo(this.id, this.events);
+    this.transformation.subject.subscribe(() => {
+      this.updateMbr();
+      this.updateLines();
+      this.subject.publish(this);
+    });
     this.linkTo.subject.subscribe(() => {
       this.updateMbr();
+      this.updateLines();
       this.subject.publish(this);
     });
-    this.transformation.subject.subscribe(this.onTransform);
-  }
-  setStorageLink(link2) {
-    try {
-      const url = new URL(link2);
-      this.storageLink = `${window?.location.origin}${url.pathname}`;
-    } catch (_) {}
-  }
-  getStorageId() {
-    return this.storageLink.split("/").pop();
-  }
-  handleError = () => {
-    console.error("Invalid dataUrl or image failed to load.");
-    this.image = getPlaceholderImage(this.board);
-    this.updateMbr();
-    this.subject.publish(this);
-    this.shootLoadCallbacks();
-  };
-  onLoad = async () => {
-    this.shootBeforeLoadCallbacks();
-    this.updateMbr();
-    this.subject.publish(this);
-    this.shootLoadCallbacks();
-  };
-  onError = (_error) => {
-    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;
+    this.updateLines();
   }
   serialize() {
+    this.optimizePoints();
+    const points = [];
+    for (const point5 of this.points) {
+      points.push({ x: point5.x, y: point5.y });
+    }
     return {
-      itemType: "Image",
-      storageLink: this.storageLink,
-      imageDimension: this.imageDimension,
+      itemType: "Drawing",
+      points,
       transformation: this.transformation.serialize(),
+      strokeStyle: this.borderColor,
+      strokeWidth: this.strokeWidth,
       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);
+  deserialize(data) {
+    this.points = [];
+    for (const point5 of data.points) {
+      this.points.push(new Point(point5.x, point5.y));
     }
+    this.linkTo.deserialize(data.linkTo);
+    this.optimizePoints();
+    this.transformation.deserialize(data.transformation);
+    this.borderColor = data.strokeStyle;
+    this.strokeWidth = data.strokeWidth;
+    this.updateGeometry();
+    return this;
   }
-  shootLoadCallbacks() {
-    while (this.loadCallbacks.length > 0) {
-      this.loadCallbacks.shift()(this);
-    }
+  updateGeometry() {
+    this.updatePath2d();
+    this.updateLines();
+    this.updateMbr();
   }
-  deserialize(data) {
-    if (data.transformation) {
-      this.transformation.deserialize(data.transformation);
+  updateMbr() {
+    const offset = this.getStrokeWidth() / 2;
+    const untransformedMbr = this.untransformedMbr.copy();
+    untransformedMbr.left -= offset;
+    untransformedMbr.top -= offset;
+    untransformedMbr.right += offset;
+    untransformedMbr.bottom += offset;
+    const mbr = untransformedMbr.getTransformed(this.transformation.matrix);
+    this.left = mbr.left;
+    this.top = mbr.top;
+    this.right = mbr.right;
+    this.bottom = mbr.bottom;
+  }
+  updatePath2d() {
+    this.path2d = new conf.path2DFactory;
+    const context = this.path2d;
+    const points = this.points;
+    if (points.length < 3) {
+      context.arc(points[0].x, points[0].y, 0.5, 0, Math.PI * 2, true);
+      context.closePath();
+    } else {
+      context.moveTo(points[0].x, points[0].y);
+      let j = 1;
+      for (;j < points.length - 2; j++) {
+        const cx = (points[j].x + points[j + 1].x) / 2;
+        const cy = (points[j].y + points[j + 1].y) / 2;
+        context.quadraticCurveTo(points[j].x, points[j].y, cx, cy);
+      }
+      const x = points[j].x === points[j + 1].x && isSafari() ? points[j + 1].x + 0.01 : points[j + 1].x;
+      const y = points[j].y === points[j + 1].y && isSafari() ? points[j + 1].y + 0.01 : points[j + 1].y;
+      context.quadraticCurveTo(points[j].x, points[j].y, x, y);
     }
-    this.linkTo.deserialize(data.linkTo);
-    this.image.onload = () => {
-      this.setCoordinates();
-      this.shootLoadCallbacks();
-    };
-    if (data.storageLink) {
-      this.setStorageLink(data.storageLink);
+    let left = Number.MAX_SAFE_INTEGER;
+    let right = Number.MIN_SAFE_INTEGER;
+    let top = Number.MAX_SAFE_INTEGER;
+    let bottom = Number.MIN_SAFE_INTEGER;
+    for (const { x, y } of this.points) {
+      if (x < left) {
+        left = x;
+      }
+      if (x > right) {
+        right = x;
+      }
+      if (y < top) {
+        top = y;
+      }
+      if (y > bottom) {
+        bottom = y;
+      }
     }
-    if (this.image.src) {
-      return this;
+    this.untransformedMbr = new Mbr(left, top, right, bottom);
+  }
+  updateLines() {
+    this.lines = [];
+    const matrix = this.transformation.matrix;
+    if (this.points.length < 2) {
+      return;
+    }
+    for (let i = 0;i < this.points.length - 2; i++) {
+      const p1 = this.points[i];
+      const p22 = this.points[i + 1];
+      const line = new Line(p1.copy(), p22.copy());
+      line.transform(matrix);
+      this.lines.push(line);
     }
-    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);
+  optimizePoints() {
+    const dp = douglasPeucker(this.points, 1);
+    dp.push(this.points[this.points.length - 1]);
+    this.points = dp;
+  }
+  addPoint(point5) {
+    const previous2 = this.points[this.points.length - 1];
+    if (previous2) {
+      const distance = point5.getDistance(previous2);
+      if (distance >= 2) {
+        this.points.push(point5);
+      }
     } else {
-      this.apply(operation);
+      this.points.push(point5);
     }
+    this.updateGeometry();
   }
-  setDimensions(dim) {
-    this.imageDimension = dim;
+  setId(id) {
+    this.id = id;
+    this.transformation.setId(id);
+    this.linkTo.setId(id);
+    return this;
   }
-  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;
-    }
+  getId() {
+    return this.id;
   }
   render(context) {
     if (this.transformationRenderBlock) {
@@ -44863,8 +44689,12 @@ class ImageItem extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
+    ctx.strokeStyle = this.borderColor;
+    ctx.lineWidth = this.strokeWidth;
+    ctx.lineCap = "round";
+    ctx.setLineDash(this.linePattern);
     this.transformation.matrix.applyToContext(ctx);
-    ctx.drawImage(this.image, 0, 0);
+    ctx.stroke(this.path2d.nativePath);
     ctx.restore();
     if (this.getLinkTo()) {
       const { top, right } = this.getMbr();
@@ -44872,26 +44702,61 @@ class ImageItem extends BaseItem {
     }
   }
   renderHTML(documentFactory) {
-    const div = documentFactory.createElement("image-item");
+    const div = documentFactory.createElement("drawing-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})`;
+    const mbr = this.getMbr();
+    const width2 = mbr.getWidth();
+    const height2 = mbr.getHeight();
+    const unscaledWidth = width2 / scaleX;
+    const unscaledHeight = height2 / scaleY;
+    const svg3 = documentFactory.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg3.setAttribute("width", `${unscaledWidth}px`);
+    svg3.setAttribute("height", `${unscaledHeight}px`);
+    svg3.setAttribute("viewBox", `0 0 ${unscaledWidth} ${unscaledHeight}`);
+    svg3.setAttribute("style", "position: absolute; overflow: visible;");
+    const pathElement = documentFactory.createElementNS("http://www.w3.org/2000/svg", "path");
+    pathElement.setAttribute("d", this.getPathData());
+    pathElement.setAttribute("stroke", this.borderColor);
+    pathElement.setAttribute("stroke-width", `${this.strokeWidth}`);
+    pathElement.setAttribute("fill", "none");
+    svg3.appendChild(pathElement);
+    div.appendChild(svg3);
     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.width = unscaledWidth + "px";
+    div.style.height = unscaledHeight + "px";
+    div.style.transformOrigin = "left top";
+    div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.position = "absolute";
-    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);
+      translateElementBy(linkElement, (width2 - parseInt(linkElement.style.width)) / scaleX, 0);
       div.appendChild(linkElement);
     }
     return div;
   }
+  getPathData() {
+    const points = this.points;
+    if (points.length < 2) {
+      return "";
+    }
+    let pathData = `M ${points[0].x} ${points[0].y}`;
+    if (points.length < 3) {
+      pathData += ` L ${points[0].x + 0.5} ${points[0].y}`;
+    } else {
+      let j = 1;
+      for (;j < points.length - 2; j++) {
+        const cx = (points[j].x + points[j + 1].x) / 2;
+        const cy = (points[j].y + points[j + 1].y) / 2;
+        pathData += ` Q ${points[j].x} ${points[j].y} ${cx} ${cy}`;
+      }
+      const x = points[j].x === points[j + 1].x && isSafari() ? points[j + 1].x + 0.01 : points[j + 1].x;
+      const y = points[j].y === points[j + 1].y && isSafari() ? points[j + 1].y + 0.01 : points[j + 1].y;
+      pathData += ` Q ${points[j].x} ${points[j].y} ${x} ${y}`;
+    }
+    return pathData;
+  }
   getPath() {
     const { left, top, right, bottom } = this.getMbr();
     const leftTop = new Point(left, top);
@@ -44916,27 +44781,162 @@ class ImageItem extends BaseItem {
       new Point(mbr.right, mbr.top + height2 / 2)
     ];
   }
+  getLines() {
+    return this.lines;
+  }
   isClosed() {
     return true;
   }
-  getRichText() {
-    return null;
+  isEnclosedOrCrossedBy(rect) {
+    for (const line of this.lines) {
+      if (line.isEnclosedOrCrossedBy(rect)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  emit(operation) {
+    if (this.events) {
+      const command = new DrawingCommand([this], operation);
+      command.apply();
+      this.events.emit(operation, command);
+    } else {
+      this.apply(operation);
+    }
+  }
+  apply(op) {
+    switch (op.class) {
+      case "Drawing":
+        switch (op.method) {
+          case "setStrokeColor":
+            this.borderColor = op.color;
+            break;
+          case "setStrokeWidth":
+            this.strokeWidth = op.width;
+            this.linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+            break;
+          case "setStrokeOpacity":
+            this.borderOpacity = op.opacity;
+            break;
+          case "setStrokeStyle":
+            this.borderStyle = op.style;
+            this.linePattern = scalePatterns(this.strokeWidth)[this.borderStyle];
+            break;
+        }
+        this.updateMbr();
+        break;
+      case "Transformation":
+        this.transformation.apply(op);
+        break;
+      case "LinkTo":
+        this.linkTo.apply(op);
+        break;
+      default:
+        return;
+    }
+    this.subject.publish(this);
+  }
+  setStrokeOpacity(opacity) {
+    this.emit({
+      class: "Drawing",
+      method: "setStrokeOpacity",
+      item: [this.id],
+      opacity
+    });
+    return this;
+  }
+  getStrokeOpacity() {
+    return this.borderOpacity;
+  }
+  setBorderStyle(style2) {
+    this.emit({
+      class: "Drawing",
+      method: "setStrokeStyle",
+      item: [this.id],
+      style: style2
+    });
+    return this;
+  }
+  getBorderStyle() {
+    return this.borderStyle;
+  }
+  setStrokeColor(color2) {
+    this.emit({
+      class: "Drawing",
+      method: "setStrokeColor",
+      item: [this.id],
+      color: color2
+    });
+    return this;
+  }
+  getStrokeColor() {
+    return this.borderColor;
+  }
+  setStrokeWidth(width2) {
+    this.emit({
+      class: "Drawing",
+      method: "setStrokeWidth",
+      item: [this.id],
+      width: width2,
+      prevWidth: this.strokeWidth
+    });
+    return this;
   }
   getLinkTo() {
     return this.linkTo.link;
   }
-  download() {
-    const linkElem = document.createElement("a");
-    linkElem.href = this.storageLink;
-    linkElem.setAttribute("download", "");
-    linkElem.click();
+  getStrokeWidth() {
+    return this.strokeWidth;
   }
-  onRemove() {
-    const storageId = this.getStorageId();
-    if (storageId) {
-      conf.hooks.beforeMediaRemove([storageId], this.board.getBoardId());
+  getRichText() {
+    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 transformedMouse = new Point(transformedMouseX, transformedMouseY);
+    for (let i = 0;i < this.points.length - 1; i++) {
+      const p1 = this.points[i];
+      const p22 = this.points[i + 1];
+      const distance = getPerpendicularDistance(transformedMouse, p1, p22);
+      if (distance < threshold) {
+        return true;
+      }
     }
-    super.onRemove();
+    return false;
+  }
+}
+function getPerpendicularDistance(point5, lineStart, lineEnd) {
+  const { x: px, y: py } = point5;
+  const { x: sx, y: sy } = lineStart;
+  const { x: ex, y: ey } = lineEnd;
+  const numerator = Math.abs((ey - sy) * px - (ex - sx) * py + ex * sy - ey * sx);
+  const denominator = Math.sqrt(Math.pow(ey - sy, 2) + Math.pow(ex - sx, 2));
+  return numerator / denominator;
+}
+function douglasPeucker(points, epsilon2) {
+  if (points.length < 3) {
+    return points;
+  }
+  const start = points[0];
+  const end = points[points.length - 1];
+  let maxDistance = 0;
+  let maxIndex = 0;
+  for (let i = 1;i < points.length - 1; i++) {
+    const distance = getPerpendicularDistance(points[i], start, end);
+    if (distance > maxDistance) {
+      maxDistance = distance;
+      maxIndex = i;
+    }
+  }
+  if (maxDistance > epsilon2) {
+    const leftSubPoints = points.slice(0, maxIndex + 1);
+    const rightSubPoints = points.slice(maxIndex);
+    const leftRecursiveResult = douglasPeucker(leftSubPoints, epsilon2);
+    const rightRecursiveResult = douglasPeucker(rightSubPoints, epsilon2);
+    return leftRecursiveResult.slice(0, -1).concat(rightRecursiveResult);
+  } else {
+    return [start, end];
   }
 }
 // src/Items/Group/Group.ts