P5-1987 add responsive guidelines

dist/image-editor.js

@@ -1125,10 +1125,17 @@ function GoreHandler(viewport) {
             return this;
         }
 
+        var viewportData = viewport.getData();
         var bounds = viewport.getBounds();
-        var step   = viewport.getData().ppmm * 450;
+        var step = viewportData.ppmm * viewportData.image.scaleX * 450;
-        var count  = Math.ceil(bounds.width / step);
 
+        /*
+         * First round to 5 digits to fix pixel rounding issues when requested width is an even multiplier of 450mm.
+         * Could set precision higher but 5 decimals places should be enough, pixel rounding issues show somewhere
+         * around 15 decimals places.
+         * Then round up to get correct number of gores.
+         */
+        var count  = Math.ceil((bounds.width / step).toFixed(5));
         for (var i = 1; i < count; i++) {
             _lines.push(getLine(bounds.left + step * i));
         }

src/GoreHandler.js

@@ -43,10 +43,17 @@ function GoreHandler(viewport) {
             return this;
         }
 
+        var viewportData = viewport.getData();
         var bounds = viewport.getBounds();
-        var step   = viewport.getData().ppmm * 450;
+        var step = viewportData.ppmm * viewportData.image.scaleX * 450;
-        var count  = Math.ceil(bounds.width / step);
 
+        /*
+         * First round to 5 digits to fix pixel rounding issues when requested width is an even multiplier of 450mm.
+         * Could set precision higher but 5 decimals places should be enough, pixel rounding issues show somewhere
+         * around 15 decimals places.
+         * Then round up to get correct number of gores.
+         */
+        var count  = Math.ceil((bounds.width / step).toFixed(5));
         for (var i = 1; i < count; i++) {
             _lines.push(getLine(bounds.left + step * i));
         }