0.2.3

zsviczian · Jul 28, 2023 · c770eaf · c770eaf
1 parent 2248cc1
commit c770eaf
Show file tree

Hide file tree

Showing 14 changed files with 493 additions and 282 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "excalibrain",
 	"name": "ExcaliBrain",
-	"version": "0.2.2",
+	"version": "0.2.3",
   "minAppVersion": "1.1.6",
 	"description": "A clean, intuitive and editable graph view for Obsidian",
 	"author": "Zsolt Viczian",

diff --git a/src/Components/ToggleButton.ts b/src/Components/ToggleButton.ts
@@ -10,15 +10,20 @@ export class ToggleButton {
     setVal: (val:boolean)=>void,
     wrapper: HTMLElement,
     options: {
-      display: string,
+      display?: string,
+      icon?: string,
       tooltip: string
     },
     private updateIndex: boolean = true
   ) {
     this.button = wrapper.createEl("button", {
       cls: "excalibrain-button",
     });
-    this.button.createSpan({text: options.display})
+    if(options.icon) {
+      this.button.innerHTML = options.icon;
+    } else {
+      this.button.createSpan({text: options.display??""})
+    }
     this.button.ariaLabel = options.tooltip;
 
     this.setColor();

diff --git a/src/Components/ToolsPanel.ts b/src/Components/ToolsPanel.ts
@@ -6,6 +6,7 @@ import { splitFolderAndFilename } from "src/utils/fileUtils";
 import { PageSuggest } from "../Suggesters/PageSuggester";
 import { LinkTagFilter } from "./LinkTagFilter";
 import { keepOnTop } from "src/utils/utils";
+import { getIcon } from "obsidian";
 
 export class ToolsPanel {
   private wrapperDiv: HTMLDivElement;
@@ -64,24 +65,48 @@ export class ToolsPanel {
     //------------
     //Edit drawing
     //------------
-    const saveAsDrawingButton = buttonsWrapperDiv.createEl("button", {
-      cls: "excalibrain-button",
-      text: "✏"
-    });
-    saveAsDrawingButton.ariaLabel = t("OPEN_DRAWING");
-    saveAsDrawingButton.onclick = () => {
-      const elements = this.plugin.EA.getExcalidrawAPI().getSceneElements() as ExcalidrawElement[];
-      const appState = this.plugin.EA.getExcalidrawAPI().getAppState();
-      const ea = this.plugin.EA; //window.ExcalidrawAutomate;
-      ea.reset();
-      ea.canvas.viewBackgroundColor = appState.viewBackgroundColor;
-      ea.canvas.theme = "light";
-      elements.forEach(el=>ea.elementsDict[el.id] = el);
-      ea.create({
-        filename: `ExcaliBrain Snapshot - ${splitFolderAndFilename(this.plugin.scene.centralPagePath).basename}`,
-        onNewPane: true
-      });
-    }
+    this.buttons.push(
+      new ToggleButton(
+        this.plugin,
+        ()=>false,
+        (val:boolean)=>{
+          const elements = this.plugin.EA.getExcalidrawAPI().getSceneElements() as ExcalidrawElement[];
+          const appState = this.plugin.EA.getExcalidrawAPI().getAppState();
+          const ea = this.plugin.EA; //window.ExcalidrawAutomate;
+          ea.reset();
+          ea.canvas.viewBackgroundColor = appState.viewBackgroundColor;
+          ea.canvas.theme = "light";
+          elements.forEach(el=>ea.elementsDict[el.id] = el);
+          ea.create({
+            filename: `ExcaliBrain Snapshot - ${splitFolderAndFilename(this.plugin.scene.centralPagePath).basename}`,
+            onNewPane: true
+          });
+        },
+        buttonsWrapperDiv,
+        {
+          display: "✏",
+          icon: getIcon("lucide-pencil").outerHTML,
+          tooltip: t("OPEN_DRAWING"),
+        },
+    ));
+
+    //------------
+    //Pin Leaf
+    //------------
+    this.buttons.push(
+      new ToggleButton(
+        this.plugin,
+        ()=>this.plugin.scene.pinLeaf,
+        (val:boolean)=>this.plugin.scene.pinLeaf = val,
+        buttonsWrapperDiv,
+        {
+          display: "📌",
+          icon: getIcon("lucide-pin").outerHTML,
+          tooltip: t("PIN_LEAF")
+        },
+        false
+     )
+    )
 
     //------------
     //Attachments
@@ -94,6 +119,7 @@ export class ToolsPanel {
         buttonsWrapperDiv,
         {
           display: "📎",
+          icon: getIcon("lucide-paperclip").outerHTML,
           tooltip: t("SHOW_HIDE_ATTACHMENTS")
         }
      )
@@ -110,6 +136,7 @@ export class ToolsPanel {
         buttonsWrapperDiv,
         {
           display: "∅",
+          icon: getIcon("lucide-minus-circle").outerHTML,
           tooltip: t("SHOW_HIDE_VIRTUAL")
         },
         false
@@ -127,6 +154,7 @@ export class ToolsPanel {
         buttonsWrapperDiv,
         {
           display: "🤔",
+          icon: getIcon("lucide-git-pull-request-draft").outerHTML,
           tooltip: t("SHOW_HIDE_INFERRED")
         }
      )
@@ -143,79 +171,83 @@ export class ToolsPanel {
         buttonsWrapperDiv,
         {
           display: "📄",
+          icon: getIcon("lucide-file-text").outerHTML,
           tooltip: t("SHOW_HIDE_PAGES")
         }
      )
     )
 
     //------------
-    //Folder
+    //Alias
     //------------
     this.buttons.push(
       new ToggleButton(
         this.plugin,
-        ()=>this.plugin.settings.showFolderNodes,
-        (val:boolean)=>this.plugin.settings.showFolderNodes = val,
+        ()=>this.plugin.settings.renderAlias,
+        (val:boolean)=>this.plugin.settings.renderAlias = val,
         buttonsWrapperDiv,
         {
-          display: "📂",
-          tooltip: t("SHOW_HIDE_FOLDER")
+          display: "🧥",
+          icon: getIcon("lucide-venetian-mask").outerHTML,
+          tooltip: t("SHOW_HIDE_ALIAS")
         },
-        true
+        false
      )
     )
 
     //------------
-    //Tag
+    //Folder
     //------------
     this.buttons.push(
       new ToggleButton(
         this.plugin,
-        ()=>this.plugin.settings.showTagNodes,
-        (val:boolean)=>this.plugin.settings.showTagNodes = val,
+        ()=>this.plugin.settings.showFolderNodes,
+        (val:boolean)=>this.plugin.settings.showFolderNodes = val,
         buttonsWrapperDiv,
         {
-          display: "#",
-          tooltip: t("SHOW_HIDE_TAG")
+          display: "📂",
+          icon: getIcon("lucide-folder").outerHTML,
+          tooltip: t("SHOW_HIDE_FOLDER")
         },
-        false
+        true
      )
     )
 
-
     //------------
-    //Alias
+    //Tag
     //------------
     this.buttons.push(
       new ToggleButton(
         this.plugin,
-        ()=>this.plugin.settings.renderAlias,
-        (val:boolean)=>this.plugin.settings.renderAlias = val,
+        ()=>this.plugin.settings.showTagNodes,
+        (val:boolean)=>this.plugin.settings.showTagNodes = val,
         buttonsWrapperDiv,
         {
-          display: "🧥",
-          tooltip: t("SHOW_HIDE_ALIAS")
+          display: "#",
+          icon: getIcon("lucide-tag").outerHTML,
+          tooltip: t("SHOW_HIDE_TAG")
         },
         false
      )
     )
 
     //------------
-    //Pin Leaf
+    // Render weblinks in page
     //------------
-    this.buttons.push(
+    /*this.buttons.push(
       new ToggleButton(
         this.plugin,
-        ()=>this.plugin.scene.pinLeaf,
-        (val:boolean)=>this.plugin.scene.pinLeaf = val,
+        ()=>this.plugin.settings.showURLs,
+        (val:boolean)=>this.plugin.settings.showURLs = val,
         buttonsWrapperDiv,
         {
-          display: "📌",
-          tooltip: t("PIN_LEAF")
+          display: "🌐",
+          icon: getIcon("lucide-globe").outerHTML,
+          tooltip: t("SHOW_HIDE_URLS")
         },
         false
      )
-    )
+    )*/
 
     //------------
     //Display siblings
@@ -228,6 +260,7 @@ export class ToolsPanel {
         buttonsWrapperDiv,
         {
           display: "👨‍👩‍👧‍👦",
+          icon: getIcon("lucide-grip").outerHTML,
           tooltip: t("SHOW_HIDE_SIBLINGS")
         },
         false
@@ -245,6 +278,7 @@ export class ToolsPanel {
         buttonsWrapperDiv,
         {
           display: "⏹️",
+          icon: getIcon("lucide-code").outerHTML,
           tooltip: t("SHOW_HIDE_EMBEDDEDCENTRAL")
         },
         false