diff options
Diffstat (limited to 'app_expo/components/tweaks/tweaks.tsx')
| -rw-r--r-- | app_expo/components/tweaks/tweaks.tsx | 617 |
1 files changed, 617 insertions, 0 deletions
diff --git a/app_expo/components/tweaks/tweaks.tsx b/app_expo/components/tweaks/tweaks.tsx new file mode 100644 index 0000000..ea35805 --- /dev/null +++ b/app_expo/components/tweaks/tweaks.tsx @@ -0,0 +1,617 @@ +import * as React from 'react' +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 { Switch } from 'react-native-elements' + +const CONTAINER: ViewStyle = { + justifyContent: 'center', +} + +const TEXT: TextStyle = { + fontFamily: typography.primary, + fontSize: 14, + color: color.primary, +} + +export interface TweaksProps { + /** + * 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 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={'Alpha Decay: ' + physics.alphaDecay} /> + <Slider + style={styles.slider} + minimumTrackTintColor="#a991f1" + maximumTrackTintColor="#242730" + thumbTintColor="#a991f1" + 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></View>, + }, + ] + + const [activeSections, setActiveSections] = useState([]) + + 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 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) + }} + > + <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> + ) + } + } 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: { + display: 'flex', + backgroundColor: '#2a2e38', + position: 'absolute', + zIndex: 5, + marginLeft: '2%', + marginTop: '2%', + maxWidth: 275, + borderRadius: 10, + borderStyle: 'solid', + borderWidth: 10, + borderColor: '#2a2e38', + maxHeight: '80%', + paddingBottom: 20, + }, + title: { + textAlign: 'left', + fontSize: 22, + fontWeight: '300', + marginBottom: 20, + paddingLeft: 10, + }, + 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, + }, +}) |