variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Extensions can now use studio's project for editing-related objects.

Browse source
This commit is contained in:
Aria Minaei 2021-08-08 21:33:10 +02:00
parent 828fbb97b5
commit b08588e9d6
4 changed files with 91 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

152
packages/plugin-r3f/src/components/SnapshotEditor.tsx
View file

@ -9,8 +9,7 @@ import studio, {ToolbarIconButton} from '@theatre/studio'
import {useVal} from '@theatre/dataverse-react'
import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
import {IoCameraReverseOutline} from 'react-icons/all'
import type {ISheetObject, ISheet} from '@theatre/core'
import type {$FixMe} from '../types'
import type {ISheet} from '@theatre/core'
import useSnapshotEditorCamera from './useSnapshotEditorCamera'
const GlobalStyle = createGlobalStyle`
@ -95,87 +94,86 @@ const Tools = styled.div`
pointer-events: auto;
`
const SnapshotEditor: React.FC<{object: ISheetObject<$FixMe>; paneId: string}> =
(props) => {
const snapshotEditorSheet = props.object.sheet
const paneId = props.paneId
const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
const snapshotEditorSheet = studio.getStudioProject().sheet('Plugin-R3F')
const paneId = props.paneId
const [editorObject, sceneSnapshot, createSnapshot, sheet] = useEditorStore(
(state) => [
state.editorObject,
state.sceneSnapshot,
state.createSnapshot,
state.sheet,
],
shallow,
)
const [editorObject, sceneSnapshot, createSnapshot, sheet] = useEditorStore(
(state) => [
state.editorObject,
state.sceneSnapshot,
state.createSnapshot,
state.sheet,
],
shallow,
)
const editorOpen = true
useLayoutEffect(() => {
let timeout: NodeJS.Timeout | undefined
if (editorOpen) {
// a hack to make sure all the scene's props are
// applied before we take a snapshot
timeout = setTimeout(createSnapshot, 100)
const editorOpen = true
useLayoutEffect(() => {
let timeout: NodeJS.Timeout | undefined
if (editorOpen) {
// 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)
}
return () => {
if (timeout !== undefined) {
clearTimeout(timeout)
}
}
}, [editorOpen])
}
}, [editorOpen])
const onPointerMissed = useCallback(() => {
if (sheet !== null) studio.__experimental_setSelection([sheet])
}, [sheet])
const onPointerMissed = useCallback(() => {
if (sheet !== null) studio.__experimental_setSelection([sheet])
}, [sheet])
if (!editorObject) return <></>
if (!editorObject) return <></>
return (
<root.div>
<StyleSheetManager disableVendorPrefixes>
<>
<GlobalStyle />
<Wrapper>
<Overlay>
<Tools>
<ToolbarIconButton
icon={<IoCameraReverseOutline />}
label="Refresh Snapshot"
onClick={createSnapshot}
></ToolbarIconButton>
</Tools>
</Overlay>
return (
<root.div>
<StyleSheetManager disableVendorPrefixes>
<>
<GlobalStyle />
<Wrapper>
<Overlay>
<Tools>
<ToolbarIconButton
icon={<IoCameraReverseOutline />}
label="Refresh Snapshot"
onClick={createSnapshot}
></ToolbarIconButton>
</Tools>
</Overlay>
{sceneSnapshot ? (
<>
<CanvasWrapper>
<Canvas
// @ts-ignore
colorManagement
onCreated={({gl}) => {
gl.setClearColor('white')
}}
shadowMap
dpr={[1, 2]}
fog={'red'}
frameloop="demand"
onPointerMissed={onPointerMissed}
>
<EditorScene
snapshotEditorSheet={snapshotEditorSheet}
paneId={paneId}
/>
</Canvas>
</CanvasWrapper>
</>
) : null}
</Wrapper>
{/* </PortalContext.Provider> */}
</>
</StyleSheetManager>
</root.div>
)
}
{sceneSnapshot ? (
<>
<CanvasWrapper>
<Canvas
// @ts-ignore
colorManagement
onCreated={({gl}) => {
gl.setClearColor('white')
}}
shadowMap
dpr={[1, 2]}
fog={'red'}
frameloop="demand"
onPointerMissed={onPointerMissed}
>
<EditorScene
snapshotEditorSheet={snapshotEditorSheet}
paneId={paneId}
/>
</Canvas>
</CanvasWrapper>
</>
) : null}
</Wrapper>
{/* </PortalContext.Provider> */}
</>
</StyleSheetManager>
</root.div>
)
}
export default SnapshotEditor