diff --git a/index.html b/index.html index 0933fef45..1899d8a98 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ -
+
diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx index 12099bede..cf86432bf 100644 --- a/src/components/AppHeader.tsx +++ b/src/components/AppHeader.tsx @@ -20,7 +20,7 @@ export const AppHeader = ({ return (
diff --git a/src/components/Stream.tsx b/src/components/Stream.tsx index 6557dc15d..77c94f9b3 100644 --- a/src/components/Stream.tsx +++ b/src/components/Stream.tsx @@ -1,8 +1,17 @@ -import { MouseEventHandler, useEffect, useRef } from 'react' +import { + MouseEventHandler, + WheelEventHandler, + useEffect, + useRef, + useState, +} from 'react' import { v4 as uuidv4 } from 'uuid' import { useStore } from '../useStore' +import { throttle } from '../lib/utils' +import { EngineCommand } from '../lang/std/engineConnection' export const Stream = ({ className = '' }) => { + const [zoom, setZoom] = useState(0) const videoRef = useRef(null) const { mediaStream, @@ -31,6 +40,7 @@ export const Stream = ({ className = '' }) => { if (!mediaStream) return videoRef.current.srcObject = mediaStream setFileId(uuidv4()) + setZoom(videoRef.current.getBoundingClientRect().height / 2) }, [mediaStream, engineCommandManager, setFileId]) const handleMouseDown: MouseEventHandler = ({ @@ -63,6 +73,27 @@ export const Stream = ({ className = '' }) => { setIsMouseDownInStream(true) } + // TODO: consolidate this with the same function in App.tsx + const debounceSocketSend = throttle((message) => { + engineCommandManager?.sendSceneCommand(message) + }, 16) + + const handleScroll: WheelEventHandler = (e) => { + e.preventDefault() + debounceSocketSend({ + type: 'modeling_cmd_req', + cmd: { + type: 'camera_drag_move', + interaction: 'zoom', + window: { x: 0, y: zoom + e.deltaY }, + }, + cmd_id: uuidv4(), + file_id: uuidv4(), + }) + + setZoom(zoom + e.deltaY) + } + const handleMouseUp: MouseEventHandler = ({ clientX, clientY, @@ -105,6 +136,7 @@ export const Stream = ({ className = '' }) => { onMouseUp={handleMouseUp} onContextMenu={(e) => e.preventDefault()} onContextMenuCapture={(e) => e.preventDefault()} + onWheelCapture={handleScroll} className="w-full h-full" /> diff --git a/src/index.css b/src/index.css index a351e42d0..6dcf59b25 100644 --- a/src/index.css +++ b/src/index.css @@ -12,6 +12,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @apply text-chalkboard-110 bg-chalkboard-10; + overflow: hidden; scrollbar-width: thin; scrollbar-color: var(--color-chalkboard-20) var(--color-chalkboard-40); } diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index 84057cbf0..c43f66231 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -76,7 +76,7 @@ export const Settings = () => { Close -
+

User Settings

{(window as any).__TAURI__ && (