@syncfusion/ej2-image-editor 25.2.3 → 26.1.35

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

@@ -58,7 +58,6 @@ export declare class Transform {
     private updateTransform;
     private rotatePan;
     private limitPan;
-    private updateFlipActiveObj;
     private pan;
     private zoom;
     private getCurrentZoomFactor;

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

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-const */
 import { Browser, extend, getComponent, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { Direction } from '../index';
 import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
@@ -32,9 +33,6 @@ var Transform = /** @class */ (function () {
     Transform.prototype.transform = function (args) {
         this.initTransformPvtVar();
         switch (args.prop) {
-            case 'rotateImage':
-                this.rotateImage(args.value['degree']);
-                break;
             case 'flipImage':
                 this.flipImage(args.value['direction']);
                 break;
@@ -65,15 +63,6 @@ var Transform = /** @class */ (function () {
             case 'rotatePan':
                 this.rotatePan(args.value['isCropSelection'], args.value['isDefaultZoom']);
                 break;
-            case 'drawRotatedImage':
-                this.drawRotatedImage(args.value['degree']);
-                break;
-            case 'limitPan':
-                this.limitPan();
-                break;
-            case 'updateFlipActiveObj':
-                this.updateFlipActiveObj(args.value['panRegion']);
-                break;
             case 'resetZoom':
                 this.resetZoom();
                 break;
@@ -155,9 +144,6 @@ var Transform = /** @class */ (function () {
             case 'resizeCrop':
                 this.resizeCrop(args.value['width'], args.value['height']);
                 break;
-            case 'setPreventDownScale':
-                this.preventDownScale = args.value['bool'];
-                break;
             case 'updateResize':
                 this.updateResize();
                 break;
@@ -713,8 +699,8 @@ var Transform = /** @class */ (function () {
                 parent.img.destLeft = destLeft;
                 parent.img.destTop = destTop;
                 parent.objColl = objColl;
-                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 } });
                 if (parent.transform.straighten === 0 && !this.isPreventSelect) {
                     parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false, value: { isPreventApply: isPreventApply } });
                 }
@@ -735,8 +721,8 @@ var Transform = /** @class */ (function () {
             if (panObj_2['panRegion'] !== '') {
                 var temp = this.lowerContext.filter;
                 this.lowerContext.filter = 'none';
-                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 } });
                 this.lowerContext.filter = temp;
             }
         }
@@ -751,8 +737,8 @@ var Transform = /** @class */ (function () {
         if (panObj['panRegion'] === '') {
             var temp = this.lowerContext.filter;
             this.lowerContext.filter = 'none';
-            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 } });
             this.lowerContext.filter = temp;
         }
         if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
@@ -779,7 +765,9 @@ var Transform = /** @class */ (function () {
             zoomOut.classList.remove('e-disabled');
             zoomOut.parentElement.classList.remove('e-overlay');
         }
+        var drawingShape = parent.drawingShape;
         this.autoEnablePan();
+        parent.drawingShape = drawingShape;
         if (this.tempActiveObj) {
             parent.activeObj = extend({}, this.tempActiveObj, {}, true);
         }
@@ -803,10 +791,35 @@ var Transform = /** @class */ (function () {
         }
         parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
         parent.notify('selection', { prop: 'setZoomType', onPropertyChange: false, value: { zoomType: 'Toolbar' } });
+        // eslint-disable-next-line max-len
         zoomEventArgs = { zoomPoint: zoomEventArgs.zoomPoint, previousZoomFactor: zoomEventArgs.previousZoomFactor, currentZoomFactor: zoomEventArgs.currentZoomFactor, zoomTrigger: zoomEventArgs.zoomTrigger };
         if (!parent.isCropToolbar && parent.isZoomBtnClick) {
             parent.isZoomBtnClick = false;
         }
+        if (parent.drawingShape) {
+            var activeObj = extend({}, parent.activeObj, {}, true);
+            parent.enableShapeDrawing(parent.toPascalCase(parent.drawingShape), true);
+            parent.activeObj = activeObj;
+            if (activeObj.activePoint.width > 0 || activeObj.activePoint.height > 0 ||
+                (activeObj.pointColl && activeObj.pointColl.length > 0)) {
+                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');
+                }
+                if (dupElem) {
+                    dupElem.classList.remove('e-disabled');
+                }
+                if (removeElem) {
+                    removeElem.classList.remove('e-disabled');
+                }
+                if (editTextElem) {
+                    editTextElem.classList.remove('e-disabled');
+                }
+            }
+        }
     };
     Transform.prototype.disableZoomOutBtn = function (isZoomOut) {
         var parent = this.parent;
@@ -1219,10 +1232,9 @@ var Transform = /** @class */ (function () {
         if (isObjCreated) {
             parent.isCropTab = false;
         }
-        parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false,
-            value: { xDiff: point.x, yDiff: point.y, panRegion: '' } });
-        parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false,
-            value: { xDiff: point.x, yDiff: point.y, panRegion: '' } });
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'pan', pen: 'pan', x: point.x,
+                y: point.y, panRegion: '' } });
         if (isObjCreated) {
             parent.isCropTab = true;
         }
@@ -1387,10 +1399,9 @@ var Transform = /** @class */ (function () {
         if (isObjCreated) {
             parent.isCropTab = false;
         }
-        parent.notify('shape', { prop: 'panObjColl', onPropertyChange: false,
-            value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
-        parent.notify('freehand-draw', { prop: 'panFHDColl', onPropertyChange: false,
-            value: { xDiff: parent.panPoint.currentPannedPoint.x, yDiff: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'pan', pen: 'pan', x: parent.panPoint.currentPannedPoint.x,
+                y: parent.panPoint.currentPannedPoint.y, panRegion: '' } });
         if (isObjCreated) {
             parent.isCropTab = true;
         }
@@ -1423,37 +1434,6 @@ var Transform = /** @class */ (function () {
             }
         }
     };
-    Transform.prototype.updateFlipActiveObj = function (panRegion) {
-        var parent = this.parent;
-        var actPoint = parent.activeObj.activePoint;
-        var _a = parent.lowerCanvas, width = _a.width, height = _a.height;
-        var endX;
-        var endY;
-        if (panRegion === 'horizontal') {
-            endX = actPoint.startX > width / 2 ? (width / 2) - (actPoint.startX - (width / 2)) :
-                (width / 2) + ((width / 2) - actPoint.startX);
-            actPoint.startX = endX - actPoint.width;
-            actPoint.endX = endX;
-        }
-        else if (panRegion === 'vertical') {
-            endY = actPoint.startX > width / 2 ? (height / 2) - (actPoint.startY - (height / 2)) :
-                (height / 2) + ((height / 2) - actPoint.startY);
-            actPoint.startY = endY - actPoint.height;
-            actPoint.endY = endY;
-        }
-        else if (panRegion === 'verticalHorizontal' || panRegion === 'horizontalVertical') {
-            endX = actPoint.startX > width / 2 ? (width / 2) - (actPoint.startX - (width / 2)) :
-                (width / 2) + ((width / 2) - actPoint.startX);
-            endY = actPoint.startX > width / 2 ? (height / 2) - (actPoint.startY - (height / 2)) :
-                (height / 2) + ((height / 2) - actPoint.startY);
-            actPoint.startX = endX - actPoint.width;
-            actPoint.startY = endY - actPoint.height;
-            actPoint.endX = endX;
-            actPoint.endY = endY;
-        }
-        parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: actPoint,
-                obj: parent.activeObj, isMouseMove: null, x: null, y: null } });
-    };
     Transform.prototype.pan = function (value, x, y) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
@@ -1568,7 +1548,7 @@ var Transform = /** @class */ (function () {
                 (hdWrapper && !hdWrapper.parentElement.classList.contains('e-hide')))) {
                 ctWrapper.classList.add('e-hide');
                 if (!isCropSelection) {
-                    parent.okBtn();
+                    parent.okBtn(null, true);
                 }
                 parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
                 parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
@@ -1689,8 +1669,8 @@ var Transform = /** @class */ (function () {
                 parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
                     value: { type: 'reverse', isPreventDestination: null, isRotatePan: null } });
             }
-            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 } });
             parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
             parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
             if (parent.isCircleCrop) {
@@ -1718,8 +1698,8 @@ var Transform = /** @class */ (function () {
                     this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
                     parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
                     parent.objColl.push(activeObj);
-                    parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: true } });
-                    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 } });
                     activeObj = extend({}, parent.objColl[parent.objColl.length - 1], null, true);
                     parent.objColl.pop();
                     this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
@@ -1960,8 +1940,8 @@ var Transform = /** @class */ (function () {
         parent.objColl = extend([], obj1['prevObj']['objColl'], [], true);
         parent.pointColl = extend([], obj1['prevObj']['pointColl'], [], true);
         parent.transform.straighten = 0;
-        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 } });
         if (parent.transform.straighten === 0 && !this.isPreventSelect) {
             parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
         }
@@ -2173,6 +2153,7 @@ var Transform = /** @class */ (function () {
                 aspectRatioWidthValue = parseFloat(aspectRatioWidth.value === '' ? aspectRatioWidth.placeholder : aspectRatioWidth.value);
                 if (aspectRatioHeight) {
                     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);
                     getComponent(aspectRatioHeight, 'numerictextbox').value = height;
                     aspectRatioHeight.value = height.toString() + ' px';
@@ -2181,6 +2162,7 @@ var Transform = /** @class */ (function () {
                         var aspectRatioHeightValue = parseFloat(aspectRatioHeight.value === '' ? aspectRatioHeight.placeholder :
                             aspectRatioHeight.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);
                         getComponent(aspectRatioWidth, 'numerictextbox').value = width;
                         aspectRatioWidth.value = width.toString() + ' px';
@@ -2189,12 +2171,14 @@ var Transform = /** @class */ (function () {
                 }
                 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;
@@ -2214,7 +2198,7 @@ var Transform = /** @class */ (function () {
                 parent.notify('transform', { prop: 'setPreventDownScale', value: { bool: true } });
                 parent.notify('transform', { prop: 'resizeCrop', value: { width: args.width, height: args.height } });
                 parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: true } });
-                parent.okBtn();
+                parent.okBtn(null, true);
                 parent.notify('undo-redo', { prop: 'setPreventUR', value: { bool: false } });
                 parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                     height: parent.img.srcHeight };
@@ -2237,7 +2221,7 @@ var Transform = /** @class */ (function () {
                 value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
         }
         parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
-        parent.setStraighten(degree, true);
+        parent.setStraighten(degree);
         parent.okBtn();
     };
     return Transform;

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

@@ -42,5 +42,7 @@ export declare class UndoRedo {
     private updateUrObj;
     private updateUndoRedo;
     private getZeroZoomObjPointValue;
+    private updateObjColl;
     private applyImgTranform;
+    private updateUndoRedoStack;
 }

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

@@ -42,7 +42,7 @@ var UndoRedo = /** @class */ (function () {
                 this.refreshUrc(args.value['bool']);
                 break;
             case 'updateCurrUrc':
-                this.updateCurrUrc(args.value['type']);
+                this.updateCurrUrc(args.value['type'], args.value['isCancel']);
                 break;
             case 'call-undo':
                 this.callUndo();
@@ -77,6 +77,14 @@ var UndoRedo = /** @class */ (function () {
             case 'setPreventUR':
                 this.isPreventing = args.value['bool'];
                 break;
+            case 'updateUndoRedoStack':
+                if (args.value && args.value['isPenDraw']) {
+                    this.updateUndoRedoStack(args.value['isPenDraw']);
+                }
+                else {
+                    this.updateUndoRedoStack();
+                }
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -109,9 +117,9 @@ var UndoRedo = /** @class */ (function () {
         parent.isUndoRedo = parent.currObjType.isUndoAction = false;
         parent.notify('toolbar', { prop: 'enable-disable-btns' });
     };
-    UndoRedo.prototype.updateCurrUrc = function (type) {
+    UndoRedo.prototype.updateCurrUrc = function (type, isCancel) {
         var parent = this.parent;
-        if (parent.isResize || this.isPreventing) {
+        if (parent.isResize || this.isPreventing || parent.noPushUndo) {
             return;
         }
         parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
@@ -167,9 +175,22 @@ var UndoRedo = /** @class */ (function () {
             this.tempUndoRedoColl = [];
             this.tempUndoRedoStep = 0;
         }
+        var lastObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1];
+        var lastPrevObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 2];
         if (this.appliedUndoRedoColl.length > 16) {
             this.appliedUndoRedoColl.splice(0, 1);
         }
+        else if (!isCancel && lastObj && lastPrevObj) {
+            if ((((lastObj.operation === 'shapeTransform' && lastPrevObj.operation === 'shapeTransform') ||
+                (lastObj.operation === 'shapeInsert' && lastPrevObj.operation === 'shapeInsert')) &&
+                JSON.stringify(lastObj.currentObjColl) === JSON.stringify(lastPrevObj.currentObjColl)) ||
+                (lastObj.operation === 'freehand-draw' && lastPrevObj.operation === 'freehand-draw' &&
+                    JSON.stringify(lastObj.currentPointColl) === JSON.stringify(lastPrevObj.currentPointColl)) ||
+                (lastObj.operation === 'freehanddrawCustomized' && lastPrevObj.operation === 'freehanddrawCustomized' &&
+                    JSON.stringify(lastObj.currentPointColl) === JSON.stringify(lastPrevObj.currentPointColl))) {
+                this.appliedUndoRedoColl.splice(this.appliedUndoRedoColl.length - 1, 1);
+            }
+        }
         this.undoRedoColl = [];
         this.undoRedoColl = extend([], this.appliedUndoRedoColl, [], true);
         if (type === 'ok') {
@@ -301,21 +322,21 @@ var UndoRedo = /** @class */ (function () {
                     case 'sharpen':
                     case 'imageRotate':
                     case 'shapeInsert':
-                        this.shapeTransform(obj.previousObjColl);
+                        this.shapeTransform(obj.previousObjColl, obj.previousPointColl);
                         break;
                     case 'freehanddraw':
                     case 'freehand-draw':
                         this.updateFreehandDraw(obj.previousPointColl, obj.previousSelPointColl);
                         break;
                     case 'freehanddrawCustomized':
-                        this.updateFreehandDrawCustomized(obj.previousPointColl);
+                        this.updateFreehandDrawCustomized(obj.previousObjColl, obj.previousPointColl);
                         break;
                     case 'deleteFreehandDrawing':
                     case 'deleteObj':
                         this.updateDelete(obj.operation, obj.previousObjColl, obj.previousPointColl, obj.previousSelPointColl);
                         break;
                     case 'textAreaCustomization':
-                        this.shapeTransform(obj.previousObjColl);
+                        this.shapeTransform(obj.previousObjColl, obj.previousPointColl);
                         this.updateTextAreaCustomization(activeObj, obj.previousObjColl);
                         break;
                     case 'text':
@@ -431,21 +452,21 @@ var UndoRedo = /** @class */ (function () {
                     case 'sharpen':
                     case 'imageRotate':
                     case 'shapeInsert':
-                        this.shapeTransform(obj.currentObjColl);
+                        this.shapeTransform(obj.currentObjColl, obj.currentPointColl);
                         break;
                     case 'freehanddraw':
                     case 'freehand-draw':
                         this.updateFreehandDraw(obj.currentPointColl, obj.currentSelPointColl);
                         break;
                     case 'freehanddrawCustomized':
-                        this.updateFreehandDrawCustomized(obj.currentPointColl);
+                        this.updateFreehandDrawCustomized(obj.currentObjColl, obj.currentPointColl);
                         break;
                     case 'deleteFreehandDrawing':
                     case 'deleteObj':
                         this.updateDelete(obj.operation, obj.currentObjColl, obj.currentPointColl, obj.currentSelPointColl);
                         break;
                     case 'textAreaCustomization':
-                        this.shapeTransform(obj.currentObjColl);
+                        this.shapeTransform(obj.currentObjColl, obj.currentPointColl);
                         this.updateTextAreaCustomization(activeObj, obj.currentObjColl);
                         break;
                     case 'text':
@@ -478,8 +499,8 @@ var UndoRedo = /** @class */ (function () {
                             value: { obj: { selPointColl: extend([], obj.currentSelPointColl, [], true) } } });
                         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 = obj.currentObj.filter;
                         parent.prevStraightenedDegree = parent.transform.straighten;
                         parent.activeObj = activeObj;
@@ -515,7 +536,7 @@ var UndoRedo = /** @class */ (function () {
     };
     UndoRedo.prototype.imageFlip = function (type, objColl) {
         var parent = this.parent;
-        this.shapeTransform(objColl);
+        this.shapeTransform(objColl, null);
         parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
         var _a = parent.activeObj, shape = _a.shape, isHorImageFlip = _a.isHorImageFlip, isVerImageFlip = _a.isVerImageFlip;
         parent.objColl.pop();
@@ -558,10 +579,15 @@ var UndoRedo = /** @class */ (function () {
             parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
         }
     };
-    UndoRedo.prototype.shapeTransform = function (objColl) {
+    UndoRedo.prototype.shapeTransform = function (objColl, pointColl) {
         var parent = this.parent;
         parent.objColl = extend([], objColl, [], true);
-        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+        if (pointColl) {
+            parent.pointColl = extend([], pointColl, [], true);
+            parent.freehandCounter = parent.pointColl.length;
+        }
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         parent.isUndoRedo = true;
@@ -574,16 +600,19 @@ var UndoRedo = /** @class */ (function () {
         parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
             value: { obj: { selPointColl: selPointColl } } });
         parent.freehandCounter = parent.pointColl.length;
-        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.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         parent.isUndoRedo = true;
         parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
     };
-    UndoRedo.prototype.updateFreehandDrawCustomized = function (pointColl) {
+    UndoRedo.prototype.updateFreehandDrawCustomized = function (objColl, pointColl) {
         var parent = this.parent;
+        parent.objColl = extend([], objColl, [], true);
         parent.pointColl = pointColl;
-        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.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         parent.isUndoRedo = true;
@@ -596,11 +625,13 @@ var UndoRedo = /** @class */ (function () {
             parent.freehandCounter = parent.pointColl.length;
             parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                 value: { obj: { selPointColl: selPointColl } } });
-            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 } });
         }
         else if (operation === 'deleteObj') {
             parent.objColl = objColl;
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
         }
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -610,7 +641,8 @@ var UndoRedo = /** @class */ (function () {
     UndoRedo.prototype.updateTextAreaCustomization = function (activeObj, objColl) {
         var parent = this.parent;
         parent.objColl = extend([], objColl, [], true);
-        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: true } });
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         parent.isUndoRedo = true;
         parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
@@ -660,7 +692,8 @@ var UndoRedo = /** @class */ (function () {
             parent.activeObj = extend({}, this.tempActObj, {}, true);
         }
         parent.objColl = extend([], objColl, [], true);
-        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: true } });
+        parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+            value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: true } });
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         parent.isUndoRedo = true;
@@ -709,8 +742,8 @@ var UndoRedo = /** @class */ (function () {
             value: { obj: { selPointColl: extend([], obj.previousSelPointColl, [], true) } } });
         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 = obj.previousObj.filter;
         parent.activeObj = activeObj;
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -812,7 +845,7 @@ var UndoRedo = /** @class */ (function () {
     UndoRedo.prototype.updateUrObj = function (objColl, operation) {
         var parent = this.parent;
         if (parent.allowUndoRedo) {
-            if (parent.currObjType.isUndoAction) {
+            if (parent.currObjType.isUndoAction && !parent.isShapeDrawing) {
                 this.refreshUrc(true);
             }
             if (isNullOrUndefined(parent.activeObj.imageRatio)) {
@@ -869,6 +902,7 @@ var UndoRedo = /** @class */ (function () {
     };
     UndoRedo.prototype.getZeroZoomObjPointValue = function (obj, point) {
         var parent = this.parent;
+        this.updateObjColl();
         var object = { currObj: {} };
         parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
         var currentObj = object['currObj'];
@@ -903,8 +937,8 @@ var UndoRedo = /** @class */ (function () {
             var isCropTab = parent.isCropTab;
             if (parent.transform.zoomFactor !== 0) {
                 parent.isUndoRedo = true;
-                parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: true } });
-                parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: true } });
+                parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
+                    value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: true } });
                 parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
                 parent.isCropTab = true;
                 var zoomSettings = extend({}, parent.zoomSettings, null, true);
@@ -947,9 +981,8 @@ var UndoRedo = /** @class */ (function () {
                 this.lowerContext.filter = 'none';
                 parent.transform.straighten = 0;
                 this.applyImgTranform();
-                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 } });
                 parent.notify('freehand-draw', { prop: 'updateFHDCurPts', onPropertyChange: false });
                 this.lowerContext.filter = currentObj.filter;
                 if (parent.transform.degree !== 0) {
@@ -965,6 +998,20 @@ var UndoRedo = /** @class */ (function () {
         }
         return { obj: getZeroZoomObjColl, point: getZeroZoomPointColl };
     };
+    UndoRedo.prototype.updateObjColl = function () {
+        var parent = this.parent;
+        for (var i = 0; i < parent.objColl.length; i++) {
+            var obj = parent.objColl[i];
+            if (obj.shape === 'line' || obj.shape === 'arrow') {
+                if (obj.activePoint.width < 0) {
+                    obj.activePoint.width = Math.abs(obj.activePoint.width);
+                }
+                if (obj.activePoint.height < 0) {
+                    obj.activePoint.height = Math.abs(obj.activePoint.height);
+                }
+            }
+        }
+    };
     UndoRedo.prototype.applyImgTranform = function () {
         var parent = this.parent;
         var obj = extend({}, parent.activeObj, {}, true);
@@ -979,6 +1026,44 @@ var UndoRedo = /** @class */ (function () {
         }
         parent.activeObj = obj;
     };
+    UndoRedo.prototype.updateUndoRedoStack = function (isPenDraw) {
+        var parent = this.parent;
+        if ((parent.activeObj.currIndex && parent.activeObj.activePoint.width !== 0 ||
+            parent.activeObj.activePoint.height !== 0 || (parent.activeObj.pointColl &&
+            parent.activeObj.pointColl.length > 0)) || isPenDraw) {
+            var isTextArea = parent.textArea.style.display === 'none' ? false : true;
+            var temp = parent.noPushUndo;
+            parent.noPushUndo = false;
+            parent.isUndoRedoStack = true;
+            if (isPenDraw) {
+                var tempTogglePen = parent.togglePen;
+                var obj = { freehandDrawSelectedId: null };
+                parent.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: { obj: obj } });
+                parent.okBtn();
+                parent.noPushUndo = temp;
+                if (obj['freehandDrawSelectedId']) {
+                    parent.selectShape(obj['freehandDrawSelectedId']);
+                }
+                else {
+                    parent.freeHandDraw(true);
+                }
+                parent.togglePen = tempTogglePen;
+            }
+            else if (parent.activeObj.currIndex) {
+                var shapeId = parent.activeObj.currIndex;
+                parent.okBtn();
+                parent.noPushUndo = temp;
+                parent.selectShape(shapeId);
+                if (parent.drawingShape) {
+                    parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: parent.drawingShape.toLowerCase() } });
+                }
+                if (isTextArea) {
+                    parent.enableTextEditing();
+                }
+            }
+            parent.isUndoRedoStack = false;
+        }
+    };
     return UndoRedo;
 }());
 export { UndoRedo };

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

@@ -91,7 +91,11 @@ export declare enum Theme {
     /** The dark variant of the Fabric theme. */
     FabricDark = "FabricDark",
     /** The high contrast theme. */
-    Highcontrast = "Highcontrast"
+    Highcontrast = "Highcontrast",
+    /** The Fluent 2.0 UI theme. */
+    Fluent2 = "Fluent2",
+    /** The dark variant of the Fluent 2.0 UI theme. */
+    Fluent2Dark = "Fluent2Dark"
 }
 /**
  * An enum representing the available toolbar commands in the image editor.

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

@@ -97,6 +97,10 @@ export var Theme;
     Theme["FabricDark"] = "FabricDark";
     /** The high contrast theme. */
     Theme["Highcontrast"] = "Highcontrast";
+    /** The Fluent 2.0 UI theme. */
+    Theme["Fluent2"] = "Fluent2";
+    /** The dark variant of the Fluent 2.0 UI theme. */
+    Theme["Fluent2Dark"] = "Fluent2Dark";
 })(Theme || (Theme = {}));
 /**
  * An enum representing the available toolbar commands in the image editor.