From 459ae7d8551161100ee2519f886cfb482d6b786e Mon Sep 17 00:00:00 2001 From: Alex Shortt Date: Mon, 30 Jan 2023 23:44:03 -0800 Subject: [PATCH 1/2] Misc Fixes (#161) * look at text input when you select it, fix touchfps camera hook deps * add disable draggable prop for tool modifier * kill the bottom up swipe for tools, constrain tool edge swipe to top half of screen * fix chrome mobile input locking input --- src/ideas/modifiers/Tool/index.tsx | 9 +++++++- .../modifiers/Tool/modifiers/OnScreen.tsx | 9 ++++++-- src/ideas/ui/TextInput/index.tsx | 17 ++++++++++++-- .../components/controls/TouchFPSCamera.tsx | 11 ++++----- src/layers/Toolbelt/ideas/ToolSwitcher.tsx | 23 ++++--------------- src/logic/dom.ts | 2 +- 6 files changed, 40 insertions(+), 31 deletions(-) diff --git a/src/ideas/modifiers/Tool/index.tsx b/src/ideas/modifiers/Tool/index.tsx index 4e8490c8..d667a1b6 100644 --- a/src/ideas/modifiers/Tool/index.tsx +++ b/src/ideas/modifiers/Tool/index.tsx @@ -16,6 +16,7 @@ type ToolProps = { range?: number; orderIndex?: number; bobStrength?: number; + disableDraggable?: boolean; onSwitch?: (enabled: boolean) => void; }; @@ -38,6 +39,7 @@ export function Tool(props: ToolProps) { range, bobStrength, orderIndex, + disableDraggable = false, onSwitch, } = props; @@ -74,7 +76,12 @@ export function Tool(props: ToolProps) { range={range} bobStrength={bobStrength} > - + {visible && children} diff --git a/src/ideas/modifiers/Tool/modifiers/OnScreen.tsx b/src/ideas/modifiers/Tool/modifiers/OnScreen.tsx index f0c73d0b..a70050c7 100644 --- a/src/ideas/modifiers/Tool/modifiers/OnScreen.tsx +++ b/src/ideas/modifiers/Tool/modifiers/OnScreen.tsx @@ -10,11 +10,12 @@ type OnScreenProps = { distance: number; name: string; pos: [number, number]; + disableDraggable: boolean; children: ReactNode | ReactNode[]; }; export default function OnScreen(props: OnScreenProps) { - const { distance, name, pos, children } = props; + const { distance, name, pos, disableDraggable, children } = props; const toolbelt = useToolbelt(); @@ -80,7 +81,11 @@ export default function OnScreen(props: OnScreenProps) { return ( - + {children} diff --git a/src/ideas/ui/TextInput/index.tsx b/src/ideas/ui/TextInput/index.tsx index 1e9bf267..4f3b51da 100644 --- a/src/ideas/ui/TextInput/index.tsx +++ b/src/ideas/ui/TextInput/index.tsx @@ -6,7 +6,7 @@ import { animated, useSpring } from "@react-spring/three"; import { useTextInput } from "../../../logic/input"; import { useKeypress, useShiftHold } from "../../../logic/keys"; import { usePlayer } from "../../../layers/Player"; -import { Mesh, MeshStandardMaterial, Raycaster } from "three"; +import { Group, Mesh, MeshStandardMaterial, Raycaster, Vector3 } from "three"; import { syncOnChange } from "./logic/sync"; import { getClickedCaret, @@ -19,6 +19,7 @@ import { useDragSelect } from "./logic/drag"; import { useLimitedFrame } from "../../../logic/limiter"; import { cache } from "../../../logic/cache"; import { HitBox } from "../../primitives/HitBox"; +import { useEnvironment } from "../../../layers/Environment"; type TextProps = { value?: string; @@ -51,9 +52,12 @@ export function TextInput(props: TextProps) { } = props; const clock = useThree((st) => st.clock); + const camera = useThree((st) => st.camera); const player = usePlayer(); + const { device } = useEnvironment(); const RAYCASTER = passedRaycaster || player.raycaster; + const group = useRef(null); const textRef = useRef(); const caret = useRef(null); const highlight = useRef(null); @@ -67,18 +71,27 @@ export function TextInput(props: TextProps) { const { input, focused, focusInput } = useTextInput(type, val, setVal); + // focus callback useEffect(() => { if (!onFocus) return; input.addEventListener("focus", onFocus); return () => input.removeEventListener("focus", onFocus); }, [input, onFocus]); + // blur callback useEffect(() => { if (!onBlur) return; input.addEventListener("blur", onBlur); return () => input.removeEventListener("blur", onBlur); }, [input, onBlur]); + // look at input when focused, only on mobile + useEffect(() => { + if (!group.current || !focused || !device.mobile) return; + const worldpos = group.current.getWorldPosition(new Vector3()); + camera.lookAt(worldpos); + }, [focused, camera, device]); + const { color } = useSpring({ color: focused ? "#000" : "#828282" }); const highlightMat = cache.useResource( @@ -321,7 +334,7 @@ export function TextInput(props: TextProps) { }); return ( - + { const touch = getCurrentTouch(touchStartPos.current.id, ev.touches); - if (!touch) { - return; - } + if (!touch) return; const { clientX, clientY } = touch; const newEuler = getNewEuler(clientX, clientY); camera.quaternion.setFromEuler(newEuler); }; + const onTouchEnd = (ev: TouchEvent) => { const touch = getCurrentTouch(touchStartPos.current.id, ev.changedTouches); - if (!touch) { - return; - } + if (!touch) return; const { clientX, clientY } = touch; originEuler.current = getNewEuler(clientX, clientY); @@ -89,7 +86,7 @@ export default function TouchFPSCamera() { document.removeEventListener("touchmove", onTouchMove); document.removeEventListener("touchend", onTouchEnd); }; - }, []); + }, [onTouchEnd, onTouchMove, onTouchStart]); return null; } diff --git a/src/layers/Toolbelt/ideas/ToolSwitcher.tsx b/src/layers/Toolbelt/ideas/ToolSwitcher.tsx index 9af6c239..3f387491 100644 --- a/src/layers/Toolbelt/ideas/ToolSwitcher.tsx +++ b/src/layers/Toolbelt/ideas/ToolSwitcher.tsx @@ -8,13 +8,10 @@ export default function ToolSwitcher() { const { size, gl } = useThree(); const registered = useRef(false); - const type = useRef<"side" | "bottom">("side"); const DETECT_RANGE_X = screen.width * 0.04; const DRAG_RANGE_X = screen.width * 0.08; - - const DETECT_RANGE_Y = screen.height * 0.085; - const DRAG_RANGE_Y = screen.height * 0.17; + const DETECT_RANGE_Y = screen.height * 0.5; const valid = useRef(false); useDrag( @@ -22,17 +19,12 @@ export default function ToolSwitcher() { onStart: ({ e, touch }) => { valid.current = false; - const inBottomEdge = size.height - touch.clientY < DETECT_RANGE_Y; const inSideEdge = Math.min(touch.clientX, size.width - touch.clientX) < DETECT_RANGE_X; + const inTopThird = touch.clientY < DETECT_RANGE_Y; - // ignore corners or no match - if (inBottomEdge === inSideEdge) return; - // don't trigger bottom swipe if there's an active tool - if (inBottomEdge && toolbelt.activeIndex !== undefined) return; - - if (inBottomEdge) type.current = "bottom"; - if (inSideEdge) type.current = "side"; + // ignore if not in top third or side edge + if (!inSideEdge || !inTopThird) return; valid.current = true; registered.current = false; @@ -43,12 +35,7 @@ export default function ToolSwitcher() { onMove: ({ delta }) => { if (!valid.current || registered.current) return; - if (type.current == "bottom" && delta.y < -DRAG_RANGE_Y) { - registered.current = true; - toolbelt.show(); - } - - if (type.current == "side" && Math.abs(delta.x) > DRAG_RANGE_X) { + if (Math.abs(delta.x) > DRAG_RANGE_X) { registered.current = true; if (delta.x > 0) { toolbelt.next(); diff --git a/src/logic/dom.ts b/src/logic/dom.ts index 23884b0d..a605aeda 100644 --- a/src/logic/dom.ts +++ b/src/logic/dom.ts @@ -1,3 +1,3 @@ // check whether the user is currently typing export const isTyping = (): boolean => - document?.activeElement?.tagName === "INPUT"; + document?.activeElement?.tagName === "INPUT" && document?.hasFocus(); From bb0a94d62c9325e00b25a4b6a2587d2703578e35 Mon Sep 17 00:00:00 2001 From: Alex Shortt Date: Mon, 30 Jan 2023 23:47:17 -0800 Subject: [PATCH 2/2] v2.10.4 --- package.json | 2 +- src/layers/Environment/ui/PauseMenu/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ba213c6c..bf070707 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "spacesvr", - "version": "2.10.3", + "version": "2.10.4", "private": true, "description": "A standardized reality for future of the 3D Web", "keywords": [ diff --git a/src/layers/Environment/ui/PauseMenu/index.tsx b/src/layers/Environment/ui/PauseMenu/index.tsx index 5627e838..a3f03568 100644 --- a/src/layers/Environment/ui/PauseMenu/index.tsx +++ b/src/layers/Environment/ui/PauseMenu/index.tsx @@ -40,7 +40,7 @@ export default function PauseMenu(props: PauseMenuProps) { const PAUSE_ITEMS: MenuItem[] = [ ...pauseMenuItems, { - text: "v2.10.3", + text: "v2.10.4", link: "https://www.npmjs.com/package/spacesvr", }, ...menuItems,