@syncfusion/ej2-image-editor 22.1.38 → 22.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.38
+*  version : 22.2.5
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@22.1.37",
+  "_id": "@syncfusion/ej2-image-editor@22.1.39",
   "_inBundle": false,
-  "_integrity": "sha512-pnIOBRAel6w8cpx97w+1usYXz8emVF6Vhzp7Gqnt+k2DX8J0T6VBP1A887/QCMCZYjZHjpMY6sL+NIA69bdgqg==",
+  "_integrity": "sha512-QHAKhfObRJ43QYRhCsHC6B51AxKn+D6/UZN74quS+Ug7B7uX/b0QD3OiXWX+VyUqHP0EyvuEOzfOO8IceDYGWg==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-22.1.37.tgz",
-  "_shasum": "f11dd540d6652c63f4a94d6073d9a3bebdf47eea",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-22.1.39.tgz",
+  "_shasum": "34c50cdf67aedf889f5b7414ab8983667172c4e9",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -32,12 +32,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.1.38",
-    "@syncfusion/ej2-buttons": "~22.1.38",
-    "@syncfusion/ej2-inputs": "~22.1.38",
-    "@syncfusion/ej2-navigations": "~22.1.38",
-    "@syncfusion/ej2-popups": "~22.1.38",
-    "@syncfusion/ej2-splitbuttons": "~22.1.37"
+    "@syncfusion/ej2-base": "~22.2.5",
+    "@syncfusion/ej2-buttons": "~22.2.5",
+    "@syncfusion/ej2-inputs": "~22.2.5",
+    "@syncfusion/ej2-navigations": "~22.2.5",
+    "@syncfusion/ej2-popups": "~22.2.5",
+    "@syncfusion/ej2-splitbuttons": "~22.2.5"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "22.1.38",
+  "version": "22.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/image-editor/action/crop.d.ts

@@ -8,6 +8,7 @@ export declare class Crop {
     private cropDestPoints;
     private tempFlipPanPoint;
     private isPreventScaling;
+    private isInitCrop;
     constructor(parent: ImageEditor);
     destroy(): void;
     private addEventListener;
@@ -20,6 +21,7 @@ export declare class Crop {
     private updateCropObj;
     private rotateCrop;
     private revertTransform;
+    private resetZoom;
     private flipCrop;
     private cropObjColl;
     private cropPointCollection;

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

@@ -5,6 +5,7 @@ var Crop = /** @class */ (function () {
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 }; // To redraw old image when navigate to crop tab
         this.tempFlipPanPoint = { x: 0, y: 0 };
         this.isPreventScaling = false;
+        this.isInitCrop = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -19,7 +20,7 @@ var Crop = /** @class */ (function () {
         this.parent.on('destroyed', this.destroy, this);
     };
     Crop.prototype.removeEventListener = function () {
-        this.parent.off('crop', this.crop);
+        this.parent.off('crop', this.cropping);
         this.parent.off('destroyed', this.destroy);
     };
     Crop.prototype.cropping = function (args) {
@@ -93,6 +94,7 @@ var Crop = /** @class */ (function () {
         this.cropDestPoints = { startX: 0, startY: 0, width: 0, height: 0 };
         this.tempFlipPanPoint = { x: 0, y: 0 };
         this.isPreventScaling = false;
+        this.isInitCrop = false;
     };
     Crop.prototype.cropImg = function (isRotateCrop) {
         var parent = this.parent;
@@ -146,7 +148,7 @@ var Crop = /** @class */ (function () {
             parent.img.destWidth = maxDimension.width;
             parent.img.destHeight = maxDimension.height;
             var temp = this.lowerContext.filter;
-            parent.notify('finetune', { prop: 'updateBrightFilter', onPropertyChange: false });
+            parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
             this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
             this.lowerContext.filter = 'none';
             var activeObj = extend({}, parent.activeObj, {}, true);
@@ -198,6 +200,8 @@ var Crop = /** @class */ (function () {
         parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: { bool: true } });
         var coll = extend([], parent.rotateFlipColl, [], true);
         this.panToSelRangle(true);
+        this.resetZoom();
+        var afterCropActions = extend([], parent.afterCropActions, [], true);
         this.revertTransform('initial', coll);
         activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
@@ -206,6 +210,7 @@ var Crop = /** @class */ (function () {
         parent.transform.degree = 0;
         this.cropImg(true);
         this.revertTransform('reverse', coll);
+        parent.afterCropActions = afterCropActions;
         parent.currSelectionPoint = tempCurrSelObj;
         parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: { bool: preventSelObj['bool'] } });
         parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
@@ -256,18 +261,8 @@ var Crop = /** @class */ (function () {
             }
         }
     };
-    Crop.prototype.flipCrop = function () {
+    Crop.prototype.resetZoom = function () {
         var parent = this.parent;
-        parent.notify('transform', { prop: 'setReverseFlip', onPropertyChange: false, value: { isReverseFlip: true } });
-        parent.panPoint.totalPannedPoint.x += this.tempFlipPanPoint.x;
-        parent.panPoint.totalPannedPoint.y += this.tempFlipPanPoint.y;
-        var tempCurrFlipState = parent.transform.currFlipState;
-        var obj = { flipColl: null };
-        parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: { obj: obj } });
-        var tempFlipColl = obj['flipColl'];
-        parent.notify('transform', { prop: 'setFlipColl', onPropertyChange: false, value: { flipColl: [] } });
-        parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
-        parent.objColl.push(parent.activeObj);
         if (parent.transform.zoomFactor > 0) {
             var zoomFactor = parent.transform.zoomFactor;
             var isUndoRedo = parent.isUndoRedo;
@@ -279,11 +274,25 @@ var Crop = /** @class */ (function () {
             parent.isUndoRedo = isUndoRedo;
             parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false });
         }
+    };
+    Crop.prototype.flipCrop = function () {
+        var parent = this.parent;
+        parent.notify('transform', { prop: 'setReverseFlip', onPropertyChange: false, value: { isReverseFlip: true } });
+        parent.panPoint.totalPannedPoint.x += this.tempFlipPanPoint.x;
+        parent.panPoint.totalPannedPoint.y += this.tempFlipPanPoint.y;
+        var tempCurrFlipState = parent.transform.currFlipState;
+        var obj = { flipColl: null };
+        parent.notify('transform', { prop: 'getFlipColl', onPropertyChange: false, value: { obj: obj } });
+        var tempFlipColl = obj['flipColl'];
+        parent.notify('transform', { prop: 'setFlipColl', onPropertyChange: false, value: { flipColl: [] } });
+        parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
+        parent.objColl.push(parent.activeObj);
+        this.resetZoom();
         parent.currSelectionPoint = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
         this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
         var temp = this.lowerContext.filter;
-        parent.notify('finetune', { prop: 'updateBrightFilter', onPropertyChange: false });
+        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
         for (var i = 0, len = parent.objColl.length; i < len; i++) {
             parent.objColl[i].shapeFlip = '';
@@ -304,7 +313,7 @@ var Crop = /** @class */ (function () {
         parent.notify('draw', { prop: 'setDestPoints', onPropertyChange: false });
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'initial', isPreventDestination: null, context: null, isPreventCircleCrop: null } });
-        parent.notify('finetune', { prop: 'updateBrightFilter', onPropertyChange: false });
+        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
         this.lowerContext.filter = temp;
         parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: false } });
@@ -426,6 +435,7 @@ var Crop = /** @class */ (function () {
     Crop.prototype.setCurrSelPoints = function (isSetDimension) {
         var parent = this.parent;
         var destPoint = this.cropDestPoints;
+        var filter = this.lowerContext.filter;
         parent.img.srcLeft = 0;
         parent.img.srcTop = 0;
         parent.img.srcWidth = parent.baseImg.width;
@@ -453,6 +463,7 @@ var Crop = /** @class */ (function () {
         }
         parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
+        this.lowerContext.filter = filter;
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'reverse', isPreventDestination: null, context: null, isPreventCircleCrop: true } });
         var cropObjColl = extend([], parent.objColl, null, true);
@@ -518,6 +529,16 @@ var Crop = /** @class */ (function () {
             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
             parent.notify('transform', { prop: 'setTempPanMove', onPropertyChange: false,
                 value: { point: null } });
+            if (!this.isInitCrop && parent.transform.degree === 0 && parent.cropObj.currFlipState !== '' &&
+                parent.cropObj.cropZoom !== 0) {
+                this.isInitCrop = true;
+                parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'croptransform',
+                        isApplyBtn: false, isCropping: null, isZooming: null, cType: null } });
+            }
+            else {
+                this.isInitCrop = false;
+            }
         }
         else {
             var temp = this.lowerContext.filter;
@@ -531,22 +552,18 @@ var Crop = /** @class */ (function () {
     };
     Crop.prototype.panToSelRangle = function (isReverse) {
         var parent = this.parent;
-        var panX = parent.transform.degree === 0 ?
-            isReverse ? -parent.cropObj.totalPannedPoint.x : parent.cropObj.totalPannedPoint.x :
-            isReverse ? -parent.cropObj.totalPannedClientPoint.x : parent.cropObj.totalPannedClientPoint.x;
-        var panY = parent.transform.degree === 0 ?
-            isReverse ? -parent.cropObj.totalPannedPoint.y : parent.cropObj.totalPannedPoint.y :
-            isReverse ? -parent.cropObj.totalPannedClientPoint.y : parent.cropObj.totalPannedClientPoint.y;
-        if (parent.transform.degree === 0) {
-            parent.img.destLeft += panX;
-            parent.img.destTop += panY;
-            parent.notify('transform', { prop: 'drawPannImage', value: { point: { x: panX, y: panY } } });
-        }
-        else {
+        var obj = extend({}, parent.currSelectionPoint, null, true);
+        parent.currSelectionPoint = null;
+        var panX = parent.transform.degree !== 0 ?
+            isReverse ? -parent.cropObj.totalPannedClientPoint.x : parent.cropObj.totalPannedClientPoint.x : 0;
+        var panY = parent.transform.degree !== 0 ?
+            isReverse ? -parent.cropObj.totalPannedClientPoint.y : parent.cropObj.totalPannedClientPoint.y : 0;
+        if (parent.transform.degree !== 0) {
             parent.panPoint.currentPannedPoint = { x: panX, y: panY };
             parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
             parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
         }
+        parent.currSelectionPoint = obj;
     };
     Crop.prototype.cropCircle = function (context, isSave, isFlip) {
         var parent = this.parent;

package/src/image-editor/action/draw.d.ts

@@ -3,8 +3,6 @@ export declare class Draw {
     private parent;
     private lowerContext;
     private upperContext;
-    private cancelObjColl;
-    private cancelPointColl;
     private isInitialLoading;
     private fileName;
     private fileType;
@@ -67,6 +65,7 @@ export declare class Draw {
     private drawSelection;
     private shapeCircle;
     private shapeLine;
+    private manipulateSaveCtx;
     private arrow;
     private arrowSolid;
     private arrowSquareStart;

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

@@ -2,8 +2,6 @@ import { extend, isNullOrUndefined, Browser, isBlazor, getComponent } from '@syn
 import { Dialog, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 var Draw = /** @class */ (function () {
     function Draw(parent) {
-        this.cancelObjColl = [];
-        this.cancelPointColl = [];
         this.isInitialLoading = false; // Specifies whether image is loaded for the first time or not (for applying initial filter)
         this.fileName = '';
         this.isErrorImage = false;
@@ -223,7 +221,6 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.reset = function () {
         this.isInitialLoading = this.isErrorImage = this.isNewPath = false;
-        this.cancelObjColl = this.cancelPointColl = [];
         this.isShapeTextInserted = false;
         this.initZoomValue = null;
         this.tempFilter = '';
@@ -1108,12 +1105,30 @@ var Draw = /** @class */ (function () {
         canvasDraw.stroke();
         canvasDraw.lineWidth = tempLineWidth;
     };
+    Draw.prototype.manipulateSaveCtx = function (canvasDraw, x, y) {
+        if (canvasDraw !== this.lowerContext && canvasDraw !== this.upperContext) {
+            var obj = { width: 0, height: 0 };
+            this.parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+                value: { obj: obj, dimension: { width: canvasDraw.canvas.width, height: canvasDraw.canvas.height } } });
+            var ratio = obj;
+            if (x) {
+                x *= (ratio.width);
+            }
+            if (y) {
+                y *= (ratio.height);
+            }
+        }
+        return { x: x, y: y };
+    };
     Draw.prototype.arrow = function (canvasDraw, start) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
         canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-        var x = this.arrowDimension['arrow']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        var y = this.arrowDimension['arrow']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        var x = this.arrowDimension['arrow']['width'];
+        var y = this.arrowDimension['arrow']['height'];
+        var point = this.manipulateSaveCtx(canvasDraw, x, y);
+        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
         this.dx = actPoint.endX - actPoint.startX;
         this.dy = actPoint.endY - actPoint.startY;
         canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
@@ -1148,8 +1163,11 @@ var Draw = /** @class */ (function () {
     Draw.prototype.arrowSolid = function (canvasDraw, start) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
-        var x = this.arrowDimension['arrowSolid']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        var y = this.arrowDimension['arrowSolid']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        var x = this.arrowDimension['arrowSolid']['width'];
+        var y = this.arrowDimension['arrowSolid']['height'];
+        var point = this.manipulateSaveCtx(canvasDraw, x, y);
+        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
         this.dx = actPoint.endX - actPoint.startX;
         this.dy = actPoint.endY - actPoint.startY;
         var angle = Math.atan2(this.dy, this.dx);
@@ -1199,8 +1217,11 @@ var Draw = /** @class */ (function () {
         canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
         canvasDraw.beginPath();
         canvasDraw.fillStyle = parent.activeObj.strokeSettings.strokeColor;
-        var x = this.arrowDimension['square']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        var y = this.arrowDimension['square']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        var x = this.arrowDimension['square']['width'];
+        var y = this.arrowDimension['square']['height'];
+        var point = this.manipulateSaveCtx(canvasDraw, x, y);
+        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
         this.dx = actPoint.endX - actPoint.startX;
         this.dy = actPoint.endY - actPoint.startY;
         var angle = Math.atan2(this.dy, this.dx);
@@ -1255,8 +1276,11 @@ var Draw = /** @class */ (function () {
     Draw.prototype.arrowSquareEnd = function (canvasDraw) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
-        var x = this.arrowDimension['square']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-        var y = this.arrowDimension['square']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+        var x = this.arrowDimension['square']['width'];
+        var y = this.arrowDimension['square']['height'];
+        var point = this.manipulateSaveCtx(canvasDraw, x, y);
+        x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+        y = point.y + parent.activeObj.strokeSettings.strokeWidth;
         this.dx = actPoint.endX - actPoint.startX;
         this.dy = actPoint.endY - actPoint.startY;
         var angle = Math.atan2(this.dy, this.dx);
@@ -1318,7 +1342,9 @@ var Draw = /** @class */ (function () {
         if ((start && parent.activeObj.triangleDirection === 'left') ||
             (!start && parent.activeObj.triangleDirection === 'right')) {
             canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-            var circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            var circleRadius = this.arrowDimension['circle']['width'];
+            var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
+            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
             canvasDraw.beginPath();
             canvasDraw.arc(actPoint.endX, actPoint.endY, circleRadius, 0, 2 * Math.PI);
             canvasDraw.stroke();
@@ -1366,7 +1392,9 @@ var Draw = /** @class */ (function () {
         else if ((start && parent.activeObj.triangleDirection === 'right') ||
             (!start && parent.activeObj.triangleDirection === 'left')) {
             canvasDraw.lineWidth = (parent.activeObj.strokeSettings.strokeWidth);
-            var circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            var circleRadius = this.arrowDimension['circle']['width'];
+            var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
+            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
             canvasDraw.beginPath();
             canvasDraw.arc(actPoint.startX, actPoint.startY, circleRadius, 0, 2 * Math.PI);
             canvasDraw.stroke();
@@ -1424,7 +1452,9 @@ var Draw = /** @class */ (function () {
                 (!start && (parent.activeObj.end === 'circleSolid' && parent.activeObj.start === 'none'))) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            var circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            var circleRadius = this.arrowDimension['circle']['width'];
+            var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
+            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
             this.dx = actPoint.endX - actPoint.startX;
             this.dy = actPoint.endY - actPoint.startY;
             canvasDraw.save();
@@ -1445,7 +1475,9 @@ var Draw = /** @class */ (function () {
                 !start && (parent.activeObj.end === 'circleSolid' && parent.activeObj.start === 'none')) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            var circleRadius = this.arrowDimension['circle']['width'] + parent.activeObj.strokeSettings.strokeWidth;
+            var circleRadius = this.arrowDimension['circle']['width'];
+            var point = this.manipulateSaveCtx(canvasDraw, circleRadius, null);
+            circleRadius = point.x + parent.activeObj.strokeSettings.strokeWidth;
             this.dx = actPoint.endX - actPoint.startX;
             this.dy = actPoint.endY - actPoint.startY;
             canvasDraw.save();
@@ -1471,8 +1503,11 @@ var Draw = /** @class */ (function () {
                     (parent.activeObj.end === 'bar' && (parent.activeObj.start !== 'circle' && parent.activeObj.start !== 'square'))))) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            var x = this.arrowDimension['bar']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-            var y = this.arrowDimension['bar']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+            var x = this.arrowDimension['bar']['width'];
+            var y = this.arrowDimension['bar']['height'];
+            var point = this.manipulateSaveCtx(canvasDraw, x, y);
+            x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+            y = point.y + parent.activeObj.strokeSettings.strokeWidth;
             this.dx = actPoint.endX - actPoint.startX;
             this.dy = actPoint.endY - actPoint.startY;
             var angle = Math.atan2(this.dy, this.dx);
@@ -1493,8 +1528,11 @@ var Draw = /** @class */ (function () {
                 (!start && (parent.activeObj.end === 'bar' && parent.activeObj.start === 'none'))) {
                 this.shapeLine(canvasDraw, actPoint.startX, actPoint.startY, actPoint.endX, actPoint.endY);
             }
-            var x = this.arrowDimension['bar']['width'] + parent.activeObj.strokeSettings.strokeWidth;
-            var y = this.arrowDimension['bar']['height'] + parent.activeObj.strokeSettings.strokeWidth;
+            var x = this.arrowDimension['bar']['width'];
+            var y = this.arrowDimension['bar']['height'];
+            var point = this.manipulateSaveCtx(canvasDraw, x, y);
+            x = point.x + parent.activeObj.strokeSettings.strokeWidth;
+            y = point.y + parent.activeObj.strokeSettings.strokeWidth;
             this.dx = actPoint.endX - actPoint.startX;
             this.dy = actPoint.endY - actPoint.startY;
             var angle = Math.atan2(this.dy, this.dx);
@@ -2354,8 +2392,6 @@ var Draw = /** @class */ (function () {
                     parent.isCropTab = isCropTab;
                     this.resetPanPoints();
                 }
-                this.cancelObjColl = extend([], parent.objColl, [], true);
-                this.cancelPointColl = extend([], parent.pointColl, [], true);
                 parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
                 parent.isCropTab = true;
                 parent.isCircleCrop = false;
@@ -2665,7 +2701,7 @@ var Draw = /** @class */ (function () {
             parent.afterCropActions = obj.afterCropActions;
         }
         this.lowerContext.filter = obj.filter;
-        parent.notify('filter', { prop: 'setBrightnessAdjusted', onPropertyChange: false, value: { isBrightnessAdjusted: false } });
+        parent.notify('filter', { prop: 'setBrightnessAdjusted', onPropertyChange: false, value: { isBrightnessAdjusted: obj.isBrightAdjust } });
         var isCircleCrop = parent.isCircleCrop;
         var currSelectionPoint;
         if (isNullOrUndefined(parent.currSelectionPoint)) {
@@ -2761,6 +2797,7 @@ var Draw = /** @class */ (function () {
             this.setTransformColl(this.lowerContext, 'initial');
         }
         parent.notify('transform', { prop: 'setDestPointsForFlipState', onPropertyChange: false });
+        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
         if (isObj) {
             this.updateCurrTransState('reverse');
@@ -3088,7 +3125,7 @@ var Draw = /** @class */ (function () {
         object['isInitialLoaded'] = this.isInitialLoading;
     };
     Draw.prototype.getFileExtensionFromURL = function (url) {
-        var lastDotIndex = url.lastIndexOf(".");
+        var lastDotIndex = url.lastIndexOf('.');
         if (lastDotIndex !== -1) {
             return url.slice(lastDotIndex + 1).toLowerCase();
         }

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

@@ -190,7 +190,6 @@ var Export = /** @class */ (function () {
             id: parent.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
         });
         var tempContext = tempCanvas.getContext('2d');
-        tempContext.filter = this.lowerContext.filter;
         tempCanvas.width = width;
         tempCanvas.height = height;
         var dimObj = { width: 0, height: 0 };
@@ -199,9 +198,9 @@ var Export = /** @class */ (function () {
         var maxDimension = dimObj;
         tempCanvas.style.maxWidth = maxDimension.width + 'px';
         tempCanvas.style.maxHeight = maxDimension.height + 'px';
-        tempContext.filter = this.lowerContext.filter;
         var temp = this.lowerContext.filter;
         parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
+        tempContext.filter = this.lowerContext.filter;
         tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, width, height);
         this.lowerContext.filter = temp;
         if (parent.transform.degree !== 0 || parent.transform.currFlipState !== '') {
@@ -232,6 +231,14 @@ var Export = /** @class */ (function () {
                 if (parent.objColl[i].shape === 'text') {
                     parent.objColl[i].textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
                 }
+                else if (parent.objColl[i].shape === 'path') {
+                    for (var l = 0; l < parent.objColl[i].pointColl.length; l++) {
+                        parent.objColl[i].pointColl[l].x =
+                            (parent.objColl[i].pointColl[l].x - parent.img.destLeft) * ratio.width;
+                        parent.objColl[i].pointColl[l].y =
+                            (parent.objColl[i].pointColl[l].y - parent.img.destTop) * ratio.height;
+                    }
+                }
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'saveContext', obj: parent.objColl[i], isCropRatio: null,
                         points: null, isPreventDrag: true, saveContext: tempContext, isPreventSelection: null } });
             }

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

@@ -421,7 +421,6 @@ var Filter = /** @class */ (function () {
         var parent = this.parent;
         parent.notify('freehand-draw', { prop: 'apply-pen-draw', onPropertyChange: false });
         this.adjustmentLevel["" + type] = value;
-        var valueMap;
         switch (type) {
             case 'brightness':
             case 'contrast':
@@ -474,8 +473,6 @@ var Filter = /** @class */ (function () {
         parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false, value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.updateAdj(type, value);
-        var filter = this.lowerContext.filter;
-        this.lowerContext.filter = this.appliedFilter;
         parent.notify('undo-redo', {
             prop: 'updateUndoRedoColl',
             onPropertyChange: false,
@@ -492,7 +489,6 @@ var Filter = /** @class */ (function () {
                 isCircleCrop: null
             }
         });
-        this.lowerContext.filter = filter;
     };
     Filter.prototype.setFilter = function (type) {
         var parent = this.parent;
@@ -510,15 +506,12 @@ var Filter = /** @class */ (function () {
             value: { obj: selPointCollObj } });
         prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
         this.updateAdj(type, null);
-        var filter = this.lowerContext.filter;
-        this.lowerContext.filter = this.appliedFilter;
         parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
         parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false,
             value: { operation: type, previousObj: prevObj, previousObjColl: prevObj.objColl,
                 previousPointColl: prevObj.pointColl, previousSelPointColl: prevObj.selPointColl,
                 previousCropObj: prevCropObj, previousText: null,
                 currentText: null, previousFilter: prevFilter, isCircleCrop: null } });
-        this.lowerContext.filter = filter;
     };
     Filter.prototype.setAdjustment = function (type) {
         var splitWords = this.lowerContext.filter.split(' ');
@@ -671,7 +664,7 @@ var Filter = /** @class */ (function () {
             totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {},
             rotateFlipColl: [], degree: 0, currFlipState: '', zoomFactor: 0, previousZoomValue: 0,
             destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
-            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '' };
+            srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: this.isBrightnessAdjusted };
         obj.cropZoom = parent.transform.cropZoomFactor;
         obj.defaultZoom = parent.transform.defaultZoomFactor;
         obj.zoomFactor = parent.zoomSettings.zoomFactor;

package/src/image-editor/action/freehand-draw.d.ts

@@ -13,6 +13,7 @@ export declare class FreehandDrawing {
     private penStrokeWidth;
     private currFHDIdx;
     private selPoints;
+    private dummyPoints;
     private fhdSelID;
     private tempFHDStyles;
     private fhdSelIdx;