Run prettier

src/viser/client/src/App.tsx

@@ -68,7 +68,7 @@ export type ViewerContextContents = {
   getRenderRequest: React.MutableRefObject<null | GetRenderRequestMessage>;
 };
 export const ViewerContext = React.createContext<null | ViewerContextContents>(
-  null
+  null,
 );
 
 THREE.ColorManagement.enabled = true;
@@ -86,7 +86,7 @@ function ViewerRoot() {
     return server;
   }
   const servers = new URLSearchParams(window.location.search).getAll(
-    searchParamKey
+    searchParamKey,
   );
   const initialServer =
     servers.length >= 1 ? servers[0] : getDefaultServerFromUrl();
@@ -268,7 +268,7 @@ function BackgroundImage() {
     // Logic ahead relies on perspective camera assumption.
     if (!(camera instanceof THREE.PerspectiveCamera)) {
       console.error(
-        "Camera is not a perspective camera, cannot render background image"
+        "Camera is not a perspective camera, cannot render background image",
       );
       return;
     }
@@ -278,7 +278,7 @@ function BackgroundImage() {
     backgroundMesh.current!.position.set(
       camera.position.x,
       camera.position.y,
-      camera.position.z
+      camera.position.z,
     );
     backgroundMesh.current!.position.addScaledVector(lookdir, 1.0);
     backgroundMesh.current!.quaternion.copy(camera.quaternion);
@@ -288,7 +288,7 @@ function BackgroundImage() {
     backgroundMesh.current!.scale.set(
       camera.getFilmWidth() / f,
       camera.getFilmHeight() / f,
-      1.0
+      1.0,
     );
 
     // Set near/far uniforms.
@@ -312,7 +312,7 @@ function SceneContextSetter() {
   const { sceneRef, cameraRef } = React.useContext(ViewerContext)!;
   sceneRef.current = useThree((state) => state.scene);
   cameraRef.current = useThree(
-    (state) => state.camera as THREE.PerspectiveCamera
+    (state) => state.camera as THREE.PerspectiveCamera,
   );
   return <></>;
 }

src/viser/client/src/CameraControls.tsx

@@ -14,7 +14,7 @@ export function SynchronizedCameraControls() {
 
   const sendCameraThrottled = makeThrottledMessageSender(
     viewer.websocketRef,
-    20
+    20,
   );
 
   type CameraDetails = {
@@ -114,12 +114,12 @@ export function SynchronizedCameraControls() {
     const newPosition = new THREE.Vector3().lerpVectors(
       camera.position,
       targetPosition,
-      alpha
+      alpha,
     );
     const newLookAt = new THREE.Vector3().lerpVectors(
       cameraControls.getTarget(new THREE.Vector3()),
       targetLookAt,
-      alpha
+      alpha,
     );
 
     if (newPosition.distanceTo(targetPosition) < tolerance) {
@@ -219,28 +219,28 @@ export function SynchronizedCameraControls() {
       cameraControls.rotate(
         -0.05 * THREE.MathUtils.DEG2RAD * event?.deltaTime,
         0,
-        true
+        true,
       );
     });
     rightKey.addEventListener("holding", (event) => {
       cameraControls.rotate(
         0.05 * THREE.MathUtils.DEG2RAD * event?.deltaTime,
         0,
-        true
+        true,
       );
     });
     upKey.addEventListener("holding", (event) => {
       cameraControls.rotate(
         0,
         -0.05 * THREE.MathUtils.DEG2RAD * event?.deltaTime,
-        true
+        true,
       );
     });
     downKey.addEventListener("holding", (event) => {
       cameraControls.rotate(
         0,
         0.05 * THREE.MathUtils.DEG2RAD * event?.deltaTime,
-        true
+        true,
       );
     });
 

src/viser/client/src/ControlPanel/ControlPanel.tsx

@@ -34,7 +34,7 @@ export default function ControlPanel(props: {
   // TODO: will result in unnecessary re-renders.
   const viewer = React.useContext(ViewerContext)!;
   const showGenerated = viewer.useGui(
-    (state) => "root" in state.guiIdSetFromContainerId
+    (state) => "root" in state.guiIdSetFromContainerId,
   );
   const [showSettings, { toggle }] = useDisclosure(false);
 

src/viser/client/src/ControlPanel/FloatingPanel.tsx

@@ -53,7 +53,7 @@ export default function FloatingPanel({
   const computePanelOffset = (
     panelPosition: number,
     panelSize: number,
-    parentSize: number
+    parentSize: number,
   ) =>
     Math.abs(panelPosition + panelSize / 2.0) <
     Math.abs(panelPosition - parentSize + panelSize / 2.0)
@@ -73,12 +73,12 @@ export default function FloatingPanel({
 
     newX = Math.min(
       newX,
-      parent.clientWidth - panel.clientWidth - panelBoundaryPad
+      parent.clientWidth - panel.clientWidth - panelBoundaryPad,
     );
     newX = Math.max(newX, panelBoundaryPad);
     newY = Math.min(
       newY,
-      parent.clientHeight - panel.clientHeight - panelBoundaryPad
+      parent.clientHeight - panel.clientHeight - panelBoundaryPad,
     );
     newY = Math.max(newY, panelBoundaryPad);
 
@@ -109,13 +109,13 @@ export default function FloatingPanel({
         unfixedOffset.current.x = computePanelOffset(
           panel.offsetLeft,
           panel.clientWidth,
-          parent.clientWidth
+          parent.clientWidth,
         );
       if (unfixedOffset.current.y === undefined)
         unfixedOffset.current.y = computePanelOffset(
           panel.offsetTop,
           panel.clientHeight,
-          parent.clientHeight
+          parent.clientHeight,
         );
 
       // panel.style.maxHeight = `${(
@@ -145,7 +145,7 @@ export default function FloatingPanel({
   const dragHandler = (
     event:
       | React.TouchEvent<HTMLDivElement>
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.MouseEvent<HTMLDivElement, MouseEvent>,
   ) => {
     const state = dragInfo.current;
     const panel = panelWrapperRef.current;
@@ -182,7 +182,7 @@ export default function FloatingPanel({
       const newY = state.startPosY + deltaY;
       [unfixedOffset.current.x, unfixedOffset.current.y] = setPanelLocation(
         newX,
-        newY
+        newY,
       );
     }
     window.addEventListener(eventNames.move, dragListener);
@@ -194,7 +194,7 @@ export default function FloatingPanel({
         }
         window.removeEventListener(eventNames.move, dragListener);
       },
-      { once: true }
+      { once: true },
     );
   };
 

src/viser/client/src/ControlPanel/Generated.tsx

@@ -46,7 +46,7 @@ export default function GeneratedGuiContainer({
   if (viewer === undefined) viewer = React.useContext(ViewerContext)!;
 
   const guiIdSet = viewer.useGui(
-    (state) => state.guiIdSetFromContainerId[containerId]
+    (state) => state.guiIdSetFromContainerId[containerId],
   );
   const guiConfigFromId = viewer.useGui((state) => state.guiConfigFromId);
 
@@ -505,7 +505,7 @@ function VectorInput(
         precision: number;
         onChange: (value: number[]) => void;
         disabled: boolean;
-      }
+      },
 ) {
   return (
     <Flex justify="space-between" style={{ columnGap: "0.3rem" }}>

src/viser/client/src/ControlPanel/GuiState.tsx

@@ -136,8 +136,8 @@ export function useGuiState(initialServer: string) {
             state.guiValueFromId = {};
             state.guiAttributeFromId = {};
           }),
-      }))
-    )
+      })),
+    ),
   )[0];
 }
 

src/viser/client/src/ControlPanel/SceneTreeTable.tsx

@@ -24,7 +24,7 @@ export default function SceneTreeTable(props: { compact: boolean }) {
 
   const nodeFromName = viewer.useSceneTree((state) => state.nodeFromName);
   const setLabelVisibility = viewer.useSceneTree(
-    (state) => state.setLabelVisibility
+    (state) => state.setLabelVisibility,
   );
   function setVisible(name: string, visible: boolean) {
     const attr = viewer.nodeAttributesFromName.current;
@@ -58,7 +58,7 @@ export default function SceneTreeTable(props: { compact: boolean }) {
   function getSceneTreeSubRows(
     parentName: string,
     parentCount: number,
-    isParentVisible: boolean
+    isParentVisible: boolean,
   ): SceneTreeTableRow[] {
     const node = nodeFromName[parentName];
     if (node === undefined) return [];
@@ -106,7 +106,7 @@ export default function SceneTreeTable(props: { compact: boolean }) {
         subRows: getSceneTreeSubRows(
           childName,
           parentCount + 1,
-          isVisibleEffective
+          isVisibleEffective,
         ),
       };
     });
@@ -156,7 +156,7 @@ export default function SceneTreeTable(props: { compact: boolean }) {
         },
       },
     ],
-    []
+    [],
   );
 
   const [sceneTreeOpened, { open: openSceneTree, close: closeSceneTree }] =

src/viser/client/src/ControlPanel/SidebarPanel.tsx

@@ -46,7 +46,9 @@ export default function SidebarPanel({
           toggleCollapsed();
         }}
       >
-        <Tooltip zIndex={100} label={"Show sidebar"}>{<IconChevronLeft />}</Tooltip>
+        <Tooltip zIndex={100} label={"Show sidebar"}>
+          {<IconChevronLeft />}
+        </Tooltip>
       </ActionIcon>
     </Box>
   );

src/viser/client/src/SceneTree.tsx

@@ -12,7 +12,7 @@ import { Text } from "@mantine/core";
 import { useSceneTreeState } from "./SceneTreeState";
 
 export type MakeObject<T extends THREE.Object3D = THREE.Object3D> = (
-  ref: React.Ref<T>
+  ref: React.Ref<T>,
 ) => React.ReactNode;
 
 /** Scenes will consist of nodes, which form a tree. */
@@ -25,7 +25,7 @@ export class SceneNode<T extends THREE.Object3D = THREE.Object3D> {
   constructor(
     public name: string,
     public makeObject: MakeObject<T>,
-    public cleanup?: () => void
+    public cleanup?: () => void,
   ) {
     this.children = [];
     this.clickable = false;
@@ -41,7 +41,7 @@ function SceneNodeThreeChildren(props: {
 }) {
   const viewer = React.useContext(ViewerContext)!;
   const children = viewer.useSceneTree(
-    (state) => state.nodeFromName[props.name]?.children
+    (state) => state.nodeFromName[props.name]?.children,
   );
 
   // Create a group of children inside of the parent object.
@@ -53,15 +53,15 @@ function SceneNodeThreeChildren(props: {
         })}
       <SceneNodeLabel name={props.name} />
     </group>,
-    props.parent
+    props.parent,
   );
 }
 
 /** Component for updating attributes of a scene node. */
 function SceneNodeLabel(props: { name: string }) {
   const viewer = React.useContext(ViewerContext)!;
   const labelVisible = viewer.useSceneTree(
-    (state) => state.labelVisibleFromName[props.name]
+    (state) => state.labelVisibleFromName[props.name],
   );
   return labelVisible ? (
     <Html>
@@ -84,10 +84,10 @@ function SceneNodeLabel(props: { name: string }) {
 export function SceneNodeThreeObject(props: { name: string }) {
   const viewer = React.useContext(ViewerContext)!;
   const makeObject = viewer.useSceneTree(
-    (state) => state.nodeFromName[props.name]?.makeObject
+    (state) => state.nodeFromName[props.name]?.makeObject,
   );
   const cleanup = viewer.useSceneTree(
-    (state) => state.nodeFromName[props.name]?.cleanup
+    (state) => state.nodeFromName[props.name]?.cleanup,
   );
   const clickable =
     viewer.useSceneTree((state) => state.nodeFromName[props.name]?.clickable) ??
@@ -101,7 +101,7 @@ export function SceneNodeThreeObject(props: { name: string }) {
   // PivotControls.
   const objNode = React.useMemo(
     () => makeObject && makeObject(setRef),
-    [makeObject]
+    [makeObject],
   );
   const children =
     obj === null ? null : (
@@ -146,7 +146,7 @@ export function SceneNodeThreeObject(props: { name: string }) {
   // Clicking logic.
   const sendClicksThrottled = makeThrottledMessageSender(
     viewer.websocketRef,
-    50
+    50,
   );
   const [hovered, setHovered] = React.useState(false);
   useCursor(hovered);

src/viser/client/src/SceneTreeState.tsx

@@ -25,7 +25,7 @@ const makeRoot: MakeObject<THREE.Group> = (ref) => (
   <group
     ref={ref}
     quaternion={new THREE.Quaternion().setFromEuler(
-      new THREE.Euler(-Math.PI / 2.0, 0.0, 0.0)
+      new THREE.Euler(-Math.PI / 2.0, 0.0, 0.0),
     )}
   />
 );
@@ -35,12 +35,12 @@ const rootAxesTemplate: MakeObject<THREE.Group> = (ref) => (
 
 const rootNodeTemplate = new SceneNode(
   "",
-  makeRoot
+  makeRoot,
 ) as SceneNode<THREE.Object3D>;
 
 const rootAxesNode = new SceneNode(
   "/WorldAxes",
-  rootAxesTemplate
+  rootAxesTemplate,
 ) as SceneNode<THREE.Object3D>;
 rootNodeTemplate.children.push("/WorldAxes");
 
@@ -87,7 +87,7 @@ export function useSceneTreeState() {
               function findChildrenRecursive(name: string) {
                 removeNames.push(name);
                 state.nodeFromName[name]!.children.forEach(
-                  findChildrenRecursive
+                  findChildrenRecursive,
                 );
               }
               findChildrenRecursive(name);
@@ -116,8 +116,8 @@ export function useSceneTreeState() {
             set((state) => {
               state.labelVisibleFromName[name] = labelVisibility;
             }),
-        }))
-      )
-    )
+        })),
+      ),
+    ),
   )[0];
 }