@syncfusion/ej2-image-editor 20.3.48 → 20.3.56

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

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