From 95d4e1d31547d5f9df0709f53e528b6db5a7973e Mon Sep 17 00:00:00 2001 From: Andrew Prifer <2991360+AndrewPrifer@users.noreply.github.com> Date: Wed, 18 May 2022 17:04:07 +0200 Subject: [PATCH] Create reference window for r3f (#169) * Add reference window (and fix tooltips) * Replace image with data url so the build doesn't fail --- .../playground/src/shared/r3f-rocket/App.tsx | 8 +- .../ReferenceWindow/ReferenceWindow.tsx | 149 ++++++++++++++++++ .../ReferenceWindow/noise-transparent.png | Bin 0 -> 11126 bytes .../components/ReferenceWindow/noiseImage.ts | 4 + .../r3f/src/components/SnapshotEditor.tsx | 96 ++++++----- .../src/components/TooltipPortalProvider.tsx | 27 ++++ packages/r3f/src/components/editorStuff.ts | 3 + 7 files changed, 247 insertions(+), 40 deletions(-) create mode 100644 packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx create mode 100644 packages/r3f/src/components/ReferenceWindow/noise-transparent.png create mode 100644 packages/r3f/src/components/ReferenceWindow/noiseImage.ts create mode 100644 packages/r3f/src/components/TooltipPortalProvider.tsx diff --git a/packages/playground/src/shared/r3f-rocket/App.tsx b/packages/playground/src/shared/r3f-rocket/App.tsx index 19feef1..eb9b650 100644 --- a/packages/playground/src/shared/r3f-rocket/App.tsx +++ b/packages/playground/src/shared/r3f-rocket/App.tsx @@ -53,7 +53,13 @@ function App() { height: '100vh', }} > - + diff --git a/packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx b/packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx new file mode 100644 index 0000000..fe11ebf --- /dev/null +++ b/packages/r3f/src/components/ReferenceWindow/ReferenceWindow.tsx @@ -0,0 +1,149 @@ +import type {VFC} from 'react' +import React, {useEffect, useLayoutEffect, useRef} from 'react' +import {useEditorStore} from '../../store' +import shallow from 'zustand/shallow' +import type {WebGLRenderer} from 'three' +import useMeasure from 'react-use-measure' +import styled, {keyframes} from 'styled-components' +import {TiWarningOutline} from 'react-icons/ti' +// This is ugly, but pure TS doesn't let you do bundler-stuff +import noiseImageUrl from './noiseImage' + +const Container = styled.div` + position: relative; + width: fit-content; + height: fit-content; + border-radius: 4px; + overflow: hidden; +` + +const Canvas = styled.canvas` + display: block; +` + +const staticAnimation = keyframes` + 0% { transform: translate(0,0) } + 10% { transform: translate(-5%,-5%) } + 20% { transform: translate(-10%,5%) } + 30% { transform: translate(5%,-10%) } + 40% { transform: translate(-5%,15%) } + 50% { transform: translate(-10%,5%) } + 60% { transform: translate(15%,0) } + 70% { transform: translate(0,10%) } + 80% { transform: translate(-15%,0) } + 90% { transform: translate(10%,5%) } + 100% { transform: translate(5%,0) } +` + +const Static = styled.div` + position: relative; + display: flex; + width: 200px; + height: 120px; + padding: 18px; + + ::before { + content: ''; + position: absolute; + z-index: -1; + top: -50%; + left: -50%; + right: -50%; + bottom: -50%; + background: #2f2f2f url(${noiseImageUrl}) repeat 0 0; + animation: ${staticAnimation} 0.2s infinite; + } +` + +const Warning = styled.div` + display: flex; + flex-direction: column; + gap: 12px; + align-items: center; + text-align: center; + opacity: 0.8; +` + +interface ReferenceWindowProps { + height: number +} + +const ReferenceWindow: VFC = ({height}) => { + const canvasRef = useRef(null) + + const [gl] = useEditorStore((state) => [state.gl], shallow) + const [ref, bounds] = useMeasure() + + const preserveDrawingBuffer = + ( + gl?.domElement.getContext('webgl') ?? gl?.domElement.getContext('webgl2') + )?.getContextAttributes()?.preserveDrawingBuffer ?? false + + useLayoutEffect(() => { + if (gl) { + ref(gl?.domElement) + } + }, [gl, ref]) + + useEffect(() => { + let animationHandle: number + const draw = (gl: WebGLRenderer) => () => { + animationHandle = requestAnimationFrame(draw(gl)) + + if (!gl.domElement || !preserveDrawingBuffer) { + cancelAnimationFrame(animationHandle) + return + } + + const width = (gl.domElement.width / gl.domElement.height) * 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' + + ctx.fillStyle = 'white' + ctx.fillRect(0, 0, width, height) + + ctx.drawImage(gl.domElement, 0, 0, width, height) + } + + if (gl) { + draw(gl)() + } + + return () => { + cancelAnimationFrame(animationHandle) + } + }, [gl, height, preserveDrawingBuffer]) + + return ( + + {gl?.domElement && preserveDrawingBuffer ? ( + + ) : ( + + + + + Please set 
{`gl={{ preserveDrawingBuffer: true }}`}
on + the r3f Canvas for the reference window to work. + + + + )} + + ) +} + +export default ReferenceWindow diff --git a/packages/r3f/src/components/ReferenceWindow/noise-transparent.png b/packages/r3f/src/components/ReferenceWindow/noise-transparent.png new file mode 100644 index 0000000000000000000000000000000000000000..45902c91f000dd388949c6bb7f1b766c7b3276f6 GIT binary patch literal 11126 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 = (props) => { const snapshotEditorSheet = getEditorSheet() const paneId = props.paneId const editorObject = getEditorSheetObject() + const showReferenceWindow = + useVal(editorObject?.props.viewport.showReferenceWindow) ?? true + const [sceneSnapshot, createSnapshot] = useEditorStore( (state) => [state.sceneSnapshot, state.createSnapshot], shallow, @@ -148,43 +160,49 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => { <> - - - - - - - - - - {sceneSnapshot ? ( - <> - - { - gl.setClearColor('white') - }} - shadowMap - dpr={[1, 2]} - fog={'red'} - frameloop="demand" - onPointerMissed={onPointerMissed} + + + + + - - - - - ) : null} - - {/* */} + + + + {showReferenceWindow && ( + + + + )} + + + {sceneSnapshot ? ( + <> + + { + gl.setClearColor('white') + }} + shadowMap + dpr={[1, 2]} + fog={'red'} + frameloop="demand" + onPointerMissed={onPointerMissed} + > + + + + + ) : null} + + diff --git a/packages/r3f/src/components/TooltipPortalProvider.tsx b/packages/r3f/src/components/TooltipPortalProvider.tsx new file mode 100644 index 0000000..0955e50 --- /dev/null +++ b/packages/r3f/src/components/TooltipPortalProvider.tsx @@ -0,0 +1,27 @@ +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 = ({children}) => { + const [wrapper, setWrapper] = useState(null) + + return ( + + {children} + + + ) +} + +export default TooltipPortalProvider diff --git a/packages/r3f/src/components/editorStuff.ts b/packages/r3f/src/components/editorStuff.ts index a039679..9fb4155 100644 --- a/packages/r3f/src/components/editorStuff.ts +++ b/packages/r3f/src/components/editorStuff.ts @@ -22,6 +22,9 @@ const editorSheetObjectConfig = { }, {as: 'menu', label: 'Shading'}, ), + showReferenceWindow: types.boolean(true, { + label: 'Reference', + }), }, {label: 'Viewport Config'}, ),