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

package/dist/vue.js

@@ -30,10 +30,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");
@@ -120,13 +121,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;
@@ -160,6 +168,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;
@@ -235,29 +244,29 @@ 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;
@@ -527,15 +536,25 @@ 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";
     this.viewOverlay = document.createElement("div");
@@ -546,19 +565,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();
@@ -568,7 +581,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() {
@@ -640,8 +684,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 ref2 = this.originalNextSibling?.parentNode === this.originalParent ? this.originalNextSibling : null;
+      this.originalParent.insertBefore(this.img, ref2);
+    }
     this.canvas.remove();
-    this.img.style.display = "";
   }
   /** Cancel the active edit (if any) and return to view mode. */
   cancelEdit() {
@@ -649,6 +700,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) {
@@ -731,7 +810,9 @@ var AnnotateImage2 = defineComponent({
     /** Annotations to render. */
     notes: { type: Array },
     /** Enable annotation editing. Default: true. */
-    editable: { type: Boolean, default: true }
+    editable: { type: Boolean, default: true },
+    /** Enable automatic re-scaling when the container resizes. Default: true. */
+    autoResize: { type: Boolean, default: true }
   },
   emits: {
     save: (_note) => true,
@@ -749,6 +830,7 @@ var AnnotateImage2 = defineComponent({
       try {
         const instance = new AnnotateImage(imgRef.value, {
           editable: props.editable,
+          autoResize: props.autoResize,
           notes: props.notes ? props.notes.slice() : [],
           onChange: (notes) => {
             currentNotes.value = notes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "annotate-image",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "Create Flickr-like comment annotations on images — draw rectangles, add notes, save via AJAX or static data",
   "license": "GPL-2.0",
   "repository": {

package/readme.md

@@ -171,6 +171,7 @@ Creates an annotation layer on an image element. Returns an `AnnotateImage` inst
 | `onDelete` | `(note: NoteData) => void` | — | Called after a note is deleted |
 | `onLoad` | `(notes: NoteData[]) => void` | — | Called after notes are loaded |
 | `onError` | `(ctx: AnnotateErrorContext) => void` | — | Called on API errors (defaults to `console.error`) |
+| `autoResize` | `boolean` | `true` | Re-scale annotations when the container resizes |
 
 #### `AnnotateApi`
 
@@ -228,6 +229,7 @@ type NoteData = Omit<AnnotationNote, 'view' | 'editable'>;
 | `onDelete` | `(note: NoteData) => void` | — | Note deleted |
 | `onLoad` | `(notes: NoteData[]) => void` | — | Notes loaded |
 | `onError` | `(ctx: AnnotateErrorContext) => void` | — | Error occurred |
+| `autoResize` | `boolean` | `true` | Re-scale on container resize |
 
 #### Ref Methods (`AnnotateImageRef`)
 
@@ -249,6 +251,7 @@ type NoteData = Omit<AnnotationNote, 'view' | 'editable'>;
 | `height` | `Number` | — | Image height in pixels |
 | `notes` | `AnnotationNote[]` | — | Initial annotations |
 | `editable` | `Boolean` | `true` | Enable editing |
+| `autoResize` | `Boolean` | `true` | Re-scale on container resize |
 
 #### Emits
 
@@ -270,6 +273,28 @@ type NoteData = Omit<AnnotationNote, 'view' | 'editable'>;
 | `getNotes()` | `NoteData[]` | Get current annotations |
 | `notes` | `Ref<NoteData[]>` | Reactive current notes |
 
+## Scaling
+
+The plugin automatically detects the rendered image size and scales annotations accordingly. Annotation coordinates are always stored in natural (original) image pixels, so the same data works regardless of display size.
+
+- **CSS constraints** (e.g., `max-width: 500px`) are respected automatically
+- **HTML size attributes** (e.g., `width="400"`) work as expected
+- **Responsive layouts** are supported via `ResizeObserver` — annotations reposition when the container resizes
+- Set `autoResize: false` to disable dynamic resizing (annotations scale once at initialization)
+
+```js
+// Works automatically — no configuration needed
+annotate(document.getElementById('myImage'), {
+  notes: [/* coordinates in natural image pixels */],
+});
+
+// Disable dynamic resizing
+annotate(document.getElementById('myImage'), {
+  autoResize: false,
+  notes: [/* ... */],
+});
+```
+
 ## Tree Shaking
 
 Each entry point (`annotate-image`, `annotate-image/jquery`, `annotate-image/react`, `annotate-image/vue`) is a separate bundle. Importing one does not pull in the others. Unused framework adapters are excluded automatically by bundlers that support package `exports`.