graphviewer: Adjust form according to layout

faustedition · Jul 22, 2020 · 240dbcb · 240dbcb
1 parent 728c466
commit 240dbcb
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/src/graphviewer/templates/form.html b/src/graphviewer/templates/form.html
@@ -21,6 +21,9 @@
             flex-wrap: wrap;
             justify-content: space-between;
         }
+        .vertical > .flex-form {
+            flex-direction: column;
+        }
         .flex-form fieldset, .flex-form section {
             padding: 0 1em;
             flex-grow: 1;
@@ -82,10 +85,12 @@
             }
         }
 
-        async function getDotStr() {
-            const form = document.getElementById('subgraph-form'),
-                  formdata = new FormData(form);
-            updateURLs(formdata);
+        function getFormData() {
+            const form = document.getElementById('subgraph-form');
+            return new FormData(form);
+        }
+
+        async function getDotStr(formdata) {
             const response = await fetch('subgraph/dot', {method: "POST", body: formdata});
             if (response.status === 200)
                 return await response.text();
@@ -106,16 +111,24 @@
 
         const transitionFactory = () => d3.transition().duration(750);
         const updateGraph = function updateGraph() {
+            const formdata = getFormData(),
+                  main = document.getElementsByTagName('main')[0];
             message("Lade aktualisierten Graphen …")
-            getDotStr().then(dot => {message("Berechne neues Layout …"); return dot;})
+            getDotStr(formdata).then(dot => {message("Berechne neues Layout …"); return dot;})
             .then(dot => {
                 graphviz.transition(transitionFactory).renderDot(dot);
             })
             //.then(() => message())
             .catch(reason => {
                 message(reason, "danger", true)
                 console.error(reason)
-            })
+            });
+            updateURLs(formdata);
+            if (formdata.get('dir').includes('B')) { // vertical layout
+                main.classList.add('vertical');
+            } else {
+                main.classList.remove('vertical');
+            }
         }
         d3.selectAll('#subgraph-form input[type=checkbox], #subgraph-form input[type=radio]').on("click", updateGraph);
         d3.selectAll('#subgraph-form select').on("input", updateGraph);