@syncfusion/ej2-image-editor 22.1.34 → 22.1.37

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

@@ -9,6 +9,7 @@ class Crop {
         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 @@ class Crop {
                     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 @@ class Crop {
         this.croppedDegree = 0;
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 };
         this.tempFlipPanPoint = { x: 0, y: 0 };
+        this.isPreventScaling = false;
     }
     cropImg(isRotateCrop) {
         const parent = this.parent;
@@ -709,7 +714,7 @@ class Crop {
             }
             const 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['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((args) => {
@@ -735,6 +740,12 @@ class Crop {
                 obj.isCrop = true;
                 const prevCropObj = extend({}, parent.cropObj, {}, true);
                 const 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;
@@ -992,10 +1003,6 @@ class Draw {
             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'];
@@ -1024,6 +1031,9 @@ class Draw {
             case 'setArrowDimension':
                 this.arrowDimension = args.value['arrowDimension'];
                 break;
+            case 'moveToSelectionRange':
+                this.moveToSelectionRange(args.value['type'], args.value['activeObj']);
+                break;
         }
     }
     getModuleName() {
@@ -1311,8 +1321,10 @@ class Draw {
     }
     adjToCenter() {
         const parent = this.parent;
-        const diffX = ((parent.lowerCanvas.width) / 2) - (parent.activeObj.activePoint.endX - parent.activeObj.activePoint.width / 2);
-        const diffY = ((parent.lowerCanvas.height) / 2) - (parent.activeObj.activePoint.endY - parent.activeObj.activePoint.height / 2);
+        const diffX = ((parent.lowerCanvas.width) / 2) - (parent.activeObj.activePoint.endX -
+            parent.activeObj.activePoint.width / 2);
+        const 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;
@@ -2758,11 +2770,22 @@ class Draw {
             // proxy.reset();
             // proxy.parent.baseImg.src = proxy.baseImgSrc;
             proxy.isErrorImage = true;
+            proxy.errorLoading();
         };
     }
+    errorLoading() {
+        const parent = this.parent;
+        const 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);
+        }
+    }
     updateCanvas() {
         const parent = this.parent;
-        const fileOpened = { fileName: this.fileName, fileType: this.fileType };
+        const fileOpened = { fileName: this.fileName, fileType: this.fileType, isValidImage: true };
         parent.img.srcWidth = parent.baseImg.width;
         parent.img.srcHeight = parent.baseImg.height;
         const obj = { width: 0, height: 0 };
@@ -2941,10 +2964,6 @@ class Draw {
         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);
@@ -3086,114 +3105,6 @@ class Draw {
             }
         }
     }
-    cancelZoom() {
-        const parent = this.parent;
-        const 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 };
-                const 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) {
-                const 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 = [];
-            const freehandCounter = parent.freehandCounter;
-            parent.freehandCounter = 0;
-            const object = { selPointColl: null };
-            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                value: { obj: object } });
-            const cropSelPointColl = object['selPointColl'];
-            parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
-                value: { obj: { selPointColl: [] } } });
-            const cropObj = extend({}, parent.cropObj, {});
-            const 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');
-        }
-    }
     updateFlipPan(tempSelectionObj) {
         const parent = this.parent;
         if (parent.transform.currFlipState !== '') {
@@ -3854,13 +3765,8 @@ class Draw {
             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')) {
-                    const height = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
-                    parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
-                }
+                const height = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+                parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: height } });
             }
         }
         else {
@@ -4017,6 +3923,7 @@ class Draw {
             const fileData = filesData;
             let fileExtension = fileData.name && fileData.name.split('.')[1].toLowerCase();
             if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
+                this.errorLoading();
                 return;
             }
             showSpinner(parent.element);
@@ -4064,6 +3971,121 @@ class Draw {
         this.imageOnLoad(url.toString());
         inputElement.value = '';
     }
+    moveToSelectionRange(type, activeObj) {
+        const parent = this.parent;
+        if (parent.activeObj.shape) {
+            if (type === 'rotateleft' || type === 'rotateright') {
+                let 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 (let 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 (let 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 (let 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 (let 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 } });
+                        }
+                    }
+                }
+                const panX = (parent.lowerCanvas.clientWidth / 2) - (parent.objColl[parent.objColl.length - 1].activePoint.startX +
+                    (parent.objColl[parent.objColl.length - 1].activePoint.width / 2));
+                const 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 } });
+            }
+        }
+    }
+    isSelectionBiggerThanCanvas(obj) {
+        let 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;
+    }
+    isSelectionOutsideCanvas(obj) {
+        let isOutside = false;
+        if ((obj.activePoint.height < this.parent.lowerCanvas.height - this.parent.toolbarHeight) ||
+            (obj.activePoint.width < this.parent.lowerCanvas.width)) {
+            isOutside = true;
+        }
+        return isOutside;
+    }
 }
 
 class Export {
@@ -4516,7 +4538,7 @@ class Filter {
     }
     updatePrivateVariables() {
         const parent = this.parent;
-        if (!isNullOrUndefined(parent.lowerCanvas)) {
+        if (parent.lowerCanvas) {
             this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
     }
@@ -5825,7 +5847,7 @@ class FreehandDrawing {
     updateFHDCurPts() {
         const parent = this.parent;
         for (let 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;
                 const len = this.selPoints.length;
@@ -5853,7 +5875,7 @@ class FreehandDrawing {
         }
         // Update rotation points for each point for cursor styles
         for (let 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;
                 const len = this.selPoints.length;
@@ -5909,7 +5931,7 @@ class FreehandDrawing {
         }
         // Update flip value for each points for cursor styles
         for (let 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;
@@ -5956,7 +5978,7 @@ class FreehandDrawing {
         }
         // Update flip value for each points for cursor styles
         for (let 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;
@@ -6007,7 +6029,7 @@ class FreehandDrawing {
             }
         }
         for (let 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;
                 const len = this.selPoints.length;
@@ -6042,7 +6064,7 @@ class FreehandDrawing {
         }
         // Updating each points for cursor styles for panning
         for (let 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;
                 const len = this.selPoints.length;
@@ -6105,13 +6127,13 @@ class FreehandDrawing {
     isFHDIdx(index, obj) {
         let isIndex = false;
         for (let 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;
@@ -6120,7 +6142,7 @@ class FreehandDrawing {
         const parent = this.parent;
         for (let n = 0; n < parent.freehandCounter; n++) {
             const obj = { selPointColl: extend([], this.selPointColl) };
-            if (!isNullOrUndefined(obj['selPointColl'][n])) {
+            if (obj['selPointColl'][n]) {
                 this.selPoints = extend([], obj['selPointColl'][n].points, []);
                 this.pointCounter = 0;
                 const len = this.selPoints.length;
@@ -6265,9 +6287,6 @@ class Selection {
             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;
@@ -6359,9 +6378,24 @@ class Selection {
             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;
         }
     }
     getModuleName() {
@@ -6369,10 +6403,10 @@ class Selection {
     }
     updatePrivateVariables() {
         const 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');
         }
     }
@@ -6483,7 +6517,7 @@ class Selection {
                 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) &&
@@ -6585,7 +6619,7 @@ class Selection {
             }
         }
         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);
         }
@@ -6703,7 +6737,7 @@ class Selection {
                 (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) &&
@@ -6771,7 +6805,7 @@ class Selection {
         if ((length >= 92 && length <= 182) || (length >= -178 && length <= -88)) {
             const 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];
@@ -6915,7 +6949,7 @@ class Selection {
                     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 } });
                             }
                         }
@@ -7191,7 +7225,7 @@ class Selection {
             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((shapeResizingArgs) => {
@@ -8401,7 +8435,7 @@ class Selection {
                     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) &&
@@ -8711,7 +8745,7 @@ class Selection {
             this.dragCanvas = parent.togglePan = true;
         }
         const 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((imageEditorClickEventArgs) => {
                 this.clickEvent(imageEditorClickEventArgs, e);
@@ -8742,7 +8776,7 @@ class Selection {
         const parent = this.parent;
         const x = imageEditorClickEventArgs.point.x;
         const y = imageEditorClickEventArgs.point.y;
-        const cursor = !isNullOrUndefined(parent.activeObj.shape) && parent.activeObj.shape === 'text' ?
+        const cursor = parent.activeObj.shape && parent.activeObj.shape === 'text' ?
             parent.cursor : 'default';
         if (this.currentDrawingShape !== '') {
             const object = { currObj: {} };
@@ -8778,7 +8812,7 @@ class Selection {
                 this.isPan = false;
             }
         }
-        if (!isNullOrUndefined(parent.activeObj.shape)) {
+        if (parent.activeObj.shape) {
             this.isObjSelected = true;
         }
         else {
@@ -8792,7 +8826,7 @@ class Selection {
         const isFreehandDraw = this.isFreehandDrawTouch(e, this.isCropSelection);
         const isShapeClick = isShape ? isShape : this.isShapeClick(e, this.isCropSelection);
         const 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 } });
@@ -8827,11 +8861,12 @@ class Selection {
             }
             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,
@@ -8849,7 +8884,7 @@ class Selection {
         }
         else {
             let 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;
             }
@@ -8905,7 +8940,7 @@ class Selection {
             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';
                     }
                 }
@@ -9043,7 +9078,7 @@ class Selection {
             !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' &&
@@ -9117,15 +9152,14 @@ class Selection {
         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 */
@@ -9134,7 +9168,8 @@ class Selection {
                             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) {
                     const currentSelectionSettings = { type: this.parent.activeObj.shape,
                         startX: this.shapeResizingArgs.currentShapeSettings.startX,
                         startY: this.shapeResizingArgs.currentShapeSettings.startY,
@@ -9150,7 +9185,7 @@ class Selection {
                 }
             }
             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 */
@@ -9203,7 +9238,7 @@ class Selection {
                 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,
@@ -9220,7 +9255,7 @@ class Selection {
                     parent.currObjType.isResize = false;
                 }
             }
-            if (!isNullOrUndefined(parent.activeObj)) {
+            if (parent.activeObj) {
                 let isCropSelection = false;
                 let splitWords;
                 if (parent.activeObj.shape !== undefined) {
@@ -9269,7 +9304,7 @@ class Selection {
         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()) {
@@ -9306,7 +9341,7 @@ class Selection {
         let isAdjusted = false;
         const 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')) {
             let temp;
             if ((this.dragElement === 'e-resize' && obj.activePoint.endX < obj.activePoint.startX) ||
                 (this.dragElement === 'w-resize' && obj.activePoint.startX > obj.activePoint.endX)) {
@@ -9337,7 +9372,7 @@ class Selection {
     updPtCollForShpRot(obj) {
         const 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
@@ -9401,7 +9436,7 @@ class Selection {
         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) {
             const isTextArea = parent.textArea.style.display === 'block' ? true : false;
             const activeObj = extend({}, parent.activeObj, null, true);
             parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
@@ -9425,7 +9460,7 @@ class Selection {
                     parent.objColl.splice(index, 1);
                 }
             }
-            else if (!isShape && !isNullOrUndefined(activeObj.shape)) {
+            else if (!isShape && activeObj.shape) {
                 parent.activeObj = activeObj;
                 const index = this.getCurrentIndex();
                 if ((!isNullOrUndefined(index) &&
@@ -9443,7 +9478,7 @@ class Selection {
         const parent = this.parent;
         let 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);
             }
             const isTextArea = parent.textArea.style.display === 'block' ? true : false;
@@ -9513,7 +9548,7 @@ class Selection {
                     parent.objColl.splice(index, 1);
                 }
             }
-            else if (!isNullOrUndefined(activeObj.shape)) {
+            else if (activeObj.shape) {
                 parent.activeObj = activeObj;
                 const index = this.getCurrentIndex();
                 if (!isCropSelection) {
@@ -9532,7 +9567,7 @@ class Selection {
     applyObj(x, y) {
         const parent = this.parent;
         let 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)) &&
@@ -9700,6 +9735,12 @@ class Selection {
         EventHandler.add(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler, this);
         EventHandler.add(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this);
     }
+    unwireEvent() {
+        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);
+    }
     keyDownEventHandler(e) {
         const parent = this.parent;
         if (e.ctrlKey && (e.key === '+' || e.key === '-')) {
@@ -9711,7 +9752,7 @@ class Selection {
         let 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((args) => {
                         this.beforeSaveEvent(args, e);
@@ -9809,7 +9850,7 @@ class Selection {
         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 });
@@ -9832,265 +9873,85 @@ class Selection {
             }
         }
     }
-    adjustToScreen() {
+    textKeyDown(e) {
         const 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';
+        }
+        const rows = parent.textArea.value.split('\n');
+        this.textRow = rows.length;
+        parent.textArea.setAttribute('rows', this.textRow.toString());
+        this.isInitialTextEdited = false;
+    }
+    clearSelection() {
+        const 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';
+        }
+    }
+    setDragDirection(width, height) {
+        const arcRadius = (7.5);
+        const 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;
+        }
+    }
+    calcShapeRatio(x, y, imgWidth, imgHeight) {
+        const parent = this.parent;
+        const arcRadius = (7.5);
+        const originalWidth = imgWidth;
+        const originalHeight = imgHeight;
+        const presetRatio = x / y;
+        const standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;
+        let width = standardSize * presetRatio;
+        let height = standardSize;
+        const scaleWidth = this.getScale(width, originalWidth);
+        const snippetArray = [];
+        for (let 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];
+        const scaleHeight = this.getScale(height, originalHeight);
+        const snippetArray1 = [];
+        for (let i = 0; i < 2; i++) {
+            if (i === 0) {
+                snippetArray1.push(width * scaleHeight);
             }
             else {
-                parent.updateToolbar(parent.element, 'destroyQuickAccessToolbar');
-            }
-        }
-        let 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 });
-        }
-        const 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);
-        const 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';
-            const obj = { toolbarHeight: !isBlazor() ? 0 : parent.toolbarHeight };
-            if (!isBlazor()) {
-                parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
-            }
-            if (Browser.isDevice) {
-                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj['toolbarHeight'])) - 3 + 'px';
-            }
-            else {
-                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj['toolbarHeight']) - 3 + 'px';
-            }
-        }
-        const obj = { width: 0, height: 0 };
-        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-            value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj } });
-        const 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 } });
-            const 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';
-        const 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 */
-                const toolbar = getComponent(parent.element.id + '_toolbar', 'toolbar');
-                toolbar.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) {
-            const totalPannedPoint = extend({}, parent.panPoint.totalPannedPoint, null, true);
-            const totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, null, true);
-            const 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');
-            }
-        }
-    }
-    textKeyDown(e) {
-        const 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';
-        }
-        const rows = parent.textArea.value.split('\n');
-        this.textRow = rows.length;
-        parent.textArea.setAttribute('rows', this.textRow.toString());
-        this.isInitialTextEdited = false;
-    }
-    clearSelection() {
-        const 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';
-        }
-    }
-    setDragDirection(width, height) {
-        const arcRadius = (7.5);
-        const 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;
-        }
-    }
-    calcShapeRatio(x, y, imgWidth, imgHeight) {
-        const parent = this.parent;
-        const arcRadius = (7.5);
-        const originalWidth = imgWidth;
-        const originalHeight = imgHeight;
-        const presetRatio = x / y;
-        const standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;
-        let width = standardSize * presetRatio;
-        let height = standardSize;
-        const scaleWidth = this.getScale(width, originalWidth);
-        const snippetArray = [];
-        for (let i = 0; i < 2; i++) {
-            if (i === 0) {
-                snippetArray.push(width * scaleWidth);
-            }
-            else {
-                snippetArray.push(height * scaleWidth);
-            }
-        }
-        width = snippetArray[0];
-        height = snippetArray[1];
-        const scaleHeight = this.getScale(height, originalHeight);
-        const snippetArray1 = [];
-        for (let i = 0; i < 2; i++) {
-            if (i === 0) {
-                snippetArray1.push(width * scaleHeight);
-            }
-            else {
-                snippetArray1.push(height * scaleHeight);
+                snippetArray1.push(height * scaleHeight);
             }
         }
         width = snippetArray1[0];
@@ -10240,7 +10101,7 @@ class Selection {
                         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)) &&
@@ -10287,7 +10148,7 @@ class Selection {
                         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 } });
                 }
@@ -10314,7 +10175,7 @@ class Selection {
                     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).then((shapeChangingArgs) => {
                         this.shapeEvent(shapeChangingArgs);
@@ -10336,7 +10197,7 @@ class Selection {
                             startY: shapeChangingArgs.currentShapeSettings.startY,
                             width: shapeChangingArgs.currentShapeSettings.width,
                             height: shapeChangingArgs.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((selectionChangingArgs) => {
                             shapeChangingArgs.currentShapeSettings.startX = selectionChangingArgs.currentSelectionSettings.startX;
@@ -10405,7 +10266,7 @@ class Selection {
     getDistance(a, b) {
         let x = 0;
         let y = 0;
-        if (!isNullOrUndefined(a) && !isNullOrUndefined(b)) {
+        if (a && b) {
             x = a.x - b.x;
             y = a.y - b.y;
         }
@@ -10523,7 +10384,7 @@ class Selection {
                 }
                 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 } });
                 }
@@ -11018,6 +10879,9 @@ class Shape {
             case 'updateArrowRatio':
                 this.updateArrowRatio(args.value['obj']);
                 break;
+            case 'getSquarePointForRotatedShape':
+                this.getSquarePointForRotatedShape(args.value['obj'], args.value['object']);
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -11041,30 +10905,41 @@ class Shape {
     }
     drawEllipse(x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor) {
         this.initializeShape('ellipse');
-        const start = { x: x, y: y };
+        const start = x && y ? { x: x, y: y } : null;
         this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
     }
     drawLine(startX, startY, endX, endY, strokeWidth, strokeColor) {
         this.initializeShape('line');
-        const start = { x: startX, y: startY };
+        const start = startX && startY ? { x: startX, y: startY } : null;
         const width = endX - startX;
         const height = endY - startY;
         this.drawShape('line', strokeWidth, strokeColor, null, start, width, height);
     }
     drawPath(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);
+            const 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;
+        }
     }
     drawArrow(startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
         this.initializeShape('arrow');
-        const start = { x: startX, y: startY };
+        const start = startX && startY ? { x: startX, y: startY } : null;
         const width = endX - startX;
         const height = endY - startY;
         this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd);
     }
     drawRectangle(x, y, width, height, strokeWidth, strokeColor, fillColor) {
         this.initializeShape('rectangle');
-        const start = { x: x, y: y };
+        const start = x && y ? { x: x, y: y } : null;
         this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height);
     }
     drawText(x, y, text, fontFamily, fontSize, bold, italic, color) {
@@ -11225,7 +11100,7 @@ class Shape {
         const 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 (let 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;
@@ -12347,7 +12222,7 @@ class Shape {
                 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 } });
                 }
@@ -13063,8 +12938,8 @@ class Shape {
     }
     isPointsInRange(x, y, obj) {
         let 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;
@@ -13221,8 +13096,10 @@ class Shape {
                                     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');
                         }
@@ -13244,8 +13121,13 @@ class Shape {
                     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;
@@ -13461,6 +13343,73 @@ class Shape {
             }
         }
     }
+    getSquarePointForRotatedShape(obj, object) {
+        const point = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
+        const center = { x: obj.activePoint.startX + (obj.activePoint.width / 2), y: obj.activePoint.startY +
+                (obj.activePoint.height / 2) };
+        const 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 };
+        const 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 };
+        const 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 };
+        const 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;
+    }
 }
 
 class Transform {
@@ -13638,7 +13587,7 @@ class Transform {
         const parent = this.parent;
         const 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((args) => {
                 this.rotateEvent(args, degree);
@@ -13670,7 +13619,7 @@ class Transform {
             parent.afterCropActions.push(degree === 90 ? 'rotateRight' : 'rotateLeft');
             let splitWords = [];
             let activeObjShape;
-            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('-');
                 }
@@ -13823,7 +13772,7 @@ class Transform {
         const parent = this.parent;
         const 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((args) => {
                 this.flipEvent(args, direction);
@@ -13961,7 +13910,7 @@ class Transform {
             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();
@@ -14092,13 +14041,13 @@ class Transform {
                 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;
             }
             const 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) };
                 }
@@ -14112,7 +14061,7 @@ class Transform {
             const previousZoomFactor = parent.zoomSettings.zoomFactor - (zoomFactor * 10);
             const 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((args) => {
                     this.zoomEvent(args, zoomFactor);
@@ -14249,7 +14198,7 @@ class Transform {
             }
         }
         this.autoEnablePan();
-        if (!isNullOrUndefined(this.tempActiveObj)) {
+        if (this.tempActiveObj) {
             parent.activeObj = extend({}, this.tempActiveObj, {}, true);
         }
         if (parent.activeObj.shape === 'crop-custom') {
@@ -14555,7 +14504,7 @@ class Transform {
         const obj = { panDown: null };
         parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: { obj: obj } });
         const 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 */
@@ -14769,7 +14718,7 @@ class Transform {
         const tempDegree = parent.transform.degree;
         let rotatePanActiveObj;
         const object = { selPointColl: null };
-        if (!isNullOrUndefined(parent.activeObj.activePoint) && !isNullOrUndefined(parent.activeObj.shape)) {
+        if (parent.activeObj.activePoint && parent.activeObj.shape) {
             rotatePanActiveObj = extend({}, parent.activeObj, {}, true);
         }
         const tempObjColl = extend([], parent.objColl, [], true);
@@ -14840,7 +14789,7 @@ class Transform {
         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 } });
         }
@@ -15008,38 +14957,218 @@ class Transform {
     update() {
         const parent = this.parent;
         let toolbarHeight = 0;
+        let isActiveObj = false;
+        const 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 });
+            }
+        }
+        const tempFilter = this.lowerContext.filter;
         const 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';
+                const obj = { toolbarHeight: !isBlazor() ? 0 : parent.toolbarHeight };
+                if (!isBlazor()) {
+                    parent.notify('toolbar', { prop: 'getToolbarHeight', value: { obj: obj } });
+                }
+                if (Browser.isDevice) {
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * obj['toolbarHeight'])) - 3 + 'px';
+                }
+                else {
+                    canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - obj['toolbarHeight']) - 3 + 'px';
+                }
+            }
+            const obj = { width: 0, height: 0 };
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+                value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj } });
+            const 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 } });
+                const 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';
+            const 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 */
+                    const toolbar = getComponent(parent.element.id + '_toolbar', 'toolbar');
+                    toolbar.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) {
+                const totalPannedPoint = extend({}, parent.panPoint.totalPannedPoint, null, true);
+                const totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, null, true);
+                const 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);
     }
     calcMaxDimension(width, height, obj) {
         const object = { toolbarHeight: 0 };
@@ -15070,7 +15199,15 @@ class Transform {
             cssMaxWidth = width * heightScale;
             cssMaxHeight = height * heightScale;
         }
-        if (!isNullOrUndefined(obj)) {
+        const 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;
         }
@@ -15118,7 +15255,7 @@ class Transform {
         }
         this.limitPan();
         parent.activeObj = tempActObj;
-        if (!isNullOrUndefined(obj)) {
+        if (obj) {
             obj['x'] = parent.img.destLeft - tempDestLeft;
             obj['y'] = parent.img.destTop - tempDestTop;
         }
@@ -15151,10 +15288,10 @@ class UndoRedo {
         this.parent.off('destroyed', this.destroy);
     }
     initializeUrPvtProp() {
-        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');
         }
     }
@@ -15374,14 +15511,16 @@ class UndoRedo {
         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');
@@ -15484,7 +15623,7 @@ class UndoRedo {
                 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;
@@ -15546,10 +15685,10 @@ class UndoRedo {
                 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);
@@ -15687,7 +15826,7 @@ class UndoRedo {
     }
     undoDefault(obj) {
         this.lowerContext.filter = obj.previousObj.filter;
-        let parent = this.parent;
+        const parent = this.parent;
         parent.objColl = [];
         parent.pointColl = [];
         parent.freehandCounter = 0;
@@ -16195,7 +16334,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     break;
                 case 'theme':
                     if (newProperties.theme) {
-                        if (!isNullOrUndefined(this.theme) && this.theme !== '') {
+                        if (this.theme && this.theme !== '') {
                             this.theme = this.toPascalCase(this.theme);
                         }
                         else {
@@ -16257,7 +16396,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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 } });
                         }
@@ -16277,9 +16416,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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.destroy();
         }
@@ -16290,7 +16427,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.element.innerHTML = '';
     }
     initialize() {
-        if (!isNullOrUndefined(this.toolbarTemplate)) {
+        if (this.toolbarTemplate) {
             this.element.appendChild(this.createElement('div', {
                 id: this.element.id + '_toolbarArea', className: 'e-toolbar-area'
             }));
@@ -16309,13 +16446,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             const 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 {
@@ -16392,6 +16529,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             screen.orientation.removeEventListener('change', this.screenOrientation.bind(this));
         }
         this.notify('shape', { prop: 'unWireEvent', onPropertyChange: false });
+        this.notify('selection', { prop: 'unWireEvent', onPropertyChange: false });
     }
     createCanvas() {
         this.element.style.boxSizing = 'border-box';
@@ -16471,7 +16609,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('selection', { prop: 'handleScroll', onPropertyChange: false, value: { e: e } });
     }
     adjustToScreen() {
-        this.notify('selection', { prop: 'adjustToScreen', onPropertyChange: false });
+        this.update();
     }
     screenOrientation() {
         if (Browser.isDevice) {
@@ -16628,10 +16766,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.currentFilter = '';
             const obj = { initialZoomValue: false };
             this.notify('draw', { prop: 'getInitialZoomValue', onPropertyChange: false, value: { obj: obj } });
-            if (!isNullOrUndefined(obj['initialZoomValue'])) {
+            if (obj['initialZoomValue']) {
                 this.setProperties({ zoomSettings: { zoomFactor: obj['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();
@@ -16640,7 +16778,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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 } });
@@ -16776,7 +16914,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     drawEllipse(x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor) {
         let isEllipse = false;
         const 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 } });
@@ -16797,7 +16935,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     drawLine(startX, startY, endX, endY, strokeWidth, strokeColor) {
         let isLine = false;
         const 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 } });
@@ -16815,14 +16953,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @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
      */
     drawArrow(startX, startY, endX, endY, strokeWidth, strokeColor, arrowStart, arrowEnd) {
         let isArrow = false;
         const 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 } });
@@ -16841,7 +16977,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.isPublicMethod = true;
         const obj = { inRange: false };
         let isPath = false;
-        if (pointColl.length > 0) {
+        if (pointColl && pointColl.length > 0) {
             for (let i = 0; i < pointColl.length; i++) {
                 if (obj['inRange']) {
                     break;
@@ -16850,7 +16986,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     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 } });
@@ -16872,7 +17008,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     drawRectangle(x, y, width, height, strokeWidth, strokeColor, fillColor) {
         let isRectangle = false;
         const 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 } });
@@ -16898,7 +17034,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     drawText(x, y, text, fontFamily, fontSize, bold, italic, color) {
         let isText = false;
         const 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 } });
@@ -17050,6 +17186,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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']();
         }
     }
@@ -17117,7 +17255,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const 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 } });
         }
@@ -17134,120 +17272,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.isCropTab = true;
         this.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: this.activeObj } });
     }
-    moveToSelectionRange(type, activeObj) {
-        if (!isNullOrUndefined(this.activeObj.shape)) {
-            if (type === 'rotateleft' || type === 'rotateright') {
-                let 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 (let 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 (let 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 (let 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 (let 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 } });
-                        }
-                    }
-                }
-                const panX = (this.lowerCanvas.clientWidth / 2) - (this.objColl[this.objColl.length - 1].activePoint.startX +
-                    (this.objColl[this.objColl.length - 1].activePoint.width / 2));
-                const 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 } });
-            }
-        }
-    }
-    isSelectionBiggerThanCanvas(obj) {
-        let 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;
-    }
-    isSelectionOutsideCanvas(obj) {
-        let 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.
      *
@@ -17291,7 +17315,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         for (let 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('');
@@ -17358,7 +17382,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                 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;
@@ -17420,7 +17444,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     cropSelectedState() {
-        if (!isNullOrUndefined(this.activeObj.shape) && this.activeObj.shape.split('-')[0] === 'crop') {
+        if (this.activeObj.shape && this.activeObj.shape.split('-')[0] === 'crop') {
             this.okBtn();
         }
     }
@@ -17435,7 +17459,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const tempFilter = this.lowerContext.filter;
         this.lowerContext.filter = this.canvasFilter = 'none';
         const objColl = extend([], this.objColl, null, true);
+        const pointColl = extend([], this.pointColl, null, true);
         this.objColl = [];
+        this.pointColl = [];
+        this.freehandCounter = 0;
         this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
         const data = this.getImageData();
         if (!isBlazor()) {
@@ -17444,6 +17471,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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;
@@ -17459,7 +17488,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     setCurrAdjustmentValue(type, value) {
         const 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((finetuneValueChanging) => {
                 if (finetuneValueChanging.cancel) {
@@ -17476,82 +17505,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             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.
-     */
-    getSquarePointForRotatedShape(obj, object) {
-        const point = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 };
-        const center = { x: obj.activePoint.startX + (obj.activePoint.width / 2), y: obj.activePoint.startY +
-                (obj.activePoint.height / 2) };
-        const 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 };
-        const 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 };
-        const 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 };
-        const 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.
      *
@@ -17640,14 +17593,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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 */
                     const toolbar = getComponent(this.element.id + '_bottomToolbar', 'toolbar');
                     toolbar.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 */
                     const toolbar = getComponent(this.element.id + '_toolbar', 'toolbar');
                     toolbar.refreshOverflow();
@@ -18067,7 +18020,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             return str;
         }
         else {
-            return splitStr.map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+            return splitStr.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
         }
     }
     /**
@@ -18081,9 +18034,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const obj = { adjustmentLevel: null };
         this.notify('filter', { prop: 'getAdjustmentLevel', onPropertyChange: false,
             value: { obj: obj } });
-        let value;
         const 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}`];
@@ -18102,7 +18054,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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;
     }
     /**
@@ -18129,7 +18081,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.element = element;
         const 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 {
@@ -18147,9 +18099,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         });
         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' }
@@ -18647,6 +18596,7 @@ class ToolbarModule {
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     }
     toolbar(args) {
+        const parent = this.parent;
         this.updatePrivateVariables();
         switch (args.prop) {
             case 'create-toolbar':
@@ -18719,19 +18669,19 @@ class ToolbarModule {
                 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;
@@ -18743,7 +18693,7 @@ class ToolbarModule {
                 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();
@@ -18752,28 +18702,25 @@ class ToolbarModule {
                 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'];
@@ -18786,51 +18733,53 @@ class ToolbarModule {
     updatePrivateVariables() {
         const 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');
         }
     }
     reset() {
+        const 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%)';
     }
     destroyTopToolbar() {
         const parent = this.parent;
-        if (this.isToolbar() && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar'))) &&
-            (!isNullOrUndefined(getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar')))) {
+        const 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();
         }
     }
     destroyBottomToolbar() {
         const parent = this.parent;
-        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar')) &&
-            (!isNullOrUndefined(getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar')))) {
+        const toolbar = document.getElementById(parent.element.id + '_bottomToolbar');
+        if (toolbar && toolbar.classList.contains('e-control')) {
             getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
         }
     }
     isToolbar() {
-        return (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.length > 0)
-            || !isNullOrUndefined(this.parent.toolbarTemplate));
+        const parent = this.parent;
+        return (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)
+            || !isNullOrUndefined(parent.toolbarTemplate));
     }
     createToolbar() {
         const 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'
             }));
@@ -18856,10 +18805,10 @@ class ToolbarModule {
                             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);
@@ -18867,7 +18816,7 @@ class ToolbarModule {
                                 }
                                 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);
@@ -18884,7 +18833,7 @@ class ToolbarModule {
                 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;
             }
         }
@@ -18894,7 +18843,7 @@ class ToolbarModule {
     }
     createContextualToolbar() {
         const 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;' }
             }));
@@ -18905,7 +18854,7 @@ class ToolbarModule {
     }
     createBottomToolbar() {
         const 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'
             }));
@@ -18968,7 +18917,7 @@ class ToolbarModule {
             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 */
                 const toolbar = getComponent(parent.element.id + '_toolbar', 'toolbar');
                 toolbar.refreshOverflow();
@@ -18977,7 +18926,7 @@ class ToolbarModule {
     }
     initBottomToolbar() {
         const parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.length > 0)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             const items = this.getMainToolbarItem();
             const toolbarObj = new Toolbar({ items: items, width: '100%',
                 created: () => {
@@ -18989,7 +18938,7 @@ class ToolbarModule {
                 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 */
                 const toolbar = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
                 toolbar.refreshOverflow();
@@ -19004,21 +18953,21 @@ class ToolbarModule {
             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' });
             }
@@ -19038,12 +18987,12 @@ class ToolbarModule {
             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>' });
             }
@@ -19057,19 +19006,19 @@ class ToolbarModule {
     getMainToolbarItem(isApplyOption) {
         const parent = this.parent;
         const 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' });
         }
@@ -19132,7 +19081,7 @@ class ToolbarModule {
                 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) {
@@ -19158,13 +19107,13 @@ class ToolbarModule {
     wireZoomBtnEvents() {
         const zoomIn = document.querySelector('#' + this.parent.element.id + '_zoomIn');
         const 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));
@@ -19179,58 +19128,58 @@ class ToolbarModule {
             const undoRedoObj = { undoRedoStep: null };
             parent.notify('undo-redo', { prop: 'getUndoRedoStep', value: { obj: undoRedoObj } });
             const 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');
             }
             const 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');
             }
         }
         const 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');
         }
         const 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');
         }
         const 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';
         }
     }
     createLeftToolbarControls() {
         const parent = this.parent;
         if (this.defToolbarItems !== undefined && this.defToolbarItems.length > 0 &&
-            (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+            (document.getElementById(parent.element.id + '_toolbar'))) {
             const uploadDiv = document.getElementById(parent.element.id + '_toolbar')
                 .querySelector('.e-image-upload');
             if (uploadDiv) {
@@ -19251,25 +19200,25 @@ class ToolbarModule {
     renderAnnotationBtn(isContextualToolbar) {
         const parent = this.parent;
         const 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' });
         }
         const obj = { freehandDrawSelectedId: null };
@@ -19278,7 +19227,7 @@ class ToolbarModule {
         const removeElement = document.querySelector('#' + parent.element.id + '_remove');
         const 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) {
@@ -19310,10 +19259,10 @@ class ToolbarModule {
                     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');
                 }
             },
@@ -19368,21 +19317,21 @@ class ToolbarModule {
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + this.parent.element.id + '_annotationBtn');
+        drpDownBtn.appendTo('#' + parent.element.id + '_annotationBtn');
     }
     renderCropBtn() {
         const parent = this.parent;
         const 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' });
@@ -19391,11 +19340,11 @@ class ToolbarModule {
         }
         let iconCss;
         let 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;
         }
@@ -19412,8 +19361,8 @@ class ToolbarModule {
                     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 } });
             },
@@ -19426,21 +19375,21 @@ class ToolbarModule {
             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');
     }
     renderTransformBtn() {
         const parent = this.parent;
         const 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' });
         }
         const drpDownBtn = new DropDownButton({
@@ -19453,27 +19402,27 @@ class ToolbarModule {
                     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');
     }
     renderSaveBtn() {
-        const imageEditorObj = this.parent;
+        const parent = this.parent;
         const saveItems = [
             { text: 'JPEG', id: 'jpeg' },
             { text: 'PNG', id: 'png' },
             { text: 'SVG', id: 'svg' }
         ];
-        const ddbElem = document.getElementById(this.parent.element.id + '_saveBtn');
+        const ddbElem = document.getElementById(parent.element.id + '_saveBtn');
         if (ddbElem) {
             // Initialize the DropDownButton component.
             const saveDrpDownBtn = new DropDownButton({ items: saveItems, cssClass: 'e-caret-hide e-image-popup', iconCss: 'e-icons e-save',
                 select: (args) => {
-                    imageEditorObj.export(args.item.text);
+                    parent.export(args.item.text);
                 }
             });
-            saveDrpDownBtn.appendTo('#' + this.parent.element.id + '_saveBtn');
+            saveDrpDownBtn.appendTo('#' + parent.element.id + '_saveBtn');
         }
     }
     getCropTransformToolbarItem() {
@@ -19483,19 +19432,19 @@ class ToolbarModule {
             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;
@@ -19503,31 +19452,31 @@ class ToolbarModule {
     getShapesToolbarItem(items) {
         const parent = this.parent;
         const 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) {
@@ -19550,15 +19499,16 @@ class ToolbarModule {
             const 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' });
             }
         }
         return toolbarItems;
     }
     initCropTransformToolbar() {
+        const parent = this.parent;
         const leftItem = this.getLeftToolbarItem();
         const rightItem = this.getRightToolbarItem();
         const mainItem = this.getCropTransformToolbarItem();
@@ -19579,9 +19529,9 @@ class ToolbarModule {
                 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();
@@ -19590,22 +19540,22 @@ class ToolbarModule {
                 }
                 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 } });
     }
     getCurrentShapeIcon(shape) {
         let icon = '';
@@ -19616,9 +19566,6 @@ class ToolbarModule {
             case 'ellipse':
                 icon = 'e-circle';
                 break;
-            case 'triangle':
-                icon = 'e-triangle';
-                break;
             case 'line':
                 icon = 'e-line';
                 break;
@@ -19665,6 +19612,7 @@ class ToolbarModule {
         return icon;
     }
     initShapesToolbarItem(items) {
+        const parent = this.parent;
         const leftItem = this.getLeftToolbarItem();
         const rightItem = this.getRightToolbarItem();
         const mainItem = this.getShapesToolbarItem(items);
@@ -19683,7 +19631,7 @@ class ToolbarModule {
                 this.renderAnnotationBtn(true);
                 this.createShapeColor(items);
                 this.createShapeBtn(items);
-                if (this.parent.activeObj.shape === 'arrow') {
+                if (parent.activeObj.shape === 'arrow') {
                     this.createStartBtn();
                     this.createEndBtn();
                 }
@@ -19691,9 +19639,9 @@ class ToolbarModule {
                 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();
@@ -19702,7 +19650,7 @@ class ToolbarModule {
                 }
                 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();
                     }
@@ -19710,10 +19658,10 @@ class ToolbarModule {
             }
         });
         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();
     }
@@ -19727,7 +19675,7 @@ class ToolbarModule {
                 modeSwitcher: false, noColor: true, value: '',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-fill-color',
                 change: (args) => {
-                    this.parent.updateFillColor(args.currentValue.hex);
+                    parent.updateFillColor(args.currentValue.hex);
                     if (args.currentValue.rgba === '') {
                         fillDDB.element.children[0].classList.add('e-nocolor-item');
                     }
@@ -19748,7 +19696,7 @@ class ToolbarModule {
                 },
                 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');
         }
@@ -19760,7 +19708,7 @@ class ToolbarModule {
                 modeSwitcher: false, noColor: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-stroke-color',
                 change: (args) => {
-                    this.parent.updateStrokeColor(args.currentValue.hex);
+                    parent.updateStrokeColor(args.currentValue.hex);
                     strokeDDB.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB.toggle();
                 }
@@ -19770,7 +19718,7 @@ class ToolbarModule {
                     if (Browser.isDevice) {
                         args.element.parentElement.style.top = strokeDDB.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',
@@ -19809,18 +19757,18 @@ class ToolbarModule {
                 },
                 select: (args) => {
                     spanElem.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 */
-                            const toolbar = getComponent(this.parent.element.id + '_bottomToolbar', 'toolbar');
+                            const toolbar = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
                             toolbar.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 */
-                            const toolbar = getComponent(this.parent.element.id + '_toolbar', 'toolbar');
+                            const toolbar = getComponent(parent.element.id + '_toolbar', 'toolbar');
                             toolbar.refreshOverflow();
                         }
                     }
@@ -19844,10 +19792,10 @@ class ToolbarModule {
         ];
         const strokeWidthBtn = document.getElementById(parent.element.id + '_startBtn');
         const 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.
@@ -19884,10 +19832,10 @@ class ToolbarModule {
         ];
         const strokeEndBtn = document.getElementById(parent.element.id + '_endBtn');
         const 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.
@@ -19913,9 +19861,9 @@ class ToolbarModule {
     getTextToolbarItem(items) {
         const parent = this.parent;
         const 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',
@@ -19999,7 +19947,7 @@ class ToolbarModule {
                 }
                 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();
@@ -20008,7 +19956,7 @@ class ToolbarModule {
                 }
                 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();
                     }
@@ -20025,7 +19973,7 @@ class ToolbarModule {
     }
     createTextColor(items) {
         const 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'
             }));
@@ -20033,7 +19981,7 @@ class ToolbarModule {
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
                 change: (args) => {
-                    this.parent.updateFontColor(args.currentValue.hex);
+                    parent.updateFontColor(args.currentValue.hex);
                     strokeDDB.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB.toggle();
                 }
@@ -20067,7 +20015,7 @@ class ToolbarModule {
                 spanElem.innerHTML = 'Arial';
             }
             spanElem.className = 'e-text-font-family';
-            if (!isNullOrUndefined(fontNameBtn)) {
+            if (fontNameBtn) {
                 fontNameBtn.appendChild(spanElem);
             }
             const fontFamilyBtn = new DropDownButton({ items: this.getFontFamilyItems(),
@@ -20128,24 +20076,25 @@ class ToolbarModule {
         }
     }
     refreshToolbar(type, isApplyBtn, isCropping, isZooming, cType) {
-        if (!this.parent.isImageLoaded || this.parent.isCropToolbar) {
+        const parent = this.parent;
+        if (!parent.isImageLoaded || parent.isCropToolbar) {
             return;
         }
         const 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) {
@@ -20172,16 +20121,16 @@ class ToolbarModule {
                 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':
@@ -20189,7 +20138,7 @@ class ToolbarModule {
                     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':
@@ -20197,7 +20146,7 @@ class ToolbarModule {
                     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':
@@ -20213,11 +20162,11 @@ class ToolbarModule {
                 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;
         }
@@ -20226,32 +20175,33 @@ class ToolbarModule {
     }
     getAdjustmentToolbarItem() {
         const 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',
+        const 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' });
         }
         const tempToolbarItems = this.processToolbar('center');
@@ -20259,49 +20209,50 @@ class ToolbarModule {
             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;
     }
     getFilterToolbarItem() {
         const 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',
+        const 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>' });
         }
         const tempToolbarItems = this.processToolbar('center');
         for (let i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -20312,20 +20263,20 @@ class ToolbarModule {
     getPenToolbarItem(items) {
         const parent = this.parent;
         const 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) {
@@ -20337,14 +20288,15 @@ class ToolbarModule {
             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;
     }
     initPenToolbarItem(items) {
+        const parent = this.parent;
         const leftItem = this.getLeftToolbarItem();
         const rightItem = this.getRightToolbarItem();
         const mainItem = this.getPenToolbarItem(items);
@@ -20367,9 +20319,9 @@ class ToolbarModule {
                 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();
@@ -20377,7 +20329,7 @@ class ToolbarModule {
                 }
                 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();
                     }
@@ -20385,16 +20337,15 @@ class ToolbarModule {
             }
         });
         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();
     }
     createPenColor(items) {
         const 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'
@@ -20403,7 +20354,7 @@ class ToolbarModule {
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-pen-color',
                 change: (args) => {
-                    this.parent.updatePenStrokeColor(args.currentValue.hex);
+                    parent.updatePenStrokeColor(args.currentValue.hex);
                     this.selFhdColor = args.currentValue.hex;
                     strokeDDB.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB.toggle();
@@ -20426,7 +20377,7 @@ class ToolbarModule {
             const 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;
             }
@@ -20470,16 +20421,16 @@ class ToolbarModule {
                 },
                 select: (args) => {
                     spanElem.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 */
                             const toolbar = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
                             toolbar.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 */
                             const toolbar = getComponent(parent.element.id + '_toolbar', 'toolbar');
                             toolbar.refreshOverflow();
@@ -20527,14 +20478,14 @@ class ToolbarModule {
                     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();
                     }
@@ -20552,8 +20503,8 @@ class ToolbarModule {
     initFilterToolbarItem() {
         const parent = this.parent;
         const 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();
         }
         const toolbar = new Toolbar({
             width: '100%',
@@ -20563,7 +20514,7 @@ class ToolbarModule {
                 this.updatePrivateVariables();
                 this.createCanvasFilter();
                 if (parent.currentFilter === '') {
-                    parent.currentFilter = this.parent.element.id + '_default';
+                    parent.currentFilter = parent.element.id + '_default';
                 }
                 const hdrWrapper = document.querySelector('#' + parent.element.id + '_headWrapper');
                 if (hdrWrapper) {
@@ -20574,10 +20525,12 @@ class ToolbarModule {
                 toolbar.refreshOverflow();
             }
         });
-        toolbar.appendTo('#' + this.parent.element.id + '_contextualToolbar');
+        toolbar.appendTo('#' + parent.element.id + '_contextualToolbar');
     }
     createCanvasFilter() {
         const parent = this.parent;
+        showSpinner(parent.element);
+        parent.element.style.opacity = '0.5';
         const imageData = parent.getCurrentCanvasData();
         this.inMemoryCanvas.width = imageData.width;
         this.inMemoryCanvas.height = imageData.height;
@@ -20589,16 +20542,19 @@ class ToolbarModule {
         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;
     }
     updateFilterCanvas(selector, type) {
-        const filter = this.parent.element.querySelector('#' + this.parent.element.id + selector);
-        if (!isNullOrUndefined(filter)) {
+        const parent = this.parent;
+        const filter = parent.element.querySelector('#' + parent.element.id + selector);
+        if (filter) {
             let 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);
         }
     }
@@ -20648,47 +20604,51 @@ class ToolbarModule {
         return orgToolbarItems;
     }
     renderQAT(isPenEdit) {
-        if (!isNullOrUndefined(this.parent.activeObj) && this.parent.showQuickAccessToolbar) {
-            const qtArea = document.getElementById(this.parent.element.id + '_quickAccessToolbarArea');
-            if (!isNullOrUndefined(document.getElementById(this.parent.element.id + '_quickAccessToolbarArea'))) {
+        const parent = this.parent;
+        if (parent.activeObj && parent.showQuickAccessToolbar) {
+            const 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';
             }
             const items = this.getQuickAccessToolbarItem(isPenEdit);
             if (items.length === 0) {
                 return;
             }
-            if (isNullOrUndefined(this.parent.quickAccessToolbarTemplate)) {
+            if (isNullOrUndefined(parent.quickAccessToolbarTemplate)) {
                 const 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);
-                let x = this.parent.activeObj.activePoint.startX < this.parent.activeObj.activePoint.endX ?
-                    this.parent.activeObj.activePoint.startX : this.parent.activeObj.activePoint.endX;
-                let y = this.parent.activeObj.activePoint.startY < this.parent.activeObj.activePoint.endY ?
-                    this.parent.activeObj.activePoint.startY : this.parent.activeObj.activePoint.endY;
-                let width = this.parent.activeObj.activePoint.width;
-                if (this.parent.activeObj.rotatedAngle !== 0 && this.parent.activeObj.shape !== 'arrow') {
-                    const 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);
+                let x = parent.activeObj.activePoint.startX < parent.activeObj.activePoint.endX ?
+                    parent.activeObj.activePoint.startX : parent.activeObj.activePoint.endX;
+                let y = parent.activeObj.activePoint.startY < parent.activeObj.activePoint.endY ?
+                    parent.activeObj.activePoint.startY : parent.activeObj.activePoint.endY;
+                let width = parent.activeObj.activePoint.width;
+                if (parent.activeObj.rotatedAngle !== 0 && parent.activeObj.shape !== 'arrow') {
+                    const object = { activePoint: null };
+                    parent.notify('shape', { prop: 'getSquarePointForRotatedShape', onPropertyChange: false,
+                        value: { obj: parent.activeObj, object: object } });
+                    const point = object['activePoint'];
                     x = point.startX;
                     y = point.startY;
                     width = point.width;
                 }
-                else if (this.parent.activeObj.shape === 'path') {
-                    const path = this.parent.getSquarePointForPath(this.parent.activeObj);
+                else if (parent.activeObj.shape === 'path') {
+                    const 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';
@@ -20697,14 +20657,14 @@ class ToolbarModule {
             else if (isPenEdit) {
                 const obj = { activePoint: null };
                 const 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 } });
                 const 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';
@@ -20716,8 +20676,9 @@ class ToolbarModule {
         if (isNullOrUndefined(isDisabled)) {
             return;
         }
-        const annotation = document.querySelector('#' + this.parent.element.id + '_annotationBtn');
-        if (!isNullOrUndefined(annotation)) {
+        const parent = this.parent;
+        const annotation = document.querySelector('#' + parent.element.id + '_annotationBtn');
+        if (annotation) {
             if (isDisabled) {
                 annotation.classList.add('e-disabled');
                 annotation.parentElement.classList.add('e-overlay');
@@ -20728,8 +20689,8 @@ class ToolbarModule {
             }
             getComponent(annotation, 'dropdown-btn').disabled = isDisabled;
         }
-        const transform = document.querySelector('#' + this.parent.element.id + '_transformBtn');
-        if (!isNullOrUndefined(transform)) {
+        const transform = document.querySelector('#' + parent.element.id + '_transformBtn');
+        if (transform) {
             if (isDisabled) {
                 transform.classList.add('e-disabled');
                 transform.parentElement.classList.add('e-overlay');
@@ -20740,8 +20701,8 @@ class ToolbarModule {
             }
             getComponent(transform, 'dropdown-btn').disabled = isDisabled;
         }
-        const adjustment = document.querySelector('#' + this.parent.element.id + '_adjustment');
-        if (!isNullOrUndefined(adjustment)) {
+        const adjustment = document.querySelector('#' + parent.element.id + '_adjustment');
+        if (adjustment) {
             if (isDisabled) {
                 adjustment.classList.add('e-disabled');
                 adjustment.parentElement.classList.add('e-overlay');
@@ -20752,8 +20713,8 @@ class ToolbarModule {
             }
             getComponent(adjustment, 'btn').disabled = isDisabled;
         }
-        const filter = document.querySelector('#' + this.parent.element.id + '_filter');
-        if (!isNullOrUndefined(filter)) {
+        const filter = document.querySelector('#' + parent.element.id + '_filter');
+        if (filter) {
             if (isDisabled) {
                 filter.classList.add('e-disabled');
                 filter.parentElement.classList.add('e-overlay');
@@ -20783,7 +20744,7 @@ class ToolbarModule {
     quickAccessToolbarClicked(args, isContextualToolbar) {
         const parent = this.parent;
         const points = { x: parent.activeObj.activePoint.startX, y: parent.activeObj.activePoint.startY };
-        if (!isNullOrUndefined(args.item)) {
+        if (args.item) {
             let duplicateObj;
             let objColl;
             let isPreventUndoRedo = null;
@@ -20796,7 +20757,7 @@ class ToolbarModule {
             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;
                         }
@@ -20804,7 +20765,7 @@ class ToolbarModule {
                         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 } });
@@ -20831,19 +20792,19 @@ class ToolbarModule {
                             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) } });
@@ -20860,10 +20821,10 @@ class ToolbarModule {
                         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';
                         }
                     }
@@ -20884,7 +20845,7 @@ class ToolbarModule {
             }
             parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
         }
-        if (!isNullOrUndefined(args.item)) {
+        if (args.item) {
             const type = args.item.id.replace(parent.element.id + '_', '').toLowerCase();
             if (type === 'duplicate' || type === 'remove' || type === 'edittext') {
                 this.quickAccessToolbarClicked(args, true);
@@ -20894,11 +20855,11 @@ class ToolbarModule {
                 let isDisabledFilter = false;
                 let isDisabledAdjustment = false;
                 const adjustment = document.querySelector('#' + parent.element.id + '_adjustment');
-                if (!isNullOrUndefined(adjustment) && adjustment.classList.contains('e-disabled')) {
+                if (adjustment && adjustment.classList.contains('e-disabled')) {
                     isDisabledAdjustment = true;
                 }
                 const 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();
@@ -20943,18 +20904,18 @@ class ToolbarModule {
                         }
                     }
                     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');
                     }
@@ -20969,19 +20930,6 @@ class ToolbarModule {
                     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':
@@ -21095,7 +21043,7 @@ class ToolbarModule {
                 case 'rotateright':
                 case 'horizontalflip':
                 case 'verticalflip':
-                    this.parent.transformSelect(type);
+                    parent.transformSelect(type);
                     parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
                     break;
                 case 'save':
@@ -21120,7 +21068,7 @@ class ToolbarModule {
         }
         const type = args.item.id.replace(parent.element.id, '').split('_')[1];
         const imageFiltering = { filter: parent.toPascalCase(type), cancel: false };
-        this.parent.trigger('imageFiltering', imageFiltering);
+        parent.trigger('imageFiltering', imageFiltering);
         if (imageFiltering.cancel) {
             return;
         }
@@ -21131,11 +21079,12 @@ class ToolbarModule {
         this.enableDisableTbrBtn();
     }
     refreshShapeDrawing() {
+        const parent = this.parent;
         const 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);
         }
     }
@@ -21214,9 +21163,9 @@ class ToolbarModule {
     closeContextualToolbar() {
         const parent = this.parent;
         let 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();
@@ -21227,12 +21176,13 @@ class ToolbarModule {
     }
     destroyQuickAccessToolbar() {
         const 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();
+        const 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';
+        const qatArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
+        if (qatArea) {
+            qatArea.style.display = 'none';
         }
     }
     renderSlider(type) {
@@ -21245,7 +21195,7 @@ class ToolbarModule {
                 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;'
@@ -21259,12 +21209,12 @@ class ToolbarModule {
             id: parent.element.id + '_sliderWrapper',
             styles: 'position: absolute'
         }));
-        const value = this.parent.getCurrAdjustmentValue(type);
+        const value = parent.getCurrAdjustmentValue(type);
         let min;
         let max;
         let 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;
@@ -21277,7 +21227,7 @@ class ToolbarModule {
                     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;
                 }
@@ -21332,27 +21282,29 @@ class ToolbarModule {
             width: Browser.isDevice ? '200px' : '300px',
             cssClass: 'e-slider',
             change: (args) => {
-                this.parent.setCurrAdjustmentValue(type, args.value);
+                parent.setCurrAdjustmentValue(type, args.value);
                 this.enableDisableTbrBtn();
             }
         });
     }
     applyPreviewFilter() {
-        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;
+        const parent = this.parent;
+        if (document.querySelector('#' + parent.element.id + '_sliderWrapper') ||
+            parent.currObjType.isFiltered) {
+            parent.initialAdjustmentValue = parent.canvasFilter = this.lowerContext.filter;
+            parent.currObjType.isFiltered = false;
         }
     }
     unselectBtn() {
+        const parent = this.parent;
         const 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 (const selector of selectors) {
             const element = document.querySelector(selector);
@@ -21376,68 +21328,69 @@ class ToolbarModule {
         if (hdrWrapper) {
             hdrWrapper.style.display = 'none';
         }
-        if (!isNullOrUndefined(sliderWrapper) && !isNullOrUndefined(slider)) {
+        if (sliderWrapper && slider) {
             slider.ej2_instances[0].destroy();
             sliderWrapper.remove();
         }
     }
     updateToolbarItems() {
-        const selFillElem = this.parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
-        const selStrokeElem = this.parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
-        const selTextStrokeElem = this.parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');
-        const selPenStrokeElem = this.parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview');
-        const strokeWidthElem = this.parent.element.querySelector('.e-shape-stroke-width');
-        const fontFamilyElem = this.parent.element.querySelector('.e-text-font-family');
-        const fontSizeElem = this.parent.element.querySelector('.e-text-font-size');
-        const boldBtn = this.parent.element.querySelector('#' + this.parent.element.id + '_bold');
-        const italicBtn = this.parent.element.querySelector('#' + this.parent.element.id + '_italic');
-        if (isNullOrUndefined(this.parent.activeObj.strokeSettings.strokeWidth)) {
-            this.parent.activeObj.strokeSettings.strokeWidth = 2;
+        const parent = this.parent;
+        const selFillElem = parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
+        const selStrokeElem = parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
+        const selTextStrokeElem = parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');
+        const selPenStrokeElem = parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview');
+        const strokeWidthElem = parent.element.querySelector('.e-shape-stroke-width');
+        const fontFamilyElem = parent.element.querySelector('.e-text-font-family');
+        const fontSizeElem = parent.element.querySelector('.e-text-font-size');
+        const boldBtn = parent.element.querySelector('#' + parent.element.id + '_bold');
+        const 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 (let i = 0; i < this.parent.fontSizeColl.length; i++) {
-                if (parseInt(this.parent.fontSizeColl[i].text, 10) >= Math.round(this.parent.activeObj.textSettings.fontSize)) {
+            for (let 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 {
@@ -21445,7 +21398,7 @@ class ToolbarModule {
             }
         }
         if (italicBtn) {
-            if (this.parent.activeObj.textSettings.italic) {
+            if (parent.activeObj.textSettings.italic) {
                 italicBtn.classList.add('e-selected-btn');
             }
             else {
@@ -21453,7 +21406,7 @@ class ToolbarModule {
             }
         }
         if (strokeWidthElem) {
-            const strokeWidth = Math.round((this.parent.activeObj.strokeSettings.strokeWidth)).toString();
+            const strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
             strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
         }
     }
@@ -21483,7 +21436,7 @@ class ToolbarModule {
         const parent = this.parent;
         parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
         const panBtn = parent.element.querySelector('.e-img-pan .e-btn');
-        if (!isNullOrUndefined(panBtn)) {
+        if (panBtn) {
             panBtn.classList.remove('e-selected-btn');
         }
         parent.pan(false);
@@ -21494,22 +21447,23 @@ class ToolbarModule {
         }
     }
     destroySubComponents() {
-        const inputElement = this.parent.element.querySelectorAll('input.e-control');
-        const btnElement = this.parent.element.querySelectorAll('button.e-control');
+        const parent = this.parent;
+        const inputElement = parent.element.querySelectorAll('input.e-control');
+        const btnElement = parent.element.querySelectorAll('button.e-control');
         for (let 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 (let 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));
             }
         }
     }