1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import React, { useEffect, useState } from "react"
import { observer } from "mobx-react-lite"
import { ViewStyle } from "react-native"
import { Screen, Text } from "../../components"
// import { useNavigation } from "@react-navigation/native"
// import { useStores } from "../../models"
import { color } from "../../theme"
import { Graph } from "../../components"
import { Tweaks } from "../../components"
import genRandomTree from "../../data/randomdata"
import AsyncStorage from "@react-native-async-storage/async-storage"
const ROOT: ViewStyle = {
backgroundColor: color.palette.black,
flex: 1,
}
export const GraphScreen = observer(function GraphScreen() {
// Pull in one of our MST stores
// const { someStore, anotherStore } = useStores()
// Pull in navigation via hook
// const navigation = useNavigation()
const [charge, setCharge] = useState(-30)
const [collision, setCollision] = useState(false)
const [linkStrength, setLinkStrength] = useState(1)
const [linkIts, setLinkIts] = useState(1)
const [physics, setPhysics] = useState({})
const physicsInit = {
charge: -30,
collision: false,
linkStrength: 1,
linkIts: 1,
collapse: false,
threedim: false,
particles: 2,
linkOpacity: 1,
linkWidth: 1,
particleWidth: 1,
nodeRel: 1,
}
const getData = async () => {
try {
const value = await AsyncStorage.getItem("@physics")
if (value !== null || keys(value) === keys(physicsInit)) {
return JSON.parse(value)
} else {
console.log(physicsInit)
return physicsInit
}
} catch (e) {
console.log(e)
}
}
useEffect(() => {
getData().then((data) => setPhysics(data))
}, [])
const storeData = async (value) => {
try {
const jsonValue = JSON.stringify(value)
await AsyncStorage.setItem("@physics", jsonValue)
console.log("Writing " + jsonValue)
} catch (e) {
console.log(e)
}
}
/* const [physics, setPhysics] = useState(
* {
* charge: -30,
* collision: false,
* linkStrength: 1,
* linkIts: 1,
* collapse: false,
* threedim: false,
* particles: 2,
* }); */
useEffect(() => {
if (timer) {
clearTimeout(timer)
console.log("clear timer")
}
const timer = setTimeout(() => {
console.log("Physics changed")
storeData(physics)
const test = getData()
console.log(test)
}, 1000)
return () => clearTimeout(timer)
}, [physics])
const gData = genRandomTree()
return (
<Screen style={ROOT} preset="scroll">
<Tweaks physics={physics} setPhysics={setPhysics} />
<Graph physics={physics} gData={gData} />
</Screen>
)
})
|
