View simplified, option to showRelationTypes

SkepticMystic · Jun 23, 2021 · 5ababaa · 5ababaa
1 parent c0d24cb
commit 5ababaa
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 129 deletions.
diff --git a/src/BreadcrumbsSettingTab.ts b/src/BreadcrumbsSettingTab.ts
@@ -77,5 +77,16 @@ export class BreadcrumbsSettingTab extends PluginSettingTab {
             console.log(this.plugin.settings.indexNote);
           })
       );
+
+      new Setting(containerEl)
+      .setName("Show Relationship Type")
+      .setDesc("Show whether a link is real or implied")
+      .addToggle((toggle) => toggle
+        .setValue(this.plugin.settings.showRelationType)
+        .onChange(async (value) => {
+          this.plugin.settings.showRelationType = value;
+          await this.plugin.saveSettings();
+        })
+      );
   }
 }
diff --git a/src/List.svelte b/src/List.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import type { App } from "obsidian";
-
+  import type BreadcrumbsSettings from "src/main";
   import type { internalLinkObj } from "src/MatrixView";
 
+  export let settings: BreadcrumbsSettings;
   export let list;
   const realItems: internalLinkObj[] = list.realItems;
   const impliedItems: internalLinkObj[] = list.impliedItems;
@@ -17,58 +18,40 @@
 <details open>
   <summary>{fieldName}</summary>
 
-  {#if realItems.length > 0}
+  {#if settings.showRelationType}
     <h5 class="header">Real</h5>
   {/if}
 
-  {#if realItems.length > 1}
-    <ol>
-      {#each realItems as realItem}
-        <li>
-          <a
-            href="null"
-            class={realItem.cls}
-            on:click={async () => openLink(realItem)}
-          >
-            {realItem.to}
-          </a>
-        </li>
-      {/each}
-    </ol>
-  {:else if realItems.length === 1}
-    <a
-      href="null"
-      class={realItems[0].cls}
-      on:click={async () => openLink(realItems[0])}
-    >
-      {realItems[0].to}
-    </a>
-  {/if}
+  <ol>
+    {#each realItems as realItem}
+      <li>
+        <a
+          href="null"
+          class={realItem.cls}
+          on:click={async () => openLink(realItem)}
+        >
+          {realItem.to}
+        </a>
+      </li>
+    {/each}
+  </ol>
 
-  {#if impliedItems.length > 0}
+  {#if settings.showRelationType}
     <h5 class="header">Implied</h5>
   {/if}
 
-  {#if impliedItems.length > 1}
-    <ol>
-      {#each impliedItems as impliedItem}
-        <li>
-          <a
-            href="null"
-            class={impliedItem.cls}
-            on:click={async () => openLink(impliedItem)}
-            >{impliedItem.to}
-          </a>
-        </li>
-      {/each}
-    </ol>
-  {:else if impliedItems.length === 1}
-    <a
-      href="null"
-      class={impliedItems[0].cls}
-      on:click={async () => openLink(impliedItems[0])}>{impliedItems[0].to}</a
-    >
-  {/if}
+  <ol>
+    {#each impliedItems as impliedItem}
+      <li>
+        <a
+          href="null"
+          class={impliedItem.cls}
+          on:click={async () => openLink(impliedItem)}
+          >{impliedItem.to}
+        </a>
+      </li>
+    {/each}
+  </ol>
 </details>
 
 <style>

diff --git a/src/Lists.svelte b/src/Lists.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
+  import type BreadcrumbsSettings from "src/main";
   import List from "./List.svelte";
   import type SquareProps from "./MatrixView";
 
   export let parents: SquareProps;
-  export let top: SquareProps;
+  // export let top: SquareProps;
   export let siblings: SquareProps;
   export let children: SquareProps;
+  export let settings: BreadcrumbsSettings;
 
-  const lists = [parents, top, siblings, children];
+  const lists = [parents, siblings, children];
   const currFile = parents.app.workspace.getActiveFile().basename;
 </script>
 
 <h2 class="header">{currFile}</h2>
 {#each lists as list}
   {#if list.realItems.length > 0 || list.impliedItems.length > 0}
-    <List {list} />
+    <List {list} {settings} />
   {/if}
 {/each}
 

diff --git a/src/Matrix.svelte b/src/Matrix.svelte
@@ -1,27 +1,24 @@
 <script lang="ts">
-  import Square from "./Square.svelte";
-  import Filler from "./Filler.svelte";
+  import type BreadcrumbsSettings from "src/main";
   import type SquareProps from "./MatrixView";
+  import Square from "./Square.svelte";
 
   export let parents: SquareProps;
-  export let top: SquareProps;
-  export let current: SquareProps;
+  // export let top: SquareProps;
+  // export let current: SquareProps;
   export let siblings: SquareProps;
   export let children: SquareProps;
+  export let settings: BreadcrumbsSettings;
+
+  const list = [parents, siblings, children];
 </script>
 
 <div class="breadcrumbs-matrix  markdown-preview-view">
-  <div class="grid-container">
-    <Filler />
-    <Square {...parents} />
-    <Filler />
-    <Square {...top} />
-    <Square {...current} />
-    <Square {...siblings} />
-    <Filler />
-    <Square {...children} />
-    <Filler />
-  </div>
+  {#each list as item}
+    {#if item.realItems.length > 0 || item.impliedItems.length > 0}
+      <Square {...item} {settings} />
+    {/if}
+  {/each}
 </div>
 
 <style>
@@ -31,12 +28,4 @@
     /* max-width: 240px; */
     margin: 0 auto;
   }
-
-  div.grid-container {
-    display: grid;
-    grid-template-rows: repeat(3, 1fr);
-    grid-template-columns: repeat(3, 1fr);
-    align-items: stretch;
-  }
-
 </style>
diff --git a/src/MatrixView.ts b/src/MatrixView.ts
@@ -227,12 +227,11 @@ export default class MatrixView extends ItemView {
     this.contentEl.empty();
 
     const button = this.contentEl.createEl("button", {
-      text: this.matrixQ ? "Matrix" : "List",
+      text: this.matrixQ ? "List" : "Matrix",
     });
     button.addEventListener("click", async () => {
       this.matrixQ = !this.matrixQ;
-      button.innerText = this.matrixQ ? "Matrix" : "List";
-      console.log(this.matrixQ);
+      button.innerText = this.matrixQ ? "List" : "Matrix";
       await this.draw();
     });
 
@@ -261,10 +260,12 @@ export default class MatrixView extends ItemView {
     /// Implied Siblings
     const currParents = gParents.successors(currFile.basename) ?? [];
     const impliedSiblingsArr: internalLinkObj[] = [];
+
     if (currParents.length) {
       currParents.forEach((parent) => {
         const impliedSiblings = gParents.predecessors(parent) ?? [];
         const indexCurrNote = impliedSiblings.indexOf(currFile.basename);
+
         impliedSiblings.splice(indexCurrNote, 1);
         impliedSiblings.forEach((impliedSibling) => {
           impliedSiblingsArr.push({
@@ -283,31 +284,31 @@ export default class MatrixView extends ItemView {
       app: this.app,
     };
 
-    const topSquare: SquareProps = {
-      realItems: [
-        {
-          to: settings.indexNote,
-          currFile: currFile,
-          cls: this.resolvedClass(settings.indexNote, currFile),
-        },
-      ],
-      impliedItems: [],
-      fieldName: "Top",
-      app: this.app,
-    };
-
-    const currSquare: SquareProps = {
-      realItems: [
-        {
-          to: currFile.basename,
-          currFile: currFile,
-          cls: this.resolvedClass(currFile.basename, currFile),
-        },
-      ],
-      impliedItems: [],
-      fieldName: "Current",
-      app: this.app,
-    };
+    // const topSquare: SquareProps = {
+    //   realItems: [
+    //     {
+    //       to: settings.indexNote,
+    //       currFile: currFile,
+    //       cls: this.resolvedClass(settings.indexNote, currFile),
+    //     },
+    //   ],
+    //   impliedItems: [],
+    //   fieldName: "Top",
+    //   app: this.app,
+    // };
+
+    // const currSquare: SquareProps = {
+    //   realItems: [
+    //     {
+    //       to: currFile.basename,
+    //       currFile: currFile,
+    //       cls: this.resolvedClass(currFile.basename, currFile),
+    //     },
+    //   ],
+    //   impliedItems: [],
+    //   fieldName: "Current",
+    //   app: this.app,
+    // };
 
     const siblingSquare: SquareProps = {
       realItems: realSiblings,
@@ -328,20 +329,19 @@ export default class MatrixView extends ItemView {
         target: this.contentEl,
         props: {
           parents: parentsSquare,
-          top: topSquare,
-          current: currSquare,
           siblings: siblingSquare,
           children: childrenSquare,
+          settings: settings,
         },
       });
     } else {
       this.view = new Lists({
         target: this.contentEl,
         props: {
           parents: parentsSquare,
-          top: topSquare,
           siblings: siblingSquare,
           children: childrenSquare,
+          settings: settings,
         },
       });
     }

diff --git a/src/Square.svelte b/src/Square.svelte
@@ -1,49 +1,54 @@
 <script lang="ts">
-import type { App } from "obsidian";
-import type { internalLinkObj, SquareProps } from "src/MatrixView";
-
+  import type { App } from "obsidian";
+  import type BreadcrumbsSettings from "src/main";
+  import type { internalLinkObj, SquareProps } from "src/MatrixView";
 
   export let realItems: internalLinkObj[];
   export let impliedItems: internalLinkObj[];
   export let fieldName: string;
-  export let app: App
+  export let app: App;
+  export let settings: BreadcrumbsSettings;
 
   async function openLink(item: internalLinkObj) {
-    await app.workspace.openLinkText(item.to, item.currFile.path)
+    await app.workspace.openLinkText(item.to, item.currFile.path);
   }
 </script>
 
-<div class="square grid-item">
+<div class="square">
   <h3 class="header">{fieldName}</h3>
 
   {#if realItems.length}
-    <h5 class="header">Real</h5>
-    {#if realItems.length > 1}
+    {#if settings.showRelationType}
+      <h5 class="header">Real</h5>
+    {/if}
       <ol>
         {#each realItems as realItem}
           <li>
-            <a href=null class={realItem.cls} on:click={async () => openLink(realItem)}>{realItem.to}</a>
+            <a
+              href="null"
+              class={realItem.cls}
+              on:click={async () => openLink(realItem)}>{realItem.to}</a
+            >
           </li>
         {/each}
       </ol>
-    {:else}
-    <a href=null class={realItems[0].cls} on:click={async () => openLink(realItems[0])}>{realItems[0].to}</a>
-    {/if}
   {/if}
 
   {#if impliedItems.length}
-    <h5 class="header">Implied</h5>
-    {#if impliedItems.length > 1}
+    {#if settings.showRelationType}
+      <h5 class="header">Implied</h5>
+    {/if}
       <ol>
         {#each impliedItems as impliedItem}
           <li>
-            <a href=null class={impliedItem.cls} on:click={async () => openLink(impliedItem)}>{impliedItem.to}</a>
+            <a
+              href="null"
+              class={impliedItem.cls}
+              on:click={async () => openLink(impliedItem)}>{impliedItem.to}</a
+            >
           </li>
         {/each}
       </ol>
-    {:else}
-    <a href=null class={impliedItems[0].cls} on:click={async () => openLink(impliedItems[0])}>{impliedItems[0].to}</a>
-    {/if}
   {/if}
 </div>
 
@@ -54,5 +59,7 @@ import type { internalLinkObj, SquareProps } from "src/MatrixView";
     border: 2px solid white;
     border-radius: 5px;
     padding: 5px;
+    height: fit-content;
+    position: relative;
   }
 </style>