@syncfusion/ej2-image-editor 20.3.47 → 20.3.50

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

@@ -46,7 +46,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         this.dragPoint = { startX: 0, startY: 0, endX: 0, endY: 0 }; // updates drag start and end points in mousedown and mousemove
         this.diffPoint = { x: 0, y: 0 }; // updates resize points
         this.oldPoint = {};
-        this.zoomedImg = { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 }; // calculates zoomed image's points
         this.objColl = []; // shapes, text obj collection
         this.undoRedoColl = [];
         this.imgDataColl = []; // collection of Image Data mainly used for reset state
@@ -2096,8 +2095,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
     }
     updateCanvas() {
-        this.zoomedImg.width = this.baseImg.width;
-        this.zoomedImg.height = this.baseImg.height;
         this.lastX = this.baseImg.width / 2;
         this.lastY = this.baseImg.height / 2;
         let wrapperWidth;
@@ -2109,12 +2106,21 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             wrapperWidth = this.element.clientWidth;
         }
         const maxDimension = this.calcMaxDimension(this.baseImg.width, this.baseImg.height);
+        let toolbarHeight = 0;
+        if (!isNullOrUndefined(this.toolbarTemplate) && !isNullOrUndefined(document.querySelector('.e-toolbar'))) {
+            toolbarHeight = document.querySelector('.e-toolbar').clientHeight;
+            maxDimension.width -= toolbarHeight;
+            maxDimension.height -= toolbarHeight;
+        }
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.lowerCanvas.width = this.upperCanvas.width = this.inMemoryCanvas.width = this.baseImg.width;
         this.lowerCanvas.height = this.upperCanvas.height = this.inMemoryCanvas.height = this.baseImg.height;
         this.lowerCanvas.style.maxWidth = this.upperCanvas.style.maxWidth = maxDimension.width + 'px';
         this.lowerCanvas.style.maxHeight = this.upperCanvas.style.maxHeight = maxDimension.height + 'px';
         this.lowerCanvas.style.left = this.upperCanvas.style.left = (wrapperWidth - maxDimension.width) / 2 + 1 + 'px';
+        if (!isNullOrUndefined(this.toolbarTemplate)) {
+            this.lowerCanvas.style.left = parseFloat(this.lowerCanvas.style.left) + (toolbarHeight / 2) + 'px';
+        }
         if (canvasWrapper) {
             this.lowerCanvas.style.top = this.upperCanvas.style.top = (parseFloat(canvasWrapper.style.height) - maxDimension.height - 1) / 2 + 'px';
         }
@@ -2517,6 +2523,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         EventHandler.add(this.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this); // Unbind mousedown to prevent double triggers from touch devices
     }
     mouseDownEventHandler(e) {
+        if (e.type === 'touchstart' && e.currentTarget === this.lowerCanvas && this.imgDataColl.length === 0) {
+            return;
+        }
         const ratio = this.calcRatio();
         if (this.dragCanvas) {
             this.canvasMouseDownHandler(e);
@@ -2827,6 +2836,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
         this.lowerCanvas.width = this.upperCanvas.width = this.element.offsetWidth;
         this.lowerCanvas.height = this.upperCanvas.height = this.element.offsetHeight;
+        const canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
+        if (!isNullOrUndefined(canvasWrapper)) {
+            canvasWrapper.style.width = this.element.offsetWidth + 'px';
+            canvasWrapper.style.height = this.element.offsetHeight + 'px';
+            if (Browser.isDevice) {
+                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - (2 * this.toolbarHeight)) - 3 + 'px';
+            }
+            else {
+                canvasWrapper.style.height = (parseFloat(canvasWrapper.style.height) - this.toolbarHeight) - 3 + 'px';
+            }
+        }
         this.redrawImg();
         // eslint-disable-next-line @typescript-eslint/tslint/config
         this.lowerCanvas.toBlob(function (blob) {
@@ -2841,7 +2861,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
     screenOrientation() {
         if (Browser.isDevice) {
             this.isScreenOriented = true;
-            this.adjustToScreen();
+            setTimeout(this.adjustToScreen.bind(this), 100);
         }
     }
     windowResizeHandler() {
@@ -3637,24 +3657,28 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 this.textBox.value = actObj.keyHistory;
                 this.textBox.style.overflow = 'hidden';
                 this.textBox.style.height = 'auto';
-                this.setTextBoxWidth();
-                this.setTextBoxHeight();
                 if (degree % 90 === 0 && degree % 180 !== 0 && degree !== 0) {
                     if (this.factor === 1) {
+                        this.textBox.style.width = (actObj.activePoint.height / ratio.height) + 'px';
                         this.textBox.style.height = (actObj.activePoint.width / ratio.width) + 'px';
                     }
                     else {
+                        this.textBox.style.width = actObj.activePoint.height + 'px';
                         this.textBox.style.height = actObj.activePoint.width + 'px';
                     }
                 }
                 else {
                     if (this.factor === 1) {
+                        this.textBox.style.width = (actObj.activePoint.width / ratio.width) + 'px';
                         this.textBox.style.height = (actObj.activePoint.height / ratio.height) + 'px';
                     }
                     else {
+                        this.textBox.style.width = actObj.activePoint.width + 'px';
                         this.textBox.style.height = actObj.activePoint.height + 'px';
                     }
                 }
+                this.setTextBoxWidth();
+                this.setTextBoxHeight();
             }
             else {
                 this.applyActObj();
@@ -3687,42 +3711,55 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
         if (degree === 0) {
             if (flip.toLowerCase() === 'vertical') {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.lowerCanvas.style.maxHeight)
+                    - parseFloat(this.textBox.style.top))) + 'px';
             }
             else {
                 textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
-                this.textBox.style.maxHeight = ((this.lowerCanvas.height / ratio.height) - textBoxTop) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
             }
         }
         else if (degree === 90) {
             if (flip.toLowerCase() === 'horizontal') {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
+                    - parseFloat(this.lowerCanvas.style.left))) + 'px';
             }
             else {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
+                    - parseFloat(this.lowerCanvas.style.left)) + 'px';
             }
         }
         else if (degree === 180) {
             if (flip.toLowerCase() === 'vertical') {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.height - actObj.activePoint.startY) / ratio.height) + 'px';
+                textBoxTop = parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top);
+                this.textBox.style.maxHeight = (parseFloat(this.lowerCanvas.style.maxHeight) - textBoxTop) + 'px';
             }
             else {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.height - (this.lowerCanvas.height - actObj.activePoint.endY)) / ratio.height) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.textBox.style.top)
+                    - parseFloat(this.lowerCanvas.style.top)) + 'px';
             }
         }
         else if (degree === 270) {
             if (flip.toLowerCase() === 'horizontal') {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.width - (this.lowerCanvas.width - actObj.activePoint.endX)) / ratio.width) + 'px';
+                this.textBox.style.maxHeight = (parseFloat(this.textBox.style.left)
+                    - parseFloat(this.lowerCanvas.style.left)) + 'px';
             }
             else {
-                this.textBox.style.maxHeight = ((this.lowerCanvas.width - actObj.activePoint.startX) / ratio.width) + 'px';
+                this.textBox.style.maxHeight = parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
+                    - parseFloat(this.lowerCanvas.style.left)) + 'px';
             }
         }
-        this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) * this.factor + 'px';
+        this.textBox.style.maxHeight = ((parseFloat(this.textBox.style.maxHeight) - parseFloat(this.textBox.style.fontSize) * 0.5)) + 'px';
     }
     setTextBoxWidth(e) {
         const ratio = this.calcRatio();
         const text = this.getMaxText(true);
+        if (this.textBox.style.display === 'block') {
+            this.updateFontStyles(true);
+        }
+        else {
+            this.updateFontStyles();
+        }
         let textBoxWidth = (this.upperContext.measureText(text).width + (parseFloat(this.textBox.style.fontSize) / 2));
         let letterWidth = e ? this.upperContext.measureText(String.fromCharCode(e.which)).width : 0;
         let actObj = extend({}, this.activeObj, {}, true);
@@ -3749,56 +3786,56 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         if ((!isNullOrUndefined(e) && parseFloat(this.textBox.style.width) < (textBoxWidth + letterWidth)) || isNullOrUndefined(e)) {
             if (degree === 0) {
                 if (flip.toLowerCase() === 'horizontal') {
-                    if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
+                    if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
                 else {
-                    if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
+                    if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
+                        - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
             }
             else if (degree === 90) {
                 if (flip.toLowerCase() === 'vertical') {
-                    if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
+                    if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
                 else {
-                    if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
+                    if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
+                        - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
             }
             else if (degree === 180) {
                 if (flip.toLowerCase() === 'horizontal') {
-                    if (textBoxWidth + letterWidth + actObj.activePoint.startX < this.lowerCanvas.width) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
+                    if ((parseFloat(this.lowerCanvas.style.maxWidth) - (parseFloat(this.textBox.style.left)
+                        - parseFloat(this.lowerCanvas.style.left))) > (textBoxWidth + letterWidth)) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
                 else {
-                    if (actObj.activePoint.endX - textBoxWidth - letterWidth > 0) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.width) + 'px';
+                    if ((parseFloat(this.textBox.style.left) - parseFloat(this.lowerCanvas.style.left)) - textBoxWidth - letterWidth > 0) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
             }
             else if (degree === 270) {
                 if (flip.toLowerCase() === 'vertical') {
-                    if (textBoxWidth + letterWidth + actObj.activePoint.startY < this.lowerCanvas.height) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
+                    if ((parseFloat(this.lowerCanvas.style.maxHeight) - (parseFloat(this.textBox.style.top)
+                        - parseFloat(this.lowerCanvas.style.top))) > (textBoxWidth + letterWidth)) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
                 else {
-                    if (actObj.activePoint.endY - textBoxWidth - letterWidth > 0) {
-                        this.textBox.style.width = ((textBoxWidth + letterWidth) / ratio.height) + 'px';
+                    if ((parseFloat(this.textBox.style.top) - parseFloat(this.lowerCanvas.style.top)) - textBoxWidth - letterWidth > 0) {
+                        this.textBox.style.width = (textBoxWidth + letterWidth) + 'px';
                     }
                 }
             }
-            this.textBox.style.width = parseFloat(this.textBox.style.width) * this.factor + 'px';
-            if (isNullOrUndefined(e)) {
-                this.textBox.style.width = parseFloat(this.textBox.style.width) + parseFloat(this.textBox.style.fontSize) + 'px';
-            }
         }
     }
     setActivePoint(startX, startY) {
@@ -5764,7 +5801,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             this.setActivePoint(width, height);
         }
     }
-    updateFontStyles() {
+    updateFontStyles(isTextBox) {
         this.upperContext.strokeStyle = this.activeObj.strokeSettings.strokeColor;
         this.upperContext.fillStyle = this.activeObj.strokeSettings.strokeColor;
         let textStyle = '';
@@ -5777,7 +5814,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         if (this.activeObj.textSettings.bold && this.activeObj.textSettings.italic) {
             textStyle = 'italic bold ';
         }
-        const fontSize = this.activeObj.textSettings.fontSize;
+        const fontSize = isTextBox ? parseFloat(this.textBox.style.fontSize) : this.activeObj.textSettings.fontSize;
         const fontFamily = this.textBox.style.display === 'block' ? this.textBox.style.fontFamily : this.activeObj.textSettings.fontFamily;
         this.upperContext.font = textStyle + fontSize + 'px' + ' ' + fontFamily;
     }
@@ -5893,24 +5930,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             this.degree = 0;
         }
     }
-    redrawSelection(isZoomed) {
+    redrawSelection() {
         const ratio = this.calcRatio();
-        if (isZoomed) {
-            this.activeObj.activePoint.startX = (this.lowerCanvas.width - this.zoomedImg.width) / 2;
-            this.activeObj.activePoint.startY = (this.lowerCanvas.height - this.zoomedImg.height) / 2;
-            this.activeObj.activePoint.endX = this.activeObj.activePoint.startX + this.zoomedImg.width;
-            this.activeObj.activePoint.endY = this.activeObj.activePoint.startY + this.zoomedImg.height;
-            this.activeObj.activePoint.width = this.zoomedImg.width;
-            this.activeObj.activePoint.height = this.zoomedImg.height;
-        }
-        else {
-            this.activeObj.activePoint.startX = 0;
-            this.activeObj.activePoint.startY = 0;
-            this.activeObj.activePoint.endX = this.lowerCanvas.width;
-            this.activeObj.activePoint.endY = this.lowerCanvas.height;
-            this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
-            this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
-        }
+        this.activeObj.activePoint.startX = 0;
+        this.activeObj.activePoint.startY = 0;
+        this.activeObj.activePoint.endX = this.lowerCanvas.width;
+        this.activeObj.activePoint.endY = this.lowerCanvas.height;
+        this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
+        this.activeObj.activePoint.height = this.activeObj.activePoint.endY - this.activeObj.activePoint.startY;
         this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
         this.drawObject('duplicate', this.activeObj);
     }
@@ -6720,7 +6747,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 (isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')))) {
                 this.toolbarHeight = 0;
             }
-            this.update();
+            if (isNullOrUndefined(this.toolbarTemplate)) {
+                this.update();
+            }
             const type = typeof (data);
             if (type === 'string') {
                 this.imageOnLoad(data);
@@ -7187,7 +7216,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
             this.currObjType.isCustomCrop = false;
             const start = { x: x, y: y };
-            this.drawShape('circle', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
+            this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
         }
         return isEllipse;
     }
@@ -7431,6 +7460,125 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
     }
+    /**
+     * To check whether the undo collection is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    canUndo() {
+        return super.canUndo();
+    }
+    /**
+     * To check whether the redo collection is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    canRedo() {
+        return super.canRedo();
+    }
+    /**
+     * Erases all the signature strokes signed by user.
+     *
+     * @returns {void}.
+     * @private
+     */
+    clear() {
+        super.clear();
+    }
+    /**
+     * To draw the signature based on the given text, with the font family and font size.
+     *
+     * @param {string} text - specify text to be drawn as signature.
+     * @param {string} fontFamily - specify font family of a signature.
+     * @param {number} fontSize - specify font size of a signature.
+     *
+     * @returns {void}.
+     * @private
+     */
+    draw(text, fontFamily, fontSize) {
+        super.draw(text, fontFamily, fontSize);
+    }
+    /**
+     * To get the signature as Blob.
+     *
+     * @param {string} url - specify the url/base 64 string to get blob of the signature.
+     * @returns {Blob}.
+     * @private
+     */
+    getBlob(url) {
+        return super.getBlob(url);
+    }
+    /**
+     * To check whether the signature is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    isEmpty() {
+        return super.isEmpty();
+    }
+    /**
+     * To load the signature with the given base 64 string, height and width.
+     *
+     * @param {string} signature - specify the url/base 64 string to be drawn as signature.
+     * @param {number} width - specify the width of the loaded signature image.
+     * @param {number} height - specify the height of the loaded signature image.
+     * @returns {void}.
+     * @private
+     */
+    load(signature, width, height) {
+        super.load(signature, width, height);
+    }
+    /**
+     * Undo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    undo() {
+        super.undo();
+    }
+    /**
+     * Redo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    redo() {
+        super.redo();
+    }
+    /**
+     * To save the signature with the given file type and file name.
+     *
+     * @param {SignatureFileType} type - specify type of the file to be saved a signature.
+     * @param {string} fileName - specify name of the file to be saved a signature.
+     *
+     * @returns {void}.
+     * @private
+     */
+    save(type, fileName) {
+        super.save(type, fileName);
+    }
+    /**
+     * To save the signature as Blob.
+     *
+     * @returns {Blob}.
+     * @private
+     */
+    saveAsBlob() {
+        return super.saveAsBlob();
+    }
+    /**
+     * Returns the persistence data for component.
+     *
+     * @returns any.
+     * @private
+     */
+    getLocalData() {
+        return super.getLocalData();
+    }
 };
 __decorate([
     Property('')
@@ -7453,6 +7601,36 @@ __decorate([
 __decorate([
     Property('100%')
 ], ImageEditor.prototype, "width", void 0);
+__decorate([
+    Property('')
+], ImageEditor.prototype, "backgroundColor", void 0);
+__decorate([
+    Property('')
+], ImageEditor.prototype, "backgroundImage", void 0);
+__decorate([
+    Property(false)
+], ImageEditor.prototype, "isReadOnly", void 0);
+__decorate([
+    Property(true)
+], ImageEditor.prototype, "saveWithBackground", void 0);
+__decorate([
+    Property('#000000')
+], ImageEditor.prototype, "strokeColor", void 0);
+__decorate([
+    Property(0.5)
+], ImageEditor.prototype, "minStrokeWidth", void 0);
+__decorate([
+    Property(2)
+], ImageEditor.prototype, "maxStrokeWidth", void 0);
+__decorate([
+    Property(0.7)
+], ImageEditor.prototype, "velocity", void 0);
+__decorate([
+    Property(false)
+], ImageEditor.prototype, "enableRtl", void 0);
+__decorate([
+    Property(false)
+], ImageEditor.prototype, "enablePersistence", void 0);
 __decorate([
     Event()
 ], ImageEditor.prototype, "beforeSave", void 0);