Put SnapshotEditor inside a Pane

packages/dataverse/src/derivations/prism/prism.ts

@@ -172,7 +172,7 @@ type IEffect = {
 const memosWeakMap = new WeakMap<PrismScope, Record<string, IMemo>>()
 
 type IMemo = {
-  deps: undefined | unknown[]
+  deps: undefined | unknown[] | ReadonlyArray<unknown>
   cachedValue: unknown
 }
 
@@ -229,8 +229,8 @@ function effect(key: string, cb: () => () => void, deps?: unknown[]): void {
 }
 
 function depsHaveChanged(
-  oldDeps: undefined | unknown[],
-  newDeps: undefined | unknown[],
+  oldDeps: undefined | unknown[] | ReadonlyArray<unknown>,
+  newDeps: undefined | unknown[] | ReadonlyArray<unknown>,
 ): boolean {
   if (oldDeps === undefined || newDeps === undefined) {
     return true
@@ -244,7 +244,7 @@ function depsHaveChanged(
 function memo<T>(
   key: string,
   fn: () => T,
-  deps: undefined | $IntentionalAny[],
+  deps: undefined | $IntentionalAny[] | ReadonlyArray<$IntentionalAny>,
 ): T {
   const scope = hookScopeStack.peek()
   if (!scope) {

packages/plugin-r3f/src/components/SnapshotEditor.tsx

@@ -62,19 +62,17 @@ const EditorScene = () => {
   )
 }
 
-const Wrapper = styled.div<{visible: boolean}>`
+const Wrapper = styled.div`
   tab-size: 4;
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   margin: 0;
 
-  position: fixed;
+  position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
-  z-index: 50;
-  display: ${(props) => (props.visible ? 'block' : 'none')};
 `
 
 const CanvasWrapper = styled.div`
@@ -83,7 +81,9 @@ const CanvasWrapper = styled.div`
   height: 100%;
 `
 
-const Editor: VFC = () => {
+const SnapshotEditor: VFC = () => {
+  console.log('Snapshot editor!!')
+
   const [editorObject, sceneSnapshot, initialEditorCamera, createSnapshot] =
     useEditorStore(
       (state) => [
@@ -95,10 +95,18 @@ const Editor: VFC = () => {
       shallow,
     )
 
-  const editorOpen = !!useVal(editorObject?.props.isOpen)
+  const editorOpen = true
   useLayoutEffect(() => {
+    let timeout: NodeJS.Timeout | undefined
     if (editorOpen) {
-      createSnapshot()
+      // a hack to make sure all the scene's props are
+      // applied before we take a snapshot
+      timeout = setTimeout(createSnapshot, 100)
+    }
+    return () => {
+      if (timeout !== undefined) {
+        clearTimeout(timeout)
+      }
     }
   }, [editorOpen])
 
@@ -109,8 +117,7 @@ const Editor: VFC = () => {
       <StyleSheetManager disableVendorPrefixes>
         <>
           <GlobalStyle />
-          <Wrapper id="theatre-plugin-r3f-root" visible={true}>
-            {/* <Toolbar /> */}
+          <Wrapper>
             {sceneSnapshot ? (
               <>
                 <CanvasWrapper>
@@ -140,4 +147,4 @@ const Editor: VFC = () => {
   )
 }
 
-export default Editor
+export default SnapshotEditor

packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx

@@ -10,7 +10,7 @@ import {Vector3} from 'three'
 import type {$FixMe} from '@theatre/shared/utils/types'
 import studio from '@theatre/studio'
 import {getSelected} from '../useSelected'
-import {useVal} from '@theatre/dataverse-react'
+import {usePrism, useVal} from '@theatre/dataverse-react'
 import IconButton from './utils/IconButton'
 import styled from 'styled-components'
 
@@ -19,6 +19,10 @@ const ToolGroup = styled.div`
 `
 
 const Toolbar: VFC = () => {
+  usePrism(() => {
+    const panes = studio.getPanesOfType('snapshotEditor')
+  }, [])
+
   const [editorObject] = useEditorStore(
     (state) => [state.editorObject],
     shallow,
@@ -35,6 +39,15 @@ const Toolbar: VFC = () => {
 
   return (
     <>
+      <ToolGroup>
+        <button
+          onClick={() => {
+            studio.createPane('snapshotEditor')
+          }}
+        >
+          Create snapshot
+        </button>
+      </ToolGroup>
       <ToolGroup>
         <TransformControlsModeSelect
           value={transformControlsMode}

packages/plugin-r3f/src/index.tsx

@@ -1,6 +1,4 @@
-import React from 'react'
-import {render} from 'react-dom'
-import Editor from './components/Editor'
+import SnapshotEditor from './components/SnapshotEditor'
 
 export {default as EditorHelper} from './components/EditorHelper'
 export type {EditorHelperProps} from './components/EditorHelper'
@@ -10,6 +8,7 @@ export {bindToCanvas} from './store'
 export type {EditableState, BindFunction} from './store'
 import studio from '@theatre/studio'
 import Toolbar from './components/Toolbar/Toolbar'
+import {types} from '@theatre/core'
 
 if (process.env.NODE_ENV === 'development') {
   studio.extend({
@@ -17,9 +16,14 @@ if (process.env.NODE_ENV === 'development') {
     globalToolbar: {
       component: Toolbar,
     },
+    panes: [
+      {
+        class: 'snapshotEditor',
+        dataType: types.compound({
+          grosse: types.number(20),
+        }),
+        component: SnapshotEditor,
+      },
+    ],
   })
-  const editorRoot = document.createElement('div')
-  document.body.appendChild(editorRoot)
-
-  render(<Editor />, editorRoot)
 }