@syncfusion/ej2-image-editor 22.2.8 → 22.2.10

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

@@ -9370,8 +9370,10 @@ class Selection {
                                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
                     }
                     else if (parent.activeObj.shape === 'text') {
-                        parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
-                                isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        if (parent.textArea.style.display === 'none') {
+                            parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
+                                    isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        }
                     }
                     else if (this.isFhdEditing) {
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
@@ -9388,7 +9390,7 @@ class Selection {
                         || (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path')) {
                         parent.updateToolbar(parent.element, parent.activeObj.shape);
                     }
-                    else if (parent.activeObj.shape === 'text') {
+                    else if (parent.activeObj.shape === 'text' && parent.textArea.style.display === 'none') {
                         parent.updateToolbar(parent.element, 'text');
                     }
                 }
@@ -9703,23 +9705,24 @@ class Selection {
             parent.activeObj = extend({}, activeObj, null, true);
             parent.textArea.value = obj.keyHistory;
             parent.textArea.style.display = 'block';
-            let strokeColor = obj.strokeSettings.strokeColor.split('(')[0] === 'rgb' ?
+            let strokeColor = obj.strokeSettings && obj.strokeSettings.strokeColor ? obj.strokeSettings.strokeColor.split('(')[0] === 'rgb' ?
                 this.rgbToHex(parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[0]), parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[1]), parseFloat(obj.strokeSettings.strokeColor.split('(')[1].split(',')[2])) :
-                obj.strokeSettings.strokeColor;
-            if (strokeColor === '#ffffff') {
+                obj.strokeSettings.strokeColor : null;
+            if (strokeColor && strokeColor === '#ffffff') {
                 strokeColor = '#fff';
             }
-            if (this.tempActiveObj.strokeSettings.strokeColor === '#ffffff') {
+            if (this.tempActiveObj.strokeSettings && this.tempActiveObj.strokeSettings.strokeColor &&
+                this.tempActiveObj.strokeSettings.strokeColor === '#ffffff') {
                 this.tempActiveObj.strokeSettings.strokeColor = '#fff';
             }
             if (obj.keyHistory !== this.tempActiveObj.keyHistory ||
-                strokeColor !== this.tempActiveObj.strokeSettings.strokeColor ||
-                obj.textSettings.fontFamily !== this.tempActiveObj.textSettings.fontFamily ||
-                Math.round(obj.textSettings.fontSize) !== Math.round(this.tempActiveObj.textSettings.fontSize) ||
-                Math.round(obj.textSettings.fontRatio) !== Math.round(this.tempActiveObj.textSettings.fontRatio) ||
-                obj.textSettings.bold !== this.tempActiveObj.textSettings.bold ||
-                obj.textSettings.italic !== this.tempActiveObj.textSettings.italic ||
-                obj.textSettings.underline !== this.tempActiveObj.textSettings.underline) {
+                (strokeColor && (strokeColor !== this.tempActiveObj.strokeSettings.strokeColor)) ||
+                (obj.textSettings && obj.textSettings.fontFamily !== this.tempActiveObj.textSettings.fontFamily) ||
+                (obj.textSettings && Math.round(obj.textSettings.fontSize) !== Math.round(this.tempActiveObj.textSettings.fontSize)) ||
+                (obj.textSettings && Math.round(obj.textSettings.fontRatio) !== Math.round(this.tempActiveObj.textSettings.fontRatio)) ||
+                (obj.textSettings && obj.textSettings.bold !== this.tempActiveObj.textSettings.bold) ||
+                (obj.textSettings && obj.textSettings.italic !== this.tempActiveObj.textSettings.italic) ||
+                (obj.textSettings && obj.textSettings.underline !== this.tempActiveObj.textSettings.underline)) {
                 isApply = true;
             }
             if (this.isInitialTextEdited && !isApply) {
@@ -10465,6 +10468,9 @@ class Selection {
                 isInside = true;
             }
         }
+        else if (parent.textArea.style.display === 'block') {
+            isInside = true;
+        }
         if (!isInside) {
             if (isNullOrUndefined(parent.activeObj.currIndex)) {
                 parent.activeObj.currIndex = 'shape_' + (parent.objColl.length + 1);
@@ -11392,6 +11398,7 @@ class Shape {
                     parent.textArea.style.transform = '';
                     parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
                 }
+                this.refreshActiveObj();
             }
             else {
                 this.applyActObj(isMouseDown);
@@ -19363,26 +19370,36 @@ class ToolbarModule {
     }
     renderAnnotationBtn(isContextualToolbar) {
         const parent = this.parent;
+        let isCustomized = false;
         const items = [];
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Pen') > -1)) {
+        const defItems = ['Ellipse', 'Arrow', 'Line', 'Rectangle', 'Pen', 'Path', 'Text'];
+        if (parent.toolbar) {
+            for (let i = 0; i < defItems.length; i++) {
+                if (parent.toolbar.indexOf(defItems[i]) !== -1) {
+                    isCustomized = true;
+                    break;
+                }
+            }
+        }
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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) || (parent.toolbar && parent.toolbar.indexOf('Line') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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) || (parent.toolbar && parent.toolbar.indexOf('Rectangle') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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) || (parent.toolbar && parent.toolbar.indexOf('Ellipse') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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) || (parent.toolbar && parent.toolbar.indexOf('Arrow') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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) || (parent.toolbar && parent.toolbar.indexOf('Path') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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) || (parent.toolbar && parent.toolbar.indexOf('Text') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Text') > -1)) {
             items.push({ text: this.l10n.getConstant('Text'), id: 'text', iconCss: 'e-icons e-add-text' });
         }
         const obj = { freehandDrawSelectedId: null };
@@ -19486,16 +19503,26 @@ class ToolbarModule {
     renderCropBtn() {
         const parent = this.parent;
         const items = [];
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('CustomSelection') > -1)) {
+        let isCustomized = false;
+        const defItems = ['CustomSelection', 'CircleSelection', 'SquareSelection', 'RatioSelection'];
+        if (parent.toolbar) {
+            for (let i = 0; i < defItems.length; i++) {
+                if (parent.toolbar.indexOf(defItems[i]) !== -1) {
+                    isCustomized = true;
+                    break;
+                }
+            }
+        }
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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) || (parent.toolbar && parent.toolbar.indexOf('CircleSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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) || (parent.toolbar && parent.toolbar.indexOf('SquareSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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) || (parent.toolbar && parent.toolbar.indexOf('RatioSelection') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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' });
@@ -19513,8 +19540,8 @@ class ToolbarModule {
             shape = parent.currSelectionPoint.shape;
         }
         else {
-            iconCss = 'e-custom';
-            shape = 'custom';
+            iconCss = items[0].iconCss;
+            shape = items[0].id;
         }
         const drpDownBtn = new DropDownButton({
             open: (args) => {
@@ -19596,15 +19623,29 @@ class ToolbarModule {
             template: '<button id="' + parent.element.id + '_cropBtn"></button>'
         });
         toolbarItems.push({ align: 'Center', type: 'Separator' });
-        toolbarItems.push({ id: parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
-            tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
-        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: parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
-            tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
-        toolbarItems.push({ id: parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip',
-            tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
+            parent.toolbar.indexOf('RotateLeft') > -1))) {
+            toolbarItems.push({ id: parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
+                tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
+        }
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
+            parent.toolbar.indexOf('RotateRight') > -1))) {
+            toolbarItems.push({ id: parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise',
+                tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
+        }
+        if (toolbarItems.length > 2) {
+            toolbarItems.push({ align: 'Center', type: 'Separator' });
+        }
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
+            parent.toolbar.indexOf('HorizontalFlip') > -1))) {
+            toolbarItems.push({ id: parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
+                tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
+        }
+        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
+            parent.toolbar.indexOf('VerticalFlip') > -1))) {
+            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: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
                 tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
@@ -19709,7 +19750,9 @@ class ToolbarModule {
                         toolbar.refreshOverflow();
                     }
                 }
-                parent.select('custom');
+                if (document.getElementById(parent.element.id + '_cropBtn')) {
+                    parent.select(document.getElementById(parent.element.id + '_cropBtn').textContent.toLowerCase());
+                }
             }
         });
         if (Browser.isDevice) {
@@ -20341,31 +20384,41 @@ class ToolbarModule {
     getAdjustmentToolbarItem() {
         const toolbarItems = [];
         const parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Brightness') > -1)) {
+        let isCustomized = false;
+        const defItems = ['Brightness', 'Contrast', 'Hue', 'Saturation', 'Exposure', 'Opacity', 'Blur'];
+        if (parent.toolbar) {
+            for (let i = 0; i < defItems.length; i++) {
+                if (parent.toolbar.indexOf(defItems[i]) !== -1) {
+                    isCustomized = true;
+                    break;
+                }
+            }
+        }
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Contrast') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Hue') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Saturation') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Exposure') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Opacity') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Blur') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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' });
         }
@@ -20384,37 +20437,47 @@ class ToolbarModule {
     getFilterToolbarItem() {
         const toolbarItems = [];
         const parent = this.parent;
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
+        let isCustomized = false;
+        const defItems = ['Default', 'Chrome', 'Cold', 'Warm', 'Grayscale', 'Sepia', 'Invert'];
+        if (parent.toolbar) {
+            for (let i = 0; i < defItems.length; i++) {
+                if (parent.toolbar.indexOf(defItems[i]) !== -1) {
+                    isCustomized = true;
+                    break;
+                }
+            }
+        }
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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=' + parent.element.id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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=' + parent.element.id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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=' + parent.element.id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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=' + parent.element.id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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=' + parent.element.id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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=' + parent.element.id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
         }
-        if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
+        if (isNullOrUndefined(parent.toolbar) || !isCustomized || (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=' + parent.element.id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
@@ -20684,7 +20747,9 @@ class ToolbarModule {
                 if (hdrWrapper) {
                     hdrWrapper.style.display = 'none';
                 }
-                document.getElementById(parent.currentFilter + 'Canvas').parentElement.parentElement.classList.add('e-selected');
+                if (document.getElementById(parent.currentFilter + 'Canvas')) {
+                    document.getElementById(parent.currentFilter + 'Canvas').parentElement.parentElement.classList.add('e-selected');
+                }
                 this.enableDisableTbrBtn();
                 toolbar.refreshOverflow();
             }
@@ -21473,7 +21538,7 @@ class ToolbarModule {
         ];
         for (const selector of selectors) {
             const element = document.querySelector(selector);
-            if (element.classList.contains('e-selected-btn')) {
+            if (element && element.classList.contains('e-selected-btn')) {
                 element.classList.remove('e-selected-btn');
                 break;
             }