@syncfusion/ej2-image-editor 22.1.34 → 22.1.37

package/src/image-editor/renderer/toolbar.js

@@ -114,6 +114,7 @@ var ToolbarModule = /** @class */ (function () {
         this.l10n = new L10n('image-editor', this.defaultLocale, this.parent.locale);
     };
     ToolbarModule.prototype.toolbar = function (args) {
+        var parent = this.parent;
         this.updatePrivateVariables();
         switch (args.prop) {
             case 'create-toolbar':
@@ -186,19 +187,19 @@ var ToolbarModule = /** @class */ (function () {
                 this.selFhdColor = args.value['color'];
                 break;
             case 'getCurrentFilter':
-                args.value['obj']['currentFilter'] = this.parent.currentFilter;
+                args.value['obj']['currentFilter'] = parent.currentFilter;
                 break;
             case 'setCurrentFilter':
-                this.parent.currentFilter = args.value['filter'];
+                parent.currentFilter = args.value['filter'];
                 break;
             case 'setInitialAdjustmentValue':
-                this.parent.initialAdjustmentValue = args.value['value'];
+                parent.initialAdjustmentValue = args.value['value'];
                 break;
             case 'getCanvasFilter':
-                args.value['obj']['canvasFilter'] = this.parent.canvasFilter;
+                args.value['obj']['canvasFilter'] = parent.canvasFilter;
                 break;
             case 'setCanvasFilter':
-                this.parent.canvasFilter = args.value['filter'];
+                parent.canvasFilter = args.value['filter'];
                 break;
             case 'getDefToolbarItems':
                 args.value['obj']['defToolbarItems'] = this.defToolbarItems;
@@ -210,7 +211,7 @@ var ToolbarModule = /** @class */ (function () {
                 this.performDefTbrClick(args.value['type'], args.value['isContextualToolbar'], args.value['isDisabledAdjustment'], args.value['isDisabledFilter'], args.value['isFilterFinetune']);
                 break;
             case 'setTempFilterProperties':
-                this.parent.setTempFilterProperties();
+                parent.setTempFilterProperties();
                 break;
             case 'refreshSlider':
                 this.refreshSlider();
@@ -219,28 +220,25 @@ var ToolbarModule = /** @class */ (function () {
                 this.renderSlider(args.value['type']);
                 break;
             case 'getCurrAdjustmentValue':
-                this.parent.getCurrAdjustmentValue(args.value['type']);
+                parent.getCurrAdjustmentValue(args.value['type']);
                 break;
             case 'setCurrAdjustmentValue':
-                this.parent.setCurrAdjustmentValue(args.value['type'], args.value['value']);
+                parent.setCurrAdjustmentValue(args.value['type'], args.value['value']);
                 break;
             case 'refreshShapeDrawing':
                 this.refreshShapeDrawing();
                 break;
-            case 'getSquarePointForRotatedShape':
-                this.parent.getSquarePointForRotatedShape(args.value['obj'], args.value['object']);
-                break;
             case 'getCropToolbar':
-                args.value['obj']['isCropToolbar'] = this.parent.isCropToolbar;
+                args.value['obj']['isCropToolbar'] = parent.isCropToolbar;
                 break;
             case 'getPrevCurrSelectionPoint':
-                args.value['obj']['prevCurrSelectionPoint'] = this.parent.prevCurrSelectionPoint;
+                args.value['obj']['prevCurrSelectionPoint'] = parent.prevCurrSelectionPoint;
                 break;
             case 'setPrevCurrSelectionPoint':
-                this.parent.prevCurrSelectionPoint = args.value['point'];
+                parent.prevCurrSelectionPoint = args.value['point'];
                 break;
             case 'updateCropTransformItems':
-                this.parent.updateCropTransformItems();
+                parent.updateCropTransformItems();
                 break;
             case 'setEnableDisableUndoRedo':
                 this.preventEnableDisableUr = args.value['isPrevent'];
@@ -253,52 +251,54 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.updatePrivateVariables = function () {
         var parent = this.parent;
         this.inMemoryCanvas = parent.inMemoryCanvas;
-        if (!isNullOrUndefined(parent.lowerCanvas)) {
+        if (parent.lowerCanvas) {
             this.lowerContext = parent.lowerCanvas.getContext('2d');
         }
-        if (!isNullOrUndefined(parent.upperCanvas)) {
+        if (parent.upperCanvas) {
             this.upperContext = parent.upperCanvas.getContext('2d');
         }
-        if (!isNullOrUndefined(this.inMemoryCanvas)) {
+        if (this.inMemoryCanvas) {
             this.inMemoryContext = this.inMemoryCanvas.getContext('2d');
         }
     };
     ToolbarModule.prototype.reset = function () {
+        var parent = this.parent;
         this.defToolbarItems = [];
         this.toolbarHeight = 46;
-        this.parent.prevCurrSelectionPoint = null;
+        parent.prevCurrSelectionPoint = null;
         this.zoomBtnHold = null;
         this.currToolbar = '';
         this.currentToolbar = 'main';
         this.selFhdColor = '#42a5f5';
-        this.parent.currentFilter = '';
-        this.preventZoomBtn = this.parent.isCropToolbar = this.preventEnableDisableUr = false;
-        this.parent.initialAdjustmentValue = this.parent.canvasFilter =
+        parent.currentFilter = '';
+        this.preventZoomBtn = parent.isCropToolbar = this.preventEnableDisableUr = false;
+        parent.initialAdjustmentValue = parent.canvasFilter =
             'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
                 'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
     };
     ToolbarModule.prototype.destroyTopToolbar = function () {
         var parent = this.parent;
-        if (this.isToolbar() && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar'))) &&
-            (!isNullOrUndefined(getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar')))) {
+        var toolbar = document.getElementById(parent.element.id + '_toolbar');
+        if (this.isToolbar() && toolbar && toolbar.classList.contains('e-control')) {
             getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
         }
     };
     ToolbarModule.prototype.destroyBottomToolbar = function () {
         var parent = this.parent;
-        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar')) &&
-            (!isNullOrUndefined(getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar')))) {
+        var toolbar = document.getElementById(parent.element.id + '_bottomToolbar');
+        if (toolbar && toolbar.classList.contains('e-control')) {
             getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
         }
     };
     ToolbarModule.prototype.isToolbar = function () {
-        return (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.length > 0)
-            || !isNullOrUndefined(this.parent.toolbarTemplate));
+        var parent = this.parent;
+        return (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)
+            || !isNullOrUndefined(parent.toolbarTemplate));
     };
     ToolbarModule.prototype.createToolbar = function () {
         var _this = this;
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.length > 0)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             parent.element.appendChild(parent.createElement('div', {
                 id: parent.element.id + '_toolbarArea', className: 'e-toolbar-area'
             }));
@@ -324,10 +324,10 @@ var ToolbarModule = /** @class */ (function () {
                             if (!parent.disabled) {
                                 if (Browser.isDevice) {
                                     if (_this.defToolbarItems.length > 0 &&
-                                        (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                                        document.getElementById(parent.element.id + '_toolbar')) {
                                         getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
                                     }
-                                    if (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar'))) {
+                                    if (document.getElementById(parent.element.id + '_bottomToolbar')) {
                                         getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
                                     }
                                     _this.initMainToolbar(false, Browser.isDevice, null);
@@ -335,7 +335,7 @@ var ToolbarModule = /** @class */ (function () {
                                 }
                                 else {
                                     if (_this.defToolbarItems.length > 0 &&
-                                        (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                                        document.getElementById(parent.element.id + '_toolbar')) {
                                         getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
                                     }
                                     _this.initMainToolbar(false, false, null);
@@ -352,7 +352,7 @@ var ToolbarModule = /** @class */ (function () {
                 clicked: this.defToolbarClicked.bind(this) });
             toolbarObj.appendTo('#' + parent.element.id + '_toolbar');
             this.createLeftToolbarControls();
-            if (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar'))) {
+            if (document.getElementById(parent.element.id + '_toolbar')) {
                 this.toolbarHeight = document.getElementById(parent.element.id + '_toolbar').clientHeight;
             }
         }
@@ -362,7 +362,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.createContextualToolbar = function () {
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.length > 0)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             parent.element.appendChild(parent.createElement('div', { id: parent.element.id + '_contextualToolbarArea',
                 className: 'e-contextual-toolbar-wrapper e-hide', attrs: { style: 'position: absolute;' }
             }));
@@ -373,7 +373,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.createBottomToolbar = function () {
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.length > 0)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             parent.element.appendChild(parent.createElement('div', {
                 id: parent.element.id + '_bottomToolbarArea', className: 'e-bottom-toolbar'
             }));
@@ -437,7 +437,7 @@ var ToolbarModule = /** @class */ (function () {
             toolbarObj.appendTo('#' + parent.element.id + '_toolbar');
             this.createLeftToolbarControls();
             this.enableDisableTbrBtn();
-            if (this.isToolbar() && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+            if (this.isToolbar() && document.getElementById(parent.element.id + '_toolbar')) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 var toolbar_4 = getComponent(parent.element.id + '_toolbar', 'toolbar');
                 toolbar_4.refreshOverflow();
@@ -447,7 +447,7 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.initBottomToolbar = function () {
         var _this = this;
         var parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.length > 0)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             var items = this.getMainToolbarItem();
             var toolbarObj = new Toolbar({ items: items, width: '100%',
                 created: function () {
@@ -459,7 +459,7 @@ var ToolbarModule = /** @class */ (function () {
                 clicked: this.defToolbarClicked.bind(this)
             });
             toolbarObj.appendTo('#' + parent.element.id + '_bottomToolbar');
-            if (this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar')))) {
+            if (this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                 var toolbar_5 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
                 toolbar_5.refreshOverflow();
@@ -474,21 +474,21 @@ var ToolbarModule = /** @class */ (function () {
             toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
         }
         if (parent.allowUndoRedo) {
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Undo') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Undo') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_undo', prefixIcon: 'e-icons e-undo', cssClass: 'top-icon e-undo',
                     tooltipText: this.l10n.getConstant('Undo'), align: 'Left' });
             }
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Redo') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Redo') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_redo', prefixIcon: 'e-icons e-redo', cssClass: 'top-icon e-redo',
                     tooltipText: this.l10n.getConstant('Redo'), align: 'Left' });
             }
         }
         if (!this.preventZoomBtn && (parent.zoomSettings.zoomTrigger & ZoomTrigger.Toolbar) === ZoomTrigger.Toolbar) {
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('ZoomOut') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('ZoomOut') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_zoomOut', prefixIcon: 'e-icons e-zoom-out', cssClass: 'top-icon e-dec-zoom',
                     tooltipText: this.l10n.getConstant('ZoomOut'), align: 'Left' });
             }
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('ZoomIn') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('ZoomIn') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_zoomIn', prefixIcon: 'e-icons e-zoom-in', cssClass: 'top-icon e-inc-zoom',
                     tooltipText: this.l10n.getConstant('ZoomIn'), align: 'Left' });
             }
@@ -508,12 +508,12 @@ var ToolbarModule = /** @class */ (function () {
             toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Reset') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Reset') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_reset', prefixIcon: 'e-icons e-btn-reset', cssClass: 'top-icon e-img-reset',
                 tooltipText: this.l10n.getConstant('Reset'), align: 'Right' });
         }
         if (!isOkBtn) {
-            if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Save') > -1)) {
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Save') > -1)) {
                 toolbarItems.push({ id: parent.element.id + '_save', prefixIcon: 'e-icons e-btn-save', cssClass: 'top-icon e-save',
                     tooltipText: this.l10n.getConstant('Save'), align: 'Right', template: '<button id="' + parent.element.id + '_saveBtn"></button>' });
             }
@@ -527,19 +527,19 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.getMainToolbarItem = function (isApplyOption) {
         var parent = this.parent;
         var toolbarItems = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Crop') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Crop') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_cropTransform', prefixIcon: 'e-icons e-crop', cssClass: 'top-icon e-crop',
                 tooltipText: this.l10n.getConstant('CropAndTransform'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Annotate') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Annotate') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + this.parent.element.id + '_annotationBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Finetune') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Finetune') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_adjustment', prefixIcon: 'e-icons e-adjustment', cssClass: 'top-icon e-adjustment',
                 tooltipText: this.l10n.getConstant('Finetune'), align: 'Center' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Filter') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Filter') > -1)) {
             toolbarItems.push({ id: parent.element.id + '_filter', prefixIcon: 'e-icons e-filters', cssClass: 'top-icon e-filters',
                 tooltipText: this.l10n.getConstant('Filter'), align: 'Center' });
         }
@@ -602,7 +602,7 @@ var ToolbarModule = /** @class */ (function () {
                 if (typeof (parent.toolbar[i]) === 'object') {
                     if (isNullOrUndefined(parent.toolbar[i].align)) {
                         if (position === 'left') {
-                            toolbarItems.push(this.parent.toolbar[i]);
+                            toolbarItems.push(parent.toolbar[i]);
                         }
                     }
                     else if (parent.toolbar[i].align.toLowerCase() === position) {
@@ -628,13 +628,13 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.wireZoomBtnEvents = function () {
         var zoomIn = document.querySelector('#' + this.parent.element.id + '_zoomIn');
         var zoomOut = document.querySelector('#' + this.parent.element.id + '_zoomOut');
-        if (!isNullOrUndefined(zoomIn)) {
+        if (zoomIn) {
             zoomIn.addEventListener('mousedown', this.zoomInBtnMouseDownHandler.bind(this));
             zoomIn.addEventListener('mouseup', this.zoomBtnMouseUpHandler.bind(this));
             zoomIn.addEventListener('click', this.zoomInBtnClickHandler.bind(this));
             zoomIn.addEventListener('touchstart', this.zoomInBtnClickHandler.bind(this));
         }
-        if (!isNullOrUndefined(zoomOut)) {
+        if (zoomOut) {
             zoomOut.addEventListener('mousedown', this.zoomOutBtnMouseDownHandler.bind(this));
             zoomOut.addEventListener('mouseup', this.zoomBtnMouseUpHandler.bind(this));
             zoomOut.addEventListener('click', this.zoomOutBtnClickHandler.bind(this));
@@ -649,58 +649,58 @@ var ToolbarModule = /** @class */ (function () {
             var undoRedoObj = { undoRedoStep: null };
             parent.notify('undo-redo', { prop: 'getUndoRedoStep', value: { obj: undoRedoObj } });
             var undo = document.querySelector('#' + parent.element.id + '_undo');
-            if (!isNullOrUndefined(undo) && undoRedoObj['undoRedoStep'] === 0) {
+            if (undo && undoRedoObj['undoRedoStep'] === 0) {
                 undo.classList.add('e-disabled');
                 undo.parentElement.classList.add('e-overlay');
             }
-            else if (!isNullOrUndefined(undo) && undoRedoObj['undoRedoStep'] > 0) {
+            else if (undo && undoRedoObj['undoRedoStep'] > 0) {
                 undo.classList.remove('e-disabled');
                 undo.parentElement.classList.remove('e-overlay');
             }
             var redo = document.querySelector('#' + parent.element.id + '_redo');
-            if (!isNullOrUndefined(redo) && (undoRedoObj['undoRedoStep'] === object['appliedUndoRedoColl'].length)) {
+            if (redo && (undoRedoObj['undoRedoStep'] === object['appliedUndoRedoColl'].length)) {
                 redo.classList.add('e-disabled');
                 redo.parentElement.classList.add('e-overlay');
             }
-            else if (!isNullOrUndefined(redo) && (undoRedoObj['undoRedoStep'] === 0 && object['appliedUndoRedoColl'].length > 0)) {
+            else if (redo && (undoRedoObj['undoRedoStep'] === 0 && object['appliedUndoRedoColl'].length > 0)) {
                 redo.classList.remove('e-disabled');
                 redo.parentElement.classList.remove('e-overlay');
             }
-            else if (!isNullOrUndefined(redo) && undoRedoObj['undoRedoStep'] > 0) {
+            else if (redo && undoRedoObj['undoRedoStep'] > 0) {
                 redo.classList.remove('e-disabled');
                 redo.parentElement.classList.remove('e-overlay');
             }
         }
         var zoomIn = document.querySelector('#' + parent.element.id + '_zoomIn');
-        if (!isNullOrUndefined(zoomIn) && parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor) {
+        if (zoomIn && parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor) {
             zoomIn.classList.add('e-disabled');
             zoomIn.parentElement.classList.add('e-overlay');
         }
-        else if (!isNullOrUndefined(zoomIn)) {
+        else if (zoomIn) {
             zoomIn.classList.remove('e-disabled');
             zoomIn.parentElement.classList.remove('e-overlay');
         }
         var zoomOut = document.querySelector('#' + parent.element.id + '_zoomOut');
-        if (!isNullOrUndefined(zoomOut) && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
+        if (zoomOut && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
             zoomOut.classList.add('e-disabled');
             zoomOut.parentElement.classList.add('e-overlay');
         }
-        else if (!isNullOrUndefined(zoomOut)) {
+        else if (zoomOut) {
             zoomOut.classList.remove('e-disabled');
             zoomOut.parentElement.classList.remove('e-overlay');
         }
         var pan = document.querySelector('#' + parent.element.id + '_pan');
-        if (!isNullOrUndefined(pan) && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
+        if (pan && parent.zoomSettings.zoomFactor <= parent.zoomSettings.minZoomFactor) {
             pan.style.display = 'none';
         }
-        else if (!isNullOrUndefined(pan)) {
+        else if (pan) {
             pan.style.display = 'block';
         }
     };
     ToolbarModule.prototype.createLeftToolbarControls = function () {
         var parent = this.parent;
         if (this.defToolbarItems !== undefined && this.defToolbarItems.length > 0 &&
-            (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+            (document.getElementById(parent.element.id + '_toolbar'))) {
             var uploadDiv = document.getElementById(parent.element.id + '_toolbar')
                 .querySelector('.e-image-upload');
             if (uploadDiv) {
@@ -722,25 +722,25 @@ var ToolbarModule = /** @class */ (function () {
         var _this = this;
         var parent = this.parent;
         var items = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Pen') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Pen') > -1)) {
             items.push({ text: this.l10n.getConstant('Pen'), id: 'pen', iconCss: 'e-icons e-free-pen' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && parent.toolbar.indexOf('Line') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Line') > -1)) {
             items.push({ text: this.l10n.getConstant('Line'), id: 'line', iconCss: 'e-icons e-line' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Rectangle') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Rectangle') > -1)) {
             items.push({ text: this.l10n.getConstant('Rectangle'), id: 'rectangle', iconCss: 'e-icons e-rectangle' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Ellipse') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Ellipse') > -1)) {
             items.push({ text: this.l10n.getConstant('Ellipse'), id: 'ellipse', iconCss: 'e-icons e-circle' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(toolbar) && parent.toolbar.indexOf('Arrow') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Arrow') > -1)) {
             items.push({ text: this.l10n.getConstant('Arrow'), id: 'arrow', iconCss: 'e-icons e-arrow-right-up' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Path') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Path') > -1)) {
             items.push({ text: this.l10n.getConstant('Path'), id: 'path', iconCss: 'e-icons e-critical-path' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('Text') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Text') > -1)) {
             items.push({ text: this.l10n.getConstant('Text'), id: 'text', iconCss: 'e-icons e-add-text' });
         }
         var obj = { freehandDrawSelectedId: null };
@@ -749,7 +749,7 @@ var ToolbarModule = /** @class */ (function () {
         var removeElement = document.querySelector('#' + parent.element.id + '_remove');
         var editTextElement = document.querySelector('#' + parent.element.id + '_editText');
         if ((parent.activeObj.activePoint.width === 0 && parent.activeObj.activePoint.height === 0) &&
-            (isNullOrUndefined(parent.activeObj.pointColl) || (!isNullOrUndefined(parent.activeObj.pointColl)
+            (isNullOrUndefined(parent.activeObj.pointColl) || (parent.activeObj.pointColl
                 && parent.activeObj.pointColl.length === 0)) &&
             isNullOrUndefined(obj['freehandDrawSelectedId'])) {
             if (duplicateElement) {
@@ -781,10 +781,10 @@ var ToolbarModule = /** @class */ (function () {
                     args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
                         args.element.parentElement.offsetHeight + 'px';
                 }
-                if (!isNullOrUndefined(_this.parent.activeObj.shape)) {
-                    document.getElementById(_this.parent.activeObj.shape).classList.add('e-selected');
+                if (parent.activeObj.shape) {
+                    document.getElementById(parent.activeObj.shape).classList.add('e-selected');
                 }
-                else if (_this.parent.togglePen) {
+                else if (parent.togglePen) {
                     document.getElementById('pen').classList.add('e-selected');
                 }
             },
@@ -839,22 +839,22 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         // Render initialized DropDownButton.
-        drpDownBtn.appendTo('#' + this.parent.element.id + '_annotationBtn');
+        drpDownBtn.appendTo('#' + parent.element.id + '_annotationBtn');
     };
     ToolbarModule.prototype.renderCropBtn = function () {
         var _this = this;
         var parent = this.parent;
         var items = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('CustomSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('CustomSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Custom'), id: 'custom', iconCss: 'e-icons e-custom' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('CircleSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('CircleSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Circle'), id: 'circle', iconCss: 'e-icons e-circle' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('SquareSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('SquareSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Square'), id: 'square', iconCss: 'e-icons e-square' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('RatioSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('RatioSelection') > -1)) {
             items.push({ text: '3:2', id: '3:2', iconCss: 'e-icons e-custom-a' });
             items.push({ text: '4:3', id: '4:3', iconCss: 'e-icons e-custom-b' });
             items.push({ text: '5:4', id: '5:4', iconCss: 'e-icons e-custom-c' });
@@ -863,11 +863,11 @@ var ToolbarModule = /** @class */ (function () {
         }
         var iconCss;
         var shape;
-        if (!isNullOrUndefined(parent.activeObj.shape)) {
+        if (parent.activeObj.shape) {
             iconCss = this.getCurrentShapeIcon(parent.activeObj.shape);
             shape = parent.activeObj.shape;
         }
-        else if (!isNullOrUndefined(parent.currSelectionPoint)) {
+        else if (parent.currSelectionPoint) {
             iconCss = this.getCurrentShapeIcon(parent.currSelectionPoint.shape);
             shape = parent.currSelectionPoint.shape;
         }
@@ -884,8 +884,8 @@ var ToolbarModule = /** @class */ (function () {
                     args.element.parentElement.style.top = drpDownBtn.element.getBoundingClientRect().top -
                         args.element.parentElement.offsetHeight + 'px';
                 }
-                if (!isNullOrUndefined(_this.parent.activeObj.shape) && _this.parent.activeObj.shape.split('-').length > 1) {
-                    document.getElementById(_this.parent.activeObj.shape.split('-')[1]).classList.add('e-selected');
+                if (parent.activeObj.shape && parent.activeObj.shape.split('-').length > 1) {
+                    document.getElementById(parent.activeObj.shape.split('-')[1]).classList.add('e-selected');
                 }
                 parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
             },
@@ -898,21 +898,21 @@ var ToolbarModule = /** @class */ (function () {
             iconCss: 'e-icons ' + iconCss, cssClass: 'e-image-popup',
             content: parent.toPascalCase(shape.replace('crop-', ''))
         });
-        drpDownBtn.appendTo('#' + this.parent.element.id + '_cropBtn');
+        drpDownBtn.appendTo('#' + parent.element.id + '_cropBtn');
     };
     ToolbarModule.prototype.renderTransformBtn = function () {
         var parent = this.parent;
         var items = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('RotateLeft') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('RotateLeft') > -1)) {
             items.push({ text: this.l10n.getConstant('RotateLeft'), id: 'rotateleft', iconCss: 'e-icons e-anti-clock-wise' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('RotateRight') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('RotateRight') > -1)) {
             items.push({ text: this.l10n.getConstant('RotateRight'), id: 'rotateright', iconCss: 'e-icons e-clock-wise' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('FlipHorizontal') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('FlipHorizontal') > -1)) {
             items.push({ text: this.l10n.getConstant('HorizontalFlip'), id: 'horizontalflip', iconCss: 'e-icons e-horizontal-flip' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar) && parent.toolbar.indexOf('FlipVertical') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('FlipVertical') > -1)) {
             items.push({ text: this.l10n.getConstant('VerticalFlip'), id: 'verticalflip', iconCss: 'e-icons e-vertical-flip' });
         }
         var drpDownBtn = new DropDownButton({
@@ -925,27 +925,27 @@ var ToolbarModule = /** @class */ (function () {
                     args.element.parentElement.style.display = 'block';
                 }
             },
-            items: items, select: this.parent.transformSelect.bind(this),
+            items: items, select: parent.transformSelect.bind(this),
             iconCss: 'e-icons e-transform', cssClass: 'e-image-popup'
         });
         drpDownBtn.appendTo('#' + parent.element.id + '_transformBtn');
     };
     ToolbarModule.prototype.renderSaveBtn = function () {
-        var imageEditorObj = this.parent;
+        var parent = this.parent;
         var saveItems = [
             { text: 'JPEG', id: 'jpeg' },
             { text: 'PNG', id: 'png' },
             { text: 'SVG', id: 'svg' }
         ];
-        var ddbElem = document.getElementById(this.parent.element.id + '_saveBtn');
+        var ddbElem = document.getElementById(parent.element.id + '_saveBtn');
         if (ddbElem) {
             // Initialize the DropDownButton component.
             var saveDrpDownBtn = new DropDownButton({ items: saveItems, cssClass: 'e-caret-hide e-image-popup', iconCss: 'e-icons e-save',
                 select: function (args) {
-                    imageEditorObj.export(args.item.text);
+                    parent.export(args.item.text);
                 }
             });
-            saveDrpDownBtn.appendTo('#' + this.parent.element.id + '_saveBtn');
+            saveDrpDownBtn.appendTo('#' + parent.element.id + '_saveBtn');
         }
     };
     ToolbarModule.prototype.getCropTransformToolbarItem = function () {
@@ -955,19 +955,19 @@ var ToolbarModule = /** @class */ (function () {
             template: '<button id="' + parent.element.id + '_cropBtn"></button>'
         });
         toolbarItems.push({ align: 'Center', type: 'Separator' });
-        toolbarItems.push({ id: this.parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
+        toolbarItems.push({ id: parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
             tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
-        toolbarItems.push({ id: this.parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise',
+        toolbarItems.push({ id: parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise',
             tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
         toolbarItems.push({ align: 'Center', type: 'Separator' });
-        toolbarItems.push({ id: this.parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
+        toolbarItems.push({ id: parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
             tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
-        toolbarItems.push({ id: this.parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip',
+        toolbarItems.push({ id: parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip',
             tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: this.parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: this.parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
@@ -975,31 +975,31 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.getShapesToolbarItem = function (items) {
         var parent = this.parent;
         var toolbarItems = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar))) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar)) {
             toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + this.parent.element.id + '_annotationBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
         }
         if (items.indexOf('fillColor') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: this.parent.element.id + '_fillcolor',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_fillcolor',
                 cssClass: 'top-icon e-fill', tooltipText: this.l10n.getConstant('FillColor'), align: 'Center', type: 'Input',
-                template: '<button id="' + this.parent.element.id + '_fillColorBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_fillColorBtn"></button>' });
         }
         if (items.indexOf('strokeColor') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: this.parent.element.id + '_strokecolor',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_strokecolor',
                 cssClass: 'top-icon e-stroke', tooltipText: this.l10n.getConstant('StrokeColor'), align: 'Center', type: 'Input',
-                template: '<button id="' + this.parent.element.id + '_borderColorBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_borderColorBtn"></button>' });
         }
         if (items.indexOf('strokeWidth') > -1) {
-            toolbarItems.push({ id: this.parent.element.id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: 'Stroke Width', align: 'Center',
-                type: 'Input', template: '<button id="' + this.parent.element.id + '_borderWidthBtn"></button>' });
+            toolbarItems.push({ id: parent.element.id + '_strokeWidth', cssClass: 'top-icon e-size', tooltipText: 'Stroke Width', align: 'Center',
+                type: 'Input', template: '<button id="' + parent.element.id + '_borderWidthBtn"></button>' });
         }
         if (items.indexOf('start') > -1) {
-            toolbarItems.push({ id: this.parent.element.id + '_start', cssClass: 'top-icon e-size', tooltipText: 'Start', align: 'Center',
-                type: 'Input', template: '<button id="' + this.parent.element.id + '_startBtn"></button>' });
+            toolbarItems.push({ id: parent.element.id + '_start', cssClass: 'top-icon e-size', tooltipText: 'Start', align: 'Center',
+                type: 'Input', template: '<button id="' + parent.element.id + '_startBtn"></button>' });
         }
         if (items.indexOf('end') > -1) {
-            toolbarItems.push({ id: this.parent.element.id + '_end', cssClass: 'top-icon e-size', tooltipText: 'End', align: 'Center',
-                type: 'Input', template: '<button id="' + this.parent.element.id + '_endBtn"></button>' });
+            toolbarItems.push({ id: parent.element.id + '_end', cssClass: 'top-icon e-size', tooltipText: 'End', align: 'Center',
+                type: 'Input', template: '<button id="' + parent.element.id + '_endBtn"></button>' });
         }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
         if (items.indexOf('duplicate') > -1) {
@@ -1022,9 +1022,9 @@ var ToolbarModule = /** @class */ (function () {
             var obj = { shape: null };
             parent.notify('selection', { prop: 'getCurrentDrawingShape', value: { obj: obj } });
             if (obj['shape'] !== 'path') {
-                toolbarItems.push({ id: this.parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+                toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                     tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-                toolbarItems.push({ id: this.parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+                toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                     tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
             }
         }
@@ -1032,6 +1032,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.initCropTransformToolbar = function () {
         var _this = this;
+        var parent = this.parent;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getCropTransformToolbarItem();
@@ -1052,9 +1053,9 @@ var ToolbarModule = /** @class */ (function () {
                 if (!Browser.isDevice) {
                     _this.renderSaveBtn();
                 }
-                _this.parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
+                parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_bottomToolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -1063,22 +1064,22 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
                 }
-                _this.parent.select('custom');
+                parent.select('custom');
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + this.parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + this.parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + parent.element.id + '_toolbar');
         }
         this.enableDisableTbrBtn();
-        this.parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
+        parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
     };
     ToolbarModule.prototype.getCurrentShapeIcon = function (shape) {
         var icon = '';
@@ -1089,9 +1090,6 @@ var ToolbarModule = /** @class */ (function () {
             case 'ellipse':
                 icon = 'e-circle';
                 break;
-            case 'triangle':
-                icon = 'e-triangle';
-                break;
             case 'line':
                 icon = 'e-line';
                 break;
@@ -1139,6 +1137,7 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.initShapesToolbarItem = function (items) {
         var _this = this;
+        var parent = this.parent;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getShapesToolbarItem(items);
@@ -1157,7 +1156,7 @@ var ToolbarModule = /** @class */ (function () {
                 _this.renderAnnotationBtn(true);
                 _this.createShapeColor(items);
                 _this.createShapeBtn(items);
-                if (_this.parent.activeObj.shape === 'arrow') {
+                if (parent.activeObj.shape === 'arrow') {
                     _this.createStartBtn();
                     _this.createEndBtn();
                 }
@@ -1165,9 +1164,9 @@ var ToolbarModule = /** @class */ (function () {
                 if (!Browser.isDevice) {
                     _this.renderSaveBtn();
                 }
-                _this.parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
+                parent.trigger('toolbarCreated', { toolbarType: 'shapes' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_bottomToolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -1176,7 +1175,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -1184,15 +1183,14 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + this.parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + this.parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + parent.element.id + '_toolbar');
         }
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.createShapeColor = function (items) {
-        var _this = this;
         var parent = this.parent;
         if (items.indexOf('fillColor') > -1) {
             parent.element.querySelector('.e-template.e-fill').appendChild(parent.createElement('input', {
@@ -1202,7 +1200,7 @@ var ToolbarModule = /** @class */ (function () {
                 modeSwitcher: false, noColor: true, value: '',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-fill-color',
                 change: function (args) {
-                    _this.parent.updateFillColor(args.currentValue.hex);
+                    parent.updateFillColor(args.currentValue.hex);
                     if (args.currentValue.rgba === '') {
                         fillDDB_1.element.children[0].classList.add('e-nocolor-item');
                     }
@@ -1223,7 +1221,7 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 target: '.e-shape-fill-color',
                 iconCss: 'e-dropdownbtn-preview'
-            }, '#' + this.parent.element.id + '_fillColorBtn');
+            }, '#' + parent.element.id + '_fillColorBtn');
             fillColor.inline = true;
             parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview').classList.add('e-nocolor-item');
         }
@@ -1235,7 +1233,7 @@ var ToolbarModule = /** @class */ (function () {
                 modeSwitcher: false, noColor: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-stroke-color',
                 change: function (args) {
-                    _this.parent.updateStrokeColor(args.currentValue.hex);
+                    parent.updateStrokeColor(args.currentValue.hex);
                     strokeDDB_1.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_1.toggle();
                 }
@@ -1245,7 +1243,7 @@ var ToolbarModule = /** @class */ (function () {
                     if (Browser.isDevice) {
                         args.element.parentElement.style.top = strokeDDB_1.element.getBoundingClientRect().top -
                             args.element.parentElement.offsetHeight + 'px';
-                        args.element.parentElement.style.left = _this.parent.element.offsetLeft + 'px';
+                        args.element.parentElement.style.left = parent.element.offsetLeft + 'px';
                     }
                 },
                 target: '.e-shape-stroke-color',
@@ -1256,7 +1254,6 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.createShapeBtn = function (items) {
-        var _this = this;
         var parent = this.parent;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('XSmall') },
@@ -1285,18 +1282,18 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 select: function (args) {
                     spanElem_1.textContent = args.item.text;
-                    _this.parent.updateStrokeWidth(args.item.id);
+                    parent.updateStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
-                        if (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_bottomToolbar'))) {
+                        if (document.getElementById(parent.element.id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_6 = getComponent(_this.parent.element.id + '_bottomToolbar', 'toolbar');
+                            var toolbar_6 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
                             toolbar_6.refreshOverflow();
                         }
                     }
                     else {
-                        if (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar'))) {
+                        if (document.getElementById(parent.element.id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_7 = getComponent(_this.parent.element.id + '_toolbar', 'toolbar');
+                            var toolbar_7 = getComponent(parent.element.id + '_toolbar', 'toolbar');
                             toolbar_7.refreshOverflow();
                         }
                     }
@@ -1320,10 +1317,10 @@ var ToolbarModule = /** @class */ (function () {
         ];
         var strokeWidthBtn = document.getElementById(parent.element.id + '_startBtn');
         var spanElem = document.createElement('span');
-        if (isNullOrUndefined(this.parent.activeObj.start)) {
-            this.parent.activeObj.start = 'none';
+        if (isNullOrUndefined(parent.activeObj.start)) {
+            parent.activeObj.start = 'none';
         }
-        spanElem.innerHTML = this.parent.pascalToSplitWords(this.parent.activeObj.start);
+        spanElem.innerHTML = parent.pascalToSplitWords(parent.activeObj.start);
         spanElem.className = 'e-shape-start';
         strokeWidthBtn.appendChild(spanElem);
         // Initialize the DropDownButton component.
@@ -1360,10 +1357,10 @@ var ToolbarModule = /** @class */ (function () {
         ];
         var strokeEndBtn = document.getElementById(parent.element.id + '_endBtn');
         var spanElem = document.createElement('span');
-        if (isNullOrUndefined(this.parent.activeObj.end)) {
-            this.parent.activeObj.end = 'arrowSolid';
+        if (isNullOrUndefined(parent.activeObj.end)) {
+            parent.activeObj.end = 'arrowSolid';
         }
-        spanElem.innerHTML = this.parent.pascalToSplitWords(this.parent.activeObj.end);
+        spanElem.innerHTML = parent.pascalToSplitWords(parent.activeObj.end);
         spanElem.className = 'e-shape-end';
         strokeEndBtn.appendChild(spanElem);
         // Initialize the DropDownButton component.
@@ -1389,9 +1386,9 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.getTextToolbarItem = function (items) {
         var parent = this.parent;
         var toolbarItems = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar))) {
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar)) {
             toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + this.parent.element.id + '_annotationBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
         }
         if (items.indexOf('fontFamily') > -1) {
             toolbarItems.push({ id: parent.element.id + '_fontFamily', cssClass: 'top-icon e-img-font-family',
@@ -1476,7 +1473,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 parent.trigger('toolbarCreated', { toolbarType: 'text' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -1485,7 +1482,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -1501,9 +1498,8 @@ var ToolbarModule = /** @class */ (function () {
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.createTextColor = function (items) {
-        var _this = this;
         var parent = this.parent;
-        if (items.indexOf('fontColor') > -1 && !isNullOrUndefined(parent.element.querySelector('.e-template.e-text-font-color'))) {
+        if (items.indexOf('fontColor') > -1 && parent.element.querySelector('.e-template.e-text-font-color')) {
             parent.element.querySelector('.e-template.e-text-font-color').appendChild(parent.createElement('input', {
                 id: parent.element.id + '_text_font'
             }));
@@ -1511,7 +1507,7 @@ var ToolbarModule = /** @class */ (function () {
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
                 change: function (args) {
-                    _this.parent.updateFontColor(args.currentValue.hex);
+                    parent.updateFontColor(args.currentValue.hex);
                     strokeDDB_2.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_2.toggle();
                 }
@@ -1545,7 +1541,7 @@ var ToolbarModule = /** @class */ (function () {
                 spanElem_2.innerHTML = 'Arial';
             }
             spanElem_2.className = 'e-text-font-family';
-            if (!isNullOrUndefined(fontNameBtn)) {
+            if (fontNameBtn) {
                 fontNameBtn.appendChild(spanElem_2);
             }
             var fontFamilyBtn_1 = new DropDownButton({ items: this.getFontFamilyItems(),
@@ -1606,24 +1602,25 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.refreshToolbar = function (type, isApplyBtn, isCropping, isZooming, cType) {
-        if (!this.parent.isImageLoaded || this.parent.isCropToolbar) {
+        var parent = this.parent;
+        if (!parent.isImageLoaded || parent.isCropToolbar) {
             return;
         }
         var args = { toolbarType: type };
         if (type !== 'filter' && type !== 'color') {
-            if (document.getElementById(this.parent.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
-                getComponent(document.getElementById(this.parent.element.id + '_toolbar'), 'toolbar').destroy();
-                document.getElementById(this.parent.element.id + '_toolbar').innerHTML = '';
+            if (document.getElementById(parent.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
+                getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
+                document.getElementById(parent.element.id + '_toolbar').innerHTML = '';
             }
-            if (document.getElementById(this.parent.element.id + '_bottomToolbar') && this.defToolbarItems.length > 0) {
-                if (document.getElementById(this.parent.element.id + '_bottomToolbar').className.indexOf('e-control') > -1) {
-                    getComponent(document.getElementById(this.parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
-                    document.getElementById(this.parent.element.id + '_bottomToolbar').innerHTML = '';
+            if (document.getElementById(parent.element.id + '_bottomToolbar') && this.defToolbarItems.length > 0) {
+                if (document.getElementById(parent.element.id + '_bottomToolbar').className.indexOf('e-control') > -1) {
+                    getComponent(document.getElementById(parent.element.id + '_bottomToolbar'), 'toolbar').destroy();
+                    document.getElementById(parent.element.id + '_bottomToolbar').innerHTML = '';
                 }
             }
         }
         this.refreshSlider();
-        this.parent.isCropTab = false;
+        parent.isCropTab = false;
         switch (type) {
             case 'main':
                 if (Browser.isDevice) {
@@ -1650,16 +1647,16 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                if (this.parent.activeObj.shape === 'line' || this.parent.activeObj.shape === 'path') {
+                if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'path') {
                     args.toolbarItems = ['strokeColor', 'strokeWidth', 'duplicate', 'remove'];
                 }
-                else if (this.parent.activeObj.shape === 'arrow') {
+                else if (parent.activeObj.shape === 'arrow') {
                     args.toolbarItems = ['strokeColor', 'strokeWidth', 'start', 'end', 'duplicate', 'remove'];
                 }
                 else {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'duplicate', 'remove'];
                 }
-                this.parent.trigger('toolbarUpdating', args);
+                parent.trigger('toolbarUpdating', args);
                 this.initShapesToolbarItem(args.toolbarItems);
                 break;
             case 'text':
@@ -1667,7 +1664,7 @@ var ToolbarModule = /** @class */ (function () {
                     this.initMainToolbar(false, true, true);
                 }
                 args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'bold', 'italic', 'duplicate', 'remove', 'text'];
-                this.parent.trigger('toolbarUpdating', args);
+                parent.trigger('toolbarUpdating', args);
                 this.initTextToolbarItem(args.toolbarItems);
                 break;
             case 'pen':
@@ -1675,7 +1672,7 @@ var ToolbarModule = /** @class */ (function () {
                     this.initMainToolbar(false, true, true);
                 }
                 args.toolbarItems = ['strokeColor', 'strokeWidth', 'remove'];
-                this.parent.trigger('toolbarUpdating', args);
+                parent.trigger('toolbarUpdating', args);
                 this.initPenToolbarItem(args.toolbarItems);
                 break;
             case 'adjustment':
@@ -1691,11 +1688,11 @@ var ToolbarModule = /** @class */ (function () {
                 this.updateContextualToolbar(type, cType);
                 break;
             case 'croptransform':
-                this.parent.isCropTab = true;
+                parent.isCropTab = true;
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                this.parent.updateCropTransformItems();
+                parent.updateCropTransformItems();
                 this.initCropTransformToolbar();
                 break;
         }
@@ -1704,32 +1701,33 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.getAdjustmentToolbarItem = function () {
         var toolbarItems = [];
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Brightness') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_brightness', prefixIcon: 'e-icons e-brightness', cssClass: 'top-icon e-brightness',
+        var parent = this.parent;
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Brightness') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_brightness', prefixIcon: 'e-icons e-brightness', cssClass: 'top-icon e-brightness',
                 tooltipText: this.l10n.getConstant('Brightness'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Contrast') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_contrast', prefixIcon: 'e-icons e-contrast', cssClass: 'top-icon e-contrast',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Contrast') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_contrast', prefixIcon: 'e-icons e-contrast', cssClass: 'top-icon e-contrast',
                 tooltipText: this.l10n.getConstant('Contrast'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Hue') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_hue', prefixIcon: 'e-icons e-fade', cssClass: 'top-icon e-fade',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Hue') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_hue', prefixIcon: 'e-icons e-fade', cssClass: 'top-icon e-fade',
                 tooltipText: this.l10n.getConstant('Hue'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Saturation') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_saturation', prefixIcon: 'e-icons e-saturation', cssClass: 'top-icon e-saturation',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Saturation') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_saturation', prefixIcon: 'e-icons e-saturation', cssClass: 'top-icon e-saturation',
                 tooltipText: this.l10n.getConstant('Saturation'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Exposure') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_exposure', prefixIcon: 'e-icons e-grain', cssClass: 'top-icon e-grain',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Exposure') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_exposure', prefixIcon: 'e-icons e-grain', cssClass: 'top-icon e-grain',
                 tooltipText: this.l10n.getConstant('Exposure'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Opacity') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_opacity', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Opacity') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_opacity', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
                 tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Blur') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_blur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-tint',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Blur') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_blur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-tint',
                 tooltipText: this.l10n.getConstant('Blur'), align: 'Center' });
         }
         var tempToolbarItems = this.processToolbar('center');
@@ -1737,49 +1735,50 @@ var ToolbarModule = /** @class */ (function () {
             toolbarItems.push(tempToolbarItems[i]);
         }
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: this.parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: this.parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
     ToolbarModule.prototype.getFilterToolbarItem = function () {
         var toolbarItems = [];
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Default') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        var parent = this.parent;
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Default'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Chrome') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Chrome'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Cold') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Cold'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Warm') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Warm'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Grayscale') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Grayscale'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Sepia') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Sepia'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(this.parent.toolbar) || (!isNullOrUndefined(this.parent.toolbar) && this.parent.toolbar.indexOf('Invert') > -1)) {
-            toolbarItems.push({ id: this.parent.element.id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
+            toolbarItems.push({ id: parent.element.id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
                 tooltipText: this.l10n.getConstant('Invert'), align: 'Center',
-                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + this.parent.element.id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
+                template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
         }
         var tempToolbarItems = this.processToolbar('center');
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
@@ -1790,20 +1789,20 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.getPenToolbarItem = function (items) {
         var parent = this.parent;
         var toolbarItems = [];
-        if (isNullOrUndefined(parent.toolbar) || (!isNullOrUndefined(parent.toolbar))) {
+        if (isNullOrUndefined(parent.toolbar) || parent.toolbar) {
             toolbarItems.push({ id: parent.element.id + '_annotation', tooltipText: this.l10n.getConstant('Annotation'), align: 'Center',
-                template: '<button id="' + this.parent.element.id + '_annotationBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_annotationBtn"></button>' });
         }
         if (items.indexOf('strokeColor') > -1) {
-            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: this.parent.element.id + '_pen_strokecolor',
+            toolbarItems.push({ prefixIcon: 'e-icons e-copy', id: parent.element.id + '_pen_strokecolor',
                 cssClass: 'top-icon e-pen-stroke-color',
                 tooltipText: this.l10n.getConstant('StrokeColor'), align: 'Center', type: 'Input',
-                template: '<button id="' + this.parent.element.id + '_penColorBtn"></button>' });
+                template: '<button id="' + parent.element.id + '_penColorBtn"></button>' });
         }
         if (items.indexOf('strokeWidth') > -1) {
             toolbarItems.push({ prefixIcon: 'e-icons e-copy', cssClass: 'top-icon e-size',
                 tooltipText: this.l10n.getConstant('StrokeWidth'),
-                align: 'Center', type: 'Input', template: '<button id="' + this.parent.element.id + '_penStrokeWidth"></button>' });
+                align: 'Center', type: 'Input', template: '<button id="' + parent.element.id + '_penStrokeWidth"></button>' });
         }
         toolbarItems.push({ align: 'Center', type: 'Separator' });
         if (items.indexOf('remove') > -1) {
@@ -1815,15 +1814,16 @@ var ToolbarModule = /** @class */ (function () {
             toolbarItems.push(tempToolbarItems[i]);
         }
         if (!Browser.isDevice) {
-            toolbarItems.push({ id: this.parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+            toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
-            toolbarItems.push({ id: this.parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+            toolbarItems.push({ id: parent.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
                 tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
         }
         return toolbarItems;
     };
     ToolbarModule.prototype.initPenToolbarItem = function (items) {
         var _this = this;
+        var parent = this.parent;
         var leftItem = this.getLeftToolbarItem();
         var rightItem = this.getRightToolbarItem();
         var mainItem = this.getPenToolbarItem(items);
@@ -1846,9 +1846,9 @@ var ToolbarModule = /** @class */ (function () {
                 if (!Browser.isDevice) {
                     _this.renderSaveBtn();
                 }
-                _this.parent.trigger('toolbarCreated', { toolbarType: 'pen' });
+                parent.trigger('toolbarCreated', { toolbarType: 'pen' });
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                         toolbar.refreshOverflow();
@@ -1856,7 +1856,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -1864,18 +1864,16 @@ var ToolbarModule = /** @class */ (function () {
             }
         });
         if (Browser.isDevice) {
-            toolbar.appendTo('#' + this.parent.element.id + '_bottomToolbar');
+            toolbar.appendTo('#' + parent.element.id + '_bottomToolbar');
         }
         else {
-            toolbar.appendTo('#' + this.parent.element.id + '_toolbar');
+            toolbar.appendTo('#' + parent.element.id + '_toolbar');
         }
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.createPenColor = function (items) {
         var _this = this;
         var parent = this.parent;
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        var proxy = this;
         if (items.indexOf('strokeColor') > -1) {
             parent.element.querySelector('.e-template.e-pen-stroke-color').appendChild(parent.createElement('input', {
                 id: parent.element.id + '_pen_stroke'
@@ -1884,7 +1882,7 @@ var ToolbarModule = /** @class */ (function () {
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-pen-color',
                 change: function (args) {
-                    _this.parent.updatePenStrokeColor(args.currentValue.hex);
+                    parent.updatePenStrokeColor(args.currentValue.hex);
                     _this.selFhdColor = args.currentValue.hex;
                     strokeDDB_3.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_3.toggle();
@@ -1907,7 +1905,7 @@ var ToolbarModule = /** @class */ (function () {
             var indexObj = { freehandSelectedIndex: null };
             parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
             if (!isNullOrUndefined(indexObj['freehandSelectedIndex']) && indexObj['freehandSelectedIndex'] > -1) {
-                this.parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview').style.background
+                parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview').style.background
                     = this.selFhdColor === '#42a5f5' ? obj['tempFreeHandDrawEditingStyles'].strokeColor :
                         parent.pointColl[indexObj['freehandSelectedIndex']].strokeColor;
             }
@@ -1918,7 +1916,6 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.createPenBtn = function (items) {
-        var _this = this;
         var parent = this.parent;
         var strokeWidthItems = [
             { id: '1', text: this.l10n.getConstant('XSmall') },
@@ -1941,7 +1938,6 @@ var ToolbarModule = /** @class */ (function () {
             spanElem_3.className = 'e-pen-stroke-width';
             strokeWidthBtn.appendChild(spanElem_3);
             // eslint-disable-next-line @typescript-eslint/no-this-alias
-            var proxy = this;
             var drpDownBtn_2 = new DropDownButton({ items: strokeWidthItems,
                 open: function (args) {
                     if (Browser.isDevice) {
@@ -1953,16 +1949,16 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 select: function (args) {
                     spanElem_3.textContent = args.item.text;
-                    _this.parent.updatePenStrokeWidth(args.item.id);
+                    parent.updatePenStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
-                        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_bottomToolbar'))) {
+                        if (document.getElementById(parent.element.id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                             var toolbar_8 = getComponent(parent.element.id + '_bottomToolbar', 'toolbar');
                             toolbar_8.refreshOverflow();
                         }
                     }
                     else {
-                        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar'))) {
+                        if (document.getElementById(parent.element.id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                             var toolbar_9 = getComponent(parent.element.id + '_toolbar', 'toolbar');
                             toolbar_9.refreshOverflow();
@@ -2011,14 +2007,14 @@ var ToolbarModule = /** @class */ (function () {
                     _this.renderSaveBtn();
                 }
                 if (Browser.isDevice) {
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
                 }
                 else {
                     _this.createLeftToolbarControls();
-                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(parent.element.id + '_toolbar')))) {
+                    if (_this.defToolbarItems.length > 0 && document.getElementById(parent.element.id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
                         toolbar.refreshOverflow();
                     }
@@ -2037,8 +2033,8 @@ var ToolbarModule = /** @class */ (function () {
         var _this = this;
         var parent = this.parent;
         var mainItem = this.getFilterToolbarItem();
-        if (document.querySelector('#' + this.parent.element.id + '_contextualToolbar').classList.contains('e-control')) {
-            getComponent(document.getElementById(this.parent.element.id + '_contextualToolbar'), 'toolbar').destroy();
+        if (document.querySelector('#' + parent.element.id + '_contextualToolbar').classList.contains('e-control')) {
+            getComponent(document.getElementById(parent.element.id + '_contextualToolbar'), 'toolbar').destroy();
         }
         var toolbar = new Toolbar({
             width: '100%',
@@ -2048,7 +2044,7 @@ var ToolbarModule = /** @class */ (function () {
                 _this.updatePrivateVariables();
                 _this.createCanvasFilter();
                 if (parent.currentFilter === '') {
-                    parent.currentFilter = _this.parent.element.id + '_default';
+                    parent.currentFilter = parent.element.id + '_default';
                 }
                 var hdrWrapper = document.querySelector('#' + parent.element.id + '_headWrapper');
                 if (hdrWrapper) {
@@ -2059,10 +2055,12 @@ var ToolbarModule = /** @class */ (function () {
                 toolbar.refreshOverflow();
             }
         });
-        toolbar.appendTo('#' + this.parent.element.id + '_contextualToolbar');
+        toolbar.appendTo('#' + parent.element.id + '_contextualToolbar');
     };
     ToolbarModule.prototype.createCanvasFilter = function () {
         var parent = this.parent;
+        showSpinner(parent.element);
+        parent.element.style.opacity = '0.5';
         var imageData = parent.getCurrentCanvasData();
         this.inMemoryCanvas.width = imageData.width;
         this.inMemoryCanvas.height = imageData.height;
@@ -2074,16 +2072,19 @@ var ToolbarModule = /** @class */ (function () {
         this.updateFilterCanvas('_grayscaleCanvas', 'grayscale');
         this.updateFilterCanvas('_sepiaCanvas', 'sepia');
         this.updateFilterCanvas('_invertCanvas', 'invert');
+        hideSpinner(parent.element);
+        parent.element.style.opacity = '1';
         parent.initialAdjustmentValue = this.lowerContext.filter;
     };
     ToolbarModule.prototype.updateFilterCanvas = function (selector, type) {
-        var filter = this.parent.element.querySelector('#' + this.parent.element.id + selector);
-        if (!isNullOrUndefined(filter)) {
+        var parent = this.parent;
+        var filter = parent.element.querySelector('#' + parent.element.id + selector);
+        if (filter) {
             var ctx = filter.getContext('2d');
             ctx = filter.getContext('2d');
             filter.style.width = '100px';
             filter.style.height = '100px';
-            this.parent.notify('filter', { prop: 'updateAdj', value: { type: type, value: null, isPreview: true, ctx: ctx } });
+            parent.notify('filter', { prop: 'updateAdj', value: { type: type, value: null, isPreview: true, ctx: ctx } });
             ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
         }
     };
@@ -2133,47 +2134,51 @@ var ToolbarModule = /** @class */ (function () {
         return orgToolbarItems;
     };
     ToolbarModule.prototype.renderQAT = function (isPenEdit) {
-        if (!isNullOrUndefined(this.parent.activeObj) && this.parent.showQuickAccessToolbar) {
-            var qtArea = document.getElementById(this.parent.element.id + '_quickAccessToolbarArea');
-            if (!isNullOrUndefined(document.getElementById(this.parent.element.id + '_quickAccessToolbarArea'))) {
+        var parent = this.parent;
+        if (parent.activeObj && parent.showQuickAccessToolbar) {
+            var qtArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
+            if (qtArea) {
                 this.destroyQuickAccessToolbar();
-                document.getElementById(this.parent.element.id + '_quickAccessToolbarArea').style.display = 'block';
+                qtArea.style.display = 'block';
             }
             var items = this.getQuickAccessToolbarItem(isPenEdit);
             if (items.length === 0) {
                 return;
             }
-            if (isNullOrUndefined(this.parent.quickAccessToolbarTemplate)) {
+            if (isNullOrUndefined(parent.quickAccessToolbarTemplate)) {
                 var toolbarObj = new Toolbar({
                     items: items,
                     clicked: this.quickAccessToolbarClicked.bind(this)
                 });
-                toolbarObj.appendTo('#' + this.parent.element.id + '_quickAccessToolbar');
+                toolbarObj.appendTo('#' + parent.element.id + '_quickAccessToolbar');
             }
             if (isNullOrUndefined(isPenEdit)) {
                 qtArea.style.width = 'auto';
-                this.parent.activeObj.activePoint.width = Math.abs(this.parent.activeObj.activePoint.width);
-                this.parent.activeObj.activePoint.height = Math.abs(this.parent.activeObj.activePoint.height);
-                var x = this.parent.activeObj.activePoint.startX < this.parent.activeObj.activePoint.endX ?
-                    this.parent.activeObj.activePoint.startX : this.parent.activeObj.activePoint.endX;
-                var y = this.parent.activeObj.activePoint.startY < this.parent.activeObj.activePoint.endY ?
-                    this.parent.activeObj.activePoint.startY : this.parent.activeObj.activePoint.endY;
-                var width = this.parent.activeObj.activePoint.width;
-                if (this.parent.activeObj.rotatedAngle !== 0 && this.parent.activeObj.shape !== 'arrow') {
-                    var point = this.parent.getSquarePointForRotatedShape(this.parent.activeObj);
+                parent.activeObj.activePoint.width = Math.abs(parent.activeObj.activePoint.width);
+                parent.activeObj.activePoint.height = Math.abs(parent.activeObj.activePoint.height);
+                var x = parent.activeObj.activePoint.startX < parent.activeObj.activePoint.endX ?
+                    parent.activeObj.activePoint.startX : parent.activeObj.activePoint.endX;
+                var y = parent.activeObj.activePoint.startY < parent.activeObj.activePoint.endY ?
+                    parent.activeObj.activePoint.startY : parent.activeObj.activePoint.endY;
+                var width = parent.activeObj.activePoint.width;
+                if (parent.activeObj.rotatedAngle !== 0 && parent.activeObj.shape !== 'arrow') {
+                    var object = { activePoint: null };
+                    parent.notify('shape', { prop: 'getSquarePointForRotatedShape', onPropertyChange: false,
+                        value: { obj: parent.activeObj, object: object } });
+                    var point = object['activePoint'];
                     x = point.startX;
                     y = point.startY;
                     width = point.width;
                 }
-                else if (this.parent.activeObj.shape === 'path') {
-                    var path = this.parent.getSquarePointForPath(this.parent.activeObj);
+                else if (parent.activeObj.shape === 'path') {
+                    var path = parent.getSquarePointForPath(parent.activeObj);
                     x = path.startX;
                     y = path.startY;
                     width = path.width;
                 }
                 qtArea.style.left = (x + (width / 2)) - (items.length * 25) + 'px';
-                if (y - 60 < this.parent.img.destTop) {
-                    qtArea.style.top = this.parent.img.destTop + 'px';
+                if (y - 60 < parent.img.destTop) {
+                    qtArea.style.top = parent.img.destTop + 'px';
                 }
                 else {
                     qtArea.style.top = y - 60 + 'px';
@@ -2182,14 +2187,14 @@ var ToolbarModule = /** @class */ (function () {
             else if (isPenEdit) {
                 var obj = { activePoint: null };
                 var indexObj = { freehandSelectedIndex: null };
-                this.parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
-                this.parent.notify('freehand-draw', { prop: 'getSqPtFD',
+                parent.notify('freehand-draw', { prop: 'getFreehandSelectedIndex', onPropertyChange: false, value: { obj: indexObj } });
+                parent.notify('freehand-draw', { prop: 'getSqPtFD',
                     value: { idx: indexObj['freehandSelectedIndex'], obj: obj } });
                 var point = obj['activePoint'];
                 qtArea.style.width = 'auto';
                 qtArea.style.left = (point.startX + (point.width / 2)) - (items.length * 27) + 'px';
-                if (point.startY - 60 < this.parent.img.destTop) {
-                    qtArea.style.top = this.parent.img.destTop + 'px';
+                if (point.startY - 60 < parent.img.destTop) {
+                    qtArea.style.top = parent.img.destTop + 'px';
                 }
                 else {
                     qtArea.style.top = point.startY - 60 + 'px';
@@ -2201,8 +2206,9 @@ var ToolbarModule = /** @class */ (function () {
         if (isNullOrUndefined(isDisabled)) {
             return;
         }
-        var annotation = document.querySelector('#' + this.parent.element.id + '_annotationBtn');
-        if (!isNullOrUndefined(annotation)) {
+        var parent = this.parent;
+        var annotation = document.querySelector('#' + parent.element.id + '_annotationBtn');
+        if (annotation) {
             if (isDisabled) {
                 annotation.classList.add('e-disabled');
                 annotation.parentElement.classList.add('e-overlay');
@@ -2213,8 +2219,8 @@ var ToolbarModule = /** @class */ (function () {
             }
             getComponent(annotation, 'dropdown-btn').disabled = isDisabled;
         }
-        var transform = document.querySelector('#' + this.parent.element.id + '_transformBtn');
-        if (!isNullOrUndefined(transform)) {
+        var transform = document.querySelector('#' + parent.element.id + '_transformBtn');
+        if (transform) {
             if (isDisabled) {
                 transform.classList.add('e-disabled');
                 transform.parentElement.classList.add('e-overlay');
@@ -2225,8 +2231,8 @@ var ToolbarModule = /** @class */ (function () {
             }
             getComponent(transform, 'dropdown-btn').disabled = isDisabled;
         }
-        var adjustment = document.querySelector('#' + this.parent.element.id + '_adjustment');
-        if (!isNullOrUndefined(adjustment)) {
+        var adjustment = document.querySelector('#' + parent.element.id + '_adjustment');
+        if (adjustment) {
             if (isDisabled) {
                 adjustment.classList.add('e-disabled');
                 adjustment.parentElement.classList.add('e-overlay');
@@ -2237,8 +2243,8 @@ var ToolbarModule = /** @class */ (function () {
             }
             getComponent(adjustment, 'btn').disabled = isDisabled;
         }
-        var filter = document.querySelector('#' + this.parent.element.id + '_filter');
-        if (!isNullOrUndefined(filter)) {
+        var filter = document.querySelector('#' + parent.element.id + '_filter');
+        if (filter) {
             if (isDisabled) {
                 filter.classList.add('e-disabled');
                 filter.parentElement.classList.add('e-overlay');
@@ -2268,7 +2274,7 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.quickAccessToolbarClicked = function (args, isContextualToolbar) {
         var parent = this.parent;
         var points = { x: parent.activeObj.activePoint.startX, y: parent.activeObj.activePoint.startY };
-        if (!isNullOrUndefined(args.item)) {
+        if (args.item) {
             var duplicateObj = void 0;
             var objColl = void 0;
             var isPreventUndoRedo = null;
@@ -2281,7 +2287,7 @@ var ToolbarModule = /** @class */ (function () {
             parent.notify('draw', { prop: 'getNewPath', value: { obj: pathObject } });
             switch (args.item.id.replace(parent.element.id + '_', '').toLowerCase()) {
                 case 'duplicate':
-                    if (!this.parent.element.querySelector('#' + this.parent.element.id + '_duplicate').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + parent.element.id + '_duplicate').classList.contains('e-disabled')) {
                         if (!pathObject['isNewPath'] && JSON.stringify(object['tempObj']) === JSON.stringify(parent.activeObj)) {
                             isPreventUndoRedo = true;
                         }
@@ -2289,7 +2295,7 @@ var ToolbarModule = /** @class */ (function () {
                         if (isNullOrUndefined(parent.activeObj.currIndex)) {
                             parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isPreventUndoRedo } });
                         }
-                        else if (!isNullOrUndefined(obj['prevActObj'])) {
+                        else if (obj['prevActObj']) {
                             parent.activeObj.currIndex = null;
                             duplicateObj.currIndex = null;
                             parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: isPreventUndoRedo } });
@@ -2316,19 +2322,19 @@ var ToolbarModule = /** @class */ (function () {
                             parent.notify('shape', { prop: 'setPointCollForLineArrow', onPropertyChange: false,
                                 value: { obj: parent.activeObj } });
                         }
-                        // parent.updateTrianglePoints(this.parent.activeObj); Invoke
+                        // parent.updateTrianglePoints(parent.activeObj); Invoke
                         parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj } });
                         parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl } });
                         this.renderQAT();
                     }
                     break;
                 case 'remove':
-                    if (!this.parent.element.querySelector('#' + this.parent.element.id + '_remove').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + parent.element.id + '_remove').classList.contains('e-disabled')) {
                         parent.notify('selection', { prop: 'deleteItem', onPropertyChange: false });
                     }
                     break;
                 case 'edittext':
-                    if (!this.parent.element.querySelector('#' + this.parent.element.id + '_editText').classList.contains('e-disabled')) {
+                    if (!parent.element.querySelector('#' + parent.element.id + '_editText').classList.contains('e-disabled')) {
                         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
                         parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false,
                             value: { obj: extend({}, parent.activeObj, {}, true) } });
@@ -2345,10 +2351,10 @@ var ToolbarModule = /** @class */ (function () {
                         if (isNullOrUndefined(parent.activeObj.currIndex)) {
                             parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
                         }
-                        else if (!isNullOrUndefined(obj['prevActObj'])) {
+                        else if (obj['prevActObj']) {
                             parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
                         }
-                        if (!isNullOrUndefined(document.getElementById(this.parent.element.id + '_quickAccessToolbarArea'))) {
+                        if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
                             document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
                         }
                     }
@@ -2369,7 +2375,7 @@ var ToolbarModule = /** @class */ (function () {
             }
             parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
         }
-        if (!isNullOrUndefined(args.item)) {
+        if (args.item) {
             var type = args.item.id.replace(parent.element.id + '_', '').toLowerCase();
             if (type === 'duplicate' || type === 'remove' || type === 'edittext') {
                 this.quickAccessToolbarClicked(args, true);
@@ -2379,11 +2385,11 @@ var ToolbarModule = /** @class */ (function () {
                 var isDisabledFilter = false;
                 var isDisabledAdjustment = false;
                 var adjustment = document.querySelector('#' + parent.element.id + '_adjustment');
-                if (!isNullOrUndefined(adjustment) && adjustment.classList.contains('e-disabled')) {
+                if (adjustment && adjustment.classList.contains('e-disabled')) {
                     isDisabledAdjustment = true;
                 }
                 var filter = document.querySelector('#' + parent.element.id + '_filter');
-                if (!isNullOrUndefined(filter) && filter.classList.contains('e-disabled')) {
+                if (filter && filter.classList.contains('e-disabled')) {
                     isDisabledFilter = true;
                 }
                 this.enableDisableTbrBtn();
@@ -2428,18 +2434,18 @@ var ToolbarModule = /** @class */ (function () {
                         }
                     }
                     else {
-                        panBtn = this.parent.element.querySelector('.e-img-pan .e-btn');
-                        if (!isNullOrUndefined(panBtn)) {
+                        panBtn = parent.element.querySelector('.e-img-pan .e-btn');
+                        if (panBtn) {
                             panBtn.classList.add('e-selected-btn');
                         }
                         parent.pan(true);
                         parent.notify('transform', { prop: 'setDisablePan', onPropertyChange: false, value: { bool: false } });
                     }
-                    if (!isNullOrUndefined(zoomIn) && parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor) {
+                    if (zoomIn && parent.zoomSettings.zoomFactor >= parent.zoomSettings.maxZoomFactor) {
                         zoomIn.classList.add('e-disabled');
                         zoomIn.parentElement.classList.add('e-overlay');
                     }
-                    else if (!isNullOrUndefined(zoomIn)) {
+                    else if (zoomIn) {
                         zoomIn.classList.remove('e-disabled');
                         zoomIn.parentElement.classList.remove('e-overlay');
                     }
@@ -2454,19 +2460,6 @@ var ToolbarModule = /** @class */ (function () {
                     this.currentToolbar = 'main';
                     break;
                 case 'crop':
-                    if (!isNullOrUndefined(parent.currSelectionPoint)) {
-                        if (parent.currObjType.isUndoAction) {
-                            parent.notify('undo-redo', { prop: 'refreshUrc', value: { bool: null } });
-                        }
-                        if (!isNullOrUndefined(parent.cropObj.activeObj.shape)) {
-                            parent.select(parent.activeObj.shape);
-                        }
-                        this.refreshToolbar('main', true, true);
-                        getComponent(parent.element.querySelector('#' + this.parent.element.id + '_cropBtn'), 'dropdown-btn').toggle();
-                        if (!isNullOrUndefined(parent.activeObj.shape)) {
-                            document.getElementById(parent.activeObj.shape.split('-')[1]).classList.add('e-selected');
-                        }
-                    }
                     parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
                     break;
                 case 'reset':
@@ -2580,7 +2573,7 @@ var ToolbarModule = /** @class */ (function () {
                 case 'rotateright':
                 case 'horizontalflip':
                 case 'verticalflip':
-                    this.parent.transformSelect(type);
+                    parent.transformSelect(type);
                     parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
                     break;
                 case 'save':
@@ -2605,7 +2598,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         var type = args.item.id.replace(parent.element.id, '').split('_')[1];
         var imageFiltering = { filter: parent.toPascalCase(type), cancel: false };
-        this.parent.trigger('imageFiltering', imageFiltering);
+        parent.trigger('imageFiltering', imageFiltering);
         if (imageFiltering.cancel) {
             return;
         }
@@ -2616,11 +2609,12 @@ var ToolbarModule = /** @class */ (function () {
         this.enableDisableTbrBtn();
     };
     ToolbarModule.prototype.refreshShapeDrawing = function () {
+        var parent = this.parent;
         var object = { shape: '' };
-        this.parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: object } });
+        parent.notify('selection', { prop: 'getCurrentDrawingShape', onPropertyChange: false, value: { obj: object } });
         if (object['shape'] !== '') {
-            this.parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
-            this.parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: '' } });
+            parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.refreshToolbar('main', false);
         }
     };
@@ -2699,9 +2693,9 @@ var ToolbarModule = /** @class */ (function () {
     ToolbarModule.prototype.closeContextualToolbar = function () {
         var parent = this.parent;
         var isContextualToolbar = false;
-        if ((!isNullOrUndefined(parent.element.querySelector('#' + parent.element.id + '_contextualToolbar')) &&
+        if ((parent.element.querySelector('#' + parent.element.id + '_contextualToolbar') &&
             !parent.element.querySelector('#' + parent.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
-            (!isNullOrUndefined(parent.element.querySelector('#' + parent.element.id + '_headWrapper'))
+            (parent.element.querySelector('#' + parent.element.id + '_headWrapper')
                 && !parent.element.querySelector('#' + parent.element.id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
             parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
             parent.okBtn();
@@ -2712,12 +2706,13 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.destroyQuickAccessToolbar = function () {
         var parent = this.parent;
-        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_quickAccessToolbar')) &&
-            !isNullOrUndefined(getComponent(document.getElementById(parent.element.id + '_quickAccessToolbar'), 'toolbar'))) {
-            getComponent(document.getElementById(parent.element.id + '_quickAccessToolbar'), 'toolbar').destroy();
+        var quickToolbar = document.getElementById(parent.element.id + '_quickAccessToolbar');
+        if (quickToolbar && quickToolbar.classList.contains('e-control')) {
+            getComponent(quickToolbar, 'toolbar').destroy();
         }
-        if (!isNullOrUndefined(document.getElementById(parent.element.id + '_quickAccessToolbarArea'))) {
-            document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
+        var qatArea = document.getElementById(parent.element.id + '_quickAccessToolbarArea');
+        if (qatArea) {
+            qatArea.style.display = 'none';
         }
     };
     ToolbarModule.prototype.renderSlider = function (type) {
@@ -2730,7 +2725,7 @@ var ToolbarModule = /** @class */ (function () {
                 id: parent.element.id + '_headWrapper',
                 styles: 'position: relative'
             }));
-            labelWrapper = hdrWrapper.appendChild(this.parent.createElement('label', {
+            labelWrapper = hdrWrapper.appendChild(parent.createElement('label', {
                 id: parent.element.id + '_labelWrapper',
                 styles: Browser.isDevice ? 'position: absolute; top: 25%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
                     : 'position: absolute; top: 25%; left: calc(50% - 226px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
@@ -2744,12 +2739,12 @@ var ToolbarModule = /** @class */ (function () {
             id: parent.element.id + '_sliderWrapper',
             styles: 'position: absolute'
         }));
-        var value = this.parent.getCurrAdjustmentValue(type);
+        var value = parent.getCurrAdjustmentValue(type);
         var min;
         var max;
         var slider;
         if (type === 'brightness' || type === 'contrast' || type === 'saturation' || type === 'exposure') {
-            if (this.parent.finetuneSettings) {
+            if (parent.finetuneSettings) {
                 if (type === 'brightness' && parent.finetuneSettings.brightness) {
                     min = parent.finetuneSettings.brightness.min;
                     max = parent.finetuneSettings.brightness.max;
@@ -2762,7 +2757,7 @@ var ToolbarModule = /** @class */ (function () {
                     min = parent.finetuneSettings.saturation.min;
                     max = parent.finetuneSettings.saturation.max;
                 }
-                else if (type === 'exposure' && this.parent.finetuneSettings.exposure) {
+                else if (type === 'exposure' && parent.finetuneSettings.exposure) {
                     min = parent.finetuneSettings.exposure.min;
                     max = parent.finetuneSettings.exposure.max;
                 }
@@ -2818,27 +2813,29 @@ var ToolbarModule = /** @class */ (function () {
             width: Browser.isDevice ? '200px' : '300px',
             cssClass: 'e-slider',
             change: function (args) {
-                _this.parent.setCurrAdjustmentValue(type, args.value);
+                parent.setCurrAdjustmentValue(type, args.value);
                 _this.enableDisableTbrBtn();
             }
         });
     };
     ToolbarModule.prototype.applyPreviewFilter = function () {
-        if (!isNullOrUndefined(document.querySelector('#' + this.parent.element.id + '_sliderWrapper')) ||
-            this.parent.currObjType.isFiltered) {
-            this.parent.initialAdjustmentValue = this.parent.canvasFilter = this.lowerContext.filter;
-            this.parent.currObjType.isFiltered = false;
+        var parent = this.parent;
+        if (document.querySelector('#' + parent.element.id + '_sliderWrapper') ||
+            parent.currObjType.isFiltered) {
+            parent.initialAdjustmentValue = parent.canvasFilter = this.lowerContext.filter;
+            parent.currObjType.isFiltered = false;
         }
     };
     ToolbarModule.prototype.unselectBtn = function () {
+        var parent = this.parent;
         var selectors = [
-            '#' + this.parent.element.id + '_brightness',
-            '#' + this.parent.element.id + '_contrast',
-            '#' + this.parent.element.id + '_hue',
-            '#' + this.parent.element.id + '_saturation',
-            '#' + this.parent.element.id + '_opacity',
-            '#' + this.parent.element.id + '_blur',
-            '#' + this.parent.element.id + '_exposure'
+            '#' + parent.element.id + '_brightness',
+            '#' + parent.element.id + '_contrast',
+            '#' + parent.element.id + '_hue',
+            '#' + parent.element.id + '_saturation',
+            '#' + parent.element.id + '_opacity',
+            '#' + parent.element.id + '_blur',
+            '#' + parent.element.id + '_exposure'
         ];
         for (var _i = 0, selectors_1 = selectors; _i < selectors_1.length; _i++) {
             var selector = selectors_1[_i];
@@ -2863,68 +2860,69 @@ var ToolbarModule = /** @class */ (function () {
         if (hdrWrapper) {
             hdrWrapper.style.display = 'none';
         }
-        if (!isNullOrUndefined(sliderWrapper) && !isNullOrUndefined(slider)) {
+        if (sliderWrapper && slider) {
             slider.ej2_instances[0].destroy();
             sliderWrapper.remove();
         }
     };
     ToolbarModule.prototype.updateToolbarItems = function () {
-        var selFillElem = this.parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
-        var selStrokeElem = this.parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
-        var selTextStrokeElem = this.parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');
-        var selPenStrokeElem = this.parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview');
-        var strokeWidthElem = this.parent.element.querySelector('.e-shape-stroke-width');
-        var fontFamilyElem = this.parent.element.querySelector('.e-text-font-family');
-        var fontSizeElem = this.parent.element.querySelector('.e-text-font-size');
-        var boldBtn = this.parent.element.querySelector('#' + this.parent.element.id + '_bold');
-        var italicBtn = this.parent.element.querySelector('#' + this.parent.element.id + '_italic');
-        if (isNullOrUndefined(this.parent.activeObj.strokeSettings.strokeWidth)) {
-            this.parent.activeObj.strokeSettings.strokeWidth = 2;
+        var parent = this.parent;
+        var selFillElem = parent.element.querySelector('.e-fill.e-template .e-dropdownbtn-preview');
+        var selStrokeElem = parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview');
+        var selTextStrokeElem = parent.element.querySelector('.e-text-font-color.e-template .e-dropdownbtn-preview');
+        var selPenStrokeElem = parent.element.querySelector('.e-pen-stroke-color.e-template .e-dropdownbtn-preview');
+        var strokeWidthElem = parent.element.querySelector('.e-shape-stroke-width');
+        var fontFamilyElem = parent.element.querySelector('.e-text-font-family');
+        var fontSizeElem = parent.element.querySelector('.e-text-font-size');
+        var boldBtn = parent.element.querySelector('#' + parent.element.id + '_bold');
+        var italicBtn = parent.element.querySelector('#' + parent.element.id + '_italic');
+        if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
+            parent.activeObj.strokeSettings.strokeWidth = 2;
         }
         if (selFillElem) {
-            if (this.parent.activeObj.strokeSettings.fillColor === '') {
+            if (parent.activeObj.strokeSettings.fillColor === '') {
                 selFillElem.classList.add('e-nocolor-item');
             }
             else {
                 selFillElem.classList.remove('e-nocolor-item');
-                selFillElem.style.background = this.parent.activeObj.strokeSettings.fillColor;
+                selFillElem.style.background = parent.activeObj.strokeSettings.fillColor;
             }
-            getComponent(this.parent.element.id + '_shape_fill', 'colorpicker').value
-                = this.parent.activeObj.strokeSettings.fillColor + 'ff';
+            getComponent(parent.element.id + '_shape_fill', 'colorpicker').value
+                = parent.activeObj.strokeSettings.fillColor + 'ff';
         }
         if (selStrokeElem) {
-            selStrokeElem.style.background = this.parent.activeObj.strokeSettings.strokeColor;
-            getComponent(this.parent.element.id + '_shape_stroke', 'colorpicker').value
-                = this.parent.activeObj.strokeSettings.strokeColor + 'ff';
+            selStrokeElem.style.background = parent.activeObj.strokeSettings.strokeColor;
+            getComponent(parent.element.id + '_shape_stroke', 'colorpicker').value
+                = parent.activeObj.strokeSettings.strokeColor + 'ff';
         }
         if (selTextStrokeElem) {
-            selTextStrokeElem.style.background = this.parent.activeObj.strokeSettings.strokeColor;
-            getComponent(this.parent.element.id + '_text_font', 'colorpicker').value
-                = this.parent.activeObj.strokeSettings.strokeColor + 'ff';
+            selTextStrokeElem.style.background = parent.activeObj.strokeSettings.strokeColor;
+            getComponent(parent.element.id + '_text_font', 'colorpicker').value
+                = parent.activeObj.strokeSettings.strokeColor + 'ff';
         }
         if (selPenStrokeElem) {
-            selPenStrokeElem.style.background = this.parent.activeObj.strokeSettings.strokeColor;
-            getComponent(this.parent.element.id + '_pen_stroke', 'colorpicker').value
-                = this.parent.activeObj.strokeSettings.strokeColor + 'ff';
+            selPenStrokeElem.style.background = parent.activeObj.strokeSettings.strokeColor;
+            getComponent(parent.element.id + '_pen_stroke', 'colorpicker').value
+                = parent.activeObj.strokeSettings.strokeColor + 'ff';
         }
         if (fontFamilyElem) {
             if (Browser.isDevice) {
-                fontFamilyElem.setAttribute('style', 'font-family:' + this.parent.activeObj.textSettings.fontFamily.toLowerCase());
+                fontFamilyElem.setAttribute('style', 'font-family:' + parent.activeObj.textSettings.fontFamily.toLowerCase());
             }
             else {
-                fontFamilyElem.textContent = this.parent.activeObj.textSettings.fontFamily;
+                fontFamilyElem.textContent = parent.activeObj.textSettings.fontFamily;
             }
         }
         if (fontSizeElem) {
-            for (var i = 0; i < this.parent.fontSizeColl.length; i++) {
-                if (parseInt(this.parent.fontSizeColl[i].text, 10) >= Math.round(this.parent.activeObj.textSettings.fontSize)) {
+            for (var i = 0; i < parent.fontSizeColl.length; i++) {
+                if (parseInt(parent.fontSizeColl[i].text, 10) >= Math.round(parent.activeObj.textSettings.fontSize)) {
                     fontSizeElem.textContent = (i + 1).toString();
                     break;
                 }
             }
         }
         if (boldBtn) {
-            if (this.parent.activeObj.textSettings.bold) {
+            if (parent.activeObj.textSettings.bold) {
                 boldBtn.classList.add('e-selected-btn');
             }
             else {
@@ -2932,7 +2930,7 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
         if (italicBtn) {
-            if (this.parent.activeObj.textSettings.italic) {
+            if (parent.activeObj.textSettings.italic) {
                 italicBtn.classList.add('e-selected-btn');
             }
             else {
@@ -2940,7 +2938,7 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
         if (strokeWidthElem) {
-            var strokeWidth = Math.round((this.parent.activeObj.strokeSettings.strokeWidth)).toString();
+            var strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
             strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
         }
     };
@@ -2970,7 +2968,7 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
         var panBtn = parent.element.querySelector('.e-img-pan .e-btn');
-        if (!isNullOrUndefined(panBtn)) {
+        if (panBtn) {
             panBtn.classList.remove('e-selected-btn');
         }
         parent.pan(false);
@@ -2981,22 +2979,23 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.destroySubComponents = function () {
-        var inputElement = this.parent.element.querySelectorAll('input.e-control');
-        var btnElement = this.parent.element.querySelectorAll('button.e-control');
+        var parent = this.parent;
+        var inputElement = parent.element.querySelectorAll('input.e-control');
+        var btnElement = parent.element.querySelectorAll('button.e-control');
         for (var i = 0, len = inputElement.length; i < len; i++) {
             if (inputElement[i].classList.contains('e-color-picker')) {
                 getComponent(inputElement[i], 'color-picker').destroy();
-                detach(select('input#' + inputElement[i].id, this.parent.element));
+                detach(select('input#' + inputElement[i].id, parent.element));
             }
         }
         for (var i = 0, len = btnElement.length; i < len; i++) {
             if (btnElement[i].classList.contains('e-dropdown-btn')) {
                 getComponent(btnElement[i], 'dropdown-btn').destroy();
-                detach(select('button#' + btnElement[i].id, this.parent.element));
+                detach(select('button#' + btnElement[i].id, parent.element));
             }
             else if (btnElement[i].classList.contains('e-btn')) {
                 getComponent(btnElement[i], 'btn').destroy();
-                detach(select('button#' + btnElement[i].id, this.parent.element));
+                detach(select('button#' + btnElement[i].id, parent.element));
             }
         }
     };