@syncfusion/ej2-image-editor 22.1.36 → 22.1.38

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

@@ -46,7 +46,7 @@ var Crop = /** @__PURE__ @class */ (function () {
                 this.crop(args.value['obj']);
                 break;
             case 'calcRatio':
-                this.calcRatio(args.value['obj']);
+                this.calcRatio(args.value['obj'], args.value['dimension']);
                 break;
             case 'isObjInImage':
                 this.isObjInImage(args.value['obj'], args.value['object']);
@@ -192,112 +192,74 @@ var Crop = /** @__PURE__ @class */ (function () {
     Crop.prototype.rotateCrop = function () {
         var parent = this.parent;
         var shape = parent.activeObj.shape || '';
-        var tempDegree = parent.transform.degree;
         parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
         parent.currSelectionPoint = extend({}, parent.activeObj, {}, true);
         parent.objColl.push(parent.activeObj);
         parent.activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
-        this.lowerContext.setTransform(1, 0, 0, 1, 0, 0);
-        parent.notify('draw', { prop: 'setClientTransDim', onPropertyChange: false,
-            value: { isPreventDimension: null } });
-        this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
-        parent.transform.degree = 0;
-        var temp = this.lowerContext.filter;
-        parent.notify('finetune', { 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;
-        var length = 0;
-        if (tempDegree === 90 || tempDegree === -270) {
-            length = 3;
-        }
-        else if (tempDegree === 180 || tempDegree === -180) {
-            length = 2;
-        }
-        else if (tempDegree === 270 || tempDegree === -90) {
-            length = 1;
-        }
-        for (var i = 0; i < length; i++) {
-            parent.notify('shape', { prop: 'rotateObjColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'rotateFhdColl', onPropertyChange: false });
-        }
         var activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
-        if (parent.transform.currFlipState !== '') {
-            for (var i = 0, len = parent.objColl.length; i < len; i++) {
-                parent.objColl[i].shapeFlip = '';
-            }
-            for (var i = 0; i < parent.freehandCounter; i++) {
-                parent.pointColl[i].shapeFlip = '';
-            }
-            parent.transform.degree = tempDegree;
-            var flipState = this.getCurrCropState('initial');
-            parent.transform.degree = 0;
-            parent.notify('shape', { prop: 'redrawObj', onPropertyChange: false, value: { degree: flipState } });
-            parent.notify('freehand-draw', { prop: 'flipFHDColl', onPropertyChange: false,
-                value: { value: flipState } });
-        }
-        parent.notify('shape', { prop: 'zoomObjColl', onPropertyChange: false, value: { isPreventApply: null } });
-        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
+        var tempCurrSelObj = extend({}, parent.currSelectionPoint, {}, true);
+        var preventSelObj = { bool: null };
+        parent.notify('transform', { prop: 'getPreventSelect', onPropertyChange: false, value: { obj: preventSelObj } });
+        parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: { bool: true } });
+        var coll = extend([], parent.rotateFlipColl, [], true);
+        this.panToSelRangle(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);
         parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate', obj: activeObj } });
         parent.objColl.pop();
         parent.transform.degree = 0;
         this.cropImg(true);
-        parent.notify('transform', { prop: 'setReverseRotate', onPropertyChange: false, value: { bool: true } });
-        this.lowerContext.setTransform(1, 0, 0, 1, 0, 0);
-        parent.transform.degree = tempDegree;
-        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 });
-        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: 'currTransState', onPropertyChange: false,
-            value: { type: 'reverse', isPreventDestination: null, context: null, isPreventCircleCrop: null } });
-        length = 0;
-        if (tempDegree === 90 || tempDegree === -270) {
-            length = 1;
-        }
-        else if (tempDegree === 180 || tempDegree === -180) {
-            length = 2;
-        }
-        else if (tempDegree === 270 || tempDegree === -90) {
-            length = 3;
+        this.revertTransform('reverse', coll);
+        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 } });
+        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
+        if (shape === 'crop-circle') {
+            this.cropCircle(this.lowerContext);
         }
-        for (var i = 0; i < length; i++) {
-            parent.notify('shape', { prop: 'rotateObjColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'rotateFhdColl', onPropertyChange: false });
+        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
+        parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false });
+    };
+    Crop.prototype.revertTransform = function (type, coll) {
+        var parent = this.parent;
+        var obj = { isRotate: false };
+        if (type === 'initial') {
+            for (var i = coll.length - 1; i >= 0; i--) {
+                switch (coll[i]) {
+                    case 90:
+                        parent.notify('transform', { prop: 'rotate', value: { degree: -90, obj: obj } });
+                        break;
+                    case -90:
+                        parent.notify('transform', { prop: 'rotate', value: { degree: 90, obj: obj } });
+                        break;
+                    default:
+                        parent.notify('transform', { prop: 'flipImage', value: { direction: parent.toPascalCase(coll[i]) } });
+                        break;
+                }
+            }
         }
-        if (this.getCurrFlipState() !== '') {
+        else {
             for (var i = 0, len = parent.objColl.length; i < len; i++) {
                 parent.objColl[i].shapeFlip = '';
             }
             for (var i = 0; i < parent.freehandCounter; i++) {
                 parent.pointColl[i].shapeFlip = '';
             }
-            var flipState = this.getCurrCropState('reverse');
-            parent.notify('shape', { prop: 'redrawObj', onPropertyChange: false, value: { degree: flipState } });
-            parent.notify('freehand-draw', { prop: 'flipFHDColl', onPropertyChange: false,
-                value: { value: flipState } });
-        }
-        parent.notify('transform', { prop: 'setReverseRotate', onPropertyChange: false, value: { bool: false } });
-        this.lowerContext.filter = 'none';
-        for (var i = 0, len = parent.objColl.length; i < len; i++) {
-            if (this.isObjInImage(parent.objColl[i])) {
-                parent.notify('shape', { prop: 'apply', onPropertyChange: false,
-                    value: { shape: parent.objColl[i].shape, obj: parent.objColl[i], canvas: null } });
-                parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            for (var i = 0, len = coll.length; i < len; i++) {
+                switch (coll[i]) {
+                    case 90:
+                        parent.notify('transform', { prop: 'rotate', value: { degree: 90, obj: obj } });
+                        break;
+                    case -90:
+                        parent.notify('transform', { prop: 'rotate', value: { degree: -90, obj: obj } });
+                        break;
+                    default:
+                        parent.notify('transform', { prop: 'flipImage', value: { direction: parent.toPascalCase(coll[i]) } });
+                        break;
+                }
             }
         }
-        parent.notify('freehand-draw', { prop: 'zoomFHDColl', onPropertyChange: false, value: { isPreventApply: null } });
-        this.lowerContext.filter = temp;
-        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
-        parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.upperContext } });
-        if (shape === 'crop-circle') {
-            this.cropCircle(this.lowerContext);
-        }
-        this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
-        parent.notify('draw', { prop: 'resetPanPoints', onPropertyChange: false });
     };
     Crop.prototype.flipCrop = function () {
         var parent = this.parent;
@@ -498,6 +460,15 @@ var Crop = /** @__PURE__ @class */ (function () {
         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);
         parent.notify('draw', { prop: 'currTransState', onPropertyChange: false,
             value: { type: 'reverse', isPreventDestination: null, context: null, isPreventCircleCrop: true } });
+        var cropObjColl = extend([], parent.objColl, null, true);
+        var cropPointColl = extend([], parent.pointColl, null, true);
+        parent.objColl = [];
+        parent.pointColl = [];
+        parent.freehandCounter = 0;
+        this.panToSelRangle();
+        parent.objColl = cropObjColl;
+        parent.pointColl = cropPointColl;
+        parent.freehandCounter = parent.pointColl.length;
         if (parent.cropObj.activeObj.shape) {
             var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
                 height: parent.img.destHeight };
@@ -514,8 +485,8 @@ var Crop = /** @__PURE__ @class */ (function () {
             parent.img.destWidth = destPoints.width;
             parent.img.destHeight = destPoints.height;
             parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
-            var cropObjColl = extend([], parent.objColl, null, true);
-            var cropPointColl = extend([], parent.pointColl, null, true);
+            cropObjColl = extend([], parent.objColl, null, true);
+            cropPointColl = extend([], parent.pointColl, null, true);
             parent.objColl = [];
             parent.pointColl = [];
             parent.freehandCounter = 0;
@@ -526,9 +497,12 @@ var Crop = /** @__PURE__ @class */ (function () {
             parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                 value: { obj: { selPointColl: [] } } });
             parent.cropObj.filter = this.lowerContext.filter;
+            var actObj = extend({}, parent.currSelectionPoint, null, true);
             parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: null } });
+            parent.activeObj = extend({}, actObj, null, true);
             var activeObj = extend({}, parent.activeObj, null, true);
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
+            this.panToSelRangle();
             parent.objColl = cropObjColl;
             parent.pointColl = cropPointColl;
             parent.freehandCounter = parent.pointColl.length;
@@ -560,6 +534,25 @@ var Crop = /** @__PURE__ @class */ (function () {
             parent.currSelectionPoint = null;
         }
     };
+    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 {
+            parent.panPoint.currentPannedPoint = { x: panX, y: panY };
+            parent.notify('transform', { prop: 'drawPannedImage', value: { xDiff: panX, yDiff: panY } });
+            parent.panPoint.currentPannedPoint = { x: 0, y: 0 };
+        }
+    };
     Crop.prototype.cropCircle = function (context, isSave, isFlip) {
         var parent = this.parent;
         if (isFlip && parent.transform.currFlipState !== '') {
@@ -568,9 +561,9 @@ var Crop = /** @__PURE__ @class */ (function () {
         }
         context.globalCompositeOperation = 'destination-in';
         context.beginPath();
-        var centerX = isNullOrUndefined(isSave) ? parent.img.destLeft + (parent.img.destWidth / 2) : parent.img.destWidth / 2;
-        var centerY = isNullOrUndefined(isSave) ? parent.img.destTop + (parent.img.destHeight / 2) : parent.img.destHeight / 2;
-        var radius = parent.img.destWidth / 2;
+        var centerX = isNullOrUndefined(isSave) ? parent.img.destLeft + (parent.img.destWidth / 2) : context.canvas.width / 2;
+        var centerY = isNullOrUndefined(isSave) ? parent.img.destTop + (parent.img.destHeight / 2) : context.canvas.height / 2;
+        var radius = isSave ? context.canvas.width / 2 : parent.img.destWidth / 2;
         context.arc(centerX, centerY, radius, 0, Math.PI * 2);
         context.closePath();
         context.fill();
@@ -749,7 +742,6 @@ var Crop = /** @__PURE__ @class */ (function () {
                 }
                 this.cropImg();
                 parent.transform.zoomFactor = 0;
-                parent.zoomSettings.zoomFactor = 1;
                 parent.setProperties({ zoomSettings: { zoomFactor: 1 } }, true);
                 parent.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
                     value: { previousZoomValue: parent.zoomSettings.zoomFactor } });
@@ -775,17 +767,17 @@ var Crop = /** @__PURE__ @class */ (function () {
             }
         }
     };
-    Crop.prototype.calcRatio = function (obj) {
+    Crop.prototype.calcRatio = function (obj, dimension) {
         var parent = this.parent;
         var widthRatio;
         var heightRatio;
         if (parent.transform.degree === 0 || parent.transform.degree % 180 === 0) {
-            widthRatio = parent.baseImg.width / parent.img.destWidth;
-            heightRatio = parent.baseImg.height / parent.img.destHeight;
+            widthRatio = (dimension ? dimension.width : parent.baseImg.width) / parent.img.destWidth;
+            heightRatio = (dimension ? dimension.height : parent.baseImg.height) / parent.img.destHeight;
         }
         else {
-            widthRatio = parent.baseImg.height / parent.img.destWidth;
-            heightRatio = parent.baseImg.width / parent.img.destHeight;
+            widthRatio = (dimension ? dimension.height : parent.baseImg.height) / parent.img.destWidth;
+            heightRatio = (dimension ? dimension.width : parent.baseImg.width) / parent.img.destHeight;
         }
         if (obj) {
             obj['width'] = widthRatio;
@@ -1118,6 +1110,10 @@ var Draw = /** @__PURE__ @class */ (function () {
             parent.activeObj = extend({}, obj, {}, true);
         }
         this.updateActiveObject();
+        if (isNullOrUndefined(parent.activeObj.activePoint.startX) &&
+            isNullOrUndefined(parent.activeObj.activePoint.startY)) {
+            return;
+        }
         if (parent.currObjType.isText) {
             var obj_2 = { keyHistory: '' };
             parent.notify('shape', { prop: 'getKeyHistory', onPropertyChange: false, value: { obj: obj_2 } });
@@ -1788,12 +1784,14 @@ var Draw = /** @__PURE__ @class */ (function () {
         if (degree < 0) {
             degree = 360 + degree;
         }
-        for (var i = 0, len = parent.activeObj.flipObjColl.length; i < len; i++) {
-            if (parent.activeObj.flipObjColl[i].toLowerCase() === 'horizontal') {
-                isHorizontalflip = true;
-            }
-            else if (parent.activeObj.flipObjColl[i].toLowerCase() === 'vertical') {
-                isVerticalflip = true;
+        if (parent.activeObj.flipObjColl) {
+            for (var i = 0, len = parent.activeObj.flipObjColl.length; i < len; i++) {
+                if (parent.activeObj.flipObjColl[i].toLowerCase() === 'horizontal') {
+                    isHorizontalflip = true;
+                }
+                else if (parent.activeObj.flipObjColl[i].toLowerCase() === 'vertical') {
+                    isVerticalflip = true;
+                }
             }
         }
         switch (degree) {
@@ -2372,17 +2370,18 @@ var Draw = /** @__PURE__ @class */ (function () {
                 parent.activeObj.textSettings.fontFamily;
             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);
-                    this.updateActPoint('horizontal', canvasDraw);
+                    actPoint = this.updateActPoint('horizontal', canvasDraw);
                 }
                 else if (parent.activeObj.flipObjColl[j].toLowerCase() === 'vertical') {
                     canvasDraw.translate(0, canvasDraw.canvas.height);
                     canvasDraw.scale(1, -1);
-                    this.updateActPoint('vertical', canvasDraw);
+                    actPoint = this.updateActPoint('vertical', canvasDraw);
                 }
             }
             if (parent.activeObj.shapeDegree !== parent.transform.degree) {
@@ -2395,12 +2394,12 @@ var Draw = /** @__PURE__ @class */ (function () {
                 if (parent.activeObj.flipObjColl[k].toLowerCase() === 'horizontal') {
                     canvasDraw.translate(canvasDraw.canvas.width, 0);
                     canvasDraw.scale(-1, 1);
-                    this.updateActPoint('horizontal', canvasDraw);
+                    actPoint = this.updateActPoint('horizontal', canvasDraw);
                 }
                 else if (parent.activeObj.flipObjColl[k].toLowerCase() === 'vertical') {
                     canvasDraw.translate(0, canvasDraw.canvas.height);
                     canvasDraw.scale(1, -1);
-                    this.updateActPoint('vertical', canvasDraw);
+                    actPoint = this.updateActPoint('vertical', canvasDraw);
                 }
             }
         }
@@ -2436,6 +2435,7 @@ var Draw = /** @__PURE__ @class */ (function () {
                 this.updateActiveObject(actPoint, parent.activeObj);
             }
         }
+        return actPoint;
     };
     Draw.prototype.rotateText = function (canvasDraw) {
         var parent = this.parent;
@@ -2449,6 +2449,9 @@ var Draw = /** @__PURE__ @class */ (function () {
         else {
             degree = parent.transform.degree - parent.activeObj.shapeDegree;
         }
+        if (degree === -450) {
+            degree = -90;
+        }
         if (degree < 0) {
             degree = 360 + degree;
         }
@@ -3774,11 +3777,8 @@ var Draw = /** @__PURE__ @class */ (function () {
             }
         }
         else {
-            if (parent.element.querySelector('#' + parent.element.id + '_toolbar')) {
-                parent.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbar').clientHeight;
-            }
-            else {
-                parent.toolbarHeight = 0;
+            if (parent.element.querySelector('#' + parent.element.id + '_toolbarArea')) {
+                parent.toolbarHeight = parent.element.querySelector('#' + parent.element.id + '_toolbarArea').clientHeight;
             }
         }
         parent.reset();
@@ -3821,8 +3821,8 @@ var Draw = /** @__PURE__ @class */ (function () {
             parent.clearContext(this.lowerContext);
             parent.clearContext(this.upperContext);
             parent.clearContext(inMemoryContext);
-            parent.inMemoryCanvas.width = parent.baseImg.width = this.openURL.width;
-            parent.inMemoryCanvas.height = parent.baseImg.height = this.openURL.height;
+            parent.inMemoryCanvas.width = this.openURL.width;
+            parent.inMemoryCanvas.height = this.openURL.height;
             inMemoryContext.putImageData(this.openURL, 0, 0);
             parent.baseImg.src = parent.inMemoryCanvas.toDataURL();
         }
@@ -3978,75 +3978,84 @@ var Draw = /** @__PURE__ @class */ (function () {
     Draw.prototype.moveToSelectionRange = function (type, activeObj) {
         var parent = this.parent;
         if (parent.activeObj.shape) {
-            if (type === 'rotateleft' || type === 'rotateright') {
+            var isRotated = false;
+            for (var i = 0; i < parent.rotateFlipColl.length; i++) {
+                if (parent.rotateFlipColl[i] === 90 || parent.rotateFlipColl[i] === -90) {
+                    isRotated = true;
+                    break;
+                }
+            }
+            if (isRotated) {
                 var zoomFactor = parent.transform.zoomFactor;
                 parent.objColl.push(parent.activeObj);
                 parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
-                if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
-                    if (parent.objColl[parent.objColl.length - 1].activePoint.width < activeObj.activePoint.height) {
-                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
-                            if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
-                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: -0.1, zoomPoint: null } });
+                if (type === 'rotateleft' || type === 'rotateright') {
+                    if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
+                        if (parent.objColl[parent.objColl.length - 1].activePoint.width < activeObj.activePoint.height) {
+                            for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                                if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
+                                    this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                    this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                    if (!isNullOrUndefined(zoomFactor)) {
+                                        parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                            value: { zoomFactor: -0.1, zoomPoint: null } });
+                                    }
+                                    break;
                                 }
-                                break;
+                                zoomFactor += 0.1;
+                                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                    value: { zoomFactor: zoomFactor, zoomPoint: null } });
                             }
-                            zoomFactor += 0.1;
-                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
                         }
-                    }
-                    else {
-                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
-                            if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
-                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: 0.1, zoomPoint: null } });
+                        else {
+                            for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                                if (parent.objColl[parent.objColl.length - 1].activePoint.width >= activeObj.activePoint.height ||
+                                    this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                    this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                    if (!isNullOrUndefined(zoomFactor)) {
+                                        parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                            value: { zoomFactor: 0.1, zoomPoint: null } });
+                                    }
+                                    break;
                                 }
-                                break;
+                                zoomFactor -= .1;
+                                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                    value: { zoomFactor: zoomFactor, zoomPoint: null } });
                             }
-                            zoomFactor -= .1;
-                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
                         }
                     }
-                }
-                else {
-                    if (parent.objColl[parent.objColl.length - 1].activePoint.height < activeObj.activePoint.width) {
-                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
-                            if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
-                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: -0.1, zoomPoint: null } });
+                    else {
+                        if (parent.objColl[parent.objColl.length - 1].activePoint.height < activeObj.activePoint.width) {
+                            for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                                if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
+                                    this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                    this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                    if (!isNullOrUndefined(zoomFactor)) {
+                                        parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                            value: { zoomFactor: -0.1, zoomPoint: null } });
+                                    }
+                                    break;
                                 }
-                                break;
+                                zoomFactor += 0.1;
+                                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                    value: { zoomFactor: zoomFactor, zoomPoint: null } });
                             }
-                            zoomFactor += 0.1;
-                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
                         }
-                    }
-                    else {
-                        for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
-                            if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
-                                this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
-                                this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
-                                if (!isNullOrUndefined(zoomFactor)) {
-                                    parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                        value: { zoomFactor: 0.1, zoomPoint: null } });
+                        else {
+                            for (var i = 2; i < parent.zoomSettings.maxZoomFactor; i++) {
+                                if (parent.objColl[parent.objColl.length - 1].activePoint.height >= activeObj.activePoint.width ||
+                                    this.isSelectionBiggerThanCanvas(parent.objColl[parent.objColl.length - 1]) ||
+                                    this.isSelectionOutsideCanvas(parent.objColl[parent.objColl.length - 1])) {
+                                    if (!isNullOrUndefined(zoomFactor)) {
+                                        parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                            value: { zoomFactor: 0.1, zoomPoint: null } });
+                                    }
+                                    break;
                                 }
-                                break;
+                                zoomFactor -= .1;
+                                parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
+                                    value: { zoomFactor: zoomFactor, zoomPoint: null } });
                             }
-                            zoomFactor -= .1;
-                            parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
-                                value: { zoomFactor: zoomFactor, zoomPoint: null } });
                         }
                     }
                 }
@@ -4256,8 +4265,19 @@ var Export = /** @__PURE__ @class */ (function () {
     };
     Export.prototype.exportToCanvas = function (object) {
         var parent = this.parent;
+        var width;
+        var height;
+        if (parent.currSelectionPoint) {
+            width = parent.img.srcWidth;
+            height = parent.img.srcHeight;
+        }
+        else {
+            width = parent.baseImg.width;
+            height = parent.baseImg.height;
+        }
         var obj = { width: 0, height: 0 };
-        parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false, value: { obj: obj } });
+        parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
+            value: { obj: obj, dimension: { width: width, height: height } } });
         var ratio = obj;
         var tempContextFilter = this.lowerContext.filter;
         // Manipulating blur value
@@ -4268,42 +4288,30 @@ var Export = /** @__PURE__ @class */ (function () {
             splitWords[5] = 'blur(' + value + 'px)';
             this.lowerContext.filter = splitWords.join(' ');
         }
-        var maxDimension;
         var tempCanvas = parent.createElement('canvas', {
             id: parent.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
         });
         var tempContext = tempCanvas.getContext('2d');
         tempContext.filter = this.lowerContext.filter;
-        if (parent.currSelectionPoint) {
-            tempCanvas.width = parent.img.destWidth;
-            tempCanvas.height = parent.img.destHeight;
-            tempContext.filter = this.lowerContext.filter;
-            var temp = this.lowerContext.filter;
-            parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
-            tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, parent.img.destWidth, parent.img.destHeight);
-            this.lowerContext.filter = temp;
-        }
-        else {
-            tempCanvas.width = parent.baseImg.width;
-            tempCanvas.height = parent.baseImg.height;
-            var obj_2 = { width: 0, height: 0 };
-            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-                value: { width: parent.baseImg.width, height: parent.baseImg.height, obj: obj_2 } });
-            maxDimension = obj_2;
-            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.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, parent.baseImg.width, parent.baseImg.height);
-            this.lowerContext.filter = temp;
-        }
+        tempCanvas.width = width;
+        tempCanvas.height = height;
+        var dimObj = { width: 0, height: 0 };
+        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: width, height: height, obj: dimObj } });
+        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.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 !== '') {
             this.updateSaveContext(tempContext);
             this.exportTransformedImage(tempContext);
         }
         if (parent.objColl.length > 0) {
-            var temp = tempContext.filter;
+            var temp_1 = tempContext.filter;
             tempContext.filter = 'none';
             var tempObjColl = extend([], parent.objColl, [], true);
             for (var i = 0, len = parent.objColl.length; i < len; i++) {
@@ -4316,22 +4324,20 @@ var Export = /** @__PURE__ @class */ (function () {
                 activePoint.width = activePoint.endX - activePoint.startX;
                 activePoint.height = activePoint.endY - activePoint.startY;
                 // Manipulating points
-                if (isNullOrUndefined(parent.currSelectionPoint)) {
-                    activePoint.startX *= ratio.width;
-                    activePoint.startY *= ratio.height;
-                    activePoint.endX *= ratio.width;
-                    activePoint.endY *= ratio.height;
-                    activePoint.width = activePoint.endX - activePoint.startX;
-                    activePoint.height = activePoint.endY - activePoint.startY;
-                    parent.objColl[i].strokeSettings.strokeWidth *= ((ratio.width + ratio.height) / 2);
-                    if (parent.objColl[i].shape === 'text') {
-                        parent.objColl[i].textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
-                    }
+                activePoint.startX *= ratio.width;
+                activePoint.startY *= ratio.height;
+                activePoint.endX *= ratio.width;
+                activePoint.endY *= ratio.height;
+                activePoint.width = activePoint.endX - activePoint.startX;
+                activePoint.height = activePoint.endY - activePoint.startY;
+                parent.objColl[i].strokeSettings.strokeWidth *= ((ratio.width + ratio.height) / 2);
+                if (parent.objColl[i].shape === 'text') {
+                    parent.objColl[i].textSettings.fontSize *= ((ratio.width + ratio.height) / 2);
                 }
                 parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'saveContext', obj: parent.objColl[i], isCropRatio: null,
                         points: null, isPreventDrag: true, saveContext: tempContext, isPreventSelection: null } });
             }
-            tempContext.filter = temp;
+            tempContext.filter = temp_1;
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             parent.objColl = tempObjColl;
         }
@@ -4342,18 +4348,10 @@ var Export = /** @__PURE__ @class */ (function () {
                 parent.points = extend([], parent.pointColl[n].points, []);
                 parent.notify('freehand-draw', { prop: 'setPointCounter', onPropertyChange: false, value: { value: 0 } });
                 var len = parent.points.length;
-                if (parent.currSelectionPoint) {
-                    for (var l = 0; l < len; l++) {
-                        parent.points[l].x -= parent.img.destLeft;
-                        parent.points[l].y -= parent.img.destTop;
-                    }
-                }
-                else {
-                    parent.pointColl[n].strokeWidth *= ((ratio.width + ratio.height) / 2);
-                    for (var l = 0; l < len; l++) {
-                        parent.points[l].x = (parent.points[l].x - parent.img.destLeft) * ratio.width;
-                        parent.points[l].y = (parent.points[l].y - parent.img.destTop) * ratio.height;
-                    }
+                parent.pointColl[n].strokeWidth *= ((ratio.width + ratio.height) / 2);
+                for (var l = 0; l < len; l++) {
+                    parent.points[l].x = (parent.points[l].x - parent.img.destLeft) * ratio.width;
+                    parent.points[l].y = (parent.points[l].y - parent.img.destTop) * ratio.height;
                 }
             }
             parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
@@ -4365,6 +4363,7 @@ var Export = /** @__PURE__ @class */ (function () {
                 value: { context: tempContext, isSave: true, isFlip: null } });
         }
         this.lowerContext.filter = tempContextFilter;
+        parent.canvasFilter = tempContextFilter;
         if (object) {
             object['canvas'] = tempCanvas;
         }
@@ -4399,17 +4398,10 @@ var Export = /** @__PURE__ @class */ (function () {
     };
     Export.prototype.exportRotate = function (tempContext, degree) {
         var parent = this.parent;
-        if (isNullOrUndefined(parent.currSelectionPoint)) {
-            this.setMaxDim(parent.transform.degree, tempContext.canvas);
-            tempContext.translate(tempContext.canvas.width / 2, tempContext.canvas.height / 2);
-            tempContext.rotate(Math.PI / 180 * degree);
-            tempContext.drawImage(parent.inMemoryCanvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, -tempContext.canvas.height / 2, -tempContext.canvas.width / 2, tempContext.canvas.height, tempContext.canvas.width);
-        }
-        else {
-            tempContext.translate(tempContext.canvas.width / 2, tempContext.canvas.height / 2);
-            tempContext.rotate(Math.PI / 180 * degree);
-            tempContext.drawImage(parent.inMemoryCanvas, -tempContext.canvas.height / 2, -tempContext.canvas.width / 2, tempContext.canvas.height, tempContext.canvas.width);
-        }
+        this.setMaxDim(parent.transform.degree, tempContext.canvas);
+        tempContext.translate(tempContext.canvas.width / 2, tempContext.canvas.height / 2);
+        tempContext.rotate(Math.PI / 180 * degree);
+        tempContext.drawImage(parent.inMemoryCanvas, -tempContext.canvas.height / 2, -tempContext.canvas.width / 2, tempContext.canvas.height, tempContext.canvas.width);
         this.updateSaveContext(tempContext);
     };
     Export.prototype.exportFlip = function (tempContext, flipHorizontal, flipVertical) {
@@ -4436,12 +4428,12 @@ var Export = /** @__PURE__ @class */ (function () {
         var newWidth;
         var newHeight;
         if (degree % 90 === 0 && degree % 180 !== 0) {
-            newWidth = this.parent.baseImg.height;
-            newHeight = this.parent.baseImg.width;
+            newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.height : this.parent.img.srcHeight;
+            newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.width : this.parent.img.srcWidth;
         }
         else if (degree % 180 === 0 || degree === 0) {
-            newWidth = this.parent.baseImg.width;
-            newHeight = this.parent.baseImg.height;
+            newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.width : this.parent.img.srcWidth;
+            newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.height : this.parent.img.srcHeight;
         }
         tempCanvas.width = newWidth;
         tempCanvas.height = newHeight;
@@ -5757,6 +5749,7 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         }
     };
     FreehandDrawing.prototype.selectFhd = function (index) {
+        var _this = this;
         var parent = this.parent;
         parent.notify('selection', { prop: 'setFreehandDrawEditing', onPropertyChange: false, value: { bool: true } });
         if (index || index === 0) {
@@ -5781,7 +5774,29 @@ var FreehandDrawing = /** @__PURE__ @class */ (function () {
         var obj = { bool: false };
         parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
         if (obj['bool']) {
-            if (!isBlazor()) {
+            var shapeSettings = { id: 'pen_' + (this.fhdSelIdx + 1), type: ShapeType.FreehandDraw,
+                startX: parent.pointColl[this.fhdSelIdx].points[0].x, startY: parent.pointColl[this.fhdSelIdx].points[0].y,
+                strokeColor: parent.pointColl[this.fhdSelIdx].strokeColor, strokeWidth: parent.pointColl[this.fhdSelIdx].strokeWidth,
+                points: parent.pointColl[this.fhdSelIdx].points };
+            var shapeChangingArgs = { action: 'select', previousShapeSettings: shapeSettings,
+                currentShapeSettings: shapeSettings };
+            if (isBlazor() && parent.events && parent.events.shapeChanging.hasDelegate === true) {
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                parent.dotNetRef.invokeMethodAsync('ShapeEventAsync', 'OnShape', shapeChangingArgs).then(function (shapeChangingArgs) {
+                    parent.pointColl[_this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                    parent.pointColl[_this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                    parent.pointColl[_this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+                    _this.freehandRedraw(_this.upperContext);
+                    parent.updateToolbar(parent.element, 'imageLoaded');
+                    parent.updateToolbar(parent.element, 'pen');
+                });
+            }
+            else {
+                parent.trigger('shapeChanging', shapeChangingArgs);
+                parent.pointColl[this.fhdSelIdx].strokeColor = shapeChangingArgs.currentShapeSettings.strokeColor;
+                parent.pointColl[this.fhdSelIdx].strokeWidth = shapeChangingArgs.currentShapeSettings.strokeWidth;
+                parent.pointColl[this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
+                this.freehandRedraw(this.upperContext);
                 parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
                         isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
             }
@@ -6403,6 +6418,12 @@ var Selection = /** @__PURE__ @class */ (function () {
             case 'reset':
                 this.reset();
                 break;
+            case 'unWireEvent':
+                this.unwireEvent();
+                break;
+            case 'updPtCollForShpRot':
+                this.updPtCollForShpRot(args.value['obj']);
+                break;
         }
     };
     Selection.prototype.getModuleName = function () {
@@ -9264,6 +9285,9 @@ var Selection = /** @__PURE__ @class */ (function () {
                 if (!this.isFhdEditing) {
                     this.applyCurrActObj(x, y);
                     parent.currObjType.isResize = false;
+                    if (!isBlazor()) {
+                        parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
+                    }
                 }
             }
             if (parent.activeObj) {
@@ -9746,6 +9770,12 @@ var Selection = /** @__PURE__ @class */ (function () {
         EventHandler.add(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler, this);
         EventHandler.add(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this);
     };
+    Selection.prototype.unwireEvent = function () {
+        EventHandler.remove(this.parent.lowerCanvas, 'touchend', this.mouseUpEventHandler);
+        EventHandler.remove(this.parent.lowerCanvas, 'touchmove', this.mouseMoveEventHandler);
+        EventHandler.remove(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler);
+        EventHandler.remove(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler);
+    };
     Selection.prototype.keyDownEventHandler = function (e) {
         var _this = this;
         var parent = this.parent;
@@ -10581,8 +10611,10 @@ var Selection = /** @__PURE__ @class */ (function () {
             fillColor: parent.activeObj.strokeSettings ? parent.activeObj.strokeSettings.fillColor : null,
             radius: parent.activeObj.shape === 'ellipse' ? parent.activeObj.activePoint.width / 2 : null,
             length: parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' ? parent.activeObj.activePoint.width : null,
-            text: parent.activeObj.shape === 'text' ? (parent.activeObj.keyHistory ? parent.activeObj.keyHistory : null) : null,
+            text: parent.activeObj.shape === 'text' ? (parent.activeObj.keyHistory ? parent.activeObj.keyHistory :
+                (parent.activeObj.textSettings.text ? parent.activeObj.textSettings.text : null)) : null,
             fontSize: parent.activeObj.shape === 'text' ? (parent.activeObj.textSettings ? parent.activeObj.textSettings.fontSize : null) : null,
+            fontFamily: parent.activeObj.shape === 'text' ? (parent.activeObj.textSettings ? parent.activeObj.textSettings.fontFamily : null) : null,
             fontStyle: parent.activeObj.shape === 'text' ? fontStyle : null,
             color: parent.activeObj.shape === 'text' ? (parent.activeObj.strokeSettings ? parent.activeObj.strokeSettings.strokeColor : null) : null
         };
@@ -10626,12 +10658,14 @@ var Selection = /** @__PURE__ @class */ (function () {
         if (degree < 0) {
             degree = 360 + degree;
         }
-        for (var i = 0; i < obj.flipObjColl.length; i++) {
-            if (obj.flipObjColl[i].toLowerCase() === 'horizontal') {
-                isHorizontalflip = true;
-            }
-            else if (obj.flipObjColl[i].toLowerCase() === 'vertical') {
-                isVerticalflip = true;
+        if (obj.flipObjColl) {
+            for (var i = 0; i < obj.flipObjColl.length; i++) {
+                if (obj.flipObjColl[i].toLowerCase() === 'horizontal') {
+                    isHorizontalflip = true;
+                }
+                else if (obj.flipObjColl[i].toLowerCase() === 'vertical') {
+                    isVerticalflip = true;
+                }
             }
         }
         if (degree === 0 || degree === 360) {
@@ -10720,7 +10754,7 @@ var Shape = /** @__PURE__ @class */ (function () {
                 this.drawPath(args.value['pointColl'], args.value['strokeWidth'], args.value['strokeColor']);
                 break;
             case 'drawRectangle':
-                this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidt'], args.value['strokeColor'], args.value['fillColor']);
+                this.drawRectangle(args.value['x'], args.value['y'], args.value['width'], args.value['height'], args.value['strokeWidth'], args.value['strokeColor'], args.value['fillColor']);
                 break;
             case 'drawText':
                 this.drawText(args.value['x'], args.value['y'], args.value['text'], args.value['fontFamily'], args.value['fontSize'], args.value['bold'], args.value['italic'], args.value['color']);
@@ -10911,10 +10945,10 @@ var Shape = /** @__PURE__ @class */ (function () {
             { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
     };
-    Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor) {
+    Shape.prototype.drawEllipse = function (x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree) {
         this.initializeShape('ellipse');
         var start = x && y ? { x: x, y: y } : null;
-        this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY);
+        this.drawShape('ellipse', strokeWidth, strokeColor, fillColor, start, radiusX, radiusY, null, null, null, degree);
     };
     Shape.prototype.drawLine = function (startX, startY, endX, endY, strokeWidth, strokeColor) {
         this.initializeShape('line');
@@ -10945,10 +10979,10 @@ var Shape = /** @__PURE__ @class */ (function () {
         var height = endY - startY;
         this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd);
     };
-    Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor) {
+    Shape.prototype.drawRectangle = function (x, y, width, height, strokeWidth, strokeColor, fillColor, degree) {
         this.initializeShape('rectangle');
         var start = x && y ? { x: x, y: y } : null;
-        this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height);
+        this.drawShape('rectangle', strokeWidth, strokeColor, fillColor, start, width, height, null, null, null, degree);
     };
     Shape.prototype.drawText = function (x, y, text, fontFamily, fontSize, bold, italic, color) {
         this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y);
@@ -10987,7 +11021,7 @@ var Shape = /** @__PURE__ @class */ (function () {
         }
         return arrowType;
     };
-    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd) {
+    Shape.prototype.drawShape = function (type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree) {
         var _this = this;
         var parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
@@ -11056,10 +11090,7 @@ var Shape = /** @__PURE__ @class */ (function () {
                         parent.activeObj.triangleDirection = 'right';
                     }
                     parent.currObjType.isDragging = parent.currObjType.isCustomCrop = false;
-                    parent.activeObj.shapeDegree = parent.transform.degree;
-                    parent.activeObj.shapeFlip = parent.transform.currFlipState;
-                    parent.activeObj.textFlip = parent.transform.currFlipState;
-                    parent.activeObj.flipObjColl = [];
+                    this.initShapeProps();
                     var obj = { shapeSettingsObj: {} };
                     parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
                     var shapeSettings = obj['shapeSettingsObj'];
@@ -11071,6 +11102,10 @@ var Shape = /** @__PURE__ @class */ (function () {
                             _this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
                             _this.setDimension(width, height);
                             parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+                            if (degree) {
+                                parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
+                                parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
+                            }
                             parent.updateToolbar(parent.element, 'quickAccessToolbar', 'shape');
                             parent.notify('selection', { prop: 'isShapeInserted', onPropertyChange: false, value: { bool: true } });
                             parent.notify('undo-redo', { prop: 'updateUrObj', onPropertyChange: false, value: { objColl: objColl_1 } });
@@ -11085,6 +11120,10 @@ var Shape = /** @__PURE__ @class */ (function () {
                         this.updateShapeChangeEventArgs(shapeChangingArgs.currentShapeSettings);
                         this.setDimension(width, height);
                         parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
+                        if (degree) {
+                            parent.activeObj.rotatedAngle = degree * (Math.PI / 180);
+                            parent.notify('selection', { prop: 'updPtCollForShpRot', onPropertyChange: false, value: { obj: parent.activeObj } });
+                        }
                         if (!isBlazor()) {
                             parent.notify('toolbar', { prop: 'renderQAT', onPropertyChange: false, value: { isPenEdit: null } });
                         }
@@ -11105,6 +11144,13 @@ var Shape = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    Shape.prototype.initShapeProps = function () {
+        var parent = this.parent;
+        parent.activeObj.shapeDegree = parent.transform.degree;
+        parent.activeObj.shapeFlip = parent.transform.currFlipState;
+        parent.activeObj.textFlip = parent.transform.currFlipState;
+        parent.activeObj.flipObjColl = [];
+    };
     Shape.prototype.setPointCollForLineAndArrow = function () {
         var parent = this.parent;
         if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
@@ -11119,6 +11165,19 @@ var Shape = /** @__PURE__ @class */ (function () {
             }
         }
     };
+    Shape.prototype.prevObjColl = function () {
+        var parent = this.parent;
+        var object = { currObj: {} };
+        parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
+        this.prevObj = object['currObj'];
+        this.prevObj.objColl = extend([], parent.objColl, [], true);
+        this.prevObj.pointColl = extend([], parent.pointColl, [], true);
+        this.prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
+        var selPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
+        this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+    };
     Shape.prototype.drawShapeText = function (text, fontFamily, fontSize, bold, italic, strokeColor, x, y) {
         var _this = this;
         var parent = this.parent;
@@ -11131,16 +11190,7 @@ var Shape = /** @__PURE__ @class */ (function () {
             parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
             parent.togglePen = false;
             this.redrawActObj();
-            var object = { currObj: {} };
-            parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
-            this.prevObj = object['currObj'];
-            this.prevObj.objColl = extend([], parent.objColl, [], true);
-            this.prevObj.pointColl = extend([], parent.pointColl, [], true);
-            this.prevObj.afterCropActions = extend([], parent.afterCropActions, [], true);
-            var selPointCollObj = { selPointColl: null };
-            parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
-                value: { obj: selPointCollObj } });
-            this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+            this.prevObjColl();
             this.refreshActiveObj();
             parent.activeObj.shape = parent.currObjType.shape = 'text';
             parent.currObjType.isCustomCrop = false;
@@ -11379,9 +11429,12 @@ var Shape = /** @__PURE__ @class */ (function () {
                 parent.activeObj.activePoint.width = shapeSettings.length;
                 break;
             case 'text':
-                parent.activeObj.keyHistory = shapeSettings.text;
+                parent.activeObj.keyHistory = parent.activeObj.textSettings.text = shapeSettings.text;
                 parent.activeObj.textSettings.fontSize = shapeSettings.fontSize;
                 parent.activeObj.strokeSettings.strokeColor = shapeSettings.color;
+                parent.activeObj.textSettings.fontFamily = shapeSettings.fontFamily;
+                break;
+            case 'rectangle':
                 break;
         }
         if (parent.activeObj.shape === 'text' && parent.activeObj.textSettings) {
@@ -12247,6 +12300,7 @@ var Shape = /** @__PURE__ @class */ (function () {
                     if (actObj.flipObjColl.length === 4) {
                         actObj.flipObjColl = [];
                         flip = '';
+                        actObj.shapeFlip = '';
                     }
                     if (flip === '' && actObj.flipObjColl.length > 1) {
                         flip = actObj.flipObjColl[actObj.flipObjColl.length - 1];
@@ -12898,6 +12952,10 @@ var Shape = /** @__PURE__ @class */ (function () {
                     shapeDetails.fontStyle.push('italic');
                 }
                 break;
+            case 'path':
+                shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+                shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                break;
         }
         return shapeDetails;
     };
@@ -13168,7 +13226,12 @@ var Shape = /** @__PURE__ @class */ (function () {
             this.lowerContext.filter = object['canvasFilter'];
             this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
             parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
-            parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            if (!isBlazor()) {
+                parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
+            }
+            else {
+                parent.updateToolbar(parent.element, 'imageLoaded');
+            }
         }
     };
     Shape.prototype.getMaxText = function (isTextBox, text, obj) {
@@ -13568,6 +13631,12 @@ var Transform = /** @__PURE__ @class */ (function () {
                 this.cropDimension.width = args.value['width'];
                 this.cropDimension.height = args.value['height'];
                 break;
+            case 'getPreventSelect':
+                args.value['obj']['bool'] = this.isPreventSelect;
+                break;
+            case 'setPreventSelect':
+                this.isPreventSelect = args.value['bool'];
+                break;
             case 'reset':
                 this.reset();
                 break;
@@ -14692,6 +14761,9 @@ var Transform = /** @__PURE__ @class */ (function () {
                 parent.notify('shape', { prop: 'alignRotateFlipColl', onPropertyChange: false,
                     value: { collection: parent.objColl[i].flipObjColl, isRotateFlipCollection: null, obj: flipObjColl } });
                 parent.objColl[i].flipObjColl = flipObjColl['collection'];
+                if (parent.objColl[i].flipObjColl.length === 0) {
+                    parent.objColl[i].shapeFlip = '';
+                }
             }
         }
         if (tempZoomFactor !== 0) {
@@ -15057,6 +15129,7 @@ var Transform = /** @__PURE__ @class */ (function () {
             parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
             this.lowerContext.filter = tempFilter;
             parent.initialAdjustmentValue = tempFilter;
+            parent.canvasFilter = this.lowerContext.filter;
             if (parent.isImageLoaded) {
                 showSpinner(parent.element);
                 parent.element.style.opacity = '0.5';
@@ -15536,7 +15609,9 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
                 this.undoRedoStep--;
                 if (!isBlazor()) {
                     parent.notify('toolbar', { prop: 'enable-disable-btns' });
-                    parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    if (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
+                        parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
+                    }
                 }
                 else {
                     parent.updateToolbar(parent.element, 'enableDisableToolbarBtn');
@@ -15639,7 +15714,7 @@ var UndoRedo = /** @__PURE__ @class */ (function () {
                 parent.cropObj = extend({}, obj.currentCropObj, {}, true);
                 parent.afterCropActions = obj.currentObj.afterCropActions;
                 this.lowerContext.filter = obj.currentObj.filter;
-                if (!isBlazor()) {
+                if (!isBlazor() && parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
                     parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
                 }
                 parent.canvasFilter = this.lowerContext.filter;
@@ -16512,7 +16587,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.inMemoryContext = this.inMemoryCanvas.getContext('2d');
         this.lowerContext.filter = this.getDefaultFilter();
         this.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
-        this.notify('toolbar', { prop: 'setCanvasFilter', onPropertyChange: false, value: { filter: this.lowerContext.filter } });
+        this.canvasFilter = this.lowerContext.filter;
         this.notify('toolbar', { prop: 'setInitialAdjustmentValue', onPropertyChange: false, value: { value: this.lowerContext.filter } });
         if (this.cssClass) {
             addClass([this.element], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
@@ -16577,6 +16652,7 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
             screen.orientation.removeEventListener('change', this.screenOrientation.bind(this));
         }
         this.notify('shape', { prop: 'unWireEvent', onPropertyChange: false });
+        this.notify('selection', { prop: 'unWireEvent', onPropertyChange: false });
     };
     ImageEditor.prototype.createCanvas = function () {
         this.element.style.boxSizing = 'border-box';
@@ -17513,8 +17589,10 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
         var data = this.getImageData();
         if (!isBlazor()) {
-            this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
-                    isApplyBtn: true, isCropping: false } });
+            if (!Browser.isDevice) {
+                this.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
+                        isApplyBtn: true, isCropping: false } });
+            }
             this.element.querySelector('#' + this.element.id + '_contextualToolbarArea').classList.remove('e-hide');
         }
         this.objColl = objColl;
@@ -18129,8 +18207,8 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.element = element;
         var canvasWrapper = this.element.querySelector('.e-canvas-wrapper');
-        if (this.element.querySelector('#' + this.element.id + '_toolbar')) {
-            this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbar').clientHeight;
+        if (this.element.querySelector('#' + this.element.id + '_toolbarArea')) {
+            this.toolbarHeight = this.element.querySelector('#' + this.element.id + '_toolbarArea').clientHeight;
         }
         else {
             this.toolbarHeight = 0;
@@ -18147,9 +18225,6 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
         });
         this.upperCanvas.width = this.lowerCanvas.width = this.inMemoryCanvas.width = this.element.offsetWidth;
         this.upperCanvas.height = this.lowerCanvas.height = this.inMemoryCanvas.height = (this.element.offsetHeight - this.toolbarHeight);
-        this.baseImg = this.createElement('img', {
-            id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
-        });
         this.lowerContext = this.lowerCanvas.getContext('2d');
         this.baseImg = this.createElement('img', {
             id: this.element.id + '_orgImg', attrs: { name: 'Image', crossorigin: 'anonymous' }
@@ -18733,9 +18808,6 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             case 'getCanvasFilter':
                 args.value['obj']['canvasFilter'] = parent.canvasFilter;
                 break;
-            case 'setCanvasFilter':
-                parent.canvasFilter = args.value['filter'];
-                break;
             case 'getDefToolbarItems':
                 args.value['obj']['defToolbarItems'] = this.defToolbarItems;
                 break;
@@ -20141,7 +20213,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         if (!parent.isImageLoaded || parent.isCropToolbar) {
             return;
         }
-        var args = { toolbarType: type };
+        var item = type === 'shapes' && parent.activeObj.shape ? parent.activeObj.shape : type;
+        var args = { toolbarType: item };
         if (type !== 'filter' && type !== 'color') {
             if (document.getElementById(parent.element.id + '_toolbar') && this.defToolbarItems.length > 0) {
                 getComponent(document.getElementById(parent.element.id + '_toolbar'), 'toolbar').destroy();
@@ -21357,7 +21430,8 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         var parent = this.parent;
         if (document.querySelector('#' + parent.element.id + '_sliderWrapper') ||
             parent.currObjType.isFiltered) {
-            parent.initialAdjustmentValue = parent.canvasFilter = this.lowerContext.filter;
+            parent.initialAdjustmentValue = this.lowerContext.filter;
+            parent.canvasFilter = this.lowerContext.filter;
             parent.currObjType.isFiltered = false;
         }
     };