Demo: More display options

- Demo: Added option to compact rows, locking their heights to the
minimum required to show links.

- Demo: Added option slider for setting the link slot interval on the
fly.

- Config: Moved all user options directly into the Config object for
easy access/modification.

- Main: Separated `.init()` and `.draw()` -- The visualisation can now
be redrawn (to account for new display options) without unduly affecting
Word/Link handle positions, etc.

- Build: Added verbose flag to demo CSS watch task

Author: ZechyW

demo/demo.min.css

@@ -176,7 +176,7 @@ <h5 class="modal-title" id="options-title">Options</h5>
               </div>
 
               <div class="modal-body">
-                <div class="p-3">
+                <div class="px-3">
                   Show the following category of top links:
                   <select id="tag-option-top-links" class="custom-select mb-3">
                     <!-- Options will be added at run time in `demo.js` based on the categories available in the
@@ -202,7 +202,7 @@ <h5 class="modal-title" id="options-title">Options</h5>
                     </label>
                   </div>
 
-                  <div class="custom-control custom-checkbox mt-3">
+                  <div class="custom-control custom-checkbox">
                     <input type="checkbox" class="custom-control-input" id="tag-option-top-main-label">
                     <label class="custom-control-label" for="tag-option-top-main-label">
                       Show main label on top links
@@ -227,6 +227,28 @@ <h5 class="modal-title" id="options-title">Options</h5>
                       Show argument labels on bottom links
                     </label>
                   </div>
+
+                  <div class="custom-control custom-checkbox mt-3">
+                    <input type="checkbox" class="custom-control-input" id="tag-option-compact">
+                    <label class="custom-control-label" for="tag-option-compact">
+                      Lock rows to the minimum height needed to fit links
+                    </label>
+                  </div>
+
+                  <div class="form-group mt-3">
+                    <div>Link slot interval</div>
+                    <div class="form-row">
+                      <div class="d-flex">
+                        <div class="col-auto">
+                          <input id="tag-option-link-slot" type="text"
+                                 title="Link slot interval">
+                        </div>
+                        <div class="col">
+                          <span id="tag-option-link-slot-value"></span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
 
               </div>

demo/demo.min.css.map

@@ -33,6 +33,9 @@ const tplTaxonomy = require("./taxonomy.hbs");
 const Handlebars = require("hbsfy/runtime");
 Handlebars.registerPartial("taxonomySubtree", tplTaxonomy);
 
+// Sliders for setting display options on the fly
+require("bootstrap-slider");
+
 // The colour picker script itself is included in the main HTML, because it
 // doesn't play nice with Browserify.  Here we expose the jquery globals it
 // needs.
@@ -202,6 +205,17 @@ $(async () => {
 
   refreshLinkCategories();
 
+  const $optionCompact = $("#tag-option-compact");
+  $optionCompact
+    .prop("checked", uiTag.getOption("compactRows"))
+    .on("change", () => {
+      uiTag.setOption(
+        "compactRows",
+        $optionCompact[0].checked
+      );
+      uiTag.draw();
+    });
+
   const $optionTopLinksOnMove = $("#tag-option-top-links-on-move");
   $optionTopLinksOnMove
     .prop("checked", uiTag.getOption("showTopLinksOnMove"))
@@ -211,7 +225,6 @@ $(async () => {
         $optionTopLinksOnMove[0].checked
       );
     });
-
   const $optionBottomLinksOnMove = $("#tag-option-bottom-links-on-move");
   $optionBottomLinksOnMove
     .prop("checked", uiTag.getOption("showBottomLinksOnMove"))
@@ -247,6 +260,33 @@ $(async () => {
       uiTag.setBottomArgLabelVisibility($optionBottomArgLabels[0].checked);
     });
 
+  // We can change various drawing options on the fly.
+  // This example uses a slider to change the intervals for overlapping links.
+  const $optionLinkSlot = $("#tag-option-link-slot");
+  const $optionLinkSlotValue = $("#tag-option-link-slot-value");
+  $optionLinkSlot.slider({
+    min: 10,
+    max: 200,
+    step: 10,
+    value: uiTag.getOption("linkSlotInterval"),
+    tooltip: "hide"
+  });
+  $optionLinkSlotValue.text($optionLinkSlot.val());
+  $optionLinkSlot.on("slide", (event) => {
+    $optionLinkSlotValue.text(event.value);
+    uiTag.setOption("linkSlotInterval", event.value);
+    uiTag.draw();
+  });
+  // For direct click events, we need to target the slider directly, rather
+  // than our initial text input
+  $optionLinkSlot.siblings(".slider").on("click", () => {
+    const newValue = $optionLinkSlot.slider("getValue");
+    $optionLinkSlotValue.text(newValue);
+    uiTag.setOption("linkSlotInterval", newValue);
+    uiTag.draw();
+  });
+
+
   // --------------------------------------------------------------------------
 
   // The `.exportSvg()` function can be used to save the current

demo/demo.min.js

@@ -5,6 +5,8 @@
 @import "../../node_modules/bootstrap/scss/bootstrap";
 // Import Prismjs styles
 @import "../../node_modules/prismjs/themes/prism";
+// Import Bootstrap-slider styles
+@import "../../node_modules/bootstrap-slider/dist/css/bootstrap-slider";
 // Core TAG styles
 @import "../../dist/tag/css/tag";
 
@@ -62,6 +64,16 @@
   width: 100px;
 }
 
+// Styles for the bootstrap-slider plugin
+.slider.slider-horizontal {
+  width: 300px;
+}
+
+.slider-selection {
+  background: #337ab7;
+  opacity: 0.75;
+}
+
 // Fonts used in the visualisation
 // The actual loading of the font happens at the start of `demo.js` via the Web Font Loader
 svg, svg text {