@syncfusion/ej2-image-editor 25.1.35 → 25.1.38

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

@@ -7036,6 +7036,9 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
+            case 'triggerShapeChanging':
+                this.triggerShapeChanging(args.value['shapeChangingArgs']);
+                break;
         }
     };
     FreehandDrawing.prototype.updateFhdPvtVar = function () {
@@ -13567,6 +13570,8 @@ var Shape = /** @__PURE__ @class */ (function () {
             endX: parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width,
             endY: parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height,
             width: selectionSettings.width, height: selectionSettings.height };
+        parent.activeObj.activePoint.endX = parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width;
+        parent.activeObj.activePoint.endY = parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height;
     };
     Shape.prototype.updateShapeChangeEventArgs = function (shapeSettings) {
         var parent = this.parent;
@@ -13625,6 +13630,7 @@ var Shape = /** @__PURE__ @class */ (function () {
                     if (shapeSettings.degree) {
                         parent.activeObj.rotatedAngle = shapeSettings.degree * (Math.PI / 180);
                     }
+                    this.updateFontRatio(parent.activeObj);
                     break;
                 case 'rectangle':
                 case 'image':
@@ -16273,7 +16279,7 @@ var Transform = /** @__PURE__ @class */ (function () {
                 this.resetZoom();
                 break;
             case 'pan':
-                this.pan(args.value['value']);
+                this.pan(args.value['value'], args.value['x'], args.value['y']);
                 break;
             case 'zoom':
                 this.zoom(args.value['zoomFactor'], args.value['zoomPoint']);
@@ -17286,12 +17292,12 @@ var Transform = /** @__PURE__ @class */ (function () {
         parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: { obj: obj } });
         var panEventArgs = { startPoint: obj['panDown'], endPoint: this.panMove, cancel: false };
         parent.trigger('panning', panEventArgs);
-        this.panEvent(panEventArgs, xDiff, yDiff);
-    };
-    Transform.prototype.panEvent = function (panEventArgs, xDiff, yDiff) {
         if (panEventArgs.cancel) {
             return;
         }
+        this.panEvent(xDiff, yDiff);
+    };
+    Transform.prototype.panEvent = function (xDiff, yDiff, isPanMethod) {
         var parent = this.parent;
         var isObjCreated = false;
         if (parent.activeObj.shape && parent.activeObj.shape === 'shape') {
@@ -17329,8 +17335,13 @@ var Transform = /** @__PURE__ @class */ (function () {
         }
         if (parent.transform.degree === 0) {
             var point = void 0;
-            if (isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) {
-                point = this.updatePanPoints();
+            if ((isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) || isPanMethod) {
+                if (isPanMethod) {
+                    point = this.updatePanPoints(xDiff, yDiff);
+                }
+                else {
+                    point = this.updatePanPoints();
+                }
             }
             else {
                 point = { x: xDiff, y: yDiff };
@@ -17351,8 +17362,13 @@ var Transform = /** @__PURE__ @class */ (function () {
         else {
             var tempFlipState = parent.transform.currFlipState;
             parent.isCropTab = true;
-            if (isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) {
-                parent.panPoint.currentPannedPoint = this.updatePanPoints();
+            if ((isNullOrUndefined(xDiff) && isNullOrUndefined(yDiff)) || isPanMethod) {
+                if (isPanMethod) {
+                    parent.panPoint.currentPannedPoint = this.updatePanPoints(xDiff, yDiff);
+                }
+                else {
+                    parent.panPoint.currentPannedPoint = this.updatePanPoints();
+                }
             }
             else {
                 parent.panPoint.currentPannedPoint = { x: xDiff, y: yDiff };
@@ -17639,7 +17655,7 @@ var Transform = /** @__PURE__ @class */ (function () {
         parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: actPoint,
                 obj: parent.activeObj, isMouseMove: null, x: null, y: null } });
     };
-    Transform.prototype.pan = function (value) {
+    Transform.prototype.pan = function (value, x, y) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (value) {
@@ -17649,6 +17665,15 @@ var Transform = /** @__PURE__ @class */ (function () {
                 parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
                 parent.lowerCanvas.style.cursor = parent.upperCanvas.style.cursor = parent.cursor = 'grab';
                 parent.notify('selection', { prop: 'setPanDown', onPropertyChange: false, value: { panDown: null } });
+                if (x || y) {
+                    x = x ? x : 0;
+                    y = y ? y : 0;
+                    if (isNullOrUndefined(this.tempPanMove)) {
+                        this.tempPanMove = { x: this.panMove.x, y: this.panMove.y };
+                    }
+                    this.panEvent(x, y, true);
+                    this.tempPanMove = null;
+                }
             }
             else {
                 parent.togglePan = parent.currObjType.isCustomCrop = false;
@@ -17781,8 +17806,9 @@ var Transform = /** @__PURE__ @class */ (function () {
                 toolbarHeight = obj['toolbarHeight'];
             }
         }
-        if (Browser.isDevice && straightenObj['bool']) {
-            cxtTbarHeight = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea').clientHeight;
+        var ctxTbarArea = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
+        if (Browser.isDevice && straightenObj['bool'] && ctxTbarArea) {
+            cxtTbarHeight = ctxTbarArea.clientHeight;
         }
         parent.notify('toolbar', { prop: 'setToolbarHeight', value: { height: toolbarHeight } });
         if (Browser.isDevice) {
@@ -17962,6 +17988,9 @@ var Transform = /** @__PURE__ @class */ (function () {
             var cxtTbar = parent.element.querySelector('#' + parent.element.id + '_contextualToolbarArea');
             canvasMaxHeight -= cxtTbar ? cxtTbar.clientHeight : 0;
         }
+        if (!isImgShape && parent.element.clientHeight === 0) {
+            canvasMaxHeight = 0;
+        }
         if (isNullOrUndefined(isImgShape)) {
             if (canvasMaxWidth > 30) {
                 canvasMaxWidth -= 30;
@@ -17998,7 +18027,7 @@ var Transform = /** @__PURE__ @class */ (function () {
         }
         return { width: cssMaxWidth, height: cssMaxHeight };
     };
-    Transform.prototype.updatePanPoints = function () {
+    Transform.prototype.updatePanPoints = function (x, y) {
         var parent = this.parent;
         var tempActObj = extend({}, parent.activeObj, {}, true);
         var tempDestLeft = parent.img.destLeft;
@@ -18008,6 +18037,10 @@ var Transform = /** @__PURE__ @class */ (function () {
         }
         var xDiff = this.panMove.x - this.tempPanMove.x;
         var yDiff = this.panMove.y - this.tempPanMove.y;
+        if (x || y) {
+            xDiff = x;
+            yDiff = y;
+        }
         parent.img.destLeft += xDiff;
         parent.img.destTop += yDiff;
         this.limitPan();
@@ -19162,32 +19195,6 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
         parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
         parent.currObjType.isCustomCrop = false;
     };
-    UndoRedo.prototype.getImageAction = function (operation) {
-        if (['brightness', 'contrast', 'saturation', 'opacity', 'blur', 'hue'].indexOf(operation) !== -1) {
-            return 'FinetuneApplied';
-        }
-        else if (['chrome', 'cold', 'warm', 'grayscale', 'blackandwhite', 'sepia', 'invert'].indexOf(operation) !== -1) {
-            return 'FilterApplied';
-        }
-        else if (operation === 'frame') {
-            return 'FrameApplied';
-        }
-        else if (operation === 'resize') {
-            return 'ImageResized';
-        }
-        else if (['deleteFreehandDrawing', 'deleteObj'].indexOf(operation) !== -1) {
-            return 'ShapeDeleted';
-        }
-        else if (operation === 'crop') {
-            return 'Cropped';
-        }
-        else if (['shapeInsert', 'freehanddraw', 'freehand-draw'].indexOf(operation) !== -1) {
-            return 'ShapeInserted';
-        }
-        else {
-            return 'ShapeCustomized';
-        }
-    };
     UndoRedo.prototype.updateUrc = function (operation, previousObj, previousObjColl, previousPointColl, previousSelPointColl, previousCropObj, previousText, currentText, previousFilter, isCircleCrop) {
         var parent = this.parent;
         if (parent.isResize || this.isPreventing) {
@@ -19947,7 +19954,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.createDropUploader = function () {
         var _this = this;
         var uploadObj = new Uploader({
-            dropArea: document.getElementsByClassName('e-canvas-wrapper')[0],
+            dropArea: this.element.getElementsByClassName('e-canvas-wrapper')[0],
             allowedExtensions: '.jpg, .jpeg, .png,.svg',
             multiple: false,
             selected: function (args) {
@@ -20233,7 +20240,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     ImageEditor.prototype.notifyResetForAllModules = function () {
         var modules = this.requiredModules();
         for (var i = 0; i < modules.length; i++) {
-            this.notify(modules[i].member, { prop: 'reset', onPropertyChange: false });
+            var module = modules[i].member;
+            this.notify(module === 'toolbar-module' ? 'toolbar' : module, { prop: 'reset', onPropertyChange: false });
         }
     };
     ImageEditor.prototype.allowShape = function (x, y) {
@@ -20537,14 +20545,16 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * Enable or disable a panning on the Image Editor.
      *
      * @param {boolean} value - Specifies a value whether enable or disable panning.
+     * @param {number} x - Optional, Specifies a value to pan the image horizontally.
+     * @param {number} y - Optional, Specifies a value to pan the image vertically.
      *
      * @remarks
      * This option will take into effect once the image's visibility is hidden when zooming an image or selection has been performed.
      *
      * @returns {void}.
      */
-    ImageEditor.prototype.pan = function (value) {
-        this.notify('transform', { prop: 'pan', onPropertyChange: false, value: { value: value } });
+    ImageEditor.prototype.pan = function (value, x, y) {
+        this.notify('transform', { prop: 'pan', onPropertyChange: false, value: { value: value, x: x, y: y } });
     };
     /**
      * Zoom in or out on a point in the image editor.
@@ -21052,8 +21062,19 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             this.notify('shape', { prop: 'selectShape', onPropertyChange: false, value: { id: setting.id, obj: obj } });
             this.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: freehandObj } });
             if (obj['isSelected']) {
+                var tempFontSize = this.activeObj.textSettings.fontSize;
                 this.notify('shape', { prop: 'updateShapeChangeEventArgs', onPropertyChange: false,
                     value: { shapeSettings: setting } });
+                if (this.activeObj.shape === 'text' && tempFontSize) {
+                    var diff = this.activeObj.textSettings.fontSize - tempFontSize;
+                    if (diff !== 0) {
+                        this.activeObj.activePoint.height += diff;
+                        this.activeObj.activePoint.startY -= (diff / 2);
+                        this.activeObj.activePoint.endY += (diff / 2);
+                        this.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: this.activeObj.activePoint, obj: this.activeObj,
+                                isMouseMove: null, x: null, y: null } });
+                    }
+                }
                 var activeObj = extend({}, this.activeObj, {}, true);
                 this.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
                 this.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: null } });
@@ -23351,12 +23372,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             case 'setSelectedFreehandColor':
                 this.selFhdColor = args.value['color'];
                 break;
-            case 'getCurrentFilter':
-                args.value['obj']['currentFilter'] = parent.currentFilter;
-                break;
-            case 'setCurrentFilter':
-                parent.currentFilter = args.value['filter'];
-                break;
             case 'setInitialAdjustmentValue':
                 parent.initialAdjustmentValue = args.value['value'];
                 break;
@@ -23378,9 +23393,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             case 'refreshSlider':
                 this.refreshSlider();
                 break;
-            case 'renderSlider':
-                this.renderSlider(args.value['type']);
-                break;
             case 'getCurrAdjustmentValue':
                 parent.getCurrAdjustmentValue(args.value['type']);
                 break;
@@ -23390,18 +23402,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             case 'refreshShapeDrawing':
                 this.refreshShapeDrawing();
                 break;
-            case 'getCropToolbar':
-                args.value['obj']['isCropToolbar'] = parent.isCropToolbar;
-                break;
-            case 'getPrevCurrSelectionPoint':
-                args.value['obj']['prevCurrSelectionPoint'] = parent.prevCurrSelectionPoint;
-                break;
-            case 'setPrevCurrSelectionPoint':
-                parent.prevCurrSelectionPoint = args.value['point'];
-                break;
-            case 'updateCropTransformItems':
-                parent.updateCropTransformItems();
-                break;
             case 'setEnableDisableUndoRedo':
                 this.preventEnableDisableUr = args.value['isPrevent'];
                 break;
@@ -23452,7 +23452,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
     };
     ToolbarModule.prototype.reset = function () {
         var parent = this.parent;
-        this.defToolbarItems = [];
         this.toolbarHeight = 46;
         parent.prevCurrSelectionPoint = null;
         this.zoomBtnHold = null;
@@ -24243,6 +24242,10 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             this.parent.showDialogPopup();
         }
     };
+    ToolbarModule.prototype.triggerTbarClickEvent = function (args) {
+        var clickEvent = { item: args.item, originalEvent: args.event };
+        this.parent.trigger('toolbarItemClicked', clickEvent);
+    };
     ToolbarModule.prototype.renderAnnotationBtn = function (isContextualToolbar) {
         var _this = this;
         var parent = this.parent;
@@ -24332,6 +24335,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 parent.okBtn();
                 var isCropSelection = false;
                 var splitWords;
@@ -24352,6 +24356,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
                 var obj = { currentFreehandDrawIndex: null };
                 parent.notify('freehand-draw', { prop: 'getCurrentFreehandDrawIndex', value: { obj: obj } });
+                var prevObj = { shapeSettingsObj: {} };
+                var shapeSettings;
+                var shapeChangingArgs;
                 drpDownBtn.iconCss = 'e-icons ' + _this.getCurrentShapeIcon(args.item.id);
                 switch (args.item.id) {
                     case 'pen':
@@ -24359,6 +24366,12 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                         parent.notify('draw', { prop: 'setTempCurrentFreehandDrawIndex', value: { tempCurrentFreehandDrawIndex: obj['currentFreehandDrawIndex'] } });
                         _this.currentToolbar = 'pen';
                         parent.freeHandDraw(true);
+                        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: prevObj } });
+                        shapeSettings = prevObj['shapeSettingsObj'];
+                        shapeSettings.type = ShapeType.FreehandDraw;
+                        shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
+                            currentShapeSettings: shapeSettings };
+                        parent.notify('freehand-draw', { prop: 'triggerShapeChanging', value: { shapeChangingArgs: shapeChangingArgs } });
                         break;
                     case 'text':
                         _this.currentToolbar = 'text';
@@ -24368,12 +24381,22 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                         _this.currentToolbar = 'shapes';
                         parent.element.querySelector('#' + id + '_fileUpload').click();
                         break;
-                    default:
+                    case 'ellipse':
+                    case 'arrow':
+                    case 'line':
+                    case 'rectangle':
+                    case 'path':
                         _this.currentToolbar = 'shapes';
                         _this.setInitialShapeSettings(args);
                         parent.notify('selection', { prop: 'annotate', value: { shape: args.item.id } });
                         parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
                                 isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
+                        parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: prevObj } });
+                        shapeSettings = prevObj['shapeSettingsObj'];
+                        shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
+                            currentShapeSettings: shapeSettings };
+                        parent.trigger('shapeChanging', shapeChangingArgs);
+                        parent.notify('shape', { prop: 'updateShapeChangeEventArgs', value: { shapeSettings: shapeChangingArgs.currentShapeSettings } });
                         break;
                 }
                 _this.updateToolbarItems();
@@ -24479,6 +24502,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             },
             items: items,
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 _this.cropSelect(args);
                 drpDownBtn.iconCss = 'e-icons ' + _this.getCurrentShapeIcon('crop-' + args.item.id);
                 drpDownBtn.content = Browser.isDevice ? null : parent.toPascalCase(args.item.id);
@@ -24489,6 +24513,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         drpDownBtn.appendTo('#' + parent.element.id + '_cropBtn');
     };
     ToolbarModule.prototype.renderTransformBtn = function () {
+        var _this = this;
         var parent = this.parent;
         var items = [];
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('RotateLeft') > -1)) {
@@ -24513,12 +24538,17 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     elem.style.display = 'block';
                 }
             },
-            items: items, select: parent.transformSelect.bind(this),
+            items: items,
+            select: function (args) {
+                _this.triggerTbarClickEvent(args);
+                parent.transformSelect.bind(_this);
+            },
             iconCss: 'e-icons e-transform', cssClass: 'e-image-popup'
         });
         drpDownBtn.appendTo('#' + parent.element.id + '_transformBtn');
     };
     ToolbarModule.prototype.renderSaveBtn = function () {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         var saveItems = [
@@ -24531,6 +24561,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             // 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) {
+                    _this.triggerTbarClickEvent(args);
                     parent.export(args.item.text);
                     parent.isChangesSaved = true;
                     parent.notify('draw', { prop: 'redrawDownScale' });
@@ -24968,6 +24999,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.createShapeBtn = function (items) {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         if (items.indexOf('strokeWidth') > -1) {
@@ -25006,6 +25038,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     }
                 },
                 select: function (args) {
+                    _this.triggerTbarClickEvent(args);
                     spanElem_1.textContent = args.item.text;
                     parent.updateStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
@@ -25029,6 +25062,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.createStartBtn = function () {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         var strokeWidthItems = [
@@ -25062,6 +25096,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('startArrow', args.item.id);
             }
@@ -25070,6 +25105,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_startBtn');
     };
     ToolbarModule.prototype.createEndBtn = function () {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         var strokeWidthItems = [
@@ -25103,6 +25139,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('endArrow', args.item.id);
             }
@@ -25301,6 +25338,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.createTextBtn = function (items) {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         if (items.indexOf('fontFamily') > -1) {
@@ -25341,6 +25379,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     }
                 },
                 select: function (args) {
+                    _this.triggerTbarClickEvent(args);
                     spanElem_2.textContent = args.item.text;
                     if (Browser.isDevice) {
                         spanElem_2.setAttribute('style', 'font-family:' + args.item.id);
@@ -25369,6 +25408,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     args.element.querySelector('[aria-label *= ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: function (args) {
+                    _this.triggerTbarClickEvent(args);
                     fontSizeSpanElem_1.textContent = args.item.text;
                     parent.updateFontSize(args.item.text);
                 }
@@ -25802,6 +25842,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             parent.element.querySelector('.e-template.e-pen-stroke-color').appendChild(parent.createElement('input', {
                 id: id + '_pen_stroke'
             }));
+            var presentVal = parent.activeObj.strokeSettings.strokeColor;
             var penColor = new ColorPicker({
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-pen-color',
@@ -25827,6 +25868,9 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }, '#' + id + '_penColorBtn');
             penColor.inline = true;
             penColor.value = penColor.getValue(parent.activeObj.strokeSettings.strokeColor, 'rgba');
+            if (penColor.value === 'null') {
+                penColor.value = presentVal;
+            }
             var obj = { tempFreeHandDrawEditingStyles: null };
             parent.notify('freehand-draw', { prop: 'getTempFreeHandDrawEditingStyles', value: { obj: obj } });
             var indexObj = { freehandSelectedIndex: null };
@@ -25843,6 +25887,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         }
     };
     ToolbarModule.prototype.createPenBtn = function (items) {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         var strokeWidthItems = [
@@ -25875,6 +25920,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                     args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: function (args) {
+                    _this.triggerTbarClickEvent(args);
                     spanElem_3.textContent = args.item.text;
                     parent.updatePenStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
@@ -26154,6 +26200,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         parent.element.querySelector('.e-stroke.e-template .e-dropdownbtn-preview').style.background = parent.frameObj.color;
     };
     ToolbarModule.prototype.createFrameSize = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -26184,6 +26231,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
                     gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
                     offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
@@ -26229,6 +26277,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameSizeBtn');
     };
     ToolbarModule.prototype.createFrameInset = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -26259,6 +26308,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
                     gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
                     offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
@@ -26304,6 +26354,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameInsetBtn');
     };
     ToolbarModule.prototype.createFrameOffset = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -26334,6 +26385,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
                     gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
                     offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
@@ -26379,6 +26431,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameOffsetBtn');
     };
     ToolbarModule.prototype.createFrameRadius = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -26410,6 +26463,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
                     gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
                     offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
@@ -26455,6 +26509,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameRadiusBtn');
     };
     ToolbarModule.prototype.createFrameAmount = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -26485,6 +26540,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
                     gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
                     offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
@@ -26530,6 +26586,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameAmountBtn');
     };
     ToolbarModule.prototype.createFrameBorder = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -26558,6 +26615,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 prevFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
                     gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
                     offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),