diff --git a/packages/plugin-r3f/package.json b/packages/plugin-r3f/package.json
index 24f65c5..b0b2b92 100644
--- a/packages/plugin-r3f/package.json
+++ b/packages/plugin-r3f/package.json
@@ -43,6 +43,7 @@
"@theatre/core": "workspace:*",
"@theatre/studio": "workspace:*",
"lodash-es": "^4.17.21",
+ "polished": "^4.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
diff --git a/packages/plugin-r3f/src/components/Editor.tsx b/packages/plugin-r3f/src/components/Editor.tsx
index 75a7eeb..2d431e5 100644
--- a/packages/plugin-r3f/src/components/Editor.tsx
+++ b/packages/plugin-r3f/src/components/Editor.tsx
@@ -6,11 +6,10 @@ import {useEditorStore} from '../store'
import {OrbitControls} from '@react-three/drei'
import shallow from 'zustand/shallow'
import root from 'react-shadow/styled-components'
-import Toolbar from './Toolbar/Toolbar'
import ProxyManager from './ProxyManager'
import studio from '@theatre/studio'
import {useVal} from '@theatre/dataverse-react'
-import styled, {createGlobalStyle} from 'styled-components'
+import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
const GlobalStyle = createGlobalStyle`
:host {
@@ -52,12 +51,13 @@ const EditorScene = () => {
return (
<>
- {showGrid && }
+ {showGrid && }
{showAxes && }
{/* @ts-ignore */}
+
)
}
@@ -106,29 +106,36 @@ const Editor: VFC = () => {
return (
-
-
-
- {sceneSnapshot ? (
- <>
-
-
-
-
- ) : null}
-
+
+ <>
+
+
+ {/* */}
+ {sceneSnapshot ? (
+ <>
+
+
+
+
+ ) : null}
+
+
+
)
}
diff --git a/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx b/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
index 97d1fd4..7162563 100644
--- a/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
+++ b/packages/plugin-r3f/src/components/Toolbar/Toolbar.tsx
@@ -1,5 +1,4 @@
import type {VFC} from 'react'
-import {useState} from 'react'
import React from 'react'
import TransformControlsModeSelect from './TransformControlsModeSelect'
import {useEditorStore} from '../../store'
@@ -13,35 +12,8 @@ import studio from '@theatre/studio'
import {getSelected} from '../useSelected'
import {useVal} from '@theatre/dataverse-react'
import IconButton from './utils/IconButton'
-import {PortalContext} from 'reakit'
import styled from 'styled-components'
-const Container = styled.div`
- z-index: 50;
- position: absolute;
- top: 0px;
- right: 0px;
- bottom: 0px;
- left: 0px;
- pointer-events: none;
-`
-
-const TopRow = styled.div`
- position: relative;
- margin: 1.25rem;
- height: 100%;
-
- display: flex;
- flex: 1 1 0%;
- justify-content: space-between;
- align-items: flex-start;
-`
-
-const Tools = styled.div`
- display: flex;
- gap: 1rem;
-`
-
const ToolGroup = styled.div`
pointer-events: auto;
`
@@ -59,111 +31,102 @@ const Toolbar: VFC = () => {
const viewportShading =
useVal(editorObject?.props.viewport.shading) ?? 'rendered'
- const [wrapper, setWrapper] = useState(null)
-
if (!editorObject) return <>
return (
-
-
-
-
-
-
- studio.transaction(({set}) =>
- set(editorObject!.props.transformControls.mode, value),
- )
- }
- />
-
-
- {
- studio.transaction(({set}) => {
- set(editorObject.props.transformControls.space, space)
- })
- }}
- />
-
-
- {
- studio.transaction(({set}) => {
- set(editorObject.props.viewport.shading, shading)
- })
- }}
- />
-
-
- }
- onClick={() => {
- const orbitControls =
- useEditorStore.getState().orbitControlsRef?.current
- const selected = getSelected()
+ <>
+
+
+ studio.transaction(({set}) =>
+ set(editorObject!.props.transformControls.mode, value),
+ )
+ }
+ />
+
+
+ {
+ studio.transaction(({set}) => {
+ set(editorObject.props.transformControls.space, space)
+ })
+ }}
+ />
+
+
+ {
+ studio.transaction(({set}) => {
+ set(editorObject.props.viewport.shading, shading)
+ })
+ }}
+ />
+
+
+ }
+ onClick={() => {
+ const orbitControls =
+ useEditorStore.getState().orbitControlsRef?.current
+ const selected = getSelected()
- let focusObject
+ let focusObject
- if (selected) {
- focusObject =
- useEditorStore.getState().editablesSnapshot![selected]
- .proxyObject
- }
+ if (selected) {
+ focusObject =
+ useEditorStore.getState().editablesSnapshot![selected]
+ .proxyObject
+ }
- if (orbitControls && focusObject) {
- focusObject.getWorldPosition(
- // @ts-ignore TODO
- orbitControls.target as Vector3,
- )
- }
- }}
- />
-
-
- }
- onClick={() => {
- const camera = (
- useEditorStore.getState().orbitControlsRef
- ?.current as $FixMe
- )?.object
+ if (orbitControls && focusObject) {
+ focusObject.getWorldPosition(
+ // @ts-ignore TODO
+ orbitControls.target as Vector3,
+ )
+ }
+ }}
+ />
+
+
+ }
+ onClick={() => {
+ const camera = (
+ useEditorStore.getState().orbitControlsRef?.current as $FixMe
+ )?.object
- const selected = getSelected()
+ const selected = getSelected()
- let proxyObject
+ let proxyObject
- if (selected) {
- proxyObject =
- useEditorStore.getState().editablesSnapshot![selected]
- .proxyObject
+ if (selected) {
+ proxyObject =
+ useEditorStore.getState().editablesSnapshot![selected]
+ .proxyObject
- if (proxyObject && camera) {
- const direction = new Vector3()
- const position = camera.position.clone()
+ if (proxyObject && camera) {
+ const direction = new Vector3()
+ const position = camera.position.clone()
- camera.getWorldDirection(direction)
- proxyObject.position.set(0, 0, 0)
- proxyObject.lookAt(direction)
+ camera.getWorldDirection(direction)
+ proxyObject.position.set(0, 0, 0)
+ proxyObject.lookAt(direction)
- proxyObject.parent!.worldToLocal(position)
- proxyObject.position.copy(position)
+ proxyObject.parent!.worldToLocal(position)
+ proxyObject.position.copy(position)
- proxyObject.updateMatrix()
- }
- }
- }}
- />
-
-
-
-
-
+ proxyObject.updateMatrix()
+ }
+ }
+ }}
+ />
+
+
)
}
diff --git a/packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx b/packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx
index 2f00f68..f696f13 100644
--- a/packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx
+++ b/packages/plugin-r3f/src/components/Toolbar/utils/CompactModeSelect.tsx
@@ -13,42 +13,38 @@ interface OptionButtonProps