JI-5681 fix crop selector sizing in edge (#202)

* JI-5681 fix crop selector sizing in edge

* JI-5681 fix floating point cropper selector dimensions

* JI-5681 put back padding value

Author: devland

libs/cropper.js

@@ -96,7 +96,7 @@ function Cropper(options) {
       const parentBounds = this.canvas.parentElement.getBoundingClientRect();
       if (top) {
         const ySpan = this.selector.offsetTop + this.selector.offsetHeight;
-        let top = event.pageY - parentBounds.top;
+        let top = Math.round(event.pageY) - parentBounds.top;
         if (top < 0) {
           top = 0;
         }
@@ -108,7 +108,7 @@ function Cropper(options) {
       }
       if (left) {
         const xSpan = this.selector.offsetLeft + this.selector.offsetWidth;
-        let left = event.pageX - parentBounds.left;
+        let left = Math.round(event.pageX) - parentBounds.left;
         if (left < 0) {
           left = 0;
         }
@@ -120,7 +120,7 @@ function Cropper(options) {
       }
       if (bottom) {
         const maxHeight = this.canvas.offsetHeight - this.selector.offsetTop;
-        height = event.pageY - parentBounds.top - this.selector.offsetTop;
+        height = Math.round(event.pageY) - parentBounds.top - this.selector.offsetTop;
         if (height < 0) {
           height = 0;
         }
@@ -130,7 +130,7 @@ function Cropper(options) {
       }
       if (right) {
         const maxWidth = this.canvas.offsetWidth - this.selector.offsetLeft;
-        width = event.pageX - parentBounds.left - this.selector.offsetLeft;
+        width = Math.round(event.pageX) - parentBounds.left - this.selector.offsetLeft;
         if (width < 0) {
           width = 0;
         }
@@ -366,7 +366,7 @@ function Cropper(options) {
     this.mirror.width = width;
     this.mirror.height = height;
     this.mirrorContext.drawImage(this.image, selectedX, selectedY, selectedWidth, selectedHeight, 0, 0, width, height);
-    this.mirror.toBlob(handleBlob(callback), 'image/png', 1);
+    this.mirror.toBlob(handleBlob(callback), 'image/png');
   }
 
   /**
@@ -388,7 +388,7 @@ function Cropper(options) {
     this.mirrorContext.rotate(90 * rotation * Math.PI / 180);
     this.mirrorContext.translate(-this.image.width / 2, -this.image.height / 2);
     this.mirrorContext.drawImage(this.image, 0, 0);
-    this.mirror.toBlob(handleBlob(callback), 'image/png', 1);
+    this.mirror.toBlob(handleBlob(callback), 'image/png');
   }
 
   /**

styles/css/application.css

@@ -6,10 +6,8 @@ body.h5p-editor-image-popup {
   position: fixed;
   top: 0;
   left: 0;
-
   width: 100%;
   height: 100%;
-
   background: rgba(0,0,0,0.8);
   padding: 3em 1em;
   box-sizing: border-box;
@@ -29,13 +27,6 @@ body.h5p-editor-image-popup {
   display: inline-block;
   position: relative;
   top: 0;
-  left: 50%;
-  height: auto;
-  width: 100%;
-  max-height: 100%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
   background: #fff;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;