@syncfusion/ej2-image-editor 22.2.11 → 23.1.36

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

@@ -21,9 +21,13 @@ var Draw = /** @class */ (function () {
         this.isImageEdited = false;
         this.isFileChanged = false;
         this.isNewPath = false;
+        this.isResizeSelect = false;
         this.arrowDimension = { bar: { width: 10, height: 32, ratioX: null, ratioY: null },
             arrow: { width: 24, height: 24, ratioX: null, ratioY: null }, arrowSolid: { width: 32, height: 32, ratioX: null, ratioY: null },
             circle: { width: 10, height: 10, ratioX: null, ratioY: null }, square: { width: 20, height: 20, ratioX: null, ratioY: null } };
+        this.tempFrame = 'none';
+        this.origDim = { width: 0, height: 0 };
+        this.isImageApply = false;
         this.parent = parent;
         this.addEventListener();
     }
@@ -66,7 +70,7 @@ var Draw = /** @class */ (function () {
                 this.setTransform(args.value['context'], args.value['value'], args.value['isReverse']);
                 break;
             case 'render-image':
-                this.renderImage(args.value['isMouseWheel']);
+                this.renderImage(args.value['isMouseWheel'], args.value['isPreventClearRect'], args.value['isFrame']);
                 break;
             case 'draw-image-to-canvas':
                 this.drawImgToCanvas(args.value['dimension']);
@@ -202,6 +206,36 @@ var Draw = /** @class */ (function () {
             case 'moveToSelectionRange':
                 this.moveToSelectionRange(args.value['type'], args.value['activeObj']);
                 break;
+            case 'setResizeSelect':
+                this.isResizeSelect = args.value['bool'];
+                break;
+            case 'applyFrame':
+                this.applyFrame(args.value['ctx'], args.value['frame'], args.value['preventImg']);
+                break;
+            case 'getTempFrame':
+                args.value['obj']['tempFrame'] = this.tempFrame;
+                break;
+            case 'drawImage':
+                this.drawImage();
+                break;
+            case 'setTempFrame':
+                this.tempFrame = args.value['frame'];
+                break;
+            case 'downScaleImgCanvas':
+                this.downScaleImgCanvas(args.value['ctx'], args.value['isImgAnnotation'], args.value['isHFlip'], args.value['isVFlip']);
+                break;
+            case 'downScale':
+                this.downScale(args.value['canvas'], args.value['width'], args.value['height']);
+                break;
+            case 'resetFrameZoom':
+                this.resetFrameZoom();
+                break;
+            case 'triggerFrameChange':
+                args.value['obj']['frameChangeEventArgs'] = this.triggerFrameChange(args.value['prevFrameSettings']);
+                break;
+            case 'setImageApply':
+                this.isImageApply = args.value['bool'];
+                break;
         }
     };
     Draw.prototype.getModuleName = function () {
@@ -220,10 +254,13 @@ var Draw = /** @class */ (function () {
         }
     };
     Draw.prototype.reset = function () {
-        this.isInitialLoading = this.isErrorImage = this.isNewPath = false;
+        this.isInitialLoading = this.isErrorImage = this.isNewPath = this.isResizeSelect = false;
         this.isShapeTextInserted = false;
+        this.tempFrame = 'none';
+        this.isImageApply = false;
         this.initZoomValue = null;
         this.tempFilter = '';
+        this.origDim = { width: 0, height: 0 };
         this.currSelPoint = null;
         this.isRotateZoom = false;
         this.tempAdjValue = '';
@@ -239,6 +276,9 @@ var Draw = /** @class */ (function () {
             arrow: { width: 24, height: 24, ratioX: null, ratioY: null }, arrowSolid: { width: 32, height: 32, ratioX: null, ratioY: null },
             circle: { width: 10, height: 10, ratioX: null, ratioY: null }, square: { width: 20, height: 20, ratioX: null, ratioY: null } };
     };
+    Draw.prototype.drawImage = function () {
+        this.applyFrame(this.lowerContext, this.parent.frameObj.type);
+    };
     Draw.prototype.drawObject = function (canvas, obj, isCropRatio, points, isPreventDrag, saveContext, isPreventSelection) {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
@@ -342,7 +382,7 @@ var Draw = /** @class */ (function () {
     Draw.prototype.setDragLimit = function () {
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
-        if (actPoint && parent.activeObj.rotatedAngle === 0) {
+        if (actPoint && parent.activeObj.shape !== 'image' && parent.activeObj.shape !== 'line' && parent.activeObj.rotatedAngle === 0) {
             if (actPoint.startX < parent.img.destLeft) {
                 actPoint.startX = parent.img.destLeft;
                 actPoint.endX = actPoint.startX + actPoint.width;
@@ -501,22 +541,22 @@ var Draw = /** @class */ (function () {
         parent.activeObj.activePoint.startY += diffY;
         parent.activeObj.activePoint.endY += diffY;
         if (parent.activeObj.activePoint.startX < (parent.img.destLeft >= 7.5 ? parent.img.destLeft : 7.5)) {
-            var diff = ((parent.img.destLeft >= 7.5 ? parent.img.destLeft : 0) - parent.activeObj.activePoint.startX) + 7.5;
+            var diff = ((parent.img.destLeft >= 7.5 ? parent.img.destLeft : 0) - parent.activeObj.activePoint.startX);
             parent.activeObj.activePoint.startX += diff;
             parent.activeObj.activePoint.endX += diff;
         }
         else if (parent.activeObj.activePoint.endX > parent.img.destLeft + parent.img.destWidth) {
-            var diff = (parent.activeObj.activePoint.endX - (parent.img.destLeft + parent.img.destWidth)) + 7.5;
+            var diff = (parent.activeObj.activePoint.endX - (parent.img.destLeft + parent.img.destWidth));
             parent.activeObj.activePoint.startX -= diff;
             parent.activeObj.activePoint.endX -= diff;
         }
-        if (parent.activeObj.activePoint.startY < (parent.img.destTop > 7.5 ? parent.img.destTop : 7.5)) {
-            var diff = ((parent.img.destTop > 7.5 ? parent.img.destTop : 0) - parent.activeObj.activePoint.startY) + 7.5;
+        if (parent.activeObj.activePoint.startY < (parent.img.destTop >= 7.5 ? parent.img.destTop : 7.5)) {
+            var diff = ((parent.img.destTop >= 7.5 ? parent.img.destTop : 0) - parent.activeObj.activePoint.startY);
             parent.activeObj.activePoint.startY += diff;
             parent.activeObj.activePoint.endY += diff;
         }
         else if (parent.activeObj.activePoint.endY > parent.img.destTop + parent.img.destHeight) {
-            var diff = (parent.activeObj.activePoint.endY - (parent.img.destTop + parent.img.destHeight)) + 7.5;
+            var diff = (parent.activeObj.activePoint.endY - (parent.img.destTop + parent.img.destHeight));
             parent.activeObj.activePoint.startY -= diff;
             parent.activeObj.activePoint.endY -= diff;
         }
@@ -725,7 +765,7 @@ var Draw = /** @class */ (function () {
         }
         if (parent.currObjType.shape.toLowerCase() === 'rectangle' || parent.currObjType.shape.toLowerCase() === 'ellipse'
             || parent.currObjType.shape.toLowerCase() === 'line' || parent.activeObj.shape === 'arrow' ||
-            parent.activeObj.shape === 'path') {
+            parent.activeObj.shape === 'path' || parent.activeObj.shape === 'image') {
             parent.activeObj.shape = parent.currObjType.shape;
         }
         canvasDraw.strokeStyle = parent.activeObj.strokeSettings.strokeColor;
@@ -855,6 +895,12 @@ var Draw = /** @class */ (function () {
             case 'text':
                 this.shapeText(canvasDraw);
                 break;
+            case 'image':
+                this.shapeImage(canvasDraw);
+                if (isNullOrUndefined(isPreventSelection) && canvasDraw === this.upperContext) {
+                    this.drawOuterSelection(canvasDraw);
+                }
+                break;
             case 'crop-square':
             case 'crop-3:4':
             case 'crop-4:3':
@@ -1544,7 +1590,70 @@ var Draw = /** @class */ (function () {
             parent.activeObj.rotatedAngle = angle;
         }
     };
+    Draw.prototype.shapeImage = function (canvasDraw) {
+        var parent = this.parent;
+        var ctx = parent.activeObj.imageCanvas.getContext('2d');
+        if (canvasDraw === this.lowerContext && this.isImageApply) {
+            var dimObj = { width: 0, height: 0 };
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+                value: { width: parent.activeObj.imageElement.width, height: parent.activeObj.imageElement.height, obj: dimObj, isImgShape: null } });
+            if (parent.activeObj.activePoint.width < (dimObj['width'] / 5) || parent.activeObj.activePoint.height < (dimObj['height'] / 5)) {
+                ctx.clearRect(0, 0, parent.activeObj.imageCanvas.width, parent.activeObj.imageCanvas.height);
+                parent.notify('draw', { prop: 'downScaleImgCanvas', onPropertyChange: false,
+                    value: { ctx: ctx, isImgAnnotation: true, isHFlip: null, isVFlip: null } });
+                parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+                this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+                parent.notify('selection', { prop: 'setImageClarity', onPropertyChange: false, value: { bool: false } });
+                this.isImageApply = false;
+            }
+        }
+        var imgPoint = { startX: 0, startY: 0, width: 0, height: 0 };
+        imgPoint.width = parent.activeObj.activePoint.width;
+        imgPoint.height = parent.activeObj.activePoint.height;
+        if (parent.activeObj.flipObjColl.length === 4) {
+            parent.activeObj.flipObjColl = [];
+            parent.activeObj.shapeFlip = '';
+        }
+        for (var j = 0, len = parent.activeObj.flipObjColl.length; j < len; j++) {
+            if (parent.activeObj.flipObjColl[j].toLowerCase() === 'horizontal') {
+                canvasDraw.translate(canvasDraw.canvas.width, 0);
+                canvasDraw.scale(-1, 1);
+                parent.activeObj.activePoint = this.updateActPoint('horizontal', canvasDraw);
+            }
+            else if (parent.activeObj.flipObjColl[j].toLowerCase() === 'vertical') {
+                canvasDraw.translate(0, canvasDraw.canvas.height);
+                canvasDraw.scale(1, -1);
+                parent.activeObj.activePoint = this.updateActPoint('vertical', canvasDraw);
+            }
+        }
+        imgPoint.startX = ((parent.activeObj.activePoint.width - imgPoint.width) / 2) + parent.activeObj.activePoint.startX;
+        imgPoint.startY = ((parent.activeObj.activePoint.height - imgPoint.height) / 2) + parent.activeObj.activePoint.startY;
+        var temp = canvasDraw.globalAlpha;
+        canvasDraw.globalAlpha = parent.activeObj.imageTransparency;
+        if (parent.activeObj.shapeDegree !== parent.transform.degree) {
+            this.rotateImage(canvasDraw);
+        }
+        else {
+            canvasDraw.drawImage(parent.activeObj.imageCanvas, imgPoint.startX, imgPoint.startY, imgPoint.width, imgPoint.height);
+        }
+        canvasDraw.globalAlpha = temp;
+        for (var k = 0, len = parent.activeObj.flipObjColl.length; k < len; k++) {
+            if (parent.activeObj.flipObjColl[k].toLowerCase() === 'horizontal') {
+                canvasDraw.translate(canvasDraw.canvas.width, 0);
+                canvasDraw.scale(-1, 1);
+                parent.activeObj.activePoint = this.updateActPoint('horizontal', canvasDraw);
+            }
+            else if (parent.activeObj.flipObjColl[k].toLowerCase() === 'vertical') {
+                canvasDraw.translate(0, canvasDraw.canvas.height);
+                canvasDraw.scale(1, -1);
+                parent.activeObj.activePoint = this.updateActPoint('vertical', canvasDraw);
+            }
+        }
+        parent.currObjType.isText = false;
+    };
     Draw.prototype.shapeText = function (canvasDraw) {
+        var filter = canvasDraw.filter;
+        canvasDraw.filter = 'none';
         var parent = this.parent;
         var actPoint = parent.activeObj.activePoint;
         var rows = parent.activeObj.keyHistory.split('\n');
@@ -1617,6 +1726,7 @@ var Draw = /** @class */ (function () {
                 }
             }
         }
+        canvasDraw.filter = filter;
         parent.currObjType.isText = false;
     };
     Draw.prototype.updateActPoint = function (degree, canvasDraw) {
@@ -1651,6 +1761,66 @@ var Draw = /** @class */ (function () {
         }
         return actPoint;
     };
+    Draw.prototype.rotateImage = function (canvasDraw) {
+        var parent = this.parent;
+        var degree;
+        if (parent.activeObj.shapeDegree === 0) {
+            degree = parent.transform.degree;
+        }
+        else {
+            degree = parent.transform.degree - parent.activeObj.shapeDegree;
+        }
+        if (degree === -450) {
+            degree = -90;
+        }
+        if (degree < 0) {
+            degree = 360 + degree;
+        }
+        var imgPoint = { startX: 0, startY: 0, width: 0, height: 0 };
+        imgPoint.width = degree % 90 === 0 && degree % 180 !== 0 ? parent.activeObj.activePoint.height : parent.activeObj.activePoint.width;
+        imgPoint.height = degree % 90 === 0 && degree % 180 !== 0 ? parent.activeObj.activePoint.width :
+            parent.activeObj.activePoint.height;
+        imgPoint.startX = parent.activeObj.activePoint.startX;
+        imgPoint.startY = parent.activeObj.activePoint.startY;
+        var startX = imgPoint.startX;
+        var startY = imgPoint.startY;
+        if (degree % 360 === 0 && (parent.transform.degree !== -360 || parent.transform.currFlipState === '')) {
+            canvasDraw.drawImage(parent.activeObj.imageCanvas, imgPoint.startX, imgPoint.startY, imgPoint.width, imgPoint.height);
+        }
+        else if (degree % 90 === 0 && degree % 180 !== 0) {
+            canvasDraw.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
+            canvasDraw.rotate(Math.PI / 180 * degree);
+            canvasDraw.translate(-parent.lowerCanvas.height / 2, -parent.lowerCanvas.width / 2);
+            if (degree % 90 === 0 && degree % 270 !== 0) {
+                startY = parent.lowerCanvas.width - (parent.activeObj.activePoint.startX + parent.activeObj.activePoint.width);
+                startY += ((parent.activeObj.activePoint.width - imgPoint.height) / 2);
+                startX = imgPoint.startY;
+            }
+            else if (degree % 270 === 0) {
+                startX = parent.lowerCanvas.height - (parent.activeObj.activePoint.startY + parent.activeObj.activePoint.height);
+                startX += ((parent.activeObj.activePoint.height - imgPoint.width) / 2);
+                startY = imgPoint.startX;
+            }
+            canvasDraw.drawImage(parent.activeObj.imageCanvas, startX, startY, imgPoint.width, imgPoint.height);
+            canvasDraw.translate(parent.lowerCanvas.height / 2, parent.lowerCanvas.width / 2);
+            canvasDraw.rotate(Math.PI / 180 * -degree);
+            canvasDraw.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
+        }
+        else {
+            canvasDraw.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
+            canvasDraw.rotate(Math.PI / 180 * degree);
+            startX = parent.lowerCanvas.width - (imgPoint.startX + imgPoint.width);
+            startY = parent.lowerCanvas.height - (imgPoint.startY + imgPoint.height);
+            canvasDraw.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
+            canvasDraw.drawImage(parent.activeObj.imageCanvas, startX, startY, imgPoint.width, imgPoint.height);
+            canvasDraw.translate(parent.lowerCanvas.width / 2, parent.lowerCanvas.height / 2);
+            canvasDraw.rotate(Math.PI / 180 * -degree);
+            canvasDraw.translate(-parent.lowerCanvas.width / 2, -parent.lowerCanvas.height / 2);
+        }
+        if (parent.transform.degree === 360 || parent.transform.degree === -360) {
+            parent.transform.degree = 0;
+        }
+    };
     Draw.prototype.rotateText = function (canvasDraw) {
         var parent = this.parent;
         var startX = parent.activeObj.activePoint.startX;
@@ -1755,7 +1925,7 @@ var Draw = /** @class */ (function () {
         if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
             var obj = { width: 0, height: 0 };
             parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-                value: { width: parent.img.srcHeight, height: parent.img.srcWidth, obj: obj } });
+                value: { width: parent.img.srcHeight, height: parent.img.srcWidth, obj: obj, isImgShape: null } });
             maxDimension = obj;
             if (this.isRotateZoom) {
                 maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
@@ -1771,7 +1941,7 @@ var Draw = /** @class */ (function () {
         else {
             var obj = { width: 0, height: 0 };
             parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-                value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj } });
+                value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });
             maxDimension = obj;
             if (this.isRotateZoom) {
                 maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
@@ -1795,12 +1965,12 @@ var Draw = /** @class */ (function () {
                 this.setDestPoints();
             }
         }
-        this.currTransState(type, null, null, isRotatePan);
-        if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
-            parent.img.destLeft = destLeft;
-            parent.img.destTop = destTop;
-        }
         if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
+            this.currTransState(type, true, null, isRotatePan);
+            if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
+                parent.img.destLeft = destLeft;
+                parent.img.destTop = destTop;
+            }
             if (isRotatePan) {
                 parent.img.destLeft += parent.panPoint.totalPannedClientPoint.x;
                 parent.img.destTop +=
@@ -1814,6 +1984,13 @@ var Draw = /** @class */ (function () {
                     parent.panPoint.totalPannedClientPoint.y;
             }
         }
+        else {
+            this.currTransState(type, null, null, isRotatePan);
+            if (parent.transform.degree === 0 && parent.transform.currFlipState === '') {
+                parent.img.destLeft = destLeft;
+                parent.img.destTop = destTop;
+            }
+        }
     };
     Draw.prototype.currTransState = function (type, isPreventDimension, context, isPreventCircleCrop) {
         var parent = this.parent;
@@ -1900,33 +2077,33 @@ var Draw = /** @class */ (function () {
             this.isInitialLoading = false;
         }
         var temp = this.lowerContext.filter;
-        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        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.drawImage();
         if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                 value: { context: this.lowerContext, isSave: null, isFlip: null } });
         }
         this.lowerContext.filter = temp;
     };
-    Draw.prototype.renderImage = function (isMouseWheel) {
+    Draw.prototype.renderImage = function (isMouseWheel, isPreventClearRect, isFrame) {
         var parent = this.parent;
         var temp = this.lowerContext.filter;
         parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
-        this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+        if (isNullOrUndefined(isPreventClearRect)) {
+            this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+            this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
+        }
         if (isMouseWheel) {
             this.setTransformColl(this.lowerContext, 'initial');
         }
         else {
-            if (parent.transform.zoomFactor > 0) {
+            if (parent.transform.zoomFactor !== 0) {
                 this.isRotateZoom = true;
             }
             this.updateCurrTransState('initial');
         }
-        parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
         parent.notify('transform', { prop: 'setDestPointsForFlipState', 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.drawImage();
         parent.notify('transform', { prop: 'setDestPointsForFlipState', onPropertyChange: false });
         if (isMouseWheel) {
             this.setTransformColl(this.lowerContext, 'reverse');
@@ -1936,10 +2113,17 @@ var Draw = /** @class */ (function () {
             this.isRotateZoom = false;
         }
         this.lowerContext.filter = 'none';
-        parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-        parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-            value: { context: this.lowerContext, points: null } });
+        if (isFrame) {
+            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+        }
+        else {
+            parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
+            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
+                value: { context: this.lowerContext, points: null } });
+        }
         this.lowerContext.filter = temp;
+        this.clearOuterCanvas(this.lowerContext);
         if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                 value: { context: this.lowerContext, isSave: null, isFlip: null } });
@@ -1956,6 +2140,7 @@ var Draw = /** @class */ (function () {
             proxy.lowerContext.drawImage(parent.baseImg, 0, 0, proxy.parent.lowerCanvas.width, proxy.parent.lowerCanvas.height);
             hideSpinner(parent.element);
             parent.element.style.opacity = '1';
+            proxy.updateBaseImgCanvas();
             proxy.updateCanvas();
             if (parent.currObjType.isUndoZoom) {
                 parent.currObjType.isUndoZoom = false;
@@ -2003,18 +2188,26 @@ var Draw = /** @class */ (function () {
             parent.trigger('fileOpened', fileOpened);
         }
     };
+    Draw.prototype.updateBaseImgCanvas = function () {
+        var parent = this.parent;
+        parent.baseImgCanvas.width = parent.baseImg.width;
+        parent.baseImgCanvas.height = parent.baseImg.height;
+        parent.baseImgCanvas.getContext('2d').drawImage(parent.baseImg, 0, 0);
+    };
     Draw.prototype.updateCanvas = function () {
         var parent = this.parent;
         var fileOpened = { fileName: this.fileName, fileType: this.fileType, isValidImage: true };
-        parent.img.srcWidth = parent.baseImg.width;
-        parent.img.srcHeight = parent.baseImg.height;
+        parent.img.srcWidth = parent.baseImgCanvas.width;
+        parent.img.srcHeight = parent.baseImgCanvas.height;
         var obj = { width: 0, height: 0 };
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-            value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj } });
+            value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });
         var maxDimension = obj;
         parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
         parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
         this.drawImgToCanvas(maxDimension);
+        this.origDim.width = parent.img.destWidth;
+        this.origDim.height = parent.img.destHeight;
         this.zoomCrop.width = parent.img.destWidth;
         this.zoomCrop.height = parent.img.destHeight;
         parent.notify('transform', { prop: 'setCropDimension', onPropertyChange: false,
@@ -2055,11 +2248,27 @@ var Draw = /** @class */ (function () {
         }
         this.isImageEdited = false;
     };
+    Draw.prototype.resetFrameZoom = function () {
+        var parent = this.parent;
+        if (!isNullOrUndefined(parent.tempFrameZoomLevel)) {
+            var temp = parent.tempFrameZoomLevel;
+            parent.tempFrameZoomLevel = null;
+            parent.notify('transform', { prop: 'resetZoom', onPropertyChange: false });
+            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                value: { zoomFactor: temp, zoomPoint: null, isResize: true } });
+        }
+    };
     Draw.prototype.performCancel = function (isContextualToolbar) {
         var parent = this.parent;
         isContextualToolbar = isContextualToolbar ? isContextualToolbar : false;
         var obj = { bool: false };
+        parent.allowDownScale = true;
         parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
+        if (JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
+            extend(parent.frameObj, parent.tempFrameObj);
+            this.renderImage(null, null, true);
+        }
+        this.resetFrameZoom();
         if (obj['bool']) {
             parent.notify('freehand-draw', { prop: 'cancelFhd', onPropertyChange: false });
             if (!isBlazor()) {
@@ -2143,8 +2352,14 @@ var Draw = /** @class */ (function () {
             }
             else {
                 this.cancelItems();
-                parent.togglePan = false;
-                parent.notify('selection', { prop: 'setDragCanvas', value: { bool: false } });
+                if (parent.transform.zoomFactor > 0) {
+                    parent.togglePan = true;
+                    parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
+                }
+                else {
+                    parent.togglePan = false;
+                    parent.notify('selection', { prop: 'setDragCanvas', value: { bool: false } });
+                }
             }
         }
         this.isShapeTextInserted = false;
@@ -2157,8 +2372,10 @@ var Draw = /** @class */ (function () {
     Draw.prototype.cancelItems = function () {
         var parent = this.parent;
         var isCropSelection = false;
+        var ascpectIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
+        var nonAspectIcon = this.parent.element.querySelector('#' + this.parent.element.id + '_nonaspectratio');
         var splitWords;
-        var shapes = ['rectangle', 'ellipse', 'line', 'arrow', 'path'];
+        var shapes = ['rectangle', 'ellipse', 'line', 'arrow', 'path', 'image'];
         if (parent.activeObj.shape !== undefined) {
             splitWords = parent.activeObj.shape.split('-');
         }
@@ -2172,6 +2389,54 @@ var Draw = /** @class */ (function () {
             parent.isCropTab = false;
             parent.transform.zoomFactor = parent.transform.defaultZoomFactor;
         }
+        if (parent.isResize) {
+            if (ascpectIcon || nonAspectIcon || parent.currentToolbar == "resize-toolbar") {
+                var obj = { width: null, height: null };
+                parent.notify('selection', { prop: 'getNumTextValue', onPropertyChange: false, value: { obj: obj } });
+                var point = { x: obj['width'], y: obj['height'] };
+                var aspectRatioElement = this.parent.element.querySelector('#' + this.parent.element.id + '_aspectratio');
+                var blrAspRatElem = this.parent.element.querySelector(".e-ie-toolbar-aspect-ratio-btn");
+                if (point && point.x && point.y && !isNullOrUndefined(this.parent.aspectWidth)) {
+                    if (aspectRatioElement || (blrAspRatElem && !blrAspRatElem.classList.contains("e-hidden"))) {
+                        parent.notify('transform', { prop: 'resizeImage', value: { width: parent.aspectWidth, height: parent.aspectHeight } });
+                    }
+                    else {
+                        var bool = parent.currObjType.isUndoAction;
+                        parent.currObjType.isUndoAction = false;
+                        parent.notify('transform', { prop: 'resizeCrop', value: { width: parent.aspectWidth, height: parent.aspectHeight } });
+                        parent.currObjType.isUndoAction = bool;
+                    }
+                }
+                var obj1 = { prevCropObj: parent.prevCropObj };
+                var obj2 = { prevObj: parent.prevObj };
+                this.parent.notify('toolbar', { prop: 'getPrevCropObj', onPropertyChange: false, value: { obj: obj1 } });
+                this.parent.notify('toolbar', { prop: 'getPrevObj', onPropertyChange: false, value: { obj: obj2 } });
+                if (obj1['prevCropObj'] && obj2['prevObj']) {
+                    if (!aspectRatioElement) {
+                        parent.objColl = [];
+                        parent.pointColl = [];
+                        parent.freehandCounter = 0;
+                        parent.cropObj = extend({}, obj1['prevCropObj'], {}, true);
+                        this.setCurrentObj(obj2['prevObj']);
+                        parent.objColl = obj2['prevObj']['objColl'];
+                        parent.pointColl = obj2['prevObj']['pointColl'];
+                        parent.freehandCounter = parent.pointColl.length;
+                        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+                        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+                    }
+                    this.parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                        value: { zoomFactor: -this.parent.transform.zoomFactor, zoomPoint: null, isResize: true } });
+                    this.parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                        value: { zoomFactor: obj2['prevObj']['defaultZoom'], zoomPoint: null, isResize: true } });
+                    if (obj2['prevObj'].zoomFactor) {
+                        parent.setProperties({ zoomSettings: { zoomFactor: obj2['prevObj'].zoomFactor } }, true);
+                    }
+                    parent.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
+                        value: { previousZoomValue: parent.zoomSettings.zoomFactor } });
+                }
+                parent.isResize = false;
+            }
+        }
         if (parent.togglePen) {
             this.cancelPen();
         }
@@ -2285,10 +2550,17 @@ var Draw = /** @class */ (function () {
         else {
             var object = { appliedUndoRedoColl: [] };
             parent.notify('undo-redo', { prop: 'getAppliedUndoRedoColl', value: { obj: object } });
-            var len = object['appliedUndoRedoColl'].length;
-            if (this.prevActObj && object['appliedUndoRedoColl'][len - 1] &&
-                object['appliedUndoRedoColl'][len - 1].currentObjColl[object['appliedUndoRedoColl'][len - 1].currentObjColl.length - 1].currIndex
-                    === this.prevActObj.currIndex) {
+            var obj = void 0;
+            for (var i = 0; i < object['appliedUndoRedoColl'].length; i++) {
+                for (var j = 0; j < object['appliedUndoRedoColl'][i].currentObjColl.length; j++) {
+                    if (this.prevActObj && this.prevActObj.currIndex &&
+                        object['appliedUndoRedoColl'][i].currentObjColl[j].currIndex === this.prevActObj.currIndex) {
+                        obj = object['appliedUndoRedoColl'][i].currentObjColl[0];
+                        break;
+                    }
+                }
+            }
+            if (this.prevActObj && obj) {
                 parent.activeObj = this.prevActObj;
                 this.prevActObj = null;
                 parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false, value: { obj: parent.activeObj } });
@@ -2344,6 +2616,7 @@ var Draw = /** @class */ (function () {
     Draw.prototype.select = function (type, startX, startY, width, height) {
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
+            parent.allowDownScale = false;
             var object = { currObj: {} };
             parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
             var previousObj = object['currObj'];
@@ -2355,7 +2628,8 @@ var Draw = /** @class */ (function () {
                 value: { obj: selPointCollObj } });
             previousObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
             parent.notify('crop', { prop: 'setPreviousCropCurrentObj', onPropertyChange: false, value: { obj: previousObj } });
-            if (parent.transform.zoomFactor > 0 && parent.activeObj.shape && parent.activeObj.shape.split('-')[0] === 'crop' && isNullOrUndefined(this.currSelPoint)) {
+            if (parent.transform.zoomFactor > 0 && parent.activeObj.shape &&
+                parent.activeObj.shape.split('-')[0] === 'crop' && isNullOrUndefined(this.currSelPoint)) {
                 this.currSelPoint = extend({}, parent.activeObj, {}, true);
             }
             var isPrevent = false;
@@ -2385,7 +2659,7 @@ var Draw = /** @class */ (function () {
                 (parent.transform.degree !== 0 && parent.panPoint.totalPannedInternalPoint.x !== 0 &&
                     parent.panPoint.totalPannedInternalPoint.y !== 0 && !isPrevent)) {
                 parent.isCircleCrop = false;
-                if (parent.transform.defaultZoomFactor !== 0) {
+                if (parent.transform.defaultZoomFactor !== 0 && !this.isResizeSelect) {
                     var isCropTab = parent.isCropTab;
                     parent.isCropTab = false;
                     parent.notify('transform', { prop: 'resetZoom', onPropertyChange: false });
@@ -2395,7 +2669,9 @@ var Draw = /** @class */ (function () {
                 parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
                 parent.isCropTab = true;
                 parent.isCircleCrop = false;
-                parent.notify('crop', { prop: 'setCurrSelPoints', onPropertyChange: false, value: { isSetDimension: true } });
+                if (!this.isResizeSelect) {
+                    parent.notify('crop', { prop: 'setCurrSelPoints', onPropertyChange: false, value: { isSetDimension: true } });
+                }
                 parent.transform.zoomFactor = parent.transform.cropZoomFactor;
                 if (isNullOrUndefined(parent.cropObj.activeObj.shape)) {
                     parent.currObjType.shape = 'crop-' + type.toLowerCase();
@@ -2589,8 +2865,7 @@ var Draw = /** @class */ (function () {
         if (parent.transform.degree === 0) {
             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);
+        this.drawImage();
         this.updateCurrTransState('reverse');
         if (parent.transform.degree === 0 && parent.rotateFlipColl.length > 0) {
             parent.img.destLeft += parent.panPoint.totalPannedPoint.x;
@@ -2655,16 +2930,15 @@ var Draw = /** @class */ (function () {
             parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
                 value: { context: this.lowerContext, isSave: null, isFlip: null } });
         }
-        var tempFilter = this.lowerContext.filter;
-        this.lowerContext.filter = parent.getDefaultFilter();
-        parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
-        parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
-            value: { context: this.lowerContext, points: null } });
-        this.lowerContext.filter = tempFilter;
     };
     Draw.prototype.setCurrentObj = function (obj) {
         var parent = this.parent;
         var isObj = obj ? true : false;
+        if (!isObj) {
+            parent.cropObj.aspectWidth = parent.aspectWidth;
+            parent.cropObj.aspectHeight = parent.aspectHeight;
+            parent.cropObj.frame = parent.frameObj.type;
+        }
         obj = obj ? obj : parent.cropObj;
         parent.transform.cropZoomFactor = obj.cropZoom;
         parent.transform.defaultZoomFactor = obj.defaultZoom;
@@ -2688,6 +2962,7 @@ var Draw = /** @class */ (function () {
         parent.notify('crop', { prop: 'setTempFlipPanPoint', onPropertyChange: false, value: { point: point } });
         parent.rotateFlipColl = extend([], obj.rotateFlipColl, [], true);
         parent.transform.degree = obj.degree;
+        parent.frameObj.type = obj.frame;
         parent.transform.currFlipState = obj.currFlipState;
         parent.img.destLeft = obj.destPoints.startX;
         parent.img.destTop = obj.destPoints.startY;
@@ -2697,6 +2972,8 @@ var Draw = /** @class */ (function () {
         parent.img.srcTop = obj.srcPoints.startY;
         parent.img.srcWidth = obj.srcPoints.width;
         parent.img.srcHeight = obj.srcPoints.height;
+        parent.aspectWidth = obj.aspectWidth;
+        parent.aspectHeight = obj.aspectHeight;
         if (obj.afterCropActions) {
             parent.afterCropActions = obj.afterCropActions;
         }
@@ -2797,8 +3074,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);
+        this.drawImage();
         if (isObj) {
             this.updateCurrTransState('reverse');
         }
@@ -2822,18 +3098,20 @@ var Draw = /** @class */ (function () {
             parent.img.srcTop = obj.srcPoints.startY;
             parent.img.srcWidth = obj.srcPoints.width;
             parent.img.srcHeight = obj.srcPoints.height;
-            var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
-                height: parent.img.destHeight };
-            parent.img.destLeft = obj.activeObj.activePoint.startX;
-            parent.img.destTop = obj.activeObj.activePoint.startY;
-            parent.img.destWidth = obj.activeObj.activePoint.width;
-            parent.img.destHeight = obj.activeObj.activePoint.height;
-            parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-            parent.img.destLeft = destPoints.startX;
-            parent.img.destTop = destPoints.startY;
-            parent.img.destWidth = destPoints.width;
-            parent.img.destHeight = destPoints.height;
+            if (obj.activeObj.activePoint.width !== 0 && obj.activeObj.activePoint.height !== 0) {
+                var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
+                    height: parent.img.destHeight };
+                parent.img.destLeft = obj.activeObj.activePoint.startX;
+                parent.img.destTop = obj.activeObj.activePoint.startY;
+                parent.img.destWidth = obj.activeObj.activePoint.width;
+                parent.img.destHeight = obj.activeObj.activePoint.height;
+                parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
+                parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+                parent.img.destLeft = destPoints.startX;
+                parent.img.destTop = destPoints.startY;
+                parent.img.destWidth = destPoints.width;
+                parent.img.destHeight = destPoints.height;
+            }
         }
         parent.activeObj = activeObj;
         this.lowerContext.filter = temp;
@@ -2847,11 +3125,11 @@ var Draw = /** @class */ (function () {
         parent.setProperties({ zoomSettings: { zoomPoint: { x: x, y: y } } }, true);
         if (type === 'zoomIn') {
             parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: .1, zoomPoint: null } });
+                value: { zoomFactor: .1, zoomPoint: null }, isResize: null });
         }
         else if (type === 'zoomOut') {
             parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                value: { zoomFactor: -.1, zoomPoint: null } });
+                value: { zoomFactor: -.1, zoomPoint: null }, isResize: null });
         }
         parent.isUndoRedo = isUndoRedo;
         if (parent.transform.zoomFactor > 0) {
@@ -2963,7 +3241,7 @@ var Draw = /** @class */ (function () {
         this.renderImage(true);
         var obj = { width: 0, height: 0 };
         parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-            value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj } });
+            value: { width: parent.img.srcWidth, height: parent.img.srcHeight, obj: obj, isImgShape: null } });
         var maxDimension = obj;
         maxDimension.width += (maxDimension.width * parent.transform.zoomFactor);
         maxDimension.height += (maxDimension.height * parent.transform.zoomFactor);
@@ -3075,11 +3353,19 @@ var Draw = /** @class */ (function () {
         this.isImageEdited = false;
     };
     Draw.prototype.showDialogPopup = function () {
+        var headerObj = { key: 'ConfirmDialogHeader' };
+        this.parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: headerObj } });
+        var contentObj = { key: 'ConfirmDialogContent' };
+        this.parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: contentObj } });
+        var yesObj = { key: 'Yes' };
+        this.parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: yesObj } });
+        var noObj = { key: 'No' };
+        this.parent.notify('toolbar', { prop: 'getLocaleText', onPropertyChange: false, value: { obj: noObj } });
         this.parent.element.querySelector('#' + this.parent.element.id + '_dialog').style.display = 'block';
         var dialog = new Dialog({
-            header: 'Confirm Save Changes',
+            header: headerObj['value'],
             closeOnEscape: true,
-            content: '<span>Do you want to save the changes you made to the image?</span>',
+            content: '<span>' + contentObj['value'] + '</span>',
             target: document.getElementById('target'),
             width: '285px',
             isModal: true,
@@ -3087,10 +3373,10 @@ var Draw = /** @class */ (function () {
             close: this.dlgCloseBtnClick.bind(this),
             buttons: [
                 { click: this.dlgCloseBtnClick.bind(this),
-                    buttonModel: { content: 'No', iconCss: 'e-icons e-close' }
+                    buttonModel: { content: noObj['value'], iconCss: 'e-icons e-close' }
                 },
                 { click: this.dlgBtnClick.bind(this),
-                    buttonModel: { content: 'Yes', isPrimary: true, iconCss: 'e-icons e-check' } }
+                    buttonModel: { content: yesObj['value'], isPrimary: true, iconCss: 'e-icons e-check' } }
             ]
         });
         dialog.appendTo('#' + this.parent.element.id + '_dialog');
@@ -3116,6 +3402,7 @@ var Draw = /** @class */ (function () {
         }
     };
     Draw.prototype.open = function (data) {
+        document.getElementById(this.parent.element.id + '_dropArea').style.display = 'none';
         if (!this.parent.disabled) {
             this.openURL = data;
             this.restoreOldImage();
@@ -3133,11 +3420,20 @@ var Draw = /** @class */ (function () {
     };
     Draw.prototype.fileSelect = function (inputElement, args) {
         var parent = this.parent;
+        document.getElementById(parent.element.id + '_dropArea').style.display = 'none';
         if (!parent.disabled) {
+            var filesData = void 0;
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var filesData = args.target.files[0];
-            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-            var fileData = filesData;
+            var fileData = void 0;
+            if (args.target) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                filesData = args.target.files[0];
+                fileData = filesData;
+            }
+            else {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                filesData = fileData = args.filesData[0].rawFile;
+            }
             var fileExtension = fileData.name && fileData.name.split('.')[1].toLowerCase();
             if (fileExtension && ['jpg', 'jpeg', 'png', 'svg'].indexOf(fileExtension) === -1) {
                 this.errorLoading();
@@ -3169,7 +3465,7 @@ var Draw = /** @class */ (function () {
                     this.showDialogPopup();
                 }
                 else {
-                    parent.dotNetRef.invokeMethodAsync('UpdateDialog');
+                    parent.dotNetRef.invokeMethodAsync('UpdateDialog', true);
                 }
             }
             else {
@@ -3199,6 +3495,9 @@ var Draw = /** @class */ (function () {
                 }
             }
             if (isRotated) {
+                if (parent.transform.degree === 0) {
+                    return;
+                }
                 var zoomFactor = parent.transform.zoomFactor;
                 parent.objColl.push(parent.activeObj);
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
@@ -3211,13 +3510,13 @@ var Draw = /** @class */ (function () {
                                     this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
                                     if (!isNullOrUndefined(zoomFactor)) {
                                         parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                            value: { zoomFactor: -0.1, zoomPoint: null } });
+                                            value: { zoomFactor: -0.1, zoomPoint: null }, isResize: null });
                                     }
                                     break;
                                 }
                                 zoomFactor += 0.1;
                                 parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                    value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                                    value: { zoomFactor: zoomFactor, zoomPoint: null }, isResize: null });
                             }
                         }
                         else {
@@ -3227,13 +3526,13 @@ var Draw = /** @class */ (function () {
                                     this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
                                     if (!isNullOrUndefined(zoomFactor)) {
                                         parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                            value: { zoomFactor: 0.1, zoomPoint: null } });
+                                            value: { zoomFactor: 0.1, zoomPoint: null, isResize: null } });
                                     }
                                     break;
                                 }
                                 zoomFactor -= .1;
                                 parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                    value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                                    value: { zoomFactor: zoomFactor, zoomPoint: null }, isResize: null });
                             }
                         }
                     }
@@ -3245,13 +3544,13 @@ var Draw = /** @class */ (function () {
                                     this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
                                     if (!isNullOrUndefined(zoomFactor)) {
                                         parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                            value: { zoomFactor: -0.1, zoomPoint: null } });
+                                            value: { zoomFactor: -0.1, zoomPoint: null }, isResize: null });
                                     }
                                     break;
                                 }
                                 zoomFactor += 0.1;
                                 parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                    value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                                    value: { zoomFactor: zoomFactor, zoomPoint: null }, isResize: null });
                             }
                         }
                         else {
@@ -3261,13 +3560,13 @@ var Draw = /** @class */ (function () {
                                     this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
                                     if (!isNullOrUndefined(zoomFactor)) {
                                         parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                            value: { zoomFactor: 0.1, zoomPoint: null } });
+                                            value: { zoomFactor: 0.1, zoomPoint: null }, isResize: null });
                                     }
                                     break;
                                 }
                                 zoomFactor -= .1;
                                 parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                    value: { zoomFactor: zoomFactor, zoomPoint: null } });
+                                    value: { zoomFactor: zoomFactor, zoomPoint: null }, isResize: null });
                             }
                         }
                     }
@@ -3312,6 +3611,453 @@ var Draw = /** @class */ (function () {
         }
         return isOutside;
     };
+    Draw.prototype.downScaleImgCanvas = function (ctx, isImgAnnotation, isHFlip, isVFlip) {
+        var parent = this.parent;
+        var canvas = isImgAnnotation ? parent.activeObj.imageCanvas : parent.baseImgCanvas;
+        var img = isImgAnnotation ? parent.activeObj.imageElement : parent.baseImg;
+        var width = isImgAnnotation ? parent.activeObj.activePoint.width : parent.img.destWidth;
+        var height = isImgAnnotation ? parent.activeObj.activePoint.height : parent.img.destHeight;
+        var obj = { width: 0, height: 0 };
+        if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+                value: { width: img.height, height: img.width, obj: obj, isImgShape: isImgAnnotation } });
+        }
+        else {
+            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+                value: { width: img.width, height: img.height, obj: obj, isImgShape: isImgAnnotation } });
+        }
+        if (isImgAnnotation || (parent.allowDownScale && !parent.isCropTab && !parent.isCropToolbar && img.width !== 0 && img.height !== 0
+            && obj['width'] * 0.75 > width && obj['height'] * 0.75 > height)) {
+            var tempCanvas = parent.createElement('canvas', {
+                id: parent.element.id + '_downScaleCanvas', attrs: { name: 'canvasImage' }
+            });
+            tempCanvas.width = isImgAnnotation ? img.width : this.parent.img.srcWidth;
+            tempCanvas.height = isImgAnnotation ? img.height : this.parent.img.srcHeight;
+            if (isImgAnnotation) {
+                tempCanvas.getContext('2d').drawImage(img, 0, 0, tempCanvas.width, tempCanvas.height);
+            }
+            else {
+                tempCanvas.getContext('2d').drawImage(canvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, tempCanvas.width, tempCanvas.height);
+            }
+            this.downScale(tempCanvas, width, height, isImgAnnotation);
+            if (isImgAnnotation) {
+                ctx.canvas.width = tempCanvas.width;
+                ctx.canvas.height = tempCanvas.height;
+                if (isHFlip && isVFlip) {
+                    ctx.translate(parent.activeObj.imageCanvas.width, 0);
+                    ctx.scale(-1, 1);
+                    ctx.translate(0, parent.activeObj.imageCanvas.height);
+                    ctx.scale(1, -1);
+                }
+                else {
+                    if (isHFlip) {
+                        if (isNullOrUndefined(parent.activeObj.isHorImageFlip) || !parent.activeObj.isHorImageFlip) {
+                            parent.activeObj.isHorImageFlip = true;
+                            ctx.translate(parent.activeObj.imageCanvas.width, 0);
+                            ctx.scale(-1, 1);
+                        }
+                        else if (parent.activeObj.isHorImageFlip) {
+                            parent.activeObj.isHorImageFlip = false;
+                        }
+                        if (parent.activeObj.isVerImageFlip) {
+                            ctx.translate(0, parent.activeObj.imageCanvas.height);
+                            ctx.scale(1, -1);
+                        }
+                    }
+                    else if (isVFlip) {
+                        if (isNullOrUndefined(parent.activeObj.isVerImageFlip) || !parent.activeObj.isVerImageFlip) {
+                            parent.activeObj.isVerImageFlip = true;
+                            ctx.translate(0, parent.activeObj.imageCanvas.height);
+                            ctx.scale(1, -1);
+                        }
+                        else if (parent.activeObj.isVerImageFlip) {
+                            parent.activeObj.isVerImageFlip = false;
+                        }
+                        if (parent.activeObj.isHorImageFlip) {
+                            ctx.translate(parent.activeObj.imageCanvas.width, 0);
+                            ctx.scale(-1, 1);
+                        }
+                    }
+                }
+                ctx.drawImage(tempCanvas, 0, 0);
+                ctx.setTransform(1, 0, 0, 1, 0, 0);
+            }
+            else {
+                ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, parent.img.destLeft, parent.img.destTop, tempCanvas.width, tempCanvas.height);
+            }
+        }
+        else {
+            if (isNullOrUndefined(isImgAnnotation) || !isImgAnnotation) {
+                ctx.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);
+            }
+        }
+    };
+    Draw.prototype.downScale = function (canvas, width, height, isImgAnnotation) {
+        var widthSource = canvas.width;
+        var heightSource = canvas.height;
+        width = Math.round(width);
+        height = Math.round(height);
+        var widthRatio = widthSource / width;
+        var heightRatio = heightSource / height;
+        var halfWidthRatio = Math.ceil(widthRatio / 2);
+        var halfHeightRatio = Math.ceil(heightRatio / 2);
+        var ctx = canvas.getContext('2d');
+        var img = ctx.getImageData(0, 0, widthSource, heightSource);
+        var img2 = ctx.createImageData(width, height);
+        var data = img.data;
+        var data2 = img2.data;
+        for (var j = 0; j < height; j++) {
+            for (var i = 0; i < width; i++) {
+                var x2 = (i + j * width) * 4;
+                var weight = 0;
+                var weights = 0;
+                var alphaWeights = 0;
+                var r = 0;
+                var g = 0;
+                var b = 0;
+                var a = 0;
+                var centerY = (j + 0.5) * heightRatio;
+                var startY = Math.floor(j * heightRatio);
+                var stopY = Math.ceil((j + 1) * heightRatio);
+                for (var y = startY; y < stopY; y++) {
+                    var dy = Math.abs(centerY - (y + 0.5)) / halfHeightRatio;
+                    var centerX = (i + 0.5) * widthRatio;
+                    var w0 = dy * dy; //pre-calc part of w
+                    var startX = Math.floor(i * widthRatio);
+                    var stopX = Math.ceil((i + 1) * widthRatio);
+                    for (var x = startX; x < stopX; x++) {
+                        var dx = Math.abs(centerX - (x + 0.5)) / halfWidthRatio;
+                        var w = Math.sqrt(w0 + dx * dx);
+                        if (w >= 1) {
+                            continue;
+                        }
+                        weight = 2 * w * w * w - 3 * w * w + 1;
+                        var xPos = 4 * (x + y * widthSource);
+                        a += weight * data[xPos + 3];
+                        alphaWeights += weight;
+                        weight = weight * data[xPos + 3] / 250;
+                        r += weight * data[xPos];
+                        g += weight * data[xPos + 1];
+                        b += weight * data[xPos + 2];
+                        weights += weight;
+                    }
+                }
+                data2[x2] = r / weights;
+                data2[x2 + 1] = g / weights;
+                data2[x2 + 2] = b / weights;
+                data2[x2 + 3] = a / alphaWeights;
+            }
+        }
+        canvas.width = isImgAnnotation ? this.parent.activeObj.activePoint.width : this.parent.lowerCanvas.width;
+        canvas.height = isImgAnnotation ? this.parent.activeObj.activePoint.height : this.parent.lowerCanvas.height;
+        ctx.putImageData(img2, 0, 0);
+    };
+    Draw.prototype.drawImgToCtx = function (ctx, preventImg) {
+        var parent = this.parent;
+        if (ctx.canvas.id !== parent.element.id + '_tempCanvas' && isNullOrUndefined(preventImg)) {
+            this.downScaleImgCanvas(ctx, null, null, null);
+        }
+    };
+    Draw.prototype.getFrameColor = function (frameObj, ctx, points) {
+        var parent = this.parent;
+        var color = parent.frameObj.color;
+        if (frameObj.gradientColor) {
+            var gradient = ctx.createLinearGradient(points.startX, points.startY, points.startX + points.width, points.startY + points.height);
+            gradient.addColorStop(0, frameObj.color);
+            gradient.addColorStop(1, frameObj.gradientColor);
+            color = gradient;
+        }
+        else {
+            color = frameObj.color;
+        }
+        return color;
+    };
+    Draw.prototype.applyFrame = function (ctx, frame, preventImg) {
+        var parent = this.parent;
+        parent.frameObj.type = frame;
+        var tempLineWidth;
+        var ratio = { width: 1, height: 1 };
+        var points = { startX: parent.img.destLeft - ctx.lineWidth, startY: parent.img.destTop - ctx.lineWidth,
+            width: parent.img.destWidth + (2 * ctx.lineWidth), height: parent.img.destHeight + (2 * ctx.lineWidth) };
+        var frameObj = { type: parent.frameObj.type, color: parent.frameObj.color, size: parent.frameObj.size,
+            inset: parent.frameObj.inset, offset: parent.frameObj.offset / 2, radius: parent.frameObj.radius,
+            amount: parent.frameObj.amount, border: parent.frameObj.border, gradientColor: parent.frameObj.gradientColor };
+        if (ctx.canvas.id === parent.element.id + '_tempCanvas') {
+            var newWidth = void 0;
+            var newHeight = void 0;
+            newWidth = ctx.canvas.width;
+            newHeight = ctx.canvas.height;
+            var obj = { width: 0, height: 0 };
+            parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+                value: { obj: obj, dimension: { width: newWidth, height: newHeight } } });
+            ratio = obj;
+            frameObj.size *= ((ratio.width + ratio.height) / 2);
+            frameObj.inset *= ((ratio.width + ratio.height) / 2);
+            frameObj.offset *= ((ratio.width + ratio.height) / 2);
+            frameObj.radius *= ((ratio.width + ratio.height) / 2);
+            points = { startX: 0, startY: 0, width: ctx.canvas.width, height: ctx.canvas.height };
+        }
+        else if (isNullOrUndefined(preventImg)) {
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+        }
+        var valueForty = (40 * ((ratio.width + ratio.height) / 2));
+        var valueFifty = (50 * ((ratio.width + ratio.height) / 2));
+        frameObj.size += (frameObj.size * parent.transform.zoomFactor);
+        frameObj.inset += (frameObj.inset * parent.transform.zoomFactor);
+        frameObj.offset += (frameObj.offset * parent.transform.zoomFactor);
+        frameObj.radius += (frameObj.radius * parent.transform.zoomFactor);
+        valueForty += (valueForty * parent.transform.zoomFactor);
+        valueFifty += (valueFifty * parent.transform.zoomFactor);
+        var filter = ctx.filter;
+        if ((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) {
+            this.drawImgToCtx(ctx, preventImg);
+        }
+        else {
+            switch (frame) {
+                case 'none':
+                    this.drawImgToCtx(ctx, preventImg);
+                    break;
+                case 'mat':
+                    this.drawImgToCtx(ctx, preventImg);
+                    ctx.filter = 'none';
+                    ctx.fillStyle = this.getFrameColor(frameObj, ctx, points);
+                    ctx.beginPath();
+                    ctx.rect(points.startX, points.startY, points.width, points.height);
+                    ctx.rect(points.startX + frameObj.size, points.startY + frameObj.size, points.width -
+                        (2 * frameObj.size), points.height - (2 * frameObj.size));
+                    ctx.fill('evenodd');
+                    ctx.closePath();
+                    break;
+                case 'bevel':
+                    ctx.filter = 'none';
+                    ctx.fillStyle = this.getFrameColor(frameObj, ctx, points);
+                    ctx.beginPath();
+                    ctx.fillRect(points.startX, points.startY, points.width, points.height);
+                    ctx.closePath();
+                    points.startX += frameObj.size;
+                    points.startY += frameObj.size;
+                    points.width -= (2 * frameObj.size);
+                    points.height -= (2 * frameObj.size);
+                    ctx.fillStyle = this.getFrameColor(frameObj, ctx, points);
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.moveTo(points.startX + valueForty, points.startY);
+                    ctx.lineTo(points.startX + points.width - valueForty, points.startY);
+                    ctx.quadraticCurveTo(points.startX + points.width, points.startY, points.startX + points.width, points.startY + valueForty);
+                    ctx.lineTo(points.startX + points.width, points.startY + points.height - valueForty);
+                    ctx.quadraticCurveTo(points.startX + points.width, points.startY + points.height, points.startX + points.width - valueForty, points.startY + points.height);
+                    ctx.lineTo(points.startX + valueForty, points.startY + points.height);
+                    ctx.quadraticCurveTo(points.startX, points.startY + points.height, points.startX, points.startY + points.height - valueForty);
+                    ctx.lineTo(points.startX, points.startY + valueForty);
+                    ctx.quadraticCurveTo(points.startX, points.startY, points.startX + valueForty, points.startY);
+                    ctx.closePath();
+                    ctx.clip();
+                    ctx.filter = filter === 'none' ? parent.canvasFilter : filter;
+                    if (ctx.canvas.id === parent.element.id + '_tempCanvas') {
+                        if (preventImg) {
+                            preventImg = null;
+                            ctx.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, ctx.canvas.width, ctx.canvas.height);
+                            parent.frameObj.type = 'none';
+                            ctx.filter = 'none';
+                            parent.notify('export', { prop: 'drawAnnotation', onPropertyChange: false,
+                                value: { context: ctx, ratio: ratio } });
+                            parent.frameObj.type = 'bevel';
+                            ctx.filter = filter === 'none' ? parent.canvasFilter : filter;
+                        }
+                        else {
+                            ctx.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, ctx.canvas.width, ctx.canvas.height);
+                        }
+                    }
+                    else {
+                        if (preventImg) {
+                            preventImg = null;
+                            if (parent.transform.zoomFactor !== 0) {
+                                this.isRotateZoom = true;
+                            }
+                            this.updateCurrTransState('initial');
+                            this.drawImgToCtx(ctx, preventImg);
+                            this.updateCurrTransState('reverse');
+                            this.isRotateZoom = false;
+                            parent.frameObj.type = 'none';
+                            ctx.filter = 'none';
+                            parent.notify('shape', { prop: 'iterateObjColl', onPropertyChange: false });
+                            parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
+                                value: { context: ctx, points: null } });
+                            parent.frameObj.type = 'bevel';
+                            ctx.filter = filter === 'none' ? parent.canvasFilter : filter;
+                        }
+                        else {
+                            this.drawImgToCtx(ctx, preventImg);
+                        }
+                    }
+                    ctx.restore();
+                    break;
+                case 'line':
+                    this.drawImgToCtx(ctx, preventImg);
+                    tempLineWidth = ctx.lineWidth;
+                    ctx.lineWidth = frameObj.size / 10;
+                    for (var i = 0; i < parent.frameObj.amount; i++) {
+                        if (i > 0) {
+                            points.startX += frameObj.offset;
+                            points.startY += frameObj.offset;
+                            points.width -= (2 * frameObj.offset);
+                            points.height -= (2 * frameObj.offset);
+                        }
+                        var arcY2 = points.startY + points.height - frameObj.inset - frameObj.radius;
+                        var lineY = points.startY + frameObj.inset + frameObj.radius;
+                        var arcX2 = points.startX + points.width - frameObj.inset - frameObj.radius;
+                        var lineX = points.startX + frameObj.inset + frameObj.radius;
+                        var arcX1 = points.startX + frameObj.inset + frameObj.radius;
+                        var lineX2 = points.startX + points.width - frameObj.inset - frameObj.radius;
+                        var arcY1 = points.startY + frameObj.inset + frameObj.radius;
+                        var lineY2 = points.startY + points.height - frameObj.inset - frameObj.radius;
+                        if (arcY2 >= lineY && arcX2 >= lineX && arcX1 <= lineX2 && arcY1 <= lineY2) {
+                            ctx.filter = 'none';
+                            ctx.strokeStyle = this.getFrameColor(frameObj, ctx, points);
+                            if (frameObj.border === 'dashed') {
+                                ctx.setLineDash([ctx.lineWidth * 2.5, ctx.lineWidth * 1.5]);
+                            }
+                            else if (frameObj.border === 'dotted') {
+                                ctx.setLineDash([ctx.lineWidth, ctx.lineWidth]);
+                            }
+                            ctx.beginPath();
+                            ctx.moveTo(points.startX + frameObj.inset + frameObj.radius, points.startY + frameObj.inset);
+                            ctx.lineTo(points.startX + points.width - frameObj.inset - frameObj.radius, points.startY + frameObj.inset);
+                            ctx.arcTo(points.startX + points.width - frameObj.inset, points.startY + frameObj.inset, points.startX + points.width - frameObj.inset, points.startY + frameObj.inset + frameObj.radius, frameObj.radius);
+                            ctx.lineTo(points.startX + points.width - frameObj.inset, points.startY + points.height - frameObj.inset -
+                                frameObj.radius);
+                            ctx.arcTo(points.startX + points.width - frameObj.inset, points.startY + points.height - frameObj.inset, points.startX + points.width - frameObj.inset - frameObj.radius, points.startY + points.height
+                                - frameObj.inset, frameObj.radius);
+                            ctx.lineTo(points.startX + frameObj.inset + frameObj.radius, points.startY + points.height - frameObj.inset);
+                            ctx.arcTo(points.startX + frameObj.inset, points.startY + points.height - frameObj.inset, points.startX + frameObj.inset, points.startY + points.height - frameObj.inset - frameObj.radius, frameObj.radius);
+                            ctx.lineTo(points.startX + frameObj.inset, points.startY + frameObj.inset + frameObj.radius);
+                            ctx.arcTo(points.startX + frameObj.inset, points.startY + frameObj.inset, points.startX + frameObj.inset + frameObj.radius, points.startY + frameObj.inset, frameObj.radius);
+                            ctx.closePath();
+                            ctx.stroke();
+                            ctx.setLineDash([]);
+                        }
+                    }
+                    ctx.lineWidth = tempLineWidth;
+                    break;
+                case 'inset':
+                    this.drawImgToCtx(ctx, preventImg);
+                    ctx.filter = 'none';
+                    ctx.strokeStyle = this.getFrameColor(frameObj, ctx, points);
+                    tempLineWidth = ctx.lineWidth;
+                    ctx.lineWidth = frameObj.size / 10;
+                    ctx.beginPath();
+                    ctx.moveTo(points.startX + frameObj.offset, points.startY + frameObj.inset);
+                    ctx.lineTo(points.startX + points.width - frameObj.offset, points.startY + frameObj.inset);
+                    ctx.moveTo(points.startX + points.width - frameObj.inset, points.startY + frameObj.offset);
+                    ctx.lineTo(points.startX + points.width - frameObj.inset, points.startY + points.height - frameObj.offset);
+                    ctx.moveTo(points.startX + points.width - frameObj.offset, points.startY + points.height - frameObj.inset);
+                    ctx.lineTo(points.startX + frameObj.offset, points.startY + points.height - frameObj.inset);
+                    ctx.moveTo(points.startX + frameObj.inset, points.startY + points.height - frameObj.offset);
+                    ctx.lineTo(points.startX + frameObj.inset, points.startY + frameObj.offset);
+                    ctx.stroke();
+                    ctx.closePath();
+                    ctx.lineWidth = tempLineWidth;
+                    break;
+                case 'hook':
+                    this.drawImgToCtx(ctx, preventImg);
+                    ctx.filter = 'none';
+                    ctx.strokeStyle = this.getFrameColor(frameObj, ctx, points);
+                    tempLineWidth = ctx.lineWidth;
+                    ctx.lineWidth = frameObj.size / 10;
+                    ctx.beginPath();
+                    ctx.moveTo(points.startX + frameObj.inset + valueFifty, points.startY + frameObj.inset);
+                    ctx.lineTo(points.startX + frameObj.inset, points.startY + frameObj.inset);
+                    ctx.lineTo(points.startX + frameObj.inset, points.startY + frameObj.inset + valueFifty);
+                    ctx.moveTo(points.startX + points.width - frameObj.inset - valueFifty, points.startY + frameObj.inset);
+                    ctx.lineTo(points.startX + points.width - frameObj.inset, points.startY + frameObj.inset);
+                    ctx.lineTo(points.startX + points.width - frameObj.inset, points.startY + frameObj.inset + valueFifty);
+                    ctx.moveTo(points.startX + points.width - frameObj.inset - valueFifty, points.startY + points.height - frameObj.inset);
+                    ctx.lineTo(points.startX + points.width - frameObj.inset, points.startY + points.height - frameObj.inset);
+                    ctx.lineTo(points.startX + points.width - frameObj.inset, points.startY + points.height - frameObj.inset - valueFifty);
+                    ctx.moveTo(points.startX + frameObj.inset + valueFifty, points.startY + points.height - frameObj.inset);
+                    ctx.lineTo(points.startX + frameObj.inset, points.startY + points.height - frameObj.inset);
+                    ctx.lineTo(points.startX + frameObj.inset, points.startY + points.height - frameObj.inset - valueFifty);
+                    ctx.stroke();
+                    ctx.lineWidth = tempLineWidth;
+                    break;
+            }
+            if (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
+                parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
+                    value: { context: ctx, isSave: ctx.canvas.id === parent.element.id + '_tempCanvas' ? true : null, isFlip: null } });
+            }
+            ctx.filter = filter;
+        }
+    };
+    Draw.prototype.triggerFrameChange = function (prevFrameSettings) {
+        var _this = this;
+        var parent = this.parent;
+        var currFrameSettings = { type: parent.toPascalCase(parent.frameObj.type), color: parent.frameObj.color,
+            gradientColor: parent.frameObj.gradientColor, size: parent.frameObj.size, inset: parent.frameObj.inset,
+            offset: parent.frameObj.offset, borderRadius: parent.frameObj.radius, frameLineStyle: parent.toPascalCase(parent.frameObj.border),
+            lineCount: parent.frameObj.amount };
+        var frameChange = { cancel: false, previousFrameSetting: prevFrameSettings, currentFrameSetting: currFrameSettings };
+        if (isBlazor()) {
+            if (parent.events && parent.events.frameChanging.hasDelegate === true) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                parent.dotNetRef.invokeMethodAsync('OnFrameChangingAsync', frameChange).then(function (args) {
+                    if (!args.cancel) {
+                        _this.setFrameObj(args.currentFrameSetting);
+                        var obj = { currObj: {} };
+                        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: obj } });
+                        parent.notify('undo-redo', { prop: 'updateUndoRedoColl', onPropertyChange: false, value: {
+                                operation: 'frame', previousObj: obj['currObj'], previousObjColl: obj['currObj']['objColl'],
+                                previousPointColl: obj['currObj']['pointColl'], previousSelPointColl: obj['currObj']['selPointColl'],
+                                previousCropObj: extend({}, parent.cropObj, {}, true), previousText: null, currentText: null,
+                                previousFilter: null, isCircleCrop: null
+                            } });
+                        var fillColorDiv = parent.element.querySelector('.e-ie-toolbar-e-frame-color');
+                        if (fillColorDiv) {
+                            parent.element.querySelector('.e-ie-toolbar-e-frame-color' + parent.DDBPREVIEW).style.background = parent.frameObj.color;
+                        }
+                        var graColorDiv = parent.element.querySelector('.e-ie-toolbar-e-frame-gradient');
+                        if (graColorDiv) {
+                            var noColorDiv = document.querySelector('.e-dropdown-popup.e-frame-gradient-dd-btn');
+                            if (noColorDiv) {
+                                noColorDiv.querySelector('.e-nocolor-item').classList.remove('e-selected');
+                            }
+                            parent.element.querySelector('.e-ie-toolbar-e-frame-gradient' + parent.DDBPREVIEW).classList.remove('e-nocolor-item');
+                            if (parent.frameObj.gradientColor == '') {
+                                parent.element.querySelector('.e-ie-toolbar-e-frame-gradient' + parent.DDBPREVIEW).classList.add('e-nocolor-item');
+                            }
+                            else {
+                                parent.element.querySelector('.e-ie-toolbar-e-frame-gradient' + parent.DDBPREVIEW).style.background = parent.frameObj.gradientColor;
+                            }
+                        }
+                        parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
+                    }
+                });
+            }
+            else {
+                if (!frameChange.cancel) {
+                    this.setFrameObj(frameChange.currentFrameSetting);
+                }
+            }
+        }
+        else {
+            parent.trigger('frameChange', frameChange);
+            if (!frameChange.cancel) {
+                this.setFrameObj(frameChange.currentFrameSetting);
+            }
+        }
+        return frameChange;
+    };
+    Draw.prototype.setFrameObj = function (currFrameSettings) {
+        var parent = this.parent;
+        parent.frameObj.type = currFrameSettings.type.toLowerCase();
+        parent.frameObj.color = currFrameSettings.color;
+        parent.frameObj.gradientColor = currFrameSettings.gradientColor;
+        parent.frameObj.size = currFrameSettings.size;
+        parent.frameObj.inset = currFrameSettings.inset;
+        parent.frameObj.offset = currFrameSettings.offset;
+        parent.frameObj.radius = currFrameSettings.borderRadius;
+        parent.frameObj.border = currFrameSettings.frameLineStyle.toLowerCase();
+        parent.frameObj.amount = currFrameSettings.lineCount;
+    };
     return Draw;
 }());
 export { Draw };