Feat: Add inline graph setting for max distance (maxDegree) (#62)

src/index.ts

@@ -26,8 +26,7 @@ interface GraphData {
   nodeFontSize: number;
   nodeDistanceRatio: number;
   showLinkDirection: boolean;
-  // maxDegree > 0
-  graphIsSelectionBased: boolean;
+  graphIsSelectionBased: boolean; // maxDegree > 0
 }
 
 let data: GraphData;
@@ -54,6 +53,7 @@ joplin.plugins.register({
                         <p class="header">Note Graph</p>
                       </div>
                       <div class="container">
+                        <div id="user-input-container"></div>
                         <div id="note_graph"/>
                       </div>
         </div>
@@ -88,7 +88,7 @@ joplin.plugins.register({
     await panels.addScript(view, "./webview.css");
     await panels.addScript(view, "./ui/index.js");
 
-    panels.onMessage(view, async (message: any) => {
+    panels.onMessage(view, (message: any) => {
       switch (message.name) {
         case "poll":
           let p = new Promise((resolve) => {
@@ -102,7 +102,11 @@ joplin.plugins.register({
           joplin.commands.execute("openNote", message.id);
           break;
         case "get_note_tags":
-          return await joplinData.getNoteTags(message.id);
+          return joplinData.getNoteTags(message.id);
+        case "set_setting":
+          return joplin.settings.setValue(message.key, message.value);
+        case "get_setting":
+          return joplin.settings.value(message.key);
       }
     });
 

src/settings.ts

@@ -77,7 +77,7 @@ export async function registerSettings() {
       type: SettingItemType.Int,
       minimum: 0,
       section: sectionName,
-      public: true,
+      public: false,
       label: "Max degree of separation",
       description:
         "Maximum number of link jumps from selected note. Zero for all notes",

src/ui/index.js

@@ -1,4 +1,5 @@
 import * as d3 from "d3";
+import * as userInput from "./user-input.js"
 
 function poll() {
   webviewApi.postMessage({ name: "poll" }).then((event) => {
@@ -51,9 +52,27 @@ function minimalDistanceOfLink(link) {
   );
 }
 
-document.getElementById("redrawButton").addEventListener("click", update);
+function setMaxDistanceSetting(newVal) {
+  // will automically trigger ui update of graph
+  return webviewApi.postMessage({
+    name: "set_setting",
+    key: "SETTING_MAX_SEPARATION_DEGREE",
+    value: newVal,
+  });
+}
+
+function getMaxDistanceSetting() {
+  return webviewApi.postMessage({
+    name: "get_setting",
+    key: "SETTING_MAX_SEPARATION_DEGREE",
+  });
+}
 
-update();
+getMaxDistanceSetting().then((v) => {
+  // todo: shorten up, when top-level await available
+  userInput.init(v, setMaxDistanceSetting, update);
+  update();
+});
 
 var simulation, svg;
 var width, height;
@@ -226,7 +245,7 @@ function updateGraph(data) {
     );
   }
 
-  async function handleNodeHover(nodeSelector, nodeId, isEntered) {
+  function handleNodeHover(nodeSelector, nodeId, isEntered) {
     d3.select(nodeSelector).classed("hovered", isEntered);
     // node hover delegates to handleLinkHover
     // for all incoming and outcoming links
@@ -235,7 +254,7 @@ function updateGraph(data) {
     ).each(function (d, _i) {
       handleLinkHover(this, d, isEntered);
     });
-    await showNodeTooltip(nodeSelector, nodeId, isEntered);
+    return showNodeTooltip(nodeSelector, nodeId, isEntered);
   }
 
   async function showNodeTooltip(nodeSelector, nodeId, isEntered) {

src/ui/user-input.js

@@ -0,0 +1,45 @@
+const container = document.getElementById("user-input-container");
+
+function chromeRangeInputFix() {
+  // workaround for chrome concerning range inputs,
+  // not allowing slider to be dragged.
+  // See https://stackoverflow.com/q/69490604
+  // todo: is there a better solution?
+  document.querySelectorAll('input[type="range"]').forEach((input) => {
+    input.addEventListener("mousedown", () =>
+      window.getSelection().removeAllRanges()
+    );
+  });
+}
+
+function initDistanceRangeInput(initialValue, handleChange) {
+  const html = `
+  <label for="maxDistance">Max. distance</label>
+  <input 
+    name="maxDistance"
+    type="range"
+    min="0"
+    value="${initialValue}"
+    max="5"
+    step="1"
+  >
+  <output>${initialValue}</output>
+  `;
+  container.insertAdjacentHTML("beforeend", html);
+  const input = container.querySelector("input[name='maxDistance']")
+  input.addEventListener("input", function () {
+    const output = this.nextElementSibling;
+    output.value = this.value;
+  });
+  input.addEventListener("change", function () {
+    handleChange(this.valueAsNumber);
+  });
+}
+
+export function init(initDistanceValue, handleDistanceChange, handleRedraw) {
+  chromeRangeInputFix();
+  initDistanceRangeInput(initDistanceValue, handleDistanceChange);
+  document
+    .getElementById("redrawButton")
+    .addEventListener("click", handleRedraw);
+}

src/webview.css

@@ -3,6 +3,24 @@
   background-color: var(--joplin-background-color) !important;
 }
 
+.graph-content > .container {
+  /* anchor the inline settings container */
+  position:relative;
+} 
+
+#user-input-container {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  column-gap: 5px;
+}
+
+#user-input-container label, #user-input-container output {
+  user-select: none;
+}
+
 .header-area {
   width: 100%
 }
@@ -164,17 +182,21 @@ text.adjacent-to-hovered {
 }
 
 #note_graph.mode-selection-based-graph text.node-label.distance-0 {
-  font-size: 150%;
+  font-size: 20px;
   font-weight: bold;
 }
 
 #note_graph.mode-selection-based-graph text.node-label.distance-1 {
-  font-size: 125%;
+  font-size: 18px;
   fill: var(--distance-1-primary-color);
 }
 
+#note_graph.mode-selection-based-graph text.node-label.distance-2 {
+  font-size: 16px;
+}
+
 #note_graph.mode-selection-based-graph text.node-label:not(.distance-0):not(.distance-1):not(.distance-2) {
-  font-size: 80%;
+  font-size: 14px;
   fill: var(--distance-remaining-label-color);
 }