@syncfusion/ej2-image-editor 25.1.37 → 25.1.39

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.1.37
+*  version : 25.1.39
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@25.1.35",
+  "_id": "@syncfusion/ej2-image-editor@25.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-5qgANXLk/5NEFF8XAN6BInARWPl05THFM9omABEmDd1S+LGIftOn17KlJVHymHA0wQM0sR3ySb1FGgunvOyfNA==",
+  "_integrity": "sha512-X2EocZP+w7YICz06hF1pi8Es3eRTIbYWVztXRVQZ49YCDZJ3E6t49d5q0oskE/0qHPuWZizMXjdG1m6YaSDALA==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-25.1.35.tgz",
-  "_shasum": "6f29e792a5be807112e90420e9d09ae40534ea77",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-25.1.38.tgz",
+  "_shasum": "c691770cca2b120b6933b6a59a64985a5f15ae2d",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -33,11 +33,11 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~25.1.35",
-    "@syncfusion/ej2-buttons": "~25.1.35",
-    "@syncfusion/ej2-inputs": "~25.1.37",
-    "@syncfusion/ej2-navigations": "~25.1.37",
-    "@syncfusion/ej2-popups": "~25.1.35",
-    "@syncfusion/ej2-splitbuttons": "~25.1.37"
+    "@syncfusion/ej2-buttons": "~25.1.39",
+    "@syncfusion/ej2-inputs": "~25.1.38",
+    "@syncfusion/ej2-navigations": "~25.1.39",
+    "@syncfusion/ej2-popups": "~25.1.39",
+    "@syncfusion/ej2-splitbuttons": "~25.1.38"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "25.1.37",
+  "version": "25.1.39",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/image-editor/action/freehand-draw.js

@@ -179,6 +179,9 @@ var FreehandDrawing = /** @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
+            case 'triggerShapeChanging':
+                this.triggerShapeChanging(args.value['shapeChangingArgs']);
+                break;
         }
     };
     FreehandDrawing.prototype.updateFhdPvtVar = function () {

package/src/image-editor/action/shape.js

@@ -2132,6 +2132,7 @@ var Shape = /** @class */ (function () {
         var shapeChangingArgs = { cancel: false, action: 'insert', previousShapeSettings: shapeSettings,
             currentShapeSettings: shapeSettings };
         parent.trigger('shapeChanging', shapeChangingArgs);
+        isSelect = isSelect ? isSelect : isSelected;
         this.drawShapeImageEvent(shapeChangingArgs, isSelect);
         if (parent.isPublicMethod && !isSelected) {
             parent.notify('undo-redo', { prop: 'updateUndoRedo', onPropertyChange: false });

package/src/image-editor/action/transform.js

@@ -78,7 +78,7 @@ var Transform = /** @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']);
@@ -1091,12 +1091,12 @@ var Transform = /** @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') {
@@ -1134,8 +1134,13 @@ var Transform = /** @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 };
@@ -1156,8 +1161,13 @@ var Transform = /** @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 };
@@ -1444,7 +1454,7 @@ var Transform = /** @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) {
@@ -1454,6 +1464,18 @@ var Transform = /** @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.panMove)) {
+                        this.panMove = { x: x, y: y };
+                    }
+                    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;
@@ -1768,6 +1790,9 @@ var Transform = /** @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;
@@ -1804,7 +1829,7 @@ var Transform = /** @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;
@@ -1814,6 +1839,10 @@ var Transform = /** @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();

package/src/image-editor/base/image-editor-model.d.ts

@@ -282,14 +282,19 @@ export interface ImageEditorModel extends ComponentModel{
      * If the property is defined as empty collection, the toolbar will not be rendered.
      * The preconfigured toolbar commands are
      * - Crop: helps to crop an image as ellipse, square, various ratio aspects, custom selection with resize, drag and drop.
+     * - Straightening: helps to rotate an image by a specified angle.
      * - Annotate: help to insert a shape on image that supports rectangle, ellipse, line, arrow, path, text, image and freehand drawing with resize, drag and drop, and customize its appearance.
      * - Transform: helps to rotate and flip an image.
      * - Finetunes: helps to perform adjustments on an image.
      * - Filters: helps to perform predefined color filters.
+     * - Frame: helps to add decorative borders or frames around images.
+     * - Resize: helps to modify the dimensions of an image.
      * - ZoomIn: performs zoom-in an image.
      * - ZoomOut: performs zoom-out an image.
      * - Save: save the modified image.
      * - Open: open an image to perform editing.
+     * - Undo: helps to revert the last action.
+     * - Redo: helps to redo the last action.
      * - Reset: reset the modification and restore the original image.
      *
      * {% codeBlock src='image-editor/toolbar/index.md' %}{% endcodeBlock %}

package/src/image-editor/base/image-editor.d.ts

@@ -428,14 +428,19 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * If the property is defined as empty collection, the toolbar will not be rendered.
      * The preconfigured toolbar commands are
      * - Crop: helps to crop an image as ellipse, square, various ratio aspects, custom selection with resize, drag and drop.
+     * - Straightening: helps to rotate an image by a specified angle.
      * - Annotate: help to insert a shape on image that supports rectangle, ellipse, line, arrow, path, text, image and freehand drawing with resize, drag and drop, and customize its appearance.
      * - Transform: helps to rotate and flip an image.
      * - Finetunes: helps to perform adjustments on an image.
      * - Filters: helps to perform predefined color filters.
+     * - Frame: helps to add decorative borders or frames around images.
+     * - Resize: helps to modify the dimensions of an image.
      * - ZoomIn: performs zoom-in an image.
      * - ZoomOut: performs zoom-out an image.
      * - Save: save the modified image.
      * - Open: open an image to perform editing.
+     * - Undo: helps to revert the last action.
+     * - Redo: helps to redo the last action.
      * - Reset: reset the modification and restore the original image.
      *
      * {% codeBlock src='image-editor/toolbar/index.md' %}{% endcodeBlock %}
@@ -1007,13 +1012,15 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * 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}.
      */
-    pan(value: boolean): void;
+    pan(value: boolean, x?: number, y?: number): void;
     /**
      * Zoom in or out on a point in the image editor.
      *

package/src/image-editor/base/image-editor.js

@@ -1130,14 +1130,16 @@ var ImageEditor = /** @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.
@@ -2119,7 +2121,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.notify('toolbar', { prop: 'destroy-qa-toolbar' });
             this.notify('undo-redo', { prop: 'updateCurrUrc', value: { type: 'ok' } });
         }
-        else if ((this.activeObj.activePoint.width !== 0 && this.activeObj.activePoint.height !== 0) ||
+        else if ((this.activeObj.activePoint.width !== 0 || this.activeObj.activePoint.height !== 0) ||
             (this.activeObj.shape === 'path' && this.activeObj.pointColl.length > 0)) {
             if (this.activeObj.shape === 'image') {
                 this.notify('draw', { prop: 'setImageApply', onPropertyChange: false, value: { bool: true } });
@@ -2280,6 +2282,7 @@ var ImageEditor = /** @class */ (function (_super) {
      * An string which returns the SelectionType.
      */
     ImageEditor.prototype.getSelectionType = function (type) {
+        type = type === 'crop-custom' ? 'CropCustom' : type;
         var typeToSelectionType = { 'CropCustom': 'Custom', 'CropSquare': 'Square', 'CropCircle': 'Circle',
             'Crop3:2': '3:2', 'Crop4:3': '4:3', 'Crop5:4': '5:4', 'Crop7:5': '7:5', 'Crop16:9': '16:9',
             'Crop2:3': '2:3', 'Crop3:4': '3:4', 'Crop4:5': '4:5', 'Crop5:7': '5:7', 'Crop9:16': '9:16' };

package/src/image-editor/renderer/toolbar.d.ts

@@ -56,6 +56,7 @@ export declare class ToolbarModule {
     private enableDisableTbrBtn;
     private createLeftToolbarControls;
     private fileSelect;
+    private triggerTbarClickEvent;
     private renderAnnotationBtn;
     private renderStraightenSlider;
     private renderCropBtn;

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

@@ -4,7 +4,7 @@ import { NumericTextBox } from '@syncfusion/ej2-inputs';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { ColorPicker, Uploader, Slider } from '@syncfusion/ej2-inputs';
-import { ZoomTrigger } from '../index';
+import { ZoomTrigger, ShapeType } from '../index';
 import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 var ToolbarModule = /** @class */ (function () {
     function ToolbarModule(parent) {
@@ -1122,6 +1122,10 @@ var ToolbarModule = /** @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;
@@ -1211,6 +1215,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 parent.okBtn();
                 var isCropSelection = false;
                 var splitWords;
@@ -1231,6 +1236,9 @@ var ToolbarModule = /** @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':
@@ -1238,6 +1246,12 @@ var ToolbarModule = /** @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';
@@ -1247,12 +1261,22 @@ var ToolbarModule = /** @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();
@@ -1358,6 +1382,7 @@ var ToolbarModule = /** @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);
@@ -1368,6 +1393,7 @@ var ToolbarModule = /** @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)) {
@@ -1392,12 +1418,17 @@ var ToolbarModule = /** @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 = [
@@ -1410,6 +1441,7 @@ var ToolbarModule = /** @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' });
@@ -1847,6 +1879,7 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.createShapeBtn = function (items) {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         if (items.indexOf('strokeWidth') > -1) {
@@ -1885,6 +1918,7 @@ var ToolbarModule = /** @class */ (function () {
                     }
                 },
                 select: function (args) {
+                    _this.triggerTbarClickEvent(args);
                     spanElem_1.textContent = args.item.text;
                     parent.updateStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
@@ -1908,6 +1942,7 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.createStartBtn = function () {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         var strokeWidthItems = [
@@ -1941,6 +1976,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('startArrow', args.item.id);
             }
@@ -1949,6 +1985,7 @@ var ToolbarModule = /** @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_startBtn');
     };
     ToolbarModule.prototype.createEndBtn = function () {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         var strokeWidthItems = [
@@ -1982,6 +2019,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('endArrow', args.item.id);
             }
@@ -2180,6 +2218,7 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.createTextBtn = function (items) {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         if (items.indexOf('fontFamily') > -1) {
@@ -2220,6 +2259,7 @@ var ToolbarModule = /** @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);
@@ -2248,6 +2288,7 @@ var ToolbarModule = /** @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);
                 }
@@ -2681,6 +2722,7 @@ var ToolbarModule = /** @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',
@@ -2706,6 +2748,9 @@ var ToolbarModule = /** @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 };
@@ -2722,6 +2767,7 @@ var ToolbarModule = /** @class */ (function () {
         }
     };
     ToolbarModule.prototype.createPenBtn = function (items) {
+        var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
         var strokeWidthItems = [
@@ -2754,6 +2800,7 @@ var ToolbarModule = /** @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) {
@@ -3033,6 +3080,7 @@ var ToolbarModule = /** @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 };
@@ -3063,6 +3111,7 @@ var ToolbarModule = /** @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),
@@ -3108,6 +3157,7 @@ var ToolbarModule = /** @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameSizeBtn');
     };
     ToolbarModule.prototype.createFrameInset = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -3138,6 +3188,7 @@ var ToolbarModule = /** @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),
@@ -3183,6 +3234,7 @@ var ToolbarModule = /** @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameInsetBtn');
     };
     ToolbarModule.prototype.createFrameOffset = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -3213,6 +3265,7 @@ var ToolbarModule = /** @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),
@@ -3258,6 +3311,7 @@ var ToolbarModule = /** @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameOffsetBtn');
     };
     ToolbarModule.prototype.createFrameRadius = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -3289,6 +3343,7 @@ var ToolbarModule = /** @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),
@@ -3334,6 +3389,7 @@ var ToolbarModule = /** @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameRadiusBtn');
     };
     ToolbarModule.prototype.createFrameAmount = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -3364,6 +3420,7 @@ var ToolbarModule = /** @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),
@@ -3409,6 +3466,7 @@ var ToolbarModule = /** @class */ (function () {
         drpDownBtn.appendTo('#' + id + '_frameAmountBtn');
     };
     ToolbarModule.prototype.createFrameBorder = function () {
+        var _this = this;
         var parent = this.parent;
         var prevFrameSettings;
         var obj = { frameChangeEventArgs: null };
@@ -3437,6 +3495,7 @@ var ToolbarModule = /** @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),