@syncfusion/ej2-image-editor 26.1.41 → 26.2.5

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

@@ -9048,6 +9048,10 @@ class Selection {
                 return;
             }
             const actObj = extend({}, obj[i], {}, true);
+            if (actObj.activePoint.width === 0 && actObj.activePoint.height === 0) {
+                obj.splice(i, 1);
+                return;
+            }
             this.cursorTargetId = actObj.currIndex;
             if (actObj.shape === 'line' || actObj.shape === 'arrow') {
                 this.setCursorForLineArrow(actObj, x, y, upperCanvas);
@@ -11636,7 +11640,6 @@ class Selection {
                         const tempObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
                         parent.objColl.pop();
                         this.redrawShape(tempObj);
-                        parent.objColl.push(tempObj);
                         this.tempObjColl = undefined;
                     }
                     if (!this.isFhdEditing) {
@@ -12122,10 +12125,10 @@ class Selection {
                 this.panDown = null;
                 parent.notify('transform', { prop: 'setPanMove', onPropertyChange: false,
                     value: { point: null } });
-                parent.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
-                    value: { point: null } });
             }
         }
+        parent.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
+            value: { point: null } });
         if (this.currentDrawingShape !== 'path') {
             parent.currObjType.isDragging = false;
         }
@@ -12321,7 +12324,7 @@ class Selection {
     focusRatioBtn() {
         const id = this.parent.element.id;
         if (this.parent.isKBDNavigation) {
-            setTimeout(function () {
+            setTimeout(() => {
                 if (document.getElementById(id + '_aspectratio')) {
                     document.getElementById(id + '_aspectratio').focus();
                 }
@@ -18627,7 +18630,8 @@ class Transform {
             if (freehandObj['bool']) {
                 parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
             }
-            if (parent.activeObj.shape !== undefined) {
+            const actPoint = extend({}, parent.activeObj.activePoint, {}, true);
+            if (parent.activeObj.shape && (actPoint.width !== 0 || actPoint.height !== 0)) {
                 isActiveObj = true;
                 if (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
                     parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
@@ -22893,7 +22897,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      * @returns {void}.
      */
     updateArrow(type, id) {
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const object = { currObj: {} };
         const objt = { shapeSettingsObj: {} };
@@ -22904,7 +22913,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         prevObj.objColl = extend([], this.objColl, [], true);
         prevObj.pointColl = extend([], this.pointColl, [], true);
         prevObj.afterCropActions = extend([], this.afterCropActions, [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (type === 'startArrow') {
             this.activeObj.start = this.getTextFromId(id);
         }
@@ -22948,7 +22959,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     updateFontFamily(id) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const objColl = extend([], this.objColl, [], true);
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const objt = { shapeSettingsObj: {} };
@@ -22964,7 +22980,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: this.activeObj, isTextArea: true } });
@@ -23024,7 +23042,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
     updateFontSize(text) {
         const itemText = text;
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const objt = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
@@ -23039,7 +23062,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (this.textArea.style.display === 'block' || this.textArea.style.display === 'inline-block') {
             this.notify('shape', { prop: 'updateFontRatio', onPropertyChange: false,
                 value: { obj: this.activeObj, isTextArea: true } });
@@ -23127,7 +23152,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
      */
     updateFontColor(value) {
         this.notify('selection', { prop: 'setInitialTextEdit', value: { bool: false } });
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const objt = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: objt } });
@@ -23142,7 +23172,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         if (this.textArea.style.display === 'none') {
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null,
@@ -23319,7 +23351,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             const obj = { shapeSettingsObj: {} };
             this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
             const shapeSettings = obj['shapeSettingsObj'];
+            let isObjPushed = false;
+            const collLength = this.objColl.length;
             this.notify('shape', { prop: 'pushActItemIntoObj' });
+            if (collLength !== this.objColl.length) {
+                isObjPushed = true;
+            }
             const prevCropObj = extend({}, this.cropObj, {}, true);
             const object = { currObj: {} };
             this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -23331,7 +23368,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
                 value: { obj: selPointCollObj } });
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-            this.objColl.pop();
+            if (isObjPushed) {
+                this.objColl.pop();
+            }
             this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10);
             if (this.activeObj.shape === 'rectangle' || this.activeObj.shape === 'ellipse') {
                 this.activeObj.strokeSettings.strokeWidth = parseInt(id, 10) - 1;
@@ -23373,7 +23412,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const shapeSettings = objt['shapeSettingsObj'];
         if (this.activeObj.shape && (this.activeObj.shape !== 'path' || (this.activeObj.shape === 'path' &&
             this.activeObj.pointColl.length > 0))) {
+            let isObjPushed = false;
+            const collLength = this.objColl.length;
             this.notify('shape', { prop: 'pushActItemIntoObj' });
+            if (collLength !== this.objColl.length) {
+                isObjPushed = true;
+            }
             const prevCropObj = extend({}, this.cropObj, {}, true);
             const object = { currObj: {} };
             this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -23385,7 +23429,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
                 value: { obj: selPointCollObj } });
             prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-            this.objColl.pop();
+            if (isObjPushed) {
+                this.objColl.pop();
+            }
             this.activeObj.strokeSettings.strokeColor = value;
             this.notify('shape', { prop: 'setStrokeSettings', value: { strokeSettings: null, strokeColor: this.activeObj.strokeSettings.strokeColor, fillColor: null, strokeWidth: null } });
             if (!this.togglePen) {
@@ -23420,7 +23466,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         const obj = { shapeSettingsObj: {} };
         this.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
         const shapeSettings = obj['shapeSettingsObj'];
+        let isObjPushed = false;
+        const collLength = this.objColl.length;
         this.notify('shape', { prop: 'pushActItemIntoObj' });
+        if (collLength !== this.objColl.length) {
+            isObjPushed = true;
+        }
         const prevCropObj = extend({}, this.cropObj, {}, true);
         const object = { currObj: {} };
         this.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
@@ -23432,7 +23483,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
-        this.objColl.pop();
+        if (isObjPushed) {
+            this.objColl.pop();
+        }
         this.activeObj.strokeSettings.fillColor = value;
         this.notify('shape', { prop: 'setStrokeSettings',
             value: { strokeSettings: null, strokeColor: null, fillColor: this.activeObj.strokeSettings.fillColor,
@@ -25998,7 +26051,7 @@ class ToolbarModule {
         }
         const fileObj = { fileName: '', fileType: '' };
         parent.notify('draw', { prop: 'getFileName', onPropertyChange: false, value: { obj: fileObj } });
-        this.fileType = fileObj['fileType'];
+        this.fileType = fileObj['fileType'] ? fileObj['fileType'] : 'JPEG';
         parent.notify('export', { prop: 'exportToCanvas', value: { object: obj } });
         const tempCanvas = obj['canvas'];
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -26010,7 +26063,7 @@ class ToolbarModule {
         const ddbElem = document.getElementById(id + '_saveDropdownbtn');
         if (ddbElem) {
             const spanElem = document.createElement('span');
-            spanElem.innerHTML = fileObj['fileType'].toUpperCase();
+            spanElem.innerHTML = this.fileType.toUpperCase();
             if (ddbElem) {
                 ddbElem.appendChild(spanElem);
             }
@@ -27210,6 +27263,15 @@ class ToolbarModule {
                     args.toolbarItems = ['fillColor', 'strokeColor', 'strokeWidth', 'z-order', 'duplicate', 'remove'];
                 }
                 this.initShapesToolbarItem(args.toolbarItems);
+                if (parent.activeObj.shape === 'image') {
+                    const actObj = extend({}, parent.activeObj, {}, true);
+                    parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+                    parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
+                    parent.activeObj = actObj;
+                    parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: parent.activeObj,
+                            isCropRatio: null, points: null, isPreventDrag: true } });
+                    this.renderQAT(false);
+                }
                 break;
             case 'text':
                 if (Browser.isDevice) {
@@ -27293,14 +27355,14 @@ class ToolbarModule {
                 parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null, isPreventClearRect: null, isFrame: true } });
                 break;
         }
-        this.currToolbar = type;
         this.refreshDropDownBtn(isCropping);
-        this.updateKBDNavigation(this.currToolbar);
+        this.updateKBDNavigation(type);
+        this.currToolbar = type;
     }
     updateKBDNavigation(type) {
         const parent = this.parent;
         const id = parent.element.id;
-        if (!parent.isKBDNavigation) {
+        if (!parent.isKBDNavigation || this.currToolbar === type) {
             return;
         }
         if (this.isToolbar()) {
@@ -29779,8 +29841,10 @@ class ToolbarModule {
                 }
                 parent.notify('selection', { prop: 'setSliderActive', onPropertyChange: false, value: { bool: false } });
                 if (type === 'transparency') {
-                    parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
-                    parent.element.querySelector('#' + parent.element.id + '_transparency').click();
+                    setTimeout(() => {
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoStack', onPropertyChange: false });
+                        parent.element.querySelector('#' + parent.element.id + '_transparency').click();
+                    }, 50);
                 }
             }
         });