Merge pull request #3 from chthollyphile/dev

Dev

ReactView.tsx

@@ -45,4 +45,3 @@ export function Dgraph7c94cd() {
   }
     return graph
 }
-

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "Obsidian-3d-graph-view-plugin",
 	"name": "Obsidian 3d Graph View Plugin",
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"minAppVersion": "0.12.0",
 	"description": "Bringing 3D graph view to Obsidian.",
 	"author": "chthollyphile",

styles.css

@@ -6,3 +6,8 @@ body {
 .d-graph-7c94cd {
     color: aqua;
 }
+
+.scene-tooltip {
+    color: #ffffff !important;
+    background-color: #20202070 !important;
+  }

view.tsx

@@ -21,29 +21,50 @@ export class Ob3gvView extends ItemView {
   }
 
 async onOpen() {
+    const { useRef, useCallback } = React;
     const graphJson = Dgraph7c94cd()
+      const FocusGraph = () => {
+        const fgRef = useRef();
+        const handleClick = useCallback(node => {
+          // Aim at node from outside it
+          const distance = 200;
+          const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
+          fgRef.current.cameraPosition(
+            { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
+            node, // lookAt ({ x, y, z })
+            1500  // ms transition duration
+          );
+        }, [fgRef]);
+
+        return <ForceGraph3D
+          ref={fgRef}
+          graphData={graphJson}
+          nodeLabel="id"
+          nodeColor={() => '#b6bfc1db'}
+          nodeResolution={8}
+          nodeAutoColorBy="group"
+
+          linkColor={() => "#f5f5f5"}
+          linkCurvature={0.8}
+          linkCurveRotation={4}
+          linkDirectionalArrowColor={"#ffffff"}
+          linkDirectionalArrowLength={4}
+          onNodeClick={handleClick}
+
+          backgroundColor={'#202020'}
+          nodeThreeObjectExtend={true}
+          nodeThreeObject={node => {
+            const sprite = new SpriteText(node.id);
+            sprite.color = 'lightgrey';
+            sprite.textHeight = 4;
+            return sprite;
+            }}
+        />;
+      };
     const root = createRoot(this.containerEl.children[1])
-    root.render(
-        <ForceGraph3D
-        graphData={graphJson}
-        nodeColor={() => '#b6bfc1db'}
-        nodeResolution={8}
-        linkColor={() => "#f5f5f5"}
-        linkCurvature={0.8}
-        linkCurveRotation={4}
-        linkDirectionalArrowColor={"#ffffff"}
-        linkDirectionalArrowLength={4}
-        backgroundColor={'#202020'}
-        nodeThreeObjectExtend={true}
-        nodeThreeObject={node => {
-        const sprite = new SpriteText(node.id);
-        sprite.color = 'lightgrey';
-        sprite.textHeight = 4;
-        return sprite;
-        }}
-        // onNodeClick={handleClick}
-    />
-    )
+    root.render( 
+        <FocusGraph />
+      );
   }
 
   async onClose() {

view.tsx.bak

@@ -0,0 +1,51 @@
+import { ItemView, WorkspaceLeaf } from "obsidian";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Dgraph7c94cd } from "./ReactView";
+import { createRoot } from "react-dom/client";
+import ForceGraph3D from 'react-force-graph-3d';
+import SpriteText from 'three-spritetext';
+export const VIEW_TYPE_OB3GV = "Obsidian-3D-Graph-Viewer";
+
+export class Ob3gvView extends ItemView {
+  constructor(leaf: WorkspaceLeaf) {
+    super(leaf);
+  }
+
+  getViewType() {
+    return VIEW_TYPE_OB3GV;
+  }
+
+  getDisplayText() {
+    return "3D Graph View";
+  }
+
+async onOpen() {
+    const graphJson = Dgraph7c94cd()
+    const root = createRoot(this.containerEl.children[1])
+    root.render(
+        <ForceGraph3D
+        graphData={graphJson}
+        nodeColor={() => '#b6bfc1db'}
+        nodeResolution={8}
+        linkColor={() => "#f5f5f5"}
+        linkCurvature={0.8}
+        linkCurveRotation={4}
+        linkDirectionalArrowColor={"#ffffff"}
+        linkDirectionalArrowLength={4}
+        backgroundColor={'#202020'}
+        nodeThreeObjectExtend={true}
+        nodeThreeObject={node => {
+          const sprite = new SpriteText(node.id);
+          sprite.color = 'lightgrey';
+          sprite.textHeight = 4;
+          return sprite;
+          }}
+    />
+    )
+  }
+
+  async onClose() {
+    ReactDOM.unmountComponentAtNode(this.containerEl);
+  } 
+}