Started using styled-components in r3f

packages/plugin-r3f/package.json

@@ -34,6 +34,7 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.6.2",
     "@types/react": "^17.0.9",
+    "@types/styled-components": "^5.1.9",
     "typescript": "^4.3.2"
   },
   "dependencies": {
@@ -50,6 +51,7 @@
     "react-shadow": "^19.0.2",
     "react-use-measure": "^2.0.4",
     "reakit": "^1.3.8",
+    "styled-components": "^5.3.0",
     "three": "^0.129.0",
     "zustand": "^3.5.1"
   }

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

@@ -5,12 +5,32 @@ import {Canvas} from '@react-three/fiber'
 import {useEditorStore} from '../store'
 import {OrbitControls} from '@react-three/drei'
 import shallow from 'zustand/shallow'
-import root from 'react-shadow'
+import root from 'react-shadow/styled-components'
 import styles from '../bundle.css.txt'
 import UI from './UI'
 import ProxyManager from './ProxyManager'
 import studio from '@theatre/studio'
 import {useVal} from '@theatre/dataverse-react'
+import styled, {createGlobalStyle} from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  :host {
+    contain: strict;
+    all: initial;
+    color: white;
+    font: 11px -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe Editor,
+      HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;
+  }
+
+  * {
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    list-style: none;
+  }
+`
 
 const EditorScene = () => {
   const orbitControlsRef = useRef<typeof OrbitControls>()
@@ -43,6 +63,27 @@ const EditorScene = () => {
   )
 }
 
+const Wrapper = styled.div<{editorOpen: boolean}>`
+  tab-size: 4;
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  margin: 0;
+
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  z-index: 50;
+  display: ${(props) => (props.editorOpen ? 'block' : 'none')};
+`
+
+const CanvasWrapper = styled.div`
+  display: relative;
+  z-index: 0;
+  height: 100%;
+`
+
 const Editor: VFC = () => {
   const [editorObject, sceneSnapshot, initialEditorCamera, createSnapshot] =
     useEditorStore(
@@ -55,7 +96,7 @@ const Editor: VFC = () => {
       shallow,
     )
 
-  const editorOpen = useVal(editorObject?.props.isOpen)
+  const editorOpen = !!useVal(editorObject?.props.isOpen)
   useLayoutEffect(() => {
     if (editorOpen) {
       createSnapshot()
@@ -66,16 +107,11 @@ const Editor: VFC = () => {
 
   return (
     <root.div>
-      <div id="react-three-editable-editor-root">
-        <>
-          <>
-            <div className="relative z-50">
-              <div
-                className={`fixed ${editorOpen ? 'block' : 'hidden'} inset-0`}
-              >
+      <GlobalStyle />
+      <Wrapper id="theatre-plugin-r3f-root" editorOpen={editorOpen}>
         {sceneSnapshot ? (
           <>
-                    <div className="relative z-0 h-full">
+            <CanvasWrapper>
               <Canvas
                 // @ts-ignore
                 colorManagement
@@ -85,24 +121,17 @@ const Editor: VFC = () => {
                 }}
                 shadowMap
                 pixelRatio={window.devicePixelRatio}
-                        onPointerMissed={() =>
-                          studio.__experimental_setSelection([])
-                        }
+                onPointerMissed={() => studio.__experimental_setSelection([])}
               >
                 <EditorScene />
               </Canvas>
-                    </div>
+            </CanvasWrapper>
 
             <UI />
           </>
         ) : null}
-              </div>
-            </div>
-
+      </Wrapper>
       <style type="text/css">{styles}</style>
-          </>
-        </>
-      </div>
     </root.div>
   )
 }

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

@@ -1,4 +1,5 @@
 import type {VFC} from 'react'
+import {useState} from 'react'
 import React from 'react'
 import TransformControlsModeSelect from './TransformControlsModeSelect'
 import {useEditorStore} from '../store'
@@ -13,6 +14,7 @@ import studio from '@theatre/studio'
 import {getSelected} from './useSelected'
 import {useVal} from '@theatre/dataverse-react'
 import IconButton from './elements/IconButton'
+import {PortalContext} from 'reakit'
 
 const UI: VFC = () => {
   const [editorObject] = useEditorStore(
@@ -29,10 +31,16 @@ const UI: VFC = () => {
   const viewportShading =
     useVal(editorObject?.props.viewportShading) ?? 'rendered'
 
+  const [wrapper, setWrapper] = useState<null | HTMLDivElement>(null)
+
   if (!editorObject) return <></>
 
   return (
-    <div className="absolute inset-0 z-50 pointer-events-none">
+    <PortalContext.Provider value={wrapper}>
+      <div
+        className="absolute inset-0 z-50 pointer-events-none"
+        ref={setWrapper}
+      >
         <div className="flex h-full">
           <div className="relative flex-1 m-5">
             <div className="flex items-start justify-between">
@@ -137,6 +145,7 @@ const UI: VFC = () => {
           </div>
         </div>
       </div>
+    </PortalContext.Provider>
   )
 }
 

packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx

@@ -2,6 +2,7 @@ import type {ReactElement, ReactNode} from 'react'
 import React from 'react'
 import type {IconType} from 'react-icons'
 import {Group, Button} from 'reakit'
+import styled from 'styled-components'
 import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
 
 interface OptionButtonProps<Option> {
@@ -12,6 +13,8 @@ interface OptionButtonProps<Option> {
   onClick: () => void
 }
 
+// const Ro = styled(TooltipReference)``
+
 function OptionButton<Option>({
   value,
   option,
@@ -51,16 +54,17 @@ interface CompactModeSelectProps<Option> {
   settingsPanel?: ReactNode
 }
 
+const Container = styled(Group)`
+  display: flex;
+`
+
 const CompactModeSelect = <Option extends string | number>({
   value,
   onChange,
   options,
 }: CompactModeSelectProps<Option>) => {
   return (
-    <Group
-      // @ts-ignore
-      className="flex"
-    >
+    <Container>
       {options.map(({label, icon, option}) => (
         <OptionButton
           key={option}
@@ -71,7 +75,7 @@ const CompactModeSelect = <Option extends string | number>({
           onClick={() => onChange(option)}
         />
       ))}
-    </Group>
+    </Container>
   )
 }
 

yarn.lock

@@ -3802,6 +3802,7 @@ __metadata:
     "@types/lodash-es": ^4.17.4
     "@types/node": ^15.6.2
     "@types/react": ^17.0.9
+    "@types/styled-components": ^5.1.9
     lodash-es: ^4.17.21
     prism-react-renderer: 1.2.1
     react: ^17.0.2
@@ -3811,6 +3812,7 @@ __metadata:
     react-shadow: ^19.0.2
     react-use-measure: ^2.0.4
     reakit: ^1.3.8
+    styled-components: ^5.3.0
     three: ^0.129.0
     typescript: ^4.3.2
     zustand: ^3.5.1