prettier

viser/client/src/App.tsx

@@ -48,7 +48,7 @@ type ViewerContextContents = {
   }>;
 };
 export const ViewerContext = React.createContext<null | ViewerContextContents>(
-  null
+  null,
 );
 
 THREE.ColorManagement.enabled = true;
@@ -65,7 +65,7 @@ function SingleViewer() {
     return server;
   }
   const servers = new URLSearchParams(window.location.search).getAll(
-    searchParamKey
+    searchParamKey,
   );
   const initialServer =
     servers.length >= 1 ? servers[0] : getDefaultServerFromUrl();
@@ -87,7 +87,7 @@ function SingleViewer() {
   // viewer context changes.
   const memoizedWebsocketInterface = React.useMemo(
     () => <WebsocketInterface />,
-    []
+    [],
   );
 
   const control_layout = viewer.useGui((state) => state.theme.control_layout);
@@ -177,7 +177,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 <></>;
 }

viser/client/src/CameraControls.tsx

@@ -14,7 +14,7 @@ export function SynchronizedCameraControls() {
 
   const sendCameraThrottled = makeThrottledMessageSender(
     viewer.websocketRef,
-    20
+    20,
   );
 
   // Callback for sending cameras.
@@ -122,28 +122,28 @@ export function SynchronizedCameraControls() {
       cameraControls.rotate(
         -0.1 * THREE.MathUtils.DEG2RAD * event?.deltaTime,
         0,
-        true
+        true,
       );
     });
     rightKey.addEventListener("holding", (event) => {
       cameraControls.rotate(
         0.1 * 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,
       );
     });
 

viser/client/src/ControlPanel/FloatingPanel.tsx

@@ -78,7 +78,7 @@ FloatingPanel.Handle = function FloatingPanelHandle({
   const computePanelOffset = (
     panelPosition: number,
     panelSize: number,
-    parentSize: number
+    parentSize: number,
   ) =>
     Math.abs(panelPosition + panelSize / 2.0) <
     Math.abs(panelPosition - parentSize + panelSize / 2.0)
@@ -98,12 +98,12 @@ FloatingPanel.Handle = function FloatingPanelHandle({
 
     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);
 
@@ -134,13 +134,13 @@ FloatingPanel.Handle = function FloatingPanelHandle({
         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 = `${(
@@ -164,7 +164,7 @@ FloatingPanel.Handle = function FloatingPanelHandle({
   const dragHandler = (
     event:
       | React.TouchEvent<HTMLDivElement>
-      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.MouseEvent<HTMLDivElement, MouseEvent>,
   ) => {
     const state = dragInfo.current;
     const panel = panelWrapperRef.current;
@@ -201,7 +201,7 @@ FloatingPanel.Handle = function FloatingPanelHandle({
       const newY = state.startPosY + deltaY;
       [unfixedOffset.current.x, unfixedOffset.current.y] = setPanelLocation(
         newX,
-        newY
+        newY,
       );
     }
     window.addEventListener(eventNames.move, dragListener);
@@ -213,7 +213,7 @@ FloatingPanel.Handle = function FloatingPanelHandle({
         }
         window.removeEventListener(eventNames.move, dragListener);
       },
-      { once: true }
+      { once: true },
     );
   };
 

viser/client/src/ControlPanel/Generated.tsx

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

viser/client/src/ControlPanel/GuiState.tsx

@@ -55,7 +55,7 @@ const cleanGuiState: GuiState = {
   theme: {
     type: "ThemeConfigurationMessage",
     titlebar_content: null,
-    control_layout: 'floating',
+    control_layout: "floating",
     dark_mode: false,
   },
   label: "",
@@ -125,7 +125,7 @@ export function useGuiState(initialServer: string) {
             if (guiIdSet === undefined) {
               console.log(
                 "Tried to remove but could not find container ID",
-                containerId
+                containerId,
               );
               return;
             }
@@ -139,8 +139,8 @@ export function useGuiState(initialServer: string) {
             state.guiValueFromId = {};
             state.guiAttributeFromId = {};
           }),
-      }))
-    )
+      })),
+    ),
   )[0];
 }
 

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 }] =

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;
@@ -65,7 +65,7 @@ function SceneNodeThreeChildren(props: {
     }
     const unsubscribe = viewer.useSceneTree.subscribe(
       (state) => state.nodeFromName[props.name],
-      updateChildren
+      updateChildren,
     );
     updateChildren();
 
@@ -82,15 +82,15 @@ function SceneNodeThreeChildren(props: {
         return <SceneNodeThreeObject key={child_id} name={child_id} />;
       })}
     </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>
@@ -113,10 +113,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) ??
@@ -126,14 +126,14 @@ export function SceneNodeThreeObject(props: { name: string }) {
   // Create object + children.
   const objNode = React.useMemo(
     () => makeObject && makeObject(setRef),
-    [setRef, makeObject]
+    [setRef, makeObject],
   );
   const children = React.useMemo(
     () =>
       obj === null ? null : (
         <SceneNodeThreeChildren name={props.name} parent={obj} />
       ),
-    [props.name, obj]
+    [props.name, obj],
   );
 
   // Update attributes on a per-frame basis. Currently does redundant work,
@@ -174,7 +174,7 @@ export function SceneNodeThreeObject(props: { name: string }) {
   // Clicking logic.
   const sendClicksThrottled = makeThrottledMessageSender(
     viewer.websocketRef,
-    50
+    50,
   );
   const [hovered, setHovered] = React.useState(false);
   useCursor(hovered);

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];
 }

viser/client/src/SearchParamsUtils.tsx

@@ -14,7 +14,7 @@ function setServerParams(serverParams: string[]) {
   if (
     serverParams.length === 1 &&
     window.location.host.includes(
-      serverParams[0].replace("ws://", "").replace("/", "")
+      serverParams[0].replace("ws://", "").replace("/", ""),
     )
   )
     serverParams = [];
@@ -26,6 +26,6 @@ function setServerParams(serverParams: string[]) {
     // it. We're going to just not escape the string. :)
     serverParams.length === 0
       ? window.location.href.split("?")[0]
-      : `?${serverParams.map((s) => `${searchParamKey}=${s}`).join("&")}`
+      : `?${serverParams.map((s) => `${searchParamKey}=${s}`).join("&")}`,
   );
 }