feat: New directions! Show the next/previous note

src/BreadcrumbsSettingTab.ts

@@ -358,11 +358,11 @@ export class BCSettingTab extends PluginSettingTab {
     new Setting(trailDetails)
       .setName("Show Breadcrumbs")
       .setDesc(
-        "Show a trail of notes leading from your index note down to the current note you are in (if a path exists)"
+        "Show a set of different views at the top of the current note."
       )
       .addToggle((toggle) =>
-        toggle.setValue(settings.showTrail).onChange(async (value) => {
-          settings.showTrail = value;
+        toggle.setValue(settings.showBCs).onChange(async (value) => {
+          settings.showBCs = value;
           await plugin.saveSettings();
           await plugin.drawTrail();
         })
@@ -396,12 +396,12 @@ export class BCSettingTab extends PluginSettingTab {
             attr: { id: field },
           });
           cb.checked = checkedQ;
-          const label = cbDiv.createEl("label", {
+          cbDiv.createEl("label", {
             text: field,
             attr: { for: field },
           });
 
-          cb.addEventListener("change", async (event) => {
+          cb.addEventListener("change", async () => {
             checkboxStates[field] = cb.checked;
             await plugin.saveSettings();
             console.log(settings.limitTrailCheckboxStates);
@@ -426,24 +426,31 @@ export class BCSettingTab extends PluginSettingTab {
       });
 
     new Setting(trailDetails)
-      .setName("Trail or Table or Both")
+      .setName("Views to show")
       .setDesc(
-        "Wether to show the regular breadcrumb trails, the table view, neither, or both. 1 = Only Trail, 2 = Only Grid, 3 = Both"
+        "Choose which of the views to show at the top of the note.\nTrail, Grid, and/or the Next-Previous view."
       )
-      .addText((text) => {
-        text
-          .setValue(settings.trailOrTable.toString())
-          .onChange(async (value) => {
-            const num = parseInt(value);
-            if ([1, 2, 3].includes(num)) {
-              settings.trailOrTable = num as 1 | 2 | 3;
-              await plugin.saveSettings();
-              await plugin.drawTrail();
-            } else {
-              new Notice("The value has to be 1, 2, or 3");
-            }
-          });
-      });
+      .addToggle(toggle => {
+        toggle.setTooltip('Show Trail view').setValue(settings.showTrail).onChange(async (value) => {
+          settings.showTrail = value;
+          await plugin.saveSettings();
+          await plugin.drawTrail();
+        })
+      })
+      .addToggle(toggle => {
+        toggle.setTooltip('Show Grid view').setValue(settings.showGrid).onChange(async (value) => {
+          settings.showGrid = value;
+          await plugin.saveSettings();
+          await plugin.drawTrail();
+        })
+      })
+      .addToggle(toggle => {
+        toggle.setTooltip('Show Next/Previous view').setValue(settings.showPrevNext).onChange(async (value) => {
+          settings.showPrevNext = value;
+          await plugin.saveSettings();
+          await plugin.drawTrail();
+        })
+      })
 
     new Setting(trailDetails)
       .setName("Grid view dots")

src/Components/NextPrev.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { App } from "obsidian";
+  import { openOrSwitch } from "obsidian-community-lib";
+  import { linkClass } from "src/sharedFunctions";
+  import type BCPlugin from "src/main";
+  export let app: App;
+  export let plugin: BCPlugin;
+
+  const { basename } = app.workspace.getActiveFile();
+  const { main } = plugin.currGraphs;
+
+  const next: { to: string; real: boolean }[] = [];
+  const prev: { to: string; real: boolean }[] = [];
+  main.forEachEdge(basename, (k, a, s, t) => {
+    if (a.dir === "next" && s === basename) {
+      next.push({ to: t, real: true });
+    }
+    if (a.dir === "prev" && t === basename) {
+      next.push({ to: s, real: false });
+    }
+    if (a.dir === "prev" && s === basename) {
+      prev.push({ to: t, real: true });
+    }
+    if (a.dir === "next" && t === basename) {
+      prev.push({ to: s, real: false });
+    }
+  });
+</script>
+
+<span class="BC-NextPrev-Container">
+  <span class="BC-prevs">
+    {#if prev.length}←{/if}
+    {#each prev as p}
+      <span
+        class={linkClass(app, p.to, p.real)}
+        on:click={async (e) => openOrSwitch(app, p.to, e)}>{p.to}</span
+      >
+    {/each}
+  </span>
+  <span class="BC-nexts">
+    {#each next as n}
+      <span
+        class={linkClass(app, n.to, n.real)}
+        on:click={async (e) => openOrSwitch(app, n.to, e)}>{n.to}</span
+      >
+    {/each}
+    {#if next.length}→{/if}
+  </span>
+</span>
+
+<style>
+  /* span {
+    border: 1px solid white;
+    padding: 2px;
+  }
+  .BC-prevs span {
+    color: red;
+  }
+  .BC-nexts span {
+    color: blue;
+  } */
+
+  .BC-nexts {
+    float: right;
+  }
+</style>

src/VisModal.ts

@@ -217,7 +217,7 @@ export class VisModal extends Modal {
     new Notice(
       "Alot of these features may not work, it is still very experimental."
     );
-    let { contentEl } = this;
+    const { contentEl } = this;
     contentEl.empty();
 
     new VisComp({

src/constants.ts

@@ -62,10 +62,12 @@ export const DEFAULT_SETTINGS: BCSettings = {
   showRelationType: true,
   filterImpliedSiblingsOfDifferentTypes: false,
   rlLeaf: true,
+  showBCs: true,
   showTrail: true,
+  showGrid: true,
+  showPrevNext: true,
   limitTrailCheckboxStates: {},
   hideTrailFieldName: "hide-trail",
-  trailOrTable: 3,
   gridDots: false,
   dotsColour: "#000000",
   gridHeatmap: false,

src/interfaces.ts

@@ -20,10 +20,12 @@ export interface BCSettings {
   showRelationType: boolean;
   filterImpliedSiblingsOfDifferentTypes: boolean;
   rlLeaf: boolean;
+  showBCs: boolean;
   showTrail: boolean;
+  showGrid: boolean;
+  showPrevNext: boolean;
   limitTrailCheckboxStates: { [field: string]: boolean };
   hideTrailFieldName: string;
-  trailOrTable: 1 | 2 | 3;
   gridDots: boolean;
   dotsColour: string;
   gridHeatmap: boolean;
@@ -47,13 +49,13 @@ export interface BCSettings {
 export interface dvFrontmatterCache {
   file: TFile;
   [field: string]:
-    | string
-    | string[]
-    | string[][]
-    | dvLink
-    | dvLink[]
-    | Pos
-    | TFile;
+  | string
+  | string[]
+  | string[][]
+  | dvLink
+  | dvLink[]
+  | Pos
+  | TFile;
 }
 
 export type Directions = "up" | "same" | "down" | "next" | "prev";

src/main.ts

@@ -1,5 +1,4 @@
 import Graph, { MultiGraph } from "graphology";
-import { sum } from "lodash";
 import {
   addIcon,
   EventRef,
@@ -8,7 +7,7 @@ import {
   Notice,
   Plugin,
   TFile,
-  WorkspaceLeaf,
+  WorkspaceLeaf
 } from "obsidian";
 import { openView, wait } from "obsidian-community-lib/dist/utils";
 import { BCSettingTab } from "src/BreadcrumbsSettingTab";
@@ -18,14 +17,14 @@ import {
   MATRIX_VIEW,
   STATS_VIEW,
   TRAIL_ICON,
-  TRAIL_ICON_SVG,
+  TRAIL_ICON_SVG
 } from "src/constants";
 import type {
   BCIndex,
   BCSettings,
   Directions,
   dvFrontmatterCache,
-  HierarchyGraphs,
+  HierarchyGraphs
 } from "src/interfaces";
 import MatrixView from "src/MatrixView";
 import {
@@ -46,12 +45,13 @@ import {
   mergeGs,
   oppFields,
   removeDuplicates,
-  writeBCToFile,
+  writeBCToFile
 } from "src/sharedFunctions";
 import StatsView from "src/StatsView";
 import { VisModal } from "src/VisModal";
 import TrailGrid from "./Components/TrailGrid.svelte";
 import TrailPath from "./Components/TrailPath.svelte";
+import NextPrev from "./Components/NextPrev.svelte";
 
 export default class BCPlugin extends Plugin {
   settings: BCSettings;
@@ -81,7 +81,7 @@ export default class BCPlugin extends Plugin {
         } else {
           const activeView = this.getActiveMatrixView();
           if (activeView) await activeView.draw();
-          if (this.settings.showTrail) await this.drawTrail();
+          if (this.settings.showBCs) await this.drawTrail();
         }
       }
     );
@@ -95,15 +95,15 @@ export default class BCPlugin extends Plugin {
     await openView(this.app, MATRIX_VIEW, MatrixView);
     await openView(this.app, STATS_VIEW, StatsView);
 
-    if (settings.showTrail) await this.drawTrail();
+    if (settings.showBCs) await this.drawTrail();
 
     this.registerActiveLeafEvent();
 
     // ANCHOR autorefresh interval
     if (settings.refreshIntervalTime > 0) {
       this.refreshIntervalID = window.setInterval(async () => {
         this.currGraphs = await this.initGraphs();
-        if (settings.showTrail) await this.drawTrail();
+        if (settings.showBCs) await this.drawTrail();
 
         const activeView = this.getActiveMatrixView();
         if (activeView) await activeView.draw();
@@ -651,7 +651,7 @@ export default class BCPlugin extends Plugin {
   async drawTrail(): Promise<void> {
     const { settings } = this;
     debugGroupStart(settings, "debugMode", "Draw Trail");
-    if (!settings.showTrail) {
+    if (!settings.showBCs) {
       debugGroupEnd(settings, "debugMode");
       return;
     }
@@ -689,11 +689,10 @@ export default class BCPlugin extends Plugin {
     }
 
     const trailDiv = createDiv({
-      cls: `BC-trail ${
-        settings.respectReadableLineLength
-          ? "is-readable-line-width markdown-preview-sizer markdown-preview-section"
-          : ""
-      }`,
+      cls: `BC-trail ${settings.respectReadableLineLength
+        ? "is-readable-line-width markdown-preview-sizer markdown-preview-section"
+        : ""
+        }`,
     });
 
     this.visited.push([currFile.path, trailDiv]);
@@ -711,25 +710,18 @@ export default class BCPlugin extends Plugin {
     const pathProps = { sortedTrails, app: this.app, settings, currFile };
     const gridProps = { sortedTrails, app: this.app, plugin: this };
 
-    if (settings.trailOrTable === 1) {
-      new TrailPath({
-        target: trailDiv,
-        props: pathProps,
-      });
-    } else if (settings.trailOrTable === 2) {
-      new TrailGrid({
-        target: trailDiv,
-        props: gridProps,
-      });
-    } else {
+    if (settings.showTrail) {
       new TrailPath({
         target: trailDiv,
         props: pathProps,
       });
+    } if (settings.showGrid) {
       new TrailGrid({
         target: trailDiv,
         props: gridProps,
       });
+    } if (settings.showPrevNext) {
+      new NextPrev({ target: trailDiv, props: { app: this.app, plugin: this } })
     }
   }