From 262d7d61d3ffa77d56ab00c13daf3c1e1f63ba6f Mon Sep 17 00:00:00 2001 From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com> Date: Sat, 18 Jun 2022 02:59:45 +0200 Subject: [PATCH] r3f fixes (#222) * Minify r3f extension bundle, because it is expected by the React dead code elimination check, since we bundle React in it * Add children to props, since it is required by React 18 types * Fix getting context attributes for gl in ReferenceWindow * Don't bundle threejs in extension * Fix editor not responding to scene initialization * Fix SnapshotEditor css --- packages/r3f/devEnv/bundle.ts | 3 +- .../ReferenceWindow/ReferenceWindow.tsx | 4 +- .../extension/components/SnapshotEditor.tsx | 88 +++++++++++-------- packages/r3f/src/main/SheetProvider.tsx | 2 + packages/r3f/src/main/store.ts | 6 +- 5 files changed, 59 insertions(+), 44 deletions(-) diff --git a/packages/r3f/devEnv/bundle.ts b/packages/r3f/devEnv/bundle.ts index f68a3bc..a73b67a 100644 --- a/packages/r3f/devEnv/bundle.ts +++ b/packages/r3f/devEnv/bundle.ts @@ -58,7 +58,7 @@ async function createBundles() { '@theatre/studio', '@theatre/dataverse', '@theatre/r3f', - // 'three', + 'three', // '@react-three/fiber', // '@react-three/drei', // 'three-stdlib', @@ -69,6 +69,7 @@ async function createBundles() { outfile: path.join(__dirname, '../dist/extension/index.js'), format: 'cjs', metafile: true, + minify: true, } const result = await build(esbuildConfig) diff --git a/packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx b/packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx index 42e31a3..09d72ce 100644 --- a/packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx +++ b/packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx @@ -95,9 +95,7 @@ const ReferenceWindow: VFC = ({maxHeight, maxWidth}) => { const [ref, bounds] = useMeasure() const preserveDrawingBuffer = - ( - gl?.domElement.getContext('webgl') ?? gl?.domElement.getContext('webgl2') - )?.getContextAttributes()?.preserveDrawingBuffer ?? false + gl?.getContextAttributes()?.preserveDrawingBuffer ?? false useLayoutEffect(() => { if (gl) { diff --git a/packages/r3f/src/extension/components/SnapshotEditor.tsx b/packages/r3f/src/extension/components/SnapshotEditor.tsx index ecd2607..6dc4165 100644 --- a/packages/r3f/src/extension/components/SnapshotEditor.tsx +++ b/packages/r3f/src/extension/components/SnapshotEditor.tsx @@ -31,7 +31,6 @@ const GlobalStyle = createGlobalStyle` * { padding: 0; margin: 0; - font-size: 100%; font: inherit; vertical-align: baseline; list-style: none; @@ -91,15 +90,15 @@ const Wrapper = styled.div` margin: 0; position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; + top: 0; + right: 0; + bottom: 0; + left: 0; overflow: hidden; ` const CanvasWrapper = styled.div` - display: relative; + position: relative; z-index: 0; height: 100%; overflow: hidden; @@ -126,6 +125,25 @@ const ReferenceWindowContainer = styled.div` justify-content: center; ` +const WaitForSceneInitMessage = styled.div<{active?: boolean}>` + position: absolute; + margin: auto; + left: 0; + right: 0; + width: 300px; + top: 12px; + padding: 16px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.08); + + backdrop-filter: blur(14px); + background: rgba(40, 43, 47, 0.8); + + @supports not (backdrop-filter: blur()) { + background-color: rgba(40, 43, 47, 0.95); + } +` + const SnapshotEditor: React.FC<{paneId: string}> = (props) => { const snapshotEditorSheet = getEditorSheet() const paneId = props.paneId @@ -137,20 +155,10 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => { 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) - } - return () => { - if (timeout !== undefined) { - clearTimeout(timeout) - } - } - }, [editorOpen]) + // Create a fresh snapshot when the editor is opened + createSnapshot() + }, []) const onPointerMissed = useCallback(() => { // This callback runs when the user clicks in an empty space inside a SnapshotEditor. @@ -190,28 +198,30 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => { maxWidth={Math.min(bounds.width * 0.4, 200)} /> + {!sceneSnapshot && ( + + The scene hasn't been initialized yet. It will appear in the + editor as soon as it is. + + )} - {sceneSnapshot ? ( - <> - - { - gl.setClearColor('white') - }} - shadows - dpr={[1, 2]} - frameloop="demand" - onPointerMissed={onPointerMissed} - > - - - - - ) : null} + + { + gl.setClearColor('white') + }} + shadows + dpr={[1, 2]} + frameloop="demand" + onPointerMissed={onPointerMissed} + > + + + diff --git a/packages/r3f/src/main/SheetProvider.tsx b/packages/r3f/src/main/SheetProvider.tsx index 6f694a8..b449036 100644 --- a/packages/r3f/src/main/SheetProvider.tsx +++ b/packages/r3f/src/main/SheetProvider.tsx @@ -1,3 +1,4 @@ +import type {ReactNode} from 'react' import React, { createContext, useContext, @@ -26,6 +27,7 @@ export const useCurrentSheet = (): ISheet | undefined => { const SheetProvider: React.FC<{ sheet: ISheet + children: ReactNode }> = ({sheet, children}) => { const {scene, gl} = useThree((s) => ({scene: s.scene, gl: s.gl})) diff --git a/packages/r3f/src/main/store.ts b/packages/r3f/src/main/store.ts index f1274f2..aa92ec6 100644 --- a/packages/r3f/src/main/store.ts +++ b/packages/r3f/src/main/store.ts @@ -52,7 +52,7 @@ export type EditorStore = { ) => void } -const config: StateCreator = (set) => { +const config: StateCreator = (set, get) => { return { sheet: null, editorObject: null, @@ -70,6 +70,10 @@ const config: StateCreator = (set) => { scene, gl, }) + + // Create a snapshot, so that if the editor is already open, it gets refreshed + // when the scene is initialized + get().createSnapshot() }, addEditable: (uniqueName, editable) => {