@acorex/components 20.2.42 → 20.2.44

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

@@ -206,6 +206,7 @@ class AXImageEditorCropperWindowComponent {
         this.prevY = signal(0, ...(ngDevMode ? [{ debugName: "prevY" }] : []));
         this.aspectWidth = signal(0, ...(ngDevMode ? [{ debugName: "aspectWidth" }] : []));
         this.aspectHeight = signal(0, ...(ngDevMode ? [{ debugName: "aspectHeight" }] : []));
+        this.isMousePressed = signal(false, ...(ngDevMode ? [{ debugName: "isMousePressed" }] : []));
         this.renderer = inject(Renderer2);
         this.platformID = inject(PLATFORM_ID);
         this.#eff = effect(() => {
@@ -299,6 +300,7 @@ class AXImageEditorCropperWindowComponent {
         this.prevY.set(currentY);
     }
     panDown(e) {
+        this.isMousePressed.set(true);
         if (this.selectedHandle())
             return;
         this.panState.set(true);
@@ -306,6 +308,7 @@ class AXImageEditorCropperWindowComponent {
         this.prevY.set(e.clientY);
     }
     panUp() {
+        this.isMousePressed.set(false);
         if (this.selectedHandle())
             return;
         this.panState.set(false);
@@ -330,6 +333,8 @@ class AXImageEditorCropperWindowComponent {
         this.selectedHandle.set(value);
     }
     changeSizeHandler(e) {
+        if (!this.isMousePressed())
+            return;
         if (this.panState())
             return;
         if (!this.selectedHandle())
@@ -473,7 +478,6 @@ class AXImageEditorViewComponent extends MXBaseComponent {
             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;
@@ -653,6 +657,7 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         const cropImage = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
         this.setInitialImage(cropImage, false);
         this.service.activeToolState.set(null);
+        this.saveImageChange();
     }
     /** @ignore */
     rotateImage() {
@@ -679,23 +684,31 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         });
     }
     /** @ignore */
-    saveImageChange() {
+    async saveImageChange() {
+        const canvas = this.canvasElem().nativeElement;
         const newImage = new Image();
         newImage.crossOrigin = 'anonymous';
-        newImage.src = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
+        newImage.src = canvas.toDataURL('image/jpeg', 1);
         this.service.newImage = newImage;
         this.imageEditorHistory.update((prev) => [...prev, newImage]);
-        const tempBlob = [];
-        this.canvasElem().nativeElement.toBlob((blob) => {
-            tempBlob.push(blob);
-        }, 'image/jpeg', 1);
-        this.canvasElem().nativeElement.toBlob((blob) => {
-            tempBlob.push(blob);
-        }, 'image/png', 1);
-        this.canvasElem().nativeElement.toBlob((blob) => {
-            tempBlob.push(blob);
-        }, 'image/webp', 1);
-        this.service.imageBlob.set(tempBlob);
+        const canvasToBlob = (type, quality) => {
+            return new Promise((resolve, reject) => {
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        resolve(blob);
+                    }
+                    else {
+                        reject(new Error(`toBlob returned null for type ${type}`));
+                    }
+                }, type, quality);
+            });
+        };
+        const blobs = await Promise.all([
+            canvasToBlob('image/jpeg', 1),
+            canvasToBlob('image/png', 1),
+            canvasToBlob('image/webp', 1),
+        ]);
+        this.service.imageBlob.set(blobs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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 }); }
@@ -717,21 +730,17 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
         this.imageEditorContainer = viewChild('f', ...(ngDevMode ? [{ debugName: "imageEditorContainer" }] : []));
         this.view = contentChild(AXImageEditorViewComponent, ...(ngDevMode ? [{ debugName: "view" }] : []));
         this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
+        this.#eff = effect(() => {
+            void this.service.imageBlob();
+            if (this.service.initialImage !== this.service.newImage && this.service.imageBlob().length) {
+                this.commitValue(this.service.imageBlob(), true);
+            }
+            else {
+                this.commitValue(null);
+            }
+        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
     }
-    /**
-     * Saves the current edited image and commits the value to the component.
-     * If the image has been modified, it commits the image blob array. If no changes were made, it commits null.
-     *
-     * @returns void - No return value. The edited image is saved and the onValueChanged event is emitted.
-     */
-    save() {
-        if (this.service.initialImage !== this.service.newImage) {
-            this.commitValue(this.service.imageBlob(), true);
-        }
-        else {
-            this.commitValue(null);
-        }
-    }
+    #eff;
     cropButtonHandler() {
         this.view().cropButtonHandler();
     }