diff options
| -rw-r--r-- | app/components/graph/graph.tsx | 5 | ||||
| -rw-r--r-- | app/components/tweaks/tweaks.tsx | 21 | ||||
| -rw-r--r-- | app/screens/graph/graph-screen.tsx | 4 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | yarn.lock | 7 |
5 files changed, 29 insertions, 9 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index cd623ee..14e3b60 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -61,6 +61,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { fg.d3Force("charge").strength(physics.charge) }) + // For the expandable version of the graph const rootId = 0 const nodesById = useMemo(() => { @@ -183,7 +184,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { // nodeAutoColorBy={d => d.id%GROUPS} linkAutoColorBy={(d) => rando.nodes[d.source].id % GROUPS} linkColor={"#ffffff"} - linkDirectionalParticles={2} + linkDirectionalParticles={physics.particles} nodeColor={(node) => !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } @@ -200,7 +201,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { linkAutoColorBy={(d) => rando.nodes[d.source].id % GROUPS} linkColor={"#ffffff"} linkWidth={2} - linkDirectionalParticles={2} + linkDirectionalParticles={physics.particles} nodeColor={(node) => !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx index e7bbd6f..431191c 100644 --- a/app/components/tweaks/tweaks.tsx +++ b/app/components/tweaks/tweaks.tsx @@ -34,11 +34,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps) { const styles = flatten([CONTAINER, style]) return ( - <View style={{position: "absolute", top: 50, left: 50, zIndex: 100, width: "20%"}}> + <View style={{position: "absolute", top: "5%", left: "5%", zIndex: 100, width: "20%", backgroundColor: "#000000", padding: 20}}> + <Text preset="bold" text="Physics"/> <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge}/> <Slider style={{height: 40 , width: "90%"}} minimumValue={-400} - maximumValue={0} + maximumValue={100} onValueChange={(value) => { setPhysics({...physics, charge: value}) }} value={physics.charge} step={1}/> @@ -58,18 +59,26 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps) { value={physics.linkIts} step={1}/> <Text preset="fieldLabel" text="Collision"/> - <Switch style={{width: "5", height: 20 }} + <Switch style={{width: "5", height: 20, marginVertical: 10 }} value={physics.collision} onValueChange={()=>{setPhysics({...physics, collision: !physics.collision})}} /> - + <Text preset="bold" text="Visual"/> + <Text preset="fieldLabel" text={"Particles: " + physics.particles}/> + <Slider style={{ height: 40 , width: "90%"}} + minimumValue={0} + maximumValue={5} + onValueChange={(value) => { setPhysics({...physics, particles: value}) }} + value={physics.particles} + step={1}/> + <Text preset="bold" text="Modes"/> <Text preset="fieldLabel" text="Expandable Graph"/> - <Switch style={{width: "5", height: 20 }} + <Switch style={{width: "5", height: 20, marginVertical: 10 }} value={physics.collapse} onValueChange={()=>{setPhysics({...physics, collapse: !physics.collapse})}} /> <Text preset="fieldLabel" text="3D"/> - <Switch style={{width: "5", height: 20 }} + <Switch style={{width: "5", height: 20, marginVertical: 10 }} value={physics.threedim} onValueChange={()=>{setPhysics({...physics, threedim: !physics.threedim})}} /> diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx index 9dc7c90..289f371 100644 --- a/app/screens/graph/graph-screen.tsx +++ b/app/screens/graph/graph-screen.tsx @@ -11,6 +11,7 @@ import { Tweaks } from "../../components" import genRandomTree from "../../data/randomdata"; + const ROOT: ViewStyle = { backgroundColor: color.palette.black, flex: 1, @@ -34,7 +35,8 @@ export const GraphScreen = observer(function GraphScreen() { linkStrength: 1, linkIts: 1, collapse: false, - threedim: false + threedim: false, + particles: 2, }); const gData = genRandomTree(); diff --git a/package.json b/package.json index 19cdfbe..57ee0bd 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "dependencies": { "@expo/webpack-config": "^0.12.71", "@react-native-async-storage/async-storage": "^1.14.1", + "@react-native-community/async-storage": "^1.12.1", "@react-native-community/masked-view": "0.1.10", "@react-native-community/slider": "^3.0.3", "@react-navigation/native": "5.9.3", @@ -2395,6 +2395,13 @@ dependencies: deep-assign "^3.0.0" +"@react-native-community/async-storage@^1.12.1": + version "1.12.1" + resolved "https://registry.yarnpkg.com/@react-native-community/async-storage/-/async-storage-1.12.1.tgz#25f821b4f6b13abe005ad67e47c6f1cee9f27b24" + integrity sha512-70WGaH3PKYASi4BThuEEKMkyAgE9k7VytBqmgPRx3MzJx9/MkspwqJGmn3QLCgHLIFUgF1pit2mWICbRJ3T3lg== + dependencies: + deep-assign "^3.0.0" + "@react-native-community/cli-debugger-ui@^4.13.1": version "4.13.1" resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.13.1.tgz#07de6d4dab80ec49231de1f1fbf658b4ad39b32c" |