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 +++-
 3 files changed, 21 insertions(+), 9 deletions(-)

(limited to 'app')

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();
-- 
cgit v1.2.3