@syncfusion/ej2-image-editor 20.3.50 → 20.3.56

package/dist/es6/ej2-image-editor.es5.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';
@@ -260,6 +260,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         if (!this.element.getAttribute('class')) {
             this.element.removeAttribute('class');
         }
+        this.destroySubComponents();
         this.unwireEvent();
         _super.prototype.destroy.call(this);
         this.element.innerHTML = '';
@@ -326,6 +327,27 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         EventHandler.remove(this.lowerCanvas, 'mouseup', this.canvasMouseUpHandler);
         EventHandler.remove(document, 'mouseup', this.canvasMouseUpHandler);
     };
+    ImageEditor.prototype.destroySubComponents = function () {
+        var inputElement = this.element.querySelectorAll('input.e-control');
+        var divElement = this.element.querySelectorAll('div.e-control:not(.e-handle)');
+        var btnElement = this.element.querySelectorAll('button.e-control');
+        for (var 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 (var 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));
+            }
+        }
+    };
     ImageEditor.prototype.updateTheme = function () {
         if (this.theme !== '') {
             this.theme = this.toPascalCase(this.theme);
@@ -1055,7 +1077,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                             args.element.parentElement.offsetHeight + 'px';
                     }
                     var activeBtn = spanElem_1.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: function (args) {
                     spanElem_1.textContent = args.item.text;
@@ -1671,75 +1695,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     }
                     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;
-                        }
-                        var width = this.upperContext.measureText(this.activeObj.keyHistory).width +
-                            this.activeObj.textSettings.fontSize * 0.5;
-                        var 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;
-                        }
-                        var width = this.upperContext.measureText(this.activeObj.keyHistory).width +
-                            this.activeObj.textSettings.fontSize * 0.5;
-                        var 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);
@@ -2928,7 +2886,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        var xform = new DOMMatrix();
+        var xform = new DOMMatrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
         ctx.getTransform = function () {
             return xform;
         };
@@ -2969,7 +2927,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         var transform = ctx.transform;
         ctx.transform = function (a, b, c, d, e, f) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var m2 = new DOMMatrix();
+            var 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;
@@ -6097,22 +6055,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 this.updateActiveObject(ratio, this.objColl[i].activePoint, this.objColl[i]);
             }
         }
-        else if (degree === 'zoom') {
-            for (var 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;
-            }
-        }
     };
     ImageEditor.prototype.calcCurrPoints = function (degree, obj) {
         var oldRatio = this.calcPrevRatio();
@@ -6448,6 +6390,51 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         }
         return inRange;
     };
+    ImageEditor.prototype.rotateMultiple = function (length, degree) {
+        for (var 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.
      *
@@ -6896,8 +6883,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             isRotate = true;
             var transitionArgs = { degree: degree };
             this.trigger('rotating', transitionArgs);
-            this.rotateMethod = true;
-            this.lastAction = 'rotate';
             var splitWords = [];
             var activeObjShape = void 0;
             if (!isNullOrUndefined(this.activeObj.activePoint)) {
@@ -6909,32 +6894,40 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             this.redrawActObj();
+            var 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;
+            var length_1 = Math.abs(degree / 90);
+            if (length_1 > 1) {
+                this.rotateMultiple(length_1, 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') {
                     var endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
@@ -6950,11 +6943,11 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             }
             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;
     };
     /**
@@ -6987,8 +6980,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             }
             type = type ? type : 'Png';
             this.redrawActObj();
-            var beforeSave = { cancel: false, fileName: 'ImageEditor', fileType: type };
-            var saved_1 = { fileName: 'ImageEditor', fileType: type };
+            var beforeSave = { cancel: false, fileName: fileName ? fileName : 'ImageEditor', fileType: type };
+            var saved_1 = { fileName: fileName ? fileName : 'ImageEditor', fileType: type };
             this.trigger('beforeSave', beforeSave, function (observableSaveArgs) {
                 if (!observableSaveArgs.cancel) {
                     fileName = observableSaveArgs.fileName ? observableSaveArgs.fileName : fileName;
@@ -7098,7 +7091,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      *
      * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
      *
-     *  @returns {void}.
+     * @returns {void}.
+     * @private
      */
     ImageEditor.prototype.freeHandDraw = function (value) {
         if (value) {
@@ -7112,6 +7106,16 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         }
         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}.
+     */
+    ImageEditor.prototype.freehandDraw = function (value) {
+        this.freeHandDraw(value);
+    };
     /**
      * Enable or disable a panning on the Image Editor.
      *
@@ -7392,7 +7396,15 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             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;
@@ -7504,7 +7516,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.canUndo = function () {
-        return _super.prototype.canUndo.call(this);
+        return false;
     };
     /**
      * To check whether the redo collection is empty or not.
@@ -7513,7 +7525,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.canRedo = function () {
-        return _super.prototype.canRedo.call(this);
+        return false;
     };
     /**
      * Erases all the signature strokes signed by user.
@@ -7522,7 +7534,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.clear = function () {
-        _super.prototype.clear.call(this);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.clear.call(this);
+        }
     };
     /**
      * To draw the signature based on the given text, with the font family and font size.
@@ -7535,7 +7549,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.draw = function (text, fontFamily, fontSize) {
-        _super.prototype.draw.call(this, text, fontFamily, fontSize);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.draw.call(this, text, fontFamily, fontSize);
+        }
     };
     /**
      * To get the signature as Blob.
@@ -7545,7 +7561,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.getBlob = function (url) {
-        return _super.prototype.getBlob.call(this, url);
+        return null;
     };
     /**
      * To check whether the signature is empty or not.
@@ -7554,7 +7570,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.isEmpty = function () {
-        return _super.prototype.isEmpty.call(this);
+        return false;
     };
     /**
      * To load the signature with the given base 64 string, height and width.
@@ -7566,7 +7582,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.load = function (signature, width, height) {
-        _super.prototype.load.call(this, signature, width, height);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.load.call(this, signature, width, height);
+        }
     };
     /**
      * Undo the last user action.
@@ -7575,7 +7593,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.undo = function () {
-        _super.prototype.undo.call(this);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.undo.call(this);
+        }
     };
     /**
      * Redo the last user action.
@@ -7584,7 +7604,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.redo = function () {
-        _super.prototype.redo.call(this);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.redo.call(this);
+        }
     };
     /**
      * To save the signature with the given file type and file name.
@@ -7596,7 +7618,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.save = function (type, fileName) {
-        _super.prototype.save.call(this, type, fileName);
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.save.call(this, type, fileName);
+        }
     };
     /**
      * To save the signature as Blob.
@@ -7605,7 +7629,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.saveAsBlob = function () {
-        return _super.prototype.saveAsBlob.call(this);
+        return null;
     };
     /**
      * Returns the persistence data for component.
@@ -7614,7 +7638,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.getLocalData = function () {
-        return _super.prototype.getLocalData.call(this);
+        return null;
     };
     var ImageEditor_1;
     __decorate([