From 067a7cb145fd3e9352adb1d13fc246a1fff79a63 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Fri, 16 Jul 2021 15:06:15 +0200 Subject: [PATCH] Various improvements to SnapshotEditor --- .../src/components/ProxyManager.tsx | 32 +++---- .../src/components/SnapshotEditor.tsx | 83 +++++++++++++------ theatre/package.json | 1 + theatre/studio/src/UIRoot/PanelsRoot.tsx | 2 +- .../src/panels/BasePanel/PaneWrapper.tsx | 34 +++++++- .../toolbars/GlobalToolbar/GlobalToolbar.tsx | 1 - yarn.lock | 21 +++++ 7 files changed, 129 insertions(+), 45 deletions(-) diff --git a/packages/plugin-r3f/src/components/ProxyManager.tsx b/packages/plugin-r3f/src/components/ProxyManager.tsx index bd05a0f..e794266 100644 --- a/packages/plugin-r3f/src/components/ProxyManager.tsx +++ b/packages/plugin-r3f/src/components/ProxyManager.tsx @@ -46,9 +46,11 @@ const ProxyManager: VFC = ({orbitControlsRef}) => { useVal(editorObject?.props.viewport.shading) ?? 'rendered' const sceneProxy = useMemo(() => sceneSnapshot?.clone(), [sceneSnapshot]) - const [editableProxies, setEditableProxies] = useState<{ - [name: string]: IEditableProxy - }>({}) + const [editableProxies, setEditableProxies] = useState< + { + [name in string]?: IEditableProxy + } + >({}) // set up scene proxies useLayoutEffect(() => { @@ -86,15 +88,13 @@ const ProxyManager: VFC = ({orbitControlsRef}) => { }, [orbitControlsRef, sceneProxy]) const selected = useSelected() + const editableProxyOfSelected = selected && editableProxies[selected] // subscribe to external changes useEffect(() => { - if (!selected) { - return - } - - const object = editableProxies[selected].object - const sheetObject = editableProxies[selected].sheetObject + if (!editableProxyOfSelected) return + const object = editableProxyOfSelected.object + const sheetObject = editableProxyOfSelected.sheetObject const setFromTheatre = (newValues: any) => { object.position.set( @@ -117,7 +117,7 @@ const ProxyManager: VFC = ({orbitControlsRef}) => { return () => { untap() } - }, [editableProxies, selected]) + }, [editableProxyOfSelected, selected]) // set up viewport shading modes const [renderMaterials, setRenderMaterials] = useState<{ @@ -219,15 +219,15 @@ const ProxyManager: VFC = ({orbitControlsRef}) => { return ( <> - {selected && ( + {selected && editableProxyOfSelected && ( { - const sheetObject = editableProxies[selected].sheetObject - const obj = editableProxies[selected].object + const sheetObject = editableProxyOfSelected.sheetObject + const obj = editableProxyOfSelected.object studio.transaction(({set}) => { set(sheetObject.props, { @@ -252,7 +252,9 @@ const ProxyManager: VFC = ({orbitControlsRef}) => { onDraggingChange={(event) => (isBeingEdited.current = event.value)} /> )} - {Object.values(editableProxies).map(({portal}) => portal)} + {Object.values(editableProxies).map( + (editableProxy) => editableProxy!.portal, + )} ) } diff --git a/packages/plugin-r3f/src/components/SnapshotEditor.tsx b/packages/plugin-r3f/src/components/SnapshotEditor.tsx index 692be6d..1dae344 100644 --- a/packages/plugin-r3f/src/components/SnapshotEditor.tsx +++ b/packages/plugin-r3f/src/components/SnapshotEditor.tsx @@ -1,4 +1,4 @@ -import type {VFC} from 'react' +import {useState} from 'react' import {useLayoutEffect} from 'react' import React, {useEffect, useRef} from 'react' import {Canvas} from '@react-three/fiber' @@ -10,6 +10,9 @@ import ProxyManager from './ProxyManager' import studio from '@theatre/studio' import {useVal} from '@theatre/dataverse-react' import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components' +import IconButton from './Toolbar/utils/IconButton' +import {BiRefresh} from 'react-icons/bi' +import {PortalContext} from 'reakit' const GlobalStyle = createGlobalStyle` :host { @@ -81,9 +84,21 @@ const CanvasWrapper = styled.div` height: 100%; ` -const SnapshotEditor: VFC = () => { - console.log('Snapshot editor!!') +const Overlay = styled.div` + position: absolute; + inset: 0; + z-index: 2; + pointer-events: none; +` +const Tools = styled.div` + position: absolute; + left: 8px; + top: 6px; + pointer-events: auto; +` + +const SnapshotEditor: React.FC<{}> = () => { const [editorObject, sceneSnapshot, initialEditorCamera, createSnapshot] = useEditorStore( (state) => [ @@ -110,6 +125,8 @@ const SnapshotEditor: VFC = () => { } }, [editorOpen]) + const [overlay, setOverlay] = useState(null) + if (!editorObject) return <> return ( @@ -117,30 +134,42 @@ const SnapshotEditor: VFC = () => { <> - - {sceneSnapshot ? ( - <> - - { - gl.setClearColor('white') - }} - shadowMap - dpr={[1, 2]} - fog={'red'} - onPointerMissed={() => - studio.__experimental_setSelection([]) - } - > - - - - - ) : null} - + + + + + } + label="Refresh Snapshot" + onClick={createSnapshot} + > + + + + {sceneSnapshot ? ( + <> + + { + gl.setClearColor('white') + }} + shadowMap + dpr={[1, 2]} + fog={'red'} + onPointerMissed={() => + studio.__experimental_setSelection([]) + } + > + + + + + ) : null} + + diff --git a/theatre/package.json b/theatre/package.json index 3046eb5..8c36ad4 100644 --- a/theatre/package.json +++ b/theatre/package.json @@ -71,6 +71,7 @@ "propose": "^0.0.5", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-error-boundary": "^3.1.3", "react-icons": "^4.2.0", "react-is": "^17.0.2", "react-shadow": "^19.0.2", diff --git a/theatre/studio/src/UIRoot/PanelsRoot.tsx b/theatre/studio/src/UIRoot/PanelsRoot.tsx index 6d56476..52a3a00 100644 --- a/theatre/studio/src/UIRoot/PanelsRoot.tsx +++ b/theatre/studio/src/UIRoot/PanelsRoot.tsx @@ -16,7 +16,7 @@ const PanelsRoot: React.FC = () => { return ( <> - {/* {paneEls} */} + {paneEls} diff --git a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx b/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx index 58b4f96..c001f1e 100644 --- a/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/PaneWrapper.tsx @@ -10,6 +10,7 @@ import { import BasePanel from './BasePanel' import PanelDragZone from './PanelDragZone' import PanelWrapper from './PanelWrapper' +import {ErrorBoundary} from 'react-error-boundary' const defaultPosition: PanelPosition = { edges: { @@ -50,6 +51,35 @@ const F2 = styled(F2Impl)` position: relative; ` +const ErrorContainer = styled.div` + padding: 12px; + + & > pre { + border: 1px solid #ff62624f; + background-color: rgb(255 0 0 / 5%); + margin: 8px 0; + padding: 8px; + font-family: monospace; + overflow: scroll; + color: #ff9896; + } +` + +const ErrorFallback: React.FC<{error: Error}> = (props) => { + return ( + + An Error occured rendering this pane. Open the console for more info. + 
+        {JSON.stringify(
+          {message: props.error.message, stack: props.error.stack},
+          null,
+          2,
+        )}
+
+ + ) +} + const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({ paneInstance, }) => { @@ -62,7 +92,9 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({ - + + + ) diff --git a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx index 2b13580..d5935bc 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar/GlobalToolbar.tsx @@ -13,7 +13,6 @@ const Container = styled.div` display: flex; gap: 1rem; - display: none; ` const GlobalToolbar: React.FC<{}> = (props) => { diff --git a/yarn.lock b/yarn.lock index 34db134..9e0d534 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1935,6 +1935,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.12.5": + version: 7.14.6 + resolution: "@babel/runtime@npm:7.14.6" + dependencies: + regenerator-runtime: ^0.13.4 + checksum: dd931f6ef1c8dab295c4a00c592db6352bf12a5c443f8222304d5c1d3e88d795fa949afcb6f053eec2e69e9827a17ff274524c1cd43813f56b61e3a540274d2f + languageName: node + linkType: hard + "@babel/template@npm:^7.12.13, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.4": version: 7.12.13 resolution: "@babel/template@npm:7.12.13" @@ -14771,6 +14780,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"react-error-boundary@npm:^3.1.3": + version: 3.1.3 + resolution: "react-error-boundary@npm:3.1.3" + dependencies: + "@babel/runtime": ^7.12.5 + peerDependencies: + react: ">=16.13.1" + checksum: 8b5294dd14f8d13e430e0c15d7a8fa2eede0c4d59b499303a51645b2e29c00f1ab373de07431664fe64f08362fe2ee044757ffdbad60db1a84df151dd1d4ebaf + languageName: node + linkType: hard + "react-icons@npm:*, react-icons@npm:^4.2.0": version: 4.2.0 resolution: "react-icons@npm:4.2.0" @@ -17199,6 +17219,7 @@ fsevents@^1.2.7: propose: ^0.0.5 react: ^17.0.2 react-dom: ^17.0.2 + react-error-boundary: ^3.1.3 react-icons: ^4.2.0 react-is: ^17.0.2 react-shadow: ^19.0.2