Spawn Location Configuration [SYNTH-235] (#1415)

Author: PepperLola

fission/src/mirabuf/MirabufSceneObject.ts

@@ -378,7 +378,7 @@ class MirabufSceneObject extends SceneObject implements ContextSupplier {
                 ? defaultFieldSpawnLocation()
                 : (this.robotSpawnPosition(referencePos) ?? defaultFieldSpawnLocation())
 
-        this.setObjectPosition(pos)
+        this.setObjectPosition(pos, referencePos)
     }
 
     private robotSpawnPosition(referencePos: THREE.Vector3): SpawnLocation | undefined {
@@ -390,8 +390,8 @@ class MirabufSceneObject extends SceneObject implements ContextSupplier {
                 ? fieldLocations[this.alliance][this.station]
                 : fieldLocations?.default
 
-        // TODO
-        // Why are we calling this?
+        // Mutates referencePos in place (Box3.getCenter side effect) so setObjectPosition can offset
+        // this spawn location by the field's own transform instead of treating it as a world-space position.
         field?.getXZPositionTransform(referencePos)
 
         return pos

fission/src/systems/physics/PhysicsTypes.ts

@@ -1,5 +1,4 @@
 export type JoltBodyIndexAndSequence = number
 
 export const PAUSE_REF_ASSEMBLY_SPAWNING = "assembly-spawning"
-export const PAUSE_REF_ASSEMBLY_CONFIG = "assembly-config"
 export const PAUSE_REF_ASSEMBLY_MOVE = "assembly-move"

fission/src/systems/preferences/PreferenceTypes.ts

@@ -210,9 +210,11 @@ export type MotorPreferences = {
     maxAcceleration: number
 }
 
-export type Alliance = "red" | "blue"
+export const ALLIANCES = ["red", "blue"] as const
+export type Alliance = (typeof ALLIANCES)[number]
 
-export type Station = 1 | 2 | 3
+export const STATIONS = [1, 2, 3] as const
+export type Station = (typeof STATIONS)[number]
 
 export type ZonePreferencesShared = {
     name: string

fission/src/test/ui/FieldPointEditing.test.ts

@@ -0,0 +1,89 @@
+import { renderHook } from "@testing-library/react"
+import * as THREE from "three"
+import { beforeEach, describe, expect, test, vi } from "vitest"
+import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
+import type GizmoSceneObject from "@/systems/scene/GizmoSceneObject"
+import {
+    type FieldPointMarker,
+    useFieldPointMarkers,
+    useFieldRelativeGizmoPosition,
+} from "@/ui/panels/configuring/assembly-config/interfaces/FieldPointEditing"
+
+let scene: THREE.Scene
+
+vi.mock("@/systems/World", () => ({
+    default: {
+        get sceneRenderer() {
+            return { scene }
+        },
+    },
+}))
+
+function fieldAt(x: number, y: number, z: number): MirabufSceneObject {
+    return {
+        getXZPositionTransform: (vec: THREE.Vector3) => vec.set(x, y, z),
+    } as unknown as MirabufSceneObject
+}
+
+function emptyGizmo(): GizmoSceneObject {
+    return { obj: new THREE.Object3D() } as unknown as GizmoSceneObject
+}
+
+function tracksDisposal(target: THREE.Material | THREE.BufferGeometry): () => boolean {
+    let disposed = false
+    target.addEventListener("dispose", () => {
+        disposed = true
+    })
+    return () => disposed
+}
+
+beforeEach(() => {
+    scene = new THREE.Scene()
+})
+
+describe("useFieldRelativeGizmoPosition", () => {
+    test("places a new gizmo at the field-relative offset", () => {
+        const { result } = renderHook(() => useFieldRelativeGizmoPosition(fieldAt(10, 0, -5), [1, 2, 3]))
+        const gizmo = emptyGizmo()
+
+        result.current.postGizmoCreation(gizmo)
+
+        expect(gizmo.obj.position.toArray()).toEqual([11, 2, -2])
+    })
+
+    test("reads a dragged gizmo back as field-relative coordinates", () => {
+        const { result } = renderHook(() => useFieldRelativeGizmoPosition(fieldAt(10, 0, -5), [1, 2, 3]))
+        const gizmo = emptyGizmo()
+        result.current.postGizmoCreation(gizmo)
+        result.current.gizmoRef.current = gizmo
+
+        expect(result.current.readFieldRelativePosition()).toEqual([1, 2, 3])
+
+        gizmo.obj.position.x += 4
+
+        expect(result.current.readFieldRelativePosition()).toEqual([5, 2, 3])
+    })
+})
+
+describe("useFieldPointMarkers", () => {
+    test("adds a marker per point and removes them on unmount", () => {
+        const points: FieldPointMarker[] = [{ pos: [1, 0, 2], yaw: Math.PI / 2 }, { pos: [-1, 0, 0] }]
+
+        const { unmount } = renderHook(() => useFieldPointMarkers(fieldAt(10, 0, -5), points))
+
+        expect(scene.children).toHaveLength(2)
+
+        const [oriented, plain] = scene.children
+        expect(oriented.position.toArray()).toEqual([11, 0, -3])
+        expect(oriented.rotation.y).toBeCloseTo(Math.PI / 2)
+        expect(oriented.children).toHaveLength(2) // dot + direction cone
+        expect(plain.children).toHaveLength(1) // dot only, no yaw to indicate
+
+        const geometryDisposed = tracksDisposal((oriented.children[0] as THREE.Mesh).geometry)
+
+        unmount()
+
+        expect(scene.children).toHaveLength(0)
+        expect(geometryDisposed()).toBe(true)
+    })
+})

fission/src/ui/panels/configuring/assembly-config/ConfigTypes.ts

@@ -65,6 +65,7 @@ export enum ConfigMode {
     SCORING_ZONES,
     PROTECTED_ZONES,
     CAMERA_POINTS,
+    SPAWN_POSITIONS,
     MOVE,
     SIM,
     BRAIN,
@@ -137,6 +138,11 @@ export const fieldConfigModes = [
         ConfigMode.PROTECTED_ZONES,
         "Define and manage protected zones on the field where robots can not enter."
     ),
+    new ConfigModeSelectionOption(
+        "Robot Spawn Positions",
+        ConfigMode.SPAWN_POSITIONS,
+        "Set where robots spawn for the default position and each alliance station."
+    ),
     new ConfigModeSelectionOption(
         "Camera Positions",
         ConfigMode.CAMERA_POINTS,

fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx

@@ -19,13 +19,14 @@ import AssemblySelection, { type AssemblySelectionOption } from "./configure/Ass
 import ConfigModeSelection from "./configure/ConfigModeSelection"
 import AllianceSelectionInterface from "./interfaces/AllianceSelectionInterface"
 import BrainSelectionInterface from "./interfaces/BrainSelectionInterface"
-import ConfigureGamepiecePickupInterface from "./interfaces/ConfigureGamepieceIntakeInterface.tsx"
-import ConfigureShotTrajectoryInterface from "./interfaces/ConfigureGamepieceEjectorInterface.tsx"
+import ConfigureGamepieceIntakeInterface from "./interfaces/ConfigureGamepieceIntakeInterface.tsx"
+import ConfigureGamepieceEjectorInterface from "./interfaces/ConfigureGamepieceEjectorInterface.tsx"
 import ConfigureJointsInterface from "./interfaces/ConfigureJointsInterface"
 import DrivetrainSelectionInterface from "./interfaces/DrivetrainSelectionInterface"
 import ConfigureInputsInterface from "./interfaces/inputs/ConfigureInputsInterface"
 import SimulationInterface from "./interfaces/SimulationInterface"
 import ConfigureCameraPointsInterface from "./interfaces/ConfigureCameraPointsInterface"
+import ConfigureSpawnPositionsInterface from "./interfaces/ConfigureSpawnPositionsInterface"
 import ConfigureProtectedZonesInterface from "./interfaces/scoring/ConfigureProtectedZonesInterface"
 import ConfigureScoringZonesInterface from "./interfaces/scoring/ConfigureScoringZonesInterface"
 import EventSystem from "@/systems/EventSystem.ts"
@@ -145,13 +146,14 @@ export interface ConfigurePanelCustomProps {
 }
 const subConfigPanels: Record<ConfigMode, ConfigurationSubpanelComponent> = {
     [ConfigMode.JOINTS]: ConfigureJointsInterface,
-    [ConfigMode.EJECTOR]: ConfigureShotTrajectoryInterface,
+    [ConfigMode.EJECTOR]: ConfigureGamepieceEjectorInterface,
+    [ConfigMode.INTAKE]: ConfigureGamepieceIntakeInterface,
     [ConfigMode.CAMERA]: ConfigureCameraInterface,
-    [ConfigMode.INTAKE]: ConfigureGamepiecePickupInterface,
     [ConfigMode.CONTROLS]: ControlsConfigInterface,
     [ConfigMode.SCORING_ZONES]: ConfigureScoringZonesInterface,
     [ConfigMode.PROTECTED_ZONES]: ConfigureProtectedZonesInterface,
     [ConfigMode.CAMERA_POINTS]: ConfigureCameraPointsInterface,
+    [ConfigMode.SPAWN_POSITIONS]: ConfigureSpawnPositionsInterface,
     [ConfigMode.MOVE]: MoveInterface,
     [ConfigMode.SIM]: SimulationInterface,
     [ConfigMode.BRAIN]: BrainSelectionInterface,

fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureCameraPointsInterface.tsx

@@ -1,6 +1,6 @@
 import { Divider, MenuItem, Select, Stack, TextField } from "@mui/material"
-import { useCallback, useEffect, useRef, useState } from "react"
-import * as THREE from "three"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { SelectMenuHeader } from "@/components/SelectMenu.tsx"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import EventSystem from "@/systems/EventSystem.ts"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
@@ -11,7 +11,13 @@ import ScrollView from "@/ui/components/ScrollView"
 import { AddButton, DeleteButton, EditButton } from "@/ui/components/StyledComponents"
 import TransformGizmoControl from "@/ui/components/TransformGizmoControl"
 import type { ConfigurationSubpanelComponent } from "@/panels/configuring/assembly-config/ConfigTypes.ts"
-import { useHoldPhysicsPause } from "@/util/ReactHooks.ts"
+import { useConfigurationSavedListener, useHoldPhysicsPause } from "@/util/ReactHooks.ts"
+import {
+    useDirectionIndicatorMesh,
+    useFieldPointMarkers,
+    useFieldRelativeGizmoPosition,
+    useSyncIndicatorRotation,
+} from "./FieldPointEditing"
 
 const RAD_TO_DEG = 180 / Math.PI
 const DEG_TO_RAD = Math.PI / 180
@@ -44,12 +50,20 @@ interface ListViewProps {
 const ListView: React.FC<ListViewProps> = ({ selectedField, points, onChange, onAdd, onEdit }) => {
     const saveEvent = useCallback(() => persist(points, selectedField), [points, selectedField])
 
-    useEffect(() => EventSystem.listen("ConfigurationSavedEvent", saveEvent), [saveEvent])
-    useEffect(() => {
-        persist(points, selectedField)
-    }, [selectedField, points])
-
+    useConfigurationSavedListener(saveEvent)
     useHoldPhysicsPause()
+    useEffect(() => persist(points, selectedField), [selectedField, points])
+
+    const markerPoints = useMemo(
+        () =>
+            points.map(p => ({
+                pos: p.pos,
+                yaw: p.look.type === "rotation" ? p.look.yaw : undefined,
+                pitch: p.look.type === "rotation" ? p.look.pitch : undefined,
+            })),
+        [points]
+    )
+    useFieldPointMarkers(selectedField, markerPoints, "-z")
 
     return (
         <>
@@ -105,32 +119,35 @@ const EditView: React.FC<EditViewProps> = ({ selectedField, point, onSave }) =>
     const [pitchDeg, setPitchDeg] = useState(
         point.look.type === "rotation" ? Math.round(point.look.pitch * RAD_TO_DEG) : -30
     )
-    const gizmoRef = useRef<GizmoSceneObject | undefined>(undefined)
+    const { gizmoRef, postGizmoCreation, readFieldRelativePosition } = useFieldRelativeGizmoPosition(
+        selectedField,
+        point.pos
+    )
+    // Cameras look down their local -Z axis, so the indicator points -Z instead of the usual +Z "forward".
+    const directionIndicatorMesh = useDirectionIndicatorMesh("-z")
+    useSyncIndicatorRotation(directionIndicatorMesh, yawDeg * DEG_TO_RAD, pitchDeg * DEG_TO_RAD)
 
-    const postGizmoCreation = useCallback(
+    const setupGizmo = useCallback(
         (gizmo: GizmoSceneObject) => {
-            const fieldRef = selectedField.getXZPositionTransform()
-            gizmo.obj.position.set(fieldRef.x + point.pos[0], fieldRef.y + point.pos[1], fieldRef.z + point.pos[2])
+            postGizmoCreation(gizmo)
+            gizmo.obj.add(directionIndicatorMesh)
         },
-        [selectedField, point.pos]
+        [postGizmoCreation, directionIndicatorMesh]
     )
 
+    useEffect(() => {
+        directionIndicatorMesh.visible = lookType === "rotation"
+    }, [directionIndicatorMesh, lookType])
+
     const buildPoint = useCallback((): CameraPoint => {
-        let pos: [number, number, number] = [point.pos[0], point.pos[1], point.pos[2]]
-        if (gizmoRef.current) {
-            gizmoRef.current.obj.updateWorldMatrix(true, false)
-            const worldPos = gizmoRef.current.obj.getWorldPosition(new THREE.Vector3())
-            const fieldRef = selectedField.getXZPositionTransform()
-            pos = [worldPos.x - fieldRef.x, worldPos.y - fieldRef.y, worldPos.z - fieldRef.z]
-        }
         const look: CameraLook =
             lookType === "field"
                 ? { type: "field" }
                 : { type: "rotation", yaw: yawDeg * DEG_TO_RAD, pitch: pitchDeg * DEG_TO_RAD }
-        return { name, pos, look }
-    }, [selectedField, point.pos, lookType, name, yawDeg, pitchDeg])
+        return { name, pos: readFieldRelativePosition(), look }
+    }, [readFieldRelativePosition, lookType, name, yawDeg, pitchDeg])
 
-    useEffect(() => EventSystem.listen("ConfigurationSavedEvent", () => onSave(buildPoint())), [buildPoint, onSave])
+    useConfigurationSavedListener(useCallback(() => onSave(buildPoint()), [buildPoint, onSave]))
     useHoldPhysicsPause()
 
     return (
@@ -182,7 +199,7 @@ const EditView: React.FC<EditViewProps> = ({ selectedField, point, onSave }) =>
                 defaultMode="translate"
                 rotateDisabled={true}
                 scaleDisabled={true}
-                postGizmoCreation={postGizmoCreation}
+                postGizmoCreation={setupGizmo}
             />
         </Stack>
     )
@@ -229,11 +246,14 @@ const ConfigureCameraPointsInterface: ConfigurationSubpanelComponent = ({
     if (editIndex !== undefined && points[editIndex] !== undefined) {
         return (
             <>
-                <Stack direction="row" minHeight="30px" alignItems="center">
-                    <Label size="sm" className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
-                        Configuring Camera Position
-                    </Label>
-                </Stack>
+                <SelectMenuHeader
+                    label={points[editIndex].name}
+                    showBackButton={true}
+                    onBackButton={() => {
+                        EventSystem.dispatch("ConfigurationSavedEvent")
+                        setEditIndex(undefined)
+                    }}
+                />
                 <Divider />
                 <EditView
                     selectedField={selectedAssembly}

fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureGamepieceEjectorInterface.tsx

@@ -6,7 +6,6 @@ import SelectButton from "@/components/SelectButton"
 import type { RigidNodeId } from "@/mirabuf/MirabufParser"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import type { RigidNodeAssociate } from "@/mirabuf/MirabufSceneObject"
-import EventSystem from "@/systems/EventSystem.ts"
 import type GizmoSceneObject from "@/systems/scene/GizmoSceneObject"
 import World from "@/systems/World"
 import StatefulSlider from "@/ui/components/StatefulSlider"
@@ -19,7 +18,7 @@ import {
     convertThreeMatrix4ToArray,
 } from "@/util/TypeConversions"
 import type { ConfigurationSubpanelComponent } from "@/panels/configuring/assembly-config/ConfigTypes.ts"
-import { useHoldPhysicsPause } from "@/util/ReactHooks.ts"
+import { useConfigurationSavedListener, useHoldPhysicsPause } from "@/util/ReactHooks.ts"
 
 // slider constants
 const MIN_VELOCITY = 0.0
@@ -109,9 +108,7 @@ const ConfigureGamepieceEjectorInterface: ConfigurationSubpanelComponent = ({
         })
     }, [registerCleanupFunction, selectedAssembly])
 
-    useEffect(() => {
-        return EventSystem.listen("ConfigurationSavedEvent", saveEvent)
-    }, [saveEvent])
+    useConfigurationSavedListener(saveEvent)
 
     const placeholderMesh = useMemo(() => {
         return new THREE.Mesh(

fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureGamepieceIntakeInterface.tsx

@@ -7,7 +7,6 @@ import EjectableSceneObject from "@/mirabuf/EjectableSceneObject"
 import type { RigidNodeId } from "@/mirabuf/MirabufParser"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import type { RigidNodeAssociate } from "@/mirabuf/MirabufSceneObject"
-import EventSystem from "@/systems/EventSystem.ts"
 import type GizmoSceneObject from "@/systems/scene/GizmoSceneObject"
 import World from "@/systems/World"
 import Checkbox from "@/ui/components/Checkbox"
@@ -21,7 +20,7 @@ import {
     convertThreeMatrix4ToArray,
 } from "@/util/TypeConversions"
 import type { ConfigurationSubpanelComponent } from "@/panels/configuring/assembly-config/ConfigTypes.ts"
-import { useHoldPhysicsPause } from "@/util/ReactHooks.ts"
+import { useConfigurationSavedListener, useHoldPhysicsPause } from "@/util/ReactHooks.ts"
 
 // slider constants
 const MIN_ZONE_SIZE = 0.1
@@ -124,9 +123,7 @@ const ConfigureGamepieceIntakeInterface: ConfigurationSubpanelComponent = ({
         }
     }, [selectedAssembly, selectedNode, zoneSize, showZoneAlways, maxPieces, animationDuration])
 
-    useEffect(() => {
-        return EventSystem.listen("ConfigurationSavedEvent", saveEvent)
-    }, [saveEvent])
+    useConfigurationSavedListener(saveEvent)
 
     useEffect(() => {
         if (!gizmoRef.current) {