@eagami/ui 5.15.0 → 5.15.1

package/fesm2022/eagami-ui.mjs

@@ -5827,6 +5827,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { eaTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "eaTooltip", required: true }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
 
+const ZOOM_TOLERANCE = 1e-3;
+const OFFSET_TOLERANCE = 0.5;
 /**
  * Canvas-based image editor for cropping avatars. Supports drag-and-drop
  * upload, mouse/touch panning, zoom via slider or scroll wheel, and exports
@@ -5883,7 +5885,7 @@ class AvatarEditorComponent {
     ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
     zoom = signal(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
-    canRevert = computed(() => !this.isAtOriginal() && this.originalCaptured, /* @ts-ignore */
+    canRevert = computed(() => !this.isAtOriginal() && this.originalCaptured(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "canRevert" }] : /* istanbul ignore next */ []));
     /** True when the visible crop is darker than mid-grey; drives the `--on-light` class on the overlay so the "Change photo" affordance stays readable. */
     isImageDark = signal(true, /* @ts-ignore */
@@ -5900,7 +5902,8 @@ class AvatarEditorComponent {
     _suppressCropStateEmit = false;
     isFetching = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isFetching" }] : /* istanbul ignore next */ []));
-    originalCaptured = false;
+    originalCaptured = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "originalCaptured" }] : /* istanbul ignore next */ []));
     originalImage = null;
     originalCropState = null;
     hostClasses = computed(() => ({
@@ -5916,15 +5919,15 @@ class AvatarEditorComponent {
             const src = this.currentSrc();
             if (!src) {
                 this.isFetching.set(false);
-                if (!this.originalCaptured) {
-                    this.originalCaptured = true;
+                if (!this.originalCaptured()) {
+                    this.originalCaptured.set(true);
                     this.originalImage = null;
                     this.originalCropState = null;
                     this.isAtOriginal.set(true);
                 }
                 return;
             }
-            this.originalCaptured = false;
+            this.originalCaptured.set(false);
             this.originalImage = null;
             this.originalCropState = null;
             this.loadFromUrl(src, untracked(() => this.cropState()) ?? null, true);
@@ -5935,6 +5938,7 @@ class AvatarEditorComponent {
                 // Offsets were computed against the previous frame, so a shrink would
                 // otherwise leave the image drawn outside it with a gap showing
                 this.clampOffset();
+                untracked(() => this.syncAtOriginal());
                 this.draw();
             }
         });
@@ -6020,11 +6024,11 @@ class AvatarEditorComponent {
         const dy = event.clientY - this.dragStartY;
         if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
             this.hasDragged = true;
-            this.isAtOriginal.set(false);
         }
         this.offsetX = this.initialOffsetX + dx;
         this.offsetY = this.initialOffsetY + dy;
         this.clampOffset();
+        this.syncAtOriginal();
         this.draw();
         this.emitCropStateChange();
     }
@@ -6046,11 +6050,11 @@ class AvatarEditorComponent {
         const dy = touch.clientY - this.dragStartY;
         if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
             this.hasDragged = true;
-            this.isAtOriginal.set(false);
         }
         this.offsetX = this.initialOffsetX + dx;
         this.offsetY = this.initialOffsetY + dy;
         this.clampOffset();
+        this.syncAtOriginal();
         this.draw();
         this.emitCropStateChange();
     }
@@ -6111,18 +6115,17 @@ class AvatarEditorComponent {
         }
         if (handled) {
             event.preventDefault();
-            this.isAtOriginal.set(false);
             this.clampOffset();
+            this.syncAtOriginal();
             this.draw();
             this.emitCropStateChange();
         }
     }
     /** Sets the zoom level, clamped to the configured `minZoom`/`maxZoom` range. */
     setZoom(value) {
-        this.isAtOriginal.set(false);
-        const clamped = Math.min(this.maxZoom(), Math.max(this.minZoom(), value));
-        this.zoom.set(Math.round(clamped * 100) / 100);
+        this.applyZoom(value);
         this.clampOffset();
+        this.syncAtOriginal();
         this.draw();
         this.emitCropStateChange();
     }
@@ -6139,12 +6142,31 @@ class AvatarEditorComponent {
         this.offsetX = 0;
         this.offsetY = 0;
         this.clearCanvas();
-        this.isAtOriginal.set(this.originalCaptured && !this.originalImage);
+        this.syncAtOriginal();
         this.removed.emit();
     }
+    // Pan and zoom write to plain properties rather than signals, so the revert
+    // control cannot derive its own state. Every handler that moves the crop calls
+    // this instead, so returning to the committed values re-disables the control.
+    // Offsets are recalculated on zoom and both values are floats, so the
+    // comparison is a tolerance rather than equality
+    syncAtOriginal() {
+        if (!this.originalCaptured() || this.image !== this.originalImage) {
+            this.isAtOriginal.set(false);
+            return;
+        }
+        const crop = this.originalCropState;
+        if (!crop) {
+            this.isAtOriginal.set(!this.image);
+            return;
+        }
+        this.isAtOriginal.set(Math.abs(this.zoom() - crop.zoom) < ZOOM_TOLERANCE &&
+            Math.abs(this.offsetX - crop.offsetX) < OFFSET_TOLERANCE &&
+            Math.abs(this.offsetY - crop.offsetY) < OFFSET_TOLERANCE);
+    }
     /** Marks the current image and crop state as the baseline for {@link revertImage}. */
     captureOriginal() {
-        this.originalCaptured = true;
+        this.originalCaptured.set(true);
         this.originalImage = this.image;
         this.originalCropState = this.image
             ? { zoom: this.zoom(), offsetX: this.offsetX, offsetY: this.offsetY }
@@ -6153,7 +6175,7 @@ class AvatarEditorComponent {
     }
     /** Restores the image and crop state captured by the most recent {@link captureOriginal}. */
     revertImage() {
-        if (!this.originalCaptured) {
+        if (!this.originalCaptured()) {
             return;
         }
         if (this.originalImage) {
@@ -6161,7 +6183,7 @@ class AvatarEditorComponent {
             this.hasImage.set(true);
             const crop = this.originalCropState;
             if (crop) {
-                this.zoom.set(Math.min(this.maxZoom(), Math.max(this.minZoom(), crop.zoom)));
+                this.applyZoom(crop.zoom);
                 this.offsetX = crop.offsetX;
                 this.offsetY = crop.offsetY;
                 this.clampOffset();
@@ -6231,7 +6253,7 @@ class AvatarEditorComponent {
             this.image = img;
             this.hasImage.set(true);
             if (cropState) {
-                this.zoom.set(Math.min(this.maxZoom(), Math.max(this.minZoom(), cropState.zoom)));
+                this.applyZoom(cropState.zoom);
                 this.offsetX = cropState.offsetX;
                 this.offsetY = cropState.offsetY;
                 this.clampOffset();
@@ -6241,11 +6263,13 @@ class AvatarEditorComponent {
                 this.centerImage();
             }
             if (suppressEmit) {
-                this.originalCaptured = true;
+                this.originalCaptured.set(true);
                 this.originalImage = img;
-                this.originalCropState = cropState
-                    ? { ...cropState }
-                    : { zoom: this.zoom(), offsetX: this.offsetX, offsetY: this.offsetY };
+                this.originalCropState = {
+                    zoom: this.zoom(),
+                    offsetX: this.offsetX,
+                    offsetY: this.offsetY,
+                };
                 this.isAtOriginal.set(true);
             }
             this.scheduleDrawAfterRender();
@@ -6324,6 +6348,10 @@ class AvatarEditorComponent {
             drawH: this.image.height * scale,
         };
     }
+    applyZoom(value) {
+        const clamped = Math.min(this.maxZoom(), Math.max(this.minZoom(), value));
+        this.zoom.set(Math.round(clamped * 100) / 100);
+    }
     clampOffset() {
         if (!this.image) {
             return;