@syncfusion/ej2-image-editor 25.1.37 → 25.1.38

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

@@ -7023,6 +7023,9 @@ class FreehandDrawing {
             case 'reset':
                 this.reset();
                 break;
+            case 'triggerShapeChanging':
+                this.triggerShapeChanging(args.value['shapeChangingArgs']);
+                break;
         }
     }
     updateFhdPvtVar() {
@@ -16256,7 +16259,7 @@ class Transform {
                 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']);
@@ -17269,12 +17272,12 @@ class Transform {
         parent.notify('selection', { prop: 'getPanDown', onPropertyChange: false, value: { obj: obj } });
         const panEventArgs = { startPoint: obj['panDown'], endPoint: this.panMove, cancel: false };
         parent.trigger('panning', panEventArgs);
-        this.panEvent(panEventArgs, xDiff, yDiff);
-    }
-    panEvent(panEventArgs, xDiff, yDiff) {
         if (panEventArgs.cancel) {
             return;
         }
+        this.panEvent(xDiff, yDiff);
+    }
+    panEvent(xDiff, yDiff, isPanMethod) {
         const parent = this.parent;
         let isObjCreated = false;
         if (parent.activeObj.shape && parent.activeObj.shape === 'shape') {
@@ -17312,8 +17315,13 @@ class Transform {
         }
         if (parent.transform.degree === 0) {
             let point;
-            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 };
@@ -17334,8 +17342,13 @@ class Transform {
         else {
             const 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 };
@@ -17622,7 +17635,7 @@ class Transform {
         parent.notify('draw', { prop: 'updateActiveObject', onPropertyChange: false, value: { actPoint: actPoint,
                 obj: parent.activeObj, isMouseMove: null, x: null, y: null } });
     }
-    pan(value) {
+    pan(value, x, y) {
         const parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             if (value) {
@@ -17632,6 +17645,15 @@ class Transform {
                 parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
                 parent.lowerCanvas.style.cursor = parent.upperCanvas.style.cursor = parent.cursor = 'grab';
                 parent.notify('selection', { prop: 'setPanDown', onPropertyChange: false, value: { panDown: null } });
+                if (x || y) {
+                    x = x ? x : 0;
+                    y = y ? y : 0;
+                    if (isNullOrUndefined(this.tempPanMove)) {
+                        this.tempPanMove = { x: this.panMove.x, y: this.panMove.y };
+                    }
+                    this.panEvent(x, y, true);
+                    this.tempPanMove = null;
+                }
             }
             else {
                 parent.togglePan = parent.currObjType.isCustomCrop = false;
@@ -17946,6 +17968,9 @@ class Transform {
             const 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;
@@ -17982,7 +18007,7 @@ class Transform {
         }
         return { width: cssMaxWidth, height: cssMaxHeight };
     }
-    updatePanPoints() {
+    updatePanPoints(x, y) {
         const parent = this.parent;
         const tempActObj = extend({}, parent.activeObj, {}, true);
         const tempDestLeft = parent.img.destLeft;
@@ -17992,6 +18017,10 @@ class Transform {
         }
         let xDiff = this.panMove.x - this.tempPanMove.x;
         let yDiff = this.panMove.y - this.tempPanMove.y;
+        if (x || y) {
+            xDiff = x;
+            yDiff = y;
+        }
         parent.img.destLeft += xDiff;
         parent.img.destTop += yDiff;
         this.limitPan();
@@ -20456,14 +20485,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * 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) {
-        this.notify('transform', { prop: 'pan', onPropertyChange: false, value: { value: value } });
+    pan(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.
@@ -24145,6 +24176,10 @@ class ToolbarModule {
             this.parent.showDialogPopup();
         }
     }
+    triggerTbarClickEvent(args) {
+        const clickEvent = { item: args.item, originalEvent: args.event };
+        this.parent.trigger('toolbarItemClicked', clickEvent);
+    }
     renderAnnotationBtn(isContextualToolbar) {
         const parent = this.parent;
         let isCustomized = false;
@@ -24233,6 +24268,7 @@ class ToolbarModule {
                 }
             },
             select: (args) => {
+                this.triggerTbarClickEvent(args);
                 parent.okBtn();
                 let isCropSelection = false;
                 let splitWords;
@@ -24253,6 +24289,9 @@ class ToolbarModule {
                 }
                 const obj = { currentFreehandDrawIndex: null };
                 parent.notify('freehand-draw', { prop: 'getCurrentFreehandDrawIndex', value: { obj: obj } });
+                const prevObj = { shapeSettingsObj: {} };
+                let shapeSettings;
+                let shapeChangingArgs;
                 drpDownBtn.iconCss = 'e-icons ' + this.getCurrentShapeIcon(args.item.id);
                 switch (args.item.id) {
                     case 'pen':
@@ -24260,6 +24299,12 @@ class ToolbarModule {
                         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';
@@ -24269,12 +24314,22 @@ class ToolbarModule {
                         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();
@@ -24379,6 +24434,7 @@ class ToolbarModule {
             },
             items: items,
             select: (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);
@@ -24413,7 +24469,11 @@ class ToolbarModule {
                     elem.style.display = 'block';
                 }
             },
-            items: items, select: parent.transformSelect.bind(this),
+            items: items,
+            select: (args) => {
+                this.triggerTbarClickEvent(args);
+                parent.transformSelect.bind(this);
+            },
             iconCss: 'e-icons e-transform', cssClass: 'e-image-popup'
         });
         drpDownBtn.appendTo('#' + parent.element.id + '_transformBtn');
@@ -24431,6 +24491,7 @@ class ToolbarModule {
             // Initialize the DropDownButton component.
             const saveDrpDownBtn = new DropDownButton({ items: saveItems, cssClass: 'e-caret-hide e-image-popup', iconCss: 'e-icons e-save',
                 select: (args) => {
+                    this.triggerTbarClickEvent(args);
                     parent.export(args.item.text);
                     parent.isChangesSaved = true;
                     parent.notify('draw', { prop: 'redrawDownScale' });
@@ -24903,6 +24964,7 @@ class ToolbarModule {
                     }
                 },
                 select: (args) => {
+                    this.triggerTbarClickEvent(args);
                     spanElem.textContent = args.item.text;
                     parent.updateStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
@@ -24959,6 +25021,7 @@ class ToolbarModule {
                 }
             },
             select: (args) => {
+                this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('startArrow', args.item.id);
             }
@@ -25000,6 +25063,7 @@ class ToolbarModule {
                 }
             },
             select: (args) => {
+                this.triggerTbarClickEvent(args);
                 spanElem.textContent = args.item.text;
                 parent.updateArrow('endArrow', args.item.id);
             }
@@ -25236,6 +25300,7 @@ class ToolbarModule {
                     }
                 },
                 select: (args) => {
+                    this.triggerTbarClickEvent(args);
                     spanElem.textContent = args.item.text;
                     if (Browser.isDevice) {
                         spanElem.setAttribute('style', 'font-family:' + args.item.id);
@@ -25264,6 +25329,7 @@ class ToolbarModule {
                     args.element.querySelector('[aria-label *= ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: (args) => {
+                    this.triggerTbarClickEvent(args);
                     fontSizeSpanElem.textContent = args.item.text;
                     parent.updateFontSize(args.item.text);
                 }
@@ -25695,6 +25761,7 @@ class ToolbarModule {
             parent.element.querySelector('.e-template.e-pen-stroke-color').appendChild(parent.createElement('input', {
                 id: id + '_pen_stroke'
             }));
+            const presentVal = parent.activeObj.strokeSettings.strokeColor;
             const penColor = new ColorPicker({
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-pen-color',
@@ -25720,6 +25787,9 @@ class ToolbarModule {
             }, '#' + id + '_penColorBtn');
             penColor.inline = true;
             penColor.value = penColor.getValue(parent.activeObj.strokeSettings.strokeColor, 'rgba');
+            if (penColor.value === 'null') {
+                penColor.value = presentVal;
+            }
             const obj = { tempFreeHandDrawEditingStyles: null };
             parent.notify('freehand-draw', { prop: 'getTempFreeHandDrawEditingStyles', value: { obj: obj } });
             const indexObj = { freehandSelectedIndex: null };
@@ -25768,6 +25838,7 @@ class ToolbarModule {
                     args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: (args) => {
+                    this.triggerTbarClickEvent(args);
                     spanElem.textContent = args.item.text;
                     parent.updatePenStrokeWidth(args.item.id);
                     if (Browser.isDevice) {
@@ -26075,6 +26146,7 @@ class ToolbarModule {
                 }
             },
             select: (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),
@@ -26150,6 +26222,7 @@ class ToolbarModule {
                 }
             },
             select: (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),
@@ -26225,6 +26298,7 @@ class ToolbarModule {
                 }
             },
             select: (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),
@@ -26301,6 +26375,7 @@ class ToolbarModule {
                 }
             },
             select: (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),
@@ -26376,6 +26451,7 @@ class ToolbarModule {
                 }
             },
             select: (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),
@@ -26449,6 +26525,7 @@ class ToolbarModule {
                 }
             },
             select: (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),