tsc lint

src/App.tsx

@@ -1,10 +1,8 @@
 import { useEffect, useMemo, useRef } from 'react'
 import { useHotKeyListener } from './hooks/useHotKeyListener'
-import { Stream } from './components/Stream'
 import { AppHeader } from './components/AppHeader'
 import { useHotkeys } from 'react-hotkeys-hook'
-import { useLoaderData, useNavigate } from 'react-router-dom'
+import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
-import { getNormalisedCoordinates } from './lib/utils'
 import { type IndexLoaderData } from 'lib/types'
 import { PATHS } from 'lib/paths'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
@@ -23,6 +21,8 @@ import Gizmo from 'components/Gizmo'
 import { CoreDumpManager } from 'lib/coredump'
 import { UnitsMenu } from 'components/UnitsMenu'
 import { CameraProjectionToggle } from 'components/CameraProjectionToggle'
+import EngineStreamContext from 'hooks/useEngineStreamContext'
+import { EngineStream } from 'components/EngineStream'
 
 export function App() {
   const { project, file } = useLoaderData() as IndexLoaderData
@@ -82,7 +82,6 @@ export function App() {
   return (
     <div
       className="relative h-full flex flex-col"
-      onMouseMove={handleMouseMove}
       ref={ref}
     >
         <AppHeader

src/components/EngineStream.tsx

@@ -1,29 +1,23 @@
-import { MouseEventHandler, useEffect, useRef, useState, MutableRefObject, useCallback } from 'react'
+import { MouseEventHandler, useEffect, useRef } from 'react'
 import { useAppState } from 'AppState'
-import { createMachine, createActor, setup } from 'xstate'
-import { createActorContext } from '@xstate/react'
-import { getNormalisedCoordinates } from '../lib/utils'
-import Loading from './Loading'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { useNetworkContext } from 'hooks/useNetworkContext'
 import { NetworkHealthState } from 'hooks/useNetworkStatus'
 import { ClientSideScene } from 'clientSideScene/ClientSideSceneComp'
 import { btnName } from 'lib/cameraControls'
+import { trap } from 'lib/trap'
 import { sendSelectEventToEngine } from 'lib/selections'
-import { kclManager, engineCommandManager, sceneInfra } from 'lib/singletons'
+import { kclManager, engineCommandManager } from 'lib/singletons'
 import {
   EngineCommandManagerEvents,
-  EngineConnectionStateType,
-  DisconnectingType,
 } from 'lang/std/engineConnection'
 import { useRouteLoaderData } from 'react-router-dom'
 import { PATHS } from 'lib/paths'
 import { IndexLoaderData } from 'lib/types'
-import useEngineStreamContext, { EngineStreamState, EngineStreamTransition, EngineStreamContext } from 'hooks/useEngineStreamContext'
+import useEngineStreamContext, { EngineStreamState, EngineStreamTransition } from 'hooks/useEngineStreamContext'
 
 export const EngineStream = () => {
-  const [clickCoords, setClickCoords] = useState<{ x: number; y: number }>()
   const { setAppState } = useAppState()
 
   const { overallState } = useNetworkContext()
@@ -40,7 +34,6 @@ export const EngineStream = () => {
   const {
     state: modelingMachineState,
     send: modelingMachineActorSend,
-    context: modelingMachineContext,
   } = useModelingContext()
 
   const engineStreamActor = useEngineStreamContext.useActorRef()
@@ -150,7 +143,7 @@ export const EngineStream = () => {
   useEffect(() => {
     if (engineCommandManager.engineConnection?.isReady() && file?.path) {
       console.log('execute on file change')
-      kclManager.executeCode(true)
+      void kclManager.executeCode(true).catch(trap)
     }
   }, [file?.path, engineCommandManager.engineConnection])
 
@@ -222,78 +215,15 @@ export const EngineStream = () => {
     overallState === NetworkHealthState.Ok ||
     overallState === NetworkHealthState.Weak
 
-  const isLoading = engineStreamState.value === EngineStreamState.Resuming
-
   const handleMouseUp: MouseEventHandler<HTMLDivElement> = (e) => {
     if (!isNetworkOkay) return
     if (!engineStreamState.context.videoRef.current) return
-
-    modelingMachineActorSend({
-      type: 'Set context',
-      data: {
-        buttonDownInStream: undefined,
-      },
-    })
     if (modelingMachineState.matches('Sketch')) return
     if (modelingMachineState.matches({ idle: 'showPlanes' })) return
 
-    if (!modelingMachineContext.store?.didDragInStream && btnName(e).left) {
+    if (btnName(e).left) {
-      sendSelectEventToEngine(
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        e,
+      sendSelectEventToEngine(e, engineStreamState.context.videoRef.current)
-        engineStreamState.context.videoRef.current,
-        modelingMachineContext.store?.streamDimensions
-      )
-    }
-
-    modelingMachineActorSend({
-      type: 'Set context',
-      data: {
-        didDragInStream: false,
-      },
-    })
-    setClickCoords(undefined)
-  }
-
-  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
-    if (!isNetworkOkay) return
-    if (!engineStreamState.context.videoRef.current) return
-
-    if (modelingMachineState.matches('Sketch')) return
-    if (modelingMachineState.matches('Sketch no face')) return
-
-    const { x, y } = getNormalisedCoordinates({
-      clientX: e.clientX,
-      clientY: e.clientY,
-      el: engineStreamState.context.videoRef.current,
-      ...modelingMachineContext.store?.streamDimensions,
-    })
-
-    modelingMachineActorSend({
-      type: 'Set context',
-      data: {
-        buttonDownInStream: e.button,
-      },
-    })
-
-    setClickCoords({ x, y })
-  }
-
-  const handleMouseMove: MouseEventHandler<HTMLVideoElement> = (e) => {
-    if (!isNetworkOkay) return
-    if (!clickCoords) return
-    if (modelingMachineState.matches('Sketch')) return
-    if (modelingMachineState.matches('Sketch no face')) return
-
-    const delta =
-      ((clickCoords.x - e.clientX) ** 2 + (clickCoords.y - e.clientY) ** 2) **
-      0.5
-    if (delta > 5 && !modelingMachineContext.store?.didDragInStream) {
-      modelingMachineActorSend({
-        type: 'Set context',
-        data: {
-          didDragInStream: true,
-        },
-      })
     }
   }
 
@@ -303,7 +233,6 @@ export const EngineStream = () => {
       id="stream"
       data-testid="stream"
       onMouseUp={handleMouseUp}
-      onMouseDown={handleMouseDown}
       onContextMenu={(e) => e.preventDefault()}
       onContextMenuCapture={(e) => e.preventDefault()}
     >
@@ -311,7 +240,6 @@ export const EngineStream = () => {
         key={engineStreamActor.id + 'video'}
         ref={engineStreamState.context.videoRef}
         controls={false}
-        onMouseMoveCapture={handleMouseMove}
         className="cursor-pointer"
         disablePictureInPicture
         id="video-stream"

src/components/ModelingMachineProvider.tsx

@@ -20,7 +20,6 @@ import {
   modelingMachine,
   modelingMachineDefaultContext,
 } from 'machines/modelingMachine'
-import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import {
   isCursorInSketchCommandRange,
@@ -111,13 +110,8 @@ export const ModelingMachineProvider = ({
     auth,
     settings: {
       context: {
-        app: { theme, enableSSAO },
+        app: { theme },
-        modeling: {
+        modeling: { defaultUnit, highlightEdges, cameraProjection },
-          defaultUnit,
-          cameraProjection,
-          highlightEdges,
-          showScaleGrid,
-        },
       },
     },
   } = useSettingsAuthContext()
@@ -1020,21 +1014,6 @@ export const ModelingMachineProvider = ({
     }
   )
 
-  useSetupEngineManager(
-    streamRef,
-    modelingSend,
-    modelingState.context,
-    {
-      pool: pool,
-      theme: theme.current,
-      highlightEdges: highlightEdges.current,
-      enableSSAO: enableSSAO.current,
-      showScaleGrid: showScaleGrid.current,
-      cameraProjection: cameraProjection.current,
-    },
-    token
-  )
-
   useEffect(() => {
     kclManager.registerExecuteCallback(() => {
       modelingSend({ type: 'Re-execute' })

src/hooks/useEngineStreamContext.ts

@@ -1,24 +1,9 @@
 import { makeDefaultPlanes, modifyGrid } from 'lang/wasm'
-import { MouseEventHandler, useEffect, useRef, useState, MutableRefObject } from 'react'
+import { MutableRefObject } from 'react'
-import { createMachine, createActor, setup, assign } from 'xstate'
+import { setup, assign } from 'xstate'
 import { createActorContext } from '@xstate/react'
-import { getNormalisedCoordinates } from '../lib/utils'
+import { kclManager, engineCommandManager } from 'lib/singletons'
-import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
+import { trap } from 'lib/trap'
-import { useModelingContext } from 'hooks/useModelingContext'
-import { useNetworkContext } from 'hooks/useNetworkContext'
-import { NetworkHealthState } from 'hooks/useNetworkStatus'
-import { ClientSideScene } from 'clientSideScene/ClientSideSceneComp'
-import { btnName } from 'lib/cameraControls'
-import { sendSelectEventToEngine } from 'lib/selections'
-import { kclManager, engineCommandManager, sceneInfra } from 'lib/singletons'
-import {
-  EngineCommandManagerEvents,
-  EngineConnectionStateType,
-  DisconnectingType,
-} from 'lang/std/engineConnection'
-import { useRouteLoaderData } from 'react-router-dom'
-import { PATHS } from 'lib/paths'
-import { IndexLoaderData } from 'lib/types'
 
 export enum EngineStreamState {
   Off = 'off',
@@ -76,10 +61,10 @@ const engineStreamMachine = setup({
         canvas.style.display = "none"
 
         video.srcObject = mediaStream
-        video.play().catch((e) => {
+        void video.play().catch((e) => {
             console.warn('Video playing was prevented', e, video)
         }).then(() => {
-          kclManager.executeCode(true)
+          kclManager.executeCode(true).catch(trap)
         })
       },
       [EngineStreamTransition.Pause]({ context }) {

src/lang/std/engineConnection.ts

@@ -1177,8 +1177,8 @@ class EngineConnection extends EventTarget {
     })
   }
 
-  reattachMediaStream() {
+  async reattachMediaStream() {
-    this.pc
+    return this.pc
       ?.createOffer({ iceRestart: true })
       .then((offer: RTCSessionDescriptionInit) => {
         this.state = {