More convenience: Allow for SVG border as a standard container

+ Allow drop file multiple times before choosing

Author: DerGenaue

index.html

@@ -57,9 +57,6 @@
 				if(splash){
 					splash.remove();
 				}
-				document.removeEventListener('dragover', FileDragHover, false);
-				document.removeEventListener('dragleave', FileDragHover, false);
-				document.removeEventListener('drop', FileDrop, false);
 				svgnest.setAttribute('style','display: block');
 			}
 
@@ -146,6 +143,11 @@
 			};
 
 			function startnest(){
+				// Once started, don't allow this anymore
+				document.removeEventListener('dragover', FileDragHover, false);
+				document.removeEventListener('dragleave', FileDragHover, false);
+				document.removeEventListener('drop', FileDrop, false);
+				
 				SvgNest.start(progress, renderSvg);
 				startlabel.innerHTML = 'Stop Nest';
 				start.className = 'button spinner';
@@ -334,7 +336,22 @@
 					if(reader.result){
 						try{
 							var svg = window.SvgNest.parsesvg(reader.result);
+							{
+								var wholeSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+								// Copy relevant scaling info
+								wholeSVG.setAttribute('width',svg.getAttribute('width'));
+								wholeSVG.setAttribute('height',svg.getAttribute('height'));
+								wholeSVG.setAttribute('viewBox',svg.getAttribute('viewBox'));
+								var rect = document.createElementNS(wholeSVG.namespaceURI,'rect');
+								rect.setAttribute('x', wholeSVG.viewBox.baseVal.x);
+								rect.setAttribute('y', wholeSVG.viewBox.baseVal.x);
+								rect.setAttribute('width', wholeSVG.viewBox.baseVal.width);
+								rect.setAttribute('height', wholeSVG.viewBox.baseVal.height);
+								rect.setAttribute('class', 'fullRect');
+								wholeSVG.appendChild(rect);
+							}
 							display.innerHTML = '';
+							display.appendChild(wholeSVG); // As a default bin in background
 							display.appendChild(svg);
 						}
 						catch(e){
@@ -349,6 +366,7 @@
 						start.className = 'button start disabled';
 
 						attachSvgListeners(svg);
+						attachSvgListeners(wholeSVG);
 					}
 				}
 
@@ -366,11 +384,15 @@
 							}
 							var currentbin = document.querySelector('#select .active');
 							if(currentbin){
-								currentbin.removeAttribute('class');
+								var className = currentbin.getAttribute('class').replace('active', '').trim();
+								if(!className)
+									currentbin.removeAttribute('class');
+								else
+									currentbin.setAttribute('class', className);
 							}
 
 							window.SvgNest.setbin(this);
-							this.setAttribute('class','active');
+							this.setAttribute('class',(this.getAttribute('class') ? this.getAttribute('class')+' ' : '') + 'active');
 
 							start.className = 'button start animated bounce';
 							message.className = '';

style.css

@@ -403,14 +403,18 @@ margin-top: 2em;
 #select, #bins{
 float: left;
 width: 69%;
+position: relative;
 }
 
 #select svg, #bins svg{
 width: 100%;
 height: auto;
+position: absolute;
+top: 0;
 margin: 0;
 display: block;
 overflow: visible;
+pointer-events: none;
 }
 
 #select svg *{
@@ -420,6 +424,16 @@ stroke: #3bb34a !important;
 stroke-width: 2px !important;
 vector-effect: non-scaling-stroke !important;
 stroke-linejoin: round !important;
+pointer-events: fill;
+}
+
+#select svg *.fullRect{
+fill: #eee !important;
+fill-opacity: 1 !important;
+stroke: #eee !important;
+stroke-width: 2px !important;
+vector-effect: non-scaling-stroke !important;
+stroke-linejoin: round !important;
 }
 
 #select svg *:hover{