From a0fe2428a68d61af5f72b3b0b7627c0d4822ed53 Mon Sep 17 00:00:00 2001 From: Andy Sweet Date: Thu, 29 Feb 2024 09:50:02 -0800 Subject: [PATCH] Format --- src/hooks/useUrlHash.ts | 7 ++----- src/scene.tsx | 17 ++++++++++++----- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/hooks/useUrlHash.ts b/src/hooks/useUrlHash.ts index f18bd3a2..8692ba07 100644 --- a/src/hooks/useUrlHash.ts +++ b/src/hooks/useUrlHash.ts @@ -35,7 +35,7 @@ export function setStateInUrlHash(key: string, value: Value) { // would quickly pollute the user's browser history, so replace it directly // instead of just updating the hash (which will append). // window.location.hash = searchParams.toString(); - window.history.replaceState(null, '', `${window.location.pathname}${window.location.search}#${searchParams}`); + window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}#${searchParams}`); // TODO: check if we should also manually fire the hashchange event. // window.dispatchEvent(new HashChangeEvent('hashchange')); } @@ -72,10 +72,7 @@ export function reuseStateInUrlHash( return [value, setValue]; } -export function useStateInUrlHash ( - key: string, - defaultValue: Value, -): [Value, Dispatch>] { +export function useStateInUrlHash(key: string, defaultValue: Value): [Value, Dispatch>] { // TODO: this gets called on every re-render for every piece of tracked // state... // Either parse the initial/default value once (e.g. on mount) and/or diff --git a/src/scene.tsx b/src/scene.tsx index 62cedc83..9d552998 100644 --- a/src/scene.tsx +++ b/src/scene.tsx @@ -35,7 +35,11 @@ export default function Scene(props: SceneProps) { const [playing, setPlaying] = useStateInUrlHash("playing", false); const initialValue = getStateFromUrlHash("selectedPoints", {}); const selectionBox = useSelectionBox(canvas.current, initialValue); - const [selectedPoints, setSelectedPoints] = reuseStateInUrlHash("selectedPoints", selectionBox.selectedPoints, selectionBox.setSelectedPoints); + const [selectedPoints, setSelectedPoints] = reuseStateInUrlHash( + "selectedPoints", + selectionBox.selectedPoints, + selectionBox.setSelectedPoints, + ); // Derived state that does not need to be persisted. const [trackManager, setTrackManager] = useState(); @@ -55,7 +59,7 @@ export default function Scene(props: SceneProps) { // then this could likely be done synchronously. // That way we could add selections to the canvas explicitly and synchronously rather // than relying on pointerup (pointerup could call that instead?). - + // I'm not sure how to capture non-react state in the URL with the current approach, // which relies on React effects to update the URL (and set the state from the URL). // For example, take the three.js camera/controls. @@ -73,7 +77,7 @@ export default function Scene(props: SceneProps) { setStateInUrlHash("cameraPosition", controls.object.position); setStateInUrlHash("cameraTarget", controls.target); }; - canvas.current.controls.addEventListener('change', onControlsChange); + canvas.current.controls.addEventListener("change", onControlsChange); // append renderer canvas const divCurrent = divRef.current; @@ -86,7 +90,7 @@ export default function Scene(props: SceneProps) { return () => { renderer.domElement.remove(); canvas.current?.dispose(); - canvas.current?.controls.removeEventListener('change', onControlsChange); + canvas.current?.controls.removeEventListener("change", onControlsChange); }; }, []); // dependency array must be empty to run only on mount! @@ -236,7 +240,10 @@ export default function Scene(props: SceneProps) { disabled={trackManager === undefined} sdsType="primary" sdsStyle="rounded" - onClick={() => {setSelectedPoints({}); canvas.current?.removeAllTracks()}} + onClick={() => { + setSelectedPoints({}); + canvas.current?.removeAllTracks(); + }} > Clear Tracks