From 86547aa4cb84c22218173e675c8253c0a21dabd6 Mon Sep 17 00:00:00 2001 From: Aria Minaei Date: Sat, 10 Jul 2021 12:15:27 +0200 Subject: [PATCH] Moved r3f's toolbar out of the snapshot editor --- packages/plugin-r3f/src/components/Editor.tsx | 11 +++++------ .../components/{UI.tsx => Toolbar/Toolbar.tsx} | 16 ++++++++-------- .../TransformControlsModeSelect.tsx | 4 ++-- .../TransformControlsSpaceSelect.tsx | 4 ++-- .../{ => Toolbar}/ViewportShadingSelect.tsx | 4 ++-- .../utils}/CompactModeSelect.tsx | 0 .../{elements => Toolbar/utils}/IconButton.tsx | 0 .../{elements => Toolbar/utils}/Tooltip.tsx | 0 8 files changed, 19 insertions(+), 20 deletions(-) rename packages/plugin-r3f/src/components/{UI.tsx => Toolbar/Toolbar.tsx} (95%) rename packages/plugin-r3f/src/components/{ => Toolbar}/TransformControlsModeSelect.tsx (87%) rename packages/plugin-r3f/src/components/{ => Toolbar}/TransformControlsSpaceSelect.tsx (85%) rename packages/plugin-r3f/src/components/{ => Toolbar}/ViewportShadingSelect.tsx (89%) rename packages/plugin-r3f/src/components/{elements => Toolbar/utils}/CompactModeSelect.tsx (100%) rename packages/plugin-r3f/src/components/{elements => Toolbar/utils}/IconButton.tsx (100%) rename packages/plugin-r3f/src/components/{elements => Toolbar/utils}/Tooltip.tsx (100%) diff --git a/packages/plugin-r3f/src/components/Editor.tsx b/packages/plugin-r3f/src/components/Editor.tsx index 7d052e8..75a7eeb 100644 --- a/packages/plugin-r3f/src/components/Editor.tsx +++ b/packages/plugin-r3f/src/components/Editor.tsx @@ -6,7 +6,7 @@ import {useEditorStore} from '../store' import {OrbitControls} from '@react-three/drei' import shallow from 'zustand/shallow' import root from 'react-shadow/styled-components' -import UI from './UI' +import Toolbar from './Toolbar/Toolbar' import ProxyManager from './ProxyManager' import studio from '@theatre/studio' import {useVal} from '@theatre/dataverse-react' @@ -62,7 +62,7 @@ const EditorScene = () => { ) } -const Wrapper = styled.div<{editorOpen: boolean}>` +const Wrapper = styled.div<{visible: boolean}>` tab-size: 4; line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ @@ -74,7 +74,7 @@ const Wrapper = styled.div<{editorOpen: boolean}>` bottom: 0px; left: 0px; z-index: 50; - display: ${(props) => (props.editorOpen ? 'block' : 'none')}; + display: ${(props) => (props.visible ? 'block' : 'none')}; ` const CanvasWrapper = styled.div` @@ -107,7 +107,8 @@ const Editor: VFC = () => { return ( - + + {sceneSnapshot ? ( <> @@ -125,8 +126,6 @@ const Editor: VFC = () => { - - ) : null} diff --git a/packages/plugin-r3f/src/components/UI.tsx b/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx similarity index 95% rename from packages/plugin-r3f/src/components/UI.tsx rename to packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx index e523f11..97d1fd4 100644 --- a/packages/plugin-r3f/src/components/UI.tsx +++ b/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx @@ -2,7 +2,7 @@ import type {VFC} from 'react' import {useState} from 'react' import React from 'react' import TransformControlsModeSelect from './TransformControlsModeSelect' -import {useEditorStore} from '../store' +import {useEditorStore} from '../../store' import shallow from 'zustand/shallow' import TransformControlsSpaceSelect from './TransformControlsSpaceSelect' import ViewportShadingSelect from './ViewportShadingSelect' @@ -10,9 +10,9 @@ import {GiPocketBow, RiFocus3Line} from 'react-icons/all' import {Vector3} from 'three' import type {$FixMe} from '@theatre/shared/utils/types' import studio from '@theatre/studio' -import {getSelected} from './useSelected' +import {getSelected} from '../useSelected' import {useVal} from '@theatre/dataverse-react' -import IconButton from './elements/IconButton' +import IconButton from './utils/IconButton' import {PortalContext} from 'reakit' import styled from 'styled-components' @@ -37,7 +37,7 @@ const TopRow = styled.div` align-items: flex-start; ` -const Toolbar = styled.div` +const Tools = styled.div` display: flex; gap: 1rem; ` @@ -46,7 +46,7 @@ const ToolGroup = styled.div` pointer-events: auto; ` -const UI: VFC = () => { +const Toolbar: VFC = () => { const [editorObject] = useEditorStore( (state) => [state.editorObject], shallow, @@ -67,7 +67,7 @@ const UI: VFC = () => { - + { }} /> - + ) } -export default UI +export default Toolbar diff --git a/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx b/packages/plugin-r3f/src/components/Toolbar/TransformControlsModeSelect.tsx similarity index 87% rename from packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx rename to packages/plugin-r3f/src/components/Toolbar/TransformControlsModeSelect.tsx index 83c454d..9986123 100644 --- a/packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx +++ b/packages/plugin-r3f/src/components/Toolbar/TransformControlsModeSelect.tsx @@ -1,8 +1,8 @@ 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/CompactModeSelect' +import type {TransformControlsMode} from '../../store' +import CompactModeSelect from './utils/CompactModeSelect' export interface TransformControlsModeSelectProps { value: TransformControlsMode diff --git a/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx b/packages/plugin-r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx similarity index 85% rename from packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx rename to packages/plugin-r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx index 965603d..8e89a09 100644 --- a/packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx +++ b/packages/plugin-r3f/src/components/Toolbar/TransformControlsSpaceSelect.tsx @@ -1,8 +1,8 @@ import type {VFC} from 'react' import React from 'react' -import type {TransformControlsSpace} from '../store' +import type {TransformControlsSpace} from '../../store' import {BiCube, BiGlobe} from 'react-icons/all' -import CompactModeSelect from './elements/CompactModeSelect' +import CompactModeSelect from './utils/CompactModeSelect' export interface TransformControlsSpaceSelectProps { value: TransformControlsSpace diff --git a/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx b/packages/plugin-r3f/src/components/Toolbar/ViewportShadingSelect.tsx similarity index 89% rename from packages/plugin-r3f/src/components/ViewportShadingSelect.tsx rename to packages/plugin-r3f/src/components/Toolbar/ViewportShadingSelect.tsx index c644304..1f6718e 100644 --- a/packages/plugin-r3f/src/components/ViewportShadingSelect.tsx +++ b/packages/plugin-r3f/src/components/Toolbar/ViewportShadingSelect.tsx @@ -1,8 +1,8 @@ import type {VFC} from 'react' import React from 'react' -import type {ViewportShading} from '../store' +import type {ViewportShading} from '../../store' import {FaCube, GiCube, GiIceCube, BiCube} from 'react-icons/all' -import CompactModeSelect from './elements/CompactModeSelect' +import CompactModeSelect from './utils/CompactModeSelect' export interface ViewportShadingSelectProps { value: ViewportShading diff --git a/packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx b/packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx similarity index 100% rename from packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx rename to packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx diff --git a/packages/plugin-r3f/src/components/elements/IconButton.tsx b/packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx similarity index 100% rename from packages/plugin-r3f/src/components/elements/IconButton.tsx rename to packages/plugin-r3f/src/components/Toolbar/utils/IconButton.tsx diff --git a/packages/plugin-r3f/src/components/elements/Tooltip.tsx b/packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx similarity index 100% rename from packages/plugin-r3f/src/components/elements/Tooltip.tsx rename to packages/plugin-r3f/src/components/Toolbar/utils/Tooltip.tsx