P5-2895 - Fix and sanitize cropping numbers

dist/image-editor.js

@@ -1193,9 +1193,17 @@ function ImageDataHandler(img) {
 
         var dragAxis = img.canvas.getViewport().getData().axis;
 
+        var leftDiff = viewportBounds.left - img.left;
+        var topDiff = viewportBounds.top - img.top;
+
+        // Robustness measure to handle the extreme precision of shape positioning in canvas.
+        var countAsZeroLimit = 1e-5;
+        leftDiff = Math.abs(leftDiff) < countAsZeroLimit ? 0 : leftDiff;
+        topDiff = Math.abs(topDiff) < countAsZeroLimit ? 0 : topDiff;
+
         _cropData = {
-            x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
+            x: dragAxis === 'x' ? (leftDiff) / (img.width * img.scaleX) : 0,
-            y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
+            y: dragAxis === 'y' ? (topDiff) / (img.height * img.scaleY) : 0,
             viewportWidth: viewportBounds.width,
             viewportHeight: viewportBounds.height,
         };
@@ -1792,8 +1800,8 @@ function Viewport(canvas) {
             fill: 'transparent',
             width: _data.width,
             height: _data.height,
-            stroke: '#fff',
+            stroke: canvas.__type === 'canvas' ? 'transparent' : '#fff',
-            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
+            strokeWidth: _borderWidth,
         });
 
         _rect.width += _borderWidth;

src/ImageDataHandler.js

@@ -21,9 +21,17 @@ function ImageDataHandler(img) {
 
         var dragAxis = img.canvas.getViewport().getData().axis;
 
+        var leftDiff = viewportBounds.left - img.left;
+        var topDiff = viewportBounds.top - img.top;
+
+        // Robustness measure to handle the extreme precision of shape positioning in canvas.
+        var countAsZeroLimit = 1e-5;
+        leftDiff = Math.abs(leftDiff) < countAsZeroLimit ? 0 : leftDiff;
+        topDiff = Math.abs(topDiff) < countAsZeroLimit ? 0 : topDiff;
+
         _cropData = {
-            x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
+            x: dragAxis === 'x' ? (leftDiff) / (img.width * img.scaleX) : 0,
-            y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
+            y: dragAxis === 'y' ? (topDiff) / (img.height * img.scaleY) : 0,
             viewportWidth: viewportBounds.width,
             viewportHeight: viewportBounds.height,
         };

src/Viewport.js

@@ -75,8 +75,8 @@ function Viewport(canvas) {
             fill: 'transparent',
             width: _data.width,
             height: _data.height,
-            stroke: '#fff',
+            stroke: canvas.__type === 'canvas' ? 'transparent' : '#fff',
-            strokeWidth: canvas.__type === 'canvas' ? 0 : _borderWidth
+            strokeWidth: _borderWidth,
         });
 
         _rect.width += _borderWidth;