From f07cb0d2745f59fe07254698402b160e7535c641 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Thu, 15 Jul 2021 19:30:13 +0200
Subject: cleaned up tweak menu, added particle toggle

---
 app/components/graph/graph.tsx     |  5 +++--
 app/components/tweaks/tweaks.tsx   | 21 +++++++++++++++------
 app/screens/graph/graph-screen.tsx |  4 +++-
 package.json                       |  1 +
 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",
diff --git a/yarn.lock b/yarn.lock
index 83d2be3..13088af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"
-- 
cgit v1.2.3