@syncfusion/ej2-image-editor 24.1.41 → 24.1.43

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.1.41
+*  version : 24.1.43
 *  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@23.1.39",
+  "_id": "@syncfusion/ej2-image-editor@24.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-A4Of61l7lLJjbGwlAwN3KLeki8L3Bu7t1IK1qvQgfqxYobdIx3YFRnZFw3U1X+kGgCd2HGLfYkhdutrDIUt2GQ==",
+  "_integrity": "sha512-MS+zJMwrlarZxJ7zqkpd8RYmmZ1SWlmDSXcAqKN67/TQ0jRmkdWgfdoSQwCbD//aS9ggC+CtUa5v5kkTKONHVQ==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-image-editor/-/ej2-image-editor-23.1.39.tgz",
-  "_shasum": "d5a6acb85f2cb3d10a88ae4581e14b440fb04e06",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-24.1.41.tgz",
+  "_shasum": "bfa6dc433fa0e25027f2b3e3c3ea78e138439793",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -32,7 +32,7 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.1.41",
+    "@syncfusion/ej2-base": "~24.1.42",
     "@syncfusion/ej2-buttons": "~24.1.41",
     "@syncfusion/ej2-inputs": "~24.1.41",
     "@syncfusion/ej2-navigations": "~24.1.41",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "24.1.41",
+  "version": "24.1.43",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -533,7 +533,7 @@ var Draw = /** @class */ (function () {
         var width;
         var height;
         var canvasWidth = parent.lowerCanvas.clientWidth;
-        var canvasHeight = parent.lowerCanvas.clientHeight;
+        var canvasHeight = parent.lowerCanvas.clientHeight + 1;
         var _a = parent.img, destLeft = _a.destLeft, destTop = _a.destTop, destWidth = _a.destWidth, destHeight = _a.destHeight;
         if (parent.transform.zoomFactor > 0 && this.currSelPoint) {
             var activeObj = extend({}, parent.activeObj, {}, true);
@@ -2409,6 +2409,7 @@ var Draw = /** @class */ (function () {
             hideSpinner(parent.element);
             parent.element.style.opacity = '1';
             proxy.updateBaseImgCanvas();
+            var fileOpened = { fileName: _this.fileName, fileType: _this.fileType, isValidImage: true };
             proxy.updateCanvas();
             if (parent.currObjType.isUndoZoom) {
                 parent.currObjType.isUndoZoom = false;
@@ -2438,6 +2439,14 @@ var Draw = /** @class */ (function () {
                         - parent.toolbarHeight * 2) - 1 + 'px';
                 }
             }
+            if (parent.isImageLoaded && parent.element.style.opacity !== '0.5') {
+                if (isBlazor() && parent.events && parent.events.fileOpened.hasDelegate === true) {
+                    parent.dotNetRef.invokeMethodAsync('FileOpenEventAsync', 'FileOpened', fileOpened);
+                }
+                else {
+                    parent.trigger('fileOpened', fileOpened);
+                }
+            }
         };
         parent.baseImg.onerror = function () {
             hideSpinner(parent.element);
@@ -2463,7 +2472,6 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.updateCanvas = function () {
         var parent = this.parent;
-        var fileOpened = { fileName: this.fileName, fileType: this.fileType, isValidImage: true };
         parent.img.srcWidth = parent.baseImgCanvas.width;
         parent.img.srcHeight = parent.baseImgCanvas.height;
         var obj = { width: 0, height: 0 };
@@ -2499,14 +2507,6 @@ var Draw = /** @class */ (function () {
         if (parent.disabled) {
             parent.element.setAttribute('class', 'e-disabled');
         }
-        if (parent.isImageLoaded && parent.element.style.opacity !== '0.5') {
-            if (isBlazor() && parent.events && parent.events.fileOpened.hasDelegate === true) {
-                parent.dotNetRef.invokeMethodAsync('FileOpenEventAsync', 'FileOpened', fileOpened);
-            }
-            else {
-                parent.trigger('fileOpened', fileOpened);
-            }
-        }
         if (parent.zoomSettings.zoomFactor !== 1 || parent.zoomSettings.zoomPoint) {
             parent.zoom(parent.zoomSettings.zoomFactor, parent.zoomSettings.zoomPoint);
         }

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

@@ -1878,12 +1878,14 @@ var Shape = /** @class */ (function () {
                 return;
             }
             else if (e.type === 'dblclick') {
+                var activeObj = extend({}, parent.activeObj, {}, true);
                 var objColl = extend([], parent.objColl, [], true);
                 var obj = { bool: null };
                 parent.notify('selection', { prop: 'findTargetObj', onPropertyChange: false,
                     value: { x: e.clientX, y: e.clientY, isCrop: false, obj: obj } });
                 parent.objColl = objColl;
                 if (!obj['bool'] || parent.activeObj.shape !== 'text') {
+                    parent.activeObj = extend({}, activeObj, {}, true);
                     return;
                 }
             }

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

@@ -2408,12 +2408,16 @@ var Transform = /** @class */ (function () {
     };
     Transform.prototype.straightenImage = function (degree) {
         var parent = this.parent;
+        if (parent.toolbar && parent.toolbar.length === 0) {
+            parent.notify('draw', { prop: 'select', onPropertyChange: false,
+                value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
+        }
         if (isBlazor()) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             parent.performCropClick();
         }
         else {
-            parent.notify('toolbar', { prop: 'performCropTransformClick' });
+            parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: null } });
         }
         parent.setStraighten(degree, true);
         if ((isBlazor() && parent.events && parent.events.straightening.hasDelegate === false) || !isBlazor()) {

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

@@ -1145,6 +1145,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      */
     ImageEditor.prototype.select = function (type, startX, startY, width, height) {
+        this.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + type } });
         this.notify('draw', { prop: 'select', onPropertyChange: false,
             value: { type: type, startX: startX, startY: startY, width: width, height: height } });
         this.notify('draw', { prop: 'select', onPropertyChange: false,
@@ -3335,7 +3336,8 @@ var ImageEditor = /** @class */ (function (_super) {
         this.initializeThemeColl();
     };
     ImageEditor.prototype.initializeZoomSettings = function () {
-        if (isNullOrUndefined(this.zoomSettings.zoomTrigger)) {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        if (isNullOrUndefined(this.zoomSettings.zoomTrigger) || this.zoomSettings.zoomTrigger === 0) {
             this.zoomSettings.zoomTrigger = (ZoomTrigger.MouseWheel | ZoomTrigger.Pinch | ZoomTrigger.Toolbar | ZoomTrigger.Commands);
         }
         if (isNullOrUndefined(this.selectionSettings.strokeColor)) {

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

@@ -326,7 +326,7 @@ var ToolbarModule = /** @class */ (function () {
                 this.frameToolbarClick();
                 break;
             case 'performCropTransformClick':
-                this.performCropTransformClick();
+                this.performCropTransformClick(args.value['shape']);
                 break;
             case 'duplicateShape':
                 this.duplicateShape(args.value['isPreventUndoRedo'], true);
@@ -520,6 +520,9 @@ var ToolbarModule = /** @class */ (function () {
             else {
                 this.defToolbarItems = leftItem.concat(mainItem, rightItem, zoomItem);
             }
+            var args = { toolbarType: 'main', toolbarItems: this.defToolbarItems };
+            parent.trigger('toolbarUpdating', args);
+            this.defToolbarItems = args.toolbarItems;
             var toolbarObj = new Toolbar({
                 width: '100%',
                 items: this.defToolbarItems,
@@ -554,6 +557,9 @@ var ToolbarModule = /** @class */ (function () {
         var id = parent.element.id;
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
             var items = this.getMainToolbarItem();
+            var args = { toolbarType: 'bottom-toolbar', toolbarItems: items };
+            parent.trigger('toolbarUpdating', args);
+            items = args.toolbarItems;
             var toolbarObj = new Toolbar({ items: items, width: '100%',
                 created: function () {
                     _this.renderAnnotationBtn();
@@ -978,6 +984,9 @@ var ToolbarModule = /** @class */ (function () {
         else {
             this.defToolbarItems = leftItem.concat(zoomItem, mainItem, rightItem);
         }
+        var args = { toolbarType: 'resize', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -1279,7 +1288,7 @@ var ToolbarModule = /** @class */ (function () {
             }
         }
     };
-    ToolbarModule.prototype.renderCropBtn = function () {
+    ToolbarModule.prototype.renderCropBtn = function (shapeString) {
         var _this = this;
         var parent = this.parent;
         var items = [];
@@ -1316,7 +1325,11 @@ var ToolbarModule = /** @class */ (function () {
         }
         var iconCss;
         var shape;
-        if (parent.activeObj.shape) {
+        if (shapeString) {
+            iconCss = this.getCurrentShapeIcon(shapeString);
+            shape = shapeString;
+        }
+        else if (parent.activeObj.shape) {
             iconCss = this.getCurrentShapeIcon(parent.activeObj.shape);
             shape = parent.activeObj.shape;
         }
@@ -1526,7 +1539,7 @@ var ToolbarModule = /** @class */ (function () {
         }
         return toolbarItems;
     };
-    ToolbarModule.prototype.initCropTransformToolbar = function () {
+    ToolbarModule.prototype.initCropTransformToolbar = function (shape) {
         var _this = this;
         var parent = this.parent;
         var id = parent.element.id;
@@ -1540,12 +1553,15 @@ var ToolbarModule = /** @class */ (function () {
         else {
             this.defToolbarItems = leftItem.concat(zoomItem, mainItem, rightItem);
         }
+        var args = { toolbarType: 'crop-transform', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
             clicked: this.defToolbarClicked.bind(this),
             created: function () {
-                _this.renderCropBtn();
+                _this.renderCropBtn(shape);
                 _this.renderStraightenSlider();
                 _this.wireZoomBtnEvents();
                 if (!Browser.isDevice) {
@@ -1587,8 +1603,6 @@ var ToolbarModule = /** @class */ (function () {
             && slider && slider.parentElement.scrollHeight > this.toolbarHeight) {
             this.toolbarHeight = parent.toolbarHeight = slider.parentElement.scrollHeight;
         }
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        toolbar.refreshOverflow();
         this.enableDisableTbrBtn();
         parent.notify('transform', { prop: 'disableZoomOutBtn', value: { isZoomOut: true } });
     };
@@ -1648,6 +1662,10 @@ var ToolbarModule = /** @class */ (function () {
         else {
             this.defToolbarItems = leftItem.concat(zoomItem, mainItem, rightItem);
         }
+        var args = { toolbarType: parent.activeObj.shape ? parent.activeObj.shape : 'shapes',
+            toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -2054,6 +2072,9 @@ var ToolbarModule = /** @class */ (function () {
         else {
             this.defToolbarItems = leftItem.concat(zoomItem, mainItem, rightItem);
         }
+        var args = { toolbarType: 'text', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -2178,8 +2199,10 @@ var ToolbarModule = /** @class */ (function () {
                     else {
                         fontFamily = parent.activeObj.textSettings.fontFamily;
                     }
-                    args.element.querySelector('[id *= ' + '"' + fontFamily.toLowerCase()
-                        + '"' + ']').classList.add('e-selected-btn');
+                    var elem = args.element.querySelector('[id *= ' + '"' + fontFamily.toLowerCase() + '"' + ']');
+                    if (elem) {
+                        elem.classList.add('e-selected-btn');
+                    }
                 },
                 select: function (args) {
                     spanElem_2.textContent = args.item.text;
@@ -2217,14 +2240,13 @@ var ToolbarModule = /** @class */ (function () {
             fontSizeBtn_1.appendTo('#' + id + '_fontSizeBtn');
         }
     };
-    ToolbarModule.prototype.refreshToolbar = function (type, isApplyBtn, isCropping, isZooming, cType) {
+    ToolbarModule.prototype.refreshToolbar = function (type, isApplyBtn, isCropping, isZooming, cType, shape) {
         var parent = this.parent;
         var id = parent.element.id;
         if (!parent.isImageLoaded || parent.isCropToolbar) {
             return;
         }
-        var item = type === 'shapes' && parent.activeObj.shape ? parent.activeObj.shape : type;
-        var args = { toolbarType: item };
+        var args = {};
         var aspectIcon;
         var nonAspectIcon;
         if (type !== 'filter' && type !== 'color') {
@@ -2290,7 +2312,6 @@ var ToolbarModule = /** @class */ (function () {
                 else {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'duplicate', 'remove'];
                 }
-                parent.trigger('toolbarUpdating', args);
                 this.initShapesToolbarItem(args.toolbarItems);
                 break;
             case 'text':
@@ -2298,7 +2319,6 @@ var ToolbarModule = /** @class */ (function () {
                     this.initMainToolbar(false, true, true);
                 }
                 args.toolbarItems = ['fontFamily', 'fontSize', 'fontColor', 'bold', 'italic', 'duplicate', 'remove', 'text'];
-                parent.trigger('toolbarUpdating', args);
                 this.initTextToolbarItem(args.toolbarItems);
                 break;
             case 'pen':
@@ -2306,7 +2326,6 @@ var ToolbarModule = /** @class */ (function () {
                     this.initMainToolbar(false, true, true);
                 }
                 args.toolbarItems = ['strokeColor', 'strokeWidth', 'remove', 'transparency'];
-                parent.trigger('toolbarUpdating', args);
                 this.initPenToolbarItem(args.toolbarItems);
                 break;
             case 'adjustment':
@@ -2348,7 +2367,7 @@ var ToolbarModule = /** @class */ (function () {
                     this.initMainToolbar(false, true, true);
                 }
                 parent.updateCropTransformItems();
-                this.initCropTransformToolbar();
+                this.initCropTransformToolbar(shape);
                 if (Browser.isDevice) {
                     this.updateContextualToolbar('color', 'straighten', true);
                 }
@@ -2375,7 +2394,7 @@ var ToolbarModule = /** @class */ (function () {
         this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
     };
-    ToolbarModule.prototype.performCropTransformClick = function () {
+    ToolbarModule.prototype.performCropTransformClick = function (shape) {
         var parent = this.parent;
         parent.notify('draw', { prop: 'setTempStraightenZoomDeg' });
         parent.tempStraighten = parent.transform.straighten;
@@ -2383,7 +2402,7 @@ var ToolbarModule = /** @class */ (function () {
             parent.okBtn();
         }
         parent.isStraightening = true;
-        this.refreshToolbar('croptransform');
+        this.refreshToolbar('croptransform', null, null, null, null, shape);
         parent.notify('draw', { prop: 'setDestForStraighten' });
         parent.notify('draw', { prop: 'setTempDestForStraighten' });
     };
@@ -2576,6 +2595,9 @@ var ToolbarModule = /** @class */ (function () {
         else {
             this.defToolbarItems = leftItem.concat(zoomItem, mainItem, rightItem);
         }
+        var args = { toolbarType: 'pen', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -2744,6 +2766,9 @@ var ToolbarModule = /** @class */ (function () {
         else {
             this.defToolbarItems = leftItem.concat(zoomItem, mainItem, rightItem);
         }
+        var args = { toolbarType: 'finetune', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         var toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -2795,6 +2820,9 @@ var ToolbarModule = /** @class */ (function () {
             styles: 'position: absolute'
         }));
         var mainItem = this.getFrameToolbarItem();
+        var args = { toolbarType: 'frame', toolbarItems: mainItem };
+        parent.trigger('toolbarUpdating', args);
+        mainItem = args.toolbarItems;
         var toolbar = new Toolbar({
             width: '100%',
             items: mainItem,
@@ -3420,6 +3448,9 @@ var ToolbarModule = /** @class */ (function () {
         var parent = this.parent;
         var id = parent.element.id;
         var mainItem = this.getFilterToolbarItem();
+        var args = { toolbarType: 'filter', toolbarItems: mainItem };
+        parent.trigger('toolbarUpdating', args);
+        mainItem = args.toolbarItems;
         if (document.querySelector('#' + id + '_contextualToolbar').classList.contains('e-control')) {
             getComponent(document.getElementById(id + '_contextualToolbar'), 'toolbar').destroy();
         }