diff options
Diffstat (limited to 'app/components/tweaks/tweaks.tsx')
| -rw-r--r-- | app/components/tweaks/tweaks.tsx | 1001 |
1 files changed, 636 insertions, 365 deletions
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, + }, +}) |