update colorOptions when any related input changes

Author: d-callan

app/index.html

@@ -396,7 +396,7 @@ <h5 class="mb-0">
                     type="color"
                     id="defaultColor"
                     class="skip"
-                    value="#243127"
+                    value="#4682B4"
                  >
                 </div>
                 <div class="form-group">
@@ -674,7 +674,12 @@ <h5 class="modal-title" id="exportModalLabel">Export</h5>
             layout: d3.select("#layout").node().value,
             mode: d3.select("#mode").node().value,
             type: d3.select("#type").node().value,
-            colorOptions: { colorMode: d3.select("#colorMode").node().value },
+            colorOptions: 
+            { 
+              colorMode: d3.select("#colorMode").node().value,
+              defaultColor: d3.select("#defaultColor").node().value,
+              highlightColor: d3.select("#highlightColor").node().value,
+            },
             leafNodes: d3.select("#leafNodes").node().checked,
             branchNodes: d3.select("#branchNodes").node().checked,
             leafLabels: d3.select("#leafLabels").node().checked,
@@ -720,11 +725,35 @@ <h5 class="modal-title" id="exportModalLabel">Export</h5>
           tree.setAnimation(cached);
         });
 
-      // im considering how to change the coloroptions as part of this form
-      // maybe ill make a color section, separate of leaves and branches etc
-      // for now ill do this and let it grow
       d3.select("#colorMode").on("input", function() {
-        tree.setColorOptions({ colorMode: this.value });
+        // this could prove annoying, but ill leave it for now
+        if (this.value === "list") {
+          d3.select("#defaultColor").node().value = "#243127";
+        } else {
+          d3.select("#defaultColor").node().value = "#4682B4";
+        }
+
+        tree.setColorOptions({ 
+          colorMode: this.value,
+          defaultColor: d3.select("#defaultColor").node().value,
+          highlightColor: d3.select("#highlightColor").node().value
+        });
+      });
+
+      d3.select("#defaultColor").on("input", function() {
+        tree.setColorOptions({ 
+          colorMode: d3.select("#colorMode").node().value,
+          defaultColor: this.value,
+          highlightColor: d3.select("#highlightColor").node().value
+        });
+      });
+
+      d3.select("#highlightColor").on("input", function() {
+        tree.setColorOptions({ 
+          colorMode: d3.select("#colorMode").node().value,
+          defaultColor: d3.select("#defaultColor").node().value,
+          highlightColor: this.value
+        });
       });
 
       d3.select("#branchNodeSize").on("input", function() {

src/main.js

@@ -376,14 +376,17 @@ nodeTransformers.dendrogram = nodeTransformers.tree;
  */
 function findNodeColor(node, colorOptions) {
   if (colorOptions.colorMode === "none") {
-    return colorOptions.defaultColor ?? "steelblue";
+    // steelblue
+    return colorOptions.defaultColor ?? "#4682B4";
   }
   console.log(node);
   let nodeList = colorOptions.nodeList;
 
   if (nodeList.includes(node.id)) {
+    // charcoal
     return colorOptions.highlightColor ?? "#feb640";
   } else {
+    // yellowish
     return colorOptions.defaultColor ?? "#243127";
   }
 }