diff options
| -rw-r--r-- | app/components/graph/graph.tsx | 15 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | yarn.lock | 5 |
3 files changed, 20 insertions, 1 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index eab78a2..a129f62 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -12,6 +12,8 @@ import { flatten } from "ramda" import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph" import * as d3 from "d3-force-3d" +import * as three from "three"; +import SpriteText from "three-spritetext" const CONTAINER: ViewStyle = { justifyContent: "center", @@ -324,8 +326,19 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { d3AlphaDecay={physics.alphaDecay} d3AlphaMin={physics.alphaTarget} d3VelocityDecay={physics.velocityDecay} + nodeThreeObject={ + !physics.labels ? undefined + : ((node) => { + console.log(node.title) + const sprite = new SpriteText(node.title.substring(0, 30)); + console.log("didnt crash here 2") + sprite.color = "#ffffff"; + sprite.textHeight = 8; + return sprite; + } )} + nodeThreeObjectExtend={true} /> )} </View> - ) + ); }) diff --git a/package.json b/package.json index 3935adf..a02d636 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "reactotron-mst": "3.1.3", "reactotron-react-js": "^3.3.7", "reactotron-react-native": "5.0.0", + "three-spritetext": "^1.6.2", "validate.js": "0.13.1" }, "devDependencies": { @@ -18492,6 +18492,11 @@ three-render-objects@^1.26: kapsule "^1.13" polished "4" +three-spritetext@^1.6.2: + version "1.6.2" + resolved "https://registry.yarnpkg.com/three-spritetext/-/three-spritetext-1.6.2.tgz#824e96db2ffe2148d26a7002d7b63ec11d19d0cf" + integrity sha512-VALj40t81Z6x/fDnY/tts8QU+mBl77bxoynBbcn/DW4oxfzZSwjaOfkQOe0jYpLoK2vtP0bAULvGgwIYnsN6oQ== + "three@>=0.118 <1": version "0.130.1" resolved "https://registry.yarnpkg.com/three/-/three-0.130.1.tgz#797588b2877ace31603bbbc864eb2e3022f0b3b4" |