Add more console.log

useRef is a React Hook that lets you reference a value that’s not needed
for rendering. The value is set to the initial value on startup, and
will hang on to 'current' for us. We can store the Engine in the ref,
and React will take care of persisting it for us.

Signed-off-by: Paul Tagliamonte <paul@kittycad.io>

src/hooks/useSetupEngineManager.ts

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from 'react'
+import { useRef, useLayoutEffect } from 'react'
 import { _executor } from '../lang/executor'
 import { useStore } from '../useStore'
 import { EngineCommandManager } from '../lang/std/engineConnection'
@@ -28,6 +28,11 @@ export function useSetupEngineManager(
   const quadWidth = Math.round(width / 4) * 4
   const height = streamHeight ? streamHeight : 0
   const quadHeight = Math.round(height / 4) * 4
+  const eng = useRef<{
+    engine: EngineCommandManager
+    width: number
+    height: number
+  } | null>(null)
 
   useLayoutEffect(() => {
     setStreamDimensions({
@@ -35,19 +40,37 @@ export function useSetupEngineManager(
       streamHeight: quadHeight,
     })
     if (!width || !height) return
-    const eng = new EngineCommandManager({
+
+    if (eng.current) {
+      // Before we go further, we're going to check to see if the
+      // width/height is the same as the last go-around. If it is, we
+      // can continue as normal, but if it's different, we should be
+      // clearing out the manager and going again.
+      let c = eng.current
+      if (width !== c.width || height !== c.height) {
+        eng.current = null
+      }
+    }
+
+    if (eng.current === null) {
+      eng.current = {
+        engine: new EngineCommandManager({
           setMediaStream,
           setIsStreamReady,
           width: quadWidth,
           height: quadHeight,
           token,
-    })
+        }),
-    setEngineCommandManager(eng)
+        width: width,
-    eng.waitForReady.then(() => {
+        height: height,
+      }
+    }
+    setEngineCommandManager(eng.current.engine)
+    eng.current.engine.waitForReady.then(() => {
       executeCode()
     })
     return () => {
-      eng?.tearDown()
+      eng.current?.engine?.tearDown()
     }
   }, [quadWidth, quadHeight])
 }

src/lang/std/engineConnection.ts

@@ -364,8 +364,10 @@ export class EngineConnection {
       // fix responsiveness for clients that had a weird network hiccup.
       const connectionTimeoutMs = VITE_KC_CONNECTION_TIMEOUT_MS
 
+      console.log('setting timeout for connection')
       setTimeout(() => {
         if (this.isReady()) {
+          console.log('timeout fired but we were ready')
           return
         }
         console.log('engine connection timeout on connection, retrying')
@@ -561,6 +563,7 @@ export class EngineCommandManager {
       this.resolveReady = resolve
     })
     const url = `${VITE_KC_API_WS_MODELING_URL}?video_res_width=${width}&video_res_height=${height}`
+    console.log('new eng conn')
     this.engineConnection = new EngineConnection({
       url,
       token,
@@ -777,7 +780,6 @@ export class EngineCommandManager {
       lastMessage = command.cmd.type
     }
     if (!this.engineConnection?.isReady()) {
-      console.log('socket not ready')
       return Promise.resolve()
     }
     if (command.type !== 'modeling_cmd_req') return Promise.resolve()
@@ -824,7 +826,6 @@ export class EngineCommandManager {
     this.sourceRangeMap[id] = range
 
     if (!this.engineConnection?.isReady()) {
-      console.log('socket not ready')
       return Promise.resolve()
     }
     this.engineConnection?.send(command)