resize (#706)

* start of resize

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* refactor

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* check if 0

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* will work w new lib

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* new types

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* handle resize effect

---------

Signed-off-by: Jess Frazelle <github@jessfraz.com>
Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>

src/hooks/useAppMode.ts

@@ -8,6 +8,7 @@ import { ArtifactMap, EngineCommandManager } from 'lang/std/engineConnection'
 import { Models } from '@kittycad/lib/dist/types/src'
 import { isReducedMotion } from 'lang/util'
 import { isOverlap } from 'lib/utils'
+import { engineCommandManager } from '../lang/std/engineConnection'
 
 interface DefaultPlanes {
   xy: string
@@ -17,19 +18,13 @@ interface DefaultPlanes {
 }
 
 export function useAppMode() {
-  const {
-    guiMode,
-    setGuiMode,
-    selectionRanges,
-    engineCommandManager,
-    selectionRangeTypeMap,
-  } = useStore((s) => ({
-    guiMode: s.guiMode,
-    setGuiMode: s.setGuiMode,
-    selectionRanges: s.selectionRanges,
-    engineCommandManager: s.engineCommandManager,
-    selectionRangeTypeMap: s.selectionRangeTypeMap,
-  }))
+  const { guiMode, setGuiMode, selectionRanges, selectionRangeTypeMap } =
+    useStore((s) => ({
+      guiMode: s.guiMode,
+      setGuiMode: s.setGuiMode,
+      selectionRanges: s.selectionRanges,
+      selectionRangeTypeMap: s.selectionRangeTypeMap,
+    }))
   const [defaultPlanes, setDefaultPlanes] = useState<DefaultPlanes | null>(null)
   useEffect(() => {
     if (
@@ -65,7 +60,7 @@ export function useAppMode() {
         setDefaultPlanesHidden(engineCommandManager, localDefaultPlanes, true)
         // TODO figure out the plane to use based on the sketch
         // maybe it's easier to make a new plane than rely on the defaults
-        await engineCommandManager?.sendSceneCommand({
+        await engineCommandManager.sendSceneCommand({
           type: 'modeling_cmd_req',
           cmd_id: uuidv4(),
           cmd: {
@@ -135,7 +130,7 @@ export function useAppMode() {
   ])
 
   useEffect(() => {
-    const unSub = engineCommandManager?.subscribeTo({
+    const unSub = engineCommandManager.subscribeTo({
       event: 'select_with_point',
       callback: async ({ data }) => {
         if (!data.entity_id) return
@@ -144,18 +139,16 @@ export function useAppMode() {
           // user clicked something else in the scene
           return
         }
-        const sketchModeResponse = await engineCommandManager?.sendSceneCommand(
-          {
-            type: 'modeling_cmd_req',
-            cmd_id: uuidv4(),
-            cmd: {
-              type: 'sketch_mode_enable',
-              plane_id: data.entity_id,
-              ortho: true,
-              animated: !isReducedMotion(),
-            },
-          }
-        )
+        const sketchModeResponse = await engineCommandManager.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'sketch_mode_enable',
+            plane_id: data.entity_id,
+            ortho: true,
+            animated: !isReducedMotion(),
+          },
+        })
         setDefaultPlanesHidden(engineCommandManager, defaultPlanes, true)
         const sketchUuid = uuidv4()
         const proms: any[] = []
@@ -208,7 +201,7 @@ async function createPlane(
   }
 ) {
   const planeId = uuidv4()
-  await engineCommandManager?.sendSceneCommand({
+  await engineCommandManager.sendSceneCommand({
     type: 'modeling_cmd_req',
     cmd: {
       type: 'make_plane',
@@ -220,7 +213,7 @@ async function createPlane(
     },
     cmd_id: planeId,
   })
-  await engineCommandManager?.sendSceneCommand({
+  await engineCommandManager.sendSceneCommand({
     type: 'modeling_cmd_req',
     cmd: {
       type: 'plane_set_color',
@@ -233,12 +226,12 @@ async function createPlane(
 }
 
 function setDefaultPlanesHidden(
-  engineCommandManager: EngineCommandManager | undefined,
+  engineCommandManager: EngineCommandManager,
   defaultPlanes: DefaultPlanes,
   hidden: boolean
 ) {
   Object.values(defaultPlanes).forEach((planeId) => {
-    engineCommandManager?.sendSceneCommand({
+    engineCommandManager.sendSceneCommand({
       type: 'modeling_cmd_req',
       cmd_id: uuidv4(),
       cmd: {

src/hooks/useEngineConnectionSubscriptions.ts

@@ -1,14 +1,9 @@
 import { useEffect } from 'react'
 import { useStore } from 'useStore'
+import { engineCommandManager } from '../lang/std/engineConnection'
 
 export function useEngineConnectionSubscriptions() {
-  const {
-    engineCommandManager,
-    setCursor2,
-    setHighlightRange,
-    highlightRange,
-  } = useStore((s) => ({
-    engineCommandManager: s.engineCommandManager,
+  const { setCursor2, setHighlightRange, highlightRange } = useStore((s) => ({
     setCursor2: s.setCursor2,
     setHighlightRange: s.setHighlightRange,
     highlightRange: s.highlightRange,

src/hooks/useSetupEngineManager.ts

@@ -1,53 +1,90 @@
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, useEffect, useRef } from 'react'
 import { _executor } from '../lang/executor'
 import { useStore } from '../useStore'
-import { EngineCommandManager } from '../lang/std/engineConnection'
+import { engineCommandManager } from '../lang/std/engineConnection'
+import { deferExecution } from 'lib/utils'
 
 export function useSetupEngineManager(
   streamRef: React.RefObject<HTMLDivElement>,
   token?: string
 ) {
   const {
-    setEngineCommandManager,
     setMediaStream,
     setIsStreamReady,
     setStreamDimensions,
     executeCode,
+    streamDimensions,
   } = useStore((s) => ({
-    setEngineCommandManager: s.setEngineCommandManager,
     setMediaStream: s.setMediaStream,
     setIsStreamReady: s.setIsStreamReady,
     setStreamDimensions: s.setStreamDimensions,
     executeCode: s.executeCode,
+    streamDimensions: s.streamDimensions,
   }))
 
   const streamWidth = streamRef?.current?.offsetWidth
   const streamHeight = streamRef?.current?.offsetHeight
 
+  const hasSetNonZeroDimensions = useRef<boolean>(false)
+
+  useLayoutEffect(() => {
+    // Load the engine command manager once with the initial width and height,
+    // then we do not want to reload it.
+    const { width: quadWidth, height: quadHeight } = getDimensions(
+      streamWidth,
+      streamHeight
+    )
+    if (!hasSetNonZeroDimensions.current && quadHeight && quadWidth) {
+      engineCommandManager.start({
+        setMediaStream,
+        setIsStreamReady,
+        width: quadWidth,
+        height: quadHeight,
+        token,
+      })
+      engineCommandManager.waitForReady.then(() => {
+        executeCode()
+      })
+      setStreamDimensions({
+        streamWidth: quadWidth,
+        streamHeight: quadHeight,
+      })
+      hasSetNonZeroDimensions.current = true
+    }
+  }, [streamRef?.current?.offsetWidth, streamRef?.current?.offsetHeight])
+
+  useEffect(() => {
+    const handleResize = deferExecution(() => {
+      const { width, height } = getDimensions(
+        streamRef?.current?.offsetWidth,
+        streamRef?.current?.offsetHeight
+      )
+      if (
+        streamDimensions.streamWidth !== width ||
+        streamDimensions.streamHeight !== height
+      ) {
+        engineCommandManager.handleResize({
+          streamWidth: width,
+          streamHeight: height,
+        })
+        setStreamDimensions({
+          streamWidth: width,
+          streamHeight: height,
+        })
+      }
+    }, 500)
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+}
+
+function getDimensions(streamWidth?: number, streamHeight?: number) {
   const width = streamWidth ? streamWidth : 0
   const quadWidth = Math.round(width / 4) * 4
   const height = streamHeight ? streamHeight : 0
   const quadHeight = Math.round(height / 4) * 4
-
-  useLayoutEffect(() => {
-    setStreamDimensions({
-      streamWidth: quadWidth,
-      streamHeight: quadHeight,
-    })
-    if (!width || !height) return
-    const eng = new EngineCommandManager({
-      setMediaStream,
-      setIsStreamReady,
-      width: quadWidth,
-      height: quadHeight,
-      token,
-    })
-    setEngineCommandManager(eng)
-    eng.waitForReady.then(() => {
-      executeCode()
-    })
-    return () => {
-      eng?.tearDown()
-    }
-  }, [quadWidth, quadHeight])
+  return { width: quadWidth, height: quadHeight }
 }