Fix zoom to not jump anymore (#272)

* Remove scroll handling, honor zoom on drag + ctrl

* Add back ability to zoom with mouse wheel, but properly

* Add TODO for 'any' removal

* Update kittycad lib to remove 'any'

package.json

@@ -8,7 +8,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.13",
-    "@kittycad/lib": "^0.0.28",
+    "@kittycad/lib": "^0.0.29",
     "@react-hook/resize-observer": "^1.2.6",
     "@tauri-apps/api": "^1.3.0",
     "@testing-library/jest-dom": "^5.14.1",

src/App.tsx

@@ -380,8 +380,11 @@ export function App() {
     clientX,
     clientY,
     ctrlKey,
+    shiftKey,
     currentTarget,
+    nativeEvent,
   }) => {
+    nativeEvent.preventDefault()
     if (isMouseDownInStream) {
       setDidDragInStream(true)
     }
@@ -393,7 +396,7 @@ export function App() {
       ...streamDimensions,
     })
 
-    const interaction = ctrlKey ? 'pan' : 'rotate'
+    const interaction = ctrlKey ? 'zoom' : shiftKey ? 'pan' : 'rotate'
 
     const newCmdId = uuidv4()
     setCmdId(newCmdId)
@@ -432,7 +435,7 @@ export function App() {
 
   return (
     <div
-      className="h-screen overflow-hidden relative flex flex-col"
+      className="h-screen overflow-hidden relative flex flex-col cursor-pointer select-none"
       onMouseMove={handleMouseMove}
       ref={streamRef}
     >

src/components/Stream.tsx

@@ -7,14 +7,11 @@ import {
 } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import { useStore } from '../useStore'
-import { throttle } from '../lib/utils'
-import { EngineCommand } from '../lang/std/engineConnection'
 import { getNormalisedCoordinates } from '../lib/utils'
 import Loading from './Loading'
 
 export const Stream = ({ className = '' }) => {
   const [isLoading, setIsLoading] = useState(true)
-  const [zoom, setZoom] = useState(0)
   const videoRef = useRef<HTMLVideoElement>(null)
   const {
     mediaStream,
@@ -45,7 +42,6 @@ export const Stream = ({ className = '' }) => {
     if (!videoRef.current) return
     if (!mediaStream) return
     videoRef.current.srcObject = mediaStream
-    setZoom(videoRef.current.getBoundingClientRect().height / 2)
   }, [mediaStream, engineCommandManager])
 
   const handleMouseDown: MouseEventHandler<HTMLVideoElement> = ({
@@ -80,24 +76,16 @@ export const Stream = ({ className = '' }) => {
     setIsMouseDownInStream(true)
   }
 
-  // TODO: consolidate this with the same function in App.tsx
-  const debounceSocketSend = throttle<EngineCommand>((message) => {
-    engineCommandManager?.sendSceneCommand(message)
-  }, 16)
-
   const handleScroll: WheelEventHandler<HTMLVideoElement> = (e) => {
     e.preventDefault()
-    debounceSocketSend({
+    engineCommandManager?.sendSceneCommand({
       type: 'modeling_cmd_req',
       cmd: {
-        type: 'camera_drag_move',
+        type: 'default_camera_zoom',
-        interaction: 'zoom',
+        magnitude: e.deltaY * 0.4,
-        window: { x: 0, y: zoom + e.deltaY },
       },
       cmd_id: uuidv4(),
     })
-
-    setZoom(zoom + e.deltaY)
   }
 
   const handleMouseUp: MouseEventHandler<HTMLVideoElement> = ({
@@ -152,7 +140,7 @@ export const Stream = ({ className = '' }) => {
         onMouseUp={handleMouseUp}
         onContextMenu={(e) => e.preventDefault()}
         onContextMenuCapture={(e) => e.preventDefault()}
-        onWheelCapture={handleScroll}
+        onWheel={handleScroll}
         onPlay={() => setIsLoading(false)}
         className="w-full h-full"
       />

yarn.lock

@@ -1747,10 +1747,10 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
-"@kittycad/lib@^0.0.28":
+"@kittycad/lib@^0.0.29":
-  version "0.0.28"
+  version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.28.tgz#a40d67544bf2eb5571855114a75d8cb0eb9ec189"
+  resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.29.tgz#e0c0751fc124dd0136f9731c6bb962cd8b8202f6"
-  integrity sha512-T5Lnu7qoB3bc4OMD3s4khPas+VkNKrMllpkvCzKrx7XXrelDCZOd21xALwEzbzOPMUdtp2SBd6nuJKMH/N2aOA==
+  integrity sha512-YpyXyOfoUBItJk71AP8M9i4QGvNnNHiSO35dMDx2EsDKqEGwTLDHOBniwPEq+iJqrGcZf2CfBSOvAOnZCH790A==
   dependencies:
     node-fetch "3.3.2"
     openapi-types "^12.0.0"