Remove ReferenceWindow from r3f

packages/plugin-r3f/src/components/ReferenceWindow.tsx

@@ -1,76 +0,0 @@
-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 from 'styled-components'
-
-interface ReferenceWindowProps {
-  height: number
-}
-
-const Container = styled.div`
-  box-shadow: 0 25px 50px -12px gray;
-  overflow: hidden;
-  border-radius: 0.25rem;
-`
-
-const ReferenceWindow: VFC<ReferenceWindowProps> = ({height}) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
-  const [gl] = useEditorStore((state) => [state.gl], shallow)
-  const [ref, bounds] = useMeasure()
-
-  useLayoutEffect(() => {
-    if (gl) {
-      ref(gl?.domElement)
-    }
-  }, [gl, ref])
-
-  useEffect(() => {
-    let animationHandle: number
-    const draw = (gl: WebGLRenderer) => () => {
-      animationHandle = requestAnimationFrame(draw(gl))
-
-      if (!gl.domElement) {
-        return
-      }
-
-      const width = (gl.domElement.width / gl.domElement.height) * height
-
-      const ctx = canvasRef.current!.getContext('2d')!
-
-      // 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])
-
-  return gl?.domElement ? (
-    <Container>
-      <canvas
-        ref={canvasRef}
-        width={
-          ((bounds.width || gl.domElement.width) /
-            (bounds.height || gl.domElement.height)) *
-          height
-        }
-        height={height}
-      />
-    </Container>
-  ) : null
-}
-
-export default ReferenceWindow

packages/plugin-r3f/src/components/UI.tsx

@@ -4,7 +4,6 @@ import React from 'react'
 import TransformControlsModeSelect from './TransformControlsModeSelect'
 import {useEditorStore} from '../store'
 import shallow from 'zustand/shallow'
-import ReferenceWindow from './ReferenceWindow'
 import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
 import ViewportShadingSelect from './ViewportShadingSelect'
 import {GiPocketBow, RiFocus3Line} from 'react-icons/all'
@@ -47,21 +46,12 @@ const ToolGroup = styled.div`
   pointer-events: auto;
 `
 
-const ReferenceWindowContainer = styled.div`
-  z-index: -10;
-  right: 0px;
-  top: 0px;
-  position: absolute;
-`
-
 const UI: VFC = () => {
   const [editorObject] = useEditorStore(
     (state) => [state.editorObject],
     shallow,
   )
 
-  const referenceWindowSize =
-    useVal(editorObject?.props.referenceWindowSize) ?? 120
   const transformControlsMode =
     useVal(editorObject?.props.transformControlsMode) ?? 'translate'
   const transformControlsSpace =
@@ -171,9 +161,6 @@ const UI: VFC = () => {
               />
             </ToolGroup>
           </Toolbar>
-          <ReferenceWindowContainer>
-            <ReferenceWindow height={referenceWindowSize} />
-          </ReferenceWindowContainer>
         </TopRow>
       </Container>
     </PortalContext.Provider>

packages/plugin-r3f/src/store.ts

@@ -293,7 +293,6 @@ const editorSheetObjectConfig = types.compound({
   showAxes: types.boolean(true),
   showGrid: types.boolean(true),
   showOverlayIcons: types.boolean(false),
-  referenceWindowSize: types.number(120, {min: 0, max: 800}),
   transformControlsMode: types.stringLiteral<TransformControlsMode>(
     'translate',
     ['translate', 'rotate', 'scale'],