variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

dev: Add "reading obj value" playground test

Browse source
This commit is contained in:
Cole Lawrence 2022-08-03 11:22:03 -04:00
parent c00144464d
commit e0c9626d68
2 changed files with 222 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
packages/playground/src/tests/reading-obj-value/index.tsx Normal file
View file

@ -0,0 +1,66 @@
import studio from '@theatre/studio'
import {getProject, types} from '@theatre/core'
import state from './reading obj value.theatre-project-state.json'
studio.initialize({usePersistentStorage: false})
const project = getProject('reading obj value', {state})
const TOTAL_ELEMENTS = 300
const TOTAL_ELEMENTS_R = 1 / TOTAL_ELEMENTS
const playbackControlObj = project
.sheet('controls sheet')
.object('playback control', {
interval: types.number(50, {
range: [1, 20000],
}),
})
const elements = new Array(TOTAL_ELEMENTS).fill(0).map((_, idx) => {
const sheet = project.sheet('sample sheet', `#${idx}`)
const obj = sheet.object('sample object', {
position: {
x: 0,
y: 0,
},
})
const el = document.createElement('div')
Object.assign(el.style, {
position: 'absolute',
height: '2rem',
width: '2rem',
borderRadius: '50%',
background: `hsl(${idx * 360 * TOTAL_ELEMENTS_R}, 100%, 80%)`,
left: 'var(--x)',
top: 'var(--y)',
})
document.body.appendChild(el)
return {el, sheet, obj}
})
project.ready.then(() => {
// select the playback controls obj so it shows as a tweakable control
studio.setSelection([playbackControlObj])
for (let i = 0; i < elements.length; i++) {
const sheet = elements[i].sheet
sheet.sequence.position = i * TOTAL_ELEMENTS_R * 5
sheet.sequence.play({
iterationCount: Infinity,
})
}
})
function render() {
for (let i = 0; i < elements.length; i++) {
const element = elements[i]
// read directly from value to test keepHot from https://linear.app/theatre/issue/P-217/if-objvalue-is-read-make-sure-its-derivation-remains-hot-for-a-while
const value = element.obj.value
element.el.style.setProperty('--x', value.position.x + 'px')
element.el.style.setProperty('--y', value.position.y + 'px')
}
setTimeout(render, playbackControlObj.value.interval)
}
render()

156
packages/playground/src/tests/reading-obj-value/reading obj value.theatre-project-state.json Normal file
View file

@ -0,0 +1,156 @@
{
"sheetsById": {
"sample sheet": {
"staticOverrides": {
"byObject": {
"sample object": {
"position": {
"x": 303,
"y": 268
},
"interval": 50
}
}
},
"sequence": {
"subUnitsPerUnit": 30,
"length": 10,
"type": "PositionalSequence",
"tracksByObject": {
"sample object": {
"trackData": {
"2LcFioJysu": {
"type": "BasicKeyframedTrack",
"__debugName": "sample object:[\"position\",\"x\"]",
"keyframes": [
{
"id": "Kxy5pUojNt",
"position": 0,
"connectedRight": true,
"handles": [
0.5,
1,
0.5,
0
],
"value": 303
},
{
"id": "Gw4Mws7OD9",
"position": 1.833,
"connectedRight": true,
"handles": [
0.5,
1,
0.5,
0
],
"value": 30.799745441261848
},
{
"id": "Hf8yST9Wh5",
"position": 8,
"connectedRight": true,
"handles": [
0.5,
1,
0.5,
0
],
"value": 414
},
{
"id": "yVYv4gA4oO",
"position": 10,
"connectedRight": true,
"handles": [
0.5,
1,
0.5,
0
],
"value": 303
}
]
},
"oWt_kxiglj": {
"type": "BasicKeyframedTrack",
"__debugName": "sample object:[\"position\",\"y\"]",
"keyframes": [
{
"id": "idPYVcMMFV",
"position": 0,
"connectedRight": true,
"handles": [
0.5,
1,
0.5,
0
],
"value": 268
},
{
"id": "DkaWGJJs5y",
"position": 3.1,
"connectedRight": true,
"handles": [
0.5,
1,
0.5,
0
],
"value": 136.76766033714398
},
{
"id": "wSMOxRFOHI",
"position": 5,
"connectedRight": true,
"handles": [
0.5,
1,
0.5,
0
],
"value": 518
},
{
"id": "iurvWeyPBD",
"position": 7.3,
"connectedRight": true,
"handles": [
0.5,
1,
0.5,
0
],
"value": 274.6142665912034
},
{
"id": "9IRlJBphrf",
"position": 10,
"connectedRight": true,
"handles": [
0.5,
1,
0.5,
0
],
"value": 268
}
]
}
},
"trackIdByPropPath": {
"[\"position\",\"x\"]": "2LcFioJysu",
"[\"position\",\"y\"]": "oWt_kxiglj"
}
}
}
}
}
},
"definitionVersion": "0.4.0",
"revisionHistory": [
"B_AcNZ7EnqbSzdJj"
]
}