From 6e19c51998b5c63dd00d83fa2488a6bfd9b05757 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Sun, 27 Jun 2021 13:41:17 +0200
Subject: [PATCH] Chore: Upgraded example-dom to use the new API

---
 packages/example-dom/Scene.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/example-dom/Scene.tsx b/packages/example-dom/Scene.tsx
index a66c722..43544e3 100644
--- a/packages/example-dom/Scene.tsx
+++ b/packages/example-dom/Scene.tsx
@@ -46,7 +46,7 @@ const Box: React.FC<{
       },
       onDrag(x, y) {
         if (!firstOnDragCalled) {
-          studio.__experimental_setSelectedObject(obj)
+          studio.__experimental_setSelection([obj])
           firstOnDragCalled = true
         }
         scrub!.capture(({set}) => {
@@ -69,7 +69,7 @@ const Box: React.FC<{
   return (
     <div
       onClick={() => {
-        studio.__experimental_setSelectedObject(obj)
+        studio.__experimental_setSelection([obj])
       }}
       ref={setDivRef}
       style={{
@@ -93,11 +93,11 @@ export const Scene: React.FC<{project: IProject}> = ({project}) => {
 
   // This is cheap to call and always returns the same value, so no need for useMemo()
   const sheet = project.sheet('Scene', 'default')
-  const [studioState, setStudioState] = useState<IStudio['state']>()
+  const [selection, _setSelection] = useState<IStudio['selection']>([])
 
   useLayoutEffect(() => {
-    return studio.__experimental_onStateChange((newState) => {
-      setStudioState(newState)
+    return studio.__experimental_onSelectionChange((newSelection) => {
+      _setSelection(newSelection)
     })
   })
 
@@ -124,7 +124,7 @@ export const Scene: React.FC<{project: IProject}> = ({project}) => {
           key={'box' + id}
           id={id}
           sheet={sheet}
-          selectedObject={studioState?.selectedObject}
+          selectedObject={selection[0]}
         />
       ))}
     </div>