@syncfusion/ej2-image-editor 20.3.50 → 20.4.38

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

@@ -1,5 +1,5 @@
-import { Browser, Event, EventHandler, L10n, NotifyPropertyChanges, Property, addClass, compile, extend, getComponent, getInstance, getUniqueID, isNullOrUndefined, removeClass } from '@syncfusion/ej2-base';
-import { ColorPicker, SignatureBase, Uploader } from '@syncfusion/ej2-inputs';
+import { Browser, ChildProperty, Complex, Event, EventHandler, L10n, NotifyPropertyChanges, Property, addClass, compile, detach, extend, getComponent, getInstance, getUniqueID, isNullOrUndefined, removeClass, select } from '@syncfusion/ej2-base';
+import { ColorPicker, SignatureBase, Slider, Uploader } from '@syncfusion/ej2-inputs';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
@@ -11,6 +11,32 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var ImageEditor_1;
+/**
+ * Interface for image finetune values.
+ */
+class FinetuneSettings extends ChildProperty {
+}
+__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);
 /**
  * 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.
@@ -36,7 +62,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
     constructor(options, element) {
         super(options, element);
         this.degree = 0; // current rotated state
-        this.isUndoRedo = false;
         this.dragCanvas = false;
         this.dragElement = '';
         this.keyHistory = ''; // text history
@@ -57,24 +82,18 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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 = [];
@@ -85,11 +104,29 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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;
     }
     preRender() {
         // pre render code snippets
@@ -117,8 +154,28 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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',
@@ -146,7 +203,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             Ellipse: 'Ellipse',
             Rectangle: 'Rectangle',
             Line: 'Line',
-            Default: 'Default',
             Bold: 'Bold',
             Italic: 'Italic',
             BoldItalic: 'Bold Italic',
@@ -155,7 +211,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             Medium: 'Medium',
             Large: 'Large',
             XLarge: 'X-Large',
-            ABC: 'ABC'
+            ABC: 'ABC',
+            Browse: 'Browse'
         };
         this.l10n = new L10n('image-editor', this.defaultLocale, this.locale);
     }
@@ -231,6 +288,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                         this.upperContext.fillStyle = this.themeColl[this.theme]['secondaryColor'];
                     }
                     break;
+                case 'finetuneSettings':
+                    if (newProperties.finetuneSettings) {
+                        this.finetuneSettings = newProperties.finetuneSettings;
+                        this.updateFinetunes();
+                    }
+                    break;
             }
         }
     }
@@ -244,19 +307,24 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         if (!this.element.getAttribute('class')) {
             this.element.removeAttribute('class');
         }
+        this.destroySubComponents();
         this.unwireEvent();
         super.destroy();
         this.element.innerHTML = '';
         this.trigger('destroyed');
     }
     initialize() {
+        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(' '));
         }
@@ -266,6 +334,39 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             });
         }
     }
+    updateFinetunes() {
+        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)
@@ -288,7 +389,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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));
         }
     }
@@ -310,6 +411,35 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         EventHandler.remove(this.lowerCanvas, 'mouseup', this.canvasMouseUpHandler);
         EventHandler.remove(document, 'mouseup', this.canvasMouseUpHandler);
     }
+    initializeFilter() {
+        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);
+    }
+    destroySubComponents() {
+        const inputElement = this.element.querySelectorAll('input.e-control');
+        const btnElement = this.element.querySelectorAll('button.e-control');
+        for (let i = 0, len = inputElement.length; i < len; i++) {
+            if (inputElement[i].classList.contains('e-color-picker')) {
+                getComponent(inputElement[i], 'color-picker').destroy();
+                detach(select('input#' + inputElement[i].id, this.element));
+            }
+        }
+        for (let i = 0, len = btnElement.length; i < len; i++) {
+            if (btnElement[i].classList.contains('e-dropdown-btn')) {
+                getComponent(btnElement[i], 'dropdown-btn').destroy();
+                detach(select('button#' + btnElement[i].id, this.element));
+            }
+            else if (btnElement[i].classList.contains('e-btn')) {
+                getComponent(btnElement[i], 'btn').destroy();
+                detach(select('button#' + btnElement[i].id, this.element));
+            }
+        }
+    }
     updateTheme() {
         if (this.theme !== '') {
             this.theme = this.toPascalCase(this.theme);
@@ -421,6 +551,58 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             this.toolbarHeight = 0;
         }
     }
+    createContextualToolbar() {
+        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;' }
+            }));
+            const toolbarArea = document.getElementById(this.element.id + '_contextualToolbarArea');
+            const toolbar = this.createElement('div', { id: this.element.id + '_contextualToolbar' });
+            toolbarArea.appendChild(toolbar);
+        }
+    }
+    updateContextualToolbar(type, cType) {
+        if (this.toolbarTemplate) {
+            this.toolbarTemplateFn();
+        }
+        else {
+            const toolbarArea = this.element.querySelector('#' + this.element.id + '_toolbarArea');
+            const 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) {
+                const cHt = contextualToolbarArea.offsetHeight;
+                const 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';
+            }
+        }
+    }
     createBottomToolbar() {
         if (isNullOrUndefined(this.toolbar) || (!isNullOrUndefined(this.toolbar) && this.toolbar.length > 0)) {
             this.element.appendChild(this.createElement('div', {
@@ -560,6 +742,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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' });
+        }
         const tempToolbarItems = this.processToolbar('center');
         for (let i = 0, len = tempToolbarItems.length; i < len; i++) {
             toolbarItems.push(tempToolbarItems[i]);
@@ -762,7 +952,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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' });
@@ -843,7 +1033,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
     }
     cropSelect(args) {
-        const text = args.item.text;
+        const text = args.item.id;
         this.select(text);
         this.refreshToolbar('main', true, true);
     }
@@ -947,9 +1137,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 modeSwitcher: false, noColor: true, value: '',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-fill-color',
                 change: (args) => {
+                    this.pushActItemIntoObj();
+                    const 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.element.children[0].classList.add('e-nocolor-item');
                     }
@@ -982,10 +1179,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 modeSwitcher: false, noColor: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-shape-stroke-color',
                 change: (args) => {
+                    this.pushActItemIntoObj();
+                    const 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.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB.toggle();
@@ -1029,9 +1233,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                             args.element.parentElement.offsetHeight + 'px';
                     }
                     const activeBtn = spanElem.innerHTML;
-                    args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                    if (activeBtn !== '') {
+                        args.element.querySelector('[aria-label = ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
+                    }
                 },
                 select: (args) => {
+                    this.pushActItemIntoObj();
+                    const objColl = extend([], this.objColl, [], true);
+                    this.objColl.pop();
                     spanElem.textContent = args.item.text;
                     this.activeObj.strokeSettings.strokeWidth = parseInt(args.item.id, 10);
                     if (this.lowerCanvas.width > this.lowerCanvas.height) {
@@ -1041,7 +1250,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                         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 */
@@ -1167,17 +1380,26 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 modeSwitcher: false, value: '#fff',
                 showButtons: false, mode: 'Palette', cssClass: 'e-text-fontt-color',
                 change: (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;
+                        const 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.element.children[0].style.backgroundColor = args.currentValue.rgba;
                     strokeDDB.toggle();
@@ -1199,6 +1421,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 = '#fff';
         }
     }
+    pushActItemIntoObj() {
+        if (this.textBox.style.display === 'none') {
+            this.objColl.push(this.activeObj);
+        }
+        else {
+            const temp = extend({}, this.activeObj, {}, true);
+            this.setTextBoxStylesToActObj();
+            this.objColl.push(this.activeObj);
+            this.activeObj = temp;
+        }
+    }
     createTextBtn(items) {
         const ratio = this.calcRatio();
         if (items.indexOf('fontFamily') > -1) {
@@ -1235,6 +1468,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                         + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: (args) => {
+                    this.pushActItemIntoObj();
+                    this.objColl.pop();
                     spanElem.textContent = args.item.text;
                     if (Browser.isDevice) {
                         spanElem.setAttribute('style', 'font-family:' + args.item.id);
@@ -1242,10 +1477,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     if (this.textBox.style.display === 'block') {
                         const temp = this.activeObj.textSettings.fontFamily;
                         this.activeObj.textSettings.fontFamily = this.toPascalCase(args.item.id);
-                        this.updateFontStyles();
-                        const 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);
+                        const 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();
@@ -1253,7 +1491,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     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]);
                     }
                 }
             });
@@ -1352,10 +1591,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     args.element.querySelector('[aria-label *= ' + '"' + activeBtn + '"' + ']').classList.add('e-selected-btn');
                 },
                 select: (args) => {
+                    this.pushActItemIntoObj();
+                    this.objColl.pop();
                     fontSizeSpanElem.textContent = args.item.text;
                     if (this.textBox.style.display === 'block') {
                         const 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();
                         let textStyle = '';
                         if (this.textBox.style.fontWeight === 'bold') {
                             textStyle = 'bold ';
@@ -1387,11 +1630,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                         const text = this.getMaxText();
                         const width = this.upperContext.measureText(text).width +
                             this.activeObj.textSettings.fontSize * 0.5;
-                        const height = rows.length * (this.activeObj.textSettings.fontSize + this.activeObj.textSettings.fontSize * 0.25);
+                        const 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]);
                     }
                 }
             });
@@ -1442,14 +1687,43 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         this.activeObj.textSettings.italic = tempItalic;
         return width;
     }
+    updateObjColl(item) {
+        const tempBold = this.activeObj.textSettings.bold;
+        const 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;
+    }
     applyFontStyle(item, ratio) {
+        this.pushActItemIntoObj();
+        this.objColl.pop();
         switch (item) {
             case 'default':
                 if (this.textBox.style.display === 'block') {
-                    const width = this.getTextAreaWidth(item);
-                    this.textBox.style.width = Browser.isDevice ? width + 'px' : (width * ((ratio.width + ratio.height) / 2)) + 'px';
+                    const 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;
@@ -1459,10 +1733,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 break;
             case 'bold':
                 if (this.textBox.style.display === 'block') {
-                    const width = this.getTextAreaWidth(item);
-                    this.textBox.style.width = Browser.isDevice ? width + 'px' : (width * ((ratio.width + ratio.height) / 2)) + 'px';
+                    const 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;
@@ -1472,10 +1747,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 break;
             case 'italic':
                 if (this.textBox.style.display === 'block') {
-                    const width = this.getTextAreaWidth(item);
-                    this.textBox.style.width = Browser.isDevice ? width + 'px' : (width * ((ratio.width + ratio.height) / 2)) + 'px';
+                    const 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;
@@ -1485,10 +1761,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 break;
             case 'bolditalic':
                 if (this.textBox.style.display === 'block') {
-                    const width = this.getTextAreaWidth(item);
-                    this.textBox.style.width = (width / ratio.width) + 'px';
+                    const 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;
@@ -1519,8 +1796,21 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             toolbar.refreshOverflow();
         }
     }
+    contextualToolbarClicked(args) {
+        const 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;
+        const type = args.item.id.replace(this.element.id, '').split('_')[1];
+        const imageFiltering = { filter: this.toPascalCase(type) };
+        this.trigger('imageFiltering', imageFiltering);
+        this.setFilter(type.toLowerCase());
+        this.currentFilter = args.item.id;
+    }
     defToolbarClicked(args) {
-        const ratio = this.calcRatio();
+        this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
         let zoomIn;
         const type = args.item.id.replace(this.element.id + '_', '').toLowerCase();
         const imageEditorObj = getInstance(document.getElementById(this.element.id), ImageEditor_1);
@@ -1539,61 +1829,23 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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();
@@ -1602,11 +1854,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     }
                     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) {
@@ -1624,112 +1878,113 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                         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);
+                            }
+                            const 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 (let 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);
+                            }
+                            const 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 (let 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);
-                    break;
-                case 'text':
-                    this.currObjType.isCustomCrop = false;
-                    imageEditorObj.drawShapeText();
-                    this.refreshToolbar(type);
-                    break;
-                case 'pen':
-                    this.currObjType.isCustomCrop = false;
-                    this.freeHandDraw(true);
-                    this.refreshToolbar(type);
+                    this.okBtn();
                     break;
                 case 'reset':
                     imageEditorObj.reset();
                     break;
-                case 'load':
-                    break;
-                case 'save':
+                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 'select':
+                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 'bold':
-                    this.currObjType.isCustomCrop = false;
-                    if (!this.isBoldbtn) {
-                        this.activeObj.textSettings.bold = true;
-                        this.isBoldbtn = true;
-                        this.redrawText(ratio);
-                    }
-                    else {
-                        this.activeObj.textSettings.bold = false;
-                        this.isBoldbtn = false;
-                        this.redrawText(ratio);
+                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 (let 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 'italic':
-                    this.currObjType.isCustomCrop = false;
-                    if (!this.isItalicbtn) {
-                        this.activeObj.textSettings.italic = true;
-                        if (this.activeObj.textSettings.bold) {
-                            this.upperContext.font = 'italic bold ' + this.activeObj.textSettings.fontSize + 'px' +
-                                ' ' + this.activeObj.textSettings.fontFamily;
-                        }
-                        else {
-                            this.upperContext.font = 'italic ' + this.activeObj.textSettings.fontSize + 'px' + ' ' +
-                                this.activeObj.textSettings.fontFamily;
-                        }
-                        const width = this.upperContext.measureText(this.activeObj.keyHistory).width +
-                            this.activeObj.textSettings.fontSize * 0.5;
-                        const height = this.activeObj.textSettings.fontSize + this.activeObj.textSettings.fontSize * 0.25;
-                        this.setTextSelection(width, height);
-                        this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
-                        this.redrawShape(this.activeObj);
-                        this.isItalicbtn = true;
-                    }
-                    else {
-                        this.activeObj.textSettings.italic = false;
-                        if (this.activeObj.textSettings.bold) {
-                            this.upperContext.font = 'bold ' + this.activeObj.textSettings.fontSize + 'px' + ' ' + this.activeObj.textSettings.fontFamily;
-                        }
-                        else {
-                            this.upperContext.font = this.activeObj.textSettings.fontSize + 'px' + ' ' + this.activeObj.textSettings.fontFamily;
-                        }
-                        const width = this.upperContext.measureText(this.activeObj.keyHistory).width +
-                            this.activeObj.textSettings.fontSize * 0.5;
-                        const height = this.activeObj.textSettings.fontSize + this.activeObj.textSettings.fontSize * 0.25;
-                        this.setTextSelection(width, height);
-                        this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
-                        this.redrawShape(this.activeObj);
-                        this.isItalicbtn = false;
-                    }
+                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);
     }
-    cancelPan() {
-        this.applyActObj();
-        const panBtn = this.element.querySelector('.e-img-pan .e-btn');
-        panBtn.classList.remove('e-selected-btn');
-        this.pan(false);
-    }
-    callMainToolbar(isApplyBtn, isZooming) {
-        if (this.factor === 1) {
-            this.refreshToolbar('main', isApplyBtn, false, isZooming);
-        }
-        else {
-            this.refreshToolbar('main', isApplyBtn, false, isZooming);
-        }
-    }
-    cancelItems() {
-        const ratio = this.calcRatio();
+    okBtn() {
         let isCropSelection = false;
         let splitWords;
         if (this.activeObj.shape !== undefined) {
@@ -1741,86 +1996,773 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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 = [];
+        const 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);
     }
-    gradient(a, b) {
-        return (b.y - a.y) / (b.x - a.x);
+    unselectBtn() {
+        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');
+        }
     }
-    applyPenDraw() {
-        if (this.togglePen && this.factor === 1 && !this.currObjType.isZoomed) {
-            this.apply();
-            this.penDrawColl = [];
-            this.imageEditorPointsColl = [];
+    refreshSlider() {
+        const sliderWrapper = document.querySelector('#' + this.element.id + '_sliderWrapper');
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const slider = document.querySelector('.e-slider');
+        const hdrWrapper = document.querySelector('#' + this.element.id + '_headWrapper');
+        if (hdrWrapper) {
+            hdrWrapper.style.display = 'none';
         }
-        else {
-            const tempCanvas = this.lowerCanvas.appendChild(this.createElement('canvas', {
-                id: this.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
-            }));
-            const 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 (let i = 0; i < this.penDrawColl.length; i++) {
-                tempContext.lineWidth = 2 * this.penDrawColl[i].strokeWidth;
-                tempContext.strokeStyle = this.penDrawColl[i].strokeColor;
-                let nexP;
-                let preP;
-                const f = 0.3;
-                const t = 1;
-                tempContext.beginPath();
-                tempContext.moveTo(this.penDrawColl[i].points[0].x, this.penDrawColl[i].points[0].y);
-                let m = 0;
-                let dx1 = 0;
-                let dx2 = 0;
-                let dy1 = 0;
-                let dy2 = 0;
-                preP = this.penDrawColl[i].points[0];
-                for (let j = 1; j < this.penDrawColl[i].points.length; j++) {
-                    const 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;
+        if (!isNullOrUndefined(sliderWrapper) && !isNullOrUndefined(slider)) {
+            slider.ej2_instances[0].destroy();
+            sliderWrapper.remove();
+        }
+    }
+    updateAdjustment(type, value, isPreview) {
+        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        let splitWords = this.lowerContext.filter.split(' ');
+        let values = [];
+        let opacityValue;
+        let brightnessValue;
+        if (splitWords[4] !== undefined) {
+            opacityValue = parseFloat(splitWords[4].split('(')[1]);
+        }
+        if (splitWords[0] !== undefined) {
+            brightnessValue = parseFloat(splitWords[0].split('(')[1]);
+        }
+        const brightness = this.getFilterValue(this.adjustmentLevel.brightness);
+        const 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);
+                }
+                const 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 (let i = 0; i < this.objColl.length; i++) {
+                    this.apply(this.objColl[i].shape, this.objColl[i]);
+                    this.refreshActiveObj();
+                }
+                this.lowerContext.filter = temp;
+            }
+        }
+        if (brightness !== 1) {
+            splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
+        }
+        let saturate;
+        let bright;
+        let contrast;
+        let saturatePercentage;
+        let saturatePercent;
+        let tempFilter;
+        let 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 (let 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 (let 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 (let 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 (let 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(' ');
+            }
+            const 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 (let i = 0; i < this.objColl.length; i++) {
+                this.apply(this.objColl[i].shape, this.objColl[i]);
+                this.refreshActiveObj();
+            }
+            this.lowerContext.filter = tempFilter;
+            if (brightness === 1) {
+                this.isBrightnessAdjusted = false;
+            }
+            else {
+                this.isBrightnessAdjusted = true;
+            }
+        }
+        const filter = splitWords.join(' ');
+        return filter;
+    }
+    updateBrightnessFilter() {
+        const splitWords = this.lowerContext.filter.split(' ');
+        if (this.isBrightnessAdjusted && splitWords.length > 0 && !isNullOrUndefined(splitWords[4])) {
+            const opacityValue = parseFloat(splitWords[4].split('(')[1]);
+            splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
+            this.lowerContext.filter = splitWords.join(' ');
+        }
+    }
+    autoEnablePan() {
+        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);
+        }
+    }
+    setTempFilterValue(brightness, isPreview, splitWords, type) {
+        if (isPreview && brightness !== 1) {
+            const 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;
+    }
+    getDefaultFilter(splitWords) {
+        const 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;
+    }
+    setAdjustment(type) {
+        this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+        const splitWords = this.lowerContext.filter.split(' ');
+        let value;
+        let 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;
+        }
+        const 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 (let j = 0; j < this.objColl.length; j++) {
+            this.apply(this.objColl[j].shape, this.objColl[j]);
+            this.refreshActiveObj();
+        }
+        this.lowerContext.filter = temp;
+    }
+    renderSlider(type) {
+        const canvasWrapper = document.querySelector('#' + this.element.id + '_contextualToolbarArea');
+        let hdrWrapper = document.querySelector('#' + this.element.id + '_headWrapper');
+        let 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));
+        const sliderWrapper = hdrWrapper.appendChild(this.createElement('div', {
+            id: this.element.id + '_sliderWrapper',
+            styles: 'position: absolute'
+        }));
+        const value = this.getCurrAdjustmentValue(type);
+        let min;
+        let max;
+        let 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: (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: (args) => {
+                    this.setCurrAdjustmentValue(type, args.value);
+                }
+            });
+        }
+        slider.appendTo('#' + this.element.id + '_sliderWrapper');
+        sliderWrapper.style.left = (parseFloat(canvasWrapper.style.width) - parseFloat(slider.width)) / 2 + 'px';
+    }
+    getCurrAdjustmentValue(type) {
+        let 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;
+    }
+    setCurrAdjustmentValue(type, value) {
+        const 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;
+        }
+    }
+    cancelPan() {
+        this.applyActObj();
+        const panBtn = this.element.querySelector('.e-img-pan .e-btn');
+        panBtn.classList.remove('e-selected-btn');
+        this.pan(false);
+    }
+    callMainToolbar(isApplyBtn, isZooming) {
+        this.refreshToolbar('main', isApplyBtn, false, isZooming);
+    }
+    cancelItems() {
+        const ratio = this.calcRatio();
+        let isCropSelection = false;
+        let 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();
+    }
+    gradient(a, b) {
+        return (b.y - a.y) / (b.x - a.x);
+    }
+    applyPenDraw() {
+        if (this.togglePen && this.factor === 1 && !this.currObjType.isZoomed) {
+            this.apply();
+            this.penDrawColl = [];
+            this.imageEditorPointsColl = [];
+        }
+        else {
+            const tempCanvas = this.lowerCanvas.appendChild(this.createElement('canvas', {
+                id: this.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
+            }));
+            const tempContext = tempCanvas.getContext('2d');
+            tempCanvas.width = this.lowerCanvas.width;
+            tempCanvas.height = this.lowerCanvas.height;
+            const 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 (let i = 0; i < this.penDrawColl.length; i++) {
+                tempContext.lineWidth = 2 * this.penDrawColl[i].strokeWidth;
+                tempContext.strokeStyle = this.penDrawColl[i].strokeColor;
+                let nexP;
+                let preP;
+                const f = 0.3;
+                const t = 1;
+                tempContext.beginPath();
+                tempContext.moveTo(this.penDrawColl[i].points[0].x, this.penDrawColl[i].points[0].y);
+                let m = 0;
+                let dx1 = 0;
+                let dx2 = 0;
+                let dy1 = 0;
+                let dy2 = 0;
+                preP = this.penDrawColl[i].points[0];
+                for (let j = 1; j < this.penDrawColl[i].points.length; j++) {
+                    const 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;
@@ -1855,24 +2797,37 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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 (let j = 0; j < this.objColl.length; j++) {
-                this.apply(this.objColl[j].shape, this.objColl[j]);
-                this.refreshActiveObj();
-            }
+            this.redrawImgWithObj();
             this.currObjType.isZoomed = false;
         }
     }
-    refreshToolbar(type, isApplyBtn, isCropping, isZooming) {
-        const args = { toolbarType: type };
-        if (document.getElementById(this.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
-            getComponent(document.getElementById(this.element.id + '_toolbar'), 'toolbar').destroy();
+    redrawImgWithObj() {
+        this.lowerContext.filter = this.canvasFilter;
+        const 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 (let 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;
+    }
+    refreshToolbar(type, isApplyBtn, isCropping, isZooming, cType) {
+        const 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) {
@@ -1922,7 +2877,104 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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;
+        }
+    }
+    getAdjustmentToolbarItem() {
+        const 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' });
+        }
+        const tempToolbarItems = this.processToolbar('center');
+        for (let 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;
+    }
+    getFilterToolbarItem() {
+        const 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>' });
+        }
+        const tempToolbarItems = this.processToolbar('center');
+        for (let i = 0, len = tempToolbarItems.length; i < len; i++) {
+            toolbarItems.push(tempToolbarItems[i]);
         }
+        return toolbarItems;
     }
     getPenToolbarItem(items) {
         const toolbarItems = [];
@@ -2040,7 +3092,12 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         if (items.indexOf('strokeWidth') > -1) {
             const strokeWidthBtn = document.getElementById(this.element.id + '_penStrokeWidth');
             const spanElem = document.createElement('span');
-            spanElem.innerHTML = this.l10n.getConstant('Small');
+            if (isNullOrUndefined(this.penStrokeWidth)) {
+                spanElem.innerHTML = this.l10n.getConstant('Small');
+            }
+            else {
+                spanElem.innerHTML = this.getPenStroke(this.penStrokeWidth, this.calcRatio());
+            }
             spanElem.className = 'e-pen-stroke-width';
             strokeWidthBtn.appendChild(spanElem);
             const drpDownBtn = new DropDownButton({ items: strokeWidthItems,
@@ -2094,6 +3151,157 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 break;
         }
     }
+    getPenStroke(value, ratio) {
+        let 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;
+    }
+    initAdjustmentToolbarItem() {
+        const leftItem = this.getLeftToolbarItem();
+        const rightItem = this.getRightToolbarItem();
+        const mainItem = this.getAdjustmentToolbarItem();
+        const zoomItem = this.getZoomToolbarItem();
+        if (Browser.isDevice) {
+            this.defToolbarItems = mainItem;
+        }
+        else {
+            this.defToolbarItems = [...leftItem, ...zoomItem, ...mainItem, ...rightItem];
+        }
+        const toolbar = new Toolbar({
+            width: '100%',
+            items: this.defToolbarItems,
+            clicked: this.defToolbarClicked.bind(this),
+            created: () => {
+                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');
+        }
+    }
+    initFilterToolbarItem() {
+        const 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();
+        }
+        const toolbar = new Toolbar({
+            width: '100%',
+            items: mainItem,
+            clicked: this.contextualToolbarClicked.bind(this),
+            created: () => {
+                this.createCanvasFilter();
+                if (this.currentFilter === '') {
+                    this.currentFilter = this.element.id + '_default';
+                }
+                const 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');
+    }
+    createCanvasFilter() {
+        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);
+        }
+        const noFilter = document.querySelector('#' + this.element.id + '_defaultCanvas');
+        noFilter.style.width = '100px';
+        noFilter.style.height = '100px';
+        noFilter.style.filter = this.updateAdjustment('default', null, true);
+        let ctx = noFilter.getContext('2d');
+        ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
+        const 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);
+        const 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);
+        const 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);
+        const 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 (let i = 0; i < this.objColl.length; i++) {
+            this.apply(this.objColl[i].shape, this.objColl[i]);
+            this.refreshActiveObj();
+        }
+        this.lowerContext.filter = temp;
+        const 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);
+        const 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 (let i = 0; i < this.objColl.length; i++) {
+            this.apply(this.objColl[i].shape, this.objColl[i]);
+            this.refreshActiveObj();
+        }
+        this.lowerContext.filter = tempFilter;
+        const 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);
+        const 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);
+    }
     updateCanvas() {
         this.lastX = this.baseImg.width / 2;
         this.lastY = this.baseImg.height / 2;
@@ -2112,9 +3320,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             maxDimension.width -= toolbarHeight;
             maxDimension.height -= toolbarHeight;
         }
+        const 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';
@@ -2124,16 +3333,37 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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 {
+            const 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 (let 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');
         }
@@ -2142,7 +3372,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
     imageOnLoad(src) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
-        proxy.baseImg.src = proxy.baseImgSrc = src;
+        proxy.baseImg.src = proxy.baseImgSrc.id = src;
         this.baseImg.onload = () => {
             this.lowerContext.drawImage(this.baseImg, 0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
             if (this.togglePen) {
@@ -2163,7 +3393,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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'))) &&
@@ -2340,9 +3569,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             this.degree = 0;
         }
     }
-    updateUndoRedoColl(operation, value, previousObj, currentObj) {
-        this.undoRedoColl.push({ operation: operation, value: value, previousObj: previousObj, currentObj: currentObj });
-    }
     fileSelect(inputElement, args) {
         showSpinner(this.element);
         this.element.style.opacity = '0.5';
@@ -2501,7 +3727,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
         if (strokeWidthElem) {
             const strokeWidth = Math.round((this.activeObj.strokeSettings.strokeWidth /
-                (ratio.width + ratio.height))).toString();
+                (ratio.width + ratio.height)) * this.factor).toString();
             strokeWidthElem.textContent = this.getStrokeWidth(strokeWidth);
         }
     }
@@ -2513,10 +3739,32 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
         }
     }
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+    targetTouches(touches) {
+        const p1 = { x: touches[0].pageX, y: touches[0].pageY };
+        const p2 = { x: touches[1].pageX, y: touches[1].pageY };
+        const points = [p1, p2];
+        return points;
+    }
+    calculateScale(startTouches, endTouches) {
+        const startDistance = this.getDistance(startTouches[0], startTouches[1]);
+        const endDistance = this.getDistance(endTouches[0], endTouches[1]);
+        return endDistance / startDistance;
+    }
+    getDistance(a, b) {
+        const x = a.x - b.x;
+        const y = a.y - b.y;
+        return Math.sqrt(x * x + y * y);
+    }
     touchStartHandler(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);
@@ -2543,6 +3791,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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();
@@ -2606,6 +3862,47 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
     }
     mouseMoveEventHandler(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 {
+                const ratio = this.calcRatio();
+                const firstFingerX = e.touches[0].clientX || (e.touches[0].pageX - this.lowerCanvas.offsetLeft);
+                const firstFingerY = e.touches[0].clientY || (e.touches[0].pageY - this.lowerCanvas.offsetTop);
+                const secondFingerX = e.touches[1].clientX || (e.touches[1].pageX - this.lowerCanvas.offsetLeft);
+                const 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;
+                const 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;
         }
@@ -2624,6 +3921,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             !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);
             }
         }
@@ -2646,6 +3948,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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;
@@ -2664,8 +3968,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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 });
@@ -2693,11 +4005,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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) {
@@ -2719,7 +4033,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
     }
     keyUpEventHandler(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);
+        }
     }
     canvasMouseDownHandler(e) {
         e.preventDefault();
@@ -2737,7 +4054,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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;
         }
     }
     canvasMouseMoveHandler(e) {
@@ -2759,55 +4075,39 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
         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 */
-            const pt = this.lowerContext.transformedPoint(this.lastX, this.lastY);
-            const transitionArgs = { startPoint: { x: this.dragStart.x, y: this.dragStart.y },
-                endPoint: { x: pt.x, y: pt.y } };
-            this.trigger('panning', transitionArgs);
-            let xDiff = pt.x - this.dragStart.x;
-            let yDiff = pt.y - this.dragStart.y;
-            const xxDiff = xDiff;
-            const yyDiff = yDiff;
-            this.lowerContext.translate(xDiff, yDiff);
-            this.upperContext.translate(xDiff, yDiff);
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            const pt1 = this.lowerContext.transformedPoint(0, 0);
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            const 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();
         }
     }
     canvasMouseUpHandler(e) {
         e.preventDefault();
+        if (this.togglePan && e.currentTarget === this.lowerCanvas) {
+            const 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;
     }
+    setPanPoints() {
+        if (this.dragCanvas || this.factor !== 1) {
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+            this.dragStart = this.lowerContext.transformedPoint(this.lastX, this.lastY);
+        }
+    }
     textKeyDown(e) {
         if (String.fromCharCode(e.which) === '\r') {
             this.textRow += 1;
@@ -2826,6 +4126,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
     adjustToScreen() {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
+        const tempFilter = this.lowerContext.filter;
+        this.okBtn();
         this.applyActObj();
         this.refreshActiveObj();
         if (this.imgDataColl.length > 0) {
@@ -2847,15 +4149,32 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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 */
             const toolbar = getComponent(proxy.element.id + '_toolbar', 'toolbar');
             toolbar.refreshOverflow();
+            if (!isNullOrUndefined(this.element.querySelector('.e-contextual-toolbar-wrapper'))) {
+                this.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+            }
         }
     }
     screenOrientation() {
@@ -2869,7 +4188,49 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             this.adjustToScreen();
         }
     }
-    redrawImg() {
+    drawPanImg() {
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const pt = this.lowerContext.transformedPoint(this.lastX, this.lastY);
+        const transitionArgs = { startPoint: { x: this.dragStart.x, y: this.dragStart.y },
+            endPoint: { x: pt.x, y: pt.y } };
+        this.trigger('panning', transitionArgs);
+        let xDiff = pt.x - this.dragStart.x;
+        let yDiff = pt.y - this.dragStart.y;
+        const xxDiff = xDiff;
+        const yyDiff = yDiff;
+        this.lowerContext.translate(xDiff, yDiff);
+        this.upperContext.translate(xDiff, yDiff);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const pt1 = this.lowerContext.transformedPoint(0, 0);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        const 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();
+    }
+    redrawImg(tempFilter) {
         let wrapperWidth;
         const canvasWrapper = document.querySelector('#' + this.element.id + '_canvasWrapper');
         if (this.isScreenOriented) {
@@ -2885,14 +4246,24 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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;
+        const 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 (let 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 */
     updateContext(ctx) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        let xform = new DOMMatrix();
+        let xform = new DOMMatrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
         ctx.getTransform = () => {
             return xform;
         };
@@ -2961,6 +4332,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             return pt.matrixTransform(xform.inverse());
         };
     }
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     scaleNonUniform(xform, sx, sy) {
         xform.m11 *= sx;
         xform.m12 *= sx;
@@ -2997,11 +4369,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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 (let 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) {
@@ -3064,11 +4432,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         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 (let j = 0; j < this.objColl.length; j++) {
-            this.apply(this.objColl[j].shape, this.objColl[j]);
-            this.refreshActiveObj();
-        }
+        this.redrawImgWithObj();
     }
     applyCurrActObj(x, y) {
         let isInside = false;
@@ -3092,9 +4456,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
             if (this.activeObj.shape === 'text' || (this.currObjType.shape === 'ellipse' || this.currObjType.shape === 'rectangle' ||
                 this.currObjType.shape === 'line')) {
+                const 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 (let j = 0; j < this.objColl.length; j++) {
                     this.apply(this.objColl[j].shape, this.objColl[j]);
                 }
+                this.lowerContext.filter = tempFilter;
                 this.apply('shape');
             }
         }
@@ -3120,6 +4488,24 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         this.setTextSelection(width, height);
         this.updateActiveObject(ratio, this.activeObj.activePoint, this.activeObj);
     }
+    setTextBoxStylesToActObj() {
+        const 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;
+    }
     redrawActObj(x, y) {
         const ratio = this.calcRatio();
         let splitWords;
@@ -3129,21 +4515,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
         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;
@@ -3605,10 +4977,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 }
             }
             this.lowerContext.clearRect(0, 0, this.upperCanvas.width, this.upperCanvas.height);
-            this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-            for (let 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) {
@@ -3760,8 +5129,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         else {
             this.updateFontStyles();
         }
-        let textBoxWidth = (this.upperContext.measureText(text).width + (parseFloat(this.textBox.style.fontSize) / 2));
-        let letterWidth = e ? this.upperContext.measureText(String.fromCharCode(e.which)).width : 0;
+        const textBoxWidth = (this.upperContext.measureText(text).width + (parseFloat(this.textBox.style.fontSize) / 2));
+        const letterWidth = e ? this.upperContext.measureText(String.fromCharCode(e.which)).width : 0;
         let actObj = extend({}, this.activeObj, {}, true);
         if (this.factor !== 1) {
             actObj = this.setCursorForZoomState(actObj, ratio, true);
@@ -4013,7 +5382,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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;
@@ -4158,7 +5527,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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;
@@ -4354,7 +5723,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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;
@@ -4501,7 +5870,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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;
@@ -4547,8 +5916,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     width = this.activeObj.activePoint.endX - x;
                     height = this.activeObj.activePoint.endY - y;
                     scale = Math.min(width, height);
-                    let ratio = this.activeObj.shape.split('-');
-                    ratio = ratio[1].split(':');
                     const newScale = this.getScaleRatio(scale);
                     this.activeObj.activePoint.endX -= newScale.x;
                     this.activeObj.activePoint.endY -= newScale.y;
@@ -5207,6 +6574,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 this.refreshActiveObj();
                 return;
             }
+            this.tempObjColl = extend([], this.objColl, [], true);
             this.currObjType.isCustomCrop = false;
             const temp = this.activeObj = extend({}, this.objColl[i], {}, true);
             this.objColl.splice(i, 1);
@@ -5216,11 +6584,35 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 this.inMemoryContext.putImageData(this.imgDataColl[0].value, 0, 0);
             }
             else {
+                if ((this.adjustmentLevel.sharpen || this.adjustmentLevel.bw) && !this.sharpenedImgData) {
+                    let data;
+                    const 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) {
+                    let data;
+                    const 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;
@@ -5229,15 +6621,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
             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 (let 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);
             const 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 <
@@ -5620,7 +7007,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 }
                 else {
                     if (this.currObjType.isCustomCrop) {
-                        this.upperCanvas.style.cursor = 'cross-hair';
+                        this.upperCanvas.style.cursor = 'crosshair';
                     }
                     this.upperCanvas.style.cursor = 'default';
                 }
@@ -5717,7 +7104,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 }
                 else {
                     if (this.currObjType.isCustomCrop) {
-                        this.upperCanvas.style.cursor = 'cross-hair';
+                        this.upperCanvas.style.cursor = 'crosshair';
                     }
                     this.upperCanvas.style.cursor = 'default';
                 }
@@ -5777,7 +7164,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         // eslint-disable-next-line @typescript-eslint/tslint/config
         this.lowerCanvas.toBlob(function (blob) {
             const blobUrl = URL.createObjectURL(blob);
-            proxy.baseImg.src = blobUrl;
+            //proxy.baseImg.src = blobUrl;
             proxy.downloadImg(blobUrl, fileName + '.' + type);
         }, 'image/png');
     }
@@ -5827,21 +7214,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             this.inMemoryContext.putImageData(imgData, 0, 0);
         }
     }
-    drawBaseImg() {
-        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);
-        const 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);
-    }
     calcPrevRatio() {
         let oldWidthRatio;
         let oldHeightRatio;
@@ -5948,15 +7320,23 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
             else if (degree === 90 || degree === -90) {
                 this.updateCurrentActiveObjPoint(degree);
+                const 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 (let i = 0; i < this.objColl.length; i++) {
                     this.apply(this.objColl[i].shape, this.objColl[i]);
                 }
+                this.lowerContext.filter = tempFilter;
             }
             else {
                 this.updateCurrentActiveObjPoint('zoom');
+                const 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 (let 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')) {
@@ -6004,12 +7384,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     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]);
                     }
                 }
@@ -6019,12 +7401,14 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     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]);
                     }
                 }
@@ -6039,42 +7423,34 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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 (let 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 (let i = 0; i < this.objColl.length; i++) {
-                this.updateActiveObject(ratio, this.objColl[i].activePoint, this.objColl[i]);
-            }
-        }
-        else if (degree === 'zoom') {
-            for (let i = 0; i < this.objColl.length; i++) {
-                this.objColl[i].activePoint.startX /= ratio.width;
-                this.objColl[i].activePoint.startY /= ratio.height;
-                this.objColl[i].activePoint.endX /= ratio.width;
-                this.objColl[i].activePoint.endY /= ratio.height;
-                this.objColl[i].activePoint.height = this.objColl[i].activePoint.endX - this.objColl[i].activePoint.startX;
-                this.objColl[i].activePoint.width = this.objColl[i].activePoint.endY - this.objColl[i].activePoint.startY;
-                this.objColl[i].activePoint.startX *= ratio.width;
-                this.objColl[i].activePoint.startY *= ratio.height;
-                this.objColl[i].activePoint.endX *= ratio.width;
-                this.objColl[i].activePoint.endY *= ratio.height;
-                this.objColl[i].activePoint.width = this.objColl[i].activePoint.endX - this.objColl[i].activePoint.startX;
-                this.objColl[i].activePoint.height = this.objColl[i].activePoint.endY - this.objColl[i].activePoint.startY;
+                this.updateActiveObject(ratio, this.objColl[i].activePoint, this.objColl[i]);
             }
         }
     }
@@ -6140,10 +7516,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     tempObjColl = [];
                     this.refreshActiveObj();
                     this.lowerContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-                    this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-                    for (let 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();
@@ -6161,17 +7534,27 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     showSpinner(proxy.element);
                     proxy.element.style.opacity = '0.5';
                     proxy.lowerContext.clearRect(0, 0, proxy.lowerCanvas.width, proxy.lowerCanvas.height);
+                    const temp = proxy.lowerContext.filter;
+                    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.drawImage(proxy.inMemoryCanvas, 0, 0);
                     proxy.baseImg.src = URL.createObjectURL(blob);
                     proxy.upperContext.clearRect(0, 0, proxy.upperCanvas.width, proxy.upperCanvas.height);
                     proxy.togglePen = false;
                     proxy.upperCanvas.style.cursor = 'default';
+                    proxy.lowerContext.filter = temp;
+                    const tempFilter = proxy.lowerContext.filter;
+                    proxy.lowerContext.filter = 'brightness(' + 1 + ') ' + 'contrast(' + 100 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
+                        'saturate(' + 100 + '%) ' + 'opacity(' + 1 + ') ' + 'blur(' + 0 + 'px) ' + 'sepia(0%) ' + 'grayscale(0%) ' + 'invert(0%)';
                     for (let i = 0, len = proxy.objColl.length; i < len; i++) {
                         proxy.apply(proxy.objColl[i].shape, proxy.objColl[i], 'duplicate');
                     }
+                    proxy.lowerContext.filter = tempFilter;
                     proxy.togglePen = true;
                 }, 'image/png');
-                this.isUndoRedo = false;
                 this.degree = 0;
             }
             else {
@@ -6186,7 +7569,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     }
                     this.keyHistory = '';
                 }
-                this.isUndoRedo = false;
             }
         }
     }
@@ -6313,104 +7695,591 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 if (this.lowerCanvas.width > this.lowerCanvas.height) {
                     this.activeObj.textSettings.fontSize = Math.floor((this.lowerCanvas.width / 20));
                 }
-                else {
-                    this.activeObj.textSettings.fontSize = Math.floor((this.lowerCanvas.height / 20));
+                else {
+                    this.activeObj.textSettings.fontSize = Math.floor((this.lowerCanvas.height / 20));
+                }
+                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;
+            this.activeObj.flipObjColl = [];
+            this.updateFontStyles();
+            const width = this.upperContext.measureText(this.activeObj.textSettings.text).width +
+                this.activeObj.textSettings.fontSize * 0.5;
+            const height = this.activeObj.textSettings.fontSize + this.activeObj.textSettings.fontSize * 0.25;
+            if (!isNullOrUndefined(x) && !isNullOrUndefined(y)) {
+                this.activeObj.activePoint.startX = x;
+                this.activeObj.activePoint.startY = y;
+                this.activeObj.activePoint.endX = this.activeObj.activePoint.startX + width;
+                this.activeObj.activePoint.endY = this.activeObj.activePoint.startY + height;
+            }
+            else {
+                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');
+        }
+    }
+    drawPen(context) {
+        const ratio = this.calcRatio();
+        context = context ? context : this.upperContext;
+        this.upperCanvas.style.display = 'block';
+        this.canvasRatio = this.calcRatio();
+        if (isNullOrUndefined(this.activeObj.strokeSettings)) {
+            this.activeObj.strokeSettings = this.strokeSettings;
+        }
+        if (isNullOrUndefined(this.activeObj.strokeSettings.strokeWidth)) {
+            this.activeObj.strokeSettings.strokeWidth = (ratio.width + ratio.height) * 0.4;
+        }
+        context.strokeStyle = this.activeObj.strokeSettings.strokeColor;
+        context.lineWidth = 2 * (this.activeObj.strokeSettings.strokeWidth) / this.factor;
+        context.beginPath();
+        context.moveTo(this.prevX, this.prevY);
+        context.lineTo(this.currX, this.currY);
+        context.stroke();
+        context.closePath();
+    }
+    getObjDetails(obj) {
+        const shapeDetails = {};
+        shapeDetails.id = obj.currIndex;
+        shapeDetails.type = obj.shape;
+        shapeDetails.startX = obj.activePoint.startX;
+        shapeDetails.startY = obj.activePoint.startY;
+        if (obj.shape === 'rectangle') {
+            shapeDetails.width = obj.activePoint.width;
+            shapeDetails.height = obj.activePoint.height;
+            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+            shapeDetails.fillColor = obj.strokeSettings.fillColor;
+            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+        }
+        else if (obj.shape === 'ellipse') {
+            shapeDetails.radius = obj.activePoint.width / 2;
+            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+            shapeDetails.fillColor = obj.strokeSettings.fillColor;
+            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+        }
+        else if (obj.shape === 'line') {
+            shapeDetails.length = obj.activePoint.width;
+            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+        }
+        else if (obj.shape === 'text') {
+            shapeDetails.text = obj.keyHistory;
+            shapeDetails.fontSize = obj.textSettings.fontSize;
+            shapeDetails.color = obj.strokeSettings.strokeColor;
+            shapeDetails.fontStyle = [];
+            if (obj.textSettings.bold) {
+                shapeDetails.fontStyle.push('bold');
+            }
+            if (obj.textSettings.italic) {
+                shapeDetails.fontStyle.push('italic');
+            }
+        }
+        return shapeDetails;
+    }
+    isPointsInRange(x, y) {
+        let inRange = false;
+        if (this.factor === 1) {
+            if (x >= 0 && y >= 0 && x <= this.lowerCanvas.width && y <= this.lowerCanvas.width) {
+                inRange = true;
+            }
+        }
+        else {
+            const endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
+            if (x >= this.pannStart.startX && y >= this.pannStart.startY && x <= endPoint.x && y <= endPoint.y) {
+                inRange = true;
+            }
+        }
+        return inRange;
+    }
+    updateInMemoryContext(imgData, isUpdate) {
+        const 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);
+    }
+    clearActObj() {
+        if (this.textBox.style.display === 'none') {
+            this.refreshActiveObj();
+            this.applyActObj();
+            this.refreshActiveObj();
+            this.currObjType.isCustomCrop = false;
+        }
+    }
+    rotateMultiple(length, degree) {
+        for (let i = 0; i < length; i++) {
+            if (degree > 0) {
+                this.degree += 90;
+            }
+            else {
+                this.degree -= 90;
+            }
+            if (this.degree === 360) {
+                this.degree = 0;
+            }
+            const temp = this.lowerContext.filter;
+            this.lowerContext.save();
+            this.setMaximumDimension(90 * (i + 1));
+            this.lowerContext.translate(this.lowerCanvas.width / 2, this.lowerCanvas.height / 2);
+            if (degree > 0) {
+                this.lowerContext.rotate(Math.PI / 180 * 90);
+            }
+            else {
+                this.lowerContext.rotate(Math.PI / 180 * -90);
+            }
+            this.lowerCanvas.style.left = this.upperCanvas.style.left = (this.element.clientWidth - parseInt(this.lowerCanvas.style.maxWidth, 10) - 18) / 2 + 1 + 'px';
+            this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.clientHeight - this.toolbarHeight - parseInt(this.lowerCanvas.style.maxHeight, 10)) / 2 + 1 + 'px';
+            this.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);
+            }
+            else {
+                this.lowerContext.rotate(Math.PI / 180 * 90);
+            }
+            this.lowerContext.translate(-this.lowerCanvas.width / 2, -this.lowerCanvas.height / 2);
+            this.lowerContext.restore();
+            this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+            this.inMemoryCanvas.width = this.currImgData.width;
+            this.inMemoryCanvas.height = this.currImgData.height;
+            this.inMemoryContext.putImageData(this.currImgData, 0, 0);
+            this.lowerContext.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);
+            }
+            else {
+                this.redrawObj(-90);
+            }
+        }
+    }
+    setBrightness(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);
+        }
+    }
+    setContrast(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);
+        }
+    }
+    setHue(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);
+        }
+    }
+    setSaturation(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);
+        }
+    }
+    setOpacity(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);
+        }
+    }
+    setBlur(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);
+        }
+    }
+    setExposure(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);
+        }
+    }
+    setFilter(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);
+        }
+    }
+    setBlackAndWhiteFilter(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) {
+                    const tempDegree = this.degree;
+                    this.rotate(-tempDegree);
+                    this.replaceBWSharpenData('bw');
+                    this.rotate(tempDegree);
+                    this.refreshToolbar('filter');
+                }
+                else if (this.currFlipState !== '') {
+                    const tempFlipState = this.currFlipState;
+                    this.flip(tempFlipState);
+                    this.replaceBWSharpenData('bw');
+                    this.flip(tempFlipState);
+                    this.refreshToolbar('filter');
+                }
+                const data = this.inMemoryContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                const 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;
+                const 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) {
+                    const tempDegree = this.degree;
+                    this.rotate(-tempDegree);
+                    this.updateBWSharpness();
+                    this.rotate(tempDegree);
+                    this.refreshToolbar('filter');
+                    if (this.sharpenedImgData) {
+                        this.sharpenedImgData = false;
+                    }
+                }
+                else if (this.currFlipState !== '') {
+                    const tempFlipState = this.currFlipState;
+                    this.flip(tempFlipState);
+                    this.updateBWSharpness();
+                    this.flip(tempFlipState);
+                    this.refreshToolbar('filter');
+                    if (this.sharpenedImgData) {
+                        this.sharpenedImgData = false;
+                    }
+                }
+            }
+        }
+    }
+    setSharpness(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) {
+                    const tempDegree = this.degree;
+                    this.rotate(-tempDegree);
+                    this.replaceBWSharpenData('sharpen');
+                    this.rotate(tempDegree);
+                    this.refreshToolbar('filter');
+                }
+                else if (this.currFlipState !== '') {
+                    const tempFlipState = this.currFlipState;
+                    this.flip(tempFlipState);
+                    this.replaceBWSharpenData('sharpen');
+                    this.flip(tempFlipState);
+                    this.refreshToolbar('filter');
+                }
+                const data = this.inMemoryContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                const 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;
+                const 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) {
+                    const tempDegree = this.degree;
+                    this.rotate(-tempDegree);
+                    this.updateBWSharpness();
+                    this.rotate(tempDegree);
+                    this.refreshToolbar('filter');
+                    if (this.sharpenedImgData) {
+                        this.sharpenedImgData = false;
+                    }
                 }
-                if (this.activeObj.textSettings.fontSize < 20 * (ratio.width + ratio.height)) {
-                    this.activeObj.textSettings.fontSize = 20 * (ratio.width + ratio.height);
+                else if (this.currFlipState !== '') {
+                    const tempFlipState = this.currFlipState;
+                    this.flip(tempFlipState);
+                    this.updateBWSharpness();
+                    this.flip(tempFlipState);
+                    this.refreshToolbar('filter');
+                    if (this.sharpenedImgData) {
+                        this.sharpenedImgData = false;
+                    }
                 }
             }
-            this.activeObj.shapeDegree = this.degree;
-            this.activeObj.shapeFlip = this.currFlipState;
-            this.activeObj.flipObjColl = [];
-            this.updateFontStyles();
-            const width = this.upperContext.measureText(this.activeObj.textSettings.text).width +
-                this.activeObj.textSettings.fontSize * 0.5;
-            const height = this.activeObj.textSettings.fontSize + this.activeObj.textSettings.fontSize * 0.25;
-            if (!isNullOrUndefined(x) && !isNullOrUndefined(y)) {
-                this.activeObj.activePoint.startX = x;
-                this.activeObj.activePoint.startY = y;
-                this.activeObj.activePoint.endX = this.activeObj.activePoint.startX + width;
-                this.activeObj.activePoint.endY = this.activeObj.activePoint.startY + height;
+        }
+    }
+    replaceBWSharpenData(type) {
+        this.tempImageData = this.inMemoryContext.getImageData(0, 0, this.inMemoryCanvas.width, this.inMemoryCanvas.height);
+        let 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);
+        let tempObj;
+        for (let index = 0; index < this.imgDataColl.length; index++) {
+            if (this.imgDataColl[index].operation !== 'freehanddraw') {
+                tempObj = this.imgDataColl[index];
+                break;
             }
-            else {
-                this.setCenterPoints(true, width, height);
+        }
+        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);
+    }
+    updateBWSharpness() {
+        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();
+    }
+    getSharpenData(imageData) {
+        const data = imageData.data;
+        const weights = [0, -1, 0, -1, 5, -1, 0, -1, 0];
+        const side = Math.round(Math.sqrt(weights.length));
+        const halfSide = Math.floor(side / 2);
+        const sw = imageData.width;
+        const sh = imageData.height;
+        const output = this.inMemoryContext.createImageData(sw, sh);
+        const dst = output.data;
+        // go through the destination image pixels
+        const alphaFac = 0;
+        let r;
+        let g;
+        let b;
+        let a;
+        let dstOff;
+        let scx;
+        let scy;
+        let srcOff;
+        let wt;
+        let x;
+        let y;
+        let cx;
+        let 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];
+                }
             }
-            this.addLetter(this.activeObj.textSettings.text);
-            this.refreshToolbar('text');
         }
+        return output;
     }
-    drawPen(context) {
-        const ratio = this.calcRatio();
-        context = context ? context : this.upperContext;
-        this.upperCanvas.style.display = 'block';
-        this.canvasRatio = this.calcRatio();
-        if (isNullOrUndefined(this.activeObj.strokeSettings)) {
-            this.activeObj.strokeSettings = this.strokeSettings;
+    getFilterValue(value) {
+        let filterValue;
+        if (value === 0) {
+            filterValue = 1;
         }
-        if (isNullOrUndefined(this.activeObj.strokeSettings.strokeWidth)) {
-            this.activeObj.strokeSettings.strokeWidth = (ratio.width + ratio.height) * 0.4;
+        else {
+            filterValue = 1 + ((value * 0.5) / 100);
         }
-        context.strokeStyle = this.activeObj.strokeSettings.strokeColor;
-        context.lineWidth = 2 * (this.activeObj.strokeSettings.strokeWidth) / this.factor;
-        context.beginPath();
-        context.moveTo(this.prevX, this.prevY);
-        context.lineTo(this.currX, this.currY);
-        context.stroke();
-        context.closePath();
+        return filterValue;
     }
-    getObjDetails(obj) {
-        const shapeDetails = {};
-        shapeDetails.id = obj.currIndex;
-        shapeDetails.type = obj.shape;
-        shapeDetails.startX = obj.activePoint.startX;
-        shapeDetails.startY = obj.activePoint.startY;
-        if (obj.shape === 'rectangle') {
-            shapeDetails.width = obj.activePoint.width;
-            shapeDetails.height = obj.activePoint.height;
-            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
-            shapeDetails.fillColor = obj.strokeSettings.fillColor;
-            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+    setFilterValue(value) {
+        let filterValue;
+        if (value === 1) {
+            filterValue = 0;
         }
-        else if (obj.shape === 'ellipse') {
-            shapeDetails.radius = obj.activePoint.width / 2;
-            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
-            shapeDetails.fillColor = obj.strokeSettings.fillColor;
-            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+        else {
+            filterValue = ((value - 1) * 100) / 0.5;
         }
-        else if (obj.shape === 'line') {
-            shapeDetails.length = obj.activePoint.width;
-            shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
-            shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+        return Math.round(filterValue);
+    }
+    getSaturationFilterValue(value) {
+        let filterValue;
+        if (value === 0) {
+            filterValue = 1;
         }
-        else if (obj.shape === 'text') {
-            shapeDetails.text = obj.keyHistory;
-            shapeDetails.fontSize = obj.textSettings.fontSize;
-            shapeDetails.color = obj.strokeSettings.strokeColor;
-            shapeDetails.fontStyle = [];
-            if (obj.textSettings.bold) {
-                shapeDetails.fontStyle.push('bold');
-            }
-            if (obj.textSettings.italic) {
-                shapeDetails.fontStyle.push('italic');
-            }
+        else {
+            filterValue = 1 + (value / 100);
         }
-        return shapeDetails;
+        return filterValue;
     }
-    isPointsInRange(x, y) {
-        let inRange = false;
-        if (this.factor === 1) {
-            if (x >= 0 && y >= 0 && x <= this.lowerCanvas.width && y <= this.lowerCanvas.width) {
-                inRange = true;
-            }
+    setSaturationFilterValue(value) {
+        let filterValue;
+        if (value === 1) {
+            filterValue = 0;
         }
         else {
-            const endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
-            if (x >= this.pannStart.startX && y >= this.pannStart.startY && x <= endPoint.x && y <= endPoint.y) {
-                inRange = true;
+            filterValue = (value - 1) * 100;
+        }
+        return Math.round(filterValue);
+    }
+    getBlackAndWhiteData(imageData) {
+        for (let i = 0; i < imageData.data.length; i += 4) {
+            const count = imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2];
+            let 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 inRange;
+        return imageData;
     }
     /**
      * Clear a current selection.
@@ -6448,11 +8317,22 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
             isCrop = true;
+            const canvasFilter = this.canvasFilter;
+            const 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 (let 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';
             let widthRatio;
             let heightRatio;
             let imgData;
             let zoomedRotate = false;
+            const 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);
@@ -6487,6 +8367,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                         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 !== '') {
@@ -6501,6 +8382,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     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);
                 }
             }
@@ -6521,6 +8403,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     ((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') {
@@ -6529,6 +8412,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 this.inMemoryCanvas.height = imgData.height;
                 this.inMemoryContext.putImageData(imgData, 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();
@@ -6541,18 +8425,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             showSpinner(this.element);
             this.element.style.opacity = '0.5';
             let blobUrl;
-            let data;
             // eslint-disable-next-line @typescript-eslint/tslint/config
             this.lowerCanvas.toBlob(function (blob) {
                 blobUrl = URL.createObjectURL(blob);
-                proxy.isUndoRedo = false;
                 proxy.baseImg.src = blobUrl;
-                data = proxy.lowerContext.getImageData(0, 0, proxy.lowerCanvas.width, proxy.lowerCanvas.height);
                 proxy.imgDataColl = [];
-                if (!proxy.isUndoRedo) {
-                    proxy.updateUndoRedoColl('crop', data, proxy.objColl);
-                }
-                proxy.isUndoRedo = false;
             }, 'image/png');
             this.objColl = [];
             this.refreshActiveObj();
@@ -6561,26 +8438,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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;
     }
-    updateInMemoryContext(imgData) {
-        this.lowerContext.drawImage(this.inMemoryCanvas, 0, 0);
-        const temp = extend({}, this.activeObj, {}, true);
-        for (let 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.
      *
@@ -6597,8 +8459,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
             const 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%)';
             let splitWords = [];
             let activeObjShape;
             if (!isNullOrUndefined(this.activeObj.activePoint)) {
@@ -6619,7 +8481,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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';
                 }
@@ -6635,7 +8496,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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';
                 }
@@ -6646,13 +8506,25 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     this.currFlipState = 'vertical';
                 }
             }
+            const 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') {
+                const 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 (let 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) {
@@ -6662,13 +8534,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                         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') {
+                const 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 (let 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) {
@@ -6678,11 +8553,11 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                         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 (let i = 0, len = this.objColl.length; i < len; i++) {
                 if (this.objColl[i].flipObjColl.length === 0) {
@@ -6697,15 +8572,15 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
             this.redrawObj(direction.toLowerCase());
             if (this.flipState === '') {
+                const 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 (let 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,
@@ -6717,6 +8592,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     this.select(activeObjShape);
                 }
             }
+            this.refreshToolbar('main');
         }
     }
     /**
@@ -6737,6 +8613,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      */
     open(data) {
         if (!this.disabled) {
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
+            const proxy = this;
             showSpinner(this.element);
             this.element.style.opacity = '0.5';
             const toolbar = document.querySelector('#' + this.element.id + '_currPos');
@@ -6750,11 +8628,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             if (isNullOrUndefined(this.toolbarTemplate)) {
                 this.update();
             }
+            this.degree = 0;
+            this.flipState = '';
+            this.factor = 1;
+            this.imgDataColl = [];
             const type = typeof (data);
             if (type === 'string') {
                 this.imageOnLoad(data);
             }
             else {
+                const 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');
@@ -6768,10 +8651,19 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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;
+                const 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.element);
+                    proxy.baseImg.src = URL.createObjectURL(blob);
+                }, 'image/png');
             }
         }
     }
@@ -6788,6 +8680,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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) {
@@ -6798,11 +8692,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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')) {
@@ -6811,22 +8707,20 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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 = [];
@@ -6836,14 +8730,24 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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 };
         }
     }
     /**
@@ -6860,8 +8764,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             isRotate = true;
             const transitionArgs = { degree: degree };
             this.trigger('rotating', transitionArgs);
-            this.rotateMethod = true;
-            this.lastAction = 'rotate';
             let splitWords = [];
             let activeObjShape;
             if (!isNullOrUndefined(this.activeObj.activePoint)) {
@@ -6879,29 +8781,44 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 this.factor = 1;
                 this.refreshToolbar('main');
             }
-            this.degree += degree;
-            if (this.degree === 360) {
-                this.degree = 0;
+            const length = Math.abs(degree / 90);
+            if (length > 1) {
+                this.rotateMultiple(length, degree);
+            }
+            else {
+                this.degree += degree;
+                if (this.degree === 360) {
+                    this.degree = 0;
+                }
+                const 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();
+                this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
+                this.inMemoryCanvas.width = this.currImgData.width;
+                this.inMemoryCanvas.height = this.currImgData.height;
+                this.inMemoryContext.putImageData(this.currImgData, 0, 0);
+                this.lowerContext.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);
             }
-            this.lowerContext.save();
-            this.setMaximumDimension(this.degree);
-            this.lowerContext.translate(this.lowerCanvas.width / 2, this.lowerCanvas.height / 2);
-            this.lowerContext.rotate(Math.PI / 180 * degree);
-            this.lowerCanvas.style.left = this.upperCanvas.style.left = (this.element.clientWidth - parseInt(this.lowerCanvas.style.maxWidth, 10) - 18) / 2 + 1 + 'px';
-            this.lowerCanvas.style.top = this.upperCanvas.style.top = (this.element.clientHeight - this.toolbarHeight - parseInt(this.lowerCanvas.style.maxHeight, 10)) / 2 + 1 + 'px';
-            this.lowerContext.drawImage(this.inMemoryCanvas, -this.lowerCanvas.height / 2, -this.lowerCanvas.width / 2);
-            this.lowerContext.rotate(Math.PI / 180 * -degree);
-            this.lowerContext.translate(-this.lowerCanvas.width / 2, -this.lowerCanvas.height / 2);
-            this.lowerContext.restore();
-            this.currImgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            this.inMemoryContext.clearRect(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
-            this.inMemoryCanvas.width = this.currImgData.width;
-            this.inMemoryCanvas.height = this.currImgData.height;
-            this.inMemoryContext.putImageData(this.currImgData, 0, 0);
-            this.redrawObj(degree);
             if (!isNullOrUndefined(activeObjShape)) {
                 if (activeObjShape === 'custom') {
-                    const endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
+                    const 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);
@@ -6913,12 +8830,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 this.refreshToolbar('main', true, true);
             }
             this.factor = 1;
-            if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('rotate', degree, this.objColl);
-            }
-            this.isUndoRedo = false;
+            this.refreshToolbar('main');
         }
-        this.rotateMethod = false;
         return isRotate;
     }
     /**
@@ -6936,24 +8849,22 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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 (let 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();
-            const beforeSave = { cancel: false, fileName: 'ImageEditor', fileType: type };
-            const saved = { fileName: 'ImageEditor', fileType: type };
+            const beforeSave = { cancel: false, fileName: fileName ? fileName : 'ImageEditor', fileType: type };
+            const saved = { fileName: fileName ? fileName : 'ImageEditor', fileType: type };
             this.trigger('beforeSave', beforeSave, (observableSaveArgs) => {
                 if (!observableSaveArgs.cancel) {
+                    this.currObjType.isSave = true;
                     fileName = observableSaveArgs.fileName ? observableSaveArgs.fileName : fileName;
                     if (type.toLowerCase() === 'svg') {
                         fileName = fileName || 'ImageEditor';
@@ -7014,7 +8925,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                     this.upperCanvas.style.cursor = 'crosshair';
                     if (Browser.isDevice) {
                         const arcRadius = (7.5 * (ratio.width > ratio.height ? ratio.width : ratio.height)) / this.factor;
-                        const endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
+                        const 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;
@@ -7061,12 +8973,13 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      *
      * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
      *
-     *  @returns {void}.
+     * @returns {void}.
+     * @private
      */
     freeHandDraw(value) {
         if (value) {
             this.togglePen = true;
-            this.upperCanvas.style.cursor = 'cross-hair';
+            this.upperCanvas.style.cursor = 'crosshair';
             this.drawPen();
         }
         else {
@@ -7075,6 +8988,16 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
         this.refreshToolbar('pen');
     }
+    /**
+     * Enable or disable a freehand drawing in an Image Editor.
+     *
+     * @param {boolean} value - Specifies a value whether enable or disable freehand drawing.
+     *
+     *  @returns {void}.
+     */
+    freehandDraw(value) {
+        this.freeHandDraw(value);
+    }
     /**
      * Enable or disable a panning on the Image Editor.
      *
@@ -7121,17 +9044,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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';
-            let zoomState;
-            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);
@@ -7143,16 +9057,22 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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') {
-                    const endPoint = { x: this.lowerCanvas.width - this.pannEnd.startX, y: this.lowerCanvas.height - this.pannEnd.startY };
+                    const 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);
@@ -7163,10 +9083,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 }
                 this.refreshToolbar('main', true, true);
             }
-            if (!this.isUndoRedo) {
-                this.updateUndoRedoColl('zoom', zoomState, this.objColl);
-            }
-            this.isUndoRedo = false;
             const zoomOut = document.querySelector('#' + this.element.id + '_zoomOut');
             if (!isNullOrUndefined(zoomOut) && this.factor === 1) {
                 zoomOut.classList.add('e-disabled');
@@ -7174,6 +9090,23 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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);
+            }
+            const 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');
+            }
         }
     }
     /**
@@ -7354,8 +9287,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         else {
             isSelected = true;
             this.activeObj = obj;
+            this.lowerContext.filter = this.canvasFilter;
             this.redrawShape(this.activeObj);
-            this.refreshToolbar('shapes');
+            if (this.activeObj.shape === 'text') {
+                this.refreshToolbar('text');
+            }
+            else if (this.activeObj.shape === 'pen') {
+                this.refreshToolbar('pen');
+            }
+            else {
+                this.refreshToolbar('shapes');
+            }
             this.updateToolbarItems(this.calcRatio());
         }
         return isSelected;
@@ -7387,12 +9329,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
                 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 (let i = 0; i < this.objColl.length; i++) {
-            this.apply(this.objColl[i].shape, this.objColl[i]);
-            this.refreshActiveObj();
-        }
+        this.redrawImgWithObj();
         this.refreshToolbar('main');
     }
     /**
@@ -7457,9 +9396,60 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             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}.
+     */
+    applyImageFilter(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}.
+     *
+     */
+    finetuneImage(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.
      *
@@ -7467,7 +9457,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     canUndo() {
-        return super.canUndo();
+        return false;
     }
     /**
      * To check whether the redo collection is empty or not.
@@ -7476,7 +9466,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     canRedo() {
-        return super.canRedo();
+        return false;
     }
     /**
      * Erases all the signature strokes signed by user.
@@ -7485,7 +9475,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     clear() {
-        super.clear();
+        if (this.getModuleName() !== 'image-editor') {
+            super.clear();
+        }
     }
     /**
      * To draw the signature based on the given text, with the font family and font size.
@@ -7498,7 +9490,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     draw(text, fontFamily, fontSize) {
-        super.draw(text, fontFamily, fontSize);
+        if (this.getModuleName() !== 'image-editor') {
+            super.draw(text, fontFamily, fontSize);
+        }
     }
     /**
      * To get the signature as Blob.
@@ -7508,7 +9502,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     getBlob(url) {
-        return super.getBlob(url);
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        return url;
     }
     /**
      * To check whether the signature is empty or not.
@@ -7517,7 +9512,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     isEmpty() {
-        return super.isEmpty();
+        return false;
     }
     /**
      * To load the signature with the given base 64 string, height and width.
@@ -7529,7 +9524,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     load(signature, width, height) {
-        super.load(signature, width, height);
+        if (this.getModuleName() !== 'image-editor') {
+            super.load(signature, width, height);
+        }
     }
     /**
      * Undo the last user action.
@@ -7538,7 +9535,9 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     undo() {
-        super.undo();
+        if (this.getModuleName() !== 'image-editor') {
+            super.undo();
+        }
     }
     /**
      * Redo the last user action.
@@ -7547,19 +9546,23 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     redo() {
-        super.redo();
+        if (this.getModuleName() !== 'image-editor') {
+            super.redo();
+        }
     }
     /**
      * To save the signature with the given file type and file name.
      *
-     * @param {SignatureFileType} type - specify type of the file to be saved a signature.
+     * @param {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}.
      * @private
      */
     save(type, fileName) {
-        super.save(type, fileName);
+        if (this.getModuleName() !== 'image-editor') {
+            super.save(type, fileName);
+        }
     }
     /**
      * To save the signature as Blob.
@@ -7568,16 +9571,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
      * @private
      */
     saveAsBlob() {
-        return super.saveAsBlob();
+        return null;
     }
     /**
      * Returns the persistence data for component.
      *
-     * @returns any.
+     * @returns {any}.
      * @private
      */
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     getLocalData() {
-        return super.getLocalData();
+        return null;
     }
 };
 __decorate([
@@ -7631,6 +9635,12 @@ __decorate([
 __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);
@@ -7673,6 +9683,12 @@ __decorate([
 __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);
@@ -7685,5 +9701,5 @@ ImageEditor = ImageEditor_1 = __decorate([
  * ImageEditor all modules
  */
 
-export { ImageEditor };
+export { FinetuneSettings, ImageEditor };
 //# sourceMappingURL=ej2-image-editor.es2015.js.map