annotate-image 2.0.0-beta.1

package/dist/vue.js

@@ -0,0 +1,810 @@
+// src/vue.ts
+import { defineComponent, ref, shallowRef, computed, onMounted, onBeforeUnmount, watch, h } from "vue";
+
+// src/annotate-edit.ts
+var DEFAULT_NOTE_TOP = 30;
+var DEFAULT_NOTE_LEFT = 30;
+var DEFAULT_NOTE_WIDTH = 30;
+var DEFAULT_NOTE_HEIGHT = 30;
+var AnnotateEdit = class {
+  /**
+   * @param image - The parent AnnotateImage controller.
+   * @param note - Existing note to edit, or omit to create a new annotation.
+   * @param existingView - The view being edited (for updates); omit for new annotations.
+   */
+  constructor(image, note, existingView) {
+    this.busy = false;
+    this.image = image;
+    this.handlers = image.handlers;
+    if (note) {
+      this.note = note;
+    } else {
+      this.note = {
+        id: "new",
+        top: DEFAULT_NOTE_TOP,
+        left: DEFAULT_NOTE_LEFT,
+        width: DEFAULT_NOTE_WIDTH,
+        height: DEFAULT_NOTE_HEIGHT,
+        text: "",
+        editable: true
+      };
+    }
+    this.area = image.editOverlay.querySelector(".image-annotate-edit-area");
+    this.area.style.height = this.note.height + "px";
+    this.area.style.width = this.note.width + "px";
+    this.area.style.left = this.note.left + "px";
+    this.area.style.top = this.note.top + "px";
+    this.form = document.createElement("div");
+    this.form.className = "image-annotate-edit-form";
+    const formEl = document.createElement("form");
+    this.textarea = document.createElement("textarea");
+    this.textarea.name = "text";
+    this.textarea.rows = 3;
+    this.textarea.cols = 30;
+    this.textarea.value = this.note.text;
+    const placeholder = this.image.options.labels?.placeholder ?? "";
+    if (placeholder) {
+      this.textarea.placeholder = placeholder;
+    }
+    formEl.appendChild(this.textarea);
+    this.form.appendChild(formEl);
+    this.area.appendChild(this.form);
+    this.form.addEventListener("pointerdown", (e) => e.stopPropagation());
+    const area = this.area;
+    const applyRect = (rect) => {
+      area.style.left = rect.left + "px";
+      area.style.top = rect.top + "px";
+      area.style.width = rect.width + "px";
+      area.style.height = rect.height + "px";
+    };
+    this.handlers.makeResizable(area, {
+      containment: image.canvas,
+      onResize: applyRect,
+      onStop: applyRect
+    });
+    this.handlers.makeDraggable(area, {
+      containment: image.canvas,
+      onDrag: (pos) => {
+        area.style.left = pos.left + "px";
+        area.style.top = pos.top + "px";
+      },
+      onStop: (pos) => {
+        area.style.left = pos.left + "px";
+        area.style.top = pos.top + "px";
+      }
+    });
+    this.textarea.focus();
+    this.form.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        const cancelBtn = this.form.querySelector(".image-annotate-edit-close");
+        if (cancelBtn) cancelBtn.click();
+      }
+    });
+    const buttonRow = document.createElement("div");
+    buttonRow.className = "image-annotate-edit-buttons";
+    this.form.appendChild(buttonRow);
+    this.addSaveButton(buttonRow, existingView);
+    if (existingView) {
+      this.addDeleteButton(buttonRow, existingView);
+    }
+    this.addCancelButton(buttonRow);
+  }
+  /** Tear down the edit form and interaction handlers. */
+  destroy() {
+    this.image.activeEdit = null;
+    this.handlers.destroyResizable(this.area);
+    this.handlers.destroyDraggable(this.area);
+    this.area.style.height = "";
+    this.area.style.width = "";
+    this.area.style.left = "";
+    this.area.style.top = "";
+    this.form.remove();
+  }
+  addSaveButton(container, existingView) {
+    const ok = document.createElement("button");
+    ok.className = "image-annotate-edit-ok";
+    ok.textContent = this.image.options.labels?.save ?? "OK";
+    ok.type = "button";
+    ok.addEventListener("click", () => {
+      if (this.busy) return;
+      const text = this.textarea.value;
+      const commitSave = () => {
+        this.image.setMode("view");
+        if (existingView) {
+          existingView.resetPosition(this, text);
+        } else {
+          this.note.editable = true;
+          const view = new AnnotateView(this.image, this.note);
+          view.resetPosition(this, text);
+          this.image.notes.push(this.note);
+        }
+        this.image.notifySave(stripInternals(this.note));
+        this.destroy();
+      };
+      const pos = readInlinePosition(this.area);
+      const size = readInlineSize(this.area);
+      this.note.top = pos.top;
+      this.note.left = pos.left;
+      this.note.width = size.width;
+      this.note.height = size.height;
+      this.note.text = text;
+      if (this.image.api.save) {
+        this.busy = true;
+        this.image.api.save(stripInternals(this.note)).then((result) => {
+          if (result.annotation_id != null) {
+            this.note.id = result.annotation_id;
+          }
+          commitSave();
+        }).catch((err) => {
+          this.busy = false;
+          const error = err instanceof Error ? err : new Error(String(err));
+          this.image.reportError({ type: "save", error, note: this.note });
+        });
+      } else {
+        commitSave();
+      }
+    });
+    container.appendChild(ok);
+  }
+  addDeleteButton(container, view) {
+    const del = document.createElement("button");
+    del.className = "image-annotate-edit-delete";
+    del.textContent = this.image.options.labels?.delete ?? "Delete";
+    del.type = "button";
+    del.addEventListener("click", () => {
+      if (this.busy) return;
+      const removeNote = () => {
+        this.image.setMode("view");
+        this.destroy();
+        view.destroy();
+        const idx = this.image.notes.indexOf(this.note);
+        if (idx !== -1) this.image.notes.splice(idx, 1);
+        this.image.notifyDelete(stripInternals(this.note));
+      };
+      if (this.image.api.delete) {
+        this.busy = true;
+        this.image.api.delete(stripInternals(this.note)).then(() => {
+          removeNote();
+        }).catch((err) => {
+          this.busy = false;
+          const error = err instanceof Error ? err : new Error(String(err));
+          this.image.reportError({ type: "delete", error, note: this.note });
+        });
+      } else {
+        removeNote();
+      }
+    });
+    container.appendChild(del);
+  }
+  addCancelButton(container) {
+    const cancel = document.createElement("button");
+    cancel.className = "image-annotate-edit-close";
+    cancel.textContent = this.image.options.labels?.cancel ?? "Cancel";
+    cancel.type = "button";
+    cancel.addEventListener("click", () => {
+      this.image.cancelEdit();
+    });
+    container.appendChild(cancel);
+  }
+};
+
+// src/annotate-view.ts
+function readInlinePosition(el) {
+  return {
+    left: parseInt(el.style.left) || 0,
+    top: parseInt(el.style.top) || 0
+  };
+}
+function readInlineSize(el) {
+  return {
+    width: parseInt(el.style.width) || el.offsetWidth,
+    height: parseInt(el.style.height) || el.offsetHeight
+  };
+}
+var AnnotateView = class {
+  /**
+   * @param image - The parent AnnotateImage controller.
+   * @param note - Annotation data to display.
+   */
+  constructor(image, note) {
+    this.image = image;
+    this.note = note;
+    this.editable = !!(note.editable && image.options.editable);
+    this.area = document.createElement("div");
+    this.area.className = "image-annotate-area" + (this.editable ? " image-annotate-area-editable" : "");
+    const innerDiv = document.createElement("div");
+    this.area.appendChild(innerDiv);
+    image.viewOverlay.insertBefore(this.area, image.viewOverlay.firstChild);
+    this.tooltip = document.createElement("div");
+    this.tooltip.className = "image-annotate-note";
+    this.tooltip.textContent = note.text;
+    this.tooltip.style.display = "none";
+    this.area.appendChild(this.tooltip);
+    this.setPosition();
+    this.area.addEventListener("mouseenter", () => this.show());
+    this.area.addEventListener("mouseleave", () => this.hide());
+    if (this.editable) {
+      this.area.setAttribute("tabindex", "0");
+      this.area.setAttribute("role", "button");
+      this.area.addEventListener("click", () => this.edit());
+      this.area.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          this.edit();
+        }
+      });
+    }
+  }
+  /** Apply the note's position and dimensions to the area element. */
+  setPosition() {
+    const innerDiv = this.area.firstElementChild;
+    innerDiv.style.height = this.note.height + "px";
+    innerDiv.style.width = this.note.width + "px";
+    this.area.style.left = this.note.left + "px";
+    this.area.style.top = this.note.top + "px";
+  }
+  /** Update the view's position, size, and text from the edit area after a save. */
+  resetPosition(editable, text) {
+    this.tooltip.textContent = text;
+    this.tooltip.style.display = "none";
+    const areaPos = readInlinePosition(editable.area);
+    const areaSize = readInlineSize(editable.area);
+    const innerDiv = this.area.firstElementChild;
+    innerDiv.style.height = areaSize.height + "px";
+    innerDiv.style.width = areaSize.width + "px";
+    this.area.style.left = areaPos.left + "px";
+    this.area.style.top = areaPos.top + "px";
+    this.note.top = areaPos.top;
+    this.note.left = areaPos.left;
+    this.note.height = areaSize.height;
+    this.note.width = areaSize.width;
+    this.note.text = text;
+    this.note.id = editable.note.id;
+    this.editable = true;
+  }
+  /** Show the tooltip and apply hover styling. */
+  show() {
+    this.tooltip.style.display = "block";
+    if (!this.editable) {
+      this.area.classList.add("image-annotate-area-hover");
+    } else {
+      this.area.classList.add("image-annotate-area-editable-hover");
+    }
+  }
+  /** Hide the tooltip and remove hover styling. */
+  hide() {
+    this.tooltip.style.display = "none";
+    this.area.classList.remove("image-annotate-area-hover");
+    this.area.classList.remove("image-annotate-area-editable-hover");
+  }
+  /** Remove the annotation's DOM elements. */
+  destroy() {
+    this.area.remove();
+    this.tooltip.remove();
+  }
+  /** Open the edit form for this annotation (only if in view mode). */
+  edit() {
+    if (this.image.mode === "view") {
+      this.image.setMode("edit");
+      this.image.activeEdit = new AnnotateEdit(this.image, this.note, this);
+    }
+  }
+};
+
+// src/interactions.ts
+var dragCleanups = /* @__PURE__ */ new WeakMap();
+var resizeCleanups = /* @__PURE__ */ new WeakMap();
+function makeDraggable(el, opts) {
+  destroyDraggable(el);
+  function onPointerDown(e) {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    if (el.setPointerCapture) el.setPointerCapture(e.pointerId);
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startLeft = parseFloat(el.style.left) || 0;
+    const startTop = parseFloat(el.style.top) || 0;
+    const elWidth = parseFloat(el.style.width) || el.offsetWidth;
+    const elHeight = parseFloat(el.style.height) || el.offsetHeight;
+    let minLeft = -Infinity;
+    let minTop = -Infinity;
+    let maxLeft = Infinity;
+    let maxTop = Infinity;
+    if (opts.containment) {
+      const containerRect = opts.containment.getBoundingClientRect();
+      const elRect = el.getBoundingClientRect();
+      const offsetX = startLeft - (elRect.left - containerRect.left);
+      const offsetY = startTop - (elRect.top - containerRect.top);
+      minLeft = offsetX;
+      minTop = offsetY;
+      maxLeft = containerRect.width - elWidth + offsetX;
+      maxTop = containerRect.height - elHeight + offsetY;
+    }
+    function clamp(value, min, max) {
+      return Math.max(min, Math.min(max, value));
+    }
+    function onPointerMove(e2) {
+      const dx = e2.clientX - startX;
+      const dy = e2.clientY - startY;
+      const newLeft = clamp(startLeft + dx, minLeft, maxLeft);
+      const newTop = clamp(startTop + dy, minTop, maxTop);
+      if (opts.onDrag) {
+        opts.onDrag({ left: newLeft, top: newTop });
+      }
+    }
+    function onPointerUp(e2) {
+      if (el.releasePointerCapture) el.releasePointerCapture(e2.pointerId);
+      el.removeEventListener("pointermove", onPointerMove);
+      el.removeEventListener("pointerup", onPointerUp);
+      const dx = e2.clientX - startX;
+      const dy = e2.clientY - startY;
+      const finalLeft = clamp(startLeft + dx, minLeft, maxLeft);
+      const finalTop = clamp(startTop + dy, minTop, maxTop);
+      if (opts.onStop) {
+        opts.onStop({ left: finalLeft, top: finalTop });
+      }
+    }
+    el.addEventListener("pointermove", onPointerMove);
+    el.addEventListener("pointerup", onPointerUp);
+  }
+  el.addEventListener("pointerdown", onPointerDown);
+  dragCleanups.set(el, () => {
+    el.removeEventListener("pointerdown", onPointerDown);
+  });
+}
+function destroyDraggable(el) {
+  const cleanup = dragCleanups.get(el);
+  if (cleanup) {
+    cleanup();
+    dragCleanups.delete(el);
+  }
+}
+var MIN_SIZE = 10;
+var CORNERS = ["nw", "ne", "sw", "se"];
+function computeResize(corner, startLeft, startTop, startWidth, startHeight, dx, dy) {
+  let left = startLeft, top = startTop, width = startWidth, height = startHeight;
+  if (corner === "nw" || corner === "sw") {
+    left = startLeft + dx;
+    width = startWidth - dx;
+  } else {
+    width = startWidth + dx;
+  }
+  if (corner === "nw" || corner === "ne") {
+    top = startTop + dy;
+    height = startHeight - dy;
+  } else {
+    height = startHeight + dy;
+  }
+  if (width < MIN_SIZE) {
+    if (corner === "nw" || corner === "sw") left = startLeft + startWidth - MIN_SIZE;
+    width = MIN_SIZE;
+  }
+  if (height < MIN_SIZE) {
+    if (corner === "nw" || corner === "ne") top = startTop + startHeight - MIN_SIZE;
+    height = MIN_SIZE;
+  }
+  return { left, top, width, height };
+}
+function makeResizable(el, opts) {
+  destroyResizable(el);
+  const handles = [];
+  for (const corner of CORNERS) {
+    const handle = document.createElement("div");
+    handle.className = `image-annotate-resize-handle image-annotate-resize-handle-${corner}`;
+    el.appendChild(handle);
+    handles.push(handle);
+    handle.addEventListener("pointerdown", function onPointerDown(e) {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (handle.setPointerCapture) handle.setPointerCapture(e.pointerId);
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startLeft = parseFloat(el.style.left) || 0;
+      const startTop = parseFloat(el.style.top) || 0;
+      const startWidth = parseFloat(el.style.width) || 0;
+      const startHeight = parseFloat(el.style.height) || 0;
+      let maxRight = Infinity;
+      let maxBottom = Infinity;
+      let minLeft = -Infinity;
+      let minTop = -Infinity;
+      if (opts.containment) {
+        const containerRect = opts.containment.getBoundingClientRect();
+        const elRect = el.getBoundingClientRect();
+        const offsetX = startLeft - (elRect.left - containerRect.left);
+        const offsetY = startTop - (elRect.top - containerRect.top);
+        minLeft = offsetX;
+        minTop = offsetY;
+        maxRight = containerRect.width + offsetX;
+        maxBottom = containerRect.height + offsetY;
+      }
+      function clampRect(rect) {
+        let { left, top, width, height } = rect;
+        if (left < minLeft) {
+          width -= minLeft - left;
+          left = minLeft;
+        }
+        if (top < minTop) {
+          height -= minTop - top;
+          top = minTop;
+        }
+        if (left + width > maxRight) {
+          width = maxRight - left;
+        }
+        if (top + height > maxBottom) {
+          height = maxBottom - top;
+        }
+        if (width < MIN_SIZE) width = MIN_SIZE;
+        if (height < MIN_SIZE) height = MIN_SIZE;
+        return { left, top, width, height };
+      }
+      function onPointerMove(e2) {
+        const dx = e2.clientX - startX;
+        const dy = e2.clientY - startY;
+        const rect = clampRect(computeResize(corner, startLeft, startTop, startWidth, startHeight, dx, dy));
+        opts.onResize?.(rect);
+      }
+      function onPointerUp(e2) {
+        if (handle.releasePointerCapture) handle.releasePointerCapture(e2.pointerId);
+        handle.removeEventListener("pointermove", onPointerMove);
+        handle.removeEventListener("pointerup", onPointerUp);
+        const dx = e2.clientX - startX;
+        const dy = e2.clientY - startY;
+        const rect = clampRect(computeResize(corner, startLeft, startTop, startWidth, startHeight, dx, dy));
+        if (opts.onStop) {
+          opts.onStop(rect);
+        }
+      }
+      handle.addEventListener("pointermove", onPointerMove);
+      handle.addEventListener("pointerup", onPointerUp);
+    });
+  }
+  resizeCleanups.set(el, () => {
+    for (const handle of handles) {
+      handle.remove();
+    }
+  });
+}
+function destroyResizable(el) {
+  const cleanup = resizeCleanups.get(el);
+  if (cleanup) {
+    cleanup();
+    resizeCleanups.delete(el);
+  }
+}
+function createDefaultHandlers() {
+  return {
+    makeDraggable,
+    makeResizable,
+    destroyDraggable,
+    destroyResizable
+  };
+}
+
+// src/annotate-image.ts
+function stripInternals(note) {
+  const { view: _view, editable: _editable, ...data } = note;
+  return data;
+}
+function normalizeApi(api) {
+  return {
+    load: typeof api.load === "string" ? defaultLoader(api.load) : api.load,
+    save: typeof api.save === "string" ? defaultSaver(api.save) : api.save,
+    delete: typeof api.delete === "string" ? defaultDeleter(api.delete) : api.delete
+  };
+}
+function defaultLoader(url) {
+  return () => fetch(url).then((r) => {
+    if (!r.ok) throw new Error(`Load failed (HTTP ${r.status})`);
+    return r.json();
+  });
+}
+function defaultSaver(url) {
+  return (note) => fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(note)
+  }).then((r) => {
+    if (!r.ok) throw new Error(`Save failed (HTTP ${r.status})`);
+    return r.json();
+  });
+}
+function defaultDeleter(url) {
+  return (note) => fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(note)
+  }).then((r) => {
+    if (!r.ok) throw new Error(`Delete failed (HTTP ${r.status})`);
+  });
+}
+var AnnotateImage = class {
+  /**
+   * @param img - Image element to annotate. Must be in the DOM with non-zero dimensions.
+   * @param options - Plugin configuration.
+   */
+  constructor(img, options) {
+    this._mode = "view";
+    this.activeEdit = null;
+    this.destroyed = false;
+    this.options = options;
+    this.handlers = createDefaultHandlers();
+    this.img = img;
+    const width = img.width;
+    const height = img.height;
+    if (width === 0 || height === 0) {
+      throw new Error("image-annotate: image must have non-zero dimensions (is the image loaded?)");
+    }
+    this.notes = options.notes.map((n) => ({ ...n }));
+    this.canvas = document.createElement("div");
+    this.canvas.className = "image-annotate-canvas";
+    this.viewOverlay = document.createElement("div");
+    this.viewOverlay.className = "image-annotate-view";
+    this.editOverlay = document.createElement("div");
+    this.editOverlay.className = "image-annotate-edit";
+    this.editOverlay.style.display = "none";
+    const editArea = document.createElement("div");
+    editArea.className = "image-annotate-edit-area";
+    this.editOverlay.appendChild(editArea);
+    this.canvas.appendChild(this.viewOverlay);
+    this.canvas.appendChild(this.editOverlay);
+    if (!img.parentNode) {
+      throw new Error("image-annotate: image must be in the DOM before initialization");
+    }
+    img.parentNode.insertBefore(this.canvas, img.nextSibling);
+    this.canvas.style.height = height + "px";
+    this.canvas.style.width = width + "px";
+    this.canvas.style.backgroundImage = 'url("' + img.src + '")';
+    this.viewOverlay.style.height = height + "px";
+    this.viewOverlay.style.width = width + "px";
+    this.editOverlay.style.height = height + "px";
+    this.editOverlay.style.width = width + "px";
+    this.api = this.options.api ? normalizeApi(this.options.api) : {};
+    if (this.api.load) {
+      this.loadFromApi();
+    } else {
+      this.load();
+    }
+    if (this.options.editable) {
+      this.createButton();
+    }
+    img.style.display = "none";
+  }
+  /** Current interaction mode — 'view' for browsing, 'edit' when an annotation is being created or modified. */
+  get mode() {
+    return this._mode;
+  }
+  /** Switch between view and edit mode, toggling overlay visibility. */
+  setMode(newMode) {
+    this._mode = newMode;
+    if (newMode === "edit") {
+      this.canvas.classList.add("image-annotate-editing");
+      this.editOverlay.style.display = "block";
+    } else {
+      this.canvas.classList.remove("image-annotate-editing");
+      this.editOverlay.style.display = "none";
+    }
+  }
+  /** Return current notes with internal fields stripped. */
+  getNotes() {
+    return this.notes.map(stripInternals);
+  }
+  /** @internal Notify that the notes collection changed. */
+  notifyChange() {
+    this.options.onChange?.(this.getNotes());
+  }
+  /** @internal Notify that a note was saved, then fire onChange. */
+  notifySave(note) {
+    this.options.onSave?.(note);
+    this.notifyChange();
+  }
+  /** @internal Notify that a note was deleted, then fire onChange. */
+  notifyDelete(note) {
+    this.options.onDelete?.(note);
+    this.notifyChange();
+  }
+  /** @internal Notify that notes were loaded, then fire onChange. */
+  notifyLoad() {
+    this.options.onLoad?.(this.getNotes());
+    this.notifyChange();
+  }
+  destroyViews() {
+    this.cancelEdit();
+    for (const note of this.notes) {
+      note.view?.destroy();
+    }
+  }
+  createViews() {
+    for (const note of this.notes) {
+      note.view = new AnnotateView(this, note);
+    }
+  }
+  /** Rebuild annotation views from the current notes array. */
+  load() {
+    this.destroyViews();
+    this.createViews();
+    this.notifyLoad();
+  }
+  /** Remove all annotations and their views. */
+  clear() {
+    this.destroyViews();
+    this.notes = [];
+    this.notifyChange();
+  }
+  /** Tear down the plugin: remove canvas, restore the original image. Idempotent. */
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.destroyViews();
+    this.notes = [];
+    if (this.button) {
+      this.button.remove();
+    }
+    this.canvas.remove();
+    this.img.style.display = "";
+  }
+  /** Cancel the active edit (if any) and return to view mode. */
+  cancelEdit() {
+    if (this.activeEdit) {
+      this.activeEdit.destroy();
+      this.setMode("view");
+    }
+  }
+  /** Replace all annotations with new data. Does not fire lifecycle callbacks. */
+  setNotes(notes) {
+    if (this.destroyed) return;
+    this.destroyViews();
+    this.notes = notes.map((n) => ({ ...n }));
+    this.createViews();
+  }
+  /** Toggle editing mode. Creates or removes Add Note button and rebuilds views. Does not fire lifecycle callbacks. */
+  setEditable(editable) {
+    if (this.destroyed) return;
+    if (this.options.editable === editable) return;
+    this.options.editable = editable;
+    if (editable && !this.button) {
+      this.createButton();
+    } else if (!editable && this.button) {
+      this.button.remove();
+      this.button = void 0;
+    }
+    this.destroyViews();
+    this.createViews();
+  }
+  createButton() {
+    this.button = document.createElement("button");
+    this.button.className = "image-annotate-add";
+    this.button.title = this.options.labels?.addNote ?? "Add Note";
+    this.button.type = "button";
+    this.button.addEventListener("click", () => {
+      this.add();
+    });
+    this.canvas.appendChild(this.button);
+  }
+  /** Report an API error via the onError callback, or log to console if none configured. */
+  reportError(context) {
+    if (this.options.onError) {
+      this.options.onError(context);
+    } else {
+      console.error(`image-annotate: ${context.type} failed`, context.error);
+    }
+  }
+  /** Load annotations from the server via api.load. */
+  loadFromApi() {
+    if (!this.api.load) return;
+    this.api.load().then((notes) => {
+      this.destroyViews();
+      this.notes = notes;
+      this.createViews();
+      this.notifyLoad();
+    }).catch((err) => {
+      const error = err instanceof Error ? err : new Error(String(err));
+      this.reportError({ type: "load", error });
+    });
+  }
+  /**
+   * Enter edit mode to create a new annotation.
+   * @returns true if edit mode was entered, false if already editing.
+   */
+  add() {
+    if (this.mode === "view") {
+      this.setMode("edit");
+      this.activeEdit = new AnnotateEdit(this);
+      return true;
+    }
+    return false;
+  }
+};
+
+// src/vue.ts
+var AnnotateImage2 = defineComponent({
+  name: "AnnotateImage",
+  props: {
+    /** Image source URL. */
+    src: { type: String, required: true },
+    /** Image width in pixels. Required if image may not be loaded yet. */
+    width: { type: Number },
+    /** Image height in pixels. Required if image may not be loaded yet. */
+    height: { type: Number },
+    /** Image alt text for accessibility. */
+    alt: { type: String },
+    /** Annotations to render. */
+    notes: { type: Array },
+    /** Enable annotation editing. Default: true. */
+    editable: { type: Boolean, default: true }
+  },
+  emits: {
+    save: (_note) => true,
+    delete: (_note) => true,
+    load: (_notes) => true,
+    change: (_notes) => true,
+    error: (_context) => true
+  },
+  setup(props, { emit, expose }) {
+    const imgRef = shallowRef(null);
+    const instanceRef = shallowRef(null);
+    const currentNotes = ref([]);
+    function createInstance() {
+      if (!imgRef.value) return;
+      try {
+        const instance = new AnnotateImage(imgRef.value, {
+          editable: props.editable,
+          notes: props.notes ? props.notes.slice() : [],
+          onChange: (notes) => {
+            currentNotes.value = notes;
+            emit("change", notes);
+          },
+          onSave: (note) => emit("save", note),
+          onDelete: (note) => emit("delete", note),
+          onLoad: (notes) => emit("load", notes),
+          onError: (ctx) => emit("error", ctx)
+        });
+        instanceRef.value = instance;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        emit("error", { type: "load", error });
+      }
+    }
+    function destroyInstance() {
+      instanceRef.value?.destroy();
+      instanceRef.value = null;
+    }
+    onMounted(() => {
+      createInstance();
+    });
+    onBeforeUnmount(() => {
+      destroyInstance();
+    });
+    watch(
+      () => props.src,
+      () => {
+        destroyInstance();
+        createInstance();
+      }
+    );
+    const serializedNotes = computed(() => JSON.stringify(props.notes ?? []));
+    watch(serializedNotes, () => {
+      instanceRef.value?.setNotes(props.notes ? props.notes.slice() : []);
+    });
+    watch(
+      () => props.editable,
+      (newEditable) => {
+        instanceRef.value?.setEditable(newEditable);
+      }
+    );
+    const add = () => instanceRef.value?.add();
+    const clear = () => instanceRef.value?.clear();
+    const getNotes = () => instanceRef.value?.getNotes() ?? [];
+    expose({ add, clear, getNotes, notes: currentNotes });
+    return () => h("img", {
+      ref: imgRef,
+      src: props.src,
+      width: props.width,
+      height: props.height,
+      alt: props.alt
+    });
+  }
+});
+export {
+  AnnotateImage2 as AnnotateImage
+};