Demo: Add Re-render button, add column to layout (#361)

Switch to four column layout from three

* demo: adjust sample box height

prevents second line showing for Land der Berge

demo/index.html

@@ -19,14 +19,14 @@
     <img src="./favicon.ico?" class="ui image">
     <%= htmlWebpackPlugin.options.title %>
 </h1>
-<div class="ui three column grid container">
+<div class="ui four column grid container">
     <div class="column">
         <h3 class="ui header">Select a sample:</h3>
-        <select class="ui selection dropdown" id="selectSample" style="width:320px; height:40%"></select>
+        <select class="ui selection dropdown" id="selectSample" style="width:320px; height:38%"></select>
     </div>
     <div class="column">
         <h3 class="ui header">Render backend:</h3>
-        <select class="ui selection dropdown" id="backend-select" value="svg" style="height:40%">
+        <select class="ui selection dropdown" id="backend-select" value="svg" style="height:38%">
             <option value="svg">SVG</option>
             <option value="canvas">Canvas</option>>
         </select>
@@ -108,6 +108,12 @@
             </div>
         </div>
     </div>
+    <div class="column">
+        <h3 class="ui header">Debug controls:</h3>
+        <div class="ui vertical buttons">
+            <div class="ui button" id="debug-re-render-btn">Re-render</div>
+        </div>
+    </div>
 </div>
 <table cellspacing="0" style="max-width:700px;">
     <tr id="error-tr">

demo/index.js

@@ -57,7 +57,8 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
     resetCursorBtn,
     showCursorBtn,
     hideCursorBtn,
-    backendSelect;
+    backendSelect,
+    debugReRenderBtn;
 
     // Initialization code
     function init() {
@@ -79,6 +80,8 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         showCursorBtn = document.getElementById("show-cursor-btn");
         hideCursorBtn = document.getElementById("hide-cursor-btn");
         backendSelect = document.getElementById("backend-select");
+        debugReRenderBtn = document.getElementById("debug-re-render-btn");
+
 
         // Hide error
         error();
@@ -117,6 +120,10 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
             openSheetMusicDisplay.DrawBottomLine = !openSheetMusicDisplay.DrawBottomLine;
         }
 
+        debugReRenderBtn.onclick = function() {
+            rerender();
+        }
+
         // Create OSMD object and canvas
         openSheetMusicDisplay = new OpenSheetMusicDisplay(canvas, {
             autoResize: true,
@@ -278,6 +285,14 @@ import { OpenSheetMusicDisplay } from '../src/OpenSheetMusicDisplay/OpenSheetMus
         }, 0);
     }
 
+    function rerender() {
+        disable();
+        window.setTimeout(function(){
+            openSheetMusicDisplay.render();
+            enable();
+        }, 0);
+    }
+
     function error(errString) {
         if (!errString) {
             error_tr.style.display = "none";