summaryrefslogtreecommitdiff
path: root/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'app/components')
-rw-r--r--app/components/graph/graph.tsx57
-rw-r--r--app/components/tweaks/tweaks.tsx1001
2 files changed, 686 insertions, 372 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index b11eb9b..8b041b5 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -285,7 +285,7 @@ onLinkHover={handleLinkHover}
if (highlightNodes.size === 0) {
return "rgb(100, 100, 100, 1)"
} else {
- return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+ return highlightNodes.has(node) ? "#a991f1" : "rgb(50, 50, 50, 0.5)"
}
}
: (node) => {
@@ -327,7 +327,7 @@ onLinkHover={handleLinkHover}
if (highlightLinks.size === 0) {
return "rgb(50, 50, 50, 0.8)"
} else {
- return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+ return highlightLinks.has(link) ? "#a991f1" : "rgb(50, 50, 50, 0.2)"
}
}
: (link) =>
@@ -407,13 +407,13 @@ onLinkHover={handleLinkHover}
d3AlphaMin={physics.alphaTarget}
d3VelocityDecay={physics.velocityDecay}
onBackgroundClick={handleBackgroundClick}
+ backgroundColor={"#242730"}
/>
) : (
<ForceGraph3D
ref={fgRef}
graphData={!physics.local ? gData : localGraphData}
//graphData={gData}
- nodeAutoColorBy={physics.colorful ? "id" : undefined}
nodeColor={
!physics.colorful
? (node) => {
@@ -423,10 +423,39 @@ onLinkHover={handleLinkHover}
return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
}
}
- : undefined
+ : (node) => {
+ if (node.neighbors.length === 1 || node.neighbors.length === 2) {
+ return [
+ "#ff665c",
+ "#e69055",
+ "#7bc275",
+ "#4db5bd",
+ "#FCCE7B",
+ "#51afef",
+ "#1f5582",
+ "#C57BDB",
+ "#a991f1",
+ "#5cEfFF",
+ "#6A8FBF",
+ ][node.neighbors[0].index % 11]
+ } else {
+ return [
+ "#ff665c",
+ "#e69055",
+ "#7bc275",
+ "#4db5bd",
+ "#FCCE7B",
+ "#51afef",
+ "#1f5582",
+ "#C57BDB",
+ "#a991f1",
+ "#5cEfFF",
+ "#6A8FBF",
+ ][node.index % 11]
+ }
+ }
}
- linkAutoColorBy={physics.colorful ? "target" : undefined}
- //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
+ //linkAutoColorBy={physics.colorful ? ((d) => gData.nodes[d.sourceIndex].id % GROUPS) : undefined}
linkColor={
!physics.colorful
? (link) => {
@@ -436,7 +465,20 @@ onLinkHover={handleLinkHover}
return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
}
}
- : undefined
+ : (link) =>
+ [
+ "#ff665c",
+ "#e69055",
+ "#7bc275",
+ "#4db5bd",
+ "#FCCE7B",
+ "#51afef",
+ "#1f5582",
+ "#C57BDB",
+ "#a991f1",
+ "#5cEfFF",
+ "#6A8FBF",
+ ][gData.nodes[link.sourceIndex].index % 11]
}
linkDirectionalParticles={physics.particles}
nodeLabel={(node) => node.title}
@@ -472,6 +514,7 @@ onLinkHover={handleLinkHover}
nodeThreeObjectExtend={true}
onNodeClick={selectClick}
onBackgroundClick={handleBackgroundClick}
+ backgroundColor={"#242730"}
/>
)}
</View>
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index 9e23afb..3bfeb6e 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -1,397 +1,668 @@
import * as React from "react"
-import { ScrollView, StyleProp, Switch, TextStyle, TouchableOpacity, View, ViewStyle, StyleSheet, Button } from "react-native"
+import {
+ ScrollView,
+ StyleProp,
+ TextStyle,
+ TouchableOpacity,
+ View,
+ ViewStyle,
+ StyleSheet,
+ Button,
+} from "react-native"
import { observer } from "mobx-react-lite"
import { color, typography } from "../../theme"
import { Text } from "../"
import { flatten } from "ramda"
import Slider from "@react-native-community/slider"
import { useState } from "react"
-import Accordion from 'react-native-collapsible/Accordion'
-import * as Animatable from 'react-native-animatable'
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
+import Accordion from "react-native-collapsible/Accordion"
+import * as Animatable from "react-native-animatable"
+import Icon from "react-native-vector-icons/MaterialCommunityIcons"
+import {Switch} from "react-native-elements"
const CONTAINER: ViewStyle = {
- justifyContent: "center",
+ justifyContent: "center",
}
const TEXT: TextStyle = {
- fontFamily: typography.primary,
- fontSize: 14,
- color: color.primary,
+ fontFamily: typography.primary,
+ fontSize: 14,
+ color: color.primary,
}
export interface TweaksProps {
- /**
- * An optional style override useful for padding & margin.
- */
- style?: StyleProp<ViewStyle>
- physics
- setPhysics
+ /**
+ * An optional style override useful for padding & margin.
+ */
+ style?: StyleProp<ViewStyle>
+ physics
+ setPhysics
}
/**
* Describe your component here
*/
export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element {
- const { style, physics, setPhysics } = props
- // const styles = flatten([CONTAINER, style])
+ const { style, physics, setPhysics } = props
+ // const styles = flatten([CONTAINER, style])
- const content = [
- {
- title: "Physics",
- content:
- <View>
- <Text preset="fieldLabel" text="Gravity" />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.gravityOn}
- onValueChange={() => { setPhysics({ ...physics, gravityOn: !physics.gravityOn }) }}
- />
- <Text preset="fieldLabel" text={"Gravity: " + physics.gravity} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0}
- maximumValue={1}
- onValueChange={(value) => { setPhysics({ ...physics, gravity: value }) }}
- value={physics.gravity}
- step={0.01} />
- <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={-400}
- maximumValue={100}
- onValueChange={(value) => { setPhysics({ ...physics, charge: value }) }}
- value={physics.charge}
- step={1} />
- <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0}
- maximumValue={2}
- onValueChange={(value) => { setPhysics({ ...physics, linkStrength: value }) }}
- value={physics.linkStrength}
- step={0.01}
- />
- <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={1}
- maximumValue={10}
- onValueChange={(value) => { setPhysics({ ...physics, linkIts: value }) }}
- value={physics.linkIts}
- step={1} />
- <Text preset="fieldLabel" text="Collision" />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.collision}
- onValueChange={() => { setPhysics({ ...physics, collision: !physics.collision }) }}
- />
- <Text preset="fieldLabel" text={"Alhpa Decay: " + physics.alphaDecay} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0}
- maximumValue={1}
- onValueChange={(value) => { setPhysics({ ...physics, alphaDecay: value }) }}
- value={physics.alphaDecay}
- step={.01} />
- <Text preset="fieldLabel" text={"Alhpa Target: " + physics.alphaTarget} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0}
- maximumValue={1}
- onValueChange={(value) => { setPhysics({ ...physics, alphaTarget: value }) }}
- value={physics.alphaTarget}
- step={0.1}
- />
- <Text preset="fieldLabel" text={"Viscosity: " + physics.velocityDecay} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0}
- maximumValue={1}
- onValueChange={(value) => { setPhysics({ ...physics, velocityDecay: value }) }}
- value={physics.velocityDecay}
- step={0.01} />
- <Text preset="fieldLabel" text={"Galaxy Mode (3D-only)"} />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.galaxy}
- onValueChange={() => { setPhysics({ ...physics, galaxy: !physics.galaxy }) }}
- />
- </View>,
- },
- {
- title: 'Visual',
- content:
- <View>
- <Text preset="fieldLabel" text="Colorful" />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.colorful}
- onValueChange={() => { setPhysics({ ...physics, colorful: !physics.colorful }) }}
- />
- <Text preset="fieldLabel" text="Hover highlight" />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.hover}
- onValueChange={() => { setPhysics({ ...physics, hover: !physics.hover }) }}
- />
- <Text preset="fieldLabel" text={"Line Opacity: " + physics.linkOpacity} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0}
- maximumValue={1}
- onValueChange={(value) => { setPhysics({ ...physics, linkOpacity: value }) }}
- value={physics.linkOpacity}
- step={.01} />
- <Text preset="fieldLabel" text={"Line width: " + physics.linkWidth} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={.1}
- maximumValue={10}
- onValueChange={(value) => { setPhysics({ ...physics, linkWidth: value }) }}
- value={physics.linkWidth}
- step={0.1} />
- <Text preset="fieldLabel" text={"Node size: " + physics.nodeRel} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={1}
- maximumValue={10}
- onValueChange={(value) => { setPhysics({ ...physics, nodeRel: value }) }}
- value={physics.nodeRel}
- step={.01} />
- <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0}
- maximumValue={10}
- onValueChange={(value) => { setPhysics({ ...physics, particles: value }) }}
- value={physics.particles}
- step={1} />
- <Text preset="fieldLabel" text={"Particle Size: " + physics.particleWidth} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={1}
- maximumValue={10}
- onValueChange={(value) => { setPhysics({ ...physics, particleWidth: value }) }}
- value={physics.particleWidth}
- step={.1} />
- <Text preset="fieldLabel" text="Labels" />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.labels}
- onValueChange={() => { setPhysics({ ...physics, labels: !physics.labels }) }}
- />
- <Text preset="fieldLabel" text={"Scale when labels become visible: " + physics.labelScale} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0.1}
- maximumValue={5}
- onValueChange={(value) => { setPhysics({ ...physics, labelScale: value }) }}
- value={physics.labelScale}
- step={.1} />
- </View>,
- },
- {
- title: 'Modes',
- content:
- <View>
- <Text preset="fieldLabel" text="Expandable Graph" />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.collapse}
- onValueChange={() => { setPhysics({ ...physics, collapse: !physics.collapse }) }}
- />
- <Text preset="fieldLabel" text={"Change starting point: " + physics.rootId} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0}
- maximumValue={600}
- onValueChange={(value) => { setPhysics({ ...physics, rootId: value }) }}
- value={physics.rootId}
- step={1} />
- <Text preset="fieldLabel" text="3D" />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.threedim}
- onValueChange={() => { setPhysics({ ...physics, threedim: !physics.threedim }) }}
- />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.local}
- onValueChange={() => { setPhysics({ ...physics, local: !physics.local }) }}
- />
- </View>
- },
- ];
+ const content = [
+ {
+ title: "Physics",
+ content: (
+ <View>
+ <Text preset="fieldLabel" text="Gravity" />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.gravityOn}
+ onValueChange={() => {
+ setPhysics({ ...physics, gravityOn: !physics.gravityOn })
+ }}
+ />
+ <Text preset="fieldLabel" text={"Gravity: " + physics.gravity} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0}
+ maximumValue={1}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, gravity: value })
+ }}
+ value={physics.gravity}
+ step={0.01}
+ />
+ <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={-400}
+ maximumValue={100}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, charge: value })
+ }}
+ value={physics.charge}
+ step={1}
+ />
+ <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0}
+ maximumValue={2}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, linkStrength: value })
+ }}
+ value={physics.linkStrength}
+ step={0.01}
+ />
+ <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={1}
+ maximumValue={10}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, linkIts: value })
+ }}
+ value={physics.linkIts}
+ step={1}
+ />
+ <Text preset="fieldLabel" text="Collision" />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.collision}
+ onValueChange={() => {
+ setPhysics({ ...physics, collision: !physics.collision })
+ }}
+ />
+ <Text preset="fieldLabel" text={"Alhpa Decay: " + physics.alphaDecay} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ minimumValue={0}
+ maximumValue={1}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, alphaDecay: value })
+ }}
+ value={physics.alphaDecay}
+ step={0.01}
+ />
+ <Text preset="fieldLabel" text={"Alhpa Target: " + physics.alphaTarget} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0}
+ maximumValue={1}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, alphaTarget: value })
+ }}
+ value={physics.alphaTarget}
+ step={0.1}
+ />
+ <Text preset="fieldLabel" text={"Viscosity: " + physics.velocityDecay} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0}
+ maximumValue={1}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, velocityDecay: value })
+ }}
+ value={physics.velocityDecay}
+ step={0.01}
+ />
+ <Text preset="fieldLabel" text={"Galaxy Mode (3D-only)"} />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.galaxy}
+ onValueChange={() => {
+ setPhysics({ ...physics, galaxy: !physics.galaxy })
+ }}
+ />
+ </View>
+ ),
+ },
+ {
+ title: "Visual",
+ content: (
+ <View>
+ <Text preset="fieldLabel" text="Colorful" />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.colorful}
+ onValueChange={() => {
+ setPhysics({ ...physics, colorful: !physics.colorful })
+ }}
+ />
+ <Text preset="fieldLabel" text="Hover highlight" />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.hover}
+ onValueChange={() => {
+ setPhysics({ ...physics, hover: !physics.hover })
+ }}
+ />
+ <Text preset="fieldLabel" text={"Line Opacity: " + physics.linkOpacity} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0}
+ maximumValue={1}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, linkOpacity: value })
+ }}
+ value={physics.linkOpacity}
+ step={0.01}
+ />
+ <Text preset="fieldLabel" text={"Line width: " + physics.linkWidth} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0.1}
+ maximumValue={10}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, linkWidth: value })
+ }}
+ value={physics.linkWidth}
+ step={0.1}
+ />
+ <Text preset="fieldLabel" text={"Node size: " + physics.nodeRel} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={1}
+ maximumValue={10}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, nodeRel: value })
+ }}
+ value={physics.nodeRel}
+ step={0.01}
+ />
+ <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0}
+ maximumValue={10}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, particles: value })
+ }}
+ value={physics.particles}
+ step={1}
+ />
+ <Text preset="fieldLabel" text={"Particle Size: " + physics.particleWidth} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={1}
+ maximumValue={10}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, particleWidth: value })
+ }}
+ value={physics.particleWidth}
+ step={0.1}
+ />
+ <Text preset="fieldLabel" text="Labels" />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.labels}
+ onValueChange={() => {
+ setPhysics({ ...physics, labels: !physics.labels })
+ }}
+ />
+ <Text
+ preset="fieldLabel"
+ text={"Scale when labels become visible: " + physics.labelScale}
+ />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0.1}
+ maximumValue={5}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, labelScale: value })
+ }}
+ value={physics.labelScale}
+ step={0.1}
+ />
+ </View>
+ ),
+ },
+ {
+ title: "Modes",
+ content: (
+ <View>
+ <Text preset="fieldLabel" text="Expandable Graph" />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.collapse}
+ onValueChange={() => {
+ setPhysics({ ...physics, collapse: !physics.collapse })
+ }}
+ />
+ <Text preset="fieldLabel" text={"Change starting point: " + physics.rootId} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0}
+ maximumValue={600}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, rootId: value })
+ }}
+ value={physics.rootId}
+ step={1}
+ />
+ <Text preset="fieldLabel" text="3D" />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.threedim}
+ onValueChange={() => {
+ setPhysics({ ...physics, threedim: !physics.threedim })
+ }}
+ />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.local}
+ onValueChange={() => {
+ setPhysics({ ...physics, local: !physics.local })
+ }}
+ />
+ </View>
+ ),
+ },
+ ]
- const [activeSections, setActiveSections] = useState([]);
+ const [activeSections, setActiveSections] = useState([])
- const setSections = (sections) => {
- setActiveSections(
- sections.includes(undefined) ? [] : sections
- );
- };
+ const setSections = (sections) => {
+ setActiveSections(sections.includes(undefined) ? [] : sections)
+ }
- const renderHeader = (section, _, isActive) => {
- return (
- <Animatable.View
- duration={400}
- style={[styles.header, isActive ? styles.active : styles.inactive]}
- transition="backgroundColor"
- >
- <Text style={styles.headerText}>{section.title}</Text>
- </Animatable.View>
- );
- };
+ const renderHeader = (section, _, isActive) => {
+ return (
+ <Animatable.View
+ duration={400}
+ style={[styles.header, isActive ? styles.active : styles.inactive]}
+ transition="backgroundColor"
+ >
+ <Text style={styles.headerText}>{section.title}</Text>
+ </Animatable.View>
+ )
+ }
- const renderContent = (section, _, isActive) => {
- return (
- <Animatable.View
- duration={400}
- style={[styles.content, isActive ? styles.active : styles.inactive]}
- transition="backgroundColor"
+ const renderContent = (section, _, isActive) => {
+ return (
+ <Animatable.View
+ duration={400}
+ style={[styles.content, isActive ? styles.active : styles.inactive]}
+ transition="backgroundColor"
+ >
+ {section.content}
+ </Animatable.View>
+ )
+ }
+ const [tweaks, setTweaks] = useState(true)
+ if (true) {
+ if (tweaks) {
+ return (
+ <View style={styles.container}>
+ <View style={{ height: 30, width: "100%", backgroundColor: "#2a2e38" }}>
+ <TouchableOpacity
+ style={{
+ width: 30,
+ color: "#a991f1",
+ textAlign: "center",
+ marginLeft: "auto",
+ padding: 5,
+ }}
+ onPress={() => {
+ setTweaks(false)
+ }}
>
- {section.content}
- </Animatable.View>
- );
- }
- const [tweaks, setTweaks] = useState(true);
- if (true) {
- if (tweaks) {
- return (
- <View style={styles.container}>
- <View style={{ height: 30, width: "100%", backgroundColor: "rgb(20,20,20)" }}>
- <TouchableOpacity style={{ width: 30, color: "#ffffff", textAlign: "center", marginLeft: "auto", padding: 5 }}
- onPress={() => { setTweaks(false) }}>
- <Icon name="close-circle" color="#ffffff" size={20} />
- </TouchableOpacity>
- </View>
- <ScrollView>
- <Accordion
- activeSections={activeSections}
- sections={content}
- touchAbleComponent={TouchableOpacity}
- expandMultiple={true}
- renderHeader={renderHeader}
- renderContent={renderContent}
- duration={200}
- onChange={setSections}
- renderAsFlatList={false}
-
- />
- </ScrollView>
- </View>
- );
- } else {
- return (
- <TouchableOpacity
- onPress={() => { setTweaks(true) }}
- style={{ position: "absolute", top: 50, left: 50, width: 30, color: "#ffffff", zIndex: 100 }}>
- <Icon name="cog" color="#ffffff" size={30} />
- </TouchableOpacity>
- )
- }
+ <Icon name="close-circle" color="#ffffff" size={20} />
+ </TouchableOpacity>
+ </View>
+ <ScrollView>
+ <Accordion
+ activeSections={activeSections}
+ sections={content}
+ touchAbleComponent={TouchableOpacity}
+ expandMultiple={true}
+ renderHeader={renderHeader}
+ renderContent={renderContent}
+ duration={200}
+ onChange={setSections}
+ renderAsFlatList={false}
+ />
+ </ScrollView>
+ </View>
+ )
} else {
- return (
- <View style={{ position: "absolute", top: "5%", left: "5%", zIndex: 100, width: 300, 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={100}
- onValueChange={(value) => { setPhysics({ ...physics, charge: value }) }}
- value={physics.charge}
- step={1} />
- <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={0}
- maximumValue={2}
- onValueChange={(value) => { setPhysics({ ...physics, linkStrength: value }) }}
- value={physics.linkStrength}
- step={0.1}
- />
- <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
- <Slider style={{ height: 40, width: "90%" }}
- minimumValue={1}
- maximumValue={10}
- onValueChange={(value) => { setPhysics({ ...physics, linkIts: value }) }}
- value={physics.linkIts}
- step={1} />
- <Text preset="fieldLabel" text="Collision" />
- <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, marginVertical: 10 }}
- value={physics.collapse}
- onValueChange={() => { setPhysics({ ...physics, collapse: !physics.collapse }) }}
- />
- <Text preset="fieldLabel" text="3D" />
- <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
- value={physics.threedim}
- onValueChange={() => { setPhysics({ ...physics, threedim: !physics.threedim }) }}
- />
- </View>
- );
+ return (
+ <TouchableOpacity
+ onPress={() => {
+ setTweaks(true)
+ }}
+ style={{
+ position: "absolute",
+ top: 50,
+ left: 50,
+ width: 30,
+ color: "#ffffff",
+ zIndex: 100,
+ }}
+ >
+ <Icon name="cog" color="#ffffff" size={30} />
+ </TouchableOpacity>
+ )
}
+ } else {
+ return (
+ <View
+ style={{
+ position: "absolute",
+ top: "5%",
+ left: "5%",
+ zIndex: 100,
+ width: 300,
+ backgroundColor: "#000000",
+ padding: 20,
+ }}
+ >
+ <Text preset="bold" text="Physics" />
+ <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={-400}
+ maximumValue={100}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, charge: value })
+ }}
+ value={physics.charge}
+ step={1}
+ />
+ <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={0}
+ maximumValue={2}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, linkStrength: value })
+ }}
+ value={physics.linkStrength}
+ step={0.1}
+ />
+ <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ minimumValue={1}
+ maximumValue={10}
+ onValueChange={(value) => {
+ setPhysics({ ...physics, linkIts: value })
+ }}
+ value={physics.linkIts}
+ step={1}
+ />
+ <Text preset="fieldLabel" text="Collision" />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.collision}
+ onValueChange={() => {
+ setPhysics({ ...physics, collision: !physics.collision })
+ }}
+ />
+ <Text preset="bold" text="Visual" />
+ <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+ <Slider
+ minimumTrackTintColor="#a991f1"
+ maximumTrackTintColor="#242730"
+ thumbTintColor="#a991f1"
+ style={styles.slider}
+ 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
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.collapse}
+ onValueChange={() => {
+ setPhysics({ ...physics, collapse: !physics.collapse })
+ }}
+ />
+ <Text preset="fieldLabel" text="3D" />
+ <Switch
+ color="#a991f1"
+ trackColor={{
+ false: "#62686E",
+ true: "#a991f1"
+ }}
+ style={styles.switch}
+ value={physics.threedim}
+ onValueChange={() => {
+ setPhysics({ ...physics, threedim: !physics.threedim })
+ }}
+ />
+ </View>
+ )
+ }
})
const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: 'rgb(20,20,20)',
- position: "absolute",
- zIndex: 100,
- left: 50,
- top: 50,
- width: 250,
- borderRadius: 5,
- borderStyle: "solid",
- maxHeight: "70%",
- paddingBottom: 20,
- },
- title: {
- textAlign: 'left',
- fontSize: 22,
- fontWeight: '300',
- marginBottom: 20,
- paddingLeft: 20,
- },
- header: {
- backgroundColor: '#111111',
- padding: 10,
- paddingBottom: 20,
- textAlign: "left",
- },
- headerText: {
- textAlign: 'left',
- paddingLeft: 30,
- fontSize: 16,
- fontWeight: '500',
- },
- content: {
- padding: 20,
- paddingLeft: 60,
- backgroundColor: '#000000',
- },
- active: {
- backgroundColor: 'rgba(0,0,0,1)',
- },
- inactive: {
- backgroundColor: 'rgba(20,20,20,1)',
- },
- selectors: {
- marginBottom: 10,
- flexDirection: 'row',
- justifyContent: 'center',
- },
- selector: {
- backgroundColor: '#111111',
- padding: 10,
- },
- activeSelector: {
- fontWeight: 'bold',
- },
- selectTitle: {
- fontSize: 14,
- fontWeight: '500',
- padding: 10,
- },
- multipleToggle: {
- flexDirection: 'row',
- justifyContent: 'center',
- marginVertical: 30,
- alignItems: 'center',
- },
- multipleToggle__title: {
- fontSize: 16,
- marginRight: 8,
- },
-});
+ container: {
+ flex: 1,
+ backgroundColor: "#2a2e38",
+ position: "absolute",
+ zIndex: 100,
+ left: 50,
+ top: 50,
+ width: 250,
+ borderRadius: 5,
+ borderStyle: "solid",
+ maxHeight: "70%",
+ paddingBottom: 20,
+ },
+ title: {
+ textAlign: "left",
+ fontSize: 22,
+ fontWeight: "300",
+ marginBottom: 20,
+ paddingLeft: 20,
+ },
+ header: {
+ backgroundColor: "#2a2e38",
+ padding: 10,
+ paddingBottom: 20,
+ textAlign: "left",
+ },
+ headerText: {
+ textAlign: "left",
+ paddingLeft: 30,
+ fontSize: 16,
+ fontWeight: "500",
+ },
+ content: {
+ padding: 20,
+ paddingLeft: 60,
+ backgroundColor: "#000000",
+ },
+ active: {
+ backgroundColor: "#2a2e38",
+ },
+ inactive: {
+ backgroundColor: "#2a2e38",
+ },
+ selectors: {
+ marginBottom: 10,
+ flexDirection: "row",
+ justifyContent: "center",
+ },
+ selector: {
+ backgroundColor: "#2a2e38",
+ padding: 10,
+ },
+ activeSelector: {
+ fontWeight: "bold",
+ },
+ selectTitle: {
+ fontSize: 14,
+ fontWeight: "500",
+ padding: 10,
+ },
+ multipleToggle: {
+ flexDirection: "row",
+ justifyContent: "center",
+ marginVertical: 30,
+ alignItems: "center",
+ },
+ multipleToggle__title: {
+ fontSize: 16,
+ marginRight: 8,
+ },
+ slider: {
+ minimumTrackTintColor: "#a991f1",
+ thumbTintColor: "#a991f1",
+ height: 40,
+ width: "90%",
+ },
+ switch: {
+ width: "5",
+ height: 20,
+ marginVertical: 10,
+ },
+})
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 20:29:37 +0000