@syncfusion/ej2-image-editor 20.3.48 → 20.3.56

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

@@ -24,7 +24,7 @@ import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { ColorPicker, Uploader } from '@syncfusion/ej2-inputs';
 import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
-import { compile, compile as templateCompiler, Browser } from '@syncfusion/ej2-base';
+import { compile, compile as templateCompiler, Browser, detach, select } from '@syncfusion/ej2-base';
 /**
  * Image Editor is a graphical user interface that helps to edit an image by performing actions like selection,
  * cropping, rotating, inserting text and shapes (rectangles, ellipses, lines), and drawing free hand on top of an image.
@@ -262,6 +262,7 @@ var ImageEditor = /** @class */ (function (_super) {
         if (!this.element.getAttribute('class')) {
             this.element.removeAttribute('class');
         }
+        this.destroySubComponents();
         this.unwireEvent();
         _super.prototype.destroy.call(this);
         this.element.innerHTML = '';
@@ -328,6 +329,27 @@ var ImageEditor = /** @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);
@@ -1057,7 +1079,9 @@ var ImageEditor = /** @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;
@@ -1673,75 +1697,9 @@ var ImageEditor = /** @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);
@@ -2141,12 +2099,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';
         }
@@ -2921,7 +2888,7 @@ var ImageEditor = /** @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;
         };
@@ -2962,7 +2929,7 @@ var ImageEditor = /** @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;
@@ -6090,22 +6057,6 @@ var ImageEditor = /** @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();
@@ -6441,6 +6392,51 @@ var ImageEditor = /** @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.
      *
@@ -6776,7 +6772,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);
@@ -6887,8 +6885,6 @@ var ImageEditor = /** @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)) {
@@ -6900,32 +6896,40 @@ var ImageEditor = /** @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 };
@@ -6941,11 +6945,11 @@ var ImageEditor = /** @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;
     };
     /**
@@ -6978,8 +6982,8 @@ var ImageEditor = /** @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;
@@ -7089,7 +7093,8 @@ var ImageEditor = /** @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) {
@@ -7103,6 +7108,16 @@ var ImageEditor = /** @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.
      *
@@ -7244,7 +7259,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;
     };
@@ -7383,7 +7398,15 @@ var ImageEditor = /** @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;
@@ -7488,6 +7511,137 @@ 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 false;
+    };
+    /**
+     * To check whether the redo collection is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    ImageEditor.prototype.canRedo = function () {
+        return false;
+    };
+    /**
+     * Erases all the signature strokes signed by user.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.clear = function () {
+        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.
+     *
+     * @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) {
+        if (this.getModuleName() !== 'image-editor') {
+            _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 null;
+    };
+    /**
+     * To check whether the signature is empty or not.
+     *
+     * @returns {boolean}.
+     * @private
+     */
+    ImageEditor.prototype.isEmpty = function () {
+        return false;
+    };
+    /**
+     * 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) {
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.load.call(this, signature, width, height);
+        }
+    };
+    /**
+     * Undo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.undo = function () {
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.undo.call(this);
+        }
+    };
+    /**
+     * Redo the last user action.
+     *
+     * @returns {void}.
+     * @private
+     */
+    ImageEditor.prototype.redo = function () {
+        if (this.getModuleName() !== 'image-editor') {
+            _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) {
+        if (this.getModuleName() !== 'image-editor') {
+            _super.prototype.save.call(this, type, fileName);
+        }
+    };
+    /**
+     * To save the signature as Blob.
+     *
+     * @returns {Blob}.
+     * @private
+     */
+    ImageEditor.prototype.saveAsBlob = function () {
+        return null;
+    };
+    /**
+     * Returns the persistence data for component.
+     *
+     * @returns any.
+     * @private
+     */
+    ImageEditor.prototype.getLocalData = function () {
+        return null;
+    };
     var ImageEditor_1;
     __decorate([
         Property('')
@@ -7510,6 +7664,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);

package/styles/image-editor/bootstrap-dark.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap-dark-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap-dark-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';

package/styles/image-editor/bootstrap.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap-definition.scss';
 @import 'bootstrap-definition.scss';

package/styles/image-editor/bootstrap4.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap4-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap4-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap4-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap4-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap4-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap4-definition.scss';
 @import 'bootstrap4-definition.scss';

package/styles/image-editor/bootstrap5-dark.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap5-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap5-dark-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap5-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap5-dark-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap5-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap5-dark-definition.scss';
 @import 'bootstrap5-dark-definition.scss';

package/styles/image-editor/bootstrap5.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/bootstrap5-definition.scss';
 @import 'ej2-inputs/styles/uploader/bootstrap5-definition.scss';
 @import 'ej2-popups/styles/tooltip/bootstrap5-definition.scss';
+@import 'ej2-inputs/styles/color-picker/bootstrap5-definition.scss';
 @import 'ej2-navigations/styles/toolbar/bootstrap5-definition.scss';
 @import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';
 @import 'bootstrap5-definition.scss';

package/styles/image-editor/fabric-dark.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/fabric-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/fabric-dark-definition.scss';
 @import 'ej2-popups/styles/tooltip/fabric-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/fabric-dark-definition.scss';
 @import 'ej2-navigations/styles/toolbar/fabric-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/fabric-dark-definition.scss';
 @import 'fabric-dark-definition.scss';

package/styles/image-editor/fabric.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/fabric-definition.scss';
 @import 'ej2-inputs/styles/uploader/fabric-definition.scss';
 @import 'ej2-popups/styles/tooltip/fabric-definition.scss';
+@import 'ej2-inputs/styles/color-picker/fabric-definition.scss';
 @import 'ej2-navigations/styles/toolbar/fabric-definition.scss';
 @import 'ej2-popups/styles/spinner/fabric-definition.scss';
 @import 'fabric-definition.scss';

package/styles/image-editor/fluent-dark.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/fluent-dark-definition.scss';
 @import 'ej2-inputs/styles/uploader/fluent-dark-definition.scss';
 @import 'ej2-popups/styles/tooltip/fluent-dark-definition.scss';
+@import 'ej2-inputs/styles/color-picker/fluent-dark-definition.scss';
 @import 'ej2-navigations/styles/toolbar/fluent-dark-definition.scss';
 @import 'ej2-popups/styles/spinner/fluent-dark-definition.scss';
 @import 'fluent-dark-definition.scss';

package/styles/image-editor/fluent.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/fluent-definition.scss';
 @import 'ej2-inputs/styles/uploader/fluent-definition.scss';
 @import 'ej2-popups/styles/tooltip/fluent-definition.scss';
+@import 'ej2-inputs/styles/color-picker/fluent-definition.scss';
 @import 'ej2-navigations/styles/toolbar/fluent-definition.scss';
 @import 'ej2-popups/styles/spinner/fluent-definition.scss';
 @import 'fluent-definition.scss';

package/styles/image-editor/highcontrast-light.scss

@@ -5,6 +5,7 @@
 @import 'ej2-inputs/styles/textbox/highcontrast-light-definition.scss';
 @import 'ej2-inputs/styles/uploader/highcontrast-light-definition.scss';
 @import 'ej2-popups/styles/tooltip/highcontrast-light-definition.scss';
+@import 'ej2-inputs/styles/color-picker/highcontrast-light-definition.scss';
 @import 'ej2-navigations/styles/toolbar/highcontrast-light-definition.scss';
 @import 'ej2-popups/styles/spinner/highcontrast-light-definition.scss';
 @import 'highcontrast-light-definition.scss';