Merge pull request #16 from brunopicinin/fix-image-sizing

Fix image sizing after drop. Also improve zoom behavior.

Author: capjamesg

index.html

@@ -35,7 +35,7 @@
                     <li><a href="https://github.com/roboflow/polygonzone" target="_blank">View Source Code</a></li>
                 </ul>
             </nav>
-            <div class="flex">
+            <div class="content">
                 <div class="left">
                     <div class="how-to section">
                         <h1>PolygonZone</h1>
@@ -139,7 +139,9 @@ <h2>JSON Points</h2>
                         </div>
                     </div>
 
-                    <canvas id="canvas"></canvas>
+                    <div class="image-container">
+                        <canvas id="canvas"></canvas>
+                    </div>
                 </div>
             </div>
         </main>

script.js

@@ -15,6 +15,7 @@ var color_choices = [
 
 var radiansPer45Degrees = Math.PI / 4;
 
+var imageContainer = document.querySelector('.image-container');
 var canvas = document.getElementById('canvas');
 var mainCtx = canvas.getContext('2d');
 var offScreenCanvas = document.createElement('canvas');
@@ -82,16 +83,30 @@ function isClockwise(vertices) {
 }
 
 function zoom(clicks) {
-    // if w > 60em, stop
-    if ((scaleFactor + clicks * scaleSpeed) * img.width > 40 * 16) {
-        return;
+    var newScaleFactor = scaleFactor + clicks * scaleSpeed;
+    newScaleFactor = Math.max(0.1, Math.min(newScaleFactor, 1));
+
+    const maxWidth = imageContainer.offsetWidth * 0.95;
+    const maxHeight = imageContainer.offsetHeight * 0.95;
+
+    let newWidth = img.width * newScaleFactor;
+    let newHeight = img.height * newScaleFactor;
+
+    if (newWidth > maxWidth) {
+        newHeight = (maxWidth / newWidth) * newHeight;
+        newWidth = maxWidth;
+        newScaleFactor = newWidth / img.width;
     }
-    scaleFactor += clicks * scaleSpeed;
-    scaleFactor = Math.max(0.1, Math.min(scaleFactor, 0.8));
-    var w = img.width * scaleFactor;
-    var h = img.height * scaleFactor;
-    canvas.style.width = w + 'px';
-    canvas.style.height = h + 'px';
+
+    if (newHeight > maxHeight) {
+        newWidth = (maxHeight / newHeight) * newWidth;
+        newHeight = maxHeight;
+        newScaleFactor = newHeight / img.height;
+    }
+
+    scaleFactor = newScaleFactor;
+    canvas.style.width = newWidth + 'px';
+    canvas.style.height = newHeight + 'px';
 }
 
 function onPathClose() {
@@ -356,6 +371,27 @@ canvas.addEventListener('drop', function(e) {
         canvas.height = img.height;
         offScreenCanvas.width = img.width;
         offScreenCanvas.height = img.height;
+
+        const maxWidth = imageContainer.offsetWidth * 0.95;
+        const maxHeight = imageContainer.offsetHeight * 0.95;
+
+        let newWidth = img.width;
+        let newHeight = img.height;
+
+        if (newWidth > maxWidth) {
+            newHeight = (maxWidth / newWidth) * newHeight;
+            newWidth = maxWidth;
+        }
+
+        if (newHeight > maxHeight) {
+            newWidth = (maxHeight / newHeight) * newWidth;
+            newHeight = maxHeight;
+        }
+
+        scaleFactor = newWidth / img.width;
+
+        canvas.style.width = newWidth + 'px';
+        canvas.style.height = newHeight + 'px';
         canvas.style.borderRadius = '10px';
         offScreenCtx.drawImage(img, 0, 0);
         blitCachedCanvas();

styles.css

@@ -18,7 +18,16 @@ pre {
 }
 body {
     background: white;
-    min-height: 50vh;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+}
+main {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
 }
 h1 {
     font-size: 28px;
@@ -31,9 +40,6 @@ details {
     margin: 0;
     text-align: left;
 }
-.right {
-    min-height: calc(100vh - 10em);
-}
 nav {
     border-bottom: 1px solid lightgrey;
     display: flex;
@@ -59,8 +65,9 @@ a {
     color: #5400ec;
     text-decoration: none;
 }
-.flex {
+.content {
     display: flex;
+    flex-grow: 1;
 }
 .left {
     flex: 40%;
@@ -72,9 +79,14 @@ a {
     flex: 60%;
     padding: 0 2em;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+}
+.image-container {
+    flex-grow: 1;
 }
 @media screen and (max-width: 900px) {
-    .flex {
+    .content {
         display: block;
     }
     .left, .right {