diff --git a/packages/playground/devEnv/playwright.config.ts b/packages/playground/devEnv/playwright.config.ts
index 3f7ba0d..5d2f28b 100644
--- a/packages/playground/devEnv/playwright.config.ts
+++ b/packages/playground/devEnv/playwright.config.ts
@@ -51,6 +51,10 @@ const config: PlaywrightTestConfig = {
name: 'chromium',
use: {
...devices['Desktop Chrome'],
+ launchOptions: {
+ // args: ["--headless","--no-sandbox","--use-angle=gl"]
+ args: ['--no-sandbox'],
+ },
},
},
diff --git a/packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts b/packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts
index f5e6d10..c213e60 100644
--- a/packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts
+++ b/packages/playground/src/tests/hot-reload-extension-pane/test.e2e.ts
@@ -5,15 +5,13 @@ test.describe('hot-reload-extension-pane', () => {
await page.goto('./tests/hot-reload-extension-pane/')
const toolbar = page.locator(
- '[data-test-id="theatre-extensionToolbar-global"]',
+ '[data-testid="theatre-extensionToolbar-global"]',
)
const forwardButton = toolbar.getByRole('button', {name: '>'})
await forwardButton.click()
- const pane = page.locator(
- '[data-test-id="theatre-pane-content-pane1 \\#1"]',
- )
+ const pane = page.locator('[data-testid="theatre-pane-content-pane1 \\#1"]')
expect(await pane.textContent()).toEqual('pane1-config1')
await forwardButton.click()
diff --git a/packages/playground/src/tests/hot-reload-extension-toolbar/test.e2e.ts b/packages/playground/src/tests/hot-reload-extension-toolbar/test.e2e.ts
index 5e312ce..501a85f 100644
--- a/packages/playground/src/tests/hot-reload-extension-toolbar/test.e2e.ts
+++ b/packages/playground/src/tests/hot-reload-extension-toolbar/test.e2e.ts
@@ -5,7 +5,7 @@ test.describe('hot-reload-extension-toolbar', () => {
await page.goto('./tests/hot-reload-extension-toolbar/')
const toolbar = page.locator(
- '[data-test-id="theatre-extensionToolbar-global"]',
+ '[data-testid="theatre-extensionToolbar-global"]',
)
const forwardButton = toolbar.getByRole('button', {name: '>'})
diff --git a/packages/playground/src/tests/r3f-dynamic-tree/App.tsx b/packages/playground/src/tests/r3f-dynamic-tree/App.tsx
index a46e617..a0d950b 100644
--- a/packages/playground/src/tests/r3f-dynamic-tree/App.tsx
+++ b/packages/playground/src/tests/r3f-dynamic-tree/App.tsx
@@ -51,9 +51,13 @@ const cube1Config3 = cube1Config2
function Scene() {
const [state, setState] = useState(1)
- useExtensionButton('Step forward', () => {
- setState((s) => s + 1)
- })
+ useExtensionButton(
+ 'Step forward',
+ () => {
+ setState((s) => s + 1)
+ },
+ '>',
+ )
useEffect(() => {}, [])
diff --git a/packages/playground/src/tests/r3f-dynamic-tree/index.tsx b/packages/playground/src/tests/r3f-dynamic-tree/index.tsx
index 5507263..74f759d 100644
--- a/packages/playground/src/tests/r3f-dynamic-tree/index.tsx
+++ b/packages/playground/src/tests/r3f-dynamic-tree/index.tsx
@@ -5,6 +5,6 @@ import studio from '@theatre/studio'
import extension from '@theatre/r3f/dist/extension'
studio.extend(extension)
-studio.initialize()
+studio.initialize({usePersistentStorage: false})
ReactDOM.render(, document.getElementById('root'))
diff --git a/packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts b/packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts
new file mode 100644
index 0000000..1c3a63a
--- /dev/null
+++ b/packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts
@@ -0,0 +1,24 @@
+import {test, expect} from '@playwright/test'
+
+test.describe('r3f-dynamic-tree', () => {
+ test('works', async ({page}) => {
+ test.setTimeout(30000)
+ await page.goto('./tests/r3f-dynamic-tree/')
+
+ const toolbar = page.locator(
+ '[data-testid="theatre-extensionToolbar-global"]',
+ )
+
+ const snapshotButton = toolbar.getByRole('button').nth(0)
+ await snapshotButton.click()
+
+ const pane = page.getByTestId('theatre-pane-content-snapshot #1')
+ await expect(pane).toHaveScreenshot({})
+
+ const forwardButton = toolbar.getByRole('button', {name: '>'})
+ await forwardButton.click()
+ await forwardButton.click()
+ await forwardButton.click()
+ await expect(pane).toHaveScreenshot({})
+ })
+})
diff --git a/packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts-snapshots/r3f-dynamic-tree-works-1-chromium-darwin.png b/packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts-snapshots/r3f-dynamic-tree-works-1-chromium-darwin.png
new file mode 100644
index 0000000..2cb29e9
Binary files /dev/null and b/packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts-snapshots/r3f-dynamic-tree-works-1-chromium-darwin.png differ
diff --git a/packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts-snapshots/r3f-dynamic-tree-works-2-chromium-darwin.png b/packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts-snapshots/r3f-dynamic-tree-works-2-chromium-darwin.png
new file mode 100644
index 0000000..3fc5ae1
Binary files /dev/null and b/packages/playground/src/tests/r3f-dynamic-tree/test.e2e.ts-snapshots/r3f-dynamic-tree-works-2-chromium-darwin.png differ
diff --git a/packages/r3f/package.json b/packages/r3f/package.json
index 69bcec0..5bb6a2b 100644
--- a/packages/r3f/package.json
+++ b/packages/r3f/package.json
@@ -54,6 +54,7 @@
"@types/node": "^15.6.2",
"@types/react": "^17.0.9",
"@types/styled-components": "^5.1.9",
+ "@types/three": "0.131.0",
"esbuild": "^0.18.17",
"esbuild-register": "^3.4.2",
"lodash-es": "^4.17.21",
@@ -65,6 +66,7 @@
"react-use-measure": "^2.0.4",
"reakit": "^1.3.8",
"styled-components": "^5.3.5",
+ "three": "0.131.3",
"typescript": "^4.4.2",
"zustand": "^3.5.1"
},
diff --git a/theatre/package.json b/theatre/package.json
index ddb9629..83647ff 100644
--- a/theatre/package.json
+++ b/theatre/package.json
@@ -40,7 +40,6 @@
"@types/redux-actions": "^2.6.1",
"@types/shallowequal": "^1.1.1",
"@types/styled-components": "^5.1.9",
- "@types/three": "^0.129.0",
"@types/uuid": "^8.3.0",
"blob-compare": "1.1.0",
"circular-dependency-plugin": "^5.2.2",
diff --git a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
index 262439d..813cd84 100644
--- a/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
+++ b/theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
@@ -158,7 +158,7 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
}, [paneInstance])
return (
-
+
@@ -171,7 +171,7 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
diff --git a/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx b/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx
index d3f0d48..b3a975f 100644
--- a/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx
+++ b/theatre/studio/src/toolbars/ExtensionToolbar/ExtensionToolbar.tsx
@@ -71,7 +71,7 @@ export const ExtensionToolbar: React.FC<{
if (groups.length === 0) return null
return (
-
+
{showLeftDivider ? : undefined}
{groups}
diff --git a/yarn.lock b/yarn.lock
index cd7a67f..cc5fca1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7807,6 +7807,7 @@ __metadata:
"@types/node": ^15.6.2
"@types/react": ^17.0.9
"@types/styled-components": ^5.1.9
+ "@types/three": 0.131.0
esbuild: ^0.18.17
esbuild-register: ^3.4.2
lodash-es: ^4.17.21
@@ -7818,6 +7819,7 @@ __metadata:
react-use-measure: ^2.0.4
reakit: ^1.3.8
styled-components: ^5.3.5
+ three: 0.131.3
typescript: ^4.4.2
zustand: ^3.5.1
peerDependencies:
@@ -8629,10 +8631,10 @@ __metadata:
languageName: node
linkType: hard
-"@types/three@npm:^0.129.0":
- version: 0.129.0
- resolution: "@types/three@npm:0.129.0"
- checksum: ab698c6d2b0f96c0760525cd5e72e7970bb11daf2abc6510784ce184301d087819c6a5e4d3d15f35ed5a5ceaf7b3675a53d286245a2c33bdd767b09f0f820041
+"@types/three@npm:0.131.0":
+ version: 0.131.0
+ resolution: "@types/three@npm:0.131.0"
+ checksum: 3d8def97d9a42855a7726f26bfd3339fc6f0565adf6206852cb2d6e4296af8372fb5dc9c39312fa8472824776664e16b20f860e7560697f0a3ec4e8db222dcb9
languageName: node
linkType: hard
@@ -30859,7 +30861,6 @@ fsevents@^1.2.7:
"@types/redux-actions": ^2.6.1
"@types/shallowequal": ^1.1.1
"@types/styled-components": ^5.1.9
- "@types/three": ^0.129.0
"@types/uuid": ^8.3.0
blob-compare: 1.1.0
circular-dependency-plugin: ^5.2.2
@@ -30998,6 +30999,13 @@ fsevents@^1.2.7:
languageName: node
linkType: hard
+"three@npm:0.131.3":
+ version: 0.131.3
+ resolution: "three@npm:0.131.3"
+ checksum: 947308298088de498c61ebbcbc5d9ae2b1acdd876855f4b3bd98214797706b96902d136eab330d8a8ae93c0edb6ac2324442b1c00abccb50bf55f7db98ea60ec
+ languageName: node
+ linkType: hard
+
"three@npm:^0.130.1":
version: 0.130.1
resolution: "three@npm:0.130.1"