diff options
Diffstat (limited to 'app/components')
| -rw-r--r-- | app/components/graph/graph.tsx | 5 | ||||
| -rw-r--r-- | app/components/tweaks/tweaks.tsx | 21 |
2 files changed, 18 insertions, 8 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})}} /> |