Various improvements to SnapshotEditor

2021-07-16 15:06:15 +02:00 · 2021-07-16 15:06:15 +02:00 · 067a7cb145
commit 067a7cb145
parent f06f18f838
7 changed files with 129 additions and 45 deletions
--- a/packages/plugin-r3f/src/components/ProxyManager.tsx
+++ b/packages/plugin-r3f/src/components/ProxyManager.tsx
@ -46,9 +46,11 @@ const ProxyManager: VFC<ProxyManagerProps> = ({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<ProxyManagerProps> = ({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<ProxyManagerProps> = ({orbitControlsRef}) => {
    return () => {
      untap()
    }
-  }, [editableProxies, selected])
+  }, [editableProxyOfSelected, selected])

  // set up viewport shading modes
  const [renderMaterials, setRenderMaterials] = useState<{
@ -219,15 +219,15 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
  return (
    <>
      <primitive object={sceneProxy} />
-      {selected && (
+      {selected && editableProxyOfSelected && (
        <TransformControls
          mode={transformControlsMode}
          space={transformControlsSpace}
          orbitControlsRef={orbitControlsRef}
-          object={editableProxies[selected].object}
+          object={editableProxyOfSelected.object}
          onObjectChange={() => {
-            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<ProxyManagerProps> = ({orbitControlsRef}) => {
          onDraggingChange={(event) => (isBeingEdited.current = event.value)}
        />
      )}
-      {Object.values(editableProxies).map(({portal}) => portal)}
+      {Object.values(editableProxies).map(
+        (editableProxy) => editableProxy!.portal,
+      )}
    </>
  )
 }
--- 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<HTMLDivElement | null>(null)
+
  if (!editorObject) return <></>

  return (
@ -117,30 +134,42 @@ const SnapshotEditor: VFC = () => {
      <StyleSheetManager disableVendorPrefixes>
        <>
          <GlobalStyle />
-          <Wrapper>
-            {sceneSnapshot ? (
-              <>
-                <CanvasWrapper>
-                  <Canvas
-                    // @ts-ignore
-                    colorManagement
-                    camera={initialEditorCamera}
-                    onCreated={({gl}) => {
-                      gl.setClearColor('white')
-                    }}
-                    shadowMap
-                    dpr={[1, 2]}
-                    fog={'red'}
-                    onPointerMissed={() =>
-                      studio.__experimental_setSelection([])
-                    }
-                  >
-                    <EditorScene />
-                  </Canvas>
-                </CanvasWrapper>
-              </>
-            ) : null}
-          </Wrapper>
+          <PortalContext.Provider value={overlay}>
+            <Wrapper>
+              <Overlay ref={setOverlay}>
+                <Tools>
+                  <IconButton
+                    icon={<BiRefresh />}
+                    label="Refresh Snapshot"
+                    onClick={createSnapshot}
+                  ></IconButton>
+                </Tools>
+              </Overlay>
+
+              {sceneSnapshot ? (
+                <>
+                  <CanvasWrapper>
+                    <Canvas
+                      // @ts-ignore
+                      colorManagement
+                      camera={initialEditorCamera}
+                      onCreated={({gl}) => {
+                        gl.setClearColor('white')
+                      }}
+                      shadowMap
+                      dpr={[1, 2]}
+                      fog={'red'}
+                      onPointerMissed={() =>
+                        studio.__experimental_setSelection([])
+                      }
+                    >
+                      <EditorScene />
+                    </Canvas>
+                  </CanvasWrapper>
+                </>
+              ) : null}
+            </Wrapper>
+          </PortalContext.Provider>
        </>
      </StyleSheetManager>
    </root.div>
--- 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",
--- 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}
      <OutlinePanel />
      <ObjectEditorPanel />
      <SequenceEditorPanel />
--- 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 (
+    <ErrorContainer>
+      An Error occured rendering this pane. Open the console for more info.
+      <pre>
+        {JSON.stringify(
+          {message: props.error.message, stack: props.error.stack},
+          null,
+          2,
+        )}
+      </pre>
+    </ErrorContainer>
+  )
+}
+
 const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
  paneInstance,
 }) => {
@ -62,7 +92,9 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
        </TitleBar>
      </PanelDragZone>
      <F2>
-        <Comp id={paneInstance.instanceId} object={paneInstance.object} />
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+          <Comp id={paneInstance.instanceId} object={paneInstance.object} />
+        </ErrorBoundary>
      </F2>
    </Container>
  )
--- 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) => {
--- 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