@syncfusion/ej2-image-editor 22.1.36 → 22.1.38

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

@@ -46,7 +46,7 @@ class Crop {
                 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 @@ class Crop {
     rotateCrop() {
         const parent = this.parent;
         const shape = parent.activeObj.shape || '';
-        const 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;
-        const 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;
-        let 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 (let i = 0; i < length; i++) {
-            parent.notify('shape', { prop: 'rotateObjColl', onPropertyChange: false });
-            parent.notify('freehand-draw', { prop: 'rotateFhdColl', onPropertyChange: false });
-        }
         let activeObj = extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
-        if (parent.transform.currFlipState !== '') {
-            for (let i = 0, len = parent.objColl.length; i < len; i++) {
-                parent.objColl[i].shapeFlip = '';
-            }
-            for (let i = 0; i < parent.freehandCounter; i++) {
-                parent.pointColl[i].shapeFlip = '';
-            }
-            parent.transform.degree = tempDegree;
-            const 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 } });
+        const tempCurrSelObj = extend({}, parent.currSelectionPoint, {}, true);
+        const preventSelObj = { bool: null };
+        parent.notify('transform', { prop: 'getPreventSelect', onPropertyChange: false, value: { obj: preventSelObj } });
+        parent.notify('transform', { prop: 'setPreventSelect', onPropertyChange: false, value: { bool: true } });
+        const 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 (let 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 });
+    }
+    revertTransform(type, coll) {
+        const parent = this.parent;
+        const obj = { isRotate: false };
+        if (type === 'initial') {
+            for (let 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 (let i = 0, len = parent.objColl.length; i < len; i++) {
                 parent.objColl[i].shapeFlip = '';
             }
             for (let i = 0; i < parent.freehandCounter; i++) {
                 parent.pointColl[i].shapeFlip = '';
             }
-            const 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 (let 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 (let 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 });
     }
     flipCrop() {
         const parent = this.parent;
@@ -498,6 +460,15 @@ class Crop {
         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 } });
+        let cropObjColl = extend([], parent.objColl, null, true);
+        let 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) {
             const destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
                 height: parent.img.destHeight };
@@ -514,8 +485,8 @@ class Crop {
             parent.img.destWidth = destPoints.width;
             parent.img.destHeight = destPoints.height;
             parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
-            const cropObjColl = extend([], parent.objColl, null, true);
-            const 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 @@ class Crop {
             parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
                 value: { obj: { selPointColl: [] } } });
             parent.cropObj.filter = this.lowerContext.filter;
+            const actObj = extend({}, parent.currSelectionPoint, null, true);
             parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: null } });
+            parent.activeObj = extend({}, actObj, null, true);
             const 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 @@ class Crop {
             parent.currSelectionPoint = null;
         }
     }
+    panToSelRangle(isReverse) {
+        const parent = this.parent;
+        const panX = parent.transform.degree === 0 ?
+            isReverse ? -parent.cropObj.totalPannedPoint.x : parent.cropObj.totalPannedPoint.x :
+            isReverse ? -parent.cropObj.totalPannedClientPoint.x : parent.cropObj.totalPannedClientPoint.x;
+        const 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 };
+        }
+    }
     cropCircle(context, isSave, isFlip) {
         const parent = this.parent;
         if (isFlip && parent.transform.currFlipState !== '') {
@@ -568,9 +561,9 @@ class Crop {
         }
         context.globalCompositeOperation = 'destination-in';
         context.beginPath();
-        const centerX = isNullOrUndefined(isSave) ? parent.img.destLeft + (parent.img.destWidth / 2) : parent.img.destWidth / 2;
-        const centerY = isNullOrUndefined(isSave) ? parent.img.destTop + (parent.img.destHeight / 2) : parent.img.destHeight / 2;
-        const radius = parent.img.destWidth / 2;
+        const centerX = isNullOrUndefined(isSave) ? parent.img.destLeft + (parent.img.destWidth / 2) : context.canvas.width / 2;
+        const centerY = isNullOrUndefined(isSave) ? parent.img.destTop + (parent.img.destHeight / 2) : context.canvas.height / 2;
+        const radius = isSave ? context.canvas.width / 2 : parent.img.destWidth / 2;
         context.arc(centerX, centerY, radius, 0, Math.PI * 2);
         context.closePath();
         context.fill();
@@ -748,7 +741,6 @@ class Crop {
                 }
                 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 } });
@@ -774,17 +766,17 @@ class Crop {
             }
         }
     }
-    calcRatio(obj) {
+    calcRatio(obj, dimension) {
         const parent = this.parent;
         let widthRatio;
         let 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;
@@ -1116,6 +1108,10 @@ class Draw {
             parent.activeObj = extend({}, obj, {}, true);
         }
         this.updateActiveObject();
+        if (isNullOrUndefined(parent.activeObj.activePoint.startX) &&
+            isNullOrUndefined(parent.activeObj.activePoint.startY)) {
+            return;
+        }
         if (parent.currObjType.isText) {
             const obj = { keyHistory: '' };
             parent.notify('shape', { prop: 'getKeyHistory', onPropertyChange: false, value: { obj: obj } });
@@ -1786,12 +1782,14 @@ class Draw {
         if (degree < 0) {
             degree = 360 + degree;
         }
-        for (let 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 (let 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) {
@@ -2332,7 +2330,7 @@ class Draw {
     }
     shapeText(canvasDraw) {
         const parent = this.parent;
-        const actPoint = parent.activeObj.activePoint;
+        let actPoint = parent.activeObj.activePoint;
         const rows = parent.activeObj.keyHistory.split('\n');
         const height = parent.activeObj.textSettings.fontSize + parent.activeObj.textSettings.fontSize * 0.25;
         const lineHeight = ((height * rows.length) - (parent.activeObj.textSettings.fontSize * rows.length)) / rows.length;
@@ -2370,17 +2368,18 @@ class Draw {
                 parent.activeObj.textSettings.fontFamily;
             if (parent.activeObj.flipObjColl.length === 4) {
                 parent.activeObj.flipObjColl = [];
+                parent.activeObj.shapeFlip = '';
             }
             for (let 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) {
@@ -2393,12 +2392,12 @@ class Draw {
                 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);
                 }
             }
         }
@@ -2434,6 +2433,7 @@ class Draw {
                 this.updateActiveObject(actPoint, parent.activeObj);
             }
         }
+        return actPoint;
     }
     rotateText(canvasDraw) {
         const parent = this.parent;
@@ -2447,6 +2447,9 @@ class Draw {
         else {
             degree = parent.transform.degree - parent.activeObj.shapeDegree;
         }
+        if (degree === -450) {
+            degree = -90;
+        }
         if (degree < 0) {
             degree = 360 + degree;
         }
@@ -3770,11 +3773,8 @@ class Draw {
             }
         }
         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();
@@ -3817,8 +3817,8 @@ class Draw {
             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();
         }
@@ -3974,75 +3974,84 @@ class Draw {
     moveToSelectionRange(type, activeObj) {
         const parent = this.parent;
         if (parent.activeObj.shape) {
-            if (type === 'rotateleft' || type === 'rotateright') {
+            let isRotated = false;
+            for (let i = 0; i < parent.rotateFlipColl.length; i++) {
+                if (parent.rotateFlipColl[i] === 90 || parent.rotateFlipColl[i] === -90) {
+                    isRotated = true;
+                    break;
+                }
+            }
+            if (isRotated) {
                 let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 (let 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 } });
                         }
                     }
                 }
@@ -4250,8 +4259,19 @@ class Export {
     }
     exportToCanvas(object) {
         const parent = this.parent;
+        let width;
+        let height;
+        if (parent.currSelectionPoint) {
+            width = parent.img.srcWidth;
+            height = parent.img.srcHeight;
+        }
+        else {
+            width = parent.baseImg.width;
+            height = parent.baseImg.height;
+        }
         const 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 } } });
         const ratio = obj;
         const tempContextFilter = this.lowerContext.filter;
         // Manipulating blur value
@@ -4262,36 +4282,24 @@ class Export {
             splitWords[5] = 'blur(' + value + 'px)';
             this.lowerContext.filter = splitWords.join(' ');
         }
-        let maxDimension;
         const tempCanvas = parent.createElement('canvas', {
             id: parent.element.id + '_tempCanvas', attrs: { name: 'canvasImage' }
         });
         const 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;
-            const 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;
-            const obj = { width: 0, height: 0 };
-            parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
-                value: { width: parent.baseImg.width, height: parent.baseImg.height, obj: obj } });
-            maxDimension = obj;
-            tempCanvas.style.maxWidth = maxDimension.width + 'px';
-            tempCanvas.style.maxHeight = maxDimension.height + 'px';
-            tempContext.filter = this.lowerContext.filter;
-            const 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;
+        const dimObj = { width: 0, height: 0 };
+        parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
+            value: { width: width, height: height, obj: dimObj } });
+        const maxDimension = dimObj;
+        tempCanvas.style.maxWidth = maxDimension.width + 'px';
+        tempCanvas.style.maxHeight = maxDimension.height + 'px';
+        tempContext.filter = this.lowerContext.filter;
+        const 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);
@@ -4310,17 +4318,15 @@ class Export {
                 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 } });
@@ -4336,18 +4342,10 @@ class Export {
                 parent.points = extend([], parent.pointColl[n].points, []);
                 parent.notify('freehand-draw', { prop: 'setPointCounter', onPropertyChange: false, value: { value: 0 } });
                 const len = parent.points.length;
-                if (parent.currSelectionPoint) {
-                    for (let 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 (let 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 (let 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,
@@ -4359,6 +4357,7 @@ class Export {
                 value: { context: tempContext, isSave: true, isFlip: null } });
         }
         this.lowerContext.filter = tempContextFilter;
+        parent.canvasFilter = tempContextFilter;
         if (object) {
             object['canvas'] = tempCanvas;
         }
@@ -4393,17 +4392,10 @@ class Export {
     }
     exportRotate(tempContext, degree) {
         const 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);
     }
     exportFlip(tempContext, flipHorizontal, flipVertical) {
@@ -4430,12 +4422,12 @@ class Export {
         let newWidth;
         let 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;
@@ -5773,7 +5765,29 @@ class FreehandDrawing {
         const obj = { bool: false };
         parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
         if (obj['bool']) {
-            if (!isBlazor()) {
+            const 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 };
+            const 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((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 } });
             }
@@ -6393,6 +6407,12 @@ class Selection {
             case 'reset':
                 this.reset();
                 break;
+            case 'unWireEvent':
+                this.unwireEvent();
+                break;
+            case 'updPtCollForShpRot':
+                this.updPtCollForShpRot(args.value['obj']);
+                break;
         }
     }
     getModuleName() {
@@ -9250,6 +9270,9 @@ class Selection {
                 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) {
@@ -9732,6 +9755,12 @@ class Selection {
         EventHandler.add(this.parent.upperCanvas, 'touchend', this.mouseUpEventHandler, this);
         EventHandler.add(this.parent.upperCanvas, 'touchmove', this.mouseMoveEventHandler, this);
     }
+    unwireEvent() {
+        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);
+    }
     keyDownEventHandler(e) {
         const parent = this.parent;
         if (e.ctrlKey && (e.key === '+' || e.key === '-')) {
@@ -10565,8 +10594,10 @@ class Selection {
             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
         };
@@ -10610,12 +10641,14 @@ class Selection {
         if (degree < 0) {
             degree = 360 + degree;
         }
-        for (let 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 (let 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) {
@@ -10703,7 +10736,7 @@ class Shape {
                 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']);
@@ -10894,10 +10927,10 @@ class Shape {
             { text: 'Enter Text', fontFamily: 'Arial', fontSize: null, fontRatio: null, bold: false, italic: false, underline: false };
         this.strokeSettings = { strokeColor: '#fff', fillColor: '', strokeWidth: null };
     }
-    drawEllipse(x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor) {
+    drawEllipse(x, y, radiusX, radiusY, strokeWidth, strokeColor, fillColor, degree) {
         this.initializeShape('ellipse');
         const 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);
     }
     drawLine(startX, startY, endX, endY, strokeWidth, strokeColor) {
         this.initializeShape('line');
@@ -10928,10 +10961,10 @@ class Shape {
         const height = endY - startY;
         this.drawShape('arrow', strokeWidth, strokeColor, null, start, width, height, null, arrowStart, arrowEnd);
     }
-    drawRectangle(x, y, width, height, strokeWidth, strokeColor, fillColor) {
+    drawRectangle(x, y, width, height, strokeWidth, strokeColor, fillColor, degree) {
         this.initializeShape('rectangle');
         const 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);
     }
     drawText(x, y, text, fontFamily, fontSize, bold, italic, color) {
         this.drawShapeText(text, fontFamily, fontSize, bold, italic, color, x, y);
@@ -10970,7 +11003,7 @@ class Shape {
         }
         return arrowType;
     }
-    drawShape(type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd) {
+    drawShape(type, strokeWidth, strokeColor, fillColor, start, width, height, pointColl, arrowStart, arrowEnd, degree) {
         const parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
             parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
@@ -11038,10 +11071,7 @@ class Shape {
                         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();
                     const obj = { shapeSettingsObj: {} };
                     parent.notify('selection', { prop: 'updatePrevShapeSettings', onPropertyChange: false, value: { obj: obj } });
                     const shapeSettings = obj['shapeSettingsObj'];
@@ -11053,6 +11083,10 @@ class Shape {
                             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 } });
@@ -11067,6 +11101,10 @@ class Shape {
                         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 } });
                         }
@@ -11087,6 +11125,13 @@ class Shape {
             }
         }
     }
+    initShapeProps() {
+        const parent = this.parent;
+        parent.activeObj.shapeDegree = parent.transform.degree;
+        parent.activeObj.shapeFlip = parent.transform.currFlipState;
+        parent.activeObj.textFlip = parent.transform.currFlipState;
+        parent.activeObj.flipObjColl = [];
+    }
     setPointCollForLineAndArrow() {
         const parent = this.parent;
         if (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow') {
@@ -11101,6 +11146,19 @@ class Shape {
             }
         }
     }
+    prevObjColl() {
+        const parent = this.parent;
+        const 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);
+        const selPointCollObj = { selPointColl: null };
+        parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
+            value: { obj: selPointCollObj } });
+        this.prevObj.selPointColl = extend([], selPointCollObj['selPointColl'], [], true);
+    }
     drawShapeText(text, fontFamily, fontSize, bold, italic, strokeColor, x, y) {
         const parent = this.parent;
         if (!parent.disabled && parent.isImageLoaded) {
@@ -11112,16 +11170,7 @@ class Shape {
             parent.notify('draw', { prop: 'setImageEdited', onPropertyChange: false });
             parent.togglePen = false;
             this.redrawActObj();
-            const 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);
-            const 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;
@@ -11360,9 +11409,12 @@ class Shape {
                 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) {
@@ -12228,6 +12280,7 @@ class Shape {
                     if (actObj.flipObjColl.length === 4) {
                         actObj.flipObjColl = [];
                         flip = '';
+                        actObj.shapeFlip = '';
                     }
                     if (flip === '' && actObj.flipObjColl.length > 1) {
                         flip = actObj.flipObjColl[actObj.flipObjColl.length - 1];
@@ -12877,6 +12930,10 @@ class Shape {
                     shapeDetails.fontStyle.push('italic');
                 }
                 break;
+            case 'path':
+                shapeDetails.strokeColor = obj.strokeSettings.strokeColor;
+                shapeDetails.strokeWidth = obj.strokeSettings.strokeWidth;
+                break;
         }
         return shapeDetails;
     }
@@ -13147,7 +13204,12 @@ class Shape {
             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');
+            }
         }
     }
     getMaxText(isTextBox, text, obj) {
@@ -13546,6 +13608,12 @@ class Transform {
                 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;
@@ -14666,6 +14734,9 @@ class Transform {
                 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) {
@@ -15031,6 +15102,7 @@ class Transform {
             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';
@@ -15509,7 +15581,9 @@ class UndoRedo {
                 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');
@@ -15612,7 +15686,7 @@ class UndoRedo {
                 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;
@@ -16453,7 +16527,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         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(' '));
@@ -16518,6 +16592,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
             screen.orientation.removeEventListener('change', this.screenOrientation.bind(this));
         }
         this.notify('shape', { prop: 'unWireEvent', onPropertyChange: false });
+        this.notify('selection', { prop: 'unWireEvent', onPropertyChange: false });
     }
     createCanvas() {
         this.element.style.boxSizing = 'border-box';
@@ -17454,8 +17529,10 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
         const 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;
@@ -18069,8 +18146,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         this.element = element;
         const 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;
@@ -18087,9 +18164,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
         });
         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' }
@@ -18671,9 +18745,6 @@ class ToolbarModule {
             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;
@@ -20071,7 +20142,8 @@ class ToolbarModule {
         if (!parent.isImageLoaded || parent.isCropToolbar) {
             return;
         }
-        const args = { toolbarType: type };
+        const item = type === 'shapes' && parent.activeObj.shape ? parent.activeObj.shape : type;
+        const 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();
@@ -21282,7 +21354,8 @@ class ToolbarModule {
         const 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;
         }
     }