From 022825195a2b90aa4ec662d2bf1e1fc9285c1845 Mon Sep 17 00:00:00 2001
From: Anders Gustafsson <anders@photowall.se>
Date: Thu, 20 Sep 2018 10:09:39 +0200
Subject: [PATCH] P5-3034 Image editor frame size wrong when on inches

---
 dist/image-editor.js       |  4 +---
 examples/canvas/index.html | 20 +++++++++++++++++++-
 src/FrameHandler.js        |  4 +---
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/dist/image-editor.js b/dist/image-editor.js
index eecd485..b24c833 100644
--- a/dist/image-editor.js
+++ b/dist/image-editor.js
@@ -1043,9 +1043,7 @@ function FrameHandler(viewport) {
 
         var vpData = viewport.getData();
         var realFrameSize = 29; // Actual real life frame size width in mm.
-        if (vpData.dim.units === 'inch') {
-            realFrameSize /= 2.54;
-        }
+
 
         _frameSize = vpData.ppmm * realFrameSize * viewport.canvas.getImage().scaleX;
 
diff --git a/examples/canvas/index.html b/examples/canvas/index.html
index e07511c..e79eb97 100644
--- a/examples/canvas/index.html
+++ b/examples/canvas/index.html
@@ -17,6 +17,11 @@
             <option value="black">Black</option>
             <option value="image">Image</option>
         </select>
+        <label>Unit:</label>
+        <select id="unit">
+            <option value="cm">Cm</option>
+            <option value="inch">Inches</option>
+        </select>
         <canvas id="image-editor" width="800" height="600"></canvas>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
@@ -25,6 +30,7 @@
         <script type="text/javascript">
             var width = document.getElementById('width');
             var height = document.getElementById('height');
+            var unit = document.getElementById('unit');
             var frame = document.getElementById('frame');
             var posX = document.getElementById('pos-x');
             var posY = document.getElementById('pos-y');
@@ -35,7 +41,7 @@
             });
 
             function cropImage() {
-                editor.crop(width.value, height.value);
+                editor.crop(width.value, height.value, unit.value);
             }
 
             function setFrame() {
@@ -57,10 +63,22 @@
                 }
             }
 
+            function setUnit() {
+                if (unit.value == 'inch') {
+                    width.value = Math.round(width.value / 2.54 * 100) / 100;
+                    height.value = Math.round(height.value / 2.54 * 100) / 100;
+                } else {
+                    width.value = Math.round(width.value * 2.54);
+                    height.value = Math.round(height.value * 2.54);
+                }
+                cropImage();
+            }
+
             //add event listeners
             width.addEventListener('keyup', cropImage);
             height.addEventListener('keyup', cropImage);
             frame.addEventListener('change', setFrame);
+            unit.addEventListener('change', setUnit);
             window.addEventListener('resize', resizeEditor);
             $(document).on('PIE:dragged', showCoordinates);
 
diff --git a/src/FrameHandler.js b/src/FrameHandler.js
index 276af24..21f36a9 100644
--- a/src/FrameHandler.js
+++ b/src/FrameHandler.js
@@ -89,9 +89,7 @@ function FrameHandler(viewport) {
 
         var vpData = viewport.getData();
         var realFrameSize = 29; // Actual real life frame size width in mm.
-        if (vpData.dim.units === 'inch') {
-            realFrameSize /= 2.54;
-        }
+
 
         _frameSize = vpData.ppmm * realFrameSize * viewport.canvas.getImage().scaleX;