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

Merge pull request #383 from pascalorg/fix/relative-move-grab-offset

Browse Source 
Fix relative move and fresh placement commits
This commit is contained in:
Aymeric Rabot
2026-06-08 02:16:49 -04:00
committed by GitHub
parent b2e7a090d6 73cd6e8614
commit 14acf50491
85 changed files with 5009 additions and 1495 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/registry/types.ts
+2 -2
View File
@@ -1286,8 +1286,8 @@ export type FloorPlacedConfig = {
* serves both the static candidate and the moving node.
* - `aabb` — an already-resolved XZ bounding box, for kinds whose plan
* shape isn't a centred rectangle (stair: a segment chain or annular
* sector). Static candidates only — these kinds move by their origin, so
* the box's relocation path never needs them.
* sector). The moving-anchor bridge can relocate these by patching the
* proposed plan position and resolving the AABB again.
*
* `nodes` is supplied only when a kind needs siblings / children to resolve
* its footprint (a straight stair walks its `stair-segment` children); box
packages/core/src/services/alignment-anchors.test.ts
+66
View File
@@ -13,6 +13,7 @@ import {
collectAlignmentAnchors,
footprintAABB,
footprintAABBFrom,
movingAlignmentAnchors,
movingFootprintAnchors,
polygonAnchors,
wallSegmentAnchors,
@@ -196,6 +197,71 @@ describe('movingFootprintAnchors', () => {
})
})
describe('movingAlignmentAnchors', () => {
beforeEach(() => nodeRegistry._reset())
test('relocates a straight stair by its segment-chain footprint', () => {
registerNode(stairDef())
const nodes = {
st: node({
id: 'st',
type: 'stair',
position: [0, 0, 0],
rotation: 0,
stairType: 'straight',
width: 1,
children: ['seg'],
}),
seg: node({
id: 'seg',
type: 'stair-segment',
parentId: 'st',
width: 1,
length: 3,
height: 2.5,
attachmentSide: 'front',
}),
}
const anchors = movingAlignmentAnchors(nodes.st, nodes, 10, 20, 0)
expect(anchors).toHaveLength(4)
expect(new Set(anchors.map((a) => a.x))).toEqual(new Set([9.5, 10.5]))
expect(new Set(anchors.map((a) => a.z))).toEqual(new Set([20, 23]))
})
test('rotation override drives a moving straight stair footprint', () => {
registerNode(stairDef())
const nodes = {
st: node({
id: 'st',
type: 'stair',
position: [0, 0, 0],
rotation: 0,
stairType: 'straight',
width: 1,
children: ['seg'],
}),
seg: node({
id: 'seg',
type: 'stair-segment',
parentId: 'st',
width: 1,
length: 3,
height: 2.5,
attachmentSide: 'front',
}),
}
const anchors = movingAlignmentAnchors(nodes.st, nodes, 10, 20, Math.PI / 2)
const xs = anchors.map((a) => a.x)
const zs = anchors.map((a) => a.z)
expect(Math.min(...xs)).toBeCloseTo(10, 10)
expect(Math.max(...xs)).toBeCloseTo(13, 10)
expect(Math.min(...zs)).toBeCloseTo(19.5, 10)
expect(Math.max(...zs)).toBeCloseTo(20.5, 10)
})
})
describe('wallSegmentAnchors', () => {
test('returns both endpoints as corners and the chord midpoint as center', () => {
const anchors = wallSegmentAnchors('w', [0, 0], [4, 2])
packages/core/src/services/alignment-anchors.ts
+55
View File
@@ -152,6 +152,61 @@ export function movingFootprintAnchors(
return bboxCornerAnchors(node.id, aabb.minX, aabb.minZ, aabb.maxX, aabb.maxZ)
}
function relocatedPlanNode(node: AnyNode, x: number, z: number, rotationY?: number): AnyNode {
const position = (node as { position?: unknown }).position
const y = Array.isArray(position) && typeof position[1] === 'number' ? position[1] : 0
const relocated: Record<string, unknown> = {
...(node as Record<string, unknown>),
position: [x, y, z],
}
if (rotationY !== undefined && 'rotation' in node) {
const rotation = (node as { rotation?: unknown }).rotation
relocated.rotation = Array.isArray(rotation)
? [rotation[0] ?? 0, rotationY, rotation[2] ?? 0]
: rotationY
}
return relocated as AnyNode
}
/**
* Corner anchors for a moving node relocated to the proposed plan position.
* Covers both the centred-box path (`floorPlaced.footprint` /
* `alignmentFootprint: box`) and explicit AABB footprints such as stairs,
* whose occupied plan bounds depend on children or curved/spiral geometry.
*/
export function movingAlignmentAnchors(
node: AnyNode,
nodes: Readonly<Record<string, AnyNode>> | undefined,
x: number,
z: number,
rotationY?: number,
): AlignmentAnchor[] {
const box = footprintAABBAt(node, x, z, rotationY)
if (box) return bboxCornerAnchors(node.id, box.minX, box.minZ, box.maxX, box.maxZ)
const alignment = nodeRegistry
.get(node.type)
?.capabilities?.alignmentFootprint?.(relocatedPlanNode(node, x, z, rotationY), nodes)
if (alignment?.shape === 'box') {
const aabb = footprintAABBFrom([x, 0, z], alignment.dimensions, alignment.rotation[1] ?? 0)
return bboxCornerAnchors(node.id, aabb.minX, aabb.minZ, aabb.maxX, aabb.maxZ)
}
if (alignment?.shape === 'aabb') {
return bboxCornerAnchors(
node.id,
alignment.minX,
alignment.minZ,
alignment.maxX,
alignment.maxZ,
)
}
return []
}
/**
* Alignment anchors for a wall segment: the two centerline endpoints + chord
* midpoint, plus — when `thickness` is known — four **face** corner anchors,
packages/core/src/services/index.ts
+1
View File
@@ -15,6 +15,7 @@ export {
footprintAABB,
footprintAABBAt,
footprintAABBFrom,
movingAlignmentAnchors,
movingFootprintAnchors,
nodeAlignmentAnchors,
polygonAnchors,
packages/core/src/store/use-scene-elevator-migration.test.ts
+123
View File
@@ -0,0 +1,123 @@
import { beforeEach, describe, expect, test } from 'bun:test'
import type { AnyNode } from '../schema'
import useScene from './use-scene'
describe('scene elevator migrations', () => {
beforeEach(() => {
useScene.setState({
nodes: {},
rootNodeIds: [],
dirtyNodes: new Set(),
collections: {},
} as never)
useScene.temporal.getState().clear()
})
test('normalizes legacy level-parented elevators into building-scoped nodes', () => {
useScene.getState().setScene(
{
site_test: {
object: 'node',
id: 'site_test',
type: 'site',
parentId: null,
visible: true,
metadata: {},
children: ['building_test'],
},
building_test: {
object: 'node',
id: 'building_test',
type: 'building',
parentId: 'site_test',
visible: true,
metadata: {},
children: ['level_test'],
},
level_test: {
object: 'node',
id: 'level_test',
type: 'level',
parentId: 'building_test',
visible: true,
metadata: {},
children: ['elevator_test'],
level: 0,
},
elevator_test: {
object: 'node',
id: 'elevator_test',
type: 'elevator',
parentId: 'level_test',
visible: true,
metadata: {},
},
} as unknown as Record<string, AnyNode>,
['site_test'] as never,
)
const nodes = useScene.getState().nodes
const elevator = nodes.elevator_test as Extract<AnyNode, { type: 'elevator' }>
const level = nodes.level_test as Extract<AnyNode, { type: 'level' }>
const building = nodes.building_test as Extract<AnyNode, { type: 'building' }>
expect(elevator.parentId).toBe('building_test')
expect(elevator.position).toEqual([0, 0, 0])
expect(elevator.rotation).toBe(0)
expect(level.children).not.toContain('elevator_test')
expect(building.children).toContain('elevator_test')
})
test('migrates level-parented elevators when the level parentId is missing', () => {
useScene.getState().setScene(
{
site_test: {
object: 'node',
id: 'site_test',
type: 'site',
parentId: null,
visible: true,
metadata: {},
children: ['building_test'],
},
building_test: {
object: 'node',
id: 'building_test',
type: 'building',
parentId: 'site_test',
visible: true,
metadata: {},
children: ['level_test'],
},
level_test: {
object: 'node',
id: 'level_test',
type: 'level',
parentId: null,
visible: true,
metadata: {},
children: ['elevator_test'],
level: 0,
},
elevator_test: {
object: 'node',
id: 'elevator_test',
type: 'elevator',
parentId: 'level_test',
visible: true,
metadata: {},
},
} as unknown as Record<string, AnyNode>,
['site_test'] as never,
)
const nodes = useScene.getState().nodes
const elevator = nodes.elevator_test as Extract<AnyNode, { type: 'elevator' }>
const level = nodes.level_test as Extract<AnyNode, { type: 'level' }>
const building = nodes.building_test as Extract<AnyNode, { type: 'building' }>
expect(elevator.parentId).toBe('building_test')
expect(level.children).not.toContain('elevator_test')
expect(building.children).toContain('elevator_test')
})
})
packages/core/src/store/use-scene.ts
+87
View File
@@ -7,6 +7,7 @@ import { BuildingNode } from '../schema'
import type { Collection, CollectionId } from '../schema/collections'
import { generateCollectionId } from '../schema/collections'
import { DoorNode as DoorNodeSchema } from '../schema/nodes/door'
import { ElevatorNode as ElevatorNodeSchema } from '../schema/nodes/elevator'
import { LevelNode } from '../schema/nodes/level'
import {
getPitchFromActiveRoofHeight,
@@ -149,6 +150,84 @@ function normalizeShelfNode(node: Record<string, unknown>) {
return parsed.success ? parsed.data : null
}
function normalizeElevatorNode(node: Record<string, unknown>) {
const sanitized = {
...node,
position: getVector3(node.position, [0, 0, 0]),
rotation: getFiniteNumber(node.rotation, 0),
width: getFiniteNumber(node.width, 1.84),
depth: getFiniteNumber(node.depth, 1.84),
shaftWidth: node.shaftWidth === undefined ? undefined : getFiniteNumber(node.shaftWidth, 1.84),
shaftDepth: node.shaftDepth === undefined ? undefined : getFiniteNumber(node.shaftDepth, 1.84),
shaftWallThickness: getFiniteNumber(node.shaftWallThickness, 0.09),
cabHeight: getFiniteNumber(node.cabHeight, 2.35),
doorWidth: getFiniteNumber(node.doorWidth, 0.95),
doorHeight: getFiniteNumber(node.doorHeight, 2.1),
fromLevelId: getNullableString(node.fromLevelId),
toLevelId: getNullableString(node.toLevelId),
servedLevelIds:
node.servedLevelIds === undefined ? undefined : getStringArray(node.servedLevelIds),
disabledLevelIds: getStringArray(node.disabledLevelIds),
serviceOnlyLevelIds: getStringArray(node.serviceOnlyLevelIds),
defaultLevelId: getNullableString(node.defaultLevelId),
speed: getFiniteNumber(node.speed, 2.2),
doorDurationMs: getFiniteNumber(node.doorDurationMs, 900),
dwellMs: getFiniteNumber(node.dwellMs, 1400),
}
const parsed = ElevatorNodeSchema.safeParse(sanitized)
return parsed.success ? parsed.data : null
}
function findBuildingIdForLevel(levelId: string, nodes: Record<string, any>): string | null {
const level = nodes[levelId]
const directBuildingId = typeof level?.parentId === 'string' ? level.parentId : null
if (directBuildingId && nodes[directBuildingId]?.type === 'building') {
return directBuildingId
}
for (const [candidateId, candidate] of Object.entries(nodes)) {
if (candidate?.type !== 'building') continue
if (getStringArray(candidate.children).includes(levelId)) {
return candidateId
}
}
return null
}
function migrateElevatorParent(
id: string,
node: Record<string, unknown>,
nodes: Record<string, any>,
) {
const parentId = typeof node.parentId === 'string' ? node.parentId : null
if (!parentId) return node
const parent = parentId ? nodes[parentId] : null
if (parent?.type !== 'level') return node
const buildingId = findBuildingIdForLevel(parentId, nodes)
if (!buildingId) return node
const building = buildingId ? nodes[buildingId] : null
if (building?.type !== 'building') return node
nodes[parentId] = {
...parent,
children: getStringArray(parent.children).filter((childId) => childId !== id),
}
const buildingChildren = getStringArray(building.children)
nodes[buildingId] = {
...building,
children: buildingChildren.includes(id) ? buildingChildren : [...buildingChildren, id],
}
return {
...node,
parentId: buildingId,
}
}
function migrateWallSurfaceMaterials(node: Record<string, any>) {
const hasInterior =
node.interiorMaterial !== undefined || typeof node.interiorMaterialPreset === 'string'
@@ -440,6 +519,14 @@ function migrateNodes(nodes: Record<string, any>): Record<string, AnyNode> {
}
}
if (node.type === 'elevator') {
const parentMigrated = migrateElevatorParent(id, node, patchedNodes)
const normalized = normalizeElevatorNode(parentMigrated)
if (normalized) {
patchedNodes[id] = normalized
}
}
// Roof-segment hosting was added in this migration cycle (the same
// pattern as shelf above). Older segments saved before the schema
// gained `children` need the field initialised so
packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx
+118 -66
View File
@@ -6,12 +6,12 @@ import {
type AnyNodeId,
bboxAnchors,
bboxCornerAnchors,
emitter,
type FloorplanMoveTargetSession,
nodeRegistry,
pauseSceneHistory,
resolveAlignment,
resumeSceneHistory,
snapPointToGrid,
useAlignmentGuides,
useLiveNodeOverrides,
useLiveTransforms,
@@ -19,12 +19,13 @@ import {
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { useEffect } from 'react'
import { commitFreshPlacementSubtree } from '../../lib/fresh-planar-placement'
import { isFreshPlacementMetadata, stripPlacementMetadataFlags } from '../../lib/placement-metadata'
import { resolvePlanarCursorPosition } from '../../lib/planar-cursor-placement'
import { sfxEmitter } from '../../lib/sfx-bus'
import useEditor from '../../store/use-editor'
import { useWallMoveGhosts } from '../../store/use-wall-move-ghosts'
const GRID_STEP = 0.5
// Figma-style alignment snap threshold. Meters in world space; 8cm gives
// a comfortable "magnetic" pull at default zoom without fighting the
// grid snap. Held fixed for v1 — a future revision can scale this with
@@ -78,6 +79,21 @@ export function FloorplanRegistryMoveOverlay() {
return [m.x, m.y]
}
const isPointerOverFloorplanScene = (clientX: number, clientY: number): boolean => {
// The scene's `<g>` only covers painted SVG elements, so hovers over
// empty grid background often target the parent SVG. Bounds keep the
// cursor active anywhere inside the floor-plan viewport.
const svg = scene.ownerSVGElement
if (!svg) return false
const rect = svg.getBoundingClientRect()
return (
clientX >= rect.left &&
clientX <= rect.right &&
clientY >= rect.top &&
clientY <= rect.bottom
)
}
// ── Path 1 — kind-owned `floorplanMoveTarget` ───────────────────
if (hasMoveTarget && def?.floorplanMoveTarget) {
const sceneNodes = useScene.getState().nodes
@@ -109,26 +125,6 @@ export function FloorplanRegistryMoveOverlay() {
// all entries use the action menu now.
let hasMovedSinceStart = false
const isPointerOverFloorplanScene = (clientX: number, clientY: number): boolean => {
// We can't just check `target.closest('[data-floorplan-scene]')`
// because the scene's `<g>` only covers painted SVG elements —
// hovering empty grid background returns the parent SVG element
// as target (no ancestor with the marker), so the closest check
// fails. Compare the pointer position against the scene's
// bounding rect instead: any cursor inside the SVG viewport
// counts as "over the floor plan", regardless of whether the
// exact pixel paints a node or just blank surface.
const svg = scene.ownerSVGElement
if (!svg) return false
const rect = svg.getBoundingClientRect()
return (
clientX >= rect.left &&
clientX <= rect.right &&
clientY >= rect.top &&
clientY <= rect.bottom
)
}
const onMove = (event: PointerEvent) => {
// Skip 3D-canvas / other-UI cursor moves so the overlay only
// tracks pointer events that actually correspond to a floor-plan
@@ -175,6 +171,7 @@ export function FloorplanRegistryMoveOverlay() {
}
session.commit()
sfxEmitter.emit('sfx:item-place')
useViewer.getState().setSelection({ selectedIds: snapshots.map((s) => s.id) })
return
}
@@ -195,6 +192,24 @@ export function FloorplanRegistryMoveOverlay() {
if (changed) finalUpdates.push({ id: snap.id, data })
}
for (const snap of snapshots) {
const current = sceneState[snap.id]
if (!current || !isFreshPlacementMetadata((current as { metadata?: unknown }).metadata)) {
continue
}
const existing = finalUpdates.find((update) => update.id === snap.id)
const metadata = stripPlacementMetadataFlags((current as { metadata?: unknown }).metadata)
if (existing) {
existing.data.metadata = metadata
existing.data.visible = true
} else {
finalUpdates.push({
id: snap.id,
data: { metadata, visible: true },
})
}
}
if (commitValid && finalUpdates.length > 0) {
// Single-undo dance:
// 1. Revert to baseline while history is still paused.
@@ -206,24 +221,6 @@ export function FloorplanRegistryMoveOverlay() {
historyPaused = false
}
useScene.getState().updateNodes(finalUpdates)
// Strip the isNew metadata once committed (matches the legacy
// 3D move-tool that demotes duplicated nodes from "new" status
// on first successful drop).
for (const snap of snapshots) {
const current = useScene.getState().nodes[snap.id]
const meta =
current && typeof (current as { metadata?: unknown }).metadata === 'object'
? ((current as { metadata?: Record<string, unknown> }).metadata ?? {})
: {}
if (meta.isNew) {
useScene.getState().updateNodes([
{
id: snap.id,
data: { metadata: { ...meta, isNew: false } } as Record<string, unknown>,
},
])
}
}
sfxEmitter.emit('sfx:item-place')
// Re-select the moved node(s) — mirrors the legacy 3D move
// tool. The action menu cleared selection on Move click so
@@ -246,6 +243,7 @@ export function FloorplanRegistryMoveOverlay() {
// reason as `onMove`: commits should land for any pointer-up
// inside the SVG viewport, including empty grid background.
if (!isPointerOverFloorplanScene(event.clientX, event.clientY)) return
if (!hasMovedSinceStart) return
// Commit using the LAST pointermove's state — no re-apply at
// pointer-up coords. A previous version re-applied here to
@@ -281,17 +279,7 @@ export function FloorplanRegistryMoveOverlay() {
// the following click are separate DOM events, so we listen on
// window in the capture phase to intercept the click before any
// bubble-phase handler (the floor-plan SVG) sees it.
const swallowClick = (e: MouseEvent) => {
e.stopPropagation()
e.preventDefault()
window.removeEventListener('click', swallowClick, true)
}
window.addEventListener('click', swallowClick, true)
// Safety net: if no click fires (e.g. user dragged enough to
// suppress it), drop the listener on the next tick.
setTimeout(() => {
window.removeEventListener('click', swallowClick, true)
}, 0)
swallowNextClick()
}
const onKey = (event: KeyboardEvent) => {
@@ -300,6 +288,23 @@ export function FloorplanRegistryMoveOverlay() {
// its own restore — without this, both sides would race to
// write the same baseline, harmless but wasteful.
setMovingNodeOrigin('2d')
if (isFreshPlacementMetadata((movingNode as { metadata?: unknown }).metadata)) {
emitter.emit('tool:cancel')
useScene.getState().deleteNode(movingNode.id as AnyNodeId)
if (historyPaused) {
resumeSceneHistory(useScene)
historyPaused = false
}
const liveTransforms = useLiveTransforms.getState()
const liveOverrides = useLiveNodeOverrides.getState()
for (const id of session.affectedIds) {
liveTransforms.clear(id)
liveOverrides.clear(id)
}
useAlignmentGuides.getState().clear()
setMovingNode(null)
return
}
// Revert untracked, then resume — no history entry.
useScene.getState().updateNodes(snapshotsToUpdates(snapshots))
if (historyPaused) {
@@ -389,6 +394,9 @@ export function FloorplanRegistryMoveOverlay() {
position?: [number, number, number]
}
).position ?? [0, 0, 0]) as [number, number, number]
const isFreshPlacement = isFreshPlacementMetadata(
(movingNode as { metadata?: unknown }).metadata,
)
// SVG units in this floorplan map 1:1 to world meters, and the
// `<g data-node-id>` entry has no transform of its own when at rest,
@@ -407,18 +415,29 @@ export function FloorplanRegistryMoveOverlay() {
}
let lastSnapped: [number, number] | null = null
let dragAnchor: [number, number] | null = null
const onMove = (event: PointerEvent) => {
// Same target guard as Path 1 — pointer must be over the floor
// plan scene; otherwise we'd react to 3D-canvas moves with garbage
// plan coords.
const target = event.target as Element | null
if (!target?.closest('[data-floorplan-scene]')) return
if (!isPointerOverFloorplanScene(event.clientX, event.clientY)) return
const m = toMeters(event.clientX, event.clientY)
if (!m) return
// 1) Grid snap baseline (unchanged behaviour with Alt held).
const [gridX, gridZ] = snapPointToGrid([m[0], m[1]], GRID_STEP)
// 1) Grid snap baseline. Fresh catalog placement is absolute under
// the cursor; existing moves preserve the cursor's grab offset.
const gridStep = useEditor.getState().gridSnapStep
const snap = (value: number) => Math.round(value / gridStep) * gridStep
const resolved = resolvePlanarCursorPosition({
cursor: [m[0], m[1]],
original: [originalPosition[0], originalPosition[2]],
anchor: dragAnchor,
mode: isFreshPlacement ? 'absolute' : 'relative',
snap,
})
dragAnchor = resolved.anchor
const [gridX, gridZ] = resolved.point
// 2) Alignment snap layered on top. Treat the grid-snapped point
// as the "proposed" position so alignment competes from a stable
@@ -467,33 +486,52 @@ export function FloorplanRegistryMoveOverlay() {
const onPointerUp = (event: PointerEvent) => {
if (event.button !== 0) return
const target = event.target as Element | null
if (!target?.closest('[data-floorplan-scene]')) return
if (!isPointerOverFloorplanScene(event.clientX, event.clientY)) return
const snapped = lastSnapped
if (snapped) {
if (!snapped) return
const [sx, sz] = snapped
const [, oldY] = originalPosition
useScene
.getState()
.updateNode(movingNode.id as AnyNodeId, { position: [sx, oldY, sz] } as Partial<AnyNode>)
const meta = (movingNode as unknown as { metadata?: Record<string, unknown> }).metadata
if (meta?.isNew) {
setMovingNodeOrigin('2d')
let selectedId = movingNode.id as AnyNodeId
if (isFreshPlacement) {
selectedId =
commitFreshPlacementSubtree(
movingNode.id as AnyNodeId,
{
position: [sx, oldY, sz],
metadata: stripPlacementMetadataFlags(
(movingNode as { metadata?: unknown }).metadata,
),
visible: true,
} as Partial<AnyNode>,
) ?? selectedId
} else {
useScene.getState().updateNode(
movingNode.id as AnyNodeId,
{
metadata: { ...meta, isNew: false },
position: [sx, oldY, sz],
} as Partial<AnyNode>,
)
}
}
useViewer.getState().setSelection({ selectedIds: [selectedId] })
entry.removeAttribute('transform')
useAlignmentGuides.getState().clear()
setMovingNode(null)
swallowNextClick()
}
const onKey = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
setMovingNodeOrigin('2d')
if (isFreshPlacement) {
emitter.emit('tool:cancel')
const temporal = useScene.temporal.getState()
const wasTracking = (temporal as { isTracking?: boolean }).isTracking !== false
if (wasTracking) temporal.pause()
useScene.getState().deleteNode(movingNode.id as AnyNodeId)
if (wasTracking) temporal.resume()
}
entry.removeAttribute('transform')
useAlignmentGuides.getState().clear()
setMovingNode(null)
@@ -557,3 +595,17 @@ function deepEqual(a: unknown, b: unknown): boolean {
}
return false
}
function swallowNextClick() {
const swallowClick = (e: MouseEvent) => {
e.stopPropagation()
e.preventDefault()
window.removeEventListener('click', swallowClick, true)
}
window.addEventListener('click', swallowClick, true)
// Safety net: if no click fires (e.g. user dragged enough to suppress it),
// drop the listener on the next tick.
setTimeout(() => {
window.removeEventListener('click', swallowClick, true)
}, 0)
}
packages/editor/src/components/editor-2d/renderers/floorplan-geometry-renderer.tsx
+50 -11
View File
@@ -23,13 +23,18 @@ import { memo, useEffect, useState } from 'react'
*/
export const FloorplanGeometryRenderer = memo(function FloorplanGeometryRenderer({
geometry,
pointerEventsOverride,
}: {
geometry: FloorplanGeometry
pointerEventsOverride?: string
}) {
return renderNode(geometry, 0)
return renderNode(geometry, 0, pointerEventsOverride)
})
function styleAttrs(g: FloorplanGeometry & { kind: Exclude<FloorplanGeometry['kind'], 'group'> }) {
function styleAttrs(
g: FloorplanGeometry & { kind: Exclude<FloorplanGeometry['kind'], 'group'> },
pointerEventsOverride?: string,
) {
// Shared SVG attribute mapping for any styled primitive. Keeps the per-
// primitive switch arms terse and ensures new style fields land
// everywhere at once. `as any` avoids re-asserting every variant
@@ -60,21 +65,37 @@ function styleAttrs(g: FloorplanGeometry & { kind: Exclude<FloorplanGeometry['ki
strokeOpacity: s.strokeOpacity,
opacity: s.opacity,
vectorEffect: s.vectorEffect,
pointerEvents: s.pointerEvents,
pointerEvents: pointerEventsOverride ?? s.pointerEvents,
style: s.cursor ? { cursor: s.cursor } : undefined,
}
}
function renderNode(g: FloorplanGeometry, keyHint: number): React.ReactElement | null {
function renderNode(
g: FloorplanGeometry,
keyHint: number,
pointerEventsOverride?: string,
): React.ReactElement | null {
switch (g.kind) {
case 'path':
return <path d={g.d} key={keyHint} {...styleAttrs(g)} />
return <path d={g.d} key={keyHint} {...styleAttrs(g, pointerEventsOverride)} />
case 'polygon':
return <polygon key={keyHint} points={pointsToAttr(g.points)} {...styleAttrs(g)} />
return (
<polygon
key={keyHint}
points={pointsToAttr(g.points)}
{...styleAttrs(g, pointerEventsOverride)}
/>
)
case 'polyline':
return <polyline key={keyHint} points={pointsToAttr(g.points)} {...styleAttrs(g)} />
return (
<polyline
key={keyHint}
points={pointsToAttr(g.points)}
{...styleAttrs(g, pointerEventsOverride)}
/>
)
case 'rect':
return (
@@ -86,15 +107,32 @@ function renderNode(g: FloorplanGeometry, keyHint: number): React.ReactElement |
width={g.width}
x={g.x}
y={g.y}
{...styleAttrs(g)}
{...styleAttrs(g, pointerEventsOverride)}
/>
)
case 'circle':
return <circle cx={g.cx} cy={g.cy} key={keyHint} r={g.r} {...styleAttrs(g)} />
return (
<circle
cx={g.cx}
cy={g.cy}
key={keyHint}
r={g.r}
{...styleAttrs(g, pointerEventsOverride)}
/>
)
case 'line':
return <line key={keyHint} x1={g.x1} x2={g.x2} y1={g.y1} y2={g.y2} {...styleAttrs(g)} />
return (
<line
key={keyHint}
x1={g.x1}
x2={g.x2}
y1={g.y1}
y2={g.y2}
{...styleAttrs(g, pointerEventsOverride)}
/>
)
case 'text':
return (
@@ -112,6 +150,7 @@ function renderNode(g: FloorplanGeometry, keyHint: number): React.ReactElement |
strokeLinejoin={g.stroke ? 'round' : undefined}
strokeWidth={g.strokeWidth}
textAnchor={g.textAnchor ?? 'start'}
pointerEvents={pointerEventsOverride}
x={g.x}
y={g.y}
>
@@ -137,7 +176,7 @@ function renderNode(g: FloorplanGeometry, keyHint: number): React.ReactElement |
const transform = formatTransform(g.transform)
return (
<g key={keyHint} transform={transform}>
{g.children.map((child, i) => renderNode(child, i))}
{g.children.map((child, i) => renderNode(child, i, pointerEventsOverride))}
</g>
)
}
packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx
+48 -7
View File
@@ -187,11 +187,20 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
const editorPhase = useEditor((s) => s.phase)
const editorMode = useEditor((s) => s.mode)
const editorTool = useEditor((s) => s.tool)
const structureLayer = useEditor((s) => s.structureLayer)
const floorplanSelectionTool = useEditor((s) => s.floorplanSelectionTool)
const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
const isOpeningPlacementActive =
(editorPhase === 'structure' &&
editorMode === 'build' &&
(editorTool === 'door' || editorTool === 'window')) ||
(movingNode != null && !!nodeRegistry.get(movingNode.type)?.capabilities?.wallOpeningPlacement)
const isMarqueeSelectionActive =
editorMode === 'select' &&
floorplanSelectionTool === 'marquee' &&
structureLayer !== 'zones' &&
!movingNode &&
!movingFenceEndpoint
// Subscribe to the live-transforms map ref so the layer re-renders
// whenever a 3D mover publishes a per-frame position (see
// `usePlacementCoordinator`). Without this the 2D floor plan only
@@ -260,6 +269,9 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
// tree the builder returns. Builders don't need to know about the
// partition.
const entries = useMemo(() => {
// Some builders read elevator runtime state imperatively; this keeps the memo subscribed.
void interactiveElevators
if (!levelId) return []
const out: {
id: AnyNodeId
@@ -273,6 +285,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
const visit = (id: AnyNodeId) => {
const node = nodes[id]
if (!node) return
if ((node as { visible?: boolean }).visible === false) return
const def = nodeRegistry.get(node.type)
const builder = def?.floorplan
if (builder) {
@@ -373,6 +386,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
const buildingScopedKindSet = new Set(buildingScopedKinds)
for (const [id, node] of Object.entries(nodes)) {
if (!node || !buildingScopedKindSet.has(node.type)) continue
if ((node as { visible?: boolean }).visible === false) continue
const parentId = (node as { parentId?: AnyNodeId | null }).parentId
if (parentId !== activeBuildingId) continue
const cid = id as AnyNodeId
@@ -383,8 +397,22 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
const highlighted = highlightedIdSet.has(cid)
const hovered = hoveredId === cid
const moving = movingNode?.id === cid
const live = liveTransforms.get(cid)
const hasPosition = Array.isArray((node as { position?: unknown }).position)
let effectiveNode: AnyNode =
live && hasPosition ? applyPositionLiveTransform(node, live) : node
const contextNodes = def?.floorplanSiblingOverrides
? def.floorplanSiblingOverrides({ nodeId: cid, nodes, liveOverrides })
: nodes
if (contextNodes !== nodes) {
const merged = contextNodes[cid]
if (merged) {
effectiveNode = live && hasPosition ? applyPositionLiveTransform(merged, live) : merged
}
}
const ctx: GeometryContext = {
resolve: <N = AnyNode>(rid: AnyNodeId): N | undefined => nodes[rid] as N | undefined,
resolve: <N = AnyNode>(rid: AnyNodeId): N | undefined =>
contextNodes[rid] as N | undefined,
children: [],
siblings: [],
parent: activeLevelNode,
@@ -399,12 +427,12 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
: undefined,
}
const geometry = (builder as (n: AnyNode, c: GeometryContext) => FloorplanGeometry | null)(
node,
effectiveNode,
ctx,
)
if (geometry) {
const { base, overlay } = splitFloorplanOverlay(geometry)
out.push({ id: cid, node, base, overlay, selected, highlighted })
out.push({ id: cid, node: effectiveNode, base, overlay, selected, highlighted })
}
}
}
@@ -693,8 +721,12 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
className="floorplan-registry-entry"
data-node-id={id}
key={key}
onClick={isOpeningPlacementActive ? undefined : handleClickStop}
onPointerDown={isOpeningPlacementActive ? undefined : (e) => handleSelect(id, e)}
onClick={isOpeningPlacementActive || isMarqueeSelectionActive ? undefined : handleClickStop}
onPointerDown={
isOpeningPlacementActive || isMarqueeSelectionActive
? undefined
: (e) => handleSelect(id, e)
}
// Mirror the sidebar tree nodes' hover wiring — `useViewer.
// hoveredId` drives the highlight halo in 3D as well as the
// wall / fence floor-plan hover stroke. Setting it on
@@ -716,6 +748,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() {
geometry={geometry}
hatchPatternId={renderCtx?.hatchPatternId}
hoveredHandleId={hoveredHandleId}
isMarqueeSelectionActive={isMarqueeSelectionActive}
nodeId={id}
onHandleHoverChange={setHoveredHandleId}
onHandlePointerDown={(affordance, payload, event, rotationPivot) =>
@@ -807,6 +840,7 @@ function InteractiveGeometry({
hatchPatternId,
hoveredHandleId,
activeDragId,
isMarqueeSelectionActive,
nodeId,
sceneRotationDeg,
onHandleHoverChange,
@@ -819,6 +853,7 @@ function InteractiveGeometry({
hatchPatternId: string | undefined
hoveredHandleId: string | null
activeDragId: string | null
isMarqueeSelectionActive: boolean
nodeId: AnyNodeId
sceneRotationDeg: number
onHandleHoverChange: (id: string | null) => void
@@ -860,7 +895,7 @@ function InteractiveGeometry({
return (
<line
key={keyHint}
pointerEvents={g.pointerEvents ?? 'stroke'}
pointerEvents={isMarqueeSelectionActive ? 'none' : (g.pointerEvents ?? 'stroke')}
stroke="transparent"
strokeLinecap="round"
strokeWidth={g.strokeWidthPx * unitsPerPixel}
@@ -1562,7 +1597,13 @@ function InteractiveGeometry({
)
}
default:
return <FloorplanGeometryRenderer geometry={g} key={keyHint} />
return (
<FloorplanGeometryRenderer
geometry={g}
key={keyHint}
pointerEventsOverride={isMarqueeSelectionActive ? 'none' : undefined}
/>
)
}
}
}
packages/editor/src/components/editor/custom-camera-controls.tsx
+432 -27
View File
@@ -10,9 +10,16 @@ import {
} from '@pascal-app/core'
import { GRID_LAYER, useViewer, ZONE_LAYER } from '@pascal-app/viewer'
import { CameraControls, CameraControlsImpl } from '@react-three/drei'
import { useThree } from '@react-three/fiber'
import { useFrame, useThree } from '@react-three/fiber'
import { useCallback, useEffect, useMemo, useRef } from 'react'
import { Box3, Vector3 } from 'three'
import {
Box3,
type Camera,
type OrthographicCamera,
type PerspectiveCamera,
Spherical,
Vector3,
} from 'three'
import { EDITOR_LAYER } from '../../lib/constants'
import useEditor from '../../store/use-editor'
@@ -23,22 +30,243 @@ const tempDelta = new Vector3()
const tempPosition = new Vector3()
const tempSize = new Vector3()
const tempTarget = new Vector3()
const syncTarget = new Vector3()
const syncSpherical = new Spherical()
const DEFAULT_MAX_POLAR_ANGLE = Math.PI / 2 - 0.1
const DEBUG_MAX_POLAR_ANGLE = Math.PI - 0.05
const NAVIGATION_SYNC_POSITION_EPSILON = 0.001
const NAVIGATION_SYNC_AZIMUTH_EPSILON = 0.0005
const NAVIGATION_SYNC_VIEW_WIDTH_EPSILON = 0.001
type CameraMode = ReturnType<typeof useViewer.getState>['cameraMode']
type CameraPoseSnapshot = {
mode: CameraMode
position: [number, number, number]
target: [number, number, number]
}
type NavigationCameraPoseSnapshot = {
target: [number, number, number]
azimuth: number
viewWidth: number
}
function writeVectorTuple(tuple: [number, number, number], vector: Vector3) {
tuple[0] = vector.x
tuple[1] = vector.y
tuple[2] = vector.z
}
function saveCameraPose(
control: CameraControlsImpl,
mode: CameraMode,
pose: CameraPoseSnapshot,
position: Vector3,
target: Vector3,
) {
control.getPosition(position)
control.getTarget(target)
pose.mode = mode
writeVectorTuple(pose.position, position)
writeVectorTuple(pose.target, target)
}
function restoreCameraPose(control: CameraControlsImpl, pose: CameraPoseSnapshot) {
control.setLookAt(
pose.position[0],
pose.position[1],
pose.position[2],
pose.target[0],
pose.target[1],
pose.target[2],
false,
)
}
function isEditableKeyboardTarget(target: EventTarget | null) {
return (
target instanceof HTMLInputElement ||
target instanceof HTMLTextAreaElement ||
target instanceof HTMLSelectElement ||
(target instanceof HTMLElement && target.isContentEditable)
)
}
type CameraViewportSize = {
width: number
height: number
}
function isPerspectiveCamera(camera: Camera): camera is PerspectiveCamera {
return (camera as PerspectiveCamera).isPerspectiveCamera === true
}
function isOrthographicCamera(camera: Camera): camera is OrthographicCamera {
return (camera as OrthographicCamera).isOrthographicCamera === true
}
function getCameraViewAspect(size: CameraViewportSize) {
return Math.max(size.width, 1) / Math.max(size.height, 1)
}
function getCameraViewWidth(camera: Camera, distance: number, size: CameraViewportSize) {
if (isPerspectiveCamera(camera)) {
const fovRadians = (camera.getEffectiveFOV() * Math.PI) / 180
return Math.max(0.001, 2 * distance * Math.tan(fovRadians / 2) * getCameraViewAspect(size))
}
if (isOrthographicCamera(camera)) {
return Math.max(0.001, (camera.right - camera.left) / camera.zoom)
}
return Math.max(0.001, distance)
}
function getAngleDeltaRadians(a: number, b: number) {
return Math.atan2(Math.sin(a - b), Math.cos(a - b))
}
function isCameraAtNavigationPose(
pose: NavigationCameraPoseSnapshot,
target: Vector3,
azimuth: number,
viewWidth: number,
) {
return (
Math.abs(pose.target[0] - target.x) < NAVIGATION_SYNC_POSITION_EPSILON &&
Math.abs(pose.target[1] - target.y) < NAVIGATION_SYNC_POSITION_EPSILON &&
Math.abs(pose.target[2] - target.z) < NAVIGATION_SYNC_POSITION_EPSILON &&
Math.abs(getAngleDeltaRadians(pose.azimuth, azimuth)) < NAVIGATION_SYNC_AZIMUTH_EPSILON &&
Math.abs(pose.viewWidth - viewWidth) < NAVIGATION_SYNC_VIEW_WIDTH_EPSILON
)
}
function getCameraDistanceForViewWidth(
camera: Camera,
viewWidth: number,
size: CameraViewportSize,
) {
if (!isPerspectiveCamera(camera)) {
return null
}
const fovRadians = (camera.getEffectiveFOV() * Math.PI) / 180
const denominator = 2 * Math.tan(fovRadians / 2) * getCameraViewAspect(size)
return denominator > 0 ? Math.max(0.001, viewWidth / denominator) : null
}
function getCameraZoomForViewWidth(camera: Camera, viewWidth: number) {
if (!isOrthographicCamera(camera)) {
return null
}
return viewWidth > 0 ? Math.max(0.001, (camera.right - camera.left) / viewWidth) : null
}
function applyCameraViewWidth(
control: CameraControlsImpl,
camera: Camera,
viewWidth: number,
size: CameraViewportSize,
) {
const nextDistance = getCameraDistanceForViewWidth(camera, viewWidth, size)
if (nextDistance !== null) {
control.dollyTo(nextDistance, true)
return
}
const nextZoom = getCameraZoomForViewWidth(camera, viewWidth)
if (nextZoom !== null) {
control.zoomTo(nextZoom, true)
}
}
function useFirstPersonCameraPoseRestore(
controls: { current: CameraControlsImpl | null },
isFirstPersonMode: boolean,
cameraMode: CameraMode,
) {
const restorePose = useRef<CameraPoseSnapshot>({
mode: cameraMode,
position: [0, 0, 0],
target: [0, 0, 0],
})
const hasRestorePose = useRef(false)
const isRestoring = useRef(false)
const wasFirstPersonMode = useRef(isFirstPersonMode)
const snapshotPosition = useRef(new Vector3())
const snapshotTarget = useRef(new Vector3())
useFrame(() => {
if (isFirstPersonMode || isRestoring.current) return
const control = controls.current
if (!control) return
saveCameraPose(
control,
cameraMode,
restorePose.current,
snapshotPosition.current,
snapshotTarget.current,
)
hasRestorePose.current = true
})
useEffect(() => {
const wasFirstPerson = wasFirstPersonMode.current
wasFirstPersonMode.current = isFirstPersonMode
if (isFirstPersonMode) {
return
}
if (!wasFirstPerson || !hasRestorePose.current) return
const pose = restorePose.current
isRestoring.current = true
useViewer.getState().setCameraMode(pose.mode)
const restoreFrame = requestAnimationFrame(() => {
const currentControls = controls.current
if (currentControls) {
restoreCameraPose(currentControls, pose)
}
isRestoring.current = false
})
return () => {
cancelAnimationFrame(restoreFrame)
isRestoring.current = false
}
}, [controls, isFirstPersonMode])
return useCallback(() => isRestoring.current, [])
}
export const CustomCameraControls = () => {
const controls = useRef<CameraControlsImpl>(null!)
const controls = useRef<CameraControlsImpl | null>(null)
const isPreviewMode = useEditor((s) => s.isPreviewMode)
const isFirstPersonMode = useEditor((s) => s.isFirstPersonMode)
const allowUndergroundCamera = useEditor((s) => s.allowUndergroundCamera)
const isFloorplanOpen = useEditor((s) => s.isFloorplanOpen)
const selection = useViewer((s) => s.selection)
const cameraMode = useViewer((state) => state.cameraMode)
const isRestoringFirstPersonPose = useFirstPersonCameraPoseRestore(
controls,
isFirstPersonMode,
cameraMode,
)
const currentLevelId = selection.levelId
const firstLoad = useRef(true)
const lastPublishedNavigationSync = useRef<NavigationCameraPoseSnapshot | null>(null)
const pendingFloorplanNavigationPose = useRef<NavigationCameraPoseSnapshot | null>(null)
const lastApplied2dNavigationRevision = useRef(0)
const maxPolarAngle =
!isPreviewMode && allowUndergroundCamera ? DEBUG_MAX_POLAR_ANGLE : DEFAULT_MAX_POLAR_ANGLE
const camera = useThree((state) => state.camera)
const gl = useThree((state) => state.gl)
const raycaster = useThree((state) => state.raycaster)
const viewportSize = useThree((state) => state.size)
useEffect(() => {
camera.layers.enable(EDITOR_LAYER)
camera.layers.enable(GRID_LAYER)
@@ -47,7 +275,7 @@ export const CustomCameraControls = () => {
}, [camera, raycaster])
useEffect(() => {
if (isPreviewMode) return // Preview mode uses auto-navigate instead
if (isPreviewMode || isFirstPersonMode || isRestoringFirstPersonPose()) return
let targetY = 0
if (currentLevelId) {
const levelMesh = sceneRegistry.nodes.get(currentLevelId)
@@ -62,10 +290,10 @@ export const CustomCameraControls = () => {
}
controls.current.getTarget(currentTarget)
controls.current.moveTo(currentTarget.x, targetY, currentTarget.z, true)
}, [currentLevelId, isPreviewMode])
}, [currentLevelId, isPreviewMode, isFirstPersonMode, isRestoringFirstPersonPose])
useEffect(() => {
if (!controls.current) return
if (isFirstPersonMode || !controls.current) return
controls.current.maxPolarAngle = maxPolarAngle
controls.current.minPolarAngle = 0
@@ -73,11 +301,11 @@ export const CustomCameraControls = () => {
if (controls.current.polarAngle > maxPolarAngle) {
controls.current.rotateTo(controls.current.azimuthAngle, maxPolarAngle, true)
}
}, [maxPolarAngle])
}, [isFirstPersonMode, maxPolarAngle])
const focusNode = useCallback(
(nodeId: string) => {
if (isPreviewMode || !controls.current) return
if (isPreviewMode || isFirstPersonMode || !controls.current) return
const object3D = sceneRegistry.nodes.get(nodeId)
if (!object3D) return
@@ -100,11 +328,96 @@ export const CustomCameraControls = () => {
true,
)
},
[isPreviewMode],
[isPreviewMode, isFirstPersonMode],
)
useEffect(() => {
if (isFirstPersonMode) return
return useEditor.subscribe((state) => {
const pose = state.navigationSyncPose
if (
!pose ||
pose.source !== '2d' ||
pose.revision === lastApplied2dNavigationRevision.current
)
return
const control = controls.current
if (!control) return
lastApplied2dNavigationRevision.current = pose.revision
pendingFloorplanNavigationPose.current = {
target: [...pose.target],
azimuth: pose.azimuth,
viewWidth: pose.viewWidth,
}
control.moveTo(pose.target[0], pose.target[1], pose.target[2], true)
control.rotateTo(pose.azimuth, control.polarAngle, true)
applyCameraViewWidth(control, camera, pose.viewWidth, viewportSize)
})
}, [camera, isFirstPersonMode, viewportSize])
const publishCurrentNavigationPose = useCallback(() => {
if (isFirstPersonMode || !controls.current) return
controls.current.getTarget(syncTarget, false)
controls.current.getSpherical(syncSpherical, false)
const viewWidth = getCameraViewWidth(camera, syncSpherical.radius, viewportSize)
const pendingFloorplanPose = pendingFloorplanNavigationPose.current
if (pendingFloorplanPose) {
// The camera is still damping toward a 2D-originated pose; do not echo
// intermediate 3D poses back into the floorplan.
if (
isCameraAtNavigationPose(pendingFloorplanPose, syncTarget, syncSpherical.theta, viewWidth)
) {
lastPublishedNavigationSync.current = pendingFloorplanPose
pendingFloorplanNavigationPose.current = null
}
return
}
const previous = lastPublishedNavigationSync.current
if (
previous &&
Math.abs(previous.target[0] - syncTarget.x) < NAVIGATION_SYNC_POSITION_EPSILON &&
Math.abs(previous.target[1] - syncTarget.y) < NAVIGATION_SYNC_POSITION_EPSILON &&
Math.abs(previous.target[2] - syncTarget.z) < NAVIGATION_SYNC_POSITION_EPSILON &&
Math.abs(getAngleDeltaRadians(previous.azimuth, syncSpherical.theta)) <
NAVIGATION_SYNC_AZIMUTH_EPSILON &&
Math.abs(previous.viewWidth - viewWidth) < NAVIGATION_SYNC_VIEW_WIDTH_EPSILON
) {
return
}
lastPublishedNavigationSync.current = {
target: [syncTarget.x, syncTarget.y, syncTarget.z],
azimuth: syncSpherical.theta,
viewWidth,
}
useEditor.getState().publishNavigationSyncPose({
source: '3d',
target: [syncTarget.x, syncTarget.y, syncTarget.z],
azimuth: syncSpherical.theta,
viewWidth,
})
}, [camera, isFirstPersonMode, viewportSize])
useEffect(() => {
if (isFirstPersonMode || (!isFloorplanOpen && currentLevelId === null)) return
const frame = requestAnimationFrame(() => {
lastPublishedNavigationSync.current = null
publishCurrentNavigationPose()
})
return () => {
cancelAnimationFrame(frame)
}
}, [currentLevelId, isFirstPersonMode, isFloorplanOpen, publishCurrentNavigationPose])
// Configure mouse buttons based on control mode and camera mode
const cameraMode = useViewer((state) => state.cameraMode)
const mouseButtons = useMemo(() => {
// Use ZOOM for orthographic camera, DOLLY for perspective camera
const wheelAction =
@@ -170,6 +483,8 @@ export const CustomCameraControls = () => {
}, [cameraMode, isPreviewMode, isInteracting])
useEffect(() => {
if (isFirstPersonMode) return
const keyState = {
shiftRight: false,
shiftLeft: false,
@@ -177,6 +492,45 @@ export const CustomCameraControls = () => {
controlLeft: false,
space: false,
}
let ownsNavigationCursor = false
let panPointerId: number | null = null
let panPointerButton: number | null = null
const setNavigationCursor = (cursor: 'grab' | 'grabbing') => {
document.body.style.cursor = cursor
gl.domElement.style.cursor = cursor
ownsNavigationCursor = true
}
const clearNavigationCursor = () => {
if (
ownsNavigationCursor &&
(document.body.style.cursor === 'grab' || document.body.style.cursor === 'grabbing')
) {
document.body.style.cursor = ''
}
if (ownsNavigationCursor && gl.domElement.style.cursor === 'grab') {
gl.domElement.style.cursor = ''
}
if (ownsNavigationCursor && gl.domElement.style.cursor === 'grabbing') {
gl.domElement.style.cursor = ''
}
ownsNavigationCursor = false
}
const updateNavigationCursor = () => {
if (panPointerId !== null) {
setNavigationCursor('grabbing')
return
}
if (keyState.space) {
setNavigationCursor('grab')
return
}
clearNavigationCursor()
}
const updateConfig = () => {
if (!controls.current) return
@@ -204,8 +558,10 @@ export const CustomCameraControls = () => {
const onKeyDown = (event: KeyboardEvent) => {
if (event.code === 'Space') {
if (isEditableKeyboardTarget(event.target)) return
event.preventDefault()
keyState.space = true
document.body.style.cursor = 'grab'
updateNavigationCursor()
}
if (event.code === 'ShiftRight') {
keyState.shiftRight = true
@@ -225,7 +581,11 @@ export const CustomCameraControls = () => {
const onKeyUp = (event: KeyboardEvent) => {
if (event.code === 'Space') {
keyState.space = false
document.body.style.cursor = ''
if (panPointerButton === 0) {
panPointerId = null
panPointerButton = null
}
updateNavigationCursor()
}
if (event.code === 'ShiftRight') {
keyState.shiftRight = false
@@ -242,15 +602,58 @@ export const CustomCameraControls = () => {
updateConfig()
}
const onPointerDown = (event: PointerEvent) => {
if (!(event.target instanceof Node) || !gl.domElement.contains(event.target)) return
pendingFloorplanNavigationPose.current = null
if (event.button !== 1 && !(event.button === 0 && keyState.space)) return
panPointerId = event.pointerId
panPointerButton = event.button
updateNavigationCursor()
}
const onWheel = () => {
pendingFloorplanNavigationPose.current = null
}
const onPointerUp = (event: PointerEvent) => {
if (panPointerId === null) return
if (event.type !== 'pointercancel' && event.pointerId !== panPointerId) return
if (event.type !== 'pointercancel' && event.button !== panPointerButton) return
panPointerId = null
panPointerButton = null
updateNavigationCursor()
}
const onBlur = () => {
keyState.space = false
panPointerId = null
panPointerButton = null
clearNavigationCursor()
updateConfig()
}
document.addEventListener('keydown', onKeyDown)
document.addEventListener('keyup', onKeyUp)
window.addEventListener('pointerdown', onPointerDown, true)
window.addEventListener('pointerup', onPointerUp, true)
window.addEventListener('pointercancel', onPointerUp, true)
window.addEventListener('blur', onBlur)
gl.domElement.addEventListener('wheel', onWheel, { passive: true })
updateConfig()
return () => {
document.removeEventListener('keydown', onKeyDown)
document.removeEventListener('keyup', onKeyUp)
window.removeEventListener('pointerdown', onPointerDown, true)
window.removeEventListener('pointerup', onPointerUp, true)
window.removeEventListener('pointercancel', onPointerUp, true)
window.removeEventListener('blur', onBlur)
gl.domElement.removeEventListener('wheel', onWheel)
clearNavigationCursor()
}
}, [cameraMode, isPreviewMode])
}, [cameraMode, gl, isPreviewMode, isFirstPersonMode])
// Preview mode: auto-navigate camera to selected node (viewer behavior)
const previewTargetNodeId = isPreviewMode
@@ -258,7 +661,7 @@ export const CustomCameraControls = () => {
: null
useEffect(() => {
if (!(isPreviewMode && controls.current)) return
if (!(isPreviewMode && controls.current) || isFirstPersonMode) return
const nodes = useScene.getState().nodes
let node = previewTargetNodeId ? nodes[previewTargetNodeId] : null
@@ -318,7 +721,7 @@ export const CustomCameraControls = () => {
tempCenter.z,
true,
)
}, [isPreviewMode, previewTargetNodeId])
}, [isPreviewMode, isFirstPersonMode, previewTargetNodeId])
// Preset capture auto-framing — when `setCaptureMode({ mode: 'preset',
// isolated })` fires, fly the camera to a pose that fits the union
@@ -329,6 +732,7 @@ export const CustomCameraControls = () => {
// modal opened.
const captureMode = useEditor((s) => s.captureMode)
useEffect(() => {
if (isFirstPersonMode) return
if (!controls.current) return
if (captureMode.mode !== 'preset') return
const ids = captureMode.isolated
@@ -417,11 +821,11 @@ export const CustomCameraControls = () => {
true,
)
}
}, [captureMode])
}, [captureMode, isFirstPersonMode])
useEffect(() => {
const handleNodeCapture = ({ nodeId }: CameraControlEvent) => {
if (!controls.current) return
if (isFirstPersonMode || !controls.current) return
const position = new Vector3()
const target = new Vector3()
@@ -439,7 +843,7 @@ export const CustomCameraControls = () => {
})
}
const handleNodeView = ({ nodeId }: CameraControlEvent) => {
if (!controls.current) return
if (isFirstPersonMode || !controls.current) return
const node = useScene.getState().nodes[nodeId]
if (!node?.camera) return
@@ -457,7 +861,7 @@ export const CustomCameraControls = () => {
}
const handleTopView = () => {
if (!controls.current) return
if (isFirstPersonMode || !controls.current) return
const currentPolarAngle = controls.current.polarAngle
@@ -469,7 +873,7 @@ export const CustomCameraControls = () => {
}
const handleOrbitCW = () => {
if (!controls.current) return
if (isFirstPersonMode || !controls.current) return
const currentAzimuth = controls.current.azimuthAngle
const currentPolar = controls.current.polarAngle
@@ -481,7 +885,7 @@ export const CustomCameraControls = () => {
}
const handleOrbitCCW = () => {
if (!controls.current) return
if (isFirstPersonMode || !controls.current) return
const currentAzimuth = controls.current.azimuthAngle
const currentPolar = controls.current.polarAngle
@@ -497,7 +901,7 @@ export const CustomCameraControls = () => {
}
const handleFitScene = ({ bounds }: CameraControlFitSceneEvent) => {
if (!controls.current || isPreviewMode) return
if (isFirstPersonMode || !controls.current || isPreviewMode) return
if (!bounds) {
// Restore default framing pose when no bounds were computed.
controls.current.setLookAt(20, 20, 20, 0, 0, 0, true)
@@ -530,7 +934,7 @@ export const CustomCameraControls = () => {
emitter.off('camera-controls:orbit-ccw', handleOrbitCCW)
emitter.off('camera-controls:fit-scene', handleFitScene)
}
}, [focusNode, isPreviewMode])
}, [focusNode, isPreviewMode, isFirstPersonMode])
const onTransitionStart = useCallback(() => {
useViewer.getState().setCameraDragging(true)
@@ -540,10 +944,6 @@ export const CustomCameraControls = () => {
useViewer.getState().setCameraDragging(false)
}, [])
if (isFirstPersonMode) {
return null
}
// Preset capture mode frames a single subtree (often a 0.3–2m preset),
// so the default 6m minDistance prevents the user from getting close
// enough to compose a good thumbnail. Relax the clamp to 0.5m while
@@ -552,6 +952,10 @@ export const CustomCameraControls = () => {
const isPresetCapture = captureMode.mode === 'preset'
const minDistance = isPresetCapture ? 0.5 : 6
if (isFirstPersonMode) {
return null
}
return (
<CameraControls
makeDefault
@@ -560,6 +964,7 @@ export const CustomCameraControls = () => {
minDistance={minDistance}
minPolarAngle={0}
mouseButtons={mouseButtons}
onUpdate={publishCurrentNavigationPose}
onRest={onRest}
onSleep={onRest}
onTransitionStart={onTransitionStart}
packages/editor/src/components/editor/first-person/build-collider-world.test.ts
+149
View File
@@ -0,0 +1,149 @@
import { afterEach, describe, expect, test } from 'bun:test'
import {
type AnyNode,
type AnyNodeDefinition,
CeilingNode,
ColumnNode,
ElevatorNode,
LevelNode,
nodeRegistry,
registerNode,
ShelfNode,
SiteNode,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { BoxGeometry, Group, Mesh, MeshBasicMaterial } from 'three'
import { buildFirstPersonColliderWorldFromRegistry } from './build-collider-world'
function registerColliderDefinition(
kind: AnyNode['type'],
schema: AnyNodeDefinition['schema'],
category: AnyNodeDefinition['category'],
surfaceRole?: AnyNodeDefinition['surfaceRole'],
) {
registerNode({
kind,
schema,
schemaVersion: 1,
category,
surfaceRole,
capabilities: {},
} as AnyNodeDefinition)
}
function mountNode(
node: AnyNode,
box: [number, number, number],
position: [number, number, number],
) {
const group = new Group()
const mesh = new Mesh(new BoxGeometry(box[0], box[1], box[2]), new MeshBasicMaterial())
mesh.position.set(position[0], position[1], position[2])
group.add(mesh)
group.updateMatrixWorld(true)
sceneRegistry.nodes.set(node.id, group)
sceneRegistry.byType[node.type]!.add(node.id)
}
function mountRegistryGroup(node: AnyNode) {
const group = new Group()
group.updateMatrixWorld(true)
sceneRegistry.nodes.set(node.id, group)
sceneRegistry.byType[node.type]!.add(node.id)
}
function setSceneNodes(nodes: AnyNode[]) {
useScene.setState({
nodes: Object.fromEntries(nodes.map((node) => [node.id, node])),
rootNodeIds: nodes.map((node) => node.id),
} as never)
}
describe('buildFirstPersonColliderWorldFromRegistry', () => {
afterEach(() => {
sceneRegistry.clear()
nodeRegistry._reset()
useScene.setState({ nodes: {}, rootNodeIds: [] } as never)
})
test('includes structure and furnish nodes discovered through the node registry', () => {
registerColliderDefinition('column', ColumnNode, 'structure')
registerColliderDefinition('shelf', ShelfNode, 'furnish')
const column = ColumnNode.parse({ id: 'column_test' })
const shelf = ShelfNode.parse({ id: 'shelf_test', position: [3, 0, 0] })
setSceneNodes([column, shelf])
mountNode(column, [1, 2, 1], [0, 1, 0])
mountNode(shelf, [2, 1, 1], [3, 0.5, 0])
const world = buildFirstPersonColliderWorldFromRegistry()
expect(world).not.toBeNull()
expect(world?.bounds?.min.x).toBeCloseTo(-0.5)
expect(world?.bounds?.max.x).toBeCloseTo(4)
world?.dispose()
})
test('excludes ceiling surfaces so the walkthrough player passes through them', () => {
registerColliderDefinition('column', ColumnNode, 'structure')
registerColliderDefinition('ceiling', CeilingNode, 'structure', 'ceiling')
const column = ColumnNode.parse({ id: 'column_test' })
const ceiling = CeilingNode.parse({ id: 'ceiling_test', polygon: [] })
setSceneNodes([column, ceiling])
mountNode(column, [1, 2, 1], [0, 1, 0])
// A wide ceiling at head height — if it were collected, bounds would span ±5.
mountNode(ceiling, [10, 0.1, 10], [0, 2.5, 0])
const world = buildFirstPersonColliderWorldFromRegistry()
expect(world).not.toBeNull()
// Bounds reflect only the 1×1 column; the ceiling contributed no geometry.
expect(world?.bounds?.min.x).toBeCloseTo(-0.5)
expect(world?.bounds?.max.x).toBeCloseTo(0.5)
world?.dispose()
})
test('leaves elevators to their dedicated dynamic collider meshes', () => {
registerColliderDefinition('elevator', ElevatorNode, 'structure')
const elevator = ElevatorNode.parse({ id: 'elevator_test' })
setSceneNodes([elevator])
mountNode(elevator, [2, 3, 2], [0, 1.5, 0])
const world = buildFirstPersonColliderWorldFromRegistry()
expect(world).toBeNull()
})
test('adds a fallback floor for a visible level with no slab', () => {
const level = LevelNode.parse({ id: 'level_test', level: 0 })
setSceneNodes([level])
mountRegistryGroup(level)
const world = buildFirstPersonColliderWorldFromRegistry()
expect(world).not.toBeNull()
expect(world?.bounds?.min.y).toBeCloseTo(-0.08)
expect(world?.bounds?.max.y).toBeCloseTo(0)
world?.dispose()
})
test('adds a site ground collider so a spawn on bare ground has a floor', () => {
const site = SiteNode.parse({ id: 'site_test' })
setSceneNodes([site])
mountRegistryGroup(site)
const world = buildFirstPersonColliderWorldFromRegistry()
expect(world).not.toBeNull()
// Ground slab sits just below the site ground plane (y = 0).
expect(world?.bounds?.min.y).toBeCloseTo(-0.08)
expect(world?.bounds?.max.y).toBeCloseTo(0)
// Default site footprint falls back to the 30 m minimum size.
expect(world?.bounds?.min.x).toBeCloseTo(-15)
expect(world?.bounds?.max.x).toBeCloseTo(15)
world?.dispose()
})
})
packages/editor/src/components/editor/first-person/build-collider-world.ts
+158 -63
View File
@@ -1,8 +1,10 @@
import {
type AnyNode,
type AnyNodeId,
type DoorNode,
getGarageVisibleOpeningRatio,
isOperationDoorType,
nodeRegistry,
sceneRegistry,
useInteractive,
useScene,
@@ -10,21 +12,11 @@ import {
import * as THREE from 'three'
import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js'
import { acceleratedRaycast, computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh'
const COLLIDER_NODE_TYPES = [
'wall',
'fence',
'slab',
'stair',
'stair-segment',
'roof',
'roof-segment',
'door',
'window',
'item',
] as const
import { computeSceneBoundsXZ } from '../../../lib/scene-bounds'
const SKIPPED_MESH_NAMES = new Set(['cutout', 'collision-mesh'])
const COLLIDER_NODE_CATEGORIES = new Set(['structure', 'furnish'])
const DEDICATED_COLLIDER_NODE_TYPES = new Set<AnyNode['type']>(['elevator'])
const COLLIDER_MATERIAL = new THREE.MeshBasicMaterial()
const DOWN = new THREE.Vector3(0, -1, 0)
const UP = new THREE.Vector3(0, 1, 0)
@@ -32,6 +24,9 @@ const SPAWN_EYE_HEIGHT = 1.65
const RAYCAST_CLEARANCE = 25
const DOOR_LEAF_COLLIDER_DEPTH = 0.06
const OPERATION_DOOR_COLLIDER_OPEN_THRESHOLD = 0.85
const LEVEL_FALLBACK_FLOOR_THICKNESS = 0.08
const LEVEL_FALLBACK_FLOOR_PADDING = 2
const LEVEL_FALLBACK_FLOOR_MIN_SIZE = 30
export const FIRST_PERSON_SPAWN_EYE_HEIGHT = SPAWN_EYE_HEIGHT
@@ -46,7 +41,9 @@ export type FirstPersonSpawn = {
yaw: number
}
type ColliderNodeType = (typeof COLLIDER_NODE_TYPES)[number]
type LevelNode = Extract<AnyNode, { type: 'level' }>
type SiteNode = Extract<AnyNode, { type: 'site' }>
type SceneNodes = ReturnType<typeof useScene.getState>['nodes']
function isMesh(object: THREE.Object3D): object is THREE.Mesh {
return 'isMesh' in object && (object as THREE.Mesh).isMesh
@@ -56,6 +53,126 @@ function isColliderMaterialVisible(material: THREE.Material | THREE.Material[])
return Array.isArray(material) ? material.some((entry) => entry.visible) : material.visible
}
function isGenericColliderNode(node: AnyNode) {
if (node.visible === false) return false
if (DEDICATED_COLLIDER_NODE_TYPES.has(node.type)) return false
const def = nodeRegistry.get(node.type)
// Ceilings are a transparent mount surface for fixtures (lights, fans), not a
// walkable or blocking structure — the walkthrough player must pass through
// them rather than be held up as if standing on a floor slab.
if (def?.surfaceRole === 'ceiling') return false
return COLLIDER_NODE_CATEGORIES.has(def?.category ?? '')
}
function createBoxColliderGeometry(width: number, height: number, depth: number) {
const sourceGeometry = new THREE.BoxGeometry(width, height, depth).toNonIndexed()
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', sourceGeometry.getAttribute('position').clone())
geometry.setAttribute('normal', sourceGeometry.getAttribute('normal').clone())
sourceGeometry.dispose()
return geometry
}
function getVisibleLevelChildren(level: LevelNode, nodes: SceneNodes) {
return level.children
.map((childId) => nodes[childId as AnyNodeId])
.filter((child): child is AnyNode => Boolean(child && child.visible !== false))
}
function createLevelFallbackFloorGeometry(level: LevelNode, nodes: SceneNodes) {
if (level.visible === false) return null
const children = getVisibleLevelChildren(level, nodes)
if (children.some((child) => child.type === 'slab')) return null
const levelObject = sceneRegistry.nodes.get(level.id)
if (!levelObject?.visible) return null
const bounds = computeSceneBoundsXZ(children)
const [centerX, centerZ] = bounds?.center ?? [0, 0]
const [boundsWidth, boundsDepth] = bounds?.size ?? [0, 0]
const width = Math.max(
boundsWidth + LEVEL_FALLBACK_FLOOR_PADDING * 2,
LEVEL_FALLBACK_FLOOR_MIN_SIZE,
)
const depth = Math.max(
boundsDepth + LEVEL_FALLBACK_FLOOR_PADDING * 2,
LEVEL_FALLBACK_FLOOR_MIN_SIZE,
)
const geometry = createBoxColliderGeometry(width, LEVEL_FALLBACK_FLOOR_THICKNESS, depth)
levelObject.updateWorldMatrix(true, false)
geometry.applyMatrix4(
new THREE.Matrix4().makeTranslation(centerX, -LEVEL_FALLBACK_FLOOR_THICKNESS / 2, centerZ),
)
geometry.applyMatrix4(levelObject.matrixWorld)
return geometry
}
function collectLevelFallbackFloorGeometries(nodes: SceneNodes) {
const geometries: THREE.BufferGeometry[] = []
for (const levelId of sceneRegistry.byType.level!) {
const node = nodes[levelId as AnyNodeId]
if (node?.type !== 'level') continue
const geometry = createLevelFallbackFloorGeometry(node, nodes)
if (geometry) geometries.push(geometry)
}
return geometries
}
// The visible ground is the site node's ground mesh, but `site` is a `site`
// category node and therefore excluded from the generic collider sweep. Without
// a dedicated collider, a spawn on the bare ground (no slab, or not parented to
// a level that triggers the per-level fallback) has no floor to stand on and the
// walkthrough player falls through. Derive a thin ground slab from node data (not
// the rendered mesh) so it exists regardless of geometry-mount timing, sized to
// cover the whole scene footprint at the site's ground plane.
function createSiteGroundColliderGeometry(site: SiteNode, nodes: SceneNodes) {
if (site.visible === false) return null
const siteObject = sceneRegistry.nodes.get(site.id)
if (!siteObject?.visible) return null
const bounds = computeSceneBoundsXZ(nodes)
const [centerX, centerZ] = bounds?.center ?? [0, 0]
const [boundsWidth, boundsDepth] = bounds?.size ?? [0, 0]
const width = Math.max(
boundsWidth + LEVEL_FALLBACK_FLOOR_PADDING * 2,
LEVEL_FALLBACK_FLOOR_MIN_SIZE,
)
const depth = Math.max(
boundsDepth + LEVEL_FALLBACK_FLOOR_PADDING * 2,
LEVEL_FALLBACK_FLOOR_MIN_SIZE,
)
const geometry = createBoxColliderGeometry(width, LEVEL_FALLBACK_FLOOR_THICKNESS, depth)
siteObject.updateWorldMatrix(true, false)
geometry.applyMatrix4(
new THREE.Matrix4().makeTranslation(centerX, -LEVEL_FALLBACK_FLOOR_THICKNESS / 2, centerZ),
)
geometry.applyMatrix4(siteObject.matrixWorld)
return geometry
}
function collectSiteGroundColliderGeometries(nodes: SceneNodes) {
const geometries: THREE.BufferGeometry[] = []
for (const siteId of sceneRegistry.byType.site ?? []) {
const node = nodes[siteId as AnyNodeId]
if (node?.type !== 'site') continue
const geometry = createSiteGroundColliderGeometry(node, nodes)
if (geometry) geometries.push(geometry)
}
return geometries
}
// Decode any attribute (interleaved, quantized/normalized integer, Float64…) into a
// plain, non-normalized Float32Array BufferAttribute. mergeGeometries() requires every
// merged geometry to share the same typed-array constructor for matching attributes, so
@@ -107,16 +224,12 @@ function cloneWorldGeometry(mesh: THREE.Mesh) {
return cleanGeometry
}
function shouldSkipColliderNode(nodeId: string, type: (typeof COLLIDER_NODE_TYPES)[number]) {
if (type === 'window') {
const node = useScene.getState().nodes[nodeId as AnyNodeId]
return node?.type === 'window' && node.openingKind === 'opening'
function shouldSkipColliderNode(node: AnyNode) {
if (node.type === 'window') {
return node.openingKind === 'opening'
}
if (type !== 'door') return false
const node = useScene.getState().nodes[nodeId as AnyNodeId]
if (!node || node.type !== 'door') return false
if (node.type !== 'door') return false
if (!node.segments.length) return true
@@ -145,15 +258,7 @@ function createDoorLeafColliderGeometry(root: THREE.Object3D, node: DoorNode) {
const visibleHeight = leafH * (1 - openAmount)
if (visibleHeight <= 0.12) return null
const sourceGeometry = new THREE.BoxGeometry(
leafW,
visibleHeight,
DOOR_LEAF_COLLIDER_DEPTH,
).toNonIndexed()
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', sourceGeometry.getAttribute('position').clone())
geometry.setAttribute('normal', sourceGeometry.getAttribute('normal').clone())
sourceGeometry.dispose()
const geometry = createBoxColliderGeometry(leafW, visibleHeight, DOOR_LEAF_COLLIDER_DEPTH)
const visibleCenterY = leafCenterY - leafH / 2 + visibleHeight / 2
geometry.applyMatrix4(
root.matrixWorld.clone().multiply(new THREE.Matrix4().makeTranslation(0, visibleCenterY, 0)),
@@ -174,15 +279,7 @@ function createDoorLeafColliderGeometry(root: THREE.Object3D, node: DoorNode) {
const clampedSwingAngle = Math.max(0, Math.min(Math.PI / 2, swingAngle ?? 0))
const leafSwingRotation = clampedSwingAngle * swingDirectionSign * hingeDirectionSign
const sourceGeometry = new THREE.BoxGeometry(
leafW,
leafH,
DOOR_LEAF_COLLIDER_DEPTH,
).toNonIndexed()
const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', sourceGeometry.getAttribute('position').clone())
geometry.setAttribute('normal', sourceGeometry.getAttribute('normal').clone())
sourceGeometry.dispose()
const geometry = createBoxColliderGeometry(leafW, leafH, DOOR_LEAF_COLLIDER_DEPTH)
const matrix = root.matrixWorld
.clone()
.multiply(new THREE.Matrix4().makeTranslation(hingeX, 0, 0))
@@ -193,16 +290,17 @@ function createDoorLeafColliderGeometry(root: THREE.Object3D, node: DoorNode) {
return geometry
}
function buildRegisteredNodeTypeLookup() {
const nodeTypes = new Map<string, ColliderNodeType>()
function buildRegisteredColliderNodeIds(nodes: SceneNodes) {
const nodeIds = new Set<string>()
for (const type of COLLIDER_NODE_TYPES) {
for (const nodeId of sceneRegistry.byType[type]!) {
nodeTypes.set(nodeId, type)
}
for (const nodeId of sceneRegistry.nodes.keys()) {
const node = nodes[nodeId as AnyNodeId]
if (!node || !isGenericColliderNode(node)) continue
if (shouldSkipColliderNode(node)) continue
nodeIds.add(nodeId)
}
return nodeTypes
return nodeIds
}
function collectColliderGeometriesFromNode(
@@ -210,7 +308,7 @@ function collectColliderGeometriesFromNode(
rootNodeId: string,
visitedMeshes: WeakSet<THREE.Object3D>,
registeredObjectIds: Map<THREE.Object3D, string>,
registeredNodeTypes: Map<string, ColliderNodeType>,
registeredColliderNodeIds: Set<string>,
): THREE.BufferGeometry[] {
const geometries: THREE.BufferGeometry[] = []
@@ -232,12 +330,9 @@ function collectColliderGeometriesFromNode(
for (const child of object.children) {
const childNodeId = registeredObjectIds.get(child)
if (childNodeId && childNodeId !== rootNodeId) {
const childType = registeredNodeTypes.get(childNodeId)
if (childType && COLLIDER_NODE_TYPES.includes(childType)) {
if (childNodeId && childNodeId !== rootNodeId && registeredColliderNodeIds.has(childNodeId)) {
continue
}
}
visit(child)
}
@@ -249,26 +344,24 @@ function collectColliderGeometriesFromNode(
}
export function buildFirstPersonColliderWorldFromRegistry(): FirstPersonColliderWorld | null {
const nodes = useScene.getState().nodes
const geometries: THREE.BufferGeometry[] = []
const visitedMeshes = new WeakSet<THREE.Object3D>()
const registeredNodeTypes = buildRegisteredNodeTypeLookup()
const registeredColliderNodeIds = buildRegisteredColliderNodeIds(nodes)
const registeredObjectIds = new Map<THREE.Object3D, string>()
for (const [nodeId, object] of sceneRegistry.nodes) {
registeredObjectIds.set(object, nodeId)
}
for (const type of COLLIDER_NODE_TYPES) {
for (const nodeId of sceneRegistry.byType[type]!) {
if (shouldSkipColliderNode(nodeId, type)) continue
for (const nodeId of registeredColliderNodeIds) {
const node = nodes[nodeId as AnyNodeId]
if (!node) continue
const root = sceneRegistry.nodes.get(nodeId)
if (!root) continue
if (type === 'door') {
const node = useScene.getState().nodes[nodeId as AnyNodeId]
if (node?.type !== 'door') continue
if (node.type === 'door') {
const doorGeometry = createDoorLeafColliderGeometry(root, node)
if (doorGeometry) {
geometries.push(doorGeometry)
@@ -283,11 +376,13 @@ export function buildFirstPersonColliderWorldFromRegistry(): FirstPersonCollider
nodeId,
visitedMeshes,
registeredObjectIds,
registeredNodeTypes,
registeredColliderNodeIds,
),
)
}
}
geometries.push(...collectLevelFallbackFloorGeometries(nodes))
geometries.push(...collectSiteGroundColliderGeometries(nodes))
if (geometries.length === 0) {
return null
@@ -311,7 +406,7 @@ export function buildFirstPersonColliderWorldFromRegistry(): FirstPersonCollider
;(bvhGeometry as any).computeBoundsTree = computeBoundsTree
;(bvhGeometry as any).disposeBoundsTree = disposeBoundsTree
bvhGeometry.computeBoundsTree?.({
maxLeafTris: 12,
maxLeafSize: 12,
strategy: 0,
} as never)
bvhGeometry.computeBoundingBox()
packages/editor/src/components/editor/floorplan-panel.tsx
+871 -57
View File
File diff suppressed because it is too large Load Diff
packages/editor/src/components/editor/group-move-handle.tsx
+55 -21
View File
@@ -1,12 +1,19 @@
'use client'
import { type AnyNode, type AnyNodeId, useLiveNodeOverrides, useScene } from '@pascal-app/core'
import {
type AnyNode,
type AnyNodeId,
useLiveNodeOverrides,
useLiveTransforms,
useScene,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { createPortal, type ThreeEvent, useThree } from '@react-three/fiber'
import { useEffect, useMemo, useRef, useState } from 'react'
import { OrthographicCamera, Plane, Vector2, Vector3 } from 'three'
import { sfxEmitter } from '../../lib/sfx-bus'
import useEditor from '../../store/use-editor'
import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
import {
CORNER_OFFSET,
classifyParticipant,
@@ -41,7 +48,10 @@ export function GroupMoveHandle() {
const nodes = useScene((s) => s.nodes)
const participantIds = useMemo(
() => selectedIds.filter((id) => classifyParticipant(nodes[id as AnyNodeId], levelId) !== null),
() =>
selectedIds.filter(
(id) => classifyParticipant(nodes[id as AnyNodeId], levelId, nodes) !== null,
),
[selectedIds, levelId, nodes],
)
@@ -103,6 +113,7 @@ function GroupMoveHandleInner({ ids }: { ids: string[] }) {
const activate = (event: ThreeEvent<PointerEvent>) => {
event.stopPropagation()
suppressBoxSelectForPointer(event)
frozenCorner.current = rest.corner.clone()
const planeY = rest.baseY
@@ -159,18 +170,28 @@ function GroupMoveHandleInner({ ids }: { ids: string[] }) {
lastSnap = [dx, dz]
}
const overrides = useLiveNodeOverrides.getState()
const overrideEntries: Array<readonly [string, Record<string, unknown>]> = []
const liveTransforms = useLiveTransforms.getState()
for (const s of starts) {
if (s.kind === 'endpoint') {
overrides.set(s.id, {
overrideEntries.push([
s.id,
{
start: [s.start[0] + dx, s.start[1] + dz],
end: [s.end[0] + dx, s.end[1] + dz],
})
},
])
} else {
// Slide on the floor: XZ shift, Y and rotation untouched.
overrides.set(s.id, {
position: [s.position[0] + dx, s.position[1], s.position[2] + dz],
})
const position: [number, number, number] = [
s.position[0] + dx,
s.position[1],
s.position[2] + dz,
]
overrideEntries.push([s.id, { position }])
if (s.kind === 'scalar') {
liveTransforms.set(s.id, { position, rotation: s.rotation })
}
}
useScene.getState().markDirty(s.id)
}
@@ -178,16 +199,31 @@ function GroupMoveHandleInner({ ids }: { ids: string[] }) {
// Shared endpoints of connected neighbours follow by the same delta so
// the junction stays welded; the far end stays put.
for (const l of links) {
overrides.set(l.id, {
overrideEntries.push([
l.id,
{
start: l.startLinked ? [l.start[0] + dx, l.start[1] + dz] : l.start,
end: l.endLinked ? [l.end[0] + dx, l.end[1] + dz] : l.end,
})
},
])
useScene.getState().markDirty(l.id)
}
useLiveNodeOverrides.getState().setMany(overrideEntries)
setLiveDelta([dx, dz])
}
const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
const clearLivePreviews = () => {
const overrides = useLiveNodeOverrides.getState()
const liveTransforms = useLiveTransforms.getState()
for (const id of affectedIds) {
overrides.clear(id)
liveTransforms.clear(id)
useScene.getState().markDirty(id)
}
}
const cleanup = () => {
window.removeEventListener('pointermove', onMove)
window.removeEventListener('pointerup', onUp)
@@ -201,8 +237,6 @@ function GroupMoveHandleInner({ ids }: { ids: string[] }) {
dragCleanupRef.current = null
}
const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
const commitFromOverrides = () => {
const overrides = useLiveNodeOverrides.getState()
const updates: { id: AnyNodeId; data: Partial<AnyNode> }[] = []
@@ -223,22 +257,22 @@ function GroupMoveHandleInner({ ids }: { ids: string[] }) {
// tracked set — collapsing the whole group move into one undo.
useScene.temporal.getState().resume()
if (updates.length > 0) useScene.getState().updateNodes(updates)
for (const id of affectedIds) {
useLiveNodeOverrides.getState().clear(id)
useScene.getState().markDirty(id)
}
clearLivePreviews()
cleanup()
}
const onCancel = () => {
for (const id of affectedIds) {
useLiveNodeOverrides.getState().clear(id)
useScene.getState().markDirty(id)
}
clearLivePreviews()
cleanup()
}
dragCleanupRef.current = cleanup
dragCleanupRef.current = () => {
clearLivePreviews()
cleanup()
}
for (const id of affectedIds) {
useLiveTransforms.getState().clear(id)
}
window.addEventListener('pointermove', onMove)
window.addEventListener('pointerup', onUp)
window.addEventListener('pointercancel', onCancel)
packages/editor/src/components/editor/group-rotate-handle.tsx
+54 -23
View File
@@ -1,12 +1,19 @@
'use client'
import { type AnyNode, type AnyNodeId, useLiveNodeOverrides, useScene } from '@pascal-app/core'
import {
type AnyNode,
type AnyNodeId,
useLiveNodeOverrides,
useLiveTransforms,
useScene,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { createPortal, type ThreeEvent, useThree } from '@react-three/fiber'
import { useEffect, useMemo, useRef, useState } from 'react'
import { OrthographicCamera, Plane, Vector2, Vector3 } from 'three'
import { sfxEmitter } from '../../lib/sfx-bus'
import useEditor from '../../store/use-editor'
import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
import {
CORNER_OFFSET,
classifyParticipant,
@@ -35,11 +42,11 @@ import {
const ROTATE_SNAP = Math.PI / 12 // 15°
/**
* Group-rotate gizmo. When 2+ "movable" nodes (position + rotation, sitting
* directly on the active level) are selected, a single rotation handle appears
* at the selection's bounding-box center. Dragging it spins every selected node
* rigidly around that shared center — orbiting each node's position AND turning
* its yaw by the same delta, so the group rotates as one piece.
* Group-rotate gizmo. When 2+ transformable nodes in the active level frame are
* selected, a single rotation handle appears at the selection's bounding-box
* center. Dragging it spins every selected node rigidly around that shared
* center — orbiting each node's position AND turning its yaw by the same delta,
* so the group rotates as one piece.
*
* The single-selection case is handled by `NodeArrowHandles`; a full-level
* box-select promotes to a building selection, so neither reaches this gizmo.
@@ -55,7 +62,10 @@ export function GroupRotateHandle() {
const nodes = useScene((s) => s.nodes)
const participantIds = useMemo(
() => selectedIds.filter((id) => classifyParticipant(nodes[id as AnyNodeId], levelId) !== null),
() =>
selectedIds.filter(
(id) => classifyParticipant(nodes[id as AnyNodeId], levelId, nodes) !== null,
),
[selectedIds, levelId, nodes],
)
@@ -123,6 +133,7 @@ function GroupRotateHandleInner({ ids }: { ids: string[] }) {
const activate = (event: ThreeEvent<PointerEvent>) => {
event.stopPropagation()
suppressBoxSelectForPointer(event)
frozenRest.current = { pivot: rest.pivot.clone(), corner: rest.corner.clone() }
const center = rest.pivot.clone()
@@ -200,10 +211,14 @@ function GroupRotateHandleInner({ ids }: { ids: string[] }) {
const dz = z - center.z
return [center.x + dx * cos - dz * sin, center.z + dx * sin + dz * cos]
}
const overrides = useLiveNodeOverrides.getState()
const overrideEntries: Array<readonly [string, Record<string, unknown>]> = []
const liveTransforms = useLiveTransforms.getState()
for (const s of starts) {
if (s.kind === 'endpoint') {
overrides.set(s.id, { start: rot(s.start[0], s.start[1]), end: rot(s.end[0], s.end[1]) })
overrideEntries.push([
s.id,
{ start: rot(s.start[0], s.start[1]), end: rot(s.end[0], s.end[1]) },
])
} else {
const [px, pz] = rot(s.position[0], s.position[2])
const position: Vec3 = [px, s.position[1], pz]
@@ -211,7 +226,10 @@ function GroupRotateHandleInner({ ids }: { ids: string[] }) {
s.kind === 'vec3'
? ([s.rotation[0], s.rotation[1] - delta, s.rotation[2]] as Vec3)
: s.rotation - delta
overrides.set(s.id, { position, rotation })
overrideEntries.push([s.id, { position, rotation }])
if (s.kind === 'scalar') {
liveTransforms.set(s.id, { position, rotation: s.rotation - delta })
}
}
useScene.getState().markDirty(s.id)
}
@@ -220,12 +238,16 @@ function GroupRotateHandleInner({ ids }: { ids: string[] }) {
// (rot is deterministic, so it lands exactly on the selected wall's
// rotated endpoint), keeping the junction welded; the far end stays put.
for (const l of links) {
overrides.set(l.id, {
overrideEntries.push([
l.id,
{
start: l.startLinked ? rot(l.start[0], l.start[1]) : l.start,
end: l.endLinked ? rot(l.end[0], l.end[1]) : l.end,
})
},
])
useScene.getState().markDirty(l.id)
}
useLiveNodeOverrides.getState().setMany(overrideEntries)
if (Math.abs(delta) < 0.0087) {
setGuide(null)
@@ -247,6 +269,17 @@ function GroupRotateHandleInner({ ids }: { ids: string[] }) {
}
}
const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
const clearLivePreviews = () => {
const overrides = useLiveNodeOverrides.getState()
const liveTransforms = useLiveTransforms.getState()
for (const id of affectedIds) {
overrides.clear(id)
liveTransforms.clear(id)
useScene.getState().markDirty(id)
}
}
const cleanup = () => {
window.removeEventListener('pointermove', onMove)
window.removeEventListener('pointerup', onUp)
@@ -260,8 +293,6 @@ function GroupRotateHandleInner({ ids }: { ids: string[] }) {
dragCleanupRef.current = null
}
const affectedIds: AnyNodeId[] = [...starts.map((s) => s.id), ...links.map((l) => l.id)]
const commitFromOverrides = () => {
const overrides = useLiveNodeOverrides.getState()
const updates: { id: AnyNodeId; data: Partial<AnyNode> }[] = []
@@ -282,23 +313,23 @@ function GroupRotateHandleInner({ ids }: { ids: string[] }) {
// one tracked set — collapsing the whole group rotation into one undo.
useScene.temporal.getState().resume()
if (updates.length > 0) useScene.getState().updateNodes(updates)
for (const id of affectedIds) {
useLiveNodeOverrides.getState().clear(id)
useScene.getState().markDirty(id)
}
clearLivePreviews()
cleanup()
}
const onCancel = () => {
// Revert: drop overrides + mark dirty so renderers rebuild from the store.
for (const id of affectedIds) {
useLiveNodeOverrides.getState().clear(id)
useScene.getState().markDirty(id)
}
clearLivePreviews()
cleanup()
}
dragCleanupRef.current = cleanup
dragCleanupRef.current = () => {
clearLivePreviews()
cleanup()
}
for (const id of affectedIds) {
useLiveTransforms.getState().clear(id)
}
window.addEventListener('pointermove', onMove)
window.addEventListener('pointerup', onUp)
window.addEventListener('pointercancel', onCancel)
packages/editor/src/components/editor/group-transform-shared.test.ts
+205
View File
@@ -0,0 +1,205 @@
import { beforeAll, describe, expect, test } from 'bun:test'
import { type AnyNode, type AnyNodeDefinition, nodeRegistry, registerNode } from '@pascal-app/core'
import { z } from 'zod'
import { classifyParticipant, collectParticipants } from './group-transform-shared'
const BUILDING_SCOPED_KIND = 'group-transform-building-scoped-test'
function registerBuildingScopedTestKind() {
if (nodeRegistry.has(BUILDING_SCOPED_KIND)) return
registerNode({
kind: BUILDING_SCOPED_KIND,
schemaVersion: 1,
schema: z.object({ type: z.literal(BUILDING_SCOPED_KIND) }) as never,
category: 'structure',
defaults: () => ({}),
capabilities: {},
floorplanScope: 'building',
renderer: { kind: 'parametric', module: async () => ({ default: () => null }) },
} as AnyNodeDefinition)
}
function registerElevatorTestKind() {
if (nodeRegistry.has('elevator')) return
registerNode({
kind: 'elevator',
schemaVersion: 1,
schema: z.object({ type: z.literal('elevator') }) as never,
category: 'structure',
defaults: () => ({}),
capabilities: { selectable: {} },
floorplanScope: 'building',
renderer: { kind: 'parametric', module: async () => ({ default: () => null }) },
} as AnyNodeDefinition)
}
describe('group transform participants', () => {
beforeAll(() => {
registerBuildingScopedTestKind()
registerElevatorTestKind()
})
test('includes building-scoped positioned nodes for the active level building', () => {
const nodes = {
building_test: {
id: 'building_test',
type: 'building',
children: ['level_test', 'elevator_test'],
},
level_test: {
id: 'level_test',
type: 'level',
parentId: 'building_test',
children: [],
},
elevator_test: {
id: 'elevator_test',
type: BUILDING_SCOPED_KIND,
parentId: 'building_test',
position: [1, 0, 2],
rotation: 0,
},
} as unknown as Record<string, AnyNode>
expect(classifyParticipant(nodes.elevator_test, 'level_test', nodes)).toBe('scalar')
const participants = collectParticipants(['elevator_test'], nodes, 'level_test')
expect(participants.starts).toEqual([
{
id: 'elevator_test',
kind: 'scalar',
position: [1, 0, 2],
rotation: 0,
},
])
})
test('excludes building-scoped positioned nodes from other buildings', () => {
const nodes = {
building_active: {
id: 'building_active',
type: 'building',
children: ['level_test'],
},
building_other: {
id: 'building_other',
type: 'building',
children: ['elevator_test'],
},
level_test: {
id: 'level_test',
type: 'level',
parentId: 'building_active',
children: [],
},
elevator_test: {
id: 'elevator_test',
type: BUILDING_SCOPED_KIND,
parentId: 'building_other',
position: [1, 0, 2],
rotation: 0,
},
} as unknown as Record<string, AnyNode>
expect(classifyParticipant(nodes.elevator_test, 'level_test', nodes)).toBeNull()
expect(collectParticipants(['elevator_test'], nodes, 'level_test').starts).toEqual([])
})
test('uses current elevator defaults for legacy elevators with no saved rotation', () => {
const nodes = {
building_test: {
id: 'building_test',
type: 'building',
children: ['level_test', 'elevator_test'],
},
level_test: {
id: 'level_test',
type: 'level',
parentId: 'building_test',
children: [],
},
elevator_test: {
id: 'elevator_test',
type: 'elevator',
parentId: 'building_test',
position: [3, 0, 4],
},
} as unknown as Record<string, AnyNode>
expect(classifyParticipant(nodes.elevator_test, 'level_test', nodes)).toBe('scalar')
expect(collectParticipants(['elevator_test'], nodes, 'level_test').starts).toEqual([
{
id: 'elevator_test',
kind: 'scalar',
position: [3, 0, 4],
rotation: 0,
},
])
})
test('resolves building-scoped elevators when legacy level parentId is missing', () => {
const nodes = {
building_test: {
id: 'building_test',
type: 'building',
children: ['level_test', 'elevator_test'],
},
level_test: {
id: 'level_test',
type: 'level',
parentId: null,
children: [],
},
elevator_test: {
id: 'elevator_test',
type: 'elevator',
parentId: 'building_test',
position: [7, 0, 8],
},
} as unknown as Record<string, AnyNode>
expect(classifyParticipant(nodes.elevator_test, 'level_test', nodes)).toBe('scalar')
expect(collectParticipants(['elevator_test'], nodes, 'level_test').starts).toEqual([
{
id: 'elevator_test',
kind: 'scalar',
position: [7, 0, 8],
rotation: 0,
},
])
})
test('supports legacy level-parented elevators already loaded in the editor', () => {
const nodes = {
building_test: {
id: 'building_test',
type: 'building',
children: ['level_test'],
},
level_test: {
id: 'level_test',
type: 'level',
parentId: 'building_test',
children: ['elevator_test'],
},
elevator_test: {
id: 'elevator_test',
type: 'elevator',
parentId: 'level_test',
position: [5, 0, 6],
},
} as unknown as Record<string, AnyNode>
expect(classifyParticipant(nodes.elevator_test, 'level_test', nodes)).toBe('scalar')
expect(collectParticipants(['elevator_test'], nodes, 'level_test').starts).toEqual([
{
id: 'elevator_test',
kind: 'scalar',
position: [5, 0, 6],
rotation: 0,
},
])
})
})
packages/editor/src/components/editor/group-transform-shared.ts
+65 -14
View File
@@ -1,4 +1,10 @@
import { type AnyNode, type AnyNodeId, sceneRegistry } from '@pascal-app/core'
import {
type AnyNode,
type AnyNodeId,
nodeRegistry,
resolveBuildingForLevel,
sceneRegistry,
} from '@pascal-app/core'
import { Box3 } from 'three'
// Shared plumbing for the group transform gizmos (rotate + move). Both operate
@@ -26,20 +32,61 @@ const isVec2 = (v: unknown): v is Vec2 =>
// - 'endpoint' start/end tuples (walls, fences)
export type ParticipantKind = 'vec3' | 'scalar' | 'endpoint'
// A selected node qualifies when it sits directly on the active level and its
// placement is one of the transformable shapes. Doors/windows parent to their
// wall (not the level), so they're excluded here and ride their wall.
// A selected node qualifies when it belongs to the active level's horizontal
// frame: either parented to that level, or declared building-scoped and parented
// to the active level's building. Doors/windows parent to their wall, so they're
// excluded here and ride their wall.
function isInGroupTransformScope(
node: AnyNode | undefined,
levelId: string | null,
sceneNodes: Record<string, AnyNode | undefined>,
): boolean {
if (!node || !levelId) return false
if (node.parentId === levelId) return true
if (nodeRegistry.get(node.type)?.floorplanScope !== 'building') {
return false
}
const buildingId = resolveBuildingForLevel(
levelId as AnyNodeId,
sceneNodes as Record<AnyNodeId, AnyNode>,
)
return Boolean(buildingId && node.parentId === buildingId)
}
function getLegacyScenePosition(node: AnyNode): Vec3 | null {
if (node.type !== 'elevator') return null
const object = sceneRegistry.nodes.get(node.id)
if (!object) return [0, 0, 0]
return [object.position.x, object.position.y, object.position.z]
}
function getParticipantPosition(node: AnyNode): Vec3 | null {
const p = (node as { position?: unknown }).position
if (isVec3(p)) return p
return getLegacyScenePosition(node)
}
function getParticipantScalarRotation(node: AnyNode): number | null {
const r = (node as { rotation?: unknown }).rotation
if (typeof r === 'number' && Number.isFinite(r)) return r
if (node.type !== 'elevator') return null
return sceneRegistry.nodes.get(node.id)?.rotation.y ?? 0
}
export function classifyParticipant(
node: AnyNode | undefined,
levelId: string | null,
sceneNodes: Record<string, AnyNode | undefined>,
): ParticipantKind | null {
if (!node || node.parentId !== levelId) return null
const p = (node as { position?: unknown }).position
if (!node || !isInGroupTransformScope(node, levelId, sceneNodes)) return null
const p = getParticipantPosition(node)
const r = (node as { rotation?: unknown }).rotation
const start = (node as { start?: unknown }).start
const end = (node as { end?: unknown }).end
if (isVec3(p) && isVec3(r)) return 'vec3'
if (isVec3(p) && typeof r === 'number') return 'scalar'
if (isVec3(p) && getParticipantScalarRotation(node) !== null) return 'scalar'
if (isVec2(start) && isVec2(end)) return 'endpoint'
return null
}
@@ -74,23 +121,27 @@ export function collectParticipants(
const starts: ParticipantStart[] = []
for (const id of ids) {
const node = sceneNodes[id]
const kind = classifyParticipant(node, levelId)
const kind = classifyParticipant(node, levelId, sceneNodes)
if (!node || !kind) continue
if (kind === 'vec3') {
const n = node as AnyNode & { position: Vec3; rotation: Vec3 }
const position = getParticipantPosition(node)
if (!position) continue
starts.push({
id: id as AnyNodeId,
kind,
position: [n.position[0], n.position[1], n.position[2]],
position: [position[0], position[1], position[2]],
rotation: [n.rotation[0], n.rotation[1], n.rotation[2]],
})
} else if (kind === 'scalar') {
const n = node as AnyNode & { position: Vec3; rotation: number }
const position = getParticipantPosition(node)
const rotation = getParticipantScalarRotation(node)
if (!(position && rotation !== null)) continue
starts.push({
id: id as AnyNodeId,
kind,
position: [n.position[0], n.position[1], n.position[2]],
rotation: n.rotation,
position: [position[0], position[1], position[2]],
rotation,
})
} else {
const n = node as AnyNode & { start: Vec2; end: Vec2 }
@@ -112,7 +163,7 @@ export function collectParticipants(
const selected = new Set(starts.map((s) => s.id))
for (const [nid, node] of Object.entries(sceneNodes)) {
if (selected.has(nid as AnyNodeId)) continue
if (classifyParticipant(node, levelId) !== 'endpoint') continue
if (classifyParticipant(node, levelId, sceneNodes) !== 'endpoint') continue
const n = node as AnyNode & { start: Vec2; end: Vec2 }
const start: Vec2 = [n.start[0], n.start[1]]
const end: Vec2 = [n.end[0], n.end[1]]
@@ -138,7 +189,7 @@ export function expandToComponent(
): string[] {
const endpoints: { id: string; start: Vec2; end: Vec2 }[] = []
for (const [id, node] of Object.entries(sceneNodes)) {
if (classifyParticipant(node, levelId) === 'endpoint') {
if (classifyParticipant(node, levelId, sceneNodes) === 'endpoint') {
const n = node as AnyNode & { start: Vec2; end: Vec2 }
endpoints.push({ id, start: [n.start[0], n.start[1]], end: [n.end[0], n.end[1]] })
}
packages/editor/src/components/editor/handles/use-handle-drag.ts
+24
View File
@@ -13,6 +13,7 @@ import { type ThreeEvent, useThree } from '@react-three/fiber'
import { useEffect, useRef } from 'react'
import { type Camera, type Object3D, type Plane, Vector2, type Vector3 } from 'three'
import { sfxEmitter } from '../../../lib/sfx-bus'
import { suppressBoxSelectForPointer } from '../../tools/select/box-select-state'
export type HandleDragControls = {
onStart: (index: number, snapshot: AnyNode) => void
@@ -77,6 +78,26 @@ export function swallowNextClick() {
}, 300)
}
function suppressInputDraggingUntilPointerRelease(pointerId: number) {
const previousInputDragging = useViewer.getState().inputDragging
useViewer.getState().setInputDragging(true)
function restore(event?: PointerEvent) {
if (event && event.pointerId !== pointerId) return
useViewer.getState().setInputDragging(previousInputDragging)
window.removeEventListener('pointerup', restore)
window.removeEventListener('pointercancel', restore)
window.removeEventListener('blur', onBlur)
}
function onBlur() {
restore()
}
window.addEventListener('pointerup', restore)
window.addEventListener('pointercancel', restore)
window.addEventListener('blur', onBlur)
}
export function useHandleDrag(args: UseHandleDragArgs) {
const { camera, raycaster, gl } = useThree()
const dragCleanupRef = useRef<(() => void) | null>(null)
@@ -85,8 +106,11 @@ export function useHandleDrag(args: UseHandleDragArgs) {
return (event: ThreeEvent<PointerEvent>) => {
event.stopPropagation()
suppressBoxSelectForPointer(event)
if (args.kind === 'tap') {
suppressInputDraggingUntilPointerRelease(event.nativeEvent.pointerId)
swallowNextClick()
sfxEmitter.emit('sfx:item-pick')
document.body.style.cursor = ''
args.onTap(event)
packages/editor/src/components/editor/index.tsx
+1
View File
@@ -341,6 +341,7 @@ const EDITOR_CAMERA_CONTROL_HINTS: CameraControlHint[] = [
{
action: 'Pan',
keys: [{ value: 'Space' }, { value: 'Left click' }],
alternativeKeys: [{ value: 'Middle click' }],
},
{ action: 'Rotate', keys: [{ value: 'Right click' }] },
{ action: 'Zoom', keys: [{ value: 'Scroll' }] },
packages/editor/src/components/editor/node-arrow-handles.tsx
+4 -1
View File
@@ -125,6 +125,7 @@ export function NodeArrowHandles() {
const mode = useEditor((state) => state.mode)
const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered)
const movingNode = useEditor((state) => state.movingNode)
const placementDragMode = useEditor((state) => state.placementDragMode)
// Endpoint / curve drags reshape the selected wall or fence; hide its
// resize arrows for the duration so they don't clutter (or get blocked
// by) the drag's own cursor + dimension overlays. Mirrors the same guard
@@ -150,6 +151,8 @@ export function NodeArrowHandles() {
() => (rawNode && liveOverride ? ({ ...rawNode, ...liveOverride } as AnyNode) : rawNode),
[rawNode, liveOverride],
)
const isOwnPressDragMove =
placementDragMode && movingNode !== null && selectedId !== null && movingNode.id === selectedId
const def = node ? nodeRegistry.get(node.type) : null
const descriptors = useMemo(() => {
@@ -163,7 +166,7 @@ export function NodeArrowHandles() {
Boolean(node && descriptors?.length) &&
!isFloorplanHovered &&
mode !== 'delete' &&
!movingNode &&
(!movingNode || isOwnPressDragMove) &&
!movingWallEndpoint &&
!movingFenceEndpoint &&
!curvingWall &&
packages/editor/src/components/editor/slab-hole-highlights.tsx
+2
View File
@@ -26,6 +26,7 @@ import {
import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu'
import { EDITOR_LAYER } from '../../lib/constants'
import useEditor from '../../store/use-editor'
import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
import { swallowNextClick } from './handles/use-handle-drag'
const ACCENT = 0x83_81_ed
@@ -199,6 +200,7 @@ function resetPointerCursor() {
function stopPointerPropagation(event: ThreeEvent<PointerEvent>) {
event.stopPropagation()
suppressBoxSelectForPointer(event)
event.nativeEvent.stopPropagation()
event.nativeEvent.stopImmediatePropagation()
}
packages/editor/src/components/editor/wall-move-side-handles.tsx
+5
View File
@@ -34,6 +34,7 @@ import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js
import { MeshBasicNodeMaterial } from 'three/webgpu'
import { sfxEmitter } from '../../lib/sfx-bus'
import useEditor from '../../store/use-editor'
import { suppressBoxSelectForPointer } from '../tools/select/box-select-state'
import {
createArrowHitAreaGeometry,
createEndpointHitAreaGeometry,
@@ -329,6 +330,7 @@ function WallCornerLeaderHandle({ wall, endpoint }: { wall: WallNode; endpoint:
const activateEndpointMove = (event: ThreeEvent<PointerEvent>) => {
event.stopPropagation()
suppressBoxSelectForPointer(event)
sfxEmitter.emit('sfx:item-pick')
document.body.style.cursor = 'grabbing'
useEditor.getState().setMovingWallEndpoint({ wall, endpoint })
@@ -432,6 +434,7 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) {
const activateHeightResize = (event: ThreeEvent<PointerEvent>) => {
event.stopPropagation()
suppressBoxSelectForPointer(event)
const levelObject = wall.parentId ? sceneRegistry.nodes.get(wall.parentId) : null
if (!levelObject) return
@@ -603,6 +606,7 @@ function WallMoveArrowHandle({ wall, handle }: { wall: WallNode; handle: WallMov
const activateWallMove = (event: ThreeEvent<PointerEvent>) => {
event.stopPropagation()
suppressBoxSelectForPointer(event)
document.body.style.cursor = 'grabbing'
sfxEmitter.emit('sfx:item-pick')
@@ -693,6 +697,7 @@ function FenceMoveArrowHandle({ fence, handle }: { fence: FenceNode; handle: Wal
const activateFenceMove = (event: ThreeEvent<PointerEvent>) => {
event.stopPropagation()
suppressBoxSelectForPointer(event)
document.body.style.cursor = 'grabbing'
sfxEmitter.emit('sfx:item-pick')
packages/editor/src/components/tools/elevator/move-elevator-tool.tsx
+10 -11
View File
@@ -40,6 +40,7 @@ export function MoveElevatorTool({
const onCommittedRef = useRef(onCommitted)
const historyPausedRef = useRef(false)
const previousGridPosRef = useRef<[number, number] | null>(null)
const dragAnchorRef = useRef<[number, number] | null>(null)
const previewPositionRef = useRef<ElevatorNode['position']>([
movingNode.position[0],
movingNode.position[1],
@@ -73,6 +74,8 @@ export function MoveElevatorTool({
}
pauseHistory()
dragAnchorRef.current = null
previousGridPosRef.current = null
const movingNodeId = (movingNode as { id?: ElevatorNode['id'] }).id
const meta =
@@ -128,8 +131,12 @@ export function MoveElevatorTool({
}
const onGridMove = (event: GridEvent) => {
const gridX = Math.round(event.localPosition[0] * 2) / 2
const gridZ = Math.round(event.localPosition[2] * 2) / 2
const rawX = Math.round(event.localPosition[0] * 2) / 2
const rawZ = Math.round(event.localPosition[2] * 2) / 2
const anchor = dragAnchorRef.current ?? [rawX, rawZ]
dragAnchorRef.current = anchor
const gridX = movingNode.position[0] + (rawX - anchor[0])
const gridZ = movingNode.position[2] + (rawZ - anchor[1])
const supportY = resolveElevatorSupportY({
buildingId: supportBuildingId,
preferredLevelId: supportLevelId,
@@ -151,15 +158,7 @@ export function MoveElevatorTool({
}
const onGridClick = (event: GridEvent) => {
const gridX = Math.round(event.localPosition[0] * 2) / 2
const gridZ = Math.round(event.localPosition[2] * 2) / 2
const supportY = resolveElevatorSupportY({
buildingId: supportBuildingId,
preferredLevelId: supportLevelId,
x: gridX,
z: gridZ,
})
const nextPosition: ElevatorNode['position'] = [gridX, supportY, gridZ]
const nextPosition: ElevatorNode['position'] = [...previewPositionRef.current]
wasCommitted = true
clearPreview()
packages/editor/src/components/tools/item/placement-math.test.ts
+10
View File
@@ -0,0 +1,10 @@
import { describe, expect, test } from 'bun:test'
import { stripTransient } from './placement-math'
describe('stripTransient', () => {
test('removes placement-only metadata flags before commit', () => {
expect(stripTransient({ isNew: true, isTransient: true, label: 'copy' })).toEqual({
label: 'copy',
})
})
})
packages/editor/src/components/tools/item/placement-math.ts
+5 -5
View File
@@ -111,13 +111,13 @@ export function isValidWallSideFace(normal: [number, number, number] | undefined
return Math.abs(normal[2]) > 0.7
}
/**
* Strip the `isTransient` flag from node metadata before committing.
*/
/** Strip placement-only metadata flags before committing a draft. */
export function stripTransient(meta: any): any {
if (!isObject(meta)) return meta
const { isTransient, ...rest } = meta as Record<string, any>
return rest
const nextMeta = { ...(meta as Record<string, any>) }
delete nextMeta.isNew
delete nextMeta.isTransient
return nextMeta
}
const _up = new Vector3(0, 1, 0)
packages/editor/src/components/tools/item/use-placement-coordinator.tsx
+33 -3
View File
@@ -195,6 +195,8 @@ export interface PlacementCoordinatorConfig {
initialState?: PlacementState
/** Scale to use when lazily creating a draft (e.g. for wall/ceiling duplicates). Defaults to [1,1,1]. */
defaultScale?: [number, number, number]
/** Move-mode sessions for floor items keep the grabbed item offset from the first floor-plane hit. */
preserveFloorDragOffset?: boolean
}
export function usePlacementCoordinator(config: PlacementCoordinatorConfig): React.ReactNode {
@@ -405,6 +407,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
// building-local, matching the draft's grid position and the guide
// layer's frame.
let alignmentCandidates: AlignmentAnchor[] | null = null
let floorDragAnchor: [number, number] | null = null
// Reset placement state
placementState.current = configRef.current.initialState ?? {
@@ -526,6 +529,11 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
// ---- Init draft ----
configRef.current.initDraft(gridPosition.current)
const preserveFloorDragOffset =
configRef.current.preserveFloorDragOffset === true &&
placementState.current.surface === 'floor' &&
!asset.attachTo
const relativeFloorStart = preserveFloorDragOffset ? gridPosition.current.clone() : null
// Sync cursor to the draft mesh's world position and rotation
if (draftNode.current) {
@@ -649,9 +657,31 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
detachItemSurfaceToFloor(event as unknown as ItemEvent)
}
lastRawPos.current.set(event.localPosition[0], event.localPosition[1], event.localPosition[2])
const floorEvent =
relativeFloorStart !== null
? (() => {
const rawX = event.localPosition[0]
const rawZ = event.localPosition[2]
const anchor = floorDragAnchor ?? [rawX, rawZ]
floorDragAnchor = anchor
return {
...event,
localPosition: [
relativeFloorStart.x + (rawX - anchor[0]),
event.localPosition[1],
relativeFloorStart.z + (rawZ - anchor[1]),
] as [number, number, number],
}
})()
: event
lastRawPos.current.set(
floorEvent.localPosition[0],
floorEvent.localPosition[1],
floorEvent.localPosition[2],
)
if (!cursorGroupRef.current) return
const result = floorStrategy.move(getContext(), event)
const result = floorStrategy.move(getContext(), floorEvent)
if (!result) return
// Figma-style alignment snap layered on top of the floor strategy's
@@ -663,7 +693,7 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea
const draft = draftNode.current
let alignX = 0
let alignZ = 0
const bypassAlign = event.nativeEvent?.altKey === true
const bypassAlign = floorEvent.nativeEvent?.altKey === true
if (!bypassAlign && draft) {
alignmentCandidates ??= collectAlignmentAnchors(
useScene.getState().nodes,
packages/editor/src/components/tools/registry/move-registry-node-tool.tsx
+67 -7
View File
@@ -22,10 +22,14 @@ import {
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
import { commitFreshPlacementSubtree } from '../../../lib/fresh-planar-placement'
import { stripPlacementMetadataFlags } from '../../../lib/placement-metadata'
import { resolvePlanarCursorPosition } from '../../../lib/planar-cursor-placement'
import { sfxEmitter } from '../../../lib/sfx-bus'
import useEditor from '../../../store/use-editor'
import { CursorSphere } from '../shared/cursor-sphere'
import { getFloorStackPreviewPosition } from '../shared/floor-stack-preview'
import { useFreshPlacementVisibility } from '../shared/fresh-placement-visibility'
import { PlacementBox } from '../shared/placement-box'
/** Snap a world-plan coordinate to the editor's active grid step (0.5 / 0.25
@@ -125,6 +129,7 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
* commit position consistent with the visible cursor.
*/
const lastCursorRef = useRef<[number, number, number]>(originalPosition)
const dragAnchorRef = useRef<[number, number] | null>(null)
/**
* Becomes true on the first `grid:move` after this move arms. Commits are
* ignored until then so a click that *armed* this move (e.g. the trailing
@@ -154,6 +159,8 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
)
const [valid, setValid] = useState(true)
const [cursorRotationY, setCursorRotationY] = useState(originalRotationY)
const { isFreshPlacement, previewVisible, revealFreshPlacement, useAbsoluteCursorPlacement } =
useFreshPlacementVisibility({ node })
// Mirrors of `valid` / Shift for the event handlers inside the effect, which
// can't read React state without stale closures.
const validRef = useRef(true)
@@ -166,6 +173,7 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
useEffect(() => {
useScene.temporal.getState().pause()
previousSnapRef.current = null
dragAnchorRef.current = null
hasMovedRef.current = false
rotationRef.current = originalRotationY
shiftRef.current = false
@@ -178,6 +186,7 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
setCursorRotationY(originalRotationY)
lastCursorRef.current = originalPosition
let committed = false
const isNew = isFreshPlacement
const baseRotation = (node as { rotation?: unknown }).rotation
const toCommitRotation = (y: number): number | [number, number, number] =>
@@ -267,8 +276,19 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
)
const onGridMove = (event: GridEvent) => {
let x = snapToGridStep(event.localPosition[0])
let z = snapToGridStep(event.localPosition[2])
const rawX = event.localPosition[0]
const rawZ = event.localPosition[2]
revealFreshPlacement()
const resolved = resolvePlanarCursorPosition({
cursor: [rawX, rawZ],
original: [originalPosition[0], originalPosition[2]],
anchor: dragAnchorRef.current,
mode: useAbsoluteCursorPlacement ? 'absolute' : 'relative',
snap: snapToGridStep,
})
dragAnchorRef.current = resolved.anchor
let [x, z] = resolved.point
// Figma-style alignment snap layered on top of grid snap: when the
// moving item's edge lines up (on X or Z) with another item's edge,
@@ -351,12 +371,32 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
const rotation = toCommitRotation(rotationRef.current)
const visualPosition = getVisualPosition(position)
let committedId = node.id as AnyNodeId
if (useScene.getState().nodes[node.id]) {
const data = {
position,
rotation,
...(isNew
? {
metadata: stripPlacementMetadataFlags(node.metadata),
visible: true,
}
: null),
} as Partial<AnyNode>
if (isNew) {
const finalId = commitFreshPlacementSubtree(node.id as AnyNodeId, data)
if (finalId) {
committed = true
committedId = finalId
}
} else {
useScene.temporal.getState().resume()
useScene.getState().updateNode(node.id, { position, rotation } as Partial<AnyNode>)
useScene.getState().updateNode(node.id, data)
useScene.temporal.getState().pause()
committed = true
}
} else if (node.parentId) {
// Orphan re-create path: re-parse via the registry's schema.
const def = nodeRegistry.get(node.type)
@@ -386,8 +426,12 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
}
useAlignmentGuides.getState().clear()
if (isNew && committed) {
useViewer.getState().setSelection({ selectedIds: [committedId] })
}
sfxEmitter.emit('sfx:item-place')
useEditor.getState().setMovingNodeOrigin('3d')
exitMoveMode()
// Stop further propagation so other listeners (e.g. a selection
@@ -463,13 +507,17 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
const onCancel = () => {
useLiveTransforms.getState().clear(node.id)
if (isNew) {
useScene.getState().deleteNode(node.id as AnyNodeId)
} else {
const m = sceneRegistry.nodes.get(node.id)
if (m) {
m.position.set(...getVisualPosition(originalPosition, originalRotationY))
m.rotation.y = originalRotationY
}
useAlignmentGuides.getState().clear()
markMovedNodeDirty()
}
useAlignmentGuides.getState().clear()
useScene.temporal.getState().resume()
markToolCancelConsumed()
exitMoveMode()
@@ -492,16 +540,28 @@ export function MoveRegistryNodeTool({ node }: { node: AnyNode }) {
// Drop any alignment guides this drag published — covers Esc / mid-drag
// unmount / commit paths uniformly.
useAlignmentGuides.getState().clear()
if (!committed) {
const finalisedBy2D = useEditor.getState().movingNodeOrigin === '2d'
if (!(committed || isNew || finalisedBy2D)) {
useLiveTransforms.getState().clear(node.id)
sceneRegistry.nodes
.get(node.id)
?.position.set(...getVisualPosition(originalPosition, originalRotationY))
markMovedNodeDirty()
}
useScene.temporal.getState().resume()
}
}
}, [boxDimensions, exitMoveMode, node, originalPosition, originalRotationY])
}, [
boxDimensions,
exitMoveMode,
isFreshPlacement,
node,
originalPosition,
originalRotationY,
revealFreshPlacement,
useAbsoluteCursorPlacement,
])
if (!previewVisible) return null
if (boxDimensions) {
return (
packages/editor/src/components/tools/select/box-select-state.ts
+55
View File
@@ -1,6 +1,21 @@
export let boxSelectHandled = false
let resetTimeout: ReturnType<typeof setTimeout> | null = null
const suppressedPointerIds = new Set<number>()
const suppressionCleanups = new Map<number, () => void>()
type PointerEventLike = {
pointerId?: number
nativeEvent?: PointerEvent | PointerEventLike
}
function pointerIdFor(event: PointerEvent | PointerEventLike): number | null {
if ('pointerId' in event && typeof event.pointerId === 'number') {
return event.pointerId
}
const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : undefined
return nativeEvent ? pointerIdFor(nativeEvent) : null
}
export function markBoxSelectHandled() {
boxSelectHandled = true
@@ -13,10 +28,50 @@ export function markBoxSelectHandled() {
}, 50)
}
export function suppressBoxSelectForPointer(event: PointerEvent | PointerEventLike) {
markBoxSelectHandled()
const pointerId = pointerIdFor(event)
if (pointerId === null || suppressedPointerIds.has(pointerId)) return
suppressedPointerIds.add(pointerId)
const clear = (releaseEvent?: PointerEvent) => {
if (releaseEvent && releaseEvent.pointerId !== pointerId) return
markBoxSelectHandled()
suppressedPointerIds.delete(pointerId)
const cleanup = suppressionCleanups.get(pointerId)
suppressionCleanups.delete(pointerId)
cleanup?.()
}
const onPointerUp = (releaseEvent: PointerEvent) => clear(releaseEvent)
const onPointerCancel = (releaseEvent: PointerEvent) => clear(releaseEvent)
const onBlur = () => clear()
const cleanup = () => {
window.removeEventListener('pointerup', onPointerUp)
window.removeEventListener('pointercancel', onPointerCancel)
window.removeEventListener('blur', onBlur)
}
suppressionCleanups.set(pointerId, cleanup)
window.addEventListener('pointerup', onPointerUp)
window.addEventListener('pointercancel', onPointerCancel)
window.addEventListener('blur', onBlur)
}
export function isBoxSelectPointerSuppressed(event: PointerEvent | PointerEventLike) {
const pointerId = pointerIdFor(event)
return pointerId !== null && suppressedPointerIds.has(pointerId)
}
export function clearBoxSelectHandled() {
if (resetTimeout) {
clearTimeout(resetTimeout)
resetTimeout = null
}
boxSelectHandled = false
for (const cleanup of suppressionCleanups.values()) cleanup()
suppressionCleanups.clear()
suppressedPointerIds.clear()
}
packages/editor/src/components/tools/select/box-select-tool.tsx
+27 -84
View File
@@ -4,17 +4,25 @@ import { useThree } from '@react-three/fiber'
import { useCallback, useEffect, useRef } from 'react'
import { Box3, type Camera, type Object3D, Vector3 } from 'three'
import useEditor from '../../../store/use-editor'
import { clearBoxSelectHandled, markBoxSelectHandled } from './box-select-state'
import {
clearBoxSelectHandled,
isBoxSelectPointerSuppressed,
markBoxSelectHandled,
} from './box-select-state'
import { PlaneBoxSelectTool } from './plane-box-select-tool'
import {
createScreenRectangleSelectionElement,
hideScreenRectangleSelectionElement,
intersectScreenRects,
normalizeScreenRect,
SCREEN_RECTANGLE_SELECTION_DRAG_THRESHOLD_PX,
type ScreenRect,
screenRectFromDomRect,
screenRectsIntersect,
updateScreenRectangleSelectionElement,
} from './screen-rectangle-selection'
import { collectSelectableCandidateIds } from './select-candidates'
type ScreenRect = { minX: number; minY: number; maxX: number; maxY: number }
const BOX_SELECT_FILL_COLOR = 'rgba(129, 140, 248, 0.14)'
const BOX_SELECT_BORDER_COLOR = 'rgba(129, 140, 248, 0.9)'
const BOX_SELECT_SHADOW_COLOR = 'rgba(129, 140, 248, 0.28)'
const DRAG_THRESHOLD_PX = 4
const tempBox = new Box3()
const tempWorldPoint = new Vector3()
const tempScreenPoint = new Vector3()
@@ -36,76 +44,6 @@ function haveSameIds(currentIds: string[], nextIds: string[]): boolean {
)
}
function createSelectionElement(): HTMLDivElement {
const element = document.createElement('div')
element.style.position = 'fixed'
element.style.display = 'none'
element.style.pointerEvents = 'none'
element.style.zIndex = '2147483647'
element.style.border = `1px solid ${BOX_SELECT_BORDER_COLOR}`
element.style.background = BOX_SELECT_FILL_COLOR
element.style.boxShadow = `0 0 0 1px ${BOX_SELECT_SHADOW_COLOR} inset`
element.style.contain = 'layout paint style'
return element
}
function normalizeScreenRect(
startX: number,
startY: number,
endX: number,
endY: number,
): ScreenRect {
return {
minX: Math.min(startX, endX),
minY: Math.min(startY, endY),
maxX: Math.max(startX, endX),
maxY: Math.max(startY, endY),
}
}
function updateSelectionElement(element: HTMLDivElement, rect: ScreenRect) {
element.style.display = 'block'
element.style.left = `${rect.minX}px`
element.style.top = `${rect.minY}px`
element.style.width = `${Math.max(0, rect.maxX - rect.minX)}px`
element.style.height = `${Math.max(0, rect.maxY - rect.minY)}px`
}
function hideSelectionElement(element: HTMLDivElement | null) {
if (!element) return
element.style.display = 'none'
element.style.width = '0px'
element.style.height = '0px'
}
function screenRectsIntersect(a: ScreenRect, b: ScreenRect): boolean {
return !(b.maxX < a.minX || b.minX > a.maxX || b.maxY < a.minY || b.minY > a.maxY)
}
function screenRectFromDomRect(rect: DOMRect): ScreenRect {
return {
minX: rect.left,
minY: rect.top,
maxX: rect.right,
maxY: rect.bottom,
}
}
function intersectScreenRects(a: ScreenRect, b: ScreenRect): ScreenRect | null {
const rect = {
minX: Math.max(a.minX, b.minX),
minY: Math.max(a.minY, b.minY),
maxX: Math.min(a.maxX, b.maxX),
maxY: Math.min(a.maxY, b.maxY),
}
if (rect.maxX <= rect.minX || rect.maxY <= rect.minY) {
return null
}
return rect
}
function projectWorldPointToScreen(
point: Vector3,
camera: Camera,
@@ -268,7 +206,7 @@ const ScreenRectangleSelectTool: React.FC = () => {
pointerDownRef.current = false
isDraggingRef.current = false
pointerIdRef.current = null
hideSelectionElement(elementRef.current)
hideScreenRectangleSelectionElement(elementRef.current)
syncPreviewSelectedIds([])
if (ownsInputDraggingRef.current) {
@@ -278,7 +216,7 @@ const ScreenRectangleSelectTool: React.FC = () => {
}, [syncPreviewSelectedIds])
useEffect(() => {
const element = createSelectionElement()
const element = createScreenRectangleSelectionElement()
document.body.appendChild(element)
elementRef.current = element
@@ -331,6 +269,7 @@ const ScreenRectangleSelectTool: React.FC = () => {
const viewer = useViewer.getState()
if (
isBoxSelectPointerSuppressed(event) ||
spaceDownRef.current ||
viewer.cameraDragging ||
(viewer.inputDragging && !ownsInputDraggingRef.current)
@@ -348,7 +287,7 @@ const ScreenRectangleSelectTool: React.FC = () => {
currentClientYRef.current - startClientYRef.current,
)
if (!isDraggingRef.current && dragDistance >= DRAG_THRESHOLD_PX) {
if (!isDraggingRef.current && dragDistance >= SCREEN_RECTANGLE_SELECTION_DRAG_THRESHOLD_PX) {
isDraggingRef.current = true
ownsInputDraggingRef.current = true
useViewer.getState().setInputDragging(true)
@@ -372,12 +311,12 @@ const ScreenRectangleSelectTool: React.FC = () => {
screenRectFromDomRect(canvas.getBoundingClientRect()),
)
if (!clampedRect) {
hideSelectionElement(elementRef.current)
hideScreenRectangleSelectionElement(elementRef.current)
syncPreviewSelectedIds([])
return
}
updateSelectionElement(elementRef.current!, clampedRect)
updateScreenRectangleSelectionElement(elementRef.current!, clampedRect)
syncPreviewSelectedIds(collectNodeIdsInScreenRect(clampedRect, camera, canvas))
}
@@ -385,7 +324,10 @@ const ScreenRectangleSelectTool: React.FC = () => {
if (!pointerDownRef.current) return
if (pointerIdRef.current !== null && event.pointerId !== pointerIdRef.current) return
if (useViewer.getState().inputDragging && !ownsInputDraggingRef.current) {
if (
isBoxSelectPointerSuppressed(event) ||
(useViewer.getState().inputDragging && !ownsInputDraggingRef.current)
) {
markBoxSelectHandled()
resetDrag()
return
@@ -420,6 +362,7 @@ const ScreenRectangleSelectTool: React.FC = () => {
const onCanvasPointerDown = (event: PointerEvent) => {
if (event.button !== 0) return
if (spaceDownRef.current) return
if (isBoxSelectPointerSuppressed(event)) return
const viewer = useViewer.getState()
if (viewer.cameraDragging || viewer.inputDragging) return
packages/editor/src/components/tools/select/plane-box-select-tool.tsx
+15 -4
View File
@@ -31,7 +31,7 @@ import { EDITOR_LAYER } from '../../../lib/constants'
import { sfxEmitter } from '../../../lib/sfx-bus'
import useEditor from '../../../store/use-editor'
import { CursorSphere } from '../shared/cursor-sphere'
import { markBoxSelectHandled } from './box-select-state'
import { isBoxSelectPointerSuppressed, markBoxSelectHandled } from './box-select-state'
import { collectSelectableCandidateIds } from './select-candidates'
declare module 'react/jsx-runtime' {
@@ -407,6 +407,7 @@ export const PlaneBoxSelectTool: React.FC = () => {
const onCanvasPointerDown = (event: PointerEvent) => {
if (event.button !== 0) return
if (spaceDownRef.current) return
if (isBoxSelectPointerSuppressed(event)) return
if (useViewer.getState().cameraDragging) return
if (useViewer.getState().inputDragging) return
@@ -426,7 +427,8 @@ export const PlaneBoxSelectTool: React.FC = () => {
const onCanvasPointerUp = (event: PointerEvent) => {
if (event.button !== 0) return
if (useViewer.getState().inputDragging) {
if (isBoxSelectPointerSuppressed(event) || useViewer.getState().inputDragging) {
markBoxSelectHandled()
resetDrag()
return
}
@@ -494,7 +496,16 @@ export const PlaneBoxSelectTool: React.FC = () => {
}
if (!pointerDown.current) return
if (spaceDownRef.current || useViewer.getState().inputDragging) return
if (isBoxSelectPointerSuppressed(event.nativeEvent)) {
markBoxSelectHandled()
resetDrag()
return
}
if (spaceDownRef.current || useViewer.getState().inputDragging) {
markBoxSelectHandled()
resetDrag()
return
}
currentPoint.current.set(snappedX, event.position[1], snappedZ)
@@ -538,7 +549,7 @@ export const PlaneBoxSelectTool: React.FC = () => {
return () => {
emitter.off('grid:move', onMove)
}
}, [syncPreviewSelectedIds])
}, [resetDrag, syncPreviewSelectedIds])
return (
<group>
packages/editor/src/components/tools/select/screen-rectangle-selection.ts
+84
View File
@@ -0,0 +1,84 @@
export type ScreenRect = {
minX: number
minY: number
maxX: number
maxY: number
}
export const SCREEN_RECTANGLE_SELECTION_DRAG_THRESHOLD_PX = 4
const SCREEN_RECTANGLE_SELECTION_FILL_COLOR = 'rgba(129, 140, 248, 0.14)'
const SCREEN_RECTANGLE_SELECTION_BORDER_COLOR = 'rgba(129, 140, 248, 0.9)'
const SCREEN_RECTANGLE_SELECTION_SHADOW_COLOR = 'rgba(129, 140, 248, 0.28)'
export function createScreenRectangleSelectionElement(): HTMLDivElement {
const element = document.createElement('div')
element.style.position = 'fixed'
element.style.display = 'none'
element.style.pointerEvents = 'none'
element.style.zIndex = '2147483647'
element.style.border = `1px solid ${SCREEN_RECTANGLE_SELECTION_BORDER_COLOR}`
element.style.background = SCREEN_RECTANGLE_SELECTION_FILL_COLOR
element.style.boxShadow = `0 0 0 1px ${SCREEN_RECTANGLE_SELECTION_SHADOW_COLOR} inset`
element.style.contain = 'layout paint style'
return element
}
export function normalizeScreenRect(
startX: number,
startY: number,
endX: number,
endY: number,
): ScreenRect {
return {
minX: Math.min(startX, endX),
minY: Math.min(startY, endY),
maxX: Math.max(startX, endX),
maxY: Math.max(startY, endY),
}
}
export function screenRectFromDomRect(rect: DOMRect | DOMRectReadOnly): ScreenRect {
return {
minX: rect.left,
minY: rect.top,
maxX: rect.right,
maxY: rect.bottom,
}
}
export function screenRectsIntersect(a: ScreenRect, b: ScreenRect): boolean {
return !(b.maxX < a.minX || b.minX > a.maxX || b.maxY < a.minY || b.minY > a.maxY)
}
export function intersectScreenRects(a: ScreenRect, b: ScreenRect): ScreenRect | null {
const rect = {
minX: Math.max(a.minX, b.minX),
minY: Math.max(a.minY, b.minY),
maxX: Math.min(a.maxX, b.maxX),
maxY: Math.min(a.maxY, b.maxY),
}
if (rect.maxX <= rect.minX || rect.maxY <= rect.minY) {
return null
}
return rect
}
export function updateScreenRectangleSelectionElement(element: HTMLDivElement, rect: ScreenRect) {
element.style.display = 'block'
element.style.left = `${rect.minX}px`
element.style.top = `${rect.minY}px`
element.style.width = `${Math.max(0, rect.maxX - rect.minX)}px`
element.style.height = `${Math.max(0, rect.maxY - rect.minY)}px`
}
export function hideScreenRectangleSelectionElement(element: HTMLDivElement | null) {
if (!element) {
return
}
element.style.display = 'none'
element.style.width = '0px'
element.style.height = '0px'
}
packages/editor/src/components/tools/select/select-candidates.test.ts
+109
View File
@@ -0,0 +1,109 @@
import { beforeAll, beforeEach, describe, expect, test } from 'bun:test'
import {
type AnyNode,
type AnyNodeDefinition,
nodeRegistry,
registerNode,
useScene,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import { z } from 'zod'
import useEditor from '../../../store/use-editor'
import { collectSelectableCandidateIds } from './select-candidates'
function registerSelectableElevatorTestKind() {
if (nodeRegistry.has('elevator')) return
registerNode({
kind: 'elevator',
schemaVersion: 1,
schema: z.object({ type: z.literal('elevator') }) as never,
category: 'structure',
defaults: () => ({}),
capabilities: { selectable: {} },
floorplanScope: 'building',
renderer: { kind: 'parametric', module: async () => ({ default: () => null }) },
} as AnyNodeDefinition)
}
describe('selectable candidates', () => {
beforeAll(() => {
registerSelectableElevatorTestKind()
})
beforeEach(() => {
useScene.setState({
nodes: {},
rootNodeIds: [],
dirtyNodes: new Set(),
collections: {},
} as never)
useViewer.setState({
selection: {
buildingId: 'building_test',
levelId: 'level_test',
zoneId: null,
selectedIds: [],
},
previewSelectedIds: [],
})
useEditor.setState({
phase: 'structure',
structureLayer: 'elements',
})
})
test('includes building-scoped elevators for the active level building', () => {
useScene.setState({
nodes: {
building_test: {
id: 'building_test',
type: 'building',
children: ['level_test', 'elevator_test'],
},
level_test: {
id: 'level_test',
type: 'level',
parentId: 'building_test',
children: [],
},
elevator_test: {
id: 'elevator_test',
type: 'elevator',
parentId: 'building_test',
position: [1, 0, 2],
rotation: 0,
},
} as unknown as Record<string, AnyNode>,
} as never)
expect(collectSelectableCandidateIds()).toContain('elevator_test')
})
test('includes legacy level-parented elevators already loaded in the editor', () => {
useScene.setState({
nodes: {
building_test: {
id: 'building_test',
type: 'building',
children: ['level_test'],
},
level_test: {
id: 'level_test',
type: 'level',
parentId: 'building_test',
children: ['elevator_test'],
},
elevator_test: {
id: 'elevator_test',
type: 'elevator',
parentId: 'level_test',
position: [1, 0, 2],
rotation: 0,
},
} as unknown as Record<string, AnyNode>,
} as never)
expect(collectSelectableCandidateIds()).toContain('elevator_test')
})
})
packages/editor/src/components/tools/select/select-candidates.ts
+31 -73
View File
@@ -5,43 +5,15 @@ import {
type LevelNode,
nodeRegistry,
resolveBuildingForLevel,
resolveLevelId,
useScene,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import useEditor from '../../../store/use-editor'
export function isFurnishSelectableCandidate(node: AnyNode): boolean {
if (node.type === 'item') {
return node.asset.category !== 'door' && node.asset.category !== 'window'
}
const def = nodeRegistry.get(node.type)
return Boolean(def?.category === 'furnish' && def.capabilities.selectable)
}
export function isStructureSelectableCandidate(node: AnyNode): boolean {
if (
node.type === 'wall' ||
node.type === 'fence' ||
node.type === 'column' ||
node.type === 'elevator' ||
node.type === 'slab' ||
node.type === 'ceiling' ||
node.type === 'roof' ||
node.type === 'stair' ||
node.type === 'spawn' ||
node.type === 'window' ||
node.type === 'door'
) {
return true
}
if (node.type === 'item') {
return node.asset.category === 'door' || node.asset.category === 'window'
}
const def = nodeRegistry.get(node.type)
return Boolean(def && def.category !== 'furnish' && def.capabilities.selectable)
function isVisibleSelectableNode(node: AnyNode): boolean {
if ((node as { visible?: boolean }).visible === false) return false
return isRegistrySelectable(node.type)
}
export function collectSelectableCandidateIds(): string[] {
@@ -51,10 +23,23 @@ export function collectSelectableCandidateIds(): string[] {
const result: string[] = []
const seen = new Set<string>()
const addNode = (node: AnyNode | undefined) => {
if (!node || seen.has(node.id)) return
if (!node || seen.has(node.id) || (node as { visible?: boolean }).visible === false) return
seen.add(node.id)
result.push(node.id)
}
const visitLevelDescendant = (id: AnyNodeId) => {
const node = nodes[id]
if (!node || seen.has(node.id) || (node as { visible?: boolean }).visible === false) return
if (isRegistrySelectable(node.type)) {
addNode(node)
}
const children = 'children' in node && Array.isArray(node.children) ? node.children : []
for (const childId of children) {
visitLevelDescendant(childId as AnyNodeId)
}
}
if (phase === 'site') {
for (const node of Object.values(nodes)) {
@@ -76,49 +61,22 @@ export function collectSelectableCandidateIds(): string[] {
}
for (const childId of levelNode.children) {
const node = nodes[childId as AnyNodeId]
if (!node) continue
if (phase === 'furnish') {
if (isFurnishSelectableCandidate(node)) addNode(node)
continue
}
if (node.type === 'wall' || node.type === 'fence') {
addNode(node)
const hostedChildren = 'children' in node && Array.isArray(node.children) ? node.children : []
for (const hostedChildId of hostedChildren) {
const child = nodes[hostedChildId as AnyNodeId]
if (!child) continue
if (
child.type === 'window' ||
child.type === 'door' ||
(child.type === 'item' &&
(child.asset.category === 'door' || child.asset.category === 'window'))
) {
addNode(child)
}
}
continue
}
if (isStructureSelectableCandidate(node)) {
addNode(node)
}
visitLevelDescendant(childId as AnyNodeId)
}
const buildingId = resolveBuildingForLevel(levelId as AnyNodeId, nodes)
const buildingNode = buildingId ? nodes[buildingId] : undefined
const buildingChildren =
buildingNode && 'children' in buildingNode && Array.isArray(buildingNode.children)
? (buildingNode.children as AnyNodeId[])
: []
for (const childId of buildingChildren) {
const node = nodes[childId]
if (!node || node.type === 'level' || !isRegistrySelectable(node.type)) continue
if (phase === 'furnish') {
if (isFurnishSelectableCandidate(node)) addNode(node)
} else if (isStructureSelectableCandidate(node)) {
for (const node of Object.values(nodes)) {
if (!node || node.type === 'level' || !isVisibleSelectableNode(node)) continue
const def = nodeRegistry.get(node.type)
const isBuildingScoped = def?.floorplanScope === 'building'
const parentId = (node as { parentId?: AnyNodeId | null }).parentId
if (isBuildingScoped && buildingId && parentId === buildingId) {
addNode(node)
continue
}
if (!isBuildingScoped && resolveLevelId(node, nodes) === levelId) {
addNode(node)
}
}
packages/editor/src/components/tools/shared/fresh-placement-visibility.ts
+61
View File
@@ -0,0 +1,61 @@
'use client'
import { type AnyNode, type AnyNodeId, sceneRegistry, useScene } from '@pascal-app/core'
import { useCallback, useRef, useState } from 'react'
import { isFreshPlacementMetadata } from '../../../lib/placement-metadata'
import useEditor from '../../../store/use-editor'
type FreshPlacementNode = Pick<AnyNode, 'id' | 'metadata'>
type FreshPlacementVisibilityArgs = {
node: FreshPlacementNode
enabled?: boolean
}
export function useFreshPlacementVisibility({
node,
enabled = true,
}: FreshPlacementVisibilityArgs) {
const isFreshPlacement = enabled && isFreshPlacementMetadata(node.metadata)
const useAbsoluteCursorPlacement = isFreshPlacement && !useEditor.getState().placementDragMode
const shouldStartHidden = useAbsoluteCursorPlacement
const [visibility, setVisibility] = useState(() => ({
nodeId: node.id,
visible: !shouldStartHidden,
}))
const visibilityRef = useRef(visibility)
const previewVisible = visibility.nodeId === node.id ? visibility.visible : !shouldStartHidden
const setPreviewVisibleForNode = useCallback(
(visible: boolean) => {
const current = visibilityRef.current
if (current.nodeId === node.id && current.visible === visible) return
const next = { nodeId: node.id, visible }
visibilityRef.current = next
setVisibility(next)
},
[node.id],
)
const revealFreshPlacement = useCallback(() => {
if (!isFreshPlacement) return
setPreviewVisibleForNode(true)
sceneRegistry.nodes.get(node.id)?.traverse((child) => {
child.visible = true
})
const liveNode = useScene.getState().nodes[node.id as AnyNodeId]
if (liveNode?.visible === false) {
useScene.getState().updateNode(node.id as AnyNodeId, { visible: true } as Partial<AnyNode>)
}
}, [isFreshPlacement, node.id, setPreviewVisibleForNode])
return {
isFreshPlacement,
previewVisible,
revealFreshPlacement,
useAbsoluteCursorPlacement,
}
}
packages/editor/src/components/tools/stair/stair-tool.tsx
+31 -17
View File
@@ -6,6 +6,7 @@ import {
emitter,
type GridEvent,
type LevelNode,
movingAlignmentAnchors,
type NodeEvent,
resolveAlignment,
StairNode,
@@ -295,14 +296,30 @@ export const StairTool: React.FC = () => {
}
// Alignment candidates — anchors of every alignable object; refreshed
// after each placement. The stair aligns by its ORIGIN point.
// after each placement. The moving stair aligns by its footprint edges so
// users can snap the run side against walls, slabs, elevators, or another
// stair instead of only lining up the invisible origin point.
let alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, '', currentLevelId)
// Snap the stair origin onto another object's nearest real anchor and
// publish the guide. The probe is the RAW cursor, NOT the 0.5m-grid-snapped
// point: resolving against the grid point would only ever catch anchors
// that happen to sit on a grid line, so off-grid items (furniture, angled
// walls) would never surface a guide. The matched axis locks exactly to the
// candidate's coordinate; the other axis keeps its grid snap. Alt bypasses.
const resolveStairFootprintAlignment = (
x: number,
z: number,
rotation: number,
): ReturnType<typeof resolveAlignment> | null => {
const preview = buildPreviewScene([x, 0, z], rotation)
const moving = preview
? movingAlignmentAnchors(preview.stair, preview.previewNodes, x, z, rotation)
: []
if (moving.length === 0) return null
return resolveAlignment({
moving,
candidates: alignmentCandidates,
threshold: ALIGNMENT_THRESHOLD_M,
})
}
// The probe is the RAW cursor, not the grid-snapped point: resolving
// against the grid point would only catch anchors that happen to sit near
// a grid line. Matched axes use the raw probe + snap delta; unmatched axes
// keep the normal grid snap. Alt bypasses.
const alignPoint = (
gridX: number,
gridZ: number,
@@ -314,22 +331,19 @@ export const StairTool: React.FC = () => {
useAlignmentGuides.getState().clear()
return [gridX, gridZ]
}
const ar = resolveAlignment({
moving: [{ nodeId: '__stair-draft__', kind: 'corner', x: rawX, z: rawZ }],
candidates: alignmentCandidates,
threshold: ALIGNMENT_THRESHOLD_M,
})
if (ar.guides.length === 0) {
const ar = resolveStairFootprintAlignment(rawX, rawZ, rotationRef.current)
if (!ar || ar.guides.length === 0) {
useAlignmentGuides.getState().clear()
return [gridX, gridZ]
}
useAlignmentGuides.getState().set(ar.guides)
let x = gridX
let z = gridZ
for (const guide of ar.guides) {
if (guide.axis === 'x') x = guide.coord
else z = guide.coord
if (ar.snap) {
if (ar.guides.some((guide) => guide.axis === 'x')) x = rawX + ar.snap.dx
if (ar.guides.some((guide) => guide.axis === 'z')) z = rawZ + ar.snap.dz
}
const finalAlignment = resolveStairFootprintAlignment(x, z, rotationRef.current)
useAlignmentGuides.getState().set(finalAlignment?.guides ?? ar.guides)
return [x, z]
}
packages/editor/src/index.tsx
+13
View File
@@ -61,6 +61,7 @@ export {
export { CursorSphere } from './components/tools/shared/cursor-sphere'
export { DragBoundingBox } from './components/tools/shared/drag-bounding-box'
export { getFloorStackPreviewPosition } from './components/tools/shared/floor-stack-preview'
export { useFreshPlacementVisibility } from './components/tools/shared/fresh-placement-visibility'
// Phase 5 Stage D — PolygonEditor for slab/ceiling boundary + hole editors.
export {
PolygonEditor,
@@ -195,6 +196,7 @@ export {
type FloorplanStairSegmentEntry,
getFloorplanWallThickness,
} from './lib/floorplan'
export { commitFreshPlacementSubtree } from './lib/fresh-planar-placement'
export {
buildResetSurfaceMaterialUpdates,
buildRoofSurfaceMaterialPatch,
@@ -204,6 +206,17 @@ export {
getActivePaintMaterialLabel,
hasActivePaintMaterial,
} from './lib/material-paint'
export {
addFreshPlacementMetadata,
getPlacementMetadataRecord,
isFreshPlacementMetadata,
stripPlacementMetadataFlags,
} from './lib/placement-metadata'
export {
type PlanarCursorPlacementMode,
type PlanarPoint,
resolvePlanarCursorPosition,
} from './lib/planar-cursor-placement'
export { clearRoofDuplicateMetadata, duplicateRoofSubtree } from './lib/roof-duplication'
export type { SceneGraph } from './lib/scene'
export { applySceneGraphToEditor } from './lib/scene'
packages/editor/src/lib/fresh-planar-placement.test.ts
+102
View File
@@ -0,0 +1,102 @@
import { beforeEach, describe, expect, test } from 'bun:test'
import type { AnyNode, AnyNodeId } from '@pascal-app/core'
import { useScene } from '@pascal-app/core'
import { commitFreshPlacementSubtree } from './fresh-planar-placement'
type RafFn = (cb: (time: number) => void) => number
;(globalThis as { requestAnimationFrame?: RafFn }).requestAnimationFrame ??= ((
cb: (time: number) => void,
) => {
cb(0)
return 0
}) as RafFn
;(globalThis as { cancelAnimationFrame?: (id: number) => void }).cancelAnimationFrame ??= () => {}
const LEVEL_ID = 'level_test' as AnyNodeId
const SHELF_ID = 'shelf_draft' as AnyNodeId
function level(children: AnyNodeId[]): AnyNode {
return {
id: LEVEL_ID,
type: 'level',
object: 'node',
parentId: null,
visible: true,
metadata: {},
children,
level: 0,
} as AnyNode
}
function shelf(): AnyNode {
return {
id: SHELF_ID,
type: 'shelf',
object: 'node',
parentId: LEVEL_ID,
visible: false,
metadata: { isNew: true, label: 'draft' },
children: [],
position: [0, 0, 0],
rotation: [0, 0, 0],
width: 1.2,
depth: 0.3,
thickness: 0.04,
height: 0.9,
style: 'wall-shelf',
rows: 1,
columns: 1,
withBack: false,
withSides: true,
withBottom: false,
bracketStyle: 'minimal',
} as AnyNode
}
describe('commitFreshPlacementSubtree', () => {
beforeEach(() => {
useScene.setState({
nodes: {
[LEVEL_ID]: level([SHELF_ID]),
[SHELF_ID]: shelf(),
},
rootNodeIds: [LEVEL_ID],
collections: {},
dirtyNodes: new Set(),
} as never)
useScene.temporal.getState().clear()
useScene.temporal.getState().resume()
})
test('commits a fresh draft as one undoable clean subtree', () => {
useScene.temporal.getState().pause()
const committedId = commitFreshPlacementSubtree(SHELF_ID, {
position: [2, 0, 3],
visible: true,
} as Partial<AnyNode>)
expect(committedId).toBeTruthy()
expect(committedId).not.toBe(SHELF_ID)
const finalId = committedId as AnyNodeId
expect(useScene.getState().nodes[SHELF_ID]).toBeUndefined()
const committed = useScene.getState().nodes[finalId] as
| (AnyNode & { position: [number, number, number]; metadata?: Record<string, unknown> })
| undefined
expect(committed?.position).toEqual([2, 0, 3])
expect(committed?.visible).toBe(true)
expect(committed?.metadata?.isNew).toBeUndefined()
expect(committed?.metadata?.label).toBe('draft')
expect((useScene.getState().nodes[LEVEL_ID] as { children: AnyNodeId[] }).children).toEqual([
finalId,
])
useScene.temporal.getState().resume()
useScene.temporal.getState().undo()
expect(useScene.getState().nodes[finalId]).toBeUndefined()
expect(useScene.getState().nodes[SHELF_ID]).toBeUndefined()
expect((useScene.getState().nodes[LEVEL_ID] as { children: AnyNodeId[] }).children).toEqual([])
})
})
packages/editor/src/lib/fresh-planar-placement.ts
+63
View File
@@ -0,0 +1,63 @@
import {
type AnyNode,
type AnyNodeId,
cloneNodesInto,
collectSubtree,
useScene,
} from '@pascal-app/core'
import { stripPlacementMetadataFlags } from './placement-metadata'
function cleanPlacementMetadata<N extends AnyNode>(node: N): N {
return {
...node,
metadata: stripPlacementMetadataFlags(node.metadata),
} as N
}
function parentIdOf(node: AnyNode): AnyNodeId | undefined {
const parentId = (node as { parentId?: AnyNodeId | null }).parentId
return parentId ?? undefined
}
/**
* Finalises a fresh catalog/duplicate draft as a single undoable creation.
*
* Fresh drafts already exist in the scene so renderers and move tools can
* preview real geometry. On commit we delete that draft while history is
* paused, then create a clean clone at the final cursor position with history
* resumed. Undo therefore removes the placed node instead of resurrecting the
* hidden draft at its origin.
*/
export function commitFreshPlacementSubtree(
rootId: AnyNodeId,
rootPatch: Partial<AnyNode>,
): AnyNodeId | null {
const scene = useScene.getState()
const subtree = collectSubtree(scene.nodes, rootId)
if (!subtree) return null
const root = cleanPlacementMetadata({
...subtree.root,
...rootPatch,
} as AnyNode)
const descendants = subtree.descendants.map((node) => cleanPlacementMetadata(node))
const parentId = parentIdOf(root)
const cloned = cloneNodesInto([root, ...descendants], {
rootId,
parentId,
})
const temporal = useScene.temporal.getState()
const wasTracking = (temporal as { isTracking?: boolean }).isTracking !== false
if (wasTracking) temporal.pause()
useScene.getState().deleteNode(rootId)
temporal.resume()
useScene
.getState()
.createNodes(
cloned.nodes.map((node, index) => (index === 0 && parentId ? { node, parentId } : { node })),
)
if (!wasTracking) temporal.pause()
return cloned.rootId
}
packages/editor/src/lib/placement-metadata.ts
+29
View File
@@ -0,0 +1,29 @@
export function getPlacementMetadataRecord(metadata: unknown): Record<string, unknown> {
if (typeof metadata !== 'object' || metadata === null || Array.isArray(metadata)) {
return {}
}
return metadata as Record<string, unknown>
}
export function addFreshPlacementMetadata(metadata: unknown): Record<string, unknown> {
return {
...getPlacementMetadataRecord(metadata),
isNew: true,
}
}
export function isFreshPlacementMetadata(metadata: unknown): boolean {
return getPlacementMetadataRecord(metadata).isNew === true
}
export function stripPlacementMetadataFlags(metadata: unknown): unknown {
if (typeof metadata !== 'object' || metadata === null || Array.isArray(metadata)) {
return metadata
}
const nextMeta = { ...(metadata as Record<string, unknown>) }
delete nextMeta.isNew
delete nextMeta.isTransient
return nextMeta
}
packages/editor/src/lib/planar-cursor-placement.test.ts
+43
View File
@@ -0,0 +1,43 @@
import { describe, expect, test } from 'bun:test'
import { resolvePlanarCursorPosition } from './planar-cursor-placement'
const snapHalf = (value: number) => Math.round(value / 0.5) * 0.5
describe('resolvePlanarCursorPosition', () => {
test('absolute mode places the point directly at the snapped cursor', () => {
const result = resolvePlanarCursorPosition({
cursor: [1.24, -2.26],
original: [10, 10],
anchor: null,
mode: 'absolute',
snap: snapHalf,
})
expect(result.point).toEqual([1, -2.5])
expect(result.anchor).toBeNull()
})
test('relative mode preserves the original grab offset from the first cursor sample', () => {
const start = resolvePlanarCursorPosition({
cursor: [4.1, 6.1],
original: [10, 20],
anchor: null,
mode: 'relative',
snap: snapHalf,
})
expect(start.point).toEqual([10, 20])
expect(start.anchor).toEqual([4.1, 6.1])
const moved = resolvePlanarCursorPosition({
cursor: [4.9, 5.2],
original: [10, 20],
anchor: start.anchor,
mode: 'relative',
snap: snapHalf,
})
expect(moved.point).toEqual([11, 19])
expect(moved.anchor).toEqual([4.1, 6.1])
})
})
packages/editor/src/lib/planar-cursor-placement.ts
+42
View File
@@ -0,0 +1,42 @@
export type PlanarPoint = [number, number]
export type PlanarCursorPlacementMode = 'absolute' | 'relative'
type ResolvePlanarCursorPositionArgs = {
cursor: PlanarPoint
original: PlanarPoint
anchor: PlanarPoint | null
mode: PlanarCursorPlacementMode
snap?: (value: number) => number
}
type ResolvePlanarCursorPositionResult = {
point: PlanarPoint
anchor: PlanarPoint | null
}
const identity = (value: number) => value
export function resolvePlanarCursorPosition({
cursor,
original,
anchor,
mode,
snap = identity,
}: ResolvePlanarCursorPositionArgs): ResolvePlanarCursorPositionResult {
if (mode === 'absolute') {
return {
point: [snap(cursor[0]), snap(cursor[1])],
anchor,
}
}
const resolvedAnchor = anchor ?? cursor
return {
point: [
original[0] + snap(cursor[0] - resolvedAnchor[0]),
original[1] + snap(cursor[1] - resolvedAnchor[1]),
],
anchor: resolvedAnchor,
}
}
packages/editor/src/lib/roof-duplication.ts
+1 -1
View File
@@ -175,7 +175,7 @@ export function duplicateRoofSubtree(
export function clearRoofDuplicateMetadata(
roofId: AnyNodeId,
updates: Partial<Pick<RoofNode, 'position' | 'rotation' | 'metadata'>> = {},
updates: Partial<Pick<RoofNode, 'position' | 'rotation' | 'metadata' | 'visible'>> = {},
) {
const scene = useScene.getState()
const roofNode = scene.nodes[roofId]
packages/editor/src/lib/scene.ts
+6 -2
View File
@@ -1,6 +1,6 @@
'use client'
import { resolveLevelId, sceneRegistry, useScene } from '@pascal-app/core'
import { nodeRegistry, resolveLevelId, sceneRegistry, useScene } from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import useEditor, {
hasCustomPersistedEditorUiState,
@@ -220,7 +220,11 @@ function getValidatedSelectionForScene(
const selectedIds = selection.selectedIds.filter((id) => {
const node = sceneNodes[id]
return Boolean(node) && resolveLevelId(node, sceneNodes) === levelId
if (!node) return false
if (resolveLevelId(node, sceneNodes) === levelId) return true
const def = nodeRegistry.get(node.type)
return def?.floorplanScope === 'building' && node.parentId === buildingId
})
return {
packages/editor/src/store/use-editor.tsx
+22
View File
@@ -118,6 +118,18 @@ export type StructureLayer = 'zones' | 'elements'
export type FloorplanSelectionTool = 'click' | 'marquee'
export type GridSnapStep = 0.5 | 0.25 | 0.1 | 0.05
export type NavigationSyncSource = '2d' | '3d'
export type NavigationSyncPose = {
source: NavigationSyncSource
revision: number
target: [number, number, number]
azimuth: number
viewWidth: number
}
export type NavigationSyncPoseInput = Omit<NavigationSyncPose, 'revision'>
// Combined tool type
export type Tool = SiteTool | StructureTool | FurnishTool
@@ -326,6 +338,8 @@ type EditorState = {
toggleFloorplanOpen: () => void
isFloorplanHovered: boolean
setFloorplanHovered: (hovered: boolean) => void
navigationSyncPose: NavigationSyncPose | null
publishNavigationSyncPose: (pose: NavigationSyncPoseInput) => void
floorplanSelectionTool: FloorplanSelectionTool
setFloorplanSelectionTool: (tool: FloorplanSelectionTool) => void
gridSnapStep: GridSnapStep
@@ -850,6 +864,14 @@ const useEditor = create<EditorState>()(
}),
isFloorplanHovered: false,
setFloorplanHovered: (hovered) => set({ isFloorplanHovered: hovered }),
navigationSyncPose: null,
publishNavigationSyncPose: (pose) =>
set((state) => ({
navigationSyncPose: {
...pose,
revision: (state.navigationSyncPose?.revision ?? 0) + 1,
},
})),
floorplanSelectionTool: 'click' as FloorplanSelectionTool,
setFloorplanSelectionTool: (tool) => set({ floorplanSelectionTool: tool }),
gridSnapStep: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.gridSnapStep,
packages/nodes/src/box-vent/move-tool.tsx
+25 -32
View File
@@ -5,16 +5,18 @@ import {
type BoxVentNode,
emitter,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useState } from 'react'
import * as THREE from 'three'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
} from '../shared/relative-roof-drag'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
import BoxVentPreview from './preview'
@@ -55,48 +57,39 @@ export default function MoveBoxVentTool({ node }: { node: BoxVentNode }) {
const ventObj = sceneRegistry.nodes.get(node.id)
if (ventObj) ventObj.visible = false
const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => {
const buildingId = useViewer.getState().selection.buildingId
const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
if (!buildingObj) return [wx, wy, wz]
const v = new THREE.Vector3(wx, wy, wz)
buildingObj.worldToLocal(v)
return [v.x, v.y, v.z]
}
let lastSnap: [number, number] | null = null
let lastTarget: RelativeRoofDragTarget | null = null
const roofDrag = createRelativeRoofDrag(original)
const updatePreview = (event: RoofEvent) => {
const wx = event.position[0]
const wy = event.position[1]
const wz = event.position[2]
const target = roofDrag.resolve(event)
if (!target) return
lastTarget = target
const sx = Math.round(wx * 20) / 20
const sz = Math.round(wz * 20) / 20
const sx = Math.round(target.localX * 20) / 20
const sz = Math.round(target.localZ * 20) / 20
if (!lastSnap || lastSnap[0] !== sx || lastSnap[1] !== sz) {
triggerSFX('sfx:grid-snap')
lastSnap = [sx, sz]
}
const hit = resolveRoofSegmentHit(event.node as RoofNode, wx, wy, wz)
if (!hit) return
const normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment)
const normal = getAnalyticalNormal(target.localX, target.localZ, target.segment)
setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion()))
setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewPos(worldToBuildingLocal(wx, wy, wz))
setPreviewYaw((event.node.rotation ?? 0) + (target.segment.rotation ?? 0))
setPreviewPos(
roofSegmentLocalToBuildingLocal(target.segment.id, [
target.localX,
target.localY,
target.localZ,
]),
)
event.stopPropagation()
}
const onRoofClick = (event: RoofEvent) => {
const hit = resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return
const targetSegmentId = hit.segment.id as AnyNodeId
const target = lastTarget ?? roofDrag.resolve(event)
if (!target) return
const targetSegmentId = target.segment.id as AnyNodeId
const st = useScene.getState()
// Reparent if the cursor landed on a different segment than the
@@ -124,7 +117,7 @@ export default function MoveBoxVentTool({ node }: { node: BoxVentNode }) {
st.updateNode(node.id as AnyNodeId, {
roofSegmentId: targetSegmentId,
parentId: targetSegmentId,
position: [hit.localX, hit.localY, hit.localZ],
position: [target.localX, target.localY, target.localZ],
rotation: original.rotation,
visible: true,
metadata: {},
packages/nodes/src/building/move-tool.tsx
+17 -7
View File
@@ -17,6 +17,7 @@ const Y_AXIS = new THREE.Vector3(0, 1, 0)
export function MoveBuildingContent({ node }: { node: BuildingNode }) {
const previousGridPosRef = useRef<[number, number] | null>(null)
const dragAnchorRef = useRef<[number, number] | null>(null)
// Stable refs so the effect never needs node in its dependency array
const nodeIdRef = useRef(node.id)
@@ -29,9 +30,8 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
const pendingRotationRef = useRef<number>(node.rotation[1] ?? 0)
// Local-space offset from the building's origin to its bbox center. The
// floating drag button anchors at the bbox center, so we pin that point to
// the cursor during the drag — otherwise the raw origin (often nowhere near
// the visual center) would snap to the cursor and the building would jump.
// move preview preserves the first pointer-to-center delta, then uses this
// offset to write the origin while keeping rotation around the visual center.
const centerOffsetLocalRef = useRef<THREE.Vector3>(new THREE.Vector3())
const [cursorWorldPos, setCursorWorldPos] = useState<[number, number, number]>(() => {
@@ -66,8 +66,15 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
const offsetWork = new THREE.Vector3()
const offsetAt = (rotationY: number) =>
offsetWork.copy(centerOffsetLocalRef.current).applyAxisAngle(Y_AXIS, rotationY)
const originalCenterOffset = offsetAt(originalRotationRef.current).clone()
const originalCenter: [number, number] = [
originalPosition[0] + originalCenterOffset.x,
originalPosition[2] + originalCenterOffset.z,
]
useScene.temporal.getState().pause()
dragAnchorRef.current = null
previousGridPosRef.current = null
// Publish the building's current pose to useLiveTransforms so the
// floor-plan (and any other live consumers) can follow per-frame
@@ -114,8 +121,12 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
}
const onGridMove = (event: GridEvent) => {
const gridX = Math.round(event.position[0] * 2) / 2
const gridZ = Math.round(event.position[2] * 2) / 2
const rawX = Math.round(event.position[0] * 2) / 2
const rawZ = Math.round(event.position[2] * 2) / 2
const anchor = dragAnchorRef.current ?? [rawX, rawZ]
dragAnchorRef.current = anchor
const gridX = originalCenter[0] + (rawX - anchor[0])
const gridZ = originalCenter[1] + (rawZ - anchor[1])
if (
previousGridPosRef.current &&
@@ -138,8 +149,7 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) {
}
const onGridClick = (event: GridEvent) => {
const gridX = Math.round(event.position[0] * 2) / 2
const gridZ = Math.round(event.position[2] * 2) / 2
const [gridX, gridZ] = previousGridPosRef.current ?? originalCenter
wasCommitted = true
packages/nodes/src/chimney/move-tool.tsx
+26 -29
View File
@@ -6,7 +6,6 @@ import {
ChimneyNode as ChimneyNodeSchema,
emitter,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
useScene,
@@ -15,7 +14,7 @@ import { triggerSFX, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef, useState } from 'react'
import * as THREE from 'three'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import { createRelativeRoofDrag, type RelativeRoofDragTarget } from '../shared/relative-roof-drag'
import ChimneyPreview from './preview'
const tmpMatrix = new THREE.Matrix4()
@@ -84,38 +83,36 @@ const MoveChimneyTool = ({ node }: { node: ChimneyNode }) => {
}
}
const updatePreview = (event: RoofEvent) => {
const wx = event.position[0]
const wy = event.position[1]
const wz = event.position[2]
let lastTarget: RelativeRoofDragTarget | null = null
const roofDrag = createRelativeRoofDrag({
position: [...node.position] as [number, number, number],
roofSegmentId: node.roofSegmentId,
})
const sx = Math.round(wx * 20) / 20
const sz = Math.round(wz * 20) / 20
const updatePreview = (event: RoofEvent) => {
const target = roofDrag.resolve(event)
if (!target) return
lastTarget = target
const sx = Math.round(target.localX * 20) / 20
const sz = Math.round(target.localZ * 20) / 20
const prev = lastSnapRef.current
if (!prev || prev[0] !== sx || prev[1] !== sz) {
triggerSFX('sfx:grid-snap')
lastSnapRef.current = [sx, sz]
}
const hit = resolveRoofSegmentHit(event.node as RoofNode, wx, wy, wz)
if (!hit) return
const xform = computeSegmentXform(hit.segment.id)
const xform = computeSegmentXform(target.segment.id)
if (!xform) return
setSegmentXform(xform)
setHitLocal([hit.localX, hit.localY, hit.localZ])
setPreviewSegment(hit.segment)
setHitLocal([target.localX, target.localY, target.localZ])
setPreviewSegment(target.segment)
event.stopPropagation()
}
const onClick = (event: RoofEvent) => {
const hit = resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return
const target = lastTarget ?? roofDrag.resolve(event)
if (!target) return
const state = useScene.getState()
// Strip the `isNew` flag — only used to mark a duplicate clone
@@ -135,23 +132,23 @@ const MoveChimneyTool = ({ node }: { node: ChimneyNode }) => {
const committed = ChimneyNodeSchema.parse({
...node,
id: undefined as never,
roofSegmentId: hit.segment.id,
position: [hit.localX, hit.localY, hit.localZ],
roofSegmentId: target.segment.id,
position: [target.localX, target.localY, target.localZ],
metadata: cleanedMeta,
})
state.createNode(committed, hit.segment.id as AnyNodeId)
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
state.createNode(committed, target.segment.id as AnyNodeId)
state.dirtyNodes.add(target.segment.id as AnyNodeId)
setSelection({ selectedIds: [committed.id] })
} else {
const prevSegmentId = node.roofSegmentId as AnyNodeId | undefined
state.updateNode(node.id as AnyNodeId, {
roofSegmentId: hit.segment.id,
parentId: hit.segment.id,
position: [hit.localX, hit.localY, hit.localZ],
roofSegmentId: target.segment.id,
parentId: target.segment.id,
position: [target.localX, target.localY, target.localZ],
metadata: cleanedMeta,
})
if (prevSegmentId) state.dirtyNodes.add(prevSegmentId)
state.dirtyNodes.add(hit.segment.id as AnyNodeId)
state.dirtyNodes.add(target.segment.id as AnyNodeId)
setSelection({ selectedIds: [node.id] })
}
setMovingNode(null)
packages/nodes/src/column/floorplan-move.ts
+12 -6
View File
@@ -10,10 +10,11 @@ import {
} from '@pascal-app/core'
import {
applyFloorplanAlignment,
snapPointToGrid,
triggerSFX,
useEditor,
type WallPlanPoint,
} from '@pascal-app/editor'
import { createFloorplanCursorResolver } from '../shared/floorplan-cursor'
/**
* 2D floor-plan move handler for column — mirrors `itemFloorplanMoveTarget`:
@@ -39,12 +40,14 @@ import {
* Column stores rotation as a scalar (not a tuple); position is `[x, y, z]`.
*/
const GRID_STEP = 0.5
export const columnFloorplanMoveTarget: FloorplanMoveTarget<ColumnNode> = ({ node, nodes }) => {
const columnId = node.id as AnyNodeId
const originalPosition: [number, number, number] = [...node.position] as [number, number, number]
const rotationY = node.rotation ?? 0
const resolveCursor = createFloorplanCursorResolver({
original: [originalPosition[0], originalPosition[2]],
metadata: node.metadata,
})
let lastPosition: [number, number, number] = originalPosition
let lastSnapKey: string | null = null
@@ -54,9 +57,12 @@ export const columnFloorplanMoveTarget: FloorplanMoveTarget<ColumnNode> = ({ nod
const session: FloorplanMoveTargetSession = {
affectedIds: [columnId],
apply({ planPoint, modifiers }) {
const gridSnapped: WallPlanPoint = modifiers.shiftKey
? ([planPoint[0], planPoint[1]] as WallPlanPoint)
: snapPointToGrid([planPoint[0], planPoint[1]] as WallPlanPoint, GRID_STEP)
const snap = (value: number) => {
if (modifiers.shiftKey) return value
const step = useEditor.getState().gridSnapStep
return Math.round(value / step) * step
}
const gridSnapped = resolveCursor(planPoint, { snap }) as WallPlanPoint
// Figma-style alignment layered on the grid snap (Alt bypasses).
const { point: snapped } = applyFloorplanAlignment(
gridSnapped,
packages/nodes/src/column/move-tool.tsx
+56 -13
View File
@@ -16,12 +16,17 @@ import {
} from '@pascal-app/core'
import {
CursorSphere,
commitFreshPlacementSubtree,
DragBoundingBox,
getFloorStackPreviewPosition,
markToolCancelConsumed,
resolvePlanarCursorPosition,
stripPlacementMetadataFlags,
triggerSFX,
useEditor,
useFreshPlacementVisibility,
} from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useState } from 'react'
/**
@@ -54,6 +59,8 @@ const ALIGNMENT_THRESHOLD_M = 0.08
function MoveColumnTool({ node }: { node: ColumnNode }) {
const [previewPosition, setPreviewPosition] = useState<[number, number, number]>(node.position)
const [previewRotation, setPreviewRotation] = useState<number>(node.rotation)
const { isFreshPlacement, previewVisible, revealFreshPlacement, useAbsoluteCursorPlacement } =
useFreshPlacementVisibility({ node })
const exitMoveMode = useCallback(() => {
useEditor.getState().setMovingNode(null)
@@ -70,11 +77,8 @@ function MoveColumnTool({ node }: { node: ColumnNode }) {
let rotationY = node.rotation
// Latest previewed position, so an R/T press can re-apply at the spot.
let lastPosition: [number, number, number] = node.position
const meta =
typeof node.metadata === 'object' && node.metadata !== null
? (node.metadata as Record<string, unknown>)
: {}
const isNew = !!meta.isNew
let dragAnchor: [number, number] | null = null
const isNew = isFreshPlacement
const getVisualPosition = (
position: [number, number, number],
rotation = rotationY,
@@ -111,8 +115,19 @@ function MoveColumnTool({ node }: { node: ColumnNode }) {
const onGridMove = (event: GridEvent) => {
hasMoved = true
let x = snapToGridStep(event.localPosition[0])
let z = snapToGridStep(event.localPosition[2])
const rawX = event.localPosition[0]
const rawZ = event.localPosition[2]
revealFreshPlacement()
const resolved = resolvePlanarCursorPosition({
cursor: [rawX, rawZ],
original: [node.position[0], node.position[2]],
anchor: dragAnchor,
mode: useAbsoluteCursorPlacement ? 'absolute' : 'relative',
snap: snapToGridStep,
})
dragAnchor = resolved.anchor
let [x, z] = resolved.point
// Figma-style alignment snap on top of grid snap; Alt bypasses. The
// guide connects to the candidate's nearest real anchor (resolver
@@ -157,13 +172,30 @@ function MoveColumnTool({ node }: { node: ColumnNode }) {
// click to the grid.
const position: [number, number, number] = [...lastPosition]
const nodeId = (node as { id?: ColumnNode['id'] }).id
let committedId = node.id as AnyNodeId
if (nodeId && useScene.getState().nodes[nodeId]) {
const data = {
position,
rotation: rotationY,
...(isNew
? {
metadata: stripPlacementMetadataFlags(node.metadata) as ColumnNode['metadata'],
visible: true,
}
: null),
}
if (isNew) {
const finalId = commitFreshPlacementSubtree(nodeId as AnyNodeId, data)
if (finalId) {
committed = true
committedId = finalId
}
} else {
committed = true
useScene.temporal.getState().resume()
useScene
.getState()
.updateNode(nodeId, { position, rotation: rotationY, ...(isNew ? { metadata: {} } : {}) })
useScene.getState().updateNode(nodeId, data)
}
useLiveTransforms.getState().clear(nodeId)
const m = sceneRegistry.nodes.get(nodeId)
if (m) {
@@ -184,7 +216,11 @@ function MoveColumnTool({ node }: { node: ColumnNode }) {
}
useLiveTransforms.getState().clear(node.id)
if (isNew && committed) {
useViewer.getState().setSelection({ selectedIds: [committedId] })
}
triggerSFX('sfx:item-place')
useEditor.getState().setMovingNodeOrigin('3d')
exitMoveMode()
event.nativeEvent?.stopPropagation?.()
}
@@ -192,12 +228,16 @@ function MoveColumnTool({ node }: { node: ColumnNode }) {
const onCancel = () => {
useLiveTransforms.getState().clear(node.id)
useAlignmentGuides.getState().clear()
if (isNew) {
useScene.getState().deleteNode(node.id as AnyNodeId)
} else {
const m = sceneRegistry.nodes.get(node.id)
if (m) {
m.position.set(...getVisualPosition(node.position, node.rotation))
m.rotation.y = node.rotation
}
useScene.getState().markDirty(node.id as AnyNodeId)
}
useScene.temporal.getState().resume()
markToolCancelConsumed()
exitMoveMode()
@@ -215,17 +255,20 @@ function MoveColumnTool({ node }: { node: ColumnNode }) {
emitter.off('tool:cancel', onCancel)
useLiveTransforms.getState().clear(node.id)
useAlignmentGuides.getState().clear()
if (!committed) {
const finalisedBy2D = useEditor.getState().movingNodeOrigin === '2d'
if (!(committed || isNew || finalisedBy2D)) {
const m = sceneRegistry.nodes.get(node.id)
if (m) {
m.position.set(...getVisualPosition(node.position, node.rotation))
m.rotation.y = node.rotation
}
useScene.getState().markDirty(node.id as AnyNodeId)
}
useScene.temporal.getState().resume()
}
}
}, [exitMoveMode, node])
}, [exitMoveMode, isFreshPlacement, node, revealFreshPlacement, useAbsoluteCursorPlacement])
if (!previewVisible) return null
return (
<>
packages/nodes/src/column/tool.tsx
+42 -53
View File
@@ -7,24 +7,27 @@ import {
collectAlignmentAnchors,
emitter,
type GridEvent,
movingFootprintAnchors,
resolveAlignment,
snapPointToGrid,
useAlignmentGuides,
useScene,
} from '@pascal-app/core'
import { getFloorStackPreviewPosition, triggerSFX, usePlacementPreview } from '@pascal-app/editor'
import {
getFloorStackPreviewPosition,
triggerSFX,
useEditor,
usePlacementPreview,
} from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef } from 'react'
import { useEffect, useMemo, useRef, useState } from 'react'
import type { Group } from 'three'
import {
type FloorPlacementClickTriggerEvent,
getLevelLocalSnappedPosition,
resolveAlignedFloorPlacement,
stopPlacementCommitPropagation,
subscribeFloorPlacementClicks,
} from '../shared/floor-placement'
import { ColumnPreview } from './renderer'
const GRID_STEP = 0.5
/** Figma-style alignment-snap threshold (meters), matching the move tools and
* the shelf placement tool. */
const ALIGNMENT_THRESHOLD_M = 0.08
const DEFAULT_COLUMN_PRESET_ID = 'basicPillar' satisfies ColumnPresetId
function createColumnFromPreset(presetId: ColumnPresetId, position: [number, number, number]) {
@@ -52,6 +55,8 @@ const ColumnTool = () => {
const activeLevelId = useViewer((state) => state.selection.levelId)
const cursorRef = useRef<Group>(null)
const previousSnapRef = useRef<[number, number] | null>(null)
const cursorVisibleRef = useRef(false)
const [cursorVisible, setCursorVisible] = useState(false)
// Default-preset column for the placement ghost — matches exactly what the
// commit creates (`basicPillar`), so the preview is faithful.
@@ -60,6 +65,9 @@ const ColumnTool = () => {
useEffect(() => {
if (!activeLevelId) return
previousSnapRef.current = null
cursorVisibleRef.current = false
setCursorVisible(false)
const lastCursorRef: { current: [number, number, number] | null } = { current: null }
// Alignment candidates — anchors of every other alignable object, gathered
// here and refreshed after each placement so a just-placed column becomes a
@@ -68,30 +76,21 @@ const ColumnTool = () => {
let alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, previewNode.id)
const onGridMove = (event: GridEvent) => {
const [sx, sz] = snapPointToGrid([event.localPosition[0], event.localPosition[2]], GRID_STEP)
if (!cursorVisibleRef.current) {
cursorVisibleRef.current = true
setCursorVisible(true)
}
// Figma-style alignment snap layered on top of grid snap: when the
// preview column's footprint edge lines up (on X or Z) with another
// object's edge, snap there and publish a guide. Alt bypasses.
let ax = sx
let az = sz
const bypass = event.nativeEvent?.altKey === true
if (!bypass && alignmentCandidates.length > 0) {
const result = resolveAlignment({
moving: movingFootprintAnchors(previewNode, sx, sz, 0),
const { position, guides } = resolveAlignedFloorPlacement({
node: previewNode,
rawX: event.localPosition[0],
rawZ: event.localPosition[2],
gridStep: useEditor.getState().gridSnapStep,
candidates: alignmentCandidates,
threshold: ALIGNMENT_THRESHOLD_M,
bypassAlignment: event.nativeEvent?.altKey === true,
})
if (result.snap) {
ax += result.snap.dx
az += result.snap.dz
}
useAlignmentGuides.getState().set(result.guides)
} else {
useAlignmentGuides.getState().clear()
}
useAlignmentGuides.getState().set(guides)
const position: [number, number, number] = [ax, 0, az]
const visualPosition = getFloorStackPreviewPosition({
node: previewNode,
position,
@@ -99,6 +98,7 @@ const ColumnTool = () => {
levelId: activeLevelId,
})
cursorRef.current?.position.set(...visualPosition)
lastCursorRef.current = position
// Publish a transient, positioned preview node for the 2D floor-plan
// ghost (the 3D `ColumnPreview` mesh is hidden in 2D). The floor-plan
@@ -107,30 +107,18 @@ const ColumnTool = () => {
usePlacementPreview.getState().set({ ...previewNode, position })
const prev = previousSnapRef.current
if (!prev || prev[0] !== ax || prev[1] !== az) {
if (!prev || prev[0] !== position[0] || prev[1] !== position[2]) {
triggerSFX('sfx:grid-snap')
previousSnapRef.current = [ax, az]
previousSnapRef.current = [position[0], position[2]]
}
}
const onGridClick = (event: GridEvent) => {
const [sx, sz] = snapPointToGrid([event.localPosition[0], event.localPosition[2]], GRID_STEP)
let ax = sx
let az = sz
const bypass = event.nativeEvent?.altKey === true
if (!bypass && alignmentCandidates.length > 0) {
const result = resolveAlignment({
moving: movingFootprintAnchors(previewNode, sx, sz, 0),
candidates: alignmentCandidates,
threshold: ALIGNMENT_THRESHOLD_M,
})
if (result.snap) {
ax += result.snap.dx
az += result.snap.dz
}
}
const commitAtCursor = (event: FloorPlacementClickTriggerEvent) => {
const position =
lastCursorRef.current ??
getLevelLocalSnappedPosition(activeLevelId, event, useEditor.getState().gridSnapStep)
const column = createColumnFromPreset(DEFAULT_COLUMN_PRESET_ID, [ax, 0, az])
const column = createColumnFromPreset(DEFAULT_COLUMN_PRESET_ID, position)
useScene.getState().createNode(column, activeLevelId)
useViewer.getState().setSelection({ selectedIds: [column.id] })
triggerSFX('sfx:structure-build')
@@ -140,14 +128,15 @@ const ColumnTool = () => {
alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, previewNode.id)
useAlignmentGuides.getState().clear()
usePlacementPreview.getState().clear()
stopPlacementCommitPropagation(event)
}
emitter.on('grid:move', onGridMove)
emitter.on('grid:click', onGridClick)
const unsubscribePlacementClicks = subscribeFloorPlacementClicks(commitAtCursor)
return () => {
emitter.off('grid:move', onGridMove)
emitter.off('grid:click', onGridClick)
unsubscribePlacementClicks()
useAlignmentGuides.getState().clear()
usePlacementPreview.getState().clear()
}
@@ -156,7 +145,7 @@ const ColumnTool = () => {
if (!activeLevelId) return null
return (
<group ref={cursorRef}>
<group ref={cursorRef} visible={cursorVisible}>
<ColumnPreview node={previewNode} />
</group>
)
packages/nodes/src/cupola/move-tool.tsx
+25 -32
View File
@@ -5,16 +5,18 @@ import {
type CupolaNode,
emitter,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useState } from 'react'
import * as THREE from 'three'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
} from '../shared/relative-roof-drag'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
import CupolaPreview from './preview'
@@ -53,48 +55,39 @@ export default function MoveCupolaTool({ node }: { node: CupolaNode }) {
const cupolaObj = sceneRegistry.nodes.get(node.id)
if (cupolaObj) cupolaObj.visible = false
const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => {
const buildingId = useViewer.getState().selection.buildingId
const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
if (!buildingObj) return [wx, wy, wz]
const v = new THREE.Vector3(wx, wy, wz)
buildingObj.worldToLocal(v)
return [v.x, v.y, v.z]
}
let lastSnap: [number, number] | null = null
let lastTarget: RelativeRoofDragTarget | null = null
const roofDrag = createRelativeRoofDrag(original)
const updatePreview = (event: RoofEvent) => {
const wx = event.position[0]
const wy = event.position[1]
const wz = event.position[2]
const target = roofDrag.resolve(event)
if (!target) return
lastTarget = target
const sx = Math.round(wx * 20) / 20
const sz = Math.round(wz * 20) / 20
const sx = Math.round(target.localX * 20) / 20
const sz = Math.round(target.localZ * 20) / 20
if (!lastSnap || lastSnap[0] !== sx || lastSnap[1] !== sz) {
triggerSFX('sfx:grid-snap')
lastSnap = [sx, sz]
}
const hit = resolveRoofSegmentHit(event.node as RoofNode, wx, wy, wz)
if (!hit) return
const normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment)
const normal = getAnalyticalNormal(target.localX, target.localZ, target.segment)
setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion()))
setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewPos(worldToBuildingLocal(wx, wy, wz))
setPreviewYaw((event.node.rotation ?? 0) + (target.segment.rotation ?? 0))
setPreviewPos(
roofSegmentLocalToBuildingLocal(target.segment.id, [
target.localX,
target.localY,
target.localZ,
]),
)
event.stopPropagation()
}
const onRoofClick = (event: RoofEvent) => {
const hit = resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return
const targetSegmentId = hit.segment.id as AnyNodeId
const target = lastTarget ?? roofDrag.resolve(event)
if (!target) return
const targetSegmentId = target.segment.id as AnyNodeId
const st = useScene.getState()
const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined
@@ -118,7 +111,7 @@ export default function MoveCupolaTool({ node }: { node: CupolaNode }) {
st.updateNode(node.id as AnyNodeId, {
roofSegmentId: targetSegmentId,
parentId: targetSegmentId,
position: [hit.localX, hit.localY, hit.localZ],
position: [target.localX, target.localY, target.localZ],
rotation: original.rotation,
visible: true,
metadata: {},
packages/nodes/src/door/floorplan-move.ts
+19 -2
View File
@@ -4,9 +4,15 @@ import {
type FloorplanMoveTarget,
type FloorplanMoveTargetSession,
useScene,
type WallNode,
} from '@pascal-app/core'
import { snapToHalf } from '@pascal-app/editor'
import { findClosestWallInPlan, snapLocalXToNeighbors } from '../shared/wall-attach-target'
import { createFloorplanCursorResolver } from '../shared/floorplan-cursor'
import {
findClosestWallInPlan,
projectWallLocalPointToPlan,
snapLocalXToNeighbors,
} from '../shared/wall-attach-target'
import { clampToWall, hasWallChildOverlap } from './door-math'
/**
@@ -36,6 +42,16 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
const wall = useScene.getState().nodes[node.parentId as AnyNodeId]
return wall ? (wall.parentId as AnyNodeId | null) : null
})()
const originalWall = node.parentId
? (useScene.getState().nodes[node.parentId as AnyNodeId] as WallNode | undefined)
: undefined
const resolveCursor = createFloorplanCursorResolver({
original:
originalWall?.type === 'wall'
? projectWallLocalPointToPlan(originalWall, node.position[0])
: [node.position[0], 0],
metadata: node.metadata,
})
// Track the last successful placement so `commit()` can write it
// atomically — see the comment on `commit` below for why we don't
@@ -52,7 +68,8 @@ export const doorFloorplanMoveTarget: FloorplanMoveTarget<DoorNode> = ({ node })
affectedIds: [node.id as AnyNodeId],
apply({ planPoint, modifiers }) {
const nodes = useScene.getState().nodes
const hit = findClosestWallInPlan(planPoint, nodes, startLevelId)
const resolvedPlanPoint = resolveCursor(planPoint)
const hit = findClosestWallInPlan(resolvedPlanPoint, nodes, startLevelId)
if (!hit) return // pointer off any wall — keep door at last valid position
// Figma-style along-wall alignment first (edge-to-edge with other
packages/nodes/src/door/move-tool.tsx
+98 -128
View File
@@ -17,6 +17,7 @@ import {
EDITOR_LAYER,
getSideFromNormal,
isValidWallSideFace,
stripPlacementMetadataFlags,
triggerSFX,
useEditor,
} from '@pascal-app/editor'
@@ -66,6 +67,18 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
}
let currentWallId: string | null = movingDoorNode.parentId
let dragAnchor: { wallId: string; rawX: number; startX: number } | null = null
let lastTarget: {
wallNode: WallEvent['node']
wallId: string
side: DoorNode['side']
itemRotation: number
cursorRotation: number
clampedX: number
clampedY: number
valid: boolean
event: WallEvent
} | null = null
const markWallDirty = (wallId: string | null) => {
if (wallId) useScene.getState().dirtyNodes.add(wallId as AnyNodeId)
@@ -131,7 +144,7 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
}
}
const onWallEnter = (event: WallEvent) => {
const resolveMoveTarget = (event: WallEvent) => {
if (!isValidWallSideFace(event.normal)) return
if (isCurvedWall(event.node)) {
hideCursor()
@@ -141,9 +154,18 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
const { side, itemRotation, cursorRotation } = getPlacementOrientation(event)
const rawLocalX = event.localPosition[0]
if (!dragAnchor || dragAnchor.wallId !== event.node.id) {
dragAnchor = {
wallId: event.node.id,
rawX: rawLocalX,
startX: event.node.id === original.parentId ? original.position[0] : rawLocalX,
}
}
const targetLocalX = dragAnchor.startX + (rawLocalX - dragAnchor.rawX)
const localX = resolveWallSlideAlignment({
wallNode: event.node,
rawLocalX: event.localPosition[0],
rawLocalX: targetLocalX,
width: movingDoorNode.width,
candidates: alignmentCandidates,
bypass: event.nativeEvent?.altKey === true,
@@ -155,24 +177,6 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
movingDoorNode.height,
)
const prevWallId = currentWallId
currentWallId = event.node.id
useScene.getState().updateNode(movingDoorNode.id, {
position: [clampedX, clampedY, 0],
rotation: [0, itemRotation, 0],
side,
parentId: event.node.id,
wallId: event.node.id,
})
useLiveTransforms.getState().set(movingDoorNode.id, {
position: [clampedX, clampedY, 0],
rotation: itemRotation,
})
if (prevWallId && prevWallId !== event.node.id) markWallDirty(prevWallId)
markWallDirtyThrottled(event.node.id)
const valid = !hasWallChildOverlap(
event.node.id,
clampedX,
@@ -182,17 +186,62 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
movingDoorNode.id,
)
updateCursor(
wallLocalToWorld(
event.node,
return {
wallNode: event.node,
wallId: event.node.id,
side,
itemRotation,
cursorRotation,
clampedX,
clampedY,
getLevelYOffset(),
getSlabElevation(event),
),
cursorRotation,
valid,
event,
}
}
const applyPreview = (target: NonNullable<typeof lastTarget>) => {
if (currentWallId !== target.wallId) {
useScene.getState().updateNode(movingDoorNode.id, {
position: [target.clampedX, target.clampedY, 0],
rotation: [0, target.itemRotation, 0],
side: target.side,
parentId: target.wallId,
wallId: target.wallId,
})
markWallDirty(currentWallId)
currentWallId = target.wallId
} else {
const doorMesh = sceneRegistry.nodes.get(movingDoorNode.id as AnyNodeId)
if (doorMesh) {
doorMesh.position.set(target.clampedX, target.clampedY, 0)
doorMesh.rotation.set(0, target.itemRotation, 0)
doorMesh.updateMatrixWorld(true)
}
}
useLiveTransforms.getState().set(movingDoorNode.id, {
position: [target.clampedX, target.clampedY, 0],
rotation: target.itemRotation,
})
markWallDirtyThrottled(target.wallId)
updateCursor(
wallLocalToWorld(
target.wallNode,
target.clampedX,
target.clampedY,
getLevelYOffset(),
getSlabElevation(target.event),
),
target.cursorRotation,
target.valid,
)
}
const onWallEnter = (event: WallEvent) => {
const target = resolveMoveTarget(event)
if (!target) return
lastTarget = target
applyPreview(target)
event.stopPropagation()
}
@@ -204,69 +253,10 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
}
if (event.node.parentId !== getLevelId()) return
const { side, itemRotation, cursorRotation } = getPlacementOrientation(event)
const localX = resolveWallSlideAlignment({
wallNode: event.node,
rawLocalX: event.localPosition[0],
width: movingDoorNode.width,
candidates: alignmentCandidates,
bypass: event.nativeEvent?.altKey === true,
})
const { clampedX, clampedY } = clampToWall(
event.node,
localX,
movingDoorNode.width,
movingDoorNode.height,
)
if (currentWallId !== event.node.id) {
// Wall changed mid-move: must updateNode to reparent
useScene.getState().updateNode(movingDoorNode.id, {
position: [clampedX, clampedY, 0],
rotation: [0, itemRotation, 0],
side,
parentId: event.node.id,
wallId: event.node.id,
})
markWallDirty(currentWallId)
currentWallId = event.node.id
} else {
// Same wall: update Three.js mesh directly to avoid store churn
// collectCutoutBrushes reads cutoutMesh.matrixWorld, not scene store positions
const doorMesh = sceneRegistry.nodes.get(movingDoorNode.id as AnyNodeId)
if (doorMesh) {
doorMesh.position.set(clampedX, clampedY, 0)
doorMesh.rotation.set(0, itemRotation, 0)
doorMesh.updateMatrixWorld(true)
}
}
useLiveTransforms.getState().set(movingDoorNode.id, {
position: [clampedX, clampedY, 0],
rotation: itemRotation,
})
markWallDirtyThrottled(event.node.id)
const valid = !hasWallChildOverlap(
event.node.id,
clampedX,
clampedY,
movingDoorNode.width,
movingDoorNode.height,
movingDoorNode.id,
)
updateCursor(
wallLocalToWorld(
event.node,
clampedX,
clampedY,
getLevelYOffset(),
getSlabElevation(event),
),
cursorRotation,
valid,
)
const target = resolveMoveTarget(event)
if (!target) return
lastTarget = target
applyPreview(target)
event.stopPropagation()
}
@@ -275,31 +265,8 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
if (isCurvedWall(event.node)) return
if (event.node.parentId !== getLevelId()) return
const { side, itemRotation } = getPlacementOrientation(event)
const localX = resolveWallSlideAlignment({
wallNode: event.node,
rawLocalX: event.localPosition[0],
width: movingDoorNode.width,
candidates: alignmentCandidates,
bypass: event.nativeEvent?.altKey === true,
})
const { clampedX, clampedY } = clampToWall(
event.node,
localX,
movingDoorNode.width,
movingDoorNode.height,
)
const valid = !hasWallChildOverlap(
event.node.id,
clampedX,
clampedY,
movingDoorNode.width,
movingDoorNode.height,
movingDoorNode.id,
)
if (!valid) return
const target = lastTarget?.wallId === event.node.id ? lastTarget : resolveMoveTarget(event)
if (!target?.valid) return
let placedId: string
@@ -309,15 +276,16 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
const cloned = structuredClone(movingDoorNode) as any
delete cloned.id
cloned.metadata = stripPlacementMetadataFlags(cloned.metadata)
const node = DoorNode.parse({
...cloned,
position: [clampedX, clampedY, 0],
rotation: [0, itemRotation, 0],
side,
wallId: event.node.id,
parentId: event.node.id,
position: [target.clampedX, target.clampedY, 0],
rotation: [0, target.itemRotation, 0],
side: target.side,
wallId: target.wallId,
parentId: target.wallId,
})
useScene.getState().createNode(node, event.node.id as AnyNodeId)
useScene.getState().createNode(node, target.wallId as AnyNodeId)
placedId = node.id
} else {
useScene.getState().updateNode(movingDoorNode.id, {
@@ -331,21 +299,21 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
useScene.temporal.getState().resume()
useScene.getState().updateNode(movingDoorNode.id, {
position: [clampedX, clampedY, 0],
rotation: [0, itemRotation, 0],
side,
parentId: event.node.id,
wallId: event.node.id,
position: [target.clampedX, target.clampedY, 0],
rotation: [0, target.itemRotation, 0],
side: target.side,
parentId: target.wallId,
wallId: target.wallId,
metadata: {},
})
if (original.parentId && original.parentId !== event.node.id) {
if (original.parentId && original.parentId !== target.wallId) {
markWallDirty(original.parentId)
}
placedId = movingDoorNode.id
}
markWallDirty(event.node.id)
markWallDirty(target.wallId)
useLiveTransforms.getState().clear(movingDoorNode.id)
useScene.temporal.getState().pause()
@@ -359,6 +327,8 @@ const MoveDoorTool: React.FC<{ node: DoorNode }> = ({ node: movingDoorNode }) =>
const onWallLeave = () => {
hideCursor()
useLiveTransforms.getState().clear(movingDoorNode.id)
dragAnchor = null
lastTarget = null
if (isNew) return
if (currentWallId && currentWallId !== original.parentId) {
markWallDirty(currentWallId)
packages/nodes/src/dormer/move-tool.tsx
+5 -1
View File
@@ -51,6 +51,7 @@ const MoveDormerTool = ({ node }: { node: DormerNode }) => {
const originalRotation = node.rotation ?? 0
const originalMetadata = node.metadata
// biome-ignore lint/correctness/useExhaustiveDependencies: capture-on-mount; meta is intentionally not re-read on changes.
useEffect(() => {
if (!isNew) {
useScene.getState().updateNode(node.id as AnyNodeId, {
@@ -71,11 +72,14 @@ const MoveDormerTool = ({ node }: { node: DormerNode }) => {
})
}
}
// biome-ignore lint/correctness/useExhaustiveDependencies: capture-on-mount; meta is intentionally not re-read on changes.
}, [node.id, isNew])
const { activeBuildingId, segmentXform, hitLocal, ghostRotation } = useDormerPlacement({
initialRotation: originalRotation,
relativeStart: {
position: [...node.position] as [number, number, number],
roofSegmentId: node.roofSegmentId,
},
onCommit: (hit, rotation) => {
const state = useScene.getState()
packages/nodes/src/dormer/use-dormer-placement.ts
+26 -8
View File
@@ -10,6 +10,7 @@ import { triggerSFX } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useRef, useState } from 'react'
import * as THREE from 'three'
import { createRelativeRoofDrag } from '../shared/relative-roof-drag'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import { DORMER_PLACEMENT_ROTATION_STEP, DORMER_PLACEMENT_SNAP_M } from './geometry'
@@ -50,6 +51,10 @@ export type DormerPlacementHit = {
*/
export function useDormerPlacement(opts: {
initialRotation?: number
relativeStart?: {
position: [number, number, number]
roofSegmentId?: string
}
onCommit: (hit: DormerPlacementHit, rotation: number) => void
}): {
activeBuildingId: string | undefined
@@ -66,6 +71,7 @@ export function useDormerPlacement(opts: {
// Mirror of `ghostRotation` so the click handler (registered once
// inside useEffect) can read the latest value at commit time.
const ghostRotationRef = useRef(opts.initialRotation ?? 0)
const relativeStartRef = useRef(opts.relativeStart)
// Latest commit callback, captured via ref so the useEffect doesn't
// need it in its dep list (we don't want to re-register listeners
// every time the parent rerenders).
@@ -90,9 +96,23 @@ export function useDormerPlacement(opts: {
}
}
const roofDrag = relativeStartRef.current
? createRelativeRoofDrag(relativeStartRef.current)
: null
let lastRelativeHit: DormerPlacementHit | null = null
const resolvePlacementHit = (event: RoofEvent): DormerPlacementHit | null => {
if (roofDrag) return roofDrag.resolve(event)
return resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
}
const updatePreview = (event: RoofEvent) => {
const wx = event.position[0]
const wy = event.position[1]
const wz = event.position[2]
const sx = Math.round(wx / DORMER_PLACEMENT_SNAP_M) * DORMER_PLACEMENT_SNAP_M
@@ -103,8 +123,9 @@ export function useDormerPlacement(opts: {
lastSnapRef.current = [sx, sz]
}
const hit = resolveRoofSegmentHit(event.node as RoofNode, wx, wy, wz)
const hit = resolvePlacementHit(event)
if (!hit) return
if (roofDrag) lastRelativeHit = hit
const xform = computeSegmentXform(hit.segment.id)
if (!xform) return
setSegmentXform(xform)
@@ -118,12 +139,9 @@ export function useDormerPlacement(opts: {
}
const onClick = (event: RoofEvent) => {
const hit = resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
const hit = roofDrag
? (lastRelativeHit ?? resolvePlacementHit(event))
: resolvePlacementHit(event)
if (!hit) return
onCommitRef.current(hit, ghostRotationRef.current)
triggerSFX('sfx:item-place')
packages/nodes/src/elevator/definition.ts
+36 -12
View File
@@ -17,6 +17,7 @@ import { ElevatorNode } from './schema'
const SIDE_HANDLE_OFFSET = 0.22
const HEIGHT_HANDLE_OFFSET = 0.3
const MOVE_FRONT_OFFSET = 0.35
const MIN_ELEVATOR_DIM = 0.6
const MIN_CAB_HEIGHT = 1.4
const ROTATE_CORNER_OFFSET = 0.4
@@ -81,6 +82,16 @@ function elevatorCabHeightHandle(): HandleDescriptor<ElevatorNodeType> {
}
}
function elevatorOuterHalfExtents(n: ElevatorNodeType): { halfX: number; halfZ: number } {
const cabWidth = getElevatorCabWidth(n)
const cabDepth = getElevatorCabDepth(n)
const wallThickness = getElevatorShaftWallThickness(n)
return {
halfX: getElevatorShaftWidth(n, cabWidth) / 2 + wallThickness,
halfZ: getElevatorShaftDepth(n, cabDepth) / 2 + wallThickness,
}
}
// Rotation handle — sits at the front-right corner of the shaft
// footprint. `arc-resize` does the angular drag math (raycasts a
// horizontal plane at the arrow's Y, measures cursor angle around the
@@ -103,11 +114,7 @@ function elevatorRotateHandle(): HandleDescriptor<ElevatorNodeType> {
// shaft rather than diagonally at the corner — matches the column's
// one-direction rotate placement.
position: (n) => {
const cabWidth = getElevatorCabWidth(n)
const cabDepth = getElevatorCabDepth(n)
const wallThickness = getElevatorShaftWallThickness(n)
const halfX = getElevatorShaftWidth(n, cabWidth) / 2 + wallThickness
const halfZ = getElevatorShaftDepth(n, cabDepth) / 2 + wallThickness
const { halfX, halfZ } = elevatorOuterHalfExtents(n)
const yMid = Math.max(n.cabHeight, MIN_CAB_HEIGHT) / 2
return [halfX, yMid, halfZ + ROTATE_CORNER_OFFSET]
},
@@ -120,11 +127,7 @@ function elevatorRotateHandle(): HandleDescriptor<ElevatorNodeType> {
// Bounding circle through the shaft corners — drawn slightly larger
// so it sits outside the visible shell.
radius: (n) => {
const cabWidth = getElevatorCabWidth(n)
const cabDepth = getElevatorCabDepth(n)
const wallThickness = getElevatorShaftWallThickness(n)
const halfX = getElevatorShaftWidth(n, cabWidth) / 2 + wallThickness
const halfZ = getElevatorShaftDepth(n, cabDepth) / 2 + wallThickness
const { halfX, halfZ } = elevatorOuterHalfExtents(n)
return Math.hypot(halfX, halfZ) + ROTATE_RING_OFFSET
},
y: (n) => Math.max(n.cabHeight, MIN_CAB_HEIGHT) / 2,
@@ -132,11 +135,32 @@ function elevatorRotateHandle(): HandleDescriptor<ElevatorNodeType> {
}
}
function elevatorMoveHandle(): HandleDescriptor<ElevatorNodeType> {
return {
kind: 'translate',
placement: {
position: (n) => {
const { halfZ } = elevatorOuterHalfExtents(n)
return [0, 0.02, halfZ + MOVE_FRONT_OFFSET]
},
},
apply: (_n, pos) => ({ position: [pos[0], pos[1], pos[2]] }),
snapExtents: (n) => {
const { halfX, halfZ } = elevatorOuterHalfExtents(n)
const dimX = Math.max(halfX * 2, MIN_ELEVATOR_DIM)
const dimZ = Math.max(halfZ * 2, MIN_ELEVATOR_DIM)
const swap = Math.abs(Math.sin(n.rotation ?? 0)) > 0.9
return [swap ? dimZ : dimX, swap ? dimX : dimZ]
},
}
}
const elevatorHandles: HandleDescriptor<ElevatorNodeType>[] = [
elevatorAxisHandle('x'),
elevatorAxisHandle('z'),
elevatorCabHeightHandle(),
elevatorRotateHandle(),
elevatorMoveHandle(),
]
/**
@@ -174,10 +198,10 @@ export const elevatorDefinition: NodeDefinition<typeof ElevatorNode> = {
// bridge relocates this same footprint to the drag point.
alignmentFootprint: (node) => {
const e = node as ElevatorNodeType
const wall = getElevatorShaftWallThickness(e)
const { halfX, halfZ } = elevatorOuterHalfExtents(e)
return {
shape: 'box',
dimensions: [getElevatorShaftWidth(e) + wall * 2, 1, getElevatorShaftDepth(e) + wall * 2],
dimensions: [halfX * 2, 1, halfZ * 2],
rotation: [0, e.rotation ?? 0, 0],
}
},
packages/nodes/src/eyebrow-vent/move-tool.tsx
+25 -32
View File
@@ -5,16 +5,18 @@ import {
type EyebrowVentNode,
emitter,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useState } from 'react'
import * as THREE from 'three'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
} from '../shared/relative-roof-drag'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
import EyebrowVentPreview from './preview'
@@ -54,48 +56,39 @@ export default function MoveEyebrowVentTool({ node }: { node: EyebrowVentNode })
const ventObj = sceneRegistry.nodes.get(node.id)
if (ventObj) ventObj.visible = false
const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => {
const buildingId = useViewer.getState().selection.buildingId
const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
if (!buildingObj) return [wx, wy, wz]
const v = new THREE.Vector3(wx, wy, wz)
buildingObj.worldToLocal(v)
return [v.x, v.y, v.z]
}
let lastSnap: [number, number] | null = null
let lastTarget: RelativeRoofDragTarget | null = null
const roofDrag = createRelativeRoofDrag(original)
const updatePreview = (event: RoofEvent) => {
const wx = event.position[0]
const wy = event.position[1]
const wz = event.position[2]
const target = roofDrag.resolve(event)
if (!target) return
lastTarget = target
const sx = Math.round(wx * 20) / 20
const sz = Math.round(wz * 20) / 20
const sx = Math.round(target.localX * 20) / 20
const sz = Math.round(target.localZ * 20) / 20
if (!lastSnap || lastSnap[0] !== sx || lastSnap[1] !== sz) {
triggerSFX('sfx:grid-snap')
lastSnap = [sx, sz]
}
const hit = resolveRoofSegmentHit(event.node as RoofNode, wx, wy, wz)
if (!hit) return
const normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment)
const normal = getAnalyticalNormal(target.localX, target.localZ, target.segment)
setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion()))
setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewPos(worldToBuildingLocal(wx, wy, wz))
setPreviewYaw((event.node.rotation ?? 0) + (target.segment.rotation ?? 0))
setPreviewPos(
roofSegmentLocalToBuildingLocal(target.segment.id, [
target.localX,
target.localY,
target.localZ,
]),
)
event.stopPropagation()
}
const onRoofClick = (event: RoofEvent) => {
const hit = resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return
const targetSegmentId = hit.segment.id as AnyNodeId
const target = lastTarget ?? roofDrag.resolve(event)
if (!target) return
const targetSegmentId = target.segment.id as AnyNodeId
const st = useScene.getState()
const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined
@@ -119,7 +112,7 @@ export default function MoveEyebrowVentTool({ node }: { node: EyebrowVentNode })
st.updateNode(node.id as AnyNodeId, {
roofSegmentId: targetSegmentId,
parentId: targetSegmentId,
position: [hit.localX, hit.localY, hit.localZ],
position: [target.localX, target.localY, target.localZ],
rotation: original.rotation,
visible: true,
metadata: {},
packages/nodes/src/gutter/move-tool.tsx
+27 -20
View File
@@ -12,7 +12,7 @@ import {
} from '@pascal-app/core'
import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
import { useCallback, useEffect, useState } from 'react'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import { createRelativeRoofDrag } from '../shared/relative-roof-drag'
import { type EaveSnap, resolveEaveSnap } from './eave-snap'
import GutterPreview from './preview'
@@ -22,6 +22,11 @@ type PreviewTarget = {
snap: EaveSnap
}
type GutterDragTarget = {
segment: RoofSegmentNode
snap: EaveSnap
}
/**
* Gutter move tool. Mirrors the ridge-vent move flow — ghost follows
* the cursor over any roof segment, click commits the new position +
@@ -65,23 +70,30 @@ export default function MoveGutterTool({ node }: { node: GutterNode }) {
if (gutterObj) gutterObj.visible = false
let lastSnap: [number, number] | null = null
let lastTarget: GutterDragTarget | null = null
const roofDrag = createRelativeRoofDrag(original)
const resolveTarget = (event: RoofEvent): GutterDragTarget | null => {
const target = roofDrag.resolve(event)
if (!target) return null
return {
segment: target.segment,
snap: resolveEaveSnap(target.segment, target.localX, target.localZ),
}
}
const updatePreview = (event: RoofEvent) => {
const roof = event.node as RoofNode
const hit = resolveRoofSegmentHit(
roof,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return
const target = resolveTarget(event)
if (!target) return
lastTarget = target
// Same snap math as the placement tool — picking-up and putting-
// down round-trip identically. roofType-aware: hip/flat picks
// ±X or ±Z based on which slope the cursor is on; shed always
// snaps to its low (+Z) eave; gable / gambrel / mansard / dutch
// stay on ±Z.
const snap = resolveEaveSnap(hit.segment, hit.localX, hit.localZ)
const { snap } = target
const sx = Math.round(snap.eaveX * 20) / 20
const sz = Math.round(snap.eaveZ * 20) / 20
@@ -96,8 +108,8 @@ export default function MoveGutterTool({ node }: { node: GutterNode }) {
rotation: roof.rotation ?? 0,
},
segment: {
position: (hit.segment.position ?? [0, 0, 0]) as [number, number, number],
rotation: hit.segment.rotation ?? 0,
position: (target.segment.position ?? [0, 0, 0]) as [number, number, number],
rotation: target.segment.rotation ?? 0,
},
snap,
})
@@ -105,15 +117,10 @@ export default function MoveGutterTool({ node }: { node: GutterNode }) {
}
const onRoofClick = (event: RoofEvent) => {
const hit = resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return
const targetSegmentId = hit.segment.id as AnyNodeId
const snap = resolveEaveSnap(hit.segment, hit.localX, hit.localZ)
const target = lastTarget ?? resolveTarget(event)
if (!target) return
const targetSegmentId = target.segment.id as AnyNodeId
const { snap } = target
const st = useScene.getState()
const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined
packages/nodes/src/item/floorplan-move.ts
+106 -11
View File
@@ -10,7 +10,8 @@ import {
movingFootprintAnchors,
useScene,
} from '@pascal-app/core'
import { applyFloorplanAlignment, snapPointToGrid, type WallPlanPoint } from '@pascal-app/editor'
import { applyFloorplanAlignment, useEditor, type WallPlanPoint } from '@pascal-app/editor'
import { createFloorplanCursorResolver } from '../shared/floorplan-cursor'
import { findClosestWallInPlan, snapLocalXToNeighbors } from '../shared/wall-attach-target'
/**
@@ -34,7 +35,95 @@ import { findClosestWallInPlan, snapLocalXToNeighbors } from '../shared/wall-att
* the item's current attach family.
*/
const GRID_STEP = 0.5
type ItemPlanTransform = {
point: [number, number]
rotation: number
}
function rotateVec(x: number, z: number, rotationY: number): [number, number] {
const c = Math.cos(rotationY)
const s = Math.sin(rotationY)
return [x * c + z * s, -x * s + z * c]
}
function resolveItemPlanTransform(
item: ItemNode,
nodes: Record<AnyNodeId, AnyNode>,
cache = new Map<AnyNodeId, ItemPlanTransform>(),
): ItemPlanTransform {
const cached = cache.get(item.id as AnyNodeId)
if (cached) return cached
const localRotation = item.rotation[1] ?? 0
let result: ItemPlanTransform = {
point: [item.position[0], item.position[2]],
rotation: localRotation,
}
const parent = item.parentId ? nodes[item.parentId as AnyNodeId] : null
if (parent?.type === 'wall') {
const wallRotation = -Math.atan2(
parent.end[1] - parent.start[1],
parent.end[0] - parent.start[0],
)
const wallLocalZ =
item.asset.attachTo === 'wall-side'
? ((parent.thickness ?? 0.1) / 2) * (item.side === 'back' ? -1 : 1)
: item.position[2]
const [offsetX, offsetZ] = rotateVec(item.position[0], wallLocalZ, wallRotation)
result = {
point: [parent.start[0] + offsetX, parent.start[1] + offsetZ],
rotation: wallRotation + localRotation,
}
} else if (parent?.type === 'shelf') {
const shelf = parent as AnyNode & {
position: [number, number, number]
rotation: [number, number, number]
}
const [offsetX, offsetZ] = rotateVec(item.position[0], item.position[2], shelf.rotation[1] ?? 0)
result = {
point: [shelf.position[0] + offsetX, shelf.position[2] + offsetZ],
rotation: (shelf.rotation[1] ?? 0) + localRotation,
}
} else if (parent?.type === 'item') {
const parentTransform = resolveItemPlanTransform(parent as ItemNode, nodes, cache)
const [offsetX, offsetZ] = rotateVec(
item.position[0],
item.position[2],
parentTransform.rotation,
)
result = {
point: [parentTransform.point[0] + offsetX, parentTransform.point[1] + offsetZ],
rotation: parentTransform.rotation + localRotation,
}
}
cache.set(item.id as AnyNodeId, result)
return result
}
function resolveItemPlanPoint(
item: ItemNode,
nodes: Record<AnyNodeId, AnyNode>,
cache = new Map<AnyNodeId, ItemPlanTransform>(),
): [number, number] {
return resolveItemPlanTransform(item, nodes, cache).point
}
function createPlanarMovePointResolver(originalPlanPoint: [number, number], node: ItemNode) {
const resolveCursor = createFloorplanCursorResolver({
original: originalPlanPoint,
metadata: node.metadata,
})
return (planPoint: readonly [number, number], shiftKey: boolean): WallPlanPoint => {
const snap = (value: number) => {
if (shiftKey) return value
const step = useEditor.getState().gridSnapStep
return Math.round(value / step) * step
}
return resolveCursor(planPoint, { snap }) as WallPlanPoint
}
}
export const itemFloorplanMoveTarget: FloorplanMoveTarget<ItemNode> = ({ node, nodes }) => {
const attachTo = node.asset.attachTo
@@ -77,12 +166,17 @@ function buildWallItemSession(
// local-Y carries over from the source item's position (2D can't
// express vertical movement).
const startLocalY = node.position[1]
const resolveCursor = createFloorplanCursorResolver({
original: resolveItemPlanPoint(node, useScene.getState().nodes),
metadata: node.metadata,
})
return {
affectedIds: [node.id as AnyNodeId],
apply({ planPoint, modifiers }) {
const nodes = useScene.getState().nodes
const hit = findClosestWallInPlan(planPoint, nodes, startLevelId)
const resolvedPlanPoint = resolveCursor(planPoint)
const hit = findClosestWallInPlan(resolvedPlanPoint, nodes, startLevelId)
if (!hit) return
const [width] = getScaledDimensions(node)
@@ -99,9 +193,9 @@ function buildWallItemSession(
selfId: node.id as AnyNodeId,
nodes,
})
const step = useEditor.getState().gridSnapStep
const snappedLocalX =
neighborX ??
(modifiers.shiftKey ? hit.localX : Math.round(hit.localX / GRID_STEP) * GRID_STEP)
neighborX ?? (modifiers.shiftKey ? hit.localX : Math.round(hit.localX / step) * step)
const halfW = width / 2
const clampedX = Math.max(halfW, Math.min(hit.wallLength - halfW, snappedLocalX))
@@ -143,14 +237,13 @@ function buildFloorItemSession(
nodes: Record<AnyNodeId, AnyNode>,
): FloorplanMoveTargetSession {
const rotationY = node.rotation[1] ?? 0
const resolvePlanPoint = createPlanarMovePointResolver(resolveItemPlanPoint(node, nodes), node)
// Alignment candidates gathered once — scene is stable during the drag.
const candidates = collectAlignmentAnchors(nodes, node.id)
return {
affectedIds: [node.id as AnyNodeId],
apply({ planPoint, modifiers }) {
const gridSnapped: WallPlanPoint = modifiers.shiftKey
? ([planPoint[0], planPoint[1]] as WallPlanPoint)
: snapPointToGrid([planPoint[0], planPoint[1]] as WallPlanPoint, GRID_STEP)
const gridSnapped = resolvePlanPoint(planPoint, modifiers.shiftKey)
// Figma-style alignment layered on the grid snap (Alt bypasses).
const { point: snapped } = applyFloorplanAlignment(
gridSnapped,
@@ -200,13 +293,15 @@ function buildSurfaceItemSession(
startLevelId: AnyNodeId | null,
targetKind: 'ceiling',
): FloorplanMoveTargetSession {
const resolvePlanPoint = createPlanarMovePointResolver(
resolveItemPlanPoint(node, useScene.getState().nodes),
node,
)
return {
affectedIds: [node.id as AnyNodeId],
apply({ planPoint, modifiers }) {
const nodes = useScene.getState().nodes
const snapped: WallPlanPoint = modifiers.shiftKey
? ([planPoint[0], planPoint[1]] as WallPlanPoint)
: snapPointToGrid([planPoint[0], planPoint[1]] as WallPlanPoint, GRID_STEP)
const snapped = resolvePlanPoint(planPoint, modifiers.shiftKey)
const surface = findContainingSurface(snapped, nodes, startLevelId, targetKind)
packages/nodes/src/item/move-tool.tsx
+1
View File
@@ -88,6 +88,7 @@ export function MoveItemTool({ node }: { node: ItemNode }) {
: getInitialState(node),
// Preserve the original item's scale so Y-position calculations use the correct height.
defaultScale: isNew ? node.scale : undefined,
preserveFloorDragOffset: true,
initDraft: (gridPosition) => {
if (isNew) {
// Duplicate: floor items get a draft immediately; wall/ceiling
packages/nodes/src/ridge-vent/move-tool.tsx
+41 -32
View File
@@ -5,18 +5,25 @@ import {
emitter,
type RidgeVentNode,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useState } from 'react'
import * as THREE from 'three'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
} from '../shared/relative-roof-drag'
import { getSurfaceY } from '../shared/roof-surface'
import RidgeVentPreview from './preview'
type RidgeVentDragTarget = Pick<RelativeRoofDragTarget, 'segment' | 'localX'> & {
localY: number
localZ: 0
}
/**
* Ridge-vent move tool. Mirrors the box-vent move flow — ghost follows
* the cursor over any roof segment, click commits the new position +
@@ -51,46 +58,48 @@ export default function MoveRidgeVentTool({ node }: { node: RidgeVentNode }) {
const ventObj = sceneRegistry.nodes.get(node.id)
if (ventObj) ventObj.visible = false
const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => {
const buildingId = useViewer.getState().selection.buildingId
const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
if (!buildingObj) return [wx, wy, wz]
const v = new THREE.Vector3(wx, wy, wz)
buildingObj.worldToLocal(v)
return [v.x, v.y, v.z]
let lastSnap: [number, number] | null = null
let lastTarget: RidgeVentDragTarget | null = null
const roofDrag = createRelativeRoofDrag(original)
const resolveTarget = (event: RoofEvent): RidgeVentDragTarget | null => {
const target = roofDrag.resolve(event)
if (!target) return null
return {
segment: target.segment,
localX: target.localX,
localY: getSurfaceY(target.localX, 0, target.segment),
localZ: 0,
}
}
let lastSnap: [number, number] | null = null
const updatePreview = (event: RoofEvent) => {
const wx = event.position[0]
const wy = event.position[1]
const wz = event.position[2]
const target = resolveTarget(event)
if (!target) return
lastTarget = target
const sx = Math.round(wx * 20) / 20
const sz = Math.round(wz * 20) / 20
const sx = Math.round(target.localX * 20) / 20
const sz = Math.round(target.localZ * 20) / 20
if (!lastSnap || lastSnap[0] !== sx || lastSnap[1] !== sz) {
triggerSFX('sfx:grid-snap')
lastSnap = [sx, sz]
}
const hit = resolveRoofSegmentHit(event.node as RoofNode, wx, wy, wz)
if (!hit) return
setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewPos(worldToBuildingLocal(wx, wy, wz))
setPreviewYaw((event.node.rotation ?? 0) + (target.segment.rotation ?? 0))
setPreviewPos(
roofSegmentLocalToBuildingLocal(target.segment.id, [
target.localX,
target.localY,
target.localZ,
]),
)
event.stopPropagation()
}
const onRoofClick = (event: RoofEvent) => {
const hit = resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return
const targetSegmentId = hit.segment.id as AnyNodeId
const target = lastTarget ?? resolveTarget(event)
if (!target) return
const targetSegmentId = target.segment.id as AnyNodeId
const st = useScene.getState()
const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined
@@ -114,7 +123,7 @@ export default function MoveRidgeVentTool({ node }: { node: RidgeVentNode }) {
st.updateNode(node.id as AnyNodeId, {
roofSegmentId: targetSegmentId,
parentId: targetSegmentId,
position: [hit.localX, hit.localY, hit.localZ],
position: [target.localX, target.localY, target.localZ],
rotation: original.rotation,
visible: true,
metadata: {},
packages/nodes/src/roof-segment/floorplan-affordances.ts
+12 -10
View File
@@ -7,6 +7,8 @@ import {
snapScalar,
useScene,
} from '@pascal-app/core'
import { getSegmentGridStep } from '@pascal-app/editor'
import { createFloorplanCursorResolver } from '../shared/floorplan-cursor'
const MIN_ROOF_DIM = 1
@@ -148,11 +150,15 @@ export const roofSegmentRotateAffordance: FloorplanAffordance<RoofSegmentNode> =
export const roofSegmentMoveTarget: FloorplanMoveTarget<RoofSegmentNode> = ({ node, nodes }) => {
const segmentId = node.id as AnyNodeId
const initialY = node.position[1]
const { roofRot, cosRoof, sinRoof } = resolveSegmentFrame(node, nodes)
const { cx, cz, roofRot, cosRoof, sinRoof } = resolveSegmentFrame(node, nodes)
const roofId = (node as unknown as { parentId?: AnyNodeId | null }).parentId
const roof = roofId ? (nodes[roofId] as RoofNode | undefined) : undefined
const roofPosX = roof?.position[0] ?? 0
const roofPosZ = roof?.position[2] ?? 0
const resolveCursor = createFloorplanCursorResolver({
original: [cx, cz],
metadata: node.metadata,
})
// Inverse of the forward transform `[cosRoof, -sinRoof; sinRoof, cosRoof]`
// is `[cosRoof, sinRoof; -sinRoof, cosRoof]`. Used to project world cursor
// back into roof-local coords.
@@ -162,17 +168,13 @@ export const roofSegmentMoveTarget: FloorplanMoveTarget<RoofSegmentNode> = ({ no
return {
affectedIds: [segmentId],
apply({ planPoint, modifiers }) {
const dx = planPoint[0] - roofPosX
const dz = planPoint[1] - roofPosZ
const step = getSegmentGridStep()
const snap = (value: number) => (modifiers.shiftKey ? value : snapScalar(value, step))
const worldPoint = resolveCursor(planPoint, { snap })
const dx = worldPoint[0] - roofPosX
const dz = worldPoint[1] - roofPosZ
let localX = dx * cosRoof + dz * sinRoof
let localZ = -dx * sinRoof + dz * cosRoof
// 0.5m grid snap (alt held disables). Mirrors the generic Path 2
// fallback's `snapPointToGrid` step so floor-plan moves feel
// consistent across kinds.
if (!modifiers.altKey) {
localX = Math.round(localX * 2) / 2
localZ = Math.round(localZ * 2) / 2
}
lastLocal = [localX, initialY, localZ]
useScene.getState().updateNode(segmentId, { position: lastLocal })
},
packages/nodes/src/shared/floor-placement.test.ts
+37
View File
@@ -0,0 +1,37 @@
import { describe, expect, test } from 'bun:test'
import { type GridEvent, type NodeEvent, ShelfNode } from '@pascal-app/core'
import { Object3D } from 'three'
import { getLevelLocalSnappedPosition, resolveAlignedFloorPlacement } from './floor-placement'
const nativeEvent = {} as GridEvent['nativeEvent']
describe('floor placement helpers', () => {
test('resolveAlignedFloorPlacement snaps to the provided grid step', () => {
const node = ShelfNode.parse({ position: [0, 0, 0] })
const { guides, position } = resolveAlignedFloorPlacement({
node,
rawX: 0.13,
rawZ: 0.37,
gridStep: 0.25,
candidates: [],
})
expect(position).toEqual([0.25, 0, 0.25])
expect(guides).toEqual([])
})
test('getLevelLocalSnappedPosition falls back to node world position for node events', () => {
const node = ShelfNode.parse({ position: [0, 0, 0] })
const event: NodeEvent = {
node,
position: [0.13, 0, 0.37],
localPosition: [42, 0, 42],
object: new Object3D(),
stopPropagation: () => {},
nativeEvent,
}
expect(getLevelLocalSnappedPosition('missing-level', event, 0.25)).toEqual([0.25, 0, 0.25])
})
})
packages/nodes/src/shared/floor-placement.ts
+125
View File
@@ -0,0 +1,125 @@
import {
type AnyNode,
type EventSuffix,
emitter,
type GridEvent,
movingFootprintAnchors,
type NodeEvent,
resolveAlignment,
sceneRegistry,
snapPointToGrid,
} from '@pascal-app/core'
import { Vector3 } from 'three'
export const FLOOR_PLACEMENT_ALIGNMENT_THRESHOLD_M = 0.08
export const FLOOR_PLACEMENT_CLICK_TRIGGER_KINDS = [
'shelf',
'item',
'slab',
'ceiling',
'wall',
'fence',
'column',
'roof',
'roof-segment',
'stair',
'stair-segment',
] as const
export type FloorPlacementClickTriggerEvent = GridEvent | NodeEvent<AnyNode>
type FloorPlacementAlignmentArgs = {
node: AnyNode
rawX: number
rawZ: number
gridStep: number
candidates: Parameters<typeof resolveAlignment>[0]['candidates']
bypassAlignment?: boolean
rotationY?: number
}
const worldVector = new Vector3()
export function getLevelLocalSnappedPosition(
levelId: string,
event: FloorPlacementClickTriggerEvent,
gridStep: number,
): [number, number, number] {
const levelObject = sceneRegistry.nodes.get(levelId)
if (!levelObject) {
const rawPoint = 'node' in event ? event.position : event.localPosition
const [sx, sz] = snapPointToGrid([rawPoint[0], rawPoint[2]], gridStep)
return [sx, 0, sz]
}
worldVector.set(event.position[0], event.position[1], event.position[2])
levelObject.updateWorldMatrix(true, false)
levelObject.worldToLocal(worldVector)
const [sx, sz] = snapPointToGrid([worldVector.x, worldVector.z], gridStep)
return [sx, 0, sz]
}
export function resolveAlignedFloorPlacement({
node,
rawX,
rawZ,
gridStep,
candidates,
bypassAlignment = false,
rotationY = 0,
}: FloorPlacementAlignmentArgs) {
const [sx, sz] = snapPointToGrid([rawX, rawZ], gridStep)
let ax = sx
let az = sz
const result =
!bypassAlignment && candidates.length > 0
? resolveAlignment({
moving: movingFootprintAnchors(node, sx, sz, rotationY),
candidates,
threshold: FLOOR_PLACEMENT_ALIGNMENT_THRESHOLD_M,
})
: null
if (result?.snap) {
ax += result.snap.dx
az += result.snap.dz
}
return {
position: [ax, 0, az] as [number, number, number],
guides: result?.guides ?? [],
}
}
export function stopPlacementCommitPropagation(event: FloorPlacementClickTriggerEvent) {
const native = (event as { nativeEvent?: unknown }).nativeEvent
const nativeStopPropagation = (native as { stopPropagation?: () => void } | undefined)
?.stopPropagation
if (typeof nativeStopPropagation === 'function') {
nativeStopPropagation.call(native)
}
const direct = (event as { stopPropagation?: () => void }).stopPropagation
if (typeof direct === 'function') direct.call(event)
}
export function subscribeFloorPlacementClicks(
onClick: (event: FloorPlacementClickTriggerEvent) => void,
) {
emitter.on('grid:click', onClick)
type SuffixedKey<K extends string> = `${K}:${EventSuffix}`
type ClickKey = SuffixedKey<(typeof FLOOR_PLACEMENT_CLICK_TRIGGER_KINDS)[number]>
for (const kind of FLOOR_PLACEMENT_CLICK_TRIGGER_KINDS) {
const key = `${kind}:click` as ClickKey
emitter.on(key, onClick as never)
}
return () => {
emitter.off('grid:click', onClick)
for (const kind of FLOOR_PLACEMENT_CLICK_TRIGGER_KINDS) {
const key = `${kind}:click` as ClickKey
emitter.off(key, onClick as never)
}
}
}
packages/nodes/src/shared/floorplan-cursor.test.ts
+29
View File
@@ -0,0 +1,29 @@
import { describe, expect, test } from 'bun:test'
import { createFloorplanCursorResolver } from './floorplan-cursor'
describe('createFloorplanCursorResolver', () => {
test('keeps existing nodes at their original position on the first cursor sample', () => {
const resolveCursor = createFloorplanCursorResolver({ original: [4, 6] })
expect(resolveCursor([10, 12])).toEqual([4, 6])
expect(resolveCursor([11, 14])).toEqual([5, 8])
})
test('places fresh nodes absolutely under the cursor', () => {
const resolveCursor = createFloorplanCursorResolver({
original: [0, 0],
metadata: { isNew: true },
})
expect(resolveCursor([10, 12])).toEqual([10, 12])
expect(resolveCursor([11, 14])).toEqual([11, 14])
})
test('snaps relative movement without snapping the original position', () => {
const resolveCursor = createFloorplanCursorResolver({ original: [4.1, 6.1] })
const snap = (value: number) => Math.round(value / 0.5) * 0.5
expect(resolveCursor([10.1, 12.1], { snap })).toEqual([4.1, 6.1])
expect(resolveCursor([10.37, 12.88], { snap })).toEqual([4.6, 7.1])
})
})
packages/nodes/src/shared/floorplan-cursor.ts
+35
View File
@@ -0,0 +1,35 @@
import {
isFreshPlacementMetadata,
type PlanarCursorPlacementMode,
type PlanarPoint,
resolvePlanarCursorPosition,
} from '@pascal-app/editor'
type FloorplanCursorResolverOptions = {
snap?: (value: number) => number
}
export function createFloorplanCursorResolver(args: {
original: readonly [number, number]
metadata?: unknown
mode?: PlanarCursorPlacementMode
}) {
const original: PlanarPoint = [args.original[0], args.original[1]]
const mode = args.mode ?? (isFreshPlacementMetadata(args.metadata) ? 'absolute' : 'relative')
let anchor: PlanarPoint | null = null
return (
planPoint: readonly [number, number],
options: FloorplanCursorResolverOptions = {},
): PlanarPoint => {
const resolved = resolvePlanarCursorPosition({
cursor: [planPoint[0], planPoint[1]],
original,
anchor,
mode,
...(options.snap ? { snap: options.snap } : {}),
})
anchor = resolved.anchor
return resolved.point
}
}
packages/nodes/src/shared/move-roof-tool.tsx
+95 -62
View File
@@ -5,6 +5,7 @@ import {
type FenceNode,
type GridEvent,
type LevelNode,
movingAlignmentAnchors,
nodeRegistry,
type RoofNode,
type RoofSegmentNode,
@@ -19,11 +20,14 @@ import {
} from '@pascal-app/core'
import {
CursorSphere,
clearRoofDuplicateMetadata,
commitFreshPlacementSubtree,
getFloorStackPreviewPosition,
resolvePlanarCursorPosition,
snapFenceDraftPoint,
stripPlacementMetadataFlags,
triggerSFX,
useEditor,
useFreshPlacementVisibility,
type WallPlanPoint,
} from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
@@ -36,11 +40,21 @@ const ALIGNMENT_THRESHOLD_M = 0.08
export const MoveRoofTool: React.FC<{
node: RoofNode | RoofSegmentNode | StairNode | StairSegmentNode
}> = ({ node: movingNode }) => {
const {
isFreshPlacement,
previewVisible: cursorVisible,
revealFreshPlacement,
useAbsoluteCursorPlacement,
} = useFreshPlacementVisibility({
node: movingNode,
enabled: movingNode.type === 'roof' || movingNode.type === 'stair',
})
const exitMoveMode = useCallback(() => {
useEditor.getState().setMovingNode(null)
}, [])
const previousGridPosRef = useRef<[number, number] | null>(null)
const dragAnchorRef = useRef<[number, number] | null>(null)
const [cursorWorldPos, setCursorWorldPos] = useState<[number, number, number]>(() => {
const obj = sceneRegistry.nodes.get(movingNode.id)
@@ -78,26 +92,11 @@ export const MoveRoofTool: React.FC<{
useEffect(() => {
useScene.temporal.getState().pause()
dragAnchorRef.current = null
previousGridPosRef.current = null
const meta =
typeof movingNode.metadata === 'object' && movingNode.metadata !== null
? (movingNode.metadata as Record<string, unknown>)
: {}
const isNew = !!meta.isNew
const committedMeta: RoofNode['metadata'] = (() => {
if (
typeof movingNode.metadata !== 'object' ||
movingNode.metadata === null ||
Array.isArray(movingNode.metadata)
) {
return movingNode.metadata
}
const nextMeta = { ...movingNode.metadata } as Record<string, unknown>
delete nextMeta.isNew
delete nextMeta.isTransient
return nextMeta as RoofNode['metadata']
})()
const isNew = isFreshPlacement
const committedMeta = stripPlacementMetadataFlags(movingNode.metadata) as RoofNode['metadata']
const original = {
position: [...movingNode.position] as [number, number, number],
@@ -112,6 +111,7 @@ export const MoveRoofTool: React.FC<{
// expensive merged-mesh CSG rebuilds on every frame.
let wasCommitted = false
let wasCancelled = false
let hasMoved = false
// Track pending rotation — no store updates during drag
let pendingRotation: number = movingNode.rotation as number
@@ -187,20 +187,28 @@ export const MoveRoofTool: React.FC<{
// Alignment for top-level stair / roof only. Segments live in parent-local
// space (a different frame from the building-local candidate pool / guide
// layer), so we leave them on the plain grid+corner snap. The moving node
// is aligned by its ORIGIN point (how this tool positions it), snapped to
// any other alignable object's anchors.
// layer), so we leave them on the plain grid+corner snap. Stairs align by
// their footprint edges; roofs keep the origin-point behavior.
const alignTopLevel = movingNode.type === 'stair' || movingNode.type === 'roof'
const alignmentCandidates = alignTopLevel
? collectAlignmentAnchors(useScene.getState().nodes, movingNode.id)
? collectAlignmentAnchors(
useScene.getState().nodes,
movingNode.id,
movingNode.type === 'stair' ? levelId : undefined,
)
: []
const alignLocalPoint = (lx: number, lz: number, bypass: boolean): [number, number] => {
if (!alignTopLevel || bypass || alignmentCandidates.length === 0) {
useAlignmentGuides.getState().clear()
return [lx, lz]
}
const moving =
movingNode.type === 'stair'
? movingAlignmentAnchors(movingNode, useScene.getState().nodes, lx, lz, pendingRotation)
: []
const ar = resolveAlignment({
moving: [{ nodeId: movingNode.id, kind: 'corner', x: lx, z: lz }],
moving:
moving.length > 0 ? moving : [{ nodeId: movingNode.id, kind: 'corner', x: lx, z: lz }],
candidates: alignmentCandidates,
threshold: ALIGNMENT_THRESHOLD_M,
})
@@ -255,7 +263,28 @@ export const MoveRoofTool: React.FC<{
return [buildingLocalX, buildingLocalZ]
}
const localPositionToToolLocal = (
position: [number, number, number],
): [number, number, number] => {
if (
(movingNode.type === 'roof-segment' || movingNode.type === 'stair-segment') &&
movingNode.parentId
) {
const parentObj = sceneRegistry.nodes.get(movingNode.parentId)
if (parentObj) {
const point = parentObj.localToWorld(new THREE.Vector3(...position))
if (buildingObj) buildingObj.worldToLocal(point)
return [point.x, point.y, point.z]
}
}
return position
}
const onGridMove = (event: GridEvent) => {
hasMoved = true
revealFreshPlacement()
const y = event.position[1]
const snappedLocal = snapFenceDraftPoint({
@@ -263,29 +292,43 @@ export const MoveRoofTool: React.FC<{
walls: levelWalls,
fences: levelFences,
})
// Layer alignment snap on top (top-level stair/roof). Recompute the
// world point from the aligned building-local point so it stays correct
// under building rotation.
const [lx, lz] = alignLocalPoint(
const [rawGridX, , rawGridZ] = localToWorldPoint(snappedLocal, y)
const [rawLocalX, rawLocalZ] = computeLocal(
rawGridX,
rawGridZ,
y,
snappedLocal[0],
snappedLocal[1],
event.nativeEvent?.altKey === true,
)
const [gridX, , gridZ] = localToWorldPoint([lx, lz], y)
const resolved = resolvePlanarCursorPosition({
cursor: [rawLocalX, rawLocalZ],
original: [movingNode.position[0], movingNode.position[2]],
anchor: dragAnchorRef.current,
mode: useAbsoluteCursorPlacement ? 'absolute' : 'relative',
})
dragAnchorRef.current = resolved.anchor
let [localX, localZ] = resolved.point
if (alignTopLevel) {
const aligned = alignLocalPoint(localX, localZ, event.nativeEvent?.altKey === true)
localX = aligned[0]
localZ = aligned[1]
}
if (
previousGridPosRef.current &&
(gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1])
(localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
) {
triggerSFX('sfx:grid-snap')
}
previousGridPosRef.current = [gridX, gridZ]
previousGridPosRef.current = [localX, localZ]
const [localX, localZ] = computeLocal(gridX, gridZ, y, lx, lz)
lastLocalPosition = [localX, movingNode.position[1], localZ]
const previewPosition = getPreviewPosition(lastLocalPosition)
setCursorWorldPos(isFloorPlaced ? previewPosition : [lx, event.localPosition[1], lz])
setCursorWorldPos(
isFloorPlaced ? previewPosition : localPositionToToolLocal(lastLocalPosition),
)
// Directly update the Three.js mesh — no store update during drag
const mesh = sceneRegistry.nodes.get(movingNode.id)
@@ -302,53 +345,43 @@ export const MoveRoofTool: React.FC<{
// Floor-placed parents (stairs) stay in their committed local frame;
// the lifted Y remains presentation-only in the 3D view.
useLiveTransforms.getState().set(movingNode.id, {
position: isFloorPlaced ? lastLocalPosition : [gridX, y, gridZ],
position: lastLocalPosition,
rotation: pendingRotation,
})
}
const onGridClick = (event: GridEvent) => {
const y = event.position[1]
const snappedLocal = snapFenceDraftPoint({
point: [event.localPosition[0], event.localPosition[2]],
walls: levelWalls,
fences: levelFences,
})
const [lx, lz] = alignLocalPoint(
snappedLocal[0],
snappedLocal[1],
event.nativeEvent?.altKey === true,
)
const [gridX, , gridZ] = localToWorldPoint([lx, lz], y)
const [localX, localZ] = computeLocal(gridX, gridZ, y, lx, lz)
if (!hasMoved) return
const [localX, , localZ] = lastLocalPosition
useAlignmentGuides.getState().clear()
wasCommitted = true
// The store still holds the original values (we didn't update during drag).
// Resume temporal and apply the final state as a single undoable step.
useScene.temporal.getState().resume()
if (isNew && movingNode.type === 'roof') {
clearRoofDuplicateMetadata(movingNode.id as AnyNodeId, {
let committedId = movingNode.id as AnyNodeId
if (isNew) {
committedId =
commitFreshPlacementSubtree(movingNode.id as AnyNodeId, {
position: [localX, movingNode.position[1], localZ],
rotation: pendingRotation,
metadata: committedMeta,
})
visible: true,
}) ?? committedId
} else {
// The store still holds the original values (we didn't update during drag).
// Resume temporal and apply the final state as a single undoable step.
useScene.temporal.getState().resume()
useScene.getState().updateNode(movingNode.id, {
position: [localX, movingNode.position[1], localZ],
rotation: pendingRotation,
metadata: committedMeta,
})
useScene.temporal.getState().pause()
}
useScene.temporal.getState().pause()
triggerSFX('sfx:item-place')
useViewer.getState().setSelection({ selectedIds: [movingNode.id] })
useViewer.getState().setSelection({ selectedIds: [committedId] })
useLiveTransforms.getState().clear(movingNode.id)
useEditor.getState().setMovingNodeOrigin('3d')
exitMoveMode()
event.nativeEvent?.stopPropagation?.()
}
@@ -444,10 +477,10 @@ export const MoveRoofTool: React.FC<{
emitter.off('tool:cancel', onCancel)
window.removeEventListener('keydown', onKeyDown)
}
}, [movingNode, exitMoveMode])
}, [movingNode, exitMoveMode, isFreshPlacement, revealFreshPlacement, useAbsoluteCursorPlacement])
return (
<group>
<group visible={cursorVisible}>
<CursorSphere position={cursorWorldPos} showTooltip={false} />
</group>
)
packages/nodes/src/shared/polygon-centroid-move.ts
+13 -11
View File
@@ -10,17 +10,16 @@ import {
useLiveTransforms,
useScene,
} from '@pascal-app/core'
import { snapPointToGrid, type WallPlanPoint } from '@pascal-app/editor'
import { getSegmentGridStep, type WallPlanPoint } from '@pascal-app/editor'
import type * as THREE from 'three'
import { createFloorplanCursorResolver } from './floorplan-cursor'
/**
* Shared 2D floor-plan move for polygon-based kinds (slab / ceiling / zone).
*
* **Pivot semantics.** The move uses the polygon's **centroid** as the pivot:
* the centroid snaps to the (grid-snapped, then Figma-aligned) cursor — the
* same way a regular item's origin snaps to the cursor in both 3D and 2D.
* This replaces the old grab-relative delta ("drag from wherever you first
* touched"), so polygon kinds move consistently with every other item.
* Existing polygon kinds preserve the cursor grab offset; fresh catalog
* placement uses the polygon centroid as the cursor-following pivot. This
* matches the generic 3D move tool while keeping polygon geometry in vertices.
*
* **Why a delta in `useLiveTransforms`** (see `wiki/architecture/tools.md`):
* polygon kinds carry their position in their vertices, not a `position`
@@ -35,8 +34,6 @@ import type * as THREE from 'three'
* ceiling: `height − 0.01`) so the 3D mesh doesn't teleport vertically in a
* split view during the drag.
*/
const GRID_STEP = 0.5
/** Figma-style alignment threshold (meters) — parity with the 3D move tools. */
const ALIGNMENT_THRESHOLD_M = 0.08
@@ -66,6 +63,7 @@ export function createPolygonCentroidMoveTarget(args: {
type: string
polygon: Array<[number, number]>
holes?: Array<Array<[number, number]>>
metadata?: unknown
}
nodes: Record<AnyNodeId, AnyNode>
/** 3D mesh Y the kind's system parks the group at on rebuild. */
@@ -80,6 +78,10 @@ export function createPolygonCentroidMoveTarget(args: {
hole.map(([x, z]) => [x, z] as [number, number]),
)
const originalCenter = polygonCentroid(originalPolygon)
const resolveCursor = createFloorplanCursorResolver({
original: originalCenter,
metadata: node.metadata,
})
// Alignment candidates gathered once — the scene is stable during the drag.
const candidates = collectAlignmentAnchors(nodes, id)
let lastDelta: [number, number] = [0, 0]
@@ -90,9 +92,9 @@ export function createPolygonCentroidMoveTarget(args: {
// Centroid → snapped cursor. Grid-snap the target centroid (Shift
// drops the grid snap), then layer Figma alignment on the translated
// polygon's vertices and fold its snap into the delta. Alt bypasses.
const target: WallPlanPoint = modifiers.shiftKey
? ([planPoint[0], planPoint[1]] as WallPlanPoint)
: snapPointToGrid([planPoint[0], planPoint[1]] as WallPlanPoint, GRID_STEP)
const step = getSegmentGridStep()
const snap = (value: number) => (modifiers.shiftKey ? value : Math.round(value / step) * step)
const target = resolveCursor(planPoint, { snap }) as WallPlanPoint
let dx = target[0] - originalCenter[0]
let dz = target[1] - originalCenter[1]
packages/nodes/src/shared/relative-roof-drag.ts
+116
View File
@@ -0,0 +1,116 @@
import {
type AnyNodeId,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
} from '@pascal-app/core'
import { useViewer } from '@pascal-app/viewer'
import * as THREE from 'three'
import { type RoofSegmentHit, resolveRoofSegmentHit } from './roof-segment-hit'
import { getSurfaceY } from './roof-surface'
export type RelativeRoofDragTarget = {
segment: RoofSegmentNode
localX: number
localY: number
localZ: number
hit: RoofSegmentHit
}
type RelativeRoofDragState = {
segmentId: string
anchor: [number, number]
start: [number, number, number]
current: [number, number, number]
surfaceOffsetY: number
}
export function roofSegmentLocalToBuildingLocal(
segmentId: string,
position: [number, number, number],
): [number, number, number] {
const segmentObj = sceneRegistry.nodes.get(segmentId as AnyNodeId)
if (!segmentObj) return position
const point = segmentObj.localToWorld(new THREE.Vector3(...position))
const buildingId = useViewer.getState().selection.buildingId
const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
if (buildingObj) buildingObj.worldToLocal(point)
return [point.x, point.y, point.z]
}
export function createRelativeRoofDrag(original: {
position: [number, number, number]
roofSegmentId?: string
}): {
resolve: (event: RoofEvent) => RelativeRoofDragTarget | null
} {
let state: RelativeRoofDragState | null = null
const getPositionInSegment = (
position: [number, number, number],
fromSegmentId: string | undefined,
segment: RoofSegmentNode,
): [number, number, number] => {
if (fromSegmentId === segment.id) return position
const fromSegmentObj = fromSegmentId
? sceneRegistry.nodes.get(fromSegmentId as AnyNodeId)
: null
const targetSegmentObj = sceneRegistry.nodes.get(segment.id as AnyNodeId)
if (!(fromSegmentObj && targetSegmentObj)) return position
const point = fromSegmentObj.localToWorld(new THREE.Vector3(...position))
targetSegmentObj.worldToLocal(point)
return [point.x, point.y, point.z]
}
const getStartPositionForSegment = (
segment: RoofSegmentNode,
previousState: RelativeRoofDragState | null,
): [number, number, number] => {
if (previousState) {
return getPositionInSegment(previousState.current, previousState.segmentId, segment)
}
if (original.roofSegmentId === segment.id) return original.position
return getPositionInSegment(original.position, original.roofSegmentId, segment)
}
return {
resolve(event) {
const hit = resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return null
if (!state || state.segmentId !== hit.segment.id) {
const start = getStartPositionForSegment(hit.segment, state)
state = {
segmentId: hit.segment.id,
anchor: [hit.localX, hit.localZ],
start,
current: start,
surfaceOffsetY: start[1] - getSurfaceY(start[0], start[2], hit.segment),
}
}
const localX = state.start[0] + (hit.localX - state.anchor[0])
const localZ = state.start[2] + (hit.localZ - state.anchor[1])
const localY = getSurfaceY(localX, localZ, hit.segment) + state.surfaceOffsetY
state.current = [localX, localY, localZ]
return {
segment: hit.segment,
localX,
localY,
localZ,
hit,
}
},
}
}
packages/nodes/src/shared/wall-attach-target.ts
+11
View File
@@ -49,6 +49,17 @@ export type WallHit = {
itemRotation: number
}
export function projectWallLocalPointToPlan(
wall: WallNode,
localX: number,
localZ = 0,
): [number, number] {
const angle = -Math.atan2(wall.end[1] - wall.start[1], wall.end[0] - wall.start[0])
const c = Math.cos(angle)
const s = Math.sin(angle)
return [wall.start[0] + localX * c + localZ * s, wall.start[1] - localX * s + localZ * c]
}
/**
* Walk every wall under `parentLevelId` and return the closest one to
* `planPoint`, or `null` if no wall is within `WALL_SNAP_DISTANCE_M`.
packages/nodes/src/shelf/floorplan-move.ts
+12 -6
View File
@@ -11,10 +11,11 @@ import {
import {
applyFloorplanAlignment,
getFloorStackPreviewPosition,
snapPointToGrid,
triggerSFX,
useEditor,
type WallPlanPoint,
} from '@pascal-app/editor'
import { createFloorplanCursorResolver } from '../shared/floorplan-cursor'
/**
* 2D floor-plan move handler for shelf — mirrors `itemFloorplanMoveTarget`,
@@ -38,12 +39,14 @@ import {
* live transform — the 2D SVG moved but the 3D mesh stayed put. Writing the
* scene directly removes that second source of truth entirely.
*/
const GRID_STEP = 0.5
export const shelfFloorplanMoveTarget: FloorplanMoveTarget<ShelfNode> = ({ node, nodes }) => {
const shelfId = node.id as AnyNodeId
const originalPosition: [number, number, number] = [...node.position] as [number, number, number]
const originalRotationY = node.rotation[1] ?? 0
const resolveCursor = createFloorplanCursorResolver({
original: [originalPosition[0], originalPosition[2]],
metadata: node.metadata,
})
let lastPosition: [number, number, number] = originalPosition
let lastSnapKey: string | null = null
@@ -55,9 +58,12 @@ export const shelfFloorplanMoveTarget: FloorplanMoveTarget<ShelfNode> = ({ node,
const session: FloorplanMoveTargetSession = {
affectedIds: [shelfId],
apply({ planPoint, modifiers }) {
const gridSnapped: WallPlanPoint = modifiers.shiftKey
? ([planPoint[0], planPoint[1]] as WallPlanPoint)
: snapPointToGrid([planPoint[0], planPoint[1]] as WallPlanPoint, GRID_STEP)
const snap = (value: number) => {
if (modifiers.shiftKey) return value
const step = useEditor.getState().gridSnapStep
return Math.round(value / step) * step
}
const gridSnapped = resolveCursor(planPoint, { snap }) as WallPlanPoint
// Figma-style alignment layered on the grid snap — the shelf footprint
// edges snap to neighbours / wall faces and a guide is published. Alt
// bypasses (matches placement tools' "No snap").
packages/nodes/src/shelf/tool.tsx
+35 -119
View File
@@ -1,91 +1,33 @@
'use client'
import {
type AnyNode,
collectAlignmentAnchors,
type EventSuffix,
emitter,
type GridEvent,
movingFootprintAnchors,
type NodeEvent,
resolveAlignment,
ShelfNode,
sceneRegistry,
snapPointToGrid,
useAlignmentGuides,
useScene,
} from '@pascal-app/core'
import { getFloorStackPreviewPosition, triggerSFX } from '@pascal-app/editor'
import { getFloorStackPreviewPosition, triggerSFX, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useEffect, useMemo, useRef } from 'react'
import { type Group, Vector3 } from 'three'
import { useEffect, useMemo, useRef, useState } from 'react'
import type { Group } from 'three'
import {
type FloorPlacementClickTriggerEvent,
getLevelLocalSnappedPosition,
resolveAlignedFloorPlacement,
stopPlacementCommitPropagation,
subscribeFloorPlacementClicks,
} from '../shared/floor-placement'
import { shelfDefinition } from './definition'
import ShelfPreview from './preview'
const worldVector = new Vector3()
const GRID_STEP = 0.5
/** Figma-style alignment-snap threshold (meters), matching the move tools and
* the 2D floor-plan overlay. 8 cm gives a magnetic pull layered on top of the
* grid snap without fighting it. */
const ALIGNMENT_THRESHOLD_M = 0.08
/**
* Click-trigger kinds: when the user clicks ANY of these during shelf
* placement, we commit at the latest cursor position. R3F's pointer
* raycaster dispatches to the closest intersected mesh, so a click on
* a wall / slab / item / etc. would otherwise never reach `grid:click`
* — the placement would silently drop. Listening for each kind's click
* (and committing at the snapshot of the last `grid:move` cursor)
* mirrors the fix in `MoveRegistryNodeTool`.
*/
const CLICK_TRIGGER_KINDS = [
'shelf',
'item',
'slab',
'ceiling',
'wall',
'fence',
'column',
'roof',
'roof-segment',
'stair',
'stair-segment',
] as const
type ClickTriggerEvent = GridEvent | NodeEvent<AnyNode>
/**
* Convert the latest cursor world hit into level-local coords for the
* commit `position`. The cursor's local position from `event.localPosition`
* (building-local) needs to come back through the level's world transform
* so the shelf is stored in its parent's frame.
*/
function getLevelLocalPosition(
levelId: string,
event: GridEvent | NodeEvent<AnyNode>,
): [number, number, number] {
const levelObject = sceneRegistry.nodes.get(levelId)
if (!levelObject) {
const local = (event as GridEvent).localPosition
if (local) {
const [sx, sz] = snapPointToGrid([local[0], local[2]], GRID_STEP)
return [sx, 0, sz]
}
const [sx, sz] = snapPointToGrid([event.position[0], event.position[2]], GRID_STEP)
return [sx, 0, sz]
}
worldVector.set(event.position[0], event.position[1], event.position[2])
levelObject.updateWorldMatrix(true, false)
levelObject.worldToLocal(worldVector)
const [sx, sz] = snapPointToGrid([worldVector.x, worldVector.z], GRID_STEP)
return [sx, 0, sz]
}
const ShelfTool = () => {
const activeLevelId = useViewer((state) => state.selection.levelId)
const cursorRef = useRef<Group>(null)
const previousSnapRef = useRef<[number, number] | null>(null)
const cursorVisibleRef = useRef(false)
const [cursorVisible, setCursorVisible] = useState(false)
// Default-shaped shelf for the placement preview. Pulls from
// `shelfDefinition.defaults()` so the preview matches what the commit
@@ -108,6 +50,8 @@ const ShelfTool = () => {
useEffect(() => {
if (!activeLevelId) return
previousSnapRef.current = null
cursorVisibleRef.current = false
setCursorVisible(false)
/**
* Snapped cursor position from the latest `grid:move`. Used as the
* commit position for ANY click variant (grid or node), so clicks
@@ -124,33 +68,21 @@ const ShelfTool = () => {
let alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, previewNode.id)
const onGridMove = (event: GridEvent) => {
const [sx, sz] = snapPointToGrid([event.localPosition[0], event.localPosition[2]], GRID_STEP)
if (!cursorVisibleRef.current) {
cursorVisibleRef.current = true
setCursorVisible(true)
}
// Figma-style alignment snap layered on top of grid snap: when the
// preview shelf's footprint edge lines up (on X or Z) with another
// object's edge, snap there and publish a guide. The probe uses the
// shelf's footprint corners at the proposed grid position so it aligns
// by its edges, not its centre — matching `MoveRegistryNodeTool`. Alt
// bypasses.
let ax = sx
let az = sz
const bypass = event.nativeEvent?.altKey === true
if (!bypass && alignmentCandidates.length > 0) {
const result = resolveAlignment({
moving: movingFootprintAnchors(previewNode, sx, sz, 0),
const { position, guides } = resolveAlignedFloorPlacement({
node: previewNode,
rawX: event.localPosition[0],
rawZ: event.localPosition[2],
gridStep: useEditor.getState().gridSnapStep,
candidates: alignmentCandidates,
threshold: ALIGNMENT_THRESHOLD_M,
bypassAlignment: event.nativeEvent?.altKey === true,
})
if (result.snap) {
ax += result.snap.dx
az += result.snap.dz
}
useAlignmentGuides.getState().set(result.guides)
} else {
useAlignmentGuides.getState().clear()
}
useAlignmentGuides.getState().set(guides)
const position: [number, number, number] = [ax, 0, az]
const visualPosition = getFloorStackPreviewPosition({
node: previewNode,
position,
@@ -161,18 +93,20 @@ const ShelfTool = () => {
lastCursorRef.current = position
const prev = previousSnapRef.current
if (!prev || prev[0] !== ax || prev[1] !== az) {
if (!prev || prev[0] !== position[0] || prev[1] !== position[2]) {
triggerSFX('sfx:grid-snap')
previousSnapRef.current = [ax, az]
previousSnapRef.current = [position[0], position[2]]
}
}
const commitAtCursor = (event: ClickTriggerEvent) => {
const commitAtCursor = (event: FloorPlacementClickTriggerEvent) => {
// Prefer the latest `grid:move` cursor snapshot; fall back to
// projecting the click event into level-local coords if no
// grid:move has fired yet (e.g. cursor entered via a node hit
// first). Both paths apply the same grid snap.
const position = lastCursorRef.current ?? getLevelLocalPosition(activeLevelId, event)
const position =
lastCursorRef.current ??
getLevelLocalSnappedPosition(activeLevelId, event, useEditor.getState().gridSnapStep)
const shelf = ShelfNode.parse({
...shelfDefinition.defaults(),
name: 'Shelf',
@@ -187,33 +121,15 @@ const ShelfTool = () => {
alignmentCandidates = collectAlignmentAnchors(useScene.getState().nodes, previewNode.id)
useAlignmentGuides.getState().clear()
const native = (event as { nativeEvent?: unknown }).nativeEvent
if (
native &&
typeof (native as { stopPropagation?: () => void }).stopPropagation === 'function'
) {
;(native as { stopPropagation: () => void }).stopPropagation()
}
const direct = (event as { stopPropagation?: () => void }).stopPropagation
if (typeof direct === 'function') direct.call(event)
stopPlacementCommitPropagation(event)
}
emitter.on('grid:move', onGridMove)
emitter.on('grid:click', commitAtCursor)
type SuffixedKey<K extends string> = `${K}:${EventSuffix}`
type ClickKey = SuffixedKey<(typeof CLICK_TRIGGER_KINDS)[number]>
for (const kind of CLICK_TRIGGER_KINDS) {
const key = `${kind}:click` as ClickKey
emitter.on(key, commitAtCursor as never)
}
const unsubscribePlacementClicks = subscribeFloorPlacementClicks(commitAtCursor)
return () => {
emitter.off('grid:move', onGridMove)
emitter.off('grid:click', commitAtCursor)
for (const kind of CLICK_TRIGGER_KINDS) {
const key = `${kind}:click` as ClickKey
emitter.off(key, commitAtCursor as never)
}
unsubscribePlacementClicks()
// Drop any alignment guide left over when the tool deactivates (kind
// switch, Esc, unmount) so it doesn't linger over the canvas.
useAlignmentGuides.getState().clear()
@@ -223,7 +139,7 @@ const ShelfTool = () => {
if (!activeLevelId) return null
return (
<group ref={cursorRef}>
<group ref={cursorRef} visible={cursorVisible}>
<ShelfPreview node={previewNode} />
</group>
)
packages/nodes/src/skylight/move-tool.tsx
+23 -56
View File
@@ -11,35 +11,16 @@ import {
useScene,
} from '@pascal-app/core'
import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useRef, useState } from 'react'
import * as THREE from 'three'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
} from '../shared/relative-roof-drag'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
import SkylightPreview from './preview'
function resolveSegmentFromWorldPoint(
roof: RoofNode,
worldX: number,
worldY: number,
worldZ: number,
state: ReturnType<typeof useScene.getState>,
): { segment: RoofSegmentNode; localX: number; localY: number; localZ: number } | null {
const worldPt = new THREE.Vector3(worldX, worldY, worldZ)
for (const childId of roof.children ?? []) {
const seg = state.nodes[childId as AnyNodeId] as RoofSegmentNode | undefined
if (seg?.type !== 'roof-segment') continue
const segObj = sceneRegistry.nodes.get(seg.id)
if (!segObj) continue
segObj.updateWorldMatrix(true, false)
const local = segObj.worldToLocal(worldPt.clone())
if (Math.abs(local.x) <= seg.width / 2 && Math.abs(local.z) <= seg.depth / 2) {
return { segment: seg, localX: local.x, localY: local.y, localZ: local.z }
}
}
return null
}
export default function MoveSkylightTool({ node }: { node: SkylightNode }) {
const exitMoveMode = useCallback(() => {
useEditor.getState().setMovingNode(null)
@@ -81,19 +62,10 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) {
const skylightObj = sceneRegistry.nodes.get(node.id)
if (skylightObj) skylightObj.visible = false
const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => {
const buildingId = useViewer.getState().selection.buildingId
const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
if (buildingObj) {
const v = new THREE.Vector3(wx, wy, wz)
buildingObj.worldToLocal(v)
return [v.x, v.y, v.z]
}
return [wx, wy, wz]
}
let lastSnapX = 0
let lastSnapZ = 0
let lastTarget: RelativeRoofDragTarget | null = null
const roofDrag = createRelativeRoofDrag(original)
// Resolve which segment the cursor is over, then derive the same
// preview transform stack the placement tool uses (`skylight/tool.tsx`):
@@ -103,20 +75,22 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) {
// same via its `if (!hit) return` guard.
const updateFromHit = (event: RoofEvent) => {
const roof = event.node as RoofNode
const hit = resolveRoofSegmentHit(
roof,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) {
const target = roofDrag.resolve(event)
if (!target) {
setHasHit(false)
return false
}
const normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment)
lastTarget = target
const normal = getAnalyticalNormal(target.localX, target.localZ, target.segment)
setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion()))
setPreviewYaw((roof.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewPos(worldToBuildingLocal(event.position[0], event.position[1], event.position[2]))
setPreviewYaw((roof.rotation ?? 0) + (target.segment.rotation ?? 0))
setPreviewPos(
roofSegmentLocalToBuildingLocal(target.segment.id, [
target.localX,
target.localY,
target.localZ,
]),
)
setHasHit(true)
return true
}
@@ -139,19 +113,12 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) {
}
const onRoofClick = (event: RoofEvent) => {
const roof = event.node as RoofNode
const st = useScene.getState()
const hit = resolveSegmentFromWorldPoint(
roof,
event.position[0],
event.position[1],
event.position[2],
st,
)
if (!hit) return
const target = lastTarget ?? roofDrag.resolve(event)
if (!target) return
const targetSegmentId = hit.segment.id as AnyNodeId
const targetSegmentId = target.segment.id as AnyNodeId
const finalRotation = original.rotation
st.updateNode(node.id as AnyNodeId, {
@@ -166,7 +133,7 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) {
st.updateNode(node.id as AnyNodeId, {
roofSegmentId: targetSegmentId,
parentId: targetSegmentId,
position: [hit.localX, hit.localY, hit.localZ],
position: [target.localX, target.localY, target.localZ],
rotation: finalRotation,
visible: true,
metadata: {},
packages/nodes/src/solar-panel/move-tool.tsx
+26 -36
View File
@@ -4,17 +4,19 @@ import {
type AnyNodeId,
emitter,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
type SolarPanelNode,
sceneRegistry,
useScene,
} from '@pascal-app/core'
import { EDITOR_LAYER, markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import * as THREE from 'three'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
} from '../shared/relative-roof-drag'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
// MeshBasicMaterial: avoids the WebGPU "Color target has no corresponding
@@ -86,27 +88,18 @@ export default function MoveSolarPanelTool({ node }: { node: SolarPanelNode }) {
const panelObj = sceneRegistry.nodes.get(node.id)
if (panelObj) panelObj.visible = false
const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => {
const buildingId = useViewer.getState().selection.buildingId
const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
if (buildingObj) {
const v = new THREE.Vector3(wx, wy, wz)
buildingObj.worldToLocal(v)
return [v.x, v.y, v.z]
}
return [wx, wy, wz]
}
let lastSnapX = 0
let lastSnapZ = 0
let lastTarget: RelativeRoofDragTarget | null = null
const roofDrag = createRelativeRoofDrag(original)
const updateGhost = (event: RoofEvent) => {
const wx = event.position[0]
const wy = event.position[1]
const wz = event.position[2]
const target = roofDrag.resolve(event)
if (!target) return
lastTarget = target
const sx = Math.round(wx * 20) / 20
const sz = Math.round(wz * 20) / 20
const sx = Math.round(target.localX * 20) / 20
const sz = Math.round(target.localZ * 20) / 20
if (sx !== lastSnapX || sz !== lastSnapZ) {
triggerSFX('sfx:grid-snap')
lastSnapX = sx
@@ -119,35 +112,32 @@ export default function MoveSolarPanelTool({ node }: { node: SolarPanelNode }) {
// because analytical normals are computed in segment-local space
// and the yaw is applied explicitly, avoiding any world-vs-local
// normal mismatch.
const hit = resolveRoofSegmentHit(event.node as RoofNode, wx, wy, wz)
if (!hit) return
const segLocalNormal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment)
const segLocalNormal = getAnalyticalNormal(target.localX, target.localZ, target.segment)
setPreviewSurfaceQuat(surfaceQuatFromNormal(segLocalNormal, new THREE.Quaternion()))
setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewPos(worldToBuildingLocal(wx, wy, wz))
setPreviewYaw((event.node.rotation ?? 0) + (target.segment.rotation ?? 0))
setPreviewPos(
roofSegmentLocalToBuildingLocal(target.segment.id, [
target.localX,
target.localY,
target.localZ,
]),
)
setHasHit(true)
event.stopPropagation()
}
const onRoofClick = (event: RoofEvent) => {
const roof = event.node as RoofNode
const st = useScene.getState()
const hit = resolveRoofSegmentHit(
roof,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return
const target = lastTarget ?? roofDrag.resolve(event)
if (!target) return
const targetSegmentId = hit.segment.id as AnyNodeId
const targetSegmentId = target.segment.id as AnyNodeId
// Compute segment-local normal for the committed node so the
// renderer's surfaceQuat + outer segment.rotation compose to
// the same world orientation the ghost showed.
const segLocalNormal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment)
const segLocalNormal = getAnalyticalNormal(target.localX, target.localZ, target.segment)
st.updateNode(node.id as AnyNodeId, {
position: original.position,
@@ -161,7 +151,7 @@ export default function MoveSolarPanelTool({ node }: { node: SolarPanelNode }) {
st.updateNode(node.id as AnyNodeId, {
roofSegmentId: targetSegmentId,
parentId: targetSegmentId,
position: [hit.localX, hit.localY, hit.localZ],
position: [target.localX, target.localY, target.localZ],
rotation: original.rotation,
// Segment-local normal — must stay consistent with getAnalyticalNormal
// semantics so the renderer's surfaceQuat is in the correct frame.
packages/nodes/src/spawn/__tests__/parity.test.ts
+62 -2
View File
@@ -1,6 +1,11 @@
import { describe, expect, test } from 'bun:test'
import { SpawnNode as SpawnSchemaFromCore } from '@pascal-app/core'
import {
type FloorplanGeometry,
type GeometryContext,
SpawnNode as SpawnSchemaFromCore,
} from '@pascal-app/core'
import { spawnDefinition } from '../definition'
import { buildSpawnFloorplan } from '../floorplan'
import { SpawnNode } from '../schema'
/**
@@ -8,7 +13,7 @@ import { SpawnNode } from '../schema'
*
* The new renderer is a near-line-by-line port of the legacy
* `@pascal-app/viewer/components/renderers/spawn/spawn-renderer.tsx` —
* same mesh count, same primitives, same colors. The "parity" assertion
* same mesh count and primitives. The "parity" assertion
* for the spike is structural (definition is well-formed, both lazy
* modules resolve to React components) plus a manual visual eyeball check
* documented in the plan. Pixel-level Playwright parity lands in Phase 4
@@ -52,6 +57,56 @@ describe('spawn definition', () => {
expect(angles).toContain(0)
})
test('handles expose rotation and move controls', () => {
expect(Array.isArray(spawnDefinition.handles)).toBe(true)
if (!Array.isArray(spawnDefinition.handles)) return
expect(spawnDefinition.handles.map((handle) => handle.kind)).toEqual([
'arc-resize',
'translate',
])
})
test('floorplan uses indigo marker color and selected rotation affordance', () => {
const spawn = SpawnNode.parse({
id: 'spawn_test1234567890ab',
position: [1, 0, 2],
rotation: Math.PI / 4,
})
const geometry = buildSpawnFloorplan(spawn, {
resolve: () => undefined,
children: [],
siblings: [],
parent: null,
viewState: {
selected: true,
highlighted: false,
hovered: false,
moving: false,
palette: {
selectedStroke: '#60a5fa',
selectedFill: '#dbeafe',
selectedHatch: '#60a5fa',
wallHoverStroke: '#60a5fa',
endpointHandleFill: '#fed7aa',
endpointHandleStroke: '#f97316',
endpointHandleHoverStroke: '#fb923c',
endpointHandleActiveFill: '#fdba74',
endpointHandleActiveStroke: '#ea580c',
curveHandleFill: '#99f6e4',
curveHandleStroke: '#14b8a6',
curveHandleHoverStroke: '#2dd4bf',
measurementStroke: '#6366f1',
measurementLabelBackground: '#ffffff',
measurementLabelText: '#111827',
},
},
} satisfies GeometryContext)
const flat = flattenFloorplan(geometry)
expect(flat.some((entry) => entry.kind === 'polygon' && entry.fill === '#818cf8')).toBe(true)
expect(flat.some((entry) => entry.kind === 'rotate-arrow')).toBe(true)
})
test('renderer is a parametric lazy module reference', () => {
expect(spawnDefinition.renderer.kind).toBe('parametric')
if (spawnDefinition.renderer.kind !== 'parametric') return
@@ -67,3 +122,8 @@ describe('spawn definition', () => {
expect(spawnDefinition.mcp?.description?.length).toBeGreaterThan(0)
})
})
function flattenFloorplan(geometry: FloorplanGeometry): FloorplanGeometry[] {
if (geometry.kind !== 'group') return [geometry]
return geometry.children.flatMap((child) => flattenFloorplan(child))
}
packages/nodes/src/spawn/definition.ts
+30 -1
View File
@@ -1,10 +1,36 @@
import type { HandleDescriptor, NodeDefinition, SpawnNode as SpawnNodeType } from '@pascal-app/core'
import { buildSpawnFloorplan } from './floorplan'
import { spawnRotateAffordance } from './floorplan-affordances'
import { spawnParametrics } from './parametrics'
import { SpawnNode } from './schema'
const SPAWN_FOOTPRINT = 0.6
const SPAWN_HANDLE_HEIGHT = 0.46
const MOVE_FRONT_OFFSET = 0.35
const ROTATE_CORNER_OFFSET = 0.32
const ROTATE_RING_OFFSET = 0.04
function spawnRotateHandle(): HandleDescriptor<SpawnNodeType> {
return {
kind: 'arc-resize',
axis: 'angular',
shape: 'rotate',
apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }),
placement: {
position: () => [
SPAWN_FOOTPRINT / 2,
SPAWN_HANDLE_HEIGHT,
SPAWN_FOOTPRINT / 2 + ROTATE_CORNER_OFFSET,
],
rotationY: () => -Math.PI / 4,
},
decoration: {
kind: 'ring',
radius: () => Math.hypot(SPAWN_FOOTPRINT / 2, SPAWN_FOOTPRINT / 2) + ROTATE_RING_OFFSET,
y: () => SPAWN_HANDLE_HEIGHT,
},
}
}
function spawnMoveHandle(): HandleDescriptor<SpawnNodeType> {
return {
@@ -52,7 +78,7 @@ export const spawnDefinition: NodeDefinition<typeof SpawnNode> = {
},
parametrics: spawnParametrics,
handles: [spawnMoveHandle()],
handles: [spawnRotateHandle(), spawnMoveHandle()],
renderer: {
kind: 'parametric',
@@ -66,6 +92,9 @@ export const spawnDefinition: NodeDefinition<typeof SpawnNode> = {
// delete. Legacy spawn click handlers in FloorplanNodeLayer become
// dead code once Phase 6 cleanup removes the [] entries path.
floorplan: buildSpawnFloorplan,
floorplanAffordances: {
'spawn-rotate': spawnRotateAffordance,
},
tool: () => import('./tool'),
toolHints: [
{ key: 'Left click', label: 'Place spawn point' },
packages/nodes/src/spawn/floorplan-affordances.ts
+35
View File
@@ -0,0 +1,35 @@
import {
type AnyNodeId,
type FloorplanAffordance,
type SpawnNode,
useScene,
} from '@pascal-app/core'
export const spawnRotateAffordance: FloorplanAffordance<SpawnNode> = {
start({ node, initialPlanPoint }) {
const spawnId = node.id as AnyNodeId
const initialRotation = node.rotation ?? 0
const cx = node.position[0]
const cz = node.position[2]
const initialAngle = Math.atan2(initialPlanPoint[1] - cz, initialPlanPoint[0] - cx)
let lastRotation = initialRotation
return {
affectedIds: [spawnId],
apply({ planPoint }) {
const currentAngle = Math.atan2(planPoint[1] - cz, planPoint[0] - cx)
let delta = currentAngle - initialAngle
while (delta > Math.PI) delta -= 2 * Math.PI
while (delta < -Math.PI) delta += 2 * Math.PI
lastRotation = initialRotation - delta
useScene.getState().updateNode(spawnId, { rotation: lastRotation })
},
canCommit() {
return true
},
commit() {
useScene.getState().updateNode(spawnId, { rotation: lastRotation })
},
}
},
}
packages/nodes/src/spawn/floorplan.ts
+38 -7
View File
@@ -1,21 +1,26 @@
import type { FloorplanGeometry } from '@pascal-app/core'
import type { FloorplanGeometry, FloorplanPoint, GeometryContext } from '@pascal-app/core'
import type { SpawnNode } from './schema'
const SPAWN_COLOR = '#818cf8'
const ROTATE_ARROW_CORNER_OFFSET = 0.22
/**
* 2D floor-plan marker for a spawn point. A small filled circle at the
* spawn's position, with a triangular arrow indicating the facing
* direction (rotation around Y, looking down at the X-Z plane).
*
* Color matches the 3D renderer's `SPAWN_COLOR = '#22c55e'` so the user
* Color matches the 3D renderer's indigo spawn material so the user
* sees the same visual identity in both views.
*
* Coordinates are level-local meters; rotation is radians.
*/
export function buildSpawnFloorplan(node: SpawnNode): FloorplanGeometry {
export function buildSpawnFloorplan(node: SpawnNode, ctx: GeometryContext): FloorplanGeometry {
const [px, , pz] = node.position
const ry = node.rotation
const isSelected = ctx.viewState?.selected ?? false
return {
const children: FloorplanGeometry[] = [
{
kind: 'group',
transform: { translate: [px, pz], rotate: ry },
children: [
@@ -28,7 +33,7 @@ export function buildSpawnFloorplan(node: SpawnNode): FloorplanGeometry {
[-0.18, 0.12],
[0.18, 0.12],
],
fill: '#22c55e',
fill: SPAWN_COLOR,
opacity: 0.85,
},
// Spawn body marker — circle outline so the spawn is legible at
@@ -38,11 +43,37 @@ export function buildSpawnFloorplan(node: SpawnNode): FloorplanGeometry {
cx: 0,
cy: 0,
r: 0.34,
stroke: '#22c55e',
stroke: SPAWN_COLOR,
strokeWidth: 0.025,
fill: '#22c55e',
fill: SPAWN_COLOR,
opacity: 0.18,
},
],
},
]
if (isSelected) {
const cornerLocalX = 0.34 + ROTATE_ARROW_CORNER_OFFSET
const cornerLocalZ = 0.34 + ROTATE_ARROW_CORNER_OFFSET
const [cornerX, cornerZ] = rotatePlanVector(cornerLocalX, cornerLocalZ, ry)
const [radialX, radialZ] = rotatePlanVector(1, 1, ry)
children.push({
kind: 'rotate-arrow',
point: [px + cornerX, pz + cornerZ],
angle: Math.atan2(radialZ, radialX),
affordance: 'spawn-rotate',
pivot: [px, pz],
})
}
return {
kind: 'group',
children,
}
}
function rotatePlanVector(x: number, y: number, rotation: number): FloorplanPoint {
const c = Math.cos(rotation)
const s = Math.sin(rotation)
return [x * c - y * s, x * s + y * c]
}
packages/nodes/src/spawn/renderer.tsx
+3 -3
View File
@@ -11,12 +11,12 @@ import { createDefaultMaterial, useNodeEvents, useViewer } from '@pascal-app/vie
import { useMemo, useRef } from 'react'
import { Color, type Group, Shape } from 'three'
const SPAWN_COLOR = new Color('#22c55e')
const SPAWN_COLOR = new Color('#818cf8')
/**
* Registry-driven spawn renderer. Behaviorally identical to the legacy
* `@pascal-app/viewer/components/renderers/spawn/spawn-renderer.tsx` — same
* geometry, same colors, same event surface. When the spawn definition lands
* geometry and event surface. When the spawn definition lands
* in `builtinPlugin.nodes`, the Phase 0 dispatch shims switch the renderer
* here and the legacy one is short-circuited.
*
@@ -38,7 +38,7 @@ const SpawnRenderer = ({ node }: { node: SpawnNode }) => {
useRegistry(node.id, 'spawn', ref)
const material = useMemo(() => {
const next = createDefaultMaterial('#22c55e', 0.42, shading) as ReturnType<
const next = createDefaultMaterial('#818cf8', 0.42, shading) as ReturnType<
typeof createDefaultMaterial
> & {
emissive?: Color
packages/nodes/src/spawn/tool.tsx
+1 -1
View File
@@ -120,7 +120,7 @@ const SpawnTool = () => {
if (!activeLevelId) return null
return <CursorSphere color="#60a5fa" height={2.2} ref={cursorRef} />
return <CursorSphere color="#818cf8" height={2.2} ref={cursorRef} />
}
export default SpawnTool
packages/nodes/src/stair/definition.ts
+2 -2
View File
@@ -433,8 +433,8 @@ export const stairDefinition: NodeDefinition<typeof StairNode> = {
// A stair has no centred box footprint: straight = a cumulative
// `stair-segment` chain, curved / spiral = an annular sector. Hand the
// alignment bridge the resolved plan `aabb` directly (not a `box`) — the
// stair moves by its origin via `affordanceTools.move`, so it only ever
// contributes static candidate anchors, never the relocatable box path.
// moving-anchor helper can relocate the same shape when a stair is being
// placed or dragged.
alignmentFootprint: (node, nodes) => {
const aabb = stairFootprintAABB(node as StairNodeType, nodes)
return aabb ? { shape: 'aabb', ...aabb } : null
packages/nodes/src/stair/floorplan-move.ts
+18 -13
View File
@@ -3,24 +3,22 @@ import {
collectAlignmentAnchors,
type FloorplanMoveTarget,
type FloorplanMoveTargetSession,
movingAlignmentAnchors,
type StairNode,
snapScalar,
useScene,
} from '@pascal-app/core'
import { applyFloorplanAlignment, getSegmentGridStep } from '@pascal-app/editor'
import { createFloorplanCursorResolver } from '../shared/floorplan-cursor'
/**
* 2D floor-plan move handler for stair.
*
* **Pivot semantics.** The stair's ORIGIN (its `position`) follows the
* snapped cursor — the same pivot the 3D move tool (`shared/move-roof-tool`)
* uses: it positions the stair by its origin at the grid-snapped, aligned
* cursor, NOT by the grab offset under the mouse. This replaces the old
* grab-relative delta so dragging in 2D tracks the same point as 3D.
* Existing stairs preserve the cursor grab offset, matching the 3D move
* tools; fresh catalog placement follows the cursor absolutely.
*
* Figma alignment is layered on the origin point (single anchor), matching
* `move-roof-tool`'s "align by origin" behaviour; Alt bypasses. Guides are
* cleared by `FloorplanRegistryMoveOverlay`'s Path 1 teardown.
* Figma alignment is layered on the stair footprint edges; Alt bypasses.
* Guides are cleared by `FloorplanRegistryMoveOverlay`'s Path 1 teardown.
*
* The position is written straight to scene each tick (the stair has a real
* `position` field, unlike polygon kinds) and re-applied atomically via
@@ -29,6 +27,10 @@ import { applyFloorplanAlignment, getSegmentGridStep } from '@pascal-app/editor'
*/
export const stairFloorplanMoveTarget: FloorplanMoveTarget<StairNode> = ({ node, nodes }) => {
const startY = node.position[1]
const resolveCursor = createFloorplanCursorResolver({
original: [node.position[0], node.position[2]],
metadata: node.metadata,
})
// Alignment candidates gathered once — the scene is stable during the drag.
const candidates = collectAlignmentAnchors(nodes, node.id)
let lastValid: { position: [number, number, number] } | null = null
@@ -39,13 +41,16 @@ export const stairFloorplanMoveTarget: FloorplanMoveTarget<StairNode> = ({ node,
// Snap the origin to the editor's current grid step (driven by
// `useEditor.gridSnapStep`). Shift bypasses the grid snap.
const step = getSegmentGridStep()
const gx = modifiers.shiftKey ? planPoint[0] : snapScalar(planPoint[0], step)
const gz = modifiers.shiftKey ? planPoint[1] : snapScalar(planPoint[1], step)
// Figma alignment on the origin point (Alt bypasses), matching the 3D
// move tool. Publishes guides via `useAlignmentGuides`.
const snap = (value: number) => (modifiers.shiftKey ? value : snapScalar(value, step))
const [gx, gz] = resolveCursor(planPoint, { snap })
// Figma alignment on the actual stair footprint (Alt bypasses),
// matching the 3D move tool. Publishes guides via `useAlignmentGuides`.
const movingAnchors = movingAlignmentAnchors(node, nodes, gx, gz, node.rotation ?? 0)
const { point: aligned } = applyFloorplanAlignment(
[gx, gz],
[{ nodeId: node.id, kind: 'corner', x: gx, z: gz }],
movingAnchors.length > 0
? movingAnchors
: [{ nodeId: node.id, kind: 'corner', x: gx, z: gz }],
candidates,
{ bypass: modifiers.altKey },
)
packages/nodes/src/turbine-vent/move-tool.tsx
+25 -32
View File
@@ -4,17 +4,19 @@ import {
type AnyNodeId,
emitter,
type RoofEvent,
type RoofNode,
type RoofSegmentNode,
sceneRegistry,
type TurbineVentNode,
useScene,
} from '@pascal-app/core'
import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/editor'
import { useViewer } from '@pascal-app/viewer'
import { useCallback, useEffect, useState } from 'react'
import * as THREE from 'three'
import { resolveRoofSegmentHit } from '../shared/roof-segment-hit'
import {
createRelativeRoofDrag,
type RelativeRoofDragTarget,
roofSegmentLocalToBuildingLocal,
} from '../shared/relative-roof-drag'
import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface'
import TurbineVentPreview from './preview'
@@ -54,48 +56,39 @@ export default function MoveTurbineVentTool({ node }: { node: TurbineVentNode })
const ventObj = sceneRegistry.nodes.get(node.id)
if (ventObj) ventObj.visible = false
const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => {
const buildingId = useViewer.getState().selection.buildingId
const buildingObj = buildingId ? sceneRegistry.nodes.get(buildingId as AnyNodeId) : null
if (!buildingObj) return [wx, wy, wz]
const v = new THREE.Vector3(wx, wy, wz)
buildingObj.worldToLocal(v)
return [v.x, v.y, v.z]
}
let lastSnap: [number, number] | null = null
let lastTarget: RelativeRoofDragTarget | null = null
const roofDrag = createRelativeRoofDrag(original)
const updatePreview = (event: RoofEvent) => {
const wx = event.position[0]
const wy = event.position[1]
const wz = event.position[2]
const target = roofDrag.resolve(event)
if (!target) return
lastTarget = target
const sx = Math.round(wx * 20) / 20
const sz = Math.round(wz * 20) / 20
const sx = Math.round(target.localX * 20) / 20
const sz = Math.round(target.localZ * 20) / 20
if (!lastSnap || lastSnap[0] !== sx || lastSnap[1] !== sz) {
triggerSFX('sfx:grid-snap')
lastSnap = [sx, sz]
}
const hit = resolveRoofSegmentHit(event.node as RoofNode, wx, wy, wz)
if (!hit) return
const normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment)
const normal = getAnalyticalNormal(target.localX, target.localZ, target.segment)
setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion()))
setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0))
setPreviewPos(worldToBuildingLocal(wx, wy, wz))
setPreviewYaw((event.node.rotation ?? 0) + (target.segment.rotation ?? 0))
setPreviewPos(
roofSegmentLocalToBuildingLocal(target.segment.id, [
target.localX,
target.localY,
target.localZ,
]),
)
event.stopPropagation()
}
const onRoofClick = (event: RoofEvent) => {
const hit = resolveRoofSegmentHit(
event.node as RoofNode,
event.position[0],
event.position[1],
event.position[2],
)
if (!hit) return
const targetSegmentId = hit.segment.id as AnyNodeId
const target = lastTarget ?? roofDrag.resolve(event)
if (!target) return
const targetSegmentId = target.segment.id as AnyNodeId
const st = useScene.getState()
const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined
@@ -119,7 +112,7 @@ export default function MoveTurbineVentTool({ node }: { node: TurbineVentNode })
st.updateNode(node.id as AnyNodeId, {
roofSegmentId: targetSegmentId,
parentId: targetSegmentId,
position: [hit.localX, hit.localY, hit.localZ],
position: [target.localX, target.localY, target.localZ],
rotation: original.rotation,
visible: true,
metadata: {},
packages/nodes/src/window/floorplan-move.ts
+19 -2
View File
@@ -3,10 +3,16 @@ import {
type FloorplanMoveTarget,
type FloorplanMoveTargetSession,
useScene,
type WallNode,
type WindowNode,
} from '@pascal-app/core'
import { snapToHalf } from '@pascal-app/editor'
import { findClosestWallInPlan, snapLocalXToNeighbors } from '../shared/wall-attach-target'
import { createFloorplanCursorResolver } from '../shared/floorplan-cursor'
import {
findClosestWallInPlan,
projectWallLocalPointToPlan,
snapLocalXToNeighbors,
} from '../shared/wall-attach-target'
import { clampToWall, hasWallChildOverlap } from './window-math'
/**
@@ -26,6 +32,16 @@ export const windowFloorplanMoveTarget: FloorplanMoveTarget<WindowNode> = ({ nod
const wall = useScene.getState().nodes[node.parentId as AnyNodeId]
return wall ? (wall.parentId as AnyNodeId | null) : null
})()
const originalWall = node.parentId
? (useScene.getState().nodes[node.parentId as AnyNodeId] as WallNode | undefined)
: undefined
const resolveCursor = createFloorplanCursorResolver({
original:
originalWall?.type === 'wall'
? projectWallLocalPointToPlan(originalWall, node.position[0])
: [node.position[0], 0],
metadata: node.metadata,
})
// Preserve the source window's local Y — 2D move doesn't have a way
// to express vertical motion, so we keep whatever vertical position
@@ -46,7 +62,8 @@ export const windowFloorplanMoveTarget: FloorplanMoveTarget<WindowNode> = ({ nod
affectedIds: [node.id as AnyNodeId],
apply({ planPoint, modifiers }) {
const nodes = useScene.getState().nodes
const hit = findClosestWallInPlan(planPoint, nodes, startLevelId)
const resolvedPlanPoint = resolveCursor(planPoint)
const hit = findClosestWallInPlan(resolvedPlanPoint, nodes, startLevelId)
if (!hit) return
// Figma-style along-wall alignment first (edge-to-edge with other
packages/nodes/src/window/move-tool.tsx
+108 -137
View File
@@ -86,6 +86,24 @@ const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWindowNode
}
let currentWallId: string | null = movingWindowNode.parentId
let dragAnchor: {
wallId: string
rawX: number
rawY: number
startX: number
startY: number
} | null = null
let lastTarget: {
wallNode: WallEvent['node']
wallId: string
side: WindowNode['side']
itemRotation: number
cursorRotation: number
clampedX: number
clampedY: number
valid: boolean
event: WallEvent
} | null = null
const markWallDirty = (wallId: string | null) => {
if (wallId) useScene.getState().dirtyNodes.add(wallId as AnyNodeId)
@@ -140,7 +158,7 @@ const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWindowNode
edgeMaterial.color.setHex(valid ? 0x22_c5_5e : 0xef_44_44)
}
const onWallEnter = (event: WallEvent) => {
const resolveMoveTarget = (event: WallEvent) => {
if (!isValidWallSideFace(event.normal)) return
if (isCurvedWall(event.node)) {
hideCursor()
@@ -153,40 +171,35 @@ const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWindowNode
const itemRotation = calculateItemRotation(event.normal)
const cursorRotation = calculateCursorRotation(event.normal, event.node.start, event.node.end)
const rawLocalX = event.localPosition[0]
const rawLocalY = event.localPosition[1]
if (!dragAnchor || dragAnchor.wallId !== event.node.id) {
dragAnchor = {
wallId: event.node.id,
rawX: rawLocalX,
rawY: rawLocalY,
startX: event.node.id === original.parentId ? original.position[0] : rawLocalX,
startY:
event.node.id === original.parentId ? original.position[1] : snapToHalf(rawLocalY),
}
}
const targetLocalX = dragAnchor.startX + (rawLocalX - dragAnchor.rawX)
const targetLocalY = snapToHalf(dragAnchor.startY + (rawLocalY - dragAnchor.rawY))
const localX = resolveWallSlideAlignment({
wallNode: event.node,
rawLocalX: event.localPosition[0],
rawLocalX: targetLocalX,
width: movingWindowNode.width,
candidates: alignmentCandidates,
bypass: event.nativeEvent?.altKey === true,
})
const localY = snapToHalf(event.localPosition[1])
const { clampedX, clampedY } = clampToWall(
event.node,
localX,
localY,
targetLocalY,
movingWindowNode.width,
movingWindowNode.height,
)
const prevWallId = currentWallId
currentWallId = event.node.id
useScene.getState().updateNode(movingWindowNode.id, {
position: [clampedX, clampedY, 0],
rotation: [0, itemRotation, 0],
side,
parentId: event.node.id,
wallId: event.node.id,
})
useLiveTransforms.getState().set(movingWindowNode.id, {
position: [clampedX, clampedY, 0],
rotation: itemRotation,
})
if (prevWallId && prevWallId !== event.node.id) markWallDirty(prevWallId)
markWallDirtyThrottled(event.node.id)
const valid = !hasWallChildOverlap(
event.node.id,
clampedX,
@@ -196,17 +209,62 @@ const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWindowNode
movingWindowNode.id,
)
updateCursor(
wallLocalToWorld(
event.node,
return {
wallNode: event.node,
wallId: event.node.id,
side,
itemRotation,
cursorRotation,
clampedX,
clampedY,
getLevelYOffset(),
getSlabElevation(event),
),
cursorRotation,
valid,
event,
}
}
const applyPreview = (target: NonNullable<typeof lastTarget>) => {
if (currentWallId !== target.wallId) {
useScene.getState().updateNode(movingWindowNode.id, {
position: [target.clampedX, target.clampedY, 0],
rotation: [0, target.itemRotation, 0],
side: target.side,
parentId: target.wallId,
wallId: target.wallId,
})
markWallDirty(currentWallId)
currentWallId = target.wallId
} else {
const windowMesh = sceneRegistry.nodes.get(movingWindowNode.id as AnyNodeId)
if (windowMesh) {
windowMesh.position.set(target.clampedX, target.clampedY, 0)
windowMesh.rotation.set(0, target.itemRotation, 0)
windowMesh.updateMatrixWorld(true)
}
}
useLiveTransforms.getState().set(movingWindowNode.id, {
position: [target.clampedX, target.clampedY, 0],
rotation: target.itemRotation,
})
markWallDirtyThrottled(target.wallId)
updateCursor(
wallLocalToWorld(
target.wallNode,
target.clampedX,
target.clampedY,
getLevelYOffset(),
getSlabElevation(target.event),
),
target.cursorRotation,
target.valid,
)
}
const onWallEnter = (event: WallEvent) => {
const target = resolveMoveTarget(event)
if (!target) return
lastTarget = target
applyPreview(target)
event.stopPropagation()
}
@@ -219,73 +277,10 @@ const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWindowNode
// Only interact with walls on the current level
if (event.node.parentId !== getLevelId()) return
const side = getSideFromNormal(event.normal)
const itemRotation = calculateItemRotation(event.normal)
const cursorRotation = calculateCursorRotation(event.normal, event.node.start, event.node.end)
const localX = resolveWallSlideAlignment({
wallNode: event.node,
rawLocalX: event.localPosition[0],
width: movingWindowNode.width,
candidates: alignmentCandidates,
bypass: event.nativeEvent?.altKey === true,
})
const localY = snapToHalf(event.localPosition[1])
const { clampedX, clampedY } = clampToWall(
event.node,
localX,
localY,
movingWindowNode.width,
movingWindowNode.height,
)
if (currentWallId !== event.node.id) {
// Wall changed mid-move: must updateNode to reparent
useScene.getState().updateNode(movingWindowNode.id, {
position: [clampedX, clampedY, 0],
rotation: [0, itemRotation, 0],
side,
parentId: event.node.id,
wallId: event.node.id,
})
markWallDirty(currentWallId)
currentWallId = event.node.id
} else {
// Same wall: update Three.js mesh directly to avoid store churn
// collectCutoutBrushes reads cutoutMesh.matrixWorld, not scene store positions
const windowMesh = sceneRegistry.nodes.get(movingWindowNode.id as AnyNodeId)
if (windowMesh) {
windowMesh.position.set(clampedX, clampedY, 0)
windowMesh.rotation.set(0, itemRotation, 0)
windowMesh.updateMatrixWorld(true)
}
}
useLiveTransforms.getState().set(movingWindowNode.id, {
position: [clampedX, clampedY, 0],
rotation: itemRotation,
})
markWallDirtyThrottled(event.node.id)
const valid = !hasWallChildOverlap(
event.node.id,
clampedX,
clampedY,
movingWindowNode.width,
movingWindowNode.height,
movingWindowNode.id,
)
updateCursor(
wallLocalToWorld(
event.node,
clampedX,
clampedY,
getLevelYOffset(),
getSlabElevation(event),
),
cursorRotation,
valid,
)
const target = resolveMoveTarget(event)
if (!target) return
lastTarget = target
applyPreview(target)
event.stopPropagation()
}
@@ -295,34 +290,8 @@ const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWindowNode
// Only interact with walls on the current level
if (event.node.parentId !== getLevelId()) return
const side = getSideFromNormal(event.normal)
const itemRotation = calculateItemRotation(event.normal)
const localX = resolveWallSlideAlignment({
wallNode: event.node,
rawLocalX: event.localPosition[0],
width: movingWindowNode.width,
candidates: alignmentCandidates,
bypass: event.nativeEvent?.altKey === true,
})
const localY = snapToHalf(event.localPosition[1])
const { clampedX, clampedY } = clampToWall(
event.node,
localX,
localY,
movingWindowNode.width,
movingWindowNode.height,
)
const valid = !hasWallChildOverlap(
event.node.id,
clampedX,
clampedY,
movingWindowNode.width,
movingWindowNode.height,
movingWindowNode.id,
)
if (!valid) return
const target = lastTarget?.wallId === event.node.id ? lastTarget : resolveMoveTarget(event)
if (!target?.valid) return
let placedId: string
@@ -341,13 +310,13 @@ const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWindowNode
const node = WindowNode.parse({
...cloned,
position: [clampedX, clampedY, 0],
rotation: [0, itemRotation, 0],
side,
wallId: event.node.id,
parentId: event.node.id,
position: [target.clampedX, target.clampedY, 0],
rotation: [0, target.itemRotation, 0],
side: target.side,
wallId: target.wallId,
parentId: target.wallId,
})
useScene.getState().createNode(node, event.node.id as AnyNodeId)
useScene.getState().createNode(node, target.wallId as AnyNodeId)
placedId = node.id
} else {
// Move mode: restore original (clean baseline) + resume + updateNode
@@ -363,21 +332,21 @@ const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWindowNode
useScene.temporal.getState().resume()
useScene.getState().updateNode(movingWindowNode.id, {
position: [clampedX, clampedY, 0],
rotation: [0, itemRotation, 0],
side,
parentId: event.node.id,
wallId: event.node.id,
position: [target.clampedX, target.clampedY, 0],
rotation: [0, target.itemRotation, 0],
side: target.side,
parentId: target.wallId,
wallId: target.wallId,
metadata: {},
})
if (original.parentId && original.parentId !== event.node.id) {
if (original.parentId && original.parentId !== target.wallId) {
markWallDirty(original.parentId)
}
placedId = movingWindowNode.id
}
markWallDirty(event.node.id)
markWallDirty(target.wallId)
useLiveTransforms.getState().clear(movingWindowNode.id)
useScene.temporal.getState().pause()
@@ -391,6 +360,8 @@ const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWindowNode
const onWallLeave = () => {
hideCursor()
useLiveTransforms.getState().clear(movingWindowNode.id)
dragAnchor = null
lastTarget = null
if (isNew) return // No original to restore for duplicates
// Move mode: restore to original position while off-wall
if (currentWallId && currentWallId !== original.parentId) {