@syncfusion/ej2-image-editor 20.3.47 → 20.3.50

package/src/image-editor/image-editor.js

@@ -61,7 +61,6 @@ var ImageEditor = /** @class */ (function (_super) {
         _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
@@ -2131,8 +2130,6 @@ var ImageEditor = /** @class */ (function (_super) {
         }
     };
     ImageEditor.prototype.updateCanvas = function () {
-        this.zoomedImg.width = this.baseImg.width;
-        this.zoomedImg.height = this.baseImg.height;
         this.lastX = this.baseImg.width / 2;
         this.lastY = this.baseImg.height / 2;
         var wrapperWidth;
@@ -2144,12 +2141,21 @@ var ImageEditor = /** @class */ (function (_super) {
             wrapperWidth = this.element.clientWidth;
         }
         var maxDimension = this.calcMaxDimension(this.baseImg.width, this.baseImg.height);
+        var 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';
         }
@@ -2553,6 +2559,9 @@ var ImageEditor = /** @class */ (function (_super) {
         EventHandler.add(this.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this); // Unbind mousedown to prevent double triggers from touch devices
     };
     ImageEditor.prototype.mouseDownEventHandler = function (e) {
+        if (e.type === 'touchstart' && e.currentTarget === this.lowerCanvas && this.imgDataColl.length === 0) {
+            return;
+        }
         var ratio = this.calcRatio();
         if (this.dragCanvas) {
             this.canvasMouseDownHandler(e);
@@ -2864,6 +2873,17 @@ var ImageEditor = /** @class */ (function (_super) {
         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;
+        var 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) {
@@ -2878,7 +2898,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.screenOrientation = function () {
         if (Browser.isDevice) {
             this.isScreenOriented = true;
-            this.adjustToScreen();
+            setTimeout(this.adjustToScreen.bind(this), 100);
         }
     };
     ImageEditor.prototype.windowResizeHandler = function () {
@@ -3675,24 +3695,28 @@ var ImageEditor = /** @class */ (function (_super) {
                 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();
@@ -3725,42 +3749,55 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         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';
     };
     ImageEditor.prototype.setTextBoxWidth = function (e) {
         var ratio = this.calcRatio();
         var text = this.getMaxText(true);
+        if (this.textBox.style.display === 'block') {
+            this.updateFontStyles(true);
+        }
+        else {
+            this.updateFontStyles();
+        }
         var textBoxWidth = (this.upperContext.measureText(text).width + (parseFloat(this.textBox.style.fontSize) / 2));
         var letterWidth = e ? this.upperContext.measureText(String.fromCharCode(e.which)).width : 0;
         var actObj = extend({}, this.activeObj, {}, true);
@@ -3787,56 +3824,56 @@ var ImageEditor = /** @class */ (function (_super) {
         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';
-            }
         }
     };
     ImageEditor.prototype.setActivePoint = function (startX, startY) {
@@ -5802,7 +5839,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.setActivePoint(width, height);
         }
     };
-    ImageEditor.prototype.updateFontStyles = function () {
+    ImageEditor.prototype.updateFontStyles = function (isTextBox) {
         this.upperContext.strokeStyle = this.activeObj.strokeSettings.strokeColor;
         this.upperContext.fillStyle = this.activeObj.strokeSettings.strokeColor;
         var textStyle = '';
@@ -5815,7 +5852,7 @@ var ImageEditor = /** @class */ (function (_super) {
         if (this.activeObj.textSettings.bold && this.activeObj.textSettings.italic) {
             textStyle = 'italic bold ';
         }
-        var fontSize = this.activeObj.textSettings.fontSize;
+        var fontSize = isTextBox ? parseFloat(this.textBox.style.fontSize) : this.activeObj.textSettings.fontSize;
         var fontFamily = this.textBox.style.display === 'block' ? this.textBox.style.fontFamily : this.activeObj.textSettings.fontFamily;
         this.upperContext.font = textStyle + fontSize + 'px' + ' ' + fontFamily;
     };
@@ -5931,24 +5968,14 @@ var ImageEditor = /** @class */ (function (_super) {
             this.degree = 0;
         }
     };
-    ImageEditor.prototype.redrawSelection = function (isZoomed) {
+    ImageEditor.prototype.redrawSelection = function () {
         var 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);
     };
@@ -6758,7 +6785,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 (isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')))) {
                 this.toolbarHeight = 0;
             }
-            this.update();
+            if (isNullOrUndefined(this.toolbarTemplate)) {
+                this.update();
+            }
             var type = typeof (data);
             if (type === 'string') {
                 this.imageOnLoad(data);
@@ -7226,7 +7255,7 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.currObjType.isCustomCrop = false;
             var 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;
     };
@@ -7470,6 +7499,125 @@ var ImageEditor = /** @class */ (function (_super) {
         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
+     */
+    ImageEditor.prototype.canUndo = function () {
+        return _super.prototype.canUndo.call(this);
+    };
+    /**
+     * To check whether the redo collection is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    ImageEditor.prototype.canRedo = function () {
+        return _super.prototype.canRedo.call(this);
+    };
+    /**
+     * Erases all the signature strokes signed by user.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.clear = function () {
+        _super.prototype.clear.call(this);
+    };
+    /**
+     * 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
+     */
+    ImageEditor.prototype.draw = function (text, fontFamily, fontSize) {
+        _super.prototype.draw.call(this, 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
+     */
+    ImageEditor.prototype.getBlob = function (url) {
+        return _super.prototype.getBlob.call(this, url);
+    };
+    /**
+     * To check whether the signature is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    ImageEditor.prototype.isEmpty = function () {
+        return _super.prototype.isEmpty.call(this);
+    };
+    /**
+     * 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
+     */
+    ImageEditor.prototype.load = function (signature, width, height) {
+        _super.prototype.load.call(this, signature, width, height);
+    };
+    /**
+     * Undo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.undo = function () {
+        _super.prototype.undo.call(this);
+    };
+    /**
+     * Redo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.redo = function () {
+        _super.prototype.redo.call(this);
+    };
+    /**
+     * 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
+     */
+    ImageEditor.prototype.save = function (type, fileName) {
+        _super.prototype.save.call(this, type, fileName);
+    };
+    /**
+     * To save the signature as Blob.
+     *
+     * @returns {Blob}.
+     * @private
+     */
+    ImageEditor.prototype.saveAsBlob = function () {
+        return _super.prototype.saveAsBlob.call(this);
+    };
+    /**
+     * Returns the persistence data for component.
+     *
+     * @returns any.
+     * @private
+     */
+    ImageEditor.prototype.getLocalData = function () {
+        return _super.prototype.getLocalData.call(this);
+    };
     var ImageEditor_1;
     __decorate([
         Property('')
@@ -7492,6 +7640,36 @@ var ImageEditor = /** @class */ (function (_super) {
     __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);