Phase 5 Stage E: full kind migration into packages/nodes
Wholesale move of every remaining kind into its own subdirectory under
`packages/nodes/src/`, finishing the registry-driven migration. Each
kind now ships its definition, schema (re-exported from core), and any
of `geometry` / `renderer` / `system` / `floorplan` / `tool` /
`move-tool` / `panel` / `floorplan-move` / `floorplan-affordances` /
`parametrics` / `preview` it needs — no per-kind code remains under
`packages/editor/src/components/tools/` or
`packages/viewer/src/components/renderers/`.
Deleted (replaced by registry-driven equivalents):
- `tools/{ceiling,column,door,fence,item,slab,spawn,wall,window}/...`
(boundary editors, hole editors, placement tools, move tools,
endpoint movers, curve tools, helpers, math libs)
- `ui/helpers/{ceiling,slab,wall}-helper.tsx`
- `ui/panels/{column,door,elevator,item,roof,roof-segment,spawn,
stair,stair-segment,wall,window}-panel.tsx`
- `viewer/src/components/renderers/{building,ceiling,column,door,
elevator,fence,guide,item,level,roof,roof-segment,scan,site,slab,
spawn,stair,stair-segment,wall,window,zone}-renderer.tsx`
- `viewer/src/components/viewer/legacy-system.tsx`
Added under `packages/nodes/src/`:
- `building/`, `column/`, `elevator/`, `guide/`, `level/`, `roof/`,
`roof-segment/`, `scan/`, `shared/`, `site/`, `stair/`,
`stair-segment/` packages with definition + schema + renderer / system
/ floorplan / panel as appropriate.
- New `floorplan-move.ts` for every kind that supports 2D moves
(ceiling, door, item, shelf, slab, window) — single registry-driven
dispatch path via `def.floorplanMoveTarget`.
- New `floorplan-affordances.ts` for kinds with polygon / endpoint
drags (ceiling, fence, slab, wall) — using the shared
`polygon-vertex-affordance` factories.
- New per-kind `panel.tsx` for kinds with custom inspector content
(door, item, shelf, spawn, wall, window).
- New per-kind `tool.tsx` for placement (door, item, shelf, window).
- New per-kind `move-tool.tsx` for kinds with custom 3D move flows
(door, item, slab, window).
Coordinator + manager updates in `packages/editor/`:
- `tool-manager.tsx` resolves tools from the registry only — no
hardcoded type→component map.
- `panel-manager.tsx` resolves inspector panels the same way.
- `placement-{coordinator,strategies,types}.ts` extended with
shelf-surface placement.
- `selection-manager.tsx` adds the registry-selectable fallback.
- `floorplan-panel.tsx`, `floorplan-background-placement.ts`,
`floorplan-render-context.tsx` updated for the registry layer's new
contract (props, affordance dispatch, render context).
Viewer updates:
- `viewer/index.tsx` drops legacy renderer mounts.
- `node-renderer.tsx` resolves by registry only.
- `scene-bvh.tsx`, `use-node-events.ts`, `level-system.tsx`,
`wall-cutout.tsx`, `zone-system.tsx`, `materials.ts` adjusted for
the registry-only world.
Sidebar tree nodes for ceiling / fence / slab / shelf / tree-node
updated to read from the registered nodes instead of the deleted
legacy renderer trees.
Wiki: new `plugin-authoring.md` page, README index updated.
Tests in `packages/nodes/src/index.test.ts` validate every registered
kind has the required shape.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
11015ea1ed
commit
d747d2f0ea
@@ -1,5 +1,6 @@
|
||||
import type { NodeDefinition } from '@pascal-app/core'
|
||||
import { buildWallFloorplan } from './floorplan'
|
||||
import { wallCurveAffordance, wallMoveEndpointAffordance } from './floorplan-affordances'
|
||||
import { wallParametrics } from './parametrics'
|
||||
import { WallNode } from './schema'
|
||||
|
||||
@@ -82,6 +83,20 @@ export const wallDefinition: NodeDefinition<typeof WallNode> = {
|
||||
// Stage C: floor-plan rendering. ctx.siblings provides other walls in
|
||||
// the level so `calculateLevelMiters` can compute correct corner joins.
|
||||
floorplan: buildWallFloorplan,
|
||||
// 2D drag affordances triggered by `endpoint-handle` primitives in
|
||||
// `def.floorplan`'s output. Sister to `affordanceTools` (3D) — the
|
||||
// same legacy `MoveWallEndpointTool` flow, reachable from both the
|
||||
// R3F canvas and the floor-plan SVG.
|
||||
floorplanAffordances: {
|
||||
'move-endpoint': wallMoveEndpointAffordance,
|
||||
curve: wallCurveAffordance,
|
||||
},
|
||||
|
||||
toolHints: [
|
||||
{ key: 'Left click', label: 'Set wall start / end' },
|
||||
{ key: 'Shift', label: 'Allow non-45° angles' },
|
||||
{ key: 'Esc', label: 'Cancel' },
|
||||
],
|
||||
|
||||
presentation: {
|
||||
label: 'Wall',
|
||||
|
||||
@@ -0,0 +1,201 @@
|
||||
import {
|
||||
type AnyNode,
|
||||
type AnyNodeId,
|
||||
type FloorplanAffordance,
|
||||
type FloorplanAffordanceSession,
|
||||
getMaxWallCurveOffset,
|
||||
getWallChordFrame,
|
||||
normalizeWallCurveOffset,
|
||||
useScene,
|
||||
type WallNode,
|
||||
} from '@pascal-app/core'
|
||||
import {
|
||||
getWallGridStep,
|
||||
isWallLongEnough,
|
||||
snapScalarToGrid,
|
||||
snapWallDraftPoint,
|
||||
type WallPlanPoint,
|
||||
} from '@pascal-app/editor'
|
||||
|
||||
/**
|
||||
* Floor-plan 2D drag affordances for wall.
|
||||
*
|
||||
* Sister file to `move-endpoint-tool.tsx` — the 3D component port. This
|
||||
* one drives the same legacy interaction from SVG pointer events instead
|
||||
* of R3F grid events. The mutation logic is identical:
|
||||
*
|
||||
* 1. Capture original positions of the dragged wall + every wall whose
|
||||
* endpoint coincides with either of the dragged wall's endpoints
|
||||
* ("linked walls").
|
||||
* 2. On each tick: snap the moving point (grid → linked-wall → angle),
|
||||
* compute primary endpoints, and cascade matching corners onto the
|
||||
* linked walls. Apply via `useScene.updateNodes` — the registry
|
||||
* dispatcher pauses / resumes history around this.
|
||||
* 3. Commit if the resulting wall is still long enough (legacy guard).
|
||||
*
|
||||
* Alt-detach (drop linked walls) and SHIFT-free-place (skip angle snap)
|
||||
* are wired via the standard modifier flags on the session.
|
||||
*/
|
||||
|
||||
type WallEndpointPayload = { wallId: AnyNodeId; endpoint: 'start' | 'end' }
|
||||
|
||||
function pointsEqual(a: readonly number[], b: readonly number[]) {
|
||||
return a[0] === b[0] && a[1] === b[1]
|
||||
}
|
||||
|
||||
function collectLevelWalls(
|
||||
nodes: Record<AnyNodeId, AnyNode>,
|
||||
excludeWallId?: AnyNodeId,
|
||||
): WallNode[] {
|
||||
const out: WallNode[] = []
|
||||
for (const node of Object.values(nodes)) {
|
||||
if (node?.type === 'wall' && node.id !== excludeWallId) out.push(node as WallNode)
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
function collectLinkedWalls(
|
||||
nodes: Record<AnyNodeId, AnyNode>,
|
||||
draggedWallId: AnyNodeId,
|
||||
originalStart: WallPlanPoint,
|
||||
originalEnd: WallPlanPoint,
|
||||
): Array<{ id: AnyNodeId; start: WallPlanPoint; end: WallPlanPoint }> {
|
||||
const linked: Array<{ id: AnyNodeId; start: WallPlanPoint; end: WallPlanPoint }> = []
|
||||
for (const node of Object.values(nodes)) {
|
||||
if (node?.type !== 'wall') continue
|
||||
if (node.id === draggedWallId) continue
|
||||
const wall = node as WallNode
|
||||
if (
|
||||
pointsEqual(wall.start, originalStart) ||
|
||||
pointsEqual(wall.start, originalEnd) ||
|
||||
pointsEqual(wall.end, originalStart) ||
|
||||
pointsEqual(wall.end, originalEnd)
|
||||
) {
|
||||
linked.push({
|
||||
id: wall.id,
|
||||
start: [...wall.start] as WallPlanPoint,
|
||||
end: [...wall.end] as WallPlanPoint,
|
||||
})
|
||||
}
|
||||
}
|
||||
return linked
|
||||
}
|
||||
|
||||
/**
|
||||
* Wall curve sagitta drag — 1:1 port of the legacy
|
||||
* `handleWallCurvePointerDown` + commit flow. Drag projects the pointer
|
||||
* onto the chord normal to compute a `curveOffset`, snapped to the
|
||||
* grid step (Shift bypasses snap), clamped to `getMaxWallCurveOffset`,
|
||||
* normalized via `normalizeWallCurveOffset`. Same single-undo dance as
|
||||
* the move-endpoint affordance — the dispatcher handles snapshot /
|
||||
* pause / resume around `apply`.
|
||||
*/
|
||||
export const wallCurveAffordance: FloorplanAffordance<WallNode> = {
|
||||
start({ node }): FloorplanAffordanceSession {
|
||||
// Chord frame is fixed for the duration of the drag — only the
|
||||
// pointer projection along its normal changes.
|
||||
const chord = getWallChordFrame(node)
|
||||
const maxOffset = getMaxWallCurveOffset(node)
|
||||
|
||||
return {
|
||||
affectedIds: [node.id],
|
||||
apply({ planPoint, modifiers }) {
|
||||
const snapStep = getWallGridStep()
|
||||
const x = modifiers.shiftKey ? planPoint[0] : snapScalarToGrid(planPoint[0], snapStep)
|
||||
const y = modifiers.shiftKey ? planPoint[1] : snapScalarToGrid(planPoint[1], snapStep)
|
||||
|
||||
// Signed projection of (snappedPoint - chord midpoint) onto the
|
||||
// chord normal. Legacy negates because the SVG y-axis flips
|
||||
// relative to plan y; the registry layer doesn't apply that flip
|
||||
// so the projection runs against the same normal the 3D tool
|
||||
// uses (which also has no flip). The result matches the 3D port
|
||||
// in `nodes/src/wall/curve-tool.tsx`.
|
||||
const offsetFromMidpoint = -(
|
||||
(x - chord.midpoint.x) * chord.normal.x +
|
||||
(y - chord.midpoint.y) * chord.normal.y
|
||||
)
|
||||
const snappedOffset = modifiers.shiftKey
|
||||
? offsetFromMidpoint
|
||||
: snapScalarToGrid(offsetFromMidpoint, snapStep)
|
||||
const nextCurveOffset = normalizeWallCurveOffset(
|
||||
node,
|
||||
Math.max(-maxOffset, Math.min(maxOffset, snappedOffset)),
|
||||
)
|
||||
|
||||
useScene.getState().updateNodes([{ id: node.id, data: { curveOffset: nextCurveOffset } }])
|
||||
},
|
||||
canCommit() {
|
||||
// Curve drag is always commit-eligible — the offset is already
|
||||
// clamped + normalized so we never end up in an invalid state.
|
||||
return true
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export const wallMoveEndpointAffordance: FloorplanAffordance<WallNode> = {
|
||||
start({ node, payload, nodes }): FloorplanAffordanceSession {
|
||||
const { endpoint } = payload as WallEndpointPayload
|
||||
const fixedPoint: WallPlanPoint =
|
||||
endpoint === 'start' ? ([...node.end] as WallPlanPoint) : ([...node.start] as WallPlanPoint)
|
||||
const originalStart: WallPlanPoint = [...node.start] as WallPlanPoint
|
||||
const originalEnd: WallPlanPoint = [...node.end] as WallPlanPoint
|
||||
const linkedWalls = collectLinkedWalls(nodes, node.id, originalStart, originalEnd)
|
||||
const affectedIds: AnyNodeId[] = [node.id, ...linkedWalls.map((w) => w.id)]
|
||||
|
||||
return {
|
||||
affectedIds,
|
||||
apply({ planPoint, modifiers }) {
|
||||
// Re-collect walls every tick so the snap pipeline sees fresh
|
||||
// positions (matters when the user releases + re-grabs without
|
||||
// unmounting the layer).
|
||||
const sceneNodes = useScene.getState().nodes
|
||||
const walls = collectLevelWalls(sceneNodes, node.id)
|
||||
const snapped = snapWallDraftPoint({
|
||||
point: planPoint as WallPlanPoint,
|
||||
walls,
|
||||
start: fixedPoint,
|
||||
angleSnap: !modifiers.shiftKey,
|
||||
ignoreWallIds: [node.id],
|
||||
})
|
||||
|
||||
const primaryStart: WallPlanPoint = endpoint === 'start' ? snapped : fixedPoint
|
||||
const primaryEnd: WallPlanPoint = endpoint === 'end' ? snapped : fixedPoint
|
||||
|
||||
// ALT detaches: the linked walls keep their original endpoints,
|
||||
// and only the dragged wall moves.
|
||||
const linkedUpdates = modifiers.altKey
|
||||
? []
|
||||
: linkedWalls.map((w) => ({
|
||||
id: w.id,
|
||||
start: pointsEqual(w.start, originalStart)
|
||||
? primaryStart
|
||||
: pointsEqual(w.start, originalEnd)
|
||||
? primaryEnd
|
||||
: w.start,
|
||||
end: pointsEqual(w.end, originalStart)
|
||||
? primaryStart
|
||||
: pointsEqual(w.end, originalEnd)
|
||||
? primaryEnd
|
||||
: w.end,
|
||||
}))
|
||||
|
||||
useScene.getState().updateNodes([
|
||||
{ id: node.id, data: { start: primaryStart, end: primaryEnd } },
|
||||
...linkedUpdates.map((u) => ({
|
||||
id: u.id,
|
||||
data: { start: u.start, end: u.end },
|
||||
})),
|
||||
])
|
||||
},
|
||||
canCommit() {
|
||||
const finalWall = useScene.getState().nodes[node.id] as WallNode | undefined
|
||||
return (
|
||||
!!finalWall &&
|
||||
finalWall.type === 'wall' &&
|
||||
isWallLongEnough(finalWall.start, finalWall.end)
|
||||
)
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
@@ -4,7 +4,10 @@ import {
|
||||
type FloorplanGeometry,
|
||||
type FloorplanPoint,
|
||||
type GeometryContext,
|
||||
getWallCurveLength,
|
||||
getWallMidpointHandlePoint,
|
||||
getWallPlanFootprint,
|
||||
isCurvedWall,
|
||||
type WallNode,
|
||||
} from '@pascal-app/core'
|
||||
|
||||
@@ -28,16 +31,30 @@ function exaggerateWallThickness(wall: WallNode): WallNode {
|
||||
return { ...wall, thickness: floorplanWallThickness(wall) }
|
||||
}
|
||||
|
||||
function formatLengthMetric(meters: number): string {
|
||||
return `${Number.parseFloat(meters.toFixed(2))}m`
|
||||
}
|
||||
|
||||
/**
|
||||
* Stage C floor-plan builder for wall. Returns the mitered plan
|
||||
* footprint polygon. Uses `ctx.siblings` to gather other walls in the
|
||||
* level so `calculateLevelMiters` produces the correct corner joins.
|
||||
* Stage C floor-plan builder for wall — emits the full chrome stack the
|
||||
* legacy `floorplan-panel.tsx` rendered inline:
|
||||
*
|
||||
* 1. The mitered footprint polygon (themed fill + stroke).
|
||||
* 2. A diagonal hatch overlay when selected.
|
||||
* 3. A transparent hit-line on the centerline so the user can grab the
|
||||
* wall body easily.
|
||||
* 4. Two endpoint handles (start + end) when selected — the registry
|
||||
* layer hosts the 5-circle stack + hover transitions + 2D drag.
|
||||
* 5. A small dimension label at the midpoint when selected.
|
||||
*
|
||||
* `ctx.siblings` provides other walls in the level so
|
||||
* `calculateLevelMiters` computes correct corner joins.
|
||||
*
|
||||
* Performance note: this recomputes level miter data per wall (O(N²)
|
||||
* across N walls in the level). For < 100 walls per level this is
|
||||
* sub-millisecond. If a real perf hotspot surfaces, the `ctx.levelData?.
|
||||
* miters` extension flagged in the plan moves the batch computation to
|
||||
* the dispatcher.
|
||||
* sub-millisecond. If a real perf hotspot surfaces, the
|
||||
* `ctx.levelData?.miters` extension flagged in the plan moves the batch
|
||||
* computation to the dispatcher.
|
||||
*/
|
||||
export function buildWallFloorplan(node: WallNode, ctx: GeometryContext): FloorplanGeometry | null {
|
||||
const siblings = ctx.siblings.filter((s): s is AnyNode & WallNode => s.type === 'wall')
|
||||
@@ -49,12 +66,170 @@ export function buildWallFloorplan(node: WallNode, ctx: GeometryContext): Floorp
|
||||
const polygon = getWallPlanFootprint(self, miters)
|
||||
if (!polygon || polygon.length < 3) return null
|
||||
|
||||
return {
|
||||
kind: 'polygon',
|
||||
points: polygon.map((p) => [p.x, p.y] as FloorplanPoint),
|
||||
fill: '#374151',
|
||||
stroke: '#1f2937',
|
||||
strokeWidth: 0.02,
|
||||
opacity: 0.92,
|
||||
const view = ctx.viewState
|
||||
const palette = view?.palette
|
||||
const isSelected = view?.selected ?? false
|
||||
const isHighlighted = view?.highlighted ?? false
|
||||
const isHovered = view?.hovered ?? false
|
||||
const showSelectedChrome = isSelected || isHighlighted
|
||||
|
||||
const points = polygon.map((p) => [p.x, p.y] as FloorplanPoint)
|
||||
|
||||
// Stroke colour shifts: selected → theme accent; hover (when not
|
||||
// selected) → palette.wallHoverStroke (light blue from the legacy);
|
||||
// otherwise the dark grey carries through. Mirrors the legacy
|
||||
// `wallStroke` ternary in floorplan-panel.tsx around line 4356.
|
||||
const stroke =
|
||||
showSelectedChrome && palette
|
||||
? palette.selectedStroke
|
||||
: isHovered && palette
|
||||
? palette.wallHoverStroke
|
||||
: '#1f2937'
|
||||
const fill = showSelectedChrome ? '#ffffff' : '#374151'
|
||||
|
||||
const children: FloorplanGeometry[] = [
|
||||
{
|
||||
kind: 'polygon',
|
||||
points,
|
||||
fill,
|
||||
stroke,
|
||||
strokeWidth: showSelectedChrome ? 0.03 : 0.02,
|
||||
opacity: 0.92,
|
||||
},
|
||||
]
|
||||
|
||||
// Selection hatch overlay — only when the wall is *the* selected item
|
||||
// (not when it's just marquee-highlighted), matching the legacy.
|
||||
if (isSelected && palette) {
|
||||
children.push({
|
||||
kind: 'hatch',
|
||||
points,
|
||||
color: palette.selectedHatch,
|
||||
opacity: 1,
|
||||
})
|
||||
}
|
||||
|
||||
// Hit-line on the centerline. Stroke width is in screen pixels so it
|
||||
// stays clickable at any zoom.
|
||||
children.push({
|
||||
kind: 'hit-line',
|
||||
x1: node.start[0],
|
||||
y1: node.start[1],
|
||||
x2: node.end[0],
|
||||
y2: node.end[1],
|
||||
strokeWidthPx: 18,
|
||||
cursor: 'pointer',
|
||||
})
|
||||
|
||||
// Endpoint handles only when the user has actively selected this wall.
|
||||
if (isSelected) {
|
||||
children.push({
|
||||
kind: 'endpoint-handle',
|
||||
point: [node.start[0], node.start[1]],
|
||||
state: 'idle',
|
||||
affordance: 'move-endpoint',
|
||||
payload: { wallId: node.id, endpoint: 'start' as const },
|
||||
})
|
||||
children.push({
|
||||
kind: 'endpoint-handle',
|
||||
point: [node.end[0], node.end[1]],
|
||||
state: 'idle',
|
||||
affordance: 'move-endpoint',
|
||||
payload: { wallId: node.id, endpoint: 'end' as const },
|
||||
})
|
||||
|
||||
// Curve sagitta handle — teal dot at the wall midpoint that
|
||||
// controls `curveOffset`. Hidden when the wall hosts a door /
|
||||
// window / wall-attached item: bending the wall would tear those
|
||||
// children, so the legacy disables the handle in that case (see
|
||||
// `wallCurveHandles.hasWallChildrenBlockingCurve`).
|
||||
if (!hasCurveBlockingChildren(ctx.children)) {
|
||||
const handle = getWallMidpointHandlePoint(node)
|
||||
children.push({
|
||||
kind: 'endpoint-handle',
|
||||
point: [handle.x, handle.y],
|
||||
state: 'idle',
|
||||
variant: 'curve',
|
||||
affordance: 'curve',
|
||||
payload: { wallId: node.id },
|
||||
})
|
||||
}
|
||||
|
||||
// Length measurement. Curved walls use the simple rounded label
|
||||
// (the chord-vs-arc thing is hard to express with a dimension line);
|
||||
// straight walls get the full architect's overlay with extension
|
||||
// marks + ticks, offset to the side facing away from the level
|
||||
// centroid (matches the legacy `getWallMeasurementOverlay`).
|
||||
const length = getWallCurveLength(node)
|
||||
if (length >= 0.1) {
|
||||
const dx = node.end[0] - node.start[0]
|
||||
const dz = node.end[1] - node.start[1]
|
||||
const midX = (node.start[0] + node.end[0]) / 2
|
||||
const midZ = (node.start[1] + node.end[1]) / 2
|
||||
|
||||
if (isCurvedWall(node)) {
|
||||
children.push({
|
||||
kind: 'dimension-label',
|
||||
cx: midX,
|
||||
cy: midZ,
|
||||
text: formatLengthMetric(length),
|
||||
angle: Math.atan2(dz, dx),
|
||||
})
|
||||
} else {
|
||||
// Outward unit normal = perpendicular to (dx, dz), choose the
|
||||
// side facing away from other walls' centroid so the dimension
|
||||
// line sits outside the building.
|
||||
const nx = -dz / length
|
||||
const nz = dx / length
|
||||
const wallSiblings = ctx.siblings.filter((s): s is AnyNode & WallNode => s.type === 'wall')
|
||||
const centroid = wallCentroid([node, ...wallSiblings])
|
||||
const cx = midX - centroid[0]
|
||||
const cz = midZ - centroid[1]
|
||||
const facingAway = cx * nx + cz * nz >= 0 ? 1 : -1
|
||||
children.push({
|
||||
kind: 'dimension',
|
||||
start: [node.start[0], node.start[1]],
|
||||
end: [node.end[0], node.end[1]],
|
||||
offsetNormal: [nx * facingAway, nz * facingAway],
|
||||
offsetDistance: 0.42,
|
||||
extensionOvershoot: 0.12,
|
||||
text: formatLengthMetric(length),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return { kind: 'group', children }
|
||||
}
|
||||
|
||||
function wallCentroid(walls: WallNode[]): [number, number] {
|
||||
// Mean of every wall endpoint — cheap approximation of "where the
|
||||
// building lives" so we can offset the dimension line away from it.
|
||||
let sumX = 0
|
||||
let sumZ = 0
|
||||
let count = 0
|
||||
for (const wall of walls) {
|
||||
sumX += wall.start[0] + wall.end[0]
|
||||
sumZ += wall.start[1] + wall.end[1]
|
||||
count += 2
|
||||
}
|
||||
if (count === 0) return [0, 0]
|
||||
return [sumX / count, sumZ / count]
|
||||
}
|
||||
|
||||
/**
|
||||
* Doors, windows, and wall-attached items would tear if the wall bent
|
||||
* around them, so the curve sagitta handle hides when any of those
|
||||
* children exist. Mirrors the legacy
|
||||
* `wallCurveHandles.hasWallChildrenBlockingCurve` check.
|
||||
*/
|
||||
function hasCurveBlockingChildren(children: AnyNode[]): boolean {
|
||||
for (const child of children) {
|
||||
if (child.type === 'door' || child.type === 'window') return true
|
||||
if (child.type === 'item') {
|
||||
const attachTo = (child as { asset?: { attachTo?: string } }).asset?.attachTo
|
||||
if (attachTo === 'wall' || attachTo === 'wall-side') return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
type AnyNode,
|
||||
type AnyNodeId,
|
||||
getClampedWallCurveOffset,
|
||||
getMaxWallCurveOffset,
|
||||
getWallCurveLength,
|
||||
normalizeWallCurveOffset,
|
||||
useScene,
|
||||
type WallNode,
|
||||
} from '@pascal-app/core'
|
||||
import {
|
||||
ActionButton,
|
||||
ActionGroup,
|
||||
PanelSection,
|
||||
PanelWrapper,
|
||||
SliderControl,
|
||||
triggerSFX,
|
||||
useEditor,
|
||||
} from '@pascal-app/editor'
|
||||
import { useViewer } from '@pascal-app/viewer'
|
||||
import { Move, Spline } from 'lucide-react'
|
||||
import { useCallback, useRef } from 'react'
|
||||
|
||||
export default function WallPanel() {
|
||||
const selectedId = useViewer((s) => s.selection.selectedIds[0])
|
||||
const setSelection = useViewer((s) => s.setSelection)
|
||||
const setMovingNode = useEditor((s) => s.setMovingNode)
|
||||
const setCurvingWall = useEditor((s) => s.setCurvingWall)
|
||||
|
||||
const node = useScene((s) =>
|
||||
selectedId ? (s.nodes[selectedId as AnyNode['id']] as WallNode | undefined) : undefined,
|
||||
)
|
||||
|
||||
// Boolean selector — re-renders only when this specific wall's child
|
||||
// composition crosses the "has a door/window/wall-item" threshold.
|
||||
const hasWallChildrenBlockingCurve = useScene((s) => {
|
||||
if (!node) return false
|
||||
return (node.children ?? []).some((childId) => {
|
||||
const child = s.nodes[childId as AnyNodeId]
|
||||
if (!child) return false
|
||||
if (child.type === 'door' || child.type === 'window') return true
|
||||
if (child.type === 'item') {
|
||||
const attachTo = child.asset?.attachTo
|
||||
return attachTo === 'wall' || attachTo === 'wall-side'
|
||||
}
|
||||
return false
|
||||
})
|
||||
})
|
||||
|
||||
// Mirror the latest node into a ref so the slider handlers below have
|
||||
// stable identities across re-renders. Without this, every store tick
|
||||
// (one per pointermove during a slider drag) rebuilt the handler
|
||||
// refs, destabilising SliderControl's pointer-capture listeners and
|
||||
// combining with float drift in `getWallCurveLength` produced a
|
||||
// "Maximum update depth exceeded" cascade. Same fix in fence-panel.tsx.
|
||||
const nodeRef = useRef(node)
|
||||
nodeRef.current = node
|
||||
|
||||
const handleUpdate = useCallback(
|
||||
(updates: Partial<WallNode>) => {
|
||||
if (!selectedId) return
|
||||
useScene.getState().updateNode(selectedId as AnyNode['id'], updates)
|
||||
},
|
||||
[selectedId],
|
||||
)
|
||||
|
||||
const handleUpdateLength = useCallback(
|
||||
(newLength: number) => {
|
||||
const n = nodeRef.current
|
||||
if (!n || newLength <= 0) return
|
||||
|
||||
const dx = n.end[0] - n.start[0]
|
||||
const dz = n.end[1] - n.start[1]
|
||||
const currentLength = Math.sqrt(dx * dx + dz * dz)
|
||||
|
||||
if (currentLength === 0) return
|
||||
|
||||
const dirX = dx / currentLength
|
||||
const dirZ = dz / currentLength
|
||||
|
||||
const newEnd: [number, number] = [
|
||||
n.start[0] + dirX * newLength,
|
||||
n.start[1] + dirZ * newLength,
|
||||
]
|
||||
|
||||
handleUpdate({ end: newEnd })
|
||||
},
|
||||
[handleUpdate],
|
||||
)
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setSelection({ selectedIds: [] })
|
||||
}, [setSelection])
|
||||
|
||||
const handleMove = useCallback(() => {
|
||||
if (!node) return
|
||||
triggerSFX('sfx:item-pick')
|
||||
setMovingNode(node)
|
||||
setSelection({ selectedIds: [] })
|
||||
}, [node, setMovingNode, setSelection])
|
||||
|
||||
const handleCurve = useCallback(() => {
|
||||
if (!node) return
|
||||
triggerSFX('sfx:item-pick')
|
||||
setCurvingWall(node)
|
||||
setSelection({ selectedIds: [] })
|
||||
}, [node, setCurvingWall, setSelection])
|
||||
|
||||
if (!(node && node.type === 'wall' && selectedId)) return null
|
||||
|
||||
const dx = node.end[0] - node.start[0]
|
||||
const dz = node.end[1] - node.start[1]
|
||||
const length = getWallCurveLength(node)
|
||||
|
||||
const height = node.height ?? 2.5
|
||||
const thickness = node.thickness ?? 0.1
|
||||
const curveOffset = getClampedWallCurveOffset(node)
|
||||
const maxCurveOffset = getMaxWallCurveOffset(node)
|
||||
|
||||
return (
|
||||
<PanelWrapper
|
||||
icon="/icons/wall.png"
|
||||
onClose={handleClose}
|
||||
title={node.name || 'Wall'}
|
||||
width={280}
|
||||
>
|
||||
<PanelSection title="Dimensions">
|
||||
<SliderControl
|
||||
label="Length"
|
||||
max={20}
|
||||
min={0.1}
|
||||
onChange={handleUpdateLength}
|
||||
precision={2}
|
||||
step={0.01}
|
||||
unit="m"
|
||||
value={length}
|
||||
/>
|
||||
<SliderControl
|
||||
label="Height"
|
||||
max={6}
|
||||
min={0.1}
|
||||
onChange={(v) => handleUpdate({ height: Math.max(0.1, v) })}
|
||||
precision={2}
|
||||
step={0.1}
|
||||
unit="m"
|
||||
value={Math.round(height * 100) / 100}
|
||||
/>
|
||||
<SliderControl
|
||||
label="Thickness"
|
||||
max={1}
|
||||
min={0.05}
|
||||
onChange={(v) => handleUpdate({ thickness: Math.max(0.05, v) })}
|
||||
precision={3}
|
||||
step={0.01}
|
||||
unit="m"
|
||||
value={Math.round(thickness * 1000) / 1000}
|
||||
/>
|
||||
{!hasWallChildrenBlockingCurve && (
|
||||
<SliderControl
|
||||
label="Curve"
|
||||
max={Math.max(0.01, maxCurveOffset)}
|
||||
min={-Math.max(0.01, maxCurveOffset)}
|
||||
onChange={(v) => handleUpdate({ curveOffset: normalizeWallCurveOffset(node, v) })}
|
||||
precision={2}
|
||||
step={0.1}
|
||||
unit="m"
|
||||
value={Math.round(curveOffset * 100) / 100}
|
||||
/>
|
||||
)}
|
||||
</PanelSection>
|
||||
|
||||
<PanelSection title="Actions">
|
||||
<ActionGroup>
|
||||
<ActionButton icon={<Move className="h-3.5 w-3.5" />} label="Move" onClick={handleMove} />
|
||||
{!hasWallChildrenBlockingCurve && (
|
||||
<ActionButton
|
||||
icon={<Spline className="h-3.5 w-3.5" />}
|
||||
label="Curve"
|
||||
onClick={handleCurve}
|
||||
/>
|
||||
)}
|
||||
</ActionGroup>
|
||||
</PanelSection>
|
||||
</PanelWrapper>
|
||||
)
|
||||
}
|
||||
@@ -24,4 +24,10 @@ export const wallParametrics: ParametricDescriptor<WallNode> = {
|
||||
],
|
||||
},
|
||||
],
|
||||
// Stage E — kind-owned panel. Wall's panel has a derived Length
|
||||
// slider (computes from start/end + dirX/dirZ) and a hosted-child-
|
||||
// aware Curve slider that's only shown when no door / window / wall-
|
||||
// attached item lives on the wall. The auto-inspector can't express
|
||||
// "derived" or "conditionally visible" yet — kept as a custom panel.
|
||||
customPanel: () => import('./panel'),
|
||||
}
|
||||
|
||||
@@ -5,9 +5,6 @@ import { WallCutout, WallSystem } from '@pascal-app/viewer'
|
||||
/**
|
||||
* Registry-driven wall system bundle.
|
||||
*
|
||||
* Wall has two per-frame concerns that mount when the kind is
|
||||
* registry-driven:
|
||||
*
|
||||
* - **`WallSystem`** — reads `dirtyNodes`, batches by level, runs
|
||||
* `calculateLevelMiters(levelWalls)`, rebuilds geometry via
|
||||
* `generateExtrudedWall(node, children, miterData, slabElevation)`,
|
||||
@@ -15,15 +12,6 @@ import { WallCutout, WallSystem } from '@pascal-app/viewer'
|
||||
* bulk of the wall runtime (~820 lines in viewer).
|
||||
* - **`WallCutout`** — cutaway-mode hide/show logic based on camera
|
||||
* direction and `frontSide` / `backSide` interior/exterior tags.
|
||||
*
|
||||
* Both live in `@pascal-app/viewer` and are wrapped in
|
||||
* `<LegacySystem kind="wall">` at the legacy mount point. With wall
|
||||
* registered, those wrappers short-circuit and this bundle takes over
|
||||
* the mount via `RegisteredSystems`. The components themselves are
|
||||
* unchanged — no logic duplication.
|
||||
*
|
||||
* Phase 6 deletes the legacy `<LegacySystem kind="wall">` wrappers; until
|
||||
* then this file is the single mount surface for wall's per-frame work.
|
||||
*/
|
||||
const WallSystems = () => {
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user