morgan/editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor first-person and spawn selection handling

Browse Source
This commit is contained in:
sudhir
2026-04-29 10:35:34 +05:30
parent 4796ed8262
commit e688792c34
8 changed files with 80 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/editor/src/components/editor/custom-camera-controls.tsx
+7 -1
View File
@@ -1,5 +1,11 @@
'use client'
import { type CameraControlEvent, emitter, sceneRegistry, useScene } from '@pascal-app/core'
import {
type CameraControlEvent,
type CameraControlFitSceneEvent,
emitter,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { useViewer, ZONE_LAYER } from '@pascal-app/viewer'
import { CameraControls, CameraControlsImpl } from '@react-three/drei'
import { useThree } from '@react-three/fiber'
packages/editor/src/components/editor/index.tsx
+35 -1
View File
@@ -20,7 +20,6 @@ import {
import { ViewerOverlay } from '../../components/viewer-overlay'
import { ViewerZoneSystem } from '../../components/viewer-zone-system'
import { type PresetsAdapter, PresetsProvider } from '../../contexts/presets-context'
import { useAutoFrame } from '../../hooks/use-auto-frame'
import { type SaveStatus, useAutoSave } from '../../hooks/use-auto-save'
import { useKeyboard } from '../../hooks/use-keyboard'
import {
@@ -952,6 +951,8 @@ export default function Editor({
const [isSceneLoading, setIsSceneLoading] = useState(false)
const [hasLoadedInitialScene, setHasLoadedInitialScene] = useState(false)
const isPreviewMode = useEditor((s) => s.isPreviewMode)
const firstPersonPreviousLevelRef = useRef(useViewer.getState().selection.levelId)
const wasFirstPersonModeRef = useRef(isFirstPersonMode)
const sidebarWidth = useSidebarStore((s) => s.width)
const isSidebarCollapsed = useSidebarStore((s) => s.isCollapsed)
@@ -969,6 +970,39 @@ export default function Editor({
}
}, [projectId])
useEffect(() => {
const wasFirstPersonMode = wasFirstPersonModeRef.current
wasFirstPersonModeRef.current = isFirstPersonMode
if (isFirstPersonMode && !wasFirstPersonMode) {
const viewer = useViewer.getState()
firstPersonPreviousLevelRef.current = viewer.selection.levelId
viewer.setCameraMode('perspective')
viewer.setWallMode('up')
viewer.setWalkthroughMode(true)
viewer.setSelection({ selectedIds: [], zoneId: null })
return
}
if (!(wasFirstPersonMode && !isFirstPersonMode)) return
const viewer = useViewer.getState()
const previousLevelId = firstPersonPreviousLevelRef.current
firstPersonPreviousLevelRef.current = null
viewer.setWalkthroughMode(false)
if (!previousLevelId) return
const previousLevelNode = useScene.getState().nodes[previousLevelId]
if (previousLevelNode?.type === 'level') {
viewer.setSelection({
levelId: previousLevelId,
zoneId: null,
selectedIds: [],
})
}
}, [isFirstPersonMode])
// Load scene on mount (or when onLoad identity changes, e.g. project switch)
useEffect(() => {
let cancelled = false
packages/editor/src/components/tools/item/move-tool.tsx
+5 -2
View File
@@ -88,7 +88,9 @@ function MoveItemContent({ movingNode }: { movingNode: ItemNode }) {
return <>{cursor}</>
}
export const MoveTool: React.FC = () => {
export const MoveTool: React.FC<{
onSpawnMoved?: (nodeId: SpawnNode['id']) => void
}> = ({ onSpawnMoved }) => {
const movingNode = useEditor((state) => state.movingNode)
if (!movingNode) return null
@@ -102,7 +104,8 @@ export const MoveTool: React.FC = () => {
if (movingNode.type === 'wall') return <MoveWallTool node={movingNode as WallNode} />
if (movingNode.type === 'roof' || movingNode.type === 'roof-segment')
return <MoveRoofTool node={movingNode as RoofNode | RoofSegmentNode} />
if (movingNode.type === 'spawn') return <MoveSpawnTool node={movingNode as SpawnNode} />
if (movingNode.type === 'spawn')
return <MoveSpawnTool node={movingNode as SpawnNode} onCommitted={onSpawnMoved} />
if (movingNode.type === 'stair' || movingNode.type === 'stair-segment')
return <MoveRoofTool node={movingNode as StairNode | StairSegmentNode} />
return <MoveItemContent movingNode={movingNode as ItemNode} />
packages/editor/src/components/tools/spawn/move-spawn-tool.tsx
+7 -5
View File
@@ -3,12 +3,11 @@ import '../../../three-types'
import {
emitter,
type GridEvent,
sceneRegistry,
type SpawnNode,
sceneRegistry,
useLiveTransforms,
useScene,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useState } from 'react'
import { Vector3 } from 'three'
import { sfxEmitter } from '../../../lib/sfx-bus'
@@ -35,7 +34,10 @@ function getLevelLocalSpawnPosition(node: SpawnNode, event: GridEvent): [number,
return [roundToHalf(worldVector.x), worldVector.y, roundToHalf(worldVector.z)]
}
export const MoveSpawnTool: React.FC<{ node: SpawnNode }> = ({ node }) => {
export const MoveSpawnTool: React.FC<{
node: SpawnNode
onCommitted?: (nodeId: SpawnNode['id']) => void
}> = ({ node, onCommitted }) => {
const [previewPosition, setPreviewPosition] = useState<[number, number, number]>(node.position)
const exitMoveMode = useCallback(() => {
@@ -66,7 +68,7 @@ export const MoveSpawnTool: React.FC<{ node: SpawnNode }> = ({ node }) => {
committed = true
useScene.temporal.getState().resume()
useScene.getState().updateNode(node.id, { position: nextPosition })
useViewer.getState().setSelection({ selectedIds: [node.id] })
onCommitted?.(node.id)
useLiveTransforms.getState().clear(node.id)
sfxEmitter.emit('sfx:item-place')
exitMoveMode()
@@ -91,7 +93,7 @@ export const MoveSpawnTool: React.FC<{ node: SpawnNode }> = ({ node }) => {
useScene.temporal.getState().resume()
}
}
}, [exitMoveMode, node])
}, [exitMoveMode, node, onCommitted])
return (
<CursorSphere color="#60a5fa" height={2.2} position={previewPosition} showTooltip={false} />
packages/editor/src/components/tools/spawn/spawn-tool.tsx
+11 -7
View File
@@ -4,11 +4,11 @@ import {
emitter,
type GridEvent,
type LevelNode,
sceneRegistry,
SpawnNode,
type SpawnNode as SpawnNodeType,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useRef, useState } from 'react'
import type { Group } from 'three'
import { Vector3 } from 'three'
@@ -56,8 +56,12 @@ function getLevelLocalSpawnPosition(
return [roundToHalf(worldVector.x), worldVector.y, roundToHalf(worldVector.z)]
}
export const SpawnTool: React.FC = () => {
const currentLevelId = useViewer((state) => state.selection.levelId)
type SpawnToolProps = {
currentLevelId: LevelNode['id'] | null
onPlaced?: (spawnId: SpawnNodeType['id']) => void
}
export const SpawnTool: React.FC<SpawnToolProps> = ({ currentLevelId, onPlaced }) => {
const [, setCursorPosition] = useState<[number, number, number] | null>(null)
const cursorRef = useRef<Group>(null)
@@ -87,7 +91,7 @@ export const SpawnTool: React.FC = () => {
if (duplicateSpawnIds.length > 0) {
useScene.getState().deleteNodes(duplicateSpawnIds)
}
useViewer.getState().setSelection({ selectedIds: [existingSpawnId] })
onPlaced?.(existingSpawnId)
} else {
const spawn = SpawnNode.parse({
name: 'Spawn Point',
@@ -95,7 +99,7 @@ export const SpawnTool: React.FC = () => {
rotation: 0,
})
useScene.getState().createNode(spawn, currentLevelId)
useViewer.getState().setSelection({ selectedIds: [spawn.id] })
onPlaced?.(spawn.id)
}
sfxEmitter.emit('sfx:structure-build')
@@ -110,7 +114,7 @@ export const SpawnTool: React.FC = () => {
emitter.off('grid:move', onGridMove)
emitter.off('grid:click', onGridClick)
}
}, [currentLevelId])
}, [currentLevelId, onPlaced])
if (!currentLevelId) return null
packages/editor/src/components/tools/tool-manager.tsx
+12 -3
View File
@@ -44,7 +44,6 @@ const tools: Record<Phase, Partial<Record<Tool, React.FC>>> = {
door: DoorTool,
item: ItemTool,
zone: ZoneTool,
spawn: SpawnTool,
window: WindowTool,
},
furnish: {
@@ -63,8 +62,10 @@ export const ToolManager: React.FC = () => {
const curvingFence = useEditor((state) => state.curvingFence)
const editingHole = useEditor((state) => state.editingHole)
const selectedZoneId = useViewer((state) => state.selection.zoneId)
const selectedLevelId = useViewer((state) => state.selection.levelId)
const buildingId = useViewer((state) => state.selection.buildingId)
const selectedIds = useViewer((state) => state.selection.selectedIds)
const setSelection = useViewer((state) => state.setSelection)
const nodes = useScene((state) => state.nodes)
// Building transform for the local group — all building-relative tools live inside this group
@@ -125,12 +126,15 @@ export const ToolManager: React.FC = () => {
const showBuildTool = mode === 'build' && tool !== null
const BuildToolComponent = showBuildTool ? tools[phase]?.[tool] : null
const handleSpawnSelected = (nodeId: `spawn_${string}`) => {
setSelection({ selectedIds: [nodeId] })
}
return (
<>
{showSiteBoundaryEditor && <SiteBoundaryEditor />}
{/* World-space tools: site boundary and building movement operate in world coordinates */}
{movingNode?.type === 'building' && <MoveTool />}
{movingNode?.type === 'building' && <MoveTool onSpawnMoved={handleSpawnSelected} />}
{/* Building-local group: all other tools are relative to the selected building.
Cursor visuals set positions in building-local space; this group applies the
@@ -154,7 +158,12 @@ export const ToolManager: React.FC = () => {
{movingFenceEndpoint && <MoveFenceEndpointTool target={movingFenceEndpoint} />}
{curvingWall && <CurveWallTool node={curvingWall} />}
{curvingFence && <CurveFenceTool node={curvingFence} />}
{movingNode && movingNode.type !== 'building' && <MoveTool />}
{movingNode && movingNode.type !== 'building' && (
<MoveTool onSpawnMoved={handleSpawnSelected} />
)}
{!movingNode && showBuildTool && tool === 'spawn' && (
<SpawnTool currentLevelId={selectedLevelId} onPlaced={handleSpawnSelected} />
)}
{!movingNode && BuildToolComponent && <BuildToolComponent />}
</group>
</>
packages/editor/src/store/use-editor.tsx
-22
View File
@@ -204,7 +204,6 @@ type EditorState = {
// First-person walkthrough mode (street view)
isFirstPersonMode: boolean
_viewModeBeforeFirstPerson: ViewMode | null
_levelIdBeforeFirstPerson: LevelNode['id'] | null
setFirstPersonMode: (enabled: boolean) => void
// Development-only camera debug flag for inspecting underside geometry
allowUndergroundCamera: boolean
@@ -637,46 +636,25 @@ const useEditor = create<EditorState>()(
setAllowUndergroundCamera: (enabled) => set({ allowUndergroundCamera: enabled }),
isFirstPersonMode: false,
_viewModeBeforeFirstPerson: null as ViewMode | null,
_levelIdBeforeFirstPerson: null as LevelNode['id'] | null,
setFirstPersonMode: (enabled) => {
if (enabled) {
const currentViewMode = get().viewMode
const currentLevelId = useViewer.getState().selection.levelId
useViewer.getState().setCameraMode('perspective')
useViewer.getState().setWallMode('up')
useViewer.getState().setWalkthroughMode(true)
set({
isFirstPersonMode: true,
_viewModeBeforeFirstPerson: currentViewMode,
_levelIdBeforeFirstPerson: currentLevelId,
viewMode: '3d',
isFloorplanOpen: false,
mode: 'select',
tool: null,
catalogCategory: null,
})
useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
} else {
const prevMode = get()._viewModeBeforeFirstPerson
const prevLevelId = get()._levelIdBeforeFirstPerson
useViewer.getState().setWalkthroughMode(false)
set({
isFirstPersonMode: false,
_viewModeBeforeFirstPerson: null,
_levelIdBeforeFirstPerson: null,
...(prevMode ? { viewMode: prevMode, isFloorplanOpen: prevMode !== '3d' } : {}),
})
if (prevLevelId) {
const prevLevelNode = useScene.getState().nodes[prevLevelId]
if (prevLevelNode?.type === 'level') {
useViewer.getState().setSelection({
levelId: prevLevelId,
zoneId: null,
selectedIds: [],
})
}
}
}
},
activeSidebarPanel: DEFAULT_ACTIVE_SIDEBAR_PANEL,