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,