SketchOnFace UI (#1664)

* always enter edit mode

* initial blocking of extra code-mirror updates

* dry out code

* rejig selections

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* clean up

* stream clean up

* update export

* sketch mode can be entered and exited for extrude faces

But has bugs

* startSketchOn working in some cases, editsketch animation working but not orientation of instersection plane etc

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)"

This reverts commit 406fca4c55.

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* remove comment

* add sketch on face e2e test

* tweenCamToNegYAxis should respect reduced motion

* initial sketch on face working with test

* remove temporary toolbar button and xState flow

* un-used vars

* snapshot test tweak

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* type tidy up

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)"

This reverts commit c39b8ebf95.

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)"

This reverts commit fecf6f490a.

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* rename

* sketch on sketch on sketch

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* typo

* startSketchOn Endcaps

end works, start is weird still

* clear selections for entity_ids that are not recognised

* fix sketch on end cap of second order extrustion

* tiny clean up

* fix sketch on close segment/face

* clean up 'lastCodeMirrorSelectionUpdatedFromScene'

* add code mode test for sketchOnExtrudedFace

* make end cap selection more robust

* update js artifacts for extrudes

* update kcl docs

* clean up

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/Stream.tsx

@@ -1,15 +1,14 @@
 import { MouseEventHandler, useEffect, useRef, useState } from 'react'
-import { v4 as uuidv4 } from 'uuid'
 import { useStore } from '../useStore'
 import { getNormalisedCoordinates } from '../lib/utils'
 import Loading from './Loading'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
-import { Models } from '@kittycad/lib'
-import { engineCommandManager } from '../lang/std/engineConnection'
 import { useModelingContext } from 'hooks/useModelingContext'
 import { useKclContext } from 'lang/KclSingleton'
 import { ClientSideScene } from 'clientSideScene/ClientSideSceneComp'
 import { NetworkHealthState, useNetworkStatus } from './NetworkHealthIndicator'
+import { butName } from 'lib/cameraControls'
+import { sendSelectEventToEngine } from 'lib/selections'
 
 export const Stream = ({ className = '' }: { className?: string }) => {
   const [isLoading, setIsLoading] = useState(true)
@@ -60,50 +59,14 @@ export const Stream = ({ className = '' }: { className?: string }) => {
     setClickCoords({ x, y })
   }
 
-  const handleMouseUp: MouseEventHandler<HTMLDivElement> = ({
-    clientX,
-    clientY,
-    ctrlKey,
-  }) => {
+  const handleMouseUp: MouseEventHandler<HTMLDivElement> = (e) => {
     if (!videoRef.current) return
     setButtonDownInStream(undefined)
     if (state.matches('Sketch')) return
     if (state.matches('Sketch no face')) return
-    const { x, y } = getNormalisedCoordinates({
-      clientX,
-      clientY,
-      el: videoRef.current,
-      ...streamDimensions,
-    })
 
-    const newCmdId = uuidv4()
-    const interaction = ctrlKey ? 'pan' : 'rotate'
-
-    const command: Models['WebSocketRequest_type'] = {
-      type: 'modeling_cmd_req',
-      cmd: {
-        type: 'camera_drag_end',
-        interaction,
-        window: { x, y },
-      },
-      cmd_id: newCmdId,
-    }
-
-    if (!didDragInStream) {
-      command.cmd = {
-        type: 'select_with_point',
-        selected_at_window: { x, y },
-        selection_type: 'add',
-      }
-      engineCommandManager.sendSceneCommand(command)
-    } else if (didDragInStream) {
-      command.cmd = {
-        type: 'handle_mouse_drag_end',
-        window: { x, y },
-      }
-      void engineCommandManager.sendSceneCommand(command)
-    } else {
-      engineCommandManager.sendSceneCommand(command)
+    if (!didDragInStream && butName(e).left) {
+      sendSelectEventToEngine(e, videoRef.current, streamDimensions)
     }
 
     setDidDragInStream(false)
@@ -143,6 +106,7 @@ export const Stream = ({ className = '' }: { className?: string }) => {
         className={`w-full cursor-pointer h-full ${isExecuting && 'blur-md'}`}
         disablePictureInPicture
         style={{ transitionDuration: '200ms', transitionProperty: 'filter' }}
+        id="video-stream"
       />
       <ClientSideScene cameraControls={settings.context?.cameraControls} />
       {!isNetworkOkay && !isLoading && (