From d62627c8a54a788c8ed8bf2578ab60d4868dfe4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= <osd@foosel.net>
Date: Sun, 5 Jan 2014 13:22:42 +0100
Subject: [PATCH] Made zooming on model work too

---
 .../static/gcodeviewer/js/renderer.js         | 25 ++++++++++---------
 src/octoprint/templates/index.jinja2          |  3 +++
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/octoprint/static/gcodeviewer/js/renderer.js b/src/octoprint/static/gcodeviewer/js/renderer.js
index c631764e..5e1c93c0 100644
--- a/src/octoprint/static/gcodeviewer/js/renderer.js
+++ b/src/octoprint/static/gcodeviewer/js/renderer.js
@@ -11,7 +11,6 @@ GCODE.renderer = (function(){
     var canvas;
     var ctx;
     var zoomFactor= 2.8, zoomFactorDelta = 0.4;
-    var scaleF = 0;
     var gridStep=10;
     var ctxHeight, ctxWidth;
     var prevX=0, prevY=0;
@@ -52,6 +51,7 @@ GCODE.renderer = (function(){
 
     var offsetModelX = 0, offsetModelY = 0;
     var offsetBedX = 0, offsetBedY = 0;
+    var scaleX = 1, scaleY = 1;
     var speeds = [];
     var speedsByLayer = {};
 
@@ -443,10 +443,12 @@ GCODE.renderer = (function(){
             speeds = mdlInfo.speeds;
             speedsByLayer = mdlInfo.speedsByLayer;
 
+            // determine bed and model offsets
             if (ctx) ctx.translate(-offsetModelX, -offsetModelY);
             if (renderOptions["centerViewport"] || renderOptions["zoomInOnModel"]) {
-                offsetModelX = (renderOptions["bed"]["x"] / 2 - (mdlInfo.min.x + mdlInfo.modelSize.x / 2)) * zoomFactor;
-                offsetModelY = -1 * (renderOptions["bed"]["y"] / 2 - (mdlInfo.min.y + mdlInfo.modelSize.y / 2)) * zoomFactor;
+                var canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
+                offsetModelX = canvasCenter.x - (mdlInfo.min.x + mdlInfo.modelSize.x / 2) * zoomFactor;
+                offsetModelY = canvasCenter.y + (mdlInfo.min.y + mdlInfo.modelSize.y / 2) * zoomFactor;
                 offsetBedX = 0;
                 offsetBedY = 0;
             } else if (renderOptions["moveModel"]) {
@@ -464,26 +466,25 @@ GCODE.renderer = (function(){
 
             var pt = ctx.transformedPoint(canvas.width/2,canvas.height/2);
             var transform = ctx.getTransform();
-            var scaleX, scaleY;
-            if (scaleF && transform.a && transform.d) {
-                scaleX = scaleF / transform.a;
-                scaleY = scaleF / transform.d;
+            var scaleF;
+            if (scaleX && scaleY && transform.a && transform.d) {
                 ctx.translate(pt.x, pt.y);
-                ctx.scale(1 / (0.98 * scaleX), 1 / (0.98 * scaleY));
+                ctx.scale(1 / scaleX, 1 / scaleY);
                 ctx.translate(-pt.x, -pt.y);
-                pt = ctx.transformedPoint(canvas.width/2,canvas.height/2);
             }
             if (renderOptions["zoomInOnModel"]) {
-                scaleF = mdlInfo.modelSize.x > mdlInfo.modelSize.y ? (canvas.width) / mdlInfo.modelSize.x / zoomFactor : (canvas.height) / mdlInfo.modelSize.y / zoomFactor;
+                scaleF = mdlInfo.modelSize.x > mdlInfo.modelSize.y ? (canvas.width - 10) / mdlInfo.modelSize.x : (canvas.height - 10) / mdlInfo.modelSize.y;
+                scaleF /= zoomFactor;
                 if (transform.a && transform.d) {
                     scaleX = scaleF / transform.a;
                     scaleY = scaleF / transform.d;
                     ctx.translate(pt.x,pt.y);
-                    ctx.scale(0.98 * scaleX, 0.98 * scaleY);
+                    ctx.scale(scaleX, scaleY);
                     ctx.translate(-pt.x, -pt.y);
                 }
             } else {
-                scaleF = 0;
+                scaleX = 1;
+                scaleY = 1;
             }
 
             this.render(layerNum, 0, model[layerNum].length);
diff --git a/src/octoprint/templates/index.jinja2 b/src/octoprint/templates/index.jinja2
index 15654091..81561e53 100644
--- a/src/octoprint/templates/index.jinja2
+++ b/src/octoprint/templates/index.jinja2
@@ -456,6 +456,9 @@
                                         <label class="checkbox">
                                             <input type="checkbox" data-bind="checked: renderer_centerViewport">Center viewport on model
                                         </label>
+                                        <label class="checkbox">
+                                            <input type="checkbox" data-bind="checked: renderer_zoomOnModel">Zoom in on model
+                                        </label>
                                     </p>
 
                                     <p>