annotate-image 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/react.js

@@ -7,6 +7,33 @@ import {
   useRef
 } from "react";
 
+// src/positioning.ts
+function clampNote(note, naturalWidth, naturalHeight) {
+  const width = Math.min(note.width, naturalWidth);
+  const height = Math.min(note.height, naturalHeight);
+  const left = Math.max(0, Math.min(note.left, naturalWidth - width));
+  const top = Math.max(0, Math.min(note.top, naturalHeight - height));
+  return { top, left, width, height };
+}
+function clampNotes(notes, naturalWidth, naturalHeight) {
+  for (const note of notes) {
+    Object.assign(note, clampNote(note, naturalWidth, naturalHeight));
+  }
+}
+function computeNoteLeft(noteWidth, areaLeftInViewport, areaWidth, viewportWidth) {
+  let left = (areaWidth - noteWidth) / 2;
+  const noteLeftInViewport = areaLeftInViewport + left;
+  const noteRightInViewport = noteLeftInViewport + noteWidth;
+  if (noteRightInViewport > viewportWidth) {
+    left -= noteRightInViewport - viewportWidth;
+  }
+  const adjustedNoteLeft = areaLeftInViewport + left;
+  if (adjustedNoteLeft < 0) {
+    left -= adjustedNoteLeft;
+  }
+  return left;
+}
+
 // src/annotate-edit.ts
 var DEFAULT_NOTE_TOP = 30;
 var DEFAULT_NOTE_LEFT = 30;
@@ -36,10 +63,11 @@ var AnnotateEdit = class {
       };
     }
     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";
+    const rendered = image.toRendered(this.note);
+    this.area.style.height = rendered.height + "px";
+    this.area.style.width = rendered.width + "px";
+    this.area.style.left = rendered.left + "px";
+    this.area.style.top = rendered.top + "px";
     this.form = document.createElement("div");
     this.form.className = "image-annotate-edit-form";
     const formEl = document.createElement("form");
@@ -55,6 +83,8 @@ var AnnotateEdit = class {
     formEl.appendChild(this.textarea);
     this.form.appendChild(formEl);
     this.area.appendChild(this.form);
+    this.positionForm();
+    this.textarea.focus();
     this.form.addEventListener("pointerdown", (e) => e.stopPropagation());
     const area = this.area;
     const applyRect = (rect) => {
@@ -66,7 +96,10 @@ var AnnotateEdit = class {
     this.handlers.makeResizable(area, {
       containment: image.canvas,
       onResize: applyRect,
-      onStop: applyRect
+      onStop: (rect) => {
+        applyRect(rect);
+        this.positionForm();
+      }
     });
     this.handlers.makeDraggable(area, {
       containment: image.canvas,
@@ -77,9 +110,9 @@ var AnnotateEdit = class {
       onStop: (pos) => {
         area.style.left = pos.left + "px";
         area.style.top = pos.top + "px";
+        this.positionForm();
       }
     });
-    this.textarea.focus();
     this.form.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
         const cancelBtn = this.form.querySelector(".image-annotate-edit-close");
@@ -95,6 +128,13 @@ var AnnotateEdit = class {
     }
     this.addCancelButton(buttonRow);
   }
+  /** Recompute the form's horizontal position relative to the area. */
+  positionForm() {
+    const formRect = this.form.getBoundingClientRect();
+    const areaRect = this.area.getBoundingClientRect();
+    const left = computeNoteLeft(formRect.width, areaRect.left, areaRect.width, window.innerWidth);
+    this.form.style.left = left + "px";
+  }
   /** Tear down the edit form and interaction handlers. */
   destroy() {
     this.image.activeEdit = null;
@@ -126,13 +166,20 @@ var AnnotateEdit = class {
         }
         this.image.notifySave(stripInternals(this.note));
         this.destroy();
+        this.image.flushPendingRescale();
       };
       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;
+      const natural = this.image.toNatural({
+        top: pos.top,
+        left: pos.left,
+        width: size.width,
+        height: size.height
+      });
+      this.note.top = natural.top;
+      this.note.left = natural.left;
+      this.note.width = natural.width;
+      this.note.height = natural.height;
       this.note.text = text;
       if (this.image.api.save) {
         this.busy = true;
@@ -166,6 +213,7 @@ var AnnotateEdit = class {
         const idx = this.image.notes.indexOf(this.note);
         if (idx !== -1) this.image.notes.splice(idx, 1);
         this.image.notifyDelete(stripInternals(this.note));
+        this.image.flushPendingRescale();
       };
       if (this.image.api.delete) {
         this.busy = true;
@@ -241,36 +289,42 @@ var AnnotateView = class {
       });
     }
   }
-  /** Apply the note's position and dimensions to the area element. */
+  /** Apply the note's position and dimensions to the area element, scaled to rendered size. */
   setPosition() {
+    const rendered = this.image.toRendered(this.note);
     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";
+    innerDiv.style.height = rendered.height + "px";
+    innerDiv.style.width = rendered.width + "px";
+    this.area.style.left = rendered.left + "px";
+    this.area.style.top = rendered.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 rendered = this.image.toRendered(editable.note);
     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;
+    innerDiv.style.height = rendered.height + "px";
+    innerDiv.style.width = rendered.width + "px";
+    this.area.style.left = rendered.left + "px";
+    this.area.style.top = rendered.top + "px";
+    this.note.top = editable.note.top;
+    this.note.left = editable.note.left;
+    this.note.height = editable.note.height;
+    this.note.width = editable.note.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.visibility = "hidden";
     this.tooltip.style.display = "block";
+    const noteRect = this.tooltip.getBoundingClientRect();
+    const areaRect = this.area.getBoundingClientRect();
+    const left = computeNoteLeft(noteRect.width, areaRect.left, areaRect.width, window.innerWidth);
+    this.tooltip.style.left = left + "px";
+    this.tooltip.style.visibility = "";
     if (!this.editable) {
       this.area.classList.add("image-annotate-area-hover");
     } else {
@@ -368,17 +422,19 @@ function destroyDraggable(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;
+  let left, top, width, height;
   if (corner === "nw" || corner === "sw") {
     left = startLeft + dx;
     width = startWidth - dx;
   } else {
+    left = startLeft;
     width = startWidth + dx;
   }
   if (corner === "nw" || corner === "ne") {
     top = startTop + dy;
     height = startHeight - dy;
   } else {
+    top = startTop;
     height = startHeight + dy;
   }
   if (width < MIN_SIZE) {
@@ -533,17 +589,30 @@ var AnnotateImage = class {
     this._mode = "view";
     this.activeEdit = null;
     this.destroyed = false;
+    this.pendingRescale = false;
+    this.originalParent = null;
+    this.originalNextSibling = null;
     this.options = options;
     this.handlers = createDefaultHandlers();
     this.img = img;
-    const width = img.width;
-    const height = img.height;
-    if (width === 0 || height === 0) {
+    this.naturalWidth = img.naturalWidth || img.width;
+    this.naturalHeight = img.naturalHeight || img.height;
+    const rendered = img.getBoundingClientRect();
+    const renderedWidth = rendered.width || img.width;
+    const renderedHeight = rendered.height || img.height;
+    if (this.naturalWidth === 0 || this.naturalHeight === 0) {
       throw new Error("image-annotate: image must have non-zero dimensions (is the image loaded?)");
     }
+    this.scaleX = renderedWidth / this.naturalWidth;
+    this.scaleY = renderedHeight / this.naturalHeight;
     this.notes = options.notes.map((n) => ({ ...n }));
+    this.originalParent = img.parentNode;
+    this.originalNextSibling = img.nextSibling;
     this.canvas = document.createElement("div");
     this.canvas.className = "image-annotate-canvas";
+    if (options.theme) {
+      this.canvas.dataset.theme = options.theme;
+    }
     this.viewOverlay = document.createElement("div");
     this.viewOverlay.className = "image-annotate-view";
     this.editOverlay = document.createElement("div");
@@ -552,19 +621,13 @@ var AnnotateImage = class {
     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";
+    img.parentNode.insertBefore(this.canvas, img);
+    this.canvas.appendChild(img);
+    this.canvas.appendChild(this.viewOverlay);
+    this.canvas.appendChild(this.editOverlay);
     this.api = this.options.api ? normalizeApi(this.options.api) : {};
     if (this.api.load) {
       this.loadFromApi();
@@ -574,7 +637,38 @@ var AnnotateImage = class {
     if (this.options.editable) {
       this.createButton();
     }
-    img.style.display = "none";
+    if (options.autoResize !== false && typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        if (width === 0 || height === 0) return;
+        this.rescale(width, height);
+      });
+      this.resizeObserver.observe(this.canvas);
+    }
+  }
+  /** Convert a rect from natural image coordinates to rendered (scaled) coordinates. */
+  toRendered(rect) {
+    return {
+      top: rect.top * this.scaleY,
+      left: rect.left * this.scaleX,
+      width: rect.width * this.scaleX,
+      height: rect.height * this.scaleY
+    };
+  }
+  /** Convert a rect from rendered (scaled) coordinates to natural image coordinates. */
+  toNatural(rect) {
+    const result = {
+      top: rect.top / this.scaleY,
+      left: rect.left / this.scaleX,
+      width: rect.width / this.scaleX,
+      height: rect.height / this.scaleY
+    };
+    if (!isFinite(result.top) || !isFinite(result.left) || !isFinite(result.width) || !isFinite(result.height)) {
+      throw new Error("image-annotate: scale conversion produced non-finite coordinates");
+    }
+    return result;
   }
   /** Current interaction mode — 'view' for browsing, 'edit' when an annotation is being created or modified. */
   get mode() {
@@ -628,6 +722,7 @@ var AnnotateImage = class {
   /** Rebuild annotation views from the current notes array. */
   load() {
     this.destroyViews();
+    clampNotes(this.notes, this.naturalWidth, this.naturalHeight);
     this.createViews();
     this.notifyLoad();
   }
@@ -646,8 +741,15 @@ var AnnotateImage = class {
     if (this.button) {
       this.button.remove();
     }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = void 0;
+    }
+    if (this.originalParent && this.originalParent.isConnected) {
+      const ref = this.originalNextSibling?.parentNode === this.originalParent ? this.originalNextSibling : null;
+      this.originalParent.insertBefore(this.img, ref);
+    }
     this.canvas.remove();
-    this.img.style.display = "";
   }
   /** Cancel the active edit (if any) and return to view mode. */
   cancelEdit() {
@@ -655,6 +757,34 @@ var AnnotateImage = class {
       this.activeEdit.destroy();
       this.setMode("view");
     }
+    this.flushPendingRescale();
+  }
+  /** Recompute scale factors, deferring if an edit is active. */
+  rescale(renderedWidth, renderedHeight) {
+    if (this.mode === "edit") {
+      this.pendingRescale = true;
+      return;
+    }
+    this.applyRescale(renderedWidth, renderedHeight);
+  }
+  /** Apply new scale factors and re-render all views. */
+  applyRescale(renderedWidth, renderedHeight) {
+    const newScaleX = renderedWidth / this.naturalWidth;
+    const newScaleY = renderedHeight / this.naturalHeight;
+    if (newScaleX === this.scaleX && newScaleY === this.scaleY) return;
+    this.scaleX = newScaleX;
+    this.scaleY = newScaleY;
+    this.destroyViews();
+    this.createViews();
+  }
+  /** @internal Flush any deferred rescale after an edit completes. */
+  flushPendingRescale() {
+    if (!this.pendingRescale) return;
+    this.pendingRescale = false;
+    const rect = this.canvas.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      this.applyRescale(rect.width, rect.height);
+    }
   }
   /** Replace all annotations with new data. Does not fire lifecycle callbacks. */
   setNotes(notes) {
@@ -701,6 +831,7 @@ var AnnotateImage = class {
     this.api.load().then((notes) => {
       this.destroyViews();
       this.notes = notes;
+      clampNotes(this.notes, this.naturalWidth, this.naturalHeight);
       this.createViews();
       this.notifyLoad();
     }).catch((err) => {
@@ -746,6 +877,7 @@ var AnnotateImage2 = forwardRef(
       try {
         const instance = new AnnotateImage(imgRef.current, {
           editable: props.editable ?? true,
+          autoResize: props.autoResize ?? true,
           notes: props.notes ? props.notes.slice() : [],
           onChange: (notes) => onChangeRef.current?.(notes),
           onSave: (note) => onSaveRef.current?.(note),
@@ -786,7 +918,7 @@ var AnnotateImage2 = forwardRef(
         return instanceRef.current?.getNotes() ?? [];
       }
     }));
-    return /* @__PURE__ */ jsx("img", { ref: imgRef, src: props.src, width: props.width, height: props.height, alt: props.alt });
+    return /* @__PURE__ */ jsx("span", { style: { display: "contents" }, children: /* @__PURE__ */ jsx("img", { ref: imgRef, src: props.src, width: props.width, height: props.height, alt: props.alt }) });
   }
 );
 export {

package/dist/types/annotate-edit.d.ts

@@ -21,6 +21,8 @@ export declare class AnnotateEdit {
      * @param existingView - The view being edited (for updates); omit for new annotations.
      */
     constructor(image: AnnotateImage, note?: AnnotationNote, existingView?: AnnotateView);
+    /** Recompute the form's horizontal position relative to the area. */
+    private positionForm;
     /** Tear down the edit form and interaction handlers. */
     destroy(): void;
     private addSaveButton;

package/dist/types/annotate-image.d.ts

@@ -24,6 +24,42 @@ export declare class AnnotateImage {
     handlers: InteractionHandlers;
     activeEdit: AnnotateEdit | null;
     private destroyed;
+    private pendingRescale;
+    private resizeObserver?;
+    private originalParent;
+    private originalNextSibling;
+    /** Natural (intrinsic) image width. */
+    readonly naturalWidth: number;
+    /** Natural (intrinsic) image height. */
+    readonly naturalHeight: number;
+    /** Current horizontal scale factor (rendered / natural). */
+    scaleX: number;
+    /** Current vertical scale factor (rendered / natural). */
+    scaleY: number;
+    /** Convert a rect from natural image coordinates to rendered (scaled) coordinates. */
+    toRendered(rect: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    }): {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    /** Convert a rect from rendered (scaled) coordinates to natural image coordinates. */
+    toNatural(rect: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    }): {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
     /**
      * @param img - Image element to annotate. Must be in the DOM with non-zero dimensions.
      * @param options - Plugin configuration.
@@ -53,6 +89,12 @@ export declare class AnnotateImage {
     destroy(): void;
     /** Cancel the active edit (if any) and return to view mode. */
     cancelEdit(): void;
+    /** Recompute scale factors, deferring if an edit is active. */
+    private rescale;
+    /** Apply new scale factors and re-render all views. */
+    private applyRescale;
+    /** @internal Flush any deferred rescale after an edit completes. */
+    flushPendingRescale(): void;
     /** Replace all annotations with new data. Does not fire lifecycle callbacks. */
     setNotes(notes: AnnotationNote[]): void;
     /** Toggle editing mode. Creates or removes Add Note button and rebuilds views. Does not fire lifecycle callbacks. */

package/dist/types/annotate-view.d.ts

@@ -25,7 +25,7 @@ export declare class AnnotateView {
      * @param note - Annotation data to display.
      */
     constructor(image: AnnotateImage, note: AnnotationNote);
-    /** Apply the note's position and dimensions to the area element. */
+    /** Apply the note's position and dimensions to the area element, scaled to rendered size. */
     setPosition(): void;
     /** Update the view's position, size, and text from the edit area after a save. */
     resetPosition(editable: {

package/dist/types/positioning.d.ts

@@ -0,0 +1,31 @@
+/** Clamp a note's size and position to fit within the given natural image dimensions. */
+export declare function clampNote(note: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}, naturalWidth: number, naturalHeight: number): {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+/** Clamp all notes in the array in place, constraining geometry to image bounds. */
+export declare function clampNotes(notes: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}[], naturalWidth: number, naturalHeight: number): void;
+/**
+ * Compute the horizontal `left` value for a note/form element
+ * relative to its parent annotation area, centering it under the area
+ * and clamping to viewport edges.
+ *
+ * @param noteWidth - Measured width of the note/form element
+ * @param areaLeftInViewport - The area's left edge in viewport coordinates
+ * @param areaWidth - Width of the annotation area
+ * @param viewportWidth - Browser viewport width (window.innerWidth)
+ * @returns CSS `left` value in pixels, relative to the area element
+ */
+export declare function computeNoteLeft(noteWidth: number, areaLeftInViewport: number, areaWidth: number, viewportWidth: number): number;

package/dist/types/react.d.ts

@@ -23,6 +23,8 @@ export interface AnnotateImageProps {
     onLoad?: (notes: NoteData[]) => void;
     /** Called when an operation fails. */
     onError?: (context: AnnotateErrorContext) => void;
+    /** Enable automatic re-scaling when the container resizes. Default: true. */
+    autoResize?: boolean;
 }
 /** Imperative methods exposed via ref. */
 export interface AnnotateImageRef {

package/dist/types/types.d.ts

@@ -84,6 +84,10 @@ export interface AnnotateImageOptions {
     onLoad?: (notes: NoteData[]) => void;
     /** UI label overrides. Missing fields use built-in defaults. */
     labels?: Labels;
+    /** Attach a ResizeObserver to rescale annotations when the image resizes. Default: true. */
+    autoResize?: boolean;
+    /** CSS theme name. When set, adds `data-theme="<value>"` to the canvas element for CSS variable scoping. */
+    theme?: string;
 }
 export interface DragCallbacks {
     containment?: HTMLElement;

package/dist/types/vue.d.ts

@@ -33,6 +33,11 @@ export declare const AnnotateImage: import("vue").DefineComponent<import("vue").
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Enable automatic re-scaling when the container resizes. Default: true. */
+    autoResize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -68,6 +73,11 @@ export declare const AnnotateImage: import("vue").DefineComponent<import("vue").
         type: BooleanConstructor;
         default: boolean;
     };
+    /** Enable automatic re-scaling when the container resizes. Default: true. */
+    autoResize: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onChange?: ((_notes: NoteData[]) => any) | undefined;
     onError?: ((_context: AnnotateErrorContext) => any) | undefined;
@@ -76,4 +86,5 @@ export declare const AnnotateImage: import("vue").DefineComponent<import("vue").
     onDelete?: ((_note: NoteData) => any) | undefined;
 }>, {
     editable: boolean;
+    autoResize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;