diff --git a/packages/dataverse/src/Ticker.ts b/packages/dataverse/src/Ticker.ts index b4ac8a3..a540a9a 100644 --- a/packages/dataverse/src/Ticker.ts +++ b/packages/dataverse/src/Ticker.ts @@ -45,6 +45,9 @@ export default class Ticker { /** * Counts up for every tick executed. * Internally, this is used to measure ticks per second. + * + * This is "public" to TypeScript, because it's a tool for performance measurements. + * Consider this as experimental, and do not rely on it always being here in future releases. */ public __ticks = 0 diff --git a/packages/playground/src/shared/hello-world-extension/App.tsx b/packages/playground/src/shared/hello-world-extension/App.tsx index 4d85034..9156225 100644 --- a/packages/playground/src/shared/hello-world-extension/App.tsx +++ b/packages/playground/src/shared/hello-world-extension/App.tsx @@ -1,10 +1,14 @@ import {editable as e, SheetProvider} from '@theatre/r3f' import {Stars, TorusKnot} from '@react-three/drei' -import {getProject} from '@theatre/core' +import {getProject, onChange} from '@theatre/core' import React from 'react' import {Canvas} from '@react-three/fiber' function App() { + const sheet = getProject('Space').sheet('Scene') + onChange(sheet.sequence.pointer, (a) => { + console.log('gasp!!', a) + }) return (
{ @@ -20,7 +24,7 @@ function App() { gl={{preserveDrawingBuffer: true}} frameloop="demand" > - + diff --git a/packages/playground/src/shared/hello-world-extension/index.tsx b/packages/playground/src/shared/hello-world-extension/index.tsx index ea029b8..752b0e5 100644 --- a/packages/playground/src/shared/hello-world-extension/index.tsx +++ b/packages/playground/src/shared/hello-world-extension/index.tsx @@ -37,7 +37,7 @@ studio.extend({ title: 'Example Icon', svgSource: '👁‍🗨', onClick: () => { - console.log('hello') + studio.createPane('example') }, }, ]) @@ -49,7 +49,16 @@ studio.extend({ } }, }, - panes: [], + panes: [ + { + class: 'example', + mount: ({paneId, node}) => { + studio.ui.renderToolset('global', node) + + return () => {} + }, + }, + ], }) studio.initialize() diff --git a/packages/playground/src/tests/r3f-stress-test/App.tsx b/packages/playground/src/tests/r3f-stress-test/App.tsx index 4fe5df4..9cad10a 100644 --- a/packages/playground/src/tests/r3f-stress-test/App.tsx +++ b/packages/playground/src/tests/r3f-stress-test/App.tsx @@ -42,6 +42,7 @@ function Model({url}: {url: string}) { ) } +// Initially, just copied from the shared/dom example const textInterpolate = (left: string, right: string, progression: number) => { if (!left || right.startsWith(left)) { const length = Math.floor( @@ -52,7 +53,7 @@ const textInterpolate = (left: string, right: string, progression: number) => { return left } -const boxObjectConfig = { +const allPropsObjectConfig = { test: types.string('Typing', {interpolate: textInterpolate}), testLiteral: types.stringLiteral('a', {a: 'Option A', b: 'Option B'}), bool: types.boolean(false), @@ -77,7 +78,8 @@ function App() { const sheet = project.sheet('Scene') project.ready.then(() => sheet.sequence.play({iterationCount: Infinity})) - sheet.object('everything', boxObjectConfig) + const allPropsObj = sheet.object('All Props Tester', allPropsObjectConfig) + console.log('allPropsObj', allPropsObj) return (
, document.getElementById('root')) const raf = Ticker.raf -setInterval(() => { - const id = Date.now().toString(36) + '-' - performance.mark(id) - setTimeout(() => { - performance.measure('---', id) - }, 2000) -}, 2000) +// Show "ticks per second" information in performance measurements using the User Timing API +// See https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API +// See https://web.dev/user-timings/ setInterval(() => { const start = { ticks: raf.__ticks, @@ -29,6 +25,7 @@ setInterval(() => { setTimeout(() => { const ticksPerSec = ((raf.__ticks - start.ticks) * 1000) / (Date.now() - start.now) + // This shows up in the performance tab of devtools if you record! performance.measure( `${ticksPerSec.toFixed(0)}t/1s - ${(ticksPerSec * 0.5).toFixed( 0,