@syncfusion/ej2-image-editor 24.1.41 → 24.1.44

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

@@ -1096,7 +1096,7 @@ class Draw {
                 this.updateCanvas();
                 break;
             case 'performCancel':
-                this.performCancel(args.value['isContextualToolbar']);
+                this.performCancel(args.value['isContextualToolbar'], args.value['isUndoRedo']);
                 break;
             case 'updateFlipPan':
                 this.updateFlipPan(args.value['tempSelectionObj']);
@@ -1547,7 +1547,7 @@ class Draw {
         let width;
         let height;
         const canvasWidth = parent.lowerCanvas.clientWidth;
-        const canvasHeight = parent.lowerCanvas.clientHeight;
+        const canvasHeight = parent.lowerCanvas.clientHeight + 1;
         const { destLeft, destTop, destWidth, destHeight } = parent.img;
         if (parent.transform.zoomFactor > 0 && this.currSelPoint) {
             const activeObj = extend({}, parent.activeObj, {}, true);
@@ -1588,13 +1588,11 @@ class Draw {
             if (destTop < 0) {
                 height += destTop;
             }
-            if (parent.currObjType.shape.toLowerCase() !== 'crop-square' && parent.currObjType.shape.toLowerCase() !== 'crop-circle') {
-                if (destLeft + destWidth > parent.lowerCanvas.width) {
-                    width -= (destLeft + destWidth - parent.lowerCanvas.width);
-                }
-                if (destTop + destHeight > parent.lowerCanvas.height) {
-                    height -= (destTop + destHeight - parent.lowerCanvas.height);
-                }
+            if (destLeft + destWidth > parent.lowerCanvas.width) {
+                width -= (destLeft + destWidth - parent.lowerCanvas.width);
+            }
+            if (destTop + destHeight > parent.lowerCanvas.height) {
+                height -= (destTop + destHeight - parent.lowerCanvas.height);
             }
         }
         switch (parent.currObjType.shape.toLowerCase()) {
@@ -3216,7 +3214,7 @@ class Draw {
                 parent.img.destHeight = maxDimension.width;
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.height) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width + 1) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width) / 2;
             parent.img.destWidth = maxDimension.height;
             parent.img.destHeight = maxDimension.width;
         }
@@ -3232,7 +3230,12 @@ class Draw {
                 parent.img.destHeight = maxDimension.height;
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            if (degree === 0) {
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            }
+            else {
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+            }
             parent.img.destWidth = maxDimension.width;
             parent.img.destHeight = maxDimension.height;
         }
@@ -3422,6 +3425,7 @@ class Draw {
             hideSpinner(parent.element);
             parent.element.style.opacity = '1';
             proxy.updateBaseImgCanvas();
+            const fileOpened = { fileName: this.fileName, fileType: this.fileType, isValidImage: true };
             proxy.updateCanvas();
             if (parent.currObjType.isUndoZoom) {
                 parent.currObjType.isUndoZoom = false;
@@ -3451,6 +3455,14 @@ class Draw {
                         - 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 = () => {
             hideSpinner(parent.element);
@@ -3476,7 +3488,6 @@ class Draw {
     }
     updateCanvas() {
         const parent = this.parent;
-        const fileOpened = { fileName: this.fileName, fileType: this.fileType, isValidImage: true };
         parent.img.srcWidth = parent.baseImgCanvas.width;
         parent.img.srcHeight = parent.baseImgCanvas.height;
         const obj = { width: 0, height: 0 };
@@ -3512,14 +3523,6 @@ class Draw {
         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);
         }
@@ -3546,14 +3549,14 @@ class Draw {
             parent.cancelCropSelection = null;
         }
     }
-    performCancel(isContextualToolbar) {
+    performCancel(isContextualToolbar, isUndoRedo) {
         const parent = this.parent;
         const straightenObj = { bool: parent.isStraightening };
         isContextualToolbar = isContextualToolbar ? isContextualToolbar : false;
         const obj = { bool: false };
         parent.allowDownScale = true;
         parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
-        if (JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
+        if (isNullOrUndefined(isUndoRedo) && JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
             extend(parent.frameObj, parent.tempFrameObj);
             this.renderImage(null, null, true);
         }
@@ -4316,16 +4319,16 @@ class Draw {
     setClientTransDim(isPreventDimension) {
         const parent = this.parent;
         if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
-            parent.img.destLeft = (parent.lowerCanvas.width - parent.img.destHeight) / 2;
-            parent.img.destTop = (parent.lowerCanvas.height - parent.img.destWidth) / 2;
+            parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destHeight) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destWidth + 1) / 2;
             const temp = parent.img.destWidth;
             parent.img.destWidth = parent.img.destHeight;
             parent.img.destHeight = temp;
         }
         else {
             if (isNullOrUndefined(isPreventDimension)) {
-                parent.img.destLeft = (parent.lowerCanvas.width - parent.img.destWidth) / 2;
-                parent.img.destTop = (parent.lowerCanvas.height - parent.img.destHeight) / 2;
+                parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destWidth) / 2;
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destHeight + 1) / 2;
             }
         }
     }
@@ -12613,7 +12616,15 @@ class Selection {
                     this.getCurrentFlipState();
                 }
                 else {
+                    const totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, {}, true);
+                    const destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
+                        height: parent.img.destHeight };
                     parent.notify('draw', { prop: 'callUpdateCurrTransState', onPropertyChange: false });
+                    parent.panPoint.totalPannedInternalPoint = totalPannedInternalPoint;
+                    parent.img.destLeft = destPoints.startX;
+                    parent.img.destTop = destPoints.startY;
+                    parent.img.destWidth = destPoints.width;
+                    parent.img.destHeight = destPoints.height;
                     parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
                         value: { context: this.lowerContext, points: null } });
                 }
@@ -15130,12 +15141,14 @@ class Shape {
                 return;
             }
             else if (e.type === 'dblclick') {
+                const activeObj = extend({}, parent.activeObj, {}, true);
                 const objColl = extend([], parent.objColl, [], true);
                 const 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;
                 }
             }
@@ -17812,11 +17825,11 @@ class Transform {
             if (parent.img.destTop > 0) {
                 parent.img.destTop = 0;
             }
-            if (parent.img.destLeft + maxDimension.width < parent.lowerCanvas.width) {
-                parent.img.destLeft = parent.lowerCanvas.width - parent.img.destWidth;
+            if (parent.img.destLeft + maxDimension.width < parent.lowerCanvas.clientWidth) {
+                parent.img.destLeft = parent.lowerCanvas.clientWidth - parent.img.destWidth;
             }
-            if (parent.img.destTop + maxDimension.height < parent.lowerCanvas.height) {
-                parent.img.destTop = parent.lowerCanvas.height - parent.img.destHeight;
+            if (parent.img.destTop + maxDimension.height < parent.lowerCanvas.clientHeight) {
+                parent.img.destTop = parent.lowerCanvas.clientHeight - parent.img.destHeight;
             }
         }
         return maxDimension;
@@ -19028,12 +19041,16 @@ class Transform {
     }
     straightenImage(degree) {
         const 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()) {
@@ -19425,7 +19442,7 @@ class UndoRedo {
                         this.tempCurrSelPoint = extend({}, parent.currSelectionPoint, {}, true);
                         parent.currSelectionPoint = null;
                     }
-                    parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                    parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null, isUndoRedo: true } });
                     parent.currObjType.isActiveObj = false;
                     if (parent.transform.straighten !== 0) {
                         parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
@@ -19988,6 +20005,16 @@ class UndoRedo {
         this.parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: { obj: arrowObj } });
         const tempArrowObj = extend({}, arrowObj['arrowDimension'], {}, true);
         if (parent.transform.zoomFactor > 0 && (obj.length > 0 || point.length > 0)) {
+            if (obj.length > 0) {
+                for (let i = 0; i < obj.length; i++) {
+                    if (obj[i].currIndex) {
+                        continue;
+                    }
+                    else {
+                        obj[i].currIndex = 'shape_' + (i + 1);
+                    }
+                }
+            }
             parent.objColl = obj;
             parent.pointColl = point;
             const isUndoRedo = parent.isUndoRedo;
@@ -21170,6 +21197,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      *
      */
     select(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,
@@ -23359,7 +23387,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.initializeThemeColl();
     }
     initializeZoomSettings() {
-        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)) {
@@ -24151,7 +24180,7 @@ class ToolbarModule {
                 this.frameToolbarClick();
                 break;
             case 'performCropTransformClick':
-                this.performCropTransformClick();
+                this.performCropTransformClick(args.value['shape']);
                 break;
             case 'duplicateShape':
                 this.duplicateShape(args.value['isPreventUndoRedo'], true);
@@ -24343,6 +24372,9 @@ class ToolbarModule {
             else {
                 this.defToolbarItems = [...leftItem, ...mainItem, ...rightItem, ...zoomItem];
             }
+            const args = { toolbarType: 'main', toolbarItems: this.defToolbarItems };
+            parent.trigger('toolbarUpdating', args);
+            this.defToolbarItems = args.toolbarItems;
             const toolbarObj = new Toolbar({
                 width: '100%',
                 items: this.defToolbarItems,
@@ -24375,7 +24407,10 @@ class ToolbarModule {
         const parent = this.parent;
         const id = parent.element.id;
         if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.length > 0)) {
-            const items = this.getMainToolbarItem();
+            let items = this.getMainToolbarItem();
+            const args = { toolbarType: 'bottom-toolbar', toolbarItems: items };
+            parent.trigger('toolbarUpdating', args);
+            items = args.toolbarItems;
             const toolbarObj = new Toolbar({ items: items, width: '100%',
                 created: () => {
                     this.renderAnnotationBtn();
@@ -24799,6 +24834,9 @@ class ToolbarModule {
         else {
             this.defToolbarItems = [...leftItem, ...zoomItem, ...mainItem, ...rightItem];
         }
+        const args = { toolbarType: 'resize', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         const toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -25099,7 +25137,7 @@ class ToolbarModule {
             }
         }
     }
-    renderCropBtn() {
+    renderCropBtn(shapeString) {
         const parent = this.parent;
         const items = [];
         let isCustomized = false;
@@ -25135,7 +25173,11 @@ class ToolbarModule {
         }
         let iconCss;
         let 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;
         }
@@ -25345,7 +25387,7 @@ class ToolbarModule {
         }
         return toolbarItems;
     }
-    initCropTransformToolbar() {
+    initCropTransformToolbar(shape) {
         const parent = this.parent;
         const id = parent.element.id;
         const leftItem = this.getLeftToolbarItem();
@@ -25358,12 +25400,15 @@ class ToolbarModule {
         else {
             this.defToolbarItems = [...leftItem, ...zoomItem, ...mainItem, ...rightItem];
         }
+        const args = { toolbarType: 'crop-transform', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         const toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
             clicked: this.defToolbarClicked.bind(this),
             created: () => {
-                this.renderCropBtn();
+                this.renderCropBtn(shape);
                 this.renderStraightenSlider();
                 this.wireZoomBtnEvents();
                 if (!Browser.isDevice) {
@@ -25405,8 +25450,6 @@ class ToolbarModule {
             && 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 } });
     }
@@ -25465,6 +25508,10 @@ class ToolbarModule {
         else {
             this.defToolbarItems = [...leftItem, ...zoomItem, ...mainItem, ...rightItem];
         }
+        const args = { toolbarType: parent.activeObj.shape ? parent.activeObj.shape : 'shapes',
+            toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         const toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -25869,6 +25916,9 @@ class ToolbarModule {
         else {
             this.defToolbarItems = [...leftItem, ...zoomItem, ...mainItem, ...rightItem];
         }
+        const args = { toolbarType: 'text', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         const toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -25992,8 +26042,10 @@ class ToolbarModule {
                     else {
                         fontFamily = parent.activeObj.textSettings.fontFamily;
                     }
-                    args.element.querySelector('[id *= ' + '"' + fontFamily.toLowerCase()
-                        + '"' + ']').classList.add('e-selected-btn');
+                    const elem = args.element.querySelector('[id *= ' + '"' + fontFamily.toLowerCase() + '"' + ']');
+                    if (elem) {
+                        elem.classList.add('e-selected-btn');
+                    }
                 },
                 select: (args) => {
                     spanElem.textContent = args.item.text;
@@ -26031,14 +26083,13 @@ class ToolbarModule {
             fontSizeBtn.appendTo('#' + id + '_fontSizeBtn');
         }
     }
-    refreshToolbar(type, isApplyBtn, isCropping, isZooming, cType) {
+    refreshToolbar(type, isApplyBtn, isCropping, isZooming, cType, shape) {
         const parent = this.parent;
         const id = parent.element.id;
         if (!parent.isImageLoaded || parent.isCropToolbar) {
             return;
         }
-        const item = type === 'shapes' && parent.activeObj.shape ? parent.activeObj.shape : type;
-        const args = { toolbarType: item };
+        const args = {};
         let aspectIcon;
         let nonAspectIcon;
         if (type !== 'filter' && type !== 'color') {
@@ -26104,7 +26155,6 @@ class ToolbarModule {
                 else {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'duplicate', 'remove'];
                 }
-                parent.trigger('toolbarUpdating', args);
                 this.initShapesToolbarItem(args.toolbarItems);
                 break;
             case 'text':
@@ -26112,7 +26162,6 @@ class ToolbarModule {
                     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':
@@ -26120,7 +26169,6 @@ class ToolbarModule {
                     this.initMainToolbar(false, true, true);
                 }
                 args.toolbarItems = ['strokeColor', 'strokeWidth', 'remove', 'transparency'];
-                parent.trigger('toolbarUpdating', args);
                 this.initPenToolbarItem(args.toolbarItems);
                 break;
             case 'adjustment':
@@ -26162,7 +26210,7 @@ class ToolbarModule {
                     this.initMainToolbar(false, true, true);
                 }
                 parent.updateCropTransformItems();
-                this.initCropTransformToolbar();
+                this.initCropTransformToolbar(shape);
                 if (Browser.isDevice) {
                     this.updateContextualToolbar('color', 'straighten', true);
                 }
@@ -26189,7 +26237,7 @@ class ToolbarModule {
         this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
     }
-    performCropTransformClick() {
+    performCropTransformClick(shape) {
         const parent = this.parent;
         parent.notify('draw', { prop: 'setTempStraightenZoomDeg' });
         parent.tempStraighten = parent.transform.straighten;
@@ -26197,7 +26245,7 @@ class ToolbarModule {
             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' });
     }
@@ -26389,6 +26437,9 @@ class ToolbarModule {
         else {
             this.defToolbarItems = [...leftItem, ...zoomItem, ...mainItem, ...rightItem];
         }
+        const args = { toolbarType: 'pen', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         const toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -26555,6 +26606,9 @@ class ToolbarModule {
         else {
             this.defToolbarItems = [...leftItem, ...zoomItem, ...mainItem, ...rightItem];
         }
+        const args = { toolbarType: 'finetune', toolbarItems: this.defToolbarItems };
+        parent.trigger('toolbarUpdating', args);
+        this.defToolbarItems = args.toolbarItems;
         const toolbar = new Toolbar({
             width: '100%',
             items: this.defToolbarItems,
@@ -26604,7 +26658,10 @@ class ToolbarModule {
             id: id + '_customizeWrapper',
             styles: 'position: absolute'
         }));
-        const mainItem = this.getFrameToolbarItem();
+        let mainItem = this.getFrameToolbarItem();
+        const args = { toolbarType: 'frame', toolbarItems: mainItem };
+        parent.trigger('toolbarUpdating', args);
+        mainItem = args.toolbarItems;
         const toolbar = new Toolbar({
             width: '100%',
             items: mainItem,
@@ -27228,7 +27285,10 @@ class ToolbarModule {
     initFilterToolbarItem() {
         const parent = this.parent;
         const id = parent.element.id;
-        const mainItem = this.getFilterToolbarItem();
+        let mainItem = this.getFilterToolbarItem();
+        const 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();
         }
@@ -27422,6 +27482,9 @@ class ToolbarModule {
                     qtArea.style.top = point.startY - (height + (height / 1.5)) + 'px';
                 }
             }
+            if (parseFloat(qtArea.style.top) < 0) {
+                qtArea.style.top = '0px';
+            }
         }
     }
     refreshDropDownBtn(isDisabled) {