added zoom controls

if your paths lie outside the workspace or canvas it can get clipped
off. Now you can zoom in and out so that's not an issue

index.html

@@ -118,8 +118,11 @@
 			var configbutton = document.getElementById('configbutton');
 			var configsave = document.getElementById('configsave');
 
+			var zoomin = document.getElementById('zoominbutton');
+			var zoomout = document.getElementById('zoomoutbutton');
 
 			var isworking = false;
+
 			start.onclick = function(){
 				iterations = 0;
 				if(isworking){
@@ -139,6 +142,8 @@
 				start.className = 'button spinner';
 				configbutton.className = 'button config disabled';
 				config.className = '';
+				zoomin.className = 'button zoomin disabled';
+				zoomout.className = 'button zoomout disabled';
 				isworking = true;
 			}
 
@@ -147,6 +152,8 @@
 				startlabel.innerHTML = 'Start Nest';
 				start.className = 'button start';
 				configbutton.className = 'button config';
+				zoomin.className = 'button zoomin';
+				zoomout.className = 'button zoomout';
 				isworking = false;
 			}
 
@@ -236,6 +243,33 @@
 				saveAs(blob, "SVGnest-output.svg");
 			}
 
+			var zoomlevel = 1.0;
+
+			zoomin.onclick = function(){
+				if(this.className == 'button zoomin disabled'){
+					return false;
+				}
+				zoomlevel *= 1.2;
+				var svg = document.querySelector('#select svg');
+				if(svg){
+					svg.setAttribute('style', 'transform-origin: top left; transform:scale('+zoomlevel+'); -webkit-transform:scale('+zoomlevel+'); -moz-transform:scale('+zoomlevel+'); -ms-transform:scale('+zoomlevel+'); -o-transform:scale('+zoomlevel+');');
+				}
+			}
+
+			zoomout.onclick = function(){
+				if(this.className == 'button zoomout disabled'){
+					return false;
+				}
+				zoomlevel *= 0.8;
+				if(zoomlevel < 0.02){
+					zoomlevel = 0.02;
+				}
+				var svg = document.querySelector('#select svg');
+				if(svg){
+					svg.setAttribute('style', 'transform-origin: top left; transform:scale('+zoomlevel+'); -webkit-transform:scale('+zoomlevel+'); -moz-transform:scale('+zoomlevel+'); -ms-transform:scale('+zoomlevel+'); -o-transform:scale('+zoomlevel+');');
+				}
+			}
+
 			fileinput.onchange = function(e){			
 				var file = e.target.files[0];
 				if(!file){
@@ -435,7 +469,9 @@ <h1>Some parts seem to slightly overlap?</h1>
 				<ul class="nav">
 				<li class="button start disabled" id="start"><span id="startlabel">Start Nest</span></li>
 				<li class="button download disabled" id="download">Download SVG</li>
-				<li class="button config" id="configbutton">Configuration</li>
+				<li class="button config" id="configbutton"></li>
+				<li class="button zoomin" id="zoominbutton"></li>
+				<li class="button zoomout" id="zoomoutbutton"></li>
 				</ul>
 
 				<div id="config">

style.css

@@ -141,6 +141,16 @@ background-position: 1.8em 50%;
 padding-left: 3.9em;
 }
 
+.button.zoomin{
+background: #fff url(img/zoomin.svg) no-repeat;
+background-size: 1.5em 1.5em;
+}
+
+.button.zoomout{
+background: #fff url(img/zoomout.svg) no-repeat;
+background-size: 1.5em 1.5em;
+}
+
 .button:hover{
 color: #9dc86f;
 box-shadow: 0 2px 1px #d7dae1;
@@ -269,7 +279,7 @@ overflow: hidden;
 width: 20em;
 position: absolute;
 top: 0;
-right: 0.5em;
+left: 24.5em;
 background-color: #fff;
 border-radius: 0.5em;
 transition: max-height  0.5s;
@@ -289,6 +299,17 @@ box-shadow: 0 2px 1px #d7dae1;
 #configbutton{
 position: relative;
 z-index: 2;
+width: 3em;
+padding: 0;
+height: 2.5em;
+background-position: 50%;
+}
+
+#zoominbutton, #zoomoutbutton{
+width: 3em;
+padding: 0;
+height: 2.5em;
+background-position: 50%;
 }
 
 #configbutton.close:hover{