@syncfusion/ej2-image-editor 20.3.56 → 20.4.38

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

@@ -22,9 +22,41 @@ import { Event, EventHandler, getComponent, getInstance, isNullOrUndefined, L10n
 import { SignatureBase } from '@syncfusion/ej2-inputs';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
-import { ColorPicker, Uploader } from '@syncfusion/ej2-inputs';
+import { ColorPicker, Uploader, Slider } from '@syncfusion/ej2-inputs';
 import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
-import { compile, compile as templateCompiler, Browser, detach, select } from '@syncfusion/ej2-base';
+import { Complex, compile, compile as templateCompiler, Browser, detach, select, ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * Interface for image finetune values.
+ */
+var FinetuneSettings = /** @class */ (function (_super) {
+    __extends(FinetuneSettings, _super);
+    function FinetuneSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(null)
+    ], FinetuneSettings.prototype, "brightness", void 0);
+    __decorate([
+        Property(null)
+    ], FinetuneSettings.prototype, "contrast", void 0);
+    __decorate([
+        Property(null)
+    ], FinetuneSettings.prototype, "hue", void 0);
+    __decorate([
+        Property(null)
+    ], FinetuneSettings.prototype, "saturation", void 0);
+    __decorate([
+        Property(null)
+    ], FinetuneSettings.prototype, "exposure", void 0);
+    __decorate([
+        Property(null)
+    ], FinetuneSettings.prototype, "opacity", void 0);
+    __decorate([
+        Property(null)
+    ], FinetuneSettings.prototype, "blur", void 0);
+    return FinetuneSettings;
+}(ChildProperty));
+export { FinetuneSettings };
 /**
  * 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.
@@ -51,7 +83,6 @@ var ImageEditor = /** @class */ (function (_super) {
     function ImageEditor(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.degree = 0; // current rotated state
-        _this.isUndoRedo = false;
         _this.dragCanvas = false;
         _this.dragElement = '';
         _this.keyHistory = ''; // text history
@@ -72,24 +103,18 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.pannStart = {};
         _this.pannEnd = {};
         _this.togglePan = false;
+        _this.disablePan = false;
         _this.lastX = 0;
         _this.lastY = 0;
         _this.dragStart = { x: 0, y: 0 };
-        _this.dragged = false;
         _this.factor = 1; // current zoomed state
         _this.currFlipState = '';
         _this.touchEndPoint = {};
-        _this.flipMethod = false;
-        _this.flipDirection = '';
         _this.prevX = 0;
         _this.currX = 0;
         _this.prevY = 0;
         _this.currY = 0;
         _this.togglePen = false;
-        _this.rotateMethod = false;
-        _this.isBoldbtn = false;
-        _this.isItalicbtn = false;
-        _this.lastAction = '';
         _this.currentToolbar = 'main';
         _this.textStartPoints = { x: 0, y: 0 };
         _this.fontSizeColl = [];
@@ -100,11 +125,29 @@ var ImageEditor = /** @class */ (function (_super) {
         _this.activeObj = { activePoint: { startX: 0, startY: 0, endX: 0, endY: 0, width: 0, height: 0 },
             flipObjColl: [] };
         _this.currObjType = { shape: '', isDragging: false, isActiveObj: false, isText: false, isInitialText: false, isLine: false,
-            isInitialLine: false, isCustomCrop: false, isZoomed: false };
+            isInitialLine: false, isCustomCrop: false, isZoomed: false, isFiltered: false, isSave: false };
         _this.defToolbarItems = [];
-        _this.baseImgSrc = '';
+        _this.baseImgSrc = {};
         _this.isTimer = false;
         _this.isScreenOriented = false;
+        _this.isFirstMove = false;
+        _this.startTouches = [];
+        _this.tempTouches = [];
+        _this.adjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
+            exposure: 0, sharpen: false, bw: false };
+        _this.tempAdjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
+            exposure: 0, sharpen: false, bw: false };
+        _this.adjustmentValue = '';
+        _this.initialAdjustmentValue = '';
+        _this.tempAdjustmentValue = '';
+        _this.currentFilter = '';
+        _this.tempFilter = '';
+        _this.canvasFilter = '';
+        _this.sharpenedImgData = false;
+        _this.tempSharpenFilter = false;
+        _this.tempBWFilter = false;
+        _this.isBrightnessAdjusted = false;
+        _this.isInitialLoading = false;
         return _this;
     }
     ImageEditor_1 = ImageEditor;
@@ -134,8 +177,28 @@ var ImageEditor = /** @class */ (function (_super) {
             Crop: 'Crop',
             ZoomIn: 'Zoom In',
             ZoomOut: 'Zoom Out',
+            Undo: 'Undo',
+            Redo: 'Redo',
             Transform: 'Transform',
             Annotation: 'Annotation',
+            Finetune: 'Finetune',
+            Brightness: 'Brightness',
+            Contrast: 'Contrast',
+            Hue: 'Hue',
+            Saturation: 'Saturation',
+            Opacity: 'Opacity',
+            Blur: 'Blur',
+            Sharpen: 'Sharpen',
+            Exposure: 'Exposure',
+            Filter: 'Filter',
+            Default: 'Default',
+            Chrome: 'Chrome',
+            Cold: 'Cold',
+            Warm: 'Warm',
+            Grayscale: 'Grayscale',
+            BlackAndWhite: 'Black and White',
+            Sepia: 'Sepia',
+            Invert: 'Invert',
             Text: 'Add Text',
             Pen: 'Pen',
             Reset: 'Reset',
@@ -163,7 +226,6 @@ var ImageEditor = /** @class */ (function (_super) {
             Ellipse: 'Ellipse',
             Rectangle: 'Rectangle',
             Line: 'Line',
-            Default: 'Default',
             Bold: 'Bold',
             Italic: 'Italic',
             BoldItalic: 'Bold Italic',
@@ -172,7 +234,8 @@ var ImageEditor = /** @class */ (function (_super) {
             Medium: 'Medium',
             Large: 'Large',
             XLarge: 'X-Large',
-            ABC: 'ABC'
+            ABC: 'ABC',
+            Browse: 'Browse'
         };
         this.l10n = new L10n('image-editor', this.defaultLocale, this.locale);
     };
@@ -249,6 +312,12 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.upperContext.fillStyle = this.themeColl[this.theme]['secondaryColor'];
                     }
                     break;
+                case 'finetuneSettings':
+                    if (newProperties.finetuneSettings) {
+                        this.finetuneSettings = newProperties.finetuneSettings;
+                        this.updateFinetunes();
+                    }
+                    break;
             }
         }
     };
@@ -269,13 +338,17 @@ var ImageEditor = /** @class */ (function (_super) {
         this.trigger('destroyed');
     };
     ImageEditor.prototype.initialize = function () {
+        this.updateFinetunes();
         this.createToolbar();
+        this.createContextualToolbar();
         this.createCanvas();
         this.wireEvent();
         this.updateContext(this.lowerContext);
         this.updateContext(this.upperContext);
         this.pannStart = { startX: 0, startY: 0, width: 0, height: 0 };
         this.pannEnd = { startX: 0, startY: 0, width: 0, height: 0 };
+        this.lowerContext.filter = this.canvasFilter = this.initialAdjustmentValue = this.adjustmentValue = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
         if (this.cssClass) {
             addClass([this.element], this.cssClass.split(' '));
         }
@@ -285,6 +358,39 @@ var ImageEditor = /** @class */ (function (_super) {
             });
         }
     };
+    ImageEditor.prototype.updateFinetunes = function () {
+        if (this.finetuneSettings) {
+            if (this.finetuneSettings.brightness) {
+                this.adjustmentLevel.brightness = this.finetuneSettings.brightness.defaultValue;
+                this.tempAdjustmentLevel.brightness = this.finetuneSettings.brightness.defaultValue;
+            }
+            if (this.finetuneSettings.contrast) {
+                this.adjustmentLevel.contrast = this.finetuneSettings.contrast.defaultValue;
+                this.tempAdjustmentLevel.contrast = this.finetuneSettings.contrast.defaultValue;
+            }
+            if (this.finetuneSettings.hue) {
+                this.adjustmentLevel.hue = this.finetuneSettings.hue.defaultValue;
+                this.tempAdjustmentLevel.hue = this.finetuneSettings.hue.defaultValue;
+            }
+            if (this.finetuneSettings.saturation) {
+                this.adjustmentLevel.saturation = this.finetuneSettings.saturation.defaultValue;
+                this.tempAdjustmentLevel.saturation = this.finetuneSettings.saturation.defaultValue;
+            }
+            if (this.finetuneSettings.exposure) {
+                this.adjustmentLevel.exposure = this.finetuneSettings.exposure.defaultValue;
+                this.tempAdjustmentLevel.exposure = this.finetuneSettings.exposure.defaultValue;
+            }
+            if (this.finetuneSettings.opacity) {
+                this.adjustmentLevel.opacity = this.finetuneSettings.opacity.defaultValue;
+                this.tempAdjustmentLevel.opacity = this.finetuneSettings.opacity.defaultValue;
+            }
+            if (this.finetuneSettings.blur) {
+                this.adjustmentLevel.blur = this.finetuneSettings.blur.defaultValue;
+                this.tempAdjustmentLevel.blur = this.finetuneSettings.blur.defaultValue;
+            }
+            this.isInitialLoading = true;
+        }
+    };
     /**
      *
      * This Method will add events to component (element, event, method, current reference)
@@ -307,7 +413,7 @@ var ImageEditor = /** @class */ (function (_super) {
         EventHandler.add(this.upperCanvas, 'dblclick', this.findTextPoint, this);
         EventHandler.add(this.textBox, 'mousedown', this.findTextPoint, this);
         window.addEventListener('resize', this.windowResizeHandler.bind(this));
-        if ((!Browser.isIos && Browser.info.name !== 'safari')) {
+        if (!Browser.isIos && Browser.info.name !== 'safari' && screen && screen.orientation) {
             screen.orientation.addEventListener('change', this.screenOrientation.bind(this));
         }
     };
@@ -329,9 +435,17 @@ var ImageEditor = /** @class */ (function (_super) {
         EventHandler.remove(this.lowerCanvas, 'mouseup', this.canvasMouseUpHandler);
         EventHandler.remove(document, 'mouseup', this.canvasMouseUpHandler);
     };
+    ImageEditor.prototype.initializeFilter = function () {
+        this.setBrightness(this.adjustmentLevel.brightness);
+        this.setContrast(this.adjustmentLevel.contrast);
+        this.setHue(this.adjustmentLevel.hue);
+        this.setSaturation(this.adjustmentLevel.saturation);
+        this.setExposure(this.adjustmentLevel.exposure);
+        this.setOpacity(this.adjustmentLevel.opacity);
+        this.setBlur(this.adjustmentLevel.blur);
+    };
     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')) {
@@ -462,6 +576,58 @@ var ImageEditor = /** @class */ (function (_super) {
             this.toolbarHeight = 0;
         }
     };
+    ImageEditor.prototype.createContextualToolbar = function () {
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.length > 0)) {
+            this.element.appendChild(this.createElement('div', { id: this.element.id + '_contextualToolbarArea',
+                className: 'e-contextual-toolbar-wrapper e-hide', attrs: { style: 'position: absolute;' }
+            }));
+            var toolbarArea = document.getElementById(this.element.id + '_contextualToolbarArea');
+            var toolbar_2 = this.createElement('div', { id: this.element.id + '_contextualToolbar' });
+            toolbarArea.appendChild(toolbar_2);
+        }
+    };
+    ImageEditor.prototype.updateContextualToolbar = function (type, cType) {
+        if (this.toolbarTemplate) {
+            this.toolbarTemplateFn();
+        }
+        else {
+            var toolbarArea = this.element.querySelector('#' + this.element.id + '_toolbarArea');
+            var contextualToolbarArea = this.element.querySelector('#' + this.element.id + '_contextualToolbarArea');
+            if (!isNullOrUndefined(toolbarArea) && !isNullOrUndefined(contextualToolbarArea)) {
+                contextualToolbarArea.classList.remove('e-hide');
+                contextualToolbarArea.style.left = toolbarArea.offsetLeft + 'px';
+            }
+            if (type === 'filter') {
+                if (!isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')) && this.defToolbarItems.length > 0) {
+                    getComponent(document.getElementById(this.element.id + '_toolbar'), 'toolbar').destroy();
+                }
+                if (Browser.isDevice) {
+                    this.initToolbarItem(false, true, true);
+                }
+                else {
+                    this.initToolbarItem(true);
+                }
+                this.refreshSlider();
+                this.initFilterToolbarItem();
+            }
+            else {
+                if (!isNullOrUndefined(document.querySelector('#' + this.element.id + '_contextualToolbar'))
+                    && document.querySelector('#' + this.element.id + '_contextualToolbar').classList.contains('e-control')) {
+                    getComponent(document.getElementById(this.element.id + '_contextualToolbar'), 'toolbar').destroy();
+                }
+                this.refreshSlider();
+                this.renderSlider(cType);
+            }
+            if (Browser.isDevice) {
+                var cHt = contextualToolbarArea.offsetHeight;
+                var ht = this.element.querySelector('#' + this.element.id + '_canvasWrapper').offsetHeight;
+                contextualToolbarArea.style.top = this.toolbarHeight + ht - cHt + 'px';
+            }
+            else {
+                contextualToolbarArea.style.top = this.toolbarHeight + 1 + 'px';
+            }
+        }
+    };
     ImageEditor.prototype.createBottomToolbar = function () {
         if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.length > 0)) {
             this.element.appendChild(this.createElement('div', {
@@ -498,8 +664,8 @@ var ImageEditor = /** @class */ (function (_super) {
                 }, '#' + this.element.id + '_bottomToolbar');
                 if (this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(this.element.id + '_bottomToolbar')))) {
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    var toolbar_2 = getComponent(this.element.id + '_bottomToolbar', 'toolbar');
-                    toolbar_2.refreshOverflow();
+                    var toolbar_3 = getComponent(this.element.id + '_bottomToolbar', 'toolbar');
+                    toolbar_3.refreshOverflow();
                 }
             }
         }
@@ -602,6 +768,14 @@ var ImageEditor = /** @class */ (function (_super) {
                 template: '<button id="' + this.element.id + '_transformBtn"></button>'
             });
         }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Finetune') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_adjustment', prefixIcon: 'e-icons e-adjustment', cssClass: 'top-icon e-adjustment',
+                tooltipText: this.l10n.getConstant('Finetune'), align: 'Center' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Filter') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_filter', prefixIcon: 'e-icons e-filters', cssClass: 'top-icon e-filters',
+                tooltipText: this.l10n.getConstant('Filter'), align: 'Center' });
+        }
         var tempToolbarItems = this.processToolbar('center');
         for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
             toolbarItems.push(tempToolbarItems[i]);
@@ -709,8 +883,8 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             if (this.isToolbar() && (!isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')))) {
                 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                var toolbar_3 = getComponent(this.element.id + '_toolbar', 'toolbar');
-                toolbar_3.refreshOverflow();
+                var toolbar_4 = getComponent(this.element.id + '_toolbar', 'toolbar');
+                toolbar_4.refreshOverflow();
             }
         }
     };
@@ -807,7 +981,7 @@ var ImageEditor = /** @class */ (function (_super) {
             items.push({ text: this.l10n.getConstant('Custom'), id: 'custom', iconCss: 'e-icons e-custom' });
         }
         if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('CircleSelection') > -1)) {
-            items.push({ text: this.l10n.getConstant('Circle'), id: 'ellipse', iconCss: 'e-icons e-circle' });
+            items.push({ text: this.l10n.getConstant('Circle'), id: 'circle', iconCss: 'e-icons e-circle' });
         }
         if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('SquareSelection') > -1)) {
             items.push({ text: this.l10n.getConstant('Square'), id: 'square', iconCss: 'e-icons e-square' });
@@ -890,7 +1064,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
     };
     ImageEditor.prototype.cropSelect = function (args) {
-        var text = args.item.text;
+        var text = args.item.id;
         this.select(text);
         this.refreshToolbar('main', true, true);
     };
@@ -996,9 +1170,16 @@ var ImageEditor = /** @class */ (function (_super) {
                 modeSwitcher: false, noColor: true, value: '',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-fill-color',
                 change: function (args) {
+                    _this.pushActItemIntoObj();
+                    var objColl = extend([], _this.objColl, [], true);
+                    _this.objColl.pop();
                     proxy.activeObj.strokeSettings.fillColor = args.currentValue.hex;
                     proxy.strokeSettings.fillColor = proxy.activeObj.strokeSettings.fillColor;
-                    proxy.redrawShape(_this.activeObj);
+                    _this.objColl.push(_this.activeObj);
+                    proxy.undoRedoColl.push({ operation: 'shapeTransform', value: null,
+                        currentObj: extend([], proxy.objColl, [], true), previousObj: objColl, factor: proxy.factor,
+                        sharpen: proxy.adjustmentLevel.sharpen, bw: proxy.adjustmentLevel.bw });
+                    proxy.redrawShape(proxy.objColl[proxy.objColl.length - 1]);
                     if (args.currentValue.rgba === '') {
                         fillDDB_1.element.children[0].classList.add('e-nocolor-item');
                     }
@@ -1031,10 +1212,17 @@ var ImageEditor = /** @class */ (function (_super) {
                 modeSwitcher: false, noColor: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-stroke-color',
                 change: function (args) {
+                    _this.pushActItemIntoObj();
+                    var objColl = extend([], _this.objColl, [], true);
+                    _this.objColl.pop();
                     proxy.activeObj.strokeSettings.strokeColor = args.currentValue.hex;
                     proxy.strokeSettings.strokeColor = proxy.activeObj.strokeSettings.strokeColor;
                     if (!proxy.togglePen) {
-                        proxy.redrawShape(_this.activeObj);
+                        _this.objColl.push(_this.activeObj);
+                        proxy.undoRedoColl.push({ operation: 'shapeTransform', value: null,
+                            currentObj: extend([], proxy.objColl, [], true), previousObj: objColl, factor: proxy.factor,
+                            sharpen: proxy.adjustmentLevel.sharpen, bw: proxy.adjustmentLevel.bw });
+                        proxy.redrawShape(proxy.objColl[proxy.objColl.length - 1]);
                     }
                     strokeDDB_1.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_1.toggle();
@@ -1084,6 +1272,9 @@ var ImageEditor = /** @class */ (function (_super) {
                     }
                 },
                 select: function (args) {
+                    _this.pushActItemIntoObj();
+                    var objColl = extend([], _this.objColl, [], true);
+                    _this.objColl.pop();
                     spanElem_1.textContent = args.item.text;
                     _this.activeObj.strokeSettings.strokeWidth = parseInt(args.item.id, 10);
                     if (_this.lowerCanvas.width > _this.lowerCanvas.height) {
@@ -1093,19 +1284,23 @@ var ImageEditor = /** @class */ (function (_super) {
                         _this.activeObj.strokeSettings.strokeWidth *= ((ratio.height + ratio.width) / _this.factor);
                     }
                     _this.strokeSettings.strokeWidth = _this.activeObj.strokeSettings.strokeWidth;
-                    _this.redrawShape(_this.activeObj);
+                    _this.objColl.push(_this.activeObj);
+                    _this.undoRedoColl.push({ operation: 'shapeTransform', value: null,
+                        currentObj: extend([], _this.objColl, [], true), previousObj: objColl, factor: _this.factor,
+                        sharpen: _this.adjustmentLevel.sharpen, bw: _this.adjustmentLevel.bw });
+                    _this.redrawShape(_this.objColl[_this.objColl.length - 1]);
                     if (Browser.isDevice) {
                         if (!isNullOrUndefined(document.getElementById(_this.element.id + '_bottomToolbar'))) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_4 = getComponent(_this.element.id + '_bottomToolbar', 'toolbar');
-                            toolbar_4.refreshOverflow();
+                            var toolbar_5 = getComponent(_this.element.id + '_bottomToolbar', 'toolbar');
+                            toolbar_5.refreshOverflow();
                         }
                     }
                     else {
                         if (!isNullOrUndefined(document.getElementById(_this.element.id + '_toolbar'))) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_5 = getComponent(_this.element.id + '_toolbar', 'toolbar');
-                            toolbar_5.refreshOverflow();
+                            var toolbar_6 = getComponent(_this.element.id + '_toolbar', 'toolbar');
+                            toolbar_6.refreshOverflow();
                         }
                     }
                 }
@@ -1221,17 +1416,26 @@ var ImageEditor = /** @class */ (function (_super) {
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
                 change: function (args) {
+                    _this.pushActItemIntoObj();
+                    _this.objColl.pop();
                     if (proxy.textBox.style.display === 'none') {
                         proxy.strokeSettings.strokeColor = proxy.activeObj.strokeSettings.strokeColor = args.currentValue.hex;
                         if (!proxy.togglePen) {
-                            proxy.redrawShape(_this.activeObj);
+                            _this.objColl.push(_this.activeObj);
+                            proxy.redrawShape(proxy.objColl[proxy.objColl.length - 1]);
                         }
                     }
                     else if (proxy.textBox.style.display === 'block') {
                         proxy.textBox.style.color = args.currentValue.hex;
+                        var temp = proxy.activeObj.strokeSettings.strokeColor;
+                        proxy.activeObj.strokeSettings.strokeColor = args.currentValue.hex;
+                        _this.objColl.push(_this.activeObj);
+                        _this.objColl.pop();
+                        proxy.activeObj.strokeSettings.strokeColor = temp;
                     }
                     else if (!proxy.togglePen) {
-                        proxy.redrawShape(_this.activeObj);
+                        _this.objColl.push(_this.activeObj);
+                        proxy.redrawShape(proxy.objColl[proxy.objColl.length - 1]);
                     }
                     strokeDDB_2.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB_2.toggle();
@@ -1253,6 +1457,17 @@ var ImageEditor = /** @class */ (function (_super) {
                 = '#fff';
         }
     };
+    ImageEditor.prototype.pushActItemIntoObj = function () {
+        if (this.textBox.style.display === 'none') {
+            this.objColl.push(this.activeObj);
+        }
+        else {
+            var temp = extend({}, this.activeObj, {}, true);
+            this.setTextBoxStylesToActObj();
+            this.objColl.push(this.activeObj);
+            this.activeObj = temp;
+        }
+    };
     ImageEditor.prototype.createTextBtn = function (items) {
         var _this = this;
         var ratio = this.calcRatio();
@@ -1290,6 +1505,8 @@ var ImageEditor = /** @class */ (function (_super) {
                         + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: function (args) {
+                    _this.pushActItemIntoObj();
+                    _this.objColl.pop();
                     spanElem_2.textContent = args.item.text;
                     if (Browser.isDevice) {
                         spanElem_2.setAttribute('style', 'font-family:' + args.item.id);
@@ -1297,10 +1514,13 @@ var ImageEditor = /** @class */ (function (_super) {
                     if (_this.textBox.style.display === 'block') {
                         var temp = _this.activeObj.textSettings.fontFamily;
                         _this.activeObj.textSettings.fontFamily = _this.toPascalCase(args.item.id);
-                        _this.updateFontStyles();
-                        var width = _this.upperContext.measureText(_this.activeObj.keyHistory).width +
-                            _this.activeObj.textSettings.fontSize * 0.5;
-                        _this.textBox.style.width = Browser.isDevice ? width + 'px' : (width * ((ratio.width + ratio.height) / 2)) + 'px';
+                        _this.redrawText(ratio);
+                        _this.objColl.push(_this.activeObj);
+                        _this.objColl.pop();
+                        _this.upperContext.clearRect(0, 0, _this.upperCanvas.width, _this.upperCanvas.height);
+                        var width = _this.activeObj.activePoint.width +
+                            _this.activeObj.textSettings.fontSize * 0.25;
+                        _this.textBox.style.width = width / ratio.width + 'px';
                         _this.textBox.style.fontFamily = _this.toPascalCase(args.item.id);
                         _this.activeObj.textSettings.fontFamily = temp;
                         _this.updateFontStyles();
@@ -1308,7 +1528,8 @@ var ImageEditor = /** @class */ (function (_super) {
                     else {
                         _this.textSettings.fontFamily = _this.activeObj.textSettings.fontFamily = _this.toPascalCase(args.item.id);
                         _this.redrawText(ratio);
-                        _this.redrawShape(_this.activeObj);
+                        _this.objColl.push(_this.activeObj);
+                        _this.redrawShape(_this.objColl[_this.objColl.length - 1]);
                     }
                 }
             });
@@ -1407,10 +1628,14 @@ var ImageEditor = /** @class */ (function (_super) {
                     args.element.querySelector('[aria-label *= ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: function (args) {
+                    _this.pushActItemIntoObj();
+                    _this.objColl.pop();
                     fontSizeSpanElem_1.textContent = args.item.text;
                     if (_this.textBox.style.display === 'block') {
                         var temp = _this.activeObj.textSettings.fontSize;
                         _this.activeObj.textSettings.fontSize = parseInt(_this.fontSizeColl[(parseInt(args.item.text, 10) - 1)].text, 10);
+                        _this.objColl.push(_this.activeObj);
+                        _this.objColl.pop();
                         var textStyle = '';
                         if (_this.textBox.style.fontWeight === 'bold') {
                             textStyle = 'bold ';
@@ -1442,11 +1667,13 @@ var ImageEditor = /** @class */ (function (_super) {
                         var text = _this.getMaxText();
                         var width = _this.upperContext.measureText(text).width +
                             _this.activeObj.textSettings.fontSize * 0.5;
-                        var height = rows.length * (_this.activeObj.textSettings.fontSize + _this.activeObj.textSettings.fontSize * 0.25);
+                        var height = rows.length * (_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.redrawText(ratio);
+                        _this.objColl.push(_this.activeObj);
+                        _this.redrawShape(_this.objColl[_this.objColl.length - 1]);
                     }
                 }
             });
@@ -1497,14 +1724,43 @@ var ImageEditor = /** @class */ (function (_super) {
         this.activeObj.textSettings.italic = tempItalic;
         return width;
     };
+    ImageEditor.prototype.updateObjColl = function (item) {
+        var tempBold = this.activeObj.textSettings.bold;
+        var tempItalic = this.activeObj.textSettings.italic;
+        switch (item) {
+            case 'default':
+                this.activeObj.textSettings.bold = false;
+                this.activeObj.textSettings.italic = false;
+                break;
+            case 'bold':
+                this.activeObj.textSettings.bold = true;
+                this.activeObj.textSettings.italic = false;
+                break;
+            case 'italic':
+                this.activeObj.textSettings.bold = false;
+                this.activeObj.textSettings.italic = true;
+                break;
+            case 'bolditalic':
+                this.activeObj.textSettings.bold = true;
+                this.activeObj.textSettings.italic = true;
+                break;
+        }
+        this.objColl.push(this.activeObj);
+        this.objColl.pop();
+        this.activeObj.textSettings.bold = tempBold;
+        this.activeObj.textSettings.italic = tempItalic;
+    };
     ImageEditor.prototype.applyFontStyle = function (item, ratio) {
+        this.pushActItemIntoObj();
+        this.objColl.pop();
         switch (item) {
             case 'default':
                 if (this.textBox.style.display === 'block') {
-                    var width = this.getTextAreaWidth(item);
-                    this.textBox.style.width = Browser.isDevice ? width + 'px' : (width * ((ratio.width + ratio.height) / 2)) + 'px';
+                    var width = this.getTextAreaWidth(item) / ratio.width;
+                    this.textBox.style.width = width + 'px';
                     this.textBox.style.fontWeight = 'normal';
                     this.textBox.style.fontStyle = 'normal';
+                    this.updateObjColl(item);
                 }
                 else {
                     this.textSettings.bold = this.activeObj.textSettings.bold = false;
@@ -1514,10 +1770,11 @@ var ImageEditor = /** @class */ (function (_super) {
                 break;
             case 'bold':
                 if (this.textBox.style.display === 'block') {
-                    var width = this.getTextAreaWidth(item);
-                    this.textBox.style.width = Browser.isDevice ? width + 'px' : (width * ((ratio.width + ratio.height) / 2)) + 'px';
+                    var width = this.getTextAreaWidth(item) / ratio.width;
+                    this.textBox.style.width = width + 'px';
                     this.textBox.style.fontWeight = 'bold';
                     this.textBox.style.fontStyle = 'normal';
+                    this.updateObjColl(item);
                 }
                 else {
                     this.textSettings.bold = this.activeObj.textSettings.bold = true;
@@ -1527,10 +1784,11 @@ var ImageEditor = /** @class */ (function (_super) {
                 break;
             case 'italic':
                 if (this.textBox.style.display === 'block') {
-                    var width = this.getTextAreaWidth(item);
-                    this.textBox.style.width = Browser.isDevice ? width + 'px' : (width * ((ratio.width + ratio.height) / 2)) + 'px';
+                    var width = this.getTextAreaWidth(item) / ratio.width;
+                    this.textBox.style.width = width + 'px';
                     this.textBox.style.fontWeight = 'normal';
                     this.textBox.style.fontStyle = 'italic';
+                    this.updateObjColl(item);
                 }
                 else {
                     this.textSettings.bold = this.activeObj.textSettings.bold = false;
@@ -1540,10 +1798,11 @@ var ImageEditor = /** @class */ (function (_super) {
                 break;
             case 'bolditalic':
                 if (this.textBox.style.display === 'block') {
-                    var width = this.getTextAreaWidth(item);
-                    this.textBox.style.width = (width / ratio.width) + 'px';
+                    var width = this.getTextAreaWidth(item) / ratio.width;
+                    this.textBox.style.width = width + 'px';
                     this.textBox.style.fontWeight = 'bold';
                     this.textBox.style.fontStyle = 'italic';
+                    this.updateObjColl(item);
                 }
                 else {
                     this.textSettings.bold = this.activeObj.textSettings.bold = true;
@@ -1571,12 +1830,25 @@ var ImageEditor = /** @class */ (function (_super) {
         this.createLeftToolbarControls();
         if (this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')))) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var toolbar_6 = getComponent(this.element.id + '_toolbar', 'toolbar');
-            toolbar_6.refreshOverflow();
+            var toolbar_7 = getComponent(this.element.id + '_toolbar', 'toolbar');
+            toolbar_7.refreshOverflow();
+        }
+    };
+    ImageEditor.prototype.contextualToolbarClicked = function (args) {
+        var selEle = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
+        if (selEle) {
+            selEle.classList.remove('e-selected');
         }
+        document.getElementById(args.item.id + 'Canvas').parentElement.parentElement.classList.add('e-selected');
+        this.currObjType.isFiltered = true;
+        var type = args.item.id.replace(this.element.id, '').split('_')[1];
+        var imageFiltering = { filter: this.toPascalCase(type) };
+        this.trigger('imageFiltering', imageFiltering);
+        this.setFilter(type.toLowerCase());
+        this.currentFilter = args.item.id;
     };
     ImageEditor.prototype.defToolbarClicked = function (args) {
-        var ratio = this.calcRatio();
+        this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
         var zoomIn;
         var type = args.item.id.replace(this.element.id + '_', '').toLowerCase();
         var imageEditorObj = getInstance(document.getElementById(this.element.id), ImageEditor_1);
@@ -1595,61 +1867,23 @@ var ImageEditor = /** @class */ (function (_super) {
         if (!this.disabled) {
             switch (type) {
                 case 'zoomin':
+                    this.currObjType.isFiltered = false;
                     if (this.togglePen) {
                         this.currObjType.isZoomed = true;
                         this.freeHandDraw(false);
                     }
                     imageEditorObj.zoom(.1);
-                    if (!this.togglePan) {
-                        this.callMainToolbar(false, true);
-                    }
-                    if (this.factor > 0.95 && this.factor < 1.05) {
-                        this.dragCanvas = this.togglePan = false;
-                        this.callMainToolbar(false, true);
-                    }
-                    if (isNullOrUndefined(this.activeObj.activePoint) || this.activeObj.activePoint.width === 0) {
-                        this.refreshToolbar('main');
-                    }
-                    else {
-                        this.refreshToolbar('main', true, true);
-                    }
-                    panBtn = this.element.querySelector('.e-img-pan .e-btn');
-                    if (!isNullOrUndefined(panBtn) && this.togglePan) {
-                        panBtn.classList.add('e-selected-btn');
-                    }
-                    else if (!isNullOrUndefined(panBtn)) {
-                        panBtn.classList.remove('e-selected-btn');
-                    }
                     break;
                 case 'zoomout':
+                    this.currObjType.isFiltered = false;
                     if (this.togglePen) {
                         this.currObjType.isZoomed = true;
                         this.freeHandDraw(false);
                     }
                     imageEditorObj.zoom(-.1);
-                    if (!this.togglePan) {
-                        this.callMainToolbar(false, true);
-                    }
-                    if (this.factor > 0.95 && this.factor < 1.05) {
-                        this.dragCanvas = this.togglePan = false;
-                        this.callMainToolbar(false, true);
-                    }
-                    if (isNullOrUndefined(this.activeObj.activePoint) || this.activeObj.activePoint.width === 0) {
-                        this.refreshToolbar('main');
-                    }
-                    else {
-                        this.refreshToolbar('main', true, true);
-                    }
-                    panBtn = this.element.querySelector('.e-img-pan .e-btn');
-                    if (!isNullOrUndefined(panBtn) && this.togglePan) {
-                        panBtn.classList.add('e-selected-btn');
-                    }
-                    else if (!isNullOrUndefined(panBtn)) {
-                        panBtn.classList.remove('e-selected-btn');
-                    }
                     break;
                 case 'pan':
-                    this.currObjType.isCustomCrop = false;
+                    this.currObjType.isCustomCrop = this.currObjType.isFiltered = false;
                     if (isCropSelection) {
                         this.currObjType.isCustomCrop = false;
                         this.refreshActiveObj();
@@ -1658,11 +1892,13 @@ var ImageEditor = /** @class */ (function (_super) {
                     }
                     if (this.togglePan) {
                         this.cancelPan();
+                        this.disablePan = true;
                     }
                     else {
                         panBtn = this.element.querySelector('.e-img-pan .e-btn');
                         panBtn.classList.add('e-selected-btn');
                         imageEditorObj.pan(true);
+                        this.disablePan = false;
                     }
                     zoomIn = document.querySelector('#' + this.element.id + '_zoomIn');
                     if (!isNullOrUndefined(zoomIn) && this.factor >= 8) {
@@ -1680,46 +1916,113 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.activeObj.strokeSettings = this.tempStrokeSettings;
                         this.activeObj.textSettings = this.tempTextSettings;
                     }
+                    else if (!isNullOrUndefined(document.querySelector('#' + this.element.id + '_sliderWrapper')) ||
+                        this.currObjType.isFiltered) {
+                        this.lowerContext.filter = this.adjustmentValue = this.initialAdjustmentValue = this.tempAdjustmentValue;
+                        this.currentFilter = this.tempFilter;
+                        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                        this.redrawImgWithObj();
+                        this.currObjType.isFiltered = false;
+                        if (this.adjustmentLevel.sharpen || this.adjustmentLevel.bw) {
+                            if (this.adjustmentLevel.sharpen) {
+                                this.setSharpness(false);
+                            }
+                            else if (this.adjustmentLevel.bw) {
+                                this.setBlackAndWhiteFilter(false);
+                            }
+                            var tempFilter = this.lowerContext.filter;
+                            this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                                'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                            for (var j = 0; j < this.objColl.length; j++) {
+                                this.apply(this.objColl[j].shape, this.objColl[j]);
+                                this.refreshActiveObj();
+                            }
+                            this.lowerContext.filter = tempFilter;
+                        }
+                        this.adjustmentLevel = extend({}, this.tempAdjustmentLevel, {}, true);
+                        if (this.currentFilter === this.element.id + '_sharpen' || this.currentFilter === this.element.id + '_blackandwhite'
+                            || this.tempSharpenFilter || this.tempBWFilter) {
+                            if (this.currentFilter === this.element.id + '_sharpen' || this.tempSharpenFilter) {
+                                this.setSharpness(true);
+                            }
+                            else if (this.currentFilter === this.element.id + '_blackandwhite' || this.tempBWFilter) {
+                                this.setBlackAndWhiteFilter(true);
+                            }
+                            var tempFilter = this.lowerContext.filter;
+                            this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                                'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                            for (var j = 0; j < this.objColl.length; j++) {
+                                this.apply(this.objColl[j].shape, this.objColl[j]);
+                                this.refreshActiveObj();
+                            }
+                            this.lowerContext.filter = tempFilter;
+                            this.tempSharpenFilter = this.tempBWFilter = false;
+                        }
+                        this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    }
                     this.cancelItems();
                     break;
                 case 'ok':
-                    if (isCropSelection) {
-                        this.crop();
-                    }
-                    else if (this.togglePen) {
-                        this.freeHandDraw(false);
-                    }
-                    else if (this.textBox.style.display === 'block') {
-                        this.redrawActObj();
-                    }
-                    else {
-                        this.applyActObj();
-                    }
-                    this.callMainToolbar(false);
+                    this.okBtn();
                     break;
                 case 'reset':
                     imageEditorObj.reset();
                     break;
+                case 'adjustment':
+                    this.upperCanvas.style.display = 'block';
+                    this.refreshToolbar('adjustment');
+                    this.lowerContext.filter = this.initialAdjustmentValue;
+                    this.tempAdjustmentValue = this.lowerContext.filter;
+                    this.tempAdjustmentLevel = extend({}, this.adjustmentLevel, {}, true);
+                    this.tempFilter = this.currentFilter;
+                    this.tempSharpenFilter = this.adjustmentLevel.sharpen;
+                    this.tempBWFilter = this.adjustmentLevel.bw;
+                    break;
+                case 'brightness':
+                case 'contrast':
+                case 'hue':
+                case 'saturation':
+                case 'opacity':
+                case 'blur':
+                case 'exposure':
+                    this.unselectBtn();
+                    this.currObjType.isFiltered = true;
+                    this.refreshToolbar('color', null, null, null, type);
+                    document.getElementById(this.element.id + '_' + type).classList.add('e-selected-btn');
+                    break;
+                case 'filter':
+                    this.upperCanvas.style.display = 'block';
+                    this.refreshToolbar('filter');
+                    this.lowerContext.filter = this.initialAdjustmentValue;
+                    this.tempAdjustmentValue = this.lowerContext.filter;
+                    this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                    this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+                    for (var j = 0; j < this.objColl.length; j++) {
+                        this.apply(this.objColl[j].shape, this.objColl[j]);
+                        this.refreshActiveObj();
+                    }
+                    this.tempAdjustmentLevel = extend({}, this.adjustmentLevel, {}, true);
+                    this.tempFilter = this.currentFilter;
+                    this.tempSharpenFilter = this.adjustmentLevel.sharpen;
+                    this.tempBWFilter = this.adjustmentLevel.bw;
+                    break;
+                case 'default':
+                case 'chrome':
+                case 'cold':
+                case 'warm':
+                case 'grayscale':
+                case 'blackandwhite':
+                case 'sepia':
+                case 'invert':
+                case 'sharpen':
+                    this.currObjType.isFiltered = true;
+                    this.setFilter(type);
+                    break;
             }
         }
         this.trigger('toolbarItemClicked', args);
     };
-    ImageEditor.prototype.cancelPan = function () {
-        this.applyActObj();
-        var panBtn = this.element.querySelector('.e-img-pan .e-btn');
-        panBtn.classList.remove('e-selected-btn');
-        this.pan(false);
-    };
-    ImageEditor.prototype.callMainToolbar = function (isApplyBtn, isZooming) {
-        if (this.factor === 1) {
-            this.refreshToolbar('main', isApplyBtn, false, isZooming);
-        }
-        else {
-            this.refreshToolbar('main', isApplyBtn, false, isZooming);
-        }
-    };
-    ImageEditor.prototype.cancelItems = function () {
-        var ratio = this.calcRatio();
+    ImageEditor.prototype.okBtn = function () {
         var isCropSelection = false;
         var splitWords;
         if (this.activeObj.shape !== undefined) {
@@ -1731,107 +2034,795 @@ var ImageEditor = /** @class */ (function (_super) {
         else if (splitWords !== undefined && splitWords[0] === 'crop') {
             isCropSelection = true;
         }
-        if (this.togglePen) {
-            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            this.togglePen = false;
-            this.upperCanvas.style.cursor = 'default';
-            this.penDrawColl = [];
-            this.imageEditorPointsColl = [];
+        var selElem = this.element.querySelector('.e-contextual-toolbar-wrapper .e-toolbar-item.e-selected');
+        if (selElem) {
+            this.currentFilter = selElem.children[0].children[0].id.replace('Canvas', '');
         }
-        else if (this.activeObj.shape === 'text') {
-            this.activeObj.strokeSettings = this.tempStrokeSettings;
-            this.activeObj.textSettings = this.tempTextSettings;
-            if (this.activeObj.keyHistory === 'Enter Text' && this.activeObj.activePoint.startX === this.textStartPoints.x
-                && this.activeObj.activePoint.startY === this.textStartPoints.y) {
-                this.refreshActiveObj();
-                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-                this.drawShapeText();
-            }
-            else {
-                this.redrawText(ratio);
-                this.redrawShape(this.activeObj);
-                if (!isCropSelection && this.activeObj.topLeftCircle !== undefined) {
-                    this.applyActObj();
-                }
-                this.clearSelection();
-            }
-            this.tempTextSettings = { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, bold: false, italic: false, underline: false };
+        if (isCropSelection) {
+            this.crop();
         }
-        else if (this.activeObj.shape === 'rectangle' || this.activeObj.shape === 'ellipse' || this.activeObj.shape === 'line') {
-            this.activeObj.strokeSettings = this.tempStrokeSettings;
-            this.redrawShape(this.activeObj);
-            this.applyActObj();
+        else if (this.togglePen) {
+            this.freeHandDraw(false);
+        }
+        else if (this.textBox.style.display === 'block') {
+            this.redrawActObj();
+        }
+        else if (!isNullOrUndefined(document.querySelector('#' + this.element.id + '_sliderWrapper')) ||
+            this.currObjType.isFiltered) {
+            this.initialAdjustmentValue = this.canvasFilter = this.lowerContext.filter;
+            this.currObjType.isFiltered = false;
         }
         else {
-            this.refreshActiveObj();
-            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            this.applyActObj();
         }
-        this.upperCanvas.style.cursor = 'default';
-        this.currObjType.isCustomCrop = false;
-        this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
-        this.callMainToolbar();
+        this.callMainToolbar(false);
     };
-    ImageEditor.prototype.gradient = function (a, b) {
-        return (b.y - a.y) / (b.x - a.x);
+    ImageEditor.prototype.unselectBtn = function () {
+        if (document.querySelector('#' + this.element.id + '_brightness').classList.contains('e-selected-btn')) {
+            document.querySelector('#' + this.element.id + '_brightness').classList.remove('e-selected-btn');
+        }
+        else if (document.querySelector('#' + this.element.id + '_contrast').classList.contains('e-selected-btn')) {
+            document.querySelector('#' + this.element.id + '_contrast').classList.remove('e-selected-btn');
+        }
+        else if (document.querySelector('#' + this.element.id + '_hue').classList.contains('e-selected-btn')) {
+            document.querySelector('#' + this.element.id + '_hue').classList.remove('e-selected-btn');
+        }
+        else if (document.querySelector('#' + this.element.id + '_saturation').classList.contains('e-selected-btn')) {
+            document.querySelector('#' + this.element.id + '_saturation').classList.remove('e-selected-btn');
+        }
+        else if (document.querySelector('#' + this.element.id + '_opacity').classList.contains('e-selected-btn')) {
+            document.querySelector('#' + this.element.id + '_opacity').classList.remove('e-selected-btn');
+        }
+        else if (document.querySelector('#' + this.element.id + '_blur').classList.contains('e-selected-btn')) {
+            document.querySelector('#' + this.element.id + '_blur').classList.remove('e-selected-btn');
+        }
+        else if (document.querySelector('#' + this.element.id + '_exposure').classList.contains('e-selected-btn')) {
+            document.querySelector('#' + this.element.id + '_exposure').classList.remove('e-selected-btn');
+        }
     };
-    ImageEditor.prototype.applyPenDraw = function () {
-        if (this.togglePen && this.factor === 1 && !this.currObjType.isZoomed) {
-            this.apply();
-            this.penDrawColl = [];
-            this.imageEditorPointsColl = [];
+    ImageEditor.prototype.refreshSlider = function () {
+        var sliderWrapper = document.querySelector('#' + this.element.id + '_sliderWrapper');
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var slider = document.querySelector('.e-slider');
+        var hdrWrapper = document.querySelector('#' + this.element.id + '_headWrapper');
+        if (hdrWrapper) {
+            hdrWrapper.style.display = 'none';
         }
-        else {
-            var tempCanvas = this.lowerCanvas.appendChild(this.createElement('canvas', {
-                id: this.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
-            }));
-            var tempContext = tempCanvas.getContext('2d');
-            tempCanvas.width = this.lowerCanvas.width;
-            tempCanvas.height = this.lowerCanvas.height;
-            tempContext.drawImage(this.inMemoryCanvas, 0, 0);
-            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            for (var i = 0; i < this.penDrawColl.length; i++) {
-                tempContext.lineWidth = 2 * this.penDrawColl[i].strokeWidth;
-                tempContext.strokeStyle = this.penDrawColl[i].strokeColor;
-                var nexP = void 0;
-                var preP = void 0;
-                var f = 0.3;
-                var t = 1;
-                tempContext.beginPath();
-                tempContext.moveTo(this.penDrawColl[i].points[0].x, this.penDrawColl[i].points[0].y);
-                var m = 0;
-                var dx1 = 0;
-                var dx2 = 0;
-                var dy1 = 0;
-                var dy2 = 0;
-                preP = this.penDrawColl[i].points[0];
-                for (var j = 1; j < this.penDrawColl[i].points.length; j++) {
-                    var curP = this.penDrawColl[i].points[j];
-                    nexP = this.penDrawColl[i].points[j + 1];
-                    if (nexP) {
-                        m = this.gradient(preP, nexP);
-                        dx2 = (nexP.x - curP.x) * -f;
-                        dy2 = dx2 * m * t;
-                    }
-                    else {
-                        dx2 = 0;
-                        dy2 = 0;
-                    }
-                    tempContext.bezierCurveTo(preP.x - dx1, preP.y - dy1, curP.x + dx2, curP.y + dy2, curP.x, curP.y);
-                    dx1 = dx2;
-                    dy1 = dy2;
-                    preP = curP;
-                    if (this.penDrawColl[i].points.length > 2) {
-                        this.penDrawColl[i].points.shift();
-                    }
-                    tempContext.stroke();
+        if (!isNullOrUndefined(sliderWrapper) && !isNullOrUndefined(slider)) {
+            slider.ej2_instances[0].destroy();
+            sliderWrapper.remove();
+        }
+    };
+    ImageEditor.prototype.updateAdjustment = function (type, value, isPreview) {
+        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        var splitWords = this.lowerContext.filter.split(' ');
+        var values = [];
+        var opacityValue;
+        var brightnessValue;
+        if (splitWords[4] !== undefined) {
+            opacityValue = parseFloat(splitWords[4].split('(')[1]);
+        }
+        if (splitWords[0] !== undefined) {
+            brightnessValue = parseFloat(splitWords[0].split('(')[1]);
+        }
+        var brightness = this.getFilterValue(this.adjustmentLevel.brightness);
+        var saturation = this.getFilterValue(this.adjustmentLevel.saturation);
+        if (type !== 'brightness' && type !== 'contrast' && type !== 'hue' && type !== 'saturation' && type !== 'exposure'
+            && type !== 'opacity' && type !== 'blur') {
+            if (isNullOrUndefined(isPreview) && (this.adjustmentLevel.sharpen || this.adjustmentLevel.bw)) {
+                if (this.adjustmentLevel.sharpen) {
+                    this.setSharpness(false);
+                }
+                else if (this.adjustmentLevel.bw) {
+                    this.setBlackAndWhiteFilter(false);
+                }
+                var temp_1 = this.lowerContext.filter;
+                this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                    'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                for (var i = 0; i < this.objColl.length; i++) {
+                    this.apply(this.objColl[i].shape, this.objColl[i]);
+                    this.refreshActiveObj();
                 }
+                this.lowerContext.filter = temp_1;
             }
-            this.penDrawColl = [];
-            this.imageEditorPointsColl = [];
-            this.togglePen = false;
-            var imgData = tempContext.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
-            var tempObj = void 0;
-            for (var index = 0; index < this.imgDataColl.length; index++) {
+        }
+        if (brightness !== 1) {
+            splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
+        }
+        var saturate;
+        var bright;
+        var contrast;
+        var saturatePercentage;
+        var saturatePercent;
+        var tempFilter;
+        var temp;
+        switch (type) {
+            case 'brightness':
+                if (splitWords[3].split) {
+                    if (parseFloat(splitWords[3].split('(')[1]) !== 100) {
+                        value += 0.1;
+                    }
+                }
+                splitWords[0] = 'brightness(' + value + ')';
+                this.adjustmentValue = splitWords.join(' ');
+                break;
+            case 'contrast':
+                splitWords[1] = 'contrast(' + value + '%)';
+                this.adjustmentValue = splitWords.join(' ');
+                break;
+            case 'hue':
+                splitWords[2] = 'hue-rotate(' + value + 'deg)';
+                this.adjustmentValue = splitWords.join(' ');
+                break;
+            case 'saturation':
+                splitWords[3] = 'saturate(' + value + '%)';
+                if (saturation !== 1) {
+                    splitWords[0] = 'brightness(' + (brightnessValue + 0.1) + ')';
+                }
+                this.adjustmentValue = splitWords.join(' ');
+                break;
+            case 'opacity':
+                if (parseFloat(splitWords[0].split('(')[1]) !== 1) {
+                    value -= 0.2;
+                }
+                splitWords[4] = 'opacity(' + value + ')';
+                this.adjustmentValue = splitWords.join(' ');
+                break;
+            case 'blur':
+                splitWords[5] = 'blur(' + value + 'px)';
+                this.adjustmentValue = splitWords.join(' ');
+                break;
+            case 'exposure':
+                if (brightness !== 1) {
+                    splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
+                }
+                if (value > 1) {
+                    value -= 1;
+                    value += brightness;
+                }
+                else if (value < 1) {
+                    value = 1 - value;
+                    value = brightness - value;
+                }
+                splitWords[0] = 'brightness(' + value + ')';
+                this.adjustmentValue = splitWords.join(' ');
+                break;
+            case 'chrome':
+                saturate = this.getSaturationFilterValue(this.adjustmentLevel.saturation);
+                saturate *= 100;
+                value = saturate + (saturate * 0.4);
+                splitWords[3] = 'saturate(' + value + '%)';
+                values = this.adjustmentValue.split(' ');
+                splitWords[0] = values[0];
+                splitWords[1] = values[1];
+                splitWords[2] = values[2];
+                splitWords[4] = values[4];
+                splitWords[5] = values[5];
+                splitWords[6] = 'sepia(0%)';
+                splitWords[7] = 'grayscale(0%)';
+                splitWords[8] = 'invert(0%)';
+                break;
+            case 'cold':
+                // Adjusting Brightness
+                bright = this.getFilterValue(this.adjustmentLevel.brightness);
+                bright *= 100;
+                value = bright * 0.9;
+                splitWords[0] = 'brightness(' + value + '%)';
+                // Adjusting Contrast
+                contrast = this.getFilterValue(this.adjustmentLevel.contrast);
+                contrast *= 100;
+                value = contrast + (contrast * 0.5);
+                splitWords[1] = 'contrast(' + value + '%)';
+                // Adjusting Saturation
+                saturatePercentage = this.getSaturationFilterValue(this.adjustmentLevel.saturation);
+                saturatePercentage *= 100;
+                value = saturatePercentage;
+                splitWords[3] = 'saturate(' + value + '%)';
+                values = this.adjustmentValue.split(' ');
+                splitWords[2] = values[2];
+                splitWords[4] = values[4];
+                splitWords[5] = values[5];
+                splitWords[6] = 'sepia(0%)';
+                splitWords[7] = 'grayscale(0%)';
+                splitWords[8] = 'invert(0%)';
+                break;
+            case 'warm':
+                saturatePercent = this.getSaturationFilterValue(this.adjustmentLevel.saturation);
+                saturatePercent *= 100;
+                value = saturatePercent + (saturatePercent * 0.4);
+                splitWords[3] = 'saturate(' + value + '%)';
+                splitWords[6] = 'sepia(25%)';
+                values = this.adjustmentValue.split(' ');
+                splitWords[0] = values[0];
+                splitWords[1] = values[1];
+                splitWords[2] = values[2];
+                splitWords[4] = values[4];
+                splitWords[5] = values[5];
+                splitWords[7] = 'grayscale(0%)';
+                splitWords[8] = 'invert(0%)';
+                break;
+            case 'grayscale':
+                splitWords[7] = 'grayscale(100%)';
+                values = this.adjustmentValue.split(' ');
+                splitWords[0] = values[0];
+                splitWords[1] = values[1];
+                splitWords[2] = values[2];
+                splitWords[3] = values[3];
+                splitWords[4] = values[4];
+                splitWords[5] = values[5];
+                splitWords[6] = 'sepia(0%)';
+                splitWords[8] = 'invert(0%)';
+                break;
+            case 'blackandwhite':
+                values = this.adjustmentValue.split(' ');
+                if (isPreview) {
+                    tempFilter = this.lowerContext.filter;
+                    this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                        'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                    this.setBlackAndWhiteFilter(true);
+                    for (var i = 0; i < this.objColl.length; i++) {
+                        this.apply(this.objColl[i].shape, this.objColl[i]);
+                        this.refreshActiveObj();
+                    }
+                    splitWords[0] = values[0];
+                    splitWords[1] = values[1];
+                    splitWords[2] = values[2];
+                    splitWords[3] = values[3];
+                    splitWords[4] = values[4];
+                    splitWords[5] = values[5];
+                    splitWords[6] = 'sepia(0%)';
+                    splitWords[7] = 'grayscale(0%)';
+                    splitWords[8] = 'invert(0%)';
+                }
+                else {
+                    tempFilter = this.lowerContext.filter;
+                    this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                        'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                    this.setBlackAndWhiteFilter(true);
+                    splitWords[0] = values[0];
+                    splitWords[1] = values[1];
+                    splitWords[2] = values[2];
+                    splitWords[3] = values[3];
+                    splitWords[4] = values[4];
+                    splitWords[5] = values[5];
+                    splitWords[6] = 'sepia(0%)';
+                    splitWords[7] = 'grayscale(0%)';
+                    splitWords[8] = 'invert(0%)';
+                    this.lowerContext.filter = this.initialAdjustmentValue = splitWords.join(' ');
+                    this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                    this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+                    tempFilter = this.lowerContext.filter;
+                    this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                        'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                    for (var i = 0; i < this.objColl.length; i++) {
+                        this.apply(this.objColl[i].shape, this.objColl[i]);
+                        this.refreshActiveObj();
+                    }
+                    this.lowerContext.filter = tempFilter;
+                }
+                break;
+            case 'sepia':
+                splitWords[6] = 'sepia(100%)';
+                values = this.adjustmentValue.split(' ');
+                splitWords[0] = values[0];
+                splitWords[1] = values[1];
+                splitWords[2] = values[2];
+                splitWords[3] = values[3];
+                splitWords[4] = values[4];
+                splitWords[5] = values[5];
+                splitWords[7] = 'grayscale(0%)';
+                splitWords[8] = 'invert(0%)';
+                break;
+            case 'invert':
+                splitWords[8] = 'invert(100%)';
+                values = this.adjustmentValue.split(' ');
+                splitWords[0] = values[0];
+                splitWords[1] = values[1];
+                splitWords[2] = values[2];
+                splitWords[3] = values[3];
+                splitWords[4] = values[4];
+                splitWords[5] = values[5];
+                splitWords[6] = 'sepia(0%)';
+                splitWords[7] = 'grayscale(0%)';
+                break;
+            case 'sharpen':
+                values = this.adjustmentValue.split(' ');
+                if (isPreview) {
+                    temp = this.lowerContext.filter;
+                    this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                        'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                    for (var i = 0; i < this.objColl.length; i++) {
+                        this.apply(this.objColl[i].shape, this.objColl[i]);
+                        this.refreshActiveObj();
+                    }
+                    splitWords[0] = values[0];
+                    splitWords[1] = values[1];
+                    splitWords[2] = values[2];
+                    splitWords[3] = values[3];
+                    splitWords[4] = values[4];
+                    splitWords[5] = values[5];
+                    splitWords[6] = 'sepia(0%)';
+                    splitWords[7] = 'grayscale(0%)';
+                    splitWords[8] = 'invert(0%)';
+                }
+                else {
+                    temp = this.lowerContext.filter;
+                    this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                        'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                    this.setSharpness(true);
+                    splitWords[0] = values[0];
+                    splitWords[1] = values[1];
+                    splitWords[2] = values[2];
+                    splitWords[3] = values[3];
+                    splitWords[4] = values[4];
+                    splitWords[5] = values[5];
+                    splitWords[6] = 'sepia(0%)';
+                    splitWords[7] = 'grayscale(0%)';
+                    splitWords[8] = 'invert(0%)';
+                    this.lowerContext.filter = this.initialAdjustmentValue = splitWords.join(' ');
+                    this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                    this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+                    temp = this.lowerContext.filter;
+                    this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                        'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                    for (var i = 0; i < this.objColl.length; i++) {
+                        this.apply(this.objColl[i].shape, this.objColl[i]);
+                        this.refreshActiveObj();
+                    }
+                    this.lowerContext.filter = temp;
+                }
+                break;
+        }
+        if (type !== 'sharpen' && type !== 'blackandwhite') {
+            if (isNullOrUndefined(isPreview)) {
+                if (type === 'default') {
+                    splitWords = this.getDefaultFilter(splitWords);
+                }
+                this.lowerContext.filter = splitWords.join(' ');
+            }
+            splitWords = this.setTempFilterValue(brightness, isPreview, splitWords, type);
+            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            if (brightness !== 1) {
+                splitWords[4] = 'opacity(' + opacityValue + ')';
+            }
+            else if (saturation !== 1) {
+                splitWords[0] = 'brightness(' + brightnessValue + ')';
+            }
+            if (type === 'exposure' && brightness !== 1) {
+                splitWords[0] = 'brightness(' + brightnessValue + ')';
+            }
+            splitWords = this.setTempFilterValue(brightness, isPreview, splitWords, type);
+            if (isNullOrUndefined(isPreview)) {
+                this.lowerContext.filter = this.initialAdjustmentValue = splitWords.join(' ');
+            }
+            var tempFilter_1 = this.lowerContext.filter;
+            this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+            for (var i = 0; i < this.objColl.length; i++) {
+                this.apply(this.objColl[i].shape, this.objColl[i]);
+                this.refreshActiveObj();
+            }
+            this.lowerContext.filter = tempFilter_1;
+            if (brightness === 1) {
+                this.isBrightnessAdjusted = false;
+            }
+            else {
+                this.isBrightnessAdjusted = true;
+            }
+        }
+        var filter = splitWords.join(' ');
+        return filter;
+    };
+    ImageEditor.prototype.updateBrightnessFilter = function () {
+        var splitWords = this.lowerContext.filter.split(' ');
+        if (this.isBrightnessAdjusted && splitWords.length > 0 && !isNullOrUndefined(splitWords[4])) {
+            var opacityValue = parseFloat(splitWords[4].split('(')[1]);
+            splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
+            this.lowerContext.filter = splitWords.join(' ');
+        }
+    };
+    ImageEditor.prototype.autoEnablePan = function () {
+        if (this.factor > 0.95 && this.factor < 1.05) {
+            this.dragCanvas = this.togglePan = false;
+            this.callMainToolbar(false, true);
+            this.pan(false);
+            this.disablePan = false;
+        }
+        else if (!this.disablePan) {
+            this.pan(true);
+        }
+        else if (this.disablePan) {
+            this.pan(false);
+        }
+    };
+    ImageEditor.prototype.setTempFilterValue = function (brightness, isPreview, splitWords, type) {
+        if (isPreview && brightness !== 1) {
+            var tempSplitWords = this.lowerContext.filter.split(' ');
+            tempSplitWords[4] = splitWords[4];
+            this.lowerContext.filter = tempSplitWords.join(' ');
+        }
+        else if (isPreview && type === 'default') {
+            splitWords = this.getDefaultFilter(splitWords);
+        }
+        return splitWords;
+    };
+    ImageEditor.prototype.getDefaultFilter = function (splitWords) {
+        var values = this.adjustmentValue.split(' ');
+        splitWords[0] = values[0];
+        splitWords[1] = values[1];
+        splitWords[2] = values[2];
+        splitWords[3] = values[3];
+        splitWords[4] = values[4];
+        splitWords[5] = values[5];
+        splitWords[6] = 'sepia(0%)';
+        splitWords[7] = 'grayscale(0%)';
+        splitWords[8] = 'invert(0%)';
+        return splitWords;
+    };
+    ImageEditor.prototype.setAdjustment = function (type) {
+        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        var splitWords = this.lowerContext.filter.split(' ');
+        var value;
+        var valueArr;
+        switch (type) {
+            case 'brightness':
+                valueArr = splitWords[0].split('(');
+                value = parseFloat(valueArr[1].split(')')[0]);
+                this.adjustmentLevel.brightness = this.setFilterValue(value);
+                break;
+            case 'contrast':
+                valueArr = splitWords[1].split('(');
+                value = parseFloat(valueArr[1].split(')')[0]);
+                value /= 100;
+                this.adjustmentLevel.contrast = this.setFilterValue(value);
+                break;
+            case 'hue':
+                valueArr = splitWords[2].split('(');
+                value = parseFloat(valueArr[1].split(')')[0]);
+                value /= 3;
+                this.adjustmentLevel.hue = value;
+                break;
+            case 'saturation':
+                valueArr = splitWords[3].split('(');
+                value = parseFloat(valueArr[1].split(')')[0]);
+                value /= 100;
+                this.adjustmentLevel.saturation = this.setSaturationFilterValue(value);
+                break;
+            case 'opacity':
+                valueArr = splitWords[4].split('(');
+                value = parseFloat(valueArr[1].split(')')[0]);
+                if (value === 0.45) {
+                    value = 40;
+                }
+                else if (value === 0.40) {
+                    value = 30;
+                }
+                else if (value === 0.35) {
+                    value = 20;
+                }
+                else if (value === 0.30) {
+                    value = 10;
+                }
+                else if (value === 0.25) {
+                    value = 0;
+                }
+                else {
+                    value *= 100;
+                }
+                this.adjustmentLevel.opacity = value;
+                break;
+            case 'blur':
+                valueArr = splitWords[5].split('(');
+                value = parseFloat(valueArr[1].split(')')[0]);
+                value *= 20;
+                this.adjustmentLevel.blur = value;
+                break;
+            case 'exposure':
+                valueArr = splitWords[0].split('(');
+                value = parseFloat(valueArr[1].split(')')[0]);
+                this.adjustmentLevel.exposure = this.setFilterValue(value);
+                break;
+        }
+        var temp = this.lowerContext.filter;
+        this.updateBrightnessFilter();
+        this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+        for (var j = 0; j < this.objColl.length; j++) {
+            this.apply(this.objColl[j].shape, this.objColl[j]);
+            this.refreshActiveObj();
+        }
+        this.lowerContext.filter = temp;
+    };
+    ImageEditor.prototype.renderSlider = function (type) {
+        var _this = this;
+        var canvasWrapper = document.querySelector('#' + this.element.id + '_contextualToolbarArea');
+        var hdrWrapper = document.querySelector('#' + this.element.id + '_headWrapper');
+        var labelWrapper = document.querySelector('#' + this.element.id + '_labelWrapper');
+        if (!hdrWrapper && !isNullOrUndefined(canvasWrapper)) {
+            hdrWrapper = canvasWrapper.appendChild(this.createElement('div', {
+                id: this.element.id + '_headWrapper',
+                styles: 'position: relative'
+            }));
+            labelWrapper = hdrWrapper.appendChild(this.createElement('label', {
+                id: this.element.id + '_labelWrapper',
+                styles: Browser.isDevice ? 'position: absolute; top: 25%; left: calc(50% - 150px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+                    : 'position: absolute; top: 25%; left: calc(50% - 226px); font-size: 15px; text-transform: capitalize; font-weight: 400;'
+            }));
+        }
+        else {
+            hdrWrapper.style.display = 'block';
+        }
+        labelWrapper.textContent = this.l10n.getConstant(this.toPascalCase(type));
+        var sliderWrapper = hdrWrapper.appendChild(this.createElement('div', {
+            id: this.element.id + '_sliderWrapper',
+            styles: 'position: absolute'
+        }));
+        var value = this.getCurrAdjustmentValue(type);
+        var min;
+        var max;
+        var slider;
+        if (type === 'brightness' || type === 'contrast' || type === 'saturation' || type === 'exposure') {
+            if (this.finetuneSettings) {
+                if (type === 'brightness' && this.finetuneSettings.brightness) {
+                    min = this.finetuneSettings.brightness.min;
+                    max = this.finetuneSettings.brightness.max;
+                }
+                else if (type === 'contrast' && this.finetuneSettings.contrast) {
+                    min = this.finetuneSettings.contrast.min;
+                    max = this.finetuneSettings.contrast.max;
+                }
+                else if (type === 'saturation' && this.finetuneSettings.saturation) {
+                    min = this.finetuneSettings.saturation.min;
+                    max = this.finetuneSettings.saturation.max;
+                }
+                else if (type === 'exposure' && this.finetuneSettings.exposure) {
+                    min = this.finetuneSettings.exposure.min;
+                    max = this.finetuneSettings.exposure.max;
+                }
+                else {
+                    min = -100;
+                    max = 100;
+                }
+            }
+            else {
+                min = -100;
+                max = 100;
+            }
+            slider = new Slider({
+                value: value,
+                tooltip: { isVisible: true, placement: 'Before', showOn: 'Always' },
+                type: 'MinRange',
+                min: min,
+                max: max,
+                step: 10,
+                width: Browser.isDevice ? '200px' : '300px',
+                cssClass: 'e-slider',
+                change: function (args) {
+                    _this.setCurrAdjustmentValue(type, args.value);
+                }
+            });
+        }
+        else if (type === 'hue' || type === 'blur' || type === 'opacity') {
+            if (this.finetuneSettings) {
+                if (type === 'hue' && this.finetuneSettings.hue) {
+                    min = this.finetuneSettings.hue.min;
+                    max = this.finetuneSettings.hue.max;
+                }
+                else if (type === 'blur' && this.finetuneSettings.blur) {
+                    min = this.finetuneSettings.blur.min;
+                    max = this.finetuneSettings.blur.max;
+                }
+                else if (type === 'opacity' && this.finetuneSettings.opacity) {
+                    min = this.finetuneSettings.opacity.min;
+                    max = this.finetuneSettings.opacity.max;
+                }
+                else {
+                    min = 0;
+                    max = 100;
+                }
+            }
+            else {
+                min = 0;
+                max = 100;
+            }
+            slider = new Slider({
+                value: value,
+                tooltip: { isVisible: true, placement: 'Before', showOn: 'Always' },
+                type: 'MinRange',
+                min: min,
+                max: max,
+                step: 10,
+                width: Browser.isDevice ? '200px' : '300px',
+                cssClass: 'e-slider',
+                change: function (args) {
+                    _this.setCurrAdjustmentValue(type, args.value);
+                }
+            });
+        }
+        slider.appendTo('#' + this.element.id + '_sliderWrapper');
+        sliderWrapper.style.left = (parseFloat(canvasWrapper.style.width) - parseFloat(slider.width)) / 2 + 'px';
+    };
+    ImageEditor.prototype.getCurrAdjustmentValue = function (type) {
+        var value;
+        switch (type) {
+            case 'brightness':
+                value = this.adjustmentLevel.brightness;
+                break;
+            case 'contrast':
+                value = this.adjustmentLevel.contrast;
+                break;
+            case 'hue':
+                value = this.adjustmentLevel.hue;
+                break;
+            case 'saturation':
+                value = this.adjustmentLevel.saturation;
+                break;
+            case 'opacity':
+                value = this.adjustmentLevel.opacity;
+                break;
+            case 'blur':
+                value = this.adjustmentLevel.blur;
+                break;
+            case 'exposure':
+                value = this.adjustmentLevel.exposure;
+                break;
+        }
+        return value;
+    };
+    ImageEditor.prototype.setCurrAdjustmentValue = function (type, value) {
+        var fineTuneValueChanging = { finetune: this.toPascalCase(type), value: value };
+        this.trigger('fineTuneValueChanging', fineTuneValueChanging);
+        switch (type) {
+            case 'brightness':
+                this.setBrightness(value);
+                break;
+            case 'contrast':
+                this.setContrast(value);
+                break;
+            case 'hue':
+                this.setHue(value);
+                break;
+            case 'saturation':
+                this.setSaturation(value);
+                break;
+            case 'opacity':
+                this.setOpacity(value);
+                break;
+            case 'blur':
+                this.setBlur(value);
+                break;
+            case 'exposure':
+                this.setExposure(value);
+                break;
+        }
+    };
+    ImageEditor.prototype.cancelPan = function () {
+        this.applyActObj();
+        var panBtn = this.element.querySelector('.e-img-pan .e-btn');
+        panBtn.classList.remove('e-selected-btn');
+        this.pan(false);
+    };
+    ImageEditor.prototype.callMainToolbar = function (isApplyBtn, isZooming) {
+        this.refreshToolbar('main', isApplyBtn, false, isZooming);
+    };
+    ImageEditor.prototype.cancelItems = function () {
+        var ratio = this.calcRatio();
+        var isCropSelection = false;
+        var splitWords;
+        if (this.activeObj.shape !== undefined) {
+            splitWords = this.activeObj.shape.split('-');
+        }
+        if (splitWords === undefined && this.currObjType.isCustomCrop) {
+            isCropSelection = true;
+        }
+        else if (splitWords !== undefined && splitWords[0] === 'crop') {
+            isCropSelection = true;
+        }
+        if (this.togglePen) {
+            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            this.togglePen = false;
+            this.upperCanvas.style.cursor = 'default';
+            this.penDrawColl = [];
+            this.imageEditorPointsColl = [];
+        }
+        else if (this.activeObj.shape === 'text') {
+            this.activeObj.strokeSettings = this.tempStrokeSettings;
+            this.activeObj.textSettings = this.tempTextSettings;
+            if (this.activeObj.keyHistory === 'Enter Text' && this.activeObj.activePoint.startX === this.textStartPoints.x
+                && this.activeObj.activePoint.startY === this.textStartPoints.y) {
+                this.refreshActiveObj();
+                this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+                this.drawShapeText();
+            }
+            else {
+                this.redrawText(ratio);
+                this.redrawShape(this.activeObj);
+                if (!isCropSelection && this.activeObj.topLeftCircle !== undefined) {
+                    this.applyActObj();
+                }
+                this.clearSelection();
+            }
+            this.tempTextSettings = { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, bold: false, italic: false, underline: false };
+        }
+        else if (this.activeObj.shape === 'rectangle' || this.activeObj.shape === 'ellipse' || this.activeObj.shape === 'line') {
+            this.activeObj.strokeSettings = this.tempStrokeSettings;
+            this.redrawShape(this.activeObj);
+            this.applyActObj();
+        }
+        else {
+            this.refreshActiveObj();
+            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+        }
+        this.upperCanvas.style.cursor = 'default';
+        this.currObjType.isCustomCrop = false;
+        this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
+        this.callMainToolbar();
+    };
+    ImageEditor.prototype.gradient = function (a, b) {
+        return (b.y - a.y) / (b.x - a.x);
+    };
+    ImageEditor.prototype.applyPenDraw = function () {
+        if (this.togglePen && this.factor === 1 && !this.currObjType.isZoomed) {
+            this.apply();
+            this.penDrawColl = [];
+            this.imageEditorPointsColl = [];
+        }
+        else {
+            var tempCanvas = this.lowerCanvas.appendChild(this.createElement('canvas', {
+                id: this.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
+            }));
+            var tempContext = tempCanvas.getContext('2d');
+            tempCanvas.width = this.lowerCanvas.width;
+            tempCanvas.height = this.lowerCanvas.height;
+            var temp = this.lowerContext.filter;
+            this.updateBrightnessFilter();
+            tempContext.drawImage(this.inMemoryCanvas, 0, 0);
+            this.lowerContext.filter = temp;
+            this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
+            for (var i = 0; i < this.penDrawColl.length; i++) {
+                tempContext.lineWidth = 2 * this.penDrawColl[i].strokeWidth;
+                tempContext.strokeStyle = this.penDrawColl[i].strokeColor;
+                var nexP = void 0;
+                var preP = void 0;
+                var f = 0.3;
+                var t = 1;
+                tempContext.beginPath();
+                tempContext.moveTo(this.penDrawColl[i].points[0].x, this.penDrawColl[i].points[0].y);
+                var m = 0;
+                var dx1 = 0;
+                var dx2 = 0;
+                var dy1 = 0;
+                var dy2 = 0;
+                preP = this.penDrawColl[i].points[0];
+                for (var j = 1; j < this.penDrawColl[i].points.length; j++) {
+                    var curP = this.penDrawColl[i].points[j];
+                    nexP = this.penDrawColl[i].points[j + 1];
+                    if (nexP) {
+                        m = this.gradient(preP, nexP);
+                        dx2 = (nexP.x - curP.x) * -f;
+                        dy2 = dx2 * m * t;
+                    }
+                    else {
+                        dx2 = 0;
+                        dy2 = 0;
+                    }
+                    tempContext.bezierCurveTo(preP.x - dx1, preP.y - dy1, curP.x + dx2, curP.y + dy2, curP.x, curP.y);
+                    dx1 = dx2;
+                    dy1 = dy2;
+                    preP = curP;
+                    if (this.penDrawColl[i].points.length > 2) {
+                        this.penDrawColl[i].points.shift();
+                    }
+                    tempContext.stroke();
+                }
+            }
+            this.penDrawColl = [];
+            this.imageEditorPointsColl = [];
+            this.togglePen = false;
+            var imgData = tempContext.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
+            var tempObj = void 0;
+            for (var index = 0; index < this.imgDataColl.length; index++) {
                 if (this.imgDataColl[index].operation !== 'freehanddraw') {
                     tempObj = this.imgDataColl[index];
                     break;
@@ -1845,24 +2836,37 @@ var ImageEditor = /** @class */ (function (_super) {
             this.inMemoryCanvas.height = imgData.height;
             this.inMemoryContext.putImageData(imgData, 0, 0);
             this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-            for (var j = 0; j < this.objColl.length; j++) {
-                this.apply(this.objColl[j].shape, this.objColl[j]);
-                this.refreshActiveObj();
-            }
+            this.redrawImgWithObj();
             this.currObjType.isZoomed = false;
         }
     };
-    ImageEditor.prototype.refreshToolbar = function (type, isApplyBtn, isCropping, isZooming) {
-        var args = { toolbarType: type };
-        if (document.getElementById(this.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
-            getComponent(document.getElementById(this.element.id + '_toolbar'), 'toolbar').destroy();
+    ImageEditor.prototype.redrawImgWithObj = function () {
+        this.lowerContext.filter = this.canvasFilter;
+        var temp = this.lowerContext.filter;
+        this.updateBrightnessFilter();
+        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+        this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+        for (var j = 0; j < this.objColl.length; j++) {
+            this.apply(this.objColl[j].shape, this.objColl[j]);
+            this.refreshActiveObj();
         }
-        if (document.getElementById(this.element.id + '_bottomToolbar') && this.defToolbarItems.length > 0) {
-            if (document.getElementById(this.element.id + '_bottomToolbar').className.indexOf('e-control') > -1) {
-                getComponent(document.getElementById(this.element.id + '_bottomToolbar'), 'toolbar').destroy();
+        this.lowerContext.filter = temp;
+    };
+    ImageEditor.prototype.refreshToolbar = function (type, isApplyBtn, isCropping, isZooming, cType) {
+        var args = { toolbarType: type };
+        if (type !== 'filter' && type !== 'color') {
+            if (document.getElementById(this.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
+                getComponent(document.getElementById(this.element.id + '_toolbar'), 'toolbar').destroy();
+            }
+            if (document.getElementById(this.element.id + '_bottomToolbar') && this.defToolbarItems.length > 0) {
+                if (document.getElementById(this.element.id + '_bottomToolbar').className.indexOf('e-control') > -1) {
+                    getComponent(document.getElementById(this.element.id + '_bottomToolbar'), 'toolbar').destroy();
+                }
             }
         }
+        this.refreshSlider();
         switch (type) {
             case 'main':
                 if (Browser.isDevice) {
@@ -1912,7 +2916,104 @@ var ImageEditor = /** @class */ (function (_super) {
             case 'pan':
                 this.initZoomToolbarItem();
                 break;
+            case 'adjustment':
+                if (Browser.isDevice) {
+                    this.initToolbarItem(false, true, true);
+                }
+                this.initAdjustmentToolbarItem();
+                break;
+            case 'filter':
+                this.updateContextualToolbar(type);
+                break;
+            case 'color':
+                this.updateContextualToolbar(type, cType);
+                break;
+        }
+    };
+    ImageEditor.prototype.getAdjustmentToolbarItem = function () {
+        var toolbarItems = [];
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Brightness') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_brightness', prefixIcon: 'e-icons e-brightness', cssClass: 'top-icon e-brightness',
+                tooltipText: this.l10n.getConstant('Brightness'), align: 'Center' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Contrast') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_contrast', prefixIcon: 'e-icons e-contrast', cssClass: 'top-icon e-contrast',
+                tooltipText: this.l10n.getConstant('Contrast'), align: 'Center' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Hue') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_hue', prefixIcon: 'e-icons e-fade', cssClass: 'top-icon e-fade',
+                tooltipText: this.l10n.getConstant('Hue'), align: 'Center' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Saturation') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_saturation', prefixIcon: 'e-icons e-saturation', cssClass: 'top-icon e-saturation',
+                tooltipText: this.l10n.getConstant('Saturation'), align: 'Center' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Exposure') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_exposure', prefixIcon: 'e-icons e-grain', cssClass: 'top-icon e-grain',
+                tooltipText: this.l10n.getConstant('Exposure'), align: 'Center' });
         }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Opacity') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_opacity', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
+                tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Blur') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_blur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-tint',
+                tooltipText: this.l10n.getConstant('Blur'), align: 'Center' });
+        }
+        var tempToolbarItems = this.processToolbar('center');
+        for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
+            toolbarItems.push(tempToolbarItems[i]);
+        }
+        if (!Browser.isDevice) {
+            toolbarItems.push({ id: this.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
+                tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
+            toolbarItems.push({ id: this.element.id + '_cancel', prefixIcon: 'e-icons e-close', cssClass: 'top-icon e-save',
+                tooltipText: this.l10n.getConstant('Cancel'), align: 'Right' });
+        }
+        return toolbarItems;
+    };
+    ImageEditor.prototype.getFilterToolbarItem = function () {
+        var toolbarItems = [];
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Default') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+                tooltipText: this.l10n.getConstant('Default'), align: 'Center',
+                template: '<div class="filterwrapper" style="box-sizing: content-box;"><canvas id=' + this.element.id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Chrome') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+                tooltipText: this.l10n.getConstant('Chrome'), align: 'Center',
+                template: '<div class="filterwrapper" style="box-sizing: content-box;"><canvas id=' + this.element.id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Cold') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+                tooltipText: this.l10n.getConstant('Cold'), align: 'Center',
+                template: '<div class="filterwrapper" style="box-sizing: content-box;"><canvas id=' + this.element.id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Warm') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+                tooltipText: this.l10n.getConstant('Warm'), align: 'Center',
+                template: '<div class="filterwrapper" style="box-sizing: content-box;"><canvas id=' + this.element.id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Grayscale') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+                tooltipText: this.l10n.getConstant('Grayscale'), align: 'Center',
+                template: '<div class="filterwrapper" style="box-sizing: content-box;"><canvas id=' + this.element.id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Sepia') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+                tooltipText: this.l10n.getConstant('Sepia'), align: 'Center',
+                template: '<div class="filterwrapper" style="box-sizing: content-box;"><canvas id=' + this.element.id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
+        }
+        if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.indexOf('Invert') > -1)) {
+            toolbarItems.push({ id: this.element.id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
+                tooltipText: this.l10n.getConstant('Invert'), align: 'Center',
+                template: '<div class="filterwrapper" style="box-sizing: content-box;"><canvas id=' + this.element.id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
+        }
+        var tempToolbarItems = this.processToolbar('center');
+        for (var i = 0, len = tempToolbarItems.length; i < len; i++) {
+            toolbarItems.push(tempToolbarItems[i]);
+        }
+        return toolbarItems;
     };
     ImageEditor.prototype.getPenToolbarItem = function (items) {
         var toolbarItems = [];
@@ -2033,7 +3134,12 @@ var ImageEditor = /** @class */ (function (_super) {
         if (items.indexOf('strokeWidth') > -1) {
             var strokeWidthBtn = document.getElementById(this.element.id + '_penStrokeWidth');
             var spanElem_3 = document.createElement('span');
-            spanElem_3.innerHTML = this.l10n.getConstant('Small');
+            if (isNullOrUndefined(this.penStrokeWidth)) {
+                spanElem_3.innerHTML = this.l10n.getConstant('Small');
+            }
+            else {
+                spanElem_3.innerHTML = this.getPenStroke(this.penStrokeWidth, this.calcRatio());
+            }
             spanElem_3.className = 'e-pen-stroke-width';
             strokeWidthBtn.appendChild(spanElem_3);
             var drpDownBtn_2 = new DropDownButton({ items: strokeWidthItems,
@@ -2051,15 +3157,15 @@ var ImageEditor = /** @class */ (function (_super) {
                     if (Browser.isDevice) {
                         if (!isNullOrUndefined(document.getElementById(_this.element.id + '_bottomToolbar'))) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_7 = getComponent(_this.element.id + '_bottomToolbar', 'toolbar');
-                            toolbar_7.refreshOverflow();
+                            var toolbar_8 = getComponent(_this.element.id + '_bottomToolbar', 'toolbar');
+                            toolbar_8.refreshOverflow();
                         }
                     }
                     else {
                         if (!isNullOrUndefined(document.getElementById(_this.element.id + '_toolbar'))) {
                             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                            var toolbar_8 = getComponent(_this.element.id + '_toolbar', 'toolbar');
-                            toolbar_8.refreshOverflow();
+                            var toolbar_9 = getComponent(_this.element.id + '_toolbar', 'toolbar');
+                            toolbar_9.refreshOverflow();
                         }
                     }
                 }
@@ -2087,6 +3193,159 @@ var ImageEditor = /** @class */ (function (_super) {
                 break;
         }
     };
+    ImageEditor.prototype.getPenStroke = function (value, ratio) {
+        var textContent = '';
+        if (Math.round(value / 0.4) === Math.round(ratio.width + ratio.height)) {
+            textContent = this.l10n.getConstant('XSmall');
+        }
+        else if (Math.round(value / 0.8) === Math.round(ratio.width + ratio.height)) {
+            textContent = this.l10n.getConstant('Small');
+        }
+        else if (Math.round(value / 1.2) === Math.round(ratio.width + ratio.height)) {
+            textContent = this.l10n.getConstant('Medium');
+        }
+        else if (Math.round(value / 1.6) === Math.round(ratio.width + ratio.height)) {
+            textContent = this.l10n.getConstant('Large');
+        }
+        else if (Math.round(value / 2) === Math.round(ratio.width + ratio.height)) {
+            textContent = this.l10n.getConstant('XLarge');
+        }
+        return textContent;
+    };
+    ImageEditor.prototype.initAdjustmentToolbarItem = function () {
+        var _this = this;
+        var leftItem = this.getLeftToolbarItem();
+        var rightItem = this.getRightToolbarItem();
+        var mainItem = this.getAdjustmentToolbarItem();
+        var zoomItem = this.getZoomToolbarItem();
+        if (Browser.isDevice) {
+            this.defToolbarItems = mainItem;
+        }
+        else {
+            this.defToolbarItems = leftItem.concat(zoomItem, mainItem, rightItem);
+        }
+        var toolbar = new Toolbar({
+            width: '100%',
+            items: this.defToolbarItems,
+            clicked: this.defToolbarClicked.bind(this),
+            created: function () {
+                if (!Browser.isDevice) {
+                    _this.renderSaveBtn();
+                }
+                if (Browser.isDevice) {
+                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.element.id + '_toolbar')))) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        toolbar.refreshOverflow();
+                    }
+                }
+                else {
+                    _this.createLeftToolbarControls();
+                    if (_this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(_this.element.id + '_toolbar')))) {
+                        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                        toolbar.refreshOverflow();
+                    }
+                }
+            }
+        });
+        if (Browser.isDevice) {
+            toolbar.appendTo('#' + this.element.id + '_bottomToolbar');
+        }
+        else {
+            toolbar.appendTo('#' + this.element.id + '_toolbar');
+        }
+    };
+    ImageEditor.prototype.initFilterToolbarItem = function () {
+        var _this = this;
+        var mainItem = this.getFilterToolbarItem();
+        if (!isNullOrUndefined(document.querySelector('#' + this.element.id + '_contextualToolbar')) &&
+            document.querySelector('#' + this.element.id + '_contextualToolbar').classList.contains('e-control')) {
+            getComponent(document.getElementById(this.element.id + '_contextualToolbar'), 'toolbar').destroy();
+        }
+        var toolbar = new Toolbar({
+            width: '100%',
+            items: mainItem,
+            clicked: this.contextualToolbarClicked.bind(this),
+            created: function () {
+                _this.createCanvasFilter();
+                if (_this.currentFilter === '') {
+                    _this.currentFilter = _this.element.id + '_default';
+                }
+                var hdrWrapper = document.querySelector('#' + _this.element.id + '_headWrapper');
+                if (hdrWrapper) {
+                    hdrWrapper.style.display = 'none';
+                }
+                document.getElementById(_this.currentFilter + 'Canvas').parentElement.parentElement.classList.add('e-selected');
+                toolbar.refreshOverflow();
+            }
+        });
+        toolbar.appendTo('#' + this.element.id + '_contextualToolbar');
+    };
+    ImageEditor.prototype.createCanvasFilter = function () {
+        if (this.adjustmentLevel.sharpen || this.adjustmentLevel.bw) {
+            this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+            this.inMemoryCanvas.width = this.tempImageData.width;
+            this.inMemoryCanvas.height = this.tempImageData.height;
+            this.inMemoryContext.putImageData(this.tempImageData, 0, 0);
+        }
+        var noFilter = document.querySelector('#' + this.element.id + '_defaultCanvas');
+        noFilter.style.width = '100px';
+        noFilter.style.height = '100px';
+        noFilter.style.filter = this.updateAdjustment('default', null, true);
+        var ctx = noFilter.getContext('2d');
+        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        var chrome = document.querySelector('#' + this.element.id + '_chromeCanvas');
+        chrome.style.width = '100px';
+        chrome.style.height = '100px';
+        chrome.style.filter = this.updateAdjustment('chrome', null, true);
+        ctx = chrome.getContext('2d');
+        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        var cold = document.querySelector('#' + this.element.id + '_coldCanvas');
+        cold.style.width = '100px';
+        cold.style.height = '100px';
+        cold.style.filter = this.updateAdjustment('cold', null, true);
+        ctx = cold.getContext('2d');
+        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        var warm = document.querySelector('#' + this.element.id + '_warmCanvas');
+        warm.style.width = '100px';
+        warm.style.height = '100px';
+        warm.style.filter = this.updateAdjustment('warm', null, true);
+        ctx = warm.getContext('2d');
+        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        var temp = this.lowerContext.filter;
+        this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+        for (var i = 0; i < this.objColl.length; i++) {
+            this.apply(this.objColl[i].shape, this.objColl[i]);
+            this.refreshActiveObj();
+        }
+        this.lowerContext.filter = temp;
+        var grayscale = document.querySelector('#' + this.element.id + '_grayscaleCanvas');
+        grayscale.style.width = '100px';
+        grayscale.style.height = '100px';
+        grayscale.style.filter = this.updateAdjustment('grayscale', null, true);
+        ctx = grayscale.getContext('2d');
+        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        var tempFilter = this.lowerContext.filter;
+        this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+        for (var i = 0; i < this.objColl.length; i++) {
+            this.apply(this.objColl[i].shape, this.objColl[i]);
+            this.refreshActiveObj();
+        }
+        this.lowerContext.filter = tempFilter;
+        var sepia = document.querySelector('#' + this.element.id + '_sepiaCanvas');
+        sepia.style.width = '100px';
+        sepia.style.height = '100px';
+        sepia.style.filter = this.updateAdjustment('sepia', null, true);
+        ctx = sepia.getContext('2d');
+        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        var invert = document.querySelector('#' + this.element.id + '_invertCanvas');
+        invert.style.width = '100px';
+        invert.style.height = '100px';
+        invert.style.filter = this.updateAdjustment('invert', null, true);
+        ctx = invert.getContext('2d');
+        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+    };
     ImageEditor.prototype.updateCanvas = function () {
         this.lastX = this.baseImg.width / 2;
         this.lastY = this.baseImg.height / 2;
@@ -2105,9 +3364,10 @@ var ImageEditor = /** @class */ (function (_super) {
             maxDimension.width -= toolbarHeight;
             maxDimension.height -= toolbarHeight;
         }
+        var tempFilter = this.lowerContext.filter;
         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.width = this.upperCanvas.width = this.baseImg.width;
+        this.lowerCanvas.height = this.upperCanvas.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';
@@ -2117,16 +3377,37 @@ var ImageEditor = /** @class */ (function (_super) {
         if (canvasWrapper) {
             this.lowerCanvas.style.top = this.upperCanvas.style.top = (parseFloat(canvasWrapper.style.height) - maxDimension.height - 1) / 2 + 'px';
         }
-        this.lowerContext.drawImage(this.baseImg, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-        this.updateInMemoryCanvas('updateCanvas');
+        this.lowerContext.filter = tempFilter;
+        if (this.lowerContext.filter === 'none' || this.lowerContext.filter === 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)' ||
+            this.isInitialLoading) {
+            this.lowerContext.drawImage(this.baseImg, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.updateInMemoryCanvas('updateCanvas');
+            if (this.canvasFilter !== 'none') {
+                this.lowerContext.filter = this.canvasFilter;
+                this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+            }
+            if (this.isInitialLoading) {
+                this.initializeFilter();
+                this.isInitialLoading = false;
+                this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.lowerContext.drawImage(this.baseImg, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            }
+        }
+        else {
+            var temp = this.lowerContext.filter;
+            this.updateBrightnessFilter();
+            this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+            this.lowerContext.filter = temp;
+        }
+        this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
         for (var i = 0, len = this.objColl.length; i < len; i++) {
             this.apply(this.objColl[i].shape, this.objColl[i]);
         }
-        if (this.isUndoRedo) {
-            if (this.flipState !== '') {
-                this.flip(this.flipState);
-            }
-        }
+        this.lowerContext.filter = tempFilter;
         if (this.disabled) {
             this.element.setAttribute('class', 'e-disabled');
         }
@@ -2136,7 +3417,7 @@ var ImageEditor = /** @class */ (function (_super) {
         var _this = this;
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
-        proxy.baseImg.src = proxy.baseImgSrc = src;
+        proxy.baseImg.src = proxy.baseImgSrc.id = src;
         this.baseImg.onload = function () {
             _this.lowerContext.drawImage(_this.baseImg, 0, 0, _this.lowerCanvas.width, _this.lowerCanvas.height);
             if (_this.togglePen) {
@@ -2157,7 +3438,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 hideSpinner(_this.element);
                 _this.element.style.opacity = '1';
                 _this.updateCanvas();
-                _this.isUndoRedo = false;
             }
             if (Browser.isDevice) {
                 if (_this.isToolbar() && (!isNullOrUndefined(document.getElementById(_this.element.id + '_toolbar'))) &&
@@ -2334,9 +3614,6 @@ var ImageEditor = /** @class */ (function (_super) {
             this.degree = 0;
         }
     };
-    ImageEditor.prototype.updateUndoRedoColl = function (operation, value, previousObj, currentObj) {
-        this.undoRedoColl.push({ operation: operation, value: value, previousObj: previousObj, currentObj: currentObj });
-    };
     ImageEditor.prototype.fileSelect = function (inputElement, args) {
         showSpinner(this.element);
         this.element.style.opacity = '0.5';
@@ -2495,7 +3772,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         if (strokeWidthElem) {
             var strokeWidth = Math.round((this.activeObj.strokeSettings.strokeWidth /
-                (ratio.width + ratio.height))).toString();
+                (ratio.width + ratio.height)) * this.factor).toString();
             strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
         }
     };
@@ -2507,10 +3784,32 @@ var ImageEditor = /** @class */ (function (_super) {
             }
         }
     };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    ImageEditor.prototype.targetTouches = function (touches) {
+        var p1 = { x: touches[0].pageX, y: touches[0].pageY };
+        var p2 = { x: touches[1].pageX, y: touches[1].pageY };
+        var points = [p1, p2];
+        return points;
+    };
+    ImageEditor.prototype.calculateScale = function (startTouches, endTouches) {
+        var startDistance = this.getDistance(startTouches[0], startTouches[1]);
+        var endDistance = this.getDistance(endTouches[0], endTouches[1]);
+        return endDistance / startDistance;
+    };
+    ImageEditor.prototype.getDistance = function (a, b) {
+        var x = a.x - b.x;
+        var y = a.y - b.y;
+        return Math.sqrt(x * x + y * y);
+    };
     ImageEditor.prototype.touchStartHandler = function (e) {
         e.preventDefault();
-        this.timer = setTimeout(this.setTimer.bind(this), 1000, e);
-        this.mouseDownEventHandler(e);
+        if (e.touches.length === 2) {
+            this.isFirstMove = true;
+        }
+        else {
+            this.timer = setTimeout(this.setTimer.bind(this), 1000, e);
+            this.mouseDownEventHandler(e);
+        }
         EventHandler.add(this.lowerCanvas, 'touchend', this.mouseUpEventHandler, this);
         EventHandler.add(this.lowerCanvas, 'touchmove', this.mouseMoveEventHandler, this); // Unbind mousedown to prevent double triggers from touch devices
         EventHandler.add(this.upperCanvas, 'touchend', this.mouseUpEventHandler, this);
@@ -2537,6 +3836,14 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.touchEndPoint.y = y = e.touches[0].clientY;
             }
             this.redrawActObj(x, y);
+            if ((!isNullOrUndefined(this.element.querySelector('#' + this.element.id + '_contextualToolbar')) &&
+                !this.element.querySelector('#' + this.element.id + '_contextualToolbar').parentElement.classList.contains('e-hide')) ||
+                (!isNullOrUndefined(this.element.querySelector('#' + this.element.id + '_headWrapper'))
+                    && !this.element.querySelector('#' + this.element.id + '_headWrapper').parentElement.classList.contains('e-hide'))) {
+                this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                this.okBtn();
+                this.refreshToolbar('main');
+            }
             if (this.upperCanvas.style.cursor === 'crosshair' || (Browser.isDevice && this.togglePen)) {
                 if (this.togglePen) {
                     this.canvasRatio = this.calcRatio();
@@ -2600,6 +3907,47 @@ var ImageEditor = /** @class */ (function (_super) {
     };
     ImageEditor.prototype.mouseMoveEventHandler = function (e) {
         e.preventDefault();
+        if (e.type === 'touchmove' && e.touches.length === 2) {
+            if (this.isFirstMove) {
+                this.startTouches = this.targetTouches(e.touches);
+                this.tempTouches = [];
+                this.tempTouches.push({ x: e.touches[0].clientX || (e.touches[0].pageX - this.lowerCanvas.offsetLeft),
+                    y: e.touches[0].clientY || (e.touches[0].pageY - this.lowerCanvas.offsetTop) });
+                this.tempTouches.push({ x: e.touches[1].clientX || (e.touches[1].pageX - this.lowerCanvas.offsetLeft),
+                    y: e.touches[1].clientY || (e.touches[1].pageY - this.lowerCanvas.offsetTop) });
+            }
+            else {
+                var ratio = this.calcRatio();
+                var firstFingerX = e.touches[0].clientX || (e.touches[0].pageX - this.lowerCanvas.offsetLeft);
+                var firstFingerY = e.touches[0].clientY || (e.touches[0].pageY - this.lowerCanvas.offsetTop);
+                var secondFingerX = e.touches[1].clientX || (e.touches[1].pageX - this.lowerCanvas.offsetLeft);
+                var secondFingerY = e.touches[1].clientY || (e.touches[1].pageY - this.lowerCanvas.offsetTop);
+                this.lastX = firstFingerX > secondFingerX ? secondFingerX + (firstFingerX - secondFingerX) : firstFingerX +
+                    (secondFingerX - firstFingerX);
+                this.lastY = firstFingerY > secondFingerY ? secondFingerY + (firstFingerY - secondFingerY) : firstFingerY +
+                    (secondFingerY - firstFingerY);
+                this.lastX *= ratio.width;
+                this.lastY *= ratio.height;
+                var scale = this.calculateScale(this.startTouches, this.targetTouches(e.touches));
+                // Need to set lastX and lastY points
+                if (this.tempTouches[0].x !== firstFingerX && this.tempTouches[0].y !== firstFingerY &&
+                    this.tempTouches[1].x !== secondFingerX && this.tempTouches[1].y !== secondFingerY) {
+                    if (scale > 1) {
+                        this.zoom(1.1);
+                    }
+                    else {
+                        this.zoom(-1.1);
+                    }
+                    this.tempTouches = [];
+                    this.tempTouches.push({ x: e.touches[0].clientX || (e.touches[0].pageX - this.lowerCanvas.offsetLeft),
+                        y: e.touches[0].clientY || (e.touches[0].pageY - this.lowerCanvas.offsetTop) });
+                    this.tempTouches.push({ x: e.touches[1].clientX || (e.touches[1].pageX - this.lowerCanvas.offsetLeft),
+                        y: e.touches[1].clientY || (e.touches[1].pageY - this.lowerCanvas.offsetTop) });
+                }
+            }
+            this.isFirstMove = false;
+            return;
+        }
         if (this.textBox.style.display === 'none') {
             this.isTimer = true;
         }
@@ -2618,6 +3966,11 @@ var ImageEditor = /** @class */ (function (_super) {
             !this.dragCanvas || this.activeObj.activePoint !== undefined) {
             if (this.dragElement === '') {
                 this.setCursor(x, y);
+                if (this.activeObj.activePoint.width === 0 && this.upperCanvas.style.cursor !== 'default' &&
+                    this.upperCanvas.style.cursor !== 'move' && this.upperCanvas.style.cursor !== 'crosshair'
+                    && this.upperCanvas.style.cursor !== 'grab') {
+                    this.upperCanvas.style.cursor = 'move';
+                }
                 this.findTarget(x, y, e.type);
             }
         }
@@ -2640,6 +3993,8 @@ var ImageEditor = /** @class */ (function (_super) {
             y = this.touchEndPoint.y;
         }
         if (e.type === 'touchend') {
+            this.startTouches = this.tempTouches = [];
+            this.isFirstMove = false;
             if (this.textBox.style.display === 'none') {
                 this.isTimer = false;
                 this.timer = 0;
@@ -2658,8 +4013,16 @@ var ImageEditor = /** @class */ (function (_super) {
         if (e.currentTarget === this.upperCanvas) {
             this.currObjType.shape = this.currObjType.shape.toLowerCase();
             if (!this.togglePen && !this.dragCanvas) {
+                if (!isNullOrUndefined(this.tempObjColl) && this.activeObj.activePoint.width !== 0) {
+                    this.objColl.push(this.activeObj);
+                    this.redrawShape(this.objColl[this.objColl.length - 1]);
+                    this.tempObjColl = undefined;
+                }
                 this.applyCurrActObj(x, y);
             }
+            else if (this.dragCanvas) {
+                this.setPanPoints();
+            }
         }
         if (this.togglePen && e.currentTarget === this.upperCanvas) {
             this.penDrawColl.push({ strokeWidth: this.penStrokeWidth, strokeColor: this.activeObj.strokeSettings.strokeColor, points: this.imageEditorPointsColl });
@@ -2688,11 +4051,13 @@ var ImageEditor = /** @class */ (function (_super) {
                 e.stopImmediatePropagation();
                 break;
             case 'Delete':
-                shapeChangingArgs = { action: 'delete', previousShapeSettings: this.activeObj, currentShapeSettings: null };
-                this.keyHistory = '';
-                this.clearSelection();
-                this.trigger('shapeChanging', shapeChangingArgs);
-                this.refreshToolbar('main');
+                if (this.textBox.style.display === 'none') {
+                    shapeChangingArgs = { action: 'delete', previousShapeSettings: this.activeObj, currentShapeSettings: null };
+                    this.keyHistory = '';
+                    this.clearSelection();
+                    this.trigger('shapeChanging', shapeChangingArgs);
+                    this.refreshToolbar('main');
+                }
                 break;
             case 'Escape':
                 if (this.togglePan) {
@@ -2714,7 +4079,10 @@ var ImageEditor = /** @class */ (function (_super) {
         }
     };
     ImageEditor.prototype.keyUpEventHandler = function (e) {
-        setTimeout(this.textKeyDown.bind(this), 1, e);
+        // eslint-disable-next-line
+        if (this.textBox.style.display === 'block' && e.target.id === this.element.id + '_textBox') {
+            setTimeout(this.textKeyDown.bind(this), 1, e);
+        }
     };
     ImageEditor.prototype.canvasMouseDownHandler = function (e) {
         e.preventDefault();
@@ -2732,7 +4100,6 @@ var ImageEditor = /** @class */ (function (_super) {
         if (this.dragCanvas || this.factor !== 1) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             this.dragStart = this.lowerContext.transformedPoint(this.lastX, this.lastY);
-            this.dragged = false;
         }
     };
     ImageEditor.prototype.canvasMouseMoveHandler = function (e) {
@@ -2754,55 +4121,39 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         this.lastX *= ratio.width;
         this.lastY *= ratio.height;
-        this.dragged = true;
         if (this.dragStart && this.dragCanvas) {
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var pt = this.lowerContext.transformedPoint(this.lastX, this.lastY);
-            var transitionArgs = { startPoint: { x: this.dragStart.x, y: this.dragStart.y },
-                endPoint: { x: pt.x, y: pt.y } };
-            this.trigger('panning', transitionArgs);
-            var xDiff = pt.x - this.dragStart.x;
-            var yDiff = pt.y - this.dragStart.y;
-            var xxDiff = xDiff;
-            var yyDiff = yDiff;
-            this.lowerContext.translate(xDiff, yDiff);
-            this.upperContext.translate(xDiff, yDiff);
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var pt1 = this.lowerContext.transformedPoint(0, 0);
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var pt2 = this.lowerContext.transformedPoint(this.lowerCanvas.width, this.lowerCanvas.height);
-            if (xDiff >= 0) {
-                if (pt1.x < 1) {
-                    xDiff = 0;
-                }
-            }
-            else {
-                if (pt2.x > this.lowerCanvas.width) {
-                    xDiff = 0;
-                }
-            }
-            if (yDiff >= 0) {
-                if (pt1.y < 1) {
-                    yDiff = 0;
-                }
-            }
-            else {
-                if (pt2.y > this.lowerCanvas.height) {
-                    yDiff = 0;
-                }
-            }
-            this.lowerContext.translate(-xxDiff, -yyDiff);
-            this.upperContext.translate(-xxDiff, -yyDiff);
-            this.lowerContext.translate(xDiff, yDiff);
-            this.upperContext.translate(xDiff, yDiff);
-            this.redraw();
+            this.drawPanImg();
         }
     };
     ImageEditor.prototype.canvasMouseUpHandler = function (e) {
         e.preventDefault();
+        if (this.togglePan && e.currentTarget === this.lowerCanvas) {
+            var ratio = this.calcRatio();
+            if (e.type === 'mouseup') {
+                this.lastX = e.offsetX || (e.pageX - this.lowerCanvas.offsetLeft);
+                this.lastY = e.offsetY || (e.pageY - this.lowerCanvas.offsetTop);
+            }
+            else {
+                this.lastX = e.touches[0].clientX || (e.touches[0].pageX - this.lowerCanvas.offsetLeft);
+                this.lastY = e.touches[0].clientY || (e.touches[0].pageY - this.lowerCanvas.offsetTop);
+            }
+            this.lastX *= ratio.width;
+            this.lastY *= ratio.height;
+            this.setPanPoints();
+        }
         this.dragStart = null;
+        // zooms on mouse click point
+        // if (e.currentTarget !== document) {
+        //     this.zoom(e.shiftKey ? -1 : 1 );
+        // }
         this.currObjType.isDragging = false;
     };
+    ImageEditor.prototype.setPanPoints = function () {
+        if (this.dragCanvas || this.factor !== 1) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            this.dragStart = this.lowerContext.transformedPoint(this.lastX, this.lastY);
+        }
+    };
     ImageEditor.prototype.textKeyDown = function (e) {
         if (String.fromCharCode(e.which) === '\r') {
             this.textRow += 1;
@@ -2821,6 +4172,8 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.adjustToScreen = function () {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
+        var tempFilter = this.lowerContext.filter;
+        this.okBtn();
         this.applyActObj();
         this.refreshActiveObj();
         if (this.imgDataColl.length > 0) {
@@ -2842,15 +4195,32 @@ var ImageEditor = /** @class */ (function (_super) {
                 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) {
-            proxy.baseImg.src = URL.createObjectURL(blob);
-        }, 'image/png');
+        this.redrawImg(tempFilter);
+        if (!this.currObjType.isSave) {
+            // eslint-disable-next-line @typescript-eslint/tslint/config
+            this.lowerCanvas.toBlob(function (blob) {
+                proxy.lowerContext.filter = proxy.initialAdjustmentValue = proxy.adjustmentValue = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                    'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                if (proxy.cssClass) {
+                    addClass([proxy.element], proxy.cssClass.split(' '));
+                }
+                proxy.lowerContext.clearRect(0, 0, proxy.lowerCanvas.width, proxy.lowerCanvas.height);
+                proxy.lowerContext.drawImage(proxy.inMemoryCanvas, 0, 0);
+                proxy.baseImg.src = URL.createObjectURL(blob);
+                proxy.lowerContext.filter = tempFilter;
+            }, 'image/png');
+        }
+        else {
+            hideSpinner(this.element);
+            this.element.style.opacity = '1';
+        }
         if (this.defToolbarItems.length > 0 && (!isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')))) {
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var toolbar_9 = getComponent(proxy.element.id + '_toolbar', 'toolbar');
-            toolbar_9.refreshOverflow();
+            var toolbar_10 = getComponent(proxy.element.id + '_toolbar', 'toolbar');
+            toolbar_10.refreshOverflow();
+            if (!isNullOrUndefined(this.element.querySelector('.e-contextual-toolbar-wrapper'))) {
+                this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+            }
         }
     };
     ImageEditor.prototype.screenOrientation = function () {
@@ -2864,7 +4234,49 @@ var ImageEditor = /** @class */ (function (_super) {
             this.adjustToScreen();
         }
     };
-    ImageEditor.prototype.redrawImg = function () {
+    ImageEditor.prototype.drawPanImg = function () {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var pt = this.lowerContext.transformedPoint(this.lastX, this.lastY);
+        var transitionArgs = { startPoint: { x: this.dragStart.x, y: this.dragStart.y },
+            endPoint: { x: pt.x, y: pt.y } };
+        this.trigger('panning', transitionArgs);
+        var xDiff = pt.x - this.dragStart.x;
+        var yDiff = pt.y - this.dragStart.y;
+        var xxDiff = xDiff;
+        var yyDiff = yDiff;
+        this.lowerContext.translate(xDiff, yDiff);
+        this.upperContext.translate(xDiff, yDiff);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var pt1 = this.lowerContext.transformedPoint(0, 0);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        var pt2 = this.lowerContext.transformedPoint(this.lowerCanvas.width, this.lowerCanvas.height);
+        if (xDiff >= 0) {
+            if (pt1.x < 1) {
+                xDiff = 0;
+            }
+        }
+        else {
+            if (pt2.x > this.lowerCanvas.width) {
+                xDiff = 0;
+            }
+        }
+        if (yDiff >= 0) {
+            if (pt1.y < 1) {
+                yDiff = 0;
+            }
+        }
+        else {
+            if (pt2.y > this.lowerCanvas.height) {
+                yDiff = 0;
+            }
+        }
+        this.lowerContext.translate(-xxDiff, -yyDiff);
+        this.upperContext.translate(-xxDiff, -yyDiff);
+        this.lowerContext.translate(xDiff, yDiff);
+        this.upperContext.translate(xDiff, yDiff);
+        this.redraw();
+    };
+    ImageEditor.prototype.redrawImg = function (tempFilter) {
         var wrapperWidth;
         var canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
         if (this.isScreenOriented) {
@@ -2880,7 +4292,17 @@ var ImageEditor = /** @class */ (function (_super) {
         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';
         this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.offsetHeight - this.toolbarHeight - maxDimension.height) / 2 + 1 + 'px';
+        this.lowerContext.filter = tempFilter;
+        var temp = this.lowerContext.filter;
+        this.updateBrightnessFilter();
         this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+            'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+        for (var i = 0; i < this.objColl.length; i++) {
+            this.apply(this.objColl[i].shape, this.objColl[i]);
+            this.refreshActiveObj();
+        }
+        this.lowerContext.filter = temp;
     };
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     ImageEditor.prototype.updateContext = function (ctx) {
@@ -2929,7 +4351,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([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+            var m2 = new DOMMatrix();
             m2.a = a;
             m2.b = b;
             m2.c = c;
@@ -2957,6 +4379,7 @@ var ImageEditor = /** @class */ (function (_super) {
             return pt.matrixTransform(xform.inverse());
         };
     };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     ImageEditor.prototype.scaleNonUniform = function (xform, sx, sy) {
         xform.m11 *= sx;
         xform.m12 *= sx;
@@ -2993,11 +4416,7 @@ var ImageEditor = /** @class */ (function (_super) {
             this.upperContext.setTransform(1, 0, 0, 1, 0, 0);
             this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
             this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-            for (var j = 0; j < this.objColl.length; j++) {
-                this.apply(this.objColl[j].shape, this.objColl[j]);
-                this.refreshActiveObj();
-            }
+            this.redrawImgWithObj();
         }
         else {
             if (this.factor > 1) {
@@ -3060,11 +4479,7 @@ var ImageEditor = /** @class */ (function (_super) {
         this.upperContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.lowerContext.restore();
         this.upperContext.restore();
-        this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-        for (var j = 0; j < this.objColl.length; j++) {
-            this.apply(this.objColl[j].shape, this.objColl[j]);
-            this.refreshActiveObj();
-        }
+        this.redrawImgWithObj();
     };
     ImageEditor.prototype.applyCurrActObj = function (x, y) {
         var isInside = false;
@@ -3088,9 +4503,13 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             if (this.activeObj.shape === 'text' || (this.currObjType.shape === 'ellipse' || this.currObjType.shape === 'rectangle' ||
                 this.currObjType.shape === 'line')) {
+                var tempFilter = this.lowerContext.filter;
+                this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                    'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
                 for (var j = 0; j < this.objColl.length; j++) {
                     this.apply(this.objColl[j].shape, this.objColl[j]);
                 }
+                this.lowerContext.filter = tempFilter;
                 this.apply('shape');
             }
         }
@@ -3116,6 +4535,24 @@ var ImageEditor = /** @class */ (function (_super) {
         this.setTextSelection(width, height);
         this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
     };
+    ImageEditor.prototype.setTextBoxStylesToActObj = function () {
+        var ratio = this.calcRatio();
+        this.activeObj.textSettings.fontFamily = this.textBox.style.fontFamily;
+        this.activeObj.strokeSettings.strokeColor = this.textBox.style.color;
+        if (this.textBox.style.fontWeight === 'bold') {
+            this.activeObj.textSettings.bold = true;
+        }
+        else {
+            this.activeObj.textSettings.bold = false;
+        }
+        if (this.textBox.style.fontStyle === 'italic') {
+            this.activeObj.textSettings.italic = true;
+        }
+        else {
+            this.activeObj.textSettings.italic = false;
+        }
+        this.activeObj.textSettings.fontSize = (parseFloat(this.textBox.style.fontSize) * ((ratio.width + ratio.height) / 2)) / this.factor;
+    };
     ImageEditor.prototype.redrawActObj = function (x, y) {
         var ratio = this.calcRatio();
         var splitWords;
@@ -3125,21 +4562,7 @@ var ImageEditor = /** @class */ (function (_super) {
         }
         if (this.activeObj.horTopLine !== undefined && (this.activeObj.shape !== undefined && splitWords[0] !== 'crop')) {
             if (this.textBox.style.display === 'block') {
-                this.activeObj.textSettings.fontFamily = this.textBox.style.fontFamily;
-                this.activeObj.strokeSettings.strokeColor = this.textBox.style.color;
-                if (this.textBox.style.fontWeight === 'bold') {
-                    this.activeObj.textSettings.bold = true;
-                }
-                else {
-                    this.activeObj.textSettings.bold = false;
-                }
-                if (this.textBox.style.fontStyle === 'italic') {
-                    this.activeObj.textSettings.italic = true;
-                }
-                else {
-                    this.activeObj.textSettings.italic = false;
-                }
-                this.activeObj.textSettings.fontSize = (parseFloat(this.textBox.style.fontSize) * ((ratio.width + ratio.height) / 2)) / this.factor;
+                this.setTextBoxStylesToActObj();
                 if (x && y) {
                     x -= bbox.left;
                     y -= bbox.top;
@@ -3601,10 +5024,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
             }
             this.lowerContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-            for (var i = 0; i < this.objColl.length; i++) {
-                this.apply(this.objColl[i].shape, this.objColl[i]);
-            }
+            this.redrawImgWithObj();
             this.activeObj = temp;
             this.updateFontStyles();
             if (this.factor === 1) {
@@ -4009,7 +5429,7 @@ var ImageEditor = /** @class */ (function (_super) {
             else {
                 diff = Math.max(this.diffPoint.x, this.diffPoint.y);
             }
-            percentage = diff / 10;
+            percentage = (diff / 10) * this.factor;
             this.activeObj.activePoint.startX -= (maxDimension.width / 100) * percentage;
             this.activeObj.activePoint.startY -= (maxDimension.height / 100) * percentage;
             this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
@@ -4154,7 +5574,7 @@ var ImageEditor = /** @class */ (function (_super) {
             else {
                 diff = Math.max(this.diffPoint.x, this.diffPoint.y);
             }
-            percentage = diff / 10;
+            percentage = (diff / 10) * this.factor;
             this.activeObj.activePoint.endX += (maxDimension.width / 100) * percentage;
             this.activeObj.activePoint.startY -= (maxDimension.height / 100) * percentage;
             this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
@@ -4350,7 +5770,7 @@ var ImageEditor = /** @class */ (function (_super) {
             else {
                 diff = Math.max(this.diffPoint.x, this.diffPoint.y);
             }
-            percentage = diff / 10;
+            percentage = (diff / 10) * this.factor;
             this.activeObj.activePoint.startX -= (maxDimension.width / 100) * percentage;
             this.activeObj.activePoint.endY += (maxDimension.height / 100) * percentage;
             this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
@@ -4497,7 +5917,7 @@ var ImageEditor = /** @class */ (function (_super) {
             else {
                 diff = Math.min(this.diffPoint.x, this.diffPoint.y);
             }
-            percentage = diff / 10;
+            percentage = (diff / 10) * this.factor;
             this.activeObj.activePoint.endX += (maxDimension.width / 50) * percentage;
             this.activeObj.activePoint.endY += (maxDimension.height / 50) * percentage;
             this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
@@ -4543,8 +5963,6 @@ var ImageEditor = /** @class */ (function (_super) {
                     width = this.activeObj.activePoint.endX - x;
                     height = this.activeObj.activePoint.endY - y;
                     scale = Math.min(width, height);
-                    var ratio = this.activeObj.shape.split('-');
-                    ratio = ratio[1].split(':');
                     var newScale = this.getScaleRatio(scale);
                     this.activeObj.activePoint.endX -= newScale.x;
                     this.activeObj.activePoint.endY -= newScale.y;
@@ -5203,6 +6621,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.refreshActiveObj();
                 return;
             }
+            this.tempObjColl = extend([], this.objColl, [], true);
             this.currObjType.isCustomCrop = false;
             var temp = this.activeObj = extend({}, this.objColl[i], {}, true);
             this.objColl.splice(i, 1);
@@ -5212,11 +6631,35 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.inMemoryContext.putImageData(this.imgDataColl[0].value, 0, 0);
             }
             else {
+                if ((this.adjustmentLevel.sharpen || this.adjustmentLevel.bw) && !this.sharpenedImgData) {
+                    var data = void 0;
+                    var tempImageData = this.currImgData;
+                    if (this.adjustmentLevel.sharpen) {
+                        data = this.getSharpenData(this.currImgData);
+                    }
+                    else {
+                        data = this.getBlackAndWhiteData(tempImageData);
+                    }
+                    this.currImgData = data;
+                    this.sharpenedImgData = true;
+                }
                 this.inMemoryCanvas.width = this.currImgData.width;
                 this.inMemoryCanvas.height = this.currImgData.height;
                 this.inMemoryContext.putImageData(this.currImgData, 0, 0);
             }
             if (this.flipState !== '') {
+                if ((this.adjustmentLevel.sharpen || this.adjustmentLevel.bw) && !this.sharpenedImgData) {
+                    var data = void 0;
+                    var tempImageData = this.currImgData;
+                    if (this.adjustmentLevel.sharpen) {
+                        data = this.getSharpenData(this.currImgData);
+                    }
+                    else {
+                        data = this.getBlackAndWhiteData(tempImageData);
+                    }
+                    this.currImgData = data;
+                    this.sharpenedImgData = true;
+                }
                 this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
                 this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.height, this.inMemoryCanvas.width);
                 this.inMemoryCanvas.width = this.currImgData.width;
@@ -5225,15 +6668,10 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.setActivePoint();
             this.upperContext.drawImage(this.inMemoryCanvas, 0, 0);
+            this.lowerContext.filter = this.canvasFilter;
             this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+            this.redrawImgWithObj();
             this.upperContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            for (var j = 0; j < this.objColl.length; j++) {
-                if (this.objColl[j].shape === 'text' && this.objColl[j].shapeFlip !== this.currFlipState) {
-                    this.objColl[j].flippedText = true;
-                }
-                this.apply(this.objColl[j].shape, this.objColl[j]);
-            }
             this.activeObj = extend({}, temp, {}, true);
             var endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
             if (this.factor !== 1 && (this.activeObj.activePoint.startX < this.pannStart.startX || this.activeObj.activePoint.startY <
@@ -5616,7 +7054,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
                 else {
                     if (this.currObjType.isCustomCrop) {
-                        this.upperCanvas.style.cursor = 'cross-hair';
+                        this.upperCanvas.style.cursor = 'crosshair';
                     }
                     this.upperCanvas.style.cursor = 'default';
                 }
@@ -5713,7 +7151,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
                 else {
                     if (this.currObjType.isCustomCrop) {
-                        this.upperCanvas.style.cursor = 'cross-hair';
+                        this.upperCanvas.style.cursor = 'crosshair';
                     }
                     this.upperCanvas.style.cursor = 'default';
                 }
@@ -5773,7 +7211,7 @@ var ImageEditor = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/tslint/config
         this.lowerCanvas.toBlob(function (blob) {
             var blobUrl = URL.createObjectURL(blob);
-            proxy.baseImg.src = blobUrl;
+            //proxy.baseImg.src = blobUrl;
             proxy.downloadImg(blobUrl, fileName + '.' + type);
         }, 'image/png');
     };
@@ -5823,21 +7261,6 @@ var ImageEditor = /** @class */ (function (_super) {
             this.inMemoryContext.putImageData(imgData, 0, 0);
         }
     };
-    ImageEditor.prototype.drawBaseImg = function () {
-        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-        this.lowerContext.clearRect(0, 0, this.lowerCanvas.height, this.lowerCanvas.width);
-        this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-        this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.height, this.lowerCanvas.width);
-        this.inMemoryCanvas.width = this.lowerCanvas.width = this.imgDataColl[0].value.width;
-        this.inMemoryCanvas.height = this.lowerCanvas.height = this.imgDataColl[0].value.height;
-        this.inMemoryContext.putImageData(this.imgDataColl[0].value, 0, 0);
-        var maxDimension = this.calcMaxDimension(this.inMemoryCanvas.width, this.inMemoryCanvas.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 = (this.element.clientWidth - maxDimension.width) / 2 + 1 + 'px';
-        this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.clientHeight - this.toolbarHeight - maxDimension.height) / 2 + 1 + 'px';
-        this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-    };
     ImageEditor.prototype.calcPrevRatio = function () {
         var oldWidthRatio;
         var oldHeightRatio;
@@ -5944,15 +7367,23 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             else if (degree === 90 || degree === -90) {
                 this.updateCurrentActiveObjPoint(degree);
+                var tempFilter = this.lowerContext.filter;
+                this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                    'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
                 for (var i = 0; i < this.objColl.length; i++) {
                     this.apply(this.objColl[i].shape, this.objColl[i]);
                 }
+                this.lowerContext.filter = tempFilter;
             }
             else {
                 this.updateCurrentActiveObjPoint('zoom');
+                var tempFilter = this.lowerContext.filter;
+                this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                    'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
                 for (var i = 0; i < this.objColl.length; i++) {
                     this.apply(this.objColl[i].shape, this.objColl[i]);
                 }
+                this.lowerContext.filter = tempFilter;
             }
         }
         else if (this.objColl.length === 0 && (degree === 'horizontal' || degree === 'vertical' || degree === 'Horizontal' || degree === 'Vertical')) {
@@ -6000,12 +7431,14 @@ var ImageEditor = /** @class */ (function (_super) {
                     if (this.objColl[i].activePoint.startX <= this.lowerCanvas.width / 2) {
                         this.objColl[i].activePoint.startX = this.lowerCanvas.width / 2 + ((this.lowerCanvas.width / 2) -
                             this.objColl[i].activePoint.endX);
-                        this.objColl[i].activePoint.endX = this.objColl[i].activePoint.startX + this.objColl[i].activePoint.width;
+                        this.objColl[i].activePoint.endX = this.objColl[i].activePoint.startX +
+                            this.objColl[i].activePoint.width;
                         this.updateActiveObject(ratio, this.objColl[i].activePoint, this.objColl[i]);
                     }
                     else if (this.objColl[i].activePoint.startX >= this.lowerCanvas.width / 2) {
                         this.objColl[i].activePoint.startX = this.lowerCanvas.width - this.objColl[i].activePoint.endX;
-                        this.objColl[i].activePoint.endX = this.objColl[i].activePoint.startX + this.objColl[i].activePoint.width;
+                        this.objColl[i].activePoint.endX = this.objColl[i].activePoint.startX +
+                            this.objColl[i].activePoint.width;
                         this.updateActiveObject(ratio, this.objColl[i].activePoint, this.objColl[i]);
                     }
                 }
@@ -6015,12 +7448,14 @@ var ImageEditor = /** @class */ (function (_super) {
                     if (this.objColl[i].activePoint.startY <= this.lowerCanvas.height / 2) {
                         this.objColl[i].activePoint.startY = this.lowerCanvas.height / 2 + ((this.lowerCanvas.height / 2) -
                             this.objColl[i].activePoint.endY);
-                        this.objColl[i].activePoint.endY = this.objColl[i].activePoint.startY + this.objColl[i].activePoint.height;
+                        this.objColl[i].activePoint.endY = this.objColl[i].activePoint.startY +
+                            this.objColl[i].activePoint.height;
                         this.updateActiveObject(ratio, this.objColl[i].activePoint, this.objColl[i]);
                     }
                     else if (this.objColl[i].activePoint.startY >= this.lowerCanvas.height / 2) {
                         this.objColl[i].activePoint.startY = this.lowerCanvas.height - this.objColl[i].activePoint.endY;
-                        this.objColl[i].activePoint.endY = this.objColl[i].activePoint.startY + this.objColl[i].activePoint.height;
+                        this.objColl[i].activePoint.endY = this.objColl[i].activePoint.startY +
+                            this.objColl[i].activePoint.height;
                         this.updateActiveObject(ratio, this.objColl[i].activePoint, this.objColl[i]);
                     }
                 }
@@ -6035,22 +7470,30 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.objColl[i].activePoint.startY /= oldRatio.height;
                 this.objColl[i].activePoint.endX /= oldRatio.width;
                 this.objColl[i].activePoint.endY /= oldRatio.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.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].strokeSettings.strokeWidth /= (oldRatio.width / this.factor);
                 this.calcCurrPoints(degree, this.objColl[i]);
-                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.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;
+                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.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;
             }
             for (var i = 0; i < this.objColl.length; i++) {
                 this.objColl[i].activePoint.startX *= oldRatio.width;
                 this.objColl[i].activePoint.startY *= oldRatio.height;
                 this.objColl[i].activePoint.endX *= oldRatio.width;
                 this.objColl[i].activePoint.endY *= oldRatio.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;
+                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;
                 this.objColl[i].strokeSettings.strokeWidth *= ratio.width;
             }
             for (var i = 0; i < this.objColl.length; i++) {
@@ -6120,10 +7563,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     tempObjColl = [];
                     this.refreshActiveObj();
                     this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-                    this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-                    for (var i = 0; i < this.objColl.length; i++) {
-                        this.apply(this.objColl[i].shape, this.objColl[i]);
-                    }
+                    this.redrawImgWithObj();
                     this.activeObj.flippedText = false;
                     this.currObjType.shape = '';
                     this.refreshActiveObj();
@@ -6141,17 +7581,27 @@ var ImageEditor = /** @class */ (function (_super) {
                     showSpinner(proxy_1.element);
                     proxy_1.element.style.opacity = '0.5';
                     proxy_1.lowerContext.clearRect(0, 0, proxy_1.lowerCanvas.width, proxy_1.lowerCanvas.height);
+                    var temp = proxy_1.lowerContext.filter;
+                    proxy_1.lowerContext.filter = proxy_1.initialAdjustmentValue = proxy_1.adjustmentValue = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                        'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+                    if (proxy_1.cssClass) {
+                        addClass([proxy_1.element], proxy_1.cssClass.split(' '));
+                    }
                     proxy_1.lowerContext.drawImage(proxy_1.inMemoryCanvas, 0, 0);
                     proxy_1.baseImg.src = URL.createObjectURL(blob);
                     proxy_1.upperContext.clearRect(0, 0, proxy_1.upperCanvas.width, proxy_1.upperCanvas.height);
                     proxy_1.togglePen = false;
                     proxy_1.upperCanvas.style.cursor = 'default';
+                    proxy_1.lowerContext.filter = temp;
+                    var tempFilter = proxy_1.lowerContext.filter;
+                    proxy_1.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                        'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
                     for (var i = 0, len = proxy_1.objColl.length; i < len; i++) {
                         proxy_1.apply(proxy_1.objColl[i].shape, proxy_1.objColl[i], 'duplicate');
                     }
+                    proxy_1.lowerContext.filter = tempFilter;
                     proxy_1.togglePen = true;
                 }, 'image/png');
-                this.isUndoRedo = false;
                 this.degree = 0;
             }
             else {
@@ -6166,7 +7616,6 @@ var ImageEditor = /** @class */ (function (_super) {
                     }
                     this.keyHistory = '';
                 }
-                this.isUndoRedo = false;
             }
         }
     };
@@ -6299,6 +7748,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 if (this.activeObj.textSettings.fontSize < 20 * (ratio.width + ratio.height)) {
                     this.activeObj.textSettings.fontSize = 20 * (ratio.width + ratio.height);
                 }
+                if (this.factor > 1) {
+                    this.activeObj.textSettings.fontSize /= this.factor;
+                }
             }
             this.activeObj.shapeDegree = this.degree;
             this.activeObj.shapeFlip = this.currFlipState;
@@ -6317,6 +7769,8 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.setCenterPoints(true, width, height);
             }
             this.addLetter(this.activeObj.textSettings.text);
+            this.objColl.push(this.activeObj);
+            this.redrawShape(this.objColl[this.objColl.length - 1]);
             this.refreshToolbar('text');
         }
     };
@@ -6390,7 +7844,28 @@ var ImageEditor = /** @class */ (function (_super) {
                 inRange = true;
             }
         }
-        return inRange;
+        return inRange;
+    };
+    ImageEditor.prototype.updateInMemoryContext = function (imgData, isUpdate) {
+        var temp = extend({}, this.activeObj, {}, true);
+        this.redrawImgWithObj();
+        this.activeObj = temp;
+        if (isNullOrUndefined(isUpdate)) {
+            imgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        }
+        this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        this.inMemoryCanvas.width = imgData.width;
+        this.inMemoryCanvas.height = imgData.height;
+        this.inMemoryContext.putImageData(imgData, 0, 0);
+    };
+    ImageEditor.prototype.clearActObj = function () {
+        if (this.textBox.style.display === 'none') {
+            this.refreshActiveObj();
+            this.applyActObj();
+            this.refreshActiveObj();
+            this.currObjType.isCustomCrop = false;
+        }
     };
     ImageEditor.prototype.rotateMultiple = function (length, degree) {
         for (var i = 0; i < length; i++) {
@@ -6403,6 +7878,7 @@ var ImageEditor = /** @class */ (function (_super) {
             if (this.degree === 360) {
                 this.degree = 0;
             }
+            var temp = this.lowerContext.filter;
             this.lowerContext.save();
             this.setMaximumDimension(90 * (i + 1));
             this.lowerContext.translate(this.lowerCanvas.width / 2, this.lowerCanvas.height / 2);
@@ -6414,7 +7890,9 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             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.updateBrightnessFilter();
             this.lowerContext.drawImage(this.inMemoryCanvas, -this.lowerCanvas.height / 2, -this.lowerCanvas.width / 2);
+            this.lowerContext.filter = temp;
             if (degree > 0) {
                 this.lowerContext.rotate(Math.PI / 180 * -90);
             }
@@ -6428,7 +7906,11 @@ var ImageEditor = /** @class */ (function (_super) {
             this.inMemoryCanvas.width = this.currImgData.width;
             this.inMemoryCanvas.height = this.currImgData.height;
             this.inMemoryContext.putImageData(this.currImgData, 0, 0);
+            this.lowerContext.filter = this.canvasFilter;
+            this.updateBrightnessFilter();
+            this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
             this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+            this.lowerContext.filter = temp;
             if (degree > 0) {
                 this.redrawObj(90);
             }
@@ -6437,6 +7919,415 @@ var ImageEditor = /** @class */ (function (_super) {
             }
         }
     };
+    ImageEditor.prototype.setBrightness = function (value) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.adjustmentLevel.brightness = value;
+            value = this.getFilterValue(value);
+            this.updateAdjustment('brightness', value);
+        }
+    };
+    ImageEditor.prototype.setContrast = function (value) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.adjustmentLevel.contrast = value;
+            value = this.getFilterValue(value);
+            value *= 100;
+            this.updateAdjustment('contrast', value);
+        }
+    };
+    ImageEditor.prototype.setHue = function (value) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.adjustmentLevel.hue = value;
+            value *= 3;
+            this.updateAdjustment('hue', value);
+        }
+    };
+    ImageEditor.prototype.setSaturation = function (value) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.adjustmentLevel.saturation = value;
+            value = this.getSaturationFilterValue(value);
+            value *= 100;
+            this.updateAdjustment('saturation', value);
+        }
+    };
+    ImageEditor.prototype.setOpacity = function (value) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.adjustmentLevel.opacity = value;
+            if (value >= 50) {
+                value /= 100;
+            }
+            else if (value === 40) {
+                value = 0.45;
+            }
+            else if (value === 30) {
+                value = 0.40;
+            }
+            else if (value === 20) {
+                value = 0.35;
+            }
+            else if (value === 10) {
+                value = 0.30;
+            }
+            else if (value === 0) {
+                value = 0.25;
+            }
+            this.updateAdjustment('opacity', value);
+        }
+    };
+    ImageEditor.prototype.setBlur = function (value) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.adjustmentLevel.blur = value;
+            value /= 20;
+            this.updateAdjustment('blur', value);
+        }
+    };
+    ImageEditor.prototype.setExposure = function (value) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.adjustmentLevel.exposure = value;
+            value = this.getFilterValue(value);
+            this.updateAdjustment('exposure', value);
+        }
+    };
+    ImageEditor.prototype.setFilter = function (type) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.updateAdjustment(type, null);
+        }
+    };
+    ImageEditor.prototype.setBlackAndWhiteFilter = function (boolean) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.adjustmentLevel.bw = boolean;
+            if (boolean) {
+                if (this.degree === 0 && this.currFlipState === '') {
+                    this.replaceBWSharpenData('bw');
+                }
+                else if (this.degree !== 0) {
+                    var tempDegree = this.degree;
+                    this.rotate(-tempDegree);
+                    this.replaceBWSharpenData('bw');
+                    this.rotate(tempDegree);
+                    this.refreshToolbar('filter');
+                }
+                else if (this.currFlipState !== '') {
+                    var tempFlipState = this.currFlipState;
+                    this.flip(tempFlipState);
+                    this.replaceBWSharpenData('bw');
+                    this.flip(tempFlipState);
+                    this.refreshToolbar('filter');
+                }
+                var data = this.inMemoryContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                var imageData = this.getBlackAndWhiteData(data);
+                this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+                this.inMemoryCanvas.width = imageData.width;
+                this.inMemoryCanvas.height = imageData.height;
+                this.inMemoryContext.putImageData(imageData, 0, 0);
+                this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.lowerContext.filter = this.canvasFilter;
+                var temp = this.lowerContext.filter;
+                this.updateBrightnessFilter();
+                this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+                this.lowerContext.filter = temp;
+            }
+            else {
+                if (this.degree === 0 && this.currFlipState === '') {
+                    this.updateBWSharpness();
+                }
+                else if (this.degree !== 0) {
+                    var tempDegree = this.degree;
+                    this.rotate(-tempDegree);
+                    this.updateBWSharpness();
+                    this.rotate(tempDegree);
+                    this.refreshToolbar('filter');
+                    if (this.sharpenedImgData) {
+                        this.sharpenedImgData = false;
+                    }
+                }
+                else if (this.currFlipState !== '') {
+                    var tempFlipState = this.currFlipState;
+                    this.flip(tempFlipState);
+                    this.updateBWSharpness();
+                    this.flip(tempFlipState);
+                    this.refreshToolbar('filter');
+                    if (this.sharpenedImgData) {
+                        this.sharpenedImgData = false;
+                    }
+                }
+            }
+        }
+    };
+    ImageEditor.prototype.setSharpness = function (boolean) {
+        if (!this.disabled && this.imgDataColl.length > 0) {
+            if (this.currObjType.shape === 'freehanddraw') {
+                this.apply();
+                this.upperCanvas.style.cursor = 'default';
+                this.currObjType.shape = '';
+            }
+            this.clearActObj();
+            this.adjustmentLevel.sharpen = boolean;
+            if (boolean) {
+                if (this.degree === 0 && this.currFlipState === '') {
+                    this.replaceBWSharpenData('sharpen');
+                }
+                else if (this.degree !== 0) {
+                    var tempDegree = this.degree;
+                    this.rotate(-tempDegree);
+                    this.replaceBWSharpenData('sharpen');
+                    this.rotate(tempDegree);
+                    this.refreshToolbar('filter');
+                }
+                else if (this.currFlipState !== '') {
+                    var tempFlipState = this.currFlipState;
+                    this.flip(tempFlipState);
+                    this.replaceBWSharpenData('sharpen');
+                    this.flip(tempFlipState);
+                    this.refreshToolbar('filter');
+                }
+                var data = this.inMemoryContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                var imageData = this.getSharpenData(data);
+                this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+                this.inMemoryCanvas.width = imageData.width;
+                this.inMemoryCanvas.height = imageData.height;
+                this.inMemoryContext.putImageData(imageData, 0, 0);
+                this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.lowerContext.filter = this.canvasFilter;
+                var temp = this.lowerContext.filter;
+                this.updateBrightnessFilter();
+                this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+                this.lowerContext.filter = temp;
+            }
+            else {
+                if (this.degree === 0 && this.currFlipState === '') {
+                    this.updateBWSharpness();
+                }
+                else if (this.degree !== 0) {
+                    var tempDegree = this.degree;
+                    this.rotate(-tempDegree);
+                    this.updateBWSharpness();
+                    this.rotate(tempDegree);
+                    this.refreshToolbar('filter');
+                    if (this.sharpenedImgData) {
+                        this.sharpenedImgData = false;
+                    }
+                }
+                else if (this.currFlipState !== '') {
+                    var tempFlipState = this.currFlipState;
+                    this.flip(tempFlipState);
+                    this.updateBWSharpness();
+                    this.flip(tempFlipState);
+                    this.refreshToolbar('filter');
+                    if (this.sharpenedImgData) {
+                        this.sharpenedImgData = false;
+                    }
+                }
+            }
+        }
+    };
+    ImageEditor.prototype.replaceBWSharpenData = function (type) {
+        this.tempImageData = this.inMemoryContext.getImageData(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+        var imageData = this.inMemoryContext.getImageData(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+        if (type === 'sharpen') {
+            imageData = this.getSharpenData(this.tempImageData);
+        }
+        else {
+            imageData = this.getBlackAndWhiteData(imageData);
+        }
+        this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+        this.inMemoryCanvas.width = imageData.width;
+        this.inMemoryCanvas.height = imageData.height;
+        this.inMemoryContext.putImageData(imageData, 0, 0);
+        var tempObj;
+        for (var index = 0; index < this.imgDataColl.length; index++) {
+            if (this.imgDataColl[index].operation !== 'freehanddraw') {
+                tempObj = this.imgDataColl[index];
+                break;
+            }
+        }
+        this.imgDataColl.splice(0, 1, { operation: 'updateCanvas', value: imageData });
+        this.imgDataColl.splice(1, 1, tempObj);
+        this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+        this.inMemoryCanvas.width = this.tempImageData.width;
+        this.inMemoryCanvas.height = this.tempImageData.height;
+        this.inMemoryContext.putImageData(this.tempImageData, 0, 0);
+    };
+    ImageEditor.prototype.updateBWSharpness = function () {
+        this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+        this.inMemoryCanvas.width = this.tempImageData.width;
+        this.inMemoryCanvas.height = this.tempImageData.height;
+        this.inMemoryContext.putImageData(this.tempImageData, 0, 0);
+        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        this.lowerContext.filter = this.canvasFilter;
+        this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+        this.imgDataColl.shift();
+    };
+    ImageEditor.prototype.getSharpenData = function (imageData) {
+        var data = imageData.data;
+        var weights = [0, -1, 0, -1, 5, -1, 0, -1, 0];
+        var side = Math.round(Math.sqrt(weights.length));
+        var halfSide = Math.floor(side / 2);
+        var sw = imageData.width;
+        var sh = imageData.height;
+        var output = this.inMemoryContext.createImageData(sw, sh);
+        var dst = output.data;
+        // go through the destination image pixels
+        var alphaFac = 0;
+        var r;
+        var g;
+        var b;
+        var a;
+        var dstOff;
+        var scx;
+        var scy;
+        var srcOff;
+        var wt;
+        var x;
+        var y;
+        var cx;
+        var cy;
+        for (y = 0; y < sh; y++) {
+            for (x = 0; x < sw; x++) {
+                dstOff = (y * sw + x) * 4;
+                r = 0;
+                g = 0;
+                b = 0;
+                a = 0;
+                for (cy = 0; cy < side; cy++) {
+                    for (cx = 0; cx < side; cx++) {
+                        scy = y + cy - halfSide;
+                        scx = x + cx - halfSide;
+                        if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) {
+                            continue;
+                        }
+                        srcOff = (scy * sw + scx) * 4;
+                        wt = weights[cy * side + cx];
+                        r += data[srcOff] * wt;
+                        g += data[srcOff + 1] * wt;
+                        b += data[srcOff + 2] * wt;
+                        if (!alphaFac) {
+                            a += data[srcOff + 3] * wt;
+                        }
+                    }
+                }
+                dst[dstOff] = r;
+                dst[dstOff + 1] = g;
+                dst[dstOff + 2] = b;
+                if (!alphaFac) {
+                    dst[dstOff + 3] = a;
+                }
+                else {
+                    dst[dstOff + 3] = data[dstOff + 3];
+                }
+            }
+        }
+        return output;
+    };
+    ImageEditor.prototype.getFilterValue = function (value) {
+        var filterValue;
+        if (value === 0) {
+            filterValue = 1;
+        }
+        else {
+            filterValue = 1 + ((value * 0.5) / 100);
+        }
+        return filterValue;
+    };
+    ImageEditor.prototype.setFilterValue = function (value) {
+        var filterValue;
+        if (value === 1) {
+            filterValue = 0;
+        }
+        else {
+            filterValue = ((value - 1) * 100) / 0.5;
+        }
+        return Math.round(filterValue);
+    };
+    ImageEditor.prototype.getSaturationFilterValue = function (value) {
+        var filterValue;
+        if (value === 0) {
+            filterValue = 1;
+        }
+        else {
+            filterValue = 1 + (value / 100);
+        }
+        return filterValue;
+    };
+    ImageEditor.prototype.setSaturationFilterValue = function (value) {
+        var filterValue;
+        if (value === 1) {
+            filterValue = 0;
+        }
+        else {
+            filterValue = (value - 1) * 100;
+        }
+        return Math.round(filterValue);
+    };
+    ImageEditor.prototype.getBlackAndWhiteData = function (imageData) {
+        for (var i = 0; i < imageData.data.length; i += 4) {
+            var count = imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2];
+            var colour = 0;
+            if (count > 383) {
+                colour = 255;
+            }
+            imageData.data[i] = colour;
+            imageData.data[i + 1] = colour;
+            imageData.data[i + 2] = colour;
+            imageData.data[i + 3] = 255;
+        }
+        return imageData;
+    };
     /**
      * Clear a current selection.
      *
@@ -6473,11 +8364,22 @@ var ImageEditor = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_2 = this;
             isCrop = true;
+            var canvasFilter = this.canvasFilter;
+            var tempActObj = extend({}, this.activeObj, {}, true);
+            this.lowerContext.filter = this.canvasFilter = 'none';
+            this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+            for (var j = 0; j < this.objColl.length; j++) {
+                this.apply(this.objColl[j].shape, this.objColl[j]);
+                this.refreshActiveObj();
+            }
+            this.activeObj = tempActObj;
             this.upperCanvas.style.display = 'none';
             var widthRatio = void 0;
             var heightRatio = void 0;
             var imgData = void 0;
             var zoomedRotate = false;
+            var factor = this.factor;
             if (this.factor === 1) {
                 imgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                 widthRatio = this.lowerCanvas.width / parseInt(this.lowerCanvas.style.maxWidth, 10);
@@ -6512,6 +8414,7 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.updateInMemoryContext(imgData);
                     }
                     this.degree = 0;
+                    this.updateBrightnessFilter();
                     this.lowerContext.drawImage(this.inMemoryCanvas, tempObj.activePoint.startX, tempObj.activePoint.startY, tempObj.activePoint.width, tempObj.activePoint.height, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                 }
                 if (this.flipState !== '') {
@@ -6526,6 +8429,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     this.lowerCanvas.style.maxHeight = this.upperCanvas.style.maxHeight = maxDimension.height + 'px';
                     this.lowerCanvas.width = this.upperCanvas.width = maxDimension.width * widthRatio;
                     this.lowerCanvas.height = this.upperCanvas.height = maxDimension.height * heightRatio;
+                    this.updateBrightnessFilter();
                     this.lowerContext.drawImage(this.inMemoryCanvas, tempObj.activePoint.startX, tempObj.activePoint.startY, tempObj.activePoint.width, tempObj.activePoint.height, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                 }
             }
@@ -6546,6 +8450,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     ((this.element.clientWidth - parseInt(cssObj.width, 10) - 18) / 2) + 1 + 'px';
                 this.lowerCanvas.style.top = this.upperCanvas.style.top = ((this.element.clientHeight - this.toolbarHeight
                     - parseInt(cssObj.height, 10)) / 2) + 1 + 'px';
+                this.updateBrightnessFilter();
                 this.lowerContext.drawImage(this.inMemoryCanvas, this.activeObj.activePoint.startX, this.activeObj.activePoint.startY, this.activeObj.activePoint.width, this.activeObj.activePoint.height, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
             }
             if (this.activeObj.shape === 'crop-circle') {
@@ -6554,6 +8459,7 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.inMemoryCanvas.height = imgData_1.height;
                 this.inMemoryContext.putImageData(imgData_1, 0, 0);
                 this.lowerContext.save();
+                this.updateBrightnessFilter();
                 this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0, this.baseImg.width, this.baseImg.height);
                 this.lowerContext.globalCompositeOperation = 'destination-in';
                 this.lowerContext.beginPath();
@@ -6566,18 +8472,11 @@ var ImageEditor = /** @class */ (function (_super) {
             showSpinner(this.element);
             this.element.style.opacity = '0.5';
             var blobUrl_1;
-            var data_1;
             // eslint-disable-next-line @typescript-eslint/tslint/config
             this.lowerCanvas.toBlob(function (blob) {
                 blobUrl_1 = URL.createObjectURL(blob);
-                proxy_2.isUndoRedo = false;
                 proxy_2.baseImg.src = blobUrl_1;
-                data_1 = proxy_2.lowerContext.getImageData(0, 0, proxy_2.lowerCanvas.width, proxy_2.lowerCanvas.height);
                 proxy_2.imgDataColl = [];
-                if (!proxy_2.isUndoRedo) {
-                    proxy_2.updateUndoRedoColl('crop', data_1, proxy_2.objColl);
-                }
-                proxy_2.isUndoRedo = false;
             }, 'image/png');
             this.objColl = [];
             this.refreshActiveObj();
@@ -6586,26 +8485,11 @@ var ImageEditor = /** @class */ (function (_super) {
             this.upperContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
             this.lowerContext.globalAlpha = 0;
             this.lowerContext.fillRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            this.lowerContext.setTransform(1, 0, 0, 1, 0, 0);
-            this.upperContext.setTransform(1, 0, 0, 1, 0, 0);
             this.factor = 1;
+            this.canvasFilter = canvasFilter;
         }
         return isCrop;
     };
-    ImageEditor.prototype.updateInMemoryContext = function (imgData) {
-        this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-        var temp = extend({}, this.activeObj, {}, true);
-        for (var i = 0; i < this.objColl.length; i++) {
-            this.apply(this.objColl[i].shape, this.objColl[i]);
-        }
-        this.activeObj = temp;
-        imgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-        this.inMemoryContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
-        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-        this.inMemoryCanvas.width = imgData.width;
-        this.inMemoryCanvas.height = imgData.height;
-        this.inMemoryContext.putImageData(imgData, 0, 0);
-    };
     /**
      * Flips an image by horizontally or vertically.
      *
@@ -6622,8 +8506,8 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             var transitionArgs = { direction: direction };
             this.trigger('flipping', transitionArgs);
-            this.lastAction = 'flip';
-            this.flipMethod = true;
+            this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
             var splitWords = [];
             var activeObjShape = void 0;
             if (!isNullOrUndefined(this.activeObj.activePoint)) {
@@ -6644,7 +8528,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.lowerContext.scale(-1, 1);
                 this.upperContext.translate(this.upperContext.canvas.width, 0);
                 this.upperContext.scale(-1, 1);
-                this.flipDirection = 'horizontal';
                 if (this.flipState === '' || this.flipState.toLowerCase() === 'vertical') {
                     this.flipState = 'horizontal';
                 }
@@ -6660,7 +8543,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.lowerContext.scale(1, -1);
                 this.upperContext.translate(0, this.upperContext.canvas.height);
                 this.upperContext.scale(1, -1);
-                this.flipDirection = 'vertical';
                 if (this.flipState.toLowerCase() === '' || this.flipState.toLowerCase() === 'horizontal') {
                     this.flipState = 'vertical';
                 }
@@ -6671,13 +8553,25 @@ var ImageEditor = /** @class */ (function (_super) {
                     this.currFlipState = 'vertical';
                 }
             }
+            var temp = this.lowerContext.filter;
+            this.updateBrightnessFilter();
+            this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
             this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+            this.lowerContext.filter = temp;
             this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.lowerContext.filter = this.canvasFilter;
+            this.updateBrightnessFilter();
+            this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+            this.lowerContext.filter = temp;
             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);
             if (this.flipState.toLowerCase() === 'horizontal') {
+                var tempFilter = this.lowerContext.filter;
+                this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                    'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
                 for (var i = 0, len = this.objColl.length; i < len; i++) {
                     this.objColl[i].flippedText = false;
                     if (this.objColl[i].shapeFlip !== '' && this.objColl[i].shapeFlip === this.currFlipState) {
@@ -6687,13 +8581,16 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.apply(this.objColl[i].shape, this.objColl[i]);
                     }
                 }
+                this.lowerContext.filter = tempFilter;
                 this.lowerContext.translate(this.lowerContext.canvas.width, 0);
                 this.lowerContext.scale(-1, 1);
                 this.upperContext.translate(this.upperContext.canvas.width, 0);
                 this.upperContext.scale(-1, 1);
-                this.flipDirection = '';
             }
             else if (this.flipState.toLowerCase() === 'vertical') {
+                var tempFilter = this.lowerContext.filter;
+                this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                    'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
                 for (var i = 0, len = this.objColl.length; i < len; i++) {
                     this.objColl[i].flippedText = false;
                     if (this.objColl[i].shapeFlip !== '' && this.objColl[i].shapeFlip === this.currFlipState) {
@@ -6703,11 +8600,11 @@ var ImageEditor = /** @class */ (function (_super) {
                         this.apply(this.objColl[i].shape, this.objColl[i]);
                     }
                 }
+                this.lowerContext.filter = tempFilter;
                 this.lowerContext.translate(0, this.lowerContext.canvas.height);
                 this.lowerContext.scale(1, -1);
                 this.upperContext.translate(0, this.upperContext.canvas.height);
                 this.upperContext.scale(1, -1);
-                this.flipDirection = '';
             }
             for (var i = 0, len = this.objColl.length; i < len; i++) {
                 if (this.objColl[i].flipObjColl.length === 0) {
@@ -6722,15 +8619,15 @@ var ImageEditor = /** @class */ (function (_super) {
             }
             this.redrawObj(direction.toLowerCase());
             if (this.flipState === '') {
+                var tempFilter = this.lowerContext.filter;
+                this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                    'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
                 for (var i = 0, len = this.objColl.length; i < len; i++) {
                     this.apply(this.objColl[i].shape, this.objColl[i]);
                 }
+                this.lowerContext.filter = tempFilter;
             }
             this.refreshActiveObj();
-            if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('flip', direction, this.objColl);
-            }
-            this.isUndoRedo = this.flipMethod = false;
             if (!isNullOrUndefined(activeObjShape)) {
                 if (activeObjShape === 'custom') {
                     this.activeObj.activePoint = { startX: 0, startY: 0, endX: this.lowerCanvas.width,
@@ -6742,6 +8639,7 @@ var ImageEditor = /** @class */ (function (_super) {
                     this.select(activeObjShape);
                 }
             }
+            this.refreshToolbar('main');
         }
     };
     /**
@@ -6762,11 +8660,13 @@ var ImageEditor = /** @class */ (function (_super) {
      */
     ImageEditor.prototype.open = function (data) {
         if (!this.disabled) {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            var proxy_3 = this;
             showSpinner(this.element);
             this.element.style.opacity = '0.5';
-            var toolbar_10 = document.querySelector('#' + this.element.id + '_currPos');
-            if (toolbar_10) {
-                toolbar_10.style.display = 'none';
+            var toolbar_11 = document.querySelector('#' + this.element.id + '_currPos');
+            if (toolbar_11) {
+                toolbar_11.style.display = 'none';
             }
             if (this.defToolbarItems.length === 0 &&
                 (isNullOrUndefined(document.getElementById(this.element.id + '_toolbar')))) {
@@ -6775,11 +8675,16 @@ var ImageEditor = /** @class */ (function (_super) {
             if (isNullOrUndefined(this.toolbarTemplate)) {
                 this.update();
             }
+            this.degree = 0;
+            this.flipState = '';
+            this.factor = 1;
+            this.imgDataColl = [];
             var type = typeof (data);
             if (type === 'string') {
                 this.imageOnLoad(data);
             }
             else {
+                var tempFilter = this.lowerContext.filter;
                 this.lowerCanvas = document.querySelector('#' + this.element.id + '_lowerCanvas');
                 this.upperCanvas = document.querySelector('#' + this.element.id + '_upperCanvas');
                 this.lowerContext = this.lowerCanvas.getContext('2d');
@@ -6793,10 +8698,19 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.imgDataColl.push({ operation: 'open', value: data });
                 this.lowerCanvas.width = this.upperCanvas.width = data.width;
                 this.lowerCanvas.height = this.upperCanvas.height = data.height;
+                this.lowerContext.filter = tempFilter;
+                var temp = this.lowerContext.filter;
+                this.updateBrightnessFilter();
                 this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-                this.updateCanvas();
+                this.lowerContext.filter = temp;
+                this.redrawImg(this.lowerContext.filter);
                 hideSpinner(this.element);
                 this.element.style.opacity = '1';
+                // eslint-disable-next-line @typescript-eslint/tslint/config
+                this.lowerCanvas.toBlob(function (blob) {
+                    showSpinner(proxy_3.element);
+                    proxy_3.baseImg.src = URL.createObjectURL(blob);
+                }, 'image/png');
             }
         }
     };
@@ -6813,6 +8727,8 @@ var ImageEditor = /** @class */ (function (_super) {
             this.lowerContext.clearRect(0, 0, this.inMemoryCanvas.height, this.inMemoryCanvas.width);
             this.upperContext.clearRect(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
             this.upperContext.clearRect(0, 0, this.inMemoryCanvas.height, this.inMemoryCanvas.width);
+            this.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
             showSpinner(this.element);
             this.element.style.opacity = '0.5';
             if (this.imgDataColl.length > 0) {
@@ -6823,11 +8739,13 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.inMemoryCanvas.width = this.imgDataColl[0].value.width;
                 this.inMemoryCanvas.height = this.imgDataColl[0].value.height;
                 this.inMemoryContext.putImageData(this.imgDataColl[0].value, 0, 0);
-                this.redrawImg();
+                this.redrawImg(this.lowerContext.filter);
+                this.lowerCanvas.width = this.baseImg.width;
+                this.lowerCanvas.height = this.baseImg.height;
             }
             this.lowerContext.setTransform(1, 0, 0, 1, 0, 0);
             this.upperContext.setTransform(1, 0, 0, 1, 0, 0);
-            this.baseImg.src = this.baseImgSrc;
+            this.baseImg.src = this.baseImgSrc.id;
             this.factor = 1;
             this.refreshToolbar('main');
             if (Browser.isDevice && document.getElementById(this.element.id + '_bottomToolbar')) {
@@ -6836,22 +8754,20 @@ var ImageEditor = /** @class */ (function (_super) {
             this.objColl = [];
             this.imgDataColl = [];
             this.degree = 0;
-            this.flipState = this.keyHistory = this.currFlipState = this.flipDirection = '';
+            this.flipState = this.keyHistory = this.currFlipState = '';
             this.upperCanvas.style.display = 'none';
+            this.togglePan = this.togglePen = false;
             this.upperCanvas.style.cursor = this.lowerCanvas.style.cursor = 'default';
-            this.undoRedoColl = [];
-            this.dragCanvas = this.dragged = this.isUndoRedo = this.activeObj.flippedText = this.flipMethod = false;
+            this.dragCanvas = this.activeObj.flippedText = false;
             this.currImgData = {};
             this.pannStart = { startX: 0, startY: 0, width: 0, height: 0 };
             this.pannEnd = { startX: 0, startY: 0, width: 0, height: 0 };
             this.lowerContext.lineWidth = this.upperContext.lineWidth = undefined;
-            this.togglePan = this.togglePen = this.rotateMethod = false;
             this.lastX = this.lastY = 0;
             this.dragStart = { x: 0, y: 0 };
             this.touchEndPoint = {};
             this.prevX = this.currX = this.prevY = this.currY = 0;
-            this.lastAction = this.tempKeyHistory = '';
-            this.isBoldbtn = this.isItalicbtn = false;
+            this.tempKeyHistory = '';
             this.currentToolbar = 'main';
             this.textStartPoints = { x: 0, y: 0 };
             this.fontSizeColl = this.penDrawColl = [];
@@ -6861,14 +8777,24 @@ var ImageEditor = /** @class */ (function (_super) {
             this.textSettings =
                 { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, bold: false, italic: false, underline: false };
             this.tempStrokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
-            this.penStrokeWidth = undefined;
             this.tempTextSettings =
                 { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, bold: false, italic: false, underline: false };
             this.refreshActiveObj();
             this.timer = undefined;
+            this.penStrokeWidth = undefined;
             this.isScreenOriented = false;
+            this.tempObjColl = [];
+            this.tempObjColl = undefined;
+            this.adjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0, exposure: 0, sharpen: false, bw: false };
+            this.tempAdjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0, exposure: 0, sharpen: false, bw: false };
+            this.canvasFilter = this.currentFilter = this.tempAdjustmentValue = '';
+            this.lowerContext.filter = this.initialAdjustmentValue = this.adjustmentValue = 'brightness(' + 1 + ') ' + 'contrast(' + 100
+                + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
+            this.tempImageData = undefined;
+            this.sharpenedImgData = this.isBrightnessAdjusted = this.isInitialLoading = false;
             this.currObjType = { shape: '', isDragging: false, isActiveObj: false, isText: false, isInitialText: false, isLine: false,
-                isInitialLine: false, isCustomCrop: false, isZoomed: false };
+                isInitialLine: false, isCustomCrop: false, isZoomed: false, isFiltered: false, isSave: false };
         }
     };
     /**
@@ -6896,7 +8822,6 @@ 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);
@@ -6912,13 +8837,16 @@ var ImageEditor = /** @class */ (function (_super) {
                 if (this.degree === 360) {
                     this.degree = 0;
                 }
+                var temp = this.lowerContext.filter;
                 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.updateBrightnessFilter();
                 this.lowerContext.drawImage(this.inMemoryCanvas, -this.lowerCanvas.height / 2, -this.lowerCanvas.width / 2);
+                this.lowerContext.filter = temp;
                 this.lowerContext.rotate(Math.PI / 180 * -degree);
                 this.lowerContext.translate(-this.lowerCanvas.width / 2, -this.lowerCanvas.height / 2);
                 this.lowerContext.restore();
@@ -6927,12 +8855,17 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.inMemoryCanvas.width = this.currImgData.width;
                 this.inMemoryCanvas.height = this.currImgData.height;
                 this.inMemoryContext.putImageData(this.currImgData, 0, 0);
+                this.lowerContext.filter = this.canvasFilter;
+                this.updateBrightnessFilter();
+                this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                 this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
+                this.lowerContext.filter = temp;
                 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 };
+                    var endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height -
+                            this.pannEnd.startY };
                     this.activeObj.activePoint = { startX: this.pannStart.startX, startY: this.pannStart.startY, endX: endPoint.x,
                         endY: endPoint.y, width: endPoint.x - this.pannStart.startX, height: endPoint.y - this.pannStart.startY };
                     this.updateActiveObject(this.calcRatio(), this.activeObj.activePoint, this.activeObj);
@@ -6944,10 +8877,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.refreshToolbar('main', true, true);
             }
             this.factor = 1;
-            if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('rotate', degree, this.objColl, null);
-            }
-            this.isUndoRedo = false;
             this.refreshToolbar('main');
         }
         return isRotate;
@@ -6968,17 +8897,14 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.applyPenDraw();
             }
             this.applyActObj();
+            this.lowerContext.filter = this.canvasFilter;
             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.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                 this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-                this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-                for (var i = 0; i < this.objColl.length; i++) {
-                    this.apply(this.objColl[i].shape, this.objColl[i]);
-                    this.refreshActiveObj();
-                }
+                this.redrawImgWithObj();
             }
             type = type ? type : 'Png';
             this.redrawActObj();
@@ -6986,6 +8912,7 @@ var ImageEditor = /** @class */ (function (_super) {
             var saved_1 = { fileName: fileName ? fileName : 'ImageEditor', fileType: type };
             this.trigger('beforeSave', beforeSave, function (observableSaveArgs) {
                 if (!observableSaveArgs.cancel) {
+                    _this.currObjType.isSave = true;
                     fileName = observableSaveArgs.fileName ? observableSaveArgs.fileName : fileName;
                     if (type.toLowerCase() === 'svg') {
                         fileName = fileName || 'ImageEditor';
@@ -7046,7 +8973,8 @@ var ImageEditor = /** @class */ (function (_super) {
                     this.upperCanvas.style.cursor = 'crosshair';
                     if (Browser.isDevice) {
                         var arcRadius = (7.5 * (ratio.width > ratio.height ? ratio.width : ratio.height)) / this.factor;
-                        var endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
+                        var endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height -
+                                this.pannEnd.startY };
                         this.activeObj.activePoint = { startX: this.pannStart.startX + arcRadius, startY: this.pannStart.startY + arcRadius,
                             endX: endPoint.x - arcRadius, endY: endPoint.y - arcRadius };
                         this.activeObj.activePoint.width = this.activeObj.activePoint.endX - this.activeObj.activePoint.startX;
@@ -7099,7 +9027,7 @@ var ImageEditor = /** @class */ (function (_super) {
     ImageEditor.prototype.freeHandDraw = function (value) {
         if (value) {
             this.togglePen = true;
-            this.upperCanvas.style.cursor = 'cross-hair';
+            this.upperCanvas.style.cursor = 'crosshair';
             this.drawPen();
         }
         else {
@@ -7113,7 +9041,7 @@ var ImageEditor = /** @class */ (function (_super) {
      *
      * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
      *
-     * @returns {void}.
+     *  @returns {void}.
      */
     ImageEditor.prototype.freehandDraw = function (value) {
         this.freeHandDraw(value);
@@ -7164,17 +9092,8 @@ var ImageEditor = /** @class */ (function (_super) {
             this.redrawActObj();
             this.refreshActiveObj();
             this.upperContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.lowerContext.filter = this.canvasFilter;
             this.upperCanvas.style.cursor = 'default';
-            var zoomState = void 0;
-            if (value === 3.75 || value === 1) {
-                zoomState = 0.1;
-            }
-            else if (value === -3.75) {
-                zoomState = -0.1;
-            }
-            else {
-                zoomState = value;
-            }
             if (this.degree !== 0) {
                 this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                 this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.height, this.lowerCanvas.width);
@@ -7186,16 +9105,22 @@ var ImageEditor = /** @class */ (function (_super) {
                 this.lastX = this.lowerCanvas.width / 2;
                 this.lastY = this.lowerCanvas.height / 2;
             }
-            if (value > 0) {
-                this.zoomImg(3.75);
+            if (value === 1.1 || value === -1.1) {
+                this.zoomImg(value);
             }
             else {
-                this.zoomImg(-3.75);
+                if (value > 0) {
+                    this.zoomImg(3.75);
+                }
+                else {
+                    this.zoomImg(-3.75);
+                }
             }
             this.refreshActiveObj();
             if (!isNullOrUndefined(activeObjShape)) {
                 if (activeObjShape === 'custom') {
-                    var endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
+                    var endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height -
+                            this.pannEnd.startY };
                     this.activeObj.activePoint = { startX: this.pannStart.startX, startY: this.pannStart.startY, endX: endPoint.x,
                         endY: endPoint.y, width: endPoint.x - this.pannStart.startX, height: endPoint.y - this.pannStart.startY };
                     this.updateActiveObject(this.calcRatio(), this.activeObj.activePoint, this.activeObj);
@@ -7206,10 +9131,6 @@ var ImageEditor = /** @class */ (function (_super) {
                 }
                 this.refreshToolbar('main', true, true);
             }
-            if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('zoom', zoomState, this.objColl);
-            }
-            this.isUndoRedo = false;
             var zoomOut = document.querySelector('#' + this.element.id + '_zoomOut');
             if (!isNullOrUndefined(zoomOut) && this.factor === 1) {
                 zoomOut.classList.add('e-disabled');
@@ -7217,6 +9138,23 @@ var ImageEditor = /** @class */ (function (_super) {
             else if (!isNullOrUndefined(zoomOut)) {
                 zoomOut.classList.remove('e-disabled');
             }
+            if (!this.togglePan) {
+                this.callMainToolbar(false, true);
+            }
+            this.autoEnablePan();
+            if (isNullOrUndefined(this.activeObj.activePoint) || this.activeObj.activePoint.width === 0) {
+                this.refreshToolbar('main');
+            }
+            else {
+                this.refreshToolbar('main', true, true);
+            }
+            var panBtn = this.element.querySelector('.e-img-pan .e-btn');
+            if (!isNullOrUndefined(panBtn) && this.togglePan) {
+                panBtn.classList.add('e-selected-btn');
+            }
+            else if (!isNullOrUndefined(panBtn)) {
+                panBtn.classList.remove('e-selected-btn');
+            }
         }
     };
     /**
@@ -7397,6 +9335,7 @@ var ImageEditor = /** @class */ (function (_super) {
         else {
             isSelected = true;
             this.activeObj = obj;
+            this.lowerContext.filter = this.canvasFilter;
             this.redrawShape(this.activeObj);
             if (this.activeObj.shape === 'text') {
                 this.refreshToolbar('text');
@@ -7438,12 +9377,9 @@ var ImageEditor = /** @class */ (function (_super) {
                 break;
             }
         }
+        this.lowerContext.filter = this.canvasFilter;
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-        this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-        for (var i = 0; i < this.objColl.length; i++) {
-            this.apply(this.objColl[i].shape, this.objColl[i]);
-            this.refreshActiveObj();
-        }
+        this.redrawImgWithObj();
         this.refreshToolbar('main');
     };
     /**
@@ -7508,9 +9444,60 @@ var ImageEditor = /** @class */ (function (_super) {
             canvasWrapper.style.height = this.element.offsetHeight - this.toolbarHeight - 1 + 'px';
             this.lowerCanvas.height = this.upperCanvas.height = this.element.offsetHeight - this.toolbarHeight - 1;
         }
+        this.lowerContext.filter = this.canvasFilter;
         this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
     };
+    /**
+     * To apply the filters to an image
+     *
+     * @param {ImageFilterOptions } filterOption - Specifies the filter options to the image.
+     * @returns {void}.
+     */
+    ImageEditor.prototype.applyImageFilter = function (filterOption) {
+        if (this.initialAdjustmentValue === '') {
+            this.initialAdjustmentValue = 'brightness(1) contrast(100%) hue-rotate(0deg) saturate(100%) opacity(1) blur(0px) sepia(0%) grayscale(0%) invert(0%)';
+        }
+        this.lowerContext.filter = this.initialAdjustmentValue;
+        this.setFilter(filterOption.toString());
+    };
+    /**
+     * To apply the filters to an image
+     *
+     * @param {ImageFinetuneOptions } finetuneOption - Specifies the finetune options to the image.
+     * @param {number } value - Specifies the value for finetuning the image.
+     * @returns {void}.
+     *
+     */
+    ImageEditor.prototype.finetuneImage = function (finetuneOption, value) {
+        if (this.initialAdjustmentValue === '') {
+            this.initialAdjustmentValue = 'brightness(1) contrast(100%) hue-rotate(0deg) saturate(100%) opacity(1) blur(0px) sepia(0%) grayscale(0%) invert(0%)';
+        }
+        this.lowerContext.filter = this.initialAdjustmentValue;
+        switch (finetuneOption) {
+            case 'Brightness':
+                this.setBrightness(value);
+                break;
+            case 'Contrast':
+                this.setContrast(value);
+                break;
+            case 'Hue':
+                this.setHue(value);
+                break;
+            case 'Saturation':
+                this.setSaturation(value);
+                break;
+            case 'Opacity':
+                this.setOpacity(value);
+                break;
+            case 'Blur':
+                this.setBlur(value);
+                break;
+            case 'Exposure':
+                this.setExposure(value);
+                break;
+        }
+    };
     /**
      * To check whether the undo collection is empty or not.
      *
@@ -7563,7 +9550,8 @@ var ImageEditor = /** @class */ (function (_super) {
      * @private
      */
     ImageEditor.prototype.getBlob = function (url) {
-        return null;
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        return url;
     };
     /**
      * To check whether the signature is empty or not.
@@ -7613,7 +9601,7 @@ var ImageEditor = /** @class */ (function (_super) {
     /**
      * 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 {FileType} 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}.
@@ -7636,9 +9624,10 @@ var ImageEditor = /** @class */ (function (_super) {
     /**
      * Returns the persistence data for component.
      *
-     * @returns any.
+     * @returns {any}.
      * @private
      */
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     ImageEditor.prototype.getLocalData = function () {
         return null;
     };
@@ -7694,6 +9683,12 @@ var ImageEditor = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], ImageEditor.prototype, "enablePersistence", void 0);
+    __decorate([
+        Complex({}, FinetuneSettings)
+    ], ImageEditor.prototype, "finetuneSettings", void 0);
+    __decorate([
+        Property('')
+    ], ImageEditor.prototype, "signatureValue", void 0);
     __decorate([
         Event()
     ], ImageEditor.prototype, "beforeSave", void 0);
@@ -7736,6 +9731,12 @@ var ImageEditor = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], ImageEditor.prototype, "toolbarItemClicked", void 0);
+    __decorate([
+        Event()
+    ], ImageEditor.prototype, "imageFiltering", void 0);
+    __decorate([
+        Event()
+    ], ImageEditor.prototype, "fineTuneValueChanging", void 0);
     ImageEditor = ImageEditor_1 = __decorate([
         NotifyPropertyChanges
     ], ImageEditor);