@syncfusion/ej2-image-editor 20.3.50 → 20.3.56

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

@@ -1,4 +1,4 @@
-import { Browser, Event, EventHandler, L10n, NotifyPropertyChanges, Property, addClass, compile, extend, getComponent, getInstance, getUniqueID, isNullOrUndefined, removeClass } from '@syncfusion/ej2-base';
+import { Browser, Event, EventHandler, L10n, NotifyPropertyChanges, Property, addClass, compile, detach, extend, getComponent, getInstance, getUniqueID, isNullOrUndefined, removeClass, select } from '@syncfusion/ej2-base';
 import { ColorPicker, SignatureBase, Uploader } from '@syncfusion/ej2-inputs';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
@@ -244,6 +244,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         if (!this.element.getAttribute('class')) {
             this.element.removeAttribute('class');
         }
+        this.destroySubComponents();
         this.unwireEvent();
         super.destroy();
         this.element.innerHTML = '';
@@ -310,6 +311,27 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         EventHandler.remove(this.lowerCanvas, 'mouseup', this.canvasMouseUpHandler);
         EventHandler.remove(document, 'mouseup', this.canvasMouseUpHandler);
     }
+    destroySubComponents() {
+        const inputElement = this.element.querySelectorAll('input.e-control');
+        const divElement = this.element.querySelectorAll('div.e-control:not(.e-handle)');
+        const btnElement = this.element.querySelectorAll('button.e-control');
+        for (let i = 0, len = inputElement.length; i < len; i++) {
+            if (inputElement[i].classList.contains('e-color-picker')) {
+                getComponent(inputElement[i], 'color-picker').destroy();
+                detach(select('input#' + inputElement[i].id, this.element));
+            }
+        }
+        for (let i = 0, len = btnElement.length; i < len; i++) {
+            if (btnElement[i].classList.contains('e-dropdown-btn')) {
+                getComponent(btnElement[i], 'dropdown-btn').destroy();
+                detach(select('button#' + btnElement[i].id, this.element));
+            }
+            else if (btnElement[i].classList.contains('e-btn')) {
+                getComponent(btnElement[i], 'btn').destroy();
+                detach(select('button#' + btnElement[i].id, this.element));
+            }
+        }
+    }
     updateTheme() {
         if (this.theme !== '') {
             this.theme = this.toPascalCase(this.theme);
@@ -1029,7 +1051,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                             args.element.parentElement.offsetHeight + 'px';
                     }
                     const activeBtn = spanElem.innerHTML;
-                    args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                    if (activeBtn !== '') {
+                        args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                    }
                 },
                 select: (args) => {
                     spanElem.textContent = args.item.text;
@@ -1641,75 +1665,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     }
                     this.callMainToolbar(false);
                     break;
-                case 'text':
-                    this.currObjType.isCustomCrop = false;
-                    imageEditorObj.drawShapeText();
-                    this.refreshToolbar(type);
-                    break;
-                case 'pen':
-                    this.currObjType.isCustomCrop = false;
-                    this.freeHandDraw(true);
-                    this.refreshToolbar(type);
-                    break;
                 case 'reset':
                     imageEditorObj.reset();
                     break;
-                case 'load':
-                    break;
-                case 'save':
-                    break;
-                case 'select':
-                    break;
-                case 'bold':
-                    this.currObjType.isCustomCrop = false;
-                    if (!this.isBoldbtn) {
-                        this.activeObj.textSettings.bold = true;
-                        this.isBoldbtn = true;
-                        this.redrawText(ratio);
-                    }
-                    else {
-                        this.activeObj.textSettings.bold = false;
-                        this.isBoldbtn = false;
-                        this.redrawText(ratio);
-                    }
-                    break;
-                case 'italic':
-                    this.currObjType.isCustomCrop = false;
-                    if (!this.isItalicbtn) {
-                        this.activeObj.textSettings.italic = true;
-                        if (this.activeObj.textSettings.bold) {
-                            this.upperContext.font = 'italic bold ' + this.activeObj.textSettings.fontSize + 'px' +
-                                ' ' + this.activeObj.textSettings.fontFamily;
-                        }
-                        else {
-                            this.upperContext.font = 'italic ' + this.activeObj.textSettings.fontSize + 'px' + ' ' +
-                                this.activeObj.textSettings.fontFamily;
-                        }
-                        const width = this.upperContext.measureText(this.activeObj.keyHistory).width +
-                            this.activeObj.textSettings.fontSize * 0.5;
-                        const height = this.activeObj.textSettings.fontSize + this.activeObj.textSettings.fontSize * 0.25;
-                        this.setTextSelection(width, height);
-                        this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
-                        this.redrawShape(this.activeObj);
-                        this.isItalicbtn = true;
-                    }
-                    else {
-                        this.activeObj.textSettings.italic = false;
-                        if (this.activeObj.textSettings.bold) {
-                            this.upperContext.font = 'bold ' + this.activeObj.textSettings.fontSize + 'px' + ' ' + this.activeObj.textSettings.fontFamily;
-                        }
-                        else {
-                            this.upperContext.font = this.activeObj.textSettings.fontSize + 'px' + ' ' + this.activeObj.textSettings.fontFamily;
-                        }
-                        const width = this.upperContext.measureText(this.activeObj.keyHistory).width +
-                            this.activeObj.textSettings.fontSize * 0.5;
-                        const height = this.activeObj.textSettings.fontSize + this.activeObj.textSettings.fontSize * 0.25;
-                        this.setTextSelection(width, height);
-                        this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
-                        this.redrawShape(this.activeObj);
-                        this.isItalicbtn = false;
-                    }
-                    break;
             }
         }
         this.trigger('toolbarItemClicked', args);
@@ -2892,7 +2850,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        let xform = new DOMMatrix();
+        let xform = new DOMMatrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
         ctx.getTransform = () => {
             return xform;
         };
@@ -2933,7 +2891,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         const transform = ctx.transform;
         ctx.transform = (a, b, c, d, e, f) => {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            const m2 = new DOMMatrix();
+            const m2 = new DOMMatrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
             m2.a = a;
             m2.b = b;
             m2.c = c;
@@ -6061,22 +6019,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 this.updateActiveObject(ratio, this.objColl[i].activePoint, this.objColl[i]);
             }
         }
-        else if (degree === 'zoom') {
-            for (let i = 0; i < this.objColl.length; i++) {
-                this.objColl[i].activePoint.startX /= ratio.width;
-                this.objColl[i].activePoint.startY /= ratio.height;
-                this.objColl[i].activePoint.endX /= ratio.width;
-                this.objColl[i].activePoint.endY /= ratio.height;
-                this.objColl[i].activePoint.height = this.objColl[i].activePoint.endX - this.objColl[i].activePoint.startX;
-                this.objColl[i].activePoint.width = this.objColl[i].activePoint.endY - this.objColl[i].activePoint.startY;
-                this.objColl[i].activePoint.startX *= ratio.width;
-                this.objColl[i].activePoint.startY *= ratio.height;
-                this.objColl[i].activePoint.endX *= ratio.width;
-                this.objColl[i].activePoint.endY *= ratio.height;
-                this.objColl[i].activePoint.width = this.objColl[i].activePoint.endX - this.objColl[i].activePoint.startX;
-                this.objColl[i].activePoint.height = this.objColl[i].activePoint.endY - this.objColl[i].activePoint.startY;
-            }
-        }
     }
     calcCurrPoints(degree, obj) {
         const oldRatio = this.calcPrevRatio();
@@ -6412,6 +6354,51 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
         return inRange;
     }
+    rotateMultiple(length, degree) {
+        for (let i = 0; i < length; i++) {
+            if (degree > 0) {
+                this.degree += 90;
+            }
+            else {
+                this.degree -= 90;
+            }
+            if (this.degree === 360) {
+                this.degree = 0;
+            }
+            this.lowerContext.save();
+            this.setMaximumDimension(90 * (i + 1));
+            this.lowerContext.translate(this.lowerCanvas.width / 2, this.lowerCanvas.height / 2);
+            if (degree > 0) {
+                this.lowerContext.rotate(Math.PI / 180 * 90);
+            }
+            else {
+                this.lowerContext.rotate(Math.PI / 180 * -90);
+            }
+            this.lowerCanvas.style.left = this.upperCanvas.style.left = (this.element.clientWidth - parseInt(this.lowerCanvas.style.maxWidth, 10) - 18) / 2 + 1 + 'px';
+            this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.clientHeight - this.toolbarHeight - parseInt(this.lowerCanvas.style.maxHeight, 10)) / 2 + 1 + 'px';
+            this.lowerContext.drawImage(this.inMemoryCanvas, -this.lowerCanvas.height / 2, -this.lowerCanvas.width / 2);
+            if (degree > 0) {
+                this.lowerContext.rotate(Math.PI / 180 * -90);
+            }
+            else {
+                this.lowerContext.rotate(Math.PI / 180 * 90);
+            }
+            this.lowerContext.translate(-this.lowerCanvas.width / 2, -this.lowerCanvas.height / 2);
+            this.lowerContext.restore();
+            this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.inMemoryCanvas.width = this.currImgData.width;
+            this.inMemoryCanvas.height = this.currImgData.height;
+            this.inMemoryContext.putImageData(this.currImgData, 0, 0);
+            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+            if (degree > 0) {
+                this.redrawObj(90);
+            }
+            else {
+                this.redrawObj(-90);
+            }
+        }
+    }
     /**
      * Clear a current selection.
      *
@@ -6860,8 +6847,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             isRotate = true;
             const transitionArgs = { degree: degree };
             this.trigger('rotating', transitionArgs);
-            this.rotateMethod = true;
-            this.lastAction = 'rotate';
             let splitWords = [];
             let activeObjShape;
             if (!isNullOrUndefined(this.activeObj.activePoint)) {
@@ -6873,32 +6858,40 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 }
             }
             this.redrawActObj();
+            const factor = this.factor;
             if (this.factor !== 1) {
                 this.lowerContext.setTransform(1, 0, 0, 1, 0, 0);
                 this.upperContext.setTransform(1, 0, 0, 1, 0, 0);
                 this.factor = 1;
                 this.refreshToolbar('main');
             }
-            this.degree += degree;
-            if (this.degree === 360) {
-                this.degree = 0;
+            const length = Math.abs(degree / 90);
+            if (length > 1) {
+                this.rotateMultiple(length, degree);
+            }
+            else {
+                this.degree += degree;
+                if (this.degree === 360) {
+                    this.degree = 0;
+                }
+                this.lowerContext.save();
+                this.setMaximumDimension(this.degree);
+                this.lowerContext.translate(this.lowerCanvas.width / 2, this.lowerCanvas.height / 2);
+                this.lowerContext.rotate(Math.PI / 180 * degree);
+                this.lowerCanvas.style.left = this.upperCanvas.style.left = (this.element.clientWidth - parseInt(this.lowerCanvas.style.maxWidth, 10) - 18) / 2 + 1 + 'px';
+                this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.clientHeight - this.toolbarHeight - parseInt(this.lowerCanvas.style.maxHeight, 10)) / 2 + 1 + 'px';
+                this.lowerContext.drawImage(this.inMemoryCanvas, -this.lowerCanvas.height / 2, -this.lowerCanvas.width / 2);
+                this.lowerContext.rotate(Math.PI / 180 * -degree);
+                this.lowerContext.translate(-this.lowerCanvas.width / 2, -this.lowerCanvas.height / 2);
+                this.lowerContext.restore();
+                this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.inMemoryCanvas.width = this.currImgData.width;
+                this.inMemoryCanvas.height = this.currImgData.height;
+                this.inMemoryContext.putImageData(this.currImgData, 0, 0);
+                this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+                this.redrawObj(degree);
             }
-            this.lowerContext.save();
-            this.setMaximumDimension(this.degree);
-            this.lowerContext.translate(this.lowerCanvas.width / 2, this.lowerCanvas.height / 2);
-            this.lowerContext.rotate(Math.PI / 180 * degree);
-            this.lowerCanvas.style.left = this.upperCanvas.style.left = (this.element.clientWidth - parseInt(this.lowerCanvas.style.maxWidth, 10) - 18) / 2 + 1 + 'px';
-            this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.clientHeight - this.toolbarHeight - parseInt(this.lowerCanvas.style.maxHeight, 10)) / 2 + 1 + 'px';
-            this.lowerContext.drawImage(this.inMemoryCanvas, -this.lowerCanvas.height / 2, -this.lowerCanvas.width / 2);
-            this.lowerContext.rotate(Math.PI / 180 * -degree);
-            this.lowerContext.translate(-this.lowerCanvas.width / 2, -this.lowerCanvas.height / 2);
-            this.lowerContext.restore();
-            this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            this.inMemoryCanvas.width = this.currImgData.width;
-            this.inMemoryCanvas.height = this.currImgData.height;
-            this.inMemoryContext.putImageData(this.currImgData, 0, 0);
-            this.redrawObj(degree);
             if (!isNullOrUndefined(activeObjShape)) {
                 if (activeObjShape === 'custom') {
                     const endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
@@ -6914,11 +6907,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
             this.factor = 1;
             if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('rotate', degree, this.objColl);
+                this.updateUndoRedoColl('rotate', degree, this.objColl, null);
             }
             this.isUndoRedo = false;
+            this.refreshToolbar('main');
         }
-        this.rotateMethod = false;
         return isRotate;
     }
     /**
@@ -6950,8 +6943,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
             type = type ? type : 'Png';
             this.redrawActObj();
-            const beforeSave = { cancel: false, fileName: 'ImageEditor', fileType: type };
-            const saved = { fileName: 'ImageEditor', fileType: type };
+            const beforeSave = { cancel: false, fileName: fileName ? fileName : 'ImageEditor', fileType: type };
+            const saved = { fileName: fileName ? fileName : 'ImageEditor', fileType: type };
             this.trigger('beforeSave', beforeSave, (observableSaveArgs) => {
                 if (!observableSaveArgs.cancel) {
                     fileName = observableSaveArgs.fileName ? observableSaveArgs.fileName : fileName;
@@ -7061,7 +7054,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      *
      * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
      *
-     *  @returns {void}.
+     * @returns {void}.
+     * @private
      */
     freeHandDraw(value) {
         if (value) {
@@ -7075,6 +7069,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
         this.refreshToolbar('pen');
     }
+    /**
+     * Enable or disable a freehand drawing in an Image Editor.
+     *
+     * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
+     *
+     * @returns {void}.
+     */
+    freehandDraw(value) {
+        this.freeHandDraw(value);
+    }
     /**
      * Enable or disable a panning on the Image Editor.
      *
@@ -7355,7 +7359,15 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             isSelected = true;
             this.activeObj = obj;
             this.redrawShape(this.activeObj);
-            this.refreshToolbar('shapes');
+            if (this.activeObj.shape === 'text') {
+                this.refreshToolbar('text');
+            }
+            else if (this.activeObj.shape === 'pen') {
+                this.refreshToolbar('pen');
+            }
+            else {
+                this.refreshToolbar('shapes');
+            }
             this.updateToolbarItems(this.calcRatio());
         }
         return isSelected;
@@ -7467,7 +7479,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     canUndo() {
-        return super.canUndo();
+        return false;
     }
     /**
      * To check whether the redo collection is empty or not.
@@ -7476,7 +7488,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     canRedo() {
-        return super.canRedo();
+        return false;
     }
     /**
      * Erases all the signature strokes signed by user.
@@ -7485,7 +7497,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     clear() {
-        super.clear();
+        if (this.getModuleName() !== 'image-editor') {
+            super.clear();
+        }
     }
     /**
      * To draw the signature based on the given text, with the font family and font size.
@@ -7498,7 +7512,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     draw(text, fontFamily, fontSize) {
-        super.draw(text, fontFamily, fontSize);
+        if (this.getModuleName() !== 'image-editor') {
+            super.draw(text, fontFamily, fontSize);
+        }
     }
     /**
      * To get the signature as Blob.
@@ -7508,7 +7524,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     getBlob(url) {
-        return super.getBlob(url);
+        return null;
     }
     /**
      * To check whether the signature is empty or not.
@@ -7517,7 +7533,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     isEmpty() {
-        return super.isEmpty();
+        return false;
     }
     /**
      * To load the signature with the given base 64 string, height and width.
@@ -7529,7 +7545,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     load(signature, width, height) {
-        super.load(signature, width, height);
+        if (this.getModuleName() !== 'image-editor') {
+            super.load(signature, width, height);
+        }
     }
     /**
      * Undo the last user action.
@@ -7538,7 +7556,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     undo() {
-        super.undo();
+        if (this.getModuleName() !== 'image-editor') {
+            super.undo();
+        }
     }
     /**
      * Redo the last user action.
@@ -7547,7 +7567,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     redo() {
-        super.redo();
+        if (this.getModuleName() !== 'image-editor') {
+            super.redo();
+        }
     }
     /**
      * To save the signature with the given file type and file name.
@@ -7559,7 +7581,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     save(type, fileName) {
-        super.save(type, fileName);
+        if (this.getModuleName() !== 'image-editor') {
+            super.save(type, fileName);
+        }
     }
     /**
      * To save the signature as Blob.
@@ -7568,7 +7592,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     saveAsBlob() {
-        return super.saveAsBlob();
+        return null;
     }
     /**
      * Returns the persistence data for component.
@@ -7577,7 +7601,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     getLocalData() {
-        return super.getLocalData();
+        return null;
     }
 };
 __decorate([