From 596b7e9d816ce473cbf61a89f81559e29afb9a7c Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Sun, 4 Jul 2021 19:49:36 +0200
Subject: [PATCH] Migrated more of r3f to styled-components

---
 packages/plugin-r3f/src/components/UI.tsx | 245 ++++++++++++----------
 1 file changed, 138 insertions(+), 107 deletions(-)

diff --git a/packages/plugin-r3f/src/components/UI.tsx b/packages/plugin-r3f/src/components/UI.tsx
index ba69348..36a089f 100644
--- a/packages/plugin-r3f/src/components/UI.tsx
+++ b/packages/plugin-r3f/src/components/UI.tsx
@@ -15,6 +15,44 @@ import {getSelected} from './useSelected'
 import {useVal} from '@theatre/dataverse-react'
 import IconButton from './elements/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 Toolbar = styled.div`
+  display: flex;
+  gap: 1rem;
+`
+
+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(
@@ -37,114 +75,107 @@ const UI: VFC = () => {
 
   return (
     <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">
-              <div className="flex gap-4">
-                <div className="pointer-events-auto">
-                  <TransformControlsModeSelect
-                    value={transformControlsMode}
-                    onChange={(value) =>
-                      studio.transaction(({set}) =>
-                        set(editorObject!.props.transformControlsMode, value),
-                      )
+      <Container ref={setWrapper}>
+        <TopRow>
+          <Toolbar>
+            <ToolGroup>
+              <TransformControlsModeSelect
+                value={transformControlsMode}
+                onChange={(value) =>
+                  studio.transaction(({set}) =>
+                    set(editorObject!.props.transformControlsMode, value),
+                  )
+                }
+              />
+            </ToolGroup>
+            <ToolGroup>
+              <TransformControlsSpaceSelect
+                value={transformControlsSpace}
+                onChange={(space) => {
+                  studio.transaction(({set}) => {
+                    set(editorObject.props.transformControlsSpace, space)
+                  })
+                }}
+              />
+            </ToolGroup>
+            <ToolGroup>
+              <ViewportShadingSelect
+                value={viewportShading}
+                onChange={(shading) => {
+                  studio.transaction(({set}) => {
+                    set(editorObject.props.viewportShading, shading)
+                  })
+                }}
+              />
+            </ToolGroup>
+            <ToolGroup>
+              <IconButton
+                label="Focus on selected"
+                icon={<RiFocus3Line />}
+                onClick={() => {
+                  const orbitControls =
+                    useEditorStore.getState().orbitControlsRef?.current
+                  const selected = getSelected()
+
+                  let focusObject
+
+                  if (selected) {
+                    focusObject =
+                      useEditorStore.getState().editablesSnapshot![selected]
+                        .proxyObject
+                  }
+
+                  if (orbitControls && focusObject) {
+                    focusObject.getWorldPosition(
+                      // @ts-ignore TODO
+                      orbitControls.target as Vector3,
+                    )
+                  }
+                }}
+              />
+            </ToolGroup>
+            <ToolGroup>
+              <IconButton
+                label="Align object to view"
+                icon={<GiPocketBow />}
+                onClick={() => {
+                  const camera = (
+                    useEditorStore.getState().orbitControlsRef
+                      ?.current as $FixMe
+                  )?.object
+
+                  const selected = getSelected()
+
+                  let proxyObject
+
+                  if (selected) {
+                    proxyObject =
+                      useEditorStore.getState().editablesSnapshot![selected]
+                        .proxyObject
+
+                    if (proxyObject && camera) {
+                      const direction = new Vector3()
+                      const position = camera.position.clone()
+
+                      camera.getWorldDirection(direction)
+                      proxyObject.position.set(0, 0, 0)
+                      proxyObject.lookAt(direction)
+
+                      proxyObject.parent!.worldToLocal(position)
+                      proxyObject.position.copy(position)
+
+                      proxyObject.updateMatrix()
                     }
-                  />
-                </div>
-                <div className="pointer-events-auto">
-                  <TransformControlsSpaceSelect
-                    value={transformControlsSpace}
-                    onChange={(space) => {
-                      studio.transaction(({set}) => {
-                        set(editorObject.props.transformControlsSpace, space)
-                      })
-                    }}
-                  />
-                </div>
-                <div className="pointer-events-auto">
-                  <ViewportShadingSelect
-                    value={viewportShading}
-                    onChange={(shading) => {
-                      studio.transaction(({set}) => {
-                        set(editorObject.props.viewportShading, shading)
-                      })
-                    }}
-                  />
-                </div>
-                <div className="pointer-events-auto">
-                  <IconButton
-                    label="Focus on selected"
-                    icon={<RiFocus3Line />}
-                    onClick={() => {
-                      const orbitControls =
-                        useEditorStore.getState().orbitControlsRef?.current
-                      const selected = getSelected()
-
-                      let focusObject
-
-                      if (selected) {
-                        focusObject =
-                          useEditorStore.getState().editablesSnapshot![selected]
-                            .proxyObject
-                      }
-
-                      if (orbitControls && focusObject) {
-                        focusObject.getWorldPosition(
-                          // @ts-ignore TODO
-                          orbitControls.target as Vector3,
-                        )
-                      }
-                    }}
-                  />
-                </div>
-                <div className="pointer-events-auto">
-                  <IconButton
-                    label="Align object to view"
-                    icon={<GiPocketBow />}
-                    onClick={() => {
-                      const camera = (
-                        useEditorStore.getState().orbitControlsRef
-                          ?.current as $FixMe
-                      )?.object
-
-                      const selected = getSelected()
-
-                      let proxyObject
-
-                      if (selected) {
-                        proxyObject =
-                          useEditorStore.getState().editablesSnapshot![selected]
-                            .proxyObject
-
-                        if (proxyObject && camera) {
-                          const direction = new Vector3()
-                          const position = camera.position.clone()
-
-                          camera.getWorldDirection(direction)
-                          proxyObject.position.set(0, 0, 0)
-                          proxyObject.lookAt(direction)
-
-                          proxyObject.parent!.worldToLocal(position)
-                          proxyObject.position.copy(position)
-
-                          proxyObject.updateMatrix()
-                        }
-                      }
-                    }}
-                  />
-                </div>
-              </div>
-              <div className="absolute right-0 top-0 -z-10">
-                <ReferenceWindow height={referenceWindowSize} />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+                  }
+                }}
+              />
+            </ToolGroup>
+          </Toolbar>
+          <ReferenceWindowContainer>
+            <ReferenceWindow height={referenceWindowSize} />
+          </ReferenceWindowContainer>
+        </TopRow>
+      </Container>
     </PortalContext.Provider>
   )
 }