@syncfusion/ej2-image-editor 26.2.14 → 27.1.48

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

@@ -194,6 +194,7 @@ var Transform = /** @class */ (function () {
             currentDegree: Math.abs(parent.transform.degree + degree) === 360 ? 0 : parent.transform.degree + degree };
         if (!this.isPreventSelect) {
             parent.trigger('rotating', transitionArgs);
+            parent.editCompleteArgs = transitionArgs;
         }
         this.rotateEvent(transitionArgs, degree);
     };
@@ -336,11 +337,6 @@ var Transform = /** @class */ (function () {
                 height: parent.img.destHeight };
             parent.objColl = [];
             parent.objColl.push(extend({}, parent.currSelectionPoint, {}, true));
-            if (isNullOrUndefined(parent.objColl[0].imageRatio)) {
-                parent.activeObj = parent.objColl[0];
-                parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
-                parent.objColl[0] = parent.activeObj;
-            }
             parent.img = { srcLeft: 0, srcTop: 0, srcWidth: parent.baseImgCanvas.width, srcHeight: parent.baseImgCanvas.height,
                 destLeft: this.currDestPoint.startX, destTop: this.currDestPoint.startY, destWidth: this.currDestPoint.width,
                 destHeight: this.currDestPoint.height };
@@ -365,6 +361,7 @@ var Transform = /** @class */ (function () {
             previousDirection: parent.toPascalCase(parent.transform.currFlipState || direction) };
         if (!this.isPreventSelect) {
             parent.trigger('flipping', transitionArgs);
+            parent.editCompleteArgs = transitionArgs;
         }
         this.flipEvent(transitionArgs, direction);
     };
@@ -626,7 +623,9 @@ var Transform = /** @class */ (function () {
                 this.tempActiveObj = extend({}, parent.activeObj, {}, true);
                 parent.isCropTab = true;
             }
-            else if (parent.activeObj.shape && splitWords[0] !== 'crop') {
+            else if (parent.activeObj.shape && splitWords[0] !== 'crop' &&
+                (parent.activeObj.activePoint.width !== 0 || parent.activeObj.activePoint.height !== 0) ||
+                (parent.activeObj.shape === 'path' && parent.activeObj.pointColl.length > 0)) {
                 this.isShape = true;
             }
             var obj = { zoomType: null };
@@ -648,18 +647,25 @@ var Transform = /** @class */ (function () {
                 currentZoomFactor: parent.zoomSettings.zoomFactor, zoomTrigger: obj['zoomType'] };
             if (!parent.isCropToolbar && parent.isZoomBtnClick) {
                 parent.trigger('zooming', zoomEventArgs);
+                parent.editCompleteArgs = zoomEventArgs;
             }
             this.zoomEvent(zoomEventArgs, zoomFactor, isPreventApply);
         }
     };
     Transform.prototype.zoomEvent = function (zoomEventArgs, zoomFact, isPreventApply) {
         var parent = this.parent;
+        var shapeId;
         var _a = parent.zoomSettings, zoomFactor = _a.zoomFactor, minZoomFactor = _a.minZoomFactor;
         if (zoomEventArgs.cancel) {
             parent.isZoomBtnClick = false;
             return;
         }
-        parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
+        if (this.parent.activeObj.redactType !== 'blur' && this.parent.activeObj.redactType !== 'pixelate') {
+            parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
+        }
+        if (!parent.isCropTab && parent.activeObj.shape) {
+            shapeId = parent.activeObj.currIndex;
+        }
         parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
             value: { x: null, y: null, isMouseDown: true } });
         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -774,16 +780,20 @@ var Transform = /** @class */ (function () {
         if (parent.activeObj.shape === 'crop-custom') {
             parent.currObjType.isCustomCrop = true;
         }
-        var panBtn = parent.element.querySelector('.e-img-pan .e-btn');
-        if (panBtn && parent.togglePan) {
-            panBtn.classList.add('e-selected-btn');
-        }
-        else if (panBtn) {
-            panBtn.classList.remove('e-selected-btn');
-        }
         if (this.isShape) {
-            parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
-            parent.objColl.pop();
+            if (shapeId) {
+                for (var i = 0, len = parent.objColl.length; i < len; i++) {
+                    if (parent.objColl[i].currIndex === shapeId) {
+                        parent.activeObj = extend({}, parent.objColl[i], {}, true);
+                        parent.objColl.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+            else {
+                parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
+                parent.objColl.pop();
+            }
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
                     points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null } });
             parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
@@ -802,24 +812,32 @@ var Transform = /** @class */ (function () {
             parent.activeObj = activeObj;
             if (activeObj.activePoint.width > 0 || activeObj.activePoint.height > 0 ||
                 (activeObj.pointColl && activeObj.pointColl.length > 0)) {
+                if (activeObj.shape === 'redact') {
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                }
                 var zOrderElem = parent.element.querySelector('#' + parent.element.id + '_zOrderBtn');
                 var dupElem = parent.element.querySelector('#' + parent.element.id + '_duplicate');
                 var removeElem = parent.element.querySelector('#' + parent.element.id + '_remove');
                 var editTextElem = parent.element.querySelector('#' + parent.element.id + '_editText');
                 if (zOrderElem) {
-                    zOrderElem.classList.remove('e-disabled');
+                    zOrderElem.classList.remove('e-overlay');
                 }
                 if (dupElem) {
-                    dupElem.classList.remove('e-disabled');
+                    dupElem.classList.remove('e-overlay');
                 }
                 if (removeElem) {
-                    removeElem.classList.remove('e-disabled');
+                    removeElem.classList.remove('e-overlay');
                 }
                 if (editTextElem) {
-                    editTextElem.classList.remove('e-disabled');
+                    editTextElem.classList.remove('e-overlay');
                 }
             }
         }
+        else if (parent.activeObj.shape && parent.activeObj.shape === 'redact') {
+            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'redact',
+                    isApplyBtn: false, isCropping: false } });
+            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+        }
     };
     Transform.prototype.disableZoomOutBtn = function (isZoomOut) {
         var parent = this.parent;
@@ -997,24 +1015,14 @@ var Transform = /** @class */ (function () {
         var destLeft = parent.img.destLeft;
         var destTop = parent.img.destTop;
         var maxDimension = { width: 0, height: 0 };
-        if (parent.img.srcLeft === 0 || parent.img.srcTop === 0) {
-            if (isNullOrUndefined(selectionObj)) {
-                maxDimension = this.setZoomDimension(value, null);
-            }
-            else {
-                maxDimension = this.setZoomDimension(value, selectionObj);
-            }
+        if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+            maxDimension = this.calcMaxDimension(parent.img.srcHeight, parent.img.srcWidth);
         }
         else {
-            if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
-                maxDimension = this.calcMaxDimension(parent.img.srcHeight, parent.img.srcWidth);
-            }
-            else {
-                maxDimension = this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight);
-            }
-            maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
-            maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
+            maxDimension = this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight);
         }
+        maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
+        maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
         parent.img.destLeft = destLeft - ((maxDimension.width - parent.img.destWidth) / 2);
         parent.img.destTop = destTop - ((maxDimension.height - parent.img.destHeight) / 2);
         destLeft = parent.img.destLeft;
@@ -1273,9 +1281,6 @@ var Transform = /** @class */ (function () {
     };
     Transform.prototype.performTransformation = function (text) {
         var parent = this.parent;
-        var tempZoomFactor = parent.transform.defaultZoomFactor;
-        var isUndoRedo = parent.isUndoRedo;
-        var prevCropObj = extend({}, parent.cropObj, {}, true);
         this.resetZoom();
         this.updateTransform(text);
         for (var i = 0, len = parent.objColl.length; i < len; i++) {
@@ -1289,24 +1294,6 @@ var Transform = /** @class */ (function () {
                 }
             }
         }
-        if (tempZoomFactor !== 0) {
-            parent.isUndoRedo = true;
-            this.zoomAction(tempZoomFactor);
-            parent.isUndoRedo = isUndoRedo;
-            var state = '';
-            if (text === 'rotateleft' || text === 'rotateright') {
-                state = 'rotate';
-            }
-            else if (text === 'horizontalflip' || text === 'verticalflip') {
-                state = 'flip';
-            }
-            parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
-                value: { operation: state, previousObj: this.transCurrObj, previousObjColl: this.transCurrObj.objColl,
-                    previousPointColl: this.transCurrObj.pointColl, previousSelPointColl: this.transCurrObj.selPointColl,
-                    previousCropObj: prevCropObj, previousText: null,
-                    currentText: null, previousFilter: null, isCircleCrop: null } });
-            this.transCurrObj = null;
-        }
     };
     Transform.prototype.updateTransform = function (text) {
         switch (text.toLowerCase()) {
@@ -1479,6 +1466,9 @@ var Transform = /** @class */ (function () {
                         value: { x: zoomPoint.x, y: zoomPoint.y, type: type, isResize: null } });
                 }
             }
+            var actionArgs = { action: value > 0 ? 'zoom-in' : 'zoom-out',
+                actionEventArgs: parent.editCompleteArgs };
+            parent.triggerEditCompleteEvent(actionArgs);
         }
     };
     Transform.prototype.getCurrentZoomFactor = function (zoomFactor) {
@@ -1520,7 +1510,6 @@ var Transform = /** @class */ (function () {
     Transform.prototype.update = function () {
         var parent = this.parent;
         var toolbarHeight = 0;
-        var isFrameToolbar = false;
         var isActiveObj = false;
         var freehandObj = { bool: false };
         var straightenObj = { bool: parent.isStraightening };
@@ -1577,7 +1566,7 @@ var Transform = /** @class */ (function () {
         if (canvasWrapper) {
             canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
         }
-        parent.lowerCanvas.width = parent.upperCanvas.width = parent.element.offsetWidth - 2;
+        parent.lowerCanvas.width = parent.upperCanvas.width = parent.maskCanvas.width = parent.element.offsetWidth - 2;
         if (parent.toolbarTemplate) {
             toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
         }
@@ -1637,8 +1626,10 @@ var Transform = /** @class */ (function () {
                     canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj_1['toolbarHeight']) - 2 + 'px';
                 }
             }
-            parent.lowerCanvas.width = parent.upperCanvas.width = parseFloat(canvasWrapper.style.width);
-            parent.lowerCanvas.height = parent.upperCanvas.height = parseFloat(canvasWrapper.style.height);
+            parent.lowerCanvas.width = parent.upperCanvas.width = parent.maskCanvas.width =
+                parseFloat(canvasWrapper.style.width);
+            parent.lowerCanvas.height = parent.upperCanvas.height = parent.maskCanvas.height =
+                parseFloat(canvasWrapper.style.height);
             this.lowerContext.filter = tempFilter;
             var obj = { width: 0, height: 0 };
             this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight, obj);
@@ -1685,7 +1676,9 @@ var Transform = /** @class */ (function () {
             if (obj1['defToolbarItems'] && obj1['defToolbarItems'].length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 var toolbar_1 = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                toolbar_1.refreshOverflow();
+                if (toolbar_1) {
+                    toolbar_1.refreshOverflow();
+                }
                 if (ctWrapper && !straightenObj['bool']) {
                     ctWrapper.classList.add('e-hide');
                 }
@@ -1719,10 +1712,7 @@ var Transform = /** @class */ (function () {
             if (freehandObj['bool']) {
                 parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
             }
-            if (isFrameToolbar) {
-                parent.notify('toolbar', { prop: 'callFrameToolbar', onPropertyChange: false });
-            }
-            else if (parent.isResize) {
+            if (parent.isResize) {
                 parent.aspectWidth = Math.ceil(parent.img.destWidth);
                 parent.aspectHeight = Math.ceil(parent.img.destHeight);
                 parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'resize',
@@ -2126,6 +2116,7 @@ var Transform = /** @class */ (function () {
                 (isAspectRatio ? Math.ceil(parseFloat(aspectHeight)) : Math.ceil(parent.img.destHeight)),
             isAspectRatio: isAspectRatio ? isAspectRatio : false };
         parent.trigger('resizing', resizeEventArgs);
+        parent.editCompleteArgs = resizeEventArgs;
         if (!resizeEventArgs.cancel) {
             this.resizeEventHandler(resizeEventArgs);
         }
@@ -2139,8 +2130,6 @@ var Transform = /** @class */ (function () {
         var isRotate;
         var aspectRatioWidth = parent.element.querySelector('#' + parent.element.id + '_resizeWidth');
         var aspectRatioHeight = parent.element.querySelector('#' + parent.element.id + '_resizeHeight');
-        var heightElem = parent.element.querySelector('.e-ie-toolbar-e-resize-height-input .e-textbox');
-        var widthElem = parent.element.querySelector('.e-ie-toolbar-e-resize-width-input .e-textbox');
         if (args.isAspectRatio) {
             if (this.resizedImgAngle == null || this.resizedImgAngle !== parent.transform.degree) {
                 this.resizedImgAngle = parent.transform.degree;
@@ -2170,21 +2159,6 @@ var Transform = /** @class */ (function () {
                         parent.aspectWidth = width;
                     }
                 }
-                else if (heightElem) {
-                    var value = aspectRatioWidthValue / (originalWidth / originalHeight);
-                    // eslint-disable-next-line max-len
-                    var height = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
-                    heightElem.value = height.toString();
-                    parent.aspectHeight = height;
-                    if (widthElem && widthElem.value === '') {
-                        var aspectRatioHeightValue = parseFloat(heightElem.value === '' ? heightElem.placeholder : heightElem.value);
-                        value = aspectRatioHeightValue / (originalHeight / originalWidth);
-                        // eslint-disable-next-line max-len
-                        var width = value % 1 >= 0.5 || value % 1 <= -0.5 ? Math.round(value) : (value < 0) ? Math.ceil(value) : Math.floor(value);
-                        widthElem.value = width.toString();
-                        parent.aspectWidth = width;
-                    }
-                }
             }
             else {
                 parent.notify('transform', { prop: 'resizeImage', value: { width: args.width, height: null } });

package/src/image-editor/action/undo-redo.d.ts

@@ -21,6 +21,8 @@ export declare class UndoRedo {
     private reset;
     private refreshUrc;
     private updateCurrUrc;
+    private triggerActionCompletedEvent;
+    private getUndoRedoAction;
     private cancelCropSelection;
     private refreshToolbarActions;
     private applyCurrentChanges;

package/src/image-editor/action/undo-redo.js

@@ -105,6 +105,9 @@ var UndoRedo = /** @class */ (function () {
     };
     UndoRedo.prototype.refreshUrc = function (refreshToolbar) {
         var parent = this.parent;
+        if (parent.isImageUpdated) {
+            return;
+        }
         refreshToolbar = refreshToolbar ? refreshToolbar : false;
         if (refreshToolbar) {
             parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: true } });
@@ -165,6 +168,9 @@ var UndoRedo = /** @class */ (function () {
                     prevObj.currentObj.currentFilter = parent.currentFilter;
                 }
                 this.appliedUndoRedoColl.push(prevObj);
+                if (!isCancel) {
+                    this.triggerActionCompletedEvent(prevObj.operation);
+                }
             }
             this.tempUndoRedoColl = [];
             this.tempUndoRedoStep = 0;
@@ -190,6 +196,18 @@ var UndoRedo = /** @class */ (function () {
                     JSON.stringify(lastObj.currentPointColl) === JSON.stringify(lastPrevObj.currentPointColl))) {
                 this.appliedUndoRedoColl.splice(this.appliedUndoRedoColl.length - 1, 1);
             }
+            else if (this.undoRedoStep !== this.appliedUndoRedoColl.length - 1) {
+                lastObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1];
+                lastPrevObj = this.appliedUndoRedoColl[this.undoRedoStep];
+                if (lastObj && lastPrevObj && lastObj.operation === 'shapeTransform' &&
+                    lastPrevObj.operation === 'shapeTransform' &&
+                    JSON.stringify(lastObj.currentObjColl) === JSON.stringify(lastPrevObj.previousObjColl)) {
+                    this.appliedUndoRedoColl.splice(this.appliedUndoRedoColl.length - 1, 1);
+                    this.undoRedoColl = [];
+                    this.undoRedoColl = extend([], this.appliedUndoRedoColl, [], true);
+                    return;
+                }
+            }
         }
         this.undoRedoColl = [];
         this.undoRedoColl = extend([], this.appliedUndoRedoColl, [], true);
@@ -202,6 +220,35 @@ var UndoRedo = /** @class */ (function () {
             parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
         }
     };
+    UndoRedo.prototype.triggerActionCompletedEvent = function (action) {
+        var parent = this.parent;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var actionMap = { 'brightness': 'fine-tune', 'contrast': 'fine-tune', 'hue': 'fine-tune',
+            'saturation': 'fine-tune', 'opacity': 'fine-tune', 'blur': 'fine-tune', 'exposure': 'fine-tune',
+            'default': 'filter', 'chrome': 'filter', 'cold': 'filter', 'warm': 'filter',
+            'grayscale': 'filter', 'sepia': 'filter', 'invert': 'filter',
+            'deleteObj': 'shape-delete', 'deleteFreehandDrawing': 'freehand-draw-delete',
+            'shapeInsert': 'shape-insert', 'shapeTransform': 'shape-customize',
+            'freehanddrawCustomized': 'freehand-draw-customize'
+        };
+        var actionResult = actionMap[action] || action;
+        var actionArgs = { action: actionResult, actionEventArgs: parent.editCompleteArgs };
+        parent.triggerEditCompleteEvent(actionArgs);
+    };
+    UndoRedo.prototype.getUndoRedoAction = function (action) {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var actionMap = { 'brightness': 'fine-tune', 'contrast': 'fine-tune', 'hue': 'fine-tune',
+            'saturation': 'fine-tune', 'opacity': 'fine-tune', 'blur': 'fine-tune', 'exposure': 'fine-tune',
+            'default': 'filter', 'chrome': 'filter', 'cold': 'filter', 'warm': 'filter',
+            'grayscale': 'filter', 'sepia': 'filter', 'invert': 'filter',
+            'deleteObj': 'shape-delete', 'deleteFreehandDrawing': 'freehand-drawing-delete',
+            'shapeInsert': 'shape-insert', 'shapeTransform': 'shape-customize', 'imageRotate': 'shape-customize',
+            'freehanddraw': 'freehand-draw', 'freehanddrawCustomized': 'freehand-draw-customize',
+            'textAreaCustomization': 'text-area-customization', 'imageHFlip': 'shape-customize',
+            'imageVFlip': 'shape-customize', 'bgColor': 'background-color', 'updateImage': 'image-update'
+        };
+        return actionMap[action] || action;
+    };
     UndoRedo.prototype.cancelCropSelection = function () {
         var parent = this.parent;
         var isCropSelection = false;
@@ -302,6 +349,7 @@ var UndoRedo = /** @class */ (function () {
                 parent.canvasFilter = this.lowerContext.filter;
                 parent.initialAdjustmentValue = this.lowerContext.filter;
                 parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter } });
+                var editCompleteArgs = { action: this.getUndoRedoAction(obj.operation) };
                 switch (obj.operation) {
                     case 'shapeTransform':
                     case 'brightness':
@@ -358,6 +406,26 @@ var UndoRedo = /** @class */ (function () {
                     case 'imageVFlip':
                         this.imageFlip('vertical', obj.previousObjColl);
                         break;
+                    case 'bgColor':
+                        parent.notify('draw', { prop: 'imageBackgroundColor', onPropertyChange: false, value: { color: obj.previousObj.bgColor } });
+                        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+                        break;
+                    case 'updateImage':
+                        parent.isImageUpdated = true;
+                        parent.baseImg.src = obj.previousObj.imageSource;
+                        setTimeout(function () {
+                            if (parent.cropObj.straighten !== 0) {
+                                parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
+                                parent.noPushUndo = true;
+                                parent.crop();
+                                parent.noPushUndo = false;
+                            }
+                            else {
+                                parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+                            }
+                            parent.isImageUpdated = false;
+                        });
+                        break;
                     default:
                         this.undoDefault(obj, true);
                         parent.notify('filter', { prop: 'set-adjustment', value: { operation: obj.operation } });
@@ -379,7 +447,10 @@ var UndoRedo = /** @class */ (function () {
                         this.tempCurrSelPoint = extend({}, parent.currSelectionPoint, {}, true);
                         parent.currSelectionPoint = null;
                     }
+                    var tempCircleCrop = parent.cancelCropSelection.isCircleCrop;
+                    parent.cancelCropSelection.isCircleCrop = false;
                     parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null, isUndoRedo: true } });
+                    parent.cancelCropSelection.isCircleCrop = tempCircleCrop;
                     parent.currObjType.isActiveObj = false;
                     if (parent.transform.straighten !== 0) {
                         parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
@@ -395,6 +466,8 @@ var UndoRedo = /** @class */ (function () {
                         value: { context: this.lowerContext, isSave: null, isFlip: null } });
                 }
                 this.endUndoRedo(obj.operation, true);
+                var action = { action: 'undo', actionEventArgs: editCompleteArgs };
+                parent.triggerEditCompleteEvent(action);
             }
         }
     };
@@ -434,6 +507,7 @@ var UndoRedo = /** @class */ (function () {
                 parent.initialAdjustmentValue = this.lowerContext.filter;
                 parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter } });
                 var activeObj = void 0;
+                var editCompleteArgs = { action: this.getUndoRedoAction(obj.operation) };
                 switch (obj.operation) {
                     case 'shapeTransform':
                     case 'brightness':
@@ -486,6 +560,26 @@ var UndoRedo = /** @class */ (function () {
                     case 'imageVFlip':
                         this.imageFlip('vertical', obj.currentObjColl);
                         break;
+                    case 'bgColor':
+                        parent.notify('draw', { prop: 'imageBackgroundColor', onPropertyChange: false, value: { color: obj.currentObj.bgColor } });
+                        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+                        break;
+                    case 'updateImage':
+                        parent.isImageUpdated = true;
+                        parent.baseImg.src = obj.currentObj.imageSource;
+                        setTimeout(function () {
+                            if (parent.cropObj.straighten !== 0) {
+                                parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
+                                parent.noPushUndo = true;
+                                parent.crop();
+                                parent.noPushUndo = false;
+                            }
+                            else {
+                                parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+                            }
+                            parent.isImageUpdated = false;
+                        });
+                        break;
                     default:
                         parent.objColl = [];
                         parent.pointColl = [];
@@ -535,6 +629,8 @@ var UndoRedo = /** @class */ (function () {
                     parent.currSelectionPoint = extend({}, parent.cropObj.activeObj, {}, true);
                 }
                 this.endUndoRedo(obj.operation, false);
+                var action = { action: 'redo', actionEventArgs: editCompleteArgs };
+                parent.triggerEditCompleteEvent(action);
             }
         }
     };
@@ -732,7 +828,8 @@ var UndoRedo = /** @class */ (function () {
         parent.freehandCounter = 0;
         parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
             value: { obj: { selPointColl: [] } } });
-        parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj.previousObj, isUndoRedo: isUndoRedo } });
+        var isCircleCrop = !isUndoRedo ? obj.isCircleCrop : false;
+        parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj.previousObj, isUndoRedo: isUndoRedo, isCircleCrop: isCircleCrop } });
         parent.prevStraightenedDegree = parent.transform.straighten;
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -1046,6 +1143,7 @@ var UndoRedo = /** @class */ (function () {
                 parent.okBtn();
                 parent.noPushUndo = temp;
                 if (obj['freehandDrawSelectedId']) {
+                    parent.noRedact = true;
                     parent.selectShape(obj['freehandDrawSelectedId']);
                 }
                 else {
@@ -1057,6 +1155,7 @@ var UndoRedo = /** @class */ (function () {
                 var shapeId = parent.activeObj.currIndex;
                 parent.okBtn();
                 parent.noPushUndo = temp;
+                parent.noRedact = true;
                 parent.selectShape(shapeId);
                 if (parent.drawingShape) {
                     parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: parent.drawingShape.toLowerCase() } });

package/src/image-editor/base/enum.d.ts

@@ -256,3 +256,14 @@ export declare enum FrameLineStyle {
     /** Represents a dotted line. */
     Dotted = "Dotted"
 }
+/**
+ * An enumeration representing the type of redaction to be added in the image editor.
+ *
+ * @enum {string}
+ */
+export declare enum RedactType {
+    /** Represents a blur redaction. */
+    Blur = "Blur",
+    /** Represents a pixelate redaction. */
+    Pixelate = "Pixelate"
+}

package/src/image-editor/base/enum.js

@@ -267,3 +267,15 @@ export var FrameLineStyle;
     /** Represents a dotted line. */
     FrameLineStyle["Dotted"] = "Dotted";
 })(FrameLineStyle || (FrameLineStyle = {}));
+/**
+ * An enumeration representing the type of redaction to be added in the image editor.
+ *
+ * @enum {string}
+ */
+export var RedactType;
+(function (RedactType) {
+    /** Represents a blur redaction. */
+    RedactType["Blur"] = "Blur";
+    /** Represents a pixelate redaction. */
+    RedactType["Pixelate"] = "Pixelate";
+})(RedactType || (RedactType = {}));

package/src/image-editor/base/image-editor-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, addClass, removeClass, ModuleDeclaration, extend } from '@syncfusion/ej2-base';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -679,4 +679,16 @@ export interface ImageEditorModel extends ComponentModel{
      */
     frameChange?: EmitType<FrameChangeEventArgs>
 
+    /**
+     * Event callback that is triggered after the completion of an editing action in the image editor.
+     *
+     * This event occurs after the image editor canvas has been updated through following actions such as cropping, drawing annotations, applying filters, fine-tuning, or other customizations.
+     *
+     * It provides an opportunity to perform additional tasks, such as comparing the current image data with previous states or triggering further processing based on the changes.
+     *
+     * @event editComplete
+     *
+     */
+    editComplete?: EmitType<EditCompleteEventArgs >
+
 }