From d0e9d357e7aa17186fae9686ba3d9db85200d420 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Sat, 3 Jul 2021 13:14:47 +0200
Subject: [PATCH] Chore: r3f only uses Theatre's selections now

---
 packages/plugin-r3f/src/components/UI.tsx          |  7 +++++--
 packages/plugin-r3f/src/components/useSelected.tsx | 11 +++++++++++
 packages/plugin-r3f/src/store.ts                   |  4 ----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/plugin-r3f/src/components/UI.tsx b/packages/plugin-r3f/src/components/UI.tsx
index 283466f..554ab65 100644
--- a/packages/plugin-r3f/src/components/UI.tsx
+++ b/packages/plugin-r3f/src/components/UI.tsx
@@ -12,6 +12,7 @@ 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'
 
 const UI: VFC = () => {
   const [
@@ -70,7 +71,8 @@ const UI: VFC = () => {
                   onClick={() => {
                     const orbitControls =
                       useEditorStore.getState().orbitControlsRef?.current
-                    const selected = useEditorStore.getState().selected
+                    const selected = getSelected()
+
                     let focusObject
 
                     if (selected) {
@@ -97,7 +99,8 @@ const UI: VFC = () => {
                       useEditorStore.getState().orbitControlsRef
                         ?.current as $FixMe
                     )?.object
-                    const selected = useEditorStore.getState().selected
+
+                    const selected = getSelected()
 
                     let proxyObject
 
diff --git a/packages/plugin-r3f/src/components/useSelected.tsx b/packages/plugin-r3f/src/components/useSelected.tsx
index 0b3a0a2..5f6718a 100644
--- a/packages/plugin-r3f/src/components/useSelected.tsx
+++ b/packages/plugin-r3f/src/components/useSelected.tsx
@@ -25,3 +25,14 @@ export function useSelected(): undefined | string {
 
   return state
 }
+
+export function getSelected(): undefined | string {
+  const sheet = useEditorStore.getState().sheet
+  if (!sheet) return undefined
+  const item = studio.selection.find((s) => s.sheet === sheet)
+  if (!item) {
+    return undefined
+  } else {
+    return item.address.objectKey
+  }
+}
diff --git a/packages/plugin-r3f/src/store.ts b/packages/plugin-r3f/src/store.ts
index ead885d..3d3f262 100644
--- a/packages/plugin-r3f/src/store.ts
+++ b/packages/plugin-r3f/src/store.ts
@@ -147,8 +147,6 @@ export type EditorStore = {
   editables: Record<string, Editable>
   // this will come in handy when we start supporting multiple canvases
   canvasName: string
-  initialState: EditableState | null
-  selected: string | null
   transformControlsMode: TransformControlsMode
   transformControlsSpace: TransformControlsSpace
   viewportShading: ViewportShading
@@ -221,8 +219,6 @@ const config: StateCreator<EditorStore> = (set, get) => {
     helpersRoot: new Group(),
     editables: {},
     canvasName: 'default',
-    initialState: null,
-    selected: null,
     transformControlsMode: 'translate',
     transformControlsSpace: 'world',
     viewportShading: 'rendered',