@syncfusion/ej2-image-editor 25.1.35 → 25.1.38

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) {
@@ -252,12 +252,6 @@ var ToolbarModule = /** @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;
@@ -279,9 +273,6 @@ var ToolbarModule = /** @class */ (function () {
             case 'refreshSlider':
                 this.refreshSlider();
                 break;
-            case 'renderSlider':
-                this.renderSlider(args.value['type']);
-                break;
             case 'getCurrAdjustmentValue':
                 parent.getCurrAdjustmentValue(args.value['type']);
                 break;
@@ -291,18 +282,6 @@ var ToolbarModule = /** @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;
@@ -353,7 +332,6 @@ var ToolbarModule = /** @class */ (function () {
     };
     ToolbarModule.prototype.reset = function () {
         var parent = this.parent;
-        this.defToolbarItems = [];
         this.toolbarHeight = 46;
         parent.prevCurrSelectionPoint = null;
         this.zoomBtnHold = null;
@@ -1144,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;
@@ -1233,6 +1215,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 parent.okBtn();
                 var isCropSelection = false;
                 var splitWords;
@@ -1253,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':
@@ -1260,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';
@@ -1269,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();
@@ -1380,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);
@@ -1390,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)) {
@@ -1414,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 = [
@@ -1432,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' });
@@ -1869,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) {
@@ -1907,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) {
@@ -1930,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 = [
@@ -1963,6 +1976,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('startArrow', args.item.id);
             }
@@ -1971,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 = [
@@ -2004,6 +2019,7 @@ var ToolbarModule = /** @class */ (function () {
                 }
             },
             select: function (args) {
+                _this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('endArrow', args.item.id);
             }
@@ -2202,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) {
@@ -2242,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);
@@ -2270,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);
                 }
@@ -2703,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',
@@ -2728,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 };
@@ -2744,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 = [
@@ -2776,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) {
@@ -3055,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 };
@@ -3085,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),
@@ -3130,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 };
@@ -3160,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),
@@ -3205,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 };
@@ -3235,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),
@@ -3280,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 };
@@ -3311,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),
@@ -3356,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 };
@@ -3386,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),
@@ -3431,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 };
@@ -3459,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),

package/styles/image-editor/_layout.scss

@@ -512,6 +512,9 @@
 
   .e-ie-finetune-slider-wrap {
     top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+    @if $skin-name == 'Material3' or $skin-name == 'tailwind' {
+      top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
+    }
   }
 
   .e-transparency-slider-wrap {

package/styles/image-editor/material3-dark.css

@@ -605,6 +605,7 @@
 
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {

package/styles/image-editor/material3.css

@@ -661,6 +661,7 @@
 
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {

package/styles/image-editor/tailwind-dark.css

@@ -536,6 +536,7 @@
 
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {

package/styles/image-editor/tailwind.css

@@ -536,6 +536,7 @@
 
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {

package/styles/material3-dark.css

@@ -605,6 +605,7 @@
 
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {

package/styles/material3.css

@@ -661,6 +661,7 @@
 
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {

package/styles/tailwind-dark.css

@@ -536,6 +536,7 @@
 
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {

package/styles/tailwind.css

@@ -536,6 +536,7 @@
 
 .e-ie-finetune-slider-wrap {
   top: calc(50% - 15px) !important; /* stylelint-disable-line declaration-no-important */
+  top: calc(50% - 14px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-transparency-slider-wrap {