@syncfusion/ej2-image-editor 22.1.37 → 22.1.39

package/dist/global/index.d.ts

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@22.1.36",
+  "_id": "@syncfusion/ej2-image-editor@22.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-ckJ9WXGq8Evlr/L+ToszUEaW5o17UvtPdFBxX8U+ZNvAQHyWiJeH0hrSMUTBRnXzwXpqwhIuUQBEIvA61tjOPw==",
+  "_integrity": "sha512-0FKUVs0R2/Fo4Z3xwDMWGEYHM2rLSEstbccSFmWKM+zLef2CUx/8mKoqJ3Z5AC5XQfKJYLaNybviEq3ggjWVwQ==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-22.1.36.tgz",
-  "_shasum": "88ab5df13c6b37ffda89a70889cabfc031c1c454",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-22.1.38.tgz",
+  "_shasum": "3ea2b377613208e250a8e58b3334cfbc862543d3",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -32,11 +32,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.1.34",
-    "@syncfusion/ej2-buttons": "~22.1.36",
-    "@syncfusion/ej2-inputs": "~22.1.34",
-    "@syncfusion/ej2-navigations": "~22.1.36",
-    "@syncfusion/ej2-popups": "~22.1.37",
+    "@syncfusion/ej2-base": "~22.1.38",
+    "@syncfusion/ej2-buttons": "~22.1.39",
+    "@syncfusion/ej2-inputs": "~22.1.39",
+    "@syncfusion/ej2-navigations": "~22.1.39",
+    "@syncfusion/ej2-popups": "~22.1.38",
     "@syncfusion/ej2-splitbuttons": "~22.1.37"
   },
   "deprecated": false,
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "22.1.37",
+  "version": "22.1.39",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -19,11 +19,13 @@ export declare class Crop {
     private cropImg;
     private updateCropObj;
     private rotateCrop;
+    private revertTransform;
     private flipCrop;
     private cropObjColl;
     private cropPointCollection;
     private cropFreehandDrawColl;
     private setCurrSelPoints;
+    private panToSelRangle;
     private cropCircle;
     private getCurrCropState;
     private isInitialRotate;

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

@@ -41,7 +41,7 @@ var Crop = /** @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']);
@@ -187,112 +187,74 @@ var Crop = /** @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;
@@ -493,6 +455,15 @@ var Crop = /** @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 };
@@ -509,8 +480,8 @@ var Crop = /** @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;
@@ -521,9 +492,12 @@ var Crop = /** @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;
@@ -555,6 +529,28 @@ var Crop = /** @class */ (function () {
             parent.currSelectionPoint = null;
         }
     };
+    Crop.prototype.panToSelRangle = function (isReverse) {
+        var parent = this.parent;
+        var obj = extend({}, parent.currSelectionPoint, null, true);
+        parent.currSelectionPoint = null;
+        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 };
+        }
+        parent.currSelectionPoint = obj;
+    };
     Crop.prototype.cropCircle = function (context, isSave, isFlip) {
         var parent = this.parent;
         if (isFlip && parent.transform.currFlipState !== '') {
@@ -563,9 +559,9 @@ var Crop = /** @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();
@@ -744,7 +740,6 @@ var Crop = /** @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 } });
@@ -770,17 +765,17 @@ var Crop = /** @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;

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

@@ -286,6 +286,10 @@ var Draw = /** @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 } });
@@ -956,12 +960,14 @@ var Draw = /** @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) {
@@ -1540,17 +1546,18 @@ var Draw = /** @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) {
@@ -1563,12 +1570,12 @@ var Draw = /** @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);
                 }
             }
         }
@@ -1604,6 +1611,7 @@ var Draw = /** @class */ (function () {
                 this.updateActiveObject(actPoint, parent.activeObj);
             }
         }
+        return actPoint;
     };
     Draw.prototype.rotateText = function (canvasDraw) {
         var parent = this.parent;
@@ -1617,6 +1625,9 @@ var Draw = /** @class */ (function () {
         else {
             degree = parent.transform.degree - parent.activeObj.shapeDegree;
         }
+        if (degree === -450) {
+            degree = -90;
+        }
         if (degree < 0) {
             degree = 360 + degree;
         }
@@ -2942,11 +2953,8 @@ var Draw = /** @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();
@@ -2989,8 +2997,8 @@ var Draw = /** @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();
         }
@@ -3146,75 +3154,84 @@ var Draw = /** @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 } });
                         }
                     }
                 }