release: 1.1.5

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: [hananoshikayomaru]
+custom: https://www.buymeacoffee.com/yomaru

README.md

@@ -10,7 +10,7 @@ see the demo: https://www.youtube.com/watch?v=HnqXH6z4WrY
 
 ### Through community plugin store
 
-Waiting for obsidian team approval: 
+Waiting for obsidian team approval:
 
 ### Through BRAT
 
@@ -37,9 +37,9 @@ You can do zooming (scroll you wheel), rotating (drag the scene) and panning (`c
 
 ### Local Graph
 
-In a note, you can run command `Open local 3D graph` to open a local graph. A local graph will only show nodes that connect to this nodes. 
+In a note, you can run command `Open local 3D graph` to open a local graph. A local graph will only show nodes that connect to this nodes.
 
-In local graph you will have all the features of global graph, plus: 
+In local graph you will have all the features of global graph, plus:
 
 1. depth: you can control the depth of maximum distance of the nodes away from the center node
 2. link type: show only inlinks, outlinks or both.
@@ -56,7 +56,7 @@ In local graph you will have all the features of global graph, plus:
 
 ### Group and color nodes on global graph
 
-you can use query to create groups and color nodes on a global graph. 
+you can use query to create groups and color nodes on a global graph.
 
 ### Label fade
 
@@ -76,7 +76,7 @@ You can change the following:
 7. show center coordination
 8. show link arrow
 9. don't node move on drag
-10. [dag](https://en.wikipedia.org/wiki/Directed_acyclic_graph) mode. See more on [DAG Mode](https://github.com/HananoshikaYomaru/obsidian-3d-graph#dag-mode). 
+10. [dag](https://en.wikipedia.org/wiki/Directed_acyclic_graph) mode. See more on [DAG Mode](https://github.com/HananoshikaYomaru/obsidian-3d-graph#dag-mode).
 
 ### Focus on node
 
@@ -96,7 +96,22 @@ You can see DAG(Directed acyclic graph) orientation on a graph. This only has ef
 
 ## Save Setting
 
-You can save, update and restore previous settings. 
+You can save, update and restore previous settings.
+
+## Other customization
+
+You can change the default node color and default line color by css snippet.
+
+1. open your setting > appearance
+2. create a css snippet
+3. add the following
+
+```css
+body {
+  --graph-node: #00ff00;
+  --graph-line: #ff0000;
+}
+```
 
 ### Feature roadmap
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "3d-graph-new",
 	"name": "3D Graph New",
-	"version": "1.1.4",
+	"version": "1.1.5",
 	"description": "A 3D Graph for Obsidian",
 	"author": "Hananoshika Yomaru",
 	"authorUrl": "https://github.com/HananoshikaYomaru",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "3d-graph-new",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A 3D graph for Obsidian",
   "main": "main.js",
   "scripts": {

src/SettingManager.ts

@@ -162,7 +162,9 @@ export class MySettingManager implements ISettingManager<Setting> {
       console.log("parsed loaded data successfully");
     }
     await this.plugin.saveData(this.setting.value);
-    console.log("saved: ", this.setting.value);
+
+    // debug
+    // console.log("saved: ", this.setting.value);
   }
 
   static getNewSetting<T extends GraphType>(

src/main.ts

@@ -1,7 +1,6 @@
 import { Plugin } from "obsidian";
 import { State } from "@/util/State";
 import { Graph } from "@/graph/Graph";
-import { ObsidianTheme } from "@/util/ObsidianTheme";
 import { ResolvedLinkCache } from "@/graph/Link";
 import { deepCompare } from "@/util/deepCompare";
 import "@total-typescript/ts-reset";
@@ -27,7 +26,6 @@ export default class Graph3dPlugin extends Plugin {
    *  we keep a global graph here because we dont want to create a new graph every time we open a graph view
    */
   public globalGraph: Graph;
-  public theme: ObsidianTheme;
 
   public fileManager: MyFileManager;
   public settingManager: MySettingManager;
@@ -51,7 +49,6 @@ export default class Graph3dPlugin extends Plugin {
     this.fileManager = new MyFileManager(this);
 
     // init the theme
-    this.theme = new ObsidianTheme(this.app.workspace.containerEl);
     this.cacheIsReady.value = this.app.metadataCache.resolvedLinks !== undefined;
     this.onGraphCacheChanged();
 

src/util/ObsidianTheme.ts

@@ -1,3 +1,20 @@
+// function getColorFromStylesheet(selector: string, property: string): string | null {
+//   try {
+//     for (const sheet of Array.from(document.styleSheets)) {
+//       const rules = sheet.cssRules ? Array.from(sheet.cssRules) : [];
+
+//       for (const rule of rules) {
+//         if (rule instanceof CSSStyleRule && rule.selectorText === selector) {
+//           return rule.style.getPropertyValue(property);
+//         }
+//       }
+//     }
+//   } catch (e) {
+//     console.error("Error accessing stylesheets: ", e);
+//   }
+//   return null; // Return null if not found
+// }
+
 // Helper to access the current theme in TS
 export class ObsidianTheme {
   backgroundPrimary: string;
@@ -18,6 +35,9 @@ export class ObsidianTheme {
 
   textAccent: string;
 
+  graphNode: string;
+  graphLine: string;
+
   // some others missing, but not needed currently
 
   constructor(root: HTMLElement) {
@@ -52,5 +72,8 @@ export class ObsidianTheme {
     this.interactiveAccentHover = getComputedStyle(root)
       .getPropertyValue("--interactive-accent-hover")
       .trim();
+
+    this.graphNode = getComputedStyle(root).getPropertyValue("--graph-node").trim();
+    this.graphLine = getComputedStyle(root).getPropertyValue("--graph-line").trim();
   }
 }

src/views/graph/ForceGraphEngine.ts

@@ -214,7 +214,7 @@ export class ForceGraphEngine {
   getLinkColor = (link: Link) => {
     const color = this.isHighlightedLink(link)
       ? this.forceGraph.view.settingManager.getCurrentSetting().display.linkHoverColor
-      : this.forceGraph.view.plugin.theme.textMuted;
+      : this.forceGraph.view.theme.graphLine;
     return hexToRGBA(color, this.getIsAnyHighlighted() && !this.isHighlightedLink(link) ? 0.2 : 1);
   };
 
@@ -451,7 +451,7 @@ export class ForceGraphEngine {
   public getNodeColor = (node: Node): string => {
     let color: string;
     const settings = this.forceGraph.view.settingManager.getCurrentSetting();
-    const theme = this.forceGraph.view.plugin.theme;
+    const theme = this.forceGraph.view.theme;
     const searchResult = this.forceGraph.view.settingManager.searchResult;
     if (this.selectedNodes.has(node)) {
       color = selectedColor;
@@ -461,7 +461,7 @@ export class ForceGraphEngine {
           ? settings.display.nodeHoverColor
           : settings.display.nodeHoverNeighbourColor;
     } else {
-      color = theme.textMuted;
+      color = theme.graphNode;
       settings.groups.forEach((group, index) => {
         if (group.query.trim().length === 0) return;
         const searchStateGroup = searchResult.value.groups[index];

src/views/graph/Graph3dView.ts

@@ -3,6 +3,7 @@ import { GraphType } from "@/SettingsSchemas";
 import { config } from "@/config";
 import { Graph } from "@/graph/Graph";
 import Graph3dPlugin from "@/main";
+import { ObsidianTheme } from "@/util/ObsidianTheme";
 import { createNotice } from "@/util/createNotice";
 import { ForceGraph } from "@/views/graph/ForceGraph";
 import { GraphSettingManager } from "@/views/settings/GraphSettingsManager";
@@ -12,18 +13,20 @@ export abstract class Graph3dView extends ItemView {
   readonly plugin: Graph3dPlugin;
   protected forceGraph: ForceGraph;
   readonly graphType: GraphType;
+  public theme: ObsidianTheme;
   public readonly settingManager: GraphSettingManager<typeof this>;
 
   constructor(leaf: WorkspaceLeaf, plugin: Graph3dPlugin, graphType: GraphType, graph: Graph) {
     super(leaf);
     this.plugin = plugin;
     this.graphType = graphType;
     this.settingManager = new GraphSettingManager<typeof this>(this);
+    // set up some UI stuff
+    this.contentEl.classList.add("graph-3d-view");
+    this.theme = new ObsidianTheme(this.plugin.app.workspace.containerEl);
 
     this.forceGraph = new ForceGraph(this, graph);
 
-    // set up some UI stuff
-    this.contentEl.classList.add("graph-3d-view");
     // move the setting to the front of the graph
     this.contentEl.appendChild(this.settingManager.containerEl);
   }
@@ -78,6 +81,8 @@ export abstract class Graph3dView extends ItemView {
     // destroy the old graph, remove the old graph completely from the DOM
     this.forceGraph?.instance._destructor();
 
+    this.theme = new ObsidianTheme(this.plugin.app.workspace.containerEl);
+
     // reassign a new graph base on setting like the constructor
     this.forceGraph = new ForceGraph(this, graph);