release: 1.1.9

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "3d-graph-new",
 	"name": "3D Graph New",
-	"version": "1.1.8",
+	"version": "1.1.9",
 	"description": "A 3D Graph for Obsidian",
 	"author": "Hananoshika Yomaru",
 	"authorUrl": "https://github.com/HananoshikaYomaru",
@@ -10,4 +10,4 @@
 		"Github Sponsor": "https://github.com/sponsors/HananoshikaYomaru"
 	},
 	"isDesktopOnly": true
-}
+}

package.json

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

src/SettingManager.ts

@@ -247,5 +247,6 @@ export const DEFAULT_SETTING: Setting = {
   pluginSetting: {
     maxNodeNumber: 1000,
     searchEngine: SearchEngineType.default,
+    rightClickToPan: false,
   },
 };

src/SettingsSchemas.ts

@@ -94,5 +94,6 @@ export const SettingSchema = z.object({
   pluginSetting: z.object({
     maxNodeNumber: z.number(),
     searchEngine: z.nativeEnum(SearchEngineType),
+    rightClickToPan: z.boolean().default(false),
   }),
 });

src/views/SettingTab.ts

@@ -75,5 +75,22 @@ export class SettingTab extends PluginSettingTab {
             this.plugin.activeGraphViews.forEach((view) => view.settingManager.resetSettings());
           });
       });
+
+    new Setting(containerEl)
+      .setName("Right click to pan")
+      .setDesc(
+        "If true, right click will pan the graph. Otherwise, Cmd + left click will pan the graph."
+      )
+      .addToggle((toggle) => {
+        toggle.setValue(pluginSetting.rightClickToPan).onChange(async (value) => {
+          // update the json
+          this.plugin.settingManager.updateSettings((setting) => {
+            setting.value.pluginSetting.rightClickToPan = value;
+          });
+
+          // force all the graph view to reset their settings
+          this.plugin.activeGraphViews.forEach((view) => view.refreshGraph());
+        });
+      });
   }
 }

src/views/graph/ForceGraph.ts

@@ -10,12 +10,12 @@ import { Graph3dView } from "@/views/graph/Graph3dView";
 import { FOCAL_FROM_CAMERA, ForceGraphEngine } from "@/views/graph/ForceGraphEngine";
 import { DeepPartial } from "ts-essentials";
 import { Node } from "@/graph/Node";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 
 import { rgba } from "polished";
 import { createNotice } from "@/util/createNotice";
 import { DagOrientation, GraphType } from "@/SettingsSchemas";
 import { LocalGraph3dView } from "@/views/graph/LocalGraph3dView";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 
 /**
  * the origin vectorss
@@ -56,6 +56,8 @@ export class ForceGraph {
     this.view = view;
     this.interactionManager = new ForceGraphEngine(this);
 
+    const pluginSetting = this.view.plugin.settingManager.getSettings().pluginSetting;
+
     // get the content element of the item view
     const rootHtmlElement = view.contentEl as HTMLDivElement;
 
@@ -69,7 +71,7 @@ export class ForceGraph {
     // create the instance
     // these config will not changed by user
     this.instance = ForceGraph3D({
-      controlType: "orbit",
+      controlType: pluginSetting.rightClickToPan ? undefined : "orbit",
       extraRenderers: [
         // @ts-ignore https://github.com/vasturiano/3d-force-graph/blob/522d19a831e92015ff77fb18574c6b79acfc89ba/example/html-nodes/index.html#L27C9-L29
         new CSS2DRenderer({
@@ -91,6 +93,9 @@ export class ForceGraph {
             : 1)
         );
       })
+      .onBackgroundRightClick(() => {
+        this.interactionManager.removeSelection();
+      })
       .nodeOpacity(0.9)
       .linkOpacity(0.3)
       .onNodeHover(this.interactionManager.onNodeHover)
@@ -162,13 +167,22 @@ export class ForceGraph {
     // init other setting
     this.updateConfig(this.view.settingManager.getCurrentSetting());
 
-    const controls = this.instance.controls() as OrbitControls;
-    controls.mouseButtons.RIGHT = undefined;
+    // this disable the right click to pan
+    if (!pluginSetting.rightClickToPan) {
+      const controls = this.instance.controls() as OrbitControls;
+      controls.mouseButtons.RIGHT = undefined;
+      // also if right click to pan cmd + left pan should be disabled
+      // to disable it, we just need to remove the orbit controls
+    }
 
     //  change the nav info text
     this.view.contentEl
       .querySelector(".scene-nav-info")
-      ?.setText("Left-click: rotate, Mouse-wheel/middle-click: zoom, Cmd + left-click: pan");
+      ?.setText(
+        `Left-click: rotate, Mouse-wheel/middle-click: zoom, ${
+          pluginSetting.rightClickToPan ? "Right click" : "Cmd + left click"
+        }: pan`
+      );
   }
 
   private createNodeLabel() {