@acorex/components 22.2.19 → 22.2.21

package/fesm2022/acorex-components-image-editor.mjs

@@ -157,13 +157,17 @@ class AXImageEditorCropperWindowComponent {
             const { width, height } = this.normalizeRatio(ratio);
             this.aspectWidth.set(width);
             this.aspectHeight.set(height);
-            const parent = host.parentElement;
-            const maxW = parent?.clientWidth || scale * width;
-            const maxH = parent?.clientHeight || scale * height;
-            const nextWidth = Math.min(width * scale, maxW * 0.9);
-            const nextHeight = (nextWidth * height) / width;
+            const { width: maxW, height: maxH } = this.getImageBounds();
+            const boundsW = maxW || scale * width;
+            const boundsH = maxH || scale * height;
+            let nextWidth = Math.min(width * scale, boundsW * 0.9);
+            let nextHeight = (nextWidth * height) / width;
+            if (nextHeight > boundsH * 0.9) {
+                nextHeight = boundsH * 0.9;
+                nextWidth = (nextHeight * width) / height;
+            }
             host.style.width = `${Math.max(20, nextWidth)}px`;
-            host.style.height = `${Math.max(20, Math.min(nextHeight, maxH * 0.9))}px`;
+            host.style.height = `${Math.max(20, nextHeight)}px`;
             if (this.positioned) {
                 untracked(() => this.clampToParent());
             }
@@ -309,11 +313,12 @@ class AXImageEditorCropperWindowComponent {
                 top = this.startTop + (this.startHeight - height);
                 break;
         }
-        host.style.width = `${width}px`;
-        host.style.height = `${height}px`;
-        this.currentX.set(left);
-        this.currentY.set(top);
-        this.clampToParent();
+        const constrained = this.constrainCropBox(left, top, width, height);
+        host.style.width = `${constrained.width}px`;
+        host.style.height = `${constrained.height}px`;
+        this.currentX.set(constrained.left);
+        this.currentY.set(constrained.top);
+        this.applyPosition();
     }
     clearSelector() {
         this.selectedHandle.set(null);
@@ -337,27 +342,81 @@ class AXImageEditorCropperWindowComponent {
     }
     centerOnParent() {
         const host = this.elementRef.nativeElement;
-        const parent = host.parentElement;
-        if (!parent) {
+        const { width: maxW, height: maxH } = this.getImageBounds();
+        if (!maxW || !maxH) {
             return;
         }
-        const left = Math.max(0, (parent.clientWidth - host.offsetWidth) / 2);
-        const top = Math.max(0, (parent.clientHeight - host.offsetHeight) / 2);
+        const left = Math.max(0, (maxW - host.offsetWidth) / 2);
+        const top = Math.max(0, (maxH - host.offsetHeight) / 2);
         this.currentX.set(left);
         this.currentY.set(top);
-        this.applyPosition();
+        this.clampToParent();
+    }
+    getImageBounds() {
+        const stage = this.elementRef.nativeElement.parentElement;
+        const canvas = stage?.querySelector('canvas.ax-canvas-element');
+        if (canvas instanceof HTMLCanvasElement) {
+            return {
+                width: canvas.clientWidth,
+                height: canvas.clientHeight,
+            };
+        }
+        return {
+            width: stage?.clientWidth ?? 0,
+            height: stage?.clientHeight ?? 0,
+        };
+    }
+    constrainCropBox(left, top, width, height) {
+        const { width: maxW, height: maxH } = this.getImageBounds();
+        if (!maxW || !maxH) {
+            return { left, top, width, height };
+        }
+        const minSize = 20;
+        const locked = !!this.service.cropperRatio();
+        const aspect = this.aspectWidth() / this.aspectHeight();
+        width = Math.max(minSize, width);
+        height = Math.max(minSize, height);
+        if (locked) {
+            height = width / aspect;
+            if (height < minSize) {
+                height = minSize;
+                width = height * aspect;
+            }
+        }
+        const fitScale = Math.min(1, maxW / width, maxH / height);
+        width *= fitScale;
+        height *= fitScale;
+        if (locked) {
+            height = width / aspect;
+            if (height > maxH) {
+                height = maxH;
+                width = height * aspect;
+            }
+            if (width > maxW) {
+                width = maxW;
+                height = width / aspect;
+            }
+        }
+        width = Math.max(minSize, Math.min(width, maxW));
+        height = Math.max(minSize, Math.min(height, maxH));
+        left = Math.max(0, Math.min(left, maxW - width));
+        top = Math.max(0, Math.min(top, maxH - height));
+        width = Math.min(width, maxW - left);
+        height = Math.min(height, maxH - top);
+        if (locked) {
+            const scale = Math.min(1, (maxW - left) / width, (maxH - top) / height);
+            width = Math.max(minSize, width * scale);
+            height = width / aspect;
+        }
+        return { left, top, width, height };
     }
     clampToParent() {
         const host = this.elementRef.nativeElement;
-        const parent = host.parentElement;
-        if (!parent) {
-            this.applyPosition();
-            return;
-        }
-        const maxX = Math.max(0, parent.clientWidth - host.offsetWidth);
-        const maxY = Math.max(0, parent.clientHeight - host.offsetHeight);
-        this.currentX.set(Math.min(Math.max(0, this.currentX()), maxX));
-        this.currentY.set(Math.min(Math.max(0, this.currentY()), maxY));
+        const constrained = this.constrainCropBox(this.currentX(), this.currentY(), host.offsetWidth, host.offsetHeight);
+        host.style.width = `${constrained.width}px`;
+        host.style.height = `${constrained.height}px`;
+        this.currentX.set(constrained.left);
+        this.currentY.set(constrained.top);
         this.applyPosition();
     }
     applyPosition() {
@@ -896,11 +955,11 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, cropperSize: { classPropertyName: "cropperSize", publicName: "cropperSize", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    (keydown)=\"historyKeyDown($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\n", styles: ["@layer components{ax-image-editor-view{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view .ax-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, cropperSize: { classPropertyName: "cropperSize", publicName: "cropperSize", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    (keydown)=\"historyKeyDown($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\n", styles: ["@layer components{ax-image-editor-view{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view canvas{height:auto!important;width:auto!important}ax-image-editor-view .ax-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    (keydown)=\"historyKeyDown($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\n", styles: ["@layer components{ax-image-editor-view{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view .ax-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    (keydown)=\"historyKeyDown($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\n", styles: ["@layer components{ax-image-editor-view{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view canvas{height:auto!important;width:auto!important}ax-image-editor-view .ax-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], cropperSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperSize", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], canvasElem: [{ type: i0.ViewChild, args: ['canvasElem', { isSignal: true }] }], cropperWindow: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }] } });
 
 /**