feat(editor): node-declared per-context snapping + contextual HUD + painter scope
Generify the snapping/modifier HUD off the FSM scope and node declarations
instead of wall-creation-shaped, leaking pills.
- Per-context snapping (`snappingModeByContext`, persisted): wall / item /
polygon mode-sets with exclusive modes (grid | lines | angles | off), each
doing exactly what its chip says. Context is node-declared via the new
`NodeDefinition.snapProfile` ('item' | 'structural'); the resolver maps
(profile × action) → context with no per-kind switch.
- Scope-driven HUD: helper-manager reads the interaction scope; reshaping
(endpoint/curve/boundary) and item move get their own chip, no select-hint
leak. Rotate R/T rounds to 45°; Alt = force-place only (hidden for
structural kinds); Shift = cycle everywhere.
- Slab/ceiling drafting: Shift=cycle, mode-aware grid/angle, Enter finishes
(minDraftVertices); polygon boundary vertex/edge drag begins a reshaping
scope. Fix grid/angle being ignored on boundary edit + slab creation:
make resolveSurfacePlanPointSnap exclusive (alignment gated on magnetic) so
grid/angles keep the snapped fallback instead of the raw cursor.
- Painter application scope: node-derived (single/object/matching/room) from
the hovered node, cyclable via Shift, single-source HUD chip.
- Remove the redundant GridSnapControl from view-toggles (grid step lives in
the contextual HUD now).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
b8b3d35f26
commit
04f1b0d59e
@@ -2,11 +2,13 @@
|
||||
|
||||
import { type CeilingNode, resolveLevelId, useLiveNodeOverrides, useScene } from '@pascal-app/core'
|
||||
import {
|
||||
boundaryReshapeScope,
|
||||
clearCeilingSnapFeedback,
|
||||
PolygonEditor,
|
||||
type PolygonEditorPlanPointSnapContext,
|
||||
resolveCeilingPlanPointSnap,
|
||||
triggerSFX,
|
||||
useInteractionScope,
|
||||
} from '@pascal-app/editor'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { useCallback, useEffect, useMemo, useRef } from 'react'
|
||||
@@ -95,13 +97,19 @@ export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> =
|
||||
|
||||
const handleDragStateChange = useCallback(
|
||||
(isDragging: boolean) => {
|
||||
if (!isDragging) {
|
||||
// A vertex/edge drag is a `boundary` reshape — drive the snapping HUD
|
||||
// (no-angle 'polygon' set) and keep the idle select hints off-screen.
|
||||
const scope = useInteractionScope.getState()
|
||||
if (isDragging) {
|
||||
scope.begin(boundaryReshapeScope(ceilingId))
|
||||
} else {
|
||||
scope.endIf((s) => s.kind === 'reshaping' && s.reshape === 'boundary')
|
||||
ownsPolygonPreviewRef.current = false
|
||||
clearCeilingSnapFeedback()
|
||||
}
|
||||
setCeilingHandleHover(isDragging)
|
||||
},
|
||||
[setCeilingHandleHover],
|
||||
[ceilingId, setCeilingHandleHover],
|
||||
)
|
||||
|
||||
const handlePolygonEditorDragCommit = useCallback(() => {
|
||||
@@ -126,7 +134,6 @@ export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> =
|
||||
levelId: ceilingLevelId,
|
||||
excludeId: ceilingId,
|
||||
altKey: context.nativeEvent?.altKey === true,
|
||||
shiftKey: context.nativeEvent?.shiftKey === true,
|
||||
}).point,
|
||||
[ceilingId, ceilingLevelId],
|
||||
)
|
||||
@@ -136,6 +143,9 @@ export const CeilingBoundaryEditor: React.FC<{ ceilingId: CeilingNode['id'] }> =
|
||||
clearCeilingSnapFeedback()
|
||||
useLiveNodeOverrides.getState().clear(ceilingId)
|
||||
useScene.getState().markDirty(ceilingId)
|
||||
useInteractionScope
|
||||
.getState()
|
||||
.endIf((s) => s.kind === 'reshaping' && s.reshape === 'boundary')
|
||||
ownsPolygonPreviewRef.current = false
|
||||
if (ownsCeilingHoverRef.current && useViewer.getState().hoveredId === ceilingId) {
|
||||
useViewer.getState().setHoveredId(null)
|
||||
|
||||
@@ -79,6 +79,7 @@ function ceilingHandles(_node: CeilingNodeType): HandleDescriptor<CeilingNodeTyp
|
||||
*/
|
||||
export const ceilingDefinition: NodeDefinition<typeof CeilingNode> = {
|
||||
kind: 'ceiling',
|
||||
snapProfile: 'structural',
|
||||
schemaVersion: 1,
|
||||
schema: CeilingNode,
|
||||
category: 'structure',
|
||||
@@ -155,8 +156,7 @@ export const ceilingDefinition: NodeDefinition<typeof CeilingNode> = {
|
||||
|
||||
toolHints: [
|
||||
{ key: 'Left click', label: 'Trace ceiling outline' },
|
||||
{ key: 'Enter', label: 'Finish ceiling' },
|
||||
{ key: 'Shift', label: 'Free outline' },
|
||||
{ key: 'Enter', label: 'Finish ceiling', minDraftVertices: 3 },
|
||||
{ key: 'Esc', label: 'Cancel' },
|
||||
],
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
import {
|
||||
CursorSphere,
|
||||
consumePlacementDragRelease,
|
||||
isMagneticSnapActive,
|
||||
markToolCancelConsumed,
|
||||
triggerSFX,
|
||||
useAlignmentGuides,
|
||||
@@ -37,7 +38,7 @@ import { BufferGeometry, DoubleSide, Path, Shape, ShapeGeometry, Vector3 } from
|
||||
* mesh's X/Z position on rebuild (`mesh.position.x = 0`,
|
||||
* `mesh.position.z = 0`) so the visual transitions smoothly.
|
||||
*
|
||||
* Snaps to the editor's configured grid step (Shift bypasses).
|
||||
* Snaps to the editor's configured grid step.
|
||||
*/
|
||||
function snap(value: number) {
|
||||
return snapScalar(value, useEditor.getState().gridSnapStep)
|
||||
@@ -149,12 +150,10 @@ export const MoveCeilingTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
|
||||
|
||||
const onGridMove = (event: GridEvent) => {
|
||||
if (isFloorplanSourcedEvent(event)) return
|
||||
const bypassSnap = event.nativeEvent?.shiftKey === true
|
||||
const localX = bypassSnap ? event.localPosition[0] : snap(event.localPosition[0])
|
||||
const localZ = bypassSnap ? event.localPosition[2] : snap(event.localPosition[2])
|
||||
const localX = snap(event.localPosition[0])
|
||||
const localZ = snap(event.localPosition[2])
|
||||
|
||||
if (
|
||||
!bypassSnap &&
|
||||
previousGridPosRef.current &&
|
||||
(localX !== previousGridPosRef.current[0] || localZ !== previousGridPosRef.current[1])
|
||||
) {
|
||||
@@ -170,8 +169,8 @@ export const MoveCeilingTool: React.FC<{ node: CeilingNode }> = ({ node }) => {
|
||||
|
||||
// Figma-style alignment snap: align the ceiling's translated polygon
|
||||
// vertices to other objects' anchors; fold the snap into the delta and
|
||||
// publish a guide. Alt bypasses alignment; Shift bypasses all snap.
|
||||
const bypass = event.nativeEvent?.altKey === true || bypassSnap
|
||||
// publish a guide. Alignment follows the global magnetic snap mode.
|
||||
const bypass = !isMagneticSnapActive()
|
||||
if (!bypass && alignmentCandidates.length > 0) {
|
||||
const result = resolveAlignment({
|
||||
moving: polygonAnchors(ceilingId, translatePolygon(originalPolygon, deltaX, deltaZ)),
|
||||
|
||||
@@ -13,6 +13,9 @@ import {
|
||||
CursorSphere,
|
||||
clearCeilingSnapFeedback,
|
||||
EDITOR_LAYER,
|
||||
isAngleSnapActive,
|
||||
isGridSnapActive,
|
||||
isMagneticSnapActive,
|
||||
markToolCancelConsumed,
|
||||
resolveCeilingPlanPointSnap,
|
||||
triggerSFX,
|
||||
@@ -30,7 +33,6 @@ import { CeilingNode } from './schema'
|
||||
* Multi-click polygon drawing at the ceiling height (2.52m default)
|
||||
* with a vertical TSL-gradient connector + ground-shadow lines so the
|
||||
* draft is visible against both the ceiling plane and the floor.
|
||||
* Shift defeats the 15° angle snap during drag.
|
||||
*/
|
||||
|
||||
const CEILING_HEIGHT = 2.52
|
||||
@@ -65,7 +67,6 @@ export const CeilingTool: React.FC = () => {
|
||||
const [snappedCursorPosition, setSnappedCursorPosition] = useState<[number, number]>([0, 0])
|
||||
const [levelY, setLevelY] = useState(0)
|
||||
const previousSnappedPointRef = useRef<[number, number] | null>(null)
|
||||
const shiftPressed = useRef(false)
|
||||
|
||||
// Clear preset-seeded defaults on deactivation so a later manual ceiling
|
||||
// draw isn't built with a stale preset's parameters. Unmount-only.
|
||||
@@ -73,6 +74,12 @@ export const CeilingTool: React.FC = () => {
|
||||
|
||||
useEffect(() => () => clearCeilingSnapFeedback(), [])
|
||||
|
||||
// Publish the live vertex count so the HUD shows "Finish" only at ≥ 3 points.
|
||||
useEffect(() => {
|
||||
useEditor.getState().setDraftVertexCount(points.length)
|
||||
}, [points.length])
|
||||
useEffect(() => () => useEditor.getState().setDraftVertexCount(0), [])
|
||||
|
||||
const verticalGeo = useMemo(
|
||||
() =>
|
||||
new BufferGeometry().setFromPoints([
|
||||
@@ -93,38 +100,27 @@ export const CeilingTool: React.FC = () => {
|
||||
const onGridMove = (event: GridEvent) => {
|
||||
if (!(cursorRef.current && gridCursorRef.current)) return
|
||||
const rawPoint: [number, number] = [event.localPosition[0], event.localPosition[2]]
|
||||
const bypassSnap = shiftPressed.current || event.nativeEvent?.shiftKey === true
|
||||
const gridPosition: [number, number] = bypassSnap
|
||||
? rawPoint
|
||||
: [...snapPointToGrid(rawPoint, useEditor.getState().gridSnapStep)]
|
||||
// Honour the active snapping mode: grid lattice + 15° angle lock are each
|
||||
// gated on the mode (off / lines → free), like the slab tool.
|
||||
const gridStep = isGridSnapActive() ? useEditor.getState().gridSnapStep : 0
|
||||
const gridPosition: [number, number] = [...snapPointToGrid(rawPoint, gridStep)]
|
||||
setCursorPosition(gridPosition)
|
||||
setLevelY(event.localPosition[1])
|
||||
const ceilingY = event.localPosition[1] + CEILING_HEIGHT
|
||||
const gridY = event.localPosition[1] + GRID_OFFSET
|
||||
const lastPoint = points[points.length - 1]
|
||||
// 15° angle snap from the raw cursor (matching the 2D floorplan
|
||||
// pipeline) with the distance snapped along the ray to the grid step.
|
||||
const orthoPoint: [number, number] =
|
||||
bypassSnap || !lastPoint
|
||||
? gridPosition
|
||||
: [
|
||||
...snapPointAlongAngleRay(
|
||||
lastPoint,
|
||||
rawPoint,
|
||||
DEFAULT_ANGLE_STEP,
|
||||
useEditor.getState().gridSnapStep,
|
||||
),
|
||||
]
|
||||
isAngleSnapActive() && lastPoint
|
||||
? [...snapPointAlongAngleRay(lastPoint, rawPoint, DEFAULT_ANGLE_STEP, gridStep)]
|
||||
: gridPosition
|
||||
const displayPoint = resolveCeilingPlanPointSnap({
|
||||
rawPoint,
|
||||
fallbackPoint: orthoPoint,
|
||||
levelId: currentLevelId,
|
||||
altKey: event.nativeEvent?.altKey === true,
|
||||
shiftKey: bypassSnap,
|
||||
altKey: !isMagneticSnapActive(),
|
||||
}).point
|
||||
setSnappedCursorPosition(displayPoint)
|
||||
if (
|
||||
!bypassSnap &&
|
||||
points.length > 0 &&
|
||||
previousSnappedPointRef.current &&
|
||||
(displayPoint[0] !== previousSnappedPointRef.current[0] ||
|
||||
@@ -178,28 +174,12 @@ export const CeilingTool: React.FC = () => {
|
||||
clearCeilingSnapFeedback()
|
||||
}
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Shift') shiftPressed.current = true
|
||||
}
|
||||
const onKeyUp = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Shift') shiftPressed.current = false
|
||||
}
|
||||
const onWindowBlur = () => {
|
||||
shiftPressed.current = false
|
||||
}
|
||||
document.addEventListener('keydown', onKeyDown)
|
||||
document.addEventListener('keyup', onKeyUp)
|
||||
window.addEventListener('blur', onWindowBlur)
|
||||
|
||||
emitter.on('grid:move', onGridMove)
|
||||
emitter.on('grid:click', onGridClick)
|
||||
emitter.on('grid:double-click', onGridDoubleClick)
|
||||
emitter.on('tool:cancel', onCancel)
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', onKeyDown)
|
||||
document.removeEventListener('keyup', onKeyUp)
|
||||
window.removeEventListener('blur', onWindowBlur)
|
||||
emitter.off('grid:move', onGridMove)
|
||||
emitter.off('grid:click', onGridClick)
|
||||
emitter.off('grid:double-click', onGridDoubleClick)
|
||||
|
||||
Reference in New Issue
Block a user