@syncfusion/ej2-image-editor 22.1.34 → 22.1.37

package/dist/es6/ej2-image-editor.es5.js

@@ -9,6 +9,7 @@ var Crop = /** @__PURE__ @class */ (function () {
         this.croppedDegree = 0; // Specifies the degree when crop is performed
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 }; // To redraw old image when navigate to crop tab
         this.tempFlipPanPoint = { x: 0, y: 0 };
+        this.isPreventScaling = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -71,6 +72,9 @@ var Crop = /** @__PURE__ @class */ (function () {
                     this.tempFlipPanPoint.y += args.value['point'].y;
                 }
                 break;
+            case 'getPreventScaling':
+                args.value['obj']['bool'] = this.isPreventScaling;
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -93,6 +97,7 @@ var Crop = /** @__PURE__ @class */ (function () {
         this.croppedDegree = 0;
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 };
         this.tempFlipPanPoint = { x: 0, y: 0 };
+        this.isPreventScaling = false;
     };
     Crop.prototype.cropImg = function (isRotateCrop) {
         var parent = this.parent;
@@ -710,7 +715,7 @@ var Crop = /** @__PURE__ @class */ (function () {
             }
             var transitionArgs = { cancel: false, startPoint: { x: parent.activeObj.activePoint.startX,
                     y: parent.activeObj.activePoint.startY }, endPoint: { x: parent.activeObj.activePoint.endX,
-                    y: parent.activeObj.activePoint.endY } };
+                    y: parent.activeObj.activePoint.endY }, preventScaling: false };
             if (!object_1['isCropToolbar'] && isBlazor() && parent.events && parent.events.cropping.hasDelegate === true) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 parent.dotNetRef.invokeMethodAsync('CropEventAsync', 'OnCrop', transitionArgs).then(function (args) {
@@ -736,6 +741,12 @@ var Crop = /** @__PURE__ @class */ (function () {
                 obj.isCrop = true;
                 var prevCropObj = extend({}, parent.cropObj, {}, true);
                 var prevObj = extend({}, this.prevCropCurrObj, {}, true);
+                if (transitionArgs.preventScaling) {
+                    this.isPreventScaling = true;
+                }
+                else {
+                    this.isPreventScaling = false;
+                }
                 this.cropImg();
                 parent.transform.zoomFactor = 0;
                 parent.zoomSettings.zoomFactor = 1;
@@ -994,10 +1005,6 @@ var Draw = /** @__PURE__ @class */ (function () {
             case 'setPrevActObj':
                 this.prevActObj = args.value['prevActObj'];
                 break;
-            case 'getZoomCrop':
-                args.value['obj']['width'] = this.zoomCrop.width;
-                args.value['obj']['height'] = this.zoomCrop.height;
-                break;
             case 'setZoomCropWidth':
                 this.zoomCrop.width = args.value['width'];
                 this.zoomCrop.height = args.value['height'];
@@ -1026,6 +1033,9 @@ var Draw = /** @__PURE__ @class */ (function () {
             case 'setArrowDimension':
                 this.arrowDimension = args.value['arrowDimension'];
                 break;
+            case 'moveToSelectionRange':
+                this.moveToSelectionRange(args.value['type'], args.value['activeObj']);
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -1313,8 +1323,10 @@ var Draw = /** @__PURE__ @class */ (function () {
     };
     Draw.prototype.adjToCenter = function () {
         var parent = this.parent;
-        var diffX = ((parent.lowerCanvas.width) / 2) - (parent.activeObj.activePoint.endX - parent.activeObj.activePoint.width / 2);
-        var diffY = ((parent.lowerCanvas.height) / 2) - (parent.activeObj.activePoint.endY - parent.activeObj.activePoint.height / 2);
+        var diffX = ((parent.lowerCanvas.width) / 2) - (parent.activeObj.activePoint.endX -
+            parent.activeObj.activePoint.width / 2);
+        var diffY = ((parent.lowerCanvas.height) / 2) - (parent.activeObj.activePoint.endY -
+            parent.activeObj.activePoint.height / 2);
         parent.activeObj.activePoint.startX += diffX;
         parent.activeObj.activePoint.endX += diffX;
         parent.activeObj.activePoint.startY += diffY;
@@ -2761,11 +2773,22 @@ var Draw = /** @__PURE__ @class */ (function () {
             // proxy.reset();
             // proxy.parent.baseImg.src = proxy.baseImgSrc;
             proxy.isErrorImage = true;
+            proxy.errorLoading();
         };
     };
+    Draw.prototype.errorLoading = function () {
+        var parent = this.parent;
+        var fileOpened = { fileName: null, fileType: null, isValidImage: false };
+        if (isBlazor() && parent.events && parent.events.fileOpened.hasDelegate === true) {
+            parent.dotNetRef.invokeMethodAsync('FileOpenEventAsync', 'FileOpened', fileOpened);
+        }
+        else {
+            parent.trigger('fileOpened', fileOpened);
+        }
+    };
     Draw.prototype.updateCanvas = function () {
         var parent = this.parent;
-        var fileOpened = { fileName: this.fileName, fileType: this.fileType };
+        var fileOpened = { fileName: this.fileName, fileType: this.fileType, isValidImage: true };
         parent.img.srcWidth = parent.baseImg.width;
         parent.img.srcHeight = parent.baseImg.height;
         var obj = { width: 0, height: 0 };
@@ -2944,10 +2967,6 @@ var Draw = /** @__PURE__ @class */ (function () {
         else if (isCropSelection) {
             this.cancelSelection();
         }
-        else if ((parent.transform.zoomFactor !== this.tempZoomFactor) || isCropSelection &&
-            isNullOrUndefined(parent.currSelectionPoint)) {
-            this.cancelZoom();
-        }
         else {
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -3089,114 +3108,6 @@ var Draw = /** @__PURE__ @class */ (function () {
             }
         }
     };
-    Draw.prototype.cancelZoom = function () {
-        var parent = this.parent;
-        var length = parent.transform.cropZoomFactor - this.tempZoomFactor;
-        parent.transform.zoomFactor = parent.transform.cropZoomFactor;
-        if (isNullOrUndefined(parent.cropObj.activeObj.shape)) {
-            if ((parent.transform.degree === 0 && parent.panPoint.totalPannedPoint.x === 0 && parent.panPoint.totalPannedPoint.y === 0)
-                || (parent.transform.degree !== 0 && parent.panPoint.totalPannedInternalPoint.x === 0 &&
-                    parent.panPoint.totalPannedInternalPoint.y === 0 && parent.panPoint.totalPannedClientPoint.x === 0 &&
-                    parent.panPoint.totalPannedClientPoint.y === 0)) {
-                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                if (length > 0) {
-                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: { zoomFactor: -length, zoomPoint: null } });
-                }
-                else {
-                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                        value: { zoomFactor: Math.abs(length), zoomPoint: null } });
-                }
-                parent.transform.cropZoomFactor = this.tempZoomFactor;
-                parent.currObjType.isCustomCrop = false;
-                parent.upperCanvas.style.cursor = parent.cursor = 'default';
-                parent.currObjType.isCustomCrop = false;
-                this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
-                var eventargs = { type: 'main', isApplyBtn: null, isCropping: false, isZooming: null };
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: eventargs });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'imageLoaded');
-                }
-                return;
-            }
-        }
-        if (isNullOrUndefined(parent.cropObj.activeObj.shape)) {
-            if (parent.transform.degree === 0) {
-                var activeObj = extend({}, parent.activeObj, {});
-                parent.img.destLeft += (-parent.panPoint.totalPannedPoint.x);
-                parent.img.destTop += (-parent.panPoint.totalPannedPoint.y);
-                parent.notify('transform', { prop: 'drawPannImage', onPropertyChange: false,
-                    value: { point: { x: -parent.panPoint.totalPannedPoint.x, y: -parent.panPoint.totalPannedPoint.y } } });
-                this.updateFlipPan(activeObj);
-                parent.panPoint.totalPannedPoint = { x: 0, y: 0 };
-            }
-            else {
-                parent.panPoint.totalPannedClientPoint = { x: -parent.panPoint.totalPannedClientPoint.x,
-                    y: -parent.panPoint.totalPannedClientPoint.y };
-                parent.panPoint.totalPannedInternalPoint = { x: -parent.panPoint.totalPannedInternalPoint.x,
-                    y: -parent.panPoint.totalPannedInternalPoint.y };
-                parent.notify('transform', { prop: 'rotatePan', onPropertyChange: false,
-                    value: { isCropSelection: true, isDefaultZoom: null } });
-                parent.panPoint.totalPannedClientPoint = { x: 0, y: 0 };
-                parent.panPoint.totalPannedInternalPoint = { x: 0, y: 0 };
-                parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
-            }
-            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-            if (length > 0) {
-                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                    value: { zoomFactor: -length, zoomPoint: null } });
-            }
-            else {
-                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                    value: { zoomFactor: Math.abs(length), zoomPoint: null } });
-            }
-            parent.transform.cropZoomFactor = this.tempZoomFactor;
-        }
-        else {
-            this.isCancelAction = true;
-            parent.objColl = [];
-            parent.pointColl = [];
-            var freehandCounter = parent.freehandCounter;
-            parent.freehandCounter = 0;
-            var object = { selPointColl: null };
-            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                value: { obj: object } });
-            var cropSelPointColl = object['selPointColl'];
-            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                value: { obj: { selPointColl: [] } } });
-            var cropObj = extend({}, parent.cropObj, {});
-            var afterCropActions = extend([], parent.afterCropActions, {}, true);
-            this.setCurrentObj();
-            parent.notify('crop', { prop: 'cropImg', onPropertyChange: false, value: { isRotateCrop: null } });
-            parent.cropObj = cropObj;
-            parent.afterCropActions = afterCropActions;
-            parent.objColl = extend([], this.cancelObjColl, [], true);
-            parent.pointColl = extend([], this.cancelPointColl, [], true);
-            parent.freehandCounter = freehandCounter;
-            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                value: { obj: { selPointColl: cropSelPointColl } } });
-            parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-                value: { context: this.lowerContext, points: null } });
-            this.clearOuterCanvas(this.lowerContext);
-            if (parent.isCircleCrop) {
-                parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
-                    value: { context: this.lowerContext, isSave: null, isFlip: null } });
-            }
-            this.isCancelAction = false;
-        }
-        parent.transform.zoomFactor = parent.transform.defaultZoomFactor;
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
-        }
-        else {
-            parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
-        }
-    };
     Draw.prototype.updateFlipPan = function (tempSelectionObj) {
         var parent = this.parent;
         if (parent.transform.currFlipState !== '') {
@@ -3858,13 +3769,8 @@ var Draw = /** @__PURE__ @class */ (function () {
             parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj } });
             if (obj['defToolbarItems'].length === 0 &&
                 (isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
-                if (isNullOrUndefined(parent.toolbarTemplate)) {
-                    parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: 0 } });
-                }
-                else if (parent.element.querySelector('#' + parent.element.id + '_toolbarArea')) {
-                    var height = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
-                    parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
-                }
+                var height = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+                parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
             }
         }
         else {
@@ -4021,6 +3927,7 @@ var Draw = /** @__PURE__ @class */ (function () {
             var fileData = filesData;
             var fileExtension = fileData.name && fileData.name.split('.')[1].toLowerCase();
             if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
+                this.errorLoading();
                 return;
             }
             showSpinner(parent.element);
@@ -4068,6 +3975,121 @@ var Draw = /** @__PURE__ @class */ (function () {
         this.imageOnLoad(url.toString());
         inputElement.value = '';
     };
+    Draw.prototype.moveToSelectionRange = function (type, activeObj) {
+        var parent = this.parent;
+        if (parent.activeObj.shape) {
+            if (type === 'rotateleft' || type === 'rotateright') {
+                var zoomFactor = parent.transform.zoomFactor;
+                parent.objColl.push(parent.activeObj);
+                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+                    if (parent.objColl[parent.objColl.length - 1].activePoint.width < activeObj.activePoint.height) {
+                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                            if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
+                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (!isNullOrUndefined(zoomFactor)) {
+                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                        value: { zoomFactor: -0.1, zoomPoint: null } });
+                                }
+                                break;
+                            }
+                            zoomFactor += 0.1;
+                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                        }
+                    }
+                    else {
+                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                            if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
+                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (!isNullOrUndefined(zoomFactor)) {
+                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                        value: { zoomFactor: 0.1, zoomPoint: null } });
+                                }
+                                break;
+                            }
+                            zoomFactor -= .1;
+                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                        }
+                    }
+                }
+                else {
+                    if (parent.objColl[parent.objColl.length - 1].activePoint.height < activeObj.activePoint.width) {
+                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                            if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
+                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (!isNullOrUndefined(zoomFactor)) {
+                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                        value: { zoomFactor: -0.1, zoomPoint: null } });
+                                }
+                                break;
+                            }
+                            zoomFactor += 0.1;
+                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                        }
+                    }
+                    else {
+                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                            if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
+                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                if (!isNullOrUndefined(zoomFactor)) {
+                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                        value: { zoomFactor: 0.1, zoomPoint: null } });
+                                }
+                                break;
+                            }
+                            zoomFactor -= .1;
+                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                        }
+                    }
+                }
+                var panX = (parent.lowerCanvas.clientWidth / 2) - (parent.objColl[parent.objColl.length - 1].activePoint.startX +
+                    (parent.objColl[parent.objColl.length - 1].activePoint.width / 2));
+                var panY = (parent.lowerCanvas.clientHeight / 2) - (parent.objColl[parent.objColl.length - 1].activePoint.startY +
+                    (parent.objColl[parent.objColl.length - 1].activePoint.height / 2));
+                if (parent.transform.degree === 0) {
+                    parent.img.destLeft += panX;
+                    parent.img.destTop += panY;
+                    parent.notify('transform', { prop: 'drawPannImage', value: { point: { x: panX, y: panY } } });
+                }
+                else {
+                    parent.panPoint.currentPannedPoint = { x: panX, y: panY };
+                    parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
+                    parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
+                }
+                parent.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
+                    value: { point: null } });
+                parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1]);
+                parent.objColl.pop();
+                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
+            }
+        }
+    };
+    Draw.prototype.isSelectionBiggerThanCanvas = function (obj) {
+        var isBigger = false;
+        if (obj.activePoint.startX <= this.parent.img.destLeft ||
+            obj.activePoint.startY <= this.parent.img.destTop ||
+            obj.activePoint.endX >= this.parent.img.destLeft + this.parent.img.destWidth ||
+            obj.activePoint.endY >= this.parent.img.destTop + this.parent.img.destHeight) {
+            isBigger = true;
+        }
+        return isBigger;
+    };
+    Draw.prototype.isSelectionOutsideCanvas = function (obj) {
+        var isOutside = false;
+        if ((obj.activePoint.height < this.parent.lowerCanvas.height - this.parent.toolbarHeight) ||
+            (obj.activePoint.width < this.parent.lowerCanvas.width)) {
+            isOutside = true;
+        }
+        return isOutside;
+    };
     return Draw;
 }());
 
@@ -4523,7 +4545,7 @@ var Filter = /** @__PURE__ @class */ (function () {
     };
     Filter.prototype.updatePrivateVariables = function () {
         var parent = this.parent;
-        if (!isNullOrUndefined(parent.lowerCanvas)) {
+        if (parent.lowerCanvas) {
             this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
     };
@@ -5833,7 +5855,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
     FreehandDrawing.prototype.updateFHDCurPts = function () {
         var parent = this.parent;
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
@@ -5861,7 +5883,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         }
         // Update rotation points for each point for cursor styles
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
@@ -5917,7 +5939,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         }
         // Update flip value for each points for cursor styles
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 if (this.selPointColl[n].shapeFlip !== parent.transform.currFlipState) {
                     this.selPoints = extend([], this.selPointColl[n].points, []);
                     this.pointCounter = 0;
@@ -5964,7 +5986,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         }
         // Update flip value for each points for cursor styles
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 if (this.selPointColl[n].shapeFlip !== parent.transform.currFlipState) {
                     this.selPoints = extend([], this.selPointColl[n].points, []);
                     this.pointCounter = 0;
@@ -6015,7 +6037,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
             }
         }
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
@@ -6050,7 +6072,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         }
         // Updating each points for cursor styles for panning
         for (var n = 0; n < parent.freehandCounter; n++) {
-            if (!isNullOrUndefined(this.selPointColl[n])) {
+            if (this.selPointColl[n]) {
                 this.selPoints = extend([], this.selPointColl[n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
@@ -6113,13 +6135,13 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
     FreehandDrawing.prototype.isFHDIdx = function (index, obj) {
         var isIndex = false;
         for (var i = 0; i < this.parent.freehandCounter; i++) {
-            if (!isNullOrUndefined(this.parent.pointColl[i].id) &&
+            if (this.parent.pointColl[i].id &&
                 parseInt(this.parent.pointColl[i].id.split('_')[1], 10) - 1 === index) {
                 isIndex = true;
                 break;
             }
         }
-        if (!isNullOrUndefined(obj)) {
+        if (obj) {
             obj['isIndex'] = isIndex;
         }
         return isIndex;
@@ -6128,7 +6150,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         for (var n = 0; n < parent.freehandCounter; n++) {
             var obj = { selPointColl: extend([], this.selPointColl) };
-            if (!isNullOrUndefined(obj['selPointColl'][n])) {
+            if (obj['selPointColl'][n]) {
                 this.selPoints = extend([], obj['selPointColl'][n].points, []);
                 this.pointCounter = 0;
                 var len = this.selPoints.length;
@@ -6275,9 +6297,6 @@ var Selection = /** @__PURE__ @class */ (function () {
             case 'handleScroll':
                 this.handleScroll(args.value['e']);
                 break;
-            case 'adjustToScreen':
-                this.adjustToScreen();
-                break;
             case 'textKeyDown':
                 setTimeout(this.textKeyDown.bind(this), 1, args.value['e']);
                 break;
@@ -6369,9 +6388,24 @@ var Selection = /** @__PURE__ @class */ (function () {
             case 'getTransRotationPoint':
                 this.getTransRotationPoint(args.value['obj'], args.value['object']);
                 break;
+            case 'adjustNEPoints':
+                this.adjustNEPoints(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle']);
+                break;
+            case 'adjustRotationPoints':
+                this.adjustRotationPoints(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle']);
+                break;
+            case 'getResizeDirection':
+                this.getResizeDirection(args.value['rectangle'], args.value['x'], args.value['y'], args.value['angle']);
+                break;
+            case 'setResizedElement':
+                this.resizedElement = args.value['value'];
+                break;
             case 'reset':
                 this.reset();
                 break;
+            case 'unWireEvent':
+                this.unwireEvent();
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -6379,10 +6413,10 @@ var Selection = /** @__PURE__ @class */ (function () {
     };
     Selection.prototype.updatePrivateVariables = function () {
         var parent = this.parent;
-        if (!isNullOrUndefined(parent.lowerCanvas)) {
+        if (parent.lowerCanvas) {
             this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
-        if (!isNullOrUndefined(parent.upperCanvas)) {
+        if (parent.upperCanvas) {
             this.upperContext = parent.upperCanvas.getContext('2d');
         }
     };
@@ -6493,7 +6527,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                 cursor = 'move';
             }
         }
-        else if (!isNullOrUndefined(rotationCirclePoint) && !isApply &&
+        else if (rotationCirclePoint && !isApply &&
             x >= (rotationCirclePoint.x - (actObj.bottomCenterCircle.radius + 2)) &&
             x <= rotationCirclePoint.x + (actObj.bottomCenterCircle.radius + 2) &&
             y >= rotationCirclePoint.y - (actObj.bottomCenterCircle.radius + 2) &&
@@ -6595,7 +6629,7 @@ var Selection = /** @__PURE__ @class */ (function () {
             }
         }
         if ((parent.cursor === 'default' || parent.cursor === 'grab')
-            && !isNullOrUndefined(parent.pointColl[0]) && (parent.cursor !== 'grab' || !isCropSelection)
+            && parent.pointColl[0] && (parent.cursor !== 'grab' || !isCropSelection)
             && !parent.currObjType.isDragging && !parent.currObjType.isResize) {
             this.setCursorForFreehandDrawing(x, y, upperCanvas);
         }
@@ -6713,7 +6747,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                 (actObj.bottomCenterCircle.radius + 2))) {
             upperCanvas.style.cursor = parent.cursor = 'se-resize';
         }
-        else if (!isNullOrUndefined(actObj.rotationCirclePointColl) &&
+        else if (actObj.rotationCirclePointColl &&
             x >= (actObj.rotationCirclePointColl.x - (actObj.bottomCenterCircle.radius + 2)) &&
             x <= actObj.rotationCirclePointColl.x + (actObj.bottomCenterCircle.radius + 2) &&
             y >= actObj.rotationCirclePointColl.y - (actObj.bottomCenterCircle.radius + 2) &&
@@ -6781,7 +6815,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         if ((length >= 92 && length <= 182) || (length >= -178 && length <= -88)) {
             var cursorMap = { 'nw-resize': 'ne-resize', 'n-resize': 's-resize',
                 'ne-resize': 'nw-resize', 'w-resize': 'e-resize', 'e-resize': 'w-resize',
-                'sw-resize': 'se-resize', 's-resize': 'n-resize', 'se-resize': 'sw-resize',
+                'sw-resize': 'se-resize', 's-resize': 'n-resize', 'se-resize': 'sw-resize'
             };
             if (parent.cursor in cursorMap) {
                 parent.cursor = cursorMap[parent.cursor];
@@ -6926,7 +6960,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                     else if (!this.isFhdEditing || parent.pointColl[n].isSelected) {
                         if (this.isFhdPoint || this.isFhdEditing) {
                             upperContext.clearRect(0, 0, upperCanvas.width, upperCanvas.height);
-                            if (!isNullOrUndefined(parent.activeObj.shape) && textArea.style.display === 'none') {
+                            if (parent.activeObj.shape && textArea.style.display === 'none') {
                                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
                             }
                         }
@@ -7202,7 +7236,7 @@ var Selection = /** @__PURE__ @class */ (function () {
             if (splitWords !== undefined && splitWords[0] === 'crop') {
                 this.isCropSelection = true;
             }
-            if (!this.isCropSelection && this.parent.eventType !== 'resize' && isBlazor() && !isNullOrUndefined(parent.events) && this.parent.events.onShapeResizeStart.hasDelegate === true) {
+            if (!this.isCropSelection && this.parent.eventType !== 'resize' && isBlazor() && parent.events && this.parent.events.onShapeResizeStart.hasDelegate === true) {
                 shapeResizingArgs.action = 'resize-start';
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShapeResizeStart', shapeResizingArgs).then(function (shapeResizingArgs) {
@@ -8413,7 +8447,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                     isResize = true;
                     this.dragElement = parent.upperCanvas.style.cursor;
                 }
-                else if (!isNullOrUndefined(rotationCirclePoint) &&
+                else if (rotationCirclePoint &&
                     x >= rotationCirclePoint.x - (actObj.topLeftCircle.radius * 2) &&
                     x <= rotationCirclePoint.x + (actObj.topLeftCircle.radius * 2) &&
                     y >= rotationCirclePoint.y - (actObj.topLeftCircle.radius * 2) &&
@@ -8724,7 +8758,7 @@ var Selection = /** @__PURE__ @class */ (function () {
             this.dragCanvas = parent.togglePan = true;
         }
         var imageEditorClickEventArgs = { point: this.setXYPoints(e) };
-        if (isBlazor() && !isNullOrUndefined(parent.events) && parent.events.clicked.hasDelegate === true) {
+        if (isBlazor() && parent.events && parent.events.clicked.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.dotNetRef.invokeMethodAsync('ClickEventAsync', 'click', imageEditorClickEventArgs).then(function (imageEditorClickEventArgs) {
                 _this.clickEvent(imageEditorClickEventArgs, e);
@@ -8755,7 +8789,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         var x = imageEditorClickEventArgs.point.x;
         var y = imageEditorClickEventArgs.point.y;
-        var cursor = !isNullOrUndefined(parent.activeObj.shape) && parent.activeObj.shape === 'text' ?
+        var cursor = parent.activeObj.shape && parent.activeObj.shape === 'text' ?
             parent.cursor : 'default';
         if (this.currentDrawingShape !== '') {
             var object_1 = { currObj: {} };
@@ -8791,7 +8825,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                 this.isPan = false;
             }
         }
-        if (!isNullOrUndefined(parent.activeObj.shape)) {
+        if (parent.activeObj.shape) {
             this.isObjSelected = true;
         }
         else {
@@ -8805,7 +8839,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         var isFreehandDraw = this.isFreehandDrawTouch(e, this.isCropSelection);
         var isShapeClick = isShape ? isShape : this.isShapeClick(e, this.isCropSelection);
         var allowUndoRedoPush = this.applyCurrShape(isShapeClick);
-        if (this.isTouch && !isShape && !isNullOrUndefined(activeObj.shape) && !this.isCropSelection) {
+        if (this.isTouch && !isShape && activeObj.shape && !this.isCropSelection) {
             if (this.applyObj(x, y)) {
                 parent.okBtn(true);
                 parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false, value: { prevActObj: null } });
@@ -8840,11 +8874,12 @@ var Selection = /** @__PURE__ @class */ (function () {
             }
             if (this.isFhdEditing) {
                 parent.notify('freehand-draw', { prop: 'applyFhd', onPropertyChange: false });
+                this.isFhdCustomized = false;
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
                 }
             }
-            if (!isNullOrUndefined(parent.activeObj.shape) && (parent.activeObj.shape === 'rectangle' ||
+            if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' ||
                 parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'line' ||
                 parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path' || parent.activeObj.shape === 'text')) {
                 parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
@@ -8862,7 +8897,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         }
         else {
             var isLineArrow = false;
-            if (!isNullOrUndefined(parent.activeObj.shape) && (parent.activeObj.shape === 'line' ||
+            if (parent.activeObj.shape && (parent.activeObj.shape === 'line' ||
                 parent.activeObj.shape === 'arrow')) {
                 isLineArrow = true;
             }
@@ -8918,7 +8953,7 @@ var Selection = /** @__PURE__ @class */ (function () {
             else {
                 if (this.isFhdEditing) {
                     parent.notify('freehand-draw', { prop: 'cancelFhd', value: { type: 'ok' } });
-                    if (!isNullOrUndefined(document.getElementById(parent.element.id + '_quickAccessToolbarArea'))) {
+                    if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
                         document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
                     }
                 }
@@ -9056,7 +9091,7 @@ var Selection = /** @__PURE__ @class */ (function () {
             !this.dragCanvas || parent.activeObj.activePoint !== undefined) {
             if (this.dragElement === '') {
                 this.setCursor(x, y);
-                if ((!isNullOrUndefined(parent.activeObj.activePoint) &&
+                if ((parent.activeObj.activePoint &&
                     (parent.activeObj.activePoint.width === 0 || (!isNullOrUndefined(parent.activeObj.currIndex) &&
                         this.cursorTargetId !== parent.activeObj.currIndex)))
                     && parent.cursor !== 'default' &&
@@ -9131,15 +9166,14 @@ var Selection = /** @__PURE__ @class */ (function () {
         if (splitWords !== undefined && splitWords[0] === 'crop') {
             isCropSelection = true;
         }
-        if (isBlazor() && !isNullOrUndefined(this.parent.eventType)) {
+        if (isBlazor() && this.parent.eventType) {
             if (this.parent.eventType === 'pan') {
-                if (!isNullOrUndefined(parent.events) && parent.events.onPanEnd.hasDelegate === true) {
-                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                if (parent.events && parent.events.onPanEnd.hasDelegate === true) {
                     parent.dotNetRef.invokeMethodAsync('PanEventAsync', 'OnPanEnd', this.parent.panEventArgs);
                 }
             }
             else if (this.parent.eventType === 'resize') {
-                if (!this.isCropSelection && !isNullOrUndefined(this.parent.events) && this.parent.events.onShapeResizeEnd.hasDelegate === true) {
+                if (!this.isCropSelection && this.parent.events && this.parent.events.onShapeResizeEnd.hasDelegate === true) {
                     this.shapeResizingArgs.currentShapeSettings = this.updatePrevShapeSettings();
                     this.shapeResizingArgs.action = 'resize-end';
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -9148,7 +9182,8 @@ var Selection = /** @__PURE__ @class */ (function () {
                             value: { shapeSettings: shapeResizingArgs.currentShapeSettings } });
                     });
                 }
-                else if (!isNullOrUndefined(this.shapeResizingArgs) && !isNullOrUndefined(this.selectionResizingArgs) && !isNullOrUndefined(this.parent.events) && this.parent.events.onSelectionResizeEnd.hasDelegate === true) {
+                else if (this.shapeResizingArgs && this.selectionResizingArgs && this.parent.events &&
+                    this.parent.events.onSelectionResizeEnd.hasDelegate === true) {
                     var currentSelectionSettings = { type: this.parent.activeObj.shape,
                         startX: this.shapeResizingArgs.currentShapeSettings.startX,
                         startY: this.shapeResizingArgs.currentShapeSettings.startY,
@@ -9164,7 +9199,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
-                if (!isNullOrUndefined(this.shapeMovingArgs) && !isNullOrUndefined(this.parent.events) && this.parent.events.onShapeDragEnd.hasDelegate === true) {
+                if (this.shapeMovingArgs && this.parent.events && this.parent.events.onShapeDragEnd.hasDelegate === true) {
                     this.shapeMovingArgs.currentShapeSettings = this.updatePrevShapeSettings();
                     this.shapeMovingArgs.action = 'drag-end';
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -9217,7 +9252,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                 value: { obj: selPointCollObj } });
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             if (!parent.togglePen && !isCropSelection) {
-                if (!isNullOrUndefined(this.tempObjColl) && parent.activeObj.activePoint.width !== 0) {
+                if (this.tempObjColl && parent.activeObj.activePoint.width !== 0) {
                     parent.objColl.push(parent.activeObj);
                     if (JSON.stringify(parent.activeObj.activePoint) !== JSON.stringify(this.tempActiveObj.activePoint)) {
                         parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
@@ -9234,7 +9269,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                     parent.currObjType.isResize = false;
                 }
             }
-            if (!isNullOrUndefined(parent.activeObj)) {
+            if (parent.activeObj) {
                 var isCropSelection_1 = false;
                 var splitWords_1;
                 if (parent.activeObj.shape !== undefined) {
@@ -9283,7 +9318,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         if (splitWords !== undefined && splitWords[0] === 'crop') {
             isCropSelection = true;
         }
-        if (!isNullOrUndefined(parent.activeObj.shape) && !isCropSelection && e.currentTarget === parent.upperCanvas &&
+        if (parent.activeObj.shape && !isCropSelection && e.currentTarget === parent.upperCanvas &&
             parent.textArea.style.display === 'none') {
             if (parent.activeObj.shape === 'text') {
                 if (!isBlazor()) {
@@ -9320,7 +9355,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         var isAdjusted = false;
         var parent = this.parent;
         obj = obj ? obj : parent.activeObj;
-        if (!isNullOrUndefined(obj.shape) && (obj.shape === 'line' || parent.activeObj.shape === 'arrow')) {
+        if (obj.shape && (obj.shape === 'line' || parent.activeObj.shape === 'arrow')) {
             var temp = void 0;
             if ((this.dragElement === 'e-resize' && obj.activePoint.endX < obj.activePoint.startX) ||
                 (this.dragElement === 'w-resize' && obj.activePoint.startX > obj.activePoint.endX)) {
@@ -9351,7 +9386,7 @@ var Selection = /** @__PURE__ @class */ (function () {
     Selection.prototype.updPtCollForShpRot = function (obj) {
         var parent = this.parent;
         obj = obj ? obj : parent.activeObj;
-        if (!isNullOrUndefined(obj.shape) && obj.rotatedAngle !== 0) {
+        if (obj.shape && obj.rotatedAngle !== 0) {
             parent.notify('shape', { prop: 'setPointCollForShapeRotation', onPropertyChange: false,
                 value: { obj: obj } });
             // Updating ratio for point collection
@@ -9415,7 +9450,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         if (parent.togglePen) {
             return isShape;
         }
-        if (!isNullOrUndefined(parent.activeObj.shape) && parent.activeObj.shape === 'text' && this.isShapeInserted) {
+        if (parent.activeObj.shape && parent.activeObj.shape === 'text' && this.isShapeInserted) {
             var isTextArea = parent.textArea.style.display === 'block' ? true : false;
             var activeObj = extend({}, parent.activeObj, null, true);
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
@@ -9439,7 +9474,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                     parent.objColl.splice(index, 1);
                 }
             }
-            else if (!isShape && !isNullOrUndefined(activeObj.shape)) {
+            else if (!isShape && activeObj.shape) {
                 parent.activeObj = activeObj;
                 var index = this.getCurrentIndex();
                 if ((!isNullOrUndefined(index) &&
@@ -9457,7 +9492,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         var isShape = false;
         if (e.type === 'touchstart' && !parent.togglePen) {
-            if (!isNullOrUndefined(parent.activeObj) && parent.activeObj.shape === 'text') {
+            if (parent.activeObj && parent.activeObj.shape === 'text') {
                 this.timer = setTimeout(this.setTimer.bind(this), 1000, e);
             }
             var isTextArea = parent.textArea.style.display === 'block' ? true : false;
@@ -9527,7 +9562,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                     parent.objColl.splice(index, 1);
                 }
             }
-            else if (!isNullOrUndefined(activeObj.shape)) {
+            else if (activeObj.shape) {
                 parent.activeObj = activeObj;
                 var index = this.getCurrentIndex();
                 if (!isCropSelection) {
@@ -9546,7 +9581,7 @@ var Selection = /** @__PURE__ @class */ (function () {
     Selection.prototype.applyObj = function (x, y) {
         var parent = this.parent;
         var isApply = false;
-        if (!isNullOrUndefined(parent.activeObj.shape) && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' ||
+        if (parent.activeObj.shape && (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' ||
             parent.activeObj.shape === 'text' || parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' ||
             parent.activeObj.shape === 'path')) {
             if (x >= (parent.activeObj.activePoint.startX - (parent.activeObj.topLeftCircle.radius * 2)) &&
@@ -9714,6 +9749,12 @@ var Selection = /** @__PURE__ @class */ (function () {
         EventHandler.add(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler, this);
         EventHandler.add(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this);
     };
+    Selection.prototype.unwireEvent = function () {
+        EventHandler.remove(this.parent.lowerCanvas, 'touchend', this.mouseUpEventHandler);
+        EventHandler.remove(this.parent.lowerCanvas, 'touchmove', this.mouseMoveEventHandler);
+        EventHandler.remove(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler);
+        EventHandler.remove(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler);
+    };
     Selection.prototype.keyDownEventHandler = function (e) {
         var _this = this;
         var parent = this.parent;
@@ -9726,7 +9767,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         var splitWords;
         switch (e.key) {
             case (e.ctrlKey && 's'):
-                if (isBlazor() && !isNullOrUndefined(parent.events) && parent.events.saving.hasDelegate === true) {
+                if (isBlazor() && parent.events && parent.events.saving.hasDelegate === true) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     parent.dotNetRef.invokeMethodAsync('BeforeSaveEventAsync', 'BeforeSave', beforeSave).then(function (args) {
                         _this.beforeSaveEvent(args, e);
@@ -9824,7 +9865,7 @@ var Selection = /** @__PURE__ @class */ (function () {
         e.stopPropagation();
         if (e.ctrlKey === true && isInsideCanvas) {
             e.preventDefault();
-            if (!parent.isCropTab && (!isNullOrUndefined(parent.activeObj.shape) && parent.activeObj.shape.split('-')[0] !== 'crop')) {
+            if (!parent.isCropTab && (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] !== 'crop')) {
                 parent.okBtn();
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'close-contextual-toolbar', onPropertyChange: false });
@@ -9847,265 +9888,85 @@ var Selection = /** @__PURE__ @class */ (function () {
             }
         }
     };
-    Selection.prototype.adjustToScreen = function () {
+    Selection.prototype.textKeyDown = function (e) {
         var parent = this.parent;
-        if (!parent.isImageLoaded) {
-            return;
+        if (String.fromCharCode(e.which) === '\r') {
+            this.textRow += 1;
         }
-        if ((!isNullOrUndefined(parent.element.querySelector('#' + parent.element.id + '_contextualToolbar')) &&
-            !parent.element.querySelector('#' + parent.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
-            (!isNullOrUndefined(parent.element.querySelector('#' + parent.element.id + '_headWrapper'))
-                && !parent.element.querySelector('#' + parent.element.id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
-            parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-            parent.okBtn();
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
-                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+        parent.textArea.setAttribute('rows', this.textRow.toString());
+        parent.textArea.style.height = 'auto';
+        parent.textArea.style.height = parent.textArea.scrollHeight + 'px';
+        parent.notify('shape', { prop: 'setTextBoxWidth', onPropertyChange: false, value: { e: e } });
+        if (Browser.isDevice) {
+            parent.textArea.style.width = parseFloat(parent.textArea.style.width) + parent.textArea.style.fontSize + 'px';
+        }
+        var rows = parent.textArea.value.split('\n');
+        this.textRow = rows.length;
+        parent.textArea.setAttribute('rows', this.textRow.toString());
+        this.isInitialTextEdited = false;
+    };
+    Selection.prototype.clearSelection = function () {
+        var parent = this.parent;
+        if (!parent.disabled && parent.isImageLoaded) {
+            parent.togglePen = false;
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            this.dragElement = '';
+            this.dragPoint.startX = this.dragPoint.startY = this.dragPoint.endX = this.dragPoint.endY = 0;
+            parent.currObjType.shape = '';
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            parent.currObjType.isActiveObj = true;
+            parent.currObjType.isCustomCrop = false;
+            parent.upperCanvas.style.cursor = parent.cursor = 'default';
+        }
+    };
+    Selection.prototype.setDragDirection = function (width, height) {
+        var arcRadius = (7.5);
+        var parent = this.parent;
+        if (parent.img.destWidth > parent.img.destHeight) {
+            parent.activeObj.activePoint.startX = this.dragPoint.startX = ((width / 2) - (height / 2))
+                + arcRadius;
+            parent.activeObj.activePoint.startY = this.dragPoint.startY = ((height / 2) - (height / 2))
+                + arcRadius;
+            parent.activeObj.activePoint.endX = ((width / 2) + (height / 2)) - arcRadius;
+            parent.activeObj.activePoint.endY = ((height / 2) + (height / 2)) - arcRadius;
+        }
+        else {
+            parent.activeObj.activePoint.startY = this.dragPoint.startX = ((height / 2) - (width) / 2)
+                + arcRadius;
+            parent.activeObj.activePoint.endY = ((height / 2) + (width) / 2) - arcRadius;
+            parent.activeObj.activePoint.startX = this.dragPoint.startX = arcRadius;
+            parent.activeObj.activePoint.endX = width - arcRadius;
+        }
+    };
+    Selection.prototype.calcShapeRatio = function (x, y, imgWidth, imgHeight) {
+        var parent = this.parent;
+        var arcRadius = (7.5);
+        var originalWidth = imgWidth;
+        var originalHeight = imgHeight;
+        var presetRatio = x / y;
+        var standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;
+        var width = standardSize * presetRatio;
+        var height = standardSize;
+        var scaleWidth = this.getScale(width, originalWidth);
+        var snippetArray = [];
+        for (var i = 0; i < 2; i++) {
+            if (i === 0) {
+                snippetArray.push(width * scaleWidth);
             }
             else {
-                parent.updateToolbar(parent.element, 'imageLoaded');
+                snippetArray.push(height * scaleWidth);
             }
         }
-        if (this.isFhdEditing) {
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+        width = snippetArray[0];
+        height = snippetArray[1];
+        var scaleHeight = this.getScale(height, originalHeight);
+        var snippetArray1 = [];
+        for (var i = 0; i < 2; i++) {
+            if (i === 0) {
+                snippetArray1.push(width * scaleHeight);
             }
             else {
-                parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-            }
-        }
-        var isActiveObj = false;
-        if (parent.activeObj.shape !== undefined) {
-            isActiveObj = true;
-            if (parent.textArea.style.display === 'block') {
-                parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
-                    value: { x: null, y: null, isMouseDown: null } });
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-                }
-            }
-            else {
-                parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
-                parent.objColl.push(parent.activeObj);
-            }
-            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-        }
-        var tempFilter = this.lowerContext.filter;
-        parent.update();
-        parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
-        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-        this.lowerContext.filter = tempFilter;
-        parent.initialAdjustmentValue = tempFilter;
-        if (parent.isImageLoaded) {
-            showSpinner(parent.element);
-            parent.element.style.opacity = '0.5';
-        }
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        var canvasWrapper = document.querySelector('#' + parent.element.id + '_canvasWrapper');
-        if (!isNullOrUndefined(canvasWrapper)) {
-            canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
-            canvasWrapper.style.height = parent.element.offsetHeight + 'px';
-            var obj_3 = { toolbarHeight: !isBlazor() ? 0 : parent.toolbarHeight };
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj_3 } });
-            }
-            if (Browser.isDevice) {
-                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj_3['toolbarHeight'])) - 3 + 'px';
-            }
-            else {
-                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj_3['toolbarHeight']) - 3 + 'px';
-            }
-        }
-        var obj = { width: 0, height: 0 };
-        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-            value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj } });
-        var maxDimension = obj;
-        if (parent.transform.defaultZoomFactor > 0) {
-            maxDimension.width += (maxDimension.width * parent.transform.defaultZoomFactor);
-            maxDimension.height += (maxDimension.height * parent.transform.defaultZoomFactor);
-        }
-        parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-        parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
-        if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
-            if (parent.transform.defaultZoomFactor > 0) {
-                parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
-                parent.img.destTop += parent.panPoint.totalPannedPoint.y;
-            }
-            parent.notify('draw', { prop: 'draw-image-to-canvas', value: { dimension: maxDimension } });
-        }
-        else {
-            parent.notify('draw', { prop: 'draw-image-to-canvas', value: { dimension: maxDimension } });
-            parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
-                value: { type: 'initial', isPreventDestination: null, isRotatePan: null } });
-            var temp = this.lowerContext.filter;
-            parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
-            this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
-            this.lowerContext.filter = temp;
-            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 } });
-        if (parent.isCircleCrop) {
-            parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
-                value: { context: this.lowerContext, isSave: null, isFlip: null } });
-        }
-        hideSpinner(parent.element);
-        parent.element.style.opacity = '1';
-        var obj1 = { defToolbarItems: null };
-        if (!isBlazor()) {
-            parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj1 } });
-            if (obj1['defToolbarItems'] && obj1['defToolbarItems'].length > 0 && (!isNullOrUndefined(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 (!isNullOrUndefined(parent.element.querySelector('.e-contextual-toolbar-wrapper'))) {
-                    parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
-                }
-            }
-        }
-        parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        if (isActiveObj) {
-            parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], null, true);
-            parent.objColl.pop();
-            parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
-            if (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'text' ||
-                parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path') {
-                if (!isBlazor()) {
-                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
-                }
-                else {
-                    parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
-                }
-            }
-        }
-        if (this.isFhdEditing) {
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
-            }
-        }
-        if ((parent.transform.degree !== 0 || parent.transform.currFlipState !== '') && parent.transform.defaultZoomFactor > 0) {
-            var totalPannedPoint = extend({}, parent.panPoint.totalPannedPoint, null, true);
-            var totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, null, true);
-            var totalPannedClientPoint = extend({}, parent.panPoint.totalPannedClientPoint, null, true);
-            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: .1, zoomPoint: null } });
-            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: -.1, zoomPoint: null } });
-            if (parent.transform.degree === 0) {
-                parent.img.destLeft += totalPannedPoint.x;
-                parent.img.destTop += totalPannedPoint.y;
-                parent.panPoint.totalPannedPoint = totalPannedPoint;
-                parent.notify('draw', { prop: 'updateFlipPan', value: { tempSelectionObj: null } });
-            }
-            else {
-                parent.panPoint.totalPannedInternalPoint = totalPannedInternalPoint;
-                parent.panPoint.totalPannedClientPoint = totalPannedClientPoint;
-                parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
-                parent.isCropTab = true;
-                parent.notify('transform', { prop: 'rotatePan', onPropertyChange: false,
-                    value: { isCropSelection: null, isDefaultZoom: null } });
-                parent.isCropTab = false;
-            }
-        }
-        else if (parent.transform.degree !== 0 && parent.transform.cropZoomFactor > 0) {
-            parent.transform.zoomFactor = 0;
-            parent.transform.cropZoomFactor = null;
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
-            }
-            else {
-                parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
-            }
-        }
-    };
-    Selection.prototype.textKeyDown = function (e) {
-        var parent = this.parent;
-        if (String.fromCharCode(e.which) === '\r') {
-            this.textRow += 1;
-        }
-        parent.textArea.setAttribute('rows', this.textRow.toString());
-        parent.textArea.style.height = 'auto';
-        parent.textArea.style.height = parent.textArea.scrollHeight + 'px';
-        parent.notify('shape', { prop: 'setTextBoxWidth', onPropertyChange: false, value: { e: e } });
-        if (Browser.isDevice) {
-            parent.textArea.style.width = parseFloat(parent.textArea.style.width) + parent.textArea.style.fontSize + 'px';
-        }
-        var rows = parent.textArea.value.split('\n');
-        this.textRow = rows.length;
-        parent.textArea.setAttribute('rows', this.textRow.toString());
-        this.isInitialTextEdited = false;
-    };
-    Selection.prototype.clearSelection = function () {
-        var parent = this.parent;
-        if (!parent.disabled && parent.isImageLoaded) {
-            parent.togglePen = false;
-            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-            this.dragElement = '';
-            this.dragPoint.startX = this.dragPoint.startY = this.dragPoint.endX = this.dragPoint.endY = 0;
-            parent.currObjType.shape = '';
-            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-            parent.currObjType.isActiveObj = true;
-            parent.currObjType.isCustomCrop = false;
-            parent.upperCanvas.style.cursor = parent.cursor = 'default';
-        }
-    };
-    Selection.prototype.setDragDirection = function (width, height) {
-        var arcRadius = (7.5);
-        var parent = this.parent;
-        if (parent.img.destWidth > parent.img.destHeight) {
-            parent.activeObj.activePoint.startX = this.dragPoint.startX = ((width / 2) - (height / 2))
-                + arcRadius;
-            parent.activeObj.activePoint.startY = this.dragPoint.startY = ((height / 2) - (height / 2))
-                + arcRadius;
-            parent.activeObj.activePoint.endX = ((width / 2) + (height / 2)) - arcRadius;
-            parent.activeObj.activePoint.endY = ((height / 2) + (height / 2)) - arcRadius;
-        }
-        else {
-            parent.activeObj.activePoint.startY = this.dragPoint.startX = ((height / 2) - (width) / 2)
-                + arcRadius;
-            parent.activeObj.activePoint.endY = ((height / 2) + (width) / 2) - arcRadius;
-            parent.activeObj.activePoint.startX = this.dragPoint.startX = arcRadius;
-            parent.activeObj.activePoint.endX = width - arcRadius;
-        }
-    };
-    Selection.prototype.calcShapeRatio = function (x, y, imgWidth, imgHeight) {
-        var parent = this.parent;
-        var arcRadius = (7.5);
-        var originalWidth = imgWidth;
-        var originalHeight = imgHeight;
-        var presetRatio = x / y;
-        var standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;
-        var width = standardSize * presetRatio;
-        var height = standardSize;
-        var scaleWidth = this.getScale(width, originalWidth);
-        var snippetArray = [];
-        for (var i = 0; i < 2; i++) {
-            if (i === 0) {
-                snippetArray.push(width * scaleWidth);
-            }
-            else {
-                snippetArray.push(height * scaleWidth);
-            }
-        }
-        width = snippetArray[0];
-        height = snippetArray[1];
-        var scaleHeight = this.getScale(height, originalHeight);
-        var snippetArray1 = [];
-        for (var i = 0; i < 2; i++) {
-            if (i === 0) {
-                snippetArray1.push(width * scaleHeight);
-            }
-            else {
-                snippetArray1.push(height * scaleHeight);
+                snippetArray1.push(height * scaleHeight);
             }
         }
         width = snippetArray1[0];
@@ -10256,7 +10117,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                         x <= (actObj.activePoint.endX + (actObj.topLeftCircle.radius * 2)) &&
                         y >= (actObj.activePoint.startY - (actObj.topLeftCircle.radius * 2)) &&
                         y <= (actObj.activePoint.endY + (actObj.topLeftCircle.radius * 2))) ||
-                        (!isNullOrUndefined(rotationCirclePoint) &&
+                        (rotationCirclePoint &&
                             x >= (rotationCirclePoint.x - (actObj.topLeftCircle.radius * 2)) &&
                             x <= (rotationCirclePoint.x + (actObj.topLeftCircle.radius * 2)) &&
                             y >= (rotationCirclePoint.y - (actObj.topLeftCircle.radius * 2)) &&
@@ -10303,7 +10164,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                         value: { context: this.lowerContext, points: null } });
                 }
                 parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
-                if ((!isNullOrUndefined(parent.currSelectionPoint) && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
+                if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
                     parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                         value: { context: this.lowerContext, isSave: null, isFlip: null } });
                 }
@@ -10330,7 +10191,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                     this.isCropSelection = true;
                 }
                 if (!this.isCropSelection && isBlazor() && isNullOrUndefined(this.parent.eventType) &&
-                    !isNullOrUndefined(parent.events) && parent.events.shapeChanging.hasDelegate === true) {
+                    parent.events && parent.events.shapeChanging.hasDelegate === true) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs_1).then(function (shapeChangingArgs) {
                         _this.shapeEvent(shapeChangingArgs);
@@ -10352,7 +10213,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                             startY: shapeChangingArgs_1.currentShapeSettings.startY,
                             width: shapeChangingArgs_1.currentShapeSettings.width,
                             height: shapeChangingArgs_1.currentShapeSettings.height } };
-                    if (isBlazor() && !isNullOrUndefined(parent.events) && parent.events.onSelectionResizeStart.hasDelegate === true) {
+                    if (isBlazor() && parent.events && parent.events.onSelectionResizeStart.hasDelegate === true) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         parent.dotNetRef.invokeMethodAsync('SelectionEventAsync', 'OnSelectionResizeStart', selectionChangingArgs).then(function (selectionChangingArgs) {
                             shapeChangingArgs_1.currentShapeSettings.startX = selectionChangingArgs.currentSelectionSettings.startX;
@@ -10421,7 +10282,7 @@ var Selection = /** @__PURE__ @class */ (function () {
     Selection.prototype.getDistance = function (a, b) {
         var x = 0;
         var y = 0;
-        if (!isNullOrUndefined(a) && !isNullOrUndefined(b)) {
+        if (a && b) {
             x = a.x - b.x;
             y = a.y - b.y;
         }
@@ -10539,7 +10400,7 @@ var Selection = /** @__PURE__ @class */ (function () {
                 }
                 parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
                 this.lowerContext.filter = tempFilter;
-                if (!isNullOrUndefined(parent.activeObj.shape)) {
+                if (parent.activeObj.shape) {
                     parent.notify('shape', { prop: 'apply', onPropertyChange: false,
                         value: { shape: null, obj: null, canvas: null } });
                 }
@@ -11035,6 +10896,9 @@ var Shape = /** @__PURE__ @class */ (function () {
             case 'updateArrowRatio':
                 this.updateArrowRatio(args.value['obj']);
                 break;
+            case 'getSquarePointForRotatedShape':
+                this.getSquarePointForRotatedShape(args.value['obj'], args.value['object']);
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -11058,30 +10922,41 @@ var Shape = /** @__PURE__ @class */ (function () {
     };
     Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor) {
         this.initializeShape('ellipse');
-        var start = { x: x, y: y };
+        var start = x && y ? { x: x, y: y } : null;
         this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
     };
     Shape.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor) {
         this.initializeShape('line');
-        var start = { x: startX, y: startY };
+        var start = startX && startY ? { x: startX, y: startY } : null;
         var width = endX - startX;
         var height = endY - startY;
         this.drawShape('line', strokeWidth, strokeColor, null, start, width, height);
     };
     Shape.prototype.drawPath = function (pointColl, strokeWidth, strokeColor) {
         this.initializeShape('path');
-        this.drawShape('path', strokeWidth, strokeColor, null, null, null, null, pointColl);
+        if (pointColl) {
+            this.drawShape('path', strokeWidth, strokeColor, null, null, null, null, pointColl);
+        }
+        else {
+            this.drawShape('line', strokeWidth, strokeColor, null, null, null, null);
+            var obj = extend({}, this.parent.objColl[this.parent.objColl.length - 1], null, true);
+            obj.shape = 'path';
+            obj.lineDraw = null;
+            obj.pointColl = [{ x: obj.activePoint.startX, y: obj.activePoint.startY },
+                { x: obj.activePoint.endX, y: obj.activePoint.endY }];
+            this.parent.objColl[this.parent.objColl.length - 1] = obj;
+        }
     };
     Shape.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
         this.initializeShape('arrow');
-        var start = { x: startX, y: startY };
+        var start = startX && startY ? { x: startX, y: startY } : null;
         var width = endX - startX;
         var height = endY - startY;
         this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd);
     };
     Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor) {
         this.initializeShape('rectangle');
-        var start = { x: x, y: y };
+        var start = x && y ? { x: x, y: y } : null;
         this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height);
     };
     Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color) {
@@ -11243,7 +11118,7 @@ var Shape = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
             parent.activeObj.pointColl = this.getLinePoints(parent.activeObj.activePoint.startX, parent.activeObj.activePoint.startY, parent.activeObj.activePoint.endX, parent.activeObj.activePoint.endY);
-            if (!isNullOrUndefined(parent.activeObj.pointColl)) {
+            if (parent.activeObj.pointColl) {
                 for (var i = 0, len = parent.activeObj.pointColl.length; i < len; i++) {
                     parent.activeObj.pointColl[i].ratioX = (parent.activeObj.pointColl[i].x -
                         parent.img.destLeft) / parent.img.destWidth;
@@ -12366,7 +12241,7 @@ var Shape = /** @__PURE__ @class */ (function () {
                 this.upperContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
                 this.lowerContext.clearRect(0, 0, this.parent.upperCanvas.width, this.parent.upperCanvas.height);
                 parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
-                if ((!isNullOrUndefined(parent.currSelectionPoint) && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
+                if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
                     parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                         value: { context: this.lowerContext, isSave: null, isFlip: null } });
                 }
@@ -13084,8 +12959,8 @@ var Shape = /** @__PURE__ @class */ (function () {
     };
     Shape.prototype.isPointsInRange = function (x, y, obj) {
         var inRange = false;
-        if (!isNullOrUndefined(x) && !isNullOrUndefined(y) && x >= 0 && y >= 0 &&
-            x <= this.parent.lowerCanvas.width && y <= this.parent.lowerCanvas.width) {
+        if (!isNullOrUndefined(x) && !isNullOrUndefined(y) && x >= this.parent.img.destLeft && y >= this.parent.img.destTop &&
+            x <= this.parent.img.destLeft + this.parent.img.destWidth && y <= this.parent.img.destTop + this.parent.img.destHeight) {
             inRange = true;
         }
         obj['inRange'] = inRange;
@@ -13242,8 +13117,10 @@ var Shape = /** @__PURE__ @class */ (function () {
                                     isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                         }
                         parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
+                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                     }
                     else {
+                        parent.updateToolbar(parent.element, parent.activeObj.shape);
                         if (parent.activeObj.shape === 'path') {
                             parent.updateToolbar(this.parent.element, 'path', 'pathQuickAccessToolbar');
                         }
@@ -13265,8 +13142,13 @@ var Shape = /** @__PURE__ @class */ (function () {
                     isSelected = true;
                     parent.notify('freehand-draw', { prop: 'selectFhd', value: { id: id } });
                     if (!isBlazor()) {
+                        parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
                         parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
                     }
+                    else {
+                        parent.updateToolbar(parent.element, 'pen');
+                        parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
+                    }
                 }
                 else {
                     isSelected = false;
@@ -13482,6 +13364,73 @@ var Shape = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    Shape.prototype.getSquarePointForRotatedShape = function (obj, object) {
+        var point = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
+        var center = { x: obj.activePoint.startX + (obj.activePoint.width / 2), y: obj.activePoint.startY +
+                (obj.activePoint.height / 2) };
+        var p1 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle)
+                * (obj.activePoint.startY - center.y) + center.x,
+            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.startY
+                - center.y) + center.y };
+        var p2 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
+                (obj.activePoint.startY - center.y) + center.x,
+            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.startY
+                - center.y) + center.y };
+        var p3 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle) *
+                (obj.activePoint.endY - center.y) + center.x,
+            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.endY
+                - center.y) + center.y };
+        var p4 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
+                (obj.activePoint.endY - center.y) + center.x,
+            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) *
+                (obj.activePoint.endY - center.y) + center.y };
+        point.startX = p1.x;
+        point.startY = p1.y;
+        point.endX = p1.x;
+        point.endY = p1.y;
+        if (point.startX > p2.x) {
+            point.startX = p2.x;
+        }
+        if (point.startX > p3.x) {
+            point.startX = p3.x;
+        }
+        if (point.startX > p4.x) {
+            point.startX = p4.x;
+        }
+        if (point.startY > p2.y) {
+            point.startY = p2.y;
+        }
+        if (point.startY > p3.y) {
+            point.startY = p3.y;
+        }
+        if (point.startY > p4.y) {
+            point.startY = p4.y;
+        }
+        if (point.endX < p2.x) {
+            point.endX = p2.x;
+        }
+        if (point.endX < p3.x) {
+            point.endX = p3.x;
+        }
+        if (point.endX < p4.x) {
+            point.endX = p4.x;
+        }
+        if (point.endY < p2.y) {
+            point.endY = p2.y;
+        }
+        if (point.endY < p3.y) {
+            point.endY = p3.y;
+        }
+        if (point.endY < p4.y) {
+            point.endY = p4.y;
+        }
+        point.width = point.endX - point.startX;
+        point.height = point.endY - point.startY;
+        if (object) {
+            object['activePoint'] = point;
+        }
+        return point;
+    };
     return Shape;
 }());
 
@@ -13661,7 +13610,7 @@ var Transform = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         var transitionArgs = { cancel: false, previousDegree: parent.transform.degree,
             currentDegree: Math.abs(parent.transform.degree + degree) === 360 ? 0 : parent.transform.degree + degree };
-        if (!this.isPreventSelect && isBlazor() && !isNullOrUndefined(parent.events) && parent.events.rotating.hasDelegate === true) {
+        if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.rotating.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.dotNetRef.invokeMethodAsync('RotateEventAsync', 'OnRotate', transitionArgs).then(function (args) {
                 _this.rotateEvent(args, degree);
@@ -13693,7 +13642,7 @@ var Transform = /** @__PURE__ @class */ (function () {
             parent.afterCropActions.push(degree === 90 ? 'rotateRight' : 'rotateLeft');
             var splitWords = [];
             var activeObjShape = void 0;
-            if (!isNullOrUndefined(parent.activeObj.activePoint) && !isNullOrUndefined(parent.activeObj.shape)) {
+            if (parent.activeObj.activePoint && parent.activeObj.shape) {
                 if (parent.activeObj.shape !== undefined) {
                     splitWords = parent.activeObj.shape.split('-');
                 }
@@ -13847,7 +13796,7 @@ var Transform = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         var transitionArgs = { direction: direction, cancel: false,
             previousDirection: parent.toPascalCase(parent.transform.currFlipState) };
-        if (!this.isPreventSelect && isBlazor() && !isNullOrUndefined(parent.events) && parent.events.flipping.hasDelegate === true) {
+        if (!this.isPreventSelect && isBlazor() && parent.events && parent.events.flipping.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.dotNetRef.invokeMethodAsync('FlipEventAsync', 'OnFlip', transitionArgs).then(function (args) {
                 _this.flipEvent(args, direction);
@@ -13985,7 +13934,7 @@ var Transform = /** @__PURE__ @class */ (function () {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                 value: { context: this.lowerContext, isSave: null, isFlip: null } });
         }
-        if (!isNullOrUndefined(activeObjShape)) {
+        if (activeObjShape) {
             this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
             parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
             parent.objColl.pop();
@@ -14117,13 +14066,13 @@ var Transform = /** @__PURE__ @class */ (function () {
                 this.tempActiveObj = extend({}, parent.activeObj, {}, true);
                 parent.isCropTab = true;
             }
-            else if (!isNullOrUndefined(parent.activeObj.shape) && splitWords[0] !== 'crop') {
+            else if (parent.activeObj.shape && splitWords[0] !== 'crop') {
                 this.isShape = true;
             }
             var obj = { zoomType: null };
             parent.notify('selection', { prop: 'getZoomType', onPropertyChange: false, value: { obj: obj } });
             if (isNullOrUndefined(zoomPoint)) {
-                if (parent.isCropTab && !isNullOrUndefined(this.tempActiveObj)) {
+                if (parent.isCropTab && this.tempActiveObj) {
                     zoomPoint = { x: parent.activeObj.activePoint.startX + (parent.activeObj.activePoint.width / 2),
                         y: parent.activeObj.activePoint.startY + (parent.activeObj.activePoint.height / 2) };
                 }
@@ -14137,7 +14086,7 @@ var Transform = /** @__PURE__ @class */ (function () {
             var previousZoomFactor = parent.zoomSettings.zoomFactor - (zoomFactor * 10);
             var zoomEventArgs = { zoomPoint: zoomPoint, cancel: false, previousZoomFactor: previousZoomFactor,
                 currentZoomFactor: parent.zoomSettings.zoomFactor, zoomTrigger: obj['zoomType'] };
-            if (!parent.isCropToolbar && isBlazor() && !isNullOrUndefined(parent.events) && parent.events.zooming.hasDelegate === true) {
+            if (!parent.isCropToolbar && isBlazor() && parent.events && parent.events.zooming.hasDelegate === true) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 parent.dotNetRef.invokeMethodAsync('ZoomEventAsync', 'OnZoom', zoomEventArgs).then(function (args) {
                     _this.zoomEvent(args, zoomFactor);
@@ -14274,7 +14223,7 @@ var Transform = /** @__PURE__ @class */ (function () {
             }
         }
         this.autoEnablePan();
-        if (!isNullOrUndefined(this.tempActiveObj)) {
+        if (this.tempActiveObj) {
             parent.activeObj = extend({}, this.tempActiveObj, {}, true);
         }
         if (parent.activeObj.shape === 'crop-custom') {
@@ -14581,7 +14530,7 @@ var Transform = /** @__PURE__ @class */ (function () {
         var obj = { panDown: null };
         parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: { obj: obj } });
         var panEventArgs = { startPoint: obj['panDown'], endPoint: this.panMove, cancel: false };
-        if (isBlazor() && isNullOrUndefined(this.parent.eventType) && !isNullOrUndefined(parent.events) && parent.events.onPanStart.hasDelegate === true) {
+        if (isBlazor() && isNullOrUndefined(this.parent.eventType) && parent.events && parent.events.onPanStart.hasDelegate === true) {
             this.parent.eventType = 'pan';
             this.parent.panEventArgs = panEventArgs;
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -14795,7 +14744,7 @@ var Transform = /** @__PURE__ @class */ (function () {
         var tempDegree = parent.transform.degree;
         var rotatePanActiveObj;
         var object = { selPointColl: null };
-        if (!isNullOrUndefined(parent.activeObj.activePoint) && !isNullOrUndefined(parent.activeObj.shape)) {
+        if (parent.activeObj.activePoint && parent.activeObj.shape) {
             rotatePanActiveObj = extend({}, parent.activeObj, {}, true);
         }
         var tempObjColl = extend([], parent.objColl, [], true);
@@ -14866,7 +14815,7 @@ var Transform = /** @__PURE__ @class */ (function () {
         parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         parent.activeObj = extend({}, rotatePanActiveObj, {}, true);
-        if (!isNullOrUndefined(parent.activeObj.activePoint)) {
+        if (parent.activeObj.activePoint) {
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj, isCropRatio: null,
                     points: null, isPreventDrag: true, saveContext: null, isPreventSelection: null } });
         }
@@ -15034,38 +14983,218 @@ var Transform = /** @__PURE__ @class */ (function () {
     Transform.prototype.update = function () {
         var parent = this.parent;
         var toolbarHeight = 0;
+        var isActiveObj = false;
+        var freehandObj = { bool: false };
+        if (parent.isImageLoaded) {
+            if ((parent.element.querySelector('#' + parent.element.id + '_contextualToolbar') &&
+                !parent.element.querySelector('#' + parent.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
+                (parent.element.querySelector('#' + parent.element.id + '_headWrapper')
+                    && !parent.element.querySelector('#' + parent.element.id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
+                parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                parent.okBtn();
+                if (!isBlazor()) {
+                    parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                }
+                else {
+                    parent.updateToolbar(parent.element, 'imageLoaded');
+                }
+            }
+            parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
+            if (freehandObj['bool']) {
+                if (!isBlazor()) {
+                    parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                }
+                else {
+                    parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
+                }
+            }
+            if (parent.activeObj.shape !== undefined) {
+                isActiveObj = true;
+                if (parent.textArea.style.display === 'block') {
+                    parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
+                        value: { x: null, y: null, isMouseDown: null } });
+                    if (!isBlazor()) {
+                        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                    }
+                    else {
+                        parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
+                    }
+                }
+                else {
+                    parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+                    parent.objColl.push(parent.activeObj);
+                }
+                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            }
+        }
+        var tempFilter = this.lowerContext.filter;
         var canvasWrapper = document.querySelector('#' + parent.element.id + '_canvasWrapper');
-        if (!isNullOrUndefined(canvasWrapper)) {
+        if (canvasWrapper) {
             canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
         }
         parent.lowerCanvas.width = parent.upperCanvas.width = parent.element.offsetWidth - 2;
-        if (!isNullOrUndefined(parent.toolbarTemplate)) {
-            parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: 0 } });
+        if (parent.toolbarTemplate) {
+            toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
         }
         else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
             toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
-            parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: toolbarHeight } });
         }
+        parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: toolbarHeight } });
         if (Browser.isDevice) {
-            if (!isNullOrUndefined(canvasWrapper)) {
+            if (canvasWrapper) {
                 canvasWrapper.style.height = parent.element.offsetHeight - (2 * toolbarHeight) - 5 + 'px';
             }
-            parent.lowerCanvas.height = parent.upperCanvas.height = parent.element.offsetHeight - (2 * toolbarHeight) - 5;
-        }
-        else {
-            if (!isNullOrUndefined(canvasWrapper)) {
-                canvasWrapper.style.height = parent.element.offsetHeight - toolbarHeight - 3 + 'px';
+            parent.lowerCanvas.height = parent.upperCanvas.height = parent.element.offsetHeight - (2 * toolbarHeight) - 5;
+        }
+        else {
+            if (canvasWrapper) {
+                canvasWrapper.style.height = parent.element.offsetHeight - toolbarHeight - 3 + 'px';
+            }
+            parent.lowerCanvas.height = parent.upperCanvas.height = parent.element.offsetHeight - toolbarHeight - 3;
+        }
+        this.lowerContext.filter =
+            'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+        parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
+        parent.canvasFilter = this.lowerContext.filter;
+        this.parent.initialAdjustmentValue = this.lowerContext.filter;
+        parent.clearContext(this.lowerContext);
+        this.parent.clearContext(this.upperContext);
+        if (parent.isImageLoaded) {
+            parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            this.lowerContext.filter = tempFilter;
+            parent.initialAdjustmentValue = tempFilter;
+            if (parent.isImageLoaded) {
+                showSpinner(parent.element);
+                parent.element.style.opacity = '0.5';
+            }
+            this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            if (canvasWrapper) {
+                canvasWrapper.style.width = parent.element.offsetWidth - 2 + 'px';
+                canvasWrapper.style.height = parent.element.offsetHeight + 'px';
+                var obj_1 = { toolbarHeight: !isBlazor() ? 0 : parent.toolbarHeight };
+                if (!isBlazor()) {
+                    parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj_1 } });
+                }
+                if (Browser.isDevice) {
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj_1['toolbarHeight'])) - 3 + 'px';
+                }
+                else {
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj_1['toolbarHeight']) - 3 + 'px';
+                }
+            }
+            var obj = { width: 0, height: 0 };
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+                value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj } });
+            var maxDimension = obj;
+            if (parent.transform.defaultZoomFactor > 0) {
+                maxDimension.width += (maxDimension.width * parent.transform.defaultZoomFactor);
+                maxDimension.height += (maxDimension.height * parent.transform.defaultZoomFactor);
+            }
+            parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+            if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
+                if (parent.transform.defaultZoomFactor > 0) {
+                    parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
+                    parent.img.destTop += parent.panPoint.totalPannedPoint.y;
+                }
+                parent.notify('draw', { prop: 'draw-image-to-canvas', value: { dimension: maxDimension } });
+            }
+            else {
+                parent.notify('draw', { prop: 'draw-image-to-canvas', value: { dimension: maxDimension } });
+                parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
+                    value: { type: 'initial', isPreventDestination: null, isRotatePan: null } });
+                var temp = this.lowerContext.filter;
+                parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
+                this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+                this.lowerContext.filter = temp;
+                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 } });
+            if (parent.isCircleCrop) {
+                parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                    value: { context: this.lowerContext, isSave: null, isFlip: null } });
+            }
+            hideSpinner(parent.element);
+            parent.element.style.opacity = '1';
+            var obj1 = { defToolbarItems: null };
+            if (!isBlazor()) {
+                parent.notify('toolbar', { prop: 'getDefToolbarItems', value: { obj: obj1 } });
+                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 (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
+                        parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    }
+                }
+            }
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+            if (isActiveObj) {
+                parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], null, true);
+                parent.objColl.pop();
+                if (parent.activeObj.activePoint.width !== 0 && parent.activeObj.activePoint.height !== 0) {
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
+                    if (parent.activeObj.shape === 'rectangle' || parent.activeObj.shape === 'ellipse' || parent.activeObj.shape === 'text' ||
+                        parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path') {
+                        if (!isBlazor()) {
+                            parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
+                        }
+                        else {
+                            parent.updateToolbar(parent.element, 'quickAccessToolbar', parent.activeObj.shape);
+                        }
+                    }
+                }
+            }
+            if (freehandObj['bool']) {
+                if (!isBlazor()) {
+                    parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: true } });
+                }
+                else {
+                    parent.updateToolbar(parent.element, 'quickAccessToolbar', 'pen');
+                }
+            }
+            if ((parent.transform.degree !== 0 || parent.transform.currFlipState !== '') && parent.transform.defaultZoomFactor > 0) {
+                var totalPannedPoint = extend({}, parent.panPoint.totalPannedPoint, null, true);
+                var totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, null, true);
+                var totalPannedClientPoint = extend({}, parent.panPoint.totalPannedClientPoint, null, true);
+                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                    value: { zoomFactor: .1, zoomPoint: null } });
+                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                    value: { zoomFactor: -.1, zoomPoint: null } });
+                if (parent.transform.degree === 0) {
+                    parent.img.destLeft += totalPannedPoint.x;
+                    parent.img.destTop += totalPannedPoint.y;
+                    parent.panPoint.totalPannedPoint = totalPannedPoint;
+                    parent.notify('draw', { prop: 'updateFlipPan', value: { tempSelectionObj: null } });
+                }
+                else {
+                    parent.panPoint.totalPannedInternalPoint = totalPannedInternalPoint;
+                    parent.panPoint.totalPannedClientPoint = totalPannedClientPoint;
+                    parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
+                    parent.isCropTab = true;
+                    parent.notify('transform', { prop: 'rotatePan', onPropertyChange: false,
+                        value: { isCropSelection: null, isDefaultZoom: null } });
+                    parent.isCropTab = false;
+                }
+            }
+            else if (parent.transform.degree !== 0 && parent.transform.cropZoomFactor > 0) {
+                parent.transform.zoomFactor = 0;
+                parent.transform.cropZoomFactor = null;
+                if (!isBlazor()) {
+                    parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
+                }
+                else {
+                    parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
+                }
             }
-            parent.lowerCanvas.height = parent.upperCanvas.height = parent.element.offsetHeight - toolbarHeight - 3;
         }
-        this.lowerContext.filter =
-            'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
-                'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
-        parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
-        this.parent.canvasFilter = this.lowerContext.filter;
-        this.parent.initialAdjustmentValue = this.lowerContext.filter;
-        this.parent.clearContext(this.lowerContext);
-        this.parent.clearContext(this.upperContext);
     };
     Transform.prototype.calcMaxDimension = function (width, height, obj) {
         var object = { toolbarHeight: 0 };
@@ -15096,7 +15225,15 @@ var Transform = /** @__PURE__ @class */ (function () {
             cssMaxWidth = width * heightScale;
             cssMaxHeight = height * heightScale;
         }
-        if (!isNullOrUndefined(obj)) {
+        var cropObj = { bool: null };
+        this.parent.notify('crop', { prop: 'getPreventScaling', onPropertyChange: false,
+            value: { obj: cropObj } });
+        if (cropObj['bool'] && this.parent.cropObj.activeObj.activePoint &&
+            this.parent.cropObj.activeObj.activePoint.width !== 0 && this.parent.cropObj.activeObj.activePoint.height !== 0) {
+            cssMaxWidth = this.parent.cropObj.activeObj.activePoint.width;
+            cssMaxHeight = this.parent.cropObj.activeObj.activePoint.height;
+        }
+        if (obj) {
             obj['width'] = cssMaxWidth;
             obj['height'] = cssMaxHeight;
         }
@@ -15144,7 +15281,7 @@ var Transform = /** @__PURE__ @class */ (function () {
         }
         this.limitPan();
         parent.activeObj = tempActObj;
-        if (!isNullOrUndefined(obj)) {
+        if (obj) {
             obj['x'] = parent.img.destLeft - tempDestLeft;
             obj['y'] = parent.img.destTop - tempDestTop;
         }
@@ -15178,10 +15315,10 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
         this.parent.off('destroyed', this.destroy);
     };
     UndoRedo.prototype.initializeUrPvtProp = function () {
-        if (!isNullOrUndefined(this.parent.lowerCanvas)) {
+        if (this.parent.lowerCanvas) {
             this.lowerContext = this.parent.lowerCanvas.getContext('2d');
         }
-        if (!isNullOrUndefined(this.parent.upperCanvas)) {
+        if (this.parent.upperCanvas) {
             this.upperContext = this.parent.upperCanvas.getContext('2d');
         }
     };
@@ -15401,14 +15538,16 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
         if (!parent.disabled && parent.isImageLoaded) {
             if (this.undoRedoStep > 0) {
                 this.refreshToolbarActions();
-                if (!isNullOrUndefined(parent.activeObj.activePoint) && parent.activeObj.activePoint.width !== 0) {
+                if (parent.activeObj.activePoint && parent.activeObj.activePoint.width !== 0) {
                     this.tempActObj = parent.activeObj;
                 }
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                 this.undoRedoStep--;
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'enable-disable-btns' });
-                    parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
+                        parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    }
                 }
                 else {
                     parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
@@ -15511,7 +15650,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
                 parent.cropObj = extend({}, obj.currentCropObj, {}, true);
                 parent.afterCropActions = obj.currentObj.afterCropActions;
                 this.lowerContext.filter = obj.currentObj.filter;
-                if (!isBlazor()) {
+                if (!isBlazor() && parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
                     parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 }
                 parent.canvasFilter = this.lowerContext.filter;
@@ -15573,10 +15712,10 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
                 if (obj.operation === 'crop' && !obj.isCircleCrop) {
                     parent.isCircleCrop = false;
                 }
-                if (obj.operation === 'crop' && !isNullOrUndefined(obj.currentObj.currSelectionPoint)) {
+                if (obj.operation === 'crop' && obj.currentObj.currSelectionPoint) {
                     parent.currSelectionPoint = extend({}, obj.currentObj.currSelectionPoint, {}, true);
                 }
-                if (!isNullOrUndefined(parent.currSelectionPoint) && isNullOrUndefined(parent.currSelectionPoint.shape)) {
+                if (parent.currSelectionPoint && isNullOrUndefined(parent.currSelectionPoint.shape)) {
                     parent.currSelectionPoint = null;
                 }
                 this.endUndoRedo(obj.operation, false);
@@ -16254,7 +16393,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'theme':
                     if (newProperties.theme) {
-                        if (!isNullOrUndefined(this.theme) && this.theme !== '') {
+                        if (this.theme && this.theme !== '') {
                             this.theme = this.toPascalCase(this.theme);
                         }
                         else {
@@ -16316,7 +16455,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 case 'selectionSettings':
                     if (newProperties.selectionSettings) {
                         this.selectionSettings = newProperties.selectionSettings;
-                        if (!isNullOrUndefined(this.activeObj.shape)) {
+                        if (this.activeObj.shape) {
                             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
                             this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: this.activeObj } });
                         }
@@ -16336,9 +16475,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.element.removeAttribute('class');
         }
         if (!isBlazor()) {
-            this.notify('toolbar', {
-                prop: 'destroySubComponents', onPropertyChange: false
-            });
+            this.notify('toolbar', { prop: 'destroySubComponents', onPropertyChange: false });
             this.notify('destroyed', null);
             _super.prototype.destroy.call(this);
         }
@@ -16349,7 +16486,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.element.innerHTML = '';
     };
     ImageEditor.prototype.initialize = function () {
-        if (!isNullOrUndefined(this.toolbarTemplate)) {
+        if (this.toolbarTemplate) {
             this.element.appendChild(this.createElement('div', {
                 id: this.element.id + '_toolbarArea', className: 'e-toolbar-area'
             }));
@@ -16368,13 +16505,13 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             var quickAccessToolbar = document.getElementById(this.element.id + '_quickAccessToolbarArea');
             quickAccessToolbar.style.position = 'absolute';
             quickAccessToolbar.style.display = 'none';
-            if (!isNullOrUndefined(this.activeObj)) {
+            if (this.activeObj) {
                 quickAccessToolbar.style.left = this.activeObj.activePoint.startX + 'px';
                 quickAccessToolbar.style.top = this.activeObj.activePoint.startY + 'px';
             }
             quickAccessToolbar.style.width = '100%';
         }
-        if (!isNullOrUndefined(this.quickAccessToolbarTemplate)) {
+        if (this.quickAccessToolbarTemplate) {
             this.quickAccessToolbarTemplateFn();
         }
         else {
@@ -16451,6 +16588,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             screen.orientation.removeEventListener('change', this.screenOrientation.bind(this));
         }
         this.notify('shape', { prop: 'unWireEvent', onPropertyChange: false });
+        this.notify('selection', { prop: 'unWireEvent', onPropertyChange: false });
     };
     ImageEditor.prototype.createCanvas = function () {
         this.element.style.boxSizing = 'border-box';
@@ -16530,7 +16668,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.notify('selection', { prop: 'handleScroll', onPropertyChange: false, value: { e: e } });
     };
     ImageEditor.prototype.adjustToScreen = function () {
-        this.notify('selection', { prop: 'adjustToScreen', onPropertyChange: false });
+        this.update();
     };
     ImageEditor.prototype.screenOrientation = function () {
         if (Browser.isDevice) {
@@ -16687,10 +16825,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.currentFilter = '';
             var obj_1 = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj_1 } });
-            if (!isNullOrUndefined(obj_1['initialZoomValue'])) {
+            if (obj_1['initialZoomValue']) {
                 this.setProperties({ zoomSettings: { zoomFactor: obj_1['initialZoomValue'] } }, true);
             }
-            if (!isNullOrUndefined(document.getElementById(this.element.id + '_quickAccessToolbarArea'))) {
+            if (document.getElementById(this.element.id + '_quickAccessToolbarArea')) {
                 document.getElementById(this.element.id + '_quickAccessToolbarArea').style.display = 'none';
             }
             this.notifyResetForAllModules();
@@ -16699,7 +16837,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.notify('draw', { prop: 'update-canvas', onPropertyChange: false });
             this.isImageLoaded = true;
             if (!isBlazor()) {
-                if (!isNullOrUndefined(this.element.querySelector('.e-contextual-toolbar-wrapper'))) {
+                if (this.element.querySelector('.e-contextual-toolbar-wrapper')) {
                     this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 }
                 this.notify('toolbar', { prop: 'refresh-dropdown-btn', value: { isDisabled: false } });
@@ -16835,7 +16973,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor) {
         var isEllipse = false;
         var isPointsInRange = this.allowShape(x, y);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isEllipse = true;
             this.notify('shape', { prop: 'drawEllipse', onPropertyChange: false, value: { x: x, y: y, radiusX: radiusX, radiusY: radiusY,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor } });
@@ -16856,7 +16994,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor) {
         var isLine = false;
         var isPointsInRange = this.allowShape(startX, startY);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(startX) && isNullOrUndefined(startY)))) {
             isLine = true;
             this.notify('shape', { prop: 'drawLine', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
                     endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor } });
@@ -16874,14 +17012,12 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @param {string} strokeColor - Specifies the stroke color of arrow.
      * @param {ArrowheadType} arrowStart – Specifies the type of arrowhead for start position. The default value is ‘None’.
      * @param {ArrowheadType} arrowEnd – Specifies the type of arrowhead for end position. The default value is ‘SolidArrow’.
-
      * @returns {boolean}.
-     * @private
      */
     ImageEditor.prototype.drawArrow = function (startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
         var isArrow = false;
         var isPointsInRange = this.allowShape(startX, startY);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(startX) && isNullOrUndefined(startY)))) {
             isArrow = true;
             this.notify('shape', { prop: 'drawArrow', onPropertyChange: false, value: { startX: startX, startY: startY, endX: endX,
                     endY: endY, strokeWidth: strokeWidth, strokeColor: strokeColor, arrowStart: arrowStart, arrowEnd: arrowEnd } });
@@ -16900,7 +17036,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.isPublicMethod = true;
         var obj = { inRange: false };
         var isPath = false;
-        if (pointColl.length > 0) {
+        if (pointColl && pointColl.length > 0) {
             for (var i = 0; i < pointColl.length; i++) {
                 if (obj['inRange']) {
                     break;
@@ -16909,7 +17045,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     value: { x: pointColl[i].x, y: pointColl[i].y, obj: obj } });
             }
         }
-        if (!this.disabled && this.isImageLoaded && obj['inRange']) {
+        if (!this.disabled && this.isImageLoaded && (obj['inRange'] || isNullOrUndefined(pointColl))) {
             isPath = true;
             this.notify('shape', { prop: 'drawPath', onPropertyChange: false, value: { pointColl: pointColl,
                     strokeWidth: strokeWidth, strokeColor: strokeColor } });
@@ -16931,7 +17067,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor) {
         var isRectangle = false;
         var isPointsInRange = this.allowShape(x, y);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isRectangle = true;
             this.notify('shape', { prop: 'drawRectangle', onPropertyChange: false, value: { x: x, y: y, width: width, height: height,
                     strokeWidth: strokeWidth, strokeColor: strokeColor, fillColor: fillColor } });
@@ -16957,7 +17093,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color) {
         var isText = false;
         var isPointsInRange = this.allowShape(x, y);
-        if (!this.disabled && this.isImageLoaded && isPointsInRange) {
+        if (!this.disabled && this.isImageLoaded && (isPointsInRange || (isNullOrUndefined(x) && isNullOrUndefined(y)))) {
             isText = true;
             this.notify('shape', { prop: 'drawText', onPropertyChange: false, value: { x: x, y: y, text: text, fontFamily: fontFamily,
                     fontSize: fontSize, bold: bold, italic: italic, color: color } });
@@ -17109,6 +17245,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 template = this.toolbarFn({ type: 'toolbar' }, this, 'Template', templateID)[0];
             }
             toolbarArea.appendChild(template);
+            this.toolbarHeight = toolbarArea.clientHeight;
+            this.notify('toolbar', { prop: 'setToolbarHeight', value: { height: this.toolbarHeight } });
             this['renderReactTemplates']();
         }
     };
@@ -17176,7 +17314,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var isUndoRedo = this.isUndoRedo;
         this.isCropTab = false;
         this.isUndoRedo = true;
-        if (!isNullOrUndefined(this.transform.cropZoomFactor) && this.transform.cropZoomFactor > 0) {
+        if (this.transform.cropZoomFactor && this.transform.cropZoomFactor > 0) {
             this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
                 value: { zoomFactor: -this.transform.cropZoomFactor, zoomPoint: null } });
         }
@@ -17193,120 +17331,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.isCropTab = true;
         this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: this.activeObj } });
     };
-    ImageEditor.prototype.moveToSelectionRange = function (type, activeObj) {
-        if (!isNullOrUndefined(this.activeObj.shape)) {
-            if (type === 'rotateleft' || type === 'rotateright') {
-                var zoomFactor = this.transform.zoomFactor;
-                this.objColl.push(this.activeObj);
-                this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                if (this.transform.degree % 90 === 0 && this.transform.degree % 180 !== 0) {
-                    if (this.objColl[this.objColl.length - 1].activePoint.width < activeObj.activePoint.height) {
-                        for (var i = 2; i < this.zoomSettings.maxZoomFactor; i++) {
-                            if (this.objColl[this.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
-                                this.isSelectionBiggerThanCanvas(this.objColl[this.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(this.objColl[this.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: -0.1, zoomPoint: null } });
-                                }
-                                break;
-                            }
-                            zoomFactor += .1;
-                            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
-                        }
-                    }
-                    else {
-                        for (var i = 2; i < this.zoomSettings.maxZoomFactor; i++) {
-                            if (this.objColl[this.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
-                                this.isSelectionBiggerThanCanvas(this.objColl[this.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(this.objColl[this.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: 0.1, zoomPoint: null } });
-                                }
-                                break;
-                            }
-                            zoomFactor -= .1;
-                            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
-                        }
-                    }
-                }
-                else {
-                    if (this.objColl[this.objColl.length - 1].activePoint.height < activeObj.activePoint.width) {
-                        for (var i = 2; i < this.zoomSettings.maxZoomFactor; i++) {
-                            if (this.objColl[this.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
-                                this.isSelectionBiggerThanCanvas(this.objColl[this.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(this.objColl[this.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: -0.1, zoomPoint: null } });
-                                }
-                                break;
-                            }
-                            zoomFactor += .1;
-                            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
-                        }
-                    }
-                    else {
-                        for (var i = 2; i < this.zoomSettings.maxZoomFactor; i++) {
-                            if (this.objColl[this.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
-                                this.isSelectionBiggerThanCanvas(this.objColl[this.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(this.objColl[this.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: 0.1, zoomPoint: null } });
-                                }
-                                break;
-                            }
-                            zoomFactor -= .1;
-                            this.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
-                        }
-                    }
-                }
-                var panX = (this.lowerCanvas.clientWidth / 2) - (this.objColl[this.objColl.length - 1].activePoint.startX +
-                    (this.objColl[this.objColl.length - 1].activePoint.width / 2));
-                var panY = (this.lowerCanvas.clientHeight / 2) - (this.objColl[this.objColl.length - 1].activePoint.startY +
-                    (this.objColl[this.objColl.length - 1].activePoint.height / 2));
-                if (this.transform.degree === 0) {
-                    this.img.destLeft += panX;
-                    this.img.destTop += panY;
-                    this.notify('transform', { prop: 'drawPannImage', value: { point: { x: panX, y: panY } } });
-                }
-                else {
-                    this.panPoint.currentPannedPoint = { x: panX, y: panY };
-                    this.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
-                    this.panPoint.currentPannedPoint = { x: 0, y: 0 };
-                }
-                this.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
-                    value: { point: null } });
-                this.activeObj = extend({}, this.objColl[this.objColl.length - 1]);
-                this.objColl.pop();
-                this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: this.activeObj } });
-            }
-        }
-    };
-    ImageEditor.prototype.isSelectionBiggerThanCanvas = function (obj) {
-        var isBigger = false;
-        if (obj.activePoint.startX <= this.img.destLeft ||
-            obj.activePoint.startY <= this.img.destTop ||
-            obj.activePoint.endX >= this.img.destLeft + this.img.destWidth ||
-            obj.activePoint.endY >= this.img.destTop + this.img.destHeight) {
-            isBigger = true;
-        }
-        return isBigger;
-    };
-    ImageEditor.prototype.isSelectionOutsideCanvas = function (obj) {
-        var isOutside = false;
-        if ((obj.activePoint.height < this.lowerCanvas.height - this.toolbarHeight) ||
-            (obj.activePoint.width < this.lowerCanvas.width)) {
-            isOutside = true;
-        }
-        return isOutside;
-    };
     /**
      * Set the old item Transform item state.
      *
@@ -17350,7 +17374,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         for (var i = 0; i < strArr.length; i++) {
             strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].slice(1);
         }
-        if (!isNullOrUndefined(obj)) {
+        if (obj) {
             obj['maxText'] = strArr.join('');
         }
         return strArr.join('');
@@ -17417,7 +17441,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
             }
         }
-        else if ((!isBlazor() && !isNullOrUndefined(document.querySelector('#' + this.element.id + '_sliderWrapper'))) || (isBlazor() && !this.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
+        else if ((!isBlazor() && document.querySelector('#' + this.element.id + '_sliderWrapper')) || (isBlazor() && !this.element.querySelector('.e-ie-contextual-slider').classList.contains('e-hidden')) ||
             this.currObjType.isFiltered) {
             this.initialAdjustmentValue = this.canvasFilter = this.lowerContext.filter;
             this.currObjType.isFiltered = false;
@@ -17479,7 +17503,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}.
      */
     ImageEditor.prototype.cropSelectedState = function () {
-        if (!isNullOrUndefined(this.activeObj.shape) && this.activeObj.shape.split('-')[0] === 'crop') {
+        if (this.activeObj.shape && this.activeObj.shape.split('-')[0] === 'crop') {
             this.okBtn();
         }
     };
@@ -17494,7 +17518,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var tempFilter = this.lowerContext.filter;
         this.lowerContext.filter = this.canvasFilter = 'none';
         var objColl = extend([], this.objColl, null, true);
+        var pointColl = extend([], this.pointColl, null, true);
         this.objColl = [];
+        this.pointColl = [];
+        this.freehandCounter = 0;
         this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
         var data = this.getImageData();
         if (!isBlazor()) {
@@ -17503,6 +17530,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.element.querySelector('#' + this.element.id + '_contextualToolbarArea').classList.remove('e-hide');
         }
         this.objColl = objColl;
+        this.pointColl = pointColl;
+        this.freehandCounter = pointColl.length;
         this.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
         this.lowerContext.filter = this.canvasFilter = tempFilter;
         return data;
@@ -17519,7 +17548,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         var finetuneValueChanging = { finetune: this.getFinetuneOption(type),
             value: value, cancel: false };
-        if (isBlazor() && !isNullOrUndefined(this.events) && this.events.finetuneValueChanging.hasDelegate === true) {
+        if (isBlazor() && this.events && this.events.finetuneValueChanging.hasDelegate === true) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             this.dotNetRef.invokeMethodAsync('OnFinetuneValueChangeAsync', finetuneValueChanging).then(function (finetuneValueChanging) {
                 if (finetuneValueChanging.cancel) {
@@ -17536,82 +17565,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.notify('filter', { prop: 'setCurrAdjValue', value: { type: type.toLowerCase(), value: value } });
         }
     };
-    /**
-     * Get the square point for rotated shape.
-     *
-     * @param { SelectionPoint } obj - Specifies the selection point.
-     * @param { Object } object - Specifies the object.
-     * @hidden
-     * @returns {ActivePoint}.
-     * An ActivePoint object which returns the square point.
-     */
-    ImageEditor.prototype.getSquarePointForRotatedShape = function (obj, object) {
-        var point = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
-        var center = { x: obj.activePoint.startX + (obj.activePoint.width / 2), y: obj.activePoint.startY +
-                (obj.activePoint.height / 2) };
-        var p1 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle)
-                * (obj.activePoint.startY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.startY
-                - center.y) + center.y };
-        var p2 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.startY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.startY
-                - center.y) + center.y };
-        var p3 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.startX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.startX - center.x) + Math.cos(obj.rotatedAngle) * (obj.activePoint.endY
-                - center.y) + center.y };
-        var p4 = { x: Math.cos(obj.rotatedAngle) * (obj.activePoint.endX - center.x) - Math.sin(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.x,
-            y: Math.sin(obj.rotatedAngle) * (obj.activePoint.endX - center.x) + Math.cos(obj.rotatedAngle) *
-                (obj.activePoint.endY - center.y) + center.y };
-        point.startX = p1.x;
-        point.startY = p1.y;
-        point.endX = p1.x;
-        point.endY = p1.y;
-        if (point.startX > p2.x) {
-            point.startX = p2.x;
-        }
-        if (point.startX > p3.x) {
-            point.startX = p3.x;
-        }
-        if (point.startX > p4.x) {
-            point.startX = p4.x;
-        }
-        if (point.startY > p2.y) {
-            point.startY = p2.y;
-        }
-        if (point.startY > p3.y) {
-            point.startY = p3.y;
-        }
-        if (point.startY > p4.y) {
-            point.startY = p4.y;
-        }
-        if (point.endX < p2.x) {
-            point.endX = p2.x;
-        }
-        if (point.endX < p3.x) {
-            point.endX = p3.x;
-        }
-        if (point.endX < p4.x) {
-            point.endX = p4.x;
-        }
-        if (point.endY < p2.y) {
-            point.endY = p2.y;
-        }
-        if (point.endY < p3.y) {
-            point.endY = p3.y;
-        }
-        if (point.endY < p4.y) {
-            point.endY = p4.y;
-        }
-        point.width = point.endX - point.startX;
-        point.height = point.endY - point.startY;
-        if (!isNullOrUndefined(object)) {
-            object['activePoint'] = point;
-        }
-        return point;
-    };
     /**
      * Get the square point for path.
      *
@@ -17700,14 +17653,14 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.notify('selection', { prop: 'redrawShape', value: { obj: this.objColl[this.objColl.length - 1] } });
         if (!isBlazor()) {
             if (Browser.isDevice) {
-                if (!isNullOrUndefined(document.getElementById(this.element.id + '_bottomToolbar'))) {
+                if (document.getElementById(this.element.id + '_bottomToolbar')) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var toolbar_1 = getComponent(this.element.id + '_bottomToolbar', 'toolbar');
                     toolbar_1.refreshOverflow();
                 }
             }
             else {
-                if (!isNullOrUndefined(document.getElementById(this.element.id + '_toolbar'))) {
+                if (document.getElementById(this.element.id + '_toolbar')) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                     var toolbar_2 = getComponent(this.element.id + '_toolbar', 'toolbar');
                     toolbar_2.refreshOverflow();
@@ -18141,9 +18094,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var obj = { adjustmentLevel: null };
         this.notify('filter', { prop: 'getAdjustmentLevel', onPropertyChange: false,
             value: { obj: obj } });
-        var value;
         var typeToAdjustmentLevel = { 'brightness': obj['adjustmentLevel'].brightness,
-            'contrast': value = obj['adjustmentLevel'].contrast, 'hue': obj['adjustmentLevel'].hue,
+            'contrast': obj['adjustmentLevel'].contrast, 'hue': obj['adjustmentLevel'].hue,
             'saturation': obj['adjustmentLevel'].saturation, 'opacity': obj['adjustmentLevel'].opacity,
             'blur': obj['adjustmentLevel'].blur, 'exposure': obj['adjustmentLevel'].exposure };
         return typeToAdjustmentLevel["" + type];
@@ -18162,7 +18114,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.cropSelectedState();
         this.notify('draw', { prop: 'resetCurrentSelectionPoint' });
         this.notify('transform', { prop: 'performTransformation', value: { text: type } });
-        this.moveToSelectionRange(type, activeObj);
+        this.notify('draw', { prop: 'moveToSelectionRange', value: { type: type, activeObj: activeObj } });
         this.isCropToolbar = false;
     };
     /**
@@ -18189,7 +18141,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.element = element;
         var canvasWrapper = this.element.querySelector('.e-canvas-wrapper');
-        if (!isNullOrUndefined(this.element.querySelector('#' + this.element.id + '_toolbar'))) {
+        if (this.element.querySelector('#' + this.element.id + '_toolbar')) {
             this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbar').clientHeight;
         }
         else {
@@ -18207,9 +18159,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         });
         this.upperCanvas.width = this.lowerCanvas.width = this.inMemoryCanvas.width = this.element.offsetWidth;
         this.upperCanvas.height = this.lowerCanvas.height = this.inMemoryCanvas.height = (this.element.offsetHeight - this.toolbarHeight);
-        this.baseImg = this.createElement('img', {
-            id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
-        });
         this.lowerContext = this.lowerCanvas.getContext('2d');
         this.baseImg = this.createElement('img', {
             id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
@@ -18709,6 +18658,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     };
     ToolbarModule.prototype.toolbar = function (args) {
+        var parent = this.parent;
         this.updatePrivateVariables();
         switch (args.prop) {
             case 'create-toolbar':
@@ -18781,19 +18731,19 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 this.selFhdColor = args.value['color'];
                 break;
             case 'getCurrentFilter':
-                args.value['obj']['currentFilter'] = this.parent.currentFilter;
+                args.value['obj']['currentFilter'] = parent.currentFilter;
                 break;
             case 'setCurrentFilter':
-                this.parent.currentFilter = args.value['filter'];
+                parent.currentFilter = args.value['filter'];
                 break;
             case 'setInitialAdjustmentValue':
-                this.parent.initialAdjustmentValue = args.value['value'];
+                parent.initialAdjustmentValue = args.value['value'];
                 break;
             case 'getCanvasFilter':
-                args.value['obj']['canvasFilter'] = this.parent.canvasFilter;
+                args.value['obj']['canvasFilter'] = parent.canvasFilter;
                 break;
             case 'setCanvasFilter':
-                this.parent.canvasFilter = args.value['filter'];
+                parent.canvasFilter = args.value['filter'];
                 break;
             case 'getDefToolbarItems':
                 args.value['obj']['defToolbarItems'] = this.defToolbarItems;
@@ -18805,7 +18755,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 this.performDefTbrClick(args.value['type'], args.value['isContextualToolbar'], args.value['isDisabledAdjustment'], args.value['isDisabledFilter'], args.value['isFilterFinetune']);
                 break;
             case 'setTempFilterProperties':
-                this.parent.setTempFilterProperties();
+                parent.setTempFilterProperties();
                 break;
             case 'refreshSlider':
                 this.refreshSlider();
@@ -18814,28 +18764,25 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 this.renderSlider(args.value['type']);
                 break;
             case 'getCurrAdjustmentValue':
-                this.parent.getCurrAdjustmentValue(args.value['type']);
+                parent.getCurrAdjustmentValue(args.value['type']);
                 break;
             case 'setCurrAdjustmentValue':
-                this.parent.setCurrAdjustmentValue(args.value['type'], args.value['value']);
+                parent.setCurrAdjustmentValue(args.value['type'], args.value['value']);
                 break;
             case 'refreshShapeDrawing':
                 this.refreshShapeDrawing();
                 break;
-            case 'getSquarePointForRotatedShape':
-                this.parent.getSquarePointForRotatedShape(args.value['obj'], args.value['object']);
-                break;
             case 'getCropToolbar':
-                args.value['obj']['isCropToolbar'] = this.parent.isCropToolbar;
+                args.value['obj']['isCropToolbar'] = parent.isCropToolbar;
                 break;
             case 'getPrevCurrSelectionPoint':
-                args.value['obj']['prevCurrSelectionPoint'] = this.parent.prevCurrSelectionPoint;
+                args.value['obj']['prevCurrSelectionPoint'] = parent.prevCurrSelectionPoint;
                 break;
             case 'setPrevCurrSelectionPoint':
-                this.parent.prevCurrSelectionPoint = args.value['point'];
+                parent.prevCurrSelectionPoint = args.value['point'];
                 break;
             case 'updateCropTransformItems':
-                this.parent.updateCropTransformItems();
+                parent.updateCropTransformItems();
                 break;
             case 'setEnableDisableUndoRedo':
                 this.preventEnableDisableUr = args.value['isPrevent'];
@@ -18848,52 +18795,54 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.updatePrivateVariables = function () {
         var parent = this.parent;
         this.inMemoryCanvas = parent.inMemoryCanvas;
-        if (!isNullOrUndefined(parent.lowerCanvas)) {
+        if (parent.lowerCanvas) {
             this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
-        if (!isNullOrUndefined(parent.upperCanvas)) {
+        if (parent.upperCanvas) {
             this.upperContext = parent.upperCanvas.getContext('2d');
         }
-        if (!isNullOrUndefined(this.inMemoryCanvas)) {
+        if (this.inMemoryCanvas) {
             this.inMemoryContext = this.inMemoryCanvas.getContext('2d');
         }
     };
     ToolbarModule.prototype.reset = function () {
+        var parent = this.parent;
         this.defToolbarItems = [];
         this.toolbarHeight = 46;
-        this.parent.prevCurrSelectionPoint = null;
+        parent.prevCurrSelectionPoint = null;
         this.zoomBtnHold = null;
         this.currToolbar = '';
         this.currentToolbar = 'main';
         this.selFhdColor = '#42a5f5';
-        this.parent.currentFilter = '';
-        this.preventZoomBtn = this.parent.isCropToolbar = this.preventEnableDisableUr = false;
-        this.parent.initialAdjustmentValue = this.parent.canvasFilter =
+        parent.currentFilter = '';
+        this.preventZoomBtn = parent.isCropToolbar = this.preventEnableDisableUr = false;
+        parent.initialAdjustmentValue = parent.canvasFilter =
             'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
                 'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
     };
     ToolbarModule.prototype.destroyTopToolbar = function () {
         var parent = this.parent;
-        if (this.isToolbar() && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar'))) &&
-            (!isNullOrUndefined(getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar')))) {
+        var toolbar = document.getElementById(parent.element.id + '_toolbar');
+        if (this.isToolbar() && toolbar && toolbar.classList.contains('e-control')) {
             getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
         }
     };
     ToolbarModule.prototype.destroyBottomToolbar = function () {
         var parent = this.parent;
-        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar')) &&
-            (!isNullOrUndefined(getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar')))) {
+        var toolbar = document.getElementById(parent.element.id + '_bottomToolbar');
+        if (toolbar && toolbar.classList.contains('e-control')) {
             getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
         }
     };
     ToolbarModule.prototype.isToolbar = function () {
-        return (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.length > 0)
-            || !isNullOrUndefined(this.parent.toolbarTemplate));
+        var parent = this.parent;
+        return (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)
+            || !isNullOrUndefined(parent.toolbarTemplate));
     };
     ToolbarModule.prototype.createToolbar = function () {
         var _this = this;
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.length > 0)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             parent.element.appendChild(parent.createElement('div', {
                 id: parent.element.id + '_toolbarArea', className: 'e-toolbar-area'
             }));
@@ -18919,10 +18868,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                             if (!parent.disabled) {
                                 if (Browser.isDevice) {
                                     if (_this.defToolbarItems.length > 0 &&
-                                        (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                                        document.getElementById(parent.element.id + '_toolbar')) {
                                         getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
                                     }
-                                    if (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar'))) {
+                                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
                                         getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
                                     }
                                     _this.initMainToolbar(false, Browser.isDevice, null);
@@ -18930,7 +18879,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                                 }
                                 else {
                                     if (_this.defToolbarItems.length > 0 &&
-                                        (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                                        document.getElementById(parent.element.id + '_toolbar')) {
                                         getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
                                     }
                                     _this.initMainToolbar(false, false, null);
@@ -18947,7 +18896,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 clicked: this.defToolbarClicked.bind(this) });
             toolbarObj.appendTo('#' + parent.element.id + '_toolbar');
             this.createLeftToolbarControls();
-            if (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar'))) {
+            if (document.getElementById(parent.element.id + '_toolbar')) {
                 this.toolbarHeight = document.getElementById(parent.element.id + '_toolbar').clientHeight;
             }
         }
@@ -18957,7 +18906,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     };
     ToolbarModule.prototype.createContextualToolbar = function () {
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.length > 0)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             parent.element.appendChild(parent.createElement('div', { id: parent.element.id + '_contextualToolbarArea',
                 className: 'e-contextual-toolbar-wrapper e-hide', attrs: { style: 'position: absolute;' }
             }));
@@ -18968,7 +18917,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     };
     ToolbarModule.prototype.createBottomToolbar = function () {
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.length > 0)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             parent.element.appendChild(parent.createElement('div', {
                 id: parent.element.id + '_bottomToolbarArea', className: 'e-bottom-toolbar'
             }));
@@ -19032,7 +18981,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             toolbarObj.appendTo('#' + parent.element.id + '_toolbar');
             this.createLeftToolbarControls();
             this.enableDisableTbrBtn();
-            if (this.isToolbar() && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+            if (this.isToolbar() && document.getElementById(parent.element.id + '_toolbar')) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 var toolbar_4 = getComponent(parent.element.id + '_toolbar', 'toolbar');
                 toolbar_4.refreshOverflow();
@@ -19042,7 +18991,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.initBottomToolbar = function () {
         var _this = this;
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.length > 0)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             var items = this.getMainToolbarItem();
             var toolbarObj = new Toolbar({ items: items, width: '100%',
                 created: function () {
@@ -19054,7 +19003,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 clicked: this.defToolbarClicked.bind(this)
             });
             toolbarObj.appendTo('#' + parent.element.id + '_bottomToolbar');
-            if (this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar')))) {
+            if (this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 var toolbar_5 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
                 toolbar_5.refreshOverflow();
@@ -19069,21 +19018,21 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
         }
         if (parent.allowUndoRedo) {
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Undo') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Undo') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_undo', prefixIcon: 'e-icons e-undo', cssClass: 'top-icon e-undo',
                     tooltipText: this.l10n.getConstant('Undo'), align: 'Left' });
             }
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Redo') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Redo') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_redo', prefixIcon: 'e-icons e-redo', cssClass: 'top-icon e-redo',
                     tooltipText: this.l10n.getConstant('Redo'), align: 'Left' });
             }
         }
         if (!this.preventZoomBtn && (parent.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('ZoomOut') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('ZoomOut') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_zoomOut', prefixIcon: 'e-icons e-zoom-out', cssClass: 'top-icon e-dec-zoom',
                     tooltipText: this.l10n.getConstant('ZoomOut'), align: 'Left' });
             }
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('ZoomIn') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('ZoomIn') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_zoomIn', prefixIcon: 'e-icons e-zoom-in', cssClass: 'top-icon e-inc-zoom',
                     tooltipText: this.l10n.getConstant('ZoomIn'), align: 'Left' });
             }
@@ -19103,12 +19052,12 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Reset') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Reset') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_reset', prefixIcon: 'e-icons e-btn-reset', cssClass: 'top-icon e-img-reset',
                 tooltipText: this.l10n.getConstant('Reset'), align: 'Right' });
         }
         if (!isOkBtn) {
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Save') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Save') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_save', prefixIcon: 'e-icons e-btn-save', cssClass: 'top-icon e-save',
                     tooltipText: this.l10n.getConstant('Save'), align: 'Right', template: '<button id="' + parent.element.id + '_saveBtn"></button>' });
             }
@@ -19122,19 +19071,19 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.getMainToolbarItem = function (isApplyOption) {
         var parent = this.parent;
         var toolbarItems = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Crop') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Crop') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_cropTransform', prefixIcon: 'e-icons e-crop', cssClass: 'top-icon e-crop',
                 tooltipText: this.l10n.getConstant('CropAndTransform'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Annotate') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Annotate') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + this.parent.element.id + '_annotationBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Finetune') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Finetune') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_adjustment', prefixIcon: 'e-icons e-adjustment', cssClass: 'top-icon e-adjustment',
                 tooltipText: this.l10n.getConstant('Finetune'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Filter') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Filter') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_filter', prefixIcon: 'e-icons e-filters', cssClass: 'top-icon e-filters',
                 tooltipText: this.l10n.getConstant('Filter'), align: 'Center' });
         }
@@ -19197,7 +19146,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 if (typeof (parent.toolbar[i]) === 'object') {
                     if (isNullOrUndefined(parent.toolbar[i].align)) {
                         if (position === 'left') {
-                            toolbarItems.push(this.parent.toolbar[i]);
+                            toolbarItems.push(parent.toolbar[i]);
                         }
                     }
                     else if (parent.toolbar[i].align.toLowerCase() === position) {
@@ -19223,13 +19172,13 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.wireZoomBtnEvents = function () {
         var zoomIn = document.querySelector('#' + this.parent.element.id + '_zoomIn');
         var zoomOut = document.querySelector('#' + this.parent.element.id + '_zoomOut');
-        if (!isNullOrUndefined(zoomIn)) {
+        if (zoomIn) {
             zoomIn.addEventListener('mousedown', this.zoomInBtnMouseDownHandler.bind(this));
             zoomIn.addEventListener('mouseup', this.zoomBtnMouseUpHandler.bind(this));
             zoomIn.addEventListener('click', this.zoomInBtnClickHandler.bind(this));
             zoomIn.addEventListener('touchstart', this.zoomInBtnClickHandler.bind(this));
         }
-        if (!isNullOrUndefined(zoomOut)) {
+        if (zoomOut) {
             zoomOut.addEventListener('mousedown', this.zoomOutBtnMouseDownHandler.bind(this));
             zoomOut.addEventListener('mouseup', this.zoomBtnMouseUpHandler.bind(this));
             zoomOut.addEventListener('click', this.zoomOutBtnClickHandler.bind(this));
@@ -19244,58 +19193,58 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             var undoRedoObj = { undoRedoStep: null };
             parent.notify('undo-redo', { prop: 'getUndoRedoStep', value: { obj: undoRedoObj } });
             var undo = document.querySelector('#' + parent.element.id + '_undo');
-            if (!isNullOrUndefined(undo) && undoRedoObj['undoRedoStep'] === 0) {
+            if (undo && undoRedoObj['undoRedoStep'] === 0) {
                 undo.classList.add('e-disabled');
                 undo.parentElement.classList.add('e-overlay');
             }
-            else if (!isNullOrUndefined(undo) && undoRedoObj['undoRedoStep'] > 0) {
+            else if (undo && undoRedoObj['undoRedoStep'] > 0) {
                 undo.classList.remove('e-disabled');
                 undo.parentElement.classList.remove('e-overlay');
             }
             var redo = document.querySelector('#' + parent.element.id + '_redo');
-            if (!isNullOrUndefined(redo) && (undoRedoObj['undoRedoStep'] === object['appliedUndoRedoColl'].length)) {
+            if (redo && (undoRedoObj['undoRedoStep'] === object['appliedUndoRedoColl'].length)) {
                 redo.classList.add('e-disabled');
                 redo.parentElement.classList.add('e-overlay');
             }
-            else if (!isNullOrUndefined(redo) && (undoRedoObj['undoRedoStep'] === 0 && object['appliedUndoRedoColl'].length > 0)) {
+            else if (redo && (undoRedoObj['undoRedoStep'] === 0 && object['appliedUndoRedoColl'].length > 0)) {
                 redo.classList.remove('e-disabled');
                 redo.parentElement.classList.remove('e-overlay');
             }
-            else if (!isNullOrUndefined(redo) && undoRedoObj['undoRedoStep'] > 0) {
+            else if (redo && undoRedoObj['undoRedoStep'] > 0) {
                 redo.classList.remove('e-disabled');
                 redo.parentElement.classList.remove('e-overlay');
             }
         }
         var zoomIn = document.querySelector('#' + parent.element.id + '_zoomIn');
-        if (!isNullOrUndefined(zoomIn) && parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor) {
+        if (zoomIn && parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor) {
             zoomIn.classList.add('e-disabled');
             zoomIn.parentElement.classList.add('e-overlay');
         }
-        else if (!isNullOrUndefined(zoomIn)) {
+        else if (zoomIn) {
             zoomIn.classList.remove('e-disabled');
             zoomIn.parentElement.classList.remove('e-overlay');
         }
         var zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
-        if (!isNullOrUndefined(zoomOut) && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
+        if (zoomOut && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
             zoomOut.classList.add('e-disabled');
             zoomOut.parentElement.classList.add('e-overlay');
         }
-        else if (!isNullOrUndefined(zoomOut)) {
+        else if (zoomOut) {
             zoomOut.classList.remove('e-disabled');
             zoomOut.parentElement.classList.remove('e-overlay');
         }
         var pan = document.querySelector('#' + parent.element.id + '_pan');
-        if (!isNullOrUndefined(pan) && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
+        if (pan && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
             pan.style.display = 'none';
         }
-        else if (!isNullOrUndefined(pan)) {
+        else if (pan) {
             pan.style.display = 'block';
         }
     };
     ToolbarModule.prototype.createLeftToolbarControls = function () {
         var parent = this.parent;
         if (this.defToolbarItems !== undefined && this.defToolbarItems.length > 0 &&
-            (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+            (document.getElementById(parent.element.id + '_toolbar'))) {
             var uploadDiv = document.getElementById(parent.element.id + '_toolbar')
                 .querySelector('.e-image-upload');
             if (uploadDiv) {
@@ -19317,25 +19266,25 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var _this = this;
         var parent = this.parent;
         var items = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Pen') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Pen') > -1)) {
             items.push({ text: this.l10n.getConstant('Pen'), id: 'pen', iconCss: 'e-icons e-free-pen' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && parent.toolbar.indexOf('Line') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Line') > -1)) {
             items.push({ text: this.l10n.getConstant('Line'), id: 'line', iconCss: 'e-icons e-line' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Rectangle') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Rectangle') > -1)) {
             items.push({ text: this.l10n.getConstant('Rectangle'), id: 'rectangle', iconCss: 'e-icons e-rectangle' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Ellipse') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Ellipse') > -1)) {
             items.push({ text: this.l10n.getConstant('Ellipse'), id: 'ellipse', iconCss: 'e-icons e-circle' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(toolbar) && parent.toolbar.indexOf('Arrow') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Arrow') > -1)) {
             items.push({ text: this.l10n.getConstant('Arrow'), id: 'arrow', iconCss: 'e-icons e-arrow-right-up' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Path') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Path') > -1)) {
             items.push({ text: this.l10n.getConstant('Path'), id: 'path', iconCss: 'e-icons e-critical-path' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Text') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Text') > -1)) {
             items.push({ text: this.l10n.getConstant('Text'), id: 'text', iconCss: 'e-icons e-add-text' });
         }
         var obj = { freehandDrawSelectedId: null };
@@ -19344,7 +19293,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var removeElement = document.querySelector('#' + parent.element.id + '_remove');
         var editTextElement = document.querySelector('#' + parent.element.id + '_editText');
         if ((parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) &&
-            (isNullOrUndefined(parent.activeObj.pointColl) || (!isNullOrUndefined(parent.activeObj.pointColl)
+            (isNullOrUndefined(parent.activeObj.pointColl) || (parent.activeObj.pointColl
                 && parent.activeObj.pointColl.length === 0)) &&
             isNullOrUndefined(obj['freehandDrawSelectedId'])) {
             if (duplicateElement) {
@@ -19376,10 +19325,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
                         args.element.parentElement.offsetHeight + 'px';
                 }
-                if (!isNullOrUndefined(_this.parent.activeObj.shape)) {
-                    document.getElementById(_this.parent.activeObj.shape).classList.add('e-selected');
+                if (parent.activeObj.shape) {
+                    document.getElementById(parent.activeObj.shape).classList.add('e-selected');
                 }
-                else if (_this.parent.togglePen) {
+                else if (parent.togglePen) {
                     document.getElementById('pen').classList.add('e-selected');
                 }
             },
@@ -19434,22 +19383,22 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + this.parent.element.id + '_annotationBtn');
+        drpDownBtn.appendTo('#' + parent.element.id + '_annotationBtn');
     };
     ToolbarModule.prototype.renderCropBtn = function () {
         var _this = this;
         var parent = this.parent;
         var items = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('CustomSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('CustomSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Custom'), id: 'custom', iconCss: 'e-icons e-custom' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('CircleSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('CircleSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Circle'), id: 'circle', iconCss: 'e-icons e-circle' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('SquareSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('SquareSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Square'), id: 'square', iconCss: 'e-icons e-square' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('RatioSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('RatioSelection') > -1)) {
             items.push({ text: '3:2', id: '3:2', iconCss: 'e-icons e-custom-a' });
             items.push({ text: '4:3', id: '4:3', iconCss: 'e-icons e-custom-b' });
             items.push({ text: '5:4', id: '5:4', iconCss: 'e-icons e-custom-c' });
@@ -19458,11 +19407,11 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
         var iconCss;
         var shape;
-        if (!isNullOrUndefined(parent.activeObj.shape)) {
+        if (parent.activeObj.shape) {
             iconCss = this.getCurrentShapeIcon(parent.activeObj.shape);
             shape = parent.activeObj.shape;
         }
-        else if (!isNullOrUndefined(parent.currSelectionPoint)) {
+        else if (parent.currSelectionPoint) {
             iconCss = this.getCurrentShapeIcon(parent.currSelectionPoint.shape);
             shape = parent.currSelectionPoint.shape;
         }
@@ -19479,8 +19428,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
                         args.element.parentElement.offsetHeight + 'px';
                 }
-                if (!isNullOrUndefined(_this.parent.activeObj.shape) && _this.parent.activeObj.shape.split('-').length > 1) {
-                    document.getElementById(_this.parent.activeObj.shape.split('-')[1]).classList.add('e-selected');
+                if (parent.activeObj.shape && parent.activeObj.shape.split('-').length > 1) {
+                    document.getElementById(parent.activeObj.shape.split('-')[1]).classList.add('e-selected');
                 }
                 parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
             },
@@ -19493,21 +19442,21 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             iconCss: 'e-icons ' + iconCss, cssClass: 'e-image-popup',
             content: parent.toPascalCase(shape.replace('crop-', ''))
         });
-        drpDownBtn.appendTo('#' + this.parent.element.id + '_cropBtn');
+        drpDownBtn.appendTo('#' + parent.element.id + '_cropBtn');
     };
     ToolbarModule.prototype.renderTransformBtn = function () {
         var parent = this.parent;
         var items = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('RotateLeft') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('RotateLeft') > -1)) {
             items.push({ text: this.l10n.getConstant('RotateLeft'), id: 'rotateleft', iconCss: 'e-icons e-anti-clock-wise' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('RotateRight') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('RotateRight') > -1)) {
             items.push({ text: this.l10n.getConstant('RotateRight'), id: 'rotateright', iconCss: 'e-icons e-clock-wise' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('FlipHorizontal') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('FlipHorizontal') > -1)) {
             items.push({ text: this.l10n.getConstant('HorizontalFlip'), id: 'horizontalflip', iconCss: 'e-icons e-horizontal-flip' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('FlipVertical') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('FlipVertical') > -1)) {
             items.push({ text: this.l10n.getConstant('VerticalFlip'), id: 'verticalflip', iconCss: 'e-icons e-vertical-flip' });
         }
         var drpDownBtn = new DropDownButton({
@@ -19520,27 +19469,27 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     args.element.parentElement.style.display = 'block';
                 }
             },
-            items: items, select: this.parent.transformSelect.bind(this),
+            items: items, select: parent.transformSelect.bind(this),
             iconCss: 'e-icons e-transform', cssClass: 'e-image-popup'
         });
         drpDownBtn.appendTo('#' + parent.element.id + '_transformBtn');
     };
     ToolbarModule.prototype.renderSaveBtn = function () {
-        var imageEditorObj = this.parent;
+        var parent = this.parent;
         var saveItems = [
             { text: 'JPEG', id: 'jpeg' },
             { text: 'PNG', id: 'png' },
             { text: 'SVG', id: 'svg' }
         ];
-        var ddbElem = document.getElementById(this.parent.element.id + '_saveBtn');
+        var ddbElem = document.getElementById(parent.element.id + '_saveBtn');
         if (ddbElem) {
             // Initialize the DropDownButton component.
             var saveDrpDownBtn = new DropDownButton({ items: saveItems, cssClass: 'e-caret-hide e-image-popup', iconCss: 'e-icons e-save',
                 select: function (args) {
-                    imageEditorObj.export(args.item.text);
+                    parent.export(args.item.text);
                 }
             });
-            saveDrpDownBtn.appendTo('#' + this.parent.element.id + '_saveBtn');
+            saveDrpDownBtn.appendTo('#' + parent.element.id + '_saveBtn');
         }
     };
     ToolbarModule.prototype.getCropTransformToolbarItem = function () {
@@ -19550,19 +19499,19 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             template: '<button id="' + parent.element.id + '_cropBtn"></button>'
         });
         toolbarItems.push({ align: 'Center', type: 'Separator' });
-        toolbarItems.push({ id: this.parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
+        toolbarItems.push({ id: parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
             tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
-        toolbarItems.push({ id: this.parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise',
+        toolbarItems.push({ id: parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise',
             tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
         toolbarItems.push({ align: 'Center', type: 'Separator' });
-        toolbarItems.push({ id: this.parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
+        toolbarItems.push({ id: parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
             tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
-        toolbarItems.push({ id: this.parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip',
+        toolbarItems.push({ id: parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip',
             tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: this.parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: this.parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
@@ -19570,31 +19519,31 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.getShapesToolbarItem = function (items) {
         var parent = this.parent;
         var toolbarItems = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar))) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar)) {
             toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + this.parent.element.id + '_annotationBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
         }
         if (items.indexOf('fillColor') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: this.parent.element.id + '_fillcolor',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_fillcolor',
                 cssClass: 'top-icon e-fill', tooltipText: this.l10n.getConstant('FillColor'), align: 'Center', type: 'Input',
-                template: '<button id="' + this.parent.element.id + '_fillColorBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_fillColorBtn"></button>' });
         }
         if (items.indexOf('strokeColor') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: this.parent.element.id + '_strokecolor',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_strokecolor',
                 cssClass: 'top-icon e-stroke', tooltipText: this.l10n.getConstant('StrokeColor'), align: 'Center', type: 'Input',
-                template: '<button id="' + this.parent.element.id + '_borderColorBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_borderColorBtn"></button>' });
         }
         if (items.indexOf('strokeWidth') > -1) {
-            toolbarItems.push({ id: this.parent.element.id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: 'Stroke Width', align: 'Center',
-                type: 'Input', template: '<button id="' + this.parent.element.id + '_borderWidthBtn"></button>' });
+            toolbarItems.push({ id: parent.element.id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: 'Stroke Width', align: 'Center',
+                type: 'Input', template: '<button id="' + parent.element.id + '_borderWidthBtn"></button>' });
         }
         if (items.indexOf('start') > -1) {
-            toolbarItems.push({ id: this.parent.element.id + '_start', cssClass: 'top-icon e-size', tooltipText: 'Start', align: 'Center',
-                type: 'Input', template: '<button id="' + this.parent.element.id + '_startBtn"></button>' });
+            toolbarItems.push({ id: parent.element.id + '_start', cssClass: 'top-icon e-size', tooltipText: 'Start', align: 'Center',
+                type: 'Input', template: '<button id="' + parent.element.id + '_startBtn"></button>' });
         }
         if (items.indexOf('end') > -1) {
-            toolbarItems.push({ id: this.parent.element.id + '_end', cssClass: 'top-icon e-size', tooltipText: 'End', align: 'Center',
-                type: 'Input', template: '<button id="' + this.parent.element.id + '_endBtn"></button>' });
+            toolbarItems.push({ id: parent.element.id + '_end', cssClass: 'top-icon e-size', tooltipText: 'End', align: 'Center',
+                type: 'Input', template: '<button id="' + parent.element.id + '_endBtn"></button>' });
         }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
         if (items.indexOf('duplicate') > -1) {
@@ -19617,9 +19566,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             var obj = { shape: null };
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
             if (obj['shape'] !== 'path') {
-                toolbarItems.push({ id: this.parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+                toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                     tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-                toolbarItems.push({ id: this.parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+                toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                     tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
             }
         }
@@ -19627,6 +19576,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     };
     ToolbarModule.prototype.initCropTransformToolbar = function () {
         var _this = this;
+        var parent = this.parent;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getCropTransformToolbarItem();
@@ -19647,9 +19597,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 if (!Browser.isDevice) {
                     _this.renderSaveBtn();
                 }
-                _this.parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
+                parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_bottomToolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -19658,22 +19608,22 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
                 }
-                _this.parent.select('custom');
+                parent.select('custom');
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + this.parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + this.parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + parent.element.id + '_toolbar');
         }
         this.enableDisableTbrBtn();
-        this.parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
+        parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
     };
     ToolbarModule.prototype.getCurrentShapeIcon = function (shape) {
         var icon = '';
@@ -19684,9 +19634,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             case 'ellipse':
                 icon = 'e-circle';
                 break;
-            case 'triangle':
-                icon = 'e-triangle';
-                break;
             case 'line':
                 icon = 'e-line';
                 break;
@@ -19734,6 +19681,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     };
     ToolbarModule.prototype.initShapesToolbarItem = function (items) {
         var _this = this;
+        var parent = this.parent;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getShapesToolbarItem(items);
@@ -19752,7 +19700,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 _this.renderAnnotationBtn(true);
                 _this.createShapeColor(items);
                 _this.createShapeBtn(items);
-                if (_this.parent.activeObj.shape === 'arrow') {
+                if (parent.activeObj.shape === 'arrow') {
                     _this.createStartBtn();
                     _this.createEndBtn();
                 }
@@ -19760,9 +19708,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 if (!Browser.isDevice) {
                     _this.renderSaveBtn();
                 }
-                _this.parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
+                parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_bottomToolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -19771,7 +19719,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -19779,15 +19727,14 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + this.parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + this.parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + parent.element.id + '_toolbar');
         }
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.createShapeColor = function (items) {
-        var _this = this;
         var parent = this.parent;
         if (items.indexOf('fillColor') > -1) {
             parent.element.querySelector('.e-template.e-fill').appendChild(parent.createElement('input', {
@@ -19797,7 +19744,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 modeSwitcher: false, noColor: true, value: '',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-fill-color',
                 change: function (args) {
-                    _this.parent.updateFillColor(args.currentValue.hex);
+                    parent.updateFillColor(args.currentValue.hex);
                     if (args.currentValue.rgba === '') {
                         fillDDB_1.element.children[0].classList.add('e-nocolor-item');
                     }
@@ -19818,7 +19765,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 },
                 target: '.e-shape-fill-color',
                 iconCss: 'e-dropdownbtn-preview'
-            }, '#' + this.parent.element.id + '_fillColorBtn');
+            }, '#' + parent.element.id + '_fillColorBtn');
             fillColor.inline = true;
             parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview').classList.add('e-nocolor-item');
         }
@@ -19830,7 +19777,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 modeSwitcher: false, noColor: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-stroke-color',
                 change: function (args) {
-                    _this.parent.updateStrokeColor(args.currentValue.hex);
+                    parent.updateStrokeColor(args.currentValue.hex);
                     strokeDDB_1.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_1.toggle();
                 }
@@ -19840,7 +19787,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     if (Browser.isDevice) {
                         args.element.parentElement.style.top = strokeDDB_1.element.getBoundingClientRect().top -
                             args.element.parentElement.offsetHeight + 'px';
-                        args.element.parentElement.style.left = _this.parent.element.offsetLeft + 'px';
+                        args.element.parentElement.style.left = parent.element.offsetLeft + 'px';
                     }
                 },
                 target: '.e-shape-stroke-color',
@@ -19851,7 +19798,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.createShapeBtn = function (items) {
-        var _this = this;
         var parent = this.parent;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('XSmall') },
@@ -19880,18 +19826,18 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 },
                 select: function (args) {
                     spanElem_1.textContent = args.item.text;
-                    _this.parent.updateStrokeWidth(args.item.id);
+                    parent.updateStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
-                        if (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_bottomToolbar'))) {
+                        if (document.getElementById(parent.element.id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_6 = getComponent(_this.parent.element.id + '_bottomToolbar', 'toolbar');
+                            var toolbar_6 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
                             toolbar_6.refreshOverflow();
                         }
                     }
                     else {
-                        if (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar'))) {
+                        if (document.getElementById(parent.element.id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_7 = getComponent(_this.parent.element.id + '_toolbar', 'toolbar');
+                            var toolbar_7 = getComponent(parent.element.id + '_toolbar', 'toolbar');
                             toolbar_7.refreshOverflow();
                         }
                     }
@@ -19915,10 +19861,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         ];
         var strokeWidthBtn = document.getElementById(parent.element.id + '_startBtn');
         var spanElem = document.createElement('span');
-        if (isNullOrUndefined(this.parent.activeObj.start)) {
-            this.parent.activeObj.start = 'none';
+        if (isNullOrUndefined(parent.activeObj.start)) {
+            parent.activeObj.start = 'none';
         }
-        spanElem.innerHTML = this.parent.pascalToSplitWords(this.parent.activeObj.start);
+        spanElem.innerHTML = parent.pascalToSplitWords(parent.activeObj.start);
         spanElem.className = 'e-shape-start';
         strokeWidthBtn.appendChild(spanElem);
         // Initialize the DropDownButton component.
@@ -19955,10 +19901,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         ];
         var strokeEndBtn = document.getElementById(parent.element.id + '_endBtn');
         var spanElem = document.createElement('span');
-        if (isNullOrUndefined(this.parent.activeObj.end)) {
-            this.parent.activeObj.end = 'arrowSolid';
+        if (isNullOrUndefined(parent.activeObj.end)) {
+            parent.activeObj.end = 'arrowSolid';
         }
-        spanElem.innerHTML = this.parent.pascalToSplitWords(this.parent.activeObj.end);
+        spanElem.innerHTML = parent.pascalToSplitWords(parent.activeObj.end);
         spanElem.className = 'e-shape-end';
         strokeEndBtn.appendChild(spanElem);
         // Initialize the DropDownButton component.
@@ -19984,9 +19930,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.getTextToolbarItem = function (items) {
         var parent = this.parent;
         var toolbarItems = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar))) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar)) {
             toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + this.parent.element.id + '_annotationBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
         }
         if (items.indexOf('fontFamily') > -1) {
             toolbarItems.push({ id: parent.element.id + '_fontFamily', cssClass: 'top-icon e-img-font-family',
@@ -20071,7 +20017,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
                 parent.trigger('toolbarCreated', { toolbarType: 'text' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -20080,7 +20026,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -20096,9 +20042,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.createTextColor = function (items) {
-        var _this = this;
         var parent = this.parent;
-        if (items.indexOf('fontColor') > -1 && !isNullOrUndefined(parent.element.querySelector('.e-template.e-text-font-color'))) {
+        if (items.indexOf('fontColor') > -1 && parent.element.querySelector('.e-template.e-text-font-color')) {
             parent.element.querySelector('.e-template.e-text-font-color').appendChild(parent.createElement('input', {
                 id: parent.element.id + '_text_font'
             }));
@@ -20106,7 +20051,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
                 change: function (args) {
-                    _this.parent.updateFontColor(args.currentValue.hex);
+                    parent.updateFontColor(args.currentValue.hex);
                     strokeDDB_2.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_2.toggle();
                 }
@@ -20140,7 +20085,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 spanElem_2.innerHTML = 'Arial';
             }
             spanElem_2.className = 'e-text-font-family';
-            if (!isNullOrUndefined(fontNameBtn)) {
+            if (fontNameBtn) {
                 fontNameBtn.appendChild(spanElem_2);
             }
             var fontFamilyBtn_1 = new DropDownButton({ items: this.getFontFamilyItems(),
@@ -20201,24 +20146,25 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.refreshToolbar = function (type, isApplyBtn, isCropping, isZooming, cType) {
-        if (!this.parent.isImageLoaded || this.parent.isCropToolbar) {
+        var parent = this.parent;
+        if (!parent.isImageLoaded || parent.isCropToolbar) {
             return;
         }
         var args = { toolbarType: type };
         if (type !== 'filter' && type !== 'color') {
-            if (document.getElementById(this.parent.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
-                getComponent(document.getElementById(this.parent.element.id + '_toolbar'), 'toolbar').destroy();
-                document.getElementById(this.parent.element.id + '_toolbar').innerHTML = '';
+            if (document.getElementById(parent.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
+                getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
+                document.getElementById(parent.element.id + '_toolbar').innerHTML = '';
             }
-            if (document.getElementById(this.parent.element.id + '_bottomToolbar') && this.defToolbarItems.length > 0) {
-                if (document.getElementById(this.parent.element.id + '_bottomToolbar').className.indexOf('e-control') > -1) {
-                    getComponent(document.getElementById(this.parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
-                    document.getElementById(this.parent.element.id + '_bottomToolbar').innerHTML = '';
+            if (document.getElementById(parent.element.id + '_bottomToolbar') && this.defToolbarItems.length > 0) {
+                if (document.getElementById(parent.element.id + '_bottomToolbar').className.indexOf('e-control') > -1) {
+                    getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
+                    document.getElementById(parent.element.id + '_bottomToolbar').innerHTML = '';
                 }
             }
         }
         this.refreshSlider();
-        this.parent.isCropTab = false;
+        parent.isCropTab = false;
         switch (type) {
             case 'main':
                 if (Browser.isDevice) {
@@ -20245,16 +20191,16 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                if (this.parent.activeObj.shape === 'line' || this.parent.activeObj.shape === 'path') {
+                if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'path') {
                     args.toolbarItems = ['strokeColor', 'strokeWidth', 'duplicate', 'remove'];
                 }
-                else if (this.parent.activeObj.shape === 'arrow') {
+                else if (parent.activeObj.shape === 'arrow') {
                     args.toolbarItems = ['strokeColor', 'strokeWidth', 'start', 'end', 'duplicate', 'remove'];
                 }
                 else {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'duplicate', 'remove'];
                 }
-                this.parent.trigger('toolbarUpdating', args);
+                parent.trigger('toolbarUpdating', args);
                 this.initShapesToolbarItem(args.toolbarItems);
                 break;
             case 'text':
@@ -20262,7 +20208,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     this.initMainToolbar(false, true, true);
                 }
                 args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'bold', 'italic', 'duplicate', 'remove', 'text'];
-                this.parent.trigger('toolbarUpdating', args);
+                parent.trigger('toolbarUpdating', args);
                 this.initTextToolbarItem(args.toolbarItems);
                 break;
             case 'pen':
@@ -20270,7 +20216,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     this.initMainToolbar(false, true, true);
                 }
                 args.toolbarItems = ['strokeColor', 'strokeWidth', 'remove'];
-                this.parent.trigger('toolbarUpdating', args);
+                parent.trigger('toolbarUpdating', args);
                 this.initPenToolbarItem(args.toolbarItems);
                 break;
             case 'adjustment':
@@ -20286,11 +20232,11 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 this.updateContextualToolbar(type, cType);
                 break;
             case 'croptransform':
-                this.parent.isCropTab = true;
+                parent.isCropTab = true;
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                this.parent.updateCropTransformItems();
+                parent.updateCropTransformItems();
                 this.initCropTransformToolbar();
                 break;
         }
@@ -20299,32 +20245,33 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     };
     ToolbarModule.prototype.getAdjustmentToolbarItem = function () {
         var toolbarItems = [];
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Brightness') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_brightness', prefixIcon: 'e-icons e-brightness', cssClass: 'top-icon e-brightness',
+        var parent = this.parent;
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Brightness') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_brightness', prefixIcon: 'e-icons e-brightness', cssClass: 'top-icon e-brightness',
                 tooltipText: this.l10n.getConstant('Brightness'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Contrast') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_contrast', prefixIcon: 'e-icons e-contrast', cssClass: 'top-icon e-contrast',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Contrast') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_contrast', prefixIcon: 'e-icons e-contrast', cssClass: 'top-icon e-contrast',
                 tooltipText: this.l10n.getConstant('Contrast'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Hue') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_hue', prefixIcon: 'e-icons e-fade', cssClass: 'top-icon e-fade',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Hue') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_hue', prefixIcon: 'e-icons e-fade', cssClass: 'top-icon e-fade',
                 tooltipText: this.l10n.getConstant('Hue'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Saturation') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_saturation', prefixIcon: 'e-icons e-saturation', cssClass: 'top-icon e-saturation',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Saturation') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_saturation', prefixIcon: 'e-icons e-saturation', cssClass: 'top-icon e-saturation',
                 tooltipText: this.l10n.getConstant('Saturation'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Exposure') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_exposure', prefixIcon: 'e-icons e-grain', cssClass: 'top-icon e-grain',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Exposure') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_exposure', prefixIcon: 'e-icons e-grain', cssClass: 'top-icon e-grain',
                 tooltipText: this.l10n.getConstant('Exposure'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Opacity') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_opacity', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Opacity') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_opacity', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
                 tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Blur') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_blur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-tint',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Blur') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_blur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-tint',
                 tooltipText: this.l10n.getConstant('Blur'), align: 'Center' });
         }
         var tempToolbarItems = this.processToolbar('center');
@@ -20332,49 +20279,50 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             toolbarItems.push(tempToolbarItems[i]);
         }
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: this.parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: this.parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
     ToolbarModule.prototype.getFilterToolbarItem = function () {
         var toolbarItems = [];
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Default') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        var parent = this.parent;
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Default'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Chrome') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Chrome'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Cold') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Cold'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Warm') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Warm'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Grayscale') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Grayscale'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Sepia') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Sepia'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Invert') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Invert'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
         }
         var tempToolbarItems = this.processToolbar('center');
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -20385,20 +20333,20 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.getPenToolbarItem = function (items) {
         var parent = this.parent;
         var toolbarItems = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar))) {
+        if (isNullOrUndefined(parent.toolbar) || parent.toolbar) {
             toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + this.parent.element.id + '_annotationBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
         }
         if (items.indexOf('strokeColor') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: this.parent.element.id + '_pen_strokecolor',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_pen_strokecolor',
                 cssClass: 'top-icon e-pen-stroke-color',
                 tooltipText: this.l10n.getConstant('StrokeColor'), align: 'Center', type: 'Input',
-                template: '<button id="' + this.parent.element.id + '_penColorBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_penColorBtn"></button>' });
         }
         if (items.indexOf('strokeWidth') > -1) {
             toolbarItems.push({ prefixIcon: 'e-icons e-copy', cssClass: 'top-icon e-size',
                 tooltipText: this.l10n.getConstant('StrokeWidth'),
-                align: 'Center', type: 'Input', template: '<button id="' + this.parent.element.id + '_penStrokeWidth"></button>' });
+                align: 'Center', type: 'Input', template: '<button id="' + parent.element.id + '_penStrokeWidth"></button>' });
         }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
         if (items.indexOf('remove') > -1) {
@@ -20410,15 +20358,16 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             toolbarItems.push(tempToolbarItems[i]);
         }
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: this.parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: this.parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
     ToolbarModule.prototype.initPenToolbarItem = function (items) {
         var _this = this;
+        var parent = this.parent;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getPenToolbarItem(items);
@@ -20441,9 +20390,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 if (!Browser.isDevice) {
                     _this.renderSaveBtn();
                 }
-                _this.parent.trigger('toolbarCreated', { toolbarType: 'pen' });
+                parent.trigger('toolbarCreated', { toolbarType: 'pen' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -20451,7 +20400,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -20459,17 +20408,16 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + this.parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + this.parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + parent.element.id + '_toolbar');
         }
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.createPenColor = function (items) {
         var _this = this;
         var parent = this.parent;
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
         if (items.indexOf('strokeColor') > -1) {
             parent.element.querySelector('.e-template.e-pen-stroke-color').appendChild(parent.createElement('input', {
                 id: parent.element.id + '_pen_stroke'
@@ -20478,7 +20426,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-pen-color',
                 change: function (args) {
-                    _this.parent.updatePenStrokeColor(args.currentValue.hex);
+                    parent.updatePenStrokeColor(args.currentValue.hex);
                     _this.selFhdColor = args.currentValue.hex;
                     strokeDDB_3.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_3.toggle();
@@ -20501,7 +20449,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             var indexObj = { freehandSelectedIndex: null };
             parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
             if (!isNullOrUndefined(indexObj['freehandSelectedIndex']) && indexObj['freehandSelectedIndex'] > -1) {
-                this.parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview').style.background
+                parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview').style.background
                     = this.selFhdColor === '#42a5f5' ? obj['tempFreeHandDrawEditingStyles'].strokeColor :
                         parent.pointColl[indexObj['freehandSelectedIndex']].strokeColor;
             }
@@ -20512,7 +20460,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.createPenBtn = function (items) {
-        var _this = this;
         var parent = this.parent;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('XSmall') },
@@ -20546,16 +20493,16 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 },
                 select: function (args) {
                     spanElem_3.textContent = args.item.text;
-                    _this.parent.updatePenStrokeWidth(args.item.id);
+                    parent.updatePenStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
-                        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar'))) {
+                        if (document.getElementById(parent.element.id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                             var toolbar_8 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
                             toolbar_8.refreshOverflow();
                         }
                     }
                     else {
-                        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar'))) {
+                        if (document.getElementById(parent.element.id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                             var toolbar_9 = getComponent(parent.element.id + '_toolbar', 'toolbar');
                             toolbar_9.refreshOverflow();
@@ -20604,14 +20551,14 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     _this.renderSaveBtn();
                 }
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -20630,8 +20577,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var _this = this;
         var parent = this.parent;
         var mainItem = this.getFilterToolbarItem();
-        if (document.querySelector('#' + this.parent.element.id + '_contextualToolbar').classList.contains('e-control')) {
-            getComponent(document.getElementById(this.parent.element.id + '_contextualToolbar'), 'toolbar').destroy();
+        if (document.querySelector('#' + parent.element.id + '_contextualToolbar').classList.contains('e-control')) {
+            getComponent(document.getElementById(parent.element.id + '_contextualToolbar'), 'toolbar').destroy();
         }
         var toolbar = new Toolbar({
             width: '100%',
@@ -20641,7 +20588,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 _this.updatePrivateVariables();
                 _this.createCanvasFilter();
                 if (parent.currentFilter === '') {
-                    parent.currentFilter = _this.parent.element.id + '_default';
+                    parent.currentFilter = parent.element.id + '_default';
                 }
                 var hdrWrapper = document.querySelector('#' + parent.element.id + '_headWrapper');
                 if (hdrWrapper) {
@@ -20652,10 +20599,12 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 toolbar.refreshOverflow();
             }
         });
-        toolbar.appendTo('#' + this.parent.element.id + '_contextualToolbar');
+        toolbar.appendTo('#' + parent.element.id + '_contextualToolbar');
     };
     ToolbarModule.prototype.createCanvasFilter = function () {
         var parent = this.parent;
+        showSpinner(parent.element);
+        parent.element.style.opacity = '0.5';
         var imageData = parent.getCurrentCanvasData();
         this.inMemoryCanvas.width = imageData.width;
         this.inMemoryCanvas.height = imageData.height;
@@ -20667,16 +20616,19 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         this.updateFilterCanvas('_grayscaleCanvas', 'grayscale');
         this.updateFilterCanvas('_sepiaCanvas', 'sepia');
         this.updateFilterCanvas('_invertCanvas', 'invert');
+        hideSpinner(parent.element);
+        parent.element.style.opacity = '1';
         parent.initialAdjustmentValue = this.lowerContext.filter;
     };
     ToolbarModule.prototype.updateFilterCanvas = function (selector, type) {
-        var filter = this.parent.element.querySelector('#' + this.parent.element.id + selector);
-        if (!isNullOrUndefined(filter)) {
+        var parent = this.parent;
+        var filter = parent.element.querySelector('#' + parent.element.id + selector);
+        if (filter) {
             var ctx = filter.getContext('2d');
             ctx = filter.getContext('2d');
             filter.style.width = '100px';
             filter.style.height = '100px';
-            this.parent.notify('filter', { prop: 'updateAdj', value: { type: type, value: null, isPreview: true, ctx: ctx } });
+            parent.notify('filter', { prop: 'updateAdj', value: { type: type, value: null, isPreview: true, ctx: ctx } });
             ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
         }
     };
@@ -20726,47 +20678,51 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         return orgToolbarItems;
     };
     ToolbarModule.prototype.renderQAT = function (isPenEdit) {
-        if (!isNullOrUndefined(this.parent.activeObj) && this.parent.showQuickAccessToolbar) {
-            var qtArea = document.getElementById(this.parent.element.id + '_quickAccessToolbarArea');
-            if (!isNullOrUndefined(document.getElementById(this.parent.element.id + '_quickAccessToolbarArea'))) {
+        var parent = this.parent;
+        if (parent.activeObj && parent.showQuickAccessToolbar) {
+            var qtArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
+            if (qtArea) {
                 this.destroyQuickAccessToolbar();
-                document.getElementById(this.parent.element.id + '_quickAccessToolbarArea').style.display = 'block';
+                qtArea.style.display = 'block';
             }
             var items = this.getQuickAccessToolbarItem(isPenEdit);
             if (items.length === 0) {
                 return;
             }
-            if (isNullOrUndefined(this.parent.quickAccessToolbarTemplate)) {
+            if (isNullOrUndefined(parent.quickAccessToolbarTemplate)) {
                 var toolbarObj = new Toolbar({
                     items: items,
                     clicked: this.quickAccessToolbarClicked.bind(this)
                 });
-                toolbarObj.appendTo('#' + this.parent.element.id + '_quickAccessToolbar');
+                toolbarObj.appendTo('#' + parent.element.id + '_quickAccessToolbar');
             }
             if (isNullOrUndefined(isPenEdit)) {
                 qtArea.style.width = 'auto';
-                this.parent.activeObj.activePoint.width = Math.abs(this.parent.activeObj.activePoint.width);
-                this.parent.activeObj.activePoint.height = Math.abs(this.parent.activeObj.activePoint.height);
-                var x = this.parent.activeObj.activePoint.startX < this.parent.activeObj.activePoint.endX ?
-                    this.parent.activeObj.activePoint.startX : this.parent.activeObj.activePoint.endX;
-                var y = this.parent.activeObj.activePoint.startY < this.parent.activeObj.activePoint.endY ?
-                    this.parent.activeObj.activePoint.startY : this.parent.activeObj.activePoint.endY;
-                var width = this.parent.activeObj.activePoint.width;
-                if (this.parent.activeObj.rotatedAngle !== 0 && this.parent.activeObj.shape !== 'arrow') {
-                    var point = this.parent.getSquarePointForRotatedShape(this.parent.activeObj);
+                parent.activeObj.activePoint.width = Math.abs(parent.activeObj.activePoint.width);
+                parent.activeObj.activePoint.height = Math.abs(parent.activeObj.activePoint.height);
+                var x = parent.activeObj.activePoint.startX < parent.activeObj.activePoint.endX ?
+                    parent.activeObj.activePoint.startX : parent.activeObj.activePoint.endX;
+                var y = parent.activeObj.activePoint.startY < parent.activeObj.activePoint.endY ?
+                    parent.activeObj.activePoint.startY : parent.activeObj.activePoint.endY;
+                var width = parent.activeObj.activePoint.width;
+                if (parent.activeObj.rotatedAngle !== 0 && parent.activeObj.shape !== 'arrow') {
+                    var object = { activePoint: null };
+                    parent.notify('shape', { prop: 'getSquarePointForRotatedShape', onPropertyChange: false,
+                        value: { obj: parent.activeObj, object: object } });
+                    var point = object['activePoint'];
                     x = point.startX;
                     y = point.startY;
                     width = point.width;
                 }
-                else if (this.parent.activeObj.shape === 'path') {
-                    var path = this.parent.getSquarePointForPath(this.parent.activeObj);
+                else if (parent.activeObj.shape === 'path') {
+                    var path = parent.getSquarePointForPath(parent.activeObj);
                     x = path.startX;
                     y = path.startY;
                     width = path.width;
                 }
                 qtArea.style.left = (x + (width / 2)) - (items.length * 25) + 'px';
-                if (y - 60 < this.parent.img.destTop) {
-                    qtArea.style.top = this.parent.img.destTop + 'px';
+                if (y - 60 < parent.img.destTop) {
+                    qtArea.style.top = parent.img.destTop + 'px';
                 }
                 else {
                     qtArea.style.top = y - 60 + 'px';
@@ -20775,14 +20731,14 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             else if (isPenEdit) {
                 var obj = { activePoint: null };
                 var indexObj = { freehandSelectedIndex: null };
-                this.parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
-                this.parent.notify('freehand-draw', { prop: 'getSqPtFD',
+                parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                parent.notify('freehand-draw', { prop: 'getSqPtFD',
                     value: { idx: indexObj['freehandSelectedIndex'], obj: obj } });
                 var point = obj['activePoint'];
                 qtArea.style.width = 'auto';
                 qtArea.style.left = (point.startX + (point.width / 2)) - (items.length * 27) + 'px';
-                if (point.startY - 60 < this.parent.img.destTop) {
-                    qtArea.style.top = this.parent.img.destTop + 'px';
+                if (point.startY - 60 < parent.img.destTop) {
+                    qtArea.style.top = parent.img.destTop + 'px';
                 }
                 else {
                     qtArea.style.top = point.startY - 60 + 'px';
@@ -20794,8 +20750,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         if (isNullOrUndefined(isDisabled)) {
             return;
         }
-        var annotation = document.querySelector('#' + this.parent.element.id + '_annotationBtn');
-        if (!isNullOrUndefined(annotation)) {
+        var parent = this.parent;
+        var annotation = document.querySelector('#' + parent.element.id + '_annotationBtn');
+        if (annotation) {
             if (isDisabled) {
                 annotation.classList.add('e-disabled');
                 annotation.parentElement.classList.add('e-overlay');
@@ -20806,8 +20763,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
             getComponent(annotation, 'dropdown-btn').disabled = isDisabled;
         }
-        var transform = document.querySelector('#' + this.parent.element.id + '_transformBtn');
-        if (!isNullOrUndefined(transform)) {
+        var transform = document.querySelector('#' + parent.element.id + '_transformBtn');
+        if (transform) {
             if (isDisabled) {
                 transform.classList.add('e-disabled');
                 transform.parentElement.classList.add('e-overlay');
@@ -20818,8 +20775,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
             getComponent(transform, 'dropdown-btn').disabled = isDisabled;
         }
-        var adjustment = document.querySelector('#' + this.parent.element.id + '_adjustment');
-        if (!isNullOrUndefined(adjustment)) {
+        var adjustment = document.querySelector('#' + parent.element.id + '_adjustment');
+        if (adjustment) {
             if (isDisabled) {
                 adjustment.classList.add('e-disabled');
                 adjustment.parentElement.classList.add('e-overlay');
@@ -20830,8 +20787,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
             getComponent(adjustment, 'btn').disabled = isDisabled;
         }
-        var filter = document.querySelector('#' + this.parent.element.id + '_filter');
-        if (!isNullOrUndefined(filter)) {
+        var filter = document.querySelector('#' + parent.element.id + '_filter');
+        if (filter) {
             if (isDisabled) {
                 filter.classList.add('e-disabled');
                 filter.parentElement.classList.add('e-overlay');
@@ -20861,7 +20818,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.quickAccessToolbarClicked = function (args, isContextualToolbar) {
         var parent = this.parent;
         var points = { x: parent.activeObj.activePoint.startX, y: parent.activeObj.activePoint.startY };
-        if (!isNullOrUndefined(args.item)) {
+        if (args.item) {
             var duplicateObj = void 0;
             var objColl = void 0;
             var isPreventUndoRedo = null;
@@ -20874,7 +20831,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             parent.notify('draw', { prop: 'getNewPath', value: { obj: pathObject } });
             switch (args.item.id.replace(parent.element.id + '_', '').toLowerCase()) {
                 case 'duplicate':
-                    if (!this.parent.element.querySelector('#' + this.parent.element.id + '_duplicate').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + parent.element.id + '_duplicate').classList.contains('e-disabled')) {
                         if (!pathObject['isNewPath'] && JSON.stringify(object['tempObj']) === JSON.stringify(parent.activeObj)) {
                             isPreventUndoRedo = true;
                         }
@@ -20882,7 +20839,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                         if (isNullOrUndefined(parent.activeObj.currIndex)) {
                             parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isPreventUndoRedo } });
                         }
-                        else if (!isNullOrUndefined(obj['prevActObj'])) {
+                        else if (obj['prevActObj']) {
                             parent.activeObj.currIndex = null;
                             duplicateObj.currIndex = null;
                             parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isPreventUndoRedo } });
@@ -20909,19 +20866,19 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                             parent.notify('shape', { prop: 'setPointCollForLineArrow', onPropertyChange: false,
                                 value: { obj: parent.activeObj } });
                         }
-                        // parent.updateTrianglePoints(this.parent.activeObj); Invoke
+                        // parent.updateTrianglePoints(parent.activeObj); Invoke
                         parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
                         parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
                         this.renderQAT();
                     }
                     break;
                 case 'remove':
-                    if (!this.parent.element.querySelector('#' + this.parent.element.id + '_remove').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + parent.element.id + '_remove').classList.contains('e-disabled')) {
                         parent.notify('selection', { prop: 'deleteItem', onPropertyChange: false });
                     }
                     break;
                 case 'edittext':
-                    if (!this.parent.element.querySelector('#' + this.parent.element.id + '_editText').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + parent.element.id + '_editText').classList.contains('e-disabled')) {
                         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
                         parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false,
                             value: { obj: extend({}, parent.activeObj, {}, true) } });
@@ -20938,10 +20895,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                         if (isNullOrUndefined(parent.activeObj.currIndex)) {
                             parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
                         }
-                        else if (!isNullOrUndefined(obj['prevActObj'])) {
+                        else if (obj['prevActObj']) {
                             parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
                         }
-                        if (!isNullOrUndefined(document.getElementById(this.parent.element.id + '_quickAccessToolbarArea'))) {
+                        if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
                             document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
                         }
                     }
@@ -20962,7 +20919,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
             parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
         }
-        if (!isNullOrUndefined(args.item)) {
+        if (args.item) {
             var type = args.item.id.replace(parent.element.id + '_', '').toLowerCase();
             if (type === 'duplicate' || type === 'remove' || type === 'edittext') {
                 this.quickAccessToolbarClicked(args, true);
@@ -20972,11 +20929,11 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 var isDisabledFilter = false;
                 var isDisabledAdjustment = false;
                 var adjustment = document.querySelector('#' + parent.element.id + '_adjustment');
-                if (!isNullOrUndefined(adjustment) && adjustment.classList.contains('e-disabled')) {
+                if (adjustment && adjustment.classList.contains('e-disabled')) {
                     isDisabledAdjustment = true;
                 }
                 var filter = document.querySelector('#' + parent.element.id + '_filter');
-                if (!isNullOrUndefined(filter) && filter.classList.contains('e-disabled')) {
+                if (filter && filter.classList.contains('e-disabled')) {
                     isDisabledFilter = true;
                 }
                 this.enableDisableTbrBtn();
@@ -21021,18 +20978,18 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                         }
                     }
                     else {
-                        panBtn = this.parent.element.querySelector('.e-img-pan .e-btn');
-                        if (!isNullOrUndefined(panBtn)) {
+                        panBtn = parent.element.querySelector('.e-img-pan .e-btn');
+                        if (panBtn) {
                             panBtn.classList.add('e-selected-btn');
                         }
                         parent.pan(true);
                         parent.notify('transform', { prop: 'setDisablePan', onPropertyChange: false, value: { bool: false } });
                     }
-                    if (!isNullOrUndefined(zoomIn) && parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor) {
+                    if (zoomIn && parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor) {
                         zoomIn.classList.add('e-disabled');
                         zoomIn.parentElement.classList.add('e-overlay');
                     }
-                    else if (!isNullOrUndefined(zoomIn)) {
+                    else if (zoomIn) {
                         zoomIn.classList.remove('e-disabled');
                         zoomIn.parentElement.classList.remove('e-overlay');
                     }
@@ -21047,19 +21004,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     this.currentToolbar = 'main';
                     break;
                 case 'crop':
-                    if (!isNullOrUndefined(parent.currSelectionPoint)) {
-                        if (parent.currObjType.isUndoAction) {
-                            parent.notify('undo-redo', { prop: 'refreshUrc', value: { bool: null } });
-                        }
-                        if (!isNullOrUndefined(parent.cropObj.activeObj.shape)) {
-                            parent.select(parent.activeObj.shape);
-                        }
-                        this.refreshToolbar('main', true, true);
-                        getComponent(parent.element.querySelector('#' + this.parent.element.id + '_cropBtn'), 'dropdown-btn').toggle();
-                        if (!isNullOrUndefined(parent.activeObj.shape)) {
-                            document.getElementById(parent.activeObj.shape.split('-')[1]).classList.add('e-selected');
-                        }
-                    }
                     parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
                     break;
                 case 'reset':
@@ -21173,7 +21117,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 case 'rotateright':
                 case 'horizontalflip':
                 case 'verticalflip':
-                    this.parent.transformSelect(type);
+                    parent.transformSelect(type);
                     parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
                     break;
                 case 'save':
@@ -21198,7 +21142,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
         var type = args.item.id.replace(parent.element.id, '').split('_')[1];
         var imageFiltering = { filter: parent.toPascalCase(type), cancel: false };
-        this.parent.trigger('imageFiltering', imageFiltering);
+        parent.trigger('imageFiltering', imageFiltering);
         if (imageFiltering.cancel) {
             return;
         }
@@ -21209,11 +21153,12 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.refreshShapeDrawing = function () {
+        var parent = this.parent;
         var object = { shape: '' };
-        this.parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: object } });
+        parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: object } });
         if (object['shape'] !== '') {
-            this.parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
-            this.parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.refreshToolbar('main', false);
         }
     };
@@ -21292,9 +21237,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     ToolbarModule.prototype.closeContextualToolbar = function () {
         var parent = this.parent;
         var isContextualToolbar = false;
-        if ((!isNullOrUndefined(parent.element.querySelector('#' + parent.element.id + '_contextualToolbar')) &&
+        if ((parent.element.querySelector('#' + parent.element.id + '_contextualToolbar') &&
             !parent.element.querySelector('#' + parent.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
-            (!isNullOrUndefined(parent.element.querySelector('#' + parent.element.id + '_headWrapper'))
+            (parent.element.querySelector('#' + parent.element.id + '_headWrapper')
                 && !parent.element.querySelector('#' + parent.element.id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
             parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
             parent.okBtn();
@@ -21305,12 +21250,13 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     };
     ToolbarModule.prototype.destroyQuickAccessToolbar = function () {
         var parent = this.parent;
-        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_quickAccessToolbar')) &&
-            !isNullOrUndefined(getComponent(document.getElementById(parent.element.id + '_quickAccessToolbar'), 'toolbar'))) {
-            getComponent(document.getElementById(parent.element.id + '_quickAccessToolbar'), 'toolbar').destroy();
+        var quickToolbar = document.getElementById(parent.element.id + '_quickAccessToolbar');
+        if (quickToolbar && quickToolbar.classList.contains('e-control')) {
+            getComponent(quickToolbar, 'toolbar').destroy();
         }
-        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_quickAccessToolbarArea'))) {
-            document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
+        var qatArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
+        if (qatArea) {
+            qatArea.style.display = 'none';
         }
     };
     ToolbarModule.prototype.renderSlider = function (type) {
@@ -21323,7 +21269,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 id: parent.element.id + '_headWrapper',
                 styles: 'position: relative'
             }));
-            labelWrapper = hdrWrapper.appendChild(this.parent.createElement('label', {
+            labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: parent.element.id + '_labelWrapper',
                 styles: Browser.isDevice ? 'position: absolute; top: 25%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
                     : 'position: absolute; top: 25%; left: calc(50% - 226px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
@@ -21337,12 +21283,12 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             id: parent.element.id + '_sliderWrapper',
             styles: 'position: absolute'
         }));
-        var value = this.parent.getCurrAdjustmentValue(type);
+        var value = parent.getCurrAdjustmentValue(type);
         var min;
         var max;
         var slider;
         if (type === 'brightness' || type === 'contrast' || type === 'saturation' || type === 'exposure') {
-            if (this.parent.finetuneSettings) {
+            if (parent.finetuneSettings) {
                 if (type === 'brightness' && parent.finetuneSettings.brightness) {
                     min = parent.finetuneSettings.brightness.min;
                     max = parent.finetuneSettings.brightness.max;
@@ -21355,7 +21301,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     min = parent.finetuneSettings.saturation.min;
                     max = parent.finetuneSettings.saturation.max;
                 }
-                else if (type === 'exposure' && this.parent.finetuneSettings.exposure) {
+                else if (type === 'exposure' && parent.finetuneSettings.exposure) {
                     min = parent.finetuneSettings.exposure.min;
                     max = parent.finetuneSettings.exposure.max;
                 }
@@ -21411,27 +21357,29 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             width: Browser.isDevice ? '200px' : '300px',
             cssClass: 'e-slider',
             change: function (args) {
-                _this.parent.setCurrAdjustmentValue(type, args.value);
+                parent.setCurrAdjustmentValue(type, args.value);
                 _this.enableDisableTbrBtn();
             }
         });
     };
     ToolbarModule.prototype.applyPreviewFilter = function () {
-        if (!isNullOrUndefined(document.querySelector('#' + this.parent.element.id + '_sliderWrapper')) ||
-            this.parent.currObjType.isFiltered) {
-            this.parent.initialAdjustmentValue = this.parent.canvasFilter = this.lowerContext.filter;
-            this.parent.currObjType.isFiltered = false;
+        var parent = this.parent;
+        if (document.querySelector('#' + parent.element.id + '_sliderWrapper') ||
+            parent.currObjType.isFiltered) {
+            parent.initialAdjustmentValue = parent.canvasFilter = this.lowerContext.filter;
+            parent.currObjType.isFiltered = false;
         }
     };
     ToolbarModule.prototype.unselectBtn = function () {
+        var parent = this.parent;
         var selectors = [
-            '#' + this.parent.element.id + '_brightness',
-            '#' + this.parent.element.id + '_contrast',
-            '#' + this.parent.element.id + '_hue',
-            '#' + this.parent.element.id + '_saturation',
-            '#' + this.parent.element.id + '_opacity',
-            '#' + this.parent.element.id + '_blur',
-            '#' + this.parent.element.id + '_exposure'
+            '#' + parent.element.id + '_brightness',
+            '#' + parent.element.id + '_contrast',
+            '#' + parent.element.id + '_hue',
+            '#' + parent.element.id + '_saturation',
+            '#' + parent.element.id + '_opacity',
+            '#' + parent.element.id + '_blur',
+            '#' + parent.element.id + '_exposure'
         ];
         for (var _i = 0, selectors_1 = selectors; _i < selectors_1.length; _i++) {
             var selector = selectors_1[_i];
@@ -21456,68 +21404,69 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         if (hdrWrapper) {
             hdrWrapper.style.display = 'none';
         }
-        if (!isNullOrUndefined(sliderWrapper) && !isNullOrUndefined(slider)) {
+        if (sliderWrapper && slider) {
             slider.ej2_instances[0].destroy();
             sliderWrapper.remove();
         }
     };
     ToolbarModule.prototype.updateToolbarItems = function () {
-        var selFillElem = this.parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
-        var selStrokeElem = this.parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
-        var selTextStrokeElem = this.parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');
-        var selPenStrokeElem = this.parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview');
-        var strokeWidthElem = this.parent.element.querySelector('.e-shape-stroke-width');
-        var fontFamilyElem = this.parent.element.querySelector('.e-text-font-family');
-        var fontSizeElem = this.parent.element.querySelector('.e-text-font-size');
-        var boldBtn = this.parent.element.querySelector('#' + this.parent.element.id + '_bold');
-        var italicBtn = this.parent.element.querySelector('#' + this.parent.element.id + '_italic');
-        if (isNullOrUndefined(this.parent.activeObj.strokeSettings.strokeWidth)) {
-            this.parent.activeObj.strokeSettings.strokeWidth = 2;
+        var parent = this.parent;
+        var selFillElem = parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
+        var selStrokeElem = parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
+        var selTextStrokeElem = parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');
+        var selPenStrokeElem = parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview');
+        var strokeWidthElem = parent.element.querySelector('.e-shape-stroke-width');
+        var fontFamilyElem = parent.element.querySelector('.e-text-font-family');
+        var fontSizeElem = parent.element.querySelector('.e-text-font-size');
+        var boldBtn = parent.element.querySelector('#' + parent.element.id + '_bold');
+        var italicBtn = parent.element.querySelector('#' + parent.element.id + '_italic');
+        if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
+            parent.activeObj.strokeSettings.strokeWidth = 2;
         }
         if (selFillElem) {
-            if (this.parent.activeObj.strokeSettings.fillColor === '') {
+            if (parent.activeObj.strokeSettings.fillColor === '') {
                 selFillElem.classList.add('e-nocolor-item');
             }
             else {
                 selFillElem.classList.remove('e-nocolor-item');
-                selFillElem.style.background = this.parent.activeObj.strokeSettings.fillColor;
+                selFillElem.style.background = parent.activeObj.strokeSettings.fillColor;
             }
-            getComponent(this.parent.element.id + '_shape_fill', 'colorpicker').value
-                = this.parent.activeObj.strokeSettings.fillColor + 'ff';
+            getComponent(parent.element.id + '_shape_fill', 'colorpicker').value
+                = parent.activeObj.strokeSettings.fillColor + 'ff';
         }
         if (selStrokeElem) {
-            selStrokeElem.style.background = this.parent.activeObj.strokeSettings.strokeColor;
-            getComponent(this.parent.element.id + '_shape_stroke', 'colorpicker').value
-                = this.parent.activeObj.strokeSettings.strokeColor + 'ff';
+            selStrokeElem.style.background = parent.activeObj.strokeSettings.strokeColor;
+            getComponent(parent.element.id + '_shape_stroke', 'colorpicker').value
+                = parent.activeObj.strokeSettings.strokeColor + 'ff';
         }
         if (selTextStrokeElem) {
-            selTextStrokeElem.style.background = this.parent.activeObj.strokeSettings.strokeColor;
-            getComponent(this.parent.element.id + '_text_font', 'colorpicker').value
-                = this.parent.activeObj.strokeSettings.strokeColor + 'ff';
+            selTextStrokeElem.style.background = parent.activeObj.strokeSettings.strokeColor;
+            getComponent(parent.element.id + '_text_font', 'colorpicker').value
+                = parent.activeObj.strokeSettings.strokeColor + 'ff';
         }
         if (selPenStrokeElem) {
-            selPenStrokeElem.style.background = this.parent.activeObj.strokeSettings.strokeColor;
-            getComponent(this.parent.element.id + '_pen_stroke', 'colorpicker').value
-                = this.parent.activeObj.strokeSettings.strokeColor + 'ff';
+            selPenStrokeElem.style.background = parent.activeObj.strokeSettings.strokeColor;
+            getComponent(parent.element.id + '_pen_stroke', 'colorpicker').value
+                = parent.activeObj.strokeSettings.strokeColor + 'ff';
         }
         if (fontFamilyElem) {
             if (Browser.isDevice) {
-                fontFamilyElem.setAttribute('style', 'font-family:' + this.parent.activeObj.textSettings.fontFamily.toLowerCase());
+                fontFamilyElem.setAttribute('style', 'font-family:' + parent.activeObj.textSettings.fontFamily.toLowerCase());
             }
             else {
-                fontFamilyElem.textContent = this.parent.activeObj.textSettings.fontFamily;
+                fontFamilyElem.textContent = parent.activeObj.textSettings.fontFamily;
             }
         }
         if (fontSizeElem) {
-            for (var i = 0; i < this.parent.fontSizeColl.length; i++) {
-                if (parseInt(this.parent.fontSizeColl[i].text, 10) >= Math.round(this.parent.activeObj.textSettings.fontSize)) {
+            for (var i = 0; i < parent.fontSizeColl.length; i++) {
+                if (parseInt(parent.fontSizeColl[i].text, 10) >= Math.round(parent.activeObj.textSettings.fontSize)) {
                     fontSizeElem.textContent = (i + 1).toString();
                     break;
                 }
             }
         }
         if (boldBtn) {
-            if (this.parent.activeObj.textSettings.bold) {
+            if (parent.activeObj.textSettings.bold) {
                 boldBtn.classList.add('e-selected-btn');
             }
             else {
@@ -21525,7 +21474,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
         }
         if (italicBtn) {
-            if (this.parent.activeObj.textSettings.italic) {
+            if (parent.activeObj.textSettings.italic) {
                 italicBtn.classList.add('e-selected-btn');
             }
             else {
@@ -21533,7 +21482,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }
         }
         if (strokeWidthElem) {
-            var strokeWidth = Math.round((this.parent.activeObj.strokeSettings.strokeWidth)).toString();
+            var strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
             strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
         }
     };
@@ -21563,7 +21512,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
         var panBtn = parent.element.querySelector('.e-img-pan .e-btn');
-        if (!isNullOrUndefined(panBtn)) {
+        if (panBtn) {
             panBtn.classList.remove('e-selected-btn');
         }
         parent.pan(false);
@@ -21574,22 +21523,23 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.destroySubComponents = function () {
-        var inputElement = this.parent.element.querySelectorAll('input.e-control');
-        var btnElement = this.parent.element.querySelectorAll('button.e-control');
+        var parent = this.parent;
+        var inputElement = parent.element.querySelectorAll('input.e-control');
+        var btnElement = parent.element.querySelectorAll('button.e-control');
         for (var i = 0, len = inputElement.length; i < len; i++) {
             if (inputElement[i].classList.contains('e-color-picker')) {
                 getComponent(inputElement[i], 'color-picker').destroy();
-                detach(select('input#' + inputElement[i].id, this.parent.element));
+                detach(select('input#' + inputElement[i].id, parent.element));
             }
         }
         for (var i = 0, len = btnElement.length; i < len; i++) {
             if (btnElement[i].classList.contains('e-dropdown-btn')) {
                 getComponent(btnElement[i], 'dropdown-btn').destroy();
-                detach(select('button#' + btnElement[i].id, this.parent.element));
+                detach(select('button#' + btnElement[i].id, parent.element));
             }
             else if (btnElement[i].classList.contains('e-btn')) {
                 getComponent(btnElement[i], 'btn').destroy();
-                detach(select('button#' + btnElement[i].id, this.parent.element));
+                detach(select('button#' + btnElement[i].id, parent.element));
             }
         }
     };