Moved row names outside pat div

maximecb · Jul 10, 2020 · 29c5495 · 29c5495
1 parent 0bda2b3
commit 29c5495
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 12 deletions.
diff --git a/public/guiview.js b/public/guiview.js
@@ -70,6 +70,9 @@ export class GUIView
         // Fetch the pattern div
         this.patDiv = document.getElementById('pat_div');
 
+        // Fetch the row names div
+        this.rowDiv = document.getElementById('row_names_div');
+
         // The cells are indexed by step index
         this.noteCells = [];
         this.slideCells = [];
@@ -170,7 +173,6 @@ export class GUIView
         {
             let div = document.createElement('div');
             div.style['display'] = 'inline-block';
-            div.style['vertical-align'] = 'top';
             div.style['margin'] = '0px 2px';
 
             let names = [];
@@ -274,11 +276,16 @@ export class GUIView
             return bar;
         }
 
-        // Remove the old bar divs
+        // Remove the old bars
         while (this.patDiv.firstChild)
         {
             this.patDiv.firstChild.remove();
         }
+        // Remove the old row names
+        while (this.rowDiv.firstChild)
+        {
+            this.rowDiv.firstChild.remove();
+        }
 
         // Clear the cell divs arrays
         for (let i = 0; i < numSteps; ++i)
@@ -288,7 +295,7 @@ export class GUIView
         }
 
         // Create the row names
-        this.patDiv.appendChild(makeRowNames());
+        this.rowDiv.appendChild(makeRowNames());
 
         // For each bar
         for (var barIdx = 0; barIdx < numBars; ++barIdx)

diff --git a/public/index.html b/public/index.html
@@ -69,7 +69,11 @@
 
             </div>
 
-            <div id="pat_div">
+            <div id="grid_cont">
+                <div id="row_names_div">
+                </div>
+                <div id="pat_div">
+                </div>
             </div>
 
             <div id="buttons_div">

diff --git a/public/model.js b/public/model.js
@@ -32,6 +32,9 @@ export class Model
 
         // Call selectPat to notify the callbacks
         this.selectPat(0)
+
+        // Select the root note
+        this.setRootNote(data.rootNote);
     }
 
     new()

diff --git a/public/style.css b/public/style.css
@@ -146,9 +146,21 @@ div.tabcontent
     /*border: 2px solid white;*/
 }
 
+#grid_cont
+{
+    display: flex;
+    justify-content: center;
+    margin: 12px auto;
+}
+
+#row_names_div {
+    display: inline-block;
+    padding: 2px;
+}
+
 #pat_div {
+    display: inline-block;
     width: 680px;
-    margin: 12px auto;
     border: 1px solid #555;
     padding: 2px;
     overflow-x: scroll;
@@ -204,11 +216,6 @@ div.patsel_btn_queue
     margin-right: 2;
 }
 
-
-
-
-
-
 div.row_name_cont
 {
     display: flex;
@@ -217,8 +224,6 @@ div.row_name_cont
     justify-content: flex-end;
 
     height: 18px;
-
-    /*background: red;*/
 }
 
 div.row_name_text