@acorex/components 20.1.37 → 20.1.38

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

@@ -6,7 +6,7 @@ import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/l
 import * as i2$1 from '@acorex/components/toolbar';
 import { AXToolBarModule } from '@acorex/components/toolbar';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, output, ViewEncapsulation, Component, ChangeDetectionStrategy, input, NgZone, ElementRef, viewChild, Renderer2, PLATFORM_ID, effect, afterNextRender, computed, linkedSignal, HostBinding, contentChild, forwardRef, NgModule } from '@angular/core';
+import { signal, Injectable, inject, output, ViewEncapsulation, Component, ChangeDetectionStrategy, input, NgZone, ElementRef, viewChild, Renderer2, PLATFORM_ID, effect, afterNextRender, linkedSignal, contentChild, forwardRef, HostBinding, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
@@ -31,8 +31,8 @@ class AXImageEditorService {
         this.penType = signal(null, ...(ngDevMode ? [{ debugName: "penType" }] : []));
         this.rotate = signal({ state: 0, userInteract: false }, ...(ngDevMode ? [{ debugName: "rotate" }] : []));
         this.isImageLoad = signal(false, ...(ngDevMode ? [{ debugName: "isImageLoad" }] : []));
-        this.newImage = signal(null, ...(ngDevMode ? [{ debugName: "newImage" }] : []));
-        this.initialImage = signal(null, ...(ngDevMode ? [{ debugName: "initialImage" }] : []));
+        this.newImage = null;
+        this.initialImage = null;
         this.imageBlob = signal([], ...(ngDevMode ? [{ debugName: "imageBlob" }] : []));
         this.undoPressed = signal(false, ...(ngDevMode ? [{ debugName: "undoPressed" }] : []));
         this.redoPressed = signal(false, ...(ngDevMode ? [{ debugName: "redoPressed" }] : []));
@@ -424,28 +424,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 class AXImageEditorViewComponent extends MXBaseComponent {
     /** @ignore */
     resizeWindow() {
-        this.canvasResponsive(this.service.newImage());
+        this.canvasResponsive(this.service.newImage);
     }
     /** @ignore */
     canvasResponsive(image) {
-        if (!this.parent.imageEditorContainer())
-            return;
-        const parentWidth = this.parent.imageEditorContainer().nativeElement.clientWidth;
-        const imageWidth = this.service.initialImage().width;
-        if (parentWidth < imageWidth) {
-            this.getHostElement().style.width = `${parentWidth}px`;
-            this.getHostElement().style.height = `${parentWidth * this.imageAspect()}px`;
-            this.canvasElem().nativeElement.width = parentWidth;
-            this.canvasElem().nativeElement.height = parentWidth * this.imageAspect();
-            this.ctx().drawImage(image, 0, 0, parentWidth, parentWidth * this.imageAspect());
+        const imageWidth = image.width;
+        const imageHeight = image.height;
+        this.originalWidth.set(imageWidth);
+        this.originalHeight.set(imageHeight);
+        if (imageWidth > imageHeight) {
+            this.canvasElem().nativeElement.width = imageWidth;
+            this.canvasElem().nativeElement.height = imageWidth;
         }
         else {
-            this.getHostElement().style.width = `${imageWidth}px`;
-            this.getHostElement().style.height = `${imageWidth / this.imageAspect()}px`;
-            this.canvasElem().nativeElement.width = imageWidth;
-            this.canvasElem().nativeElement.height = imageWidth / this.imageAspect();
-            this.ctx().drawImage(image, 0, 0, imageWidth, imageWidth / this.imageAspect());
+            this.canvasElem().nativeElement.width = imageHeight;
+            this.canvasElem().nativeElement.height = imageHeight;
         }
+        this.canvasElem().nativeElement.style.width = '100%';
+        requestAnimationFrame(() => {
+            //recalculate width after canvas size change
+            const recalculateWidth = this.canvasElem().nativeElement.getClientRects()[0]?.width;
+            let scale;
+            if (imageWidth > imageHeight) {
+                scale = this.originalWidth() / recalculateWidth;
+            }
+            else {
+                scale = this.originalHeight() / recalculateWidth;
+            }
+            this.scale.set(scale);
+            this.canvasElem().nativeElement.width = recalculateWidth;
+            this.canvasElem().nativeElement.height = recalculateWidth;
+            if (imageWidth > imageHeight) {
+                this.ctx().drawImage(image, 0, recalculateWidth / 2 - this.originalHeight() / scale / 2, recalculateWidth, this.originalHeight() / scale);
+            }
+            else {
+                this.ctx().drawImage(image, recalculateWidth / 2 - this.originalWidth() / scale / 2, 0, this.originalWidth() / scale, recalculateWidth);
+            }
+        });
     }
     /** @ignore */
     constructor() {
@@ -479,29 +494,21 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         /** @ignore */
         this.renderer = inject(Renderer2);
         /** @ignore */
-        this.imageAspect = computed(() => {
-            return this.service.initialImage().width / this.service.initialImage().height;
-        }, ...(ngDevMode ? [{ debugName: "imageAspect" }] : []));
-        /** @ignore */
         this.imageEditorHistory = signal([], ...(ngDevMode ? [{ debugName: "imageEditorHistory" }] : []));
         /** @ignore */
         this.imageEditorHistoryPointer = linkedSignal(() => this.imageEditorHistory().length - 1);
+        this.originalWidth = signal(0, ...(ngDevMode ? [{ debugName: "originalWidth" }] : []));
+        this.originalHeight = signal(0, ...(ngDevMode ? [{ debugName: "originalHeight" }] : []));
+        this.scale = signal(0, ...(ngDevMode ? [{ debugName: "scale" }] : []));
         afterNextRender(() => {
             this.resizeEventListener = this.renderer.listen(window, 'resize', this.resizeWindow.bind(this));
-            //load image
-            this.service.initialImage.set(new Image());
-            this.service.initialImage().src = this.src();
-            this.service.initialImage().crossOrigin = 'anonymous';
-            this.imageLoadEventListener = this.renderer.listen(this.service.initialImage(), 'load', this.imageLoaded.bind(this));
             //set canvas options
             this.ctx.set(this.canvasElem().nativeElement.getContext('2d', { willReadFrequently: true }));
             this.ctx().lineJoin = 'round';
             this.ctx().lineCap = 'round';
         });
         effect(() => {
-            if (this.parent.imageEditorContainer() && this.service.isImageLoad()) {
-                this.canvasResponsive(this.service.initialImage());
-            }
+            this.setInitialImage(this.src());
         });
         effect(() => {
             if (!this.service.undoPressed()) {
@@ -528,22 +535,27 @@ class AXImageEditorViewComponent extends MXBaseComponent {
             this.imageLoadEventListener();
         }
     }
-    /** @ignore */
-    imageLoaded() {
-        this.imageEditorHistory.set([this.service.initialImage()]);
-        this.service.newImage.set(this.service.initialImage());
-        this.service.isImageLoad.set(true);
+    setInitialImage(src) {
+        this.service.initialImage = new Image();
+        this.service.initialImage.src = src;
+        this.service.initialImage.crossOrigin = 'anonymous';
+        this.imageLoadEventListener = this.renderer.listen(this.service.initialImage, 'load', () => {
+            this.imageEditorHistory.set([this.service.initialImage]);
+            this.service.newImage = this.service.initialImage;
+            this.service.isImageLoad.set(true);
+            this.canvasResponsive(this.service.initialImage);
+        });
     }
     /** @ignore */
     imageChanged() {
         if (this.service.undoPressed() && this.imageEditorHistoryPointer() >= 1) {
             this.imageEditorHistoryPointer.update((prev) => prev - 1);
-            this.service.newImage.set(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
+            this.service.newImage = this.imageEditorHistory()[this.imageEditorHistoryPointer()];
             this.canvasResponsive(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
         }
         if (this.service.redoPressed() && this.imageEditorHistoryPointer() < this.imageEditorHistory().length - 1) {
             this.imageEditorHistoryPointer.update((prev) => prev + 1);
-            this.service.newImage.set(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
+            this.service.newImage = this.imageEditorHistory()[this.imageEditorHistoryPointer()];
             this.canvasResponsive(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
         }
         this.service.undoPressed.set(false);
@@ -565,10 +577,6 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         }
     }
     /** @ignore */
-    getBoundingCanvasHandler() {
-        return this.canvasElem().nativeElement.getBoundingClientRect();
-    }
-    /** @ignore */
     mouseDownHandler(e) {
         this.isMouseDown.set(true);
         if (!this.service.penType())
@@ -604,7 +612,8 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         this.canvasElem().nativeElement.width = cropRect.width;
         this.canvasElem().nativeElement.height = cropRect.height;
         this.ctx().putImageData(imageData, 0, 0);
-        this.saveImageChange();
+        const cropImage = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
+        this.setInitialImage(cropImage);
         this.service.activeToolState.set(null);
     }
     /** @ignore */
@@ -612,9 +621,19 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         this.ctx().globalAlpha = 1;
         this.ctx().save();
         this.ctx().clearRect(0, 0, this.canvasElem().nativeElement.width, this.canvasElem().nativeElement.height);
-        this.ctx().translate(this.service.newImage().width / 2, this.service.newImage().height / 2);
-        this.ctx().rotate((this.service.rotate().state * Math.PI) / 180);
-        this.ctx().drawImage(this.service.newImage(), -this.service.newImage().width / 2, -this.service.newImage().height / 2, this.service.newImage().width, this.service.newImage().height);
+        // Calculate scale factor to fit rotated image within canvas
+        const rotationAngle = (this.service.rotate().state * Math.PI) / 180;
+        const cos = Math.abs(Math.cos(rotationAngle));
+        const sin = Math.abs(Math.sin(rotationAngle));
+        const rotatedWidth = this.service.newImage.width * cos + this.service.newImage.height * sin;
+        const rotatedHeight = this.service.newImage.width * sin + this.service.newImage.height * cos;
+        const scaleX = this.canvasElem().nativeElement.width / rotatedWidth;
+        const scaleY = this.canvasElem().nativeElement.height / rotatedHeight;
+        const scale = Math.min(scaleX, scaleY);
+        this.ctx().translate(this.canvasElem().nativeElement.width / 2, this.canvasElem().nativeElement.height / 2);
+        this.ctx().rotate(rotationAngle);
+        this.ctx().scale(scale, scale);
+        this.ctx().drawImage(this.service.newImage, -this.service.newImage.width / 2, -this.service.newImage.height / 2);
         this.ctx().restore();
         this.saveImageChange();
         this.service.rotate.update((prev) => {
@@ -626,7 +645,7 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         const newImage = new Image();
         newImage.crossOrigin = 'anonymous';
         newImage.src = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
-        this.service.newImage.set(newImage);
+        this.service.newImage = newImage;
         this.imageEditorHistory.update((prev) => [...prev, newImage]);
         const tempBlob = [];
         this.canvasElem().nativeElement.toBlob((blob) => {
@@ -640,20 +659,13 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         }, 'image/webp', 1);
         this.service.imageBlob.set(tempBlob);
     }
-    /** @ignore */
-    get __hostStyle() {
-        return `width: ${this.service.initialImage()?.width}px; height: ${this.service.initialImage()?.height}px`;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__hostStyle" } }, 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: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", 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: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:#000}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { __hostStyle: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
+            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:#000}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * paint container.
@@ -674,7 +686,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
      * @returns void - No return value. The edited image is saved and the onValueChanged event is emitted.
      */
     save() {
-        if (this.service.initialImage() !== this.service.newImage()) {
+        if (this.service.initialImage !== this.service.newImage) {
             this.commitValue(this.service.imageBlob(), true);
         }
         else {