@syncfusion/ej2-image-editor 24.1.43 → 24.1.44

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.1.43
+*  version : 24.1.44
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@24.1.41",
+  "_id": "@syncfusion/ej2-image-editor@24.1.43",
   "_inBundle": false,
-  "_integrity": "sha512-MS+zJMwrlarZxJ7zqkpd8RYmmZ1SWlmDSXcAqKN67/TQ0jRmkdWgfdoSQwCbD//aS9ggC+CtUa5v5kkTKONHVQ==",
+  "_integrity": "sha512-LcI3ecnXwuM7mkbjNvkCjubyWqxgHSir+LYa2n0zChRWpLAsz5Mud5bPbJo38vJ4YdaZLO4aOgnU1IPbSunDZA==",
   "_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-24.1.41.tgz",
-  "_shasum": "bfa6dc433fa0e25027f2b3e3c3ea78e138439793",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-24.1.43.tgz",
+  "_shasum": "3f51287e0339878931977e29514a28a0e013f637",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -36,8 +36,8 @@
     "@syncfusion/ej2-buttons": "~24.1.41",
     "@syncfusion/ej2-inputs": "~24.1.41",
     "@syncfusion/ej2-navigations": "~24.1.41",
-    "@syncfusion/ej2-popups": "~24.1.41",
-    "@syncfusion/ej2-splitbuttons": "~24.1.41"
+    "@syncfusion/ej2-popups": "~24.1.44",
+    "@syncfusion/ej2-splitbuttons": "~24.1.44"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -67,7 +67,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "24.1.43",
+  "version": "24.1.44",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -82,7 +82,7 @@ var Draw = /** @class */ (function () {
                 this.updateCanvas();
                 break;
             case 'performCancel':
-                this.performCancel(args.value['isContextualToolbar']);
+                this.performCancel(args.value['isContextualToolbar'], args.value['isUndoRedo']);
                 break;
             case 'updateFlipPan':
                 this.updateFlipPan(args.value['tempSelectionObj']);
@@ -574,13 +574,11 @@ var Draw = /** @class */ (function () {
             if (destTop < 0) {
                 height += destTop;
             }
-            if (parent.currObjType.shape.toLowerCase() !== 'crop-square' && parent.currObjType.shape.toLowerCase() !== 'crop-circle') {
-                if (destLeft + destWidth > parent.lowerCanvas.width) {
-                    width -= (destLeft + destWidth - parent.lowerCanvas.width);
-                }
-                if (destTop + destHeight > parent.lowerCanvas.height) {
-                    height -= (destTop + destHeight - parent.lowerCanvas.height);
-                }
+            if (destLeft + destWidth > parent.lowerCanvas.width) {
+                width -= (destLeft + destWidth - parent.lowerCanvas.width);
+            }
+            if (destTop + destHeight > parent.lowerCanvas.height) {
+                height -= (destTop + destHeight - parent.lowerCanvas.height);
             }
         }
         switch (parent.currObjType.shape.toLowerCase()) {
@@ -2202,7 +2200,7 @@ var Draw = /** @class */ (function () {
                 parent.img.destHeight = maxDimension.width;
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.height) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width + 1) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.width) / 2;
             parent.img.destWidth = maxDimension.height;
             parent.img.destHeight = maxDimension.width;
         }
@@ -2218,7 +2216,12 @@ var Draw = /** @class */ (function () {
                 parent.img.destHeight = maxDimension.height;
             }
             parent.img.destLeft = (parent.lowerCanvas.clientWidth - maxDimension.width) / 2;
-            parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            if (degree === 0) {
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height + 1) / 2;
+            }
+            else {
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - maxDimension.height) / 2;
+            }
             parent.img.destWidth = maxDimension.width;
             parent.img.destHeight = maxDimension.height;
         }
@@ -2533,14 +2536,14 @@ var Draw = /** @class */ (function () {
             parent.cancelCropSelection = null;
         }
     };
-    Draw.prototype.performCancel = function (isContextualToolbar) {
+    Draw.prototype.performCancel = function (isContextualToolbar, isUndoRedo) {
         var parent = this.parent;
         var straightenObj = { bool: parent.isStraightening };
         isContextualToolbar = isContextualToolbar ? isContextualToolbar : false;
         var obj = { bool: false };
         parent.allowDownScale = true;
         parent.notify('selection', { prop: 'getFreehandDrawEditing', onPropertyChange: false, value: { obj: obj } });
-        if (JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
+        if (isNullOrUndefined(isUndoRedo) && JSON.stringify(parent.frameObj) !== JSON.stringify(parent.tempFrameObj)) {
             extend(parent.frameObj, parent.tempFrameObj);
             this.renderImage(null, null, true);
         }
@@ -3304,16 +3307,16 @@ var Draw = /** @class */ (function () {
     Draw.prototype.setClientTransDim = function (isPreventDimension) {
         var parent = this.parent;
         if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
-            parent.img.destLeft = (parent.lowerCanvas.width - parent.img.destHeight) / 2;
-            parent.img.destTop = (parent.lowerCanvas.height - parent.img.destWidth) / 2;
+            parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destHeight) / 2;
+            parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destWidth + 1) / 2;
             var temp = parent.img.destWidth;
             parent.img.destWidth = parent.img.destHeight;
             parent.img.destHeight = temp;
         }
         else {
             if (isNullOrUndefined(isPreventDimension)) {
-                parent.img.destLeft = (parent.lowerCanvas.width - parent.img.destWidth) / 2;
-                parent.img.destTop = (parent.lowerCanvas.height - parent.img.destHeight) / 2;
+                parent.img.destLeft = (parent.lowerCanvas.clientWidth - parent.img.destWidth) / 2;
+                parent.img.destTop = (parent.lowerCanvas.clientHeight - parent.img.destHeight + 1) / 2;
             }
         }
     };

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

@@ -4364,7 +4364,15 @@ var Selection = /** @class */ (function () {
                     this.getCurrentFlipState();
                 }
                 else {
+                    var totalPannedInternalPoint = extend({}, parent.panPoint.totalPannedInternalPoint, {}, true);
+                    var destPoints = { startX: parent.img.destLeft, startY: parent.img.destTop, width: parent.img.destWidth,
+                        height: parent.img.destHeight };
                     parent.notify('draw', { prop: 'callUpdateCurrTransState', onPropertyChange: false });
+                    parent.panPoint.totalPannedInternalPoint = totalPannedInternalPoint;
+                    parent.img.destLeft = destPoints.startX;
+                    parent.img.destTop = destPoints.startY;
+                    parent.img.destWidth = destPoints.width;
+                    parent.img.destHeight = destPoints.height;
                     parent.notify('freehand-draw', { prop: 'freehandRedraw', onPropertyChange: false,
                         value: { context: this.lowerContext, points: null } });
                 }

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

@@ -1189,11 +1189,11 @@ var Transform = /** @class */ (function () {
             if (parent.img.destTop > 0) {
                 parent.img.destTop = 0;
             }
-            if (parent.img.destLeft + maxDimension.width < parent.lowerCanvas.width) {
-                parent.img.destLeft = parent.lowerCanvas.width - parent.img.destWidth;
+            if (parent.img.destLeft + maxDimension.width < parent.lowerCanvas.clientWidth) {
+                parent.img.destLeft = parent.lowerCanvas.clientWidth - parent.img.destWidth;
             }
-            if (parent.img.destTop + maxDimension.height < parent.lowerCanvas.height) {
-                parent.img.destTop = parent.lowerCanvas.height - parent.img.destHeight;
+            if (parent.img.destTop + maxDimension.height < parent.lowerCanvas.clientHeight) {
+                parent.img.destTop = parent.lowerCanvas.clientHeight - parent.img.destHeight;
             }
         }
         return maxDimension;

package/src/image-editor/action/undo-redo.js

@@ -382,7 +382,7 @@ var UndoRedo = /** @class */ (function () {
                         this.tempCurrSelPoint = extend({}, parent.currSelectionPoint, {}, true);
                         parent.currSelectionPoint = null;
                     }
-                    parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
+                    parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null, isUndoRedo: true } });
                     parent.currObjType.isActiveObj = false;
                     if (parent.transform.straighten !== 0) {
                         parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
@@ -945,6 +945,16 @@ var UndoRedo = /** @class */ (function () {
         this.parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: { obj: arrowObj } });
         var tempArrowObj = extend({}, arrowObj['arrowDimension'], {}, true);
         if (parent.transform.zoomFactor > 0 && (obj.length > 0 || point.length > 0)) {
+            if (obj.length > 0) {
+                for (var i = 0; i < obj.length; i++) {
+                    if (obj[i].currIndex) {
+                        continue;
+                    }
+                    else {
+                        obj[i].currIndex = 'shape_' + (i + 1);
+                    }
+                }
+            }
             parent.objColl = obj;
             parent.pointColl = point;
             var isUndoRedo = parent.isUndoRedo;

package/src/image-editor/renderer/toolbar.js

@@ -3644,6 +3644,9 @@ var ToolbarModule = /** @class */ (function () {
                     qtArea.style.top = point.startY - (height + (height / 1.5)) + 'px';
                 }
             }
+            if (parseFloat(qtArea.style.top) < 0) {
+                qtArea.style.top = '0px';
+            }
         }
     };
     ToolbarModule.prototype.refreshDropDownBtn = function (isDisabled) {

package/styles/bootstrap-dark.css

@@ -496,14 +496,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -519,6 +522,10 @@
   top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/bootstrap.css

@@ -496,14 +496,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -519,6 +522,10 @@
   top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/bootstrap4.css

@@ -494,14 +494,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -517,6 +520,10 @@
   top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/bootstrap5-dark.css

@@ -512,14 +512,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -535,6 +538,10 @@
   top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/bootstrap5.css

@@ -512,14 +512,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -535,6 +538,10 @@
   top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fabric-dark.css

@@ -496,14 +496,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -519,6 +522,10 @@
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 9px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fabric.css

@@ -496,14 +496,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -519,6 +522,10 @@
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 9px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fluent-dark.css

@@ -507,14 +507,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -530,6 +533,10 @@
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/fluent.css

@@ -507,14 +507,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -530,6 +533,10 @@
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/highcontrast-light.css

@@ -494,14 +494,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -517,6 +520,10 @@
   top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/highcontrast.css

@@ -498,14 +498,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -521,6 +524,10 @@
   top: calc(50% - 6px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 8px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/image-editor/_layout.scss

@@ -472,18 +472,17 @@
     }
   }
   .e-ie-straighten-value-span,
-  .e-ie-straighten-span {
-    font-size: 14px;
+  .e-ie-straighten-span,
+  .e-ie-toolbar-straighten {
+    font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
     padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
     height: auto;
-    @if $skin-name == 'Material3' {
-      margin-left: 8px;
-      padding-right: 2px;
-    }
+    margin-left: 8px;
+    padding-right: 2px;
   }
 
   .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -503,6 +502,10 @@
     }
   }
 
+  .e-ie-finetune-value-span {
+    top: 26% !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
     @if $skin-name == 'Material3' {
       height: 22px !important; /* stylelint-disable-line declaration-no-important */

package/styles/image-editor/bootstrap-dark.css

@@ -496,14 +496,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -519,6 +522,10 @@
   top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
 }

package/styles/image-editor/bootstrap.css

@@ -496,14 +496,17 @@
   height: 54px !important; /* stylelint-disable-line declaration-no-important */
 }
 .e-ie-straighten-value-span,
-.e-ie-straighten-span {
-  font-size: 14px;
+.e-ie-straighten-span,
+.e-ie-toolbar-straighten {
+  font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
   padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
   padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
   height: auto;
+  margin-left: 8px;
+  padding-right: 2px;
 }
 
 .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -519,6 +522,10 @@
   top: calc(50% - 5px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.e-ie-finetune-value-span {
+  top: 26% !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
   top: calc(50% - 7px) !important; /* stylelint-disable-line declaration-no-important */
 }