Enforce minimum preview scale, plus scrolling

scripts/interface/Interface.js

@@ -38,6 +38,7 @@ define(['codemirror'], (CodeMirror) => {
 			this.generator = generator;
 			this.renderer = renderer;
 			this.defaultCode = defaultCode;
+			this.minScale = 1.5;
 
 			this.debounced = null;
 			this.latestSeq = null;
@@ -56,6 +57,7 @@ define(['codemirror'], (CodeMirror) => {
 		build(container) {
 			this.codePane = makeNode('div', {'class': 'pane-code'});
 			this.viewPane = makeNode('div', {'class': 'pane-view'});
+			this.viewPaneInner = makeNode('div', {'class': 'pane-view-inner'});
 
 			this.downloadPNG = makeNode('a', {
 				'href': '#',
@@ -80,6 +82,7 @@ define(['codemirror'], (CodeMirror) => {
 			this.options.appendChild(this.downloadPNG);
 			this.options.appendChild(this.downloadSVG);
 			this.viewPane.appendChild(this.options);
+			this.viewPane.appendChild(this.viewPaneInner);
 
 			container.appendChild(this.codePane);
 			container.appendChild(this.viewPane);
@@ -88,12 +91,18 @@ define(['codemirror'], (CodeMirror) => {
 				value: this.defaultCode,
 				mode: '',
 			});
-			this.viewPane.appendChild(this.renderer.svg());
+			this.viewPaneInner.appendChild(this.renderer.svg());
 
 			this.code.on('change', () => this.update(false));
 			this.update();
 		}
 
+		updateMinSize(width, height) {
+			const style = this.viewPaneInner.style;
+			style.minWidth = Math.ceil(width * this.minScale) + 'px';
+			style.minHeight = Math.ceil(height * this.minScale) + 'px';
+		}
+
 		redraw(sequence) {
 			clearTimeout(this.debounced);
 			this.debounced = null;
@@ -101,6 +110,7 @@ define(['codemirror'], (CodeMirror) => {
 			this.svgDirty = true;
 			this.renderedSeq = sequence;
 			this.renderer.render(sequence);
+			this.updateMinSize(this.renderer.width, this.renderer.height);
 		}
 
 		update(immediate = true) {

styles/main.css

@@ -23,6 +23,10 @@ html, body {
 	top: 0;
 	bottom: 0;
 	right: 0;
+	overflow: auto;
+}
+
+.pane-view-inner {
 }
 
 .options {