diff --git a/packages/plugin-r3f/src/components/Editor.tsx b/packages/plugin-r3f/src/components/Editor.tsx index f6de8a0..aa91ddb 100644 --- a/packages/plugin-r3f/src/components/Editor.tsx +++ b/packages/plugin-r3f/src/components/Editor.tsx @@ -9,9 +9,11 @@ import root from 'react-shadow' import styles from '../bundle.css.txt' import UI from './UI' import ProxyManager from './ProxyManager' -import {Button, PortalManager, IdProvider} from './elements' import studio from '@theatre/studio' import {useVal} from '@theatre/dataverse-react' +import {IdProvider} from './elements/IdProvider' +import PortalManager from './elements/PortalManager' +import Button from './elements/Button' const EditorScene = () => { const orbitControlsRef = useRef() diff --git a/packages/plugin-r3f/src/components/EnvironmentPreview.tsx b/packages/plugin-r3f/src/components/EnvironmentPreview.tsx deleted file mode 100644 index 408bfe6..0000000 --- a/packages/plugin-r3f/src/components/EnvironmentPreview.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import type {VFC} from 'react' -import React, {Suspense} from 'react' -import {Canvas} from '@react-three/fiber' -import {Environment, OrbitControls, TorusKnot} from '@react-three/drei' -import type {ClickableProps} from 'reakit' -import {Clickable} from 'reakit' -import {IoIosClose} from 'react-icons/all' - -export interface EnvironmentPreviewProps extends ClickableProps { - url: string | null - selected: boolean -} - -const EnvironmentPreview: VFC = ({ - url, - selected, - ...props -}) => { - return ( - -
- {url ? ( - <> - - - {/* @ts-ignore */} - - - - - - - -
-
- {url ?? 'None'} -
-
- - ) : ( -
- -
- )} -
-
- ) -} - -export default EnvironmentPreview diff --git a/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx b/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx index 0db5f4b..83c454d 100644 --- a/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx +++ b/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx @@ -2,7 +2,7 @@ import type {VFC} from 'react' import React from 'react' import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/all' import type {TransformControlsMode} from '../store' -import {CompactModeSelect} from './elements' +import CompactModeSelect from './elements/CompactModeSelect' export interface TransformControlsModeSelectProps { value: TransformControlsMode diff --git a/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx b/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx index 7e55db5..965603d 100644 --- a/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx +++ b/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx @@ -2,7 +2,7 @@ import type {VFC} from 'react' import React from 'react' import type {TransformControlsSpace} from '../store' import {BiCube, BiGlobe} from 'react-icons/all' -import {CompactModeSelect} from './elements' +import CompactModeSelect from './elements/CompactModeSelect' export interface TransformControlsSpaceSelectProps { value: TransformControlsSpace diff --git a/packages/plugin-r3f/src/components/UI.tsx b/packages/plugin-r3f/src/components/UI.tsx index e9bc8e6..37a8f49 100644 --- a/packages/plugin-r3f/src/components/UI.tsx +++ b/packages/plugin-r3f/src/components/UI.tsx @@ -6,14 +6,14 @@ import shallow from 'zustand/shallow' import ReferenceWindow from './ReferenceWindow' import TransformControlsSpaceSelect from './TransformControlsSpaceSelect' import ViewportShadingSelect from './ViewportShadingSelect' -import {AiFillEye, GiPocketBow, RiFocus3Line} from 'react-icons/all' +import {GiPocketBow, RiFocus3Line} from 'react-icons/all' import {Vector3} from 'three' -import {IconButton, Button, SettingsButton} from './elements' -import ViewportSettings from './ViewportSettings' import type {$FixMe} from '@theatre/shared/utils/types' import studio from '@theatre/studio' import {getSelected} from './useSelected' import {useVal} from '@theatre/dataverse-react' +import IconButton from './elements/IconButton' +import Button from './elements/Button' const UI: VFC = () => { const [editorObject] = useEditorStore( @@ -130,11 +130,6 @@ const UI: VFC = () => { }} /> -
- } label="Viewport settings"> - - -
diff --git a/packages/plugin-r3f/src/components/ViewportSettings.tsx b/packages/plugin-r3f/src/components/ViewportSettings.tsx deleted file mode 100644 index f4f92c7..0000000 --- a/packages/plugin-r3f/src/components/ViewportSettings.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import type {VFC} from 'react' -import React from 'react' -import {useEditorStore} from '../store' -import shallow from 'zustand/shallow' -import {Checkbox, FormControl, Slider} from './elements' -import UnstyledFormLabel from './elements/UnstyledFormLabel' -import {useVal} from '@theatre/dataverse-react' -import studio from '@theatre/studio' - -const ViewportShadingSettings: VFC = () => { - const [editorObject] = useEditorStore( - (state) => [state.editorObject], - shallow, - ) - - const showAxes = useVal(editorObject?.props.showAxes) ?? true - const showGrid = useVal(editorObject?.props.showGrid) ?? true - const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false - const referenceWindowSize = - useVal(editorObject?.props.referenceWindowSize) ?? 120 - - return ( -
- - - studio.transaction(({set}) => { - set(editorObject!.props.showOverlayIcons, !showOverlayIcons) - }) - } - > - Show overlay icons - - - - - studio.transaction(({set}) => { - set(editorObject!.props.showGrid, !showGrid) - }) - } - > - Show grid - - - - - studio.transaction(({set}) => { - set(editorObject!.props.showAxes, !showAxes) - }) - } - > - Show axes - - - -
-
- - Preview size: - -
-
- - studio.transaction(({set}) => { - set( - editorObject!.props.referenceWindowSize, - Number(event.target.value), - ) - }) - } - /> -
-
-
-
- ) -} - -export default ViewportShadingSettings diff --git a/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx b/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx index 2c05575..c644304 100644 --- a/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx +++ b/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx @@ -2,7 +2,7 @@ import type {VFC} from 'react' import React from 'react' import type {ViewportShading} from '../store' import {FaCube, GiCube, GiIceCube, BiCube} from 'react-icons/all' -import {CompactModeSelect} from './elements' +import CompactModeSelect from './elements/CompactModeSelect' export interface ViewportShadingSelectProps { value: ViewportShading diff --git a/packages/plugin-r3f/src/components/elements/Checkbox.tsx b/packages/plugin-r3f/src/components/elements/Checkbox.tsx deleted file mode 100644 index 7ec2057..0000000 --- a/packages/plugin-r3f/src/components/elements/Checkbox.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, {forwardRef} from 'react' -import type {CheckboxProps} from 'reakit' -import {Checkbox as CheckboxImpl} from 'reakit' -import {useFormControlContext} from './FormControl' - -export type {CheckboxProps} - -const Checkbox = forwardRef( - ({children, ...props}, ref) => { - const id = useFormControlContext() - - return ( -
-
- -
-
- -
-
- ) - }, -) - -export default Checkbox diff --git a/packages/plugin-r3f/src/components/elements/Code.tsx b/packages/plugin-r3f/src/components/elements/Code.tsx deleted file mode 100644 index 9493982..0000000 --- a/packages/plugin-r3f/src/components/elements/Code.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type {VFC} from 'react' -import React from 'react' -import Highlight, {defaultProps} from 'prism-react-renderer' -import theme from 'prism-react-renderer/themes/github' - -export interface CodeProps { - children: string - block?: boolean -} - -const Code: VFC = ({children, block}) => { - return ( - - {({className, style, tokens, getLineProps, getTokenProps}) => ( - - {tokens.map((line, i) => ( -
- {line.map((token, key) => ( - - ))} -
- ))} -
- )} -
- ) -} -export default Code diff --git a/packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx b/packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx index b0dec36..6a7621e 100644 --- a/packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx +++ b/packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx @@ -2,14 +2,8 @@ import type {ReactElement, ReactNode, VFC} from 'react' import React from 'react' import type {IconType} from 'react-icons' import {Group, Button} from 'reakit' -import { - Tooltip, - TooltipReference, - usePopoverState, - useTooltipState, - PopoverDisclosure, - Popover, -} from '.' +import {Tooltip, TooltipReference, useTooltipState} from './Tooltip' +import {usePopoverState, PopoverDisclosure, Popover} from './Popover' import {FiChevronDown} from 'react-icons/all' interface OptionButtonProps