@syncfusion/ej2-image-editor 24.2.5 → 25.1.35

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

@@ -1,4 +1,4 @@
-import { extend, Browser, detach, select, isBlazor } from '@syncfusion/ej2-base';
+import { extend, Browser, detach, select } from '@syncfusion/ej2-base';
 import { EventHandler, getComponent, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';
 import { NumericTextBox } from '@syncfusion/ej2-inputs';
 import { Toolbar } from '@syncfusion/ej2-navigations';
@@ -242,7 +242,9 @@ var ToolbarModule = /** @class */ (function () {
                 args.value['obj']['toolbarHeight'] = this.toolbarHeight;
                 break;
             case 'setToolbarHeight':
-                this.toolbarHeight = args.value['height'];
+                if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') > -1)) {
+                    this.toolbarHeight = args.value['height'];
+                }
                 break;
             case 'setCurrentToolbar':
                 this.currentToolbar = args.value['type'];
@@ -326,11 +328,14 @@ var ToolbarModule = /** @class */ (function () {
                 this.frameToolbarClick();
                 break;
             case 'performCropTransformClick':
-                this.performCropTransformClick(args.value['shape']);
+                this.performCropTransformClick(args.value['shape'], args.value['isTransform']);
                 break;
             case 'duplicateShape':
                 this.duplicateShape(args.value['isPreventUndoRedo'], true);
                 break;
+            case 'editText':
+                this.editText();
+                break;
         }
     };
     ToolbarModule.prototype.updatePrivateVariables = function () {
@@ -443,6 +448,13 @@ var ToolbarModule = /** @class */ (function () {
             var mToolbar = document.getElementById(id + '_toolbar');
             if (toolbar_1) {
                 this.toolbarHeight = mToolbar.clientHeight;
+                if (parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1) {
+                    var toolabr = getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar');
+                    if (toolabr) {
+                        toolabr.destroy();
+                        document.getElementById(parent.element.id + '_toolbar').innerHTML = '';
+                    }
+                }
             }
         }
         else {
@@ -523,31 +535,33 @@ var ToolbarModule = /** @class */ (function () {
             var args = { toolbarType: 'main', toolbarItems: this.defToolbarItems };
             parent.trigger('toolbarUpdating', args);
             this.defToolbarItems = args.toolbarItems;
-            var toolbarObj = new Toolbar({
-                width: '100%',
-                items: this.defToolbarItems,
-                clicked: this.defToolbarClicked.bind(this),
-                created: function () {
-                    if (!isDevice) {
-                        _this.renderAnnotationBtn();
+            if (this.defToolbarItems.length > 0) {
+                var toolbarObj = new Toolbar({
+                    width: '100%',
+                    items: this.defToolbarItems,
+                    clicked: this.defToolbarClicked.bind(this),
+                    created: function () {
+                        if (!isDevice) {
+                            _this.renderAnnotationBtn();
+                        }
+                        _this.wireZoomBtnEvents();
+                        _this.renderSaveBtn();
+                        parent.trigger('toolbarCreated', { toolbarType: 'main' });
                     }
-                    _this.wireZoomBtnEvents();
-                    _this.renderSaveBtn();
-                    parent.trigger('toolbarCreated', { toolbarType: 'main' });
+                });
+                if (isDevice && isFrame) {
+                    toolbarObj.appendTo('#' + id + '_bottomToolbar');
+                }
+                else {
+                    toolbarObj.appendTo('#' + id + '_toolbar');
+                }
+                this.createLeftToolbarControls();
+                this.enableDisableTbrBtn();
+                if (this.isToolbar() && document.getElementById(id + '_toolbar')) {
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    var toolbar_4 = getComponent(id + '_toolbar', 'toolbar');
+                    toolbar_4.refreshOverflow();
                 }
-            });
-            if (isDevice && isFrame) {
-                toolbarObj.appendTo('#' + id + '_bottomToolbar');
-            }
-            else {
-                toolbarObj.appendTo('#' + id + '_toolbar');
-            }
-            this.createLeftToolbarControls();
-            this.enableDisableTbrBtn();
-            if (this.isToolbar() && document.getElementById(id + '_toolbar')) {
-                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                var toolbar_4 = getComponent(id + '_toolbar', 'toolbar');
-                toolbar_4.refreshOverflow();
             }
         }
     };
@@ -582,8 +596,14 @@ var ToolbarModule = /** @class */ (function () {
         var id = parent.element.id;
         var toolbarItems = [];
         if (!isOkBtn || isResize) {
-            toolbarItems.push({ id: id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
-            toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
+            if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Open') > -1)) {
+                toolbarItems.push({ id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
+            }
+            else if (Browser.isDevice && (parent.toolbar && parent.toolbar.indexOf('Open') === -1)) {
+                toolbarItems.push({ visible: false, id: parent.element.id + '_upload', cssClass: 'e-image-upload', align: 'Left', type: 'Input', template: new Uploader({ allowedExtensions: '.jpg, .jpeg, .png,.svg', multiple: false }) });
+                toolbarItems.push({ visible: false, cssClass: 'e-image-position e-btn e-flat', tooltipText: this.l10n.getConstant('Browse'), align: 'Left' });
+            }
         }
         if (parent.allowUndoRedo && !isResize) {
             if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Undo') > -1)) {
@@ -714,6 +734,9 @@ var ToolbarModule = /** @class */ (function () {
         var id = parent.element.id;
         var toolbarArea = parent.element.querySelector('#' + id + '_toolbarArea');
         var contextualToolbarArea = parent.element.querySelector('#' + id + '_contextualToolbarArea');
+        if (!contextualToolbarArea) {
+            return;
+        }
         contextualToolbarArea.classList.remove('e-hide');
         contextualToolbarArea.style.left = toolbarArea.offsetLeft + 'px';
         if (type === 'filter') {
@@ -743,15 +766,13 @@ var ToolbarModule = /** @class */ (function () {
                 this.renderSlider(cType, isSelect);
             }
         }
-        if (!isBlazor()) {
-            if (parent.toolbarTemplate) {
-                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
-            }
-            else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
-                this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
-            }
-            parent.toolbarHeight = this.toolbarHeight;
+        if (parent.toolbarTemplate) {
+            this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
+        }
+        else if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
+            this.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
         }
+        parent.toolbarHeight = this.toolbarHeight;
         if (Browser.isDevice) {
             var cHt = contextualToolbarArea.offsetHeight + 1;
             var cusWrapper = parent.element.querySelector('#' + id + '_customizeWrapper');
@@ -1539,7 +1560,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         return toolbarItems;
     };
-    ToolbarModule.prototype.initCropTransformToolbar = function (shape) {
+    ToolbarModule.prototype.initCropTransformToolbar = function (shape, isTransform) {
         var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
@@ -1583,7 +1604,7 @@ var ToolbarModule = /** @class */ (function () {
                         toolbar.refreshOverflow();
                     }
                 }
-                if (document.getElementById(id + '_cropBtn')) {
+                if (document.getElementById(id + '_cropBtn') && isNullOrUndefined(isTransform)) {
                     if (!Browser.isDevice) {
                         parent.notify('draw', { prop: 'select', onPropertyChange: false,
                             value: { type: _this.getCropTextContent(document.getElementById(id + '_cropBtn')).toLowerCase(),
@@ -1782,7 +1803,7 @@ var ToolbarModule = /** @class */ (function () {
                 },
                 beforeClose: function () {
                     fillDDB_1.toggle();
-                }
+                },
             }, '#' + id + '_shape_fill');
             var fillDDB_1 = new DropDownButton({
                 open: function (args) {
@@ -2256,7 +2277,7 @@ var ToolbarModule = /** @class */ (function () {
             fontSizeBtn_1.appendTo('#' + id + '_fontSizeBtn');
         }
     };
-    ToolbarModule.prototype.refreshToolbar = function (type, isApplyBtn, isCropping, isZooming, cType, shape) {
+    ToolbarModule.prototype.refreshToolbar = function (type, isApplyBtn, isCropping, isZooming, cType, shape, isTransform) {
         var parent = this.parent;
         var id = parent.element.id;
         if (!parent.isImageLoaded || parent.isCropToolbar) {
@@ -2273,10 +2294,18 @@ var ToolbarModule = /** @class */ (function () {
                 getComponent(cusWrapper, 'toolbar').destroy();
                 cusWrapper.innerHTML = '';
             }
-            if (toolbarElement && this.defToolbarItems.length > 0) {
+            if (toolbarElement && toolbarElement.classList.contains('e-control') && this.defToolbarItems.length > 0) {
                 getComponent(toolbarElement, 'toolbar').destroy();
                 toolbarElement.innerHTML = '';
             }
+            if (toolbarElement && (this.defToolbarItems.length > 0 ||
+                parent.toolbar && parent.toolbar.length > 0 && parent.toolbar.indexOf('Open') === -1)) {
+                var toolbar_9 = getComponent(toolbarElement, 'toolbar');
+                if (!isNullOrUndefined(toolbar_9)) {
+                    toolbar_9.destroy();
+                    document.getElementById(parent.element.id + '_toolbar').innerHTML = '';
+                }
+            }
             if (bottomToolbar && this.defToolbarItems.length > 0) {
                 if (bottomToolbar.className.indexOf('e-control') > -1) {
                     getComponent(bottomToolbar, 'toolbar').destroy();
@@ -2377,14 +2406,18 @@ var ToolbarModule = /** @class */ (function () {
                 this.updateContextualToolbar(type, cType);
                 break;
             case 'croptransform':
-                parent.allowDownScale = false;
-                parent.isCropTab = true;
+                if (isNullOrUndefined(isTransform)) {
+                    parent.allowDownScale = false;
+                    parent.isCropTab = true;
+                }
                 if (Browser.isDevice) {
                     this.initMainToolbar(false, true, true);
                 }
-                parent.updateCropTransformItems();
-                this.initCropTransformToolbar(shape);
-                if (Browser.isDevice) {
+                if (isNullOrUndefined(isTransform)) {
+                    parent.updateCropTransformItems();
+                }
+                this.initCropTransformToolbar(shape, isTransform);
+                if (Browser.isDevice && this.isToolbar()) {
                     this.updateContextualToolbar('color', 'straighten', true);
                 }
                 break;
@@ -2410,17 +2443,21 @@ var ToolbarModule = /** @class */ (function () {
         this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
     };
-    ToolbarModule.prototype.performCropTransformClick = function (shape) {
+    ToolbarModule.prototype.performCropTransformClick = function (shape, isTransform) {
         var parent = this.parent;
-        parent.notify('draw', { prop: 'setTempStraightenZoomDeg' });
-        parent.tempStraighten = parent.transform.straighten;
-        if (parent.currObjType.isFiltered) {
-            parent.okBtn();
+        if (isNullOrUndefined(isTransform)) {
+            parent.notify('draw', { prop: 'setTempStraightenZoomDeg' });
+            parent.tempStraighten = parent.transform.straighten;
+            if (parent.currObjType.isFiltered) {
+                parent.okBtn();
+            }
+            parent.isStraightening = true;
+        }
+        this.refreshToolbar('croptransform', null, null, null, null, shape, isTransform);
+        if (isNullOrUndefined(isTransform)) {
+            parent.notify('draw', { prop: 'setDestForStraighten' });
+            parent.notify('draw', { prop: 'setTempDestForStraighten' });
         }
-        parent.isStraightening = true;
-        this.refreshToolbar('croptransform', null, null, null, null, shape);
-        parent.notify('draw', { prop: 'setDestForStraighten' });
-        parent.notify('draw', { prop: 'setTempDestForStraighten' });
     };
     ToolbarModule.prototype.getAdjustmentToolbarItem = function () {
         var toolbarItems = [];
@@ -2744,15 +2781,15 @@ var ToolbarModule = /** @class */ (function () {
                     if (Browser.isDevice) {
                         if (document.getElementById(id + '_bottomToolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_9 = getComponent(id + '_bottomToolbar', 'toolbar');
-                            toolbar_9.refreshOverflow();
+                            var toolbar_10 = getComponent(id + '_bottomToolbar', 'toolbar');
+                            toolbar_10.refreshOverflow();
                         }
                     }
                     else {
                         if (document.getElementById(id + '_toolbar')) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_10 = getComponent(id + '_toolbar', 'toolbar');
-                            toolbar_10.refreshOverflow();
+                            var toolbar_11 = getComponent(id + '_toolbar', 'toolbar');
+                            toolbar_11.refreshOverflow();
                         }
                     }
                 }
@@ -3076,15 +3113,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_11 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_11.refreshOverflow();
+                        var toolbar_12 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_12.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_12 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_12.refreshOverflow();
+                        var toolbar_13 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_13.refreshOverflow();
                     }
                 }
             }
@@ -3151,15 +3188,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_13 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_13.refreshOverflow();
+                        var toolbar_14 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_14.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_14 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_14.refreshOverflow();
+                        var toolbar_15 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_15.refreshOverflow();
                     }
                 }
             }
@@ -3226,15 +3263,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_15 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_15.refreshOverflow();
+                        var toolbar_16 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_16.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_16 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_16.refreshOverflow();
+                        var toolbar_17 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_17.refreshOverflow();
                     }
                 }
             }
@@ -3302,15 +3339,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_17 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_17.refreshOverflow();
+                        var toolbar_18 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_18.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_18 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_18.refreshOverflow();
+                        var toolbar_19 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_19.refreshOverflow();
                     }
                 }
             }
@@ -3377,15 +3414,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_19 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_19.refreshOverflow();
+                        var toolbar_20 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_20.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_20 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_20.refreshOverflow();
+                        var toolbar_21 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_21.refreshOverflow();
                     }
                 }
             }
@@ -3450,15 +3487,15 @@ var ToolbarModule = /** @class */ (function () {
                 if (Browser.isDevice) {
                     if (document.getElementById(id + '_bottomToolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_21 = getComponent(id + '_bottomToolbar', 'toolbar');
-                        toolbar_21.refreshOverflow();
+                        var toolbar_22 = getComponent(id + '_bottomToolbar', 'toolbar');
+                        toolbar_22.refreshOverflow();
                     }
                 }
                 else {
                     if (document.getElementById(id + '_toolbar')) {
                         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                        var toolbar_22 = getComponent(id + '_toolbar', 'toolbar');
-                        toolbar_22.refreshOverflow();
+                        var toolbar_23 = getComponent(id + '_toolbar', 'toolbar');
+                        toolbar_23.refreshOverflow();
                     }
                 }
             }
@@ -3782,33 +3819,7 @@ var ToolbarModule = /** @class */ (function () {
                     break;
                 case 'edittext':
                     if (!parent.element.querySelector('#' + 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) } });
-                        parent.notify('selection', { prop: 'setInitialTextEdit', onPropertyChange: false,
-                            value: { bool: true } });
-                        parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false,
-                            value: { prevActObj: extend({}, parent.activeObj, {}, true) } });
-                        if (parent.activeObj.rotatedAngle !== 0) {
-                            var object_1 = { x: points.x, y: points.y };
-                            parent.notify('shape', { prop: 'getTextBoxPosition', onPropertyChange: false,
-                                value: { obj: parent.activeObj, object: object_1 } });
-                            points.x = object_1['x'];
-                            points.y = object_1['y'];
-                            var object1 = { x: points.x, y: points.y };
-                            parent.notify('shape', { prop: 'setFlipState', onPropertyChange: false,
-                                value: { x: points.x, y: points.y, obj: parent.activeObj, object: object1 } });
-                            points.x = object1['x'];
-                            points.y = object1['y'];
-                        }
-                        parent.notify('shape', { prop: 'renderTextArea', onPropertyChange: false,
-                            value: { x: points.x, y: points.y, actObj: parent.activeObj } });
-                        if (isNullOrUndefined(parent.activeObj.currIndex)) {
-                            parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
-                        }
-                        if (document.getElementById(id + '_quickAccessToolbarArea')) {
-                            document.getElementById(id + '_quickAccessToolbarArea').style.display = 'none';
-                        }
+                        this.editText();
                     }
                     break;
                 case 'rotleft':
@@ -3841,6 +3852,37 @@ var ToolbarModule = /** @class */ (function () {
             parent.trigger('quickAccessToolbarItemClick', args);
         }
     };
+    ToolbarModule.prototype.editText = function () {
+        var parent = this.parent;
+        var points = { x: parent.activeObj.activePoint.startX, y: parent.activeObj.activePoint.startY };
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        parent.notify('selection', { prop: 'setTempActObj', onPropertyChange: false,
+            value: { obj: extend({}, parent.activeObj, {}, true) } });
+        parent.notify('selection', { prop: 'setInitialTextEdit', onPropertyChange: false,
+            value: { bool: true } });
+        parent.notify('draw', { prop: 'setPrevActObj', onPropertyChange: false,
+            value: { prevActObj: extend({}, parent.activeObj, {}, true) } });
+        if (parent.activeObj.rotatedAngle !== 0) {
+            var object = { x: points.x, y: points.y };
+            parent.notify('shape', { prop: 'getTextBoxPosition', onPropertyChange: false,
+                value: { obj: parent.activeObj, object: object } });
+            points.x = object['x'];
+            points.y = object['y'];
+            var object1 = { x: points.x, y: points.y };
+            parent.notify('shape', { prop: 'setFlipState', onPropertyChange: false,
+                value: { x: points.x, y: points.y, obj: parent.activeObj, object: object1 } });
+            points.x = object1['x'];
+            points.y = object1['y'];
+        }
+        parent.notify('shape', { prop: 'renderTextArea', onPropertyChange: false,
+            value: { x: points.x, y: points.y, actObj: parent.activeObj } });
+        if (isNullOrUndefined(parent.activeObj.currIndex)) {
+            parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: true } });
+        }
+        if (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
+            document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
+        }
+    };
     ToolbarModule.prototype.duplicateShape = function (isPreventUndoRedo, isPublicMethod) {
         var parent = this.parent;
         var tempObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
@@ -4094,7 +4136,6 @@ var ToolbarModule = /** @class */ (function () {
                             parseFloat(getComponent(aspectRatioHeight, 'numerictextbox').placeholder);
                         parent.notify('transform', { prop: 'resize', value: { width: parent.aspectWidth, height: parent.aspectHeight, isAspectRatio: false } });
                     }
-                    parent.cancelCropSelection = null;
                     parent.resizeSrc = { startX: parent.img.srcLeft, startY: parent.img.srcTop, width: parent.img.srcWidth,
                         height: parent.img.srcHeight };
                     this.refreshToolbar('resize');
@@ -4790,91 +4831,93 @@ var ToolbarModule = /** @class */ (function () {
         if (!parent.isImageLoaded) {
             return;
         }
-        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('#' + id + '_bold');
-        var italicBtn = parent.element.querySelector('#' + id + '_italic');
-        if (parent.activeObj.strokeSettings && parent.activeObj.textSettings) {
-            if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
-                parent.activeObj.strokeSettings.strokeWidth = 2;
-            }
-            if (selFillElem) {
-                var value = 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 = value;
-                }
-                if (document.querySelector('#' + id + '_shape_fill')) {
-                    getComponent(id + '_shape_fill', 'colorpicker').value = value;
-                }
-            }
-            if (selStrokeElem) {
-                var value = parent.activeObj.strokeSettings.strokeColor;
-                selStrokeElem.style.background = value;
-                if (document.querySelector('#' + id + '_shape_stroke')) {
-                    getComponent(id + '_shape_stroke', 'colorpicker').value = value;
-                }
-            }
-            if (selTextStrokeElem) {
-                var value = parent.activeObj.strokeSettings.strokeColor;
-                selTextStrokeElem.style.background = value;
-                if (document.querySelector('#' + id + '_text_font')) {
-                    getComponent(id + '_text_font', 'colorpicker').value = value;
+        if (this.isToolbar()) {
+            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('#' + id + '_bold');
+            var italicBtn = parent.element.querySelector('#' + id + '_italic');
+            if (parent.activeObj.strokeSettings && parent.activeObj.textSettings) {
+                if (isNullOrUndefined(parent.activeObj.strokeSettings.strokeWidth)) {
+                    parent.activeObj.strokeSettings.strokeWidth = 2;
+                }
+                if (selFillElem) {
+                    var value = 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 = value;
+                    }
+                    if (document.querySelector('#' + id + '_shape_fill')) {
+                        getComponent(id + '_shape_fill', 'colorpicker').value = value;
+                    }
                 }
-            }
-            if (selPenStrokeElem) {
-                var value = parent.activeObj.strokeSettings.strokeColor;
-                selPenStrokeElem.style.background = value;
-                if (document.querySelector('#' + id + '_pen_stroke')) {
-                    getComponent(id + '_pen_stroke', 'colorpicker').value = value;
+                if (selStrokeElem) {
+                    var value = parent.activeObj.strokeSettings.strokeColor;
+                    selStrokeElem.style.background = value;
+                    if (document.querySelector('#' + id + '_shape_stroke')) {
+                        getComponent(id + '_shape_stroke', 'colorpicker').value = value;
+                    }
                 }
-                var obj = { penOpacity: 1 };
-                parent.notify('freehand-draw', { prop: 'getPenOpacity', onPropertyChange: false, value: { obj: obj } });
-            }
-            if (fontFamilyElem) {
-                if (Browser.isDevice) {
-                    fontFamilyElem.setAttribute('style', 'font-family:' + parent.activeObj.textSettings.fontFamily.toLowerCase());
+                if (selTextStrokeElem) {
+                    var value = parent.activeObj.strokeSettings.strokeColor;
+                    selTextStrokeElem.style.background = value;
+                    if (document.querySelector('#' + id + '_text_font')) {
+                        getComponent(id + '_text_font', 'colorpicker').value = value;
+                    }
                 }
-                else {
-                    fontFamilyElem.textContent = parent.activeObj.textSettings.fontFamily;
+                if (selPenStrokeElem) {
+                    var value = parent.activeObj.strokeSettings.strokeColor;
+                    selPenStrokeElem.style.background = value;
+                    if (document.querySelector('#' + id + '_pen_stroke')) {
+                        getComponent(id + '_pen_stroke', 'colorpicker').value = value;
+                    }
+                    var obj = { penOpacity: 1 };
+                    parent.notify('freehand-draw', { prop: 'getPenOpacity', onPropertyChange: false, value: { obj: obj } });
                 }
-            }
-            if (fontSizeElem) {
-                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 (fontFamilyElem) {
+                    if (Browser.isDevice) {
+                        fontFamilyElem.setAttribute('style', 'font-family:' + parent.activeObj.textSettings.fontFamily.toLowerCase());
+                    }
+                    else {
+                        fontFamilyElem.textContent = parent.activeObj.textSettings.fontFamily;
                     }
                 }
-            }
-            if (boldBtn) {
-                if (parent.activeObj.textSettings.bold) {
-                    boldBtn.classList.add('e-selected-btn');
+                if (fontSizeElem) {
+                    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;
+                        }
+                    }
                 }
-                else {
-                    boldBtn.classList.remove('e-selected-btn');
+                if (boldBtn) {
+                    if (parent.activeObj.textSettings.bold) {
+                        boldBtn.classList.add('e-selected-btn');
+                    }
+                    else {
+                        boldBtn.classList.remove('e-selected-btn');
+                    }
                 }
-            }
-            if (italicBtn) {
-                if (parent.activeObj.textSettings.italic) {
-                    italicBtn.classList.add('e-selected-btn');
+                if (italicBtn) {
+                    if (parent.activeObj.textSettings.italic) {
+                        italicBtn.classList.add('e-selected-btn');
+                    }
+                    else {
+                        italicBtn.classList.remove('e-selected-btn');
+                    }
                 }
-                else {
-                    italicBtn.classList.remove('e-selected-btn');
+                if (strokeWidthElem) {
+                    var strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
+                    strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
                 }
             }
-            if (strokeWidthElem) {
-                var strokeWidth = Math.round((parent.activeObj.strokeSettings.strokeWidth)).toString();
-                strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
-            }
         }
     };
     ToolbarModule.prototype.getStrokeWidth = function (text) {