initial migration from zustand (#2852)

* inital migration with a couple lingering concerns

* move is stream ready back

* put htmlRef back in useStore

* final tidy of useStore

* test tweaks

* tweak more

* more test tweaks

* fmt

* test tweaks

* attempts at fixing 'Basic default modeling and sketch hotkeys work'

* more tries

* 😭

* try again

* fmt

src/hooks/useSetupEngineManager.ts

@@ -1,9 +1,10 @@
 import { useLayoutEffect, useEffect, useRef } from 'react'
-import { useStore } from '../useStore'
 import { engineCommandManager, kclManager } from 'lib/singletons'
 import { deferExecution } from 'lib/utils'
 import { Themes } from 'lib/theme'
 import { makeDefaultPlanes, modifyGrid } from 'lang/wasm'
+import { useModelingContext } from './useModelingContext'
+import { useStore } from 'useStore'
 
 export function useSetupEngineManager(
   streamRef: React.RefObject<HTMLDivElement>,
@@ -13,25 +14,21 @@ export function useSetupEngineManager(
     theme: Themes.System,
     highlightEdges: true,
     enableSSAO: true,
+    modelingSend: (() => {}) as any,
+    modelingContext: {} as any,
     showScaleGrid: false,
   } as {
     pool: string | null
     theme: Themes
     highlightEdges: boolean
     enableSSAO: boolean
+    modelingSend: ReturnType<typeof useModelingContext>['send']
+    modelingContext: ReturnType<typeof useModelingContext>['context']
     showScaleGrid: boolean
   }
 ) {
-  const {
-    setMediaStream,
-    setIsStreamReady,
-    setStreamDimensions,
-    streamDimensions,
-  } = useStore((s) => ({
-    setMediaStream: s.setMediaStream,
+  const { setIsStreamReady } = useStore((s) => ({
     setIsStreamReady: s.setIsStreamReady,
-    setStreamDimensions: s.setStreamDimensions,
-    streamDimensions: s.streamDimensions,
   }))
 
   const streamWidth = streamRef?.current?.offsetWidth
@@ -52,9 +49,18 @@ export function useSetupEngineManager(
       streamWidth,
       streamHeight
     )
-    if (!hasSetNonZeroDimensions.current && quadHeight && quadWidth) {
+    if (
+      !hasSetNonZeroDimensions.current &&
+      quadHeight &&
+      quadWidth &&
+      settings.modelingSend
+    ) {
       engineCommandManager.start({
-        setMediaStream,
+        setMediaStream: (mediaStream) =>
+          settings.modelingSend({
+            type: 'Set context',
+            data: { mediaStream },
+          }),
         setIsStreamReady,
         width: quadWidth,
         height: quadHeight,
@@ -72,9 +78,14 @@ export function useSetupEngineManager(
           return modifyGrid(kclManager.engineCommandManager, hidden)
         },
       })
-      setStreamDimensions({
-        streamWidth: quadWidth,
-        streamHeight: quadHeight,
+      settings.modelingSend({
+        type: 'Set context',
+        data: {
+          streamDimensions: {
+            streamWidth: quadWidth,
+            streamHeight: quadHeight,
+          },
+        },
       })
       hasSetNonZeroDimensions.current = true
     }
@@ -83,6 +94,7 @@ export function useSetupEngineManager(
   useLayoutEffect(startEngineInstance, [
     streamRef?.current?.offsetWidth,
     streamRef?.current?.offsetHeight,
+    settings.modelingSend,
   ])
 
   useEffect(() => {
@@ -92,16 +104,21 @@ export function useSetupEngineManager(
         streamRef?.current?.offsetHeight
       )
       if (
-        streamDimensions.streamWidth !== width ||
-        streamDimensions.streamHeight !== height
+        settings.modelingContext.store.streamDimensions.streamWidth !== width ||
+        settings.modelingContext.store.streamDimensions.streamHeight !== height
       ) {
         engineCommandManager.handleResize({
           streamWidth: width,
           streamHeight: height,
         })
-        setStreamDimensions({
-          streamWidth: width,
-          streamHeight: height,
+        settings.modelingSend({
+          type: 'Set context',
+          data: {
+            streamDimensions: {
+              streamWidth: width,
+              streamHeight: height,
+            },
+          },
         })
       }
     }, 500)