diff --git a/packages/playground/src/tests/reading-obj-value/index.tsx b/packages/playground/src/tests/reading-obj-value/index.tsx new file mode 100644 index 0000000..4886def --- /dev/null +++ b/packages/playground/src/tests/reading-obj-value/index.tsx @@ -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() diff --git a/packages/playground/src/tests/reading-obj-value/reading obj value.theatre-project-state.json b/packages/playground/src/tests/reading-obj-value/reading obj value.theatre-project-state.json new file mode 100644 index 0000000..dcb4d9b --- /dev/null +++ b/packages/playground/src/tests/reading-obj-value/reading obj value.theatre-project-state.json @@ -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" + ] +} \ No newline at end of file