@syncfusion/ej2-image-editor 25.2.4 → 26.1.35

package/src/image-editor/action/export.js

@@ -29,12 +29,11 @@ var Export = /** @class */ (function () {
             case 'exportToCanvas':
                 this.exportToCanvas(args.value['object']);
                 break;
-            case 'drawAnnotation':
-                this.drawAnnotation(args.value['context'], args.value['ratio']);
-                break;
             case 'updateSaveContext':
                 this.updateSaveContext(args.value['context']);
                 break;
+            case 'setImageQuality':
+                this.imageQuality = args.value['value'];
         }
     };
     Export.prototype.getModuleName = function () {
@@ -138,14 +137,14 @@ var Export = /** @class */ (function () {
         showSpinner(parent.element);
         parent.element.style.opacity = '0.5';
         var tempCanvas = this.exportToCanvas();
-        var imagetype = (type === 'jpeg') ? 'image/jpeg' : 'image/png';
+        var imagetype = type !== 'jpeg' ? 'image/png' : 'image/jpeg';
         // eslint-disable-next-line @typescript-eslint/tslint/config
         tempCanvas.toBlob(function (blob) {
             var blobUrl = URL.createObjectURL(blob);
             proxy.downloadImg(blobUrl, fileName + '.' + type);
             hideSpinner(parent.element);
             parent.element.style.opacity = '1';
-        }, imagetype);
+        }, imagetype, this.imageQuality ? this.imageQuality : null);
     };
     Export.prototype.exportToCanvas = function (object) {
         var parent = this.parent;
@@ -243,8 +242,8 @@ var Export = /** @class */ (function () {
             parent.freehandCounter = parent.pointColl.length;
             parent.transform.straighten = 0;
             this.lowerContext.filter = 'none';
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
             this.lowerContext.filter = prevObj.filter;
             parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
             if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
@@ -255,56 +254,115 @@ var Export = /** @class */ (function () {
         return tempCanvas;
     };
     Export.prototype.drawAnnotation = function (tempContext, ratio) {
+        var parent = this.parent;
+        var tempObjColl = extend([], parent.objColl, [], true);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var tempPointColl = extend([], parent.pointColl, [], true);
+        for (var i = 0; i < parent.shapeColl.length; i++) {
+            if (parent.shapeColl[i].order) {
+                if (parent.shapeColl[i].currIndex && parent.shapeColl[i].currIndex.indexOf('shape') > -1) {
+                    parent.objColl = [];
+                    parent.objColl.push(extend({}, parent.shapeColl[i], {}, true));
+                    this.drawShape(tempContext, ratio);
+                }
+                else if (parent.shapeColl[i].id && parent.shapeColl[i].id.indexOf('pen') > -1) {
+                    parent.pointColl = [];
+                    parent.freehandCounter = 0;
+                    parent.pointColl.push(extend({}, parent.shapeColl[i], {}, true));
+                    parent.freehandCounter = parent.pointColl.length;
+                    this.drawPen(tempContext, ratio);
+                }
+            }
+        }
+        parent.objColl = tempObjColl;
+        parent.pointColl = tempPointColl;
+        parent.freehandCounter = parent.pointColl.length;
+    };
+    Export.prototype.drawShape = function (tempContext, ratio) {
         var parent = this.parent;
         if (parent.objColl.length > 0) {
             var temp = tempContext.filter;
             tempContext.filter = 'none';
+            var indexObj = { index: null };
+            parent.notify('shape', { prop: 'getSmallestIndex', onPropertyChange: false, value: { obj: indexObj } });
+            var index = indexObj['index'];
+            var objColl = extend([], parent.objColl, [], true);
             var tempObjColl = extend([], parent.objColl, [], true);
-            for (var i = 0, len = parent.objColl.length; i < len; i++) {
-                var currObj = parent.objColl[i];
-                var activePoint = currObj.activePoint;
-                // Subtracting destination left and top points
-                activePoint.startX -= parent.img.destLeft;
-                activePoint.startY -= parent.img.destTop;
-                activePoint.endX -= parent.img.destLeft;
-                activePoint.endY -= parent.img.destTop;
-                activePoint.width = activePoint.endX - activePoint.startX;
-                activePoint.height = activePoint.endY - activePoint.startY;
-                // Manipulating points
-                activePoint.startX *= ratio.width;
-                activePoint.startY *= ratio.height;
-                activePoint.endX *= ratio.width;
-                activePoint.endY *= ratio.height;
-                activePoint.width = activePoint.endX - activePoint.startX;
-                activePoint.height = activePoint.endY - activePoint.startY;
-                currObj.strokeSettings.strokeWidth *= ((ratio.width + ratio.height) / 2);
-                if (currObj.shape === 'text') {
-                    currObj.textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
-                }
-                else if (currObj.shape === 'path') {
-                    for (var l = 0; l < currObj.pointColl.length; l++) {
-                        currObj.pointColl[l].x =
-                            (currObj.pointColl[l].x - parent.img.destLeft) * ratio.width;
-                        currObj.pointColl[l].y =
-                            (currObj.pointColl[l].y - parent.img.destTop) * ratio.height;
+            while (objColl.length > 0) {
+                var found = false;
+                for (var i = 0; i < objColl.length; i++) {
+                    var currentObj = objColl[i];
+                    if (isNullOrUndefined(currentObj.order)) {
+                        objColl.splice(i, 1);
+                        i--;
+                        continue;
+                    }
+                    if (currentObj.order === index) {
+                        var temp_1 = tempContext.filter;
+                        tempContext.filter = 'none';
+                        var currObj = objColl[i];
+                        var activePoint = currObj.activePoint;
+                        // Subtracting destination left and top points
+                        activePoint.startX -= parent.img.destLeft;
+                        activePoint.startY -= parent.img.destTop;
+                        activePoint.endX -= parent.img.destLeft;
+                        activePoint.endY -= parent.img.destTop;
+                        activePoint.width = activePoint.endX - activePoint.startX;
+                        activePoint.height = activePoint.endY - activePoint.startY;
+                        // Manipulating points
+                        activePoint.startX *= ratio.width;
+                        activePoint.startY *= ratio.height;
+                        activePoint.endX *= ratio.width;
+                        activePoint.endY *= ratio.height;
+                        activePoint.width = activePoint.endX - activePoint.startX;
+                        activePoint.height = activePoint.endY - activePoint.startY;
+                        currObj.strokeSettings.strokeWidth *= ((ratio.width + ratio.height) / 2);
+                        if (currObj.shape === 'text') {
+                            currObj.textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
+                        }
+                        else if (currObj.shape === 'path') {
+                            for (var l = 0; l < currObj.pointColl.length; l++) {
+                                currObj.pointColl[l].x =
+                                    (currObj.pointColl[l].x - parent.img.destLeft) * ratio.width;
+                                currObj.pointColl[l].y =
+                                    (currObj.pointColl[l].y - parent.img.destTop) * ratio.height;
+                            }
+                        }
+                        else if (currObj.shape === 'image') {
+                            parent.activeObj = extend({}, objColl[i], {}, true);
+                            parent.notify('selection', { prop: 'upgradeImageQuality', onPropertyChange: false });
+                            objColl[i] = extend({}, parent.activeObj, {}, true);
+                        }
+                        parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'saveContext', obj: objColl[i], isCropRatio: null,
+                                points: null, isPreventDrag: true, saveContext: tempContext, isPreventSelection: null } });
+                        tempContext.filter = temp_1;
+                        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                        index++;
+                        var indexBool = { bool: false };
+                        parent.notify('shape', { prop: 'isIndexInObjColl', onPropertyChange: false, value: { obj: indexBool, index: index } });
+                        if (!indexBool['bool']) {
+                            index++;
+                        }
+                        objColl.splice(i, 1);
+                        found = true;
+                        break; // Exit the loop to start from the beginning
                     }
                 }
-                else if (currObj.shape === 'image') {
-                    parent.activeObj = extend({}, parent.objColl[i], {}, true);
-                    parent.notify('selection', { prop: 'upgradeImageQuality', onPropertyChange: false });
-                    parent.objColl[i] = extend({}, parent.activeObj, {}, true);
+                if (!found) {
+                    break; // If no matching order was found, exit the loop
                 }
-                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'saveContext', obj: parent.objColl[i], isCropRatio: null,
-                        points: null, isPreventDrag: true, saveContext: tempContext, isPreventSelection: null } });
             }
             tempContext.filter = temp;
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             parent.objColl = tempObjColl;
         }
+    };
+    Export.prototype.drawPen = function (tempContext, ratio) {
+        var parent = this.parent;
         if (parent.freehandCounter > 0) {
             var widthObj = { penStrokeWidth: null };
             parent.notify('freehand-draw', { prop: 'getPenStrokeWidth', onPropertyChange: false, value: { obj: widthObj } });
-            // eslint-disable-next-line
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var tempPointColl = extend({}, parent.pointColl, {}, true);
             for (var n = 0; n < parent.freehandCounter; n++) {
                 parent.points = extend([], parent.pointColl[n].points, []);

package/src/image-editor/action/filter.d.ts

@@ -29,7 +29,6 @@ export declare class Filter {
     private setAdjustment;
     private setFilterValue;
     private setSaturationFilterValue;
-    private updateFilter;
     private finetuneImage;
     private setCurrAdjValue;
     private getCurrentObj;

package/src/image-editor/action/filter.js

@@ -43,9 +43,6 @@ var Filter = /** @class */ (function () {
             case 'set-adjustment':
                 this.setAdjustment(args.value['operation']);
                 break;
-            case 'update-filter':
-                this.updateFilter(args.value['operation'], args.value['filter']);
-                break;
             case 'initFilter':
                 this.initFilter();
                 break;
@@ -162,9 +159,8 @@ var Filter = /** @class */ (function () {
                 parent.isUndoRedo = true;
                 var temp = this.lowerContext.filter;
                 this.lowerContext.filter = 'none';
-                parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-                parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                    value: { context: this.lowerContext, points: null } });
+                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                    value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
                 this.lowerContext.filter = temp;
                 parent.isUndoRedo = false;
             }
@@ -360,9 +356,8 @@ var Filter = /** @class */ (function () {
             this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
                 'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
             this.bevelFilter = tempFilter;
-            parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                value: { context: this.lowerContext, points: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
             this.lowerContext.filter = tempFilter;
             parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
             if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
@@ -537,21 +532,6 @@ var Filter = /** @class */ (function () {
     Filter.prototype.setSaturationFilterValue = function (value) {
         return Math.round((value === 1) ? 0 : (value - 1) * 100);
     };
-    Filter.prototype.updateFilter = function (type, previousFilter) {
-        var parent = this.parent;
-        var validTypes = ['default', 'chrome', 'cold', 'warm', 'grayscale', 'blackandwhite', 'sepia', 'invert', 'sharpen'];
-        if (validTypes.indexOf(type) !== -1) {
-            var selEle = parent.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
-            if (selEle) {
-                selEle.classList.remove('e-selected');
-            }
-            var filterCanvas = document.getElementById(parent.element.id + '_' + type + 'Canvas');
-            if (filterCanvas) {
-                filterCanvas.parentElement.classList.add('e-selected');
-            }
-            this.parent.currentFilter = previousFilter ? previousFilter : parent.element.id + '_' + type;
-        }
-    };
     Filter.prototype.finetuneImage = function (finetuneOption, value) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {

package/src/image-editor/action/freehand-draw.js

@@ -285,7 +285,8 @@ var FreehandDrawing = /** @class */ (function () {
         EventHandler.add(canvas, 'mousemove touchmove', this.freehandMoveHandler, this);
         var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
             startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
-            strokeColor: parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth, points: null };
+            strokeColor: parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
+            points: null, index: parent.objColl.length + parent.freehandCounter + 1 };
         var shapeChangingArgs = { cancel: false, action: 'draw-start', previousShapeSettings: shapeSettings,
             currentShapeSettings: shapeSettings };
         this.triggerShapeChanging(shapeChangingArgs);
@@ -319,8 +320,10 @@ var FreehandDrawing = /** @class */ (function () {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         var fhCnt = parent.freehandCounter;
+        var order = parent.objColl.length + parent.freehandCounter + 1;
         parent.pointColl[fhCnt] = { points: extend([], parent.points), strokeColor: parent.activeObj.strokeSettings.strokeColor,
-            strokeWidth: this.penStrokeWidth, flipState: parent.transform.currFlipState, id: 'pen_' + (this.currFHDIdx + 1) };
+            strokeWidth: this.penStrokeWidth, flipState: parent.transform.currFlipState,
+            id: 'pen_' + (this.currFHDIdx + 1), order: order };
         parent.points = [];
         this.dummyPoints = [];
         this.selPointColl[fhCnt] = { points: extend([], this.selPoints) };
@@ -336,7 +339,7 @@ var FreehandDrawing = /** @class */ (function () {
         var shapeSettings = { id: 'pen_' + (this.currFHDIdx + 1), type: ShapeType.FreehandDraw,
             startX: this.freehandDownPoint.x, startY: this.freehandDownPoint.y,
             strokeColor: parent.activeObj.strokeSettings.strokeColor, strokeWidth: this.penStrokeWidth,
-            points: parent.pointColl[this.currFHDIdx].points };
+            points: parent.pointColl[this.currFHDIdx].points, index: order };
         var shapeChangingArgs = { cancel: false, action: 'draw-end', previousShapeSettings: shapeSettings,
             currentShapeSettings: shapeSettings };
         this.triggerShapeChanging(shapeChangingArgs);
@@ -538,7 +541,9 @@ var FreehandDrawing = /** @class */ (function () {
         context.filter = 'none';
         if (points) {
             parent.pointColl[parent.freehandCounter] = { points: points, strokeColor: parent.activeObj.strokeSettings.strokeColor,
-                strokeWidth: this.penStrokeWidth, flipState: parent.transform.currFlipState };
+                strokeWidth: this.penStrokeWidth, flipState: parent.transform.currFlipState,
+                id: 'pen_' + (parent.freehandCounter + 1), order: parent.objColl.length + parent.freehandCounter + 1 };
+            this.selPointColl[parent.freehandCounter] = extend({}, parent.pointColl[parent.freehandCounter], {}, true);
             parent.freehandCounter++;
         }
         if (parent.freehandCounter > 0) {
@@ -664,6 +669,7 @@ var FreehandDrawing = /** @class */ (function () {
     };
     FreehandDrawing.prototype.selectFhd = function (index) {
         var parent = this.parent;
+        var tempFHDStyles = extend({}, this.tempFHDStyles, {}, true);
         parent.notify('selection', { prop: 'setFreehandDrawEditing', onPropertyChange: false, value: { bool: true } });
         if (index || index === 0) {
             if (this.isFHDIdx(index)) {
@@ -690,13 +696,17 @@ var FreehandDrawing = /** @class */ (function () {
         if (obj['bool']) {
             var shapeSettings = { id: 'pen_' + (this.fhdSelIdx + 1), type: ShapeType.FreehandDraw,
                 startX: point.points[0].x, startY: point.points[0].y, strokeColor: point.strokeColor,
-                strokeWidth: point.strokeWidth, points: point.points, opacity: point.opacity };
+                strokeWidth: point.strokeWidth, points: point.points, opacity: point.opacity,
+                index: point.order };
             var shapeChangingArgs = { cancel: false, action: 'select', previousShapeSettings: shapeSettings,
                 currentShapeSettings: shapeSettings };
             this.triggerShapeChanging(shapeChangingArgs);
         }
         else {
-            parent.okBtn();
+            parent.okBtn(null, true);
+        }
+        if (parent.isUndoRedoStack) {
+            this.tempFHDStyles = tempFHDStyles;
         }
     };
     FreehandDrawing.prototype.deleteFhd = function (index, isId) {
@@ -991,8 +1001,8 @@ var FreehandDrawing = /** @class */ (function () {
         parent.img.destTop = destPoints.startY;
         parent.img.destWidth = destPoints.width;
         parent.img.destHeight = destPoints.height;
-        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
-        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: isPreventApply } });
     };
     FreehandDrawing.prototype.panFHDColl = function (xDiff, yDiff, panRegion) {
         var parent = this.parent;
@@ -1077,10 +1087,12 @@ var FreehandDrawing = /** @class */ (function () {
         }
         else {
             parent.upperCanvas.style.cursor = parent.cursor = 'default';
+            var strokeWidth = this.penStrokeWidth;
             parent.notify('shape', { prop: 'apply', onPropertyChange: false, value: { shape: null, obj: null, canvas: null } });
             parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
             parent.notify('toolbar', { prop: 'setCurrentToolbar', value: { type: 'main' } });
             parent.notify('selection', { prop: 'setFreehandDrawCustomized', value: { isFreehandDrawCustomized: false } });
+            this.penStrokeWidth = strokeWidth;
         }
     };
     FreehandDrawing.prototype.isFHDIdx = function (index, obj) {
@@ -1119,6 +1131,16 @@ var FreehandDrawing = /** @class */ (function () {
         var parent = this.parent;
         var point = parent.pointColl[this.fhdSelIdx];
         parent.trigger('shapeChanging', shapeChangingArgs);
+        if (shapeChangingArgs.currentShapeSettings.id.indexOf('pen_') === -1 &&
+            (shapeChangingArgs.action === 'draw-end' || shapeChangingArgs.action === 'select')) {
+            var id = 'pen_' + shapeChangingArgs.currentShapeSettings.id;
+            if (this.fhdSelIdx) {
+                parent.pointColl[this.fhdSelIdx].id = id;
+            }
+            else {
+                parent.pointColl[parent.freehandCounter - 1].id = id;
+            }
+        }
         this.penStrokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
         if (parent.activeObj.strokeSettings.strokeColor !== shapeChangingArgs.currentShapeSettings.strokeColor) {
             parent.activeObj.strokeSettings.strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;

package/src/image-editor/action/selection.d.ts

@@ -45,6 +45,9 @@ export declare class Selection {
     private isSliding;
     private mouseDown;
     private isSliderActive;
+    private arrowShape;
+    private isPreventShaping;
+    private isGrabbing;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -57,6 +60,8 @@ export declare class Selection {
     private selMouseUpEvent;
     private getMouseCursor;
     private setCursor;
+    private getHighestOrder;
+    private setCursorForActObj;
     private setCursorForPath;
     private setCursorForLineArrow;
     private setCursorForRotatedObject;
@@ -77,6 +82,11 @@ export declare class Selection {
     private getScaleRatio;
     private findImageRatio;
     private revertResizing;
+    private performSEResize;
+    private performNWResize;
+    private isCustomSelection;
+    private revertCustomSelection;
+    private revertPoints;
     private updateNWPoints;
     private updateNPoints;
     private updateNEPoints;