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

UI improvements/sidebar pinning (#175)

Browse source 
Co-authored-by: Aria Minaei <aria.minaei@gmail.com>
This commit is contained in:
Andrew Prifer 2022-05-25 20:42:01 +02:00 • committed by GitHub
parent ec18687a98
commit 0690a85ae2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
46 changed files with 998 additions and 501 deletions
Download patch file Download diff file Expand all files Collapse all files

7
packages/playground/src/tests/setting-static-props/test.e2e.ts
View file

@ -12,7 +12,12 @@ test.describe('setting-static-props', () => {
test('Undo/redo', async ({page}) => {
await page.locator('[data-testid="OutlinePanel-TriggerButton"]').click()
await page.locator('span:has-text("sample object")').first().click()
// https://github.com/microsoft/playwright/issues/12298
// The div does in fact intercept pointer events, but it is meant to 🤦‍
await page
.locator('span:has-text("sample object")')
.first()
.click({force: true})
const detailPanel = page.locator('[data-testid="DetailPanel-Object"]')

2
packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx
View file

@ -99,8 +99,6 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
const ctx = canvasRef.current!.getContext('2d')!
// console.log(gl.domElement.getContext('webgl2')!.getContextAttributes())
// https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing
ctx.imageSmoothingQuality = 'high'

63
packages/r3f/src/components/SnapshotEditor.tsx
View file

@ -15,7 +15,6 @@ import {getEditorSheet, getEditorSheetObject} from './editorStuff'
import type {$IntentionalAny} from '@theatre/shared/utils/types'
import {InfiniteGridHelper} from '../InfiniteGridHelper'
import {DragDetectorProvider} from './DragDetector'
import TooltipPortalProvider from './TooltipPortalProvider'
import ReferenceWindow from './ReferenceWindow/ReferenceWindow'
const GlobalStyle = createGlobalStyle`
@ -182,39 +181,37 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
<StyleSheetManager disableVendorPrefixes>
<>
<GlobalStyle />
<TooltipPortalProvider>
<Wrapper>
<Overlay>
<Tools ref={setToolsContainer} />
{showReferenceWindow && (
<ReferenceWindowContainer>
<ReferenceWindow height={120} />
</ReferenceWindowContainer>
)}
</Overlay>
<Wrapper>
<Overlay>
<Tools ref={setToolsContainer} />
{showReferenceWindow && (
<ReferenceWindowContainer>
<ReferenceWindow height={120} />
</ReferenceWindowContainer>
)}
</Overlay>
{sceneSnapshot ? (
<>
<CanvasWrapper>
<Canvas
onCreated={({gl}) => {
gl.setClearColor('white')
}}
shadows
dpr={[1, 2]}
frameloop="demand"
onPointerMissed={onPointerMissed}
>
<EditorScene
snapshotEditorSheet={snapshotEditorSheet}
paneId={paneId}
/>
</Canvas>
</CanvasWrapper>
</>
) : null}
</Wrapper>
</TooltipPortalProvider>
{sceneSnapshot ? (
<>
<CanvasWrapper>
<Canvas
onCreated={({gl}) => {
gl.setClearColor('white')
}}
shadows
dpr={[1, 2]}
frameloop="demand"
onPointerMissed={onPointerMissed}
>
<EditorScene
snapshotEditorSheet={snapshotEditorSheet}
paneId={paneId}
/>
</Canvas>
</CanvasWrapper>
</>
) : null}
</Wrapper>
</>
</StyleSheetManager>
</root.div>

27
packages/r3f/src/components/TooltipPortalProvider.tsx
View file

@ -1,27 +0,0 @@
import type {ReactNode} from 'react'
import React, {useState} from 'react'
import {PortalContext} from 'reakit'
import styled from 'styled-components'
const PortalHost = styled.div`
position: fixed;
inset: 0;
pointer-events: none;
`
export interface PortalManagerProps {
children: ReactNode
}
const TooltipPortalProvider: React.VFC<PortalManagerProps> = ({children}) => {
const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null)
return (
<PortalContext.Provider value={wrapper}>
{children}
<PortalHost ref={setWrapper} />
</PortalContext.Provider>
)
}
export default TooltipPortalProvider

42
packages/r3f/src/extension.ts
View file

@ -21,6 +21,27 @@ const r3fExtension: IExtension = {
id: '@theatre/r3f',
toolbars: {
global(set, studio) {
const calc = prism<ToolsetConfig>(() => {
const editorObject = getEditorSheetObject()
return [
{
type: 'Icon',
title: 'Create Snapshot',
svgSource: io5CameraOutline,
onClick: () => {
studio.createPane('snapshot')
},
},
]
})
return calc.tapImmediate(Ticker.raf, () => {
set(calc.getValue())
})
},
'snapshot-editor': (set, studio) => {
const {createSnapshot} = useEditorStore.getState()
const calc = prism<ToolsetConfig>(() => {
const editorObject = getEditorSheetObject()
@ -34,11 +55,9 @@ const r3fExtension: IExtension = {
return [
{
type: 'Icon',
title: 'Create Snapshot',
svgSource: io5CameraOutline,
onClick: () => {
studio.createPane('snapshot')
},
onClick: createSnapshot,
title: 'Refresh Snapshot',
svgSource: `<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
},
{
type: 'Switch',
@ -121,19 +140,6 @@ const r3fExtension: IExtension = {
set(calc.getValue())
})
},
'snapshot-editor': (set) => {
const {createSnapshot} = useEditorStore.getState()
const onClick = createSnapshot
set([
{
type: 'Icon',
onClick,
title: 'Refresh Snapshot',
svgSource: `<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`,
},
])
return () => {}
},
},
panes: [
{