diff --git a/packages/plugin-r3f/src/components/ReferenceWindow.tsx b/packages/plugin-r3f/src/components/ReferenceWindow.tsx deleted file mode 100644 index 0cc6e13..0000000 --- a/packages/plugin-r3f/src/components/ReferenceWindow.tsx +++ /dev/null @@ -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 = ({height}) => { - const canvasRef = useRef(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 ? ( - - - - ) : null -} - -export default ReferenceWindow diff --git a/packages/plugin-r3f/src/components/UI.tsx b/packages/plugin-r3f/src/components/UI.tsx index 36a089f..d287943 100644 --- a/packages/plugin-r3f/src/components/UI.tsx +++ b/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 = () => { /> - - - diff --git a/packages/plugin-r3f/src/store.ts b/packages/plugin-r3f/src/store.ts index 1a0ee85..8c1ef87 100644 --- a/packages/plugin-r3f/src/store.ts +++ b/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( 'translate', ['translate', 'rotate', 'scale'],