66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
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()
|