From eb1f2d12c2633edcd3b4f58a35e5a062acc218fe Mon Sep 17 00:00:00 2001 From: Sudhir Yadav Date: Tue, 2 Jun 2026 20:27:37 +0530 Subject: [PATCH] =?UTF-8?q?feat(nodes):=20roof=20accessories=20=E2=80=94?= =?UTF-8?q?=20gutters,=20downspouts=20&=20vents=20+=20gizmos=20(#355)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add roof surface placement support for items Items (e.g. solar panels) can now be placed on sloped roof surfaces. The placement system computes euler rotation from the roof surface normal so items sit flush on the slope instead of going inside. - Add roofStrategy to placement-strategies with enter/move/click/leave - Wire roof:enter/move/click/leave events in the placement coordinator - Add calculateRoofRotation in placement-math using surface normals - Support full 3D cursor rotation for sloped surfaces - Items on roofs are parented to the level with world-space rotation Co-Authored-By: Claude Opus 4.6 * fixed conflict * fix(editor): ceiling-attached item placement from 2D floor plan The 3D viewer drives ceiling-item placement via ceiling:enter/move/click raycast events on the ceiling mesh. The floor plan has no such mesh, so ceiling-attached items (lights, fans) never transitioned out of surface: 'floor' — the draft sat at floor height while the 2D cursor moved freely, reading as a 2D/3D sync bug. Synthesise the same ceiling events from 2D plan points by hit-testing ceiling polygons on the active level, and publish the building-local cursor (not world-space) to useLiveTransforms so the floorplan registry override renders the draft under the cursor regardless of building position / rotation. Co-Authored-By: Claude Opus 4.7 (1M context) * fix(editor): chevron arrows render on SCENE_LAYER so ink-edge shader outlines them Node arrow handles and polygon-editor edge arrows were tagged for EDITOR_LAYER, which hides them from the post-processing scenePass — the ink-edge shader reads the depth/normal MRT from that pass, so the chevrons rendered flat with no outlined edges. Drop the EDITOR_LAYER tagging on both, matching the wall-height arrow which already stays on SCENE_LAYER for the same reason. Pair with depthWrite: true on the chevron materials so their silhouettes enter the depth buffer; depthTest stays off to keep the chevron drawn on top of underlying geometry. Without depthWrite, only the normal-discontinuity branch of the ink shader can detect the chevron, and the lines drop out when faces align with whatever sits behind them in screen space. Co-Authored-By: Claude Opus 4.7 (1M context) * fix(editor): ceiling grid overlay no longer blocks selecting items under it Two issues kept the ceiling grid overlay covering the room after the user moved on from a ceiling-related action: 1. CeilingSystem treated any selected descendant of a ceiling as "reveal the grid" — so after placing a ceiling light and the new item became selected, the grid stayed on and its mesh intercepted every subsequent 3D click, re-selecting the ceiling instead of the items below. Restrict the reveal to directly-selected ceilings. 2. The ceiling top material used the opaque surface-role material, so a top-down camera lost view of everything under the ceiling the moment the overlay turned on. Swap the top material for the transparent grid-pattern material (bottom stays opaque so the in-room view still reads as a solid surface). Co-Authored-By: Claude Opus 4.7 (1M context) * fix(core): curve- and thickness-aware wall/slab overlap detection `wallOverlapsPolygon` and `getSlabElevationForWall` previously treated a wall as an infinitely thin chord from start to end. Two failure modes fell out of that: 1. Curved walls whose chord lies outside the slab but whose centerline bows into the slab interior were missed entirely. The wall stayed at Y=0 while the slab elevation moved, and `markNodesOverlappingSlab` never re-dirtied it when the slab Y changed. 2. Perimeter walls of a room — whose centerline sits exactly on (or just outside) the slab's polygon edge — also missed detection, because pointInPolygon on the boundary is unreliable. Half the wall's body is inside the slab; it should follow the slab elevation. Switch `wallOverlapsPolygon` to a wall-shaped input (start/end + optional curveOffset + thickness), sample the centerline for curved walls, and add a ±halfThickness perpendicular test for straight walls. Threaded through `getSlabElevationForWall`, the wall system, and the `markNodesOverlappingSlab` pass. Legacy chord-only call shape preserved for callers that don't yet have a wall in hand. Co-Authored-By: Claude Opus 4.7 (1M context) * fix(editor): show Move button for legacy-movable kinds in floating action menu `isRegistryMovable` only sees kinds wired through `capabilities.movable`, `floorplanMoveTarget`, or `affordanceTools.move`. The legacy tail of `MoveTool` (tools/item/move-tool.tsx) still handles roof, roof-segment, stair, stair-segment, building, and elevator, but the floating action menu was hiding the Move button for them because the registry check returned false. The mover worked once invoked — the entry point was missing. Add a `LEGACY_MOVABLE_KINDS` set alongside the registry check so those kinds get the Move button until they migrate onto kind-owned affordances; drop a kind from the set once it does. Co-Authored-By: Claude Opus 4.7 (1M context) * feat(nodes): in-world registry handles for roof accessories + axis-stable surface basis Adds the registry-driven chevron / tracker / rotate-gizmo handle set to skylight, solar-panel, chimney, and roof-segment so every roof-mounted kind has consistent in-world manipulation, and fixes the underlying renderer + surface-basis bugs that made those handles land on the wrong spot or behave inconsistently across mirrored slopes. Handles - `LinearResizeHandle` gains `shape: 'arrow' | 'tracker'`. `'tracker'` renders a dashed vertical leader from the surface up to a draggable cube, reusing the linear-resize drag pipeline. Roof-segment's wall-height handle adopts it. - Roof-segment: width chevrons split into two asymmetric handles (each grows its own edge, opposite stays world-fixed via `apply` recomputing `position`). - Skylight: width × 2 (asymmetric), height × 2 (asymmetric), curb-height tracker, rotate gizmo (corner, lifted off surface), and a diagonal frame-thickness chevron at the -X+Z corner. - Solar panel: same six handles operating on total array dimensions (back-solving `panelWidth` / `panelHeight` from `columns` / `rows`), plus a frame-depth chevron above the array. - Chimney: registry handle set following the same idioms. Skylight / solar-panel renderer - Collapse the previously nested `position → surfaceQuat → rotation-y → rotation-x` groups into a single registered transform group whose local `position` + composed `quaternion` carry the full pose in segment frame. The registry handles read this Object3D's local matrix (via `portal: 'grandparent'`), and a split tree exposed only the bottom group's local pose so handles landed at the segment origin on the roof floor. Surface basis (solar-panel/geometry.ts) - `surfaceQuatFromNormal` builds `right` by projecting world +X onto the surface plane instead of `up × normal`. The cross-product version flipped sign when the normal's Z component flipped (e.g. the two slopes of a gable roof), so hosted children's local +X pointed in opposite world directions across the ridge and asymmetric chevrons anchored the wrong edge. Projecting +X keeps the basis stable across mirror-image slopes. Skylight move-tool ghost - Switch from the raycast normal (`event.normal × normalMatrix`) to the analytical normal (`getAnalyticalNormal`) on every pointer move, and mirror the placement tool's transform stack: `position → yaw (roof + segment) → surfaceQuat → skylight rotation → preview`. Re-engaging Move from the floating action menu now shows the same correctly oriented ghost the first-placement tool does. * feat(nodes): split roof-segment depth chevron into asymmetric front/back arrows Brings the depth handle in line with the width handles: one chevron on each Z edge, each anchored to the opposite edge so dragging only moves its own side. `apply` recomputes `position` along the segment's local +Z arm (yaw-aware) so the anchored edge stays world-fixed. Depth also feeds the slope-frame math via `getActiveRoofHeight`, so a naïve depth change would also raise/lower the peak (constant pitch across a larger run). We hold the peak fixed by back-solving a new `pitch` for the new depth via `getPitchFromActiveRoofHeight`, clamped to the schema's pitch range — the segment grows along the deck plane without ramping up. * feat(nodes): in-world handles for dormer + window-bottom clipping check Dormer joins chimney / roof-segment with chevron handles on the selected node. Five body handles (width L/R, depth, wall-height tracker, rotate) plus four window-opening handles (width L/R, height top/bottom) — the window handles re-emit windowOffsetX / windowOffsetY in `apply` so the anchored edge stays put as the dragged edge follows the pointer. Handle visibility on roof accessories needed an editor-side assist: the host segment's mesh registers inside RoofRenderer's ``, which hides anything portaled into it. Chimney's `portal: 'grandparent'` escape trips a WebGPU "Color target has no corresponding fragment stage output" pipeline error on dormer (likely an MRT interaction with the window-assembly's transparent glazing), so RoofEditSystem now flips the wrapper visible whenever ANY accessory hosted on a segment of this roof is selected — and resets each segment mesh to an empty 4-group placeholder on the transition so stale per-segment CSG from a prior edit doesn't double-render on top of the merged shell. Window clipping was using wall-top-above-slope as the exposure threshold, but the window sits in the skirt well below the eave — so a dormer whose eave barely cleared the host roof rendered a fully-buried window. `getDormerExposedFaces` now gates on window-bottom-above-slope; both the CSG cut decision and the window-assembly render path feed off the same number. The in-world window chevrons resolve the host segment via sceneApi and flip to whichever face is currently exposed, so dragging the dormer across the ridge moves the chevrons to the visible gable. Also fixes the BoxGeometry vs ExtrudeGeometry mismatch in `buildDormerFallbackGeometry` — body was indexed, roof was not, so `mergeGeometries` rejected the pair and spammed the console on every height-drag frame. Body is now `.toNonIndexed()` before the merge. Co-Authored-By: Claude Opus 4.7 (1M context) * fix(viewer): glazing role uses FrontSide to avoid MRT back-face pipeline error DoubleSide on a NodeMaterial inside the MRT scene pass makes WebGPU compile a back-face shader variant that doesn't declare outputs for every MRT target — the validator rejects it and poisons the render context with "Color target has no corresponding fragment stage output". The warning was already documented on `glassMaterial` (materials.ts:77), but `createSurfaceRoleMaterial` was still forcing DoubleSide for the glazing role. Manifested on scene open as soon as a dormer was present: the dormer's window-assembly mounts the glazing material on both gable faces on the first frame, so the back-face pipeline gets compiled immediately. Glazing now resolves to FrontSide; the dormer's back gable group flips 180° so its FrontSide normals point outward (the sill no longer needs its per-face Z mirror since the group rotation handles it). Co-Authored-By: Claude Opus 4.7 (1M context) * feat(nodes): in-world handles for box-vent + ridge-vent; freeze non-active arrows during drag Adds 5 chevron handles to box-vent (width L/R, depth, height, rotate) and ridge-vent (length L/R, width, height, rotate). Box-vent's renderer now composes slope tilt + yaw onto the registered ref's quaternion (mirrors solar-panel) so handle placements use vent-mesh-local coords directly; ridge-vent's registered ref was already at the vent frame. Ridge-vent renderer now merges `useLiveNodeOverrides` so the mesh updates in-flight during a handle drag instead of freezing until commit. Box-vent / dormer / chimney already did this; ridge-vent was the only roof accessory not subscribed. `NodeArrowHandles` now tracks the active drag descriptor + a pre-drag store snapshot. Non-active arrows render against the snapshot with a node-local freeze offset that cancels the mesh's `position` drift — asymmetric resize (width / length L+R) recomputes position to anchor the opposite edge, and without the freeze every other chevron would slide along with the moving mesh center. The active arrow's freeze offset is null, so it tracks the cursor as before. Rotation drags collapse the offset to zero (position doesn't change), so non-active chevrons naturally rotate with the mesh. Co-Authored-By: Claude Opus 4.7 (1M context) * feat(nodes): gutter accessory — eave-mounted rain channel with three profiles New `gutter` node kind hosted on a roof-segment. Placement tool snaps to the eave line of the segment under the cursor (segment-local `Z = +depth/2`, `Y = wallHeight`); the back wall of the gutter then sits flush against the fascia and the trough hangs outward (+Z). Three cross-section profiles share the same outer-outline-minus-cavity extrude recipe and only differ in the outline curve: - `k-style`: ogee fascia (S-curve) — default residential look - `half-round`: semicircular trough — colonial / classical feel - `box`: rectangular u-channel — commercial / industrial Three in-world chevron handles via the registry: - length L + R (asymmetric — drag one end, the other stays world-fixed) - size (anchor='max', drops the trough downward as the cursor pulls) Wiring touches every node-kind ledger: schema (core/schema/nodes/ gutter.ts), AnyNode union, schema barrel, material targets, roof-segment hosted-accessory comment, event bus (`gutter:*`), nodes barrel + registry, plus the per-kind file set under `packages/nodes/src/gutter/` (geometry, schema re-export, parametrics, renderer, preview, tool, definition, index). V1 ships gutters only — downspouts deferred so the eave-snap + cross-section pipeline can be eyeballed before stacking the downspout-corner placement logic on top. Co-Authored-By: Claude Opus 4.7 (1M context) * feat(gutter): roof-panel entry, eave-edge snap, open-top U-channel, move tool UI surface area: - Roof inspector "Elements" section now lists existing gutters + an "Add Gutter" button. Adds `'gutter'` to the StructureTool union so setTool('gutter') typechecks. - Sidebar tree-node map gets a GutterTreeNode entry; selecting a gutter in the outline focuses it just like other roof accessories. - Floating action menu now shows a Move button on a selected gutter via the new `affordanceTools.move`. MoveGutterTool ghost-follows the cursor, eave-snaps on each frame, and commits to the new segment + side on click. Mirrors the ridge-vent move flow. Geometry fix: - Three cross-sections were authored as a closed outline + inset hole, which extrudes as a sealed box with a tunnel through it (top sealed). Real gutters need an OPEN top. Each profile now traces a single U-shape polygon around the channel material: outer wall down -> bottom -> outer wall up -> front rim -> inner wall down -> inner bottom -> inner wall up -> back rim. The interior of the U is empty space, not a hole inside a closed shape. Placement fix: - Snap now lands on the OUTER drip edge of the roof, not the wall line. Segment-local Z = sign * (depth/2 + overhang - 4 cm tuck), Y = wallHeight - overhang * tan(pitch) + 4 cm tuck. Sign of the cursor's localZ picks the near eave; back eave uses rotation = pi so the trough hangs outward in both directions. The 4 cm tuck offsets keep the gutter visually attached to the fascia rather than floating at the very tip of the overhang. Hook order fix (regression from the previous commit): - `NodeArrowHandlesForNode` had its new useState/useMemo hooks AFTER the `if (!portalObject ...) return null` guard. The registry-resolve useEffect flips portalObject from null to object one frame later, so the guard passed on render N+1 and three new hooks suddenly appeared in the hook list. Moved them above the early return. Co-Authored-By: Claude Opus 4.7 (1M context) * fix(viewer/nodes): drop DoubleSide NodeMaterial MRT landmines across slab, vents, gutter, window DoubleSide on any NodeMaterial inside the MRT scenePass makes WebGPU compile a back-face shader variant whose fragment outputs don't cover every MRT target — the validator rejects the pipeline and poisons the render context with "Color target has no corresponding fragment stage output but writeMask is not zero", manifesting as renderPipeline_NNN invalid on scene open. The pattern was already documented at materials.ts:77 and fixed for glazing in 9400f1c5, but several roof / floor renderers still requested DoubleSide on `createSurfaceRoleMaterial` (which returns a `MeshLambertNodeMaterial`) and on user-supplied materials (which may also be NodeMaterials): - slab/geometry.ts — fired on every untextured floor; the live culprit on scene reload after the gutter renderer was switched to FrontSide. - gutter/renderer.tsx — the U-channel cross-section is traced as a single closed polygon around the material, so ExtrudeGeometry already produces outward-facing normals on every visible face; DoubleSide was speculative. - box-vent / ridge-vent renderers — DoubleSide was deliberate (to keep back faces of thin extrudes visible from below); now a known visual tradeoff. Build the geometry as a closed solid in `geometry.ts` if the underside-view becomes noticeable; do not bring DoubleSide back. - viewer/lib/materials.ts `DEFAULT_WINDOW_MATERIAL` — same fix on the fallback window material. Local `defaultMaterial` constants in box-vent / ridge-vent / gutter also lose their `side: DoubleSide` for consistency (those are `MeshStandardMaterial`, hit only when a preset ref fails to resolve, but the same landmine pattern). Co-Authored-By: Claude Opus 4.7 (1M context) * feat(editor): Shift-snap rotate gizmos to 15° increments Holding Shift while dragging a whole-node rotation arrow now snaps the delta to π/12 (15°) steps. Scoped to `descriptor.shape === 'rotate'` so curved-stair sweep handles keep their continuous feel. * feat(nodes): stair railings track live segment-drag overrides `StairRailings` was reading each child segment from zustand only, so width/length/height drag handles (which publish to `useLiveNodeOverrides` and only flush on release) left the railing frozen at the pre-drag values until release. Subscribe to the override map and merge each child's override onto its zustand snapshot so the railing rebuilds every frame during the drag. * chore(ifc-converter): next-env routes path moves under .next/dev/types Auto-generated next-env.d.ts update from the local Next.js dev server — the routes type now lives under `.next/dev/types/routes.d.ts` rather than `.next/types/routes.d.ts`. * fix(gutter): roofType-aware eave snap — 4-way on hip/flat, low side on shed Gutter place + move tools were hard-coded to snap to ±Z eaves, working for gable / gambrel / mansard / dutch but missing: - Hip / flat: 4 eaves, not 2. Clicks on the side slopes (±X eaves) collapsed back onto ±Z, so users couldn't place a gutter on a hip's side eave at all. - Shed: only one real eave (the low side at +Z). Clicking on the high wall side used to snap to -Z, which is the rake / high end with no fascia to hang from. New shared `eave-snap.ts` module: - `resolveEaveSnap(segment, localX, localZ)` returns `{ eaveX, eaveY, eaveZ, rotation, side }`. - Hip / flat picker uses `max(|lx|/halfW, |lz|/halfD)` — same discriminator `analyticalSurfaceY` uses for hip — to pick which of the four slopes the cursor is on, then signs +/-. - ±X eaves rotate the gutter ±π/2 so its outward axis points away from the building. - Shed always returns +Z (the low side). - Gable / gambrel / mansard / dutch unchanged (±Z). Both tools collapsed their duplicated tuck constants + inlined resolver — the "keep these in sync" comment became a landmine once the resolver grew non-trivial. Co-Authored-By: Claude Opus 4.7 (1M context) * feat(gutter): end caps + corner mitre + ghost-placed parity - Ghost/move previews mirror the GutterRenderer transform chain (roof → segment → snap) and use FrontSide. Removes drift between the placement ghost and the gutter that lands on click. - New endCapLeft / endCapRight booleans (default true) slice a solid-outer plug into the extrusion at each enabled end. Inspector exposes both toggles; caps subtract from node.length so the user-set span is preserved. - corner-mitre.ts detects sibling gutters meeting within 5 cm on the same segment and returns per-end mitre angles. The end-face skew holds back walls at the inner corner while front rims extend to the outer eave intersection; cap on a mitred end is force- suppressed so the L-junction stays open. Renderer pulls siblings via useShallow. Co-Authored-By: Claude Opus 4.7 (1M context) * feat(gutter): drag-snap corners, live eave Y, hangers - Length L/R handles now snap to sibling gutter endpoints within 10 cm and pull BOTH gutters' lengths to the axis intersection — the geometric eave corner — so the 5 cm corner-mitre window fires reliably. Sibling adjustment writes through sceneApi.update; the drag pipeline's history pause batches it with the main commit into one undo step. - Renderer derives eave Y live from segment.wallHeight, overhang, and pitch via the new shared computeEaveY() — instead of trusting node.position[1] from placement time. Subscribes to the segment's useLiveNodeOverrides entry too, so a wall-height drag on the segment moves the gutter on every frame (not just at commit). - Hangers: new hangerStyle (strap / none) + hangerSpacing fields. buildHangers() lays thin 25mm × 3mm × rim-width box straps across the rim at the configured spacing, inset by 5 cm from each end and skipping any cap slabs. BoxGeometry is converted to non-indexed before merge — ExtrudeGeometry isn't indexed, and mergeGeometries rejects mixed-index sets. Inspector exposes both fields in a new "Hangers" group. Co-Authored-By: Claude Opus 4.7 (1M context) * feat(gutter): downspout outlet with real CSG-drilled hole New schema fields: outletSide ('none' | 'left' | 'right'), outletInset, outletDiameter. Default 'none' so existing gutters don't sprout outlets on schema upgrade. Geometry adds a solid cylindrical stub at bore + 3 mm wall radius descending 6 cm from the trough floor, profile-aware Z midpoint (k-style 0.4·size, half-round size, box size/2), X clamped between the caps. After merging into the channel + caps + hangers, a three-bvh-csg SUBTRACTION drills a bore-wide cylinder vertically through the floor and stub — so the result is a real hole in the trough floor with a hollow tube hanging through it. Drill overshoots floor + stub by 1 cm each side to keep cut planes from coinciding with mesh faces (csg-evaluator produces degenerate output on coplanar cuts). CSG only runs when outletSide ≠ 'none' — the existing merge path is the fast path for capped-only gutters. Inspector exposes the three fields under a new 'Outlet' group. Co-Authored-By: Claude Opus 4.7 (1M context) * feat(downspout): new node + gutter inspector list section DownspoutNode lives next to the other roof accessories. Scene-graph parent is the same roof-segment the host gutter sits on; logical attach is via `gutterId`. Schema: length (default 2.5 m), diameter (default 0.07 m / 3″ — matches gutter outlet default), material. Renderer mounts a CylinderGeometry under the same transform chain the gutter uses (segment → gutter-mesh-local → outlet); pulls `computeEaveY` from the live + drag-override segment so wallHeight / overhang / pitch changes track on the same frame as the gutter. `resolveGutterOutletPlacement` (gutter/outlet-lookup.ts) is the shared helper both the downspout renderer and the inline Add path use to compute (x, y, z, bore) in gutter-mesh-local space. Two arrow handles on a selected downspout: - length: tracker shape (dashed leader + draggable cube). Anchored to the outlet, cube at the pipe bottom — readable even when the cube ends up below ground. - diameter: symmetric `z`-axis chevron sitting at a fixed −20 cm Y below the outlet with 25 cm of outward clearance past the worst- case k-style rim, so it stays inside the gutter's camera frame instead of floating mid-pipe. Inspector UX: new optional `trailingSection` slot on ParametricDescriptor — a lazy-loaded React subsection rendered between groups and the Actions section. Gutter's slot loads a `downspouts-panel` that lists every attached downspout (button per item, click → select), and an "Add Downspout" button below that immediately creates a new one parented to the gutter's segment — matches the roof inspector's gutter list pattern. Disabled with a helper line when `outletSide === 'none'`. Multiple downspouts per gutter are allowed. `StructureTool` union picks up 'downspout' so the placement tool remains addressable (used by the legacy roof-panel button before the inspector list took over). Co-Authored-By: Claude Opus 4.7 (1M context) * chore: pending floorplan alignment-guide work-in-progress Snapshot of in-flight alignment-guide files that have been sitting in the working tree (not authored in this session). New service + zustand store wire up the data; the floorplan layer + overlay are the visible consumers. Committed as-is to clear the tree. Co-Authored-By: Claude Opus 4.7 (1M context) * feat(core): gutter multi-outlet model + downspout routing options Replace the gutter's single outletSide/outletInset/outletDiameter triple with an `outlets` array of `{ id, offset, diameter }` so one run can host several downspouts on independent drops instead of stacking on one. Each downspout links to an outlet by `outletId`. Add downspout routing/styling fields: `standoff` (gap proud of the wall), `shape` (auto/round/rect), `strapStyle`/`strapSpacing`, and `terminal` (splash/kickout/straight). Co-Authored-By: Claude Opus 4.8 (1M context) * feat(editor): in-world rotate & move gizmos with live-drag dimension pill Add two new handle-descriptor capabilities to the core registry — a free `translate` handle (ground-plane or wall-normal move cross) and `rotationPlane` for arc-resize (yaw vs spin-flat-against-wall) — plus `measureLabel`, which routes a resize handle's readout to a floating dimension pill instead of its inline chip, and `overrideTarget`, a cross-node redirect for handles that edit a sibling's value. node-arrow-handles implements all four, merging the in-flight drag into `useLiveNodeOverrides` so the mesh moves in real time and commits only on release. Item gains in-world rotate + move gizmos (floor items: world-Y rotate + floor-plane move; wall items: wall-normal spin + wall-face move). Add the shared MeasurementPill (H · L · T) and formatMeasurement, wired into the floating action menu (live wall/fence height drag) and the wall / fence endpoint move tools. Side handles merge live overrides so every affordance tracks the height mid-drag. Item duplicate now drag-to-places (no auto-insert) and the placement coordinator rotates in 45° steps to match the R-key step. Co-Authored-By: Claude Opus 4.8 (1M context) * feat(gutter): multi-downspout outlets with CSG drops, routing & profiles Build out the multi-outlet gutter against the new schema. Each outlet is drilled through the trough floor via CSG (profile-geometry shares the trough cross-section), and a downspout links to one outlet by id so several no longer stack on a single drop. The downspouts panel manages the outlet list; outlet-lookup resolves a downspout's mount from its gutter + outlet. Downspout gains real routing (routing.ts): offset elbows step the run back from the eave overhang to the wall (standoff escape hatch), auto/round/rect cross-section following the gutter profile, wall straps, and splash / kickout / straight terminals, with inspector-editors for the new fields. Length-snap now snaps only the dragged gutter to the geometric corner — never moving its corner-mate — so dragging one gutter can't reset another the user placed deliberately. Adds gutter floorplan (eave-line silhouette). Co-Authored-By: Claude Opus 4.8 (1M context) * feat(floorplan): 2D footprints for roof nodes + rotate-handle angle wedge Add floorplan builders for box-vent, chimney, dormer, ridge-vent, roof, skylight, and solar-panel, and wire each into its definition, so roof-layer nodes finally draw a 2D footprint. Roof draws the merged silhouette of its child segments, and roof-segment now renders proper architectural roof linework (ridge / hip / break + shed downslope arrow) per shape instead of a bare rectangle. Add a `pivot` to the floorplan rotate affordance so the layer can sweep a live angle wedge + degree readout during a rotate drag — the 2D twin of the 3D rotate gizmo. Column / elevator / shelf / stair pass their pivot through. Co-Authored-By: Claude Opus 4.8 (1M context) * fix(editor): select ceiling only via its corner handles, not the grid body Add `viaHandle` to NodeEvent and set it on ceiling corner-bracket clicks. The selection manager now ignores non-handle ceiling clicks without stopping propagation, so a top-down click on the revealed ceiling grid falls through to the item hosted beneath it instead of re-selecting the ceiling and swallowing the click. The corner brackets draw with depthTest off at a high render order so they stay visible and clickable through occluding geometry. Co-Authored-By: Claude Opus 4.8 (1M context) * feat(editor): highlight wall openings on a selected wall Add WallOpeningHighlights — an indigo accent frame + translucent pane drawn around each door / window opening of the selected wall, so editable children (including frameless openings with no visible geometry) are easy to locate. The accent is deliberately distinct from the white selection outline, and draws with depthTest off so it reads on top of the wall. Co-Authored-By: Claude Opus 4.8 (1M context) * fix(solar-panel): derive surface frame live so panels re-seat on roof changes Compute the panel's Y and tilt from the parent roof-segment's finished (deck + shingle) surface every render via getRoofOuterSurfaceFrameAtPoint — the same helper skylights use — instead of reading the stored position[1]/surfaceNormal snapshot. Merging the segment's live overrides means the panel re-seats and re-tilts continuously during a wall-height / pitch drag rather than floating or burying until the value commits. Co-Authored-By: Claude Opus 4.8 (1M context) * fix(first-person): coerce imported item geometry attrs to Float32 for collider merge mergeGeometries requires every merged geometry to share the same typed-array constructor per attribute. Imported item GLBs using KHR_mesh_quantization or interleaved buffers broke the merge against Float32 wall/slab geometry, so decode each attribute into a plain non-normalized Float32 BufferAttribute before cloning into the collider world. Co-Authored-By: Claude Opus 4.8 (1M context) * fix(editor): lower camera minimum zoom distance to 6m Co-Authored-By: Claude Opus 4.8 (1M context) * chore(mcp): bump @pascal-app/mcp to 0.3.0 in lockfile Co-Authored-By: Claude Opus 4.8 (1M context) * refactor(nodes): registry-own move dispatch + hoist shared roof helpers Addresses the architecture-review findings on the gutter/downspout branch: - Move dispatch: port the bespoke roof/roof-segment/stair/stair-segment movers (MoveRoofTool) and the building mover (MoveBuildingContent) into @pascal-app/nodes (shared/move-roof-tool.tsx, building/move-tool.tsx) and declare them via `affordanceTools.move`. Delete both hardcoded dispatch lists — `LEGACY_MOVABLE_KINDS` in floating-action-menu and the roof/stair/ building arms of MoveTool. `onMove` is now purely `isRegistryMovable`. Editor internals the movers need are exported from @pascal-app/editor (adds clearRoofDuplicateMetadata); sfxEmitter.emit -> triggerSFX. elevator keeps its existing capabilities.movable path (its legacy arm is the lone remaining one, now documented). - Cross-kind imports: hoist resolveRoofSegmentHit (roof/segment-hit.ts) and the roof-surface normal math (getSurfaceY/getAnalyticalNormal/ surfaceQuatFromNormal, formerly in solar-panel/geometry.ts) into packages/nodes/src/shared/, so the 8 roof accessories + skylight/box-vent stop reaching into sibling kind folders. roof/index and solar-panel/index re-export from shared so public surfaces are unchanged. - Inspector: make ParametricInspector action `enabledIf` reactive by subscribing to its boolean result (ParamActionButton), matching the existing FieldRenderer/visibleIf pattern. Type-checked (tsc) and linted (biome) across editor + nodes. Move behaviour is preserved by construction but not yet runtime-verified in the editor. Co-Authored-By: Claude Opus 4.8 (1M context) * feat(nodes): add cupola + turbine-vent roof accessories; group-rotate gizmo; in-ring rotation readout New roof-accessory node types and editor gizmo work: - feat(nodes): cupola (roof lantern) and turbine-vent (whirlybird) node types — schema, geometry, parametrics, renderer, panel, move/placement tools, floorplan, and tests; registered in the node + core schema indexes with site-panel tree nodes. - feat(editor): group-rotate handle — a single rotation gizmo for 2+ movable nodes that spins the selection rigidly about its shared bbox center. - fix(editor): the live rotation readout (degree wedge + chip) now renders as a child of the node frame, concentric and coplanar with the guide ring, so it sits centered in the ring on pitched roofs instead of floating off to the side. Flat-ground gizmos and the group-rotate readout are unchanged. - refactor(nodes): rework box-vent / ridge-vent geometry + definitions and share roof helpers; tidy roof/box-vent panels. Co-Authored-By: Claude Opus 4.8 (1M context) * feat(nodes): eyebrow-vent kind; ridge-vent tracks roof height; vent paint + tree-node go registry-driven New eyebrow-vent roof accessory plus two follow-on cleanups: - feat(nodes): eyebrow-vent — a louvered roof vent in three styles (`scoop` swept eyebrow, `half-round` D-vent, `slant-box` hooded box). Solid louver slabs set into a framed/contained front, double-sided geometry, and adjustable style / louver-count / dimensions / slant (`backRatio`). Full registry wiring: core schema, node dir (definition/geometry/renderer/tool/ move-tool/panel/floorplan/preview/tests), event type, palette button. - fix(nodes): ridge vent derives its Y from the segment's current surface (`getSurfaceY`) instead of a stored value, so lowering a roof drops the cap onto the new ridge automatically. - refactor(nodes,editor): migrate the vent family (box / ridge / turbine / cupola / eyebrow) to `capabilities.paint` via a shared single-surface capability, removing the hardcoded `node.type` paint arms from the editor's selection-manager + material-paint (matches chimney/dormer). - refactor(editor): replace the five identical vent tree-node components with one `def.presentation`-driven `RegistryTreeNode`. Co-Authored-By: Claude Opus 4.8 (1M context) --------- Co-authored-by: Claude Opus 4.6 --- packages/core/src/events/bus.ts | 20 + .../spatial-grid/spatial-grid-manager.ts | 119 +- .../hooks/spatial-grid/spatial-grid-sync.ts | 12 +- packages/core/src/index.ts | 2 + packages/core/src/registry/handles.ts | 110 +- packages/core/src/registry/index.ts | 2 + packages/core/src/registry/types.ts | 33 + packages/core/src/schema/index.ts | 5 + packages/core/src/schema/material.ts | 4 + packages/core/src/schema/nodes/box-vent.ts | 8 +- packages/core/src/schema/nodes/cupola.ts | 37 + packages/core/src/schema/nodes/downspout.ts | 74 ++ .../core/src/schema/nodes/eyebrow-vent.ts | 51 + packages/core/src/schema/nodes/gutter.ts | 90 ++ packages/core/src/schema/nodes/ridge-vent.ts | 4 +- .../core/src/schema/nodes/roof-segment.ts | 2 +- .../core/src/schema/nodes/turbine-vent.ts | 50 + packages/core/src/schema/types.ts | 10 + packages/core/src/services/alignment.test.ts | 87 ++ packages/core/src/services/alignment.ts | 176 +++ packages/core/src/services/index.ts | 10 + .../core/src/store/use-alignment-guides.ts | 21 + .../floorplan-alignment-guide-layer.tsx | 137 +++ .../floorplan-registry-move-overlay.tsx | 77 +- .../renderers/floorplan-registry-layer.tsx | 208 +++- .../editor/custom-camera-controls.tsx | 4 +- .../first-person/build-collider-world.ts | 22 +- .../editor/floating-action-menu.tsx | 172 ++- .../src/components/editor/floorplan-panel.tsx | 204 ++++ .../components/editor/group-rotate-handle.tsx | 310 +++++ .../editor/src/components/editor/index.tsx | 4 + .../components/editor/measurement-pill.tsx | 75 ++ .../components/editor/node-arrow-handles.tsx | 1037 ++++++++++++++++- .../components/editor/selection-manager.tsx | 44 +- .../use-floorplan-background-placement.ts | 18 + .../editor/wall-move-side-handles.tsx | 23 +- .../editor/wall-opening-highlights.tsx | 158 +++ .../ceiling-selection-affordance-system.tsx | 29 +- .../systems/ceiling/ceiling-system.tsx | 18 +- .../systems/roof/roof-edit-system.tsx | 94 +- .../src/components/tools/item/move-tool.tsx | 34 +- .../tools/item/use-placement-coordinator.tsx | 14 +- .../tools/select/box-select-tool.tsx | 38 +- .../tools/shared/polygon-editor.tsx | 17 +- .../ui/panels/parametric-inspector.tsx | 43 +- ...ent-tree-node.tsx => gutter-tree-node.tsx} | 12 +- ...t-tree-node.tsx => registry-tree-node.tsx} | 26 +- .../sidebar/panels/site-panel/tree-node.tsx | 12 +- packages/editor/src/index.tsx | 3 +- packages/editor/src/lib/material-paint.ts | 32 +- packages/editor/src/store/use-editor.tsx | 5 + packages/nodes/src/box-vent/definition.ts | 151 ++- packages/nodes/src/box-vent/floorplan.ts | 207 ++++ packages/nodes/src/box-vent/geometry.ts | 313 +++-- packages/nodes/src/box-vent/move-tool.tsx | 4 +- packages/nodes/src/box-vent/panel.tsx | 38 +- packages/nodes/src/box-vent/renderer.tsx | 56 +- packages/nodes/src/box-vent/tool.tsx | 4 +- packages/nodes/src/building/definition.ts | 7 + .../src/building/move-tool.tsx} | 13 +- packages/nodes/src/ceiling/renderer.tsx | 12 +- packages/nodes/src/chimney/definition.ts | 323 ++++- packages/nodes/src/chimney/floorplan.ts | 215 ++++ packages/nodes/src/chimney/geometry.ts | 15 +- packages/nodes/src/chimney/holes.ts | 12 +- packages/nodes/src/chimney/move-tool.tsx | 2 +- packages/nodes/src/chimney/renderer.tsx | 98 +- packages/nodes/src/chimney/roof-trim.ts | 22 +- packages/nodes/src/chimney/tool.tsx | 2 +- packages/nodes/src/column/floorplan.ts | 1 + .../src/cupola/__tests__/geometry.test.ts | 47 + packages/nodes/src/cupola/definition.ts | 165 +++ packages/nodes/src/cupola/floorplan.ts | 111 ++ packages/nodes/src/cupola/geometry.ts | 354 ++++++ packages/nodes/src/cupola/index.ts | 3 + packages/nodes/src/cupola/move-tool.tsx | 203 ++++ packages/nodes/src/cupola/panel.tsx | 288 +++++ packages/nodes/src/cupola/parametrics.ts | 33 + packages/nodes/src/cupola/preview.tsx | 63 + packages/nodes/src/cupola/renderer.tsx | 109 ++ packages/nodes/src/cupola/schema.ts | 3 + packages/nodes/src/cupola/tool.tsx | 130 +++ packages/nodes/src/dormer/csg-geometry.ts | 63 +- packages/nodes/src/dormer/definition.ts | 369 +++++- packages/nodes/src/dormer/floorplan.ts | 213 ++++ packages/nodes/src/dormer/renderer.tsx | 41 +- .../nodes/src/dormer/use-dormer-placement.ts | 2 +- packages/nodes/src/dormer/window-assembly.tsx | 33 +- packages/nodes/src/downspout/definition.ts | 209 ++++ packages/nodes/src/downspout/geometry.ts | 241 ++++ packages/nodes/src/downspout/index.ts | 3 + .../nodes/src/downspout/inspector-editors.tsx | 90 ++ packages/nodes/src/downspout/parametrics.ts | 69 ++ packages/nodes/src/downspout/preview.tsx | 77 ++ packages/nodes/src/downspout/renderer.tsx | 189 +++ packages/nodes/src/downspout/routing.ts | 207 ++++ packages/nodes/src/downspout/schema.ts | 3 + packages/nodes/src/downspout/tool.tsx | 197 ++++ packages/nodes/src/elevator/floorplan.ts | 1 + .../eyebrow-vent/__tests__/geometry.test.ts | 50 + packages/nodes/src/eyebrow-vent/definition.ts | 172 +++ packages/nodes/src/eyebrow-vent/floorplan.ts | 108 ++ packages/nodes/src/eyebrow-vent/geometry.ts | 475 ++++++++ packages/nodes/src/eyebrow-vent/index.ts | 3 + packages/nodes/src/eyebrow-vent/move-tool.tsx | 204 ++++ packages/nodes/src/eyebrow-vent/panel.tsx | 307 +++++ .../nodes/src/eyebrow-vent/parametrics.ts | 34 + packages/nodes/src/eyebrow-vent/preview.tsx | 63 + packages/nodes/src/eyebrow-vent/renderer.tsx | 111 ++ packages/nodes/src/eyebrow-vent/schema.ts | 3 + packages/nodes/src/eyebrow-vent/tool.tsx | 131 +++ packages/nodes/src/fence/definition.ts | 3 + .../nodes/src/fence/move-endpoint-tool.tsx | 29 +- packages/nodes/src/gutter/corner-mitre.ts | 264 +++++ packages/nodes/src/gutter/definition.ts | 197 ++++ .../nodes/src/gutter/downspouts-panel.tsx | 161 +++ packages/nodes/src/gutter/eave-align.ts | 97 ++ packages/nodes/src/gutter/eave-snap.ts | 167 +++ packages/nodes/src/gutter/floorplan.ts | 300 +++++ packages/nodes/src/gutter/geometry.ts | 634 ++++++++++ packages/nodes/src/gutter/index.ts | 3 + packages/nodes/src/gutter/length-snap.ts | 217 ++++ packages/nodes/src/gutter/move-tool.tsx | 225 ++++ packages/nodes/src/gutter/outlet-lookup.ts | 107 ++ packages/nodes/src/gutter/parametrics.ts | 65 ++ packages/nodes/src/gutter/preview.tsx | 82 ++ packages/nodes/src/gutter/profile-geometry.ts | 73 ++ packages/nodes/src/gutter/renderer.tsx | 244 ++++ packages/nodes/src/gutter/schema.ts | 3 + packages/nodes/src/gutter/tool.tsx | 161 +++ packages/nodes/src/index.ts | 15 + packages/nodes/src/item/definition.ts | 143 +++ packages/nodes/src/item/renderer.tsx | 16 +- .../src/ridge-vent/__tests__/schema.test.ts | 2 +- packages/nodes/src/ridge-vent/definition.ts | 147 ++- packages/nodes/src/ridge-vent/floorplan.ts | 152 +++ packages/nodes/src/ridge-vent/geometry.ts | 662 ++++------- packages/nodes/src/ridge-vent/move-tool.tsx | 2 +- packages/nodes/src/ridge-vent/renderer.tsx | 53 +- packages/nodes/src/ridge-vent/tool.tsx | 2 +- packages/nodes/src/roof-segment/definition.ts | 130 ++- packages/nodes/src/roof-segment/floorplan.ts | 223 +++- packages/nodes/src/roof/definition.ts | 15 +- packages/nodes/src/roof/floorplan.ts | 292 +++++ packages/nodes/src/roof/index.ts | 2 +- packages/nodes/src/roof/panel.tsx | 94 +- .../src/shared}/move-roof-tool.tsx | 22 +- .../roof-segment-hit.ts} | 2 +- packages/nodes/src/shared/roof-surface.ts | 158 +++ packages/nodes/src/shared/surface-paint.ts | 55 + packages/nodes/src/shelf/floorplan.ts | 1 + packages/nodes/src/skylight/definition.ts | 202 ++++ packages/nodes/src/skylight/floorplan.ts | 154 +++ packages/nodes/src/skylight/geometry.ts | 2 +- packages/nodes/src/skylight/move-tool.tsx | 71 +- packages/nodes/src/skylight/renderer.tsx | 128 +- packages/nodes/src/skylight/tool.tsx | 4 +- packages/nodes/src/slab/geometry.ts | 13 +- packages/nodes/src/solar-panel/definition.ts | 216 +++- packages/nodes/src/solar-panel/floorplan.ts | 142 +++ packages/nodes/src/solar-panel/geometry.ts | 143 +-- packages/nodes/src/solar-panel/index.ts | 10 +- packages/nodes/src/solar-panel/move-tool.tsx | 4 +- packages/nodes/src/solar-panel/renderer.tsx | 122 +- packages/nodes/src/solar-panel/tool.tsx | 4 +- .../nodes/src/stair-segment/definition.ts | 7 + packages/nodes/src/stair/definition.ts | 7 + packages/nodes/src/stair/floorplan.ts | 1 + packages/nodes/src/stair/renderer.tsx | 14 +- .../turbine-vent/__tests__/geometry.test.ts | 55 + packages/nodes/src/turbine-vent/definition.ts | 138 +++ packages/nodes/src/turbine-vent/floorplan.ts | 135 +++ packages/nodes/src/turbine-vent/geometry.ts | 404 +++++++ packages/nodes/src/turbine-vent/index.ts | 3 + packages/nodes/src/turbine-vent/move-tool.tsx | 204 ++++ packages/nodes/src/turbine-vent/panel.tsx | 338 ++++++ .../nodes/src/turbine-vent/parametrics.ts | 37 + packages/nodes/src/turbine-vent/preview.tsx | 64 + packages/nodes/src/turbine-vent/renderer.tsx | 155 +++ packages/nodes/src/turbine-vent/schema.ts | 3 + packages/nodes/src/turbine-vent/tool.tsx | 131 +++ .../nodes/src/wall/move-endpoint-tool.tsx | 35 + packages/viewer/src/lib/materials.ts | 17 +- .../viewer/src/systems/wall/wall-system.tsx | 8 +- 184 files changed, 17244 insertions(+), 1416 deletions(-) create mode 100644 packages/core/src/schema/nodes/cupola.ts create mode 100644 packages/core/src/schema/nodes/downspout.ts create mode 100644 packages/core/src/schema/nodes/eyebrow-vent.ts create mode 100644 packages/core/src/schema/nodes/gutter.ts create mode 100644 packages/core/src/schema/nodes/turbine-vent.ts create mode 100644 packages/core/src/services/alignment.test.ts create mode 100644 packages/core/src/services/alignment.ts create mode 100644 packages/core/src/store/use-alignment-guides.ts create mode 100644 packages/editor/src/components/editor-2d/floorplan-alignment-guide-layer.tsx create mode 100644 packages/editor/src/components/editor/group-rotate-handle.tsx create mode 100644 packages/editor/src/components/editor/measurement-pill.tsx create mode 100644 packages/editor/src/components/editor/wall-opening-highlights.tsx rename packages/editor/src/components/ui/sidebar/panels/site-panel/{box-vent-tree-node.tsx => gutter-tree-node.tsx} (87%) rename packages/editor/src/components/ui/sidebar/panels/site-panel/{ridge-vent-tree-node.tsx => registry-tree-node.tsx} (70%) create mode 100644 packages/nodes/src/box-vent/floorplan.ts rename packages/{editor/src/components/tools/building/move-building-tool.tsx => nodes/src/building/move-tool.tsx} (95%) create mode 100644 packages/nodes/src/chimney/floorplan.ts create mode 100644 packages/nodes/src/cupola/__tests__/geometry.test.ts create mode 100644 packages/nodes/src/cupola/definition.ts create mode 100644 packages/nodes/src/cupola/floorplan.ts create mode 100644 packages/nodes/src/cupola/geometry.ts create mode 100644 packages/nodes/src/cupola/index.ts create mode 100644 packages/nodes/src/cupola/move-tool.tsx create mode 100644 packages/nodes/src/cupola/panel.tsx create mode 100644 packages/nodes/src/cupola/parametrics.ts create mode 100644 packages/nodes/src/cupola/preview.tsx create mode 100644 packages/nodes/src/cupola/renderer.tsx create mode 100644 packages/nodes/src/cupola/schema.ts create mode 100644 packages/nodes/src/cupola/tool.tsx create mode 100644 packages/nodes/src/dormer/floorplan.ts create mode 100644 packages/nodes/src/downspout/definition.ts create mode 100644 packages/nodes/src/downspout/geometry.ts create mode 100644 packages/nodes/src/downspout/index.ts create mode 100644 packages/nodes/src/downspout/inspector-editors.tsx create mode 100644 packages/nodes/src/downspout/parametrics.ts create mode 100644 packages/nodes/src/downspout/preview.tsx create mode 100644 packages/nodes/src/downspout/renderer.tsx create mode 100644 packages/nodes/src/downspout/routing.ts create mode 100644 packages/nodes/src/downspout/schema.ts create mode 100644 packages/nodes/src/downspout/tool.tsx create mode 100644 packages/nodes/src/eyebrow-vent/__tests__/geometry.test.ts create mode 100644 packages/nodes/src/eyebrow-vent/definition.ts create mode 100644 packages/nodes/src/eyebrow-vent/floorplan.ts create mode 100644 packages/nodes/src/eyebrow-vent/geometry.ts create mode 100644 packages/nodes/src/eyebrow-vent/index.ts create mode 100644 packages/nodes/src/eyebrow-vent/move-tool.tsx create mode 100644 packages/nodes/src/eyebrow-vent/panel.tsx create mode 100644 packages/nodes/src/eyebrow-vent/parametrics.ts create mode 100644 packages/nodes/src/eyebrow-vent/preview.tsx create mode 100644 packages/nodes/src/eyebrow-vent/renderer.tsx create mode 100644 packages/nodes/src/eyebrow-vent/schema.ts create mode 100644 packages/nodes/src/eyebrow-vent/tool.tsx create mode 100644 packages/nodes/src/gutter/corner-mitre.ts create mode 100644 packages/nodes/src/gutter/definition.ts create mode 100644 packages/nodes/src/gutter/downspouts-panel.tsx create mode 100644 packages/nodes/src/gutter/eave-align.ts create mode 100644 packages/nodes/src/gutter/eave-snap.ts create mode 100644 packages/nodes/src/gutter/floorplan.ts create mode 100644 packages/nodes/src/gutter/geometry.ts create mode 100644 packages/nodes/src/gutter/index.ts create mode 100644 packages/nodes/src/gutter/length-snap.ts create mode 100644 packages/nodes/src/gutter/move-tool.tsx create mode 100644 packages/nodes/src/gutter/outlet-lookup.ts create mode 100644 packages/nodes/src/gutter/parametrics.ts create mode 100644 packages/nodes/src/gutter/preview.tsx create mode 100644 packages/nodes/src/gutter/profile-geometry.ts create mode 100644 packages/nodes/src/gutter/renderer.tsx create mode 100644 packages/nodes/src/gutter/schema.ts create mode 100644 packages/nodes/src/gutter/tool.tsx create mode 100644 packages/nodes/src/ridge-vent/floorplan.ts create mode 100644 packages/nodes/src/roof/floorplan.ts rename packages/{editor/src/components/tools/roof => nodes/src/shared}/move-roof-tool.tsx (96%) rename packages/nodes/src/{roof/segment-hit.ts => shared/roof-segment-hit.ts} (98%) create mode 100644 packages/nodes/src/shared/roof-surface.ts create mode 100644 packages/nodes/src/shared/surface-paint.ts create mode 100644 packages/nodes/src/skylight/floorplan.ts create mode 100644 packages/nodes/src/solar-panel/floorplan.ts create mode 100644 packages/nodes/src/turbine-vent/__tests__/geometry.test.ts create mode 100644 packages/nodes/src/turbine-vent/definition.ts create mode 100644 packages/nodes/src/turbine-vent/floorplan.ts create mode 100644 packages/nodes/src/turbine-vent/geometry.ts create mode 100644 packages/nodes/src/turbine-vent/index.ts create mode 100644 packages/nodes/src/turbine-vent/move-tool.tsx create mode 100644 packages/nodes/src/turbine-vent/panel.tsx create mode 100644 packages/nodes/src/turbine-vent/parametrics.ts create mode 100644 packages/nodes/src/turbine-vent/preview.tsx create mode 100644 packages/nodes/src/turbine-vent/renderer.tsx create mode 100644 packages/nodes/src/turbine-vent/schema.ts create mode 100644 packages/nodes/src/turbine-vent/tool.tsx diff --git a/packages/core/src/events/bus.ts b/packages/core/src/events/bus.ts index 1e92b7ca..9a563cec 100644 --- a/packages/core/src/events/bus.ts +++ b/packages/core/src/events/bus.ts @@ -7,11 +7,15 @@ import type { CeilingNode, ChimneyNode, ColumnNode, + CupolaNode, DoorNode, DormerNode, + DownspoutNode, ElevatorNode, + EyebrowVentNode, FenceNode, GuideNode, + GutterNode, ItemNode, LevelNode, RidgeVentNode, @@ -26,6 +30,7 @@ import type { SpawnNode, StairNode, StairSegmentNode, + TurbineVentNode, WallNode, WindowNode, ZoneNode, @@ -63,6 +68,11 @@ export interface NodeEvent { object: Object3D stopPropagation: () => void nativeEvent: ThreeEvent + // Set when the click originated from a dedicated selection affordance + // (e.g. a ceiling corner handle) rather than the node's own surface + // mesh. Lets selection logic accept handle clicks while ignoring clicks + // on the body so they fall through to whatever sits below. + viaHandle?: boolean } export type WallEvent = NodeEvent @@ -88,10 +98,15 @@ export type ScanEvent = NodeEvent export type GuideEvent = NodeEvent export type BoxVentEvent = NodeEvent export type RidgeVentEvent = NodeEvent +export type TurbineVentEvent = NodeEvent +export type CupolaEvent = NodeEvent +export type EyebrowVentEvent = NodeEvent +export type GutterEvent = NodeEvent export type ChimneyEvent = NodeEvent export type SolarPanelEvent = NodeEvent export type SkylightEvent = NodeEvent export type DormerEvent = NodeEvent +export type DownspoutEvent = NodeEvent // Event suffixes - exported for use in hooks export const eventSuffixes = [ @@ -229,10 +244,15 @@ type EditorEvents = GridEvents & NodeEvents<'guide', GuideEvent> & NodeEvents<'box-vent', BoxVentEvent> & NodeEvents<'ridge-vent', RidgeVentEvent> & + NodeEvents<'turbine-vent', TurbineVentEvent> & + NodeEvents<'cupola', CupolaEvent> & + NodeEvents<'eyebrow-vent', EyebrowVentEvent> & + NodeEvents<'gutter', GutterEvent> & NodeEvents<'chimney', ChimneyEvent> & NodeEvents<'solar-panel', SolarPanelEvent> & NodeEvents<'skylight', SkylightEvent> & NodeEvents<'dormer', DormerEvent> & + NodeEvents<'downspout', DownspoutEvent> & CameraControlEvents & ToolEvents & GuideEvents & diff --git a/packages/core/src/hooks/spatial-grid/spatial-grid-manager.ts b/packages/core/src/hooks/spatial-grid/spatial-grid-manager.ts index b9708753..49d8a354 100644 --- a/packages/core/src/hooks/spatial-grid/spatial-grid-manager.ts +++ b/packages/core/src/hooks/spatial-grid/spatial-grid-manager.ts @@ -1,6 +1,8 @@ import type { AnyNode, CeilingNode, ItemNode, SlabNode, WallNode } from '../../schema' import { getScaledDimensions, isLowProfileItemSurface } from '../../schema' import useScene from '../../store/use-scene' +import { isCurvedWall, sampleWallCenterline } from '../../systems/wall/wall-curve' +import { DEFAULT_WALL_THICKNESS } from '../../systems/wall/wall-footprint' import { SpatialGrid } from './spatial-grid' import { WallSpatialGrid } from './wall-spatial-grid' @@ -284,21 +286,82 @@ function segmentsCollinearAndOverlap( return a1OnB && a2OnB } +type WallOverlapInput = { + start: [number, number] + end: [number, number] + curveOffset?: number + thickness?: number +} + /** * Test if a wall segment overlaps with a polygon. * A wall is considered to overlap if: * - Its midpoint is inside the polygon (wall crosses through) * - At least one endpoint is inside (wall partially or fully in slab) * - It's collinear with and overlaps a polygon edge (wall on slab boundary) + * - (curved walls) any sample along the centerline is inside * * Note: A wall with just one endpoint touching the edge but the rest outside * is NOT considered overlapping (adjacent only). */ export function wallOverlapsPolygon( - start: [number, number], - end: [number, number], - polygon: Array<[number, number]>, + startOrWall: [number, number] | WallOverlapInput, + endOrPolygon: [number, number] | Array<[number, number]>, + polygonArg?: Array<[number, number]>, ): boolean { + // Two call shapes: + // wallOverlapsPolygon(wallLike, polygon) — preferred; curve-aware + // wallOverlapsPolygon(start, end, polygon) — legacy chord-only + let start: [number, number] + let end: [number, number] + let polygon: Array<[number, number]> + let curveOffset = 0 + let thickness = DEFAULT_WALL_THICKNESS + if (Array.isArray(startOrWall)) { + start = startOrWall as [number, number] + end = endOrPolygon as [number, number] + polygon = polygonArg as Array<[number, number]> + } else { + start = startOrWall.start + end = startOrWall.end + curveOffset = startOrWall.curveOffset ?? 0 + thickness = startOrWall.thickness ?? DEFAULT_WALL_THICKNESS + polygon = endOrPolygon as Array<[number, number]> + } + const halfThickness = Math.max(thickness / 2, 0) + + // Curved walls: sample the centerline. The chord-based checks below miss + // walls that bow into/out of the slab — e.g. endpoints on the slab + // boundary with the curve arcing inward through the slab interior. Without + // this, `getSlabElevationForWall` returns 0 (wall drops to floor) and + // `markNodesOverlappingSlab` never re-dirties the wall when the slab Y + // moves. + if (curveOffset !== 0) { + const wallLike = { start, end, curveOffset } + if (isCurvedWall(wallLike)) { + const samples = sampleWallCenterline(wallLike, 16) + for (let i = 0; i < samples.length; i++) { + const point = samples[i]! + if (pointInPolygon(point.x, point.y, polygon)) return true + // Also test ±halfThickness perpendicular at each sample so a curve + // skirting the slab edge with its centerline just outside still + // registers — its body sits inside the slab. + if (halfThickness > 0 && i > 0) { + const prev = samples[i - 1]! + const sx = point.x - prev.x + const sz = point.y - prev.y + const sl = Math.sqrt(sx * sx + sz * sz) + if (sl > 1e-10) { + const tnx = (-sz / sl) * halfThickness + const tnz = (sx / sl) * halfThickness + if (pointInPolygon(point.x + tnx, point.y + tnz, polygon)) return true + if (pointInPolygon(point.x - tnx, point.y - tnz, polygon)) return true + } + } + } + } + } + const dx = end[0] - start[0] const dz = end[1] - start[1] const len = Math.sqrt(dx * dx + dz * dz) @@ -331,6 +394,26 @@ export function wallOverlapsPolygon( if (pointInPolygon(bx + pnx, bz + pnz, polygon)) return true if (pointInPolygon(bx - pnx, bz - pnz, polygon)) return true } + + // Wall-thickness perpendicular test. Walls aren't infinitely thin lines; + // a wall whose centerline sits just outside the slab boundary still has + // half its body inside the slab and should follow the slab elevation. + // Without this, the perimeter walls of a room often miss the slab-overlap + // detection (the slab polygon is the room's interior, the wall centerline + // sits on or just outside its edge) and stay at Y=0 while the slab moves + // up. + if (halfThickness > 0) { + const ux = dx / len + const uz = dz / len + const tnx = -uz * halfThickness + const tnz = ux * halfThickness + for (const t of [0, 0.25, 0.5, 0.75, 1]) { + const bx = start[0] + dx * t + const bz = start[1] + dz * t + if (pointInPolygon(bx + tnx, bz + tnz, polygon)) return true + if (pointInPolygon(bx - tnx, bz - tnz, polygon)) return true + } + } } // Check if midpoint is inside (catches walls crossing through) @@ -762,15 +845,33 @@ export class SpatialGridManager { * Get the slab elevation for a wall by checking if it overlaps with any slab polygon (excluding holes). * Uses wallOverlapsPolygon which handles edge cases (points on boundary, collinear segments). * Returns the highest slab elevation found, or 0 if none. + * + * Accepts an optional `curveOffset` so curved walls evaluate overlap + * against their actual centerline samples, not just the chord. */ - getSlabElevationForWall(levelId: string, start: [number, number], end: [number, number]): number { + getSlabElevationForWall( + levelId: string, + start: [number, number], + end: [number, number], + curveOffset = 0, + thickness = DEFAULT_WALL_THICKNESS, + ): number { const slabMap = this.slabsByLevel.get(levelId) if (!slabMap) return 0 + const wallLike: WallOverlapInput = { start, end, curveOffset, thickness } + const isCurved = curveOffset !== 0 && isCurvedWall(wallLike) + const holeSamplePoints: Array<{ x: number; y: number }> = isCurved + ? sampleWallCenterline(wallLike, 8) + : [0, 0.25, 0.5, 0.75, 1].map((t) => ({ + x: start[0] + (end[0] - start[0]) * t, + y: start[1] + (end[1] - start[1]) * t, + })) + let maxElevation = Number.NEGATIVE_INFINITY for (const slab of slabMap.values()) { if (slab.polygon.length < 3) continue - if (!wallOverlapsPolygon(start, end, slab.polygon)) continue + if (!wallOverlapsPolygon(wallLike, slab.polygon)) continue const holes = slab.holes || [] if (holes.length === 0) { @@ -783,15 +884,11 @@ export class SpatialGridManager { // Sample multiple points along the wall to check whether any portion lies on // solid slab (not inside any hole). Checking only the midpoint fails when the // midpoint falls in a staircase hole but the wall's endpoints are on solid slab. - const dx = end[0] - start[0] - const dz = end[1] - start[1] let hasValidPoint = false - for (const t of [0, 0.25, 0.5, 0.75, 1]) { - const px = start[0] + dx * t - const pz = start[1] + dz * t + for (const sample of holeSamplePoints) { let inHole = false for (const hole of holes) { - if (hole.length >= 3 && pointInPolygon(px, pz, hole)) { + if (hole.length >= 3 && pointInPolygon(sample.x, sample.y, hole)) { inHole = true break } diff --git a/packages/core/src/hooks/spatial-grid/spatial-grid-sync.ts b/packages/core/src/hooks/spatial-grid/spatial-grid-sync.ts index 5825bcb0..ba669c21 100644 --- a/packages/core/src/hooks/spatial-grid/spatial-grid-sync.ts +++ b/packages/core/src/hooks/spatial-grid/spatial-grid-sync.ts @@ -166,7 +166,17 @@ function markNodesOverlappingSlab( if (node.type === 'wall') { const wall = node as WallNode if (resolveLevelId(node, nodes) !== slabLevelId) continue - if (wallOverlapsPolygon(wall.start, wall.end, slab.polygon)) { + if ( + wallOverlapsPolygon( + { + start: wall.start, + end: wall.end, + curveOffset: wall.curveOffset ?? 0, + thickness: wall.thickness, + }, + slab.polygon, + ) + ) { markDirty(node.id) } continue diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 028d449e..080387d1 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -13,6 +13,7 @@ export type { FenceEvent, GridEvent, GuideEvent, + GutterEvent, ItemEvent, LevelEvent, NodeEvent, @@ -105,6 +106,7 @@ export { getEffectiveNode, type LiveNodeOverrides, } from './store/use-live-node-overrides' +export { default as useAlignmentGuides } from './store/use-alignment-guides' export { default as useLiveTransforms, type LiveTransform } from './store/use-live-transforms' export { clearSceneHistory, default as useScene } from './store/use-scene' export { resolveElevatorDispatchTarget } from './systems/elevator/elevator-dispatch' diff --git a/packages/core/src/registry/handles.ts b/packages/core/src/registry/handles.ts index c664a19d..9db7cabd 100644 --- a/packages/core/src/registry/handles.ts +++ b/packages/core/src/registry/handles.ts @@ -22,7 +22,7 @@ // - endpoint-move : wall / fence endpoint drag (snapping is bespoke, // so it delegates to a kind-supplied callback) -import type { AnyNode } from '../schema/types' +import type { AnyNode, AnyNodeId } from '../schema/types' import type { SceneApi } from './types' /** @@ -110,9 +110,30 @@ export type LinearResizeHandle = { anchor: HandleAnchor currentValue: (node: N) => number apply: (node: N, newValue: number, sceneApi: SceneApi) => Partial + /** + * Cross-node redirect. By default the drag's live override + the + * committed write both land on the SELECTED node. When this returns + * another node's id, the editor publishes the override to / commits on + * THAT node instead (and `apply` should return that node's patch). + * Used when a node's handle edits a value owned by a sibling — e.g. a + * downspout's side-move arrows slide its outlet, which lives on the + * host gutter (`gutter.outlets[].offset`). The selected node is still + * what `currentValue` / `apply` receive, so the descriptor can read + * the downspout to find its gutter + outlet. + */ + overrideTarget?: (node: N, sceneApi: SceneApi) => AnyNodeId | undefined min?: number | ((node: N, sceneApi: SceneApi) => number) max?: number | ((node: N, sceneApi: SceneApi) => number) placement: HandlePlacement + /** + * Dimension this handle steers (e.g. `'height'`). When set, the editor + * publishes it to `activeHandleDrag.label` for the duration of the drag + * so out-of-band overlays (the floating dimension pill) can react, and + * the handle's own in-world value chip is suppressed to avoid showing + * the same number twice. Leave unset for handles that keep their inline + * chip and don't drive any external overlay. + */ + measureLabel?: string /** * Defaults to 'self' (arrow lives in the selected node's own mesh). * 'parent' uses the parent mesh — used by doors/windows whose handles @@ -122,6 +143,29 @@ export type LinearResizeHandle = { cursor?: Cursor /** Optional visual guide shown while the arrow is hovered or dragging. */ decoration?: HandleDecoration + /** + * Visual override. Defaults to the standard chevron arrow. + * + * `'tracker'` swaps the chevron for a dashed vertical leader + a small + * cube at `placement.position`. The leader runs from the floor (local + * y=0) up to the cube; the cube is the drag target and reuses the same + * linear-resize drag pipeline as the chevron. Intended for vertical + * height handles where the dashed leader makes the "this is the wall + * top" relationship readable at a glance — mirrors the `corner-picker` + * shape on `tap-action` handles but with a draggable cube instead of a + * one-tap hex disc. Use with `axis: 'y'`; horizontal axes will render + * the leader vertically and look wrong. + */ + shape?: 'arrow' | 'tracker' + /** + * Optional override for the bottom Y of the tracker leader. Defaults + * to 0 (floor of the rideObject's local frame). Use when the value + * being tracked spans a region that doesn't start at the floor — e.g. + * a chimney's body height runs from the roof deck up to the body top, + * so the leader should start at the deck plane and not climb through + * the roof shell below it. Only consulted when `shape === 'tracker'`. + */ + trackerBaseY?: (node: N, sceneApi: SceneApi) => number } /** @@ -176,6 +220,28 @@ export type ArcResizeHandle = { * arrow icon, intended for whole-node rotation handles. */ shape?: 'chevron' | 'rotate' + /** + * Plane the angular drag is measured in: + * - 'horizontal' (default): cursor bearing around +Y — whole-node yaw + * (floor items, elevator, stair, roof-segment). + * - 'node-normal': cursor bearing around the node's local +Z axis, in + * the plane perpendicular to it — spins a wall-mounted item flat + * against its wall. The descriptor's `apply` writes the roll + * component (rotation[2]). The gizmo icon stands up into that plane. + */ + rotationPlane?: 'horizontal' | 'node-normal' + /** + * Pivot point for the angular drag, in the rideObject's local space. + * The renderer measures cursor angle (atan2 on the drag plane) around + * this point — descriptors that write `rotation` should anchor it to + * the node's visual center. Defaults to the rideObject's own origin, + * which is correct for nodes whose mesh origin coincides with the + * field they're rotating (roof-segment, elevator). Use this when the + * node's pose is baked into its geometry (chimney) so the mesh origin + * sits at the parent frame's origin rather than the rotating shape's + * center. + */ + rotationCenter?: (node: N, sceneApi: SceneApi) => readonly [number, number, number] } /** @@ -227,12 +293,54 @@ export type TapActionHandle = { cursor?: Cursor } +/** + * Free ground-plane move. Drag the handle and the node slides across the + * horizontal plane at its base — the renderer raycasts that plane, converts + * the hit into the node's parent-local frame, and reports the new local XZ + * (optionally grid-snapped via `snapExtents`) to `apply`. Press-drag-release + * with the same live-override → commit-on-release flow as the resize / rotate + * handles. Rendered as a 4-way cross of double-headed arrows. + */ +export type TranslateHandle = { + kind: 'translate' + placement: HandlePlacement + /** + * Plane the drag is constrained to (through the node origin): + * - 'horizontal' (default): the ground plane (world-up normal) — slide + * across the floor. The free axes are parent-local X / Z. + * - 'node-normal': the plane perpendicular to the node's local +Z axis + * (its facing direction) — slide across a wall face. The free axes are + * parent-local X / Y; depth (Z) stays pinned to the surface. + */ + plane?: 'horizontal' | 'node-normal' + /** + * `localPos` is the dragged-to position in the node's PARENT-local frame, + * with the two in-plane axes already grid-snapped (if `snapExtents` is set) + * and the off-plane axis pinned to its drag-start value. Return the patch + * that writes it to the node's position field. + */ + apply: ( + initialNode: N, + localPos: readonly [number, number, number], + sceneApi: SceneApi, + ) => Partial + /** + * Optional grid-snap footprint for the two in-plane axes, in order + * `[alongX, alongOther]` — `alongOther` is Z for the 'horizontal' plane and + * Y for 'node-normal'. Used to align the node's edges to the grid (rotation- + * aware: swap the pair at 90°). Omit / return null for free movement. + */ + snapExtents?: (node: N) => readonly [number, number] | null + portal?: HandlePortal +} + export type HandleDescriptor = | LinearResizeHandle | RadialResizeHandle | ArcResizeHandle | EndpointMoveHandle | TapActionHandle + | TranslateHandle /** * Static array, or a function for shape-dependent cases (column diff --git a/packages/core/src/registry/index.ts b/packages/core/src/registry/index.ts index b3226b31..89620866 100644 --- a/packages/core/src/registry/index.ts +++ b/packages/core/src/registry/index.ts @@ -12,6 +12,7 @@ export type { LinearResizeHandle, RadialResizeHandle, TapActionHandle, + TranslateHandle, } from './handles' export { discoverPlugins, @@ -82,6 +83,7 @@ export type { PaintPatchArgs, PaintPreviewArgs, PaintResolveArgs, + ParamAction, ParametricDescriptor, ParamField, ParamGroup, diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts index 5492da86..b498bd9f 100644 --- a/packages/core/src/registry/types.ts +++ b/packages/core/src/registry/types.ts @@ -410,6 +410,14 @@ export type FloorplanGeometry = angle: number affordance: string payload?: unknown + /** + * Rotation pivot (plan coords) this handle turns the node around. + * When present, the floor-plan layer draws a live angle wedge + degree + * readout swept from grab to the current pointer bearing during the + * drag — the 2D twin of the 3D rotate gizmo's readout. Emitters that + * already compute the pivot to place the handle should pass it through. + */ + pivot?: FloorplanPoint } /** * Centered length / distance label. Renders as a small rounded @@ -1238,6 +1246,31 @@ export type ParametricDescriptor = { invariants?: ReadonlyArray<(n: N) => Issue[]> derive?: (n: N) => Partial customPanel?: () => Promise<{ default: ComponentType<{ node: N }> }> + /** + * Extra buttons rendered in the inspector's Actions section + * (below Move/Delete). Lets a kind declare "do this thing to the + * current node" affordances without escaping to a full custom + * panel. Buttons whose `enabledIf` returns false stay disabled. + */ + actions?: ParamAction[] + /** + * Lazy-loaded React subsection rendered AFTER the auto-derived + * groups and BEFORE the Actions section. Used by kinds that want + * to list their child nodes inline — e.g. the gutter's downspout + * list with an "Add Downspout" button at the bottom, same shape as + * the roof panel's gutter / vent lists. Kind owns the layout; the + * inspector just slots it in. + */ + trailingSection?: () => Promise<{ default: ComponentType<{ node: N }> }> +} + +export type ParamAction = { + label: string + /** Optional asset URL for a leading icon — same shape as palette icons. */ + iconSrc?: string + enabledIf?: (n: N) => boolean + /** Click handler. Receives the current node value at click time. */ + onClick: (n: N) => void } export type ParamGroup = { diff --git a/packages/core/src/schema/index.ts b/packages/core/src/schema/index.ts index 8d773292..0dd705d6 100644 --- a/packages/core/src/schema/index.ts +++ b/packages/core/src/schema/index.ts @@ -50,13 +50,16 @@ export { ColumnStyle, ColumnSupportStyle, } from './nodes/column' +export { CupolaNode } from './nodes/cupola' export { DoorNode, DoorSegment } from './nodes/door' +export { EyebrowVentNode } from './nodes/eyebrow-vent' export { DormerNode, type DormerSurfaceMaterialRole, type DormerSurfaceMaterialSpec, getEffectiveDormerSurfaceMaterial, } from './nodes/dormer' +export { DownspoutNode } from './nodes/downspout' export { ElevatorDoorPanelStyle, ElevatorDoorStyle, @@ -65,6 +68,7 @@ export { } from './nodes/elevator' export { FenceBaseStyle, FenceNode, FenceStyle } from './nodes/fence' export { GuideNode, GuideScaleReference } from './nodes/guide' +export { GutterNode, GutterOutlet } from './nodes/gutter' export type { AnimationEffect, Asset, @@ -133,6 +137,7 @@ export { } from './nodes/stair' export { AttachmentSide, StairSegmentNode, StairSegmentType } from './nodes/stair-segment' export { SurfaceHoleMetadata } from './nodes/surface-hole-metadata' +export { TurbineVentNode } from './nodes/turbine-vent' export type { WallSurfaceMaterialSpec, WallSurfaceSide } from './nodes/wall' export { getEffectiveWallSurfaceMaterial, diff --git a/packages/core/src/schema/material.ts b/packages/core/src/schema/material.ts index 90e864f4..da82b68b 100644 --- a/packages/core/src/schema/material.ts +++ b/packages/core/src/schema/material.ts @@ -57,6 +57,10 @@ export const MaterialTarget = z.enum([ 'dormer', 'box-vent', 'ridge-vent', + 'turbine-vent', + 'cupola', + 'eyebrow-vent', + 'gutter', ]) export type MaterialTarget = z.infer diff --git a/packages/core/src/schema/nodes/box-vent.ts b/packages/core/src/schema/nodes/box-vent.ts index af6e9d94..23e27a59 100644 --- a/packages/core/src/schema/nodes/box-vent.ts +++ b/packages/core/src/schema/nodes/box-vent.ts @@ -37,10 +37,10 @@ export const BoxVentNode = BaseNode.extend({ // cap's flange. Reads as the ventilation slot on real attic vents. // 0 = cap sits flush on the body (the original cap shape). capGap: z.number().default(0), - // `dome`-only: radial decay of the dome cap. 1 = perfect ellipsoid, - // <1 = soft pillow (wider for longer near the apex). Ignored by - // `box` / `cap`. - domeCurvature: z.number().default(0.65), + // `dome`-only: radial decay of the dome cap. 1 = clean ellipsoid + // (default — reads as a proper hemispherical dome), <1 = fuller pillow, + // >1 = pointier. Ignored by `box` / `cap`. + domeCurvature: z.number().default(1.0), // `box`-only: how much the lower (smaller) riser is inset from the // upper (larger) cover. 0 = same footprint as the cover. baseInset: z.number().default(0.06), diff --git a/packages/core/src/schema/nodes/cupola.ts b/packages/core/src/schema/nodes/cupola.ts new file mode 100644 index 00000000..6e8c12a7 --- /dev/null +++ b/packages/core/src/schema/nodes/cupola.ts @@ -0,0 +1,37 @@ +import dedent from 'dedent' +import { z } from 'zod' +import { BaseNode, nodeType, objectId } from '../base' +import { MaterialSchema } from '../material' + +export const CupolaNode = BaseNode.extend({ + id: objectId('cupola'), + type: nodeType('cupola'), + + material: MaterialSchema.optional(), + // Default to the white preset so a freshly-placed cupola reads as clean + // painted metal and the paint inspector shows "White" (matches box-vent). + materialPreset: z.string().default('preset-white'), + + roofSegmentId: z.string().optional(), + position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]), + rotation: z.number().default(0), + + // Cupolas are larger than the other vents — a roof lantern, not a cap. + width: z.number().default(0.8), + depth: z.number().default(0.8), + height: z.number().default(1.0), + + // Roof cap shape: `dome` (round) or `pyramid` (four-sided point). + roofStyle: z.enum(['dome', 'pyramid']).default('dome'), + // Decorative post + ball at the apex. + finial: z.boolean().default(true), +}).describe( + dedent` + Cupola — a louvered roof lantern that sits astride a roof ridge or slope: + a louvered body topped by a dome or pyramid roof, optionally crowned with + a finial. Parented to a roof-segment; position is segment-local. Rotation + is around the segment's vertical axis (post-slope tilt). + `, +) + +export type CupolaNode = z.infer diff --git a/packages/core/src/schema/nodes/downspout.ts b/packages/core/src/schema/nodes/downspout.ts new file mode 100644 index 00000000..e3c1de8f --- /dev/null +++ b/packages/core/src/schema/nodes/downspout.ts @@ -0,0 +1,74 @@ +import dedent from 'dedent' +import { z } from 'zod' +import { BaseNode, nodeType, objectId } from '../base' +import { MaterialSchema } from '../material' + +export const DownspoutNode = BaseNode.extend({ + id: objectId('downspout'), + type: nodeType('downspout'), + + material: MaterialSchema.optional(), + // Match the gutter family default — paint inspector reads "White" + // instead of "no material" on a freshly placed downspout. + materialPreset: z.string().default('preset-white'), + + // Logical attachment: the gutter this downspout drains. Scene-graph + // parent is the same roof-segment that hosts the gutter, so the + // renderer can be reached through the segment's children list (like + // every other roof accessory). gutterId then drives the LOOKUP of + // outlet X/Z/diameter — the downspout's actual mount position is + // derived from the gutter, not stored. + gutterId: z.string().optional(), + // Which of the host gutter's `outlets` this downspout drains, by the + // outlet's `id`. The mount position, bore, and cross-section shape are + // looked up from that outlet — so several downspouts on one gutter no + // longer stack on a single drop. + outletId: z.string().optional(), + + // Length the pipe extends DOWN from the gutter outlet, in metres. + // Default 2.5 m covers a typical residential storey; the placement + // tool can default to the gutter's eave-Y minus building floor on + // commit so the user doesn't have to set it on every drop. + length: z.number().default(2.5), + // Bore diameter, default 0.07 m ≈ 3″ to match the gutter outlet + // default. Larger downspouts are common on commercial gutters. + diameter: z.number().default(0.07), + // Gap between the pipe's wall-facing surface and the wall face, in + // metres. The downspout's offset elbows step it back from the eave + // overhang to the wall; this controls how far proud of the wall it + // sits (real downspouts mount on standoff brackets ~1–2 cm off the + // wall). Larger values pull the run back OUT toward the eave — the + // escape hatch when the auto-routed wall position doesn't match the + // actual wall (overshoots into it). Default 0.02 m. + standoff: z.number().default(0.02), + + // Cross-section shape. 'auto' follows the host gutter's profile (round + // on half-round, rectangular on k-style / box); 'round' / 'rect' + // override it for a mixed look. + shape: z.enum(['auto', 'round', 'rect']).default('auto'), + + // Wall straps clamping the run to the wall. 'band' renders periodic + // bands; 'none' hides them. Spacing is metres between bands. + strapStyle: z.enum(['band', 'none']).default('band'), + strapSpacing: z.number().default(1.8), + + // What happens at the bottom of the run: + // - 'splash': kickout elbow + a splash block on the ground (default) + // - 'kickout': kickout elbow only (e.g. into a drain pipe) + // - 'straight': no kick — runs straight down (into a grade drain) + terminal: z.enum(['splash', 'kickout', 'straight']).default('splash'), +}).describe( + dedent` + Downspout — a vertical pipe that takes water from a gutter outlet + down to ground level. Parented to a roof-segment (scene-graph), + linked to a specific gutter via gutterId for outlet position. + - length: vertical pipe length below the gutter outlet + - diameter: bore diameter; should match the host gutter's outletDiameter + - standoff: gap the pipe sits proud of the wall (pulls the run out toward the eave) + - shape: cross-section (auto follows the gutter profile, or force round / rect) + - strapStyle / strapSpacing: wall straps clamping the run + - terminal: bottom treatment (splash block, kickout only, or straight down) + `, +) + +export type DownspoutNode = z.infer diff --git a/packages/core/src/schema/nodes/eyebrow-vent.ts b/packages/core/src/schema/nodes/eyebrow-vent.ts new file mode 100644 index 00000000..0797882f --- /dev/null +++ b/packages/core/src/schema/nodes/eyebrow-vent.ts @@ -0,0 +1,51 @@ +import dedent from 'dedent' +import { z } from 'zod' +import { BaseNode, nodeType, objectId } from '../base' +import { MaterialSchema } from '../material' + +export const EyebrowVentNode = BaseNode.extend({ + id: objectId('eyebrow-vent'), + type: nodeType('eyebrow-vent'), + + material: MaterialSchema.optional(), + // Default to the white preset so a freshly-placed vent reads as clean + // painted metal and the paint inspector shows "White" (matches box-vent). + materialPreset: z.string().default('preset-white'), + + roofSegmentId: z.string().optional(), + position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]), + rotation: z.number().default(0), + + // `width` is the opening width (left↔right across the louvered face), + // `depth` the front-to-back projection along the roof, `height` the rise. + width: z.number().default(0.5), + depth: z.number().default(0.6), + height: z.number().default(0.3), + + // Body shape: + // - `scoop` : rounded louvered opening that sweeps back and tapers + // into the flashing plate (the classic dormer "eyebrow"). + // - `half-round` : a D-shaped half-round louver vent (flat louvered face, + // semicircular curved top, short body). + // - `slant-box` : a low box with a slanted top and a screened front. + style: z.enum(['scoop', 'half-round', 'slant-box']).default('scoop'), + + // Number of horizontal louver slats across the front opening (0 = open / + // screened only). + louverCount: z.number().int().min(0).max(8).default(3), + + // `slant-box` only: the low rear edge as a fraction of the tall front edge. + // 1 = flat-topped box, lower = the top slopes down more steeply toward the + // back. + backRatio: z.number().min(0.15).max(1).default(0.5), +}).describe( + dedent` + Eyebrow vent — a low roof ventilator with a rounded, louvered front that + sits on a flashing plate. Three styles: a swept "scoop" eyebrow, a D-shaped + "half-round" louver vent, and a "slant-box" hood. Parented to a roof-segment; + position is segment-local. Rotation is around the segment's vertical axis + (post-slope tilt). + `, +) + +export type EyebrowVentNode = z.infer diff --git a/packages/core/src/schema/nodes/gutter.ts b/packages/core/src/schema/nodes/gutter.ts new file mode 100644 index 00000000..d9fbc7e4 --- /dev/null +++ b/packages/core/src/schema/nodes/gutter.ts @@ -0,0 +1,90 @@ +import dedent from 'dedent' +import { z } from 'zod' +import { BaseNode, nodeType, objectId } from '../base' +import { MaterialSchema } from '../material' + +// A single drop outlet drilled in the gutter floor. A gutter can carry +// several so a long run can split between multiple downspouts (each +// downspout links to one outlet via its `outletId`). +export const GutterOutlet = z.object({ + // Stable id the downspout references. Generated with `generateId('outlet')`. + id: z.string(), + // Position along the gutter length (gutter-local +X), signed from the + // CENTER. The geometry clamps it inside the end caps at build time, so + // a stored value that no longer fits just rides the nearest bound. + offset: z.number().default(0), + // Bore diameter of this drop. Default 0.07 m ≈ 3″. The cross-section + // SHAPE (round vs rectangular) follows the gutter's profile, not this. + diameter: z.number().default(0.07), +}) +export type GutterOutlet = z.infer + +export const GutterNode = BaseNode.extend({ + id: objectId('gutter'), + type: nodeType('gutter'), + + material: MaterialSchema.optional(), + // White preset by default — matches the rest of the roof accessory + // family (box-vent / ridge-vent) so the paint inspector reads as + // "White" instead of "no material" on a freshly-placed gutter. + materialPreset: z.string().default('preset-white'), + + roofSegmentId: z.string().optional(), + // Segment-local. The placement tool snaps to the eave line (Z = + // +depth/2, Y = wallHeight) of the segment under the cursor; X is + // wherever the user clicked. After placement the inspector + length + // handles can shift X along the eave. + position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]), + // Rotation around the gutter's own local Y. Kept at 0 by default + // because the gutter's length axis is constrained to the eave + // direction (segment-local +X) — but exposed in case the user wants + // to tilt for a custom run. + rotation: z.number().default(0), + + // Length along the eave (gutter-local +X). + length: z.number().default(2.0), + // Profile size — the vertical drop of the U-channel below the eave + // line. 5″ (0.127 m) is the most common residential gutter size; 6″ + // (0.152 m) is the common commercial / heavy-duty size. Default + // rounds the residential value to 0.13 m. + size: z.number().default(0.13), + // Wall thickness of the U-channel. Visible on the rim from above; too + // thin reads as a paper strip, too thick reads as a curb. + thickness: z.number().default(0.006), + + profile: z.enum(['k-style', 'half-round', 'box']).default('k-style'), + + // End caps close the open ends of the U-channel so water can't run + // out the sides. Independent per-end because a downspout typically + // joins the gutter at one end while the other stays capped. Default + // true on both — matches a freshly-installed residential gutter. + endCapLeft: z.boolean().default(true), + endCapRight: z.boolean().default(true), + + // Hangers are the metal straps that hold the gutter onto the + // fascia. 'strap' renders periodic bars across the rim; 'none' + // hides them (some plastic gutters use hidden clips). Spacing is + // metres between hanger centers; real residential code is roughly + // 0.6 m for snow-load areas, 0.75 m elsewhere. + hangerStyle: z.enum(['strap', 'none']).default('strap'), + hangerSpacing: z.number().default(0.6), + + // Downspout outlets — short drop tubes descending from the gutter + // floor where downspouts connect. Empty by default so existing + // gutters don't sprout outlets on schema upgrade. Each is drilled + // through the trough floor via CSG; a downspout links to one by id. + outlets: z.array(GutterOutlet).default([]), +}).describe( + dedent` + Gutter — a rain-water channel running along the eave of a roof + segment. Parented to a roof-segment; position is segment-local. + - length: span along the eave (gutter-local +X) + - size: profile drop below the eave line (vertical extent) + - profile: k-style (ogee fascia), half-round, or square box + - endCapLeft / endCapRight: close the trough at gutter-local -X / +X + - hangerStyle / hangerSpacing: visible metal straps across the rim + - outlets: drop-tube outlets (id + along-length offset + bore diameter) + `, +) + +export type GutterNode = z.infer diff --git a/packages/core/src/schema/nodes/ridge-vent.ts b/packages/core/src/schema/nodes/ridge-vent.ts index 1ca6917d..9a7dce48 100644 --- a/packages/core/src/schema/nodes/ridge-vent.ts +++ b/packages/core/src/schema/nodes/ridge-vent.ts @@ -18,7 +18,9 @@ export const RidgeVentNode = BaseNode.extend({ length: z.number().default(2.0), width: z.number().default(0.3), - height: z.number().default(0.08), + // Taller default than the old paper-thin shell so the solid body reads + // with real presence on the ridge; still adjustable down to 0.03. + height: z.number().default(0.1), style: z.enum(['standard', 'shingled', 'metal']).default('standard'), endCaps: z.boolean().default(true), diff --git a/packages/core/src/schema/nodes/roof-segment.ts b/packages/core/src/schema/nodes/roof-segment.ts index 22f9f6c1..d6e8f56b 100644 --- a/packages/core/src/schema/nodes/roof-segment.ts +++ b/packages/core/src/schema/nodes/roof-segment.ts @@ -97,7 +97,7 @@ export const RoofSegmentNode = BaseNode.extend({ .max(0.9) .default(ROOF_SHAPE_DEFAULTS.dutchHipHeightRatio), // Hosted accessories — chimney, dormer, skylight, box-vent, - // ridge-vent, solar-panel. Each accessory's `parentId` points back + // ridge-vent, solar-panel, gutter. Each accessory's `parentId` points back // here; the segment renderer mounts them recursively via // `` so they inherit the segment's transform stack. // Required for `createNode(child, segmentId)` to append the child diff --git a/packages/core/src/schema/nodes/turbine-vent.ts b/packages/core/src/schema/nodes/turbine-vent.ts new file mode 100644 index 00000000..d828fe4c --- /dev/null +++ b/packages/core/src/schema/nodes/turbine-vent.ts @@ -0,0 +1,50 @@ +import dedent from 'dedent' +import { z } from 'zod' +import { BaseNode, nodeType, objectId } from '../base' +import { MaterialSchema } from '../material' + +export const TurbineVentNode = BaseNode.extend({ + id: objectId('tvent'), + type: nodeType('turbine-vent'), + + material: MaterialSchema.optional(), + // Default to the white preset so a freshly-placed turbine reads as + // clean painted/galvanised metal and the paint inspector shows "White" + // as the current selection (matches box-vent's reasoning). + materialPreset: z.string().default('preset-white'), + + roofSegmentId: z.string().optional(), + position: z.tuple([z.number(), z.number(), z.number()]).default([0, 0, 0]), + rotation: z.number().default(0), + + // Overall diameter of the spinning head at its widest point. + diameter: z.number().default(0.32), + // Total height from the flange base to the top knob. + height: z.number().default(0.42), + // Height of the throat cylinder between the flange and the head. The + // head occupies the remaining `height - neckHeight`. + neckHeight: z.number().default(0.09), + // How far the flange flashing flares past the throat on every side. + baseOverhang: z.number().default(0.05), + // Number of curved vanes around the head. More vanes read denser / + // finer; fewer read as a chunkier industrial turbine. + vaneCount: z.number().int().default(20), + // Idle spin speed in radians/second. 0 = static (the head holds still), + // which is the default — a newly-placed turbine starts paused and is set + // spinning via the panel's Play toggle or the Spin Speed slider. Driven by + // the renderer's `useFrame`, not stored per-frame. + spinSpeed: z.number().default(0), + + // `globe` → classic spherical whirlybird (bulged barrel + domed top) + // `cylinder`→ straight-barrel turbine with a flat disc top + style: z.enum(['globe', 'cylinder']).default('globe'), +}).describe( + dedent` + Turbine vent (whirlybird) — a wind-driven spinning exhaust vent that + sits on a roof slope. A finned head spins on a throat above a flange. + Parented to a roof-segment; position is segment-local. Rotation is + around the segment's vertical axis (post-slope tilt). + `, +) + +export type TurbineVentNode = z.infer diff --git a/packages/core/src/schema/types.ts b/packages/core/src/schema/types.ts index 1c27dd07..b866f4e6 100644 --- a/packages/core/src/schema/types.ts +++ b/packages/core/src/schema/types.ts @@ -4,11 +4,15 @@ import { BuildingNode } from './nodes/building' import { CeilingNode } from './nodes/ceiling' import { ChimneyNode } from './nodes/chimney' import { ColumnNode } from './nodes/column' +import { CupolaNode } from './nodes/cupola' import { DoorNode } from './nodes/door' import { DormerNode } from './nodes/dormer' +import { DownspoutNode } from './nodes/downspout' import { ElevatorNode } from './nodes/elevator' +import { EyebrowVentNode } from './nodes/eyebrow-vent' import { FenceNode } from './nodes/fence' import { GuideNode } from './nodes/guide' +import { GutterNode } from './nodes/gutter' import { ItemNode } from './nodes/item' import { LevelNode } from './nodes/level' import { RidgeVentNode } from './nodes/ridge-vent' @@ -23,6 +27,7 @@ import { SolarPanelNode } from './nodes/solar-panel' import { SpawnNode } from './nodes/spawn' import { StairNode } from './nodes/stair' import { StairSegmentNode } from './nodes/stair-segment' +import { TurbineVentNode } from './nodes/turbine-vent' import { WallNode } from './nodes/wall' import { WindowNode } from './nodes/window' import { ZoneNode } from './nodes/zone' @@ -51,10 +56,15 @@ export const AnyNode = z.discriminatedUnion('type', [ DoorNode, BoxVentNode, RidgeVentNode, + TurbineVentNode, + CupolaNode, + EyebrowVentNode, + GutterNode, ChimneyNode, SolarPanelNode, SkylightNode, DormerNode, + DownspoutNode, ]) export type AnyNode = z.infer diff --git a/packages/core/src/services/alignment.test.ts b/packages/core/src/services/alignment.test.ts new file mode 100644 index 00000000..3fa8aaaa --- /dev/null +++ b/packages/core/src/services/alignment.test.ts @@ -0,0 +1,87 @@ +import { describe, expect, test } from 'bun:test' +import { type AlignmentAnchor, bboxAnchors, resolveAlignment } from './alignment' + +function center(nodeId: string, x: number, z: number): AlignmentAnchor { + return { nodeId, kind: 'center', x, z } +} + +describe('resolveAlignment', () => { + test('returns empty when no candidates within threshold', () => { + const result = resolveAlignment({ + moving: [center('m', 0, 0)], + candidates: [center('a', 1, 1)], + threshold: 0.5, + }) + expect(result.guides).toEqual([]) + expect(result.snap).toBeNull() + }) + + test('snaps moving anchor onto candidate X when within threshold', () => { + const result = resolveAlignment({ + moving: [center('m', 0.03, 5)], + candidates: [center('a', 0, 2)], + threshold: 0.1, + }) + expect(result.snap).toEqual({ dx: -0.03, dz: 0 }) + expect(result.guides).toHaveLength(1) + expect(result.guides[0]!.axis).toBe('x') + expect(result.guides[0]!.coord).toBe(0) + expect(result.guides[0]!.from.z).toBe(2) + expect(result.guides[0]!.to.z).toBe(5) + }) + + test('snaps both axes when both match', () => { + const result = resolveAlignment({ + moving: [center('m', 0.03, 0.04)], + candidates: [center('a', 0, 0)], + threshold: 0.1, + }) + expect(result.snap).toEqual({ dx: -0.03, dz: -0.04 }) + expect(result.guides).toHaveLength(2) + }) + + test('picks closest candidate per axis', () => { + const result = resolveAlignment({ + moving: [center('m', 0.08, 0)], + candidates: [center('a', 0, 5), center('b', 0.1, 5), center('c', 0.05, 10)], + threshold: 0.1, + }) + // |0.1 - 0.08| = 0.02 wins over |0.05 - 0.08| = 0.03 and |0 - 0.08| = 0.08 + expect(result.snap?.dx).toBeCloseTo(0.02, 10) + expect(result.guides[0]!.candidateNodeId).toBe('b') + }) + + test('threshold = 0 disables alignment', () => { + const result = resolveAlignment({ + moving: [center('m', 0, 0)], + candidates: [center('a', 0, 0)], + threshold: 0, + }) + expect(result.guides).toEqual([]) + expect(result.snap).toBeNull() + }) + + test('distance is the perpendicular gap to the matched axis', () => { + const result = resolveAlignment({ + moving: [center('m', 0.02, 3)], + candidates: [center('a', 0, 0)], + threshold: 0.1, + }) + // After snap: moving at (0, 3). X guide runs along x=0 from z=0 to z=3. + expect(result.guides[0]!.distance).toBeCloseTo(3, 10) + }) +}) + +describe('bboxAnchors', () => { + test('returns 9 anchors with correct kinds and positions', () => { + const anchors = bboxAnchors('node', 0, 0, 2, 4) + expect(anchors).toHaveLength(9) + const corners = anchors.filter((a) => a.kind === 'corner') + const edges = anchors.filter((a) => a.kind === 'edge-mid') + const centers = anchors.filter((a) => a.kind === 'center') + expect(corners).toHaveLength(4) + expect(edges).toHaveLength(4) + expect(centers).toHaveLength(1) + expect(centers[0]).toEqual({ nodeId: 'node', kind: 'center', x: 1, z: 2 }) + }) +}) diff --git a/packages/core/src/services/alignment.ts b/packages/core/src/services/alignment.ts new file mode 100644 index 00000000..ce4f8ba6 --- /dev/null +++ b/packages/core/src/services/alignment.ts @@ -0,0 +1,176 @@ +/** + * Pure alignment-guide resolver — no React, no DOM, no scene access. + * + * Given a moving object's anchor points at its proposed position and a + * pool of candidate anchors from nearby static objects, returns: + * - the best per-axis matches as `Guide` rendering primitives, and + * - an optional `{ dx, dz }` snap delta the caller can apply. + * + * Anchors are 2D points on the floor plane (XZ, in world meters). The + * resolver picks at most one match per axis: the smallest |Δx| match + * snaps X; the smallest |Δz| match snaps Z. This mirrors Figma's + * behaviour — guides appear along the matched axes, regardless of how + * many neighbours could have matched. + * + * Two guides max per call keeps the visual signal sharp at the cost of + * not surfacing every possible alignment at once. Multi-guide ("this + * lines up with three things") is intentionally out of scope for v1. + */ + +export type AnchorKind = 'corner' | 'edge-mid' | 'center' + +export type AlignmentAnchor = { + /** Owning node id — informational; resolver does not use it. */ + nodeId: string + kind: AnchorKind + x: number + z: number +} + +export type AlignmentGuideAxis = 'x' | 'z' + +/** + * Rendering primitive — a guide line on the floor plane. + * + * `axis === 'x'`: vertical guide. Both endpoints share `coord` as their X. + * `axis === 'z'`: horizontal guide. Both endpoints share `coord` as their Z. + * + * The line spans from the matched candidate anchor to the moving anchor + * after snap. Renderers extend visually beyond the endpoints if they want + * Figma-style "infinite line" feel. + */ +export type AlignmentGuide = { + axis: AlignmentGuideAxis + coord: number + from: { x: number; z: number } + to: { x: number; z: number } + movingAnchorKind: AnchorKind + candidateAnchorKind: AnchorKind + candidateNodeId: string + /** Perpendicular distance between the two anchors (used by the distance pill). */ + distance: number +} + +export type ResolveAlignmentInput = { + /** Anchors of the moving node, positioned at the proposed (pre-snap) location. */ + moving: readonly AlignmentAnchor[] + /** Anchors from every other candidate node the caller has already filtered. */ + candidates: readonly AlignmentAnchor[] + /** + * Max |Δ| (meters) for an anchor pair to count as a match. Typically + * derived from a screen-pixel budget × current units-per-pixel so the + * snap feel is zoom-invariant. + */ + threshold: number +} + +export type ResolveAlignmentResult = { + guides: AlignmentGuide[] + /** + * Delta the caller should add to the moving node's planar position so + * its anchors land on the matched axes. `null` when no axis matched. + */ + snap: { dx: number; dz: number } | null +} + +const EMPTY: ResolveAlignmentResult = { guides: [], snap: null } + +export function resolveAlignment(input: ResolveAlignmentInput): ResolveAlignmentResult { + const { moving, candidates, threshold } = input + if (threshold <= 0 || moving.length === 0 || candidates.length === 0) return EMPTY + + // Best match per axis: smallest |Δ| across all (moving, candidate) pairs. + // Tie-break by candidate anchor kind priority (center > edge-mid > corner) + // so visually meaningful matches win when |Δ| is equal. + let bestX: { delta: number; m: AlignmentAnchor; c: AlignmentAnchor } | null = null + let bestZ: { delta: number; m: AlignmentAnchor; c: AlignmentAnchor } | null = null + + for (const m of moving) { + for (const c of candidates) { + const dx = c.x - m.x + const dz = c.z - m.z + const adx = Math.abs(dx) + const adz = Math.abs(dz) + if (adx <= threshold && (bestX === null || adx < Math.abs(bestX.delta))) { + bestX = { delta: dx, m, c } + } + if (adz <= threshold && (bestZ === null || adz < Math.abs(bestZ.delta))) { + bestZ = { delta: dz, m, c } + } + } + } + + if (!bestX && !bestZ) return EMPTY + + const dxSnap = bestX?.delta ?? 0 + const dzSnap = bestZ?.delta ?? 0 + const guides: AlignmentGuide[] = [] + + if (bestX) { + // X-axis match: vertical guide at x = bestX.c.x. The moving anchor + // ends up at (c.x, m.z + dzSnap). Span the line between them. + const snappedMz = bestX.m.z + dzSnap + const z1 = Math.min(bestX.c.z, snappedMz) + const z2 = Math.max(bestX.c.z, snappedMz) + guides.push({ + axis: 'x', + coord: bestX.c.x, + from: { x: bestX.c.x, z: z1 }, + to: { x: bestX.c.x, z: z2 }, + movingAnchorKind: bestX.m.kind, + candidateAnchorKind: bestX.c.kind, + candidateNodeId: bestX.c.nodeId, + distance: Math.abs(snappedMz - bestX.c.z), + }) + } + + if (bestZ) { + const snappedMx = bestZ.m.x + dxSnap + const x1 = Math.min(bestZ.c.x, snappedMx) + const x2 = Math.max(bestZ.c.x, snappedMx) + guides.push({ + axis: 'z', + coord: bestZ.c.z, + from: { x: x1, z: bestZ.c.z }, + to: { x: x2, z: bestZ.c.z }, + movingAnchorKind: bestZ.m.kind, + candidateAnchorKind: bestZ.c.kind, + candidateNodeId: bestZ.c.nodeId, + distance: Math.abs(snappedMx - bestZ.c.x), + }) + } + + return { guides, snap: { dx: dxSnap, dz: dzSnap } } +} + +// ─── Anchor extractors (pure) ───────────────────────────────────────── + +/** + * Produces the 9 standard anchors for an axis-aligned bounding box on the + * floor plane: 4 corners, 4 edge midpoints, 1 center. Suitable for any + * floor-plan entity whose footprint can be expressed as a bbox. + * + * Caller is responsible for computing the bbox — the resolver doesn't + * care how (per-kind dimensions, SVG getBBox(), etc.). + */ +export function bboxAnchors( + nodeId: string, + minX: number, + minZ: number, + maxX: number, + maxZ: number, +): AlignmentAnchor[] { + const cx = (minX + maxX) / 2 + const cz = (minZ + maxZ) / 2 + return [ + { nodeId, kind: 'corner', x: minX, z: minZ }, + { nodeId, kind: 'corner', x: maxX, z: minZ }, + { nodeId, kind: 'corner', x: maxX, z: maxZ }, + { nodeId, kind: 'corner', x: minX, z: maxZ }, + { nodeId, kind: 'edge-mid', x: cx, z: minZ }, + { nodeId, kind: 'edge-mid', x: maxX, z: cz }, + { nodeId, kind: 'edge-mid', x: cx, z: maxZ }, + { nodeId, kind: 'edge-mid', x: minX, z: cz }, + { nodeId, kind: 'center', x: cx, z: cz }, + ] +} diff --git a/packages/core/src/services/index.ts b/packages/core/src/services/index.ts index ac4826f8..bb0cffe8 100644 --- a/packages/core/src/services/index.ts +++ b/packages/core/src/services/index.ts @@ -1,3 +1,13 @@ +export { + type AlignmentAnchor, + type AlignmentGuide, + type AlignmentGuideAxis, + type AnchorKind, + bboxAnchors, + resolveAlignment, + type ResolveAlignmentInput, + type ResolveAlignmentResult, +} from './alignment' export { createDragSession, type DragSession, diff --git a/packages/core/src/store/use-alignment-guides.ts b/packages/core/src/store/use-alignment-guides.ts new file mode 100644 index 00000000..ae4991fb --- /dev/null +++ b/packages/core/src/store/use-alignment-guides.ts @@ -0,0 +1,21 @@ +// Ephemeral store for Figma-style alignment guides published during a +// move / placement drag. The producer (a tool or move overlay) writes +// guides on pointermove; the renderer (a 2D / 3D guide layer) subscribes +// and draws them. Both sides clear on commit, cancel, and unmount. + +import { create } from 'zustand' +import type { AlignmentGuide } from '../services/alignment' + +type AlignmentGuidesState = { + guides: AlignmentGuide[] + set(guides: AlignmentGuide[]): void + clear(): void +} + +const useAlignmentGuides = create((set) => ({ + guides: [], + set: (guides) => set({ guides }), + clear: () => set({ guides: [] }), +})) + +export default useAlignmentGuides diff --git a/packages/editor/src/components/editor-2d/floorplan-alignment-guide-layer.tsx b/packages/editor/src/components/editor-2d/floorplan-alignment-guide-layer.tsx new file mode 100644 index 00000000..5244e9f4 --- /dev/null +++ b/packages/editor/src/components/editor-2d/floorplan-alignment-guide-layer.tsx @@ -0,0 +1,137 @@ +'use client' + +import { useAlignmentGuides } from '@pascal-app/core' +import { memo } from 'react' +import { useFloorplanRender } from './floorplan-render-context' + +/** + * Figma-style alignment guides for the 2D floor plan. + * + * Subscribes to `useAlignmentGuides` — populated by + * `FloorplanRegistryMoveOverlay` (Path 2) during a generic free-translate + * drag. Each guide renders as a red line between the moving and matched + * candidate anchors with small `×` end-caps. A distance pill is drawn at + * the line's midpoint when the perpendicular gap is non-zero. + * + * Stroke widths and handle radii are scaled by `unitsPerPixel` so they + * stay a constant size on screen no matter the zoom. Text labels are + * counter-rotated by `sceneRotationDeg` so they read upright even when + * the building rotation rotates the scene ``. + * + * Mounted inside the `data-floorplan-scene` group so coordinates match + * world meters 1:1 with the rest of the floor plan. + */ +export const FloorplanAlignmentGuideLayer = memo(function FloorplanAlignmentGuideLayer() { + const guides = useAlignmentGuides((s) => s.guides) + const ctx = useFloorplanRender() + + if (guides.length === 0) return null + + const upp = ctx?.unitsPerPixel ?? 0.01 + const sceneRot = ctx?.sceneRotationDeg ?? 0 + + // Pixel-budgeted sizes converted to world meters so visuals stay + // constant across zoom. Numbers picked to mirror Figma's snap chrome. + const stroke = 1 * upp + const xCapSize = 4 * upp + const pillFontSize = 11 * upp + const pillPadX = 5 * upp + const pillPadY = 3 * upp + const pillRadius = 3 * upp + const pillOffset = 8 * upp + + const color = '#ef4444' // tailwind red-500 — matches Figma's snap red + + return ( + + {guides.map((guide, i) => { + const { from, to, axis } = guide + const midX = (from.x + to.x) / 2 + const midZ = (from.z + to.z) / 2 + const distMeters = guide.distance + + // Pill placed offset perpendicular to the guide's axis so it + // doesn't sit on top of the line itself. For an X-axis guide + // (vertical line) we offset along Z; for a Z-axis guide we + // offset along X. + const pillX = axis === 'x' ? midX + pillOffset : midX + const pillZ = axis === 'z' ? midZ + pillOffset : midZ + const distLabel = formatMeters(distMeters) + const charWidth = pillFontSize * 0.55 + const pillWidth = distLabel.length * charWidth + pillPadX * 2 + const pillHeight = pillFontSize + pillPadY * 2 + + return ( + + + + + {distMeters > 1e-4 && ( + // Counter-rotate the pill so it stays upright when the + // scene `` is rotated by building rotation. SVG's + // `transform` runs in the local coord system, so the + // rotation pivots around the pill's center. + + + + {distLabel} + + + )} + + ) + })} + + ) +}) + +function XCap({ + color, + size, + stroke, + x, + y, +}: { + color: string + size: number + stroke: number + x: number + y: number +}) { + return ( + + + + + ) +} + +function formatMeters(meters: number): string { + // Sub-centimetre = "0". Otherwise show with up to 2 decimals, trimmed. + if (meters < 0.005) return '0' + const fixed = meters.toFixed(2) + return `${fixed.replace(/\.?0+$/, '')}m` +} diff --git a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx index 43353470..67da92ef 100644 --- a/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx +++ b/packages/editor/src/components/editor-2d/floorplan-registry-move-overlay.tsx @@ -1,13 +1,17 @@ 'use client' import { + type AlignmentAnchor, type AnyNode, type AnyNodeId, + bboxAnchors, type FloorplanMoveTargetSession, nodeRegistry, pauseSceneHistory, + resolveAlignment, resumeSceneHistory, snapPointToGrid, + useAlignmentGuides, useLiveNodeOverrides, useLiveTransforms, useScene, @@ -20,6 +24,12 @@ 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 +// the SVG's units-per-pixel so the feel stays constant across zoom. +const ALIGNMENT_THRESHOLD_M = 0.08 + /** * Cursor-driven placement for registered kinds in the floor plan. * @@ -374,6 +384,24 @@ export function FloorplanRegistryMoveOverlay() { } ).position ?? [0, 0, 0]) as [number, number, number] + // SVG units in this floorplan map 1:1 to world meters, and the + // `` entry has no transform of its own when at rest, + // so its untransformed bbox IS the world-space footprint. Cache the + // moving entry's local bbox once (relative to originalPosition) and + // derive anchors at any proposed (sx, sz) by translating it. + const movingLocalBBox = entry.getBBox() + const candidateAnchors: AlignmentAnchor[] = [] + const allEntries = scene.querySelectorAll('[data-node-id]') + for (const el of Array.from(allEntries)) { + const otherId = el.getAttribute('data-node-id') + if (!otherId || otherId === movingNode.id) continue + const b = (el as SVGGraphicsElement).getBBox() + if (b.width <= 0 || b.height <= 0) continue + candidateAnchors.push( + ...bboxAnchors(otherId, b.x, b.y, b.x + b.width, b.y + b.height), + ) + } + let lastSnapped: [number, number] | null = null const onMove = (event: PointerEvent) => { @@ -384,11 +412,49 @@ export function FloorplanRegistryMoveOverlay() { if (!target?.closest('[data-floorplan-scene]')) return const m = toMeters(event.clientX, event.clientY) if (!m) return - const [sx, sz] = snapPointToGrid([m[0], m[1]], GRID_STEP) - const dx = sx - originalPosition[0] - const dz = sz - originalPosition[2] + + // 1) Grid snap baseline (unchanged behaviour with Alt held). + const [gridX, gridZ] = snapPointToGrid([m[0], m[1]], GRID_STEP) + + // 2) Alignment snap layered on top. Treat the grid-snapped point + // as the "proposed" position so alignment competes from a stable + // base rather than the raw cursor jitter. Alt bypasses alignment + // entirely — same affordance Path 1 advertises in its "No Snap" + // hint chip. + let finalX = gridX + let finalZ = gridZ + if (!event.altKey && candidateAnchors.length > 0) { + // Translate the cached local bbox to the proposed pos to get the + // moving anchors at that location. The entry's untransformed + // bbox is in world meters relative to the node's origin, so a + // simple translate suffices. + const dxProposed = gridX - originalPosition[0] + const dzProposed = gridZ - originalPosition[2] + const movingAnchors = bboxAnchors( + movingNode.id, + movingLocalBBox.x + dxProposed, + movingLocalBBox.y + dzProposed, + movingLocalBBox.x + movingLocalBBox.width + dxProposed, + movingLocalBBox.y + movingLocalBBox.height + dzProposed, + ) + const result = resolveAlignment({ + moving: movingAnchors, + candidates: candidateAnchors, + threshold: ALIGNMENT_THRESHOLD_M, + }) + if (result.snap) { + finalX += result.snap.dx + finalZ += result.snap.dz + } + useAlignmentGuides.getState().set(result.guides) + } else { + useAlignmentGuides.getState().clear() + } + + const dx = finalX - originalPosition[0] + const dz = finalZ - originalPosition[2] entry.setAttribute('transform', `translate(${dx} ${dz})`) - lastSnapped = [sx, sz] + lastSnapped = [finalX, finalZ] } const onPointerUp = (event: PointerEvent) => { @@ -414,12 +480,14 @@ export function FloorplanRegistryMoveOverlay() { } } entry.removeAttribute('transform') + useAlignmentGuides.getState().clear() setMovingNode(null) } const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') { entry.removeAttribute('transform') + useAlignmentGuides.getState().clear() setMovingNode(null) } } @@ -432,6 +500,7 @@ export function FloorplanRegistryMoveOverlay() { window.removeEventListener('pointerup', onPointerUp) window.removeEventListener('keydown', onKey) entry.removeAttribute('transform') + useAlignmentGuides.getState().clear() } }, [isActive, movingNode, setMovingNode, setMovingNodeOrigin, hasMoveTarget, def]) diff --git a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx index 45b9267d..04d53d3d 100644 --- a/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx +++ b/packages/editor/src/components/editor-2d/renderers/floorplan-registry-layer.tsx @@ -7,6 +7,7 @@ import { type FloorplanAffordanceSession, type FloorplanGeometry, type FloorplanPalette, + type FloorplanPoint, type GeometryContext, kindsWithFloorplanScope, nodeRegistry, @@ -85,6 +86,26 @@ type ActiveDrag = { session: FloorplanAffordanceSession snapshots: NodeSnapshot[] historyPaused: boolean + /** + * Set only for rotate-arrow drags (handles that carry a `pivot`). Drives + * the live angle wedge + degree readout — the 2D twin of the 3D rotate + * gizmo's readout. The bearing sweep is measured the same way every + * rotate affordance measures it: `atan2(pointer − pivot)`. + */ + rotation?: { pivot: FloorplanPoint; initialAngle: number; radius: number } +} + +/** + * Transient live-rotation readout state. Rebuilt each pointer-move while a + * rotate-arrow is dragged and cleared on release. World-plan coords. + */ +type RotationOverlayState = { + pivot: FloorplanPoint + startAngle: number + endAngle: number + radius: number + /** Swept magnitude in radians, for the degree chip. */ + sweep: number } function snapshotNode(node: AnyNode): NodeSnapshot { @@ -193,6 +214,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() { const dragRef = useRef(null) const [hoveredHandleId, setHoveredHandleId] = useState(null) const [activeDragId, setActiveDragId] = useState(null) + const [rotationOverlay, setRotationOverlay] = useState(null) const handleSelect = useCallback( (id: AnyNodeId, event: React.PointerEvent) => { @@ -436,6 +458,9 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() { affordance: string, payload: unknown, event: ReactPointerEvent, + // Present only for rotate-arrow handles — the pivot the node turns + // around, used to drive the live angle wedge + degree readout. + rotationPivot?: FloorplanPoint, ) => { if (event.button !== 0) return if (movingNode) return @@ -469,12 +494,28 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() { pauseSceneHistory(useScene) + // Rotation readout setup. The wedge radius tracks the grab distance + // from the pivot (≈ the handle's orbit), nudged inward so the swept + // fill reads as the handle swinging round rather than overlapping it, + // and floored so a tight footprint still shows a legible wedge. + let rotation: ActiveDrag['rotation'] + if (rotationPivot) { + const dx = initialPlanPoint[0] - rotationPivot[0] + const dz = initialPlanPoint[1] - rotationPivot[1] + rotation = { + pivot: rotationPivot, + initialAngle: Math.atan2(dz, dx), + radius: Math.max(Math.hypot(dx, dz) * 0.72, 0.25), + } + } + dragRef.current = { pointerId: event.pointerId, handleId, session, snapshots, historyPaused: true, + rotation, } setActiveDragId(handleId) setSelection({ selectedIds: [nodeId] }) @@ -500,6 +541,30 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() { metaKey: event.metaKey, }, }) + + // Live rotation readout. Sweep from the bearing at grab to the + // current pointer bearing around the pivot — the same measurement + // every rotate affordance applies — and surface it as a wedge + + // degree chip. Suppressed below ~0.5° so a fresh grab doesn't flash + // a zero-width sliver. + const rot = drag.rotation + if (rot) { + const current = Math.atan2(planPoint[1] - rot.pivot[1], planPoint[0] - rot.pivot[0]) + let delta = current - rot.initialAngle + while (delta > Math.PI) delta -= 2 * Math.PI + while (delta < -Math.PI) delta += 2 * Math.PI + if (Math.abs(delta) < 0.0087) { + setRotationOverlay(null) + } else { + setRotationOverlay({ + pivot: rot.pivot, + startAngle: rot.initialAngle, + endAngle: rot.initialAngle + delta, + radius: rot.radius, + sweep: Math.abs(delta), + }) + } + } } const onPointerUp = (event: PointerEvent) => { @@ -524,6 +589,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() { sfxEmitter.emit('sfx:structure-build') dragRef.current = null setActiveDragId(null) + setRotationOverlay(null) return } @@ -574,6 +640,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() { dragRef.current = null setActiveDragId(null) + setRotationOverlay(null) } const onPointerCancel = (event: PointerEvent) => { @@ -595,6 +662,7 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() { dragRef.current = null setActiveDragId(null) + setRotationOverlay(null) } window.addEventListener('pointermove', onPointerMove) @@ -656,8 +724,15 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() { hoveredHandleId={hoveredHandleId} nodeId={id} onHandleHoverChange={setHoveredHandleId} - onHandlePointerDown={(affordance, payload, event) => - startAffordanceDrag(id, makeHandleId(id, payload), affordance, payload, event) + onHandlePointerDown={(affordance, payload, event, rotationPivot) => + startAffordanceDrag( + id, + makeHandleId(id, payload), + affordance, + payload, + event, + rotationPivot, + ) } onMoveHandlePointerDown={(event) => { if (event.button !== 0) return @@ -715,6 +790,16 @@ export const FloorplanRegistryLayer = memo(function FloorplanRegistryLayer() { overlay ? renderEntry(id, overlay, `overlay-${id}`) : null, )} + {/* Transient live-rotation readout — drawn last so the wedge + degree + chip sit above all handle chrome while a rotate-arrow is dragged. */} + {rotationOverlay && palette ? ( + + ) : null} ) }) @@ -747,6 +832,9 @@ function InteractiveGeometry({ affordance: string, payload: unknown, event: ReactPointerEvent, + // Forwarded only by rotate-arrow handles — the pivot the drag turns + // the node around, used to drive the live angle wedge + degree chip. + rotationPivot?: FloorplanPoint, ) => void onMoveHandlePointerDown: (event: ReactPointerEvent) => void }): React.ReactElement { @@ -1010,6 +1098,7 @@ function InteractiveGeometry({ const angleDeg = (g.angle * 180) / Math.PI const affordance = g.affordance const payload = g.payload + const pivot = g.pivot return ( - onHandlePointerDown(affordance, payload, e as ReactPointerEvent) + onHandlePointerDown( + affordance, + payload, + e as ReactPointerEvent, + pivot, + ) } onPointerEnter={() => onHandleHoverChange(handleId)} onPointerLeave={() => onHandleHoverChange(null)} @@ -1047,7 +1141,12 @@ function InteractiveGeometry({ d={`${head1} ${head2}`} fill="transparent" onPointerDown={(e) => - onHandlePointerDown(affordance, payload, e as ReactPointerEvent) + onHandlePointerDown( + affordance, + payload, + e as ReactPointerEvent, + pivot, + ) } onPointerEnter={() => onHandleHoverChange(handleId)} onPointerLeave={() => onHandleHoverChange(null)} @@ -1370,9 +1469,17 @@ function InteractiveGeometry({ const gapStart: [number, number] = [midX - dirX * gapHalf, midY - dirY * gapHalf] const gapEnd: [number, number] = [midX + dirX * gapHalf, midY + dirY * gapHalf] + // Keep the label parallel to the dimension line, but decide the + // 180° flip from the on-SCREEN angle, not the local one. The parent + // `` is rotated by `sceneRotationDeg` (default 90° in the floor + // plan), so a label kept upright in local coords still renders + // upside down for half of the wall orientations. Same fix as the + // `dimension-label` case above. let labelDeg = (Math.atan2(dy, dx) * 180) / Math.PI - if (labelDeg > 90) labelDeg -= 180 - else if (labelDeg <= -90) labelDeg += 180 + let screenDeg = labelDeg + sceneRotationDeg + screenDeg = ((((screenDeg + 180) % 360) + 360) % 360) - 180 + if (screenDeg > 90) labelDeg -= 180 + else if (screenDeg <= -90) labelDeg += 180 return ( @@ -1651,6 +1758,95 @@ function deepEqual(a: unknown, b: unknown): boolean { return false } +const ROTATION_WEDGE_COLOR = '#8381ed' +const ROTATION_WEDGE_SEGMENTS = 48 + +/** + * Live rotation readout for the floor plan — the 2D twin of the 3D rotate + * gizmo's wedge. Draws a filled sector + outline swept from the pointer's + * bearing at grab (`startAngle`) to its current bearing (`endAngle`) around + * the pivot, plus an upright degree chip at the wedge midpoint. All geometry + * is in plan coords; the chip counter-rotates `sceneRotationDeg` so it reads + * horizontally regardless of the building's on-screen orientation. + */ +function RotationAngleOverlay({ + overlay, + palette, + unitsPerPixel, + sceneRotationDeg, +}: { + overlay: RotationOverlayState + palette: FloorplanPalette + unitsPerPixel: number + sceneRotationDeg: number +}): React.ReactElement { + const { pivot, startAngle, endAngle, radius, sweep } = overlay + const span = endAngle - startAngle + const count = Math.max(8, Math.ceil((Math.abs(span) / Math.PI) * ROTATION_WEDGE_SEGMENTS)) + let d = `M ${pivot[0]} ${pivot[1]}` + for (let i = 0; i <= count; i++) { + const a = startAngle + (span * i) / count + d += ` L ${pivot[0] + Math.cos(a) * radius} ${pivot[1] + Math.sin(a) * radius}` + } + d += ' Z' + + const midAngle = startAngle + span / 2 + const labelDist = radius + unitsPerPixel * 14 + const lx = pivot[0] + Math.cos(midAngle) * labelDist + const ly = pivot[1] + Math.sin(midAngle) * labelDist + + const text = `${Math.round((sweep * 180) / Math.PI)}°` + const padX = unitsPerPixel * 6 + const padY = unitsPerPixel * 3 + const fontSize = Math.max(unitsPerPixel * 10, 0.08) + const textWidth = text.length * unitsPerPixel * 6.2 + const plateW = textWidth + padX * 2 + const plateH = fontSize + padY * 2 + + return ( + + + + {/* Counter-rotate the scene transform so the chip stays horizontal. */} + + + + {text} + + + + ) +} + function formatGroupTransform(t?: { translate?: readonly [number, number] rotate?: number diff --git a/packages/editor/src/components/editor/custom-camera-controls.tsx b/packages/editor/src/components/editor/custom-camera-controls.tsx index 543a0c4b..38091ba7 100644 --- a/packages/editor/src/components/editor/custom-camera-controls.tsx +++ b/packages/editor/src/components/editor/custom-camera-controls.tsx @@ -545,12 +545,12 @@ export const CustomCameraControls = () => { } // Preset capture mode frames a single subtree (often a 0.3–2m preset), - // so the default 10m minDistance prevents the user from getting close + // so the default 6m minDistance prevents the user from getting close // enough to compose a good thumbnail. Relax the clamp to 0.5m while // capturing presets; reset on exit so general editing keeps the looser // navigation guardrails. const isPresetCapture = captureMode.mode === 'preset' - const minDistance = isPresetCapture ? 0.5 : 10 + const minDistance = isPresetCapture ? 0.5 : 6 return ( entry.visible) : material.visible } +// 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 +// imported item GLBs using KHR_mesh_quantization or interleaved buffers must be coerced +// to Float32 to match wall/slab geometry. +function toFloat32Attribute(source: THREE.BufferAttribute | THREE.InterleavedBufferAttribute) { + const itemSize = source.itemSize + const array = new Float32Array(source.count * itemSize) + for (let i = 0; i < source.count; i++) { + const offset = i * itemSize + array[offset] = source.getX(i) + if (itemSize > 1) array[offset + 1] = source.getY(i) + if (itemSize > 2) array[offset + 2] = source.getZ(i) + if (itemSize > 3) array[offset + 3] = source.getW(i) + } + return new THREE.BufferAttribute(array, itemSize) +} + function cloneWorldGeometry(mesh: THREE.Mesh) { const sourceGeometry = mesh.geometry const position = sourceGeometry.getAttribute('position') @@ -65,11 +83,11 @@ function cloneWorldGeometry(mesh: THREE.Mesh) { ? sourceGeometry.toNonIndexed() : sourceGeometry.clone() const cleanGeometry = new THREE.BufferGeometry() - cleanGeometry.setAttribute('position', workingGeometry.getAttribute('position').clone()) + cleanGeometry.setAttribute('position', toFloat32Attribute(workingGeometry.getAttribute('position'))) const normal = workingGeometry.getAttribute('normal') if (normal) { - cleanGeometry.setAttribute('normal', normal.clone()) + cleanGeometry.setAttribute('normal', toFloat32Attribute(normal)) } else { cleanGeometry.computeVertexNormals() } diff --git a/packages/editor/src/components/editor/floating-action-menu.tsx b/packages/editor/src/components/editor/floating-action-menu.tsx index efd5691c..ad12e968 100644 --- a/packages/editor/src/components/editor/floating-action-menu.tsx +++ b/packages/editor/src/components/editor/floating-action-menu.tsx @@ -5,10 +5,13 @@ import { type AnyNodeId, type CeilingNode, ColumnNode, + DEFAULT_WALL_HEIGHT, DoorNode, ElevatorNode, FenceNode, generateId, + getWallCurveLength, + getWallThickness, ItemNode, isRegistryMovable, isRegistrySelectable, @@ -19,6 +22,7 @@ import { StairNode, StairSegmentNode, sceneRegistry, + useLiveNodeOverrides, useScene, WallNode, WindowNode, @@ -32,6 +36,7 @@ import { duplicateRoofSubtree } from '../../lib/roof-duplication' import { sfxEmitter } from '../../lib/sfx-bus' import { duplicateStairSubtree } from '../../lib/stair-duplication' import useEditor from '../../store/use-editor' +import { formatMeasurement, MeasurementPill } from './measurement-pill' import { NodeActionMenu } from './node-action-menu' const ALLOWED_TYPES = [ @@ -76,9 +81,10 @@ const MENU_Y_OFFSETS: Record = { door: 0.6, window: 0.6, column: 0.6, - // Fence: clears the height-resize arrow (sits at fence.height + 0.45) - // plus the chevron's own visual size, so the menu floats just above it. - fence: 1.05, + // Fence: still clears the height-resize arrow (sits at fence.height + + // 0.45) plus the chevron's visual size, but kept low so the menu sits + // close to the fence rather than floating well above it. + fence: 0.7, // Elevator: clears the cab-height arrow which sits above the SHAFT // top (resolved through level entries), so the menu floats above it. elevator: 0.9, @@ -105,6 +111,32 @@ function getMenuYOffset(node: AnyNode | null): number { return (MENU_Y_OFFSETS[node.type] ?? MENU_Y_OFFSET_DEFAULT) + EXTRA_MENU_LIFT } +// Fence schema defaults — mirror packages/nodes/src/fence/definition.ts so the +// pill reads sensibly before an explicit height / thickness is set. +const FENCE_DEFAULT_HEIGHT = 1.8 +const FENCE_DEFAULT_THICKNESS = 0.08 + +// Dimensions for the height-drag pill. Walls and fences both carry +// start/end/curveOffset, so getWallCurveLength covers length for either. +function getHeightPillDimensions(node: WallNode | FenceNode): { + height: number + length: number + thickness: number +} { + if (node.type === 'wall') { + return { + height: node.height ?? DEFAULT_WALL_HEIGHT, + length: getWallCurveLength(node), + thickness: getWallThickness(node), + } + } + return { + height: node.height ?? FENCE_DEFAULT_HEIGHT, + length: getWallCurveLength(node), + thickness: node.thickness ?? FENCE_DEFAULT_THICKNESS, + } +} + export function FloatingActionMenu() { const selectedIds = useViewer((s) => s.selection.selectedIds) const updateNode = useScene((s) => s.updateNode) @@ -118,9 +150,31 @@ export function FloatingActionMenu() { const setCurvingFence = useEditor((s) => s.setCurvingFence) const setSelection = useViewer((s) => s.setSelection) const setEditingHole = useEditor((s) => s.setEditingHole) + const unit = useViewer((s) => s.unit) + // Drives the height-drag dimension pill below the menu. `activeHandleDrag` + // flips only at drag start / end, so subscribing here is cheap — the live + // height value is written imperatively in the useFrame below. + const activeHandleDrag = useEditor((s) => s.activeHandleDrag) const groupRef = useRef(null) const menuScaleRef = useRef(null) + const pillHeightRef = useRef(null) + + // Cached world anchor. The anchor is derived from `Box3.setFromObject`, + // which traverses the selected object's children — so a node with a + // continuously-animating child (the spinning turbine-vent head) makes the + // AABB wobble a few millimetres every frame, and the menu drifts even with + // a still camera. We instead recompute the box only when the selection, + // the object's world transform, or its geometry actually changes, and + // reuse the cached anchor otherwise. (Also removes a per-frame + // `setFromObject` for every selection.) + const anchorRef = useRef(new THREE.Vector3()) + const hasAnchorRef = useRef(false) + const lastMatrixRef = useRef(new THREE.Matrix4()) + const lastAnchorKeyRef = useRef<{ id: string | null; node: AnyNode | null }>({ + id: null, + node: null, + }) // Only show for single selection of specific types const selectedId = selectedIds.length === 1 ? selectedIds[0] : null @@ -135,6 +189,17 @@ export function FloatingActionMenu() { ? ALLOWED_TYPES.includes(node.type) || isRegistrySelectable(node.type) : false + // Height-drag pill: shown just above the menu only while the selected + // wall/fence height arrow is being dragged. Length + thickness are fixed + // during a height drag, so they're computed here; the live height value + // is updated imperatively in the useFrame (same pattern as the scale). + const pillNode = node?.type === 'wall' || node?.type === 'fence' ? node : null + const isHeightDragPill = + pillNode !== null && + activeHandleDrag?.nodeId === selectedId && + activeHandleDrag?.label === 'height' + const pillDims = pillNode ? getHeightPillDimensions(pillNode) : null + // Boolean selector, only re-renders when curving availability actually flips. const canCurveSelectedWall = useScene((s) => { if (!selectedId) return false @@ -169,15 +234,52 @@ export function FloatingActionMenu() { menuScaleRef.current.style.transform = `scale(${scale})` } + // Live height readout for the drag pill. The dragged height lands in + // `useLiveNodeOverrides` (not the scene store) each frame, so read it + // imperatively here instead of forcing a per-frame React re-render. + if ( + pillHeightRef.current && + (node?.type === 'wall' || node?.type === 'fence') && + activeHandleDrag?.nodeId === selectedId && + activeHandleDrag?.label === 'height' + ) { + const override = useLiveNodeOverrides.getState().overrides.get(selectedId) as + | { height?: number } + | undefined + const fallbackHeight = node.type === 'wall' ? DEFAULT_WALL_HEIGHT : FENCE_DEFAULT_HEIGHT + const liveHeight = override?.height ?? node.height ?? fallbackHeight + pillHeightRef.current.textContent = `H ${formatMeasurement(liveHeight, unit)}` + } + const obj = sceneRegistry.nodes.get(selectedId) if (obj) { - // Calculate bounding box in world space - const box = new THREE.Box3().setFromObject(obj) - if (!box.isEmpty()) { - const center = box.getCenter(new THREE.Vector3()) - // Position above the object. Per-type offsets clear each kind's - // in-world chrome (height-resize arrows, measurement labels). - groupRef.current.position.set(center.x, box.max.y + getMenuYOffset(node), center.z) + // Recompute the anchor only when the object genuinely changes — + // reselected, moved (its own world matrix changed), or resized + // (a fresh store node on commit, or a live override / handle drag + // mid-resize). A spinning child changes the head's matrix, not the + // registered group's, so it never triggers a recompute → the menu + // holds still. + const overrideActive = useLiveNodeOverrides.getState().overrides.get(selectedId) != null + const dragActive = activeHandleDrag?.nodeId === selectedId + const selectionChanged = + lastAnchorKeyRef.current.id !== selectedId || lastAnchorKeyRef.current.node !== node + const matrixChanged = !lastMatrixRef.current.equals(obj.matrixWorld) + + if (selectionChanged || matrixChanged || overrideActive || dragActive) { + const box = new THREE.Box3().setFromObject(obj) + if (!box.isEmpty()) { + const center = box.getCenter(new THREE.Vector3()) + // Position above the object. Per-type offsets clear each kind's + // in-world chrome (height-resize arrows, measurement labels). + anchorRef.current.set(center.x, box.max.y + getMenuYOffset(node), center.z) + hasAnchorRef.current = true + } + lastMatrixRef.current.copy(obj.matrixWorld) + lastAnchorKeyRef.current = { id: selectedId, node } + } + + if (hasAnchorRef.current) { + groupRef.current.position.copy(anchorRef.current) } } }) @@ -313,15 +415,22 @@ export function FloatingActionMenu() { } // Duplicate children for stair nodes - } else if (duplicate.type === 'chimney' || duplicate.type === 'dormer') { - // Chimney & dormer use pure drag-to-place: NO node is - // inserted into the scene until the user clicks a roof - // segment. The `setMovingNode` call below hands the clone - // (with `metadata.isNew = true` + no id) to - // `MoveChimneyTool` / `MoveDormerTool`, which call - // `createNode` on the click that commits the placement. - // Skipping the auto-create avoids the "duplicate appears at - // +1 offset before drag" UX the other registry kinds use. + } else if ( + duplicate.type === 'item' || + duplicate.type === 'chimney' || + duplicate.type === 'dormer' + ) { + // Items, chimneys & dormers use pure drag-to-place: NO node is + // inserted into the scene until the user clicks to commit. The + // `setMovingNode` call below hands the clone (with + // `metadata.isNew = true` + no id) to its move tool — + // `MoveItemTool` / `MoveChimneyTool` / `MoveDormerTool` — which + // create a draft and call `createNode` on the commit click. + // Pre-creating here would drop a second copy into the scene + // before any click — the furnish-tab "duplicate auto-places an + // item without clicking" bug. (Item has its own + // draft-committing move tool, so it must skip the generic + // registry auto-create branch below.) } else if (nodeRegistry.has(duplicate.type)) { // Registry-driven kinds: offset the position slightly so the // duplicate doesn't overlap exactly, then create + hand to the @@ -435,7 +544,7 @@ export function FloatingActionMenu() { }} zIndexRange={[100, 0]} > -
+
e.stopPropagation()} onPointerUp={(e) => e.stopPropagation()} /> + {/* Height-drag dimension pill. Absolutely positioned just above + the menu (away from the height arrow below it) so it rides the + same scale transform + anchor, never overlaps the menu, and + needs no menu lift — which is what caused the click flicker. + Non-interactive. */} + {isHeightDragPill && pillDims ? ( +
+ +
+ ) : null}
diff --git a/packages/editor/src/components/editor/floorplan-panel.tsx b/packages/editor/src/components/editor/floorplan-panel.tsx index 965e77af..1abbd6dd 100644 --- a/packages/editor/src/components/editor/floorplan-panel.tsx +++ b/packages/editor/src/components/editor/floorplan-panel.tsx @@ -59,6 +59,7 @@ import { useState, } from 'react' import { createPortal } from 'react-dom' +import { Vector3 } from 'three' import { useShallow } from 'zustand/react/shallow' import { buildFloorplanItemEntry, @@ -73,6 +74,7 @@ import { sfxEmitter } from '../../lib/sfx-bus' import { cn } from '../../lib/utils' import type { GuideUiState } from '../../store/use-editor' import useEditor from '../../store/use-editor' +import { FloorplanAlignmentGuideLayer } from '../editor-2d/floorplan-alignment-guide-layer' import { FloorplanCursorIndicatorOverlay as Editor2dFloorplanCursorIndicatorOverlay } from '../editor-2d/floorplan-cursor-indicator-overlay' import { FloorplanSiteKeyHandler } from '../editor-2d/floorplan-hotkey-handlers' import { FloorplanRegistryActionMenu } from '../editor-2d/floorplan-registry-action-menu' @@ -4516,6 +4518,21 @@ export function FloorplanPanel() { const displaySlabPolygons = useMemo(() => [], []) const ceilingPolygons = useMemo(() => [], []) const displayCeilingPolygons = useMemo(() => [], []) + // Ceilings on the active level, projected to 2D polygons for hit-testing + // ceiling-item placement clicks/moves. The legacy `ceilingPolygons` above + // is intentionally empty (ceilings render via the registry layer); this + // memo is the placement-side counterpart, separate from rendering. + const ceilingHitEntries = useMemo( + () => + ceilings.map((ceiling) => ({ + ceiling, + polygon: toFloorplanPolygon(ceiling.polygon), + holes: (ceiling.holes ?? []) + .map((hole) => toFloorplanPolygon(hole)) + .filter((hole) => hole.length >= 3), + })), + [ceilings], + ) // Zone fully registry-driven via `def.floorplan`. const zonePolygons = useMemo(() => [], []) const displayZonePolygons = useMemo(() => [], []) @@ -4799,6 +4816,18 @@ export function FloorplanPanel() { (mode === 'build' && tool === 'item') || movingNode?.type === 'item' const isFloorItemBuildActive = mode === 'build' && tool === 'item' && !selectedItem?.attachTo const isFloorItemMoveActive = movingNode?.type === 'item' && !movingNode.asset.attachTo + // Ceiling-attached items (lights, fans). The 3D viewer drives these via + // `ceiling:enter/move/click` raycast events on the ceiling mesh; the 2D + // floor plan has no such mesh, so we synthesise the same events when the + // cursor is over a ceiling polygon. Without this the placement system + // never transitions out of `surface: 'floor'` and the draft sits at floor + // height while the 2D cursor moves freely — what the user perceived as + // "2D and 3D positions are out of sync". + const isCeilingItemBuildActive = + mode === 'build' && tool === 'item' && selectedItem?.attachTo === 'ceiling' + const isCeilingItemMoveActive = + movingNode?.type === 'item' && movingNode.asset.attachTo === 'ceiling' + const isCeilingItemPlacementActive = isCeilingItemBuildActive || isCeilingItemMoveActive // Any registry-driven kind whose tool is currently active. Lets the floor // plan emit `grid:click` / `grid:move` events to that kind's placement tool // (shelf today; future Phase 5 kinds the moment they register a `tool`). @@ -7119,6 +7148,7 @@ export function FloorplanPanel() { }, []) const hoveredWallIdRef = useRef(null) + const hoveredCeilingIdRef = useRef(null) const floorplanGridLocalY = useMemo(() => { if (movingNode?.type === 'item' || movingNode?.type === 'spawn') { return movingNode.position[1] @@ -7171,6 +7201,156 @@ export function FloorplanPanel() { [buildingPosition, buildingRotationY, floorplanGridLocalY, floorplanGridWorldY], ) + // Build a synthetic `CeilingEvent` from a 2D plan point so the placement + // coordinator's existing ceiling handlers (which expect the same payload + // shape the 3D raycaster produces) can drive a ceiling-attached item + // placement from the floor plan. Returns null if the ceiling mesh isn't + // registered yet — the placement strategy needs `event.object` for the + // ceiling-local↔world transform. + const buildFloorplanCeilingEventPayload = useCallback( + ( + ceiling: CeilingNode, + planPoint: WallPlanPoint, + nativeEvent?: ReactMouseEvent | ReactPointerEvent, + ) => { + const ceilingMesh = sceneRegistry.nodes.get(ceiling.id as AnyNodeId) + if (!ceilingMesh) return null + + const cos = Math.cos(buildingRotationY) + const sin = Math.sin(buildingRotationY) + const worldX = buildingPosition[0] + planPoint[0] * cos + planPoint[1] * sin + const worldZ = buildingPosition[2] - planPoint[0] * sin + planPoint[1] * cos + const worldY = ceilingMesh.getWorldPosition(new Vector3()).y + const localVec = ceilingMesh.worldToLocal(new Vector3(worldX, worldY, worldZ)) + + return { + node: ceiling, + position: [worldX, worldY, worldZ] as [number, number, number], + localPosition: [localVec.x, localVec.y, localVec.z] as [number, number, number], + normal: [0, -1, 0] as [number, number, number], + object: ceilingMesh, + stopPropagation: () => {}, + nativeEvent: nativeEvent?.nativeEvent, + } + }, + [buildingPosition, buildingRotationY], + ) + + const emitFloorplanCeilingLeave = useCallback((ceilingId: string | null) => { + if (!ceilingId) return + const ceilingNode = useScene.getState().nodes[ceilingId as AnyNodeId] + if (!ceilingNode || ceilingNode.type !== 'ceiling') return + + emitter.emit('ceiling:leave', { + node: ceilingNode, + position: [0, 0, 0], + localPosition: [0, 0, 0], + normal: [0, -1, 0], + stopPropagation: () => {}, + } as any) + }, []) + + // Clear the hovered-ceiling tracker whenever placement mode ends, so we + // don't carry a stale ceiling id into the next placement session. + useEffect(() => { + if (!isCeilingItemPlacementActive && hoveredCeilingIdRef.current) { + hoveredCeilingIdRef.current = null + } + }, [isCeilingItemPlacementActive]) + + const findCeilingAtPlanPoint = useCallback( + (planPoint: WallPlanPoint): CeilingNode | null => { + if (ceilingHitEntries.length === 0) return null + const point: Point2D = { x: planPoint[0], y: planPoint[1] } + for (const entry of ceilingHitEntries) { + if (isPointInsidePolygonWithHoles(point, entry.polygon, entry.holes)) { + return entry.ceiling + } + } + return null + }, + [ceilingHitEntries], + ) + + // Route a 2D plan point through ceiling enter/move/leave events when a + // ceiling-attached item is being placed. Returns true when the panel + // should stop further pointer-move processing (we either emitted a + // ceiling event or are between ceilings). + const handleCeilingItemPlacementMove = useCallback( + ( + planPoint: WallPlanPoint, + nativeEvent: ReactPointerEvent, + ): boolean => { + if (!isCeilingItemPlacementActive) return false + + const ceiling = findCeilingAtPlanPoint(planPoint) + if (!ceiling) { + if (hoveredCeilingIdRef.current) { + emitFloorplanCeilingLeave(hoveredCeilingIdRef.current) + hoveredCeilingIdRef.current = null + } + return true + } + + const payload = buildFloorplanCeilingEventPayload(ceiling, planPoint, nativeEvent) + if (!payload) return true + + if (hoveredCeilingIdRef.current !== ceiling.id) { + if (hoveredCeilingIdRef.current) { + emitFloorplanCeilingLeave(hoveredCeilingIdRef.current) + } + hoveredCeilingIdRef.current = ceiling.id + emitter.emit('ceiling:enter', payload as any) + } else { + emitter.emit('ceiling:move', payload as any) + } + return true + }, + [ + buildFloorplanCeilingEventPayload, + emitFloorplanCeilingLeave, + findCeilingAtPlanPoint, + isCeilingItemPlacementActive, + ], + ) + + // Click counterpart — used by the background placement click handler. + // Returns true if the click was a valid ceiling-item placement. + const handleCeilingItemPlacementClick = useCallback( + ( + planPoint: WallPlanPoint, + nativeEvent: ReactMouseEvent, + ): boolean => { + if (!isCeilingItemPlacementActive) return false + const ceiling = findCeilingAtPlanPoint(planPoint) + if (!ceiling) return true + + // Ensure the placement state has entered the ceiling surface; the + // user can click without a prior move (e.g. fresh placement after + // selecting the asset from the catalog). + if (hoveredCeilingIdRef.current !== ceiling.id) { + const enterPayload = buildFloorplanCeilingEventPayload(ceiling, planPoint, nativeEvent) + if (!enterPayload) return true + if (hoveredCeilingIdRef.current) { + emitFloorplanCeilingLeave(hoveredCeilingIdRef.current) + } + hoveredCeilingIdRef.current = ceiling.id + emitter.emit('ceiling:enter', enterPayload as any) + } + + const clickPayload = buildFloorplanCeilingEventPayload(ceiling, planPoint, nativeEvent) + if (!clickPayload) return true + emitter.emit('ceiling:click', clickPayload as any) + return true + }, + [ + buildFloorplanCeilingEventPayload, + emitFloorplanCeilingLeave, + findCeilingAtPlanPoint, + isCeilingItemPlacementActive, + ], + ) + const handlePointerMove = useCallback( (event: ReactPointerEvent) => { if (panStateRef.current?.pointerId === event.pointerId) { @@ -7357,6 +7537,20 @@ export function FloorplanPanel() { return } + // Ceiling-attached item placement. Same shape as the opening branch + // above: synthesise the surface events the placement coordinator + // already listens for (ceiling:enter / move / leave) instead of + // routing through `grid:move`, which would otherwise be processed + // by the floor strategy and drop the item to floor height. + if (isCeilingItemPlacementActive) { + const snappedPoint = getSnappedFloorplanPoint(planPoint) + setCursorPoint((previousPoint) => + previousPoint && pointsEqual(previousPoint, snappedPoint) ? previousPoint : snappedPoint, + ) + handleCeilingItemPlacementMove(snappedPoint, event) + return + } + // Registry-driven catch-all for kinds without bespoke 2D handling // (shelf, etc.). Must run AFTER the opening branch above (door / // window are also registered kinds, but need wall events — see @@ -7427,7 +7621,9 @@ export function FloorplanPanel() { fittedViewport, getPlanPointFromClientPoint, activePolygonDraftPoints, + handleCeilingItemPlacementMove, isCeilingBuildActive, + isCeilingItemPlacementActive, isFenceBuildActive, isFloorplanGridInteractionActive, isMarqueeSelectionToolActive, @@ -7650,11 +7846,13 @@ export function FloorplanPanel() { findClosestWallPoint, floorplanOpeningLocalY, getSnappedFloorplanPoint, + handleCeilingItemPlacementClick, handleCeilingPlacementPoint, handleSlabPlacementPoint, handleWallPlacementPoint, handleZonePlacementPoint, isCeilingBuildActive, + isCeilingItemPlacementActive, isFenceBuildActive, isFloorplanGridInteractionActive, isOpeningPlacementActive, @@ -8937,6 +9135,12 @@ export function FloorplanPanel() { attribute below); see floorplan-registry-move-overlay.tsx. */} + {/* Figma-style alignment guides published by the move + overlay during a free-translate drag. Sits above the + registry layer so the red lines and distance pills + paint on top of node geometry. */} + + + Array.isArray(v) && v.length === 3 && v.every((n) => typeof n === 'number') + return isVec3(p) && isVec3(r) +} + +/** + * 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. + * + * The single-selection case is handled by `NodeArrowHandles`; a full-level + * box-select promotes to a building selection, so neither reaches this gizmo. + */ +export function GroupRotateHandle() { + const selectedIds = useViewer((s) => s.selection.selectedIds) + const levelId = useViewer((s) => s.selection.levelId) + const mode = useEditor((s) => s.mode) + const movingNode = useEditor((s) => s.movingNode) + const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered) + // Re-derive participants whenever the scene mutates (e.g. after a commit). + // Drags only touch `useLiveNodeOverrides`, so this does not fire mid-drag. + const nodes = useScene((s) => s.nodes) + + const participantIds = useMemo( + () => selectedIds.filter((id) => isMovable(nodes[id as AnyNodeId], levelId)), + [selectedIds, levelId, nodes], + ) + + const shouldRender = + participantIds.length >= 2 && mode !== 'delete' && !movingNode && !isFloorplanHovered + + if (!shouldRender) return null + // Remount when the participant set changes so the rest pivot re-seeds cleanly. + return +} + +function GroupRotateHandleInner({ ids }: { ids: string[] }) { + const { camera, raycaster, gl, scene } = useThree() + const arrowGeometry = useMemo(() => createRotateArrowHandleGeometry(), []) + const arrowMaterial = useArrowMaterial() + const [isHovered, setIsHovered] = useState(false) + const [isDragging, setIsDragging] = useState(false) + const [guide, setGuide] = useState(null) + const dragCleanupRef = useRef<(() => void) | null>(null) + const frozenPivot = useRef(null) + + useEffect(() => { + arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR) + }, [arrowMaterial, isHovered]) + useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry]) + useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial]) + useEffect(() => () => dragCleanupRef.current?.(), []) + + const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1 + const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE * 1.05 + + // World-space bounding-box center of the selected meshes (XZ), Y at the + // group's base. Levels are axis-aligned in XZ, so world XZ coincides with + // each node's level-local `position` XZ — letting us rotate `position` + // directly against this pivot without per-node frame conversion. + const restPivot = useMemo(() => { + const box = new Box3() + const tmp = new Box3() + let found = false + for (const id of ids) { + const obj = sceneRegistry.nodes.get(id) + if (!obj) continue + obj.updateWorldMatrix(true, true) + tmp.setFromObject(obj) + if (tmp.isEmpty()) continue + box.union(tmp) + found = true + } + if (!found) return null + return new Vector3((box.min.x + box.max.x) / 2, box.min.y, (box.min.z + box.max.z) / 2) + }, [ids]) + + if (!restPivot) return null + const pivot = isDragging && frozenPivot.current ? frozenPivot.current : restPivot + + const activate = (event: ThreeEvent) => { + event.stopPropagation() + + const center = restPivot.clone() + frozenPivot.current = center + + // Snapshot each participant's pre-drag transform from the store. + const sceneNodes = useScene.getState().nodes + const starts = ids + .map((id) => { + const node = sceneNodes[id as AnyNodeId] as MovableNode | undefined + if (!node) return null + return { + id: id as AnyNodeId, + position: [...node.position] as [number, number, number], + rotation: [...node.rotation] as [number, number, number], + } + }) + .filter((s): s is NonNullable => s !== null) + if (starts.length === 0) return + + // Horizontal drag plane at the pivot; bearing measured around the pivot. + const plane = new Plane(new Vector3(0, 1, 0), -center.y) + const angleOf = (p: Vector3) => Math.atan2(p.z - center.z, p.x - center.x) + + // Wedge radius tracks how far the group spreads from the pivot. + let spread = 0 + for (const s of starts) { + spread = Math.max(spread, Math.hypot(s.position[0] - center.x, s.position[2] - center.z)) + } + const guideRadius = Math.min(Math.max(spread * 0.6, 0.3), 3) + + const ndc = new Vector2() + const setNDC = (clientX: number, clientY: number) => { + const rect = gl.domElement.getBoundingClientRect() + ndc.set( + ((clientX - rect.left) / rect.width) * 2 - 1, + -((clientY - rect.top) / rect.height) * 2 + 1, + ) + } + + setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY) + raycaster.setFromCamera(ndc, camera) + const hit = new Vector3() + if (!raycaster.ray.intersectPlane(plane, hit)) return + const initialAngle = angleOf(hit) + + document.body.style.cursor = 'grabbing' + sfxEmitter.emit('sfx:item-pick') + useViewer.getState().setInputDragging(true) + useScene.temporal.getState().pause() + setIsDragging(true) + + const onMove = (e: PointerEvent) => { + setNDC(e.clientX, e.clientY) + raycaster.setFromCamera(ndc, camera) + const moveHit = new Vector3() + if (!raycaster.ray.intersectPlane(plane, moveHit)) return + let delta = angleOf(moveHit) - initialAngle + while (delta > Math.PI) delta -= 2 * Math.PI + while (delta < -Math.PI) delta += 2 * Math.PI + if (e.shiftKey) delta = Math.round(delta / ROTATE_SNAP) * ROTATE_SNAP + + // Orbit each node's position CCW by `delta` (atan2 x→z sense) and turn + // its yaw by `-delta` to match three.js Y-rotation handedness (same + // convention as the single-item rotate handle in item/definition.ts). + const cos = Math.cos(delta) + const sin = Math.sin(delta) + const overrides = useLiveNodeOverrides.getState() + for (const s of starts) { + const dx = s.position[0] - center.x + const dz = s.position[2] - center.z + const position: [number, number, number] = [ + center.x + dx * cos - dz * sin, + s.position[1], + center.z + dx * sin + dz * cos, + ] + const rotation: [number, number, number] = [ + s.rotation[0], + s.rotation[1] - delta, + s.rotation[2], + ] + overrides.set(s.id, { position, rotation }) + useScene.getState().markDirty(s.id) + } + + if (Math.abs(delta) < 0.0087) { + setGuide(null) + } else { + const midAngle = initialAngle + delta / 2 + const labelRadius = guideRadius + 0.22 + setGuide({ + center: [center.x, center.y, center.z], + startAngle: initialAngle, + endAngle: initialAngle + delta, + radius: guideRadius, + labelPos: [ + center.x + Math.cos(midAngle) * labelRadius, + center.y + 0.02, + center.z + Math.sin(midAngle) * labelRadius, + ], + sweep: Math.abs(delta), + }) + } + } + + const cleanup = () => { + window.removeEventListener('pointermove', onMove) + window.removeEventListener('pointerup', onUp) + window.removeEventListener('pointercancel', onCancel) + if (document.body.style.cursor === 'grabbing') document.body.style.cursor = '' + useScene.temporal.getState().resume() + useViewer.getState().setInputDragging(false) + setIsDragging(false) + setGuide(null) + frozenPivot.current = null + dragCleanupRef.current = null + } + + const commitFromOverrides = () => { + const overrides = useLiveNodeOverrides.getState() + const updates: { id: AnyNodeId; data: Partial }[] = [] + for (const s of starts) { + const patch = overrides.get(s.id) + if (patch) updates.push({ id: s.id, data: patch as Partial }) + } + return updates + } + + const onUp = () => { + sfxEmitter.emit('sfx:item-place') + const updates = commitFromOverrides() + // Resume before the commit so the single batched `updateNodes` is the + // 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 s of starts) { + useLiveNodeOverrides.getState().clear(s.id) + useScene.getState().markDirty(s.id) + } + cleanup() + } + + const onCancel = () => { + // Revert: drop overrides + mark dirty so renderers rebuild from the store. + for (const s of starts) { + useLiveNodeOverrides.getState().clear(s.id) + useScene.getState().markDirty(s.id) + } + cleanup() + } + + dragCleanupRef.current = cleanup + window.addEventListener('pointermove', onMove) + window.addEventListener('pointerup', onUp) + window.addEventListener('pointercancel', onCancel) + } + + return createPortal( + <> + {(isHovered || isDragging) && ( + + + + )} + + { + event.stopPropagation() + setIsHovered(true) + if (document.body.style.cursor !== 'grabbing') document.body.style.cursor = 'grab' + }} + onPointerLeave={(event) => { + event.stopPropagation() + setIsHovered(false) + if (document.body.style.cursor === 'grab') document.body.style.cursor = '' + }} + renderOrder={1010} + /> + + {guide ? : null} + , + scene, + ) +} + +export default GroupRotateHandle diff --git a/packages/editor/src/components/editor/index.tsx b/packages/editor/src/components/editor/index.tsx index f21499a0..a5d4888f 100644 --- a/packages/editor/src/components/editor/index.tsx +++ b/packages/editor/src/components/editor/index.tsx @@ -60,6 +60,7 @@ import { FloatingActionMenu } from './floating-action-menu' import { FloatingBuildingActionMenu } from './floating-building-action-menu' import { FloorplanPanel } from './floorplan-panel' import { Grid } from './grid' +import { GroupRotateHandle } from './group-rotate-handle' import { NodeArrowHandles } from './node-arrow-handles' import { SelectionManager } from './selection-manager' import { SiteEdgeLabels } from './site-edge-labels' @@ -67,6 +68,7 @@ import { SnapshotCaptureOverlay } from './snapshot-capture-overlay' import { type SnapshotCameraData, ThumbnailGenerator } from './thumbnail-generator' import { WallMeasurementLabel } from './wall-measurement-label' import { WallMoveSideHandles } from './wall-move-side-handles' +import { WallOpeningHighlights } from './wall-opening-highlights' const CAMERA_CONTROLS_HINT_DISMISSED_STORAGE_KEY = 'editor-camera-controls-hint-dismissed:v1' const DELETE_CURSOR_BADGE_COLOR = '#ef4444' @@ -599,6 +601,8 @@ const ViewerSceneContent = memo(function ViewerSceneContent({ {!isFirstPersonMode && } {!(isVersionPreviewMode || isFirstPersonMode) && } {!(isVersionPreviewMode || isFirstPersonMode) && } + {!(isVersionPreviewMode || isFirstPersonMode) && } + {!(isVersionPreviewMode || isFirstPersonMode) && } {!(isVersionPreviewMode || isFirstPersonMode) && } {!(isVersionPreviewMode || isFirstPersonMode) && } {!(isVersionPreviewMode || isFirstPersonMode) && } diff --git a/packages/editor/src/components/editor/measurement-pill.tsx b/packages/editor/src/components/editor/measurement-pill.tsx new file mode 100644 index 00000000..892f5d01 --- /dev/null +++ b/packages/editor/src/components/editor/measurement-pill.tsx @@ -0,0 +1,75 @@ +'use client' + +import { type ForwardedRef, Fragment, forwardRef } from 'react' + +// Canonical in-world dimension formatter — metric metres or imperial +// feet/inches. Shared by every measurement readout so they read the same. +export function formatMeasurement(value: number, unit: 'metric' | 'imperial'): string { + if (unit === 'imperial') { + const feet = value * 3.280_84 + const wholeFeet = Math.floor(feet) + const inches = Math.round((feet - wholeFeet) * 12) + if (inches === 12) return `${wholeFeet + 1}'0"` + return `${wholeFeet}'${inches}"` + } + return `${Number.parseFloat(value.toFixed(2))}m` +} + +type MeasurePart = 'height' | 'length' | 'thickness' + +const PART_ORDER: { key: MeasurePart; prefix: string }[] = [ + { key: 'height', prefix: 'H' }, + { key: 'length', prefix: 'L' }, + { key: 'thickness', prefix: 'T' }, +] + +/** + * Floating dimension pill shown during wall / fence drags: `H · L · T` with + * the actively-dragged dimension emphasised. Styled to match the top-center + * floating info bar (rounded-full, design-token colours) so it tracks the + * app theme. + * + * The forwarded ref points at the `primary` value's `` so a caller + * driving a per-frame drag (the height arrow) can rewrite its text + * imperatively without a React re-render. Callers that re-render naturally + * (the endpoint tools) ignore the ref and just pass live values as props. + */ +export const MeasurementPill = forwardRef(function MeasurementPill( + { + height, + length, + thickness, + unit, + primary, + }: { + height: number + length: number + thickness: number + unit: 'metric' | 'imperial' + primary: MeasurePart + }, + primaryRef: ForwardedRef, +) { + const values: Record = { height, length, thickness } + return ( +
+ {PART_ORDER.map((part, index) => ( + + {index > 0 ? ( + + · + + ) : null} + + {`${part.prefix} ${formatMeasurement(values[part.key], unit)}`} + + + ))} +
+ ) +}) diff --git a/packages/editor/src/components/editor/node-arrow-handles.tsx b/packages/editor/src/components/editor/node-arrow-handles.tsx index 81074b77..54b29090 100644 --- a/packages/editor/src/components/editor/node-arrow-handles.tsx +++ b/packages/editor/src/components/editor/node-arrow-handles.tsx @@ -13,6 +13,7 @@ import { type RadialResizeHandle, sceneRegistry, type TapActionHandle, + type TranslateHandle, useLiveNodeOverrides, useScene, } from '@pascal-app/core' @@ -21,11 +22,13 @@ import { Html } from '@react-three/drei' import { createPortal, type ThreeEvent, useFrame, useThree } from '@react-three/fiber' import { useEffect, useMemo, useRef, useState } from 'react' import { - type BufferGeometry, + BoxGeometry, + BufferGeometry, Color, CylinderGeometry, DoubleSide, ExtrudeGeometry, + Float32BufferAttribute, type Group, Matrix4, type Object3D, @@ -43,9 +46,15 @@ import { EDITOR_LAYER } from '../../lib/constants' import { createEditorApi } from '../../lib/editor-api' import { sfxEmitter } from '../../lib/sfx-bus' import useEditor from '../../store/use-editor' +import { snapToGrid } from '../tools/item/placement-math' +import { formatAngleRadians } from '../tools/shared/segment-angle' -const ARROW_SCALE = 0.65 -const ARROW_COLOR = '#8381ed' +export const ARROW_SCALE = 0.65 +export const ARROW_COLOR = '#8381ed' +// How far a DOWNWARD tracker's dashed leader pokes past its cube so the +// dashes visibly thread through it (the cube sits ON the line, not at +// its end). Upward trackers — wall / chimney height — stop at the cube. +const TRACKER_THROUGH = 0.12 // Mirrors the formatter used by wall / fence measurement labels so all // in-world dimension chips read consistently. @@ -90,7 +99,7 @@ function DimensionLabel({ ) } -const ARROW_HOVER_COLOR = '#a5b4fc' +export const ARROW_HOVER_COLOR = '#a5b4fc' // Two-headed curved-arrow silhouette for whole-node rotation handles // (today: the elevator's corner rotate gizmo). Symmetric arc centred on @@ -99,7 +108,7 @@ const ARROW_HOVER_COLOR = '#a5b4fc' // XZ plane — same final-orientation contract as the chevron, so the // outer rotation Y and inner-rotation chain in the renderer are reused // unchanged. -function createRotateArrowHandleGeometry() { +export function createRotateArrowHandleGeometry() { const R = 0.2 const ribbonHalfWidth = 0.02 // ribbon thickness / 2 const halfSweep = Math.PI / 3 // 60° per side → 120° total arc @@ -207,6 +216,65 @@ function createArrowHandleGeometry() { return geometry } +// Double-headed straight arrow silhouette, drawn in 2D pointing along ±X. +// A thin ribbon between two arrowheads. Two of these (one rotated 90°) +// merge into the 4-way move cross. +function createDoubleArrowShape(): Shape { + const L = 0.36 // half-length to each tip + const rw = 0.03 // ribbon half-width + const hw = 0.12 // arrowhead half-width + // Long inner ribbon so opposing arrowheads sit well apart rather than + // meeting in a cramped knot at the centre. + const hx = 0.2 // where each arrowhead meets the ribbon + const shape = new Shape() + shape.moveTo(L, 0) // right tip + shape.lineTo(hx, hw) + shape.lineTo(hx, rw) + shape.lineTo(-hx, rw) + shape.lineTo(-hx, hw) + shape.lineTo(-L, 0) // left tip + shape.lineTo(-hx, -hw) + shape.lineTo(-hx, -rw) + shape.lineTo(hx, -rw) + shape.lineTo(hx, -hw) + shape.closePath() + return shape +} + +// 4-way move cross: two double-headed arrows (±X and ±Z) lying flat in the +// XZ plane. Drawn on top (depthTest off, shared arrow material) so it reads +// as a floor-move grip centred on the item. +function createMoveCrossHandleGeometry() { + const shape = createDoubleArrowShape() + const extrudeOpts = { + depth: 0.06, + bevelEnabled: true, + bevelThickness: 0.018, + bevelSize: 0.012, + bevelOffset: 0, + bevelSegments: 6, + curveSegments: 8, + steps: 1, + } + const armX = new ExtrudeGeometry(shape, extrudeOpts) + armX.translate(0, 0, -0.03) + armX.rotateX(-Math.PI / 2) // lay flat → points along ±X in XZ + const armZ = armX.clone() + armZ.rotateY(Math.PI / 2) // second arm → points along ±Z + const merged = mergeGeometries([armX, armZ], false) + if (!merged) { + armZ.dispose() + armX.computeVertexNormals() + armX.computeBoundingSphere() + return armX + } + armX.dispose() + armZ.dispose() + merged.computeVertexNormals() + merged.computeBoundingSphere() + return merged +} + function swallowNextClick() { const swallow = (clickEvent: Event) => { clickEvent.stopPropagation() @@ -223,6 +291,14 @@ export function NodeArrowHandles() { const mode = useEditor((state) => state.mode) const isFloorplanHovered = useEditor((state) => state.isFloorplanHovered) const movingNode = useEditor((state) => state.movingNode) + // 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 + // on the legacy wall handles (`WallMoveSideHandles`). + const movingWallEndpoint = useEditor((state) => state.movingWallEndpoint) + const movingFenceEndpoint = useEditor((state) => state.movingFenceEndpoint) + const curvingWall = useEditor((state) => state.curvingWall) + const curvingFence = useEditor((state) => state.curvingFence) const selectedId = selectedIds.length === 1 ? selectedIds[0] : null const rawNode = useScene((state) => @@ -250,10 +326,24 @@ export function NodeArrowHandles() { }, [node, def]) const shouldRender = - Boolean(node && descriptors?.length) && !isFloorplanHovered && mode !== 'delete' && !movingNode + Boolean(node && descriptors?.length) && + !isFloorplanHovered && + mode !== 'delete' && + !movingNode && + !movingWallEndpoint && + !movingFenceEndpoint && + !curvingWall && + !curvingFence if (!shouldRender || !node || !descriptors) return null - return + // Key by the selected node id so switching selection REMOUNTS the rig. + // The portal target + ride-mesh refs are seeded from the scene registry + // in `useState` initializers; without a remount they'd persist from the + // previous selection and the arrows would ride the old node's world pose + // (right local placements, wrong frame) until the resolve effect happened + // to catch up. Remounting re-resolves both refs synchronously for the new + // node, so the arrows land in the right place the instant it's selected. + return } // Resolves the portal target + ride mesh chain. Descriptor-level `portal` @@ -338,16 +428,14 @@ function NodeArrowHandlesForNode({ const outerRef = useRef(null) const innerRef = useRef(null) - // Tag all arrow objects for EDITOR_LAYER so the ThumbnailGenerator camera - // (which calls cam.layers.disable(EDITOR_LAYER)) excludes them from captures. - // descriptors is used as a trigger dep: when handles change, new mesh objects - // are created and need their layers set even though it isn't read in the body. - // biome-ignore lint/correctness/useExhaustiveDependencies: intentional trigger dep - useEffect(() => { - outerRef.current?.traverse((obj) => { - obj.layers.set(EDITOR_LAYER) - }) - }, [descriptors]) + // Keep arrow objects on SCENE_LAYER so the post-processing scenePass + // captures them in the depth/normal MRT — that's what feeds the ink-edge + // shader, and it's the reason the wall height arrow (which also stays on + // SCENE_LAYER) reads as a proper 3D plate with outlined edges. Putting + // them on EDITOR_LAYER hides them from scenePass and the chevron renders + // flat. Arrows are only mounted while a node is selected, so thumbnail + // captures (which never have selection) don't need the layer-based + // exclusion the wall arrow also goes without. useFrame(() => { if (outerRef.current && outerRide) { @@ -360,6 +448,34 @@ function NodeArrowHandlesForNode({ } }) + // Active-drag tracking. When a handle starts dragging, it claims its + // descriptor index here and snapshots the store node at drag-start. + // Non-active arrows re-render against the snapshot + a freeze offset + // that undoes the mesh's `position` drift in node-local frame — so + // asymmetric resize (width L/R, length L/R) doesn't visually slide the + // depth / height / rotate chevrons. They stay anchored at their + // pre-drag world positions for the duration of the drag. + // + // Hooks must sit ABOVE the early-return guard below — the registry- + // resolve `useEffect` flips `portalObject` from null → object after + // the first frame, so a guard between two hooks would change the + // hook count between renders and trip React's rules-of-hooks check. + const [activeIndex, setActiveIndex] = useState(null) + const [preDragNode, setPreDragNode] = useState(null) + const dragControls = useMemo( + () => ({ + onStart: (index: number, snapshot: AnyNode) => { + setActiveIndex(index) + setPreDragNode(snapshot) + }, + onEnd: () => { + setActiveIndex(null) + setPreDragNode(null) + }, + }), + [], + ) + if (!portalObject || !outerRide || (innerRideId !== null && !innerRide)) return null // `arrowFrame` is the Object3D used as the spatial reference for the @@ -370,14 +486,25 @@ function NodeArrowHandlesForNode({ // wall-riding outer wrapper. const arrowFrame = innerRide ?? outerRide + // A translate drag moves `position`, so the whole handle rig should travel + // with the mesh — the freeze-at-pre-drag mechanism (built for asymmetric + // resize that re-centres the mesh) must NOT fire for the non-active arrows + // here, or they'd lag behind the moving item. + const activeIsTranslate = activeIndex !== null && descriptors[activeIndex]?.kind === 'translate' + const arrows = descriptors.map((descriptor, index) => ( )) @@ -389,36 +516,141 @@ function NodeArrowHandlesForNode({ ) } +type DragControls = { + onStart: (index: number, snapshot: AnyNode) => void + onEnd: () => void +} + +// Offset, in node-local frame, that compensates for `position` drift on +// the mesh during an asymmetric resize. Width/length L+R recompute +// `position` so the anchored edge stays world-fixed — the renderer +// follows that override, the ride object moves, and every arrow under +// it would drift along with the mesh center. Subtracting this offset +// from a non-active arrow's local placement undoes that drift so it +// stays at its pre-drag world position. +// +// Rotation drags don't change `position`, so the offset collapses to +// zero and non-active arrows naturally rotate with the mesh — which is +// the desired behaviour (the whole rig rotates as a unit). +function computeFreezeOffset(liveNode: AnyNode, preDragNode: AnyNode): [number, number, number] { + // Not every node in the union carries a `position` field (sites are the + // notable holdout — they don't have handles anyway, but TypeScript still + // requires us to discriminate). Guarded access keeps the freeze logic + // safe for the few node kinds that lack the field. + const liveP = (liveNode as { position?: readonly [number, number, number] }).position ?? [0, 0, 0] + const preP = (preDragNode as { position?: readonly [number, number, number] }).position ?? [ + 0, 0, 0, + ] + const deltaWorldX = liveP[0] - preP[0] + const deltaWorldY = liveP[1] - preP[1] + const deltaWorldZ = liveP[2] - preP[2] + const rotY = (preDragNode as { rotation?: number }).rotation ?? 0 + // World → node-local for Y-axis rotation by rotY (THREE.Object3D + // rotation-y convention): inverse is rotation by -rotY around +Y. + const cosR = Math.cos(rotY) + const sinR = Math.sin(rotY) + const deltaLocalX = cosR * deltaWorldX - sinR * deltaWorldZ + const deltaLocalZ = sinR * deltaWorldX + cosR * deltaWorldZ + return [deltaLocalX, deltaWorldY, deltaLocalZ] +} + function ArrowHandle({ descriptor, - node, + liveNode, + preDragNode, + activeIndex, + handleIndex, + dragControls, rideObject, + suppressFreeze, }: { descriptor: HandleDescriptor - node: AnyNode + liveNode: AnyNode + preDragNode: AnyNode | null + activeIndex: number | null + handleIndex: number + dragControls: DragControls rideObject: Object3D + /** When the active drag is a translate, non-active arrows ride the moving + * mesh instead of freezing at their pre-drag world position. */ + suppressFreeze?: boolean }) { + // During a drag, non-active arrows render against the pre-drag store + // snapshot. The active arrow always uses the live (override-merged) + // node so it tracks the cursor. + const isOtherActive = activeIndex !== null && activeIndex !== handleIndex && preDragNode !== null + const placementNode = isOtherActive ? (preDragNode as AnyNode) : liveNode + const freezeOffset = + isOtherActive && preDragNode && !suppressFreeze + ? computeFreezeOffset(liveNode, preDragNode) + : null + if (descriptor.kind === 'linear-resize' || descriptor.kind === 'radial-resize') { - return + return ( + + ) } if (descriptor.kind === 'arc-resize') { - return + return ( + + ) + } + if (descriptor.kind === 'translate') { + return ( + + ) } if (descriptor.kind === 'tap-action') { - return + // Tap-action handles (fence side-move arrows, corner pickers) aren't + // resize handles, so the freeze-at-pre-drag mechanism — which only + // exists to stop arrows sliding when an asymmetric width/length resize + // re-centers the mesh — doesn't apply to them. Track the live node so + // their height-dependent placement (side arrows ride the top, corner + // leaders span the full height) follows a height drag in real time. + return } // endpoint-move not yet implemented. return null } -function useArrowMaterial(): MeshBasicNodeMaterial { +export function useArrowMaterial(): MeshBasicNodeMaterial { return useMemo( () => new MeshBasicNodeMaterial({ color: new Color(ARROW_COLOR), side: DoubleSide, + // `depthTest: false` keeps the chevron drawing on top of any + // geometry under it; `depthWrite: true` puts the chevron's depth + // into the scenePass buffer so the ink-edge shader's depth + // Laplacian fires on its silhouette from every angle. Without + // depthWrite, only the normal-discontinuity branch can detect + // the chevron, and that signal collapses when the arrow's faces + // happen to align with whatever sits behind them in screen space + // — which is why the lines used to drop out depending on the view. depthTest: false, - depthWrite: false, + depthWrite: true, transparent: true, opacity: 1, }), @@ -447,10 +679,21 @@ function resolveBound( function LinearArrow({ descriptor, node, + liveNode, + freezeOffset, + handleIndex, + dragControls, rideObject, }: { descriptor: LinearResizeHandle | RadialResizeHandle + /** Effective node for placement (preDrag snapshot when another arrow is active). */ node: AnyNode + /** Always the live (override-merged) node — used inside drag handlers. */ + liveNode: AnyNode + /** Node-local offset that undoes the mesh's `position` drift; null when not frozen. */ + freezeOffset: [number, number, number] | null + handleIndex: number + dragControls: DragControls rideObject: Object3D }) { const [isHovered, setIsHovered] = useState(false) @@ -470,9 +713,33 @@ function LinearArrow({ useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial]) useEffect(() => () => dragCleanupRef.current?.(), []) + // Suppress "declared but unused" for `liveNode` — LinearArrow's apply + // operates on `initialNode` (snapshot inside activate) and reads value + // updates back via `useLiveNodeOverrides`. The prop is required for + // uniformity with ArrowHandle's variant dispatch but isn't consumed in + // this variant's render path. + void liveNode + const cursor = pickCursor(descriptor) + // When a handle declares `measureLabel`, its readout is routed to the + // floating dimension pill (via `activeHandleDrag`) and its own in-world + // chip is suppressed — matches the wall height handle. + const measureLabel = descriptor.kind === 'linear-resize' ? descriptor.measureLabel : undefined const placementSceneApi = useMemo(() => createSceneApi(useScene), []) - const position = descriptor.placement.position(node, placementSceneApi) + const basePosition = descriptor.placement.position(node, placementSceneApi) + // `freezeOffset` (in node-local frame) cancels the mesh's `position` + // drift while another arrow is being dragged — `basePosition` is + // computed against the pre-drag snapshot, then we subtract the offset + // so the arrow's WORLD location matches its pre-drag world location. + // Active arrows + idle state have `freezeOffset === null`, so the + // position passes through unchanged. + const position: [number, number, number] = freezeOffset + ? [ + basePosition[0] - freezeOffset[0], + basePosition[1] - freezeOffset[1], + basePosition[2] - freezeOffset[2], + ] + : [basePosition[0], basePosition[1], basePosition[2]] const baseRotationY = descriptor.placement.rotationY?.(node, placementSceneApi) ?? 0 // Default chevron points +X. Rotate around Y to face the chosen axis. const axisRotationY = descriptor.axis === 'z' ? -Math.PI / 2 : 0 @@ -522,6 +789,13 @@ function LinearArrow({ const nodeId = node.id as AnyNodeId const sceneApi = createSceneApi(useScene) const initialNode = (sceneApi.get(nodeId) ?? node) as AnyNode + // Cross-node handles (a downspout sliding its gutter's outlet) redirect + // the live override + commit to another node; defaults to the selected + // node. `currentValue` / `apply` still see the selected node. + const overrideId = + (descriptor.kind === 'linear-resize' + ? descriptor.overrideTarget?.(initialNode as never, sceneApi) + : undefined) ?? nodeId const initialValue = descriptor.currentValue(initialNode) const initialPointer = descriptor.axis === 'x' ? hitLocal.x : descriptor.axis === 'y' ? hitLocal.y : hitLocal.z @@ -548,6 +822,16 @@ function LinearArrow({ useViewer.getState().setInputDragging(true) useScene.temporal.getState().pause() setIsDragging(true) + // Claim active-drag status — `NodeArrowHandlesForNode` will pass the + // snapshot to every OTHER arrow so they render at their pre-drag + // world positions while this drag runs. The snapshot must be the + // pre-override store node (not the merged `liveNode`) so subsequent + // re-renders don't pollute it with this drag's own patch. + dragControls.onStart(handleIndex, initialNode) + // Publish the dimension being steered so the floating pill can show it. + if (measureLabel) { + useEditor.getState().setActiveHandleDrag({ nodeId, label: measureLabel }) + } let lastPatch: Partial | null = null @@ -576,8 +860,8 @@ function LinearArrow({ // pre-drag geometry (door-width re-centers on the opposite edge). const patch = descriptor.apply(initialNode as never, next, sceneApi) lastPatch = patch as Partial - useLiveNodeOverrides.getState().set(nodeId, patch as Record) - useScene.getState().markDirty(nodeId) + useLiveNodeOverrides.getState().set(overrideId, patch as Record) + useScene.getState().markDirty(overrideId) } const cleanup = () => { @@ -590,6 +874,12 @@ function LinearArrow({ useScene.temporal.getState().resume() useViewer.getState().setInputDragging(false) setIsDragging(false) + if (measureLabel) { + useEditor.getState().setActiveHandleDrag(null) + } + // Release the active-drag claim so non-active arrows return to + // live-tracking (and so the next drag can claim its own snapshot). + dragControls.onEnd() dragCleanupRef.current = null } const onUp = () => { @@ -598,17 +888,17 @@ function LinearArrow({ // Commit: one tracked write to the scene store, then drop the // override so subscribers read from scene again. if (lastPatch) { - sceneApi.update(nodeId, lastPatch) + sceneApi.update(overrideId, lastPatch) } - useLiveNodeOverrides.getState().clear(nodeId) - useScene.getState().markDirty(nodeId) + useLiveNodeOverrides.getState().clear(overrideId) + useScene.getState().markDirty(overrideId) cleanup() } const onCancel = () => { // Revert: drop the override + mark dirty so the system rebuilds // against the original scene values. - useLiveNodeOverrides.getState().clear(nodeId) - useScene.getState().markDirty(nodeId) + useLiveNodeOverrides.getState().clear(overrideId) + useScene.getState().markDirty(overrideId) cleanup() } dragCleanupRef.current = cleanup @@ -637,9 +927,74 @@ function LinearArrow({ // is already the effective (override-merged) node, so currentValue // returns the in-flight value during a drag and the label tracks // smoothly without an extra subscription. - const showLabel = isHovered || isDragging + // `measureLabel` handles route their readout to the floating dimension + // pill, so suppress the inline chip here to avoid showing it twice. + const showLabel = (isHovered || isDragging) && !measureLabel const labelText = showLabel ? formatDimension(descriptor.currentValue(node), unit) : '' + // `tracker` shape on a linear-resize handle: render a dashed vertical + // leader from the floor up to a small cube at `placement.position`. The + // cube is the drag target and reuses the same `activate` pointer handler + // as the chevron path, so all the override/commit plumbing is unchanged. + // Only valid for axis='y' resize handles — the leader is rendered at + // (0,0,0)→(0,position.y,0) in the same group as the cube, so for x/z + // axes the leader would still climb vertically and look wrong. + const shape = + descriptor.kind === 'linear-resize' && descriptor.shape === 'tracker' ? 'tracker' : 'arrow' + + if (shape === 'tracker') { + // Descriptors can pin the leader's bottom Y above the floor — e.g. + // chimney body height starts at the deck plane, not at y=0, so the + // dashed leader spans only the body's visible extent. + const trackerDescriptor = descriptor as LinearResizeHandle + const baseY = trackerDescriptor.trackerBaseY?.(node as never, placementSceneApi) ?? 0 + // Leader spans base ↔ cube either direction. Upward (cube above base: + // wall / chimney height) it stops at the cube as before. Downward + // (cube below base: a downspout's length cube under the gutter + // outlet) it pokes `TRACKER_THROUGH` past the cube so the dashes + // thread through it instead of the leader collapsing to nothing. + const cubeY = position[1] + const cubeBelowBase = cubeY < baseY + const leaderBottomY = Math.min(baseY, cubeY) - (cubeBelowBase ? TRACKER_THROUGH : 0) + const leaderHeight = Math.max(Math.max(baseY, cubeY) - leaderBottomY, 0) + return ( + <> + {showDecoration && decoration ? ( + + ) : null} + {showLabel ? ( + + ) : null} + { + event.stopPropagation() + setIsHovered(true) + document.body.style.cursor = cursor + }} + onLeave={(event) => { + event.stopPropagation() + setIsHovered(false) + if (document.body.style.cursor === cursor) { + document.body.style.cursor = '' + } + }} + zoom={zoom} + /> + + ) + } + return ( <> {showDecoration && decoration ? ( @@ -680,7 +1035,7 @@ function LinearArrow({ // e.g. the curved-stair width arrow traces the outer rim, the inner-radius // arrow traces the central pillar. Floats at node-local `y`, lies in the // XZ plane. -function GuideRing({ radius, y }: { radius: number; y: number }) { +export function GuideRing({ radius, y }: { radius: number; y: number }) { const safeRadius = Math.max(radius, 0.01) const ringGeometry = useMemo(() => { const inner = Math.max(safeRadius - 0.015, 0.001) @@ -714,6 +1069,176 @@ function GuideRing({ radius, y }: { radius: number; y: number }) { ) } +const ROTATION_GUIDE_COLOR = ARROW_COLOR +const ROTATION_GUIDE_SEGMENTS = 48 +const NO_RAYCAST = () => null + +// Live rotation readout shown while a whole-node rotate gizmo is dragged. +// Mirrors the wall-draft angle arc: a filled wedge + outline swept from the +// pointer's bearing at grab (`startAngle`) to its current bearing +// (`endAngle`) around the rotation pivot, plus a degree chip at the wedge's +// midpoint. All coordinates are world-space — the guide is portalled to the +// scene root so it stays fixed while the node mesh rotates underneath it. +export type RotationGuideData = { + center: [number, number, number] + startAngle: number + endAngle: number + radius: number + labelPos: [number, number, number] + /** Swept magnitude in radians, for the degree chip. */ + sweep: number +} + +export function RotationGuide({ data }: { data: RotationGuideData }) { + const { center, startAngle, endAngle, radius, labelPos, sweep } = data + const { outline, fill } = useMemo(() => { + const span = endAngle - startAngle + const count = Math.max(8, Math.ceil((Math.abs(span) / Math.PI) * ROTATION_GUIDE_SEGMENTS)) + const arc = Array.from({ length: count + 1 }, (_, index) => { + const angle = startAngle + (span * index) / count + return new Vector3( + center[0] + Math.cos(angle) * radius, + center[1], + center[2] + Math.sin(angle) * radius, + ) + }) + const centerV = new Vector3(center[0], center[1], center[2]) + const outlineGeo = new BufferGeometry().setFromPoints([centerV, ...arc, centerV]) + const positions: number[] = [] + for (let i = 0; i < arc.length - 1; i++) { + const a = arc[i] + const b = arc[i + 1] + if (!a || !b) continue + positions.push(centerV.x, centerV.y, centerV.z, a.x, a.y, a.z, b.x, b.y, b.z) + } + const fillGeo = new BufferGeometry() + fillGeo.setAttribute('position', new Float32BufferAttribute(positions, 3)) + return { outline: outlineGeo, fill: fillGeo } + }, [center, startAngle, endAngle, radius]) + useEffect(() => () => outline.dispose(), [outline]) + useEffect(() => () => fill.dispose(), [fill]) + + return ( + <> + + + + + + + ) +} + +function RotationGuideOutline({ geometry }: { geometry: BufferGeometry }) { + return ( + // @ts-expect-error - R3F accepts Three line primitives, matching the wall draft arc. + + + + ) +} + +// Live whole-node rotation readout for a single-node rotate gizmo, rendered as +// a CHILD of the node frame (sibling of its guide ring). Because it lives in +// the node's own frame, it is automatically concentric and coplanar with the +// ring — on flat ground the frame's XZ is world-horizontal, on a pitched roof +// it follows the slope, with no world-space basis math. +// +// The wedge fills the node-local XZ plane at the ring's height `y`. Its leading +// edge sits at the rotate handle's bearing `handleAngle` (which is fixed in the +// node frame, so it tracks the orbiting handle), and it opens BACKWARD by the +// swept `delta` — so the trailing edge stays pinned to the grab direction in +// world while the node spins. `orbitRadius` is the handle's in-plane distance +// from the pivot; the fill is pulled inside it so it reads as the handle +// swinging around rather than overlapping the icon. +function RotationWedge({ + delta, + handleAngle, + orbitRadius, + y, +}: { + delta: number + handleAngle: number + orbitRadius: number + y: number +}) { + const radius = Math.min(Math.max(orbitRadius * 0.72, 0.3), 1.6) + const { outline, fill } = useMemo(() => { + const start = handleAngle - delta + const span = delta + const count = Math.max(8, Math.ceil((Math.abs(span) / Math.PI) * ROTATION_GUIDE_SEGMENTS)) + const arc = Array.from({ length: count + 1 }, (_, index) => { + const angle = start + (span * index) / count + return new Vector3(Math.cos(angle) * radius, 0, Math.sin(angle) * radius) + }) + const centerV = new Vector3(0, 0, 0) + const outlineGeo = new BufferGeometry().setFromPoints([centerV, ...arc, centerV]) + const positions: number[] = [] + for (let i = 0; i < arc.length - 1; i++) { + const a = arc[i] + const b = arc[i + 1] + if (!a || !b) continue + positions.push(0, 0, 0, a.x, a.y, a.z, b.x, b.y, b.z) + } + const fillGeo = new BufferGeometry() + fillGeo.setAttribute('position', new Float32BufferAttribute(positions, 3)) + return { outline: outlineGeo, fill: fillGeo } + }, [delta, handleAngle, radius]) + useEffect(() => () => outline.dispose(), [outline]) + useEffect(() => () => fill.dispose(), [fill]) + + const labelRadius = radius + 0.22 + const midAngle = handleAngle - delta / 2 + const labelPos: [number, number, number] = [ + Math.cos(midAngle) * labelRadius, + 0, + Math.sin(midAngle) * labelRadius, + ] + + return ( + + + + + + + + ) +} + // Angular drag: project pointer to a horizontal plane at the arrow's Y // and measure the signed angle around the node's local origin (in world // XZ). Pass the normalised delta to `apply` — the descriptor owns the @@ -722,10 +1247,21 @@ function GuideRing({ radius, y }: { radius: number; y: number }) { function ArcArrow({ descriptor, node, + liveNode, + freezeOffset, + handleIndex, + dragControls, rideObject, }: { descriptor: ArcResizeHandle + /** Effective node for placement (preDrag snapshot when another arrow is active). */ node: AnyNode + /** Always the live (override-merged) node — used inside drag handlers. */ + liveNode: AnyNode + /** Node-local offset that undoes the mesh's `position` drift; null when not frozen. */ + freezeOffset: [number, number, number] | null + handleIndex: number + dragControls: DragControls rideObject: Object3D }) { const [isHovered, setIsHovered] = useState(false) @@ -734,6 +1270,11 @@ function ArcArrow({ // corner) render a two-headed curved arrow; everything else (stair // sweep, etc.) keeps the chevron. const isRotateShape = descriptor.shape === 'rotate' + // 'node-normal' spins the node about its local +Z (a wall item flat against + // its wall) instead of yaw about world-Y. The drag plane and the icon both + // tilt into that plane, and the horizontal-only wedge/ring readout is + // suppressed. + const isNodeNormalRot = descriptor.rotationPlane === 'node-normal' const arrowGeometry = useMemo( () => (isRotateShape ? createRotateArrowHandleGeometry() : createArrowHandleGeometry()), [isRotateShape], @@ -746,6 +1287,9 @@ function ArcArrow({ const arrowScale = isRotateShape ? ARROW_SCALE * 1.05 : ARROW_SCALE const scale = (isHovered ? 1.12 : 1) * zoom * arrowScale const dragCleanupRef = useRef<(() => void) | null>(null) + // Live rotation amount (radians swept since grab) — non-null only while a + // `shape: 'rotate'` gizmo is mid-drag. Drives the in-frame wedge readout. + const [rotationDelta, setRotationDelta] = useState(null) useEffect(() => { arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR) @@ -755,7 +1299,19 @@ function ArcArrow({ useEffect(() => () => dragCleanupRef.current?.(), []) const placementSceneApi = useMemo(() => createSceneApi(useScene), []) - const position = descriptor.placement.position(node, placementSceneApi) + const basePosition = descriptor.placement.position(node, placementSceneApi) + // See the LinearArrow note on freezeOffset — for rotation drags the + // delta collapses to zero (position doesn't change), so the rotate + // gizmo naturally rotates with the mesh while another arrow is being + // dragged. The offset only kicks in for asymmetric resize drags that + // recompute `position` to anchor the opposite edge. + const position: [number, number, number] = freezeOffset + ? [ + basePosition[0] - freezeOffset[0], + basePosition[1] - freezeOffset[1], + basePosition[2] - freezeOffset[2], + ] + : [basePosition[0], basePosition[1], basePosition[2]] const rotationY = descriptor.placement.rotationY?.(node, placementSceneApi) ?? 0 // Rotation gizmo: hover signals "grabbable", active drag signals // "grabbed". `ew-resize` was wrong — it implies linear width drag. @@ -772,14 +1328,58 @@ function ArcArrow({ event.stopPropagation() // Horizontal drag plane at the arrow's world Y. Atan2 around the - // node's local origin (= rideObject world center) gives the cursor's - // bearing — delta between samples is the angular drag. + // rotation pivot gives the cursor's bearing — delta between samples + // is the angular drag. + // + // Default pivot is the rideObject's world origin (= node-local + // origin) which is correct when the mesh origin coincides with the + // shape being rotated (roof-segment, elevator). Nodes that bake + // pose into their geometry (chimney) can override via + // `descriptor.rotationCenter`, which we apply through the + // rideObject's matrixWorld so the descriptor stays in node-local + // coordinates. rideObject.updateMatrixWorld() - const centerWorld = new Vector3() - rideObject.getWorldPosition(centerWorld) + const centerWorld = + descriptor.rotationCenter !== undefined + ? new Vector3( + ...descriptor.rotationCenter(node as never, createSceneApi(useScene)), + ).applyMatrix4(rideObject.matrixWorld) + : new Vector3().setFromMatrixPosition(rideObject.matrixWorld) const arrowWorld = new Vector3(...position).applyMatrix4(rideObject.matrixWorld) const planeY = arrowWorld.y - const plane = new Plane(new Vector3(0, 1, 0), -planeY) + + // Rotation axis + drag plane. 'horizontal' spins about world-Y on a flat + // plane; 'node-normal' spins about the node's local +Z (the wall normal) + // on the plane perpendicular to it. The 2D basis (u, v) lets us measure a + // consistent bearing in either plane: for horizontal it collapses to the + // original atan2(z, x). + const axis = isNodeNormalRot + ? new Vector3().setFromMatrixColumn(rideObject.matrixWorld, 2).normalize() + : new Vector3(0, 1, 0) + const plane = isNodeNormalRot + ? new Plane().setFromNormalAndCoplanarPoint(axis, centerWorld) + : new Plane(new Vector3(0, 1, 0), -planeY) + let basisU: Vector3 + if (isNodeNormalRot) { + // In-plane reference: world-up projected onto the plane (falls back to + // world-X if the axis is near-vertical, e.g. a ceiling item). + const up = new Vector3(0, 1, 0) + basisU = up.clone().addScaledVector(axis, -up.dot(axis)) + if (basisU.lengthSq() < 1e-6) { + const x = new Vector3(1, 0, 0) + basisU = x.addScaledVector(axis, -x.dot(axis)) + } + basisU.normalize() + } else { + basisU = new Vector3(1, 0, 0) + } + const basisV = isNodeNormalRot + ? new Vector3().crossVectors(axis, basisU).normalize() + : new Vector3(0, 0, 1) + const angleOf = (p: Vector3) => { + const d = new Vector3().subVectors(p, centerWorld) + return Math.atan2(d.dot(basisV), d.dot(basisU)) + } const ndc = new Vector2() const setNDC = (clientX: number, clientY: number) => { @@ -795,7 +1395,7 @@ function ArcArrow({ const hitWorld = new Vector3() if (!raycaster.ray.intersectPlane(plane, hitWorld)) return - const initialAngle = Math.atan2(hitWorld.z - centerWorld.z, hitWorld.x - centerWorld.x) + const initialAngle = angleOf(hitWorld) const nodeId = node.id as AnyNodeId const sceneApi = createSceneApi(useScene) const initialNode = (sceneApi.get(nodeId) ?? node) as AnyNode @@ -805,6 +1405,8 @@ function ArcArrow({ useViewer.getState().setInputDragging(true) useScene.temporal.getState().pause() setIsDragging(true) + // Claim active-drag status — see LinearArrow's onStart note. + dragControls.onStart(handleIndex, initialNode) let lastPatch: Partial | null = null @@ -818,16 +1420,34 @@ function ArcArrow({ raycaster.setFromCamera(ndc, camera) const hit = new Vector3() if (!raycaster.ray.intersectPlane(plane, hit)) return - const currentAngle = Math.atan2(hit.z - centerWorld.z, hit.x - centerWorld.x) + const currentAngle = angleOf(hit) // Normalise so a drag that crosses ±π doesn't flip sign mid-gesture. let delta = currentAngle - initialAngle while (delta > Math.PI) delta -= 2 * Math.PI while (delta < -Math.PI) delta += 2 * Math.PI + // Shift snaps whole-node rotation gizmos (stair, elevator, column…) to + // 15° increments. Scoped to `shape: 'rotate'` so curved-stair sweep + // handles keep their continuous feel. + if (e.shiftKey && descriptor.shape === 'rotate') { + const step = Math.PI / 12 + delta = Math.round(delta / step) * step + } + const patch = descriptor.apply(initialNode as never, delta, sceneApi) lastPatch = patch as Partial useLiveNodeOverrides.getState().set(nodeId, patch as Record) useScene.getState().markDirty(nodeId) + + // Whole-node rotate gizmos report how far the node has turned since + // grab. We hand the live `delta` (the snapped amount, so it tracks the + // 15° steps under Shift) to a wedge that renders as a CHILD of the node + // frame — concentric and coplanar with the guide ring. Suppressed below + // ~0.5° so a fresh grab doesn't flash a zero-width sliver. Horizontal-axis + // rotation only (the wall-normal spin has no in-plane ring readout). + if (isRotateShape && !isNodeNormalRot) { + setRotationDelta(Math.abs(delta) < 0.0087 ? null : delta) + } } const cleanup = () => { @@ -840,6 +1460,9 @@ function ArcArrow({ useScene.temporal.getState().resume() useViewer.getState().setInputDragging(false) setIsDragging(false) + setRotationDelta(null) + // Release the active-drag claim — see LinearArrow's onEnd note. + dragControls.onEnd() dragCleanupRef.current = null } const onUp = () => { @@ -868,6 +1491,13 @@ function ArcArrow({ window.addEventListener('pointercancel', onCancel) } + // Suppress "declared but unused" for `liveNode` — ArcArrow's apply + // operates entirely on `initialNode` (snapshot taken inside activate) + // and `delta` (live cursor angle), so the live store node doesn't + // appear in the rotation pipeline. The prop is still required because + // ArrowHandle passes it uniformly to every variant. + void liveNode + return ( <> {showDecoration && decoration ? ( @@ -876,7 +1506,25 @@ function ArcArrow({ y={decoration.y?.(node as never) ?? 0} /> ) : null} - + {/* Live rotation readout. Rendered HERE (a child of the node frame, the + same frame the guide ring lives in) rather than portalled to world + space, so the wedge is automatically concentric and coplanar with the + ring on any surface — flat ground or a pitched roof. */} + {rotationDelta !== null ? ( + + ) : null} + + node: AnyNode + handleIndex: number + dragControls: DragControls + rideObject: Object3D +}) { + const [isHovered, setIsHovered] = useState(false) + const [isDragging, setIsDragging] = useState(false) + const arrowGeometry = useMemo(() => createMoveCrossHandleGeometry(), []) + const arrowMaterial = useArrowMaterial() + const { camera, raycaster, gl } = useThree() + const zoom = camera instanceof OrthographicCamera ? 1 / camera.zoom : 1 + const scale = (isHovered ? 1.12 : 1) * zoom * ARROW_SCALE + const dragCleanupRef = useRef<(() => void) | null>(null) + + useEffect(() => { + arrowMaterial.color.set(isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR) + }, [arrowMaterial, isHovered]) + useEffect(() => () => arrowGeometry.dispose(), [arrowGeometry]) + useEffect(() => () => arrowMaterial.dispose(), [arrowMaterial]) + useEffect(() => () => dragCleanupRef.current?.(), []) + + const placementSceneApi = useMemo(() => createSceneApi(useScene), []) + const position = descriptor.placement.position(node, placementSceneApi) + const cursor: Cursor = 'move' + // 'node-normal' constrains the drag to the wall face (plane ⟂ the node's + // local +Z). Its cross icon stands up into that plane (tilt about X). + const isWallPlane = descriptor.plane === 'node-normal' + + const activate = (event: ThreeEvent) => { + event.stopPropagation() + + // Drag plane through the node origin. 'horizontal' uses the world-up + // normal (slide on the floor); 'node-normal' uses the node's facing + // direction (its local +Z in world) so the item slides on the wall face. + // Hits map into the parent frame so the delta composes with `position` + // (which lives in parent-local space). + rideObject.updateMatrixWorld() + const worldOrigin = new Vector3().setFromMatrixPosition(rideObject.matrixWorld) + const planeNormal = isWallPlane + ? new Vector3().setFromMatrixColumn(rideObject.matrixWorld, 2).normalize() + : new Vector3(0, 1, 0) + const plane = new Plane().setFromNormalAndCoplanarPoint(planeNormal, worldOrigin) + const parent = rideObject.parent + const parentInverse = new Matrix4() + if (parent) { + parent.updateMatrixWorld() + parentInverse.copy(parent.matrixWorld).invert() + } + + const ndc = new Vector2() + const setNDC = (clientX: number, clientY: number) => { + const rect = gl.domElement.getBoundingClientRect() + ndc.set( + ((clientX - rect.left) / rect.width) * 2 - 1, + -((clientY - rect.top) / rect.height) * 2 + 1, + ) + } + + setNDC(event.nativeEvent.clientX, event.nativeEvent.clientY) + raycaster.setFromCamera(ndc, camera) + const hitWorld = new Vector3() + if (!raycaster.ray.intersectPlane(plane, hitWorld)) return + const startLocal = hitWorld.clone().applyMatrix4(parentInverse) + + const nodeId = node.id as AnyNodeId + const sceneApi = createSceneApi(useScene) + const initialNode = (sceneApi.get(nodeId) ?? node) as AnyNode + const initialPos = (initialNode as { position?: readonly [number, number, number] }) + .position ?? [0, 0, 0] + + document.body.style.cursor = cursor + sfxEmitter.emit('sfx:item-pick') + useViewer.getState().setInputDragging(true) + useScene.temporal.getState().pause() + setIsDragging(true) + dragControls.onStart(handleIndex, initialNode) + + let lastPatch: Partial | null = null + + const onMove = (e: PointerEvent) => { + setNDC(e.clientX, e.clientY) + raycaster.setFromCamera(ndc, camera) + const hit = new Vector3() + if (!raycaster.ray.intersectPlane(plane, hit)) return + const curLocal = hit.applyMatrix4(parentInverse) + // Add the in-plane delta to the drag-start position; the off-plane axis + // (Y on the floor, Z/depth on a wall) keeps its value. Snap / clamp is + // the descriptor's job in `apply`. + const newPos: [number, number, number] = [initialPos[0], initialPos[1], initialPos[2]] + newPos[0] += curLocal.x - startLocal.x + if (isWallPlane) { + newPos[1] += curLocal.y - startLocal.y + } else { + newPos[2] += curLocal.z - startLocal.z + } + // Grid-snap the two in-plane axes (X + the plane's other free axis). + const extents = descriptor.snapExtents?.(initialNode as never) + if (extents) { + newPos[0] = snapToGrid(newPos[0], extents[0]) + if (isWallPlane) { + newPos[1] = snapToGrid(newPos[1], extents[1]) + } else { + newPos[2] = snapToGrid(newPos[2], extents[1]) + } + } + const patch = descriptor.apply(initialNode as never, newPos, sceneApi) + lastPatch = patch as Partial + useLiveNodeOverrides.getState().set(nodeId, patch as Record) + useScene.getState().markDirty(nodeId) + } + + const cleanup = () => { + window.removeEventListener('pointermove', onMove) + window.removeEventListener('pointerup', onUp) + window.removeEventListener('pointercancel', onCancel) + if (document.body.style.cursor === cursor) { + document.body.style.cursor = '' + } + useScene.temporal.getState().resume() + useViewer.getState().setInputDragging(false) + setIsDragging(false) + dragControls.onEnd() + dragCleanupRef.current = null + } + const onUp = () => { + swallowNextClick() + sfxEmitter.emit('sfx:item-place') + if (lastPatch) { + sceneApi.update(nodeId, lastPatch) + } + useLiveNodeOverrides.getState().clear(nodeId) + useScene.getState().markDirty(nodeId) + cleanup() + } + const onCancel = () => { + useLiveNodeOverrides.getState().clear(nodeId) + useScene.getState().markDirty(nodeId) + cleanup() + } + dragCleanupRef.current = cleanup + + window.addEventListener('pointermove', onMove) + window.addEventListener('pointerup', onUp) + window.addEventListener('pointercancel', onCancel) + } + + const onEnter = (event: ThreeEvent) => { + event.stopPropagation() + setIsHovered(true) + document.body.style.cursor = cursor + } + const onLeave = (event: ThreeEvent) => { + event.stopPropagation() + setIsHovered(false) + if (document.body.style.cursor === cursor) document.body.style.cursor = '' + } + + // Suppress the unused `isDragging` lint — it only drives the React re-render + // that keeps hover/drag cursor state in sync. + void isDragging + + // The cross is built flat in the XZ plane. On a wall, tilt it up about X so + // it lies in the item-local XY plane (= the wall face). + const iconRotation: [number, number, number] = isWallPlane ? [Math.PI / 2, 0, 0] : [0, 0, 0] + + return ( + + + + ) +} + // Click-to-engage affordance — no drag plumbing, just a click target. The // descriptor's `onActivate` receives sceneApi + editorApi so it can engage // move tools, endpoint drags, or any other editor-state transition without @@ -1161,3 +2004,109 @@ function CornerPickerShape({ ) } + +// Tracker visual for the `linear-resize` handle's `shape: 'tracker'` option. +// Mirrors the corner picker (dashed vertical leader from the floor) but caps +// the leader with a small draggable cube instead of a hex disc, and the cube +// sits at the TOP of the leader rather than the floor — the visual reads as +// "this cube is the wall top; drag it to raise/lower." All interactivity +// (pointer-down → linear-resize drag) is wired by the parent `LinearArrow`. +const TRACKER_CUBE_SIZE = 0.16 + +function TrackerShape({ + basePosition, + cubePosition, + leaderHeight, + zoom, + isHovered, + onActivate, + onEnter, + onLeave, +}: { + basePosition: readonly [number, number, number] + cubePosition: readonly [number, number, number] + leaderHeight: number + zoom: number + isHovered: boolean + onActivate: (event: ThreeEvent) => void + onEnter: (event: ThreeEvent) => void + onLeave: (event: ThreeEvent) => void +}) { + // `leaderHeight === 0` (wallHeight collapsed to floor) would make the + // dashed builder return an empty geometry — skip the mesh entirely in + // that case so the cube still renders by itself. + const hasLeader = leaderHeight > 0.0001 + const dashedGeometry = useMemo( + () => (hasLeader ? buildDashedVerticalGeometry(leaderHeight) : null), + [hasLeader, leaderHeight], + ) + useEffect(() => () => dashedGeometry?.dispose(), [dashedGeometry]) + + const cubeGeometry = useMemo( + () => new BoxGeometry(TRACKER_CUBE_SIZE, TRACKER_CUBE_SIZE, TRACKER_CUBE_SIZE), + [], + ) + useEffect(() => () => cubeGeometry.dispose(), [cubeGeometry]) + + const dashMaterial = useMemo( + () => + new MeshBasicNodeMaterial({ + color: new Color(ARROW_COLOR), + transparent: true, + opacity: 0.85, + depthTest: false, + depthWrite: false, + }), + [], + ) + const cubeMaterial = useMemo( + () => + new MeshBasicNodeMaterial({ + color: new Color(ARROW_COLOR), + side: DoubleSide, + transparent: true, + opacity: 1, + // depthTest off keeps the cube visible through any geometry sitting + // between camera and wall top; depthWrite on so the ink-edge pass + // catches the cube silhouette from every angle (same reasoning as + // the chevron — without it the lines fade in/out by view angle). + depthTest: false, + depthWrite: true, + }), + [], + ) + useEffect(() => { + const next = isHovered ? ARROW_HOVER_COLOR : ARROW_COLOR + dashMaterial.color.set(next) + cubeMaterial.color.set(next) + }, [dashMaterial, cubeMaterial, isHovered]) + useEffect(() => () => dashMaterial.dispose(), [dashMaterial]) + useEffect(() => () => cubeMaterial.dispose(), [cubeMaterial]) + + const cubeScale = (isHovered ? 1.25 : 1) * zoom + + return ( + <> + {dashedGeometry ? ( + + ) : null} + + + ) +} diff --git a/packages/editor/src/components/editor/selection-manager.tsx b/packages/editor/src/components/editor/selection-manager.tsx index 1b1bcd0b..752e3b05 100644 --- a/packages/editor/src/components/editor/selection-manager.tsx +++ b/packages/editor/src/components/editor/selection-manager.tsx @@ -1,7 +1,6 @@ import { type AnyNode, type AnyNodeId, - type BoxVentNode, type BuildingNode, type CeilingNode, type ColumnNode, @@ -15,7 +14,6 @@ import { isRegistrySelectable, type NodeEvent, nodeRegistry, - type RidgeVentNode, type RoofEvent, type RoofNode, type RoofSegmentEvent, @@ -353,7 +351,7 @@ function applyStairPaintPreview( } function applySingleSurfacePaintPreview( - node: FenceNode | ColumnNode | SlabNode | CeilingNode | ShelfNode | BoxVentNode | RidgeVentNode, + node: FenceNode | ColumnNode | SlabNode | CeilingNode | ShelfNode, material: ActivePaintMaterial, ): PaintPreviewCleanup | null { if (node.type === 'ceiling') { @@ -421,10 +419,11 @@ function applySingleSurfacePaintPreview( } } - if (node.type === 'shelf' || node.type === 'box-vent' || node.type === 'ridge-vent') { - // These kinds register a `` (not a Mesh) with `useRegistry`, - // so we walk the subtree and preview-swap every child mesh — same - // approach `column` uses. + if (node.type === 'shelf') { + // Shelf registers a `` (not a Mesh) with `useRegistry`, so we walk + // the subtree and preview-swap every child mesh — same approach `column` + // uses. (The roof vents previously shared this arm; they now route through + // their `capabilities.paint` dispatcher.) if (!registeredObject) return null const restores: PaintPreviewCleanup[] = [] registeredObject.traverse((object) => { @@ -1020,9 +1019,7 @@ export const SelectionManager = () => { node.type === 'column' || node.type === 'slab' || node.type === 'ceiling' || - node.type === 'shelf' || - node.type === 'box-vent' || - node.type === 'ridge-vent' + node.type === 'shelf' ) { const compatible = hasActivePaintMaterial(activePaintMaterial) @@ -1037,13 +1034,7 @@ export const SelectionManager = () => { .updateNode( node.id as AnyNodeId, buildSingleSurfaceMaterialPatch< - | FenceNode - | ColumnNode - | SlabNode - | CeilingNode - | ShelfNode - | BoxVentNode - | RidgeVentNode + FenceNode | ColumnNode | SlabNode | CeilingNode | ShelfNode >(activePaintMaterial.material, activePaintMaterial.materialPreset), ) } @@ -1051,14 +1042,7 @@ export const SelectionManager = () => { preview: compatible ? () => applySingleSurfacePaintPreview( - node as - | FenceNode - | ColumnNode - | SlabNode - | CeilingNode - | ShelfNode - | BoxVentNode - | RidgeVentNode, + node as FenceNode | ColumnNode | SlabNode | CeilingNode | ShelfNode, activePaintMaterial, ) : () => previewCursor('not-allowed'), @@ -1214,6 +1198,16 @@ export const SelectionManager = () => { if (boxSelectHandled) return const node = event.node + + // A ceiling is selectable only through its corner handles, never via + // the `ceiling-grid` body mesh. When the grid is revealed (ceiling + // selected, or an item placed beneath it) a top-down click hits the + // grid first; selecting the ceiling there both re-selects it as a + // no-op and stops propagation, blocking the hosted item below. By + // ignoring non-handle ceiling clicks (without stopping propagation) + // the click falls through to the item underneath. + if (node.type === 'ceiling' && !event.viaHandle) return + let currentPhase = useEditor.getState().phase let currentStructureLayer = useEditor.getState().structureLayer diff --git a/packages/editor/src/components/editor/use-floorplan-background-placement.ts b/packages/editor/src/components/editor/use-floorplan-background-placement.ts index 126b3ebe..be09c748 100644 --- a/packages/editor/src/components/editor/use-floorplan-background-placement.ts +++ b/packages/editor/src/components/editor/use-floorplan-background-placement.ts @@ -30,11 +30,16 @@ type UseFloorplanBackgroundPlacementArgs = { } | null floorplanOpeningLocalY: number getSnappedFloorplanPoint: (point: WallPlanPoint) => WallPlanPoint + handleCeilingItemPlacementClick: ( + planPoint: WallPlanPoint, + nativeEvent: ReactMouseEvent, + ) => boolean handleCeilingPlacementPoint: (point: WallPlanPoint) => void handleSlabPlacementPoint: (point: WallPlanPoint) => void handleWallPlacementPoint: (point: WallPlanPoint) => void handleZonePlacementPoint: (point: WallPlanPoint) => void isCeilingBuildActive: boolean + isCeilingItemPlacementActive: boolean isFenceBuildActive: boolean isFloorplanGridInteractionActive: boolean isOpeningPlacementActive: boolean @@ -76,11 +81,13 @@ export function useFloorplanBackgroundPlacement({ findClosestWallPoint, floorplanOpeningLocalY, getSnappedFloorplanPoint, + handleCeilingItemPlacementClick, handleCeilingPlacementPoint, handleSlabPlacementPoint, handleWallPlacementPoint, handleZonePlacementPoint, isCeilingBuildActive, + isCeilingItemPlacementActive, isFenceBuildActive, isFloorplanGridInteractionActive, isOpeningPlacementActive, @@ -225,6 +232,15 @@ export function useFloorplanBackgroundPlacement({ return true } + // Ceiling-attached item placement (lights, fans). Routes the click + // through `ceiling:click` instead of `grid:click` so the placement + // strategy parents the new item to the ceiling at the correct + // height — mirrors the pointer-move handler in `floorplan-panel`. + if (isCeilingItemPlacementActive) { + handleCeilingItemPlacementClick(planPoint, event) + return true + } + // Generic catch-all — registry-driven tool whose kind has no // local floor-plan draft handler (column / spawn / shelf / etc.). // The tool's `grid:click` subscriber owns the placement. @@ -247,10 +263,12 @@ export function useFloorplanBackgroundPlacement({ findClosestWallPoint, floorplanOpeningLocalY, getSnappedFloorplanPoint, + handleCeilingItemPlacementClick, handleCeilingPlacementPoint, handleSlabPlacementPoint, handleZonePlacementPoint, isCeilingBuildActive, + isCeilingItemPlacementActive, isFenceBuildActive, isFloorplanGridInteractionActive, isOpeningPlacementActive, diff --git a/packages/editor/src/components/editor/wall-move-side-handles.tsx b/packages/editor/src/components/editor/wall-move-side-handles.tsx index 5630badb..3274dde3 100644 --- a/packages/editor/src/components/editor/wall-move-side-handles.tsx +++ b/packages/editor/src/components/editor/wall-move-side-handles.tsx @@ -143,6 +143,17 @@ export function WallMoveSideHandles() { } function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) { + // Merge the in-flight drag override so every handle (side-move arrows, + // height arrow, corner leaders) tracks the live height in real time + // during a height drag — the scene store stays at the pre-drag value + // until commit, so reading `wall` alone would freeze them. Same pattern + // as node-arrow-handles. + const liveOverride = useLiveNodeOverrides((state) => state.overrides.get(wall.id)) + const effectiveWall = useMemo( + () => (liveOverride ? ({ ...wall, ...liveOverride } as WallNode) : wall), + [wall, liveOverride], + ) + const [levelObject, setLevelObject] = useState(() => wall.parentId ? (sceneRegistry.nodes.get(wall.parentId) ?? null) : null, ) @@ -175,18 +186,18 @@ function WallMoveSideHandlesForWall({ wall }: { wall: WallNode }) { } }, [wall.parentId]) - const handles = useMemo(() => getWallMoveHandles(wall), [wall]) + const handles = useMemo(() => getWallMoveHandles(effectiveWall), [effectiveWall]) if (!levelObject || handles.length === 0) return null return createPortal( {handles.map((handle) => ( - + ))} - - - + + + , levelObject, ) @@ -395,6 +406,8 @@ function WallHeightArrowHandle({ wall }: { wall: WallNode }) { const dirX = curveFrame ? curveFrame.tangent.x : wall.end[0] - wall.start[0] const dirZ = curveFrame ? curveFrame.tangent.y : wall.end[1] - wall.start[1] const wallAngle = Math.atan2(-dirZ, dirX) + // `wall` is the override-merged effective wall (see + // WallMoveSideHandlesForWall), so this height is already live during a drag. const wallHeight = wall.height ?? DEFAULT_WALL_HEIGHT const handleY = wallHeight + HEIGHT_HANDLE_OFFSET diff --git a/packages/editor/src/components/editor/wall-opening-highlights.tsx b/packages/editor/src/components/editor/wall-opening-highlights.tsx new file mode 100644 index 00000000..e93aca5c --- /dev/null +++ b/packages/editor/src/components/editor/wall-opening-highlights.tsx @@ -0,0 +1,158 @@ +'use client' + +import { type AnyNodeId, sceneRegistry, useScene } from '@pascal-app/core' +import { useViewer } from '@pascal-app/viewer' +import { createPortal, useFrame, useThree } from '@react-three/fiber' +import { useEffect, useMemo, useRef } from 'react' +import { + BoxGeometry, + type BufferGeometry, + DoubleSide, + EdgesGeometry, + type Group, + PlaneGeometry, + Vector3, +} from 'three' +import { LineBasicNodeMaterial, MeshBasicNodeMaterial } from 'three/webgpu' +import { EDITOR_LAYER } from '../../lib/constants' + +// How far the outline sits outside the opening's own extents, so it reads as +// a frame *around* the opening rather than coinciding with its edges. +const PAD = 0.05 + +const ACCENT = 0x83_81_ed + +const NO_RAYCAST = () => null +const scratchScale = new Vector3() + +// Indigo accent matching the resize-arrow handles — deliberately distinct +// from the white selection outline so the highlight reads as "editable child +// here", not "this is selected". `depthTest: false` keeps both layers drawn +// on top of the wall so frameless openings (which have no visible geometry) +// are still located. Shared across every box; never disposed. +const outlineMaterial = new LineBasicNodeMaterial({ + color: ACCENT, + depthTest: false, + depthWrite: false, +}) + +// Translucent pane that fills the opening so it reads as a highlighted +// region. Sits in the opening's plane (XY, facing the wall normal) and is +// double-sided so it shows from either side of the wall. +const fillMaterial = new MeshBasicNodeMaterial({ + color: ACCENT, + transparent: true, + opacity: 0.22, + side: DoubleSide, + depthTest: false, + depthWrite: false, +}) + +function makeOutlineGeometry(width: number, height: number, depth: number): BufferGeometry { + const box = new BoxGeometry(width + PAD, height + PAD, depth + PAD) + const edges = new EdgesGeometry(box) + box.dispose() + return edges +} + +/** + * When a wall is selected, draws a translucent indigo highlight (filled pane + * + outline) over each door / window it hosts. Openings whose `openingKind` + * is `'opening'` have no visible geometry, so without this affordance the + * user can't tell an editable cutout lives there — the fill marks it (and + * stays out of the way of clicking the opening itself, which selects it). + * + * Highlights are portalled to the scene root so they sit outside the wall's + * selection-outline subtree and keep their own accent colour. + */ +export function WallOpeningHighlights() { + const selectedIds = useViewer((state) => state.selection.selectedIds) + const { scene } = useThree() + + if (selectedIds.length === 0) return null + + return createPortal( + <> + {selectedIds.map((id) => ( + + ))} + , + scene, + ) +} + +function WallOpenings({ wallId }: { wallId: string }) { + const wall = useScene((state) => state.nodes[wallId as AnyNodeId]) + + if (!wall || wall.type !== 'wall') return null + + const depth = wall.thickness ?? 0.1 + return ( + <> + {(wall.children ?? []).map((childId) => ( + + ))} + + ) +} + +function OpeningHighlight({ openingId, depth }: { openingId: string; depth: number }) { + const node = useScene((state) => state.nodes[openingId as AnyNodeId]) + const groupRef = useRef(null) + + const isOpening = node?.type === 'door' || node?.type === 'window' + const width = isOpening ? node.width : 0 + const height = isOpening ? node.height : 0 + + const outlineGeometry = useMemo( + () => (isOpening ? makeOutlineGeometry(width, height, depth) : null), + [isOpening, width, height, depth], + ) + const fillGeometry = useMemo( + () => (isOpening ? new PlaneGeometry(width, height) : null), + [isOpening, width, height], + ) + useEffect(() => () => outlineGeometry?.dispose(), [outlineGeometry]) + useEffect(() => () => fillGeometry?.dispose(), [fillGeometry]) + + // The opening's mesh (registered by its renderer) already carries the wall + // transform + its own local pose baked into `matrixWorld`. Copy that + // straight onto the highlight each frame so it tracks moves, resizes, and + // wall rotation without any wall-local maths here. + useFrame(() => { + const group = groupRef.current + if (!group) return + const obj = sceneRegistry.nodes.get(openingId as AnyNodeId) + if (!obj) { + group.visible = false + return + } + group.visible = true + obj.matrixWorld.decompose(group.position, group.quaternion, scratchScale) + }) + + if (!isOpening || !outlineGeometry || !fillGeometry) return null + + return ( + + + + + ) +} + +export default WallOpeningHighlights diff --git a/packages/editor/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx b/packages/editor/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx index ee0df985..c61b8665 100644 --- a/packages/editor/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx +++ b/packages/editor/src/components/systems/ceiling/ceiling-selection-affordance-system.tsx @@ -18,6 +18,10 @@ const BRACKET_THICKNESS = 0.04 const BRACKET_HEIGHT = 0.04 const BRACKET_Y_OFFSET = 0.035 const HIT_BOX_SIZE: [number, number, number] = [0.28, 0.08, 0.28] +// Draw the corner handles after everything else and with depth testing +// off (see materials below) so they stay visible — and clickable — even +// when a wall, roof, or the ceiling itself would otherwise occlude them. +const CORNER_RENDER_ORDER = 1000 type CornerBracketData = { corner: [number, number] @@ -149,6 +153,7 @@ const CornerBracket = ({ localPosition: [0, 0, 0], position: [corner.corner[0], ceiling.height ?? 2.5, corner.corner[1]], stopPropagation: () => e.stopPropagation(), + viaHandle: true, }) } @@ -179,9 +184,16 @@ const CornerBracket = ({ e.stopPropagation() setIsHovered(false) }} + renderOrder={CORNER_RENDER_ORDER} > - + ) @@ -208,9 +220,20 @@ const BracketLeg = ({ ] return ( - + - + ) } diff --git a/packages/editor/src/components/systems/ceiling/ceiling-system.tsx b/packages/editor/src/components/systems/ceiling/ceiling-system.tsx index 71917ba4..f557b3fd 100644 --- a/packages/editor/src/components/systems/ceiling/ceiling-system.tsx +++ b/packages/editor/src/components/systems/ceiling/ceiling-system.tsx @@ -25,15 +25,19 @@ export const CeilingSystem = () => { } for (const id of selectedIds) { - let currentId: string | null = id - let isCeilingRelated = false - let levelId: string | null = null + // Only treat a directly-selected ceiling as "reveal the grid"; a + // selected descendant (e.g. a freshly-placed ceiling light) used to + // count too, which left the opaque grid overlay covering the room + // even after the user moved on. With the grid still in front, every + // subsequent click in 3D hit the grid mesh (its `useNodeEvents` + // handlers re-selected the ceiling) instead of the items below. + const selectedNode = nodes[id as AnyNodeId] + if (selectedNode?.type !== 'ceiling') continue + let currentId: string | null = selectedNode.parentId as string | null + let levelId: string | null = null while (currentId && nodes[currentId as AnyNodeId]) { const node = nodes[currentId as AnyNodeId] - if (node?.type === 'ceiling') { - isCeilingRelated = true - } if (node?.type === 'level') { levelId = node.id break @@ -41,7 +45,7 @@ export const CeilingSystem = () => { currentId = node?.parentId as string | null } - if (isCeilingRelated && levelId) { + if (levelId) { levelsToShowCeilings.add(levelId) } } diff --git a/packages/editor/src/components/systems/roof/roof-edit-system.tsx b/packages/editor/src/components/systems/roof/roof-edit-system.tsx index e0055dd0..8708b7e4 100644 --- a/packages/editor/src/components/systems/roof/roof-edit-system.tsx +++ b/packages/editor/src/components/systems/roof/roof-edit-system.tsx @@ -1,41 +1,92 @@ import { type AnyNodeId, type RoofNode, sceneRegistry, useScene } from '@pascal-app/core' import { useViewer } from '@pascal-app/viewer' import { useEffect, useRef } from 'react' +import * as THREE from 'three' + +// Empty placeholder geometry used when we reveal segments-wrapper for +// accessory editing. The roof's CSG-merged shell is the only thing +// that should render the roof surface in this mode — the per-segment +// CSG geometry (if any was left over from a prior edit) would visually +// double the cut shape, so we strip each segment mesh back to nothing. +// `RoofSystem` rebuilds CSG on demand if the user later selects a +// segment, so destroying the cached geometry here only costs one +// recomputation per segment when the user actually wants it back. +function makeEmptySegmentGeometry(): THREE.BufferGeometry { + const g = new THREE.BufferGeometry() + g.setAttribute('position', new THREE.Float32BufferAttribute([], 3)) + // Match the four material slots the roof-segment renderer's material + // array expects (0=top, 1=side, 2=interior, 3=shingle). Without these + // groups, mesh.material is a single-material lookup that mismatches + // the array — same crash mode the BoxGeometry workaround in + // `roof-system.tsx:144` guards against. + g.addGroup(0, 0, 0) + g.addGroup(0, 0, 1) + g.addGroup(0, 0, 2) + g.addGroup(0, 0, 3) + return g +} /** * Imperatively toggles the Three.js visibility of roof objects based on the * editor selection — without causing React re-renders in RoofRenderer. * - * When a roof (or one of its segments) is selected: + * Full edit-mode (segment selected): * - merged-roof mesh is hidden * - segments-wrapper group is shown (individual segments visible for editing) * - all children are marked dirty so RoofSystem rebuilds their geometry * - * When deselected: - * - merged-roof mesh is shown - * - segments-wrapper group is hidden + * Accessory-reveal mode (a dormer/chimney/etc. hosted on a segment is selected): + * - merged-roof mesh stays visible (we don't want the appearance to jump) + * - segments-wrapper group is shown ANYWAY so anything portaled into a + * segment's registered mesh (e.g. dormer in-world handle arrows that + * don't use `portal: 'grandparent'`) is no longer inheriting the + * wrapper's hidden flag + * - segment placeholder geometry is empty, so revealing the wrapper has + * no visible cost beyond letting the handle arrows render + * + * When deselected: merged-roof shown, segments-wrapper hidden. */ export const RoofEditSystem = () => { const selectedIds = useViewer((s) => s.selection.selectedIds) const prevActiveRoofIds = useRef(new Set()) + const prevRevealRoofIds = useRef(new Set()) useEffect(() => { const nodes = useScene.getState().nodes - // Collect which roof nodes should be in "edit mode". - // Selecting the roof itself should keep the merged visual intact so - // material appearance does not jump between merged and per-segment meshes. + // Roofs where a segment itself is selected -> full edit mode (hide + // merged, show wrapper). const activeRoofIds = new Set() + // Roofs where an accessory (dormer/chimney/etc.) is selected -> only + // reveal the wrapper so handle portals into the segment mesh become + // visible. Merged stays on. + const revealRoofIds = new Set() + for (const id of selectedIds) { const node = nodes[id as AnyNodeId] if (!node) continue if (node.type === 'roof-segment' && node.parentId) { activeRoofIds.add(node.parentId) + continue + } + // Walk up one level: if the parent is a roof-segment, this is a + // hosted accessory and we want to reveal its grandparent roof's + // wrapper. Two-step lookup keeps it scoped to roof children + // without enumerating all accessory kinds. + if (!node.parentId) continue + const parent = nodes[node.parentId as AnyNodeId] + if (parent?.type === 'roof-segment' && parent.parentId) { + revealRoofIds.add(parent.parentId) } } - // Update all roofs that are currently active OR were previously active - const roofIdsToUpdate = new Set([...activeRoofIds, ...prevActiveRoofIds.current]) + // Union of roofs that need ANY state change this tick. + const roofIdsToUpdate = new Set([ + ...activeRoofIds, + ...revealRoofIds, + ...prevActiveRoofIds.current, + ...prevRevealRoofIds.current, + ]) for (const roofId of roofIdsToUpdate) { const group = sceneRegistry.nodes.get(roofId) @@ -44,25 +95,44 @@ export const RoofEditSystem = () => { const mergedMesh = group.getObjectByName('merged-roof') const segmentsWrapper = group.getObjectByName('segments-wrapper') const isActive = activeRoofIds.has(roofId) + const isReveal = revealRoofIds.has(roofId) if (mergedMesh) mergedMesh.visible = !isActive - if (segmentsWrapper) segmentsWrapper.visible = isActive + if (segmentsWrapper) segmentsWrapper.visible = isActive || isReveal const roofNode = nodes[roofId as AnyNodeId] as RoofNode | undefined if (roofNode?.children?.length) { const wasActive = prevActiveRoofIds.current.has(roofId) + const wasReveal = prevRevealRoofIds.current.has(roofId) if (isActive !== wasActive) { - // Entering edit mode: rebuild individual segment geometries - // Exiting edit mode: sync transforms + rebuild merged mesh + // Entering / exiting full edit mode: rebuild segment / merged + // geometries. Accessory-reveal doesn't need this — segments + // keep their placeholder; only their visibility flips. const { markDirty } = useScene.getState() for (const childId of roofNode.children) { markDirty(childId as AnyNodeId) } } + // Entering reveal mode (and NOT also full-edit, which already + // owns its own rebuild path): strip each segment mesh back to + // an empty placeholder so the wrapper-now-visible doesn't + // re-show stale CSG geometry from a previous segment edit. + // Without this, the host segment's CSG cut renders ON TOP of + // the merged-roof, doubling the dormer's cut shape and + // bleeding the host wall material through the dormer body. + if (isReveal && !isActive && !wasReveal && segmentsWrapper) { + for (const child of segmentsWrapper.children) { + const mesh = child as THREE.Mesh + if (!mesh.isMesh) continue + mesh.geometry?.dispose() + mesh.geometry = makeEmptySegmentGeometry() + } + } } } prevActiveRoofIds.current = activeRoofIds + prevRevealRoofIds.current = revealRoofIds }, [selectedIds]) return null diff --git a/packages/editor/src/components/tools/item/move-tool.tsx b/packages/editor/src/components/tools/item/move-tool.tsx index d7c86be9..5ba49e38 100644 --- a/packages/editor/src/components/tools/item/move-tool.tsx +++ b/packages/editor/src/components/tools/item/move-tool.tsx @@ -1,20 +1,9 @@ -import type { - AnyNodeId, - BuildingNode, - ElevatorNode, - RoofNode, - RoofSegmentNode, - SpawnNode, - StairNode, - StairSegmentNode, -} from '@pascal-app/core' +import type { AnyNodeId, ElevatorNode, SpawnNode } from '@pascal-app/core' import { nodeRegistry } from '@pascal-app/core' import { Suspense } from 'react' import useEditor from '../../../store/use-editor' -import { MoveBuildingContent } from '../building/move-building-tool' import { MoveElevatorTool } from '../elevator/move-elevator-tool' import { MoveRegistryNodeTool } from '../registry/move-registry-node-tool' -import { MoveRoofTool } from '../roof/move-roof-tool' import { getRegistryAffordanceTool } from '../shared/affordance-dispatch' /** @@ -23,14 +12,13 @@ import { getRegistryAffordanceTool } from '../shared/affordance-dispatch' * 1. `MoveRegistryNodeTool` — generic translate-on-XZ for kinds that * declare `capabilities.movable` (shelf, spawn, item-with-floor-attach, * …). - * 2. `def.affordanceTools.move` — kind-owned move component - * (slab / ceiling / wall / fence / column / item / door / window). - * Lazy-loaded via `getRegistryAffordanceTool`. - * 3. The narrow set of kinds that still have legacy movers because no - * registry equivalent has been written yet (building / elevator / - * roof / stair). Each of these has bespoke move semantics that - * don't fit the generic mover and are not yet ported to a - * kind-owned affordance. + * 2. `def.affordanceTools.move` — kind-owned move component, lazy-loaded + * via `getRegistryAffordanceTool`. Covers both generic movers + * (slab / ceiling / wall / fence / column / item / door / window) and + * the bespoke roof / roof-segment / stair / stair-segment / building + * movers ported into `@pascal-app/nodes`. + * 3. `elevator` is the lone remaining legacy arm — its bespoke cab/shaft + * mover hasn't been ported to a kind-owned affordance yet. */ export const MoveTool: React.FC<{ onNodeMoved?: (nodeId: AnyNodeId) => void @@ -54,13 +42,7 @@ export const MoveTool: React.FC<{ ) } - if (movingNode.type === 'building') - return if (movingNode.type === 'elevator') return - if (movingNode.type === 'roof' || movingNode.type === 'roof-segment') - return - if (movingNode.type === 'stair' || movingNode.type === 'stair-segment') - return return null } diff --git a/packages/editor/src/components/tools/item/use-placement-coordinator.tsx b/packages/editor/src/components/tools/item/use-placement-coordinator.tsx index 8edc1207..87244640 100644 --- a/packages/editor/src/components/tools/item/use-placement-coordinator.tsx +++ b/packages/editor/src/components/tools/item/use-placement-coordinator.tsx @@ -1168,9 +1168,15 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea const mesh = sceneRegistry.nodes.get(draft.id) if (mesh) mesh.position.copy(gridPosition.current) - // Publish live transform for 2D floorplan + // Publish live transform for 2D floorplan. The item override in + // `floorplan-registry-layer` treats `live.position` as building-local + // plan coords (parentId forced to null so the resolver renders it + // directly), so publish the building-local cursor — not the + // world-space `result.cursorPosition`, which otherwise lands the 2D + // visual off the cursor whenever the building isn't at the origin + // with zero rotation. useLiveTransforms.getState().set(draft.id, { - position: result.cursorPosition, + position: [cc.x, cc.y, cc.z], rotation: cursorGroupRef.current.rotation.y, }) } @@ -1324,7 +1330,9 @@ export function usePlacementCoordinator(config: PlacementCoordinatorConfig): Rea // ---- Keyboard rotation ---- - const ROTATION_STEP = Math.PI / 2 + // 45° increments — matches the R-key rotation step for already-placed + // items (use-keyboard.ts) so the ghost/duplicate rotates the same way. + const ROTATION_STEP = Math.PI / 4 const onKeyDown = (event: KeyboardEvent) => { if (event.key === 'Shift') { shiftFreeRef.current = true diff --git a/packages/editor/src/components/tools/select/box-select-tool.tsx b/packages/editor/src/components/tools/select/box-select-tool.tsx index 2af79ac1..3862e1cc 100644 --- a/packages/editor/src/components/tools/select/box-select-tool.tsx +++ b/packages/editor/src/components/tools/select/box-select-tool.tsx @@ -192,7 +192,14 @@ function objectBoundsIntersectsBounds(nodeId: string, bounds: Bounds): boolean { ) } -function collectNodeIdsInBounds(bounds: Bounds): string[] { +/** + * Collect the ids of selectable nodes on the active level. When `bounds` is a + * rectangle, only nodes intersecting it are returned (a box-select hit-test). + * When `bounds` is `null`, every selectable node on the level is returned — + * the full set the box-select could ever capture — which lets the caller tell + * whether a drag selected the entire level. + */ +function collectNodeIdsInBounds(bounds: Bounds | null): string[] { const { levelId } = useViewer.getState().selection const { nodes } = useScene.getState() const { phase, structureLayer } = useEditor.getState() @@ -208,7 +215,7 @@ function collectNodeIdsInBounds(bounds: Bounds): string[] { const node = nodes[childId as AnyNodeId] if (!node || node.type !== 'zone') continue const zone = node as ZoneNode - if (polygonIntersectsBounds(zone.polygon, bounds)) { + if (!bounds || polygonIntersectsBounds(zone.polygon, bounds)) { result.push(zone.id) } } @@ -221,6 +228,7 @@ function collectNodeIdsInBounds(bounds: Bounds): string[] { if (node.type === 'wall' || node.type === 'fence') { const wall = node as WallNode if ( + !bounds || segmentIntersectsBounds(wall.start[0], wall.start[1], wall.end[0], wall.end[1], bounds) ) { result.push(wall.id) @@ -237,40 +245,40 @@ function collectNodeIdsInBounds(bounds: Bounds): string[] { (child as ItemNode).asset.category === 'window')) ) { const xz = getNodeWorldXZ(child.id) - if (xz && pointInBounds(xz[0], xz[1], bounds)) { + if (!bounds || (xz && pointInBounds(xz[0], xz[1], bounds))) { result.push(child.id) } } } } else if (node.type === 'slab') { const slab = node as SlabNode - if (polygonIntersectsBounds(slab.polygon, bounds)) { + if (!bounds || polygonIntersectsBounds(slab.polygon, bounds)) { result.push(slab.id) } } else if (node.type === 'ceiling') { const ceiling = node as CeilingNode - if (polygonIntersectsBounds(ceiling.polygon, bounds)) { + if (!bounds || polygonIntersectsBounds(ceiling.polygon, bounds)) { result.push(ceiling.id) } } else if (node.type === 'roof') { const xz = getNodeWorldXZ(node.id) - if (xz && pointInBounds(xz[0], xz[1], bounds)) { + if (!bounds || (xz && pointInBounds(xz[0], xz[1], bounds))) { result.push(node.id) } } else if (node.type === 'stair') { - if (objectBoundsIntersectsBounds(node.id, bounds)) { + if (!bounds || objectBoundsIntersectsBounds(node.id, bounds)) { result.push(node.id) } } else if (node.type === 'column') { const column = node as ColumnNode - if (objectBoundsIntersectsBounds(column.id, bounds)) { + if (!bounds || objectBoundsIntersectsBounds(column.id, bounds)) { result.push(column.id) } } else if (node.type === 'item') { const item = node as ItemNode if (item.asset.category === 'door' || item.asset.category === 'window') continue const xz = getNodeWorldXZ(item.id) - if (xz && pointInBounds(xz[0], xz[1], bounds)) { + if (!bounds || (xz && pointInBounds(xz[0], xz[1], bounds))) { result.push(item.id) } } else if (isRegistrySelectable(node.type)) { @@ -525,7 +533,17 @@ const BoxSelectToolInner: React.FC = () => { const merged = Array.from(new Set([...currentIds, ...ids])) useViewer.getState().setSelection({ selectedIds: merged }) } else { - useViewer.getState().setSelection({ selectedIds: ids }) + // If the box captured every selectable node on the level, promote to + // selecting the parent building — same as clicking it in the side menu. + const allOnLevel = collectNodeIdsInBounds(null) + const { buildingId } = useViewer.getState().selection + const selectedEntireLevel = allOnLevel.length > 0 && ids.length === allOnLevel.length + + if (selectedEntireLevel && buildingId) { + useViewer.getState().setSelection({ buildingId }) + } else { + useViewer.getState().setSelection({ selectedIds: ids }) + } } // Prevent the subsequent grid:click from deselecting diff --git a/packages/editor/src/components/tools/shared/polygon-editor.tsx b/packages/editor/src/components/tools/shared/polygon-editor.tsx index edf8e71d..80a10b75 100644 --- a/packages/editor/src/components/tools/shared/polygon-editor.tsx +++ b/packages/editor/src/components/tools/shared/polygon-editor.tsx @@ -609,10 +609,17 @@ export const PolygonEditor: React.FC = ({ {/* Per-side resize arrow — points outward from the edge. Dragging it pulls (or pushes) only this edge's two vertices along the outward normal; the opposite side - of the polygon stays put. */} + of the polygon stays put. + + Stays on SCENE_LAYER (no `layers={EDITOR_LAYER}`) so the + post-processing scenePass picks it up in the depth/normal + MRT and the ink-edge shader paints dark outlines on the + chevron — same treatment as the wall and registry height + arrows. The surrounding line/vertex/edge-box handles stay + on EDITOR_LAYER because they're not chevrons and reading + as flat overlays is the intended look there. */} { if (e.button !== 0) return e.stopPropagation() @@ -638,8 +645,12 @@ export const PolygonEditor: React.FC = ({ color={ isDragging ? '#22c55e' : isHovered ? EDGE_ARROW_HOVER_COLOR : EDGE_ARROW_COLOR } + // depthTest off → still drawn on top of underlying surface. + // depthWrite on → silhouette enters the depth buffer so the + // ink-edge shader paints it from every angle, like all the + // other registry chevrons. depthTest={false} - depthWrite={false} + depthWrite={true} transparent /> diff --git a/packages/editor/src/components/ui/panels/parametric-inspector.tsx b/packages/editor/src/components/ui/panels/parametric-inspector.tsx index 783d45c9..78227c34 100644 --- a/packages/editor/src/components/ui/panels/parametric-inspector.tsx +++ b/packages/editor/src/components/ui/panels/parametric-inspector.tsx @@ -5,6 +5,7 @@ import { type AnyNodeId, type IconRef, nodeRegistry, + type ParamAction, type ParamField, useScene, } from '@pascal-app/core' @@ -104,6 +105,10 @@ export function ParametricInspector({ footer }: { footer?: React.ReactNode } = { const canMove = !!def.capabilities.movable const canDelete = def.capabilities.deletable !== false + const TrailingSection = parametrics.trailingSection + ? resolveCustomPanel(parametrics.trailingSection) + : null + return ( {parametrics.groups.map((group, gi) => ( @@ -118,12 +123,20 @@ export function ParametricInspector({ footer }: { footer?: React.ReactNode } = { ))} ))} - {(canMove || canDelete) && ( + {TrailingSection && ( + + + + )} + {(canMove || canDelete || (parametrics.actions && parametrics.actions.length > 0)) && ( {canMove && ( } label="Move" onClick={handleMove} /> )} + {parametrics.actions?.map((action, i) => ( + + ))} {canDelete && ( ; nodeId: AnyNodeId }) { + const disabled = useScene((s) => { + if (!action.enabledIf) return false + const n = s.nodes[nodeId] + return n ? !action.enabledIf(n as AnyNode) : false + }) + return ( + + ) : undefined + } + label={action.label} + onClick={() => { + const live = useScene.getState().nodes[nodeId] + if (live) action.onClick(live as AnyNode) + }} + /> + ) +} + function renderIcon(ref: IconRef | undefined): React.ReactNode | undefined { if (!ref) return undefined if (ref.kind === 'url') { diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/box-vent-tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/gutter-tree-node.tsx similarity index 87% rename from packages/editor/src/components/ui/sidebar/panels/site-panel/box-vent-tree-node.tsx rename to packages/editor/src/components/ui/sidebar/panels/site-panel/gutter-tree-node.tsx index f3fc010c..289c4480 100644 --- a/packages/editor/src/components/ui/sidebar/panels/site-panel/box-vent-tree-node.tsx +++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/gutter-tree-node.tsx @@ -1,4 +1,4 @@ -import { type AnyNodeId, type BoxVentNode, useScene } from '@pascal-app/core' +import { type AnyNodeId, type GutterNode, useScene } from '@pascal-app/core' import { useViewer } from '@pascal-app/viewer' import Image from 'next/image' import { memo, useCallback, useState } from 'react' @@ -7,20 +7,20 @@ import { InlineRenameInput } from './inline-rename-input' import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node' import { TreeNodeActions } from './tree-node-actions' -interface BoxVentTreeNodeProps { +interface GutterTreeNodeProps { nodeId: AnyNodeId depth: number isLast?: boolean } -export const BoxVentTreeNode = memo(function BoxVentTreeNode({ +export const GutterTreeNode = memo(function GutterTreeNode({ nodeId, depth, isLast, -}: BoxVentTreeNodeProps) { +}: GutterTreeNodeProps) { const [isEditing, setIsEditing] = useState(false) const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false) - const node = useScene((s) => s.nodes[nodeId] as BoxVentNode | undefined) + const node = useScene((s) => s.nodes[nodeId] as GutterNode | undefined) const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId)) const isHovered = useViewer((state) => state.hoveredId === nodeId) const setSelection = useViewer((state) => state.setSelection) @@ -42,7 +42,7 @@ export const BoxVentTreeNode = memo(function BoxVentTreeNode({ [nodeId, setSelection], ) - const defaultName = node?.name || 'Box Vent' + const defaultName = node?.name || 'Gutter' return ( s.nodes[nodeId]?.visible !== false) - const node = useScene((s) => s.nodes[nodeId] as RidgeVentNode | undefined) + const node = useScene((s) => s.nodes[nodeId]) const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId)) const isHovered = useViewer((state) => state.hoveredId === nodeId) const setSelection = useViewer((state) => state.setSelection) const setHoveredId = useViewer((state) => state.setHoveredId) + const presentation = node ? nodeRegistry.get(node.type)?.presentation : undefined + const icon = presentation?.icon + const iconSrc = icon?.kind === 'url' ? icon.src : '/icons/roof.png' + const defaultName = node?.name || presentation?.label || 'Node' + const handleClick = useCallback( (e: React.MouseEvent) => { e.stopPropagation() @@ -42,8 +54,6 @@ export const RidgeVentTreeNode = memo(function RidgeVentTreeNode({ [nodeId, setSelection], ) - const defaultName = node?.name || 'Ridge Vent' - return ( } @@ -55,7 +65,7 @@ export const RidgeVentTreeNode = memo(function RidgeVentTreeNode({ alt="" className="object-contain opacity-60" height={14} - src="/icons/roof.png" + src={iconSrc} width={14} /> } diff --git a/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node.tsx b/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node.tsx index 6835a62d..a69f89ee 100644 --- a/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node.tsx +++ b/packages/editor/src/components/ui/sidebar/panels/site-panel/tree-node.tsx @@ -54,7 +54,6 @@ export function focusTreeNode(nodeId: AnyNodeId) { } import { cn } from '../../../../../lib/utils' -import { BoxVentTreeNode } from './box-vent-tree-node' import { BuildingTreeNode } from './building-tree-node' import { CeilingTreeNode } from './ceiling-tree-node' import { ChimneyTreeNode } from './chimney-tree-node' @@ -63,9 +62,10 @@ import { DoorTreeNode } from './door-tree-node' import { DormerTreeNode } from './dormer-tree-node' import { ElevatorTreeNode } from './elevator-tree-node' import { FenceTreeNode } from './fence-tree-node' +import { GutterTreeNode } from './gutter-tree-node' import { ItemTreeNode } from './item-tree-node' import { LevelTreeNode } from './level-tree-node' -import { RidgeVentTreeNode } from './ridge-vent-tree-node' +import { RegistryTreeNode } from './registry-tree-node' import { RoofTreeNode } from './roof-tree-node' import { ShelfTreeNode } from './shelf-tree-node' import { SlabTreeNode } from './slab-tree-node' @@ -98,7 +98,7 @@ const treeNodeByType: Record< isLast?: boolean nodeId: AnyNodeId }>, - 'box-vent': BoxVentTreeNode, + 'box-vent': RegistryTreeNode, ceiling: CeilingTreeNode, chimney: ChimneyTreeNode, dormer: DormerTreeNode, @@ -123,7 +123,11 @@ const treeNodeByType: Record< }>, wall: WallTreeNode, fence: FenceTreeNode, - 'ridge-vent': RidgeVentTreeNode, + gutter: GutterTreeNode, + 'ridge-vent': RegistryTreeNode, + 'turbine-vent': RegistryTreeNode, + cupola: RegistryTreeNode, + 'eyebrow-vent': RegistryTreeNode, roof: RoofTreeNode, stair: StairTreeNode, door: DoorTreeNode, diff --git a/packages/editor/src/index.tsx b/packages/editor/src/index.tsx index c5718baf..5023ce55 100644 --- a/packages/editor/src/index.tsx +++ b/packages/editor/src/index.tsx @@ -12,6 +12,7 @@ export { default as Editor } from './components/editor' // surface uses the shorter, shell-friendly names from the unified // preset-system spec. export { FloatingActionMenu as FloatingMenu } from './components/editor/floating-action-menu' +export { formatMeasurement, MeasurementPill } from './components/editor/measurement-pill' export { type SnapshotCameraData, ThumbnailGenerator, @@ -191,7 +192,7 @@ export { getActivePaintMaterialLabel, hasActivePaintMaterial, } from './lib/material-paint' -export { duplicateRoofSubtree } from './lib/roof-duplication' +export { clearRoofDuplicateMetadata, duplicateRoofSubtree } from './lib/roof-duplication' export type { SceneGraph } from './lib/scene' export { applySceneGraphToEditor } from './lib/scene' export { triggerSFX } from './lib/sfx-bus' diff --git a/packages/editor/src/lib/material-paint.ts b/packages/editor/src/lib/material-paint.ts index 12c8dcd2..a2015966 100644 --- a/packages/editor/src/lib/material-paint.ts +++ b/packages/editor/src/lib/material-paint.ts @@ -3,7 +3,6 @@ import { type AnyNode, type AnyNodeId, - type BoxVentNode, type CeilingNode, type ChimneyMaterialRole, type ChimneyNode, @@ -19,7 +18,6 @@ import { type MaterialSchema, type MaterialTarget, nodeRegistry, - type RidgeVentNode, type RoofNode, type RoofSegmentNode, type RoofSegmentSurfaceMaterialRole, @@ -46,6 +44,9 @@ export type PaintableMaterialTarget = Extract< | 'dormer' | 'box-vent' | 'ridge-vent' + | 'turbine-vent' + | 'cupola' + | 'eyebrow-vent' > export type SingleSurfaceMaterialRole = 'surface' @@ -221,14 +222,7 @@ export function buildStairSurfaceMaterialPatch( } export function buildSingleSurfaceMaterialPatch< - TNode extends - | FenceNode - | ColumnNode - | SlabNode - | CeilingNode - | ShelfNode - | BoxVentNode - | RidgeVentNode, + TNode extends FenceNode | ColumnNode | SlabNode | CeilingNode | ShelfNode, >(material: MaterialSchema | undefined, materialPreset: string | undefined): Partial { return { material, @@ -375,11 +369,11 @@ export function resolveActivePaintMaterialFromSelection(params: { selectedNode.type === 'column' || selectedNode.type === 'slab' || selectedNode.type === 'ceiling' || - selectedNode.type === 'shelf' || - selectedNode.type === 'box-vent' || - selectedNode.type === 'ridge-vent') && + selectedNode.type === 'shelf') && selectedMaterialTarget.role === 'surface' ) { + // Roof vents previously lived here too; they now resolve via the + // registry-driven `getEffectiveMaterial` path at the top of this function. const target = selectedNode.type return hasActivePaintMaterial({ material: selectedNode.material, @@ -455,5 +449,17 @@ export function resolvePaintTargetFromSelection(params: { return 'ridge-vent' } + if (selectedNode.type === 'turbine-vent') { + return 'turbine-vent' + } + + if (selectedNode.type === 'cupola') { + return 'cupola' + } + + if (selectedNode.type === 'eyebrow-vent') { + return 'eyebrow-vent' + } + return null } diff --git a/packages/editor/src/store/use-editor.tsx b/packages/editor/src/store/use-editor.tsx index 232d3532..c8c32d01 100644 --- a/packages/editor/src/store/use-editor.tsx +++ b/packages/editor/src/store/use-editor.tsx @@ -86,10 +86,15 @@ export type StructureTool = | 'shelf' | 'box-vent' | 'ridge-vent' + | 'turbine-vent' + | 'cupola' + | 'eyebrow-vent' | 'chimney' | 'solar-panel' | 'skylight' | 'dormer' + | 'gutter' + | 'downspout' // Furnish mode tools (items and decoration) export type FurnishTool = 'item' diff --git a/packages/nodes/src/box-vent/definition.ts b/packages/nodes/src/box-vent/definition.ts index e0d61abd..ff546b8a 100644 --- a/packages/nodes/src/box-vent/definition.ts +++ b/packages/nodes/src/box-vent/definition.ts @@ -1,7 +1,152 @@ -import { BoxVentNode as BoxVentNodeSchema, type NodeDefinition } from '@pascal-app/core' +import { + BoxVentNode as BoxVentNodeSchema, + type BoxVentNode as BoxVentNodeType, + type HandleDescriptor, + type NodeDefinition, +} from '@pascal-app/core' +import { buildBoxVentFloorplan } from './floorplan' +import { surfacePaintCapability } from '../shared/surface-paint' import { boxVentParametrics } from './parametrics' import { BoxVentNode } from './schema' +// Edge-to-arrow-center offset, matching the chimney / dormer cadence. +const SIDE_HANDLE_OFFSET = 0.25 +const HEIGHT_HANDLE_OFFSET = 0.2 +// Snug to the vent corner — vents are small (default 0.4 m), so the big +// chimney/dormer offset floated the rotate icon far off the item. +const ROTATE_CORNER_OFFSET = 0.1 +// Min sizes — vents are small (default 0.4 × 0.4 × 0.15), so the floor +// is well below the default values to allow shrinking without locking. +const MIN_DIM = 0.1 +const MIN_HEIGHT = 0.05 + +// Mid-Y of the vent body in vent-mesh-local. The vent sits with its base +// at y=0 on the slope, so mid is half the height. Side / depth / rotate +// chevrons all place their handle at this Y to read as "this dimension +// is the vent body". +function getBodyMidY(n: BoxVentNodeType): number { + return Math.max(0.001, n.height) / 2 +} + +// Width arrow on the +X (right) or -X (left) side of the vent body. +// Asymmetric resize — anchored edge stays world-fixed by recentering +// `position` along the vent's own +X arm in segment frame (matches the +// chimney / dormer width handle math). The slope tilt rotates around +// the vent's base point, so segment-local XZ of the anchored edge stays +// the same regardless of tilt; only the yaw matters for the projection. +function boxVentWidthHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'x', + anchor: side === 'right' ? 'min' : 'max', + min: MIN_DIM, + currentValue: (n) => n.width, + apply: (initial, newWidth) => { + const rotY = initial.rotation ?? 0 + const armX = Math.cos(rotY) + const armZ = -Math.sin(rotY) + const anchorX = initial.position[0] - sign * (initial.width / 2) * armX + const anchorZ = initial.position[2] - sign * (initial.width / 2) * armZ + const newCenterX = anchorX + sign * (newWidth / 2) * armX + const newCenterZ = anchorZ + sign * (newWidth / 2) * armZ + return { + width: newWidth, + position: [newCenterX, initial.position[1], newCenterZ], + } + }, + placement: { + position: (n) => [sign * (n.width / 2 + SIDE_HANDLE_OFFSET), getBodyMidY(n), 0], + // Flip the left chevron so it points outward toward -X. The + // generic LinearArrow auto-orients for axis 'z'; +X / -X facing + // is up to the descriptor. + rotationY: () => (side === 'right' ? 0 : Math.PI), + }, + } +} + +// Depth arrow on the +Z side. Symmetric (anchor 'center') matches the +// chimney / dormer handle count budget — splitting into asymmetric front / +// back chevrons here would push the vent over the same TSL/MRT pipeline +// threshold those nodes already document. Single symmetric chevron grows +// the depth from the centre. +function boxVentDepthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'z', + anchor: 'center', + min: MIN_DIM, + currentValue: (n) => n.depth, + apply: (_n, newValue) => ({ depth: newValue }), + placement: { + position: (n) => [0, getBodyMidY(n), n.depth / 2 + SIDE_HANDLE_OFFSET], + }, + } +} + +// Height arrow above the top of the vent. anchor='min' so the base stays +// pinned to the slope at vent-local y=0 and the top edge follows the +// pointer. Plain chevron (not tracker) — at default sizes (~0.15 m) a +// dashed leader from base to top reads as visual noise rather than a +// dimension cue. +function boxVentHeightHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + min: MIN_HEIGHT, + currentValue: (n) => n.height, + apply: (_n, newValue) => ({ height: Math.max(MIN_HEIGHT, newValue) }), + placement: { + position: (n) => [0, Math.max(n.height, MIN_HEIGHT) + HEIGHT_HANDLE_OFFSET, 0], + }, + } +} + +// Whole-vent rotation gizmo at the +X/+Z corner of the body footprint. +// The registered group already centres on the vent and applies its +// composed slope+yaw quaternion, so the default rotation pivot is +// correct — no `rotationCenter` override needed. +function boxVentRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }), + placement: { + position: (n) => [ + n.width / 2 + ROTATE_CORNER_OFFSET, + getBodyMidY(n), + n.depth / 2 + ROTATE_CORNER_OFFSET, + ], + // Aim the two-headed icon along the +X+Z corner bisector. + rotationY: () => -Math.PI / 4, + }, + // Guide ring centred on the vent (drawn at the handle-frame origin), + // sized to pass through the corner icon so the icon rides the ring and + // the whole control reads as encircling the item — matches solar-panel. + decoration: { + kind: 'ring', + radius: (n) => + Math.hypot(n.width / 2 + ROTATE_CORNER_OFFSET, n.depth / 2 + ROTATE_CORNER_OFFSET), + y: (n) => getBodyMidY(n), + }, + } +} + +// `portal: 'grandparent'` on every handle: the vent mesh is mounted under +// the roof's `roof-elements` group (reproducing the segment transform), so +// the handle rig must ride the roof→segment→node frame chain — same as +// solar-panel / skylight. Without it the handles (and the rotate arc) mount +// in the bare segment-mesh frame and render offset from the vent. +const boxVentHandles: HandleDescriptor[] = [ + boxVentWidthHandle('right'), + boxVentWidthHandle('left'), + boxVentDepthHandle(), + boxVentHeightHandle(), + boxVentRotateHandle(), +].map((h): HandleDescriptor => ({ ...h, portal: 'grandparent' })) + /** * Box vent — a small louvered ventilation box that sits on a roof * slope. Parented to a `roof-segment`; position is segment-local; @@ -45,6 +190,8 @@ export const boxVentDefinition: NodeDefinition = { selectable: { hitVolume: 'bbox' }, duplicable: true, deletable: true, + // Single painted surface — registry-driven paint dispatch (see chimney). + paint: surfacePaintCapability, // Mounts on a roof segment via `roofSegmentId`. Sits ON TOP of the // slope — no `buildCut`, just the dirty cascade so the parent // roof's merged shell rebuilds when the vent moves / resizes. @@ -52,6 +199,8 @@ export const boxVentDefinition: NodeDefinition = { }, parametrics: boxVentParametrics, + handles: boxVentHandles, + floorplan: buildBoxVentFloorplan, renderer: { kind: 'parametric', diff --git a/packages/nodes/src/box-vent/floorplan.ts b/packages/nodes/src/box-vent/floorplan.ts new file mode 100644 index 00000000..36c572bc --- /dev/null +++ b/packages/nodes/src/box-vent/floorplan.ts @@ -0,0 +1,207 @@ +import type { + AnyNodeId, + BoxVentNode, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RoofNode, + RoofSegmentNode, +} from '@pascal-app/core' + +/** + * Floor-plan builder for a box vent — a small attic-exhaust vent on a roof + * slope. Seen from above it reads as its footprint per style: `box` is a + * cover with an inset riser, `cap` flares to a flange past the body, and + * `dome` is a flush ellipse. + * + * Coordinate frame mirrors the 3D transform stack + * (roof → roof-segment → vent), same as the chimney builder. `position` + * is segment-local (X = width, Z = depth; Y ignored — anchored to the + * slope). `rotation` is yaw. Rotations negated for the floor plan's y-down + * convention. + */ +export function buildBoxVentFloorplan( + node: BoxVentNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const rot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + 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 + + // Painted-metal vent — cool grey, accent on select, light blue on hover. + const baseInk = '#475569' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const fill = showSelectedChrome ? '#fed7aa' : '#dbe1e8' + const fillOpacity = showSelectedChrome ? 0.55 : 0.7 + const lineWidth = showSelectedChrome ? 0.03 : 0.02 + + const hw = Math.max(node.width, 0.05) / 2 + const hd = Math.max(node.depth, 0.05) / 2 + const style = node.style ?? 'cap' + + const rect = (halfX: number, halfZ: number): FloorplanPoint[] => [ + toPlan(-halfX, -halfZ), + toPlan(halfX, -halfZ), + toPlan(halfX, halfZ), + toPlan(-halfX, halfZ), + ] + const ellipse = (halfX: number, halfZ: number): FloorplanPoint[] => { + const pts: FloorplanPoint[] = [] + const N = 28 + for (let i = 0; i < N; i++) { + const a = (i / N) * Math.PI * 2 + pts.push(toPlan(halfX * Math.cos(a), halfZ * Math.sin(a))) + } + return pts + } + + const children: FloorplanGeometry[] = [] + + if (style === 'dome') { + // Outer = the round flange plate (dome radius + flange overhang). + const ovh = Math.max(0, node.hoodOverhang ?? 0.04) + const outer = ellipse(hw + ovh, hd + ovh) + children.push({ + kind: 'polygon', + points: outer, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }) + children.push({ + kind: 'polygon', + points: outer, + fill, + fillOpacity, + stroke, + strokeWidth: lineWidth, + pointerEvents: 'none', + }) + // Dome footprint inside the flange. + children.push({ + kind: 'polygon', + points: ellipse(hw, hd), + fill: 'none', + stroke, + strokeWidth: lineWidth * 0.8, + strokeOpacity: 0.7, + pointerEvents: 'none', + }) + // Inner ring suggests the dome bulge. + children.push({ + kind: 'polygon', + points: ellipse(hw * 0.5, hd * 0.5), + fill: 'none', + stroke, + strokeWidth: lineWidth * 0.8, + strokeOpacity: 0.5, + pointerEvents: 'none', + }) + } else if (style === 'cap') { + // Flange flares past the body by `hoodOverhang` on all sides. + const ovh = Math.max(0, node.hoodOverhang ?? 0.04) + const outer = rect(hw + ovh, hd + ovh) + children.push({ + kind: 'polygon', + points: outer, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }) + children.push({ + kind: 'polygon', + points: outer, + fill, + fillOpacity, + stroke, + strokeWidth: lineWidth, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + // Body footprint inside the flange. + children.push({ + kind: 'polygon', + points: rect(hw, hd), + fill: 'none', + stroke, + strokeWidth: lineWidth * 0.8, + strokeOpacity: 0.7, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + } else { + // box: cover footprint + inset riser. + const outer = rect(hw, hd) + children.push({ + kind: 'polygon', + points: outer, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }) + children.push({ + kind: 'polygon', + points: outer, + fill, + fillOpacity, + stroke, + strokeWidth: lineWidth, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + const inset = Math.max(0, Math.min(node.baseInset ?? 0.06, Math.min(hw, hd) - 0.01)) + if (inset > 0.001) { + children.push({ + kind: 'polygon', + points: rect(hw - inset, hd - inset), + fill: 'none', + stroke, + strokeWidth: lineWidth * 0.8, + strokeOpacity: 0.7, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + } + } + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/box-vent/geometry.ts b/packages/nodes/src/box-vent/geometry.ts index 710f9652..20cc59a0 100644 --- a/packages/nodes/src/box-vent/geometry.ts +++ b/packages/nodes/src/box-vent/geometry.ts @@ -1,6 +1,5 @@ import { type BoxVentNode, getActiveRoofHeight, type RoofType } from '@pascal-app/core' import * as THREE from 'three' -import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js' /** * Pure builder for the box-vent mesh. Models a real attic box vent: @@ -27,8 +26,6 @@ import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js export function buildBoxVentGeometry(node: BoxVentNode): THREE.BufferGeometry { if (node.style === 'box') return buildBoxShape(node) if (node.style === 'cap') return buildCapShape(node) - // `dome` will get its own dedicated builder in Step 3. For now it - // keeps the unified dome+skirt shape so the visual doesn't regress. return buildDomeStyleShape(node) } @@ -374,191 +371,167 @@ function clamp01(value: number): number { return value < 0 ? 0 : value > 1 ? 1 : value } -// ─── Dome style (current implementation) ───────────────────────────── -// Body + dome cap with flange skirt. Drives the `dome` style until -// Step 3 swaps it for a dedicated builder. +// ─── Dome style (bullnose vent) ────────────────────────────────────── +// A stainless bullnose vent: a smooth half-ellipsoid dome that overhangs a +// short lifted collar — the collar is what gives the vent its visible depth +// standing off the roof — all seated on a wide round FLANGE plate that +// mounts to the roof. Every part is a surface of revolution; no square +// geometry anywhere. +// +// .-""-. ← dome (overhangs the collar lip) +// / \ +// | | | | ← lifted collar (the depth above the flange) +// __| |__ +// |______________| ← round flange plate on the roof +// +// `domeCurvature` shapes the cap; `hoodOverhang` sets how far the flange +// plate extends past the dome. function buildDomeStyleShape(node: BoxVentNode): THREE.BufferGeometry { - const w = node.width - const d = node.depth + const rx = node.width / 2 + const rz = node.depth / 2 const h = node.height - // Dome has no flange — the cap rolls down flush to the body footprint. - // `hoodOverhang` is hidden from the panel for this style; we ignore any - // stored value so legacy nodes still render flush. - const overhang = 0 + const power = Math.max(0.3, Math.min(1.5, node.domeCurvature ?? 1.0)) + const lng = 24 + const lat = 8 - const bodyH = h * 0.32 - const hoodH = h - bodyH + // Wide flange plate (extends past the dome by `hoodOverhang`) + thickness. + const brim = Math.max(0, node.hoodOverhang ?? 0.04) + const rxF = rx + brim + const rzF = rz + brim + const brimThk = Math.min(0.015, h * 0.18) + // Collar: a touch narrower than the dome so the cap overhangs it, and tall + // enough to read as real lift above the flange. + const collarRx = rx * 0.9 + const collarRz = rz * 0.9 + const collarH = Math.max(0.012, Math.min(h * 0.4, h - brimThk - 0.02)) + const domeBaseY = brimThk + collarH + const domeH = h - domeBaseY - return ( - mergeGeometries( - [buildBody(w, d, bodyH), buildDomeHood(w, d, overhang, bodyH, hoodH, 'dome')], - false, - ) ?? buildBody(w, d, bodyH) - ) -} - -// ─── Body ──────────────────────────────────────────────────────────── - -function buildBody(w: number, d: number, bodyH: number): THREE.BufferGeometry { - const hw = w / 2 - const hd = d / 2 const positions: number[] = [] const normals: number[] = [] const uvs: number[] = [] - // +X side - pushQuad( - positions, - normals, - uvs, - [hw, 0, -hd], - [hw, 0, hd], - [hw, bodyH, hd], - [hw, bodyH, -hd], - [1, 0, 0], - ) - // -X side - pushQuad( - positions, - normals, - uvs, - [-hw, 0, hd], - [-hw, 0, -hd], - [-hw, bodyH, -hd], - [-hw, bodyH, hd], - [-1, 0, 0], - ) - // +Z side - pushQuad( - positions, - normals, - uvs, - [hw, 0, hd], - [-hw, 0, hd], - [-hw, bodyH, hd], - [hw, bodyH, hd], - [0, 0, 1], - ) - // -Z side - pushQuad( - positions, - normals, - uvs, - [-hw, 0, -hd], - [hw, 0, -hd], - [hw, bodyH, -hd], - [-hw, bodyH, -hd], - [0, 0, -1], - ) - // Bottom (closes the body so it reads as solid from below) - pushQuad( - positions, - normals, - uvs, - [-hw, 0, -hd], - [-hw, 0, hd], - [hw, 0, hd], - [hw, 0, -hd], - [0, -1, 0], - ) + const radial = (a: number[], _b: number[], c: number[]): number[] => { + const mx = (a[0]! + c[0]!) / 2 + const mz = (a[2]! + c[2]!) / 2 + const l = Math.hypot(mx, mz) || 1 + return [mx / l, 0, mz / l] + } + const up = (): number[] => [0, 1, 0] + const down = (): number[] => [0, -1, 0] - return buildBufferGeometry(positions, normals, uvs) -} + const flangeBottom = ringAt(rxF, rzF, 0, lng) + const flangeTop = ringAt(rxF, rzF, brimThk, lng) + const collarFoot = ringAt(collarRx, collarRz, brimThk, lng) + const collarTop = ringAt(collarRx, collarRz, domeBaseY, lng) + const domeBase = ringAt(rx, rz, domeBaseY, lng) + const center = ringAt(0, 0, 0, lng) -// ─── Dome hood ─────────────────────────────────────────────────────── -// Closed rounded cap (half-ellipsoid sampled on a lat × lng grid) plus -// a flat skirt that extends past the body by `overhang` — that skirt is -// what reads as the flashing flange in the reference photo. The cap is -// fully closed at the apex (single pole vertex), so there's no empty -// plateau like the old pyramid hood had. -// -// `style` shifts the dome shape subtly: -// - 'standard' → moderate dome, gentle roll-off near the apex -// - 'low-profile' → very shallow dome (mostly a curved pillow) -// - 'dome' → near-hemisphere with sharper apex curvature + // Flange: underside (down), outer rim (radial), top face (up). + addBand(positions, normals, uvs, flangeBottom, center, lng, down) + addBand(positions, normals, uvs, flangeBottom, flangeTop, lng, radial) + addBand(positions, normals, uvs, flangeTop, collarFoot, lng, up) + // Lifted collar wall (radial) + the overhanging dome-lip underside (down). + addBand(positions, normals, uvs, collarFoot, collarTop, lng, radial) + addBand(positions, normals, uvs, collarTop, domeBase, lng, down) -function buildDomeHood( - w: number, - d: number, - overhang: number, - bodyH: number, - hoodH: number, - style: BoxVentNode['style'], -): THREE.BufferGeometry { - const positions: number[] = [] - const normals: number[] = [] - const uvs: number[] = [] - - const bw = w / 2 + overhang - const bd = d / 2 + overhang - const y0 = bodyH - - // Skirt underside - pushQuad( - positions, - normals, - uvs, - [-bw, y0, -bd], - [-bw, y0, bd], - [bw, y0, bd], - [bw, y0, -bd], - [0, -1, 0], - ) - - // Sample a low-resolution dome on a lat × lng grid. The radial decay - // is `cos(phi) ^ radialPower` — `radialPower < 1` keeps the dome wide - // longer near the top (soft pillow silhouette, like the reference - // photo). `dome` uses a true ellipsoid; `cap` defaults to a softer - // pillow until Step 2 swaps it for the pyramid hood. - const radialPower = style === 'dome' ? 1.0 : 0.65 - const lat = 6 - const lng = 14 - const points: THREE.Vector3[][] = [] - for (let i = 0; i <= lat; i++) { - const row: THREE.Vector3[] = [] + // Dome cap, base ring → apex. + const domeCenterY = domeBaseY + const domeHint = (a: number[], _b: number[], c: number[]): number[] => { + const x = (a[0]! + c[0]!) / 2 + const y = (a[1]! + c[1]!) / 2 - domeCenterY + const z = (a[2]! + c[2]!) / 2 + const l = Math.hypot(x, y, z) || 1 + return [x / l, y / l, z / l] + } + let prev = domeBase + for (let i = 1; i <= lat; i++) { const phi = (Math.PI / 2) * (i / lat) - const r = Math.cos(phi) ** radialPower - const y = y0 + hoodH * Math.sin(phi) - for (let j = 0; j <= lng; j++) { - const theta = Math.PI * 2 * (j / lng) - const x = bw * r * Math.cos(theta) - const z = bd * r * Math.sin(theta) - row.push(new THREE.Vector3(x, y, z)) - } - points.push(row) - } - - const ab = new THREE.Vector3() - const ad = new THREE.Vector3() - for (let i = 0; i < lat; i++) { - for (let j = 0; j < lng; j++) { - const a = points[i]![j]! - const b = points[i]![j + 1]! - const c = points[i + 1]![j + 1]! - const d2 = points[i + 1]![j]! - ab.subVectors(b, a) - ad.subVectors(d2, a) - // Outward dome normal: `ad × ab` matches pushQuad's `(a,c,b)+(a,d,c)` - // winding (see note in `pushQuad`). Swapping the cross operands here - // keeps the dome lit from the outside, not from inside. - const n = new THREE.Vector3().crossVectors(ad, ab).normalize() - pushQuad( - positions, - normals, - uvs, - [a.x, a.y, a.z], - [b.x, b.y, b.z], - [c.x, c.y, c.z], - [d2.x, d2.y, d2.z], - [n.x, n.y, n.z], - ) - } + const rf = Math.cos(phi) ** power + const y = domeBaseY + domeH * Math.sin(phi) + const ring = ringAt(rx * rf, rz * rf, y, lng) + addBand(positions, normals, uvs, prev, ring, lng, domeHint) + prev = ring } return buildBufferGeometry(positions, normals, uvs) } +// One ellipse ring of `lng` segments at height `y`. First and last points +// coincide (closing the loop) so callers iterate j < lng. +function ringAt(ax: number, az: number, y: number, lng: number): number[][] { + const row: number[][] = [] + for (let j = 0; j <= lng; j++) { + const t = (Math.PI * 2 * j) / lng + row.push([ax * Math.cos(t), y, az * Math.sin(t)]) + } + return row +} + +// Connect two rings with a band of quads. `hintFn` returns the outward +// direction for each quad so pushQuadOriented can orient the face correctly. +function addBand( + positions: number[], + normals: number[], + uvs: number[], + rA: number[][], + rB: number[][], + lng: number, + hintFn: (a: number[], b: number[], c: number[], d: number[]) => number[], +): void { + for (let j = 0; j < lng; j++) { + const a = rA[j]! + const b = rA[j + 1]! + const c = rB[j + 1]! + const d = rB[j]! + pushQuadOriented(positions, normals, uvs, a, b, c, d, hintFn(a, b, c, d)) + } +} + +// Winding-safe quad: triangulates (a,b,c,d) and orients both triangles so +// the shared flat normal points toward `hint`. +function pushQuadOriented( + positions: number[], + normals: number[], + uvs: number[], + a: number[], + b: number[], + c: number[], + d: number[], + hint: number[], +) { + let nx = (c[1]! - a[1]!) * (b[2]! - a[2]!) - (c[2]! - a[2]!) * (b[1]! - a[1]!) + let ny = (c[2]! - a[2]!) * (b[0]! - a[0]!) - (c[0]! - a[0]!) * (b[2]! - a[2]!) + let nz = (c[0]! - a[0]!) * (b[1]! - a[1]!) - (c[1]! - a[1]!) * (b[0]! - a[0]!) + const flip = nx * hint[0]! + ny * hint[1]! + nz * hint[2]! < 0 + if (flip) { + nx = -nx + ny = -ny + nz = -nz + } + const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1 + nx /= len + ny /= len + nz /= len + + const u = Math.hypot(b[0]! - a[0]!, b[1]! - a[1]!, b[2]! - a[2]!) + const v = Math.hypot(d[0]! - a[0]!, d[1]! - a[1]!, d[2]! - a[2]!) + + if (flip) { + positions.push(a[0]!, a[1]!, a[2]!, b[0]!, b[1]!, b[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, u, 0, u, v) + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, d[0]!, d[1]!, d[2]!) + uvs.push(0, 0, u, v, 0, v) + } else { + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, b[0]!, b[1]!, b[2]!) + uvs.push(0, 0, u, v, u, 0) + positions.push(a[0]!, a[1]!, a[2]!, d[0]!, d[1]!, d[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, 0, v, u, v) + } + for (let i = 0; i < 6; i++) normals.push(nx, ny, nz) +} + // ─── Helpers ───────────────────────────────────────────────────────── function buildBufferGeometry( diff --git a/packages/nodes/src/box-vent/move-tool.tsx b/packages/nodes/src/box-vent/move-tool.tsx index abc31598..312e3643 100644 --- a/packages/nodes/src/box-vent/move-tool.tsx +++ b/packages/nodes/src/box-vent/move-tool.tsx @@ -14,8 +14,8 @@ import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/edito import { useViewer } from '@pascal-app/viewer' import { useCallback, useEffect, useState } from 'react' import * as THREE from 'three' -import { resolveRoofSegmentHit } from '../roof/segment-hit' -import { getAnalyticalNormal, surfaceQuatFromNormal } from '../solar-panel/geometry' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' +import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' import BoxVentPreview from './preview' /** diff --git a/packages/nodes/src/box-vent/panel.tsx b/packages/nodes/src/box-vent/panel.tsx index 6e1c8f78..aeacb39e 100644 --- a/packages/nodes/src/box-vent/panel.tsx +++ b/packages/nodes/src/box-vent/panel.tsx @@ -321,18 +321,32 @@ export default function BoxVentPanel() { )} {node.style === 'dome' && ( - previewProp({ domeCurvature: v })} - onCommit={(v) => handleUpdate({ domeCurvature: v })} - precision={2} - restoreOnCommit={false} - step={0.05} - unit="" - value={Math.round((node.domeCurvature ?? 0.65) * 100) / 100} - /> + <> + previewProp({ domeCurvature: v })} + onCommit={(v) => handleUpdate({ domeCurvature: v })} + precision={2} + restoreOnCommit={false} + step={0.05} + unit="" + value={Math.round((node.domeCurvature ?? 1.0) * 100) / 100} + /> + previewProp({ hoodOverhang: v })} + onCommit={(v) => handleUpdate({ hoodOverhang: v })} + precision={3} + restoreOnCommit={false} + step={0.005} + unit="m" + value={Math.round((node.hoodOverhang ?? 0.04) * 1000) / 1000} + /> + )} diff --git a/packages/nodes/src/box-vent/renderer.tsx b/packages/nodes/src/box-vent/renderer.tsx index a373ed81..98be50e5 100644 --- a/packages/nodes/src/box-vent/renderer.tsx +++ b/packages/nodes/src/box-vent/renderer.tsx @@ -18,14 +18,13 @@ import { } from '@pascal-app/viewer' import { useEffect, useMemo, useRef } from 'react' import * as THREE from 'three' -import { getAnalyticalNormal, surfaceQuatFromNormal } from '../solar-panel/geometry' +import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' import { buildBoxVentGeometry } from './geometry' const defaultMaterial = new THREE.MeshStandardMaterial({ color: 0xff_ff_ff, roughness: 0.85, metalness: 0.1, - side: THREE.DoubleSide, }) /** @@ -108,26 +107,32 @@ const BoxVentRenderer = ({ node: storeNode }: { node: BoxVentNode }) => { }, [segment, node.position[0], node.position[2]]) // Paint surface: explicit material wins, then preset, then the cached - // default. Mirrors the slab / stair / wall pattern. Preset materials - // come from the shared cache with `side: FrontSide`; clone + force - // DoubleSide locally so back faces of the vent body / hood don't drop - // out when the camera looks up at the eaves. + // default. FrontSide everywhere — DoubleSide on the role material's + // NodeMaterial poisons the MRT scene pass (see `materials.ts` line 77 / + // glazing fix 9400f1c5). Earlier this path forced DoubleSide so back + // faces of the vent body / hood wouldn't drop out when looking up at the + // eaves; that's now a known visual tradeoff — a closed-solid extrude in + // `geometry.ts` is the right fix if undersides become noticeable. const material = useMemo(() => { - // Untextured box vent (and textures-off mode) takes the themed 'roof' - // role colour. Request DoubleSide directly so the cached role material - // is the right side — no clone/mutation of a shared material. if (!textures || (!node.material && !node.materialPreset)) { - return createSurfaceRoleMaterial('roof', colorPreset, THREE.DoubleSide, sceneTheme) + return createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme) } - const base = node.material + return node.material ? createMaterial(node.material, shading) : (createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial) - if (base.side === THREE.DoubleSide) return base - const cloned = base.clone() - cloned.side = THREE.DoubleSide - return cloned }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]) + // Compose slope tilt + yaw onto a single quaternion so the registered + // ref's local frame is vent-mesh-local. `NodeArrowHandles` reads this + // frame to place its chevrons; collapsing the nested-group stack onto + // the registered group lets handles use vent-local coords directly, + // without per-arrow tilt compensation. Mirrors solar-panel's renderer. + const yAxis = useMemo(() => new THREE.Vector3(0, 1, 0), []) + const composedQuat = useMemo(() => { + const yawQuat = new THREE.Quaternion().setFromAxisAngle(yAxis, node.rotation ?? 0) + return new THREE.Quaternion().copy(surfaceQuat).multiply(yawQuat) + }, [surfaceQuat, node.rotation, yAxis]) + if (!segment) return null // `node.position` is segment-local (the placement + move tools resolve @@ -146,21 +151,18 @@ const BoxVentRenderer = ({ node: storeNode }: { node: BoxVentNode }) => { - - - - - + ) diff --git a/packages/nodes/src/box-vent/tool.tsx b/packages/nodes/src/box-vent/tool.tsx index cb004c14..814434db 100644 --- a/packages/nodes/src/box-vent/tool.tsx +++ b/packages/nodes/src/box-vent/tool.tsx @@ -13,8 +13,8 @@ import { triggerSFX } 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 '../roof/segment-hit' -import { getAnalyticalNormal, surfaceQuatFromNormal } from '../solar-panel/geometry' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' +import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' import { boxVentDefinition } from './definition' import BoxVentPreview from './preview' diff --git a/packages/nodes/src/building/definition.ts b/packages/nodes/src/building/definition.ts index 207733a1..ee63d60f 100644 --- a/packages/nodes/src/building/definition.ts +++ b/packages/nodes/src/building/definition.ts @@ -31,6 +31,13 @@ export const buildingDefinition: NodeDefinition = { presettable: false, }, + // Building-wide drag (whole-building translate + R/T rotation). Routed + // through `MoveTool`'s registry-affordance lookup rather than a + // hardcoded dispatcher arm. + affordanceTools: { + move: () => import('./move-tool'), + }, + parametrics: buildingParametrics, renderer: { diff --git a/packages/editor/src/components/tools/building/move-building-tool.tsx b/packages/nodes/src/building/move-tool.tsx similarity index 95% rename from packages/editor/src/components/tools/building/move-building-tool.tsx rename to packages/nodes/src/building/move-tool.tsx index 0917abb2..d3cc99b3 100644 --- a/packages/editor/src/components/tools/building/move-building-tool.tsx +++ b/packages/nodes/src/building/move-tool.tsx @@ -8,13 +8,10 @@ import { useLiveTransforms, useScene, } from '@pascal-app/core' +import { CursorSphere, 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 { markToolCancelConsumed } from '../../../hooks/use-keyboard' -import { sfxEmitter } from '../../../lib/sfx-bus' -import useEditor from '../../../store/use-editor' -import { CursorSphere } from '../shared/cursor-sphere' const Y_AXIS = new THREE.Vector3(0, 1, 0) @@ -96,7 +93,7 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) { if (rotationDelta !== 0) { event.preventDefault() - sfxEmitter.emit('sfx:item-rotate') + triggerSFX('sfx:item-rotate') pendingRotationRef.current += rotationDelta const mesh = sceneRegistry.nodes.get(nodeId) @@ -124,7 +121,7 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) { previousGridPosRef.current && (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1]) ) { - sfxEmitter.emit('sfx:grid-snap') + triggerSFX('sfx:grid-snap') } previousGridPosRef.current = [gridX, gridZ] @@ -154,7 +151,7 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) { }) useScene.temporal.getState().pause() - sfxEmitter.emit('sfx:item-place') + triggerSFX('sfx:item-place') useViewer.getState().setSelection({ buildingId: nodeId as BuildingNode['id'] }) exitMoveMode() event.nativeEvent?.stopPropagation?.() @@ -207,3 +204,5 @@ export function MoveBuildingContent({ node }: { node: BuildingNode }) { ) } + +export default MoveBuildingContent diff --git a/packages/nodes/src/ceiling/renderer.tsx b/packages/nodes/src/ceiling/renderer.tsx index 1b743ef8..82a985e7 100644 --- a/packages/nodes/src/ceiling/renderer.tsx +++ b/packages/nodes/src/ceiling/renderer.tsx @@ -9,6 +9,7 @@ import { import { createSurfaceRoleMaterial, NodeRenderer, + resolveSurfaceColor, useNodeEvents, useViewer, } from '@pascal-app/viewer' @@ -86,8 +87,17 @@ export const CeilingRenderer = ({ node }: { node: CeilingNode }) => { // 'ceiling' role colour; only an explicit preset/material keeps a texture. const hasExplicit = Boolean(node.materialPreset || node.material) if (!textures || !hasExplicit) { + // Bottom (seen from inside the room, looking up) stays opaque so the + // ceiling reads as a solid surface. Top uses the transparent + // grid-pattern material so the ceiling stays see-through whenever + // the editor reveals the `ceiling-grid` overlay (placing a + // ceiling-hosted item, or selecting one of its children — e.g. + // after committing a placement). Without this the top mesh shipped + // an opaque surface-role material, so a top-down camera lost view + // of everything under the ceiling once the overlay turned on. + const ceilingColor = resolveSurfaceColor('ceiling', colorPreset, sceneTheme) return { - topMaterial: createSurfaceRoleMaterial('ceiling', colorPreset, FrontSide, sceneTheme), + topMaterial: getCeilingMaterials(ceilingColor).topMaterial, bottomMaterial: createSurfaceRoleMaterial('ceiling', colorPreset, BackSide, sceneTheme), } } diff --git a/packages/nodes/src/chimney/definition.ts b/packages/nodes/src/chimney/definition.ts index 4cb0d276..c68c3f33 100644 --- a/packages/nodes/src/chimney/definition.ts +++ b/packages/nodes/src/chimney/definition.ts @@ -1,8 +1,327 @@ -import { ChimneyNode as ChimneyNodeSchema, type NodeDefinition } from '@pascal-app/core' +import { + type AnyNodeId, + type ChimneyNode as ChimneyNodeType, + ChimneyNode as ChimneyNodeSchema, + getActiveRoofHeight, + type HandleDescriptor, + type NodeDefinition, + type RoofSegmentNode as RoofSegmentNodeType, + type SceneApi, +} from '@pascal-app/core' +import { buildChimneyFloorplan } from './floorplan' import { chimneyPaint } from './paint' import { chimneyParametrics } from './parametrics' import { ChimneyNode } from './schema' +// Side handle offsets in metres. Match the roof-segment values so a +// segment + chimney selected back-to-back use the same visual rhythm. +const SIDE_HANDLE_OFFSET = 0.25 +const HEIGHT_HANDLE_OFFSET = 0.25 +const ROTATE_CORNER_OFFSET = 0.35 +const MIN_BODY_DIM = 0.3 +const MIN_HEIGHT_ABOVE_RIDGE = 0.05 +const MIN_FLUE_HEIGHT = 0.05 +const MAX_FLUE_HEIGHT = 1.5 +const MIN_CAP_THICKNESS = 0.02 +const MAX_CAP_THICKNESS = 0.5 +const MIN_CAP_OVERHANG = 0 +const MAX_CAP_OVERHANG = 0.3 +// Cap-reveal gap between body top and cap base — mirrors the +// `CAP_REVEAL` constant in `geometry.ts`. Local copy because handle +// placements need to know the cap's Y range and the geometry's +// constant isn't exported. If you change it here, change it there. +const CAP_REVEAL = 0.003 +// Fallback Y when the host segment can't be resolved (shouldn't happen +// for a placed chimney, but `placement.position` runs synchronously and +// must always return a vector). +const FALLBACK_BODY_MID_Y = 1.5 + +// Resolve the segment that hosts this chimney. Returns undefined if the +// chimney is unparented or the parent isn't in the scene yet. +function resolveHostSegment( + node: ChimneyNodeType, + sceneApi: SceneApi, +): RoofSegmentNodeType | undefined { + if (!node.roofSegmentId) return undefined + return sceneApi.get(node.roofSegmentId as AnyNodeId) +} + +// Mid-Y of the visible chimney body in the host segment's local frame. +// Matches the geometry builder: body runs from `baseY = max(0, wallHeight +// - 0.2)` up to `peakY + heightAboveRidge`. The handle Y picks the +// midpoint of the *visible* portion (deck plane → top) so chevrons sit +// next to the body, not buried inside the roof deck or floating over +// the eave. +function getBodyMidY(node: ChimneyNodeType, segment: RoofSegmentNodeType): number { + const peakY = segment.wallHeight + getActiveRoofHeight(segment) + const topY = peakY + node.heightAboveRidge + return (segment.wallHeight + topY) / 2 +} + +// Top of the chimney body (where the cap reveal gap begins). Tracker +// handle and cap-thickness handle both reference this Y. +function getBodyTopY(node: ChimneyNodeType, segment: RoofSegmentNodeType): number { + return segment.wallHeight + getActiveRoofHeight(segment) + node.heightAboveRidge +} + +// Cap base Y — the bottom of the cap slab. Sits just above the body +// top with a small reveal gap so a shadow line separates them. +function getCapBaseY(node: ChimneyNodeType, segment: RoofSegmentNodeType): number { + return getBodyTopY(node, segment) + CAP_REVEAL +} + +// Cap top Y — the top of the cap slab. Falls back to body top when no +// cap is rendered (flues mount on whichever is the upper surface). +function getCapTopY(node: ChimneyNodeType, segment: RoofSegmentNodeType): number { + if (!node.cap || node.capShape === 'none') return getBodyTopY(node, segment) + return getCapBaseY(node, segment) + node.capThickness +} + +// Width arrow on the +X (right) or -X (left) side. Asymmetric resize: +// dragging one arrow grows the chimney outward from its own edge while +// the opposite edge stays world-fixed. Handles live in the chimney's +// registered ref frame (the nested inner group in the renderer that +// applies `node.position` / `node.rotation`), so placements are in +// chimney-local coordinates — no per-arrow rotation/translation +// compensation. `apply` keeps the world-fixed edge anchored even when +// the chimney is rotated by recentering `position` along the chimney's +// own +X arm in segment frame. +function chimneyWidthHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'x', + anchor: side === 'right' ? 'min' : 'max', + // Portal into the roof (grandparent), not the segment (parent). Unpainted + // roof segments live inside a `visible={false}` wrapper, which would + // hide the handles. The roof itself is always visible. Skylight does + // the same. + portal: 'grandparent', + min: MIN_BODY_DIM, + currentValue: (n) => n.width, + apply: (initial, newWidth) => { + const rotY = initial.rotation ?? 0 + const armX = Math.cos(rotY) + const armZ = -Math.sin(rotY) + const anchorX = initial.position[0] - sign * (initial.width / 2) * armX + const anchorZ = initial.position[2] - sign * (initial.width / 2) * armZ + const newCenterX = anchorX + sign * (newWidth / 2) * armX + const newCenterZ = anchorZ + sign * (newWidth / 2) * armZ + return { + width: newWidth, + position: [newCenterX, initial.position[1], newCenterZ], + } + }, + placement: { + position: (n, sceneApi) => { + const segment = resolveHostSegment(n, sceneApi) + const y = segment ? getBodyMidY(n, segment) : FALLBACK_BODY_MID_Y + return [sign * (n.width / 2 + SIDE_HANDLE_OFFSET), y, 0] + }, + // Chevron faces along the chimney's own ±X; the left arrow flips + // 180°. No node.rotation here — the registered inner group is + // already rotated by `node.rotation`, so chimney-local +X is the + // chevron's natural direction. + rotationY: () => (side === 'right' ? 0 : Math.PI), + }, + } +} + +// Depth arrow — symmetric on the +Z side. Only meaningful for square +// bodies; round chimneys are circular (depth field is ignored by the +// geometry builder, so a depth handle would just resize an invisible +// field). The chimneys factory below omits this descriptor for round +// bodies. +function chimneyDepthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'z', + anchor: 'center', + min: MIN_BODY_DIM, + currentValue: (n) => n.depth, + apply: (_n, newValue) => ({ depth: newValue }), + placement: { + position: (n, sceneApi) => { + const segment = resolveHostSegment(n, sceneApi) + const y = segment ? getBodyMidY(n, segment) : FALLBACK_BODY_MID_Y + return [0, y, n.depth / 2 + SIDE_HANDLE_OFFSET] + }, + }, + } +} + +// Height-above-ridge tracker. Dashed leader spans the chimney body's +// visible extent — from the roof deck plane up to the body top — and +// terminates in a draggable cube at the body top. Cap, flues, cricket +// and bands sit ABOVE the body and are explicitly excluded from the +// leader so the height affordance reads as "this is the body height", +// not "this is the whole stack height". Dragging the cube vertically +// adjusts `heightAboveRidge` 1:1. +function chimneyHeightAboveRidgeHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + shape: 'tracker', + min: MIN_HEIGHT_ABOVE_RIDGE, + currentValue: (n) => n.heightAboveRidge, + apply: (initial, newValue) => ({ + heightAboveRidge: Math.max(MIN_HEIGHT_ABOVE_RIDGE, newValue), + }), + placement: { + // Cube sits AT the body top (no offset) so the leader terminates + // exactly at the body's top edge — visually the "ceiling" of the + // body, before the cap reveal gap. + position: (n, sceneApi) => { + const segment = resolveHostSegment(n, sceneApi) + const y = segment ? getBodyTopY(n, segment) : FALLBACK_BODY_MID_Y + return [0, y, 0] + }, + }, + // Leader bottom = deck plane (segment.wallHeight). The chimney body + // geometry actually extends a touch below the deck so the bottom + // doesn't show above the eave on low-slope roofs (`baseY = max(0, + // wallHeight - 0.2)`), but the visible portion starts at the deck — + // and starting the leader there is what reads as "body height" to + // the user. + trackerBaseY: (n, sceneApi) => { + const segment = resolveHostSegment(n, sceneApi) + return segment?.wallHeight ?? 0 + }, + } +} + +// Whole-chimney rotation gizmo at the +X/+Z corner of the body +// footprint. The registered inner group already centers on the chimney +// and applies its yaw, so the default rotation pivot (rideObject origin) +// is correct — no `rotationCenter` override needed. +function chimneyRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }), + placement: { + position: (n, sceneApi) => { + const segment = resolveHostSegment(n, sceneApi) + const y = segment ? getBodyMidY(n, segment) : FALLBACK_BODY_MID_Y + const isRound = n.bodyShape === 'round' + const halfX = n.width / 2 + ROTATE_CORNER_OFFSET + const halfZ = (isRound ? n.width : n.depth) / 2 + ROTATE_CORNER_OFFSET + return [halfX, y, halfZ] + }, + // The two-headed icon's natural bias points along +X; aim it + // toward the corner (45° outward from the chimney's local frame). + rotationY: () => -Math.PI / 4, + }, + } +} + +// Flue-height chevron at the center of the cap top, pointing upward. +// Drag adjusts `flueHeight` for ALL flues uniformly — the schema only +// carries a single scalar. Placed at chimney center (X=Z=0) so the +// handle stays valid regardless of `flueCount` / `flueSpacing`. Anchor +// is 'min' so the flue base stays pinned to the cap and the top edge +// follows the pointer. +function chimneyFlueHeightHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + portal: 'grandparent', + min: MIN_FLUE_HEIGHT, + max: MAX_FLUE_HEIGHT, + currentValue: (n) => n.flueHeight, + apply: (_n, newValue) => ({ flueHeight: newValue }), + placement: { + position: (n, sceneApi) => { + const segment = resolveHostSegment(n, sceneApi) + // Sit the chevron at the flue top so it visually attaches to + // the thing being dragged. Fallback Y mirrors the body-top + // fallback above. + const baseY = segment ? getCapTopY(n, segment) : FALLBACK_BODY_MID_Y + return [0, baseY + n.flueHeight, 0] + }, + }, + } +} + +// Cap-thickness chevron above the cap top, pointing upward. Anchor is +// 'min' so the cap base stays at body-top + reveal and the top edge +// follows the pointer. +function chimneyCapThicknessHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + portal: 'grandparent', + min: MIN_CAP_THICKNESS, + max: MAX_CAP_THICKNESS, + currentValue: (n) => n.capThickness, + apply: (_n, newValue) => ({ capThickness: newValue }), + placement: { + position: (n, sceneApi) => { + const segment = resolveHostSegment(n, sceneApi) + // Offset toward +Z (away from chimney center on the depth axis) + // so the cap-thickness chevron doesn't overlap the flue-height + // chevron at X=0,Z=0. Pick the cap edge minus a small margin so + // it sits on top of the cap, not floating off to the side. + const isRound = n.bodyShape === 'round' + const halfZ = (isRound ? n.width : n.depth) / 2 + const z = halfZ * 0.35 + const y = segment ? getCapTopY(n, segment) : FALLBACK_BODY_MID_Y + return [0, y, z] + }, + }, + } +} + +// Cap-overhang radial chevron on the +X edge of the cap. Outward 1:1 +// drag grows the overhang; the cap's half-extent is `width/2 + overhang`. +function chimneyCapOverhangHandle(): HandleDescriptor { + return { + kind: 'radial-resize', + axis: 'x', + portal: 'grandparent', + min: MIN_CAP_OVERHANG, + max: MAX_CAP_OVERHANG, + currentValue: (n) => n.capOverhang, + apply: (_n, newValue) => ({ capOverhang: newValue }), + placement: { + position: (n, sceneApi) => { + const segment = resolveHostSegment(n, sceneApi) + // Cap mid-height in the chimney-local frame so the chevron sits + // on the cap edge, not above or below it. + const capBaseY = segment ? getCapBaseY(n, segment) : FALLBACK_BODY_MID_Y + const y = capBaseY + n.capThickness / 2 + return [n.width / 2 + n.capOverhang + SIDE_HANDLE_OFFSET, y, 0] + }, + }, + } +} + +const chimneyHandles = (node: ChimneyNodeType): HandleDescriptor[] => { + const descriptors: HandleDescriptor[] = [ + chimneyWidthHandle('right'), + chimneyWidthHandle('left'), + ] + if (node.bodyShape !== 'round') descriptors.push(chimneyDepthHandle()) + descriptors.push(chimneyHeightAboveRidgeHandle(), chimneyRotateHandle()) + // Conditional flue/cap handles are temporarily disabled — they fired + // a "Color target has no corresponding fragment stage output" WebGPU + // validation error that the original four handles don't trigger. The + // descriptor shapes (linear-resize y / radial-resize x) match other + // working handles in the codebase, so the cause is likely a TSL/MRT + // pipeline interaction we haven't pinned down. Re-enable one at a + // time after isolating the trigger; the factory + helpers are kept so + // we can flip them back on without re-deriving the placement math. + // if (node.cap && node.capShape !== 'none') { + // descriptors.push(chimneyCapThicknessHandle(), chimneyCapOverhangHandle()) + // } + // if (node.flueCount > 0) descriptors.push(chimneyFlueHeightHandle()) + return descriptors +} + // Every fresh chimney starts as plain white (body + top). The paint // flow / material picker writes preset refs or full `MaterialSchema` // objects on top of this; until then both roles render `#ffffff`. @@ -73,6 +392,8 @@ export const chimneyDefinition: NodeDefinition = { }, parametrics: chimneyParametrics, + handles: chimneyHandles, + floorplan: buildChimneyFloorplan, renderer: { kind: 'parametric', diff --git a/packages/nodes/src/chimney/floorplan.ts b/packages/nodes/src/chimney/floorplan.ts new file mode 100644 index 00000000..989c68b8 --- /dev/null +++ b/packages/nodes/src/chimney/floorplan.ts @@ -0,0 +1,215 @@ +import type { + AnyNodeId, + ChimneyNode, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RoofNode, + RoofSegmentNode, +} from '@pascal-app/core' +import { flueXPositions } from './geometry' + +/** + * Floor-plan builder for a chimney. A chimney is a masonry stack hosted on + * a roof segment. Seen from above it reads as its crown/cap footprint with + * the body shaft nested inside (the cap overhangs the body) and the flue + * openings poking out the top. + * + * Coordinate frame mirrors the 3D transform stack + * (roof → roof-segment → chimney). The chimney's `position` is + * segment-local (X = width axis, Z = depth axis; Y is ignored — the 3D + * renderer anchors it to the slope). `rotation` is yaw. We compose with + * the floor-plan's negated-rotation convention (see + * `buildRoofSegmentFloorplan`). Unlike the gutter there's no eave/overhang + * offset — a chimney sits at its own footprint, not on the drip edge. + */ +export function buildChimneyFloorplan( + node: ChimneyNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + // Compose roof → segment → chimney in plan coords. Each rotation is + // negated so SVG's y-down CW matches Three.js' top-down CCW. + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const rot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + 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 + + // Masonry — warm stone grey, accent on select, light blue on hover. + const baseInk = '#44403c' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const fill = showSelectedChrome ? '#fed7aa' : '#d6d3d1' + const fillOpacity = showSelectedChrome ? 0.55 : 0.6 + const lineWidth = showSelectedChrome ? 0.03 : 0.022 + + const isRound = node.bodyShape === 'round' + const halfW = Math.max(node.width, 0.05) / 2 + // Round bodies use `width` as the diameter and ignore `depth`. + const halfD = isRound ? halfW : Math.max(node.depth, 0.05) / 2 + const hasCap = node.cap && node.capShape !== 'none' + const overhang = hasCap ? Math.max(node.capOverhang, 0) : 0 + const capHalfW = halfW + overhang + const capHalfD = halfD + overhang + const showBodyInset = hasCap && overhang > 0.001 + + const children: FloorplanGeometry[] = [] + + if (isRound) { + const c = toPlan(0, 0) + // Transparent hit-target across the crown footprint. + children.push({ + kind: 'circle', + cx: c[0], + cy: c[1], + r: capHalfW, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }) + // Crown / outer body footprint, filled. + children.push({ + kind: 'circle', + cx: c[0], + cy: c[1], + r: capHalfW, + fill, + fillOpacity, + stroke, + strokeWidth: lineWidth, + pointerEvents: 'none', + }) + // Body shaft inside the cap overhang. + if (showBodyInset) { + children.push({ + kind: 'circle', + cx: c[0], + cy: c[1], + r: halfW, + fill: 'none', + stroke, + strokeWidth: lineWidth * 0.8, + strokeOpacity: 0.7, + pointerEvents: 'none', + }) + } + } else { + const capCorners: FloorplanPoint[] = [ + toPlan(-capHalfW, -capHalfD), + toPlan(capHalfW, -capHalfD), + toPlan(capHalfW, capHalfD), + toPlan(-capHalfW, capHalfD), + ] + children.push({ + kind: 'polygon', + points: capCorners, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }) + children.push({ + kind: 'polygon', + points: capCorners, + fill, + fillOpacity, + stroke, + strokeWidth: lineWidth, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + if (showBodyInset) { + children.push({ + kind: 'polygon', + points: [ + toPlan(-halfW, -halfD), + toPlan(halfW, -halfD), + toPlan(halfW, halfD), + toPlan(-halfW, halfD), + ], + fill: 'none', + stroke, + strokeWidth: lineWidth * 0.8, + strokeOpacity: 0.7, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + } + } + + // Flue openings poking out the crown — drawn along the chimney's local X + // at z = 0, matching `flueXPositions` (the same layout the 3D pots use). + // Round or square per `flueShape`. Hollow so they read as openings. + const flueCount = Math.max(0, Math.min(4, node.flueCount)) + if (flueCount > 0) { + const d = Math.max(0.02, node.flueDiameter) + const r = d / 2 + const xs = flueXPositions(flueCount, node.width, d, node.flueSpacing) + const flueStroke = showSelectedChrome && palette ? palette.selectedStroke : '#292524' + for (const fx of xs) { + if (node.flueShape === 'square') { + children.push({ + kind: 'polygon', + points: [ + toPlan(fx - r, -r), + toPlan(fx + r, -r), + toPlan(fx + r, r), + toPlan(fx - r, r), + ], + fill: 'none', + stroke: flueStroke, + strokeWidth: lineWidth * 0.8, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + } else { + const c = toPlan(fx, 0) + children.push({ + kind: 'circle', + cx: c[0], + cy: c[1], + r, + fill: 'none', + stroke: flueStroke, + strokeWidth: lineWidth * 0.8, + pointerEvents: 'none', + }) + } + } + } + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/chimney/geometry.ts b/packages/nodes/src/chimney/geometry.ts index 1cf71eb3..540b8d68 100644 --- a/packages/nodes/src/chimney/geometry.ts +++ b/packages/nodes/src/chimney/geometry.ts @@ -138,7 +138,6 @@ function buildBodyGeometry(node: ChimneyNode, baseY: number, topY: number): THRE parts.push(buildSmoothCylinder(baseY + sh, topY, r, r)) } const merged = mergeAndDispose(parts) - applyNodeTransform(merged, node) return merged } @@ -213,7 +212,6 @@ function buildCapGeometry(node: ChimneyNode, capBaseY: number): THREE.BufferGeom break } const merged = mergeAndDispose(parts) - applyNodeTransform(merged, node) return merged } @@ -450,7 +448,6 @@ function buildBandsGeometry( } if (parts.length === 0) return null const merged = mergeAndDispose(parts) - applyNodeTransform(merged, node) return merged } @@ -484,10 +481,14 @@ function buildBandsGeometry( // ─── Helpers ───────────────────────────────────────────────────────── -function applyNodeTransform(geo: THREE.BufferGeometry, node: ChimneyNode) { - if (Math.abs(node.rotation) > 1e-4) geo.rotateY(node.rotation) - geo.translate(node.position[0] ?? 0, 0, node.position[2] ?? 0) -} +// Each builder returns geometry in chimney-local frame (chimney center +// at X/Z origin, Y absolute in the host segment's frame). The renderer +// applies `node.position` / `node.rotation` via a nested registered +// group, which lets `NodeArrowHandles` read a chimney-local mesh frame +// when placing the resize / rotation arrows. Kept as a no-op shim so +// the existing call sites don't need to be touched if a future refactor +// re-introduces per-builder baking. +function applyNodeTransform(_geo: THREE.BufferGeometry, _node: ChimneyNode) {} function buildBufferGeometry(positions: number[], uvs: number[]): THREE.BufferGeometry { const geo = new THREE.BufferGeometry() diff --git a/packages/nodes/src/chimney/holes.ts b/packages/nodes/src/chimney/holes.ts index e8fef23f..a260f06f 100644 --- a/packages/nodes/src/chimney/holes.ts +++ b/packages/nodes/src/chimney/holes.ts @@ -270,8 +270,9 @@ function buildPanelCutters(node: ChimneyNode, topY: number): Brush[] { for (const f of faces) { const geo = new THREE.BoxGeometry(f.sizeX, h, f.sizeZ) geo.translate(f.cx, midY, f.cz) - if (Math.abs(node.rotation) > 1e-4) geo.rotateY(node.rotation) - geo.translate(node.position[0] ?? 0, 0, node.position[2] ?? 0) + // Body geometry is in chimney-local frame (node.position/rotation are + // applied by the renderer's nested ref'd group, not baked into the + // buffer geometry), so cutters need to stay in chimney-local too. const idx = geo.getIndex()?.count ?? 0 geo.clearGroups() @@ -298,10 +299,9 @@ function buildCutter( ? new THREE.CylinderGeometry(spec.sizeX / 2, spec.sizeX / 2, h, 24, 1, false) : new THREE.BoxGeometry(spec.sizeX, h, spec.sizeZ) geo.translate(spec.xCenter, midY, 0) - // Match the same node-local transform that `geometry.ts:applyNodeTransform` - // bakes into the body/cap/flue vertices. - if (Math.abs(node.rotation) > 1e-4) geo.rotateY(node.rotation) - geo.translate(node.position[0] ?? 0, 0, node.position[2] ?? 0) + // Cutter stays in chimney-local frame to match the body/cap/flue + // geometry (node.position/rotation are applied via the renderer's + // nested ref'd group, not baked into the buffer geometry). const idx = geo.getIndex()?.count ?? 0 geo.clearGroups() diff --git a/packages/nodes/src/chimney/move-tool.tsx b/packages/nodes/src/chimney/move-tool.tsx index 113b9019..ca57e0a9 100644 --- a/packages/nodes/src/chimney/move-tool.tsx +++ b/packages/nodes/src/chimney/move-tool.tsx @@ -15,7 +15,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 '../roof/segment-hit' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' import ChimneyPreview from './preview' const tmpMatrix = new THREE.Matrix4() diff --git a/packages/nodes/src/chimney/renderer.tsx b/packages/nodes/src/chimney/renderer.tsx index 508475dd..16aaa2f6 100644 --- a/packages/nodes/src/chimney/renderer.tsx +++ b/packages/nodes/src/chimney/renderer.tsx @@ -223,67 +223,71 @@ const ChimneyRenderer = ({ node: storeNode }: { node: ChimneyNode }) => { if (!segment || !geo) return null - // The chimney's geometry bakes its baseY using segment.wallHeight inside - // the builder, so the outer group only needs the segment-local X/Z - // offset. Y stays at 0 here. - // Chimneys are mounted inside `RoofRenderer`'s `roof-elements` group, // which sits at the ROOF's origin — not inside the host segment's - // transform. Apply the segment's own position/rotation here so a - // chimney parented to segment N lands on segment N (and not on the - // first segment) once the chimney's segment-local `node.position[0/2]` - // is layered in by `geometry.ts`. Mirrors skylight's renderer. + // transform. Apply the segment's pose on the outer group, then nest a + // ref'd inner group at the chimney's segment-local position + + // rotation so the registered Object3D's local frame is *chimney-local* + // — that's what `NodeArrowHandles` reads to place its arrows. + // Mirrors skylight's renderer; geometry comes from `geometry.ts` in + // chimney-local frame (no transform baking) and lands in the right + // world spot via the two-group stack below. return ( - - {geo.cap && ( + - )} - {geo.flues && ( - - )} - {geo.cricket && ( - - )} - {geo.bands && ( - - )} + {geo.cap && ( + + )} + {geo.flues && ( + + )} + {geo.cricket && ( + + )} + {geo.bands && ( + + )} + ) } diff --git a/packages/nodes/src/chimney/roof-trim.ts b/packages/nodes/src/chimney/roof-trim.ts index 6fc76e23..225b0c96 100644 --- a/packages/nodes/src/chimney/roof-trim.ts +++ b/packages/nodes/src/chimney/roof-trim.ts @@ -40,12 +40,21 @@ export function trimChimneyBodyAgainstRoof( ): THREE.BufferGeometry { const { shinSlab, wallBrush } = segBrushes - // Wrap the chimney body in a Brush. The body has `node.position` / - // `node.rotation` baked into its vertices via `applyNodeTransform` - // in `geometry.ts`, so it's already in segment-local space — the - // same frame as the roof brushes from `getRoofSegmentBrushes`. + // The body comes in chimney-local frame — `node.position` / + // `node.rotation` are applied by the renderer's nested ref'd group + // rather than baked into the geometry. Segment brushes from + // `getRoofSegmentBrushes` are in segment-local frame, so we move the + // chimney brush into segment-local space for the CSG pass, then strip + // the same transform back off the result before returning, so the + // mesh stays in chimney-local for the renderer to position via the + // inner ref group. const indexed = mergeVertices(body, 1e-4) if (!indexed.getAttribute('normal')) indexed.computeVertexNormals() + const hasRotation = Math.abs(node.rotation) > 1e-4 + const posX = node.position[0] ?? 0 + const posZ = node.position[2] ?? 0 + if (hasRotation) indexed.rotateY(node.rotation) + indexed.translate(posX, 0, posZ) const indexCount = indexed.getIndex()?.count ?? 0 indexed.clearGroups() if (indexCount > 0) indexed.addGroup(0, indexCount, 0) @@ -70,6 +79,11 @@ export function trimChimneyBodyAgainstRoof( const step2 = csgEvaluator.evaluate(step1, shinSlab, SUBTRACTION) as Brush const out = csgGeometry(step2).clone() + // Strip the same node transform we baked onto the input so the + // returned geometry is back in chimney-local frame (the renderer's + // inner ref'd group applies `node.position` / `node.rotation`). + out.translate(-posX, 0, -posZ) + if (hasRotation) out.rotateY(-node.rotation) const ic = out.getIndex()?.count ?? 0 out.clearGroups() if (ic > 0) out.addGroup(0, ic, 0) diff --git a/packages/nodes/src/chimney/tool.tsx b/packages/nodes/src/chimney/tool.tsx index d9b582aa..522caf28 100644 --- a/packages/nodes/src/chimney/tool.tsx +++ b/packages/nodes/src/chimney/tool.tsx @@ -14,7 +14,7 @@ import { triggerSFX } 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 '../roof/segment-hit' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' import { chimneyDefinition } from './definition' import ChimneyPreview from './preview' diff --git a/packages/nodes/src/column/floorplan.ts b/packages/nodes/src/column/floorplan.ts index ea6c4422..6f5d229d 100644 --- a/packages/nodes/src/column/floorplan.ts +++ b/packages/nodes/src/column/floorplan.ts @@ -156,6 +156,7 @@ export function buildColumnFloorplan( point: [cx + cornerWorldX, cz + cornerWorldZ], angle: Math.atan2(radialZ, radialX), affordance: 'column-rotate', + pivot: [cx, cz], }) } diff --git a/packages/nodes/src/cupola/__tests__/geometry.test.ts b/packages/nodes/src/cupola/__tests__/geometry.test.ts new file mode 100644 index 00000000..ffcf1ae9 --- /dev/null +++ b/packages/nodes/src/cupola/__tests__/geometry.test.ts @@ -0,0 +1,47 @@ +import { describe, expect, test } from 'bun:test' +import { buildCupolaGeometry } from '../geometry' +import { CupolaNode } from '../schema' + +function allFinite(geo: { getAttribute: (n: string) => { array: ArrayLike } }): boolean { + const arr = geo.getAttribute('position').array + for (let i = 0; i < arr.length; i++) { + if (!Number.isFinite(arr[i])) return false + } + return true +} + +describe('buildCupolaGeometry', () => { + test('returns a non-empty BufferGeometry with matching attributes', () => { + const geo = buildCupolaGeometry(CupolaNode.parse({})) + const p = geo.getAttribute('position') + expect(p.count).toBeGreaterThan(0) + expect(geo.getAttribute('normal').count).toBe(p.count) + expect(geo.getAttribute('uv').count).toBe(p.count) + }) + + test('both roof styles build finite geometry', () => { + for (const roofStyle of ['dome', 'pyramid'] as const) { + const geo = buildCupolaGeometry(CupolaNode.parse({ roofStyle })) + expect(geo.getAttribute('position').count).toBeGreaterThan(0) + expect(allFinite(geo)).toBe(true) + } + }) + + test('finial adds vertices', () => { + const withFinial = buildCupolaGeometry(CupolaNode.parse({ finial: true })).getAttribute( + 'position', + ).count + const without = buildCupolaGeometry(CupolaNode.parse({ finial: false })).getAttribute( + 'position', + ).count + expect(withFinial).toBeGreaterThan(without) + }) + + test('extreme dimensions never go NaN', () => { + const geo = buildCupolaGeometry( + CupolaNode.parse({ width: 0.01, depth: 5, height: 0.01, roofStyle: 'pyramid' }), + ) + expect(geo.getAttribute('position').count).toBeGreaterThan(0) + expect(allFinite(geo)).toBe(true) + }) +}) diff --git a/packages/nodes/src/cupola/definition.ts b/packages/nodes/src/cupola/definition.ts new file mode 100644 index 00000000..cce7b2d9 --- /dev/null +++ b/packages/nodes/src/cupola/definition.ts @@ -0,0 +1,165 @@ +import { + CupolaNode as CupolaNodeSchema, + type CupolaNode as CupolaNodeType, + type HandleDescriptor, + type NodeDefinition, +} from '@pascal-app/core' +import { surfacePaintCapability } from '../shared/surface-paint' +import { buildCupolaFloorplan } from './floorplan' +import { cupolaParametrics } from './parametrics' +import { CupolaNode } from './schema' + +const SIDE_HANDLE_OFFSET = 0.3 +const HEIGHT_HANDLE_OFFSET = 0.25 +// Snug to the cupola corner so the rotate icon stays close to the item. +const ROTATE_CORNER_OFFSET = 0.12 +const MIN_DIM = 0.3 +const MIN_HEIGHT = 0.4 + +function getBodyMidY(n: CupolaNodeType): number { + return Math.max(0.001, n.height) / 2 +} + +// Width / depth grow symmetrically from the centre (cupolas are placed by +// their centre on the ridge), so a single centred chevron per axis. +function cupolaWidthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'x', + anchor: 'center', + min: MIN_DIM, + currentValue: (n) => n.width, + apply: (_n, newValue) => ({ width: Math.max(MIN_DIM, newValue) }), + placement: { + position: (n) => [n.width / 2 + SIDE_HANDLE_OFFSET, getBodyMidY(n), 0], + }, + } +} + +function cupolaDepthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'z', + anchor: 'center', + min: MIN_DIM, + currentValue: (n) => n.depth, + apply: (_n, newValue) => ({ depth: Math.max(MIN_DIM, newValue) }), + placement: { + position: (n) => [0, getBodyMidY(n), n.depth / 2 + SIDE_HANDLE_OFFSET], + }, + } +} + +function cupolaHeightHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + min: MIN_HEIGHT, + currentValue: (n) => n.height, + apply: (_n, newValue) => ({ height: Math.max(MIN_HEIGHT, newValue) }), + placement: { + position: (n) => [0, Math.max(n.height, MIN_HEIGHT) + HEIGHT_HANDLE_OFFSET, 0], + }, + } +} + +function cupolaRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }), + placement: { + position: (n) => [ + n.width / 2 + ROTATE_CORNER_OFFSET, + getBodyMidY(n), + n.depth / 2 + ROTATE_CORNER_OFFSET, + ], + rotationY: () => -Math.PI / 4, + }, + // Guide ring centred on the cupola, sized to pass through the corner + // icon so the icon rides the ring — matches solar-panel / skylight. + decoration: { + kind: 'ring', + radius: (n) => + Math.hypot(n.width / 2 + ROTATE_CORNER_OFFSET, n.depth / 2 + ROTATE_CORNER_OFFSET), + y: (n) => getBodyMidY(n), + }, + } +} + +// `portal: 'grandparent'` on every handle — see box-vent's note. The cupola +// rides the roof→segment→node frame chain, so the handle rig must too, or +// the handles (and rotate arc) render offset from the cupola. +const cupolaHandles: HandleDescriptor[] = [ + cupolaWidthHandle(), + cupolaDepthHandle(), + cupolaHeightHandle(), + cupolaRotateHandle(), +].map((h): HandleDescriptor => ({ ...h, portal: 'grandparent' })) + +/** + * Cupola — a louvered roof lantern. Parented to a `roof-segment`; position + * is segment-local; rotation rotates it around the segment's vertical axis + * after the slope tilt is applied. Same composition as the box vent (custom + * renderer, pure geometry builder, no system) — see box-vent's definition + * for the rationale on why roof accessories need a custom renderer. + */ +export const cupolaDefinition: NodeDefinition = { + kind: 'cupola', + schemaVersion: 1, + schema: CupolaNode, + category: 'structure', + surfaceRole: 'roof', + + defaults: () => { + const stub = CupolaNodeSchema.parse({ id: 'cupola_default' as never, type: 'cupola' }) + const { id: _id, type: _type, ...rest } = stub + return rest + }, + + capabilities: { + selectable: { hitVolume: 'bbox' }, + duplicable: true, + deletable: true, + // Single painted surface — registry-driven paint dispatch (see chimney). + paint: surfacePaintCapability, + // Mounts on a roof segment via `roofSegmentId`. Sits ON TOP of the + // slope — no `buildCut`, just the dirty cascade so the parent roof's + // merged shell rebuilds when the cupola moves / resizes. + roofAccessory: {}, + }, + + parametrics: cupolaParametrics, + handles: cupolaHandles, + floorplan: buildCupolaFloorplan, + + renderer: { + kind: 'parametric', + module: () => import('./renderer'), + }, + + preview: () => import('./preview'), + tool: () => import('./tool'), + affordanceTools: { + move: () => import('./move-tool'), + }, + toolHints: [ + { key: 'Left click', label: 'Place cupola on roof' }, + { key: 'Esc', label: 'Cancel' }, + ], + + presentation: { + label: 'Cupola', + description: 'Louvered roof lantern with a dome or pyramid cap and optional finial.', + icon: { kind: 'url', src: '/icons/roof.png' }, + paletteSection: 'structure', + paletteOrder: 122, + }, + + mcp: { + description: + 'A louvered cupola (roof lantern) on a roof segment. Roof style: dome / pyramid, optional finial. Parametric width/depth/height.', + }, +} diff --git a/packages/nodes/src/cupola/floorplan.ts b/packages/nodes/src/cupola/floorplan.ts new file mode 100644 index 00000000..fa6b5cb6 --- /dev/null +++ b/packages/nodes/src/cupola/floorplan.ts @@ -0,0 +1,111 @@ +import type { + AnyNodeId, + CupolaNode, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RoofNode, + RoofSegmentNode, +} from '@pascal-app/core' + +/** + * Floor-plan builder for a cupola — seen from above it reads as the + * overhanging cornice/roof square with the louvered body square inside. + * Coordinate frame mirrors the 3D transform stack (roof → roof-segment → + * cupola), same as the box-vent builder. + */ +export function buildCupolaFloorplan( + node: CupolaNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const rot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + 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 baseInk = '#475569' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const fill = showSelectedChrome ? '#fed7aa' : '#dbe1e8' + const fillOpacity = showSelectedChrome ? 0.55 : 0.7 + const lineWidth = showSelectedChrome ? 0.03 : 0.02 + + const hw = Math.max(node.width, 0.1) / 2 + const hd = Math.max(node.depth, 0.1) / 2 + const cornOvh = Math.min(hw, hd) * 0.22 + + const rect = (halfX: number, halfZ: number): FloorplanPoint[] => [ + toPlan(-halfX, -halfZ), + toPlan(halfX, -halfZ), + toPlan(halfX, halfZ), + toPlan(-halfX, halfZ), + ] + + const children: FloorplanGeometry[] = [] + + // Cornice / roof footprint — outer outline + hit target. + const outer = rect(hw + cornOvh, hd + cornOvh) + children.push({ + kind: 'polygon', + points: outer, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }) + children.push({ + kind: 'polygon', + points: outer, + fill, + fillOpacity, + stroke, + strokeWidth: lineWidth, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + // Louvered body footprint inside the cornice. + children.push({ + kind: 'polygon', + points: rect(hw, hd), + fill: 'none', + stroke, + strokeWidth: lineWidth * 0.8, + strokeOpacity: 0.7, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/cupola/geometry.ts b/packages/nodes/src/cupola/geometry.ts new file mode 100644 index 00000000..f7535d4e --- /dev/null +++ b/packages/nodes/src/cupola/geometry.ts @@ -0,0 +1,354 @@ +import type { CupolaNode } from '@pascal-app/core' +import * as THREE from 'three' + +/** + * Pure builder for the cupola mesh — a small louvered roof lantern: + * + * ✦ ← finial (post + ball) + * /\ + * / \ ← roof (dome or pyramid) + * /____\ + * |‖‖‖‖‖‖| ← louvered body (angled slats on 4 faces) + * |‖‖‖‖‖‖| + * _|______|_ + * |__________| ← base plinth, seats on the roof + * + * Built bottom → top from primitive revolves / boxes. Every face is placed + * through a winding-safe oriented quad/tri, so the whole thing is lit + * correctly from outside without hand-traced winding. + * + * Pure: no React, no scene access, no store mutation. Safe for unit tests, + * the placement preview, and the move-tool ghost. + */ +export function buildCupolaGeometry(node: CupolaNode): THREE.BufferGeometry { + const w = Math.max(0.2, node.width) + const d = Math.max(0.2, node.depth) + const h = Math.max(0.3, node.height) + const hw = w / 2 + const hd = d / 2 + + // Vertical budget. + const baseH = h * 0.05 + const bodyH = h * 0.42 + const corniceH = h * 0.06 + const roofH = h * 0.32 + const baseTop = baseH + const bodyTop = baseTop + bodyH + const corniceTop = bodyTop + corniceH + const apexY = corniceTop + roofH + + // Footprints. + const baseOvh = Math.min(hw, hd) * 0.12 + const cornOvh = Math.min(hw, hd) * 0.22 + + const p: number[] = [] + const n: number[] = [] + const uv: number[] = [] + + // Base plinth (slightly wider than the body) — closed box. + addBox(p, n, uv, hw + baseOvh, hd + baseOvh, 0, baseTop) + // Body — closed box; the louvers are applied as relief on its walls. + addBox(p, n, uv, hw, hd, baseTop, bodyTop) + // Cornice — overhanging slab the roof sits on. + addBox(p, n, uv, hw + cornOvh, hd + cornOvh, bodyTop, corniceTop) + + // Louvered slats on all four body faces. + addLouvers(p, n, uv, hw, hd, baseTop, bodyTop) + + // Roof. + const rhw = hw + cornOvh + const rhd = hd + cornOvh + if (node.roofStyle === 'pyramid') { + addPyramidRoof(p, n, uv, rhw, rhd, corniceTop, apexY) + } else { + addDomeRoof(p, n, uv, rhw, rhd, corniceTop, roofH) + } + + // Finial: a short post topped by a ball. + if (node.finial) { + const ballR = Math.min(w, d) * 0.05 + const postR = ballR * 0.45 + const postTop = apexY + roofH * 0.18 + addCylinder(p, n, uv, postR, apexY, postTop) + addSphere(p, n, uv, ballR, postTop + ballR * 0.7) + } + + const geo = new THREE.BufferGeometry() + geo.setAttribute('position', new THREE.Float32BufferAttribute(p, 3)) + geo.setAttribute('normal', new THREE.Float32BufferAttribute(n, 3)) + geo.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2)) + geo.computeBoundingSphere() + return geo +} + +// ─── Body / cornice / base ─────────────────────────────────────────── + +// Closed axis-aligned box centred on the Y axis in X/Z, spanning y0..y1. +function addBox( + p: number[], + n: number[], + uv: number[], + hw: number, + hd: number, + y0: number, + y1: number, +): void { + // Walls. + pushQuad(p, n, uv, [hw, y0, -hd], [hw, y0, hd], [hw, y1, hd], [hw, y1, -hd], [1, 0, 0]) + pushQuad(p, n, uv, [-hw, y0, hd], [-hw, y0, -hd], [-hw, y1, -hd], [-hw, y1, hd], [-1, 0, 0]) + pushQuad(p, n, uv, [hw, y0, hd], [-hw, y0, hd], [-hw, y1, hd], [hw, y1, hd], [0, 0, 1]) + pushQuad(p, n, uv, [-hw, y0, -hd], [hw, y0, -hd], [hw, y1, -hd], [-hw, y1, -hd], [0, 0, -1]) + // Top + bottom. + pushQuad(p, n, uv, [-hw, y1, -hd], [-hw, y1, hd], [hw, y1, hd], [hw, y1, -hd], [0, 1, 0]) + pushQuad(p, n, uv, [-hw, y0, -hd], [hw, y0, -hd], [hw, y0, hd], [-hw, y0, hd], [0, -1, 0]) +} + +// ─── Louvers ───────────────────────────────────────────────────────── +// Angled slats standing proud of each body face. Each slat is a double- +// sided angled quad (emitted twice with opposite hints) so it reads from +// both above and below. The solid body wall behind them blocks see-through. + +const SLAT_COUNT = 5 + +function addLouvers( + p: number[], + n: number[], + uv: number[], + hw: number, + hd: number, + y0: number, + y1: number, +): void { + // Each face: a local→world mapper map(u, y, out) and the slat half-width. + const faces: Array<{ map: (u: number, y: number, out: number) => number[]; halfU: number }> = [ + { map: (u, y, out) => [u, y, hd + out], halfU: hw * 0.82 }, // +Z + { map: (u, y, out) => [u, y, -(hd + out)], halfU: hw * 0.82 }, // -Z + { map: (u, y, out) => [hw + out, y, u], halfU: hd * 0.82 }, // +X + { map: (u, y, out) => [-(hw + out), y, u], halfU: hd * 0.82 }, // -X + ] + + const margin = (y1 - y0) * 0.12 + const top = y1 - margin + const bottom = y0 + margin + const span = top - bottom + const drop = span / (SLAT_COUNT + 1) + const proj = drop * 0.9 + + for (const { map, halfU } of faces) { + const outDir = sub(map(0, 0, 1), map(0, 0, 0)) + const upOut: number[] = [outDir[0]!, 1, outDir[2]!] + const downOut: number[] = [outDir[0]!, -1, outDir[2]!] + for (let k = 1; k <= SLAT_COUNT; k++) { + const yTop = bottom + (span * k) / SLAT_COUNT + const a = map(-halfU, yTop, 0) + const b = map(halfU, yTop, 0) + const c = map(halfU, yTop - drop, proj) + const dd = map(-halfU, yTop - drop, proj) + // Top + underside of the slat. + pushQuad(p, n, uv, a, b, c, dd, upOut) + pushQuad(p, n, uv, a, b, c, dd, downOut) + } + } +} + +// ─── Roofs ─────────────────────────────────────────────────────────── + +function addPyramidRoof( + p: number[], + n: number[], + uv: number[], + hw: number, + hd: number, + y0: number, + apexY: number, +): void { + const apex = [0, apexY, 0] + const corners = [ + [hw, y0, -hd], + [hw, y0, hd], + [-hw, y0, hd], + [-hw, y0, -hd], + ] + for (let i = 0; i < 4; i++) { + const a = corners[i]! + const b = corners[(i + 1) % 4]! + // Outward + up hint from the edge midpoint. + const mx = (a[0]! + b[0]!) / 2 + const mz = (a[2]! + b[2]!) / 2 + pushTri(p, n, uv, a, b, apex, [mx, Math.max(hw, hd), mz]) + } +} + +function addDomeRoof( + p: number[], + n: number[], + uv: number[], + rx: number, + rz: number, + y0: number, + domeH: number, +): void { + const lng = 20 + const lat = 6 + let prev = ringAt(rx, rz, y0, lng) + for (let i = 1; i <= lat; i++) { + const phi = (Math.PI / 2) * (i / lat) + const rf = Math.cos(phi) + const y = y0 + domeH * Math.sin(phi) + const ring = ringAt(rx * rf, rz * rf, y, lng) + addBand(p, n, uv, prev, ring, lng, (a, _b, c) => { + const x = (a[0]! + c[0]!) / 2 + const yy = (a[1]! + c[1]!) / 2 - y0 + const z = (a[2]! + c[2]!) / 2 + return [x, yy, z] + }) + prev = ring + } +} + +// ─── Finial primitives ─────────────────────────────────────────────── + +function addCylinder( + p: number[], + n: number[], + uv: number[], + r: number, + y0: number, + y1: number, +): void { + const lng = 12 + const bottom = ringAt(r, r, y0, lng) + const top = ringAt(r, r, y1, lng) + addBand(p, n, uv, bottom, top, lng, (a, _b, c) => { + const x = (a[0]! + c[0]!) / 2 + const z = (a[2]! + c[2]!) / 2 + return [x, 0, z] + }) +} + +function addSphere(p: number[], n: number[], uv: number[], r: number, cy: number): void { + const lng = 14 + const lat = 8 + let prev = ringAt(0, 0, cy - r, lng) + for (let i = 1; i <= lat; i++) { + const theta = Math.PI * (i / lat) - Math.PI / 2 + const ry = r * Math.sin(theta) + const rr = r * Math.cos(theta) + const ring = ringAt(rr, rr, cy + ry, lng) + addBand(p, n, uv, prev, ring, lng, (a, _b, c) => { + const x = (a[0]! + c[0]!) / 2 + const yy = (a[1]! + c[1]!) / 2 - cy + const z = (a[2]! + c[2]!) / 2 + return [x, yy, z] + }) + prev = ring + } +} + +// ─── Revolve plumbing ──────────────────────────────────────────────── + +function ringAt(ax: number, az: number, y: number, lng: number): number[][] { + const row: number[][] = [] + for (let j = 0; j <= lng; j++) { + const t = (Math.PI * 2 * j) / lng + row.push([ax * Math.cos(t), y, az * Math.sin(t)]) + } + return row +} + +function addBand( + p: number[], + n: number[], + uv: number[], + rA: number[][], + rB: number[][], + lng: number, + hintFn: (a: number[], b: number[], c: number[], d: number[]) => number[], +): void { + for (let j = 0; j < lng; j++) { + const a = rA[j]! + const b = rA[j + 1]! + const c = rB[j + 1]! + const d = rB[j]! + pushQuad(p, n, uv, a, b, c, d, hintFn(a, b, c, d)) + } +} + +function sub(a: number[], b: number[]): number[] { + return [a[0]! - b[0]!, a[1]! - b[1]!, a[2]! - b[2]!] +} + +// ─── Winding-safe primitives ───────────────────────────────────────── + +function pushQuad( + positions: number[], + normals: number[], + uvs: number[], + a: number[], + b: number[], + c: number[], + d: number[], + hint: number[], +) { + let nx = (c[1]! - a[1]!) * (b[2]! - a[2]!) - (c[2]! - a[2]!) * (b[1]! - a[1]!) + let ny = (c[2]! - a[2]!) * (b[0]! - a[0]!) - (c[0]! - a[0]!) * (b[2]! - a[2]!) + let nz = (c[0]! - a[0]!) * (b[1]! - a[1]!) - (c[1]! - a[1]!) * (b[0]! - a[0]!) + const flip = nx * hint[0]! + ny * hint[1]! + nz * hint[2]! < 0 + if (flip) { + nx = -nx + ny = -ny + nz = -nz + } + const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1 + nx /= len + ny /= len + nz /= len + + const u = Math.hypot(b[0]! - a[0]!, b[1]! - a[1]!, b[2]! - a[2]!) + const v = Math.hypot(d[0]! - a[0]!, d[1]! - a[1]!, d[2]! - a[2]!) + + if (flip) { + positions.push(a[0]!, a[1]!, a[2]!, b[0]!, b[1]!, b[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, u, 0, u, v) + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, d[0]!, d[1]!, d[2]!) + uvs.push(0, 0, u, v, 0, v) + } else { + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, b[0]!, b[1]!, b[2]!) + uvs.push(0, 0, u, v, u, 0) + positions.push(a[0]!, a[1]!, a[2]!, d[0]!, d[1]!, d[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, 0, v, u, v) + } + for (let i = 0; i < 6; i++) normals.push(nx, ny, nz) +} + +function pushTri( + positions: number[], + normals: number[], + uvs: number[], + a: number[], + b: number[], + c: number[], + hint: number[], +) { + let nx = (b[1]! - a[1]!) * (c[2]! - a[2]!) - (b[2]! - a[2]!) * (c[1]! - a[1]!) + let ny = (b[2]! - a[2]!) * (c[0]! - a[0]!) - (b[0]! - a[0]!) * (c[2]! - a[2]!) + let nz = (b[0]! - a[0]!) * (c[1]! - a[1]!) - (b[1]! - a[1]!) * (c[0]! - a[0]!) + const flip = nx * hint[0]! + ny * hint[1]! + nz * hint[2]! < 0 + if (flip) { + nx = -nx + ny = -ny + nz = -nz + } + const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1 + nx /= len + ny /= len + nz /= len + + if (flip) { + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, b[0]!, b[1]!, b[2]!) + } else { + positions.push(a[0]!, a[1]!, a[2]!, b[0]!, b[1]!, b[2]!, c[0]!, c[1]!, c[2]!) + } + uvs.push(0, 0, 1, 0, 0, 1) + for (let i = 0; i < 3; i++) normals.push(nx, ny, nz) +} diff --git a/packages/nodes/src/cupola/index.ts b/packages/nodes/src/cupola/index.ts new file mode 100644 index 00000000..e6e85557 --- /dev/null +++ b/packages/nodes/src/cupola/index.ts @@ -0,0 +1,3 @@ +export { cupolaDefinition } from './definition' +export { buildCupolaGeometry } from './geometry' +export { CupolaNode } from './schema' diff --git a/packages/nodes/src/cupola/move-tool.tsx b/packages/nodes/src/cupola/move-tool.tsx new file mode 100644 index 00000000..ea1d6e6e --- /dev/null +++ b/packages/nodes/src/cupola/move-tool.tsx @@ -0,0 +1,203 @@ +'use client' + +import { + type AnyNodeId, + 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 { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' +import CupolaPreview from './preview' + +/** + * Cupola move tool. Mirrors the box-vent move flow: the original mesh hides + * during the drag, a ghost tracks the cursor with the correct slope tilt + + * segment yaw, and the click updates the node's position + parent segment in + * one undoable step (reparenting between segments when needed). Cancel + * restores the original transform, or deletes a freshly-cloned cupola. + */ +export default function MoveCupolaTool({ node }: { node: CupolaNode }) { + const exitMoveMode = useCallback(() => { + useEditor.getState().setMovingNode(null) + }, []) + + const [previewPos, setPreviewPos] = useState<[number, number, number] | null>(null) + const [previewSurfaceQuat, setPreviewSurfaceQuat] = useState(null) + const [previewYaw, setPreviewYaw] = useState(0) + + useEffect(() => { + useScene.temporal.getState().pause() + + const original = { + position: [...node.position] as [number, number, number], + rotation: node.rotation ?? 0, + roofSegmentId: node.roofSegmentId, + parentId: node.parentId, + metadata: node.metadata, + } + const meta = + typeof node.metadata === 'object' && node.metadata !== null + ? (node.metadata as Record) + : {} + const isNew = !!meta.isNew + + 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 + + const updatePreview = (event: RoofEvent) => { + const wx = event.position[0] + const wy = event.position[1] + const wz = event.position[2] + + const sx = Math.round(wx * 20) / 20 + const sz = Math.round(wz * 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) + setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion())) + setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0)) + setPreviewPos(worldToBuildingLocal(wx, wy, wz)) + 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 st = useScene.getState() + + const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined + if (prevSegmentId && prevSegmentId !== targetSegmentId) { + const oldSeg = st.nodes[prevSegmentId] as RoofSegmentNode | undefined + if (oldSeg) { + st.updateNode(prevSegmentId, { + children: (oldSeg.children ?? []).filter((id) => id !== node.id), + }) + } + const newSeg = st.nodes[targetSegmentId] as RoofSegmentNode | undefined + if (newSeg && !(newSeg.children ?? []).includes(node.id)) { + st.updateNode(targetSegmentId, { + children: [...(newSeg.children ?? []), node.id], + }) + } + st.dirtyNodes.add(prevSegmentId) + } + + useScene.temporal.getState().resume() + st.updateNode(node.id as AnyNodeId, { + roofSegmentId: targetSegmentId, + parentId: targetSegmentId, + position: [hit.localX, hit.localY, hit.localZ], + rotation: original.rotation, + visible: true, + metadata: {}, + }) + useScene.temporal.getState().pause() + + st.dirtyNodes.add(targetSegmentId) + st.dirtyNodes.add(node.id as AnyNodeId) + + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + + triggerSFX('sfx:item-place') + exitMoveMode() + event.stopPropagation() + } + + const onCancel = () => { + if (isNew) { + const parentId = original.roofSegmentId as AnyNodeId | undefined + if (parentId) { + const parent = useScene.getState().nodes[parentId] as RoofSegmentNode | undefined + if (parent) { + useScene.getState().updateNode(parentId, { + children: (parent.children ?? []).filter((id) => id !== node.id), + }) + } + } + useScene.getState().deleteNode(node.id as AnyNodeId) + useScene.temporal.getState().resume() + markToolCancelConsumed() + exitMoveMode() + return + } + + useScene.getState().updateNode(node.id as AnyNodeId, { + position: original.position, + rotation: original.rotation, + roofSegmentId: original.roofSegmentId as AnyNodeId | undefined, + parentId: original.parentId as AnyNodeId | undefined, + metadata: original.metadata, + }) + if (original.roofSegmentId) { + useScene.getState().dirtyNodes.add(original.roofSegmentId as AnyNodeId) + } + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + + useScene.temporal.getState().resume() + markToolCancelConsumed() + exitMoveMode() + } + + emitter.on('roof:move', updatePreview) + emitter.on('roof:enter', updatePreview) + emitter.on('roof:click', onRoofClick) + emitter.on('tool:cancel', onCancel) + + return () => { + emitter.off('roof:move', updatePreview) + emitter.off('roof:enter', updatePreview) + emitter.off('roof:click', onRoofClick) + emitter.off('tool:cancel', onCancel) + + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + useScene.temporal.getState().resume() + } + }, [exitMoveMode, node]) + + if (!(previewPos && previewSurfaceQuat)) return null + + return ( + + + + + + + + ) +} diff --git a/packages/nodes/src/cupola/panel.tsx b/packages/nodes/src/cupola/panel.tsx new file mode 100644 index 00000000..a3ecc88a --- /dev/null +++ b/packages/nodes/src/cupola/panel.tsx @@ -0,0 +1,288 @@ +'use client' + +import { + type AnyNode, + type AnyNodeId, + CupolaNode as CupolaSchema, + getActiveRoofHeight, + type RoofSegmentNode, + useLiveNodeOverrides, + useScene, +} from '@pascal-app/core' +import { + ActionButton, + ActionGroup, + PanelSection, + PanelWrapper, + SegmentedControl, + SliderControl, + triggerSFX, + useEditor, +} from '@pascal-app/editor' +import { useViewer } from '@pascal-app/viewer' +import { Copy, Move, Trash2 } from 'lucide-react' +import { useCallback } from 'react' +import type { CupolaNode } from './schema' + +/** + * Inspector panel for a placed cupola. Roof style + finial + dimensions + * plus Move / Duplicate / Delete wired into the same ghost-preview drag + * flow the placement tool uses. Mirrors the box-vent panel. + */ +export default function CupolaPanel() { + const selectedId = useViewer((s) => s.selection.selectedIds[0]) + const setSelection = useViewer((s) => s.setSelection) + const updateNode = useScene((s) => s.updateNode) + const deleteNode = useScene((s) => s.deleteNode) + const setMovingNode = useEditor((s) => s.setMovingNode) + + const storeNode = useScene((s) => + selectedId ? (s.nodes[selectedId as AnyNode['id']] as CupolaNode | undefined) : undefined, + ) + const overrides = useLiveNodeOverrides((s) => + selectedId ? (s.get(selectedId as AnyNodeId) as Partial | undefined) : undefined, + ) + const node: CupolaNode | undefined = + storeNode && overrides ? ({ ...storeNode, ...overrides } as CupolaNode) : storeNode + + const segment = useScene((s) => + node?.roofSegmentId + ? (s.nodes[node.roofSegmentId as AnyNodeId] as RoofSegmentNode | undefined) + : undefined, + ) + + const previewProp = useCallback( + (updates: Partial) => { + if (!selectedId) return + useLiveNodeOverrides.getState().set(selectedId as AnyNodeId, updates) + }, + [selectedId], + ) + + const commitProp = useCallback( + (updates: Partial) => { + if (!selectedId) return + updateNode(selectedId as AnyNode['id'], updates) + useLiveNodeOverrides.getState().clear(selectedId as AnyNodeId) + }, + [selectedId, updateNode], + ) + + const handleUpdate = commitProp + + const handleClose = useCallback(() => { + setSelection({ selectedIds: [] }) + }, [setSelection]) + + const handleBack = useCallback(() => { + if (node?.roofSegmentId) { + setSelection({ selectedIds: [node.roofSegmentId as AnyNode['id']] }) + } + }, [node?.roofSegmentId, setSelection]) + + const handleMove = useCallback(() => { + if (!node) return + triggerSFX('sfx:item-pick') + setMovingNode(node as never) + setSelection({ selectedIds: [] }) + }, [node, setMovingNode, setSelection]) + + const handleDuplicate = useCallback(() => { + if (!node) return + triggerSFX('sfx:item-pick') + const parentId = node.roofSegmentId as AnyNodeId | undefined + if (!parentId) return + + const state = useScene.getState() + const meta = + typeof node.metadata === 'object' && node.metadata !== null + ? (node.metadata as Record) + : {} + const cloneInput = { + ...node, + id: undefined, + metadata: { ...meta, isNew: true }, + } as Record + const cloned = CupolaSchema.parse(cloneInput) as CupolaNode + + state.createNode(cloned, parentId) + state.dirtyNodes.add(parentId) + setMovingNode(cloned as never) + setSelection({ selectedIds: [] }) + }, [node, setMovingNode, setSelection]) + + const handleDelete = useCallback(() => { + if (!(selectedId && node)) return + triggerSFX('sfx:item-delete') + const segmentId = node.roofSegmentId + if (segmentId) { + const state = useScene.getState() + const seg = state.nodes[segmentId as AnyNodeId] as RoofSegmentNode | undefined + if (seg) { + state.updateNode(segmentId as AnyNode['id'], { + children: (seg.children ?? []).filter((id) => id !== selectedId), + }) + } + } + deleteNode(selectedId as AnyNodeId) + if (segmentId) { + useScene.getState().dirtyNodes.add(segmentId as AnyNodeId) + setSelection({ selectedIds: [segmentId as AnyNode['id']] }) + } else { + setSelection({ selectedIds: [] }) + } + }, [selectedId, node, deleteNode, setSelection]) + + if (!(node && node.type === 'cupola' && selectedId)) return null + + return ( + + + handleUpdate({ roofStyle: v as CupolaNode['roofStyle'] })} + options={[ + { label: 'Dome', value: 'dome' }, + { label: 'Pyramid', value: 'pyramid' }, + ]} + value={node.roofStyle ?? 'dome'} + /> + handleUpdate({ finial: v === 'on' })} + options={[ + { label: 'Finial', value: 'on' }, + { label: 'No Finial', value: 'off' }, + ]} + value={(node.finial ?? true) ? 'on' : 'off'} + /> + + + + previewProp({ width: v })} + onCommit={(v) => handleUpdate({ width: v })} + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round(node.width * 100) / 100} + /> + previewProp({ depth: v })} + onCommit={(v) => handleUpdate({ depth: v })} + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round(node.depth * 100) / 100} + /> + previewProp({ height: v })} + onCommit={(v) => handleUpdate({ height: v })} + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round(node.height * 100) / 100} + /> + + + + + previewProp({ position: [v, node.position[1] ?? 0, node.position[2] ?? 0] }) + } + onCommit={(v) => + handleUpdate({ position: [v, node.position[1] ?? 0, node.position[2] ?? 0] }) + } + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round((node.position[0] ?? 0) * 100) / 100} + /> + + previewProp({ position: [node.position[0] ?? 0, v, node.position[2] ?? 0] }) + } + onCommit={(v) => + handleUpdate({ position: [node.position[0] ?? 0, v, node.position[2] ?? 0] }) + } + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round((node.position[1] ?? 0) * 100) / 100} + /> + + previewProp({ position: [node.position[0] ?? 0, node.position[1] ?? 0, v] }) + } + onCommit={(v) => + handleUpdate({ position: [node.position[0] ?? 0, node.position[1] ?? 0, v] }) + } + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round((node.position[2] ?? 0) * 100) / 100} + /> + previewProp({ rotation: (deg * Math.PI) / 180 })} + onCommit={(deg) => handleUpdate({ rotation: (deg * Math.PI) / 180 })} + precision={0} + restoreOnCommit={false} + step={1} + unit="°" + value={Math.round(((node.rotation ?? 0) * 180) / Math.PI)} + /> + + + + + } label="Move" onClick={handleMove} /> + } + label="Duplicate" + onClick={handleDuplicate} + /> + } + label="Delete" + onClick={handleDelete} + /> + + + + ) +} diff --git a/packages/nodes/src/cupola/parametrics.ts b/packages/nodes/src/cupola/parametrics.ts new file mode 100644 index 00000000..7ea4cf9f --- /dev/null +++ b/packages/nodes/src/cupola/parametrics.ts @@ -0,0 +1,33 @@ +import type { ParametricDescriptor } from '@pascal-app/core' +import type { CupolaNode } from './schema' + +/** + * Inspector descriptor for the cupola. Move / Duplicate use the kind-owned + * ghost-preview flow (see `./move-tool.tsx`), so the panel hosts those + * actions itself — same pattern as box-vent. + */ +export const cupolaParametrics: ParametricDescriptor = { + customPanel: () => import('./panel'), + groups: [ + { + label: 'Style', + fields: [ + { + key: 'roofStyle', + kind: 'enum', + options: ['dome', 'pyramid'], + display: 'segmented', + }, + { key: 'finial', kind: 'boolean' }, + ], + }, + { + label: 'Dimensions', + fields: [ + { key: 'width', kind: 'number', unit: 'm', min: 0.3, max: 2, step: 0.05 }, + { key: 'depth', kind: 'number', unit: 'm', min: 0.3, max: 2, step: 0.05 }, + { key: 'height', kind: 'number', unit: 'm', min: 0.4, max: 2.5, step: 0.05 }, + ], + }, + ], +} diff --git a/packages/nodes/src/cupola/preview.tsx b/packages/nodes/src/cupola/preview.tsx new file mode 100644 index 00000000..356d83c0 --- /dev/null +++ b/packages/nodes/src/cupola/preview.tsx @@ -0,0 +1,63 @@ +'use client' + +import { useEffect, useMemo } from 'react' +import * as THREE from 'three' +import { buildCupolaGeometry } from './geometry' +import type { CupolaNode } from './schema' + +/** + * Translucent ghost of a cupola, used by the placement tool's cursor and + * the move-tool preview. Builds geometry through the shared pure builder so + * the ghost stays in lockstep with the committed cupola. Raycast disabled + * so the preview doesn't intercept the cursor ray feeding the tool. + */ +const CupolaPreview = ({ node }: { node: CupolaNode }) => { + const geometry = useMemo( + () => buildCupolaGeometry(node), + [node.width, node.depth, node.height, node.roofStyle, node.finial], + ) + + const material = useMemo( + () => + new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + emissive: 0x6c_a3_ff, + emissiveIntensity: 0.18, + roughness: 0.7, + metalness: 0.1, + transparent: true, + opacity: 0.35, + depthWrite: false, + side: THREE.DoubleSide, + }), + [], + ) + + const edgesGeometry = useMemo(() => new THREE.EdgesGeometry(geometry, 25), [geometry]) + + useEffect( + () => () => { + geometry.dispose() + edgesGeometry.dispose() + material.dispose() + }, + [geometry, edgesGeometry, material], + ) + + return ( + + { + /* disabled — see component-level note */ + }} + /> + + + + + ) +} + +export default CupolaPreview diff --git a/packages/nodes/src/cupola/renderer.tsx b/packages/nodes/src/cupola/renderer.tsx new file mode 100644 index 00000000..2352ff5b --- /dev/null +++ b/packages/nodes/src/cupola/renderer.tsx @@ -0,0 +1,109 @@ +'use client' + +import { + type AnyNodeId, + type CupolaNode, + type RoofSegmentNode, + useLiveNodeOverrides, + useRegistry, + useScene, +} from '@pascal-app/core' +import { + type ColorPreset, + createMaterial, + createMaterialFromPresetRef, + createSurfaceRoleMaterial, + useNodeEvents, + useViewer, +} from '@pascal-app/viewer' +import { useEffect, useMemo, useRef } from 'react' +import * as THREE from 'three' +import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' +import { buildCupolaGeometry } from './geometry' + +const defaultMaterial = new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + roughness: 0.7, + metalness: 0.2, +}) + +/** + * Cupola renderer. Same transform stack as the box vent — the cupola is + * parented to a roof-segment, so this reads the segment directly and + * reproduces the segment-local transform (segment position → rotation → + * cupola position → slope tilt → cupola yaw → mesh). No animation. + */ +const CupolaRenderer = ({ node: storeNode }: { node: CupolaNode }) => { + const ref = useRef(null!) + useRegistry(storeNode.id, 'cupola', ref) + const handlers = useNodeEvents(storeNode, 'cupola') + const shading = useViewer((s) => s.shading) + const textures = useViewer((s) => s.textures) + const colorPreset: ColorPreset = useViewer((s) => s.colorPreset) + const sceneTheme = useViewer((s) => s.sceneTheme) + + const overrides = useLiveNodeOverrides( + (s) => s.get(storeNode.id as AnyNodeId) as Partial | undefined, + ) + const node: CupolaNode = overrides ? ({ ...storeNode, ...overrides } as CupolaNode) : storeNode + + const segment = useScene((state) => + node.roofSegmentId + ? (state.nodes[node.roofSegmentId as AnyNodeId] as RoofSegmentNode | undefined) + : undefined, + ) + + const geometry = useMemo( + () => buildCupolaGeometry(node), + [node.width, node.depth, node.height, node.roofStyle, node.finial], + ) + useEffect(() => () => geometry.dispose(), [geometry]) + + const surfaceQuat = useMemo(() => { + if (!segment) return new THREE.Quaternion() + const normal = getAnalyticalNormal(node.position[0] ?? 0, node.position[2] ?? 0, segment) + return surfaceQuatFromNormal(normal, new THREE.Quaternion()) + }, [segment, node.position[0], node.position[2]]) + + const material = useMemo(() => { + if (!textures || (!node.material && !node.materialPreset)) { + return createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme) + } + return node.material + ? createMaterial(node.material, shading) + : (createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial) + }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]) + + const yAxis = useMemo(() => new THREE.Vector3(0, 1, 0), []) + const composedQuat = useMemo(() => { + const yawQuat = new THREE.Quaternion().setFromAxisAngle(yAxis, node.rotation ?? 0) + return new THREE.Quaternion().copy(surfaceQuat).multiply(yawQuat) + }, [surfaceQuat, node.rotation, yAxis]) + + if (!segment) return null + + const segPos = segment.position ?? [0, 0, 0] + const segRotY = segment.rotation ?? 0 + + return ( + + + + + + ) +} + +export default CupolaRenderer diff --git a/packages/nodes/src/cupola/schema.ts b/packages/nodes/src/cupola/schema.ts new file mode 100644 index 00000000..7e0dc628 --- /dev/null +++ b/packages/nodes/src/cupola/schema.ts @@ -0,0 +1,3 @@ +// Schema lives in core (referenced by the AnyNode union). Re-export so +// every cupola-related import stays inside @pascal-app/nodes/cupola. +export { CupolaNode } from '@pascal-app/core' diff --git a/packages/nodes/src/cupola/tool.tsx b/packages/nodes/src/cupola/tool.tsx new file mode 100644 index 00000000..857a3f75 --- /dev/null +++ b/packages/nodes/src/cupola/tool.tsx @@ -0,0 +1,130 @@ +'use client' + +import { + type AnyNodeId, + CupolaNode, + emitter, + type RoofEvent, + type RoofNode, + sceneRegistry, + useScene, +} from '@pascal-app/core' +import { triggerSFX } 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 { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' +import { cupolaDefinition } from './definition' +import CupolaPreview from './preview' + +const worldPoint = new THREE.Vector3() + +/** + * Cupola placement tool. Mounts when the palette activates the cupola kind; + * listens for `roof:*` events; on click commits a new `CupolaNode` parented + * to the targeted segment with segment-local coordinates. Mirrors box-vent. + */ +const CupolaTool = () => { + const activeBuildingId = useViewer((s) => s.selection.buildingId) + const setSelection = useViewer((s) => s.setSelection) + + const [previewPos, setPreviewPos] = useState<[number, number, number] | null>(null) + const [previewSurfaceQuat, setPreviewSurfaceQuat] = useState(null) + const [previewYaw, setPreviewYaw] = useState(0) + const lastSnapRef = useRef<[number, number] | null>(null) + + const previewNode = useMemo( + () => + CupolaNode.parse({ + ...cupolaDefinition.defaults(), + name: 'Cupola', + position: [0, 0, 0], + rotation: 0, + }), + [], + ) + + useEffect(() => { + if (!activeBuildingId) return + + const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => { + const buildingObj = sceneRegistry.nodes.get(activeBuildingId as AnyNodeId) + if (!buildingObj) return [wx, wy, wz] + worldPoint.set(wx, wy, wz) + buildingObj.worldToLocal(worldPoint) + return [worldPoint.x, worldPoint.y, worldPoint.z] + } + + const updatePreview = (event: RoofEvent) => { + const wx = event.position[0] + const wy = event.position[1] + const wz = event.position[2] + + const sx = Math.round(wx * 20) / 20 + const sz = Math.round(wz * 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 normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment) + setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion())) + setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0)) + setPreviewPos(worldToBuildingLocal(wx, wy, wz)) + 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 state = useScene.getState() + + const cupola = CupolaNode.parse({ + ...cupolaDefinition.defaults(), + name: 'Cupola', + roofSegmentId: hit.segment.id, + position: [hit.localX, hit.localY, hit.localZ], + rotation: 0, + }) + state.createNode(cupola, hit.segment.id as AnyNodeId) + state.dirtyNodes.add(hit.segment.id as AnyNodeId) + setSelection({ selectedIds: [cupola.id] }) + triggerSFX('sfx:item-place') + event.stopPropagation() + } + + emitter.on('roof:move', updatePreview) + emitter.on('roof:enter', updatePreview) + emitter.on('roof:click', onClick) + + return () => { + emitter.off('roof:move', updatePreview) + emitter.off('roof:enter', updatePreview) + emitter.off('roof:click', onClick) + } + }, [activeBuildingId, setSelection]) + + if (!activeBuildingId || !previewPos || !previewSurfaceQuat) return null + + return ( + + + + + + + + ) +} + +export default CupolaTool diff --git a/packages/nodes/src/dormer/csg-geometry.ts b/packages/nodes/src/dormer/csg-geometry.ts index 4141e5af..27ebc162 100644 --- a/packages/nodes/src/dormer/csg-geometry.ts +++ b/packages/nodes/src/dormer/csg-geometry.ts @@ -57,11 +57,16 @@ export function buildDormerFallbackGeometry(dormer: DormerNode): THREE.BufferGeo const isFlat = dormer.roofType === 'flat' || roofH === 0 // Body box: foot at y = -skirt, top at y = wallH. - const body = new THREE.BoxGeometry(w, wallH + skirt, d) - body.translate(0, (wallH - skirt) / 2, 0) - const bIdx = body.getIndex()?.count ?? 0 + // BoxGeometry is indexed; ExtrudeGeometry below is not. mergeGeometries + // refuses mixed input ("index attribute exists among all geometries, + // or in none of them") — drop the body's index so both inputs match. + const indexedBody = new THREE.BoxGeometry(w, wallH + skirt, d) + indexedBody.translate(0, (wallH - skirt) / 2, 0) + const body = indexedBody.toNonIndexed() + indexedBody.dispose() + const bVtx = body.getAttribute('position').count body.clearGroups() - body.addGroup(0, bIdx, 0) + body.addGroup(0, bVtx, 0) if (isFlat) { if (!body.getAttribute('normal')) body.computeVertexNormals() @@ -78,9 +83,9 @@ export function buildDormerFallbackGeometry(dormer: DormerNode): THREE.BufferGeo const roof = new THREE.ExtrudeGeometry(roofShape, { depth: d, bevelEnabled: false }) roof.translate(0, wallH, -d / 2) - const rIdx = roof.getIndex()?.count ?? 0 + const rVtx = roof.getAttribute('position').count roof.clearGroups() - roof.addGroup(0, rIdx, 3) + roof.addGroup(0, rVtx, 3) const merged = mergeGeometries([body, roof], true) ?? body body.dispose() @@ -187,11 +192,20 @@ function createDormerWindowCutGeometry( } /** - * Which faces of a dormer are exposed (not fully buried in the host - * roof). "front" = mesh-local +Z, "back" = mesh-local −Z (after the - * +π/2 yaw bake for non-shed roofs). A face is exposed when the - * dormer's total wall top exceeds the host roof surface at that face's - * Z position. + * Which gable faces of a dormer have a *fully visible window opening* + * (not clipped by the host roof slope). "front" = mesh-local +Z, + * "back" = mesh-local −Z (after the +π/2 yaw bake for non-shed roofs). + * + * The criterion is window-bottom-above-slope, not wall-top-above-slope: + * the dormer wall extends well below the window into the skirt that's + * buried inside the roof, so checking just "does any wall poke above + * the slope" is far too lenient — a dormer whose eave barely clears + * the roof would pass even though the entire window (which sits inside + * the skirt, well below the eave) is buried. Switching to the window + * bottom collapses both the CSG window-cut decision (which calls into + * this function in `generateDormerGeometry`) and the live render gate + * (window-assembly.tsx) onto the right line: the window only renders + * where it's actually visible from outside. */ export function getDormerExposedFaces( dormer: DormerNode, @@ -206,7 +220,18 @@ export function getDormerExposedFaces( const frontZ = dormerZ + halfDepth * Math.cos(rot) const backZ = dormerZ - halfDepth * Math.cos(rot) - const dormerWallTop = dormerY + dormer.height + // Window bottom in dormer-local Y. Mirrors `getDormerSkirtWindowDims` + // so both functions read the same window position. The window sits + // in the skirt below the eave (dormer-local Y=0), so `centerY` is + // typically negative; subtracting half the window height lands us at + // the bottom edge. + const skirtH = dormerSkirtHeight(dormer) + const winH = Math.max(0, dormer.windowHeight ?? 0) + const winOffsetY = dormer.windowOffsetY ?? 0 + const windowCenterDormerY = -(skirtH / 2) + winOffsetY + const windowBottomDormerY = windowCenterDormerY - winH / 2 + // Lift into segment-local Y: dormer-local Y=0 sits at `dormer.position[1]`. + const windowBottomSegY = dormerY + windowBottomDormerY const hostWh = hostSegment.wallHeight ?? 0.5 const hostRh = getActiveRoofHeight(hostSegment) @@ -224,15 +249,15 @@ export function getDormerExposedFaces( return hostWh + hostRh * (1 - t) } - // A face is "exposed" only if the dormer's wall actually pokes above - // the host roof there by a meaningful amount — otherwise the wall is - // CSG-buried and any window we render at that face will hover with - // no wall behind it. A 5cm threshold suppresses the borderline-cases - // where the wall top is essentially level with the slope. + // A face is "exposed" only if the *window bottom* clears the host + // slope at that face's Z by a meaningful amount — borderline cases + // (slope grazing the window bottom) suppress the window so we don't + // render a partially-clipped frame poking out of the roof. 5cm + // matches the threshold the prior wall-top check used. const minPokeOut = 0.05 return { - front: dormerWallTop - roofHeightAtZ(frontZ) > minPokeOut, - back: dormerWallTop - roofHeightAtZ(backZ) > minPokeOut, + front: windowBottomSegY - roofHeightAtZ(frontZ) > minPokeOut, + back: windowBottomSegY - roofHeightAtZ(backZ) > minPokeOut, } } diff --git a/packages/nodes/src/dormer/definition.ts b/packages/nodes/src/dormer/definition.ts index 30ba96cd..ce929a78 100644 --- a/packages/nodes/src/dormer/definition.ts +++ b/packages/nodes/src/dormer/definition.ts @@ -1,14 +1,379 @@ import { type AnyNode, + type AnyNodeId, DormerNode as DormerNodeSchema, type DormerNode as DormerNodeType, + type HandleDescriptor, type NodeDefinition, + type RoofSegmentNode as RoofSegmentNodeType, + type SceneApi, } from '@pascal-app/core' -import { buildDormerRoofCut } from './csg-geometry' +import { buildDormerRoofCut, getDormerExposedFaces } from './csg-geometry' +import { buildDormerFloorplan } from './floorplan' import { dormerPaint } from './paint' import { dormerParametrics } from './parametrics' import { DormerNode } from './schema' +const SIDE_HANDLE_OFFSET = 0.25 +const HEIGHT_HANDLE_OFFSET = 0.25 +const ROTATE_CORNER_OFFSET = 0.35 +const ROTATE_RING_OFFSET = 0.08 +// Schema/parametrics ranges — keep these aligned with `dormerParametrics` +// so the in-world drag and the inspector slider clamp identically. +const MIN_DIM = 0.5 +const MIN_HEIGHT = 0 +const MIN_ROOF_HEIGHT = 0 +const MAX_ROOF_HEIGHT = 2 +const MIN_SKIRT = 0.2 +const MAX_SKIRT = 6 +// Window-handle constants. The window opening is parametric geometry +// on the dormer's +Z gable face; chevrons sit just outside its rim +// with a small forward Z offset so they pop in front of the wall plane +// instead of z-fighting with the frame bars. +const WINDOW_SIDE_HANDLE_OFFSET = 0.15 +const WINDOW_HEIGHT_HANDLE_OFFSET = 0.15 +const WINDOW_FACE_Z_OFFSET = 0.05 +// Lower clamp for window dims matches the geometry's internal clamp +// in `getDormerSkirtWindowDims` (0.1m). Upper clamps depend on the +// dormer dimensions and are resolved per-handle via the function form +// of `max`. +const MIN_WINDOW_DIM = 0.1 +// Clamp used for handle Y placement so side chevrons stay reachable on +// dormers whose wall is flat (`height ≈ 0`). The dormer body is +// `height + roofHeight` tall; if that collapses too, the side arrows +// would bury into the deck — this floor keeps them visible. +const MIN_BODY_DISPLAY = 0.3 + +// Mid-Y of the dormer body in dormer-local frame. Y=0 is the eave +// (where wall meets skirt); body extends up to `height + roofHeight`. +// Side chevrons sit at the body midpoint so they read as "this is the +// dormer's footprint" rather than floating at the apex or the eave. +function getBodyMidY(n: DormerNodeType): number { + return Math.max(n.height + n.roofHeight, MIN_BODY_DISPLAY) / 2 +} + +// Width arrow on the +X (right) or -X (left) side. Asymmetric resize: +// dragging one arrow grows the dormer outward from its own edge while +// the opposite edge stays world-fixed in segment frame. The dormer's +// registered ref frame is dormer-local (renderer applies position + +// rotation on the registered group), so placements are in dormer-local +// coords — no per-arrow rotation/translation compensation here. +// +// `apply` recomputes `position` so the anchored edge stays at the same +// segment-local point even when the dormer is Y-rotated: project the +// dormer's local +X onto segment frame via (cos r, -sin r), find the +// anchored edge's segment-local XZ from the pre-drag node, then place +// the new center half a new-width away from that anchor in the same +// direction. Mirrors chimney + roof-segment width handle math. +function dormerWidthHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'x', + // 'min' = -X edge anchored (right arrow grows the +X edge outward). + // 'max' = +X edge anchored (left arrow grows the -X edge outward). + anchor: side === 'right' ? 'min' : 'max', + // Default 'parent' portal (no `'grandparent'` escape). Arrows + // portal into the host roof segment's registered mesh, which lives + // inside the roof renderer's ``. + // That wrapper is `visible={false}` by default; `RoofEditSystem` + // imperatively flips it to `visible={true}` whenever any accessory + // hosted on a segment of this roof is selected, so the portaled + // arrows become visible during selection without us reaching for + // `portal: 'grandparent'` — which trips the same "Color target has + // no corresponding fragment stage output" WebGPU pipeline error + // chimney already documents (likely an MRT interaction with the + // window-assembly's transparent glazing meshes). + min: MIN_DIM, + currentValue: (n) => n.width, + apply: (initial, newWidth) => { + const rotY = initial.rotation ?? 0 + const armX = Math.cos(rotY) + const armZ = -Math.sin(rotY) + const anchorX = initial.position[0] - sign * (initial.width / 2) * armX + const anchorZ = initial.position[2] - sign * (initial.width / 2) * armZ + const newCenterX = anchorX + sign * (newWidth / 2) * armX + const newCenterZ = anchorZ + sign * (newWidth / 2) * armZ + return { + width: newWidth, + position: [newCenterX, initial.position[1], newCenterZ], + } + }, + placement: { + position: (n) => [sign * (n.width / 2 + SIDE_HANDLE_OFFSET), getBodyMidY(n), 0], + // Flip the left chevron so it points outward toward -X. The + // generic LinearArrow only auto-orients for axis 'z'; +X / -X + // facing is up to the descriptor. + rotationY: () => (side === 'right' ? 0 : Math.PI), + }, + } +} + +// Depth arrow on the +Z side. Symmetric (anchor 'center') to match +// chimney's known-working handle count — splitting depth into asymmetric +// front + back chevrons puts the dormer over the per-node MRT/TSL +// budget that chimney already documents (see `chimneyHandles` factory). +// Re-evaluate the split once that pipeline issue is pinned down. +function dormerDepthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'z', + anchor: 'center', + min: MIN_DIM, + currentValue: (n) => n.depth, + apply: (_n, newValue) => ({ depth: newValue }), + placement: { + position: (n) => [0, getBodyMidY(n), n.depth / 2 + SIDE_HANDLE_OFFSET], + }, + } +} + +// Wall-height tracker — dashed vertical leader from the eave (y=0) up +// to a draggable cube at the wall top (y=height), centred on the +// footprint. Reads as "the dormer wall is THIS tall" without claiming +// the roof apex. Same `linear-resize axis='y'` pipeline as every other +// height handle; `shape: 'tracker'` only swaps the visual. +function dormerWallHeightHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + shape: 'tracker', + min: MIN_HEIGHT, + currentValue: (n) => n.height, + apply: (_n, newValue) => ({ height: newValue }), + placement: { + position: (n) => [0, Math.max(n.height, 0.001), 0], + }, + trackerBaseY: () => 0, + } +} + +// Wall-skirt chevron — sits BELOW the eave, at the bottom of the +// hung-wall skirt that extends down into the host roof. Drag pulls the +// skirt's bottom edge further down (or up) to grow / shrink +// `wallSkirtHeight`. Anchor 'max' keeps the eave (y=0) fixed; the +// linear-resize factor (-1 for anchor 'max') flips the drag sign so +// dragging the chevron downward increases the value 1:1. +// +// Plain arrow (not tracker) because tracker only renders an upward +// leader; the dashed line would point the wrong way for a downward +// span. The auto-orient logic in `ArrowHandle` flips the chevron to +// point -Y when placement.y < 0, so the arrow visibly points down. +function dormerWallSkirtHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'max', + min: MIN_SKIRT, + max: MAX_SKIRT, + currentValue: (n) => n.wallSkirtHeight, + apply: (_n, newValue) => ({ wallSkirtHeight: newValue }), + placement: { + position: (n) => [0, -(n.wallSkirtHeight + HEIGHT_HANDLE_OFFSET), 0], + }, + } +} + +// Roof-height chevron at the dormer's peak. Drag adjusts `roofHeight` +// directly — unlike roof-segment there's no pitch back-solve because +// dormer stores roof height as a literal scalar, not a pitch angle. +// Placed slightly above the apex (height + roofHeight) so the chevron +// visually attaches to the ridge. +function dormerRoofHeightHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + min: MIN_ROOF_HEIGHT, + max: MAX_ROOF_HEIGHT, + currentValue: (n) => n.roofHeight, + apply: (_n, newValue) => ({ roofHeight: newValue }), + placement: { + position: (n) => [0, n.height + n.roofHeight + HEIGHT_HANDLE_OFFSET, 0], + }, + } +} + +// Whole-dormer rotation gizmo at the +X / +Z corner of the footprint, +// guide ring traces the corner-diagonal radius on hover / drag. +// Dormer-local frame is the registered group (renderer applies +// node.position + node.rotation there), so the default rotation pivot +// (rideObject origin = dormer center) is correct — no +// `rotationCenter` override needed. +function dormerRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + // Negate the cursor delta to match three.js Y-rotation handedness + // (cursor atan2 ticks opposite-handed from `rotation-y`). + apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }), + placement: { + position: (n) => { + const halfX = n.width / 2 + ROTATE_CORNER_OFFSET + const halfZ = n.depth / 2 + ROTATE_CORNER_OFFSET + return [halfX, getBodyMidY(n), halfZ] + }, + // The two-headed icon's natural bias points along +X; aim it at + // the corner (45° outward from the dormer's local frame). + rotationY: () => -Math.PI / 4, + }, + decoration: { + kind: 'ring', + radius: (n) => Math.hypot(n.width / 2, n.depth / 2) + ROTATE_RING_OFFSET, + y: (n) => getBodyMidY(n), + }, + } +} + +// Window-center Y in dormer-local frame. The schema stores +// `windowOffsetY` as the bottom-relative offset of the window center +// from the bottom of the skirt; the geometry then maps it to +// `centerY = -(skirtH / 2) + offsetY`. We mirror that here so handle +// placements line up with what the inspector + window-assembly use. +function getWindowCenterY(n: DormerNodeType): number { + return -(n.wallSkirtHeight / 2) + n.windowOffsetY +} + +// Sign of the dormer-local Z direction where the visible window face +// sits. The dormer renders the window on both +Z (front) and -Z (back) +// gable faces, but only whichever face actually pokes above the host +// roof slope is exposed — `getDormerExposedFaces` is the source of +// truth there. The in-world handles need to attach to that exposed +// face so the user is editing the window they can see; as the dormer +// drags across the ridge, the exposed face flips and the chevrons +// follow. +// +// Preference order when both faces are exposed (e.g. a tall gable that +// pokes above the roof on both ends): keep handles on +Z so the +// affordance stays put visually instead of flipping when the slope +// math grazes the threshold from the other side. When neither face is +// exposed (degenerate — wall buried on both sides), fall back to +Z so +// the placement still produces a valid vector; the chevrons are just +// not useful there. +function getExposedFaceZSign(n: DormerNodeType, sceneApi: SceneApi): 1 | -1 { + if (!n.roofSegmentId) return 1 + const segment = sceneApi.get(n.roofSegmentId as AnyNodeId) + if (!segment) return 1 + const exposed = getDormerExposedFaces(n, segment) + if (exposed.front) return 1 + if (exposed.back) return -1 + return 1 +} + +// Window-width chevron on the +X (right) or -X (left) edge of the +// opening. Asymmetric: dragging one arrow grows the window outward +// from its own edge while the opposite edge stays put. The framework +// only knows about the scalar `windowWidth`; we re-emit `windowOffsetX` +// in `apply` so the anchored edge stays at the same X in dormer-local. +// Placement sits on the dormer's +Z gable face, where the window opens. +function dormerWindowWidthHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'x', + anchor: side === 'right' ? 'min' : 'max', + min: MIN_WINDOW_DIM, + // Cap at the dormer's window field — keep a 0.1m gap on each side + // to match the geometry's interior clamp (`maxW = width - 0.1`). + max: (n) => Math.max(MIN_WINDOW_DIM, n.width - 0.1), + currentValue: (n) => n.windowWidth, + apply: (initial, newWidth) => { + // Anchored edge stays fixed: anchor X = initial.windowOffsetX - + // sign * initial.windowWidth/2. New center = anchor + sign * + // newWidth/2 → new windowOffsetX. + const anchorX = initial.windowOffsetX - sign * (initial.windowWidth / 2) + const newOffsetX = anchorX + sign * (newWidth / 2) + return { + windowWidth: newWidth, + windowOffsetX: newOffsetX, + } + }, + placement: { + position: (n, sceneApi) => { + const faceSign = getExposedFaceZSign(n, sceneApi) + return [ + n.windowOffsetX + sign * (n.windowWidth / 2 + WINDOW_SIDE_HANDLE_OFFSET), + getWindowCenterY(n), + faceSign * (n.depth / 2 + WINDOW_FACE_Z_OFFSET), + ] + }, + // Left chevron points -X; right points +X. LinearArrow doesn't + // auto-orient axis 'x' — descriptor handles the flip. + rotationY: () => (side === 'right' ? 0 : Math.PI), + }, + } +} + +// Window-height chevron on the +Y (top) or -Y (bottom) edge of the +// opening. Same asymmetric pattern as the width handle, projected onto +// the Y axis. The schema stores the window's vertical position as +// `windowOffsetY` (distance from the BOTTOM of the skirt to the window +// CENTER), not as a centerY in dormer-local — so `apply` translates +// back through that mapping when it re-emits the offset. +function dormerWindowHeightHandle(side: 'top' | 'bottom'): HandleDescriptor { + const sign = side === 'top' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'y', + // 'min' = bottom edge anchored (top arrow grows the top edge up). + // 'max' = top edge anchored (bottom arrow drops the bottom edge). + anchor: side === 'top' ? 'min' : 'max', + min: MIN_WINDOW_DIM, + // Cap at the skirt with a 0.1m interior margin — matches + // `maxH = skirtH - 0.1` from `getDormerSkirtWindowDims`. + max: (n) => Math.max(MIN_WINDOW_DIM, n.wallSkirtHeight - 0.1), + currentValue: (n) => n.windowHeight, + apply: (initial, newHeight) => { + // Compute the anchored edge in dormer-local Y, derive the new + // centerY, then map back to schema-form `windowOffsetY`. + const initialCenterY = -(initial.wallSkirtHeight / 2) + initial.windowOffsetY + const anchorY = initialCenterY - sign * (initial.windowHeight / 2) + const newCenterY = anchorY + sign * (newHeight / 2) + const newOffsetY = newCenterY + initial.wallSkirtHeight / 2 + return { + windowHeight: newHeight, + windowOffsetY: newOffsetY, + } + }, + placement: { + position: (n, sceneApi) => { + const faceSign = getExposedFaceZSign(n, sceneApi) + return [ + n.windowOffsetX, + getWindowCenterY(n) + sign * (n.windowHeight / 2 + WINDOW_HEIGHT_HANDLE_OFFSET), + faceSign * (n.depth / 2 + WINDOW_FACE_Z_OFFSET), + ] + }, + }, + } +} + +const dormerHandles: HandleDescriptor[] = [ + dormerWidthHandle('right'), + dormerWidthHandle('left'), + dormerDepthHandle(), + dormerWallHeightHandle(), + dormerRotateHandle(), + dormerWindowWidthHandle('right'), + dormerWindowWidthHandle('left'), + dormerWindowHeightHandle('top'), + dormerWindowHeightHandle('bottom'), + // The wall-skirt (downward chevron), roof-height (peak chevron), and + // the asymmetric front/back depth split stay out for now. Re-adding + // any of them previously fired the "Color target has no + // corresponding fragment stage output" WebGPU pipeline error chimney + // already documented for its flue / cap-thickness / cap-overhang + // extras — only reproducible while `portal: 'grandparent'` was set, + // which we no longer rely on (RoofEditSystem reveals the wrapper + // instead). The shapes themselves are valid; if the count budget + // turns out to also be sensitive without grandparent portal, drop + // the window handles first since the inspector covers them too. + // dormerWallSkirtHandle(), + // dormerRoofHeightHandle(), +] + /** * Dormer — a small house-shaped protrusion sitting on top of a roof * segment. The window opening is inlined into the dormer's schema @@ -69,6 +434,8 @@ export const dormerDefinition: NodeDefinition = { }, parametrics: dormerParametrics, + handles: dormerHandles, + floorplan: buildDormerFloorplan, renderer: { kind: 'parametric', diff --git a/packages/nodes/src/dormer/floorplan.ts b/packages/nodes/src/dormer/floorplan.ts new file mode 100644 index 00000000..8305c46d --- /dev/null +++ b/packages/nodes/src/dormer/floorplan.ts @@ -0,0 +1,213 @@ +import type { + AnyNodeId, + DormerNode, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RoofNode, + RoofSegmentNode, +} from '@pascal-app/core' + +/** + * Floor-plan builder for a dormer — a small house-shaped structure that + * projects from a roof slope, with its own little roof and a window on the + * front face. Seen from above it reads as a `width × depth` footprint plus + * its roof's ridge/hip linework, and a line marking the window on the + * down-slope (+Z) front face. + * + * Coordinate frame mirrors the 3D transform stack + * (roof → roof-segment → dormer), same as the chimney builder. The + * dormer's `position` is segment-local: X = width axis (along the eave), + * Z = depth axis (projecting down-slope; +Z is the front/window face). + * `rotation` is yaw. Rotations are negated for the floor plan's y-down + * convention (see `buildRoofSegmentFloorplan`). + * + * Per-type roof linework follows the dormer's own roof geometry + * (`buildDormerCutShape` in csg-geometry.ts): gable ridge runs along Z, + * shed slopes high-at-back (−Z) to low-at-front (+Z), hip ridges along the + * longer axis. Gambrel falls back to gable; dutch/mansard to hip — the + * same fallbacks the 3D cut uses. + */ +export function buildDormerFloorplan( + node: DormerNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + // Compose roof → segment → dormer in plan coords. Each rotation negated + // so SVG's y-down CW matches Three.js' top-down CCW. + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const rot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + 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 + + // Reads as a small structure on the roof — neutral grey, accent on + // select, light blue on hover. + const baseInk = '#52525b' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const fill = showSelectedChrome ? '#fed7aa' : '#e4e4e7' + const fillOpacity = showSelectedChrome ? 0.55 : 0.6 + const lineWidth = showSelectedChrome ? 0.03 : 0.022 + const ridgeWidth = showSelectedChrome ? 0.04 : 0.03 + + const hw = Math.max(node.width, 0.1) / 2 + const hd = Math.max(node.depth, 0.1) / 2 + + const corners: FloorplanPoint[] = [ + toPlan(-hw, -hd), + toPlan(hw, -hd), + toPlan(hw, hd), + toPlan(-hw, hd), + ] + + const children: FloorplanGeometry[] = [ + // Transparent hit-target across the footprint. + { + kind: 'polygon', + points: corners, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }, + // Body footprint, filled. + { + kind: 'polygon', + points: corners, + fill, + fillOpacity, + stroke, + strokeWidth: lineWidth, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }, + ] + + const line = (a: readonly [number, number], b: readonly [number, number], w: number) => { + const pa = toPlan(a[0], a[1]) + const pb = toPlan(b[0], b[1]) + children.push({ + kind: 'line', + x1: pa[0], + y1: pa[1], + x2: pb[0], + y2: pb[1], + stroke, + strokeWidth: w, + strokeLinecap: 'round', + pointerEvents: 'none', + }) + } + + // Roof linework per dormer roof type (skipped for flat / zero-height). + const type = node.roofType + if (node.roofHeight > 0 && type !== 'flat') { + if (type === 'shed') { + // Slopes from the high back (−Z) down to the low front (+Z); show a + // downslope arrow pointing toward the front. + const tail = toPlan(0, -hd * 0.55) + const head = toPlan(0, hd * 0.55) + const dx = head[0] - tail[0] + const dy = head[1] - tail[1] + const len = Math.hypot(dx, dy) || 1 + const ux = dx / len + const uy = dy / len + const headLen = Math.min(0.25, len * 0.4) + const wing = headLen * 0.6 + children.push({ + kind: 'line', + x1: tail[0], + y1: tail[1], + x2: head[0], + y2: head[1], + stroke, + strokeWidth: lineWidth, + strokeLinecap: 'round', + pointerEvents: 'none', + }) + children.push({ + kind: 'polyline', + points: [ + [head[0] - headLen * ux - wing * uy, head[1] - headLen * uy + wing * ux], + [head[0], head[1]], + [head[0] - headLen * ux + wing * uy, head[1] - headLen * uy - wing * ux], + ], + stroke, + strokeWidth: lineWidth, + strokeLinecap: 'round', + strokeLinejoin: 'round', + pointerEvents: 'none', + }) + } else if (type === 'hip' || type === 'dutch' || type === 'mansard') { + // Ridge along the longer axis + four hips from the corners (a single + // apex when square). Mirrors the dormer cut's pyramid/hip. + if (Math.abs(hw - hd) < 0.01) { + line([-hw, -hd], [0, 0], lineWidth) + line([hw, -hd], [0, 0], lineWidth) + line([hw, hd], [0, 0], lineWidth) + line([-hw, hd], [0, 0], lineWidth) + } else if (hd >= hw) { + const rl = hd - hw // ridge along Z + line([0, -rl], [0, rl], ridgeWidth) + line([-hw, hd], [0, rl], lineWidth) + line([hw, hd], [0, rl], lineWidth) + line([-hw, -hd], [0, -rl], lineWidth) + line([hw, -hd], [0, -rl], lineWidth) + } else { + const rl = hw - hd // ridge along X + line([-rl, 0], [rl, 0], ridgeWidth) + line([-hw, -hd], [-rl, 0], lineWidth) + line([-hw, hd], [-rl, 0], lineWidth) + line([hw, -hd], [rl, 0], lineWidth) + line([hw, hd], [rl, 0], lineWidth) + } + } else { + // Gable (and gambrel fallback): ridge runs front-to-back along Z. + line([0, -hd], [0, hd], ridgeWidth) + } + } + + // Window on the +Z (front) face — a line just inside the front edge, + // spanning the window width centred at its X offset. Marks the glazing + // and which way the dormer faces. + const ww = node.windowWidth ?? 0 + if (ww > 0.01) { + const halfWin = Math.min(ww, node.width) / 2 + const center = Math.max(-hw + halfWin, Math.min(hw - halfWin, node.windowOffsetX ?? 0)) + const inset = Math.min(hd * 0.2, 0.08) + line([center - halfWin, hd - inset], [center + halfWin, hd - inset], lineWidth) + } + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/dormer/renderer.tsx b/packages/nodes/src/dormer/renderer.tsx index 5c7fe580..01f8ab0f 100644 --- a/packages/nodes/src/dormer/renderer.tsx +++ b/packages/nodes/src/dormer/renderer.tsx @@ -152,29 +152,36 @@ const DormerRenderer = ({ node: storeNode }: { node: DormerNode }) => { // dormer-mesh-local with `dormer.position` + `dormer.rotation` // already accounted for by `segToMesh`, so we layer them as group // transforms here too. + // + // The registered ref sits on the inner group that applies the + // dormer's own position + rotation so the registered Object3D's + // local frame is *dormer-local* — that's what `NodeArrowHandles` + // reads to place its chevrons. Mirrors chimney's structure. return ( - - - - - + + + ) diff --git a/packages/nodes/src/dormer/use-dormer-placement.ts b/packages/nodes/src/dormer/use-dormer-placement.ts index e524342d..97b31012 100644 --- a/packages/nodes/src/dormer/use-dormer-placement.ts +++ b/packages/nodes/src/dormer/use-dormer-placement.ts @@ -10,7 +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 { resolveRoofSegmentHit } from '../roof/segment-hit' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' import { DORMER_PLACEMENT_ROTATION_STEP, DORMER_PLACEMENT_SNAP_M } from './geometry' const tmpMatrix = new THREE.Matrix4() diff --git a/packages/nodes/src/dormer/window-assembly.tsx b/packages/nodes/src/dormer/window-assembly.tsx index f35825de..5237b4eb 100644 --- a/packages/nodes/src/dormer/window-assembly.tsx +++ b/packages/nodes/src/dormer/window-assembly.tsx @@ -113,6 +113,19 @@ const DormerWindowAssembly = ({ node.position[0], node.position[1], node.position[2], + // Rotation flips which dormer-local face projects to which Z in + // segment frame, so dragging the dormer across the ridge with a + // non-zero yaw needs to recompute exposure to know which gable + // is now poking above the slope. + node.rotation, + // Window position + height feed `getDormerExposedFaces` now that + // it's gating on window-bottom-above-slope (not wall-top-above- + // slope) — dragging the window down via inspector or the new + // window-height/offset handles must re-evaluate which gable + // still has a fully-visible opening. + node.windowHeight, + node.windowOffsetY, + node.wallSkirtHeight, ], ) @@ -120,8 +133,18 @@ const DormerWindowAssembly = ({ const winX = skirtWin.offsetX const winY = skirtWin.centerY - const renderFace = (zPos: number, outDir: number, keyPrefix: string) => ( - + // The glazing role material is FrontSide (DoubleSide on a NodeMaterial + // poisons the MRT scene pass — see `createSurfaceRoleMaterial`). The + // back gable face therefore renders inside a Y-rotated group so its + // FrontSide points outward (-Z in segment frame). With the rotation, + // the sill always extrudes along the group's local +Z, so its position + // no longer needs to flip per-face. + const renderFace = (zPos: number, yRot: number, keyPrefix: string) => ( + {winGeo.glassPanes.map((pane, i) => ( )} @@ -158,8 +181,8 @@ const DormerWindowAssembly = ({ return ( <> - {exposed.front && renderFace(gableHalfZ, +1, 'front')} - {exposed.back && renderFace(-gableHalfZ, -1, 'back')} + {exposed.front && renderFace(gableHalfZ, 0, 'front')} + {exposed.back && renderFace(-gableHalfZ, Math.PI, 'back')} ) } diff --git a/packages/nodes/src/downspout/definition.ts b/packages/nodes/src/downspout/definition.ts new file mode 100644 index 00000000..e5fee036 --- /dev/null +++ b/packages/nodes/src/downspout/definition.ts @@ -0,0 +1,209 @@ +import { + type AnyNodeId, + DownspoutNode as DownspoutNodeSchema, + type DownspoutNode as DownspoutNodeType, + type GutterNode, + type GutterOutlet, + type HandleDescriptor, + type NodeDefinition, + useLiveNodeOverrides, + useScene, +} from '@pascal-app/core' +import { downspoutParametrics } from './parametrics' +import { + computeDownspoutPath, + downspoutPipeDims, + effectiveWallJog, + resolveDownspoutRouting, +} from './routing' +import { DownspoutNode } from './schema' + +// Mirrors the parametric `min`s so handle drags can't shrink the pipe +// past what the inspector would accept. +const MIN_LENGTH = 0.1 +// The length cube + dashed leader ride the straight WALL RUN, offset +// outward (+Z, over the eave) past the pipe surface so they float clear +// of the pipe instead of touching it. +const LENGTH_HANDLE_PAD = 0.12 +// Lift the length cube a little up the run from the very bottom so it +// reads as a height grip rather than sitting at the pipe's end. Clamped +// to the run top so it never climbs above the straight section. +const CUBE_LIFT = 0.18 +// Side-move arrows: how far ±X (along the eave) they sit from the pipe, +// and how far below the gutter floor — near the top so they read as +// "grab and slide along the eave". +const SIDE_MOVE_OFFSET = 0.22 +const SIDE_MOVE_Y = -0.12 + +/** + * Length tracker — a dashed vertical leader from the outlet (Y = 0, + * the gutter floor) down to a small cube near the bottom of the + * straight wall run, `anchor: 'max'` + `axis: 'y'` so dragging the + * cube down extends the pipe 1:1. + * + * Both the cube and the leader sit on the wall-run line but offset + * outward (away from the pipe) by `radius + LENGTH_HANDLE_PAD`, so the + * whole dimension floats clear of the pipe — it reads as "change the + * height" rather than a box jammed onto the kicked-out mouth. The cube + * rides the run BOTTOM (above the kickout), not the mouth, so the + * dimension stays on the straight part. + */ +function downspoutLengthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'max', + shape: 'tracker', + min: MIN_LENGTH, + currentValue: (n) => n.length, + apply: (_n, newValue) => ({ length: Math.max(MIN_LENGTH, newValue) }), + placement: { + position: (n, scene) => { + const routing = resolveDownspoutRouting(n, scene) + const path = computeDownspoutPath( + n.length, + effectiveWallJog(n, routing), + (n.terminal ?? 'splash') !== 'straight', + ) + const halfZ = downspoutPipeDims(n, routing).halfZ + const y = Math.min(path.wallRunTopY, path.wallRunBottomY + CUBE_LIFT) + return [0, y, path.wallRunZ + halfZ + LENGTH_HANDLE_PAD] + }, + }, + // Leader starts at Y = 0 (outlet / gutter floor) and runs DOWN past + // the cube — same tracker the wall / chimney height fields use. + trackerBaseY: () => 0, + } +} + +// Usable half-span — keep the outlet a hair inside each end so the +// collar never lands on a cap (the geometry clamps too; this bounds the +// drag). Reads the host gutter's length. +function moveBound(n: DownspoutNodeType, gutter: GutterNode | undefined): number { + return Math.max(0.05, Math.max(0.05, gutter?.length ?? 2) / 2 - 0.1) +} + +// Effective outlet offset for `currentValue` — reads the gutter's live +// override first (so the dragged value tracks) then the store. +function readOutletOffset(n: DownspoutNodeType): number { + if (!n.gutterId) return 0 + const id = n.gutterId as AnyNodeId + const override = useLiveNodeOverrides.getState().get(id) as Partial | undefined + const gutter = useScene.getState().nodes[id] as GutterNode | undefined + const outlets = (override?.outlets as GutterOutlet[] | undefined) ?? gutter?.outlets ?? [] + return outlets.find((o) => o.id === n.outletId)?.offset ?? 0 +} + +/** + * Side-move arrow — one of a ±X pair that slides the downspout along the + * eave. The position lives on the host gutter's outlet + * (`gutter.outlets[].offset`), not on the downspout, so `overrideTarget` + * redirects the drag's live override + commit to the gutter and `apply` + * returns the gutter's patch. The arrows sit near the top of the pipe + * and ride its group, which moves with the outlet — so they track the + * cursor 1:1 (`anchor: 'min'` → factor +1). + */ +function downspoutMoveHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'x', + anchor: 'min', + cursor: 'ew-resize', + overrideTarget: (n) => (n.gutterId ? (n.gutterId as AnyNodeId) : undefined), + currentValue: (n) => readOutletOffset(n), + apply: (n, newOffset, scene) => { + const gutter = n.gutterId ? scene.get(n.gutterId as AnyNodeId) : undefined + if (!gutter) return {} + const outlets = (gutter.outlets ?? []).map((o) => + o.id === n.outletId ? { ...o, offset: newOffset } : o, + ) + // Patch targets the GUTTER (overrideTarget), not the downspout. + return { outlets } as unknown as Partial + }, + min: (n, scene) => + -moveBound(n, n.gutterId ? scene.get(n.gutterId as AnyNodeId) : undefined), + max: (n, scene) => + moveBound(n, n.gutterId ? scene.get(n.gutterId as AnyNodeId) : undefined), + placement: { + // Static ±X beside the top of the pipe; the group it rides moves + // with the outlet, so the arrow stays under the cursor as it slides. + position: () => [sign * SIDE_MOVE_OFFSET, SIDE_MOVE_Y, 0], + rotationY: () => (side === 'right' ? 0 : Math.PI), + }, + } +} + +const downspoutHandles: HandleDescriptor[] = [ + downspoutLengthHandle(), + downspoutMoveHandle('left'), + downspoutMoveHandle('right'), +] + +/** + * Downspout — vertical drop pipe taking water from a gutter outlet to + * the ground. Scene-graph parent is the same roof-segment the host + * gutter sits on (so it renders under `roof-elements` like every + * other accessory); the logical link to the gutter is via the + * `gutterId` field, which the renderer uses to look up the outlet + * position. + * + * No `handles` yet — the downspout's geometry is anchored to the + * gutter's outlet. Length (tracker cube at the routed mouth) and + * diameter (chevron on the wall run) are draggable arrows; the wall + * standoff lives in the inspector. + */ +export const downspoutDefinition: NodeDefinition = { + kind: 'downspout', + schemaVersion: 1, + schema: DownspoutNode, + category: 'structure', + surfaceRole: 'roof', + + defaults: () => { + const stub = DownspoutNodeSchema.parse({ + id: 'downspout_default' as never, + type: 'downspout', + }) + const { id: _id, type: _type, ...rest } = stub + return rest + }, + + capabilities: { + selectable: { hitVolume: 'bbox' }, + duplicable: true, + deletable: true, + // Logically a roof accessory — registers under the segment, has + // no buildCut, just the standard dirty cascade. + roofAccessory: {}, + }, + + parametrics: downspoutParametrics, + handles: downspoutHandles, + + renderer: { + kind: 'parametric', + module: () => import('./renderer'), + }, + + preview: () => import('./preview'), + tool: () => import('./tool'), + toolHints: [ + { key: 'Hover gutter', label: 'Highlight outlet' }, + { key: 'Left click', label: 'Drop downspout from outlet' }, + { key: 'Esc', label: 'Cancel' }, + ], + + presentation: { + label: 'Downspout', + description: 'Vertical drop pipe from a gutter outlet to the ground.', + icon: { kind: 'url', src: '/icons/roof.png' }, + paletteSection: 'structure', + paletteOrder: 123, + }, + + mcp: { + description: + 'A downspout — drop pipe from a gutter outlet that elbows back to the wall, runs down the wall face, and kicks out at the bottom. length / diameter / standoff parametric.', + }, +} diff --git a/packages/nodes/src/downspout/geometry.ts b/packages/nodes/src/downspout/geometry.ts new file mode 100644 index 00000000..aa5f5632 --- /dev/null +++ b/packages/nodes/src/downspout/geometry.ts @@ -0,0 +1,241 @@ +import type { DownspoutNode } from '@pascal-app/core' +import * as THREE from 'three' +import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js' +import type { OutletDims } from '../gutter/profile-geometry' +import { + computeDownspoutPath, + type DownspoutPath, + type DownspoutRouting, + downspoutPipeDims, + effectiveWallJog, +} from './routing' + +/** + * Downspout pipe builder. The pipe follows a real downspout's path — + * a short DROP out of the collar, an OFFSET ELBOW back to the wall, the + * VERTICAL RUN down the wall, and a bottom KICKOUT — plus the hardware + * that makes it read real: WALL STRAPS clamping the run to the wall, + * an open (hollow) mouth at the kickout, and a SPLASH BLOCK on the + * ground under the mouth. + * + * Mesh frame is centred on the outlet: local Y = 0 is the gutter floor, + * −Y is down, −Z is toward the wall (+Z is outward over the eave). The + * path lives in the local Y/Z plane; X is the gutter-length axis. + * + * Cross-section follows the host gutter's profile: round on half-round, + * rectangular on k-style / box. Straight legs are solid cylinders / + * boxes welded at the corners with a small joint; the kickout leg is a + * hollow tube so the open mouth reads through. + * + * Pure: no React, no scene access. + */ +const RADIAL_SEGMENTS = 16 +const JOINT_SEGMENTS = 12 +const FWD = new THREE.Vector3(0, 0, 1) +const UP = new THREE.Vector3(0, 1, 0) + +// Pipe wall thickness for the hollow (open-mouth) kickout leg. +const PIPE_WALL = 0.004 +// Wall straps — a thin band clamps the run to the wall, set in a margin +// from each end (spacing comes from the node). +const STRAP_END_MARGIN = 0.3 +const STRAP_THICKNESS = 0.022 +const STRAP_OVERHANG = 0.014 +// Splash block — a tilted slab on the ground under the mouth that +// carries water away from the foundation. +const SPLASH_WIDTH = 0.22 +const SPLASH_LENGTH = 0.34 +const SPLASH_THICKNESS = 0.05 +const SPLASH_TILT = 0.1 + +export function buildDownspoutGeometry( + node: DownspoutNode, + routing?: DownspoutRouting | null, +): THREE.BufferGeometry { + const dims = downspoutPipeDims(node, routing) + const terminal = node.terminal ?? 'splash' + // 'straight' runs the pipe to grade with no kickout leg. + const pathData = computeDownspoutPath( + node.length, + effectiveWallJog(node, routing), + terminal !== 'straight', + ) + + // Drop consecutive duplicates (jog == 0 collapses the elbow; no kick + // collapses the bottom two) so we never build a zero-length segment. + const path: THREE.Vector3[] = [] + for (const [x, y, z] of pathData.points) { + const p = new THREE.Vector3(x, y, z) + const last = path.at(-1) + if (!last || last.distanceTo(p) > 1e-4) path.push(p) + } + + const pieces: THREE.BufferGeometry[] = [] + const lastLeg = path.length - 2 + for (let i = 0; i < path.length - 1; i++) { + // The final leg (the kickout mouth) is a hollow tube so you can see + // up the open end; the rest stay solid (their outer surface reads + // identically, and they're capped by the collar / joints anyway). + pieces.push( + i === lastLeg + ? ringTube(path[i]!, path[i + 1]!, dims) + : segmentBetween(path[i]!, path[i + 1]!, dims), + ) + if (i > 0) pieces.push(jointAt(path[i]!, path[i - 1]!, path[i + 1]!, dims)) + } + + if ((node.strapStyle ?? 'band') !== 'none') { + for (const strap of buildStraps(pathData, dims, node.strapSpacing ?? 1.8)) pieces.push(strap) + } + if (terminal === 'splash') { + const splash = buildSplash(pathData) + if (splash) pieces.push(splash) + } + + const merged = pieces.length === 1 ? pieces[0]! : (mergeGeometries(pieces, false) ?? pieces[0]!) + if (merged !== pieces[0]) { + for (const p of pieces) p.dispose() + } + merged.computeVertexNormals() + return merged +} + +/** + * Solid segment spanning two points. Round → a cylinder; rect → a box + * (2·halfX wide along the gutter length, 2·halfZ deep outward). The + * orient-onto-direction rotation is purely about X for our planar path, + * so the box's width stays aligned with the gutter length axis. + */ +function segmentBetween( + a: THREE.Vector3, + b: THREE.Vector3, + dims: OutletDims, +): THREE.BufferGeometry { + const dir = new THREE.Vector3().subVectors(b, a) + const len = dir.length() + const geo = + dims.shape === 'round' + ? new THREE.CylinderGeometry(dims.halfX, dims.halfX, len, RADIAL_SEGMENTS).toNonIndexed() + : new THREE.BoxGeometry(2 * dims.halfX, len, 2 * dims.halfZ).toNonIndexed() + // The primitive runs along +Y centred at origin; rotate +Y onto the + // segment direction, then drop it on the midpoint. + geo.applyQuaternion(new THREE.Quaternion().setFromUnitVectors(UP, dir.normalize())) + geo.translate((a.x + b.x) / 2, (a.y + b.y) / 2, (a.z + b.z) / 2) + return geo +} + +/** + * Hollow tube spanning two points — a ring (round) / rectangular-ring + * cross-section extruded along the leg, so both ends are open and the + * bore reads through. Used for the kickout mouth. + */ +function ringTube(a: THREE.Vector3, b: THREE.Vector3, dims: OutletDims): THREE.BufferGeometry { + const dir = new THREE.Vector3().subVectors(b, a) + const len = dir.length() + const shape = new THREE.Shape() + const hole = new THREE.Path() + if (dims.shape === 'round') { + shape.absarc(0, 0, dims.halfX, 0, Math.PI * 2, false) + hole.absarc(0, 0, Math.max(0.002, dims.halfX - PIPE_WALL), 0, Math.PI * 2, true) + } else { + const ox = dims.halfX + const oz = dims.halfZ + const ix = Math.max(0.002, ox - PIPE_WALL) + const iz = Math.max(0.002, oz - PIPE_WALL) + shape.moveTo(-ox, -oz) + shape.lineTo(ox, -oz) + shape.lineTo(ox, oz) + shape.lineTo(-ox, oz) + shape.closePath() + hole.moveTo(-ix, -iz) + hole.lineTo(-ix, iz) + hole.lineTo(ix, iz) + hole.lineTo(ix, -iz) + hole.closePath() + } + shape.holes.push(hole) + // ExtrudeGeometry runs the shape (in XY) along +Z from 0 to depth; + // orient +Z onto the leg direction, then move the z=0 end to `a`. + // ExtrudeGeometry is already non-indexed, matching the merge set. + const geo = new THREE.ExtrudeGeometry(shape, { + depth: len, + bevelEnabled: false, + steps: 1, + curveSegments: RADIAL_SEGMENTS, + }) + geo.applyQuaternion(new THREE.Quaternion().setFromUnitVectors(FWD, dir.normalize())) + geo.translate(a.x, a.y, a.z) + return geo +} + +/** + * Corner joint at `p` between the segments (prev→p) and (p→next). Round + * → a sphere; rect → a box aligned to the bend bisector so it bridges + * the wedge the two box ends leave open at the outer corner. + */ +function jointAt( + p: THREE.Vector3, + prev: THREE.Vector3, + next: THREE.Vector3, + dims: OutletDims, +): THREE.BufferGeometry { + if (dims.shape === 'round') { + const geo = new THREE.SphereGeometry(dims.halfX, JOINT_SEGMENTS, JOINT_SEGMENTS).toNonIndexed() + geo.translate(p.x, p.y, p.z) + return geo + } + const dirIn = new THREE.Vector3().subVectors(p, prev).normalize() + const dirOut = new THREE.Vector3().subVectors(next, p).normalize() + const bis = new THREE.Vector3().addVectors(dirIn, dirOut) + if (bis.lengthSq() < 1e-8) bis.copy(dirOut) // straight-through; degenerate + bis.normalize() + const geo = new THREE.BoxGeometry(2 * dims.halfX, 2 * dims.halfZ, 2 * dims.halfZ).toNonIndexed() + geo.applyQuaternion(new THREE.Quaternion().setFromUnitVectors(UP, bis)) + geo.translate(p.x, p.y, p.z) + return geo +} + +/** + * Thin bands clamping the wall run to the wall, ~`STRAP_SPACING` apart + * and set in from each end. Each is a flat box a touch proud of the + * pipe so it reads as a strap wrapping the run. + */ +function buildStraps( + path: DownspoutPath, + dims: OutletDims, + spacing: number, +): THREE.BufferGeometry[] { + const top = path.wallRunTopY + const bottom = path.wallRunBottomY + const z = path.wallRunZ + const runLen = top - bottom + if (runLen < STRAP_END_MARGIN * 2 + 0.05) return [] + + const usable = runLen - STRAP_END_MARGIN * 2 + const count = Math.max(1, Math.floor(usable / Math.max(0.2, spacing)) + 1) + const stride = count > 1 ? usable / (count - 1) : 0 + const w = 2 * dims.halfX + 2 * STRAP_OVERHANG + const d = 2 * dims.halfZ + 2 * STRAP_OVERHANG + + const straps: THREE.BufferGeometry[] = [] + for (let i = 0; i < count; i++) { + const y = count > 1 ? top - STRAP_END_MARGIN - i * stride : (top + bottom) / 2 + const band = new THREE.BoxGeometry(w, STRAP_THICKNESS, d).toNonIndexed() + band.translate(0, y, z) + straps.push(band) + } + return straps +} + +/** + * Tilted slab on the ground under the mouth, extending outward (+Z, + * away from the wall) so it carries water off from the foundation. + */ +function buildSplash(path: DownspoutPath): THREE.BufferGeometry | null { + const [bx, by, bz] = path.bottom + const slab = new THREE.BoxGeometry(SPLASH_WIDTH, SPLASH_THICKNESS, SPLASH_LENGTH).toNonIndexed() + // Tilt the far (+Z) end down so it slopes away from the wall. + slab.rotateX(SPLASH_TILT) + slab.translate(bx, by - SPLASH_THICKNESS / 2, bz + SPLASH_LENGTH / 2) + return slab +} diff --git a/packages/nodes/src/downspout/index.ts b/packages/nodes/src/downspout/index.ts new file mode 100644 index 00000000..ffe44189 --- /dev/null +++ b/packages/nodes/src/downspout/index.ts @@ -0,0 +1,3 @@ +export { downspoutDefinition } from './definition' +export { buildDownspoutGeometry } from './geometry' +export { DownspoutNode } from './schema' diff --git a/packages/nodes/src/downspout/inspector-editors.tsx b/packages/nodes/src/downspout/inspector-editors.tsx new file mode 100644 index 00000000..69fdf06b --- /dev/null +++ b/packages/nodes/src/downspout/inspector-editors.tsx @@ -0,0 +1,90 @@ +'use client' + +import { + type AnyNodeId, + type DownspoutNode, + type GutterNode, + type GutterOutlet, + useLiveNodeOverrides, + useScene, +} from '@pascal-app/core' +import { SliderControl } from '@pascal-app/editor' + +/** + * Position-along-the-eave editor for a downspout. The downspout's spot + * is owned by its outlet on the host gutter (`gutter.outlets[].offset`), + * not by the downspout itself — so this slider reads + writes that + * outlet on the gutter rather than patching the downspout. + * + * Mesh-first commit (same shape as the in-world handle drags): + * - `onChange` (live, every drag tick) publishes the new outlets to the + * gutter's `useLiveNodeOverrides`. The gutter renderer rebuilds its + * mesh from that override and the downspout renderer re-reads its + * outlet — both move immediately, with NO write to the scene store / + * history. The slider also reads the override back so its number + * tracks during the drag. + * - `onCommit` (on release) writes the final outlets to the store once + * (the single undoable change — `SliderControl` resumes history + * first) and drops the override so the renderers read the store again. + * + * Wired via `parametrics.fields[].kind: 'custom'`; hidden when the + * downspout isn't linked to an outlet. + */ +export function DownspoutPositionEditor({ node }: { node: DownspoutNode }) { + const gutter = useScene((s) => + node.gutterId ? (s.nodes[node.gutterId as AnyNodeId] as GutterNode | undefined) : undefined, + ) + // Live override on the gutter, so the readout tracks the in-flight drag. + const override = useLiveNodeOverrides((s) => + node.gutterId + ? (s.get(node.gutterId as AnyNodeId) as Partial | undefined) + : undefined, + ) + + if (!gutter || gutter.type !== 'gutter') return null + const storeOutlets = gutter.outlets ?? [] + const effectiveOutlets = (override?.outlets as GutterOutlet[] | undefined) ?? storeOutlets + const outlet = effectiveOutlets.find((o) => o.id === node.outletId) + if (!outlet) return null + + // Usable half-span — keep the outlet a hair inside each end so the + // collar never lands on a cap. The geometry clamps too; this just + // keeps the slider honest. + const bound = Math.max(0.05, Math.max(0.05, gutter.length) / 2 - 0.1) + const gutterId = gutter.id as AnyNodeId + + // Set the dragged outlet's offset on a copy of the STORE outlets (the + // canonical base — the slider hands an absolute value each tick). + const withOffset = (offset: number): GutterOutlet[] => + storeOutlets.map((o) => (o.id === node.outletId ? { ...o, offset } : o)) + + const handleChange = (offset: number) => { + // Mesh-first: publish to the gutter override, no store write. + useLiveNodeOverrides.getState().set(gutterId, { outlets: withOffset(offset) }) + } + + const handleCommit = (offset: number) => { + // Commit once to the store, then drop the override. + const state = useScene.getState() + state.updateNode(gutterId, { outlets: withOffset(offset) }) + useLiveNodeOverrides.getState().clear(gutterId) + state.markDirty(gutterId) + } + + return ( + + ) +} diff --git a/packages/nodes/src/downspout/parametrics.ts b/packages/nodes/src/downspout/parametrics.ts new file mode 100644 index 00000000..d8775295 --- /dev/null +++ b/packages/nodes/src/downspout/parametrics.ts @@ -0,0 +1,69 @@ +import type { ParametricDescriptor } from '@pascal-app/core' +import { DownspoutPositionEditor } from './inspector-editors' +import type { DownspoutNode } from './schema' + +export const downspoutParametrics: ParametricDescriptor = { + groups: [ + { + label: 'Dimensions', + fields: [ + { key: 'length', kind: 'number', unit: 'm', min: 0.1, max: 8, step: 0.05 }, + { key: 'diameter', kind: 'number', unit: 'm', min: 0.02, max: 0.15, step: 0.005 }, + // Cross-section: follow the gutter profile, or force round / rect. + { + key: 'shape', + kind: 'enum', + options: ['auto', 'round', 'rect'], + display: 'segmented', + }, + ], + }, + { + label: 'Hardware', + fields: [ + // Wall straps clamping the run, like the gutter's hangers. + { + key: 'strapStyle', + kind: 'enum', + options: ['band', 'none'], + display: 'segmented', + }, + { + key: 'strapSpacing', + kind: 'number', + unit: 'm', + min: 0.3, + max: 3, + step: 0.1, + visibleIf: (n) => (n.strapStyle ?? 'band') !== 'none', + }, + // Bottom treatment: splash block, kickout only, or straight to grade. + { + key: 'terminal', + kind: 'enum', + options: ['splash', 'kickout', 'straight'], + display: 'segmented', + }, + ], + }, + { + label: 'Placement', + fields: [ + // Slide the outlet (and so this downspout) along the eave. Edits + // the linked outlet's offset on the host gutter — the only way to + // reposition a drop after placing it. Hidden when unlinked. + { + key: 'outletPosition', + kind: 'custom', + component: DownspoutPositionEditor, + visibleIf: (n) => Boolean(n.outletId), + }, + // How far proud of the wall the pipe sits. Crank it up if the + // auto-routed run buries into the wall (the wall isn't where the + // roof overhang implies); 0 puts the pipe surface on the wall + // face; large values pull the run back out toward the eave. + { key: 'standoff', kind: 'number', unit: 'm', min: 0, max: 0.6, step: 0.01 }, + ], + }, + ], +} diff --git a/packages/nodes/src/downspout/preview.tsx b/packages/nodes/src/downspout/preview.tsx new file mode 100644 index 00000000..596ebecb --- /dev/null +++ b/packages/nodes/src/downspout/preview.tsx @@ -0,0 +1,77 @@ +'use client' + +import { useEffect, useMemo } from 'react' +import * as THREE from 'three' +import { buildDownspoutGeometry } from './geometry' +import type { DownspoutRouting } from './routing' +import type { DownspoutNode } from './schema' + +/** + * Translucent ghost of a downspout — same geometry as the committed + * pipe so the placement ghost matches what lands on click. No + * internal transform wrapper; the placement tool nests this under + * the gutter / outlet chain so the position math stays in one place. + * + * `routing` mirrors the renderer's — when the tool resolves the host + * gutter it feeds the same wall-jog so the ghost already shows the + * elbowed path, not a straight drop. + */ +const DownspoutPreview = ({ + node, + routing, +}: { + node: DownspoutNode + routing?: DownspoutRouting | null +}) => { + const geometry = useMemo( + () => buildDownspoutGeometry(node, routing), + [ + node.length, + node.diameter, + node.standoff, + node.shape, + node.strapStyle, + node.strapSpacing, + node.terminal, + routing, + ], + ) + + const material = useMemo( + () => + new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + emissive: 0xff_ff_ff, + emissiveIntensity: 0.12, + roughness: 0.7, + metalness: 0.2, + transparent: true, + opacity: 0.55, + depthWrite: false, + side: THREE.FrontSide, + }), + [], + ) + + const edgesGeometry = useMemo(() => new THREE.EdgesGeometry(geometry, 25), [geometry]) + + useEffect( + () => () => { + geometry.dispose() + edgesGeometry.dispose() + material.dispose() + }, + [geometry, edgesGeometry, material], + ) + + return ( + <> + {}} /> + + + + + ) +} + +export default DownspoutPreview diff --git a/packages/nodes/src/downspout/renderer.tsx b/packages/nodes/src/downspout/renderer.tsx new file mode 100644 index 00000000..cc0cb6e6 --- /dev/null +++ b/packages/nodes/src/downspout/renderer.tsx @@ -0,0 +1,189 @@ +'use client' + +import { + type AnyNodeId, + type DownspoutNode, + type GutterNode, + type RoofSegmentNode, + useLiveNodeOverrides, + useRegistry, + useScene, +} from '@pascal-app/core' +import { + type ColorPreset, + createMaterial, + createMaterialFromPresetRef, + createSurfaceRoleMaterial, + useNodeEvents, + useViewer, +} from '@pascal-app/viewer' +import { useEffect, useMemo, useRef } from 'react' +import * as THREE from 'three' +import { computeEaveY } from '../gutter/eave-snap' +import { resolveGutterOutletById } from '../gutter/outlet-lookup' +import { buildDownspoutGeometry } from './geometry' +import { computeDownspoutRouting } from './routing' + +const defaultMaterial = new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + roughness: 0.7, + metalness: 0.25, +}) + +/** + * Downspout renderer. Mount chain mirrors the gutter's, then nests + * one level deeper into the outlet position in gutter-mesh-local: + * + * segment.position → segment.rotation (Y) + * → [gutter.position[0], computeEaveY(segment), gutter.position[2]] + * → gutter.rotation (Y) + * → [outlet.x, outlet.y, outlet.z] + * → mesh (pipe descends from Y = 0) + * + * Pulling the gutter's eave Y from `computeEaveY(effectiveSegment)` + * means the downspout follows wallHeight / overhang / pitch changes + * live, on the same frame as the gutter. The gutter and segment also + * subscribe to `useLiveNodeOverrides` so drag-in-flight changes flow + * through too. + */ +const DownspoutRenderer = ({ node: storeNode }: { node: DownspoutNode }) => { + const ref = useRef(null!) + useRegistry(storeNode.id, 'downspout', ref) + const handlers = useNodeEvents(storeNode, 'downspout') + const shading = useViewer((s) => s.shading) + const textures = useViewer((s) => s.textures) + const colorPreset: ColorPreset = useViewer((s) => s.colorPreset) + const sceneTheme = useViewer((s) => s.sceneTheme) + + const overrides = useLiveNodeOverrides( + (s) => s.get(storeNode.id as AnyNodeId) as Partial | undefined, + ) + const node: DownspoutNode = overrides + ? ({ ...storeNode, ...overrides } as DownspoutNode) + : storeNode + + // Host gutter — both scene + live overrides so drag-in-flight gutter + // moves (length / position) reposition the downspout immediately. + const gutter = useScene((s) => + node.gutterId ? (s.nodes[node.gutterId as AnyNodeId] as GutterNode | undefined) : undefined, + ) + const gutterOverrides = useLiveNodeOverrides((s) => + node.gutterId + ? (s.get(node.gutterId as AnyNodeId) as Partial | undefined) + : undefined, + ) + const effectiveGutter: GutterNode | undefined = gutter + ? gutterOverrides + ? ({ ...gutter, ...gutterOverrides } as GutterNode) + : gutter + : undefined + + // Segment of the host gutter (the downspout's own scene-graph parent + // is the same segment — same as roof accessories — so the chain + // segment → gutter-mesh-local is what we need to reach the outlet). + const segment = useScene((s) => + effectiveGutter?.roofSegmentId + ? (s.nodes[effectiveGutter.roofSegmentId as AnyNodeId] as RoofSegmentNode | undefined) + : undefined, + ) + const segmentOverrides = useLiveNodeOverrides((s) => + effectiveGutter?.roofSegmentId + ? (s.get(effectiveGutter.roofSegmentId as AnyNodeId) as Partial | undefined) + : undefined, + ) + const effectiveSegment: RoofSegmentNode | undefined = segment + ? segmentOverrides + ? ({ ...segment, ...segmentOverrides } as RoofSegmentNode) + : segment + : undefined + + // Routing back to the wall — memoised on the gutter/segment values + // that actually move the jog or the collar bore, so the pipe geometry + // only rebuilds when one of those changes (not on every override-merge + // render). Resolves to null when the gutter has no outlet. + const routing = useMemo( + () => + effectiveGutter && effectiveSegment + ? computeDownspoutRouting(effectiveGutter, effectiveSegment, node.outletId) + : null, + [ + effectiveGutter?.profile, + effectiveGutter?.size, + // The outlets array — its referenced entry's diameter / offset + // drives the collar bore + nesting. + effectiveGutter ? JSON.stringify(effectiveGutter.outlets) : undefined, + effectiveSegment?.overhang, + node.outletId, + ], + ) + + const geometry = useMemo( + () => buildDownspoutGeometry(node, routing), + [ + node.length, + node.diameter, + node.standoff, + node.shape, + node.strapStyle, + node.strapSpacing, + node.terminal, + routing, + ], + ) + useEffect(() => () => geometry.dispose(), [geometry]) + + const material = useMemo(() => { + if (!textures || (!node.material && !node.materialPreset)) { + return createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme) + } + return node.material + ? createMaterial(node.material, shading) + : (createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial) + }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]) + + if (!effectiveGutter || !effectiveSegment) return null + const outlet = resolveGutterOutletById(effectiveGutter, node.outletId) + if (!outlet) return null + + const segPos = effectiveSegment.position ?? [0, 0, 0] + const segRotY = effectiveSegment.rotation ?? 0 + const liveEaveY = computeEaveY(effectiveSegment) + const gutterRotY = effectiveGutter.rotation ?? 0 + + // Bake the gutter's position + Y-rotation into the registered ref so it + // sits as a DIRECT child of the segment-transform group — its local + // pose is the outlet's full segment-local placement. `NodeArrowHandles` + // copies the registered object's LOCAL transform into the segment's + // object (it assumes a flat node → scene-parent chain); with the old + // nested segment → gutter → outlet groups it only saw the innermost + // `[outlet.x …]` offset and the handles landed at the roof centre. + const gutterX = effectiveGutter.position[0] ?? 0 + const gutterZ = effectiveGutter.position[2] ?? 0 + const cos = Math.cos(gutterRotY) + const sin = Math.sin(gutterRotY) + const outletSegX = gutterX + (outlet.x * cos + outlet.z * sin) + const outletSegZ = gutterZ + (-outlet.x * sin + outlet.z * cos) + const outletSegY = liveEaveY + outlet.y + + return ( + + + + + + ) +} + +export default DownspoutRenderer diff --git a/packages/nodes/src/downspout/routing.ts b/packages/nodes/src/downspout/routing.ts new file mode 100644 index 00000000..c37cb4bf --- /dev/null +++ b/packages/nodes/src/downspout/routing.ts @@ -0,0 +1,207 @@ +import type { + AnyNodeId, + DownspoutNode, + GutterNode, + RoofSegmentNode, + SceneApi, +} from '@pascal-app/core' +import { EAVE_TUCK_INWARD } from '../gutter/eave-snap' +import { resolveGutterOutletById } from '../gutter/outlet-lookup' +import { + type OutletDims, + type OutletShape, + outletDims, + profileFloorMidZ, +} from '../gutter/profile-geometry' + +/** + * Routing parameters that turn the downspout from a straight drop into + * a pipe that actually returns to the wall. Derived from the host + * gutter + its roof segment — the geometry builder stays pure (takes + * this as data) so the renderer, the placement preview, and the handle + * descriptors can all feed it the same numbers. + */ +export type DownspoutRouting = { + /** + * Distance the pipe must travel toward the wall (downspout-local −Z) + * to leave the eave overhang and sit flat against the fascia. The + * outlet hangs `overhang − tuck` outboard of the wall face, plus the + * `floorMidZ` offset of the outlet within the trough — so the offset + * elbow at the top steps the pipe back by exactly this much. + */ + wallJog: number + /** Cross-section the pipe takes — round on half-round, rect on k-style / box. */ + shape: OutletShape + /** + * Inner half-extents of the gutter's drilled collar (along-length X, + * outward Z). The pipe's cross-section is clamped just under these so + * it slip-fits up inside the collar instead of sharing a coincident + * surface with it (the old pipe sat at exactly the bore and z-fought + * the collar wall). + */ + collarHalfX: number + collarHalfZ: number +} + +/** + * Pure routing from resolved nodes — used by the renderer / preview / + * tool, which already hold the effective gutter + segment. + */ +export function computeDownspoutRouting( + gutter: GutterNode, + segment: Pick, + outletId: string | undefined, +): DownspoutRouting | null { + const outlet = resolveGutterOutletById(gutter, outletId) + if (!outlet) return null + + const overhang = segment.overhang ?? 0 + const floorMidZ = profileFloorMidZ(gutter.profile ?? 'k-style', Math.max(0.04, gutter.size)) + // The gutter rim is tucked `EAVE_TUCK_INWARD` back from the very tip + // of the overhang, so the real outboard distance is `overhang − tuck` + // (never negative — a flush eave still leaves the floorMidZ offset). + const wallJog = Math.max(0, overhang - EAVE_TUCK_INWARD) + floorMidZ + + return { + wallJog, + shape: outlet.shape, + collarHalfX: outlet.innerHalfX, + collarHalfZ: outlet.innerHalfZ, + } +} + +/** + * Routing for the handle descriptors, which only get `(node, sceneApi)`. + * Walks downspout → gutter → segment through the scene snapshot. + */ +export function resolveDownspoutRouting( + node: DownspoutNode, + sceneApi: SceneApi, +): DownspoutRouting | null { + if (!node.gutterId) return null + const gutter = sceneApi.get(node.gutterId as AnyNodeId) + if (!gutter || gutter.type !== 'gutter') return null + const segment = gutter.roofSegmentId + ? sceneApi.get(gutter.roofSegmentId as AnyNodeId) + : undefined + return computeDownspoutRouting(gutter, segment ?? { overhang: 0 }, node.outletId) +} + +// ─── Pipe cross-section + effective jog ────────────────────────────── + +// Slip-fit clearance — when the pipe lands within this of the collar +// bore (the placement default, where pipe == hole), nudge it just inside +// so it doesn't share a coincident wall (the old z-fighting). +const NEAR_BORE = 0.002 +const SLIP_CLEARANCE = 0.0005 + +function nestUnder(half: number, collar: number | undefined): number { + if (collar !== undefined && Math.abs(half - collar) < NEAR_BORE) { + return Math.max(0.005, collar - SLIP_CLEARANCE) + } + return half +} + +/** + * Rendered pipe cross-section — round (halfX = halfZ = radius) or rect, + * following the host gutter's profile. Defaults to `diameter`-sized, but + * each half-extent that lands within a hair of the collar's matching + * bore is nudged just inside so the pipe slip-fits the collar instead of + * sharing a coincident wall. A deliberately larger / smaller pipe is + * left alone, so the diameter field stays honest. + */ +export function downspoutPipeDims( + node: Pick, + routing?: DownspoutRouting | null, +): OutletDims { + // 'auto' follows the gutter profile; 'round' / 'rect' override it. + const shape: OutletShape = + node.shape && node.shape !== 'auto' ? node.shape : (routing?.shape ?? 'round') + const dims = outletDims(shape, node.diameter) + if (!routing) return dims + return { + shape, + halfX: nestUnder(dims.halfX, routing.collarHalfX), + halfZ: nestUnder(dims.halfZ, routing.collarHalfZ), + } +} + +/** + * The −Z distance the wall run actually sits at. The raw `wallJog` + * reaches the wall *face*; we pull back by the pipe's outward half-depth + * (so the pipe's surface — not its centerline — meets the wall) plus the + * `standoff` (bracket gap / overshoot escape hatch), so the pipe sits + * proud of the wall instead of burying into it. + */ +export function effectiveWallJog( + node: Pick, + routing?: DownspoutRouting | null, +): number { + if (!routing) return 0 + const dims = downspoutPipeDims(node, routing) + return Math.max(0, routing.wallJog - dims.halfZ - (node.standoff ?? 0)) +} + +// ─── Centerline path ───────────────────────────────────────────────── + +// Vertical drop straight out of the collar before the offset elbow. +const TOP_DROP = 0.05 +// Bottom kickout: how far the mouth throws outward (+Z) and how tall +// the kicked section is. Skipped when the pipe is too short to fit it. +const KICK_OUT = 0.08 +const KICK_RISE = 0.1 + +export type DownspoutPath = { + /** Centerline points, top → bottom, in downspout-local space. */ + points: [number, number, number][] + /** Bottom mouth — the kicked-out pipe end. */ + bottom: [number, number, number] + /** Z of the vertical wall run (downspout-local; −jog). */ + wallRunZ: number + /** Y at the top of the straight wall run (just below the offset elbow). */ + wallRunTopY: number + /** Y at the bottom of the straight wall run (just above the kickout). */ + wallRunBottomY: number +} + +/** + * Pure centerline of the routed pipe. Shared by the geometry builder + * (sweeps a cylinder along it) and the handle descriptors (place the + * length cube at `bottom`), so the dimension chrome can never drift + * from the mesh. + * + * Local frame: Y = 0 at the gutter floor, −Y down, −Z toward the wall. + * The four legs are the vertical drop out of the collar, the offset + * elbow stepping back to the wall, the wall run, and the kickout. + */ +export function computeDownspoutPath(length: number, jog: number, allowKick = true): DownspoutPath { + const len = Math.max(0.1, length) + const j = Math.max(0, jog) + const drop = Math.min(TOP_DROP, len * 0.15) + // Offset elbow runs at ~45° (vertical travel == horizontal jog) but + // never eats more than what's left after the drop + a minimum run. + const elbowVert = Math.min(j, Math.max(0, len - drop - 0.1)) + const afterElbow = len - drop - elbowVert + // `allowKick` off (terminal 'straight') runs the pipe straight to the + // bottom — no kickout leg. + const kick = allowKick && afterElbow > KICK_RISE * 1.5 + const kickRise = kick ? Math.min(KICK_RISE, afterElbow * 0.3) : 0 + const kickOut = kick ? KICK_OUT : 0 + + const wallRunTopY = -drop - elbowVert + const wallRunBottomY = -len + kickRise + const bottom: [number, number, number] = [0, -len, -j + kickOut] + return { + points: [ + [0, 0, 0], // collar mouth + [0, -drop, 0], // bottom of the first drop + [0, wallRunTopY, -j], // offset elbow, now at the wall + [0, wallRunBottomY, -j], // bottom of the wall run + bottom, // kicked mouth + ], + bottom, + wallRunZ: -j, + wallRunTopY, + wallRunBottomY, + } +} diff --git a/packages/nodes/src/downspout/schema.ts b/packages/nodes/src/downspout/schema.ts new file mode 100644 index 00000000..d4fded13 --- /dev/null +++ b/packages/nodes/src/downspout/schema.ts @@ -0,0 +1,3 @@ +// Schema lives in core (referenced by the AnyNode union). Re-export so +// every downspout-related import stays inside @pascal-app/nodes/downspout. +export { DownspoutNode } from '@pascal-app/core' diff --git a/packages/nodes/src/downspout/tool.tsx b/packages/nodes/src/downspout/tool.tsx new file mode 100644 index 00000000..1f92affc --- /dev/null +++ b/packages/nodes/src/downspout/tool.tsx @@ -0,0 +1,197 @@ +'use client' + +import { + type AnyNodeId, + DownspoutNode, + emitter, + type GutterEvent, + type GutterNode, + generateId, + type RoofSegmentNode, + sceneRegistry, + useScene, +} from '@pascal-app/core' +import { triggerSFX } from '@pascal-app/editor' +import { useViewer } from '@pascal-app/viewer' +import { useEffect, useMemo, useState } from 'react' +import { Vector3 } from 'three' +import { computeEaveY } from '../gutter/eave-snap' +import { resolveGutterOutletById } from '../gutter/outlet-lookup' +import { downspoutDefinition } from './definition' +import DownspoutPreview from './preview' +import { computeDownspoutRouting, type DownspoutRouting } from './routing' + +const DEFAULT_OUTLET_DIAMETER = 0.07 + +type PreviewTarget = { + segment: { position: [number, number, number]; rotation: number; eaveY: number } + gutter: { position: [number, number, number]; rotation: number } + outlet: { x: number; y: number; z: number; bore: number } + routing: DownspoutRouting | null +} + +/** + * Downspout placement tool. Hovering a gutter previews a downspout at + * the cursor's position ALONG the gutter; clicking drills a NEW outlet + * there (appended to the gutter's `outlets`) and drops a downspout + * linked to it. So multiple downspouts on one gutter land where you + * click instead of stacking on a single outlet. + * + * The cursor's along-length offset is read by projecting the world hit + * into the gutter's registered mesh frame (worldToLocal → local X). A + * throwaway gutter with a single `preview` outlet feeds the same outlet + * lookup + routing the committed pipe uses, so the ghost matches. + */ +const _hit = new Vector3() + +const DownspoutTool = () => { + const activeBuildingId = useViewer((s) => s.selection.buildingId) + const setSelection = useViewer((s) => s.setSelection) + + const [target, setTarget] = useState(null) + + const previewNode = useMemo( + () => + DownspoutNode.parse({ + ...downspoutDefinition.defaults(), + name: 'Downspout', + }), + [], + ) + + useEffect(() => { + if (!activeBuildingId) return + + // Cursor's offset along the gutter length, from the world hit. + const cursorOffset = (gutter: GutterNode, world: [number, number, number]): number | null => { + const obj = sceneRegistry.nodes.get(gutter.id as AnyNodeId) + if (!obj) return null + obj.updateWorldMatrix(true, false) + return obj.worldToLocal(_hit.set(world[0], world[1], world[2])).x + } + + const computeTarget = (event: GutterEvent): PreviewTarget | null => { + const gutter = event.node + const segmentId = gutter.roofSegmentId as AnyNodeId | undefined + if (!segmentId) return null + const segment = useScene.getState().nodes[segmentId] as RoofSegmentNode | undefined + if (!segment) return null + const offset = cursorOffset(gutter, event.position) + if (offset === null) return null + + // Throwaway single-outlet gutter at the cursor so the lookup + + // routing produce the exact pose the commit will store. + const ghost: GutterNode = { + ...gutter, + outlets: [{ id: 'preview', offset, diameter: DEFAULT_OUTLET_DIAMETER }], + } + const outlet = resolveGutterOutletById(ghost, 'preview') + if (!outlet) return null + + return { + segment: { + position: (segment.position ?? [0, 0, 0]) as [number, number, number], + rotation: segment.rotation ?? 0, + eaveY: computeEaveY(segment), + }, + gutter: { + position: (gutter.position ?? [0, 0, 0]) as [number, number, number], + rotation: gutter.rotation ?? 0, + }, + outlet, + routing: computeDownspoutRouting(ghost, segment, 'preview'), + } + } + + const updatePreview = (event: GutterEvent) => { + const next = computeTarget(event) + if (next) { + setTarget(next) + event.stopPropagation() + } + } + + const onClick = (event: GutterEvent) => { + const gutter = event.node + const segmentId = gutter.roofSegmentId as AnyNodeId | undefined + if (!segmentId) return + const segment = useScene.getState().nodes[segmentId] as RoofSegmentNode | undefined + if (!segment) return + const offset = cursorOffset(gutter, event.position) + if (offset === null) return + + // Drill a new outlet at the clicked offset, then drop a downspout + // linked to it. Both land in one undoable step. + const outletId = generateId('outlet') + const outlets = [ + ...(gutter.outlets ?? []), + { id: outletId, offset, diameter: DEFAULT_OUTLET_DIAMETER }, + ] + const state = useScene.getState() + state.updateNode(gutter.id as AnyNodeId, { outlets }) + state.dirtyNodes.add(gutter.id as AnyNodeId) + + const outlet = resolveGutterOutletById({ ...gutter, outlets }, outletId) + if (!outlet) return + // Drop from the gutter outlet (at eaveY − size) down to segment Y = 0. + const dropLength = Math.max(0.1, computeEaveY(segment) + outlet.y) + + const downspout = DownspoutNode.parse({ + ...downspoutDefinition.defaults(), + name: 'Downspout', + gutterId: gutter.id, + outletId, + length: dropLength, + diameter: outlet.bore * 2, + }) + state.createNode(downspout, segmentId) + state.dirtyNodes.add(segmentId) + setSelection({ selectedIds: [downspout.id] }) + triggerSFX('sfx:item-place') + event.stopPropagation() + } + + emitter.on('gutter:move', updatePreview) + emitter.on('gutter:enter', updatePreview) + emitter.on('gutter:click', onClick) + + return () => { + emitter.off('gutter:move', updatePreview) + emitter.off('gutter:enter', updatePreview) + emitter.off('gutter:click', onClick) + } + }, [activeBuildingId, setSelection]) + + if (!activeBuildingId || !target) return null + + return ( + + + + + + + + ) +} + +function previewNodeWithDefaults( + base: ReturnType, + target: PreviewTarget, +): typeof base { + // Snap preview to the same dimensions a commit would use — bore + // diameter from the gutter, drop length to the segment Y=0 plane. + return { + ...base, + diameter: target.outlet.bore * 2, + length: Math.max(0.1, target.segment.eaveY + target.outlet.y), + } as typeof base +} + +export default DownspoutTool diff --git a/packages/nodes/src/elevator/floorplan.ts b/packages/nodes/src/elevator/floorplan.ts index 1a026d2a..e6e32856 100644 --- a/packages/nodes/src/elevator/floorplan.ts +++ b/packages/nodes/src/elevator/floorplan.ts @@ -357,6 +357,7 @@ export function buildElevatorFloorplan( point: [cx + cornerX, cz + cornerZ], angle: Math.atan2(radialZ, radialX), affordance: 'elevator-rotate', + pivot: [cx, cz], }) } diff --git a/packages/nodes/src/eyebrow-vent/__tests__/geometry.test.ts b/packages/nodes/src/eyebrow-vent/__tests__/geometry.test.ts new file mode 100644 index 00000000..59d61e31 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/__tests__/geometry.test.ts @@ -0,0 +1,50 @@ +import { describe, expect, test } from 'bun:test' +import { buildEyebrowVentGeometry } from '../geometry' +import { EyebrowVentNode } from '../schema' + +function allFinite(geo: { getAttribute: (n: string) => { array: ArrayLike } }): boolean { + const arr = geo.getAttribute('position').array + for (let i = 0; i < arr.length; i++) { + if (!Number.isFinite(arr[i])) return false + } + return true +} + +describe('buildEyebrowVentGeometry', () => { + test('returns a non-empty BufferGeometry with matching attributes', () => { + const geo = buildEyebrowVentGeometry(EyebrowVentNode.parse({})) + const p = geo.getAttribute('position') + expect(p.count).toBeGreaterThan(0) + expect(geo.getAttribute('normal').count).toBe(p.count) + expect(geo.getAttribute('uv').count).toBe(p.count) + expect(allFinite(geo)).toBe(true) + }) + + test('all three styles build finite geometry', () => { + for (const style of ['scoop', 'half-round', 'slant-box'] as const) { + const geo = buildEyebrowVentGeometry(EyebrowVentNode.parse({ style })) + expect(geo.getAttribute('position').count).toBeGreaterThan(0) + expect(allFinite(geo)).toBe(true) + } + }) + + test('louvers add vertices', () => { + const withLouvers = buildEyebrowVentGeometry( + EyebrowVentNode.parse({ louverCount: 4 }), + ).getAttribute('position').count + const without = buildEyebrowVentGeometry( + EyebrowVentNode.parse({ louverCount: 0 }), + ).getAttribute('position').count + expect(withLouvers).toBeGreaterThan(without) + }) + + test('extreme dimensions never go NaN', () => { + for (const style of ['scoop', 'half-round', 'slant-box'] as const) { + const geo = buildEyebrowVentGeometry( + EyebrowVentNode.parse({ style, width: 0.01, depth: 5, height: 0.01 }), + ) + expect(geo.getAttribute('position').count).toBeGreaterThan(0) + expect(allFinite(geo)).toBe(true) + } + }) +}) diff --git a/packages/nodes/src/eyebrow-vent/definition.ts b/packages/nodes/src/eyebrow-vent/definition.ts new file mode 100644 index 00000000..0d1a94b0 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/definition.ts @@ -0,0 +1,172 @@ +import { + EyebrowVentNode as EyebrowVentNodeSchema, + type EyebrowVentNode as EyebrowVentNodeType, + type HandleDescriptor, + type NodeDefinition, +} from '@pascal-app/core' +import { surfacePaintCapability } from '../shared/surface-paint' +import { buildEyebrowVentFloorplan } from './floorplan' +import { eyebrowVentParametrics } from './parametrics' +import { EyebrowVentNode } from './schema' + +const SIDE_HANDLE_OFFSET = 0.3 +const HEIGHT_HANDLE_OFFSET = 0.2 +// Snug to the vent corner so the rotate icon stays close to the item. +const ROTATE_CORNER_OFFSET = 0.12 +const MIN_WIDTH = 0.4 +const MIN_DEPTH = 0.2 +const MIN_HEIGHT = 0.08 + +// Mid-Y of the arch (its tallest point is `height`), used to seat the side / +// rotate chevrons against the body and centre the rotate ring. +function getBodyMidY(n: EyebrowVentNodeType): number { + return Math.max(0.001, n.height) / 2 +} + +// Width (span) and depth grow symmetrically from the centre — eyebrow vents +// are placed by their centre — so a single centred chevron per axis. +function eyebrowWidthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'x', + anchor: 'center', + min: MIN_WIDTH, + currentValue: (n) => n.width, + apply: (_n, newValue) => ({ width: Math.max(MIN_WIDTH, newValue) }), + placement: { + position: (n) => [n.width / 2 + SIDE_HANDLE_OFFSET, getBodyMidY(n), 0], + }, + } +} + +function eyebrowDepthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'z', + anchor: 'center', + min: MIN_DEPTH, + currentValue: (n) => n.depth, + apply: (_n, newValue) => ({ depth: Math.max(MIN_DEPTH, newValue) }), + placement: { + position: (n) => [0, getBodyMidY(n), n.depth / 2 + SIDE_HANDLE_OFFSET], + }, + } +} + +function eyebrowHeightHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + min: MIN_HEIGHT, + currentValue: (n) => n.height, + apply: (_n, newValue) => ({ height: Math.max(MIN_HEIGHT, newValue) }), + placement: { + position: (n) => [0, Math.max(n.height, MIN_HEIGHT) + HEIGHT_HANDLE_OFFSET, 0], + }, + } +} + +function eyebrowRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }), + placement: { + position: (n) => [ + n.width / 2 + ROTATE_CORNER_OFFSET, + getBodyMidY(n), + n.depth / 2 + ROTATE_CORNER_OFFSET, + ], + rotationY: () => -Math.PI / 4, + }, + // Guide ring centred on the vent, sized to pass through the corner icon so + // the icon rides the ring — matches cupola / solar-panel. + decoration: { + kind: 'ring', + radius: (n) => + Math.hypot(n.width / 2 + ROTATE_CORNER_OFFSET, n.depth / 2 + ROTATE_CORNER_OFFSET), + y: (n) => getBodyMidY(n), + }, + } +} + +// `portal: 'grandparent'` on every handle — see box-vent's note. The vent +// rides the roof→segment→node frame chain, so the handle rig must too, or the +// handles (and rotate arc) render offset from the vent. +const eyebrowVentHandles: HandleDescriptor[] = [ + eyebrowWidthHandle(), + eyebrowDepthHandle(), + eyebrowHeightHandle(), + eyebrowRotateHandle(), +].map((h): HandleDescriptor => ({ ...h, portal: 'grandparent' })) + +/** + * Eyebrow vent — a low, curved lens-shaped hood with a louvered front that + * sweeps out of a roof slope. Parented to a `roof-segment`; position is + * segment-local; rotation rotates it around the segment's vertical axis after + * the slope tilt is applied. Same composition as the box vent / cupola (custom + * renderer, pure geometry builder, no system) — see box-vent's definition for + * the rationale on why roof accessories need a custom renderer. + */ +export const eyebrowVentDefinition: NodeDefinition = { + kind: 'eyebrow-vent', + schemaVersion: 1, + schema: EyebrowVentNode, + category: 'structure', + surfaceRole: 'roof', + + defaults: () => { + const stub = EyebrowVentNodeSchema.parse({ + id: 'eyebrow-vent_default' as never, + type: 'eyebrow-vent', + }) + const { id: _id, type: _type, ...rest } = stub + return rest + }, + + capabilities: { + selectable: { hitVolume: 'bbox' }, + duplicable: true, + deletable: true, + // Single painted surface — registry-driven paint dispatch (see chimney). + paint: surfacePaintCapability, + // Mounts on a roof segment via `roofSegmentId`. Sits ON TOP of the slope — + // no `buildCut`, just the dirty cascade so the parent roof's merged shell + // rebuilds when the vent moves / resizes. + roofAccessory: {}, + }, + + parametrics: eyebrowVentParametrics, + handles: eyebrowVentHandles, + floorplan: buildEyebrowVentFloorplan, + + renderer: { + kind: 'parametric', + module: () => import('./renderer'), + }, + + preview: () => import('./preview'), + tool: () => import('./tool'), + affordanceTools: { + move: () => import('./move-tool'), + }, + toolHints: [ + { key: 'Left click', label: 'Place eyebrow vent on roof' }, + { key: 'Esc', label: 'Cancel' }, + ], + + presentation: { + label: 'Eyebrow Vent', + description: 'Low curved lens-shaped roof vent with a louvered front.', + icon: { kind: 'url', src: '/icons/roof.png' }, + paletteSection: 'structure', + paletteOrder: 123, + }, + + mcp: { + description: + 'A low curved eyebrow vent on a roof segment — a lens-shaped hood with an optional louvered front. Parametric width (span) / depth / height.', + }, +} diff --git a/packages/nodes/src/eyebrow-vent/floorplan.ts b/packages/nodes/src/eyebrow-vent/floorplan.ts new file mode 100644 index 00000000..9acd4b87 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/floorplan.ts @@ -0,0 +1,108 @@ +import type { + AnyNodeId, + EyebrowVentNode, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RoofNode, + RoofSegmentNode, +} from '@pascal-app/core' + +/** + * Floor-plan builder for an eyebrow vent — seen from above it reads as the + * lens (eye-shaped) footprint of the hood, with a faint centre seam. The + * coordinate frame mirrors the 3D transform stack (roof → roof-segment → + * vent), same as the box-vent / cupola builders. + */ +export function buildEyebrowVentFloorplan( + node: EyebrowVentNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const rot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + 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 baseInk = '#475569' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const fill = showSelectedChrome ? '#fed7aa' : '#dbe1e8' + const fillOpacity = showSelectedChrome ? 0.55 : 0.7 + const lineWidth = showSelectedChrome ? 0.03 : 0.02 + + const hw = Math.max(node.width, 0.1) / 2 + const hd = Math.max(node.depth, 0.1) / 2 + + const rect = (halfX: number, halfZ: number): FloorplanPoint[] => [ + toPlan(-halfX, -halfZ), + toPlan(halfX, -halfZ), + toPlan(halfX, halfZ), + toPlan(-halfX, halfZ), + ] + + const children: FloorplanGeometry[] = [] + + // Hood footprint outline + hit target (no flashing plate). + const hood = rect(hw, hd) + children.push({ + kind: 'polygon', + points: hood, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }) + children.push({ + kind: 'polygon', + points: hood, + fill, + fillOpacity, + stroke, + strokeWidth: lineWidth, + strokeLinejoin: 'round', + pointerEvents: 'none', + }) + // Front edge (the louvered opening faces +Z). + children.push({ + kind: 'polyline', + points: [toPlan(-hw, hd), toPlan(hw, hd)], + stroke, + strokeWidth: lineWidth, + strokeOpacity: 0.9, + pointerEvents: 'none', + }) + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/eyebrow-vent/geometry.ts b/packages/nodes/src/eyebrow-vent/geometry.ts new file mode 100644 index 00000000..72462046 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/geometry.ts @@ -0,0 +1,475 @@ +import type { EyebrowVentNode } from '@pascal-app/core' +import * as THREE from 'three' + +/** + * Pure builder for the eyebrow-vent mesh. Three styles, all seated directly on + * the roof at y=0 and facing +Z (downslope): + * + * - `scoop` — a rounded louvered opening at the front that sweeps back + * and tapers to nothing (the classic dormer "eyebrow"). Front + * = a half-ellipse of horizontal louvers; the body is a lofted + * half-cone with a rounded nose. + * - `half-round` — a D-shaped half-round vent: a constant half-ellipse cross + * section extruded a short depth, flat louvered front face, + * capped back, curved top. + * - `slant-box` — a low box with a slanted top (tall front, lower back) and a + * framed front face holding recessed louvers + a screen. + * + * Every face is emitted through a winding-safe oriented quad/tri, the louvers + * are extruded into solid slabs, and the whole mesh is double-sided at the end + * (see `doubleSide`) so it reads correctly from any angle. + * + * Pure: no React, no scene access, no store mutation. Safe for unit tests, the + * placement preview, and the move-tool ghost. + */ +export function buildEyebrowVentGeometry(node: EyebrowVentNode): THREE.BufferGeometry { + const w = Math.max(0.15, node.width) + const d = Math.max(0.15, node.depth) + const h = Math.max(0.06, node.height) + const slats = Math.max(0, Math.min(8, Math.round(node.louverCount ?? 3))) + // slant-box: the low rear edge as a fraction of the tall front edge. + const backRatio = Math.max(0.15, Math.min(1, node.backRatio ?? 0.5)) + + const p: number[] = [] + const n: number[] = [] + const uv: number[] = [] + + // The hood seats directly on the roof at y=0 — no flashing plate. + if (node.style === 'half-round') { + addHalfRound(p, n, uv, w, d, h, 0, slats) + } else if (node.style === 'slant-box') { + addSlantBox(p, n, uv, w, d, h, 0, slats, backRatio) + } else { + addScoop(p, n, uv, w, d, h, 0, slats) + } + + // Double-side the whole mesh at the geometry level: append a back-facing + // copy of every triangle (reversed winding + negated normals). The open + // shells (scoop hood, half-round dome, slant-box pocket) then read as solid + // from inside too, lit correctly from both sides — without a `DoubleSide` + // material, which poisons the MRT scene pass (see the ridge-vent renderer + // note). Only one of each coplanar pair front-faces any camera, so there's + // no z-fighting. + doubleSide(p, n, uv) + + const geo = new THREE.BufferGeometry() + geo.setAttribute('position', new THREE.Float32BufferAttribute(p, 3)) + geo.setAttribute('normal', new THREE.Float32BufferAttribute(n, 3)) + geo.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2)) + geo.computeBoundingSphere() + return geo +} + +// ─── Style: scoop (the eyebrow) ─────────────────────────────────────────── + +function addScoop( + p: number[], + n: number[], + uv: number[], + w: number, + d: number, + h: number, + yB: number, + slats: number, +): void { + const a = w / 2 + const b = h + const zF = d / 2 + const NZ = 20 + const NF = 18 + + // Lofted half-ellipse, full at the front (z = zF) tapering to a rounded + // nose at the back. `cos(v·π/2)` gives a smooth falloff to zero. + const rings: number[][][] = [] + for (let i = 0; i <= NZ; i++) { + const v = i / NZ + const scale = Math.cos((v * Math.PI) / 2) + const z = zF - v * d + rings.push(halfRing(a, b, yB, z, scale, NF)) + } + for (let i = 0; i < NZ; i++) { + addBand(p, n, uv, rings[i + 1]!, rings[i]!, NF, (qa, qb, qc, qd) => { + const mx = (qa[0]! + qb[0]! + qc[0]! + qd[0]!) / 4 + const my = (qa[1]! + qb[1]! + qc[1]! + qd[1]!) / 4 + return [mx, my - yB, 0] // radial-out from the spine + }) + } + + // Horizontal louvers filling the front half-ellipse opening. + addArchLouvers(p, n, uv, a, b, yB, zF - d * 0.04, slats) +} + +// ─── Style: half-round (D-shaped louver vent) ───────────────────────────── + +function addHalfRound( + p: number[], + n: number[], + uv: number[], + w: number, + d: number, + h: number, + yB: number, + slats: number, +): void { + const a = w / 2 + // Cap the crown at a true half-round — never bulge past a semicircle, so the + // top reads as a clean, smaller-radius arch. `height` flattens it further. + const b = Math.min(h, a) + const zF = d / 2 + const zB = -d / 2 + const NF = 20 + + const ringF = halfRing(a, b, yB, zF, 1, NF) + const ringB = halfRing(a, b, yB, zB, 1, NF) + + // Curved top shell (constant cross section). + addBand(p, n, uv, ringB, ringF, NF, (qa, qb, qc, qd) => { + const mx = (qa[0]! + qb[0]! + qc[0]! + qd[0]!) / 4 + const my = (qa[1]! + qb[1]! + qc[1]! + qd[1]!) / 4 + return [mx, my - yB, 0] + }) + + // Back cap — fan the rear semicircle, facing -Z. + const backCenter = [0, yB, zB] + for (let j = 0; j < NF; j++) { + pushTri(p, n, uv, backCenter, ringB[j + 1]!, ringB[j]!, [0, 0, -1]) + } + + // Louvered front face (a slat count bumped up — the D-vent reads denser). + addArchLouvers(p, n, uv, a, b, yB, zF - d * 0.04, slats > 0 ? Math.max(slats, 4) : 0) +} + +// ─── Style: slant-box (low hooded box) ──────────────────────────────────── + +function addSlantBox( + p: number[], + n: number[], + uv: number[], + w: number, + d: number, + h: number, + yB: number, + slats: number, + backRatio: number, +): void { + const hw = w / 2 + const zF = d / 2 + const zB = -d / 2 + const yFront = yB + h // tall front — the louvered/screened opening + const yBack = yB + h * backRatio // lower at the back, top slopes down to it + + // Corner shorthands. + const fbl = [-hw, yB, zF] + const fbr = [hw, yB, zF] + const ftl = [-hw, yFront, zF] + const ftr = [hw, yFront, zF] + const bbl = [-hw, yB, zB] + const bbr = [hw, yB, zB] + const btl = [-hw, yBack, zB] + const btr = [hw, yBack, zB] + + // Sides (trapezoids), slanted top, back wall. + pushQuad(p, n, uv, fbr, bbr, btr, ftr, [1, 0, 0]) + pushQuad(p, n, uv, bbl, fbl, ftl, btl, [-1, 0, 0]) + pushQuad(p, n, uv, ftl, ftr, btr, btl, [0, 1, 0]) + pushQuad(p, n, uv, bbl, bbr, btr, btl, [0, 0, -1]) + + // Front frame: a face plate at z = zF with a rectangular hole. The louvers + // and screen live RECESSED inside that hole, so they're fully contained by + // the box — never poking out past the front face or above the opening. + const frame = Math.min(0.04, Math.min(w, h) * 0.14) + const oL = -hw + frame + const oR = hw - frame + const oB = yB + frame + const oT = yFront - frame + // Four frame rails around the opening (front face, +Z). + pushQuad(p, n, uv, [-hw, oT, zF], [hw, oT, zF], ftr, ftl, [0, 0, 1]) // top + pushQuad(p, n, uv, fbl, fbr, [hw, oB, zF], [-hw, oB, zF], [0, 0, 1]) // bottom + pushQuad(p, n, uv, [-hw, oB, zF], [oL, oB, zF], [oL, oT, zF], [-hw, oT, zF], [0, 0, 1]) // left + pushQuad(p, n, uv, [oR, oB, zF], [hw, oB, zF], [hw, oT, zF], [oR, oT, zF], [0, 0, 1]) // right + + // Recessed screen panel at the back of the pocket (blocks see-through). + const screenZ = zF - d * 0.2 + pushQuad( + p, + n, + uv, + [oL, oB, screenZ], + [oR, oB, screenZ], + [oR, oT, screenZ], + [oL, oT, screenZ], + [0, 0, 1], + ) + + // Horizontal louvers inside the pocket — bounded by the opening in height + // and recessed in depth between the frame face and the screen. + addRectLouvers(p, n, uv, oR, oB, oT, zF - d * 0.07, slats) +} + +// ─── Louver helpers ─────────────────────────────────────────────────────── + +// Angled horizontal slats filling a half-ellipse opening (radius a × b, +// flat side on the plate at `yB`), set just inside the face at `z`. +function addArchLouvers( + p: number[], + n: number[], + uv: number[], + a: number, + b: number, + yB: number, + z: number, + slats: number, +): void { + if (slats <= 0) return + const drop = (b / (slats + 1)) * 0.55 + const back = Math.max(0.012, b * 0.12) + const thick = Math.max(0.004, drop * 0.32) + for (let k = 1; k <= slats; k++) { + const s = k / (slats + 1) // height fraction up the semicircle (sin φ) + const y = yB + b * s + const halfX = a * Math.sqrt(Math.max(0, 1 - s * s)) * 0.96 + if (halfX < 1e-3) continue + addSlab( + p, + n, + uv, + [-halfX, y, z], + [halfX, y, z], + [halfX, y - drop, z - back], + [-halfX, y - drop, z - back], + thick, + ) + } +} + +// Angled horizontal slats across a rectangular opening (±halfX, yB..yTop) set +// just inside the face at `z`. +function addRectLouvers( + p: number[], + n: number[], + uv: number[], + halfX: number, + yB: number, + yTop: number, + z: number, + slats: number, +): void { + if (slats <= 0) return + const span = yTop - yB + const drop = (span / (slats + 1)) * 0.55 + const back = Math.max(0.012, span * 0.18) + const thick = Math.max(0.004, drop * 0.32) + for (let k = 1; k <= slats; k++) { + const y = yB + (span * k) / (slats + 1) + addSlab( + p, + n, + uv, + [-halfX, y, z], + [halfX, y, z], + [halfX, y - drop, z - back], + [-halfX, y - drop, z - back], + thick, + ) + } +} + +// Extrude a planar quad (a→b→c→d) into a thin solid slab of `t` thickness +// along its normal — gives louver blades real depth so they don't read as +// paper-thin at a grazing angle. Each of the 6 faces is oriented outward from +// the slab centre, so winding is correct without hand-tracing. +function addSlab( + p: number[], + n: number[], + uv: number[], + a: number[], + b: number[], + c: number[], + d: number[], + t: number, +): void { + let nx = (c[1]! - a[1]!) * (b[2]! - a[2]!) - (c[2]! - a[2]!) * (b[1]! - a[1]!) + let ny = (c[2]! - a[2]!) * (b[0]! - a[0]!) - (c[0]! - a[0]!) * (b[2]! - a[2]!) + let nz = (c[0]! - a[0]!) * (b[1]! - a[1]!) - (c[1]! - a[1]!) * (b[0]! - a[0]!) + const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1 + nx = (nx / len) * (t / 2) + ny = (ny / len) * (t / 2) + nz = (nz / len) * (t / 2) + const up = (q: number[]): number[] => [q[0]! + nx, q[1]! + ny, q[2]! + nz] + const dn = (q: number[]): number[] => [q[0]! - nx, q[1]! - ny, q[2]! - nz] + const aT = up(a) + const bT = up(b) + const cT = up(c) + const dT = up(d) + const aB = dn(a) + const bB = dn(b) + const cB = dn(c) + const dB = dn(d) + let cx = 0 + let cy = 0 + let cz = 0 + for (const v of [aT, bT, cT, dT, aB, bB, cB, dB]) { + cx += v[0]! / 8 + cy += v[1]! / 8 + cz += v[2]! / 8 + } + const face = (q0: number[], q1: number[], q2: number[], q3: number[]) => { + const mx = (q0[0]! + q1[0]! + q2[0]! + q3[0]!) / 4 + const my = (q0[1]! + q1[1]! + q2[1]! + q3[1]!) / 4 + const mz = (q0[2]! + q1[2]! + q2[2]! + q3[2]!) / 4 + pushQuad(p, n, uv, q0, q1, q2, q3, [mx - cx, my - cy, mz - cz]) + } + face(aT, bT, cT, dT) // top + face(aB, bB, cB, dB) // bottom + face(aT, bT, bB, aB) // leading edge + face(bT, cT, cB, bB) // right + face(cT, dT, dB, cB) // trailing edge + face(dT, aT, aB, dB) // left +} + +// Half-ellipse ring (flat side down on `yB`): φ from 0 (+x) to π (−x). +function halfRing( + a: number, + b: number, + yB: number, + z: number, + scale: number, + steps: number, +): number[][] { + const row: number[][] = [] + for (let j = 0; j <= steps; j++) { + const phi = (Math.PI * j) / steps + row.push([a * scale * Math.cos(phi), yB + b * scale * Math.sin(phi), z]) + } + return row +} + +// ─── Primitives ─────────────────────────────────────────────────────────── + +function addBand( + p: number[], + n: number[], + uv: number[], + rA: number[][], + rB: number[][], + lng: number, + hintFn: (a: number[], b: number[], c: number[], d: number[]) => number[], +): void { + for (let j = 0; j < lng; j++) { + const a = rA[j]! + const b = rA[j + 1]! + const c = rB[j + 1]! + const d = rB[j]! + pushQuad(p, n, uv, a, b, c, d, hintFn(a, b, c, d)) + } +} + +// Append a reversed-winding, negated-normal copy of every triangle already in +// the buffers, making the mesh render from both sides under a FrontSide +// material. `triCount` is snapshotted up front so we only mirror the originals. +function doubleSide(p: number[], n: number[], uv: number[]): void { + const triCount = Math.floor(p.length / 9) + for (let t = 0; t < triCount; t++) { + const o = t * 9 + const u = t * 6 + // verts v0, v2, v1 (reverse the last two to flip the face). + p.push( + p[o]!, + p[o + 1]!, + p[o + 2]!, + p[o + 6]!, + p[o + 7]!, + p[o + 8]!, + p[o + 3]!, + p[o + 4]!, + p[o + 5]!, + ) + n.push( + -n[o]!, + -n[o + 1]!, + -n[o + 2]!, + -n[o + 6]!, + -n[o + 7]!, + -n[o + 8]!, + -n[o + 3]!, + -n[o + 4]!, + -n[o + 5]!, + ) + uv.push(uv[u]!, uv[u + 1]!, uv[u + 4]!, uv[u + 5]!, uv[u + 2]!, uv[u + 3]!) + } +} + +// ─── Winding-safe primitives ───────────────────────────────────────────── + +function pushQuad( + positions: number[], + normals: number[], + uvs: number[], + a: number[], + b: number[], + c: number[], + d: number[], + hint: number[], +) { + let nx = (c[1]! - a[1]!) * (b[2]! - a[2]!) - (c[2]! - a[2]!) * (b[1]! - a[1]!) + let ny = (c[2]! - a[2]!) * (b[0]! - a[0]!) - (c[0]! - a[0]!) * (b[2]! - a[2]!) + let nz = (c[0]! - a[0]!) * (b[1]! - a[1]!) - (c[1]! - a[1]!) * (b[0]! - a[0]!) + const flip = nx * hint[0]! + ny * hint[1]! + nz * hint[2]! < 0 + if (flip) { + nx = -nx + ny = -ny + nz = -nz + } + const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1 + nx /= len + ny /= len + nz /= len + + const u = Math.hypot(b[0]! - a[0]!, b[1]! - a[1]!, b[2]! - a[2]!) + const v = Math.hypot(d[0]! - a[0]!, d[1]! - a[1]!, d[2]! - a[2]!) + + if (flip) { + positions.push(a[0]!, a[1]!, a[2]!, b[0]!, b[1]!, b[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, u, 0, u, v) + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, d[0]!, d[1]!, d[2]!) + uvs.push(0, 0, u, v, 0, v) + } else { + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, b[0]!, b[1]!, b[2]!) + uvs.push(0, 0, u, v, u, 0) + positions.push(a[0]!, a[1]!, a[2]!, d[0]!, d[1]!, d[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, 0, v, u, v) + } + for (let i = 0; i < 6; i++) normals.push(nx, ny, nz) +} + +function pushTri( + positions: number[], + normals: number[], + uvs: number[], + a: number[], + b: number[], + c: number[], + hint: number[], +) { + let nx = (b[1]! - a[1]!) * (c[2]! - a[2]!) - (b[2]! - a[2]!) * (c[1]! - a[1]!) + let ny = (b[2]! - a[2]!) * (c[0]! - a[0]!) - (b[0]! - a[0]!) * (c[2]! - a[2]!) + let nz = (b[0]! - a[0]!) * (c[1]! - a[1]!) - (b[1]! - a[1]!) * (c[0]! - a[0]!) + const flip = nx * hint[0]! + ny * hint[1]! + nz * hint[2]! < 0 + if (flip) { + nx = -nx + ny = -ny + nz = -nz + } + const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1 + nx /= len + ny /= len + nz /= len + + if (flip) { + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, b[0]!, b[1]!, b[2]!) + } else { + positions.push(a[0]!, a[1]!, a[2]!, b[0]!, b[1]!, b[2]!, c[0]!, c[1]!, c[2]!) + } + uvs.push(0, 0, 1, 0, 0, 1) + for (let i = 0; i < 3; i++) normals.push(nx, ny, nz) +} diff --git a/packages/nodes/src/eyebrow-vent/index.ts b/packages/nodes/src/eyebrow-vent/index.ts new file mode 100644 index 00000000..896419e2 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/index.ts @@ -0,0 +1,3 @@ +export { eyebrowVentDefinition } from './definition' +export { buildEyebrowVentGeometry } from './geometry' +export { EyebrowVentNode } from './schema' diff --git a/packages/nodes/src/eyebrow-vent/move-tool.tsx b/packages/nodes/src/eyebrow-vent/move-tool.tsx new file mode 100644 index 00000000..82b3ab33 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/move-tool.tsx @@ -0,0 +1,204 @@ +'use client' + +import { + type AnyNodeId, + 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 { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' +import EyebrowVentPreview from './preview' + +/** + * Eyebrow-vent move tool. Mirrors the box-vent / cupola move flow: the + * original mesh hides during the drag, a ghost tracks the cursor with the + * correct slope tilt + segment yaw, and the click updates the node's position + * + parent segment in one undoable step (reparenting between segments when + * needed). Cancel restores the original transform, or deletes a freshly-cloned + * vent. + */ +export default function MoveEyebrowVentTool({ node }: { node: EyebrowVentNode }) { + const exitMoveMode = useCallback(() => { + useEditor.getState().setMovingNode(null) + }, []) + + const [previewPos, setPreviewPos] = useState<[number, number, number] | null>(null) + const [previewSurfaceQuat, setPreviewSurfaceQuat] = useState(null) + const [previewYaw, setPreviewYaw] = useState(0) + + useEffect(() => { + useScene.temporal.getState().pause() + + const original = { + position: [...node.position] as [number, number, number], + rotation: node.rotation ?? 0, + roofSegmentId: node.roofSegmentId, + parentId: node.parentId, + metadata: node.metadata, + } + const meta = + typeof node.metadata === 'object' && node.metadata !== null + ? (node.metadata as Record) + : {} + const isNew = !!meta.isNew + + 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 + + const updatePreview = (event: RoofEvent) => { + const wx = event.position[0] + const wy = event.position[1] + const wz = event.position[2] + + const sx = Math.round(wx * 20) / 20 + const sz = Math.round(wz * 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) + setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion())) + setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0)) + setPreviewPos(worldToBuildingLocal(wx, wy, wz)) + 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 st = useScene.getState() + + const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined + if (prevSegmentId && prevSegmentId !== targetSegmentId) { + const oldSeg = st.nodes[prevSegmentId] as RoofSegmentNode | undefined + if (oldSeg) { + st.updateNode(prevSegmentId, { + children: (oldSeg.children ?? []).filter((id) => id !== node.id), + }) + } + const newSeg = st.nodes[targetSegmentId] as RoofSegmentNode | undefined + if (newSeg && !(newSeg.children ?? []).includes(node.id)) { + st.updateNode(targetSegmentId, { + children: [...(newSeg.children ?? []), node.id], + }) + } + st.dirtyNodes.add(prevSegmentId) + } + + useScene.temporal.getState().resume() + st.updateNode(node.id as AnyNodeId, { + roofSegmentId: targetSegmentId, + parentId: targetSegmentId, + position: [hit.localX, hit.localY, hit.localZ], + rotation: original.rotation, + visible: true, + metadata: {}, + }) + useScene.temporal.getState().pause() + + st.dirtyNodes.add(targetSegmentId) + st.dirtyNodes.add(node.id as AnyNodeId) + + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + + triggerSFX('sfx:item-place') + exitMoveMode() + event.stopPropagation() + } + + const onCancel = () => { + if (isNew) { + const parentId = original.roofSegmentId as AnyNodeId | undefined + if (parentId) { + const parent = useScene.getState().nodes[parentId] as RoofSegmentNode | undefined + if (parent) { + useScene.getState().updateNode(parentId, { + children: (parent.children ?? []).filter((id) => id !== node.id), + }) + } + } + useScene.getState().deleteNode(node.id as AnyNodeId) + useScene.temporal.getState().resume() + markToolCancelConsumed() + exitMoveMode() + return + } + + useScene.getState().updateNode(node.id as AnyNodeId, { + position: original.position, + rotation: original.rotation, + roofSegmentId: original.roofSegmentId as AnyNodeId | undefined, + parentId: original.parentId as AnyNodeId | undefined, + metadata: original.metadata, + }) + if (original.roofSegmentId) { + useScene.getState().dirtyNodes.add(original.roofSegmentId as AnyNodeId) + } + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + + useScene.temporal.getState().resume() + markToolCancelConsumed() + exitMoveMode() + } + + emitter.on('roof:move', updatePreview) + emitter.on('roof:enter', updatePreview) + emitter.on('roof:click', onRoofClick) + emitter.on('tool:cancel', onCancel) + + return () => { + emitter.off('roof:move', updatePreview) + emitter.off('roof:enter', updatePreview) + emitter.off('roof:click', onRoofClick) + emitter.off('tool:cancel', onCancel) + + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + useScene.temporal.getState().resume() + } + }, [exitMoveMode, node]) + + if (!(previewPos && previewSurfaceQuat)) return null + + return ( + + + + + + + + ) +} diff --git a/packages/nodes/src/eyebrow-vent/panel.tsx b/packages/nodes/src/eyebrow-vent/panel.tsx new file mode 100644 index 00000000..d43fd4b8 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/panel.tsx @@ -0,0 +1,307 @@ +'use client' + +import { + type AnyNode, + type AnyNodeId, + EyebrowVentNode as EyebrowVentSchema, + getActiveRoofHeight, + type RoofSegmentNode, + useLiveNodeOverrides, + useScene, +} from '@pascal-app/core' +import { + ActionButton, + ActionGroup, + PanelSection, + PanelWrapper, + SegmentedControl, + SliderControl, + triggerSFX, + useEditor, +} from '@pascal-app/editor' +import { useViewer } from '@pascal-app/viewer' +import { Copy, Move, Trash2 } from 'lucide-react' +import { useCallback } from 'react' +import type { EyebrowVentNode } from './schema' + +/** + * Inspector panel for a placed eyebrow vent. Louvers toggle + dimensions plus + * Move / Duplicate / Delete wired into the same ghost-preview drag flow the + * placement tool uses. Mirrors the box-vent / cupola panel. + */ +export default function EyebrowVentPanel() { + const selectedId = useViewer((s) => s.selection.selectedIds[0]) + const setSelection = useViewer((s) => s.setSelection) + const updateNode = useScene((s) => s.updateNode) + const deleteNode = useScene((s) => s.deleteNode) + const setMovingNode = useEditor((s) => s.setMovingNode) + + const storeNode = useScene((s) => + selectedId ? (s.nodes[selectedId as AnyNode['id']] as EyebrowVentNode | undefined) : undefined, + ) + const overrides = useLiveNodeOverrides((s) => + selectedId + ? (s.get(selectedId as AnyNodeId) as Partial | undefined) + : undefined, + ) + const node: EyebrowVentNode | undefined = + storeNode && overrides ? ({ ...storeNode, ...overrides } as EyebrowVentNode) : storeNode + + const segment = useScene((s) => + node?.roofSegmentId + ? (s.nodes[node.roofSegmentId as AnyNodeId] as RoofSegmentNode | undefined) + : undefined, + ) + + const previewProp = useCallback( + (updates: Partial) => { + if (!selectedId) return + useLiveNodeOverrides.getState().set(selectedId as AnyNodeId, updates) + }, + [selectedId], + ) + + const commitProp = useCallback( + (updates: Partial) => { + if (!selectedId) return + updateNode(selectedId as AnyNode['id'], updates) + useLiveNodeOverrides.getState().clear(selectedId as AnyNodeId) + }, + [selectedId, updateNode], + ) + + const handleUpdate = commitProp + + const handleClose = useCallback(() => { + setSelection({ selectedIds: [] }) + }, [setSelection]) + + const handleBack = useCallback(() => { + if (node?.roofSegmentId) { + setSelection({ selectedIds: [node.roofSegmentId as AnyNode['id']] }) + } + }, [node?.roofSegmentId, setSelection]) + + const handleMove = useCallback(() => { + if (!node) return + triggerSFX('sfx:item-pick') + setMovingNode(node as never) + setSelection({ selectedIds: [] }) + }, [node, setMovingNode, setSelection]) + + const handleDuplicate = useCallback(() => { + if (!node) return + triggerSFX('sfx:item-pick') + const parentId = node.roofSegmentId as AnyNodeId | undefined + if (!parentId) return + + const state = useScene.getState() + const meta = + typeof node.metadata === 'object' && node.metadata !== null + ? (node.metadata as Record) + : {} + const cloneInput = { + ...node, + id: undefined, + metadata: { ...meta, isNew: true }, + } as Record + const cloned = EyebrowVentSchema.parse(cloneInput) as EyebrowVentNode + + state.createNode(cloned, parentId) + state.dirtyNodes.add(parentId) + setMovingNode(cloned as never) + setSelection({ selectedIds: [] }) + }, [node, setMovingNode, setSelection]) + + const handleDelete = useCallback(() => { + if (!(selectedId && node)) return + triggerSFX('sfx:item-delete') + const segmentId = node.roofSegmentId + if (segmentId) { + const state = useScene.getState() + const seg = state.nodes[segmentId as AnyNodeId] as RoofSegmentNode | undefined + if (seg) { + state.updateNode(segmentId as AnyNode['id'], { + children: (seg.children ?? []).filter((id) => id !== selectedId), + }) + } + } + deleteNode(selectedId as AnyNodeId) + if (segmentId) { + useScene.getState().dirtyNodes.add(segmentId as AnyNodeId) + setSelection({ selectedIds: [segmentId as AnyNode['id']] }) + } else { + setSelection({ selectedIds: [] }) + } + }, [selectedId, node, deleteNode, setSelection]) + + if (!(node && node.type === 'eyebrow-vent' && selectedId)) return null + + return ( + + + handleUpdate({ style: v as EyebrowVentNode['style'] })} + options={[ + { label: 'Scoop', value: 'scoop' }, + { label: 'Half-round', value: 'half-round' }, + { label: 'Slant-box', value: 'slant-box' }, + ]} + value={node.style ?? 'scoop'} + /> + previewProp({ louverCount: Math.round(v) })} + onCommit={(v) => handleUpdate({ louverCount: Math.round(v) })} + precision={0} + restoreOnCommit={false} + step={1} + value={node.louverCount ?? 3} + /> + {node.style === 'slant-box' ? ( + previewProp({ backRatio: v })} + onCommit={(v) => handleUpdate({ backRatio: v })} + precision={2} + restoreOnCommit={false} + step={0.05} + value={Math.round((node.backRatio ?? 0.5) * 100) / 100} + /> + ) : null} + + + + previewProp({ width: v })} + onCommit={(v) => handleUpdate({ width: v })} + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round(node.width * 100) / 100} + /> + previewProp({ depth: v })} + onCommit={(v) => handleUpdate({ depth: v })} + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round(node.depth * 100) / 100} + /> + previewProp({ height: v })} + onCommit={(v) => handleUpdate({ height: v })} + precision={2} + restoreOnCommit={false} + step={0.02} + unit="m" + value={Math.round(node.height * 100) / 100} + /> + + + + + previewProp({ position: [v, node.position[1] ?? 0, node.position[2] ?? 0] }) + } + onCommit={(v) => + handleUpdate({ position: [v, node.position[1] ?? 0, node.position[2] ?? 0] }) + } + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round((node.position[0] ?? 0) * 100) / 100} + /> + + previewProp({ position: [node.position[0] ?? 0, v, node.position[2] ?? 0] }) + } + onCommit={(v) => + handleUpdate({ position: [node.position[0] ?? 0, v, node.position[2] ?? 0] }) + } + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round((node.position[1] ?? 0) * 100) / 100} + /> + + previewProp({ position: [node.position[0] ?? 0, node.position[1] ?? 0, v] }) + } + onCommit={(v) => + handleUpdate({ position: [node.position[0] ?? 0, node.position[1] ?? 0, v] }) + } + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round((node.position[2] ?? 0) * 100) / 100} + /> + previewProp({ rotation: (deg * Math.PI) / 180 })} + onCommit={(deg) => handleUpdate({ rotation: (deg * Math.PI) / 180 })} + precision={0} + restoreOnCommit={false} + step={1} + unit="°" + value={Math.round(((node.rotation ?? 0) * 180) / Math.PI)} + /> + + + + + } label="Move" onClick={handleMove} /> + } + label="Duplicate" + onClick={handleDuplicate} + /> + } + label="Delete" + onClick={handleDelete} + /> + + + + ) +} diff --git a/packages/nodes/src/eyebrow-vent/parametrics.ts b/packages/nodes/src/eyebrow-vent/parametrics.ts new file mode 100644 index 00000000..02fa2fe0 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/parametrics.ts @@ -0,0 +1,34 @@ +import type { ParametricDescriptor } from '@pascal-app/core' +import type { EyebrowVentNode } from './schema' + +/** + * Inspector descriptor for the eyebrow vent. Move / Duplicate use the + * kind-owned ghost-preview flow (see `./move-tool.tsx`), so the panel hosts + * those actions itself — same pattern as box-vent / cupola. + */ +export const eyebrowVentParametrics: ParametricDescriptor = { + customPanel: () => import('./panel'), + groups: [ + { + label: 'Style', + fields: [ + { + key: 'style', + kind: 'enum', + options: ['scoop', 'half-round', 'slant-box'], + display: 'segmented', + }, + { key: 'louverCount', kind: 'number', min: 0, max: 8, step: 1 }, + { key: 'backRatio', kind: 'number', min: 0.15, max: 1, step: 0.05 }, + ], + }, + { + label: 'Dimensions', + fields: [ + { key: 'width', kind: 'number', unit: 'm', min: 0.3, max: 2, step: 0.05 }, + { key: 'depth', kind: 'number', unit: 'm', min: 0.2, max: 1.5, step: 0.05 }, + { key: 'height', kind: 'number', unit: 'm', min: 0.08, max: 1, step: 0.02 }, + ], + }, + ], +} diff --git a/packages/nodes/src/eyebrow-vent/preview.tsx b/packages/nodes/src/eyebrow-vent/preview.tsx new file mode 100644 index 00000000..391c448a --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/preview.tsx @@ -0,0 +1,63 @@ +'use client' + +import { useEffect, useMemo } from 'react' +import * as THREE from 'three' +import { buildEyebrowVentGeometry } from './geometry' +import type { EyebrowVentNode } from './schema' + +/** + * Translucent ghost of an eyebrow vent, used by the placement tool's cursor + * and the move-tool preview. Builds geometry through the shared pure builder + * so the ghost stays in lockstep with the committed vent. Raycast disabled so + * the preview doesn't intercept the cursor ray feeding the tool. + */ +const EyebrowVentPreview = ({ node }: { node: EyebrowVentNode }) => { + const geometry = useMemo( + () => buildEyebrowVentGeometry(node), + [node.width, node.depth, node.height, node.style, node.louverCount, node.backRatio], + ) + + const material = useMemo( + () => + new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + emissive: 0x6c_a3_ff, + emissiveIntensity: 0.18, + roughness: 0.7, + metalness: 0.1, + transparent: true, + opacity: 0.35, + depthWrite: false, + side: THREE.DoubleSide, + }), + [], + ) + + const edgesGeometry = useMemo(() => new THREE.EdgesGeometry(geometry, 25), [geometry]) + + useEffect( + () => () => { + geometry.dispose() + edgesGeometry.dispose() + material.dispose() + }, + [geometry, edgesGeometry, material], + ) + + return ( + + { + /* disabled — see component-level note */ + }} + /> + + + + + ) +} + +export default EyebrowVentPreview diff --git a/packages/nodes/src/eyebrow-vent/renderer.tsx b/packages/nodes/src/eyebrow-vent/renderer.tsx new file mode 100644 index 00000000..dfd41f48 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/renderer.tsx @@ -0,0 +1,111 @@ +'use client' + +import { + type AnyNodeId, + type EyebrowVentNode, + type RoofSegmentNode, + useLiveNodeOverrides, + useRegistry, + useScene, +} from '@pascal-app/core' +import { + type ColorPreset, + createMaterial, + createMaterialFromPresetRef, + createSurfaceRoleMaterial, + useNodeEvents, + useViewer, +} from '@pascal-app/viewer' +import { useEffect, useMemo, useRef } from 'react' +import * as THREE from 'three' +import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' +import { buildEyebrowVentGeometry } from './geometry' + +const defaultMaterial = new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + roughness: 0.7, + metalness: 0.2, +}) + +/** + * Eyebrow-vent renderer. Same transform stack as the box vent / cupola — the + * vent is parented to a roof-segment, so this reads the segment directly and + * reproduces the segment-local transform (segment position → rotation → vent + * position → slope tilt → vent yaw → mesh). No animation. + */ +const EyebrowVentRenderer = ({ node: storeNode }: { node: EyebrowVentNode }) => { + const ref = useRef(null!) + useRegistry(storeNode.id, 'eyebrow-vent', ref) + const handlers = useNodeEvents(storeNode, 'eyebrow-vent') + const shading = useViewer((s) => s.shading) + const textures = useViewer((s) => s.textures) + const colorPreset: ColorPreset = useViewer((s) => s.colorPreset) + const sceneTheme = useViewer((s) => s.sceneTheme) + + const overrides = useLiveNodeOverrides( + (s) => s.get(storeNode.id as AnyNodeId) as Partial | undefined, + ) + const node: EyebrowVentNode = overrides + ? ({ ...storeNode, ...overrides } as EyebrowVentNode) + : storeNode + + const segment = useScene((state) => + node.roofSegmentId + ? (state.nodes[node.roofSegmentId as AnyNodeId] as RoofSegmentNode | undefined) + : undefined, + ) + + const geometry = useMemo( + () => buildEyebrowVentGeometry(node), + [node.width, node.depth, node.height, node.style, node.louverCount, node.backRatio], + ) + useEffect(() => () => geometry.dispose(), [geometry]) + + const surfaceQuat = useMemo(() => { + if (!segment) return new THREE.Quaternion() + const normal = getAnalyticalNormal(node.position[0] ?? 0, node.position[2] ?? 0, segment) + return surfaceQuatFromNormal(normal, new THREE.Quaternion()) + }, [segment, node.position[0], node.position[2]]) + + const material = useMemo(() => { + if (!textures || (!node.material && !node.materialPreset)) { + return createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme) + } + return node.material + ? createMaterial(node.material, shading) + : (createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial) + }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]) + + const yAxis = useMemo(() => new THREE.Vector3(0, 1, 0), []) + const composedQuat = useMemo(() => { + const yawQuat = new THREE.Quaternion().setFromAxisAngle(yAxis, node.rotation ?? 0) + return new THREE.Quaternion().copy(surfaceQuat).multiply(yawQuat) + }, [surfaceQuat, node.rotation, yAxis]) + + if (!segment) return null + + const segPos = segment.position ?? [0, 0, 0] + const segRotY = segment.rotation ?? 0 + + return ( + + + + + + ) +} + +export default EyebrowVentRenderer diff --git a/packages/nodes/src/eyebrow-vent/schema.ts b/packages/nodes/src/eyebrow-vent/schema.ts new file mode 100644 index 00000000..3190523b --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/schema.ts @@ -0,0 +1,3 @@ +// Schema lives in core (referenced by the AnyNode union). Re-export so every +// eyebrow-vent-related import stays inside @pascal-app/nodes/eyebrow-vent. +export { EyebrowVentNode } from '@pascal-app/core' diff --git a/packages/nodes/src/eyebrow-vent/tool.tsx b/packages/nodes/src/eyebrow-vent/tool.tsx new file mode 100644 index 00000000..167f0188 --- /dev/null +++ b/packages/nodes/src/eyebrow-vent/tool.tsx @@ -0,0 +1,131 @@ +'use client' + +import { + type AnyNodeId, + EyebrowVentNode, + emitter, + type RoofEvent, + type RoofNode, + sceneRegistry, + useScene, +} from '@pascal-app/core' +import { triggerSFX } 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 { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' +import { eyebrowVentDefinition } from './definition' +import EyebrowVentPreview from './preview' + +const worldPoint = new THREE.Vector3() + +/** + * Eyebrow-vent placement tool. Mounts when the palette activates the + * eyebrow-vent kind; listens for `roof:*` events; on click commits a new + * `EyebrowVentNode` parented to the targeted segment with segment-local + * coordinates. Mirrors box-vent / cupola. + */ +const EyebrowVentTool = () => { + const activeBuildingId = useViewer((s) => s.selection.buildingId) + const setSelection = useViewer((s) => s.setSelection) + + const [previewPos, setPreviewPos] = useState<[number, number, number] | null>(null) + const [previewSurfaceQuat, setPreviewSurfaceQuat] = useState(null) + const [previewYaw, setPreviewYaw] = useState(0) + const lastSnapRef = useRef<[number, number] | null>(null) + + const previewNode = useMemo( + () => + EyebrowVentNode.parse({ + ...eyebrowVentDefinition.defaults(), + name: 'Eyebrow Vent', + position: [0, 0, 0], + rotation: 0, + }), + [], + ) + + useEffect(() => { + if (!activeBuildingId) return + + const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => { + const buildingObj = sceneRegistry.nodes.get(activeBuildingId as AnyNodeId) + if (!buildingObj) return [wx, wy, wz] + worldPoint.set(wx, wy, wz) + buildingObj.worldToLocal(worldPoint) + return [worldPoint.x, worldPoint.y, worldPoint.z] + } + + const updatePreview = (event: RoofEvent) => { + const wx = event.position[0] + const wy = event.position[1] + const wz = event.position[2] + + const sx = Math.round(wx * 20) / 20 + const sz = Math.round(wz * 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 normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment) + setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion())) + setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0)) + setPreviewPos(worldToBuildingLocal(wx, wy, wz)) + 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 state = useScene.getState() + + const vent = EyebrowVentNode.parse({ + ...eyebrowVentDefinition.defaults(), + name: 'Eyebrow Vent', + roofSegmentId: hit.segment.id, + position: [hit.localX, hit.localY, hit.localZ], + rotation: 0, + }) + state.createNode(vent, hit.segment.id as AnyNodeId) + state.dirtyNodes.add(hit.segment.id as AnyNodeId) + setSelection({ selectedIds: [vent.id] }) + triggerSFX('sfx:item-place') + event.stopPropagation() + } + + emitter.on('roof:move', updatePreview) + emitter.on('roof:enter', updatePreview) + emitter.on('roof:click', onClick) + + return () => { + emitter.off('roof:move', updatePreview) + emitter.off('roof:enter', updatePreview) + emitter.off('roof:click', onClick) + } + }, [activeBuildingId, setSelection]) + + if (!activeBuildingId || !previewPos || !previewSurfaceQuat) return null + + return ( + + + + + + + + ) +} + +export default EyebrowVentTool diff --git a/packages/nodes/src/fence/definition.ts b/packages/nodes/src/fence/definition.ts index dc6e5fbd..36fe97bc 100644 --- a/packages/nodes/src/fence/definition.ts +++ b/packages/nodes/src/fence/definition.ts @@ -71,6 +71,9 @@ function fenceHeightHandle(): HandleDescriptor { axis: 'y', anchor: 'min', min: MIN_FENCE_HEIGHT, + // Drives the floating dimension pill (H · L · T) and suppresses the + // arrow's own inline chip, matching the wall height handle. + measureLabel: 'height', currentValue: (n) => n.height ?? 1.8, apply: (_n, newHeight) => ({ height: newHeight }), placement: { diff --git a/packages/nodes/src/fence/move-endpoint-tool.tsx b/packages/nodes/src/fence/move-endpoint-tool.tsx index 16c09e98..e13101f0 100644 --- a/packages/nodes/src/fence/move-endpoint-tool.tsx +++ b/packages/nodes/src/fence/move-endpoint-tool.tsx @@ -1,12 +1,13 @@ 'use client' -import { type FenceNode, useScene, type WallNode } from '@pascal-app/core' +import { type FenceNode, getWallCurveLength, useScene, type WallNode } from '@pascal-app/core' import { CursorSphere, type FencePlanPoint, formatAngleRadians, getAngleToSegmentReference, getSegmentAngleReferenceAtPoint, + MeasurementPill, type MovingFenceEndpoint, triggerSFX, useDragAction, @@ -90,6 +91,7 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> = : [target.fence.end[0], target.fence.end[1]] const [altPressed, setAltPressed] = useState(false) + const unit = useViewer((s) => s.unit) const exitMoveMode = (committed: boolean) => { if (committed) triggerSFX('sfx:item-place') @@ -174,9 +176,34 @@ export const MoveFenceEndpointTool: React.FC<{ target: MovingFenceEndpoint }> = const cursorPos: [number, number, number] = [movingPoint[0], 0, movingPoint[1]] + // Live segment dimensions for the floating pill. Length tracks the drag; + // height + thickness are static during an endpoint move. + const liveLength = getWallCurveLength({ + start: liveStart, + end: liveEnd, + curveOffset: liveFence?.curveOffset ?? target.fence.curveOffset, + }) + const fenceHeight = target.fence.height ?? 1.8 + const dimMidX = (liveStart[0] + liveEnd[0]) / 2 + const dimMidZ = (liveStart[1] + liveEnd[1]) / 2 + return ( + + + +} + +export type Endpoint = { + pos: readonly [number, number, number] + /** Length-axis direction in segment frame, pointing from this end toward the other end. */ + awayDir: readonly [number, number] + /** Outward normal (gutter-local +Z, "away from the building") in this frame. */ + outDir: readonly [number, number] +} + +function gutterEndpoints(g: GutterNode): { plus: Endpoint; minus: Endpoint } { + const [px, py, pz] = g.position + const r = g.rotation ?? 0 + // Gutter-local +X (length axis) rotated by `r` around Y. THREE's + // rotation-y convention: local (1, 0, 0) → (cos r, 0, −sin r). + const dirX = Math.cos(r) + const dirZ = -Math.sin(r) + // Gutter-local +Z (outward) rotated by `r`: (0, 0, 1) → (sin r, 0, cos r). + const outX = Math.sin(r) + const outZ = Math.cos(r) + const half = g.length / 2 + return { + plus: { + pos: [px + dirX * half, py, pz + dirZ * half], + // From the +X endpoint, the rest of the gutter extends back + // toward the −X end — so "away from this end" is −dir. + awayDir: [-dirX, -dirZ], + outDir: [outX, outZ], + }, + minus: { + pos: [px - dirX * half, py, pz - dirZ * half], + awayDir: [dirX, dirZ], + outDir: [outX, outZ], + }, + } +} + +/** + * Gutter endpoints lifted from segment-local into the shared ROOF frame + * by applying the host segment's position + Y-rotation. Two gutters on + * different segments can then be compared in one frame. THREE's + * rotation-y convention: a point/dir (x, z) rotates to + * (x·cos + z·sin, −x·sin + z·cos). + */ +export function gutterEndpointsInFrame( + g: GutterNode, + segment: Pick, +): { plus: Endpoint; minus: Endpoint } { + const local = gutterEndpoints(g) + const sx = segment.position?.[0] ?? 0 + const sz = segment.position?.[2] ?? 0 + const sr = segment.rotation ?? 0 + const c = Math.cos(sr) + const s = Math.sin(sr) + const liftPos = (p: readonly [number, number, number]): [number, number, number] => [ + sx + (p[0] * c + p[2] * s), + p[1], + sz + (-p[0] * s + p[2] * c), + ] + const liftDir = (d: readonly [number, number]): [number, number] => [ + d[0] * c + d[1] * s, + -d[0] * s + d[1] * c, + ] + return { + plus: { + pos: liftPos(local.plus.pos), + awayDir: liftDir(local.plus.awayDir), + outDir: liftDir(local.plus.outDir), + }, + minus: { + pos: liftPos(local.minus.pos), + awayDir: liftDir(local.minus.awayDir), + outDir: liftDir(local.minus.outDir), + }, + } +} + +// Plan-space (X/Z) distance only — deliberately ignores Y. Gutters are +// pinned to the eave line so they're coplanar in eave-Y, AND the +// renderer draws them at the LIVE `computeEaveY(segment)`, not the +// stored `position[1]` (which goes stale if the segment's wallHeight / +// pitch changed after placement). Folding Y in would reject a real +// corner whenever two gutters' stored Ys drifted apart even though they +// visibly meet. The length-snap that feeds this also works purely in +// plan, so the match must too. +export function planDistSq( + a: readonly [number, number, number], + b: readonly [number, number, number], +): number { + const dx = a[0] - b[0] + const dz = a[2] - b[2] + return dx * dx + dz * dz +} + +function mitreBetween(a: Endpoint, b: Endpoint): number { + // Both `awayDir`s point from the corner toward the FAR end of their + // gutter. The interior angle of the joint is the angle between them. + // Mitre = half the supplementary angle (standard carpenter formula). + const dot = a.awayDir[0] * b.awayDir[0] + a.awayDir[1] * b.awayDir[1] + const clamped = Math.max(-1, Math.min(1, dot)) + const interior = Math.acos(clamped) + const mitre = (Math.PI - interior) / 2 + // Aligned-or-nearly so → straight run, no mitre needed. + if (mitre < 1e-3) return 0 + + // Convex vs concave. `a.outDir` is THIS gutter's outward normal; `b`'s + // body runs from the corner along `b.awayDir`. On a CONVEX (outer) + // corner the neighbour's body sits on the INWARD side of our rim, so + // `b.awayDir · a.outDir < 0` (it heads away from our outward face) — + // the rim must EXTEND (positive). On a CONCAVE (inner) corner the + // neighbour's body sits on our OUTWARD side (`· > 0`) and the rim must + // RETRACT (negative) to the inner intersection. + const concave = b.awayDir[0] * a.outDir[0] + b.awayDir[1] * a.outDir[1] > 0 + const signed = concave ? -mitre : mitre + return Math.max(-MAX_MITRE, Math.min(MAX_MITRE, signed)) +} + +// Intersection (in plan X/Z) of two infinite length-axis lines, each +// given as a point + run direction. Returns null when the runs are +// parallel (no single crossing — a straight collinear run, not a +// corner). Mirrors the `length-snap.ts` corner solve. +function axisIntersectionXZ( + aPos: readonly [number, number, number], + aDir: readonly [number, number], + bPos: readonly [number, number, number], + bDir: readonly [number, number], +): readonly [number, number, number] | null { + const cross = aDir[0] * bDir[1] - aDir[1] * bDir[0] + if (Math.abs(cross) < AXIS_PARALLEL_EPSILON) return null + const dx = bPos[0] - aPos[0] + const dz = bPos[2] - aPos[2] + const t = (dx * bDir[1] - dz * bDir[0]) / cross + return [aPos[0] + t * aDir[0], 0, aPos[2] + t * aDir[1]] +} + +/** + * Compute mitres for `subject` against every other gutter under the + * same parent. + * + * A corner is the INTERSECTION of the two gutters' length-axis lines — + * not the proximity of their endpoints. This is what makes inner + * (concave) corners work: there the two eave drip-lines meet out in the + * notch, a full overhang away from where either gutter naturally ends, + * so an endpoint-to-endpoint test never fired. Keying off the axis + * crossing treats convex and concave identically. The length-snap pulls + * both ends out to that shared point, so by the time we mitre the + * subject's end AND the sibling's end both sit on the intersection — we + * require both to be within `CORNER_EPSILON` of it, which also rejects + * runs that merely cross in the middle (a T, not an L). + * + * First match per end wins; siblings order is the caller's, so the + * result is deterministic. + */ +export function computeGutterMitres( + subject: GutterNode, + subjectSegment: Pick, + siblings: readonly GutterWithSegment[], +): GutterMitres { + if (siblings.length === 0) return NO_MITRES + + const subj = gutterEndpointsInFrame(subject, subjectSegment) + let leftMitre = 0 + let rightMitre = 0 + + for (const sib of siblings) { + if (sib.gutter.id === subject.id) continue + const other = gutterEndpointsInFrame(sib.gutter, sib.segment) + + // `minus.awayDir` runs from the −X end toward +X, i.e. along the + // length — so it's a valid direction for either gutter's axis line. + const corner = axisIntersectionXZ( + subj.minus.pos, + subj.minus.awayDir, + other.minus.pos, + other.minus.awayDir, + ) + if (!corner) continue + + // The sibling end that sits on the corner is the one we mitre against. + const otherPlusAtCorner = planDistSq(other.plus.pos, corner) <= CORNER_EPSILON_SQ + const otherMinusAtCorner = planDistSq(other.minus.pos, corner) <= CORNER_EPSILON_SQ + if (!otherPlusAtCorner && !otherMinusAtCorner) continue + const otherEnd = otherPlusAtCorner ? other.plus : other.minus + + if (leftMitre === 0 && planDistSq(subj.minus.pos, corner) <= CORNER_EPSILON_SQ) { + leftMitre = mitreBetween(subj.minus, otherEnd) + } + if (rightMitre === 0 && planDistSq(subj.plus.pos, corner) <= CORNER_EPSILON_SQ) { + rightMitre = mitreBetween(subj.plus, otherEnd) + } + if (leftMitre !== 0 && rightMitre !== 0) break + } + + return { left: leftMitre, right: rightMitre } +} diff --git a/packages/nodes/src/gutter/definition.ts b/packages/nodes/src/gutter/definition.ts new file mode 100644 index 00000000..5818f9a2 --- /dev/null +++ b/packages/nodes/src/gutter/definition.ts @@ -0,0 +1,197 @@ +import { + GutterNode as GutterNodeSchema, + type GutterNode as GutterNodeType, + type HandleDescriptor, + type NodeDefinition, +} from '@pascal-app/core' +import { buildGutterFloorplan } from './floorplan' +import { snapLengthToCorner } from './length-snap' +import { gutterParametrics } from './parametrics' +import { GutterNode } from './schema' + +// Edge-to-arrow-center offset, matching the box-vent / ridge-vent +// cadence so a roof's worth of accessories all read at the same scale. +const SIDE_HANDLE_OFFSET = 0.2 +// Gutter chevrons sit BELOW the gutter (the trough hangs below the +// eave); the Y handle places its arrow under the cross-section apex. +const SIZE_HANDLE_OFFSET = 0.15 +// Minimums — well below the inspector defaults (2.0 m length, 0.13 m +// profile) so users can shrink freely without locking. +const MIN_LENGTH = 0.2 +const MIN_SIZE = 0.05 + +// Centre of the gutter cross-section in vertical (Y) terms. The gutter +// hangs from the eave (Y=0 in vent-mesh-local) down to Y=-size; chevrons +// that want to read "beside the body" sit at -size/2. +function getBodyMidY(n: GutterNodeType): number { + return -Math.max(MIN_SIZE, n.size) / 2 +} + +// Outward Z midpoint — the gutter's back wall sits at Z=0 and the rim +// hangs out to Z≈+size (k-style) / +size (half-round / box). Side +// handles place at Z=0 so they sit ABOVE the eave's fascia line. +function getRimZ(n: GutterNodeType): number { + return Math.max(MIN_SIZE, n.size) / 2 +} + +// Length arrow on ±X (the eave direction). Asymmetric resize: drag one +// end outward while the opposite end stays world-fixed by recentering +// `position` along the gutter's own +X arm in segment frame. Same +// yaw-aware projection as the box-vent / ridge-vent / chimney width +// handles. +// +// Corner snap: when the dragged endpoint nears the geometric corner it +// would form with another gutter (the crossing of their length axes), +// `snapLengthToCorner` overrides the raw newLength so the endpoint lands +// EXACTLY on that corner — the corner-mitre detector then fires reliably +// without pixel-perfect dragging. Only this gutter's length changes. +function gutterLengthHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'x', + anchor: side === 'right' ? 'min' : 'max', + min: MIN_LENGTH, + currentValue: (n) => n.length, + apply: (initial, newLength, sceneApi) => { + const rotY = initial.rotation ?? 0 + const armX = Math.cos(rotY) + const armZ = -Math.sin(rotY) + const anchorX = initial.position[0] - sign * (initial.length / 2) * armX + const anchorZ = initial.position[2] - sign * (initial.length / 2) * armZ + const snap = snapLengthToCorner( + initial, + newLength, + sign, + anchorX, + anchorZ, + armX, + armZ, + MIN_LENGTH, + sceneApi, + ) + // Only the dragged gutter's own length is snapped — `snapLengthToCorner` + // never moves the corner-mate, so dragging one gutter can't reset + // another the user placed deliberately. + const newCenterX = anchorX + sign * (snap.length / 2) * armX + const newCenterZ = anchorZ + sign * (snap.length / 2) * armZ + return { + length: snap.length, + position: [newCenterX, initial.position[1], newCenterZ], + } + }, + placement: { + position: (n) => [ + sign * (n.length / 2 + SIDE_HANDLE_OFFSET), + getBodyMidY(n), + getRimZ(n), + ], + rotationY: () => (side === 'right' ? 0 : Math.PI), + }, + } +} + +// Profile-size arrow below the rim. axis='y', anchor='max' pins the +// top of the trough (Y=0, the eave line) and grows the bottom edge +// downward as the user drags toward -Y. Plain chevron — at typical +// sizes (5″–6″) a dashed tracker would clutter the eave line. +function gutterSizeHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + // 'max' = +Y edge anchored (top of the trough stays at Y=0); drag + // pulls the bottom edge further down. The base linear-resize + // factor for `max` is -1, which flips the cursor delta so dragging + // downward grows the value 1:1. + anchor: 'max', + min: MIN_SIZE, + currentValue: (n) => n.size, + apply: (_n, newValue) => ({ size: Math.max(MIN_SIZE, newValue) }), + placement: { + // Sit at the bottom of the trough, pushed a bit further down so + // the chevron clears the rim and reads as a downward indicator. + position: (n) => [0, -Math.max(n.size, MIN_SIZE) - SIZE_HANDLE_OFFSET, getRimZ(n)], + }, + } +} + +const gutterHandles: HandleDescriptor[] = [ + gutterLengthHandle('right'), + gutterLengthHandle('left'), + gutterSizeHandle(), +] + +/** + * Gutter — a rain-water channel running along the eave of a roof + * segment. Parented to a `roof-segment`; position is segment-local. + * + * Three-checkbox model — same shape as box-vent / ridge-vent: custom + * `def.renderer` for the parent-segment transform lookup + live + * override merge, pure geometry builder in `./geometry` shared with + * the placement preview, no per-frame system (no animation, no + * cross-kind cascades). + * + * Placement tool snaps to the eave line (segment-local + * `Z = +depth/2, Y = wallHeight`) wherever the cursor lands on a + * segment. After commit, the length L/R handles cover trimming and + * the inspector covers profile + size adjustments. + */ +export const gutterDefinition: NodeDefinition = { + kind: 'gutter', + schemaVersion: 1, + schema: GutterNode, + category: 'structure', + surfaceRole: 'roof', + + defaults: () => { + const stub = GutterNodeSchema.parse({ + id: 'gutter_default' as never, + type: 'gutter', + }) + const { id: _id, type: _type, ...rest } = stub + return rest + }, + + capabilities: { + selectable: { hitVolume: 'bbox' }, + duplicable: true, + deletable: true, + // Mounts on a roof segment via `roofSegmentId`. Sits ON TOP of the + // eave fascia — no `buildCut`, just the dirty cascade so the + // parent roof's merged shell rebuilds when the gutter moves / + // resizes. + roofAccessory: {}, + }, + + parametrics: gutterParametrics, + handles: gutterHandles, + floorplan: buildGutterFloorplan, + + renderer: { + kind: 'parametric', + module: () => import('./renderer'), + }, + + preview: () => import('./preview'), + tool: () => import('./tool'), + affordanceTools: { + move: () => import('./move-tool'), + }, + toolHints: [ + { key: 'Left click', label: 'Place gutter on roof eave' }, + { key: 'Esc', label: 'Cancel' }, + ], + + presentation: { + label: 'Gutter', + description: 'Rain-water channel running along the eave of a roof segment.', + icon: { kind: 'url', src: '/icons/roof.png' }, + paletteSection: 'structure', + paletteOrder: 122, + }, + + mcp: { + description: + 'A gutter strip running along the eave of a roof segment. Three profiles (k-style ogee fascia, half-round, square box), length / size / thickness parametric.', + }, +} diff --git a/packages/nodes/src/gutter/downspouts-panel.tsx b/packages/nodes/src/gutter/downspouts-panel.tsx new file mode 100644 index 00000000..06cbafd0 --- /dev/null +++ b/packages/nodes/src/gutter/downspouts-panel.tsx @@ -0,0 +1,161 @@ +'use client' + +import { + type AnyNodeId, + DownspoutNode, + type DownspoutNode as DownspoutNodeType, + type GutterNode, + generateId, + type RoofSegmentNode, + useScene, +} from '@pascal-app/core' +import { ActionButton, ActionGroup, PanelSection, triggerSFX } from '@pascal-app/editor' +import { useViewer } from '@pascal-app/viewer' +import { useShallow } from 'zustand/react/shallow' +import { computeEaveY } from './eave-snap' +import { resolveGutterOutletById } from './outlet-lookup' + +const DEFAULT_OUTLET_DIAMETER = 0.07 + +/** + * Pick an along-length offset for a new outlet that doesn't land on an + * existing one: the first goes near the right end, the rest drop into + * the midpoint of the widest gap (including the gaps to each end). So + * "Add Downspout" repeatedly spreads outlets along the run instead of + * stacking them. + */ +function nextOutletOffset(gutter: GutterNode): number { + const len = Math.max(0.05, gutter.length) + const margin = 0.12 + const lo = -len / 2 + margin + const hi = len / 2 - margin + if (hi <= lo) return 0 + + const existing = (gutter.outlets ?? []) + .map((o) => Math.max(lo, Math.min(hi, o.offset ?? 0))) + .sort((a, b) => a - b) + if (existing.length === 0) return hi + + const bounds = [lo, ...existing, hi] + let bestMid = (lo + hi) / 2 + let bestGap = -1 + for (let i = 0; i < bounds.length - 1; i++) { + const gap = bounds[i + 1]! - bounds[i]! + if (gap > bestGap) { + bestGap = gap + bestMid = (bounds[i]! + bounds[i + 1]!) / 2 + } + } + return bestMid +} + +/** + * Downspouts subsection at the bottom of the gutter inspector. Lists the + * downspouts attached to this gutter (one per outlet); "Add Downspout" + * drills a fresh outlet at a spread-out position and drops a downspout + * on it, and each row's ✕ removes both the downspout and its outlet. + */ +export default function DownspoutsPanel() { + const selectedId = useViewer((s) => s.selection.selectedIds[0]) as AnyNodeId | undefined + const setSelection = useViewer((s) => s.setSelection) + + const gutter = useScene((s) => + selectedId ? (s.nodes[selectedId] as GutterNode | undefined) : undefined, + ) + + const downspouts = useScene( + useShallow((s) => { + if (!selectedId) return [] as DownspoutNodeType[] + const out: DownspoutNodeType[] = [] + for (const n of Object.values(s.nodes)) { + if (n?.type === 'downspout' && n.gutterId === selectedId) { + out.push(n as DownspoutNodeType) + } + } + return out + }), + ) + + if (!gutter || gutter.type !== 'gutter') return null + + const handleSelectDownspout = (id: AnyNodeId) => { + setSelection({ selectedIds: [id] }) + } + + const handleAddDownspout = () => { + const segmentId = gutter.roofSegmentId as AnyNodeId | undefined + if (!segmentId) return + const segment = useScene.getState().nodes[segmentId] as RoofSegmentNode | undefined + if (!segment) return + + const outletId = generateId('outlet') + const outlets = [ + ...(gutter.outlets ?? []), + { id: outletId, offset: nextOutletOffset(gutter), diameter: DEFAULT_OUTLET_DIAMETER }, + ] + const state = useScene.getState() + state.updateNode(gutter.id as AnyNodeId, { outlets }) + state.dirtyNodes.add(gutter.id as AnyNodeId) + + const outlet = resolveGutterOutletById({ ...gutter, outlets }, outletId) + const dropLength = Math.max(0.1, computeEaveY(segment) + (outlet?.y ?? -gutter.size)) + + const downspout = DownspoutNode.parse({ + name: 'Downspout', + gutterId: gutter.id, + outletId, + length: dropLength, + diameter: (outlet?.bore ?? DEFAULT_OUTLET_DIAMETER / 2) * 2, + }) + state.createNode(downspout, segmentId) + state.dirtyNodes.add(segmentId) + setSelection({ selectedIds: [downspout.id] }) + triggerSFX('sfx:item-place') + } + + const handleRemove = (downspout: DownspoutNodeType) => { + const state = useScene.getState() + // Drop the outlet this downspout drained so its hole closes up. + if (downspout.outletId) { + state.updateNode(gutter.id as AnyNodeId, { + outlets: (gutter.outlets ?? []).filter((o) => o.id !== downspout.outletId), + }) + state.dirtyNodes.add(gutter.id as AnyNodeId) + } + state.deleteNode(downspout.id as AnyNodeId) + if (gutter.roofSegmentId) state.dirtyNodes.add(gutter.roofSegmentId as AnyNodeId) + setSelection({ selectedIds: [gutter.id as AnyNodeId] }) + } + + return ( + +
+ {downspouts.map((d, i) => ( +
+ + +
+ ))} + + + +
+ + ) +} diff --git a/packages/nodes/src/gutter/eave-align.ts b/packages/nodes/src/gutter/eave-align.ts new file mode 100644 index 00000000..7ca20cbd --- /dev/null +++ b/packages/nodes/src/gutter/eave-align.ts @@ -0,0 +1,97 @@ +import type { GutterNode, RoofSegmentNode } from '@pascal-app/core' +import { CORNER_EPSILON_SQ, gutterEndpointsInFrame, planDistSq } from './corner-mitre' +import { computeEaveY } from './eave-snap' + +/** + * Shared eave-Y for a connected run of gutters. + * + * Each gutter normally derives its mount height independently from its + * own host segment via `computeEaveY` (wallHeight − overhang·tan(pitch) + * + tuck, or wallHeight on a flat deck). Two segments that read as the + * same height in the inspector can still land at different eave Ys when + * their pitch / overhang / roofType differ — so gutters that meet at a + * corner inherit two heights and the run visibly steps at the joint. + * + * This walks the connected component of gutters that meet at corners + * (same plan-space endpoint test the mitre detector uses — Y is + * deliberately ignored, so the grouping survives the very height drift + * we're correcting) and returns ONE height for the whole run: the + * HIGHEST member eave. Aligning up means no gutter ever sinks into a + * roof surface; a lower roof gets a small fascia gap, which reads + * cleaner than a gutter clipping through its slope. + * + * Deterministic + symmetric: every gutter in the run computes the same + * component and the same max, so they all converge on the identical Y + * without any shared coordinator or store write. Isolated gutters (no + * corner neighbour) get their own eave Y unchanged. + * + * Pure: no React, no scene access, no store mutation. + */ + +/** A sibling gutter paired with its FULL host segment (needs the eave-Y inputs). */ +export type GutterWithSegment = { + gutter: GutterNode + segment: RoofSegmentNode +} + +function guttersMeet( + a: GutterNode, + aSeg: RoofSegmentNode, + b: GutterNode, + bSeg: RoofSegmentNode, +): boolean { + const ea = gutterEndpointsInFrame(a, aSeg) + const eb = gutterEndpointsInFrame(b, bSeg) + return ( + planDistSq(ea.minus.pos, eb.plus.pos) <= CORNER_EPSILON_SQ || + planDistSq(ea.minus.pos, eb.minus.pos) <= CORNER_EPSILON_SQ || + planDistSq(ea.plus.pos, eb.plus.pos) <= CORNER_EPSILON_SQ || + planDistSq(ea.plus.pos, eb.minus.pos) <= CORNER_EPSILON_SQ + ) +} + +// Each gutter mounts at `segment.position[1] + computeEaveY(segment)` in +// the roof frame (the renderer adds the segment-local eave Y under the +// segment's group). Segments can sit at different Y offsets, so the run +// has to be compared — and the answer returned — in the SHARED roof +// frame, not raw segment-local eave Ys. +function worldEaveY(segment: RoofSegmentNode): number { + return (segment.position?.[1] ?? 0) + computeEaveY(segment) +} + +export function computeSharedEaveY( + subject: GutterNode, + subjectSegment: RoofSegmentNode, + siblings: readonly GutterWithSegment[], +): number { + const subjectBaseY = subjectSegment.position?.[1] ?? 0 + if (siblings.length === 0) return computeEaveY(subjectSegment) + + // Index 0 is the subject; the rest are candidates. BFS the corner + // graph from the subject and keep the tallest eave in its component. + const nodes: GutterWithSegment[] = [{ gutter: subject, segment: subjectSegment }, ...siblings] + const visited = new Array(nodes.length).fill(false) + visited[0] = true + const queue = [0] + let maxWorldEaveY = worldEaveY(subjectSegment) + + while (queue.length > 0) { + const i = queue.pop()! + const cur = nodes[i]! + for (let j = 0; j < nodes.length; j++) { + if (visited[j]) continue + const other = nodes[j]! + if (guttersMeet(cur.gutter, cur.segment, other.gutter, other.segment)) { + visited[j] = true + queue.push(j) + const eaveY = worldEaveY(other.segment) + if (eaveY > maxWorldEaveY) maxWorldEaveY = eaveY + } + } + } + + // Back to the SUBJECT's segment-local frame — the renderer applies the + // returned value under the subject segment's group, which already adds + // `subjectBaseY`. + return maxWorldEaveY - subjectBaseY +} diff --git a/packages/nodes/src/gutter/eave-snap.ts b/packages/nodes/src/gutter/eave-snap.ts new file mode 100644 index 00000000..a0daabbb --- /dev/null +++ b/packages/nodes/src/gutter/eave-snap.ts @@ -0,0 +1,167 @@ +import type { RoofSegmentNode, RoofType } from '@pascal-app/core' + +/** + * Shared eave-snap math for the gutter's placement + move tools. + * + * `resolveEaveSnap` finds the drip edge of the eave closest to a + * cursor hit in segment-local coords. It supports every roof type the + * segment renderer can produce; the difference vs the original + * `±Z`-only resolver is hip/flat awareness (4-way eave instead of 2) + * and shed's single low eave. + * + * Why this lives outside the tools: the two tool files used to inline + * an identical copy of the resolver + the tuck constants, with a + * "keep in sync" comment that becomes a landmine as soon as the + * resolver grows non-trivial. Hip's 4-way picker pushed it past that + * threshold. + */ + +// Real gutters mount on the fascia (slightly inside the drip edge), +// with the rim at the deck-top line rather than the slope-surface-at- +// drip-edge. These tuck the snap so the gutter reads as "attached to +// the fascia" rather than "floating at the very tip of the overhang". +// Tuned by feel — bump them up if the gutter looks too low / outboard. +export const EAVE_TUCK_INWARD = 0.04 +export const EAVE_TUCK_UP = 0.04 + +export type EaveSide = '+X' | '-X' | '+Z' | '-Z' + +export type EaveSnap = { + /** Segment-local X of the snapped gutter position. */ + eaveX: number + /** Segment-local Y of the snapped gutter position (drip-edge Y). */ + eaveY: number + /** Segment-local Z of the snapped gutter position. */ + eaveZ: number + /** + * Gutter's segment-local Y rotation: orients gutter's outward axis + * (+Z local) toward the side picked. Length axis (+X local) falls + * out along the eave direction (±X or ±Z depending on the side). + */ + rotation: number + /** Which side of the segment the snap landed on. */ + side: EaveSide +} + +/** + * Live eave Y from a segment's wallHeight + overhang + pitch. Pulled + * out as a shared helper because the renderer derives Y from this same + * formula on every frame (the gutter tracks the segment's height + * instead of trusting `node.position[1]` from placement time), and + * `resolveEaveSnap` uses the same formula at placement. + */ +export function computeEaveY( + segment: Pick, +): number { + const wallHeight = segment.wallHeight ?? 0 + // Flat roofs have no slope drop and no slope-surface-vs-deck-top + // offset — the deck top IS the eave line. EAVE_TUCK_UP is a + // correction that lifts a SLOPED gutter from the slope-surface up to + // the deck-top line; applying it to a flat deck floats the gutter + // above the roof and leaves a visible gap between the edge and the + // gutter. So mount flat gutters right at the deck top. + if ((segment.roofType ?? 'gable') === 'flat') return wallHeight + const overhang = segment.overhang ?? 0 + const pitchRad = ((segment.pitch ?? 0) * Math.PI) / 180 + return wallHeight - overhang * Math.tan(pitchRad) + EAVE_TUCK_UP +} + +/** + * Pick which of the segment's eaves is closest to the cursor. + * + * - `shed`: low side only. The segment-hit's analytical surface for + * a shed has `t = (lz + depth/2)/depth`, so the eave is at +Z + * regardless of which side the cursor is on — clicking on the high + * side still rolls the gutter down to the low eave. + * + * - `hip` / `flat` / `dutch`: 4-way. The slope the user is standing + * on is determined by whichever of `|lx|/halfW` or `|lz|/halfD` is + * larger — same `max(fx, fz)` discriminator the segment-hit's + * `analyticalSurfaceY` uses for hip. Sign of the dominant axis + * picks +/-. Dutch is a hip base with a gablet on top, so its + * lower run has all four eaves at the eave line — it gets the same + * 4-way snap as hip. + * + * - `gable` / `gambrel` / `mansard`: 2-way `±Z`. Mansard has real + * 4-side eaves in plan, but the segment-hit formula approximates it + * as 2-slope (depth-only), so we stay consistent here — the user + * can re-place the gutter manually on a side eave if mansard + * becomes important. + */ +function pickEaveSide( + roofType: RoofType, + localX: number, + localZ: number, + halfW: number, + halfD: number, +): EaveSide { + if (roofType === 'shed') return '+Z' + + if (roofType === 'hip' || roofType === 'flat' || roofType === 'dutch') { + const fx = halfW > 0 ? Math.abs(localX) / halfW : 0 + const fz = halfD > 0 ? Math.abs(localZ) / halfD : 0 + if (fx > fz) return localX < 0 ? '-X' : '+X' + return localZ < 0 ? '-Z' : '+Z' + } + + return localZ < 0 ? '-Z' : '+Z' +} + +export function resolveEaveSnap( + segment: RoofSegmentNode, + localX: number, + localZ: number, +): EaveSnap { + const halfW = (segment.width ?? 0) / 2 + const halfD = (segment.depth ?? 0) / 2 + const overhang = segment.overhang ?? 0 + + // The slope keeps descending past the wall edge by the overhang + // span; same drop on every eave (pitch is the segment-wide primary + // slope). EAVE_TUCK_UP raises the rim back toward the deck-top line. + // Shared formula with the renderer so placement and live tracking + // agree exactly. + const eaveY = computeEaveY(segment) + + const side = pickEaveSide(segment.roofType ?? 'gable', localX, localZ, halfW, halfD) + + // For `±Z` eaves the eave runs along ±X so the parallel axis stays + // free (snapped to cursor's X), and Z pins to the drip edge. `±X` + // eaves swap which axis is free vs pinned. Rotation aligns the + // gutter's outward (+Z local) with the picked side; length (+X + // local) then falls along the eave. + switch (side) { + case '+Z': + return { + eaveX: localX, + eaveY, + eaveZ: Math.max(halfD, halfD + overhang - EAVE_TUCK_INWARD), + rotation: 0, + side, + } + case '-Z': + return { + eaveX: localX, + eaveY, + eaveZ: -Math.max(halfD, halfD + overhang - EAVE_TUCK_INWARD), + rotation: Math.PI, + side, + } + case '+X': + return { + eaveX: Math.max(halfW, halfW + overhang - EAVE_TUCK_INWARD), + eaveY, + eaveZ: localZ, + rotation: Math.PI / 2, + side, + } + case '-X': + return { + eaveX: -Math.max(halfW, halfW + overhang - EAVE_TUCK_INWARD), + eaveY, + eaveZ: localZ, + rotation: -Math.PI / 2, + side, + } + } +} diff --git a/packages/nodes/src/gutter/floorplan.ts b/packages/nodes/src/gutter/floorplan.ts new file mode 100644 index 00000000..e292a906 --- /dev/null +++ b/packages/nodes/src/gutter/floorplan.ts @@ -0,0 +1,300 @@ +import type { + AnyNodeId, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + GutterNode, + RoofNode, + RoofSegmentNode, +} from '@pascal-app/core' +import { computeGutterMitres, type GutterWithSegment } from './corner-mitre' +import { EAVE_TUCK_INWARD } from './eave-snap' +import { outletDims, outletShapeForProfile, profileFloorMidZ } from './profile-geometry' + +/** + * Floor-plan builder for a gutter. A gutter is a thin rain-water channel + * hosted on a roof segment, running along an eave. In plan it reads as a + * narrow metal strip just outboard of the eave line: the trough (two long + * edges), end caps where the trough is closed, hanger straps across the + * run, and a downspout outlet symbol where one is fitted. + * + * The coordinate frame mirrors the 3D transform stack + * (roof → roof-segment → gutter). The gutter's `position` is + * segment-local and the segment's is roof-local, so we compose + * world = roof.pos + R(roof) · (seg.pos + R(seg) · gutter.pos) + * using the floor-plan's negated-rotation convention (see + * `buildRoofSegmentFloorplan`). Gutter-local +X is the run (along the + * eave); +Z hangs outward, away from the building. + */ +export function buildGutterFloorplan( + node: GutterNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + // Compose roof → segment → gutter in plan coords. Each rotation is + // negated so SVG's y-down CW matches Three.js' top-down CCW — the same + // convention the roof-segment builder establishes. + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const gutterRot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(gutterRot) + const sin = Math.sin(gutterRot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + const halfLen = Math.max(node.length, 0.1) / 2 + const width = Math.max(node.size, 0.05) // outward extent of the trough + + // The gutter's stored position is the eave drip edge — `halfD + overhang` + // out from the segment centre (resolveEaveSnap). The roof floor plan + // draws only the structural footprint (no overhang), so to seat the + // trough on the drawn roof edge we shift it inward by that overhang + // excess. Local Z then reads: `backZ` = back/fascia edge (on the roof + // edge), `rimZ` = outward lip. + // + // A plain inward shift would break mitred corners — the two meeting + // gutters lie on perpendicular eaves, so each shifts a different way and + // their ends part (they cross). We compensate in the corner math below + // by also retracting each MITRED end along the run by the same inset: + // the net move at a corner is then identical for both gutters, so they + // still meet — now at the structural corner. Exact for right-angle + // (hip / rectangular) corners. + const eaveInset = Math.max(0, (segment.overhang ?? 0) - EAVE_TUCK_INWARD) + const backZ = -eaveInset + const rimZ = width - eaveInset + + 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 + + // Gutters are a metal accessory — read them in a cooler grey than the + // roof's black structural ink, accent on select, light blue on hover. + const baseInk = '#475569' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const fill = showSelectedChrome ? '#fed7aa' : '#cbd5e1' + const fillOpacity = showSelectedChrome ? 0.5 : 0.4 + const lineWidth = showSelectedChrome ? 0.03 : 0.022 + + // Corner mitres — when a sibling gutter meets this one at a roof + // corner, that shared end is open: the back wall stays at the corner + // while the rim extends outward to the mitre, and the cap is + // suppressed. Mirrors the 3D builder's rule (`endCap* && mitre === 0`). + // `left` = −X end, `right` = +X end. + // + // Cross-segment: collect every other gutter on the roof paired with its + // host segment (mirrors the renderer's `mitreNodes` walk) so gutters + // meeting where two segments join still mitre, not just same-segment. + const mitreSiblings: GutterWithSegment[] = [] + for (const segId of roof.children ?? []) { + const sib = ctx.resolve(segId as AnyNodeId) as RoofSegmentNode | undefined + if (!sib || sib.type !== 'roof-segment') continue + for (const gid of sib.children ?? []) { + const g = ctx.resolve(gid as AnyNodeId) as GutterNode | undefined + if (g && g.type === 'gutter' && g.id !== node.id) { + mitreSiblings.push({ gutter: g, segment: sib }) + } + } + } + const mitres = computeGutterMitres(node, segment, mitreSiblings) + const capRight = node.endCapRight && mitres.right === 0 + const capLeft = node.endCapLeft && mitres.left === 0 + + // Footprint corners. Back edge sits on the roof edge (lz = backZ); the + // rim hangs outward (lz = rimZ). A mitred end (a) retracts along the run + // by `eaveInset` so its back corner lands on the structural corner, then + // (b) skews its rim corner by the SIGNED mitre (`Math.tan` carries the + // sign: convex extends, concave retracts) so adjacent gutters' rims meet + // at the corner. Non-mitred ends (mitre === 0) keep the full run. + const backRightX = halfLen - (mitres.right !== 0 ? eaveInset : 0) + const backLeftX = -(halfLen - (mitres.left !== 0 ? eaveInset : 0)) + const backLeft = toPlan(backLeftX, backZ) + const backRight = toPlan(backRightX, backZ) + const rimRight = toPlan(backRightX + width * Math.tan(mitres.right), rimZ) + const rimLeft = toPlan(backLeftX - width * Math.tan(mitres.left), rimZ) + + const children: FloorplanGeometry[] = [ + // Transparent hit-target across the whole channel so the thin strip + // is easy to click-select in plan. + { + kind: 'polygon', + points: [backLeft, backRight, rimRight, rimLeft], + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }, + // Channel fill. + { + kind: 'polygon', + points: [backLeft, backRight, rimRight, rimLeft], + fill, + fillOpacity, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'none', + }, + // Long edges — the back (fascia) line and the front lip. These two + // parallel lines are the gutter's signature read in plan. + { + kind: 'line', + x1: backLeft[0], + y1: backLeft[1], + x2: backRight[0], + y2: backRight[1], + stroke, + strokeWidth: lineWidth, + strokeLinecap: 'round', + pointerEvents: 'none', + }, + { + kind: 'line', + x1: rimLeft[0], + y1: rimLeft[1], + x2: rimRight[0], + y2: rimRight[1], + stroke, + strokeWidth: lineWidth, + strokeLinecap: 'round', + pointerEvents: 'none', + }, + ] + + // End edges. A capped end gets a square closure line; a mitred end gets + // the slanted mitre seam (so the joint shows in plan); an open, uncapped + // end gets nothing. `cap*` already excludes mitred ends, so an end never + // draws both a cap and a seam. + if (capLeft || mitres.left !== 0) { + children.push({ + kind: 'line', + x1: backLeft[0], + y1: backLeft[1], + x2: rimLeft[0], + y2: rimLeft[1], + stroke, + strokeWidth: lineWidth, + strokeLinecap: 'round', + pointerEvents: 'none', + }) + } + if (capRight || mitres.right !== 0) { + children.push({ + kind: 'line', + x1: backRight[0], + y1: backRight[1], + x2: rimRight[0], + y2: rimRight[1], + stroke, + strokeWidth: lineWidth, + strokeLinecap: 'round', + pointerEvents: 'none', + }) + } + + // Hanger straps — short ticks across the trough at the real hanger + // spacing, so the strip reads as a gutter rather than a thin wall. + if (node.hangerStyle === 'strap') { + const spacing = Math.max(node.hangerSpacing, 0.2) + const inset = width * 0.15 + // Span the (possibly retracted) run between the two end corners. + const mid = (backLeftX + backRightX) / 2 + const runLen = backRightX - backLeftX + const count = Math.max(1, Math.floor(runLen / spacing)) + const span = count * spacing + for (let i = 0; i < count; i++) { + const x = mid - span / 2 + spacing / 2 + i * spacing + if (x <= backLeftX + 0.02 || x >= backRightX - 0.02) continue + const a = toPlan(x, backZ + inset) + const b = toPlan(x, rimZ - inset) + children.push({ + kind: 'line', + x1: a[0], + y1: a[1], + x2: b[0], + y2: b[1], + stroke, + strokeWidth: lineWidth * 0.7, + strokeLinecap: 'round', + opacity: 0.6, + pointerEvents: 'none', + }) + } + } + + // Downspout outlets — a leader symbol per outlet (round for half-round + // gutters, rectangular for k-style / box, following the profile) at each + // outlet's along-run position. The strongest "this is a gutter" cue in a + // roof plan. `offset` is signed from the gutter centre along +X. + // `outlets` is a recent schema addition — gutters persisted before it + // existed deserialize without the field (the schema default only fills + // on a fresh parse), so guard against `undefined`. + const outlets = node.outlets ?? [] + if (outlets.length > 0) { + const floorZ = Math.min( + Math.max(profileFloorMidZ(node.profile, width), width * 0.25), + width * 0.85, + ) + const outletZ = backZ + floorZ + const shape = outletShapeForProfile(node.profile) + const outStroke = showSelectedChrome && palette ? palette.selectedStroke : '#1e293b' + for (const outlet of outlets) { + // Clamp inside the run so the symbol never rides out onto a cap line + // (the 3D builder clamps the drill the same way). + const outletX = Math.max(-halfLen * 0.9, Math.min(halfLen * 0.9, outlet.offset)) + const dims = outletDims(shape, outlet.diameter) + if (shape === 'round') { + const center = toPlan(outletX, outletZ) + children.push({ + kind: 'circle', + cx: center[0], + cy: center[1], + r: Math.max(dims.halfX, 0.03), + fill: 'none', + stroke: outStroke, + strokeWidth: lineWidth, + pointerEvents: 'none', + }) + } else { + children.push({ + kind: 'polygon', + points: [ + toPlan(outletX - dims.halfX, outletZ - dims.halfZ), + toPlan(outletX + dims.halfX, outletZ - dims.halfZ), + toPlan(outletX + dims.halfX, outletZ + dims.halfZ), + toPlan(outletX - dims.halfX, outletZ + dims.halfZ), + ], + fill: 'none', + stroke: outStroke, + strokeWidth: lineWidth, + pointerEvents: 'none', + }) + } + } + } + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/gutter/geometry.ts b/packages/nodes/src/gutter/geometry.ts new file mode 100644 index 00000000..f030cbbc --- /dev/null +++ b/packages/nodes/src/gutter/geometry.ts @@ -0,0 +1,634 @@ +import type { GutterNode } from '@pascal-app/core' +import { + Brush, + csgEvaluator, + csgGeometry, + prepareBrushForCSG, + SUBTRACTION, +} from '@pascal-app/viewer' +import * as THREE from 'three' +import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js' +import { type GutterMitres, NO_MITRES } from './corner-mitre' +import { + OUTLET_STUB_LENGTH, + OUTLET_WALL_THICKNESS, + type OutletDims, + type OutletShape, + outletDims, + outletShapeForProfile, + profileFloorMidZ, +} from './profile-geometry' + +/** + * Pure builder for the gutter mesh. The gutter is a hollow trough that + * runs along the eave; we build its cross-section as a closed 2D Shape + * in the (Z, Y) plane with the channel cavity carved out as a Path + * hole, then extrude along the gutter's local +X (length direction). + * + * Three profiles share the same outer-outline-minus-cavity recipe; they + * differ only in the OUTLINE shape: + * + * - `k-style`: flat back + flat bottom + ogee (S-curve) fascia. + * Most common modern residential profile. + * - `half-round`: half-cylinder (semicircle cross-section). + * - `box`: square / rectangular u-channel; reads as commercial. + * + * The gutter mounts at the eave line (gutter-local Y=0) and drops + * downward (negative Y) by `size`. +Z is "away from the building" — + * positive Z is the outer face that hangs over the eave. + * + * End caps: when `endCapLeft` / `endCapRight` is true, the matching + * end gets a thin SOLID slice (depth = wall thickness) instead of the + * hollow U-channel. The solid slice's end face closes the trough so + * water can't run out the side. Caps subtract from the user-set + * `length` so the gutter's total span stays constant — capping doesn't + * silently grow the geometry past what the inspector reads. + * + * Corner mitres: when a sibling gutter meets this gutter at a roof + * corner, the corner-mitre detector passes a mitre angle for the + * affected end. The end-face vertices are skewed (back wall held in + * place, front rim extended outward) so two perpendicular gutters' + * front rims meet at the outer eave intersection. A mitred end's cap + * is force-suppressed — capping a corner would wall off the L. + * + * Pure: no React, no scene access, no store mutation. + */ +export function buildGutterGeometry( + node: GutterNode, + mitres: GutterMitres = NO_MITRES, +): THREE.BufferGeometry { + const len = Math.max(0.05, node.length) + const size = Math.max(0.04, node.size) + const t = Math.min(Math.max(0.001, node.thickness), size * 0.4) + + const capLeft = (node.endCapLeft ?? true) && mitres.left === 0 + const capRight = (node.endCapRight ?? true) && mitres.right === 0 + + // Reserve cap slices at each capped end. Each cap is `t` thick + // (matches the wall thickness — a real end cap is a stamped plate + // welded onto the gutter). Clamp so a tiny gutter doesn't end up + // all-cap-no-channel. + const reserved = (capLeft ? t : 0) + (capRight ? t : 0) + const channelLen = Math.max(len * 0.1, len - reserved) + const totalCap = len - channelLen + const capLeftLen = capLeft ? (capRight ? totalCap / 2 : totalCap) : 0 + const capRightLen = capRight ? (capLeft ? totalCap / 2 : totalCap) : 0 + + let channelCross: THREE.Shape + let capCross: THREE.Shape + if (node.profile === 'half-round') { + channelCross = buildHalfRoundCross(size, t) + capCross = buildHalfRoundOuterOnly(size) + } else if (node.profile === 'box') { + channelCross = buildBoxCross(size, t) + capCross = buildBoxOuterOnly(size) + } else { + channelCross = buildKStyleCross(size, t) + capCross = buildKStyleOuterOnly(size) + } + + // Each extrude below uses the same orient-and-recenter recipe: + // ExtrudeGeometry produces (mesh-X = cross-X, mesh-Y = cross-Y, + // mesh-Z = extrusion axis); we rotateY(-π/2) so the LENGTH lands + // along mesh-+X and the OUTWARD direction lands along mesh-+Z, then + // translate so the piece sits in its slot of the gutter's overall + // [-len/2, +len/2] span. Z_cs = 0 maps to mesh-+X (right end); + // Z_cs = depth maps to mesh--X (left end). + const pieces: THREE.BufferGeometry[] = [] + + let channel: THREE.BufferGeometry = new THREE.ExtrudeGeometry(channelCross, { + depth: channelLen, + bevelEnabled: false, + curveSegments: 16, + steps: 1, + }) + // Apply the corner-mitre skew while we're still in the source frame. + // Source axes (pre-rotation): X_cs = outward, Y_cs = vertical, + // Z_cs = length (0 at right end of mesh, `channelLen` at left end). + // After rotateY(-π/2): mesh-X = -Z_cs, mesh-Z = X_cs. + // + // Corner mitre rule: the back wall (X_cs = 0) stays at the original + // end (mesh-X = ±len/2); the front rim (X_cs = +outward) is SKEWED + // along the gutter's length to reach the eave intersection of the L. + // The mitre is SIGNED — positive (convex / outer corner) extends the + // rim past the end; negative (concave / inner corner) retracts it to + // the inner intersection. `Math.tan` carries the sign, so the same + // formula handles both. In mesh coords: + // right end: Δmesh-X = +mesh-Z · tan(mitreRight) + // left end: Δmesh-X = −mesh-Z · tan(mitreLeft) + // Mapped back to source coords (Δmesh-X = −ΔZ_cs, mesh-Z = X_cs): + // right end (Z_cs = 0): new Z_cs = −X_cs · tan(mitreRight) + // left end (Z_cs = channelLen): new Z_cs = channelLen + X_cs · tan(mitreLeft) + if (mitres.right !== 0 || mitres.left !== 0) { + // Drop the cross-section CAP at each mitred end first. Both gutters + // at a corner skew their end faces onto the SAME mitre plane, so the + // thin metal-section caps land coincident and z-fight into the stray + // seam lines visible at the joint (and the ink-edge pass outlines + // them). With the caps gone the open troughs flow into each other and + // the side walls carry the corner — a clean seam. Done before the + // skew so the end planes are still the clean z=0 / z=channelLen. + const stripped = stripEndCaps(channel, channelLen, mitres.right !== 0, mitres.left !== 0) + channel.dispose() + channel = stripped + + const tanRight = Math.tan(mitres.right) + const tanLeft = Math.tan(mitres.left) + const eps = 1e-5 + const pos = channel.attributes.position! + for (let i = 0; i < pos.count; i++) { + const x = pos.getX(i) + const z = pos.getZ(i) + if (mitres.right !== 0 && Math.abs(z) < eps) { + pos.setZ(i, -x * tanRight) + } else if (mitres.left !== 0 && Math.abs(z - channelLen) < eps) { + pos.setZ(i, channelLen + x * tanLeft) + } + } + pos.needsUpdate = true + channel.computeVertexNormals() + } + channel.rotateY(-Math.PI / 2) + // Channel spans [-len/2 + capLeftLen, +len/2 - capRightLen]: shift + // the recentered extrude so its right end butts against the right cap. + channel.translate(len / 2 - capRightLen, 0, 0) + pieces.push(channel) + + if (capLeft) { + const leftCap = new THREE.ExtrudeGeometry(capCross, { + depth: capLeftLen, + bevelEnabled: false, + curveSegments: 16, + steps: 1, + }) + leftCap.rotateY(-Math.PI / 2) + // Left cap spans [-len/2, -len/2 + capLeftLen]: translate by + // -len/2 + capLeftLen so Z_cs=0 (mesh-+X end of the cap slice) + // sits at -len/2 + capLeftLen and Z_cs=depth at -len/2. + leftCap.translate(-len / 2 + capLeftLen, 0, 0) + pieces.push(leftCap) + } + + if (capRight) { + const rightCap = new THREE.ExtrudeGeometry(capCross, { + depth: capRightLen, + bevelEnabled: false, + curveSegments: 16, + steps: 1, + }) + rightCap.rotateY(-Math.PI / 2) + // Right cap spans [+len/2 - capRightLen, +len/2]. + rightCap.translate(len / 2, 0, 0) + pieces.push(rightCap) + } + + // Hangers: thin metal straps spanning the rim from the back wall to + // the front rim, repeated along the length. Each strap is a small + // box centered on Y=0 (the eave line, where the rim sits) with its + // top ~3mm above the rim — so it reads as a clip resting on the + // gutter rather than buried in it. + if ((node.hangerStyle ?? 'strap') !== 'none') { + for (const hanger of buildHangers(node, len, size, capLeftLen, capRightLen, mitres)) { + pieces.push(hanger) + } + } + + // Downspout outlets: short drop-tube collars hanging off the gutter + // floor at each outlet's position. Each collar is solid at the outer + // (bore + wall) cross-section; the bore is then drilled through both + // the floor and the collar via CSG, so the result is a real hole in + // the trough floor and a hollow tube descending from it. CSG only + // runs when at least one outlet exists — an empty `outlets` keeps the + // fast merge path. + const placements = resolveOutletPlacements(node, len, size, capLeftLen, capRightLen) + for (const p of placements) { + pieces.push(buildOutletStub(p, size)) + // Flared funnel lip at the floor so the drop reads as a real drop + // outlet rather than a bare tube; the same bore drill cuts it open. + pieces.push(buildOutletFunnel(p, size)) + } + + const merged = pieces.length === 1 ? pieces[0]! : (mergeGeometries(pieces, false) ?? pieces[0]!) + // Free the intermediate pieces when merge returned a new geometry. + if (merged !== pieces[0]) { + for (const p of pieces) p.dispose() + } + merged.computeVertexNormals() + + // CSG drill — punches each bore through the merged geometry. Runs + // last so the floor + collars are already in one mesh; each drill + // cuts both at once, subtracted sequentially. + if (placements.length > 0) { + let workingBrush = new Brush(merged) + prepareBrushForCSG(workingBrush) + for (const p of placements) { + const drill = buildOutletDrill(p, size) + const drillBrush = new Brush(drill) + prepareBrushForCSG(drillBrush) + const next = csgEvaluator.evaluate(workingBrush, drillBrush, SUBTRACTION) as Brush + // Free the previous step's intermediate result (but not `merged`, + // which is disposed once below). + if (workingBrush.geometry !== merged) workingBrush.geometry.dispose() + workingBrush = next + drill.dispose() + } + const cutGeometry = csgGeometry(workingBrush) + merged.dispose() + return cutGeometry + } + + return merged +} + +// Remove the extrude's cross-section CAP triangles at a mitred end so two +// gutters meeting at a corner don't leave coincident, z-fighting end +// faces (the seam lines at the joint). A cap triangle is one whose three +// vertices ALL lie on an end plane — z≈0 (right end) or z≈channelLen +// (left end). Wall triangles always span the two planes, so this cleanly +// separates caps from walls without depending on ExtrudeGeometry's +// internal vertex order. Input is non-indexed (ExtrudeGeometry), so every +// three positions is one triangle; we copy through the survivors and let +// the caller recompute normals. +function stripEndCaps( + geo: THREE.BufferGeometry, + channelLen: number, + removeRight: boolean, + removeLeft: boolean, +): THREE.BufferGeometry { + const src = geo.index ? geo.toNonIndexed() : geo + const pos = src.attributes.position! + const uv = src.attributes.uv + const eps = 1e-4 + const keepPos: number[] = [] + const keepUv: number[] | null = uv ? [] : null + const triCount = Math.floor(pos.count / 3) + for (let t = 0; t < triCount; t++) { + const a = t * 3 + const za = pos.getZ(a) + const zb = pos.getZ(a + 1) + const zc = pos.getZ(a + 2) + const allRight = Math.abs(za) < eps && Math.abs(zb) < eps && Math.abs(zc) < eps + const allLeft = + Math.abs(za - channelLen) < eps && + Math.abs(zb - channelLen) < eps && + Math.abs(zc - channelLen) < eps + if ((removeRight && allRight) || (removeLeft && allLeft)) continue + for (let k = 0; k < 3; k++) { + const idx = a + k + keepPos.push(pos.getX(idx), pos.getY(idx), pos.getZ(idx)) + if (keepUv && uv) keepUv.push(uv.getX(idx), uv.getY(idx)) + } + } + if (src !== geo) src.dispose() + const out = new THREE.BufferGeometry() + out.setAttribute('position', new THREE.Float32BufferAttribute(keepPos, 3)) + if (keepUv) out.setAttribute('uv', new THREE.Float32BufferAttribute(keepUv, 2)) + return out +} + +// Each cross-section below is authored as a single closed polygon that +// traces the U-channel's MATERIAL — outer wall down → bottom → outer +// wall up → rim across → inner wall down → inner bottom → inner wall +// up → closing rim. The interior of the U (where rainwater sits) is +// empty space, not a hole — so the extrude has an OPEN TOP, which is +// what makes the geometry read as a gutter rather than a sealed box +// with a tunnel through it. +// +// Cross-section authoring frame: X is the gutter's outward direction +// (X=0 against the fascia, X=+w hanging outward); Y is vertical (Y=0 +// at the eave line, Y=-size at the bottom of the trough). After the +// rotateY(-π/2) in the parent builder, +X maps to segment-outward (+Z) +// and the extrude axis (length) maps to segment-+X. + +function buildKStyleCross(size: number, t: number): THREE.Shape { + const wBot = size * 0.8 // bottom outer width — narrower than the rim + const wTop = size * 0.95 + const ogeeY = -size * 0.65 // S-curve inflection on the fascia + + const shape = new THREE.Shape() + // Outer trace — top-back → down the back → across the bottom → up + // the ogee fascia. + shape.moveTo(0, 0) + shape.lineTo(0, -size) + shape.lineTo(wBot, -size) + shape.bezierCurveTo(wBot + size * 0.15, ogeeY, wTop - size * 0.15, ogeeY * 0.4, wTop, 0) + // Front rim (thin top of the front wall): step inward by `t`. + shape.lineTo(wTop - t, 0) + // Inner trace — back down the ogee, across the inner bottom, up the + // inner back wall. Same bezier control points pushed inward by `t`. + shape.bezierCurveTo( + wTop - size * 0.15 - t, + ogeeY * 0.4, + wBot + size * 0.15 - t, + ogeeY, + wBot - t, + -size + t, + ) + shape.lineTo(t, -size + t) + shape.lineTo(t, 0) + // closePath draws the back rim (t, 0) → (0, 0) — the thin top of + // the back wall, sealing the cross-section. + shape.closePath() + return shape +} + +// Half-round trough — a semicircular cross-section with a smaller +// concentric semicircle carved out. Single closed trace: outer half +// from (0,0) sweeping down and back up to (2r, 0), front rim across by +// `t`, inner half from (2r-t, 0) sweeping back to (t, 0), back rim +// closes the loop. +function buildHalfRoundCross(size: number, t: number): THREE.Shape { + const r = size // radius == size: half-circle drops `size` below the eave + const ri = r - t // inner radius + const segs = 24 + + const shape = new THREE.Shape() + shape.moveTo(0, 0) + // Outer semicircle, lower half (angle π → 2π). At i=0 we'd be at + // (0,0) — already there from moveTo — so start at i=1. + for (let i = 1; i <= segs; i++) { + const angle = Math.PI + (Math.PI * i) / segs + shape.lineTo(r + r * Math.cos(angle), r * Math.sin(angle)) + } + // Front rim — step inward by `t` to start the inner trace. + shape.lineTo(2 * r - t, 0) + // Inner semicircle, traced BACK toward the back wall (angle 2π → π). + for (let i = 1; i <= segs; i++) { + const angle = 2 * Math.PI - (Math.PI * i) / segs + shape.lineTo(r + ri * Math.cos(angle), ri * Math.sin(angle)) + } + // closePath draws (t, 0) → (0, 0) — back rim. + shape.closePath() + return shape +} + +// Square / rectangular box U-channel. Width equals size (deep-and- +// narrow ratio reads as commercial). Traced as outer rect → front rim +// → inner rect (reverse) → back rim. +function buildBoxCross(size: number, t: number): THREE.Shape { + const w = size + + const shape = new THREE.Shape() + shape.moveTo(0, 0) + shape.lineTo(0, -size) + shape.lineTo(w, -size) + shape.lineTo(w, 0) + // Front rim. + shape.lineTo(w - t, 0) + // Inner rect, reversed so the polygon doesn't self-intersect. + shape.lineTo(w - t, -size + t) + shape.lineTo(t, -size + t) + shape.lineTo(t, 0) + // closePath draws the back rim (t, 0) → (0, 0). + shape.closePath() + return shape +} + +// Solid-outer outlines used for the end-cap slices: same outer +// boundary as the channel cross-sections above but without the inner +// trough carved out, so the extruded slice is a solid plug that closes +// the open end of the trough. + +function buildKStyleOuterOnly(size: number): THREE.Shape { + const wBot = size * 0.8 + const wTop = size * 0.95 + const ogeeY = -size * 0.65 + + const shape = new THREE.Shape() + shape.moveTo(0, 0) + shape.lineTo(0, -size) + shape.lineTo(wBot, -size) + shape.bezierCurveTo(wBot + size * 0.15, ogeeY, wTop - size * 0.15, ogeeY * 0.4, wTop, 0) + // closePath draws (wTop, 0) → (0, 0) — the cap's rim line across + // the top of the gutter cross-section. + shape.closePath() + return shape +} + +function buildHalfRoundOuterOnly(size: number): THREE.Shape { + const r = size + const segs = 24 + + const shape = new THREE.Shape() + shape.moveTo(0, 0) + for (let i = 1; i <= segs; i++) { + const angle = Math.PI + (Math.PI * i) / segs + shape.lineTo(r + r * Math.cos(angle), r * Math.sin(angle)) + } + shape.closePath() + return shape +} + +function buildBoxOuterOnly(size: number): THREE.Shape { + const w = size + + const shape = new THREE.Shape() + shape.moveTo(0, 0) + shape.lineTo(0, -size) + shape.lineTo(w, -size) + shape.lineTo(w, 0) + shape.closePath() + return shape +} + +// ─── Hangers ─────────────────────────────────────────────────────── + +// Strap dimensions — a residential hidden hanger reads as a flat band +// roughly 25mm wide along the gutter, 3mm thick, sitting on the rim. +const HANGER_BAR_LEN = 0.025 +const HANGER_BAR_THICKNESS = 0.003 +// Extra spread past the rim's outward extent — so the strap looks like +// it "wraps over" both edges rather than ending flush. +const HANGER_OVERHANG = 0.005 +// Distance from each gutter end where a strap is allowed to sit; keeps +// straps from clashing with end caps and from looking pinned to the +// very edge. +const HANGER_END_MARGIN = 0.05 + +/** Outward Z extent of each profile, used to size the strap. */ +function profileRimWidth(profile: GutterNode['profile'], size: number): number { + if (profile === 'half-round') return 2 * size + if (profile === 'box') return size + return size * 0.95 // k-style wTop +} + +function buildHangers( + node: GutterNode, + len: number, + size: number, + capLeftLen: number, + capRightLen: number, + mitres: GutterMitres, +): THREE.BufferGeometry[] { + const spacing = Math.max(0.2, node.hangerSpacing ?? 0.6) + const profile = node.profile ?? 'k-style' + const rimWidth = profileRimWidth(profile, size) + const strapDepth = rimWidth + HANGER_OVERHANG * 2 + + // At an INNER (concave) corner the two gutters' troughs fold into the + // same notch, so a strap sitting near that end overlaps the neighbour + // gutter's end strap — the two perpendicular straps read as an X across + // the corner. Pull the run's bound back by a full strap depth at a + // concave end so the nearest strap clears the joint. OUTER (convex) + // corners diverge outward and never overlap, so they keep the tight + // margin (`mitre > 0` and non-mitred ends → no extra inset). + const concaveInset = (mitre: number) => (mitre < 0 ? strapDepth : 0) + + // Inset by margin AND any cap so straps don't punch into the cap slab, + // plus the concave-corner clearance above. + const leftBound = -len / 2 + capLeftLen + HANGER_END_MARGIN + concaveInset(mitres.left) + const rightBound = len / 2 - capRightLen - HANGER_END_MARGIN - concaveInset(mitres.right) + const usable = rightBound - leftBound + if (usable <= 0) return [] + + // Span the usable run with straps at `spacing` between centers, plus + // one at each end. Symmetric layout for any length, including very + // short gutters where two straps land at the bounds. + const count = Math.max(1, Math.floor(usable / spacing) + 1) + const stride = count > 1 ? usable / (count - 1) : 0 + + const pieces: THREE.BufferGeometry[] = [] + for (let i = 0; i < count; i++) { + const x = count > 1 ? leftBound + i * stride : (leftBound + rightBound) / 2 + // BoxGeometry is indexed; the channel + cap ExtrudeGeometries are + // not. `mergeGeometries` rejects mixed-index sets, so flatten the + // box to non-indexed before pushing. + const bar = new THREE.BoxGeometry( + HANGER_BAR_LEN, + HANGER_BAR_THICKNESS, + strapDepth, + ).toNonIndexed() + // Center the bar at X = position, Y just above the rim line, Z + // straddling 0 so the strap covers the full back-to-front span. + bar.translate(x, HANGER_BAR_THICKNESS / 2 + 0.001, rimWidth / 2) + pieces.push(bar) + } + return pieces +} + +// ─── Outlet ──────────────────────────────────────────────────────── + +// Radial subdivisions — 24 reads as smooth at typical outlet +// diameters; lower and the 3″ tube starts looking faceted from below. +const OUTLET_RADIAL_SEGMENTS = 24 +// Drill overshoot past the floor and past the stub bottom — keeps the +// CSG cut planes from coinciding with merged-geometry surfaces +// (coplanar cuts produce degenerate output in three-bvh-csg). +const OUTLET_DRILL_OVERSHOOT = 0.01 +// Funnel lip at the drop outlet — flares this much wider than the collar +// over this height, just below the trough floor. The bore drill cuts it +// open along with the collar. +const OUTLET_FLARE_SCALE = 1.6 +const OUTLET_FLARE_HEIGHT = 0.02 + +type OutletPlacement = { + x: number + z: number + shape: OutletShape + /** Bore cross-section (the drilled hole). */ + inner: OutletDims + /** Collar cross-section (bore + wall) — the solid stub body. */ + outer: OutletDims +} + +/** + * One placement per `node.outlets` entry that fits between the caps. The + * shape follows the gutter profile (`outletShapeForProfile`): round + * leader on half-round, rectangular on k-style / box. Each outlet's + * `offset` (signed from center) is clamped inside the trough-floor span + * using the OUTER along-length half-extent so the collar can't poke into + * a cap. Outlets that can't fit at all are dropped. + */ +function resolveOutletPlacements( + node: GutterNode, + len: number, + size: number, + capLeftLen: number, + capRightLen: number, +): OutletPlacement[] { + const outlets = node.outlets ?? [] + if (outlets.length === 0) return [] + + const shape = outletShapeForProfile(node.profile) + const z = profileFloorMidZ(node.profile ?? 'k-style', size) + const placements: OutletPlacement[] = [] + for (const outlet of outlets) { + const inner = outletDims(shape, outlet.diameter ?? 0.07) + const outer: OutletDims = { + shape, + halfX: inner.halfX + OUTLET_WALL_THICKNESS, + halfZ: inner.halfZ + OUTLET_WALL_THICKNESS, + } + const minX = -len / 2 + capLeftLen + outer.halfX + const maxX = len / 2 - capRightLen - outer.halfX + if (maxX <= minX) continue + const x = Math.max(minX, Math.min(maxX, outlet.offset ?? 0)) + placements.push({ x, z, shape, inner, outer }) + } + return placements +} + +/** Cylinder (round) or box (rect) sized to `dims`, height `h` along Y. */ +function outletSolid(dims: OutletDims, h: number): THREE.BufferGeometry { + if (dims.shape === 'round') { + return new THREE.CylinderGeometry( + dims.halfX, + dims.halfX, + h, + OUTLET_RADIAL_SEGMENTS, + ).toNonIndexed() + } + return new THREE.BoxGeometry(2 * dims.halfX, h, 2 * dims.halfZ).toNonIndexed() +} + +/** + * Solid collar at the OUTER cross-section; the CSG drill hollows out the + * bore and leaves a tube wall. Top sits flush with the gutter floor + * (Y = −size). Flattened to match the ExtrudeGeometries. + */ +function buildOutletStub(p: OutletPlacement, size: number): THREE.BufferGeometry { + const stub = outletSolid(p.outer, OUTLET_STUB_LENGTH) + stub.translate(p.x, -size - OUTLET_STUB_LENGTH / 2, p.z) + return stub +} + +/** + * Flared funnel lip just below the trough floor — wide at the floor, + * tapering to the collar below (round → a cone; rect → a stepped wider + * lip). Sits in the bore drill's span so it gets cut open too. + */ +function buildOutletFunnel(p: OutletPlacement, size: number): THREE.BufferGeometry { + const centerY = -size - OUTLET_FLARE_HEIGHT / 2 + let funnel: THREE.BufferGeometry + if (p.shape === 'round') { + funnel = new THREE.CylinderGeometry( + p.outer.halfX * OUTLET_FLARE_SCALE, + p.outer.halfX, + OUTLET_FLARE_HEIGHT, + OUTLET_RADIAL_SEGMENTS, + ).toNonIndexed() + } else { + funnel = new THREE.BoxGeometry( + 2 * p.outer.halfX * OUTLET_FLARE_SCALE, + OUTLET_FLARE_HEIGHT, + 2 * p.outer.halfZ * OUTLET_FLARE_SCALE, + ).toNonIndexed() + } + funnel.translate(p.x, centerY, p.z) + return funnel +} + +/** + * Bore drill — spans from slightly above the trough floor to slightly + * below the collar's bottom; the overshoots keep CSG cut planes from + * sitting coplanar with merged-geometry faces. + */ +function buildOutletDrill(p: OutletPlacement, size: number): THREE.BufferGeometry { + const top = -size + OUTLET_DRILL_OVERSHOOT + const bottom = -size - OUTLET_STUB_LENGTH - OUTLET_DRILL_OVERSHOOT + const height = top - bottom + const centerY = (top + bottom) / 2 + + const drill = outletSolid(p.inner, height) + drill.translate(p.x, centerY, p.z) + return drill +} diff --git a/packages/nodes/src/gutter/index.ts b/packages/nodes/src/gutter/index.ts new file mode 100644 index 00000000..cf870cf3 --- /dev/null +++ b/packages/nodes/src/gutter/index.ts @@ -0,0 +1,3 @@ +export { gutterDefinition } from './definition' +export { buildGutterGeometry } from './geometry' +export { GutterNode } from './schema' diff --git a/packages/nodes/src/gutter/length-snap.ts b/packages/nodes/src/gutter/length-snap.ts new file mode 100644 index 00000000..95177a8d --- /dev/null +++ b/packages/nodes/src/gutter/length-snap.ts @@ -0,0 +1,217 @@ +import type { AnyNodeId, GutterNode, RoofSegmentNode, SceneApi } from '@pascal-app/core' + +/** + * Length-handle snap. When the user drags a gutter's ±X length handle + * and the proposed endpoint lands within `SNAP_RADIUS` of the geometric + * CORNER it would form with another gutter — the intersection of their + * two length-axis lines — the dragged gutter's length is pulled so its + * end lands exactly on that corner. The corner-mitre detector's match + * window then fires reliably without a pixel-perfect drag. + * + * ONLY the dragged gutter moves. The corner is the axis crossing — a + * fixed point in plan, independent of where the other gutter currently + * ends — so each gutter snaps onto the SAME shared corner on its own as + * it's dragged in, and the L meets there without ever reaching over to + * reposition a gutter the user placed deliberately. (An earlier version + * adjusted both gutters at once; that yanked an already-placed gutter + * whenever its corner-mate was dragged, which is the bug this avoids.) + * + * Cross-segment: the search covers every gutter under the SAME ROOF + * (not just the dragged gutter's segment-mates), and all the geometry + * runs in the shared ROOF frame — each gutter's endpoints are lifted + * out of its own segment-local frame by that segment's position + + * Y-rotation. So an L-shaped plan whose two eaves live on different + * roof segments snaps + mitres at the corner where the segments meet, + * exactly like a same-segment hip corner (which is the degenerate case + * where both gutters share one segment transform). + * + * Pure: no React, no THREE. Reads through SceneApi; returns the snapped + * length for the caller to apply. + */ + +// 10 cm catch radius — wide enough that the user doesn't need pixel- +// perfect dragging, narrow enough that unrelated gutters on the +// opposite eave don't accidentally bind. +const SNAP_RADIUS = 0.1 +const SNAP_RADIUS_SQ = SNAP_RADIUS * SNAP_RADIUS + +// Cross product below this counts as parallel axes — no intersection, +// fall back to snapping A onto B's current endpoint without modifying B. +const AXIS_PARALLEL_EPSILON = 1e-3 + +// How far a corner-mate's own nearer endpoint may sit from the corner +// and still bind the dragged gutter to it. The corner is the crossing +// of the two axis LINES, which can lie well beyond where a gutter ends — +// at an inner/concave corner the mate's end is a full eave overhang +// short of the crossing, so the bound has to clear a generous overhang. +// It also stops a far perpendicular gutter, whose infinite axis happens +// to cross near the dragged end, from binding by coincidence: a real +// corner-mate is within reach, an unrelated run is metres away. +const CORNER_MATE_REACH = 1.5 +const CORNER_MATE_REACH_SQ = CORNER_MATE_REACH * CORNER_MATE_REACH + +export type GutterLengthSnap = { + /** Length to apply to the dragged gutter. */ + length: number +} + +/** + * @param initial gutter at drag start (rotation, length, position) + * @param proposedLength length the linear-resize pipeline computed + * @param sign +1 for the gutter-local +X end being dragged, −1 for −X + * @param anchorX,anchorZ the held-fixed endpoint (opposite of `sign`) + * @param armX,armZ gutter +X direction in segment frame (cos r, −sin r) + * @param minLength floor — typically the descriptor's `min` value + * @param sceneApi scene access for corner-mate lookup + */ +export function snapLengthToCorner( + initial: GutterNode, + proposedLength: number, + sign: 1 | -1, + anchorX: number, + anchorZ: number, + armX: number, + armZ: number, + minLength: number, + sceneApi: SceneApi, +): GutterLengthSnap { + const segmentId = initial.roofSegmentId as AnyNodeId | undefined + if (!segmentId) return { length: proposedLength } + const seg = sceneApi.get(segmentId) + if (!seg) return { length: proposedLength } + + // Everything runs in the ROOF frame so gutters on different segments + // can meet. The dragged gutter's anchor/arm come in segment-local + // (the caller computes them from `initial`); lift them into the roof + // frame with the dragged segment's transform. + const selfTf = segmentTransform(seg) + const anchorR = applyTf(selfTf, anchorX, anchorZ) + const armR = applyTfDir(selfTf, armX, armZ) + const aAnchorX = anchorR.x + const aAnchorZ = anchorR.z + const aArmX = armR.x + const aArmZ = armR.z + + const proposedEndX = aAnchorX + sign * proposedLength * aArmX + const proposedEndZ = aAnchorZ + sign * proposedLength * aArmZ + + // Candidate gutters: every gutter under the SAME ROOF, each carrying + // its own segment's roof-frame transform. + type Cand = { gutter: GutterNode; tf: SegmentTransform } + const candidates: Cand[] = [] + const roofId = seg.parentId as AnyNodeId | undefined + const roof = roofId ? sceneApi.get(roofId) : undefined + const roofChildren = (roof as { children?: readonly string[] } | undefined)?.children + for (const sid of roofChildren ?? []) { + const s = sceneApi.get(sid as AnyNodeId) + if (!s || s.type !== 'roof-segment') continue + const tf = segmentTransform(s) + for (const gid of s.children ?? []) { + const g = sceneApi.get(gid as AnyNodeId) + if (g?.type === 'gutter' && g.id !== initial.id) { + candidates.push({ gutter: g as GutterNode, tf }) + } + } + } + + // Find the corner-mate whose CORNER with the dragged gutter lands + // closest to the proposed dragged endpoint. The corner is the + // intersection of the two length-axis LINES (roof frame) — NOT the + // proximity of the two endpoints. That distinction is what unlocks + // inner/concave corners: there the two eave drip-lines meet out in the + // notch, a full overhang away from where either gutter naturally ends, + // so the old endpoint-to-endpoint catch never fired. Keying off the + // axis crossing treats convex and concave identically. Parallel axes + // (a straight collinear run) have no crossing, so there we fall back to + // the mate's nearer endpoint (flush join). Only the dragged gutter's + // own length is snapped to the corner — the mate is never moved. + let bestTargetX = 0 + let bestTargetZ = 0 + let bestDistSq = SNAP_RADIUS_SQ + let found = false + + for (const { gutter: mateG, tf } of candidates) { + const mateRot = mateG.rotation ?? 0 + const arm = applyTfDir(tf, Math.cos(mateRot), -Math.sin(mateRot)) + const mateHalf = mateG.length / 2 + const center = applyTf(tf, mateG.position[0], mateG.position[2]) + const plusX = center.x + arm.x * mateHalf + const plusZ = center.z + arm.z * mateHalf + const minusX = center.x - arm.x * mateHalf + const minusZ = center.z - arm.z * mateHalf + + // Corner target T: axis intersection when the runs cross, else the + // mate's endpoint nearest the dragged end (collinear extension). + const crossDirs = aArmX * arm.z - aArmZ * arm.x + let targetX: number + let targetZ: number + if (Math.abs(crossDirs) < AXIS_PARALLEL_EPSILON) { + const dPlus = (plusX - proposedEndX) ** 2 + (plusZ - proposedEndZ) ** 2 + const dMinus = (minusX - proposedEndX) ** 2 + (minusZ - proposedEndZ) ** 2 + if (dPlus <= dMinus) { + targetX = plusX + targetZ = plusZ + } else { + targetX = minusX + targetZ = minusZ + } + } else { + const dx = center.x - aAnchorX + const dz = center.z - aAnchorZ + const t = (dx * arm.z - dz * arm.x) / crossDirs + targetX = aAnchorX + t * aArmX + targetZ = aAnchorZ + t * aArmZ + } + + // Reject a mate whose own ends are nowhere near the crossing — its + // infinite axis lines up by coincidence, it's not a real corner-mate. + const dPlusT = (plusX - targetX) ** 2 + (plusZ - targetZ) ** 2 + const dMinusT = (minusX - targetX) ** 2 + (minusZ - targetZ) ** 2 + if (Math.min(dPlusT, dMinusT) > CORNER_MATE_REACH_SQ) continue + + const score = (targetX - proposedEndX) ** 2 + (targetZ - proposedEndZ) ** 2 + if (score < bestDistSq) { + bestDistSq = score + bestTargetX = targetX + bestTargetZ = targetZ + found = true + } + } + + if (!found) return { length: proposedLength } + + // Snap the dragged gutter's own end onto the corner: project + // (corner − anchor) onto its roof-frame axis. Length is frame-invariant + // (a scalar along the run), so the projection is the same in roof or + // segment frame — no need to map back. The mate is left untouched. + const projected = sign * ((bestTargetX - aAnchorX) * aArmX + (bestTargetZ - aAnchorZ) * aArmZ) + return { length: Math.max(minLength, projected) } +} + +// ─── Segment-frame ↔ roof-frame transform ──────────────────────────── +// +// A segment places its children at `seg.position` rotated by +// `seg.rotation` about +Y. THREE's rotation-y convention: a point +// (x, z) maps to (x·cos + z·sin, −x·sin + z·cos). These helpers lift a +// gutter's segment-local X/Z into the shared roof frame and back so two +// gutters on different segments can be compared in one frame. + +type SegmentTransform = { x: number; z: number; cos: number; sin: number } + +function segmentTransform(seg: Pick): SegmentTransform { + const r = seg.rotation ?? 0 + return { + x: seg.position?.[0] ?? 0, + z: seg.position?.[2] ?? 0, + cos: Math.cos(r), + sin: Math.sin(r), + } +} + +function applyTf(tf: SegmentTransform, x: number, z: number): { x: number; z: number } { + return { x: tf.x + (x * tf.cos + z * tf.sin), z: tf.z + (-x * tf.sin + z * tf.cos) } +} + +function applyTfDir(tf: SegmentTransform, x: number, z: number): { x: number; z: number } { + return { x: x * tf.cos + z * tf.sin, z: -x * tf.sin + z * tf.cos } +} diff --git a/packages/nodes/src/gutter/move-tool.tsx b/packages/nodes/src/gutter/move-tool.tsx new file mode 100644 index 00000000..a2813fc4 --- /dev/null +++ b/packages/nodes/src/gutter/move-tool.tsx @@ -0,0 +1,225 @@ +'use client' + +import { + type AnyNodeId, + emitter, + type GutterNode, + type RoofEvent, + type RoofNode, + type RoofSegmentNode, + sceneRegistry, + useScene, +} 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 { type EaveSnap, resolveEaveSnap } from './eave-snap' +import GutterPreview from './preview' + +type PreviewTarget = { + roof: { position: [number, number, number]; rotation: number } + segment: { position: [number, number, number]; rotation: number } + snap: EaveSnap +} + +/** + * Gutter move tool. Mirrors the ridge-vent move flow — ghost follows + * the cursor over any roof segment, click commits the new position + + * parent segment in one undoable step. The eave-snap math from the + * placement tool runs again on the new segment so the gutter lands on + * the correct side of the new ridge. + * + * On commit the gutter rotation may flip from 0 ↔ π if the user moves + * it from the front eave to the back eave (or vice versa). The + * pre-drag rotation is restored on cancel. + * + * Ghost transform: mirrors the GutterRenderer chain (roof → segment → + * snap), so the cursor preview lands at the exact world coords the + * commit will store. GutterPreview applies no internal rotation, so + * the gutter's CURRENT `rotation` doesn't bleed into the new snap. + */ +export default function MoveGutterTool({ node }: { node: GutterNode }) { + const exitMoveMode = useCallback(() => { + useEditor.getState().setMovingNode(null) + }, []) + + const [target, setTarget] = useState(null) + + useEffect(() => { + useScene.temporal.getState().pause() + + const original = { + position: [...node.position] as [number, number, number], + rotation: node.rotation ?? 0, + roofSegmentId: node.roofSegmentId, + parentId: node.parentId, + metadata: node.metadata, + } + const meta = + typeof node.metadata === 'object' && node.metadata !== null + ? (node.metadata as Record) + : {} + const isNew = !!meta.isNew + + const gutterObj = sceneRegistry.nodes.get(node.id) + if (gutterObj) gutterObj.visible = false + + let lastSnap: [number, number] | null = null + + 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 + + // 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 sx = Math.round(snap.eaveX * 20) / 20 + const sz = Math.round(snap.eaveZ * 20) / 20 + if (!lastSnap || lastSnap[0] !== sx || lastSnap[1] !== sz) { + triggerSFX('sfx:grid-snap') + lastSnap = [sx, sz] + } + + setTarget({ + roof: { + position: (roof.position ?? [0, 0, 0]) as [number, number, number], + rotation: roof.rotation ?? 0, + }, + segment: { + position: (hit.segment.position ?? [0, 0, 0]) as [number, number, number], + rotation: hit.segment.rotation ?? 0, + }, + snap, + }) + 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 snap = resolveEaveSnap(hit.segment, hit.localX, hit.localZ) + const st = useScene.getState() + + const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined + if (prevSegmentId && prevSegmentId !== targetSegmentId) { + const oldSeg = st.nodes[prevSegmentId] as RoofSegmentNode | undefined + if (oldSeg) { + st.updateNode(prevSegmentId, { + children: (oldSeg.children ?? []).filter((id) => id !== node.id), + }) + } + const newSeg = st.nodes[targetSegmentId] as RoofSegmentNode | undefined + if (newSeg && !(newSeg.children ?? []).includes(node.id)) { + st.updateNode(targetSegmentId, { + children: [...(newSeg.children ?? []), node.id], + }) + } + st.dirtyNodes.add(prevSegmentId) + } + + useScene.temporal.getState().resume() + st.updateNode(node.id as AnyNodeId, { + roofSegmentId: targetSegmentId, + parentId: targetSegmentId, + position: [snap.eaveX, snap.eaveY, snap.eaveZ], + rotation: snap.rotation, + visible: true, + metadata: {}, + }) + useScene.temporal.getState().pause() + + st.dirtyNodes.add(targetSegmentId) + st.dirtyNodes.add(node.id as AnyNodeId) + + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + + triggerSFX('sfx:item-place') + exitMoveMode() + event.stopPropagation() + } + + const onCancel = () => { + if (isNew) { + const parentId = original.roofSegmentId as AnyNodeId | undefined + if (parentId) { + const parent = useScene.getState().nodes[parentId] as RoofSegmentNode | undefined + if (parent) { + useScene.getState().updateNode(parentId, { + children: (parent.children ?? []).filter((id) => id !== node.id), + }) + } + } + useScene.getState().deleteNode(node.id as AnyNodeId) + useScene.temporal.getState().resume() + markToolCancelConsumed() + exitMoveMode() + return + } + + useScene.getState().updateNode(node.id as AnyNodeId, { + position: original.position, + rotation: original.rotation, + roofSegmentId: original.roofSegmentId as AnyNodeId | undefined, + parentId: original.parentId as AnyNodeId | undefined, + metadata: original.metadata, + }) + if (original.roofSegmentId) { + useScene.getState().dirtyNodes.add(original.roofSegmentId as AnyNodeId) + } + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + + useScene.temporal.getState().resume() + markToolCancelConsumed() + exitMoveMode() + } + + emitter.on('roof:move', updatePreview) + emitter.on('roof:enter', updatePreview) + emitter.on('roof:click', onRoofClick) + emitter.on('tool:cancel', onCancel) + + return () => { + emitter.off('roof:move', updatePreview) + emitter.off('roof:enter', updatePreview) + emitter.off('roof:click', onRoofClick) + emitter.off('tool:cancel', onCancel) + + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + useScene.temporal.getState().resume() + } + }, [exitMoveMode, node]) + + if (!target) return null + + return ( + + + + + + + + ) +} diff --git a/packages/nodes/src/gutter/outlet-lookup.ts b/packages/nodes/src/gutter/outlet-lookup.ts new file mode 100644 index 00000000..e2ea7243 --- /dev/null +++ b/packages/nodes/src/gutter/outlet-lookup.ts @@ -0,0 +1,107 @@ +import type { GutterNode, GutterOutlet } from '@pascal-app/core' +import { + OUTLET_WALL_THICKNESS, + type OutletShape, + outletDims, + outletShapeForProfile, + profileFloorMidZ, +} from './profile-geometry' + +/** + * Outlet position lookup — used by the downspout (renderer / tool / + * routing) to mount a pipe at one of the gutter's outlets without + * walking the gutter's geometry pipeline. + * + * Returns the outlet's center in GUTTER-MESH-LOCAL frame (i.e. after + * the gutter's own `position` + `rotation` have already been applied + * by the renderer chain): X is along the gutter length, Y is the + * gutter's vertical extent (−size, the trough floor), Z is outward + * (the profile-dependent floor midpoint). + * + * The clamp mirrors the geometry's `resolveOutletPlacements` so the + * lookup and the drilled hole agree on X. Ignores mitres — when a + * gutter end is mitred its cap collapses, which shifts the clamp bound + * by ≤ 6 mm; the drift is below what reads visually, and the gutter's + * own CSG drill still cuts in the exact spot since it sees the full + * mitre context. + */ + +export type GutterOutletPlacement = { + /** Gutter-mesh-local X — along the length axis, signed from center. */ + x: number + /** Gutter-mesh-local Y — the trough floor at −size. */ + y: number + /** Gutter-mesh-local Z — profile-dependent floor midpoint. */ + z: number + /** Nominal bore radius (= halfX); `bore * 2` is the outlet diameter. */ + bore: number + /** Outlet cross-section — round on half-round, rect on k-style / box. */ + shape: OutletShape + /** Bore half-extent along the gutter length (X) — the pipe nests just inside this. */ + innerHalfX: number + /** Bore half-extent outward (Z) — the pipe nests just inside this. */ + innerHalfZ: number +} + +function placeOutlet( + gutter: GutterNode, + outlet: GutterOutlet, + len: number, + size: number, + t: number, +): GutterOutletPlacement | null { + const shape = outletShapeForProfile(gutter.profile) + const inner = outletDims(shape, outlet.diameter ?? 0.07) + const outerHalfX = inner.halfX + OUTLET_WALL_THICKNESS + + // Default-cap reservation — no mitre awareness here; see header note. + const capLeftLen = (gutter.endCapLeft ?? true) ? t : 0 + const capRightLen = (gutter.endCapRight ?? true) ? t : 0 + + const minX = -len / 2 + capLeftLen + outerHalfX + const maxX = len / 2 - capRightLen - outerHalfX + if (maxX <= minX) return null + const x = Math.max(minX, Math.min(maxX, outlet.offset ?? 0)) + + return { + x, + y: -size, + z: profileFloorMidZ(gutter.profile ?? 'k-style', size), + bore: inner.halfX, + shape, + innerHalfX: inner.halfX, + innerHalfZ: inner.halfZ, + } +} + +function gutterDims(gutter: GutterNode): { len: number; size: number; t: number } { + const len = Math.max(0.05, gutter.length) + const size = Math.max(0.04, gutter.size) + const t = Math.min(Math.max(0.001, gutter.thickness), size * 0.4) + return { len, size, t } +} + +/** Placement of the gutter's outlet with the given id, or null if absent / doesn't fit. */ +export function resolveGutterOutletById( + gutter: GutterNode, + outletId: string | undefined, +): GutterOutletPlacement | null { + if (!outletId) return null + const outlet = (gutter.outlets ?? []).find((o) => o.id === outletId) + if (!outlet) return null + const { len, size, t } = gutterDims(gutter) + return placeOutlet(gutter, outlet, len, size, t) +} + +/** Placements for every fitting outlet, tagged with its id. */ +export function resolveGutterOutlets( + gutter: GutterNode, +): Array { + const { len, size, t } = gutterDims(gutter) + const out: Array = [] + for (const outlet of gutter.outlets ?? []) { + const p = placeOutlet(gutter, outlet, len, size, t) + if (p) out.push({ ...p, id: outlet.id }) + } + return out +} diff --git a/packages/nodes/src/gutter/parametrics.ts b/packages/nodes/src/gutter/parametrics.ts new file mode 100644 index 00000000..6ecc6cde --- /dev/null +++ b/packages/nodes/src/gutter/parametrics.ts @@ -0,0 +1,65 @@ +import type { ParametricDescriptor } from '@pascal-app/core' +import type { GutterNode } from './schema' + +export const gutterParametrics: ParametricDescriptor = { + groups: [ + { + label: 'Profile', + fields: [ + { + key: 'profile', + kind: 'enum', + options: ['k-style', 'half-round', 'box'], + display: 'segmented', + }, + ], + }, + { + label: 'Dimensions', + fields: [ + { key: 'length', kind: 'number', unit: 'm', min: 0.2, max: 12, step: 0.05 }, + { key: 'size', kind: 'number', unit: 'm', min: 0.05, max: 0.3, step: 0.005 }, + { + key: 'thickness', + kind: 'number', + unit: 'm', + min: 0.001, + max: 0.02, + step: 0.001, + }, + ], + }, + { + label: 'End caps', + fields: [ + { key: 'endCapLeft', kind: 'boolean' }, + { key: 'endCapRight', kind: 'boolean' }, + ], + }, + { + label: 'Hangers', + fields: [ + { + key: 'hangerStyle', + kind: 'enum', + options: ['strap', 'none'], + display: 'segmented', + }, + { + key: 'hangerSpacing', + kind: 'number', + unit: 'm', + min: 0.2, + max: 2.0, + step: 0.05, + visibleIf: (n) => (n.hangerStyle ?? 'strap') !== 'none', + }, + ], + }, + ], + // Lazy-loaded section that lists every downspout attached to this + // gutter and offers an Add button at the bottom. Outlets are created + // and removed through this panel (and the downspout placement tool) — + // one outlet per downspout — so there's no separate outlet field group. + trailingSection: () => import('./downspouts-panel'), +} diff --git a/packages/nodes/src/gutter/preview.tsx b/packages/nodes/src/gutter/preview.tsx new file mode 100644 index 00000000..60496d50 --- /dev/null +++ b/packages/nodes/src/gutter/preview.tsx @@ -0,0 +1,82 @@ +'use client' + +import { useEffect, useMemo } from 'react' +import * as THREE from 'three' +import { buildGutterGeometry } from './geometry' +import type { GutterNode } from './schema' + +/** + * Translucent ghost of a gutter — built from the same `buildGutterGeometry` + * the renderer commits, so the shape on screen during placement is the + * shape that lands on click. + * + * No internal transform wrapper. Callers (placement tool + move tool) + * mirror the GutterRenderer's transform chain around this component + * (roof → segment → snap), so the ghost shares one bulletproof chain + * with the committed mesh instead of a flattened-yaw shortcut that can + * drift in edge cases. + * + * FrontSide matches the renderer; DoubleSide would render the inside + * of the trough walls and visually thicken the ghost relative to the + * placed gutter. + */ +const GutterPreview = ({ node }: { node: GutterNode }) => { + const geometry = useMemo( + () => buildGutterGeometry(node), + [ + node.length, + node.size, + node.thickness, + node.profile, + node.endCapLeft, + node.endCapRight, + node.hangerStyle, + node.hangerSpacing, + JSON.stringify(node.outlets), + ], + ) + + const material = useMemo( + () => + new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + emissive: 0xff_ff_ff, + emissiveIntensity: 0.12, + roughness: 0.7, + metalness: 0.2, + transparent: true, + opacity: 0.55, + depthWrite: false, + side: THREE.FrontSide, + }), + [], + ) + + const edgesGeometry = useMemo(() => new THREE.EdgesGeometry(geometry, 25), [geometry]) + + useEffect( + () => () => { + geometry.dispose() + edgesGeometry.dispose() + material.dispose() + }, + [geometry, edgesGeometry, material], + ) + + return ( + <> + {}} + /> + + + + + ) +} + +export default GutterPreview diff --git a/packages/nodes/src/gutter/profile-geometry.ts b/packages/nodes/src/gutter/profile-geometry.ts new file mode 100644 index 00000000..f2a81b56 --- /dev/null +++ b/packages/nodes/src/gutter/profile-geometry.ts @@ -0,0 +1,73 @@ +import type { GutterNode } from '@pascal-app/core' + +/** + * Shared outlet/profile geometry constants + math used by the gutter + * mesh builder, the outlet lookup the downspout mounts against, and the + * downspout's own routing. Kept in one place so the trough-floor probe + * and the collar dimensions can't drift between the three call sites + * (they did before this file — `profileFloorMidZ` was copied verbatim + * into both `geometry.ts` and `outlet-lookup.ts`). + */ + +// Wall thickness of the drop-tube collar — 3 mm matches typical +// residential gauge. After the CSG drill the stub becomes a tube with +// outer radius = bore + wall and inner radius = bore. +export const OUTLET_WALL_THICKNESS = 0.003 + +// Collar length — how far the drop-tube stub hangs below the trough +// floor. 6 cm reads as "drop outlet" without poking conspicuously far +// below the eave; the downspout slip-fits up into this collar. +export const OUTLET_STUB_LENGTH = 0.06 + +/** + * Z (outward) coordinate of the trough floor's midpoint per profile — + * where a drop outlet drills through. k-style bottom is `wBot = 0.8 · + * size` wide so its midpoint sits at `0.4 · size`; box bottom is `size` + * wide → `size / 2`; half-round's lowest point is the centre of the + * semicircle at Z = r = size. + */ +export function profileFloorMidZ(profile: GutterNode['profile'], size: number): number { + if (profile === 'half-round') return size + if (profile === 'box') return size / 2 + return size * 0.4 +} + +// ─── Outlet cross-section shape ────────────────────────────────────── + +export type OutletShape = 'round' | 'rect' + +/** + * Which cross-section a gutter's drop outlet (and the downspout that + * plugs into it) takes. Half-round gutters use a round leader; the + * flat-bottomed profiles (k-style, box) use a rectangular one — matching + * real residential hardware (round leaders on half-round, 2×3 / 3×4 + * rectangular leaders on k-style / commercial box). + */ +export function outletShapeForProfile(profile: GutterNode['profile']): OutletShape { + return (profile ?? 'k-style') === 'half-round' ? 'round' : 'rect' +} + +// Outward (Z) depth of a rectangular outlet as a fraction of its +// along-length (X) width — a 2×3 leader is ~0.66; 0.7 reads cleanly and +// still fits inside the k-style trough floor. +export const RECT_OUTLET_DEPTH_RATIO = 0.7 + +export type OutletDims = { + shape: OutletShape + /** Half-extent along the gutter length (X). Round: = radius. */ + halfX: number + /** Half-extent outward (Z). Round: = radius. */ + halfZ: number +} + +/** + * Cross-section half-extents for a `nominalDiameter`-sized outlet of the + * given shape. Round → a circle of that diameter (halfX = halfZ = + * radius); rect → that diameter wide along the run, `RECT_OUTLET_DEPTH_ + * RATIO` as deep outward. + */ +export function outletDims(shape: OutletShape, nominalDiameter: number): OutletDims { + const half = Math.max(0.01, nominalDiameter / 2) + if (shape === 'round') return { shape, halfX: half, halfZ: half } + return { shape, halfX: half, halfZ: half * RECT_OUTLET_DEPTH_RATIO } +} diff --git a/packages/nodes/src/gutter/renderer.tsx b/packages/nodes/src/gutter/renderer.tsx new file mode 100644 index 00000000..76827e52 --- /dev/null +++ b/packages/nodes/src/gutter/renderer.tsx @@ -0,0 +1,244 @@ +'use client' + +import { + type AnyNodeId, + type GutterNode, + type RoofSegmentNode, + useLiveNodeOverrides, + useRegistry, + useScene, +} from '@pascal-app/core' +import { + type ColorPreset, + createMaterial, + createMaterialFromPresetRef, + createSurfaceRoleMaterial, + useNodeEvents, + useViewer, +} from '@pascal-app/viewer' +import { useEffect, useMemo, useRef } from 'react' +import * as THREE from 'three' +import { useShallow } from 'zustand/react/shallow' +import { computeGutterMitres, type GutterWithSegment, NO_MITRES } from './corner-mitre' +import { computeSharedEaveY } from './eave-align' +import { computeEaveY } from './eave-snap' +import { buildGutterGeometry } from './geometry' + +const defaultMaterial = new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + roughness: 0.7, + metalness: 0.25, +}) + +/** + * Gutter renderer. Mounts at the eave of the host roof-segment — the + * gutter hangs level off the eave line (gravity wins; no slope tilt). + * Transform stack: + * + * segment.position → segment.rotation (Y) → gutter.position + * → gutter.rotation (Y) → mesh + * + * The registered ref sits on the inner group that applies position + + * rotation, so `NodeArrowHandles` reads gutter-mesh-local coords for + * its chevron placements (same pattern as ridge-vent). + * + * `useLiveNodeOverrides` merges in-flight handle drags onto the store + * node so the mesh tracks the drag without flushing zustand each + * frame. + */ +const GutterRenderer = ({ node: storeNode }: { node: GutterNode }) => { + const ref = useRef(null!) + useRegistry(storeNode.id, 'gutter', ref) + const handlers = useNodeEvents(storeNode, 'gutter') + const shading = useViewer((s) => s.shading) + const textures = useViewer((s) => s.textures) + const colorPreset: ColorPreset = useViewer((s) => s.colorPreset) + const sceneTheme = useViewer((s) => s.sceneTheme) + + const overrides = useLiveNodeOverrides( + (s) => s.get(storeNode.id as AnyNodeId) as Partial | undefined, + ) + const node: GutterNode = overrides ? ({ ...storeNode, ...overrides } as GutterNode) : storeNode + + const segment = useScene((state) => + node.roofSegmentId + ? (state.nodes[node.roofSegmentId as AnyNodeId] as RoofSegmentNode | undefined) + : undefined, + ) + + // While the user is dragging the segment's wall-height / overhang / + // pitch handle, the drag pipeline writes to useLiveNodeOverrides + // instead of the scene store — the scene entry above stays at the + // pre-drag value until pointer-up. Subscribing to the segment's live + // overrides too lets the gutter's `computeEaveY` see the in-flight + // height and slide up/down on every frame of the drag. + const segmentOverrides = useLiveNodeOverrides((s) => + node.roofSegmentId + ? (s.get(node.roofSegmentId as AnyNodeId) as Partial | undefined) + : undefined, + ) + const effectiveSegment: RoofSegmentNode | undefined = segment + ? segmentOverrides + ? ({ ...segment, ...segmentOverrides } as RoofSegmentNode) + : segment + : undefined + + // Corner-mitre inputs: every other gutter under the SAME ROOF, plus + // the roof's segments (for the frame lift). A flat array of node refs + // keeps `useShallow` stable — it only re-renders when one of those + // nodes actually changes. Cross-segment so gutters on different + // segments mitre where their segments meet (the mitres useMemo pairs + // each gutter back to its segment). + const mitreNodes = useScene( + useShallow((state) => { + const segmentId = node.roofSegmentId as AnyNodeId | undefined + const seg = segmentId ? (state.nodes[segmentId] as RoofSegmentNode | undefined) : undefined + const roofId = seg?.parentId as AnyNodeId | undefined + const roof = roofId + ? (state.nodes[roofId] as { children?: readonly string[] } | undefined) + : undefined + if (!roof) return [] as (GutterNode | RoofSegmentNode)[] + const out: (GutterNode | RoofSegmentNode)[] = [] + for (const sid of roof.children ?? []) { + const s = state.nodes[sid as AnyNodeId] + if (s?.type !== 'roof-segment') continue + out.push(s as RoofSegmentNode) + for (const gid of (s as RoofSegmentNode).children ?? []) { + const g = state.nodes[gid as AnyNodeId] + if (g?.type === 'gutter' && g.id !== storeNode.id) out.push(g as GutterNode) + } + } + return out + }), + ) + + // Mitres AND the run's shared eave height come from the same sibling + // walk: both key off which gutters meet at corners. `siblings` carries + // the FULL host segment (the alignment needs wallHeight / overhang / + // pitch / roofType to derive each eave Y), which is a superset of what + // the mitre detector reads — so one list feeds both. + const { mitres, sharedEaveY } = useMemo(() => { + if (!effectiveSegment) return { mitres: NO_MITRES, sharedEaveY: undefined } + const segById = new Map() + for (const n of mitreNodes) { + if (n.type === 'roof-segment') segById.set(n.id, n as RoofSegmentNode) + } + const siblings: GutterWithSegment[] = [] + for (const n of mitreNodes) { + if (n.type !== 'gutter') continue + const g = n as GutterNode + const seg = g.roofSegmentId ? segById.get(g.roofSegmentId) : undefined + if (seg) siblings.push({ gutter: g, segment: seg }) + } + return { + mitres: computeGutterMitres(node, effectiveSegment, siblings), + // `siblings` is typed for the mitre detector (position/rotation), + // but the segment objects are the full RoofSegmentNodes from + // `mitreNodes`, so `computeSharedEaveY` gets the eave-Y inputs it + // needs at runtime. + sharedEaveY: computeSharedEaveY( + node, + effectiveSegment, + siblings as unknown as Parameters[2], + ), + } + }, [ + node.position[0], + node.position[1], + node.position[2], + node.rotation, + node.length, + effectiveSegment?.position?.[0], + effectiveSegment?.position?.[2], + effectiveSegment?.rotation, + effectiveSegment?.wallHeight, + effectiveSegment?.overhang, + effectiveSegment?.pitch, + effectiveSegment?.roofType, + mitreNodes, + ]) + + const geometry = useMemo( + () => buildGutterGeometry(node, mitres), + [ + node.length, + node.size, + node.thickness, + node.profile, + node.endCapLeft, + node.endCapRight, + node.hangerStyle, + node.hangerSpacing, + // Value-compare the outlets array so the CSG drills only rebuild + // when an outlet's offset / diameter changes or one is added. + JSON.stringify(node.outlets), + mitres.left, + mitres.right, + ], + ) + useEffect(() => () => geometry.dispose(), [geometry]) + + // Paint surface: explicit material wins, then preset, then the cached + // default. FrontSide everywhere — DoubleSide on any NodeMaterial inside + // the MRT scenePass compiles a back-face shader variant that doesn't + // declare outputs for every MRT target and poisons the render context + // (see `materials.ts` line 77, and the glazing FrontSide fix in + // 9400f1c5). The U-channel cross-section in `geometry.ts` is traced as + // a single closed polygon around the material — both the exterior shell + // and the interior trough walls are part of the same outward-wound + // boundary, so ExtrudeGeometry produces outward-facing normals on every + // visible face. FrontSide is therefore sufficient and DoubleSide is not + // needed. + const material = useMemo(() => { + if (!textures || (!node.material && !node.materialPreset)) { + return createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme) + } + return node.material + ? createMaterial(node.material, shading) + : (createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial) + }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]) + + if (!segment || !effectiveSegment) return null + + // `node.position` is segment-local — the placement tool resolves the + // eave click via `segObj.worldToLocal`. The renderer mounts under + // `roof-elements` (only the roof transform inherited), so we + // re-apply the segment's roof-local transform here. Mirrors the + // ridge-vent / box-vent pattern; without this gutters on rotated + // segments would land on the first segment instead. + // + // Y is derived live from `effectiveSegment` (scene + drag overrides) + // instead of trusting `node.position[1]` — so changing wallHeight, + // overhang, or pitch on the parent segment moves the gutter on the + // very next frame, including while a segment-height handle is + // mid-drag. Matches the chimney/box-vent pattern of pulling host- + // segment geometry at draw time rather than caching it at placement. + const segPos = segment.position ?? [0, 0, 0] + const segRotY = segment.rotation ?? 0 + // Prefer the connected run's shared height (aligns gutters meeting at + // a corner whose segments derive different eave Ys); fall back to this + // segment's own eave Y for an isolated gutter. + const liveEaveY = sharedEaveY ?? computeEaveY(effectiveSegment) + + return ( + + + + + + ) +} + +export default GutterRenderer diff --git a/packages/nodes/src/gutter/schema.ts b/packages/nodes/src/gutter/schema.ts new file mode 100644 index 00000000..537926e7 --- /dev/null +++ b/packages/nodes/src/gutter/schema.ts @@ -0,0 +1,3 @@ +// Schema lives in core (referenced by the AnyNode union). Re-export so +// every gutter-related import stays inside @pascal-app/nodes/gutter. +export { GutterNode } from '@pascal-app/core' diff --git a/packages/nodes/src/gutter/tool.tsx b/packages/nodes/src/gutter/tool.tsx new file mode 100644 index 00000000..f2066e09 --- /dev/null +++ b/packages/nodes/src/gutter/tool.tsx @@ -0,0 +1,161 @@ +'use client' + +import { + type AnyNodeId, + emitter, + GutterNode, + type RoofEvent, + type RoofNode, + useScene, +} from '@pascal-app/core' +import { triggerSFX } from '@pascal-app/editor' +import { useViewer } from '@pascal-app/viewer' +import { useEffect, useMemo, useRef, useState } from 'react' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' +import { gutterDefinition } from './definition' +import { type EaveSnap, resolveEaveSnap } from './eave-snap' +import GutterPreview from './preview' + +type PreviewTarget = { + roof: { position: [number, number, number]; rotation: number } + segment: { position: [number, number, number]; rotation: number } + snap: EaveSnap +} + +/** + * Gutter placement tool. Cursor preview snaps to the OUTER eave — the + * drip edge of the roof, NOT the wall line. The eave sits at + * `Z = ±(depth/2 + overhang)` in segment-local frame; the gutter + * mounts against the fascia there, hanging outward from the building. + * + * Which eave: `eave-snap.ts` picks the side closest to the cursor + * (roof-type aware — 4-way for hip/flat, low side only for shed, ±Z + * for the rest) and returns the segment-local snap pose. The same + * snap drives the ghost AND the commit, so picking-up + putting-down + * land at identical world coordinates. + * + * Ghost transform: we mount the GutterPreview under the exact same + * chain the GutterRenderer applies — roof.position + roof.rotation → + * segment.position + segment.rotation → snap.eave + snap.rotation. + * No `worldToBuildingLocal` + `previewYaw`-sum shortcut: that + * collapses three Y rotations into one scalar and converts world + * coords back into building-local, which is mathematically + * equivalent for pure-Y stacks but drifts under any future non-Y + * roof/segment transform. Sharing the renderer's chain means the + * ghost and the placed mesh are guaranteed pixel-identical. + */ +const GutterTool = () => { + const activeBuildingId = useViewer((s) => s.selection.buildingId) + const setSelection = useViewer((s) => s.setSelection) + + const [target, setTarget] = useState(null) + const lastSnapRef = useRef<[number, number] | null>(null) + + const previewNode = useMemo( + () => + GutterNode.parse({ + ...gutterDefinition.defaults(), + name: 'Gutter', + position: [0, 0, 0], + rotation: 0, + }), + [], + ) + + useEffect(() => { + if (!activeBuildingId) return + + 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 snap = resolveEaveSnap(hit.segment, hit.localX, hit.localZ) + + // Grid-snap chime fires when the segment-local snap moves to a + // new 5 cm cell along the eave — keeps SFX in lockstep with what + // the commit will actually store. + const sx = Math.round(snap.eaveX * 20) / 20 + const sz = Math.round(snap.eaveZ * 20) / 20 + const prev = lastSnapRef.current + if (!prev || prev[0] !== sx || prev[1] !== sz) { + triggerSFX('sfx:grid-snap') + lastSnapRef.current = [sx, sz] + } + + setTarget({ + roof: { + position: (roof.position ?? [0, 0, 0]) as [number, number, number], + rotation: roof.rotation ?? 0, + }, + segment: { + position: (hit.segment.position ?? [0, 0, 0]) as [number, number, number], + rotation: hit.segment.rotation ?? 0, + }, + snap, + }) + 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 state = useScene.getState() + const snap = resolveEaveSnap(hit.segment, hit.localX, hit.localZ) + + const gutter = GutterNode.parse({ + ...gutterDefinition.defaults(), + name: 'Gutter', + roofSegmentId: hit.segment.id, + // (X, Y, Z) all come from the eave snap — on ±Z eaves X stays + // free along the cursor; on ±X eaves Z stays free instead. + // Rotation orients the gutter's outward axis away from the + // building on whichever side the click landed. + position: [snap.eaveX, snap.eaveY, snap.eaveZ], + rotation: snap.rotation, + }) + state.createNode(gutter, hit.segment.id as AnyNodeId) + state.dirtyNodes.add(hit.segment.id as AnyNodeId) + setSelection({ selectedIds: [gutter.id] }) + triggerSFX('sfx:item-place') + event.stopPropagation() + } + + emitter.on('roof:move', updatePreview) + emitter.on('roof:enter', updatePreview) + emitter.on('roof:click', onClick) + + return () => { + emitter.off('roof:move', updatePreview) + emitter.off('roof:enter', updatePreview) + emitter.off('roof:click', onClick) + } + }, [activeBuildingId, setSelection]) + + if (!activeBuildingId || !target) return null + + return ( + + + + + + + + ) +} + +export default GutterTool diff --git a/packages/nodes/src/index.ts b/packages/nodes/src/index.ts index d3c7745e..6c67f839 100644 --- a/packages/nodes/src/index.ts +++ b/packages/nodes/src/index.ts @@ -4,11 +4,15 @@ import { buildingDefinition } from './building' import { ceilingDefinition } from './ceiling' import { chimneyDefinition } from './chimney' import { columnDefinition } from './column' +import { cupolaDefinition } from './cupola' import { doorDefinition } from './door' import { dormerDefinition } from './dormer' +import { downspoutDefinition } from './downspout' import { elevatorDefinition } from './elevator' +import { eyebrowVentDefinition } from './eyebrow-vent' import { fenceDefinition } from './fence' import { guideDefinition } from './guide' +import { gutterDefinition } from './gutter' import { itemDefinition } from './item' import { levelDefinition } from './level' import { ridgeVentDefinition } from './ridge-vent' @@ -23,6 +27,7 @@ import { solarPanelDefinition } from './solar-panel' import { spawnDefinition } from './spawn' import { stairDefinition } from './stair' import { stairSegmentDefinition } from './stair-segment' +import { turbineVentDefinition } from './turbine-vent' import { wallDefinition } from './wall' import { windowDefinition } from './window' import { zoneDefinition } from './zone' @@ -74,10 +79,15 @@ export const builtinPlugin: Plugin = { // Roof-mounted accessories (custom renderer + bespoke roof-event tool). boxVentDefinition as unknown as AnyNodeDefinition, ridgeVentDefinition as unknown as AnyNodeDefinition, + turbineVentDefinition as unknown as AnyNodeDefinition, + cupolaDefinition as unknown as AnyNodeDefinition, + eyebrowVentDefinition as unknown as AnyNodeDefinition, chimneyDefinition as unknown as AnyNodeDefinition, solarPanelDefinition as unknown as AnyNodeDefinition, skylightDefinition as unknown as AnyNodeDefinition, dormerDefinition as unknown as AnyNodeDefinition, + gutterDefinition as unknown as AnyNodeDefinition, + downspoutDefinition as unknown as AnyNodeDefinition, ], } @@ -86,11 +96,15 @@ export { buildingDefinition } from './building' export { ceilingDefinition } from './ceiling' export { chimneyDefinition } from './chimney' export { columnDefinition } from './column' +export { cupolaDefinition } from './cupola' export { doorDefinition } from './door' export { dormerDefinition } from './dormer' +export { downspoutDefinition } from './downspout' export { elevatorDefinition } from './elevator' +export { eyebrowVentDefinition } from './eyebrow-vent' export { fenceDefinition } from './fence' export { guideDefinition } from './guide' +export { gutterDefinition } from './gutter' export { itemDefinition } from './item' export { levelDefinition } from './level' export { ridgeVentDefinition } from './ridge-vent' @@ -105,6 +119,7 @@ export { solarPanelDefinition } from './solar-panel' export { spawnDefinition } from './spawn' export { stairDefinition } from './stair' export { stairSegmentDefinition } from './stair-segment' +export { turbineVentDefinition } from './turbine-vent' export { wallDefinition } from './wall' export { windowDefinition } from './window' export { zoneDefinition } from './zone' diff --git a/packages/nodes/src/item/definition.ts b/packages/nodes/src/item/definition.ts index 7ca83f1c..eb5d18d5 100644 --- a/packages/nodes/src/item/definition.ts +++ b/packages/nodes/src/item/definition.ts @@ -1,5 +1,6 @@ import { getScaledDimensions, + type HandleDescriptor, type ItemNode as ItemNodeType, type NodeDefinition, } from '@pascal-app/core' @@ -8,6 +9,134 @@ import { itemFloorplanMoveTarget } from './floorplan-move' import { itemParametrics } from './parametrics' import { ItemNode } from './schema' +// Gizmo sits just past the front-right footprint corner; the guide ring +// traces a circle slightly outside the footprint's bounding circle. +const ROTATE_CORNER_OFFSET = 0.25 +const ROTATE_RING_OFFSET = 0.06 +// How far past the item's front edge the move cross floats. +const MOVE_FRONT_OFFSET = 0.35 + +// Whole-item rotation handle — the two-headed curved arrow. `arc-resize` +// does the angular drag math (raycasts a horizontal plane at the gizmo's +// Y, measures cursor bearing around the item's local origin, returns the +// delta). Holding Shift snaps to 15° increments (handled generically in +// node-arrow-handles for any `shape: 'rotate'`), matching the R/T rotate +// step for placed items. Item rotation is stored as `[x, y, z]`; only the +// Y component turns. +function itemRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + // Negate the cursor delta to match three.js Y-rotation handedness + // (positive Ry takes +X → −Z, while atan2(z, x) increases +X → +Z). + apply: (initial, delta) => { + const [rx, ry, rz] = initial.rotation ?? [0, 0, 0] + return { rotation: [rx, ry - delta, rz] } + }, + placement: { + // Front-right corner of the footprint at mid-height. The registered + // item mesh carries position + rotation only (scale lives on an + // inner mesh), so the scaled footprint maps straight to world. + position: (n) => { + const [w, h, d] = getScaledDimensions(n) + return [w / 2, h / 2, d / 2 + ROTATE_CORNER_OFFSET] + }, + // Fixed −45° tilt leans the curve toward the item's front face. + rotationY: () => -Math.PI / 4, + }, + decoration: { + kind: 'ring', + radius: (n) => { + const [w, , d] = getScaledDimensions(n) + return Math.hypot(w / 2, d / 2) + ROTATE_RING_OFFSET + }, + y: (n) => getScaledDimensions(n)[1] / 2, + }, + } +} + +// Free ground-plane move gizmo — the 4-way cross just outside the front edge. +// Press-drag-release slides the item across the floor (live preview, commit +// on release). `snapExtents` aligns the item's edges to the grid the same +// way placement does, swapping width / depth at 90° turns. +function itemMoveHandle(): HandleDescriptor { + return { + kind: 'translate', + placement: { + // Sit just outside the item's front edge (centred in X, clear of the + // model), low to the floor so it reads as a floor-move grip. + position: (n) => { + const [, , d] = getScaledDimensions(n) + return [0, 0.02, d / 2 + MOVE_FRONT_OFFSET] + }, + }, + apply: (_n, pos) => ({ position: [pos[0], pos[1], pos[2]] }), + snapExtents: (n) => { + const [dimX, , dimZ] = getScaledDimensions(n) + const swap = Math.abs(Math.sin(n.rotation[1] ?? 0)) > 0.9 + return [swap ? dimZ : dimX, swap ? dimX : dimZ] + }, + } +} + +// ---- Wall-mounted items (attachTo 'wall' / 'wall-side') ---- +// These live in the wall's local frame: position is [along-wall, up, depth] +// and the item faces along the wall normal (its local +Z). Both gizmos use +// `portal: 'grandparent'` so they render in the wall frame like door / window +// handles, and sit a little off the wall surface (+Z) so they're grabbable. + +// How far off the wall surface (along the normal) the wall gizmos float, and +// how far to either side of the item they sit. +const WALL_GIZMO_LIFT = 0.12 +const WALL_SIDE_OFFSET = 0.3 + +// Spin the item flat against the wall — rotation about its local +Z (the wall +// normal), written to rotation[2]. Sits just past the item's right edge. +function itemWallRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + rotationPlane: 'node-normal', + portal: 'grandparent', + apply: (initial, delta) => { + const [rx, ry, rz] = initial.rotation ?? [0, 0, 0] + return { rotation: [rx, ry, rz + delta] } + }, + placement: { + position: (n) => { + const [w] = getScaledDimensions(n) + return [w / 2 + WALL_SIDE_OFFSET, 0, WALL_GIZMO_LIFT] + }, + }, + } +} + +// Slide the item across the wall face — constrained to the wall plane (along +// the wall + up/down), depth pinned. Sits just past the item's left edge. +function itemWallMoveHandle(): HandleDescriptor { + return { + kind: 'translate', + plane: 'node-normal', + portal: 'grandparent', + placement: { + position: (n) => { + const [w] = getScaledDimensions(n) + return [-(w / 2 + WALL_SIDE_OFFSET), 0, WALL_GIZMO_LIFT] + }, + }, + apply: (_n, pos) => ({ position: [pos[0], pos[1], pos[2]] }), + snapExtents: (n) => { + const [dimX, dimY] = getScaledDimensions(n) + // A 90° roll about the normal swaps the item's along-wall + vertical + // footprint. + const swap = Math.abs(Math.sin(n.rotation[2] ?? 0)) > 0.9 + return [swap ? dimY : dimX, swap ? dimX : dimY] + }, + } +} + /** * Item — Phase 5 batch kind. Catalog-backed, GLB-rendered, multi-host. * @@ -99,6 +228,20 @@ export const itemDefinition: NodeDefinition = { parametrics: itemParametrics, + // In-world rotate + move gizmos for selected items. + // - Floor items: world-Y rotate + free floor-plane move cross. + // - Wall items: wall-normal rotate (spin flat against the wall) + a move + // cross constrained to the wall face. Both ride the wall frame. + // - Ceiling items: no gizmos yet (move via the move tool). + handles: (node) => { + const attachTo = (node as ItemNodeType).asset.attachTo + if (attachTo === 'wall' || attachTo === 'wall-side') { + return [itemWallRotateHandle(), itemWallMoveHandle()] + } + if (attachTo) return [] + return [itemRotateHandle(), itemMoveHandle()] + }, + renderer: { kind: 'parametric', module: () => import('./renderer'), diff --git a/packages/nodes/src/item/renderer.tsx b/packages/nodes/src/item/renderer.tsx index 0c1149d6..37abb360 100644 --- a/packages/nodes/src/item/renderer.tsx +++ b/packages/nodes/src/item/renderer.tsx @@ -7,6 +7,7 @@ import { type ItemNode, type LightEffect, useInteractive, + useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core' @@ -75,10 +76,21 @@ const BrokenItemFallback = ({ node }: { node: ItemNode }) => { ) } -export const ItemRenderer = ({ node }: { node: ItemNode }) => { +export const ItemRenderer = ({ node: storeNode }: { node: ItemNode }) => { const ref = useRef(null!) - useRegistry(node.id, node.type, ref) + useRegistry(storeNode.id, storeNode.type, ref) + + // Merge live drag overrides so the mesh transforms in real time during a + // drag (e.g. the in-world rotate gizmo). The handle writes the in-flight + // rotation to `useLiveNodeOverrides` on every pointer move and commits to + // the store only on release — without this merge the item would stay put + // until commit. + const liveOverrides = useLiveNodeOverrides((state) => state.get(storeNode.id as AnyNodeId)) + const node = useMemo( + () => (liveOverrides ? ({ ...storeNode, ...liveOverrides } as ItemNode) : storeNode), + [storeNode, liveOverrides], + ) return ( diff --git a/packages/nodes/src/ridge-vent/__tests__/schema.test.ts b/packages/nodes/src/ridge-vent/__tests__/schema.test.ts index 38a8b042..270e38b7 100644 --- a/packages/nodes/src/ridge-vent/__tests__/schema.test.ts +++ b/packages/nodes/src/ridge-vent/__tests__/schema.test.ts @@ -8,7 +8,7 @@ describe('RidgeVentNode schema', () => { expect(parsed.id).toMatch(/^rvent_/) expect(parsed.length).toBe(2.0) expect(parsed.width).toBe(0.3) - expect(parsed.height).toBe(0.08) + expect(parsed.height).toBe(0.1) expect(parsed.style).toBe('standard') expect(parsed.endCaps).toBe(true) expect(parsed.position).toEqual([0, 0, 0]) diff --git a/packages/nodes/src/ridge-vent/definition.ts b/packages/nodes/src/ridge-vent/definition.ts index a0ff7c55..5c9bc649 100644 --- a/packages/nodes/src/ridge-vent/definition.ts +++ b/packages/nodes/src/ridge-vent/definition.ts @@ -1,7 +1,148 @@ -import { type NodeDefinition, RidgeVentNode as RidgeVentNodeSchema } from '@pascal-app/core' +import { + type HandleDescriptor, + type NodeDefinition, + RidgeVentNode as RidgeVentNodeSchema, + type RidgeVentNode as RidgeVentNodeType, +} from '@pascal-app/core' +import { buildRidgeVentFloorplan } from './floorplan' +import { surfacePaintCapability } from '../shared/surface-paint' import { ridgeVentParametrics } from './parametrics' import { RidgeVentNode } from './schema' +// Edge-to-arrow-center offset, matching the box-vent / chimney cadence. +const SIDE_HANDLE_OFFSET = 0.25 +const HEIGHT_HANDLE_OFFSET = 0.15 +// Snug to the vent corner — keeps the rotate icon close to the item. +const ROTATE_CORNER_OFFSET = 0.1 +// Ridge vents are long but thin — minimums let users shrink without +// collapsing the geometry past the point where the cross-section +// degenerates. Default length is 2.0, default width 0.3, default +// height 0.08, so these are well below the defaults. +const MIN_LENGTH = 0.2 +const MIN_WIDTH = 0.1 +const MIN_HEIGHT = 0.02 + +// Mid-Y of the vent body in vent-mesh-local frame. The base sits at the +// ridge line (Y=0) and the cap peaks at Y=height — so side / rotate +// chevrons place at half-height to read as "beside the body". +function getBodyMidY(n: RidgeVentNodeType): number { + return Math.max(MIN_HEIGHT, n.height) / 2 +} + +// Length arrow on ±X (the ridge direction). Asymmetric: drag one end +// outward and the opposite end stays world-fixed by recentering +// `position` along the vent's own +X arm in segment frame (yaw-aware +// math, matches box-vent / chimney). The ridge vent typically straddles +// a portion of the ridge, so dragging one end is the natural extend / +// shorten gesture. +function ridgeVentLengthHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'x', + anchor: side === 'right' ? 'min' : 'max', + min: MIN_LENGTH, + currentValue: (n) => n.length, + apply: (initial, newLength) => { + const rotY = initial.rotation ?? 0 + const armX = Math.cos(rotY) + const armZ = -Math.sin(rotY) + const anchorX = initial.position[0] - sign * (initial.length / 2) * armX + const anchorZ = initial.position[2] - sign * (initial.length / 2) * armZ + const newCenterX = anchorX + sign * (newLength / 2) * armX + const newCenterZ = anchorZ + sign * (newLength / 2) * armZ + return { + length: newLength, + position: [newCenterX, initial.position[1], newCenterZ], + } + }, + placement: { + position: (n) => [sign * (n.length / 2 + SIDE_HANDLE_OFFSET), getBodyMidY(n), 0], + rotationY: () => (side === 'right' ? 0 : Math.PI), + }, + } +} + +// Width arrow on +Z (across the ridge). Symmetric — the vent geometry +// straddles the ridge line (Z=0) so growing the width pushes both edges +// outward by the same amount. A single chevron on +Z reads as "this is +// the width dimension"; keeping it symmetric also stays inside the same +// handle-count budget the chimney / dormer / box-vent already document. +function ridgeVentWidthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'z', + anchor: 'center', + min: MIN_WIDTH, + currentValue: (n) => n.width, + apply: (_n, newValue) => ({ width: newValue }), + placement: { + position: (n) => [0, getBodyMidY(n), n.width / 2 + SIDE_HANDLE_OFFSET], + }, + } +} + +// Height arrow above the cap peak. anchor='min' so the base stays +// pinned to the ridge line (Y=0) and the peak follows the cursor. Plain +// chevron — at default 0.08 m a dashed tracker leader would be visual +// noise rather than a dimension cue. +function ridgeVentHeightHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + min: MIN_HEIGHT, + currentValue: (n) => n.height, + apply: (_n, newValue) => ({ height: Math.max(MIN_HEIGHT, newValue) }), + placement: { + position: (n) => [0, Math.max(n.height, MIN_HEIGHT) + HEIGHT_HANDLE_OFFSET, 0], + }, + } +} + +// Whole-vent rotation gizmo at the +X+Z corner of the body footprint. +// Negate the cursor delta to match three.js Y-rotation handedness. The +// registered group already centres on the vent and applies its yaw, +// so the default rotation pivot is correct. +function ridgeVentRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }), + placement: { + position: (n) => [ + n.length / 2 + ROTATE_CORNER_OFFSET, + getBodyMidY(n), + n.width / 2 + ROTATE_CORNER_OFFSET, + ], + // Two-headed icon's natural bias is along +X; aim along the + // +X+Z corner bisector so it sits visually flush with the + // rotate gesture's swing direction. + rotationY: () => -Math.PI / 4, + }, + // Guide ring centred on the vent, sized to pass through the corner icon + // so the icon rides the ring — matches solar-panel / skylight. + decoration: { + kind: 'ring', + radius: (n) => + Math.hypot(n.length / 2 + ROTATE_CORNER_OFFSET, n.width / 2 + ROTATE_CORNER_OFFSET), + y: (n) => getBodyMidY(n), + }, + } +} + +// `portal: 'grandparent'` on every handle — see box-vent's note. The vent +// rides the roof→segment→node frame chain, so the handle rig must too, or +// the handles (and rotate arc) render offset from the vent. +const ridgeVentHandles: HandleDescriptor[] = [ + ridgeVentLengthHandle('right'), + ridgeVentLengthHandle('left'), + ridgeVentWidthHandle(), + ridgeVentHeightHandle(), + ridgeVentRotateHandle(), +].map((h): HandleDescriptor => ({ ...h, portal: 'grandparent' })) + /** * Ridge vent — a ventilation strip running along the ridge of a roof * segment. Parented to a `roof-segment`; position is segment-local. @@ -34,6 +175,8 @@ export const ridgeVentDefinition: NodeDefinition = { selectable: { hitVolume: 'bbox' }, duplicable: true, deletable: true, + // Single painted surface — registry-driven paint dispatch (see chimney). + paint: surfacePaintCapability, // Mounts on a roof segment via `roofSegmentId`. Sits ON TOP of the // ridge — no `buildCut`, just the dirty cascade so the parent // roof's merged shell rebuilds when the vent moves / resizes. @@ -41,6 +184,8 @@ export const ridgeVentDefinition: NodeDefinition = { }, parametrics: ridgeVentParametrics, + handles: ridgeVentHandles, + floorplan: buildRidgeVentFloorplan, renderer: { kind: 'parametric', diff --git a/packages/nodes/src/ridge-vent/floorplan.ts b/packages/nodes/src/ridge-vent/floorplan.ts new file mode 100644 index 00000000..793db221 --- /dev/null +++ b/packages/nodes/src/ridge-vent/floorplan.ts @@ -0,0 +1,152 @@ +import type { + AnyNodeId, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RidgeVentNode, + RoofNode, + RoofSegmentNode, +} from '@pascal-app/core' + +// Tab pitch for the shingled style — matches SHINGLED_TAB_SIZE in +// geometry.ts so the plan's divider spacing reads like the 3D ridge cap. +const SHINGLED_TAB_SIZE = 0.3 + +/** + * Floor-plan builder for a ridge vent — a ventilation strip running along + * a roof ridge. Seen from above it's a long thin band straddling the + * ridge crest, with a centre crest line, end caps where closed, and tab + * dividers for the shingled style. + * + * Coordinate frame mirrors the 3D transform stack + * (roof → roof-segment → vent), same as the chimney builder. `position` + * is segment-local; the run (`length`) is along local +X and the small + * cross-`width` straddles the ridge along local Z (centred at Z = 0). + * `rotation` is yaw, negated for the floor plan's y-down convention. + */ +export function buildRidgeVentFloorplan( + node: RidgeVentNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const rot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + 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 baseInk = '#475569' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const fill = showSelectedChrome ? '#fed7aa' : '#dbe1e8' + const fillOpacity = showSelectedChrome ? 0.55 : 0.6 + const lineWidth = showSelectedChrome ? 0.03 : 0.02 + + const halfLen = Math.max(node.length, 0.1) / 2 + const halfW = Math.max(node.width, 0.04) / 2 + + const corners: FloorplanPoint[] = [ + toPlan(-halfLen, -halfW), + toPlan(halfLen, -halfW), + toPlan(halfLen, halfW), + toPlan(-halfLen, halfW), + ] + + const children: FloorplanGeometry[] = [ + // Transparent hit-target over the whole strip. + { + kind: 'polygon', + points: corners, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }, + // Strip fill. + { + kind: 'polygon', + points: corners, + fill, + fillOpacity, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'none', + }, + ] + + const seg = ( + a: readonly [number, number], + b: readonly [number, number], + w: number, + opacity?: number, + ) => { + const pa = toPlan(a[0], a[1]) + const pb = toPlan(b[0], b[1]) + children.push({ + kind: 'line', + x1: pa[0], + y1: pa[1], + x2: pb[0], + y2: pb[1], + stroke, + strokeWidth: w, + strokeLinecap: 'round', + opacity, + pointerEvents: 'none', + }) + } + + // Long edges along the run (always) + end caps (only when closed). + seg([-halfLen, -halfW], [halfLen, -halfW], lineWidth) + seg([-halfLen, halfW], [halfLen, halfW], lineWidth) + if (node.endCaps !== false) { + seg([-halfLen, -halfW], [-halfLen, halfW], lineWidth) + seg([halfLen, -halfW], [halfLen, halfW], lineWidth) + } + + // Ridge crest line down the centre. + seg([-halfLen, 0], [halfLen, 0], lineWidth * 0.8, 0.7) + + // Shingled style: tab dividers across the width at the cap pitch. + if (node.style === 'shingled') { + const total = halfLen * 2 + const count = Math.max(2, Math.round(total / SHINGLED_TAB_SIZE)) + const step = total / count + for (let i = 1; i < count; i++) { + const x = -halfLen + i * step + seg([x, -halfW], [x, halfW], lineWidth * 0.6, 0.5) + } + } + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/ridge-vent/geometry.ts b/packages/nodes/src/ridge-vent/geometry.ts index 61ef72b4..b97eb6bd 100644 --- a/packages/nodes/src/ridge-vent/geometry.ts +++ b/packages/nodes/src/ridge-vent/geometry.ts @@ -1,512 +1,238 @@ import type { RidgeVentNode } from '@pascal-app/core' import * as THREE from 'three' -import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js' -const ARC_SEGMENTS = 8 -const SHELL_THICKNESS = 0.25 -const SHINGLED_PEAK_SEGS = 3 +const ARC_SEGS = 16 const SHINGLED_TAB_SIZE = 0.3 /** - * Pure builder for the ridge vent mesh. Three styles share a common - * cross-section approach: extrude a 2D profile (in the Y-Z plane) - * along the segment's X axis (ridge direction), then add optional - * end caps. + * Pure builder for the ridge vent mesh. Each style is a peaked **band** of + * constant thickness `t` that drapes over the ridge like a real ridge cap: + * a shaped top surface, a parallel underside offset down by `t`, visible + * eave thickness faces along both edges, and end caps. * - * - `standard`: smooth curved shell with offset inner surface - * - `shingled`: angular slopes meeting at a rounded peak with tab ridges - * - `metal`: angular bent-metal cap with drip-edge lips and a center bead + * This is the middle ground between the two earlier extremes — the original + * was a paper-thin shell (no perceptible thickness), then a flat-bottomed + * solid (read as a closed box). The band keeps the V / arched cap silhouette + * and the open underside (so it sits astride the ridge) while showing real + * thickness at the eaves and ends. * - * Pure: no React, no scene access, no store mutation. + * - `standard`: smooth rounded arch + * - `shingled`: angular peak with raised shingle-course ridges across the top + * - `metal`: bent-metal cap with a wide flat seam and drip lips + * + * `endCaps` closes both ends. Pure: no React, no scene access, no mutation. */ export function buildRidgeVentGeometry(node: RidgeVentNode): THREE.BufferGeometry { const halfLen = node.length / 2 const halfW = node.width / 2 const h = node.height + // Band thickness. Generous enough to read as a solid cap; the eave faces + // are `t` tall, which is the depth the user actually sees from the side. + const t = Math.max(0.02, h * 0.4) - const pieces: THREE.BufferGeometry[] = [] + const top = + node.style === 'metal' + ? metalTop(halfW, h, t) + : node.style === 'shingled' + ? shingledTop(halfW, h, t) + : standardTop(halfW, h, t) - if (node.style === 'metal') { - pieces.push(buildMetalProfile(halfLen, halfW, h)) - } else if (node.style === 'shingled') { - pieces.push(buildShingledProfile(halfLen, halfW, h)) - } else { - pieces.push(buildCurvedCapProfile(halfLen, halfW, h)) - } - - if (node.endCaps) { - const cap = - node.style === 'metal' - ? buildMetalEndCaps(halfLen, halfW, h) - : node.style === 'shingled' - ? buildShingledEndCaps(halfLen, halfW, h) - : buildCurvedEndCaps(halfLen, halfW, h) - if (cap) pieces.push(cap) - } - - return pieces.length === 1 ? pieces[0]! : (mergeGeometries(pieces, false) ?? pieces[0]!) -} - -// ─── Standard curved cap ───────────────────────────────────────────── - -function buildCurvedCapProfile(halfLen: number, halfW: number, h: number): THREE.BufferGeometry { const positions: number[] = [] const normals: number[] = [] const uvs: number[] = [] - const t = h * SHELL_THICKNESS - const outerPts: [number, number][] = [] - for (let i = 0; i <= ARC_SEGMENTS; i++) { - const frac = i / ARC_SEGMENTS - const angle = Math.PI * frac - const z = -halfW + frac * (2 * halfW) - const y = h * Math.sin(angle) - outerPts.push([z, y]) - } - const innerPts = offsetProfileInward(outerPts, t) + buildBand(positions, normals, uvs, top, t, halfLen, node.endCaps) - for (let i = 0; i < ARC_SEGMENTS; i++) { - const [oz0, oy0] = outerPts[i]! - const [oz1, oy1] = outerPts[i + 1]! - const [iz0, iy0] = innerPts[i]! - const [iz1, iy1] = innerPts[i + 1]! - - const dz = oz1 - oz0 - const dy = oy1 - oy0 - const fLen = Math.sqrt(dz * dz + dy * dy) || 1 - const fnz = -dy / fLen - const fny = dz / fLen - - pushQuad( - positions, - normals, - uvs, - [-halfLen, oy0, oz0], - [halfLen, oy0, oz0], - [halfLen, oy1, oz1], - [-halfLen, oy1, oz1], - [0, fny, fnz], - ) - - pushQuad( - positions, - normals, - uvs, - [-halfLen, iy1, iz1], - [halfLen, iy1, iz1], - [halfLen, iy0, iz0], - [-halfLen, iy0, iz0], - [0, -fny, -fnz], - ) - } - - // Eave bottoms - for (const idx of [0, ARC_SEGMENTS]) { - const [oz, oy] = outerPts[idx]! - const [iz, iy] = innerPts[idx]! - if (idx === 0) { - pushQuad( - positions, - normals, - uvs, - [-halfLen, iy, iz], - [halfLen, iy, iz], - [halfLen, oy, oz], - [-halfLen, oy, oz], - [0, -1, 0], - ) - } else { - pushQuad( - positions, - normals, - uvs, - [-halfLen, oy, oz], - [halfLen, oy, oz], - [halfLen, iy, iz], - [-halfLen, iy, iz], - [0, -1, 0], - ) - } + if (node.style === 'shingled') { + addShingledTabs(positions, normals, uvs, halfLen, top, h) } return buildBufferGeometry(positions, normals, uvs) } -function buildCurvedEndCaps( - halfLen: number, - halfW: number, - h: number, -): THREE.BufferGeometry | null { - const positions: number[] = [] - const normals: number[] = [] - const uvs: number[] = [] - const t = h * SHELL_THICKNESS +// ─── Top profiles (open polylines eave → peak → eave, in [z, y]) ───────── +// Eaves sit at y = t so that the underside (top − t) lands on y = 0 at the +// eaves, seating the cap on the roof while leaving a peaked void beneath. - const outerPts: [number, number][] = [] - for (let i = 0; i <= ARC_SEGMENTS; i++) { - const frac = i / ARC_SEGMENTS - const angle = Math.PI * frac - outerPts.push([-halfW + frac * (2 * halfW), h * Math.sin(angle)]) +// Smooth rounded arch. +function standardTop(halfW: number, h: number, t: number): [number, number][] { + const pts: [number, number][] = [] + for (let i = 0; i <= ARC_SEGS; i++) { + const frac = i / ARC_SEGS + const z = -halfW + frac * 2 * halfW + const y = t + (h - t) * Math.sin(frac * Math.PI) + pts.push([z, y]) } - const innerPts = offsetProfileInward(outerPts, t) - - for (const sign of [-1, 1] as const) { - const x = sign * halfLen - for (let i = 0; i < ARC_SEGMENTS; i++) { - const a: [number, number, number] = [x, outerPts[i]![1], outerPts[i]![0]] - const b: [number, number, number] = [x, outerPts[i + 1]![1], outerPts[i + 1]![0]] - const c: [number, number, number] = [x, innerPts[i + 1]![1], innerPts[i + 1]![0]] - const d: [number, number, number] = [x, innerPts[i]![1], innerPts[i]![0]] - if (sign > 0) pushQuad(positions, normals, uvs, a, b, c, d, [sign, 0, 0]) - else pushQuad(positions, normals, uvs, d, c, b, a, [sign, 0, 0]) - } - } - - return positions.length === 0 ? null : buildBufferGeometry(positions, normals, uvs) -} - -// ─── Shingled profile ─────────────────────────────────────────────── - -function shingledOuterPts(halfW: number, h: number): [number, number][] { - const peakR = halfW * 0.1 - const slopeY = (h * (halfW - peakR)) / halfW - const pts: [number, number][] = [[-halfW, 0]] - for (let i = 0; i <= SHINGLED_PEAK_SEGS; i++) { - const frac = i / SHINGLED_PEAK_SEGS - const angle = Math.PI * (1 - frac) - pts.push([peakR * Math.cos(angle), slopeY + (h - slopeY) * Math.sin(angle)]) - } - pts.push([halfW, 0]) return pts } -function buildShingledProfile(halfLen: number, halfW: number, h: number): THREE.BufferGeometry { - const positions: number[] = [] - const normals: number[] = [] - const uvs: number[] = [] - const t = h * SHELL_THICKNESS +// Angular peak with a narrow flat ridge at the top. +function shingledTop(halfW: number, h: number, t: number): [number, number][] { + const peakHalf = halfW * 0.12 + return [ + [-halfW, t], + [-peakHalf, h], + [peakHalf, h], + [halfW, t], + ] +} - const outerPts = shingledOuterPts(halfW, h) - const innerPts = offsetProfileInward(outerPts, t) +// Bent-metal cap: steep folds up to a wide flat standing seam. +function metalTop(halfW: number, h: number, t: number): [number, number][] { + const seamHalf = halfW * 0.5 + const shoulderY = t + (h - t) * 0.5 + return [ + [-halfW, t], + [-halfW * 0.82, shoulderY], + [-seamHalf, h], + [seamHalf, h], + [halfW * 0.82, shoulderY], + [halfW, t], + ] +} - for (let i = 0; i < outerPts.length - 1; i++) { - const [oz0, oy0] = outerPts[i]! - const [oz1, oy1] = outerPts[i + 1]! - const [iz0, iy0] = innerPts[i]! - const [iz1, iy1] = innerPts[i + 1]! +// ─── Band assembly ─────────────────────────────────────────────────────── - const dz = oz1 - oz0 - const dy = oy1 - oy0 - const fLen = Math.sqrt(dz * dz + dy * dy) || 1 - const fnz = -dy / fLen - const fny = dz / fLen +function buildBand( + positions: number[], + normals: number[], + uvs: number[], + top: [number, number][], + t: number, + halfLen: number, + withCaps: boolean, +): void { + const n = top.length + // Underside: the same profile dropped straight down by `t` (eaves → y 0). + const inner: [number, number][] = top.map(([z, y]) => [z, y - t]) + // Top surface + underside, swept along the ridge length. + for (let i = 0; i < n - 1; i++) { + const [z0, y0] = top[i]! + const [z1, y1] = top[i + 1]! pushQuad( positions, normals, uvs, - [-halfLen, oy0, oz0], - [halfLen, oy0, oz0], - [halfLen, oy1, oz1], - [-halfLen, oy1, oz1], - [0, fny, fnz], + [-halfLen, y0, z0], + [halfLen, y0, z0], + [halfLen, y1, z1], + [-halfLen, y1, z1], + [0, 1, 0], ) - + const [iz0, iy0] = inner[i]! + const [iz1, iy1] = inner[i + 1]! pushQuad( positions, normals, uvs, - [-halfLen, iy1, iz1], - [halfLen, iy1, iz1], - [halfLen, iy0, iz0], [-halfLen, iy0, iz0], - [0, -fny, -fnz], - ) - } - - // Eave bottoms - { - const [oz, oy] = outerPts[0]! - const [iz, iy] = innerPts[0]! - pushQuad( - positions, - normals, - uvs, - [-halfLen, iy, iz], - [halfLen, iy, iz], - [halfLen, oy, oz], - [-halfLen, oy, oz], - [0, -1, 0], - ) - } - { - const last = outerPts.length - 1 - const [oz, oy] = outerPts[last]! - const [iz, iy] = innerPts[last]! - pushQuad( - positions, - normals, - uvs, - [-halfLen, oy, oz], - [halfLen, oy, oz], - [halfLen, iy, iz], - [-halfLen, iy, iz], + [halfLen, iy0, iz0], + [halfLen, iy1, iz1], + [-halfLen, iy1, iz1], [0, -1, 0], ) } - // Tab divider ridges along the length + // Eave thickness faces (the visible depth along each long edge). + for (const idx of [0, n - 1]) { + const [z, yTop] = top[idx]! + const [, yInner] = inner[idx]! + const hint: [number, number, number] = [0, 0, z < 0 ? -1 : 1] + pushQuad( + positions, + normals, + uvs, + [-halfLen, yInner, z], + [halfLen, yInner, z], + [halfLen, yTop, z], + [-halfLen, yTop, z], + hint, + ) + } + + // End caps: the band's cross-section ring at each end. + if (withCaps) { + for (const sign of [-1, 1] as const) { + const x = sign * halfLen + const hint: [number, number, number] = [sign, 0, 0] + for (let i = 0; i < n - 1; i++) { + const [z0, y0] = top[i]! + const [z1, y1] = top[i + 1]! + const [iz0, iy0] = inner[i]! + const [iz1, iy1] = inner[i + 1]! + pushQuad( + positions, + normals, + uvs, + [x, y0, z0], + [x, y1, z1], + [x, iy1, iz1], + [x, iy0, iz0], + hint, + ) + } + } + } +} + +// ─── Shingled course ridges ────────────────────────────────────────────── +// Thin raised lines running across the cap at intervals, suggesting +// overlapping shingle courses. Sit on the top profile edges. + +function addShingledTabs( + positions: number[], + normals: number[], + uvs: number[], + halfLen: number, + top: [number, number][], + h: number, +): void { const totalLen = halfLen * 2 const numTabs = Math.max(2, Math.round(totalLen / SHINGLED_TAB_SIZE)) const tabLen = totalLen / numTabs const ridgeH = h * 0.06 - const ridgeD = 0.006 + const ridgeD = Math.min(0.01, tabLen * 0.15) for (let tab = 1; tab < numTabs; tab++) { const x = -halfLen + tab * tabLen - for (let i = 0; i < outerPts.length - 1; i++) { - const [oz0, oy0] = outerPts[i]! - const [oz1, oy1] = outerPts[i + 1]! - const dz = oz1 - oz0 - const dy = oy1 - oy0 - const fLen = Math.sqrt(dz * dz + dy * dy) || 1 - const fnz = -dy / fLen - const fny = dz / fLen - const r0y = oy0 + fny * ridgeH - const r0z = oz0 + fnz * ridgeH - const r1y = oy1 + fny * ridgeH - const r1z = oz1 + fnz * ridgeH + for (let i = 0; i < top.length - 1; i++) { + const [z0, y0] = top[i]! + const [z1, y1] = top[i + 1]! + const dz = z1 - z0 + const dy = y1 - y0 + const len = Math.sqrt(dz * dz + dy * dy) || 1 + const nz = -dy / len + const ny = dz / len + const r0y = y0 + ny * ridgeH + const r0z = z0 + nz * ridgeH + const r1y = y1 + ny * ridgeH + const r1z = z1 + nz * ridgeH pushQuad( positions, normals, uvs, [x, r0y, r0z], [x, r1y, r1z], - [x, oy1, oz1], - [x, oy0, oz0], + [x, y1, z1], + [x, y0, z0], [1, 0, 0], ) pushQuad( positions, normals, uvs, - [x, r0y, r0z], - [x, r1y, r1z], - [x - ridgeD, oy1, oz1], - [x - ridgeD, oy0, oz0], - [0, fny, fnz], + [x - ridgeD, r0y, r0z], + [x - ridgeD, r1y, r1z], + [x - ridgeD, y1, z1], + [x - ridgeD, y0, z0], + [-1, 0, 0], ) } } - - return buildBufferGeometry(positions, normals, uvs) } -function buildShingledEndCaps( - halfLen: number, - halfW: number, - h: number, -): THREE.BufferGeometry | null { - const positions: number[] = [] - const normals: number[] = [] - const uvs: number[] = [] - const t = h * SHELL_THICKNESS - - const outerPts = shingledOuterPts(halfW, h) - const innerPts = offsetProfileInward(outerPts, t) - - for (const sign of [-1, 1] as const) { - const x = sign * halfLen - for (let i = 0; i < outerPts.length - 1; i++) { - const a: [number, number, number] = [x, outerPts[i]![1], outerPts[i]![0]] - const b: [number, number, number] = [x, outerPts[i + 1]![1], outerPts[i + 1]![0]] - const c: [number, number, number] = [x, innerPts[i + 1]![1], innerPts[i + 1]![0]] - const d: [number, number, number] = [x, innerPts[i]![1], innerPts[i]![0]] - if (sign > 0) pushQuad(positions, normals, uvs, a, b, c, d, [sign, 0, 0]) - else pushQuad(positions, normals, uvs, d, c, b, a, [sign, 0, 0]) - } - } - - return positions.length === 0 ? null : buildBufferGeometry(positions, normals, uvs) -} - -// ─── Metal profile ─────────────────────────────────────────────────── - -/** - * Bent-sheet-metal ridge cap cross-section. Real metal vents read as a - * smooth arched cap riding above two flat mounting flanges — not the - * old angular peak + bead, which looked like a stamped novelty. Profile: - * - * flange ─┐ ┌─ flange - * │ ◜╶───── rounded ridge cap ─────╶◝ │ - * │ ╱ ╲ │ - * └─╯ ╰────┘ - * - * Built from outer points (Z, Y); the inner shell is offset inward so the - * cap reads as a real folded-metal thickness instead of paper-thin. - */ -function metalProfile(halfW: number, h: number, t: number) { - // Horizontal mounting flange that hugs the shingles on each side. Wide - // enough to read as a real screw-down tab, not a sliver. - const flangeW = halfW * 0.22 - // Where the arched cap takes off from the flange tip — gentle rise so - // the corner reads as a soft fold instead of a hard kink. - const liftH = h * 0.12 - const liftDZ = halfW * 0.04 - // Span and height of the rounded cap. Span stays narrower than the - // overall width so the cap "rides" on the flanges rather than swallow- - // ing them. - const capHalfSpan = halfW * 0.7 - const capPeakY = h - const capStartY = h * 0.45 - const capSegs = 12 - - const outer: [number, number][] = [] - // Left flange — flat horizontal tab. - outer.push([-halfW, 0]) - outer.push([-halfW + flangeW, 0]) - // Soft fold up to the cap's starting shoulder. - outer.push([-halfW + flangeW + liftDZ, liftH]) - outer.push([-capHalfSpan, capStartY]) - // Rounded ridge: half-sine from left shoulder over the top to right - // shoulder. Using sin() (not cos+sin sphere math) keeps the cap's - // tangents continuous with the slope below — no visible kinks. - for (let i = 1; i < capSegs; i++) { - const frac = i / capSegs - const z = -capHalfSpan + frac * (2 * capHalfSpan) - const y = capStartY + (capPeakY - capStartY) * Math.sin(frac * Math.PI) - outer.push([z, y]) - } - // Mirror down the right side. - outer.push([capHalfSpan, capStartY]) - outer.push([halfW - flangeW - liftDZ, liftH]) - outer.push([halfW - flangeW, 0]) - outer.push([halfW, 0]) - - const inner = offsetProfileInward(outer, t) - return { outer, inner } -} - -function segNormal(z0: number, y0: number, z1: number, y1: number): number[] { - const dz = z1 - z0 - const dy = y1 - y0 - const len = Math.sqrt(dz * dz + dy * dy) || 1 - return [0, dz / len, -dy / len] -} - -function buildMetalProfile(halfLen: number, halfW: number, h: number): THREE.BufferGeometry { - const positions: number[] = [] - const normals: number[] = [] - const uvs: number[] = [] - const t = h * SHELL_THICKNESS - const { outer, inner } = metalProfile(halfW, h, t) - - for (let i = 0; i < outer.length - 1; i++) { - const [oz0, oy0] = outer[i]! - const [oz1, oy1] = outer[i + 1]! - const [iz0, iy0] = inner[i]! - const [iz1, iy1] = inner[i + 1]! - - const outerN = segNormal(oz0, oy0, oz1, oy1) - const innerN = segNormal(iz0, iy0, iz1, iy1).map((v) => -v) - - pushQuad( - positions, - normals, - uvs, - [-halfLen, oy0, oz0], - [halfLen, oy0, oz0], - [halfLen, oy1, oz1], - [-halfLen, oy1, oz1], - outerN, - ) - - pushQuad( - positions, - normals, - uvs, - [-halfLen, iy1, iz1], - [halfLen, iy1, iz1], - [halfLen, iy0, iz0], - [-halfLen, iy0, iz0], - innerN, - ) - } - - // Eave bottoms - pushQuad( - positions, - normals, - uvs, - [-halfLen, inner[0]![1], inner[0]![0]], - [halfLen, inner[0]![1], inner[0]![0]], - [halfLen, outer[0]![1], outer[0]![0]], - [-halfLen, outer[0]![1], outer[0]![0]], - [0, -1, 0], - ) - const last = outer.length - 1 - pushQuad( - positions, - normals, - uvs, - [-halfLen, outer[last]![1], outer[last]![0]], - [halfLen, outer[last]![1], outer[last]![0]], - [halfLen, inner[last]![1], inner[last]![0]], - [-halfLen, inner[last]![1], inner[last]![0]], - [0, -1, 0], - ) - - return buildBufferGeometry(positions, normals, uvs) -} - -function buildMetalEndCaps(halfLen: number, halfW: number, h: number): THREE.BufferGeometry | null { - const positions: number[] = [] - const normals: number[] = [] - const uvs: number[] = [] - const t = h * SHELL_THICKNESS - const { outer, inner } = metalProfile(halfW, h, t) - - for (const sign of [-1, 1] as const) { - const x = sign * halfLen - - for (let i = 0; i < outer.length - 1; i++) { - const a: [number, number, number] = [x, outer[i]![1], outer[i]![0]] - const b: [number, number, number] = [x, outer[i + 1]![1], outer[i + 1]![0]] - const c: [number, number, number] = [x, inner[i + 1]![1], inner[i + 1]![0]] - const d: [number, number, number] = [x, inner[i]![1], inner[i]![0]] - if (sign > 0) pushQuad(positions, normals, uvs, a, b, c, d, [sign, 0, 0]) - else pushQuad(positions, normals, uvs, d, c, b, a, [sign, 0, 0]) - } - } - - return positions.length === 0 ? null : buildBufferGeometry(positions, normals, uvs) -} - -// ─── Helpers ───────────────────────────────────────────────────────── - -function offsetProfileInward(pts: [number, number][], t: number): [number, number][] { - const result: [number, number][] = [] - for (let i = 0; i < pts.length; i++) { - const [z, y] = pts[i]! - let dz: number - let dy: number - if (i === 0) { - dz = pts[1]![0] - z - dy = pts[1]![1] - y - } else if (i === pts.length - 1) { - dz = z - pts[i - 1]![0] - dy = y - pts[i - 1]![1] - } else { - dz = pts[i + 1]![0] - pts[i - 1]![0] - dy = pts[i + 1]![1] - pts[i - 1]![1] - } - const len = Math.sqrt(dz * dz + dy * dy) || 1 - const nz = dy / len - const ny = -dz / len - result.push([z + nz * t, y + ny * t]) - } - return result -} +// ─── Geometry plumbing ─────────────────────────────────────────────────── function buildBufferGeometry( positions: number[], @@ -517,38 +243,50 @@ function buildBufferGeometry( geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)) geo.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3)) geo.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2)) + geo.computeBoundingSphere() return geo } +// Winding-safe quad: triangulates (a,b,c,d) and orients both triangles so +// the shared flat normal points toward `hint`. UVs are dimension-based so +// painted presets tile at world scale across the ridge length and the cap. function pushQuad( positions: number[], normals: number[], uvs: number[], - a: number[] | readonly number[], - b: number[] | readonly number[], - c: number[] | readonly number[], - d: number[] | readonly number[], - n: number[] | readonly number[], + a: number[], + b: number[], + c: number[], + d: number[], + hint: number[], ) { - // Dimension-based planar UVs: U follows |b-a|, V follows |d-a|, so - // textures tile at world scale across the ridge length, the arched - // shell, and the end caps. Hardcoded 0..1 UVs stretched each face - // independently — a 2m ridge tile looked the same as a 4cm lip. - const abx = b[0]! - a[0]! - const aby = b[1]! - a[1]! - const abz = b[2]! - a[2]! - const adx = d[0]! - a[0]! - const ady = d[1]! - a[1]! - const adz = d[2]! - a[2]! - const u = Math.sqrt(abx * abx + aby * aby + abz * abz) - const v = Math.sqrt(adx * adx + ady * ady + adz * adz) + let nx = (c[1]! - a[1]!) * (b[2]! - a[2]!) - (c[2]! - a[2]!) * (b[1]! - a[1]!) + let ny = (c[2]! - a[2]!) * (b[0]! - a[0]!) - (c[0]! - a[0]!) * (b[2]! - a[2]!) + let nz = (c[0]! - a[0]!) * (b[1]! - a[1]!) - (c[1]! - a[1]!) * (b[0]! - a[0]!) + const flip = nx * hint[0]! + ny * hint[1]! + nz * hint[2]! < 0 + if (flip) { + nx = -nx + ny = -ny + nz = -nz + } + const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1 + nx /= len + ny /= len + nz /= len - // Winding is (a, c, b) + (a, d, c) so the triangle face direction - // matches the stored normal — same fix as box-vent's pushQuad. - positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, b[0]!, b[1]!, b[2]!) - normals.push(n[0]!, n[1]!, n[2]!, n[0]!, n[1]!, n[2]!, n[0]!, n[1]!, n[2]!) - uvs.push(0, 0, u, v, u, 0) - positions.push(a[0]!, a[1]!, a[2]!, d[0]!, d[1]!, d[2]!, c[0]!, c[1]!, c[2]!) - normals.push(n[0]!, n[1]!, n[2]!, n[0]!, n[1]!, n[2]!, n[0]!, n[1]!, n[2]!) - uvs.push(0, 0, 0, v, u, v) + const u = Math.hypot(b[0]! - a[0]!, b[1]! - a[1]!, b[2]! - a[2]!) + const v = Math.hypot(d[0]! - a[0]!, d[1]! - a[1]!, d[2]! - a[2]!) + + if (flip) { + positions.push(a[0]!, a[1]!, a[2]!, b[0]!, b[1]!, b[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, u, 0, u, v) + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, d[0]!, d[1]!, d[2]!) + uvs.push(0, 0, u, v, 0, v) + } else { + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, b[0]!, b[1]!, b[2]!) + uvs.push(0, 0, u, v, u, 0) + positions.push(a[0]!, a[1]!, a[2]!, d[0]!, d[1]!, d[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, 0, v, u, v) + } + for (let i = 0; i < 6; i++) normals.push(nx, ny, nz) } diff --git a/packages/nodes/src/ridge-vent/move-tool.tsx b/packages/nodes/src/ridge-vent/move-tool.tsx index 2cc215d3..f7890d6f 100644 --- a/packages/nodes/src/ridge-vent/move-tool.tsx +++ b/packages/nodes/src/ridge-vent/move-tool.tsx @@ -14,7 +14,7 @@ import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/edito import { useViewer } from '@pascal-app/viewer' import { useCallback, useEffect, useState } from 'react' import * as THREE from 'three' -import { resolveRoofSegmentHit } from '../roof/segment-hit' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' import RidgeVentPreview from './preview' /** diff --git a/packages/nodes/src/ridge-vent/renderer.tsx b/packages/nodes/src/ridge-vent/renderer.tsx index 505c4b2c..aa993516 100644 --- a/packages/nodes/src/ridge-vent/renderer.tsx +++ b/packages/nodes/src/ridge-vent/renderer.tsx @@ -4,6 +4,7 @@ import { type AnyNodeId, type RidgeVentNode, type RoofSegmentNode, + useLiveNodeOverrides, useRegistry, useScene, } from '@pascal-app/core' @@ -17,6 +18,7 @@ import { } from '@pascal-app/viewer' import { useEffect, useMemo, useRef } from 'react' import * as THREE from 'three' +import { getSurfaceY } from '../shared/roof-surface' import { buildRidgeVentGeometry } from './geometry' // Single white fallback for every style. Paint customisation comes from @@ -28,7 +30,6 @@ const defaultMaterial = new THREE.MeshStandardMaterial({ color: 0xff_ff_ff, roughness: 0.85, metalness: 0.1, - side: THREE.DoubleSide, }) /** @@ -45,15 +46,26 @@ const defaultMaterial = new THREE.MeshStandardMaterial({ * family (matte standard / shingled grey / brushed metal) before the * user opens the paint tray. */ -const RidgeVentRenderer = ({ node }: { node: RidgeVentNode }) => { +const RidgeVentRenderer = ({ node: storeNode }: { node: RidgeVentNode }) => { const ref = useRef(null!) - useRegistry(node.id, 'ridge-vent', ref) - const handlers = useNodeEvents(node, 'ridge-vent') + useRegistry(storeNode.id, 'ridge-vent', ref) + const handlers = useNodeEvents(storeNode, 'ridge-vent') const shading = useViewer((s) => s.shading) const textures = useViewer((s) => s.textures) const colorPreset: ColorPreset = useViewer((s) => s.colorPreset) const sceneTheme = useViewer((s) => s.sceneTheme) + // Merge live drag overrides on top of the store node so handle drags + // update the mesh in-flight without flushing to zustand on every frame. + // Same pattern as box-vent / chimney / dormer — the override is set by + // `NodeArrowHandles`' drag handler and cleared on commit. + const overrides = useLiveNodeOverrides( + (s) => s.get(storeNode.id as AnyNodeId) as Partial | undefined, + ) + const node: RidgeVentNode = overrides + ? ({ ...storeNode, ...overrides } as RidgeVentNode) + : storeNode + const segment = useScene((state) => node.roofSegmentId ? (state.nodes[node.roofSegmentId as AnyNodeId] as RoofSegmentNode | undefined) @@ -67,25 +79,20 @@ const RidgeVentRenderer = ({ node }: { node: RidgeVentNode }) => { useEffect(() => () => geometry.dispose(), [geometry]) - // The preset cache returns materials with `side: FrontSide` (that's - // what the preset payload encodes). For a thin extruded ridge cap that - // makes the underside disappear when the camera dips below the eaves - // — so clone the resolved material and force `DoubleSide` locally - // without mutating the shared cache entry. + // Paint surface: FrontSide everywhere — DoubleSide on the role + // material's NodeMaterial poisons the MRT scene pass (see `materials.ts` + // line 77 / glazing fix 9400f1c5). Earlier this path forced DoubleSide + // so the underside of the thin extruded ridge cap stayed visible from + // below; that's now a known visual tradeoff — building the cap as a + // closed solid in `geometry.ts` is the right fix if the underside-view + // becomes noticeable. const material = useMemo(() => { - // Untextured ridge vent (and textures-off mode) takes the themed - // 'roof' role colour. Request DoubleSide directly so the cached role - // material is the right side — no clone/mutation of a shared material. if (!textures || (!node.material && !node.materialPreset)) { - return createSurfaceRoleMaterial('roof', colorPreset, THREE.DoubleSide, sceneTheme) + return createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme) } - const base = node.material + return node.material ? createMaterial(node.material, shading) : (createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial) - if (base.side === THREE.DoubleSide) return base - const cloned = base.clone() - cloned.side = THREE.DoubleSide - return cloned }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]) if (!segment) return null @@ -102,10 +109,18 @@ const RidgeVentRenderer = ({ node }: { node: RidgeVentNode }) => { const segPos = segment.position ?? [0, 0, 0] const segRotY = segment.rotation ?? 0 + // Seat the vent on the ridge by DERIVING its Y from the segment's current + // surface rather than the stored `position[1]`. The ridge height comes from + // the segment's pitch (`getActiveRoofHeight`), so when the roof is lowered + // the segment updates, this renderer re-runs, and the vent rides the ridge + // down automatically — no stale floating cap. X/Z stay as authored (the vent + // straddles the ridge line at localZ≈0). + const ridgeY = getSurfaceY(node.position[0] ?? 0, node.position[2] ?? 0, segment) + return ( { +// Width arrow on the +X (right) or -X (left) side. Asymmetric resize: +// dragging one arrow grows the segment outward from its own edge while +// the opposite edge stays world-fixed — the same pattern doors use +// (`door/definition.ts:35-73`). The arrow's chevron points outward +// (`rotationY: Math.PI` flips the left arrow's chevron to face -X) so +// you read "this edge is what moves" at a glance. +// +// `apply` recomputes `position` so the anchored edge stays at the same +// world point even when the segment is Y-rotated: project the segment's +// local +X onto world via (cos r, -sin r), find the anchored edge's +// world XZ from the pre-drag node, then place the new center half a +// new-width away from that anchor in the same direction. +function roofSegmentWidthHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 return { kind: 'linear-resize', axis: 'x', - anchor: 'center', + // 'min' = -X edge anchored (right arrow grows the +X edge outward). + // 'max' = +X edge anchored (left arrow grows the -X edge outward). + anchor: side === 'right' ? 'min' : 'max', min: MIN_ROOF_DIM, currentValue: (n) => n.width, - apply: (_n, newValue) => ({ width: newValue }), + apply: (initial, newWidth) => { + const rotY = initial.rotation ?? 0 + const armX = Math.cos(rotY) + const armZ = -Math.sin(rotY) + const anchorX = initial.position[0] - sign * (initial.width / 2) * armX + const anchorZ = initial.position[2] - sign * (initial.width / 2) * armZ + const newCenterX = anchorX + sign * (newWidth / 2) * armX + const newCenterZ = anchorZ + sign * (newWidth / 2) * armZ + return { + width: newWidth, + position: [newCenterX, initial.position[1], newCenterZ], + } + }, placement: { position: (n) => [ - n.width / 2 + SIDE_HANDLE_OFFSET, + sign * (n.width / 2 + SIDE_HANDLE_OFFSET), Math.max(n.wallHeight, MIN_WALL_DISPLAY) / 2, 0, ], + // Flip the left chevron so it points outward toward -X. The + // generic LinearArrow only auto-orients for axis 'z' (rotates the + // chevron 90° to face +Z); +X / -X facing is up to the descriptor. + rotationY: () => (side === 'right' ? 0 : Math.PI), }, } } -// Depth arrow — symmetric on the +Z side. -function roofSegmentDepthHandle(): HandleDescriptor { +// Depth arrow on the +Z (front) or -Z (back) side. Asymmetric: the +// dragged edge follows the pointer, the opposite edge stays world-fixed +// — mirrors the width-handle pattern (`roofSegmentWidthHandle`). Because +// segment depth feeds the pitch math via `getActiveRoofHeight`, growing +// depth at constant pitch ramps the peak up too, which reads as +// scaling. We hold the peak height constant by back-solving a new pitch +// for the new depth (same recipe the pitch handle uses, run in +// reverse). MIN/MAX_PITCH clamps cover degenerate cases where the new +// depth would demand a negative or beyond-vertical pitch. +function roofSegmentDepthHandle(side: 'front' | 'back'): HandleDescriptor { + const sign = side === 'front' ? 1 : -1 return { kind: 'linear-resize', axis: 'z', - anchor: 'center', + anchor: side === 'front' ? 'min' : 'max', min: MIN_ROOF_DIM, currentValue: (n) => n.depth, - apply: (_n, newValue) => ({ depth: newValue }), + apply: (initial, newDepth) => { + // Recenter so the anchored Z edge stays at the same world point. + // Same math as the width handle but along the Z arm: yaw maps + // segment-local +Z to (sin r, cos r) in world. + const rotY = initial.rotation ?? 0 + const armX = Math.sin(rotY) + const armZ = Math.cos(rotY) + const anchorX = initial.position[0] - sign * (initial.depth / 2) * armX + const anchorZ = initial.position[2] - sign * (initial.depth / 2) * armZ + const newCenterX = anchorX + sign * (newDepth / 2) * armX + const newCenterZ = anchorZ + sign * (newDepth / 2) * armZ + + // Preserve peak height — back-solve pitch for the new depth so + // the assembled roof height matches what it was before the drag. + const originalRoofHeight = getActiveRoofHeight(initial) + const newPitch = getPitchFromActiveRoofHeight({ + roofType: initial.roofType, + width: initial.width, + depth: newDepth, + roofHeight: originalRoofHeight, + gambrelLowerWidthRatio: initial.gambrelLowerWidthRatio, + gambrelLowerHeightRatio: initial.gambrelLowerHeightRatio, + mansardSteepWidthRatio: initial.mansardSteepWidthRatio, + mansardSteepHeightRatio: initial.mansardSteepHeightRatio, + dutchHipWidthRatio: initial.dutchHipWidthRatio, + dutchHipHeightRatio: initial.dutchHipHeightRatio, + }) + + return { + depth: newDepth, + position: [newCenterX, initial.position[1], newCenterZ], + pitch: Math.max(MIN_PITCH, Math.min(MAX_PITCH, newPitch)), + } + }, placement: { position: (n) => [ 0, Math.max(n.wallHeight, MIN_WALL_DISPLAY) / 2, - n.depth / 2 + SIDE_HANDLE_OFFSET, + sign * (n.depth / 2 + SIDE_HANDLE_OFFSET), ], + // For axis 'z', `LinearArrow` adds -π/2 around Y so the chevron + // points +Z by default. Flip the back arrow by π so it points -Z. + rotationY: () => (side === 'front' ? 0 : Math.PI), }, } } -// Wall-height arrow — `anchor: 'min'` keeps the base on the floor and -// grows the wall upward. Placed on the -X side at the wall's top edge -// so it doesn't stack on the centered pitch arrow when wallHeight ≈ 0 -// (flat roof / no walls). +// Wall-height tracker — dashed vertical leader from the floor up to a +// draggable cube at the wall top, centred on the footprint. Replaces +// the old -X-side chevron so the wall-top control reads as "the wall is +// THIS tall" instead of "there's an arrow on the side." Drag math is +// unchanged: same linear-resize axis='y' / anchor='min' pipeline as +// every other height handle; the `shape: 'tracker'` flag only swaps the +// visual. Wall-height clamps to MIN_WALL_DISPLAY for placement so the +// cube stays grabbable on flat / wall-less segments where the real +// `wallHeight` is ~0 and the leader would collapse to nothing. function roofSegmentWallHeightHandle(): HandleDescriptor { return { kind: 'linear-resize', axis: 'y', anchor: 'min', + shape: 'tracker', min: MIN_WALL_HEIGHT, currentValue: (n) => n.wallHeight, apply: (_n, newValue) => ({ wallHeight: newValue }), placement: { - position: (n) => [ - -(n.width / 2 + SIDE_HANDLE_OFFSET), - Math.max(n.wallHeight, MIN_WALL_DISPLAY), - 0, - ], + position: (n) => [0, Math.max(n.wallHeight, MIN_WALL_DISPLAY), 0], }, } } @@ -169,8 +244,10 @@ function roofSegmentRotateHandle(): HandleDescriptor { } const roofSegmentHandles: HandleDescriptor[] = [ - roofSegmentWidthHandle(), - roofSegmentDepthHandle(), + roofSegmentWidthHandle('right'), + roofSegmentWidthHandle('left'), + roofSegmentDepthHandle('front'), + roofSegmentDepthHandle('back'), roofSegmentWallHeightHandle(), roofSegmentPitchHandle(), roofSegmentRotateHandle(), @@ -204,6 +281,13 @@ export const roofSegmentDefinition: NodeDefinition = { deletable: true, }, + // Bespoke move shared with roof / stair / stair-segment via + // `shared/move-roof-tool` — routed through `MoveTool`'s registry- + // affordance lookup rather than a hardcoded dispatcher arm. + affordanceTools: { + move: () => import('../shared/move-roof-tool'), + }, + parametrics: roofSegmentParametrics, handles: roofSegmentHandles, diff --git a/packages/nodes/src/roof-segment/floorplan.ts b/packages/nodes/src/roof-segment/floorplan.ts index fec976b1..e91bce9c 100644 --- a/packages/nodes/src/roof-segment/floorplan.ts +++ b/packages/nodes/src/roof-segment/floorplan.ts @@ -7,13 +7,16 @@ import type { } from '@pascal-app/core' /** - * Stage C floor-plan builder for roof segment. Renders the segment's - * footprint as a rotated rectangle in world coords (parent roof's - * position + rotation composed with the segment's own). + * Stage C floor-plan builder for roof segment. Renders the segment as a + * proper architectural roof plan: the footprint outline plus the + * ridge / hip / break linework (and a downslope arrow for sheds) that + * makes each roof shape — hip, gable, shed, gambrel, dutch, mansard, + * flat — read distinctly, rather than as a bare rectangle. * - * Inlined from `getRoofSegmentPolygon` / `getRoofSegmentCenter` in - * `floorplan-panel.tsx`. Ridge line not yet rendered — adds a follow-up - * for full visual parity. + * All linework is derived in segment-local space, mirroring the faces the + * 3D builder (`getModuleFaces` in the roof system) generates per type, so + * the plan and the model agree. Everything is composed into world coords + * via the parent roof's position + rotation and the segment's own. */ export function buildRoofSegmentFloorplan( node: RoofSegmentNode, @@ -41,16 +44,21 @@ export function buildRoofSegmentFloorplan( const halfWidth = node.width / 2 const halfDepth = node.depth / 2 + // Map a segment-local point (lx = width axis, lz = depth axis) into + // world plan coords — the same rotation + translation the footprint + // corners use. Shared by the per-type ridge/hip linework below. + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + const corners: Array<[number, number]> = [ [-halfWidth, -halfDepth], [halfWidth, -halfDepth], [halfWidth, halfDepth], [-halfWidth, halfDepth], ] - const points: FloorplanPoint[] = corners.map(([x, y]) => [ - cx + x * cos - y * sin, - cz + x * sin + y * cos, - ]) + const points: FloorplanPoint[] = corners.map(([x, y]) => toPlan(x, y)) const view = ctx.viewState const palette = view?.palette @@ -77,46 +85,34 @@ export function buildRoofSegmentFloorplan( strokeWidth: 0, pointerEvents: 'all', }, - // Visible outline. - { - kind: 'polygon', - points, - fill: showSelectedChrome ? '#fed7aa' : 'none', - fillOpacity: showSelectedChrome ? 0.55 : 0, - stroke, - strokeWidth: showSelectedChrome ? 0.035 : 0.025, - strokeLinejoin: 'miter', - }, ] - // Ridge line — only for pitched segments, not flat roofs. Dashed - // black so it reads as the ridge (axis of the pitch) without - // competing with the perimeter outline. - if (node.roofType !== 'flat') { - const ridgeAxis = - node.roofType === 'gable' || node.roofType === 'gambrel' - ? 'x' - : node.roofType === 'dutch' - ? node.width >= node.depth - ? 'x' - : 'z' - : 'z' - const axisAngle = ridgeAxis === 'x' ? rotation : rotation + Math.PI / 2 - const halfSpan = ridgeAxis === 'x' ? node.width / 2 : node.depth / 2 + // The segment's own rectangle outline + fill render ONLY while it's + // selected / highlighted — that highlights which sub-plane is active + // (including its interior edges shared with neighbours). When unselected + // the eaves come from the parent roof's merged outline + // (`buildRoofFloorplan`), so overlapping segments read as one combined + // shape instead of stacked rectangles. Ridges/hips below always draw. + if (showSelectedChrome) { children.push({ - kind: 'line', - x1: cx - halfSpan * Math.cos(axisAngle), - y1: cz - halfSpan * Math.sin(axisAngle), - x2: cx + halfSpan * Math.cos(axisAngle), - y2: cz + halfSpan * Math.sin(axisAngle), + kind: 'polygon', + points, + fill: '#fed7aa', + fillOpacity: 0.55, stroke, - strokeWidth: 0.02, - strokeDasharray: '0.1 0.08', - strokeLinecap: 'butt', - opacity: 0.85, + strokeWidth: 0.035, + strokeLinejoin: 'miter', }) } + // NOTE: the ridge / hip / break / slope linework is NOT drawn here — the + // parent roof's builder (`buildRoofFloorplan`) draws it for every segment, + // clipped against the merged-roof valleys so a segment's ridge stops at + // the junction instead of running on into a neighbour it overlaps. This + // builder owns only the per-segment interaction chrome below. The shape + // math lives in `getRoofSegmentPlanLinework` (exported for the roof + // builder to consume). + // Selection chrome — orange move-handle dot at the centre, four // perpendicular side resize-arrows (width on X, depth on Z), and a // rotate-arrow at the +X/+Z corner. Sister to the 3D handles in @@ -173,8 +169,149 @@ export function buildRoofSegmentFloorplan( point: [cx + cornerX, cz + cornerZ], angle: Math.atan2(radialZ, radialX), affordance: 'roof-segment-rotate', + pivot: [cx, cz], }) } return { kind: 'group', children } } + +export type PlanPt = readonly [number, number] +export type PlanSeg = readonly [PlanPt, PlanPt] + +/** + * Ridge / hip / break linework for a roof segment in segment-local space + * (lx = width axis, lz = depth axis), mirroring the faces the 3D builder + * (`getModuleFaces`) generates for each roof type. The floor-plan builder + * maps these to world coords. `slope`, when set, is a shed roof's downhill + * fall direction (tail = high eave, head = low eave). + * + * - ridge: peak line(s) where opposite slopes meet + * - hip: diagonal from an eave corner up to a ridge end / peak + * - break: horizontal fold where the slope angle changes (gambrel kink, + * mansard/dutch waist) + * + * Exported so the roof-level builder can reuse it to terminate the valley + * diagonals it draws at merged-roof junctions against the segments' ridges. + */ +export function getRoofSegmentPlanLinework(node: RoofSegmentNode): { + ridges: PlanSeg[] + hips: PlanSeg[] + breaks: PlanSeg[] + slope: { tail: PlanPt; head: PlanPt } | null +} { + const hw = node.width / 2 + const hd = node.depth / 2 + const ridges: PlanSeg[] = [] + const hips: PlanSeg[] = [] + const breaks: PlanSeg[] = [] + let slope: { tail: PlanPt; head: PlanPt } | null = null + + // Eave corners, matching e1..e4 in the 3D `getModuleFaces` builder. + const e1: PlanPt = [-hw, hd] + const e2: PlanPt = [hw, hd] + const e3: PlanPt = [hw, -hd] + const e4: PlanPt = [-hw, -hd] + + // Hip linework shared by `hip` and the collapsed-waist mansard/dutch + // fallbacks: ridge along the longer axis, four hips from the eave + // corners to the nearer ridge end — or a single peak when square. + const pushHip = () => { + if (Math.abs(node.width - node.depth) < 0.01) { + const peak: PlanPt = [0, 0] + hips.push([e1, peak], [e2, peak], [e3, peak], [e4, peak]) + } else if (node.width >= node.depth) { + const r1: PlanPt = [-hw + hd, 0] + const r2: PlanPt = [hw - hd, 0] + ridges.push([r1, r2]) + hips.push([e1, r1], [e4, r1], [e2, r2], [e3, r2]) + } else { + const r1: PlanPt = [0, hd - hw] + const r2: PlanPt = [0, -hd + hw] + ridges.push([r1, r2]) + hips.push([e1, r1], [e2, r1], [e3, r2], [e4, r2]) + } + } + + switch (node.roofType) { + case 'flat': + break + case 'gable': + // Single ridge down the middle along the width axis. + ridges.push([ + [-hw, 0], + [hw, 0], + ]) + break + case 'shed': + // 3D builder slopes from the high eave (lz = -hd) down to lz = +hd. + slope = { tail: [0, -hd * 0.55], head: [0, hd * 0.55] } + break + case 'hip': + pushHip() + break + case 'gambrel': { + // Ridge + two kink lines parallel to it. + const mz = hd * node.gambrelLowerWidthRatio + ridges.push([ + [-hw, 0], + [hw, 0], + ]) + breaks.push( + [ + [-hw, mz], + [hw, mz], + ], + [ + [-hw, -mz], + [hw, -mz], + ], + ) + break + } + case 'mansard': { + // Inner waist rectangle + four corner hips from the eaves to it. + const i = Math.min(node.width, node.depth) * node.mansardSteepWidthRatio + if (hw - i > 0.02 && hd - i > 0.02) { + const w1: PlanPt = [-hw + i, hd - i] + const w2: PlanPt = [hw - i, hd - i] + const w3: PlanPt = [hw - i, -hd + i] + const w4: PlanPt = [-hw + i, -hd + i] + breaks.push([w1, w2], [w2, w3], [w3, w4], [w4, w1]) + hips.push([e1, w1], [e2, w2], [e3, w3], [e4, w4]) + } else { + pushHip() + } + break + } + case 'dutch': { + // Hipped lower skirt (eave corners → waist corners) + the gablet + // fold, then a gable-style ridge on top of the waist. + const i = Math.min(node.width, node.depth) * node.dutchHipWidthRatio + if (hw - i > 0.02 && hd - i > 0.02) { + const w1: PlanPt = [-hw + i, hd - i] + const w2: PlanPt = [hw - i, hd - i] + const w3: PlanPt = [hw - i, -hd + i] + const w4: PlanPt = [-hw + i, -hd + i] + hips.push([e1, w1], [e2, w2], [e3, w3], [e4, w4]) + breaks.push([w1, w2], [w2, w3], [w3, w4], [w4, w1]) + if (node.width >= node.depth) { + const r1: PlanPt = [-hw + i, 0] + const r2: PlanPt = [hw - i, 0] + ridges.push([r1, r2]) + hips.push([w1, r1], [w4, r1], [w2, r2], [w3, r2]) + } else { + const r1: PlanPt = [0, hd - i] + const r2: PlanPt = [0, -hd + i] + ridges.push([r1, r2]) + hips.push([w1, r1], [w2, r1], [w3, r2], [w4, r2]) + } + } else { + pushHip() + } + break + } + } + + return { ridges, hips, breaks, slope } +} diff --git a/packages/nodes/src/roof/definition.ts b/packages/nodes/src/roof/definition.ts index d18eb13a..8f3663b4 100644 --- a/packages/nodes/src/roof/definition.ts +++ b/packages/nodes/src/roof/definition.ts @@ -1,11 +1,15 @@ import { type NodeDefinition, RoofNode as RoofNodeSchema } from '@pascal-app/core' +import { buildRoofFloorplan } from './floorplan' import { roofParametrics } from './parametrics' import { RoofNode } from './schema' /** * Roof — Stage A registration. Wrap-exports the legacy `RoofRenderer` * + `RoofSystem` (geometry generation via `getRoofSegmentBrushes` + - * CSG). Inspector / move / floorplan stay legacy until Stage B-E. + * CSG). Inspector / move stay legacy until Stage B-E. `floorplan` draws + * the merged silhouette (union of the child segments' footprints), so a + * multi-segment roof reads as one combined shape rather than stacked + * rectangles. * * Roof is a "composite" node — it has `roof-segment` children that * own per-segment geometry. The parent roof handles overall framing; @@ -30,7 +34,16 @@ export const roofDefinition: NodeDefinition = { deletable: true, }, + // Bespoke free-floating move (drag-to-place with R/T rotation and + // wall/fence snapping). Routes through `MoveTool`'s registry-affordance + // lookup — no hardcoded dispatcher arm. Shared with roof-segment / stair + // / stair-segment via `shared/move-roof-tool`. + affordanceTools: { + move: () => import('../shared/move-roof-tool'), + }, + parametrics: roofParametrics, + floorplan: buildRoofFloorplan, renderer: { kind: 'parametric', diff --git a/packages/nodes/src/roof/floorplan.ts b/packages/nodes/src/roof/floorplan.ts new file mode 100644 index 00000000..ca04284e --- /dev/null +++ b/packages/nodes/src/roof/floorplan.ts @@ -0,0 +1,292 @@ +import type { + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RoofNode, + RoofSegmentNode, +} from '@pascal-app/core' +import { unionPolygons } from '@pascal-app/viewer' +import { getRoofSegmentPlanLinework } from '../roof-segment/floorplan' + +type Pt = [number, number] +type Seg = [Pt, Pt] + +function signedArea(ring: readonly Pt[]): number { + let a = 0 + const n = ring.length + for (let i = 0; i < n; i++) { + const p = ring[i] as Pt + const q = ring[(i + 1) % n] as Pt + a += p[0] * q[1] - q[0] * p[1] + } + return a / 2 +} + +/** Distance `t >= 0` from `V` along unit dir `(dx,dz)` to where the ray first + * meets segment `A→B`, or null. (Used to terminate valleys at ridges.) */ +function rayHitT( + vx: number, + vz: number, + dx: number, + dz: number, + ax: number, + az: number, + bx: number, + bz: number, +): number | null { + const ex = bx - ax + const ez = bz - az + const denom = dx * ez - dz * ex + if (Math.abs(denom) < 1e-9) return null + const wx = ax - vx + const wz = az - vz + const t = (wx * ez - wz * ex) / denom + const s = (wx * dz - wz * dx) / denom + if (t < 0) return null + if (s < -1e-6 || s > 1 + 1e-6) return null + return t +} + +function pointInPolygon(px: number, pz: number, poly: readonly Pt[]): boolean { + let inside = false + for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) { + const pi = poly[i] as Pt + const pj = poly[j] as Pt + if ( + pi[1] > pz !== pj[1] > pz && + px < ((pj[0] - pi[0]) * (pz - pi[1])) / (pj[1] - pi[1]) + pi[0] + ) { + inside = !inside + } + } + return inside +} + +/** Parametric `t` in (0,1) along `p1→p2` where it crosses segment `a→b`, else null. */ +function segCrossT(p1: Pt, p2: Pt, a: Pt, b: Pt): number | null { + const rx = p2[0] - p1[0] + const rz = p2[1] - p1[1] + const ex = b[0] - a[0] + const ez = b[1] - a[1] + const denom = rx * ez - rz * ex + if (Math.abs(denom) < 1e-12) return null + const wx = a[0] - p1[0] + const wz = a[1] - p1[1] + const t = (wx * ez - wz * ex) / denom + const s = (wx * rz - wz * rx) / denom + if (t <= 1e-4 || t >= 1 - 1e-9) return null + if (s < -1e-6 || s > 1 + 1e-6) return null + return t +} + +type SegPlan = { + footprint: Pt[] + ridges: Seg[] + hips: Seg[] + breaks: Seg[] + slope: { tail: Pt; head: Pt } | null +} + +/** A segment's footprint + ridge/hip/break/slope linework, in world plan coords. */ +function buildSegPlan(roof: RoofNode, seg: RoofSegmentNode): SegPlan { + const cosRoof = Math.cos(-roof.rotation) + const sinRoof = Math.sin(-roof.rotation) + const segCx = roof.position[0] + seg.position[0] * cosRoof - seg.position[2] * sinRoof + const segCz = roof.position[2] + seg.position[0] * sinRoof + seg.position[2] * cosRoof + const rot = -(roof.rotation + seg.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const tp = (lx: number, lz: number): Pt => [segCx + lx * cos - lz * sin, segCz + lx * sin + lz * cos] + const hw = Math.max(seg.width, 0.01) / 2 + const hd = Math.max(seg.depth, 0.01) / 2 + const lw = getRoofSegmentPlanLinework(seg) + const mapSeg = (s: readonly [readonly [number, number], readonly [number, number]]): Seg => [ + tp(s[0][0], s[0][1]), + tp(s[1][0], s[1][1]), + ] + return { + footprint: [tp(-hw, -hd), tp(hw, -hd), tp(hw, hd), tp(-hw, hd)], + ridges: lw.ridges.map(mapSeg), + hips: lw.hips.map(mapSeg), + breaks: lw.breaks.map(mapSeg), + slope: lw.slope + ? { tail: tp(lw.slope.tail[0], lw.slope.tail[1]), head: tp(lw.slope.head[0], lw.slope.head[1]) } + : null, + } +} + +/** + * Roof-level floor-plan builder. Draws the whole merged-roof plan: the + * unioned silhouette, the valley diagonals at concave junctions, and every + * segment's ridge/hip/break linework — clipped so a line stops at the valley + * where its segment overlaps a neighbour, instead of running on at the + * segment's full length into the cut-away part. + * + * Drawing all the linework here (rather than per-segment) is what lets the + * clip work: the valleys and the neighbouring footprints are all in hand, so + * each line can be trimmed to the actual merged geometry. The segment + * builder keeps only its hit-target / selection chrome. + * + * Composition uses the floor plan's negated-rotation convention + * (segment-local → roof-local → plan). `unionPolygons` returns one ring per + * disjoint group, so non-touching segments each keep their own outline. The + * group is decorative (`pointerEvents: 'none'`) — clicks fall through to the + * segment hit-targets. + */ +export function buildRoofFloorplan( + node: RoofNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segments = ctx.children.filter( + (c): c is RoofSegmentNode => c.type === 'roof-segment', + ) + if (segments.length === 0) return null + + const plans = segments.map((s) => buildSegPlan(node, s)) + const rings = unionPolygons(plans.map((p) => p.footprint)) as Pt[][] + if (rings.length === 0) return null + + // Valleys at concave (reflex) corners of the merged outline. Each runs + // along the interior angle bisector and terminates at the nearest segment + // ridge — the diagonal where two merged slopes meet. + const allRidges: Seg[] = plans.flatMap((p) => p.ridges) + const valleys: Seg[] = [] + for (const ring of rings) { + const n = ring.length + if (n < 3) continue + const orient = signedArea(ring) > 0 ? 1 : -1 + for (let i = 0; i < n; i++) { + const prev = ring[(i - 1 + n) % n] as Pt + const V = ring[i] as Pt + const next = ring[(i + 1) % n] as Pt + const ax = prev[0] - V[0] + const az = prev[1] - V[1] + const bx = next[0] - V[0] + const bz = next[1] - V[1] + if ((ax * bz - az * bx) * orient <= 0) continue // not reflex + const la = Math.hypot(ax, az) || 1 + const lb = Math.hypot(bx, bz) || 1 + let dx = -(ax / la + bx / lb) + let dz = -(az / la + bz / lb) + const dl = Math.hypot(dx, dz) + if (dl < 1e-6) continue + dx /= dl + dz /= dl + let bestT = Number.POSITIVE_INFINITY + for (const [A, B] of allRidges) { + const t = rayHitT(V[0], V[1], dx, dz, A[0], A[1], B[0], B[1]) + if (t !== null && t > 1e-4 && t < bestT) bestT = t + } + if (!Number.isFinite(bestT)) continue + valleys.push([ + [V[0], V[1]], + [V[0] + dx * bestT, V[1] + dz * bestT], + ]) + } + } + + const view = ctx.viewState + const palette = view?.palette + const showSelectedChrome = (view?.selected ?? false) || (view?.highlighted ?? false) + const ink = showSelectedChrome && palette ? palette.selectedStroke : '#111111' + const eaveWidth = showSelectedChrome ? 0.04 : 0.03 + const ridgeWidth = showSelectedChrome ? 0.05 : 0.038 + const hipWidth = showSelectedChrome ? 0.04 : 0.026 + + const children: FloorplanGeometry[] = [] + const pushLine = (a: Pt, b: Pt, width: number) => { + children.push({ + kind: 'line', + x1: a[0], + y1: a[1], + x2: b[0], + y2: b[1], + stroke: ink, + strokeWidth: width, + strokeLinecap: 'round', + pointerEvents: 'none', + }) + } + + // Merged outline (eaves). + for (const ring of rings) { + if (ring.length < 3) continue + children.push({ + kind: 'polygon', + points: ring.map(([x, z]) => [x, z] as FloorplanPoint), + fill: 'none', + stroke: ink, + strokeWidth: eaveWidth, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + } + + // Valley diagonals. + for (const v of valleys) pushLine(v[0], v[1], hipWidth) + + // Per-segment ridge / hip / break linework, clipped to the merged geometry: + // an endpoint that overshoots into another segment is pulled back to the + // valley it crosses (the junction), so a ridge stops at the diagonal. + const footprints = plans.map((p) => p.footprint) + const clipEnd = (pt: Pt, other: Pt, ownIndex: number): Pt => { + let inOther = false + for (let i = 0; i < footprints.length; i++) { + if (i === ownIndex) continue + if (pointInPolygon(pt[0], pt[1], footprints[i] as Pt[])) { + inOther = true + break + } + } + if (!inOther) return pt + let bestT = Number.POSITIVE_INFINITY // nearest valley crossing to the overshoot + for (const v of valleys) { + const t = segCrossT(pt, other, v[0], v[1]) + if (t !== null && t < bestT) bestT = t + } + if (!Number.isFinite(bestT)) return pt // overshoots but no valley to stop at + return [pt[0] + (other[0] - pt[0]) * bestT, pt[1] + (other[1] - pt[1]) * bestT] + } + const clipPush = (line: Seg, width: number, ownIndex: number) => { + const a = clipEnd(line[0], line[1], ownIndex) + const b = clipEnd(line[1], a, ownIndex) + const dx = a[0] - b[0] + const dz = a[1] - b[1] + if (dx * dx + dz * dz < 1e-8) return + pushLine(a, b, width) + } + + plans.forEach((p, idx) => { + for (const s of p.breaks) clipPush(s, hipWidth, idx) + for (const s of p.hips) clipPush(s, hipWidth, idx) + for (const s of p.ridges) clipPush(s, ridgeWidth, idx) + + // Shed downslope arrow (no overshoot to clip). + if (p.slope) { + const { tail, head } = p.slope + const dx = head[0] - tail[0] + const dz = head[1] - tail[1] + const len = Math.hypot(dx, dz) || 1 + const ux = dx / len + const uz = dz / len + const headLen = Math.min(0.22, len * 0.4) + const wing = headLen * 0.6 + pushLine(tail, head, hipWidth) + children.push({ + kind: 'polyline', + points: [ + [head[0] - headLen * ux - wing * uz, head[1] - headLen * uz + wing * ux], + [head[0], head[1]], + [head[0] - headLen * ux + wing * uz, head[1] - headLen * uz - wing * ux], + ], + stroke: ink, + strokeWidth: hipWidth, + strokeLinecap: 'round', + strokeLinejoin: 'round', + pointerEvents: 'none', + }) + } + }) + + return children.length > 0 ? { kind: 'group', children } : null +} diff --git a/packages/nodes/src/roof/index.ts b/packages/nodes/src/roof/index.ts index de387ee0..79202f43 100644 --- a/packages/nodes/src/roof/index.ts +++ b/packages/nodes/src/roof/index.ts @@ -1,2 +1,2 @@ +export { type RoofSegmentHit, resolveRoofSegmentHit } from '../shared/roof-segment-hit' export { roofDefinition } from './definition' -export { type RoofSegmentHit, resolveRoofSegmentHit } from './segment-hit' diff --git a/packages/nodes/src/roof/panel.tsx b/packages/nodes/src/roof/panel.tsx index 9dadc262..094926c1 100644 --- a/packages/nodes/src/roof/panel.tsx +++ b/packages/nodes/src/roof/panel.tsx @@ -6,12 +6,14 @@ import { type BoxVentNode, type ChimneyNode, type DormerNode, + type GutterNode, type RidgeVentNode, type RoofNode, type RoofSegmentNode, RoofSegmentNode as RoofSegmentNodeSchema, type SkylightNode, type SolarPanelNode, + type TurbineVentNode, useScene, } from '@pascal-app/core' import { @@ -31,7 +33,7 @@ import { useCallback, useState } from 'react' import { useShallow } from 'zustand/react/shallow' export default function RoofPanel() { - const [ventType, setVentType] = useState<'box-vent' | 'ridge-vent'>('box-vent') + const [ventType, setVentType] = useState<'box-vent' | 'ridge-vent' | 'turbine-vent'>('box-vent') const selectedId = useViewer((s) => s.selection.selectedIds[0]) const setSelection = useViewer((s) => s.setSelection) const updateNode = useScene((s) => s.updateNode) @@ -112,20 +114,33 @@ export default function RoofPanel() { }), ) + const gutters = useScene( + useShallow((s) => { + if (segmentIdSet.size === 0) return [] + const out: GutterNode[] = [] + for (const n of Object.values(s.nodes)) { + if (n?.type === 'gutter' && n.roofSegmentId && segmentIdSet.has(n.roofSegmentId)) { + out.push(n as GutterNode) + } + } + return out + }), + ) + // Box vents and ridge vents share the "Vents" UI group — same list, // type shown as the right-side label, and an `Add Vent` button with // a Box/Ridge segmented picker. const vents = useScene( useShallow((s) => { if (segmentIdSet.size === 0) return [] - const out: (BoxVentNode | RidgeVentNode)[] = [] + const out: (BoxVentNode | RidgeVentNode | TurbineVentNode)[] = [] for (const n of Object.values(s.nodes)) { if ( - (n?.type === 'box-vent' || n?.type === 'ridge-vent') && + (n?.type === 'box-vent' || n?.type === 'ridge-vent' || n?.type === 'turbine-vent') && n.roofSegmentId && segmentIdSet.has(n.roofSegmentId) ) { - out.push(n as BoxVentNode | RidgeVentNode) + out.push(n as BoxVentNode | RidgeVentNode | TurbineVentNode) } } return out @@ -207,7 +222,20 @@ export default function RoofPanel() { // Same code path as the top palette — see `tool-manager.tsx:28`'s // `nodeRegistry.get(tool)?.tool` dispatch. const activateTool = useCallback( - (kind: 'box-vent' | 'ridge-vent' | 'chimney' | 'solar-panel' | 'skylight' | 'dormer') => { + ( + kind: + | 'box-vent' + | 'ridge-vent' + | 'turbine-vent' + | 'cupola' + | 'eyebrow-vent' + | 'chimney' + | 'solar-panel' + | 'skylight' + | 'dormer' + | 'gutter' + | 'downspout', + ) => { triggerSFX('sfx:item-pick') useEditor.getState().setTool(kind) if (useEditor.getState().mode !== 'build') { @@ -418,18 +446,27 @@ export default function RoofPanel() { > {vent.name || - (vent.type === 'box-vent' ? `Box Vent ${i + 1}` : `Ridge Vent ${i + 1}`)} + (vent.type === 'box-vent' + ? `Box Vent ${i + 1}` + : vent.type === 'ridge-vent' + ? `Ridge Vent ${i + 1}` + : `Turbine Vent ${i + 1}`)} - {vent.type === 'box-vent' ? 'box vent' : 'ridge vent'} + {vent.type === 'box-vent' + ? 'box vent' + : vent.type === 'ridge-vent' + ? 'ridge vent' + : 'turbine vent'} ))} - + onChange={setVentType} options={[ { label: 'Box', value: 'box-vent' }, { label: 'Ridge', value: 'ridge-vent' }, + { label: 'Turbine', value: 'turbine-vent' }, ]} value={ventType} /> @@ -441,6 +478,47 @@ export default function RoofPanel() { />
+ +
+ + } + label="Add Cupola" + onClick={() => activateTool('cupola')} + /> + +
+ +
+ + } + label="Add Eyebrow Vent" + onClick={() => activateTool('eyebrow-vent')} + /> + +
+ +
+ {gutters.map((gutter, i) => ( + + ))} + + } + label="Add Gutter" + onClick={() => activateTool('gutter')} + /> + +
diff --git a/packages/editor/src/components/tools/roof/move-roof-tool.tsx b/packages/nodes/src/shared/move-roof-tool.tsx similarity index 96% rename from packages/editor/src/components/tools/roof/move-roof-tool.tsx rename to packages/nodes/src/shared/move-roof-tool.tsx index be05f382..5b4c2ccc 100644 --- a/packages/editor/src/components/tools/roof/move-roof-tool.tsx +++ b/packages/nodes/src/shared/move-roof-tool.tsx @@ -13,15 +13,17 @@ import { useScene, type WallNode, } from '@pascal-app/core' +import { + CursorSphere, + clearRoofDuplicateMetadata, + snapFenceDraftPoint, + triggerSFX, + useEditor, + type WallPlanPoint, +} from '@pascal-app/editor' import { useViewer } from '@pascal-app/viewer' import { useCallback, useEffect, useRef, useState } from 'react' import * as THREE from 'three' -import { clearRoofDuplicateMetadata } from '../../../lib/roof-duplication' -import { sfxEmitter } from '../../../lib/sfx-bus' -import useEditor from '../../../store/use-editor' -import { snapFenceDraftPoint } from '../fence/fence-drafting' -import { CursorSphere } from '../shared/cursor-sphere' -import type { WallPlanPoint } from '../wall/wall-drafting' export const MoveRoofTool: React.FC<{ node: RoofNode | RoofSegmentNode | StairNode | StairSegmentNode @@ -217,7 +219,7 @@ export const MoveRoofTool: React.FC<{ previousGridPosRef.current && (gridX !== previousGridPosRef.current[0] || gridZ !== previousGridPosRef.current[1]) ) { - sfxEmitter.emit('sfx:grid-snap') + triggerSFX('sfx:grid-snap') } previousGridPosRef.current = [gridX, gridZ] @@ -274,7 +276,7 @@ export const MoveRoofTool: React.FC<{ useScene.temporal.getState().pause() - sfxEmitter.emit('sfx:item-place') + triggerSFX('sfx:item-place') useViewer.getState().setSelection({ selectedIds: [movingNode.id] }) useLiveTransforms.getState().clear(movingNode.id) exitMoveMode() @@ -309,7 +311,7 @@ export const MoveRoofTool: React.FC<{ if (rotationDelta !== 0) { event.preventDefault() - sfxEmitter.emit('sfx:item-rotate') + triggerSFX('sfx:item-rotate') pendingRotation += rotationDelta @@ -371,3 +373,5 @@ export const MoveRoofTool: React.FC<{ ) } + +export default MoveRoofTool diff --git a/packages/nodes/src/roof/segment-hit.ts b/packages/nodes/src/shared/roof-segment-hit.ts similarity index 98% rename from packages/nodes/src/roof/segment-hit.ts rename to packages/nodes/src/shared/roof-segment-hit.ts index 1dada83c..82b41790 100644 --- a/packages/nodes/src/roof/segment-hit.ts +++ b/packages/nodes/src/shared/roof-segment-hit.ts @@ -19,7 +19,7 @@ export type RoofSegmentHit = { /** * Analytical surface Y for `seg` at segment-local (lx, lz). Mirrors - * the per-roof-type slope math in `solar-panel/geometry.ts` so the + * the per-roof-type slope math in `shared/roof-surface.ts` so the * disambiguator below stays free of cross-kind imports. Returns the * roof's local surface height; the value is only used to compare * candidates, never written to the scene. diff --git a/packages/nodes/src/shared/roof-surface.ts b/packages/nodes/src/shared/roof-surface.ts new file mode 100644 index 00000000..7e539308 --- /dev/null +++ b/packages/nodes/src/shared/roof-surface.ts @@ -0,0 +1,158 @@ +import { + getActiveRoofHeight, + getSegmentSlopeFrame, + ROOF_SHAPE_DEFAULTS, + type RoofSegmentNode, +} from '@pascal-app/core' +import * as THREE from 'three' + +// ─── Roof-surface helpers ──────────────────────────────────────────── +// Analytical slope geometry for a roof segment, shared by every roof +// accessory that seats itself on the slope (solar-panel, skylight, +// box-vent). Lives here rather than inside any one kind's folder so the +// accessories don't reach across into a sibling kind for it. + +export function getSurfaceY(lx: number, lz: number, seg: RoofSegmentNode): number { + const { roofType, wallHeight, depth, width } = seg + const rh = getActiveRoofHeight(seg) + const peakY = wallHeight + rh + if (rh === 0) return wallHeight + + if (roofType === 'gable') { + const t = depth > 0 ? Math.abs(lz) / (depth / 2) : 0 + return peakY - t * rh + } + if (roofType === 'shed') { + const t = (lz + depth / 2) / (depth || 1) + return peakY - t * rh + } + if (roofType === 'hip') { + const fx = width > 0 ? Math.abs(lx) / (width / 2) : 0 + const fz = depth > 0 ? Math.abs(lz) / (depth / 2) : 0 + return peakY - Math.max(fx, fz) * rh + } + const t = depth > 0 ? Math.abs(lz) / (depth / 2) : 0 + return peakY - t * rh +} + +// Outward normal for a roof surface tilting at angle θ in the horizontal +// direction (dx, dz). Derivation: the surface tangent vectors are the +// ridge axis (perpendicular to the fall line, horizontal) and the +// down-slope direction (cos θ horizontal + −sin θ vertical). Crossing +// them gives the outward normal ∝ (sin θ · dx, cos θ, sin θ · dz), +// equivalently (dx · tan θ, 1, dz · tan θ) un-normalised. +function buildSlopeNormal(dx: number, dz: number, tan: number): THREE.Vector3 { + return new THREE.Vector3(dx * tan, 1, dz * tan).normalize() +} + +export function getAnalyticalNormal(lx: number, lz: number, seg: RoofSegmentNode): THREE.Vector3 { + const { roofType, depth, width } = seg + const slope = getSegmentSlopeFrame(seg) + if (slope.activeRh === 0 || slope.tanTheta === 0) { + return new THREE.Vector3(0, 1, 0) + } + const primaryTan = slope.tanTheta + const halfW = width / 2 + const halfD = depth / 2 + + // Ridge runs along X — slope falls in ±Z. Gambrel shares the gable + // dispatch (its kink-to-eave/lower tier is the primary slope frame). + if (roofType === 'gable' || roofType === 'gambrel') { + if (roofType === 'gambrel') { + // Tier-aware: the upper (shallower) face spans |z| < mz; the + // lower (steep) face spans mz < |z| ≤ halfD. Using primaryTan on + // the upper tier would tilt the ghost too steeply near the ridge. + const lowerWidthRatio = + seg.gambrelLowerWidthRatio ?? ROOF_SHAPE_DEFAULTS.gambrelLowerWidthRatio + const lowerHeightRatio = + seg.gambrelLowerHeightRatio ?? ROOF_SHAPE_DEFAULTS.gambrelLowerHeightRatio + const mz = halfD * lowerWidthRatio + if (Math.abs(lz) <= mz) { + const upperRise = slope.activeRh * (1 - lowerHeightRatio) + const upperRun = mz + const upperTan = upperRun > 0 ? upperRise / upperRun : 0 + return buildSlopeNormal(0, lz >= 0 ? 1 : -1, upperTan) + } + } + return buildSlopeNormal(0, lz >= 0 ? 1 : -1, primaryTan) + } + + // Single slope falling toward +Z (ridge at -Z, eave at +Z). + if (roofType === 'shed') { + return buildSlopeNormal(0, 1, primaryTan) + } + + // 4-sided slopes: the dominant axis chooses which face the point sits + // on. Hip is uniform across all four faces. Mansard has a steep outer + // band (primaryTan) and a shallow top inside the waist. Dutch has hip + // ends and gable sides — both share the same primaryTan from the + // slope frame, so directional dispatch is enough. + if (roofType === 'hip') { + const fx = halfW > 0 ? Math.abs(lx) / halfW : 0 + const fz = halfD > 0 ? Math.abs(lz) / halfD : 0 + if (fz >= fx) return buildSlopeNormal(0, lz >= 0 ? 1 : -1, primaryTan) + return buildSlopeNormal(lx >= 0 ? 1 : -1, 0, primaryTan) + } + + if (roofType === 'mansard') { + const widthRatio = seg.mansardSteepWidthRatio ?? ROOF_SHAPE_DEFAULTS.mansardSteepWidthRatio + const heightRatio = seg.mansardSteepHeightRatio ?? ROOF_SHAPE_DEFAULTS.mansardSteepHeightRatio + const inset = Math.min(width, depth) * widthRatio + const fx = halfW > 0 ? Math.abs(lx) / halfW : 0 + const fz = halfD > 0 ? Math.abs(lz) / halfD : 0 + const onZ = fz >= fx + const inSteepBand = onZ ? Math.abs(lz) > halfD - inset : Math.abs(lx) > halfW - inset + + let tan = primaryTan + if (!inSteepBand) { + // Top hip (shallow) above the waist — rises from the waist + // rectangle at fraction `heightRatio` of activeRh up to the peak. + const topRise = slope.activeRh * (1 - heightRatio) + const topRun = Math.max(0, Math.min(halfW, halfD) - inset) + tan = topRun > 0 ? topRise / topRun : 0 + } + if (onZ) return buildSlopeNormal(0, lz >= 0 ? 1 : -1, tan) + return buildSlopeNormal(lx >= 0 ? 1 : -1, 0, tan) + } + + if (roofType === 'dutch') { + // Hip on the short-axis ends, gable on the long-axis sides. Both + // share the primary pitch on their primary (eave-band) face, so the + // approximation collapses to "pick the dominant axis." + const fx = halfW > 0 ? Math.abs(lx) / halfW : 0 + const fz = halfD > 0 ? Math.abs(lz) / halfD : 0 + if (fz >= fx) return buildSlopeNormal(0, lz >= 0 ? 1 : -1, primaryTan) + return buildSlopeNormal(lx >= 0 ? 1 : -1, 0, primaryTan) + } + + return new THREE.Vector3(0, 1, 0) +} + +// ─── Quaternion helper ─────────────────────────────────────────────── +// Given a normal in the panel's parent frame, build a rotation that +// aligns the panel's local +Y to that normal. Lifted out so the +// renderer and the placement preview share one source of truth. + +export function surfaceQuatFromNormal(normal: THREE.Vector3, out: THREE.Quaternion) { + // Build `right` by projecting world +X onto the surface plane instead of + // using `up × normal`. The cross-product version flips sign when the + // normal's Z component flips (e.g. the two slopes of a gable roof), so + // the resulting basis has its +X axis reversed on one slope — which + // makes hosted children's local +X point in opposite world directions + // depending on which slope they sit on, and registry chevrons end up + // anchored to the wrong edge. Projecting +X keeps the basis stable + // across slope-flips that share the same X axis. + const wx = new THREE.Vector3(1, 0, 0) + const right = wx.sub(normal.clone().multiplyScalar(new THREE.Vector3(1, 0, 0).dot(normal))) + if (right.lengthSq() < 1e-6) { + // Degenerate: normal is parallel to ±X. Fall back to +Z so the basis + // is still well-defined; this is the wall-like edge case (vertical + // surface facing along X) where any in-plane convention is OK. + right.set(0, 0, 1) + } else { + right.normalize() + } + const forward = new THREE.Vector3().crossVectors(right, normal).normalize() + const m = new THREE.Matrix4().makeBasis(right, normal, forward) + return out.setFromRotationMatrix(m) +} diff --git a/packages/nodes/src/shared/surface-paint.ts b/packages/nodes/src/shared/surface-paint.ts new file mode 100644 index 00000000..cc97dffe --- /dev/null +++ b/packages/nodes/src/shared/surface-paint.ts @@ -0,0 +1,55 @@ +import type { AnyNode, MaterialSchema, PaintCapability } from '@pascal-app/core' +import { createMaterial, createMaterialFromPresetRef } from '@pascal-app/viewer' +import type { Material, Mesh, Object3D } from 'three' + +/** + * Paint capability for kinds with a single painted surface (`role: 'surface'`) + * that register a `` of meshes all sharing one material — the roof + * vents (box / ridge / turbine / cupola / eyebrow). Replaces the editor's + * hardcoded `node.type === ''` paint arms with registry-driven dispatch, + * the same way chimney / dormer / wall declare their own `paint` capability. + */ + +type SurfaceNode = AnyNode & { + material?: MaterialSchema + materialPreset?: string +} + +function buildPreviewMaterial( + material: MaterialSchema | undefined, + materialPreset: string | undefined, +): Material | null { + if (materialPreset) return createMaterialFromPresetRef(materialPreset) + if (material) return createMaterial(material) + return null +} + +export const surfacePaintCapability: PaintCapability = { + // One paintable surface — every face resolves to it. + resolveRole: () => 'surface', + buildPatch: ({ material, materialPreset }) => ({ material, materialPreset }) as Partial, + applyPreview: ({ material, materialPreset, root }) => { + const preview = buildPreviewMaterial(material, materialPreset) + if (!preview) return null + // The kinds register a group, so walk the subtree and swap every child + // mesh's material, recording a restore for each. + const restores: Array<() => void> = [] + ;(root as Object3D).traverse((object) => { + const mesh = object as Mesh + if (!mesh.isMesh) return + const previous = mesh.material + mesh.material = preview + restores.push(() => { + mesh.material = previous + }) + }) + if (restores.length === 0) return null + return () => { + for (let i = restores.length - 1; i >= 0; i -= 1) restores[i]?.() + } + }, + getEffectiveMaterial: ({ node }) => { + const n = node as SurfaceNode + return { material: n.material, materialPreset: n.materialPreset } + }, +} diff --git a/packages/nodes/src/shelf/floorplan.ts b/packages/nodes/src/shelf/floorplan.ts index 4578dbef..3230bd0e 100644 --- a/packages/nodes/src/shelf/floorplan.ts +++ b/packages/nodes/src/shelf/floorplan.ts @@ -134,6 +134,7 @@ export function buildShelfFloorplan(node: ShelfNode, ctx?: GeometryContext): Flo point: [px + cornerPlanX, pz + cornerPlanY], angle: Math.atan2(radialPlanY, radialPlanX), affordance: 'shelf-rotate', + pivot: [px, pz], }) return { kind: 'group', children } diff --git a/packages/nodes/src/skylight/definition.ts b/packages/nodes/src/skylight/definition.ts index 719cdeae..ab4bcc36 100644 --- a/packages/nodes/src/skylight/definition.ts +++ b/packages/nodes/src/skylight/definition.ts @@ -1,5 +1,6 @@ import { type AnyNode, + type HandleDescriptor, type NodeDefinition, type RoofSegmentNode, SkylightNode as SkylightNodeSchema, @@ -10,10 +11,209 @@ import { isOperableSkylightNode, toggleSkylightOpenState, } from './interaction' +import { buildSkylightFloorplan } from './floorplan' import { skylightParametrics } from './parametrics' import { buildSkylightRoofCut } from './roof-cut' import { SkylightNode } from './schema' +// In-world handle constants. Offsets are measured from the skylight's +// edge to the arrow's CENTER, so they need to clear half the chevron's +// own length (~13 cm at default scale) plus the frame's outward depth +// before there's any visible gap. 0.35 m leaves ~15 cm of clear space +// between the chevron's tail and the skylight frame for a typical +// flat / opening skylight; rotate gizmo gets a matching cushion. +const SIDE_HANDLE_OFFSET = 0.35 +const ROTATE_CORNER_OFFSET = 0.35 +// Small +X bump so the rotate gizmo reads as sitting *beside* the corner +// instead of perched on its edge — visually separates it from the +// width chevron that shares the +X side. +const ROTATE_CORNER_X_OFFSET = 0.2 +// Lift the rotate gizmo a little off the surface so it floats above the +// frame instead of sinking into the curb / shingles around the corner. +const ROTATE_CORNER_Y_OFFSET = 0.18 +const ROTATE_RING_OFFSET = 0.06 +// Curb arrow sits a small distance above the current curb top so it stays +// grabbable when the curb collapses to zero (flat / walk-on look) and +// doesn't sink into the frame for tall lantern curbs. +const CURB_HANDLE_OFFSET = 0.18 +const MIN_SKYLIGHT_DIM = 0.2 +const MIN_FRAME_THICKNESS = 0.005 + +// Width arrows live on ±X (left / right edges of the skylight footprint). +// Asymmetric resize: each arrow only moves its own edge, the opposite +// edge stays put — same pattern as the door and the roof-segment width +// handles. `position` is in segment-surface-tangent coords, so after +// changing width we recenter `position` by half the delta along the +// skylight's own +X axis (rotated by `node.rotation` since the inner +// rotation-y group puts skylight-local X at an angle relative to +// segment-local X). +function skylightWidthHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'x', + anchor: side === 'right' ? 'min' : 'max', + min: MIN_SKYLIGHT_DIM, + currentValue: (n) => n.width, + apply: (initial, newWidth) => { + const rotY = initial.rotation ?? 0 + const armX = Math.cos(rotY) + const armZ = -Math.sin(rotY) + const anchorX = initial.position[0] - sign * (initial.width / 2) * armX + const anchorZ = initial.position[2] - sign * (initial.width / 2) * armZ + const newCenterX = anchorX + sign * (newWidth / 2) * armX + const newCenterZ = anchorZ + sign * (newWidth / 2) * armZ + return { + width: newWidth, + position: [newCenterX, initial.position[1], newCenterZ], + } + }, + placement: { + position: (n) => [sign * (n.width / 2 + SIDE_HANDLE_OFFSET), 0, 0], + rotationY: () => (side === 'right' ? 0 : Math.PI), + }, + // Grandparent so handles render inside the roof (visible) instead of + // the segment mesh, which lives inside the roof renderer's + // `` segments wrapper. See skylight/renderer + // for the matching composed-transform group that backs this. + portal: 'grandparent', + } +} + +// Height arrows on ±Z. Skylight `height` is the dimension along the +// roof's slope direction (X is across-slope). Same asymmetric pattern as +// width — anchored edge stays world-fixed, position recenters by half +// delta along the skylight's own +Z axis (rotated by `node.rotation`). +function skylightHeightHandle(side: 'top' | 'bottom'): HandleDescriptor { + const sign = side === 'top' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'z', + anchor: side === 'top' ? 'min' : 'max', + min: MIN_SKYLIGHT_DIM, + currentValue: (n) => n.height, + apply: (initial, newHeight) => { + const rotY = initial.rotation ?? 0 + // Skylight-local +Z projects onto segment-surface +X / +Z as + // (sin r, cos r) — orthogonal to the (cos r, -sin r) basis used + // for the +X axis above. + const armX = Math.sin(rotY) + const armZ = Math.cos(rotY) + const anchorX = initial.position[0] - sign * (initial.height / 2) * armX + const anchorZ = initial.position[2] - sign * (initial.height / 2) * armZ + const newCenterX = anchorX + sign * (newHeight / 2) * armX + const newCenterZ = anchorZ + sign * (newHeight / 2) * armZ + return { + height: newHeight, + position: [newCenterX, initial.position[1], newCenterZ], + } + }, + placement: { + position: (n) => [0, 0, sign * (n.height / 2 + SIDE_HANDLE_OFFSET)], + // The +Z chevron points along +Z by default (axis 'z' auto-rotates + // -π/2 in LinearArrow). For the -Z handle, add +π so it flips. + rotationY: () => (side === 'top' ? 0 : Math.PI), + }, + portal: 'grandparent', + } +} + +// Rotate gizmo at the +X+Z corner of the footprint, with a ring guide +// traced around the corner-diagonal radius — same idiom as the roof- +// segment / column / elevator rotate gizmos. Negate the cursor delta to +// match three.js Y-rotation handedness. +function skylightRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }), + placement: { + position: (n) => { + const halfX = n.width / 2 + const halfZ = n.height / 2 + return [ + halfX + ROTATE_CORNER_X_OFFSET, + ROTATE_CORNER_Y_OFFSET, + halfZ + ROTATE_CORNER_OFFSET, + ] + }, + rotationY: () => -Math.PI / 4, + }, + decoration: { + kind: 'ring', + radius: (n) => Math.hypot(n.width / 2, n.height / 2) + ROTATE_RING_OFFSET, + y: () => 0, + }, + portal: 'grandparent', + } +} + +// Curb-height arrow — vertical chevron above the skylight, dragged up +// to raise the curb. Auto-enables `curb: true` when the user grows from +// zero so the geometry actually has a curb to show; preserves `curb` +// flag once it's been set. Placement floats just above the curb top so +// it tracks the value as the user drags and stays above the frame for +// tall lantern curbs. +function skylightCurbHeightHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + min: 0, + currentValue: (n) => n.curbHeight ?? 0, + apply: (initial, newValue) => ({ + curbHeight: newValue, + // Without this, dragging the arrow on a walk-on (curb: false) + // skylight would change `curbHeight` invisibly because the + // geometry path ignores it when `curb` is false. + curb: initial.curb || newValue > 0, + }), + placement: { + position: (n) => [0, (n.curbHeight ?? 0) + CURB_HANDLE_OFFSET, 0], + }, + portal: 'grandparent', + } +} + +// Frame-thickness arrow — diagonal chevron at the -X+Z (top-left) corner, +// pointing outward along the corner bisector. Lives on the opposite +// corner from the rotate gizmo so they don't compete. axis='z' (instead +// of 'x') so dragging outward toward +Z grows the value 1:1; LinearArrow +// auto-rotates a 'z'-axis chevron by -π/2 (so it points +Z), and the +// extra -π/4 here swings the chevron to -X+Z. The X+Z offsets match +// SIDE_HANDLE_OFFSET on each axis, so the arrow sits the same visual +// distance from the corner that the side chevrons sit from their edges. +function skylightFrameThicknessHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'z', + anchor: 'min', + min: MIN_FRAME_THICKNESS, + currentValue: (n) => n.frameThickness ?? 0.05, + apply: (_n, newValue) => ({ frameThickness: newValue }), + placement: { + position: (n) => [ + -(n.width / 2) - SIDE_HANDLE_OFFSET, + 0, + n.height / 2 + SIDE_HANDLE_OFFSET, + ], + rotationY: () => -Math.PI / 4, + }, + portal: 'grandparent', + } +} + +const skylightHandles: HandleDescriptor[] = [ + skylightWidthHandle('right'), + skylightWidthHandle('left'), + skylightHeightHandle('top'), + skylightHeightHandle('bottom'), + skylightCurbHeightHandle(), + skylightFrameThicknessHandle(), + skylightRotateHandle(), +] + /** * Skylight — a framed glass opening hosted on a roof segment. All five * type variants (flat / walk-on / lantern / opening / sliding) render @@ -51,6 +251,8 @@ export const skylightDefinition: NodeDefinition = { }, parametrics: skylightParametrics, + handles: skylightHandles, + floorplan: buildSkylightFloorplan, renderer: { kind: 'parametric', diff --git a/packages/nodes/src/skylight/floorplan.ts b/packages/nodes/src/skylight/floorplan.ts new file mode 100644 index 00000000..2c4bf4cc --- /dev/null +++ b/packages/nodes/src/skylight/floorplan.ts @@ -0,0 +1,154 @@ +import type { + AnyNodeId, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RoofNode, + RoofSegmentNode, + SkylightNode, +} from '@pascal-app/core' + +/** + * Floor-plan builder for a skylight — a glazed opening set into the roof + * slope. Seen from above it's the classic skylight symbol: an outer frame + * rectangle, an inset glass pane, and a diagonal cross over the glass. + * + * Coordinate frame mirrors the 3D transform stack + * (roof → roof-segment → skylight), same as the chimney builder. + * `position` is segment-local (X = width across slope, Z = height down + * slope; Y ignored — anchored to the slope). `rotation` is yaw. Rotations + * negated for the floor plan's y-down convention. The frame extends + * outward by `frameThickness` past the `width × height` glass opening + * (matching `frame-csg.ts`). + */ +export function buildSkylightFloorplan( + node: SkylightNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const rot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + 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 baseInk = '#475569' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const frameFill = showSelectedChrome ? '#fed7aa' : '#e2e8f0' + const glassFill = showSelectedChrome ? '#fed7aa' : '#dbeafe' + const frameFillOpacity = showSelectedChrome ? 0.55 : 0.7 + const glassFillOpacity = showSelectedChrome ? 0.45 : 0.55 + const lineWidth = showSelectedChrome ? 0.03 : 0.02 + + const hw = Math.max(node.width, 0.1) / 2 + const hh = Math.max(node.height, 0.1) / 2 + const ft = Math.max(0, node.frameThickness ?? 0.05) + const outerHX = hw + ft + const outerHZ = hh + ft + + const rect = (halfX: number, halfZ: number): FloorplanPoint[] => [ + toPlan(-halfX, -halfZ), + toPlan(halfX, -halfZ), + toPlan(halfX, halfZ), + toPlan(-halfX, halfZ), + ] + + const children: FloorplanGeometry[] = [ + // Transparent hit-target over the outer frame. + { + kind: 'polygon', + points: rect(outerHX, outerHZ), + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }, + // Outer frame / curb. + { + kind: 'polygon', + points: rect(outerHX, outerHZ), + fill: frameFill, + fillOpacity: frameFillOpacity, + stroke, + strokeWidth: lineWidth, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }, + // Inset glass pane. + { + kind: 'polygon', + points: rect(hw, hh), + fill: glassFill, + fillOpacity: glassFillOpacity, + stroke, + strokeWidth: lineWidth * 0.8, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }, + ] + + // Diagonal glazing cross over the pane — the standard skylight symbol. + const tl = toPlan(-hw, -hh) + const tr = toPlan(hw, -hh) + const bl = toPlan(-hw, hh) + const br = toPlan(hw, hh) + children.push( + { + kind: 'line', + x1: tl[0], + y1: tl[1], + x2: br[0], + y2: br[1], + stroke, + strokeWidth: lineWidth * 0.7, + strokeOpacity: 0.7, + strokeLinecap: 'round', + pointerEvents: 'none', + }, + { + kind: 'line', + x1: tr[0], + y1: tr[1], + x2: bl[0], + y2: bl[1], + stroke, + strokeWidth: lineWidth * 0.7, + strokeOpacity: 0.7, + strokeLinecap: 'round', + pointerEvents: 'none', + }, + ) + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/skylight/geometry.ts b/packages/nodes/src/skylight/geometry.ts index a4e3b802..72dc04b9 100644 --- a/packages/nodes/src/skylight/geometry.ts +++ b/packages/nodes/src/skylight/geometry.ts @@ -1,5 +1,5 @@ import * as THREE from 'three' -import { getAnalyticalNormal, getSurfaceY } from '../solar-panel/geometry' +import { getAnalyticalNormal, getSurfaceY } from '../shared/roof-surface' export { getAnalyticalNormal, getSurfaceY } diff --git a/packages/nodes/src/skylight/move-tool.tsx b/packages/nodes/src/skylight/move-tool.tsx index d498a87b..07a1e993 100644 --- a/packages/nodes/src/skylight/move-tool.tsx +++ b/packages/nodes/src/skylight/move-tool.tsx @@ -14,6 +14,8 @@ import { markToolCancelConsumed, triggerSFX, useEditor } from '@pascal-app/edito 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 { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' import SkylightPreview from './preview' function resolveSegmentFromWorldPoint( @@ -45,7 +47,15 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) { const previewRef = useRef(null!) const [previewPos, setPreviewPos] = useState<[number, number, number]>([0, 0, 0]) - const [previewQuat, setPreviewQuat] = useState<[number, number, number, number]>([0, 0, 0, 1]) + // Mirror the placement tool's transform stack so the ghost reads the + // same in both flows: outer rotation-y aligns the segment's world yaw + // (roof + segment), inner quaternion tilts to the segment surface in + // segment-local space (analytical, not raycast — raycast normals can + // be flipped or in the wrong frame depending on hit-object state). + // The skylight's own `rotation` is applied on a deeper group so it + // stays editable on top of the surface alignment. + const [previewYaw, setPreviewYaw] = useState(0) + const [previewSurfaceQuat, setPreviewSurfaceQuat] = useState(null) const [hasHit, setHasHit] = useState(false) useEffect(() => { @@ -85,20 +95,30 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) { let lastSnapX = 0 let lastSnapZ = 0 - const captureNormal = (event: RoofEvent) => { - if (!event.normal) return - const n = new THREE.Vector3(event.normal[0], event.normal[1], event.normal[2]) - const nm = new THREE.Matrix3().getNormalMatrix(event.object.matrixWorld) - n.applyMatrix3(nm).normalize() - - const up = new THREE.Vector3(0, 1, 0) - const right = new THREE.Vector3().crossVectors(up, n) - if (right.lengthSq() < 1e-6) right.set(1, 0, 0) - else right.normalize() - const forward = new THREE.Vector3().crossVectors(right, n).normalize() - const m = new THREE.Matrix4().makeBasis(right, n, forward) - const q = new THREE.Quaternion().setFromRotationMatrix(m) - setPreviewQuat([q.x, q.y, q.z, q.w]) + // Resolve which segment the cursor is over, then derive the same + // preview transform stack the placement tool uses (`skylight/tool.tsx`): + // analytical surface normal in segment-local frame → outer yaw = + // roof + segment rotation. Falls back to leaving the preview hidden + // if the cursor is between segments — the placement tool does the + // 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) { + setHasHit(false) + return false + } + const normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.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])) + setHasHit(true) + return true } const onRoofMove = (event: RoofEvent) => { @@ -109,16 +129,12 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) { lastSnapX = sx lastSnapZ = sz } - captureNormal(event) - setPreviewPos(worldToBuildingLocal(event.position[0], event.position[1], event.position[2])) - setHasHit(true) + updateFromHit(event) event.stopPropagation() } const onRoofEnter = (event: RoofEvent) => { - captureNormal(event) - setPreviewPos(worldToBuildingLocal(event.position[0], event.position[1], event.position[2])) - setHasHit(true) + updateFromHit(event) event.stopPropagation() } @@ -147,7 +163,6 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) { }) useScene.temporal.getState().resume() - captureNormal(event) st.updateNode(node.id as AnyNodeId, { roofSegmentId: targetSegmentId, parentId: targetSegmentId, @@ -241,10 +256,16 @@ export default function MoveSkylightTool({ node }: { node: SkylightNode }) { } }, [exitMoveMode, node]) + if (!previewSurfaceQuat) return null + return ( - - - + + + + + + + ) diff --git a/packages/nodes/src/skylight/renderer.tsx b/packages/nodes/src/skylight/renderer.tsx index 8ef51fc9..47bc6dd5 100644 --- a/packages/nodes/src/skylight/renderer.tsx +++ b/packages/nodes/src/skylight/renderer.tsx @@ -22,10 +22,12 @@ import { } from '@pascal-app/viewer' import { useEffect, useMemo, useRef } from 'react' import * as THREE from 'three' -import { surfaceQuatFromNormal } from '../solar-panel/geometry' +import { surfaceQuatFromNormal } from '../shared/roof-surface' import { buildFrameGeometry } from './frame-csg' import { buildLanternGlassGeometry, clamp01, paneSize } from './geometry' +const yAxis = new THREE.Vector3(0, 1, 0) + const defaultFrameMaterial = new THREE.MeshStandardMaterial({ color: 0xff_ff_ff, roughness: 0.3, @@ -662,6 +664,19 @@ const SkylightRenderer = ({ node: storeNode }: { node: SkylightNode }) => { [surfaceFrame.normal], ) + // Compose the surface tilt with the skylight's own yaw so the + // registered ref group below carries the complete "skylight pose in + // segment frame" as a single local position+quaternion. Registry + // handles (`portal: 'grandparent'`) read this Object3D's *local* + // pose, so splitting the tilt and the yaw across nested groups would + // leave the registered group with just the yaw and put the handles + // at the wrong spot. + const composedQuat = useMemo(() => { + const q = new THREE.Quaternion().copy(surfaceQuat) + q.multiply(new THREE.Quaternion().setFromAxisAngle(yAxis, node.rotation ?? 0)) + return q + }, [surfaceQuat, node.rotation]) + const hasCurb = node.curb ?? false const curbH = hasCurb ? Math.max(0, node.curbHeight ?? 0.1) : 0 @@ -672,61 +687,70 @@ const SkylightRenderer = ({ node: storeNode }: { node: SkylightNode }) => { return ( - - - - - {activeType === 'lantern' && ( - - )} - {activeType === 'sliding' && ( - - )} - {activeType === 'opening' && ( - - )} - {(activeType === 'flat' || activeType === 'walk-on') && ( - - )} - - + {/* + Single registered transform group carries the full skylight pose + in segment frame: translation = (skylight.x, surfaceY, skylight.z), + quaternion = surfaceQuat · Y(node.rotation). Used to be three + nested groups; collapsed because registry handles read this + Object3D's *local* position/quaternion (grandparent portal mode), + and a split tree would only expose the bottom group's local pose + (the yaw) — handles would land at the segment origin on the roof + base instead of on the skylight. + */} + + + {activeType === 'lantern' && ( + + )} + {activeType === 'sliding' && ( + + )} + {activeType === 'opening' && ( + + )} + {(activeType === 'flat' || activeType === 'walk-on') && ( + + )} ) diff --git a/packages/nodes/src/skylight/tool.tsx b/packages/nodes/src/skylight/tool.tsx index 59879287..cbaadcb4 100644 --- a/packages/nodes/src/skylight/tool.tsx +++ b/packages/nodes/src/skylight/tool.tsx @@ -13,8 +13,8 @@ import { triggerSFX } 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 '../roof/segment-hit' -import { getAnalyticalNormal, surfaceQuatFromNormal } from '../solar-panel/geometry' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' +import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' import { skylightDefinition } from './definition' import SkylightPreview from './preview' diff --git a/packages/nodes/src/slab/geometry.ts b/packages/nodes/src/slab/geometry.ts index 32ae0631..dd1a6808 100644 --- a/packages/nodes/src/slab/geometry.ts +++ b/packages/nodes/src/slab/geometry.ts @@ -9,7 +9,7 @@ import { generateSlabGeometry, type RenderShading, } from '@pascal-app/viewer' -import { DoubleSide, Group, type Material, Mesh, type Texture } from 'three' +import { FrontSide, Group, type Material, Mesh, type Texture } from 'three' /** * Stage B builder for slab. Reuses `generateSlabGeometry` (pure @@ -40,8 +40,12 @@ function getSlabMaterial( // Untextured slabs (and everything in textures-off mode) take the themed // 'floor' role colour. createSurfaceRoleMaterial returns a shared cached // material, so it is returned as-is without the mutation below. + // FrontSide — DoubleSide on the role material's NodeMaterial poisons the + // MRT scene pass (see `materials.ts` line 77 / glazing fix 9400f1c5). + // Slab side faces still render correctly because `generateSlabGeometry` + // produces outward-facing normals on the top, bottom, and perimeter. if (!textures || (!node.materialPreset && !node.material)) { - return createSurfaceRoleMaterial('floor', colorPreset, DoubleSide, sceneTheme) + return createSurfaceRoleMaterial('floor', colorPreset, FrontSide, sceneTheme) } const cacheKey = JSON.stringify({ @@ -67,7 +71,10 @@ function getSlabMaterial( slabMaterial.transparent = false slabMaterial.opacity = 1 slabMaterial.alphaMap = null - slabMaterial.side = DoubleSide + // FrontSide — user-supplied materials may be NodeMaterials, and DoubleSide + // on any NodeMaterial in the MRT scene pass poisons the render context + // (see `materials.ts` line 77 / glazing fix 9400f1c5). + slabMaterial.side = FrontSide slabMaterial.depthWrite = true slabMaterial.needsUpdate = true diff --git a/packages/nodes/src/solar-panel/definition.ts b/packages/nodes/src/solar-panel/definition.ts index 3525519e..0c129b78 100644 --- a/packages/nodes/src/solar-panel/definition.ts +++ b/packages/nodes/src/solar-panel/definition.ts @@ -1,7 +1,219 @@ -import { type NodeDefinition, SolarPanelNode as SolarPanelNodeSchema } from '@pascal-app/core' +import { + type HandleDescriptor, + type NodeDefinition, + SolarPanelNode as SolarPanelNodeSchema, + type SolarPanelNode as SolarPanelNodeType, +} from '@pascal-app/core' +import { buildSolarPanelFloorplan } from './floorplan' import { solarPanelParametrics } from './parametrics' import { SolarPanelNode } from './schema' +// Handle constants — same scheme as the skylight: edge-to-arrow-center +// offsets that need to clear half the chevron's body (~13 cm at default +// scale) plus the frame thickness before the gap reads. 0.35 m matches +// the skylight's visual cadence; rotate gizmo gets a matching offset + +// a small +X bump so it sits beside (not on) the +X corner. +const SIDE_HANDLE_OFFSET = 0.35 +const ROTATE_CORNER_OFFSET = 0.35 +const ROTATE_CORNER_X_OFFSET = 0.2 +const ROTATE_CORNER_Y_OFFSET = 0.18 +const ROTATE_RING_OFFSET = 0.06 +const MIN_PANEL_DIM = 0.1 +const MIN_FRAME_THICKNESS = 0.005 +const MIN_FRAME_DEPTH = 0.005 +// Small gap above the current frame top so the chevron stays grabbable +// when frameDepth collapses near zero and floats above the frame for +// thicker frames. +const FRAME_DEPTH_HANDLE_OFFSET = 0.15 + +// Total array footprint (meters). `panelWidth` / `panelHeight` are +// per-cell dimensions; arrays multiply by columns/rows and add the +// inter-cell gaps. Handles operate on the TOTAL footprint so the +// dimension label and drag distance feel intuitive (drag the right edge +// by 1 m → array grows 1 m on that side, not 1 m per cell). +function totalArrayWidth(n: SolarPanelNodeType): number { + return n.columns * n.panelWidth + Math.max(0, n.columns - 1) * (n.gapX ?? 0) +} + +function totalArrayHeight(n: SolarPanelNodeType): number { + return n.rows * n.panelHeight + Math.max(0, n.rows - 1) * (n.gapY ?? 0) +} + +// Width arrows on ±X (left / right edges of the array). Asymmetric +// resize — same pattern as the skylight: anchored edge stays world-fixed, +// per-cell `panelWidth` is back-solved from the new total width, and +// `position` shifts by half the actual change along the panel's local +// +X axis (projected to segment-local via the panel's yaw). Clears +// `panelTypePreset` since the dimensions no longer match a saved preset. +function solarPanelWidthHandle(side: 'left' | 'right'): HandleDescriptor { + const sign = side === 'right' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'x', + anchor: side === 'right' ? 'min' : 'max', + min: MIN_PANEL_DIM, + currentValue: (n) => totalArrayWidth(n), + apply: (initial, newTotalWidth) => { + const cols = initial.columns + const gapTotal = Math.max(0, cols - 1) * (initial.gapX ?? 0) + const newPanelWidth = Math.max(MIN_PANEL_DIM, (newTotalWidth - gapTotal) / cols) + const actualNewTotal = cols * newPanelWidth + gapTotal + const initialTotal = totalArrayWidth(initial) + const rotY = initial.rotation ?? 0 + const armX = Math.cos(rotY) + const armZ = -Math.sin(rotY) + const anchorX = initial.position[0] - sign * (initialTotal / 2) * armX + const anchorZ = initial.position[2] - sign * (initialTotal / 2) * armZ + const newCenterX = anchorX + sign * (actualNewTotal / 2) * armX + const newCenterZ = anchorZ + sign * (actualNewTotal / 2) * armZ + return { + panelWidth: newPanelWidth, + position: [newCenterX, initial.position[1], newCenterZ], + panelTypePreset: undefined, + } + }, + placement: { + position: (n) => [sign * (totalArrayWidth(n) / 2 + SIDE_HANDLE_OFFSET), 0, 0], + rotationY: () => (side === 'right' ? 0 : Math.PI), + }, + portal: 'grandparent', + } +} + +// Height arrows on ±Z. Same shape as width but acts on `panelHeight` +// (back-solved from new total height) and projects onto +Z instead of +// +X. The skylight-axis convention applies: +Z is the dimension along +// the roof's slope direction. +function solarPanelHeightHandle(side: 'top' | 'bottom'): HandleDescriptor { + const sign = side === 'top' ? 1 : -1 + return { + kind: 'linear-resize', + axis: 'z', + anchor: side === 'top' ? 'min' : 'max', + min: MIN_PANEL_DIM, + currentValue: (n) => totalArrayHeight(n), + apply: (initial, newTotalHeight) => { + const rws = initial.rows + const gapTotal = Math.max(0, rws - 1) * (initial.gapY ?? 0) + const newPanelHeight = Math.max(MIN_PANEL_DIM, (newTotalHeight - gapTotal) / rws) + const actualNewTotal = rws * newPanelHeight + gapTotal + const initialTotal = totalArrayHeight(initial) + const rotY = initial.rotation ?? 0 + // Panel-local +Z projects to segment-local (sin r, cos r) — + // orthogonal to the panel-local +X basis used for width. + const armX = Math.sin(rotY) + const armZ = Math.cos(rotY) + const anchorX = initial.position[0] - sign * (initialTotal / 2) * armX + const anchorZ = initial.position[2] - sign * (initialTotal / 2) * armZ + const newCenterX = anchorX + sign * (actualNewTotal / 2) * armX + const newCenterZ = anchorZ + sign * (actualNewTotal / 2) * armZ + return { + panelHeight: newPanelHeight, + position: [newCenterX, initial.position[1], newCenterZ], + panelTypePreset: undefined, + } + }, + placement: { + position: (n) => [0, 0, sign * (totalArrayHeight(n) / 2 + SIDE_HANDLE_OFFSET)], + rotationY: () => (side === 'top' ? 0 : Math.PI), + }, + portal: 'grandparent', + } +} + +// Rotate gizmo at the +X+Z corner of the total array footprint, lifted +// slightly off the surface so it doesn't sink into the frame. Negate +// the cursor delta to match three.js Y-rotation handedness. +function solarPanelRotateHandle(): HandleDescriptor { + return { + kind: 'arc-resize', + axis: 'angular', + shape: 'rotate', + apply: (initial, delta) => ({ rotation: (initial.rotation ?? 0) - delta }), + placement: { + position: (n) => { + const halfX = totalArrayWidth(n) / 2 + const halfZ = totalArrayHeight(n) / 2 + return [ + halfX + ROTATE_CORNER_X_OFFSET, + ROTATE_CORNER_Y_OFFSET, + halfZ + ROTATE_CORNER_OFFSET, + ] + }, + rotationY: () => -Math.PI / 4, + }, + decoration: { + kind: 'ring', + radius: (n) => + Math.hypot(totalArrayWidth(n) / 2, totalArrayHeight(n) / 2) + ROTATE_RING_OFFSET, + y: () => 0, + }, + portal: 'grandparent', + } +} + +// Frame-depth arrow — vertical chevron above the array, centred on the +// panel surface. Drag up to grow `frameDepth` (how far the frame sticks +// out from the surface). axis='y' / anchor='min' so the bottom of the +// frame stays pinned at the surface (Y=0 in panel-local) and the top +// follows the cursor. Clears `panelTypePreset` since dimensions no +// longer match a saved preset. +function solarPanelFrameDepthHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + min: MIN_FRAME_DEPTH, + currentValue: (n) => n.frameDepth ?? 0.04, + apply: (_n, newValue) => ({ + frameDepth: newValue, + panelTypePreset: undefined, + }), + placement: { + position: (n) => [0, (n.frameDepth ?? 0.04) + FRAME_DEPTH_HANDLE_OFFSET, 0], + }, + portal: 'grandparent', + } +} + +// Frame-thickness arrow — diagonal chevron at the -X+Z (top-left) corner, +// mirroring the skylight handle. axis='z' so dragging outward toward +Z +// grows the value; rotationY = -π/4 swings the auto-rotated +Z chevron +// to point along the -X+Z corner bisector. Clears `panelTypePreset` +// since the frame dimensions no longer match a saved preset. +function solarPanelFrameThicknessHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'z', + anchor: 'min', + min: MIN_FRAME_THICKNESS, + currentValue: (n) => n.frameThickness ?? 0.04, + apply: (_n, newValue) => ({ + frameThickness: newValue, + panelTypePreset: undefined, + }), + placement: { + position: (n) => [ + -(totalArrayWidth(n) / 2) - SIDE_HANDLE_OFFSET, + 0, + totalArrayHeight(n) / 2 + SIDE_HANDLE_OFFSET, + ], + rotationY: () => -Math.PI / 4, + }, + portal: 'grandparent', + } +} + +const solarPanelHandles: HandleDescriptor[] = [ + solarPanelWidthHandle('right'), + solarPanelWidthHandle('left'), + solarPanelHeightHandle('top'), + solarPanelHeightHandle('bottom'), + solarPanelFrameDepthHandle(), + solarPanelRotateHandle(), + solarPanelFrameThicknessHandle(), +] + /** * Solar panel array — a grid of photovoltaic panels mounted on a roof * segment. Position is segment-local; the surface normal stored on @@ -40,6 +252,8 @@ export const solarPanelDefinition: NodeDefinition = { }, parametrics: solarPanelParametrics, + handles: solarPanelHandles, + floorplan: buildSolarPanelFloorplan, renderer: { kind: 'parametric', diff --git a/packages/nodes/src/solar-panel/floorplan.ts b/packages/nodes/src/solar-panel/floorplan.ts new file mode 100644 index 00000000..dd305cf9 --- /dev/null +++ b/packages/nodes/src/solar-panel/floorplan.ts @@ -0,0 +1,142 @@ +import type { + AnyNodeId, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RoofNode, + RoofSegmentNode, + SolarPanelNode, +} from '@pascal-app/core' + +/** + * Floor-plan builder for a solar-panel array — a grid of photovoltaic + * modules mounted on a roof segment. Seen from above it reads as its + * `rows × columns` grid of dark module rectangles with gaps between them. + * + * Coordinate frame mirrors the 3D transform stack + * (roof → roof-segment → panel), same as the chimney builder. The array's + * `position` is segment-local (X = width axis, Z = depth axis; Y is + * ignored — the 3D renderer anchors it to the slope). `rotation` is yaw. + * Rotations are negated for the floor plan's y-down convention (see + * `buildRoofSegmentFloorplan`). + * + * The per-module layout matches `buildSolarPanelGeometry` exactly: the + * array is centred at the origin, modules step by `panel + gap` along each + * axis (columns along X, rows along Z). A tilted array foreshortens + * slightly in 3D, but the plan shows its full mounting footprint — that's + * what matters for roof layout. + */ +export function buildSolarPanelFloorplan( + node: SolarPanelNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + // Compose roof → segment → panel in plan coords. Each rotation is + // negated so SVG's y-down CW matches Three.js' top-down CCW. + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const rot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + 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 + + // Photovoltaic modules — dark glass with a thin frame. Accent on select, + // light blue on hover. + const baseInk = '#1e293b' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const moduleFill = showSelectedChrome ? '#fed7aa' : '#334155' + const moduleFillOpacity = showSelectedChrome ? 0.5 : 0.85 + const lineWidth = showSelectedChrome ? 0.028 : 0.016 + + // Grid params — guarded + clamped to the schema's ranges so a malformed + // or un-migrated node can't NaN the layout or blow up the module loop. + const rows = Math.max(1, Math.min(20, Math.floor(node.rows ?? 1))) + const columns = Math.max(1, Math.min(20, Math.floor(node.columns ?? 1))) + const panelW = Math.max(0.05, node.panelWidth ?? 1) + const panelH = Math.max(0.05, node.panelHeight ?? 1) + const gapX = Math.max(0, node.gapX ?? 0) + const gapY = Math.max(0, node.gapY ?? 0) + + const totalW = columns * panelW + (columns - 1) * gapX + const totalH = rows * panelH + (rows - 1) * gapY + const originX = -totalW / 2 + const originZ = -totalH / 2 + const halfW = totalW / 2 + const halfH = totalH / 2 + + const children: FloorplanGeometry[] = [ + // One transparent hit-target across the whole array so clicking a gap + // (or any module) selects the array. + { + kind: 'polygon', + points: [ + toPlan(-halfW, -halfH), + toPlan(halfW, -halfH), + toPlan(halfW, halfH), + toPlan(-halfW, halfH), + ], + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }, + ] + + // One filled rectangle per module — same loop as `buildSolarPanelGeometry` + // (columns along X, rows along Z), so the plan grid matches the 3D array. + const hw = panelW / 2 + const hh = panelH / 2 + for (let r = 0; r < rows; r++) { + for (let c = 0; c < columns; c++) { + const mcx = originX + c * (panelW + gapX) + panelW / 2 + const mcz = originZ + r * (panelH + gapY) + panelH / 2 + children.push({ + kind: 'polygon', + points: [ + toPlan(mcx - hw, mcz - hh), + toPlan(mcx + hw, mcz - hh), + toPlan(mcx + hw, mcz + hh), + toPlan(mcx - hw, mcz + hh), + ], + fill: moduleFill, + fillOpacity: moduleFillOpacity, + stroke, + strokeWidth: lineWidth, + strokeLinejoin: 'miter', + pointerEvents: 'none', + }) + } + } + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/solar-panel/geometry.ts b/packages/nodes/src/solar-panel/geometry.ts index b11e7a7a..b0fd944a 100644 --- a/packages/nodes/src/solar-panel/geometry.ts +++ b/packages/nodes/src/solar-panel/geometry.ts @@ -1,10 +1,4 @@ -import { - getActiveRoofHeight, - getSegmentSlopeFrame, - ROOF_SHAPE_DEFAULTS, - type RoofSegmentNode, - type SolarPanelNode, -} from '@pascal-app/core' +import type { RoofSegmentNode, SolarPanelNode } from '@pascal-app/core' import * as THREE from 'three' import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js' import { MeshStandardNodeMaterial } from 'three/webgpu' @@ -196,141 +190,6 @@ export function buildSolarPanelGeometry(node: SolarPanelNode): THREE.BufferGeome return frameMerged } -// ─── Roof-surface helpers ──────────────────────────────────────────── -// Used to drop the panel onto the slope when the schema's -// `surfaceNormal` is absent (legacy data or simplified placement). - -export function getSurfaceY(lx: number, lz: number, seg: RoofSegmentNode): number { - const { roofType, wallHeight, depth, width } = seg - const rh = getActiveRoofHeight(seg) - const peakY = wallHeight + rh - if (rh === 0) return wallHeight - - if (roofType === 'gable') { - const t = depth > 0 ? Math.abs(lz) / (depth / 2) : 0 - return peakY - t * rh - } - if (roofType === 'shed') { - const t = (lz + depth / 2) / (depth || 1) - return peakY - t * rh - } - if (roofType === 'hip') { - const fx = width > 0 ? Math.abs(lx) / (width / 2) : 0 - const fz = depth > 0 ? Math.abs(lz) / (depth / 2) : 0 - return peakY - Math.max(fx, fz) * rh - } - const t = depth > 0 ? Math.abs(lz) / (depth / 2) : 0 - return peakY - t * rh -} - -// Outward normal for a roof surface tilting at angle θ in the horizontal -// direction (dx, dz). Derivation: the surface tangent vectors are the -// ridge axis (perpendicular to the fall line, horizontal) and the -// down-slope direction (cos θ horizontal + −sin θ vertical). Crossing -// them gives the outward normal ∝ (sin θ · dx, cos θ, sin θ · dz), -// equivalently (dx · tan θ, 1, dz · tan θ) un-normalised. -function buildSlopeNormal(dx: number, dz: number, tan: number): THREE.Vector3 { - return new THREE.Vector3(dx * tan, 1, dz * tan).normalize() -} - -export function getAnalyticalNormal(lx: number, lz: number, seg: RoofSegmentNode): THREE.Vector3 { - const { roofType, depth, width } = seg - const slope = getSegmentSlopeFrame(seg) - if (slope.activeRh === 0 || slope.tanTheta === 0) { - return new THREE.Vector3(0, 1, 0) - } - const primaryTan = slope.tanTheta - const halfW = width / 2 - const halfD = depth / 2 - - // Ridge runs along X — slope falls in ±Z. Gambrel shares the gable - // dispatch (its kink-to-eave/lower tier is the primary slope frame). - if (roofType === 'gable' || roofType === 'gambrel') { - if (roofType === 'gambrel') { - // Tier-aware: the upper (shallower) face spans |z| < mz; the - // lower (steep) face spans mz < |z| ≤ halfD. Using primaryTan on - // the upper tier would tilt the ghost too steeply near the ridge. - const lowerWidthRatio = - seg.gambrelLowerWidthRatio ?? ROOF_SHAPE_DEFAULTS.gambrelLowerWidthRatio - const lowerHeightRatio = - seg.gambrelLowerHeightRatio ?? ROOF_SHAPE_DEFAULTS.gambrelLowerHeightRatio - const mz = halfD * lowerWidthRatio - if (Math.abs(lz) <= mz) { - const upperRise = slope.activeRh * (1 - lowerHeightRatio) - const upperRun = mz - const upperTan = upperRun > 0 ? upperRise / upperRun : 0 - return buildSlopeNormal(0, lz >= 0 ? 1 : -1, upperTan) - } - } - return buildSlopeNormal(0, lz >= 0 ? 1 : -1, primaryTan) - } - - // Single slope falling toward +Z (ridge at -Z, eave at +Z). - if (roofType === 'shed') { - return buildSlopeNormal(0, 1, primaryTan) - } - - // 4-sided slopes: the dominant axis chooses which face the point sits - // on. Hip is uniform across all four faces. Mansard has a steep outer - // band (primaryTan) and a shallow top inside the waist. Dutch has hip - // ends and gable sides — both share the same primaryTan from the - // slope frame, so directional dispatch is enough. - if (roofType === 'hip') { - const fx = halfW > 0 ? Math.abs(lx) / halfW : 0 - const fz = halfD > 0 ? Math.abs(lz) / halfD : 0 - if (fz >= fx) return buildSlopeNormal(0, lz >= 0 ? 1 : -1, primaryTan) - return buildSlopeNormal(lx >= 0 ? 1 : -1, 0, primaryTan) - } - - if (roofType === 'mansard') { - const widthRatio = seg.mansardSteepWidthRatio ?? ROOF_SHAPE_DEFAULTS.mansardSteepWidthRatio - const heightRatio = seg.mansardSteepHeightRatio ?? ROOF_SHAPE_DEFAULTS.mansardSteepHeightRatio - const inset = Math.min(width, depth) * widthRatio - const fx = halfW > 0 ? Math.abs(lx) / halfW : 0 - const fz = halfD > 0 ? Math.abs(lz) / halfD : 0 - const onZ = fz >= fx - const inSteepBand = onZ ? Math.abs(lz) > halfD - inset : Math.abs(lx) > halfW - inset - - let tan = primaryTan - if (!inSteepBand) { - // Top hip (shallow) above the waist — rises from the waist - // rectangle at fraction `heightRatio` of activeRh up to the peak. - const topRise = slope.activeRh * (1 - heightRatio) - const topRun = Math.max(0, Math.min(halfW, halfD) - inset) - tan = topRun > 0 ? topRise / topRun : 0 - } - if (onZ) return buildSlopeNormal(0, lz >= 0 ? 1 : -1, tan) - return buildSlopeNormal(lx >= 0 ? 1 : -1, 0, tan) - } - - if (roofType === 'dutch') { - // Hip on the short-axis ends, gable on the long-axis sides. Both - // share the primary pitch on their primary (eave-band) face, so the - // approximation collapses to "pick the dominant axis." - const fx = halfW > 0 ? Math.abs(lx) / halfW : 0 - const fz = halfD > 0 ? Math.abs(lz) / halfD : 0 - if (fz >= fx) return buildSlopeNormal(0, lz >= 0 ? 1 : -1, primaryTan) - return buildSlopeNormal(lx >= 0 ? 1 : -1, 0, primaryTan) - } - - return new THREE.Vector3(0, 1, 0) -} - -// ─── Quaternion helper ─────────────────────────────────────────────── -// Given a normal in the panel's parent frame, build a rotation that -// aligns the panel's local +Y to that normal. Lifted out so the -// renderer and the placement preview share one source of truth. - -export function surfaceQuatFromNormal(normal: THREE.Vector3, out: THREE.Quaternion) { - const up = new THREE.Vector3(0, 1, 0) - const right = new THREE.Vector3().crossVectors(up, normal) - if (right.lengthSq() < 1e-6) right.set(1, 0, 0) - else right.normalize() - const forward = new THREE.Vector3().crossVectors(right, normal).normalize() - const m = new THREE.Matrix4().makeBasis(right, normal, forward) - return out.setFromRotationMatrix(m) -} - // ─── Layout helpers (used by the inspector / placement tool) ───────── function getSlopeDepthBounds( diff --git a/packages/nodes/src/solar-panel/index.ts b/packages/nodes/src/solar-panel/index.ts index d446166c..c0f9399f 100644 --- a/packages/nodes/src/solar-panel/index.ts +++ b/packages/nodes/src/solar-panel/index.ts @@ -1,10 +1,4 @@ +export { getAnalyticalNormal, getSurfaceY, surfaceQuatFromNormal } from '../shared/roof-surface' export { solarPanelDefinition } from './definition' -export { - buildSolarPanelGeometry, - computeAutoFit, - flippedPanelDims, - getAnalyticalNormal, - getSurfaceY, - surfaceQuatFromNormal, -} from './geometry' +export { buildSolarPanelGeometry, computeAutoFit, flippedPanelDims } from './geometry' export { SolarPanelNode } from './schema' diff --git a/packages/nodes/src/solar-panel/move-tool.tsx b/packages/nodes/src/solar-panel/move-tool.tsx index 1394cde7..b181c610 100644 --- a/packages/nodes/src/solar-panel/move-tool.tsx +++ b/packages/nodes/src/solar-panel/move-tool.tsx @@ -14,8 +14,8 @@ import { EDITOR_LAYER, markToolCancelConsumed, triggerSFX, useEditor } from '@pa import { useViewer } from '@pascal-app/viewer' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import * as THREE from 'three' -import { resolveRoofSegmentHit } from '../roof/segment-hit' -import { getAnalyticalNormal, surfaceQuatFromNormal } from './geometry' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' +import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' // MeshBasicMaterial: avoids the WebGPU "Color target has no corresponding // fragment stage output / writeMask not zero" error that fires when diff --git a/packages/nodes/src/solar-panel/renderer.tsx b/packages/nodes/src/solar-panel/renderer.tsx index 08893869..663a5608 100644 --- a/packages/nodes/src/solar-panel/renderer.tsx +++ b/packages/nodes/src/solar-panel/renderer.tsx @@ -13,19 +13,23 @@ import { createMaterial, createMaterialFromPresetRef, createSurfaceRoleMaterial, + getRoofOuterSurfaceFrameAtPoint, useNodeEvents, useViewer, } from '@pascal-app/viewer' import { useEffect, useMemo, useRef } from 'react' import * as THREE from 'three' import { MeshStandardNodeMaterial } from 'three/webgpu' -import { - buildSolarPanelGeometry, - getAnalyticalNormal, - getDefaultPanelMaterial, - getSurfaceY, - surfaceQuatFromNormal, -} from './geometry' +import { surfaceQuatFromNormal } from '../shared/roof-surface' +import { buildSolarPanelGeometry, getDefaultPanelMaterial } from './geometry' + +// Module-scope scratch vectors and quaternions for composing the panel's +// local orientation each render — surfaceQuat · Y(rotation) · X(tilt). +// Reused so we don't allocate four objects per frame. +const yAxis = new THREE.Vector3(0, 1, 0) +const xAxis = new THREE.Vector3(1, 0, 0) +const panelYawQuat = new THREE.Quaternion() +const panelTiltQuat = new THREE.Quaternion() // MeshStandardNodeMaterial: WebGPU-native so it integrates correctly with // the MRT pass (normal + roughness attachments). The legacy WebGL @@ -39,9 +43,17 @@ const defaultFrameMaterial = new MeshStandardNodeMaterial({ }) /** - * Solar panel renderer. Reads the parent roof-segment so the panel's - * Y can fall back to the analytical surface height when the schema's - * `surfaceNormal` is absent (legacy nodes / simplified placement). + * Solar panel renderer. The panel's Y and surface tilt are derived + * live from the parent roof-segment's finished (deck + shingle) surface + * on every render via `getRoofOuterSurfaceFrameAtPoint` — the same + * authoritative helper skylights use. Deriving rather than reading the + * stored `position[1]`/`surfaceNormal` snapshot is what lets the panel + * re-seat and re-tilt automatically when the roof's wall height or + * pitch changes; a cached snapshot would leave it floating or buried. + * + * The segment's live overrides are merged too, so the panel tracks the + * surface continuously during a wall-height/pitch drag, not just after + * the value commits to the scene store. * * The surface orientation is applied as a quaternion on an inner * group computed once per render (not per frame). This matches the @@ -72,6 +84,20 @@ const SolarPanelRenderer = ({ node: storeNode }: { node: SolarPanelNode }) => { : undefined, ) + // Merge the segment's live overrides (written by wall-height / pitch + // slider drags before they commit) so the panel re-seats and re-tilts + // in real time as the roof changes, mirroring the gutter's eave-snap. + const segmentOverrides = useLiveNodeOverrides((s) => + node.roofSegmentId + ? (s.get(node.roofSegmentId as AnyNodeId) as Partial | undefined) + : undefined, + ) + const effectiveSegment: RoofSegmentNode | undefined = segment + ? segmentOverrides + ? ({ ...segment, ...segmentOverrides } as RoofSegmentNode) + : segment + : undefined + const geometry = useMemo( () => buildSolarPanelGeometry(node), [ @@ -107,49 +133,67 @@ const SolarPanelRenderer = ({ node: storeNode }: { node: SolarPanelNode }) => { ) }, [shading, node.panelMaterial, node.panelMaterialPreset]) - const surfaceQuat = useMemo(() => { - if (!segment) return new THREE.Quaternion() - const normal = node.surfaceNormal - ? new THREE.Vector3(...node.surfaceNormal).normalize() - : getAnalyticalNormal(node.position[0] ?? 0, node.position[2] ?? 0, segment) - return surfaceQuatFromNormal(normal, new THREE.Quaternion()) - }, [segment, node.surfaceNormal, node.position[0], node.position[2]]) + // Finished-surface frame (deck + shingle top) at the panel's local + // X/Z, recomputed from the live segment each render — both the Y and + // the tilt normal flow from here, so a wall-height or pitch change + // re-seats and re-orients the panel automatically. `segmentOverrides` + // is in the deps so a live drag re-derives the frame mid-drag. + const surfaceFrame = useMemo(() => { + if (!effectiveSegment) { + return { point: new THREE.Vector3(), normal: new THREE.Vector3(0, 1, 0) } + } + return getRoofOuterSurfaceFrameAtPoint( + effectiveSegment, + node.position[0] ?? 0, + node.position[2] ?? 0, + ) + }, [segment, segmentOverrides, node.position[0], node.position[2]]) - if (!segment || !geometry) return null + const surfaceQuat = useMemo( + () => surfaceQuatFromNormal(surfaceFrame.normal, new THREE.Quaternion()), + [surfaceFrame.normal], + ) - const surfaceY = - (node.position[1] ?? 0) !== 0 - ? node.position[1] - : getSurfaceY(node.position[0] ?? 0, node.position[2] ?? 0, segment) + if (!effectiveSegment || !geometry) return null + + const surfaceY = surfaceFrame.point.y const tiltRad = node.mountingType === 'tilted' ? (node.tiltAngle * Math.PI) / 180 : 0 + // Compose surfaceQuat · Y(rotation) · X(tilt) into a single quaternion + // so the registered group below carries the panel's complete local pose + // (position + orientation) as its own *local* matrix. Registry handles + // (`portal: 'grandparent'`) read this Object3D's local position + + // quaternion to ride the panel; splitting the rotation across nested + // groups would leave the registered group with only the position and + // an identity quaternion, so the arrows would land on the segment-flat + // axes instead of on the tilted panel. + const composedQuat = new THREE.Quaternion() + .copy(surfaceQuat) + .multiply(panelYawQuat.setFromAxisAngle(yAxis, node.rotation ?? 0)) + .multiply(panelTiltQuat.setFromAxisAngle(xAxis, tiltRad)) + // Roof accessories are mounted under `` // in the roof renderer — that group has NO transform, so the segment // frame is NOT inherited from the React tree. Apply segment.position - // and segment.rotation here, then the panel's segment-local offset, - // then surface quat / yaw / tilt. + // and segment.rotation here, then the panel's segment-local offset + + // composed orientation on a single registered group. return ( - + - - - - - - - + ) diff --git a/packages/nodes/src/solar-panel/tool.tsx b/packages/nodes/src/solar-panel/tool.tsx index afed1a46..9289e230 100644 --- a/packages/nodes/src/solar-panel/tool.tsx +++ b/packages/nodes/src/solar-panel/tool.tsx @@ -13,9 +13,9 @@ import { triggerSFX } 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 '../roof/segment-hit' +import { resolveRoofSegmentHit } from '../shared/roof-segment-hit' +import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' import { solarPanelDefinition } from './definition' -import { getAnalyticalNormal, surfaceQuatFromNormal } from './geometry' import SolarPanelPreview from './preview' const worldPoint = new THREE.Vector3() diff --git a/packages/nodes/src/stair-segment/definition.ts b/packages/nodes/src/stair-segment/definition.ts index 12578885..63333a61 100644 --- a/packages/nodes/src/stair-segment/definition.ts +++ b/packages/nodes/src/stair-segment/definition.ts @@ -122,6 +122,13 @@ export const stairSegmentDefinition: NodeDefinition = { deletable: true, }, + // Bespoke move shared with roof / roof-segment / stair via + // `shared/move-roof-tool` — routed through `MoveTool`'s registry- + // affordance lookup rather than a hardcoded dispatcher arm. + affordanceTools: { + move: () => import('../shared/move-roof-tool'), + }, + parametrics: stairSegmentParametrics, handles: stairSegmentHandles, diff --git a/packages/nodes/src/stair/definition.ts b/packages/nodes/src/stair/definition.ts index f5db5143..d5ff25a8 100644 --- a/packages/nodes/src/stair/definition.ts +++ b/packages/nodes/src/stair/definition.ts @@ -322,6 +322,13 @@ export const stairDefinition: NodeDefinition = { deletable: true, }, + // Bespoke move shared with roof / roof-segment / stair-segment via + // `shared/move-roof-tool` — routed through `MoveTool`'s registry- + // affordance lookup rather than a hardcoded dispatcher arm. + affordanceTools: { + move: () => import('../shared/move-roof-tool'), + }, + parametrics: stairParametrics, handles: stairHandles, diff --git a/packages/nodes/src/stair/floorplan.ts b/packages/nodes/src/stair/floorplan.ts index ead2f758..eeabc2d3 100644 --- a/packages/nodes/src/stair/floorplan.ts +++ b/packages/nodes/src/stair/floorplan.ts @@ -464,6 +464,7 @@ export function buildStairFloorplan( point: [planX, planY], angle: radialAngle, affordance: 'stair-rotate', + pivot: [cx, cz], }) } diff --git a/packages/nodes/src/stair/renderer.tsx b/packages/nodes/src/stair/renderer.tsx index 136781c2..903ad3ed 100644 --- a/packages/nodes/src/stair/renderer.tsx +++ b/packages/nodes/src/stair/renderer.tsx @@ -155,16 +155,26 @@ export const StairRenderer = ({ node: rawNode }: { node: StairNode }) => { function StairRailings({ stair, material }: { stair: StairNode; material: THREE.Material }) { const nodes = useScene((state) => state.nodes) + // Stair segments' width/length/height arrow handles publish drag values to + // `useLiveNodeOverrides` and only commit to zustand on release. Subscribing + // here and merging each child segment's override means the railing tracks + // the drag in real time instead of freezing at the pre-drag values. + const overrides = useLiveNodeOverrides((s) => s.overrides) const segments = useMemo( () => (stair.children ?? []) - .map((childId) => nodes[childId as AnyNodeId] as StairSegmentNode | undefined) + .map((childId) => { + const base = nodes[childId as AnyNodeId] as StairSegmentNode | undefined + if (!base) return undefined + const override = overrides.get(childId as AnyNodeId) + return (override ? { ...base, ...override } : base) as StairSegmentNode + }) .filter( (node): node is StairSegmentNode => node?.type === 'stair-segment' && node.visible !== false, ), - [nodes, stair.children], + [nodes, overrides, stair.children], ) const railPaths = useMemo( diff --git a/packages/nodes/src/turbine-vent/__tests__/geometry.test.ts b/packages/nodes/src/turbine-vent/__tests__/geometry.test.ts new file mode 100644 index 00000000..62337275 --- /dev/null +++ b/packages/nodes/src/turbine-vent/__tests__/geometry.test.ts @@ -0,0 +1,55 @@ +import { describe, expect, test } from 'bun:test' +import { buildTurbineVentBase, buildTurbineVentGeometry, buildTurbineVentHead } from '../geometry' +import { TurbineVentNode } from '../schema' + +function allFinite(geo: { getAttribute: (n: string) => { array: ArrayLike } }): boolean { + const arr = geo.getAttribute('position').array + for (let i = 0; i < arr.length; i++) { + if (!Number.isFinite(arr[i])) return false + } + return true +} + +describe('turbine vent geometry', () => { + test('combined geometry is a non-empty BufferGeometry with matching attributes', () => { + const geo = buildTurbineVentGeometry(TurbineVentNode.parse({})) + const positions = geo.getAttribute('position') + const normals = geo.getAttribute('normal') + const uvs = geo.getAttribute('uv') + expect(positions.count).toBeGreaterThan(0) + expect(normals.count).toBe(positions.count) + expect(uvs.count).toBe(positions.count) + }) + + test('base and head both produce finite, non-empty geometry', () => { + const node = TurbineVentNode.parse({}) + const base = buildTurbineVentBase(node) + const head = buildTurbineVentHead(node) + expect(base.getAttribute('position').count).toBeGreaterThan(0) + expect(head.getAttribute('position').count).toBeGreaterThan(0) + expect(allFinite(base)).toBe(true) + expect(allFinite(head)).toBe(true) + }) + + test('both styles build finite geometry', () => { + for (const style of ['globe', 'cylinder'] as const) { + const geo = buildTurbineVentGeometry(TurbineVentNode.parse({ style })) + expect(geo.getAttribute('position').count).toBeGreaterThan(0) + expect(allFinite(geo)).toBe(true) + } + }) + + test('vane count scales the head vertex count', () => { + const few = buildTurbineVentHead(TurbineVentNode.parse({ vaneCount: 8 })) + const many = buildTurbineVentHead(TurbineVentNode.parse({ vaneCount: 30 })) + expect(many.getAttribute('position').count).toBeGreaterThan(few.getAttribute('position').count) + }) + + test('legacy / extreme dimensions never go NaN', () => { + const geo = buildTurbineVentGeometry( + TurbineVentNode.parse({ diameter: 0.01, height: 0.01, neckHeight: 5, vaneCount: 100 }), + ) + expect(geo.getAttribute('position').count).toBeGreaterThan(0) + expect(allFinite(geo)).toBe(true) + }) +}) diff --git a/packages/nodes/src/turbine-vent/definition.ts b/packages/nodes/src/turbine-vent/definition.ts new file mode 100644 index 00000000..c5058181 --- /dev/null +++ b/packages/nodes/src/turbine-vent/definition.ts @@ -0,0 +1,138 @@ +import { + type HandleDescriptor, + type NodeDefinition, + TurbineVentNode as TurbineVentNodeSchema, + type TurbineVentNode as TurbineVentNodeType, +} from '@pascal-app/core' +import { surfacePaintCapability } from '../shared/surface-paint' +import { buildTurbineVentFloorplan } from './floorplan' +import { turbineVentParametrics } from './parametrics' +import { TurbineVentNode } from './schema' + +const SIDE_HANDLE_OFFSET = 0.25 +const HEIGHT_HANDLE_OFFSET = 0.2 +const MIN_DIM = 0.12 +const MIN_HEIGHT = 0.12 + +function getBodyMidY(n: TurbineVentNodeType): number { + return Math.max(0.001, n.height) / 2 +} + +// Diameter arrow on the +X side. The turbine is radially symmetric, so a +// single symmetric chevron (anchor 'center') grows the whole head from +// the centre — no left/right asymmetry to preserve. +function turbineVentDiameterHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'x', + anchor: 'center', + min: MIN_DIM, + currentValue: (n) => n.diameter, + apply: (_n, newValue) => ({ diameter: Math.max(MIN_DIM, newValue) }), + placement: { + position: (n) => [n.diameter / 2 + SIDE_HANDLE_OFFSET, getBodyMidY(n), 0], + }, + } +} + +// Height arrow above the top. anchor='min' pins the flange base to the +// slope at vent-local y=0 and the top follows the pointer. +function turbineVentHeightHandle(): HandleDescriptor { + return { + kind: 'linear-resize', + axis: 'y', + anchor: 'min', + min: MIN_HEIGHT, + currentValue: (n) => n.height, + apply: (_n, newValue) => ({ height: Math.max(MIN_HEIGHT, newValue) }), + placement: { + position: (n) => [0, Math.max(n.height, MIN_HEIGHT) + HEIGHT_HANDLE_OFFSET, 0], + }, + } +} + +// `portal: 'grandparent'` on every handle — see box-vent's note. The vent +// rides the roof→segment→node frame chain, so the handle rig must too, or +// the handles render offset from the vent. +const turbineVentHandles: HandleDescriptor[] = [ + turbineVentDiameterHandle(), + turbineVentHeightHandle(), +].map((h): HandleDescriptor => ({ ...h, portal: 'grandparent' })) + +/** + * Turbine vent (whirlybird) — a wind-driven spinning exhaust vent that + * sits on a roof slope. Parented to a `roof-segment`; position is + * segment-local; rotation rotates the vent around the segment's vertical + * axis after the slope tilt is applied. + * + * Composition (three-checkbox model): + * - **`renderer` (custom)** — like the box vent, the turbine needs the + * parent segment's transform + slope to position itself, which the + * registry-era roof-segment renderer doesn't auto-nest. The custom + * renderer reads the segment from `useScene`, applies the transform + * stack, and — uniquely among vents — drives the head's idle spin via + * `useFrame`. The spin lives in the renderer (not a `def.system`) + * because it's purely cosmetic: no cross-node cascade, no shared + * animation state, and it must not perturb the handle frame. + * - **no `geometry`** — geometry is created inside the renderer via the + * shared pure builders in `./geometry` (split base / head so the head + * can spin independently), matching box-vent's mount semantics. + * - **no `system`** — see above; the spin is renderer-local. + */ +export const turbineVentDefinition: NodeDefinition = { + kind: 'turbine-vent', + schemaVersion: 1, + schema: TurbineVentNode, + category: 'structure', + surfaceRole: 'roof', + + defaults: () => { + const stub = TurbineVentNodeSchema.parse({ id: 'tvent_default' as never, type: 'turbine-vent' }) + const { id: _id, type: _type, ...rest } = stub + return rest + }, + + capabilities: { + selectable: { hitVolume: 'bbox' }, + duplicable: true, + deletable: true, + // Single painted surface — registry-driven paint dispatch (see chimney). + paint: surfacePaintCapability, + // Mounts on a roof segment via `roofSegmentId`. Sits ON TOP of the + // slope — no `buildCut`, just the dirty cascade so the parent roof's + // merged shell rebuilds when the vent moves / resizes. + roofAccessory: {}, + }, + + parametrics: turbineVentParametrics, + handles: turbineVentHandles, + floorplan: buildTurbineVentFloorplan, + + renderer: { + kind: 'parametric', + module: () => import('./renderer'), + }, + + preview: () => import('./preview'), + tool: () => import('./tool'), + affordanceTools: { + move: () => import('./move-tool'), + }, + toolHints: [ + { key: 'Left click', label: 'Place turbine vent on roof' }, + { key: 'Esc', label: 'Cancel' }, + ], + + presentation: { + label: 'Turbine Vent', + description: 'Wind-driven spinning whirlybird exhaust vent for a roof slope.', + icon: { kind: 'url', src: '/icons/roof.png' }, + paletteSection: 'structure', + paletteOrder: 121, + }, + + mcp: { + description: + 'A spinning turbine (whirlybird) vent on a roof segment. Style: globe / cylinder. Parametric diameter/height/neckHeight/vaneCount and idle spinSpeed.', + }, +} diff --git a/packages/nodes/src/turbine-vent/floorplan.ts b/packages/nodes/src/turbine-vent/floorplan.ts new file mode 100644 index 00000000..9db3280b --- /dev/null +++ b/packages/nodes/src/turbine-vent/floorplan.ts @@ -0,0 +1,135 @@ +import type { + AnyNodeId, + FloorplanGeometry, + FloorplanPoint, + GeometryContext, + RoofNode, + RoofSegmentNode, + TurbineVentNode, +} from '@pascal-app/core' + +/** + * Floor-plan builder for a turbine vent — seen from above it reads as the + * round flange flashing with the head circle inside and short radial ticks + * suggesting the vanes. + * + * Coordinate frame mirrors the 3D transform stack + * (roof → roof-segment → vent), same as the box-vent builder. `position` + * is segment-local; `rotation` is yaw; rotations are negated for the floor + * plan's y-down convention. + */ +export function buildTurbineVentFloorplan( + node: TurbineVentNode, + ctx: GeometryContext, +): FloorplanGeometry | null { + const segment = ctx.parent as RoofSegmentNode | null + if (!segment || segment.type !== 'roof-segment') return null + const roofId = segment.parentId as AnyNodeId | null + const roof = roofId ? (ctx.resolve(roofId) as RoofNode | undefined) : undefined + if (!roof || roof.type !== 'roof') return null + + const cosR = Math.cos(-roof.rotation) + const sinR = Math.sin(-roof.rotation) + const segCx = roof.position[0] + segment.position[0] * cosR - segment.position[2] * sinR + const segCz = roof.position[2] + segment.position[0] * sinR + segment.position[2] * cosR + + const segRot = -(roof.rotation + segment.rotation) + const cosS = Math.cos(segRot) + const sinS = Math.sin(segRot) + const cx = segCx + node.position[0] * cosS - node.position[2] * sinS + const cz = segCz + node.position[0] * sinS + node.position[2] * cosS + + const rot = -(roof.rotation + segment.rotation + node.rotation) + const cos = Math.cos(rot) + const sin = Math.sin(rot) + const toPlan = (lx: number, lz: number): FloorplanPoint => [ + cx + lx * cos - lz * sin, + cz + lx * sin + lz * cos, + ] + + 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 + + // Painted-metal vent — cool grey, accent on select, light blue on hover. + const baseInk = '#475569' + const stroke = + showSelectedChrome && palette + ? palette.selectedStroke + : isHovered && palette + ? palette.wallHoverStroke + : baseInk + const fill = showSelectedChrome ? '#fed7aa' : '#dbe1e8' + const fillOpacity = showSelectedChrome ? 0.55 : 0.7 + const lineWidth = showSelectedChrome ? 0.03 : 0.02 + + const ro = Math.max(node.diameter, 0.05) / 2 + const flangeR = ro + Math.max(0, node.baseOverhang ?? 0.05) + + const circle = (r: number): FloorplanPoint[] => { + const pts: FloorplanPoint[] = [] + const N = 32 + for (let i = 0; i < N; i++) { + const a = (i / N) * Math.PI * 2 + pts.push(toPlan(r * Math.cos(a), r * Math.sin(a))) + } + return pts + } + + const children: FloorplanGeometry[] = [] + + // Flange footprint — the hit target + outer ring. + const outer = circle(flangeR) + children.push({ + kind: 'polygon', + points: outer, + fill: stroke, + fillOpacity: 0, + stroke: 'none', + strokeWidth: 0, + pointerEvents: 'all', + }) + children.push({ + kind: 'polygon', + points: outer, + fill, + fillOpacity, + stroke, + strokeWidth: lineWidth, + pointerEvents: 'none', + }) + + // Head circle. + children.push({ + kind: 'polygon', + points: circle(ro), + fill: 'none', + stroke, + strokeWidth: lineWidth * 0.8, + strokeOpacity: 0.7, + pointerEvents: 'none', + }) + + // Radial vane ticks from the hub out to the head circle. + const vanes = Math.max(6, Math.min(36, Math.round(node.vaneCount ?? 20))) + const hubR = ro * 0.4 + for (let i = 0; i < vanes; i++) { + const a = (i / vanes) * Math.PI * 2 + children.push({ + kind: 'polyline', + points: [ + toPlan(hubR * Math.cos(a), hubR * Math.sin(a)), + toPlan(ro * Math.cos(a), ro * Math.sin(a)), + ], + stroke, + strokeWidth: lineWidth * 0.6, + strokeOpacity: 0.5, + pointerEvents: 'none', + }) + } + + return { kind: 'group', children } +} diff --git a/packages/nodes/src/turbine-vent/geometry.ts b/packages/nodes/src/turbine-vent/geometry.ts new file mode 100644 index 00000000..579dbb6b --- /dev/null +++ b/packages/nodes/src/turbine-vent/geometry.ts @@ -0,0 +1,404 @@ +import type { TurbineVentNode } from '@pascal-app/core' +import * as THREE from 'three' +import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js' + +/** + * Pure builders for the turbine vent (whirlybird). The mesh is split into + * two pieces so the renderer can spin the head independently: + * + * buildTurbineVentBase → flange flashing + throat (STATIC) + * buildTurbineVentHead → finned head + top cap + knob (SPINS, head-local) + * buildTurbineVentGeometry → base + head merged (preview / tests, no spin) + * + * The head is authored in its own local frame with y = 0 at the bottom of + * the head, so the renderer mounts it at `position={[0, neckHeight, 0]}` + * and rotates it about its own vertical axis. + * + * ___ ← top knob + * /◍◍◍\ ← curved vanes on a globe / cylinder profile (the head) + * \◍◍◍/ + * | | ← throat + * _| |_ + * |_____| ← flange flashing + * + * Pure: no React, no scene access, no store mutation. Safe for unit tests, + * the placement preview, and the move-tool ghost. + */ + +interface Dims { + ro: number + neckH: number + headH: number + throatR: number + flangeR: number + vanes: number + thk: number +} + +function resolveDims(node: TurbineVentNode): Dims { + const ro = Math.max(0.05, node.diameter / 2) + const height = Math.max(0.12, node.height) + const neckH = Math.max(0.02, Math.min(node.neckHeight ?? 0.09, height * 0.5)) + const headH = height - neckH + const throatR = ro * 0.82 + const flangeR = ro + Math.max(0, node.baseOverhang ?? 0.05) + const vanes = Math.max(6, Math.min(36, Math.round(node.vaneCount ?? 20))) + // Radial blade thickness — scales gently with size so wide turbines + // don't read paper-thin. + const thk = Math.max(0.004, ro * 0.03) + return { ro, neckH, headH, throatR, flangeR, vanes, thk } +} + +// ─── Public builders ───────────────────────────────────────────────── + +export function buildTurbineVentBase(node: TurbineVentNode): THREE.BufferGeometry { + const d = resolveDims(node) + const p: number[] = [] + const n: number[] = [] + const uv: number[] = [] + + const flangeThk = Math.min(0.012, d.neckH * 0.5) + // Flange flashing — a thin disc the throat sits on. + cylinderWall(p, n, uv, d.flangeR, 0, flangeThk, 32) + disc(p, n, uv, d.flangeR, flangeThk, [0, 1, 0]) // flange top + disc(p, n, uv, d.flangeR, 0, [0, -1, 0]) // flange underside + // Throat — the tube the head rides on. + cylinderWall(p, n, uv, d.throatR, flangeThk, d.neckH, 28) + // Cap the throat top so you can't see down the tube past the head. + disc(p, n, uv, d.throatR, d.neckH, [0, 1, 0]) + + return toGeometry(p, n, uv) +} + +export function buildTurbineVentHead(node: TurbineVentNode): THREE.BufferGeometry { + const d = resolveDims(node) + const p: number[] = [] + const n: number[] = [] + const uv: number[] = [] + + const hubR = d.ro * 0.55 + const rings = vaneRings(node, d) + const ringBottomY = rings[0]!.y + + // Lower hub — short cylinder closing the underside of the head over the + // throat, so the spinning head reads as solid from below. + cylinderWall(p, n, uv, hubR, 0, ringBottomY, 24) + disc(p, n, uv, hubR, 0, [0, -1, 0]) + + // Vanes. + const dTheta = (Math.PI * 2) / d.vanes + const dw = dTheta * 0.55 + const totalTwist = dTheta * 0.9 + buildVanes(p, n, uv, d.vanes, rings, dw, totalTwist, d.thk) + + // Top cap + spindle knob. + const topRing = rings[rings.length - 1]! + if (node.style === 'cylinder') { + // Straight barrel → flat disc lid with a slim rim. + const lidY = topRing.y + cylinderWall(p, n, uv, topRing.r, lidY, lidY + d.headH * 0.04, 28) + disc(p, n, uv, topRing.r, lidY + d.headH * 0.04, [0, 1, 0]) + knob(p, n, uv, d.ro, lidY + d.headH * 0.04, d.headH) + } else { + // Globe → domed lid for the spherical whirlybird silhouette. + const apexY = d.headH * 0.96 + dome(p, n, uv, topRing.r, topRing.y, apexY - topRing.y, 5, 24) + knob(p, n, uv, d.ro, apexY, d.headH) + } + + return toGeometry(p, n, uv) +} + +export function buildTurbineVentGeometry(node: TurbineVentNode): THREE.BufferGeometry { + const d = resolveDims(node) + const base = buildTurbineVentBase(node) + const head = buildTurbineVentHead(node) + head.translate(0, d.neckH, 0) + const merged = mergeGeometries([base, head], false) + base.dispose() + head.dispose() + return merged ?? buildTurbineVentBase(node) +} + +// ─── Vane profile ──────────────────────────────────────────────────── +// The head's vanes are lofted between these rings (bottom → top). `globe` +// bulges at the equator and narrows top + bottom; `cylinder` holds a +// constant radius for a straight barrel. + +function vaneRings(node: TurbineVentNode, d: Dims): Array<{ r: number; y: number }> { + if (node.style === 'cylinder') { + return [ + { r: d.ro, y: d.headH * 0.04 }, + { r: d.ro, y: d.headH * 0.85 }, + ] + } + return [ + { r: d.ro * 0.6, y: d.headH * 0.05 }, + { r: d.ro, y: d.headH * 0.42 }, + { r: d.ro * 0.58, y: d.headH * 0.72 }, + ] +} + +// Each vane is a thin, twisted shell lofted through `rings`: an outer and +// inner surface joined by edge strips, plus bottom + top caps. The twist +// from bottom to top is what reads as the scoop that catches the wind. +function buildVanes( + p: number[], + n: number[], + uv: number[], + count: number, + rings: Array<{ r: number; y: number }>, + dw: number, + totalTwist: number, + thk: number, +): void { + const y0 = rings[0]!.y + const span = rings[rings.length - 1]!.y - y0 || 1 + const K = rings.length + + for (let i = 0; i < count; i++) { + const a0 = i * ((Math.PI * 2) / count) + const oLo: THREE.Vector3[] = [] + const oHi: THREE.Vector3[] = [] + const iLo: THREE.Vector3[] = [] + const iHi: THREE.Vector3[] = [] + for (let k = 0; k < K; k++) { + const ring = rings[k]! + const t = (ring.y - y0) / span + const tw = totalTwist * t + const loA = a0 + tw + const hiA = a0 + tw + dw + oLo.push(polar(loA, ring.r, ring.y)) + oHi.push(polar(hiA, ring.r, ring.y)) + iLo.push(polar(loA, ring.r - thk, ring.y)) + iHi.push(polar(hiA, ring.r - thk, ring.y)) + } + + const midA = a0 + totalTwist * 0.5 + dw * 0.5 + const out: [number, number, number] = [Math.cos(midA), 0, Math.sin(midA)] + const inward: [number, number, number] = [-out[0], 0, -out[2]] + // Tangential directions for the two angular edges. + const left: [number, number, number] = [Math.sin(midA), 0, -Math.cos(midA)] + const right: [number, number, number] = [-left[0], 0, -left[2]] + + for (let k = 0; k < K - 1; k++) { + // Outer + inner faces. + pushQuad(p, n, uv, oLo[k]!, oHi[k]!, oHi[k + 1]!, oLo[k + 1]!, out) + pushQuad(p, n, uv, iLo[k]!, iHi[k]!, iHi[k + 1]!, iLo[k + 1]!, inward) + // Angular edges (lo side / hi side). + pushQuad(p, n, uv, oLo[k]!, iLo[k]!, iLo[k + 1]!, oLo[k + 1]!, left) + pushQuad(p, n, uv, oHi[k]!, iHi[k]!, iHi[k + 1]!, oHi[k + 1]!, right) + } + // Bottom + top caps. + pushQuad(p, n, uv, oLo[0]!, oHi[0]!, iHi[0]!, iLo[0]!, [0, -1, 0]) + pushQuad(p, n, uv, oLo[K - 1]!, oHi[K - 1]!, iHi[K - 1]!, iLo[K - 1]!, [0, 1, 0]) + } +} + +// ─── Primitive builders ────────────────────────────────────────────── + +function cylinderWall( + p: number[], + n: number[], + uv: number[], + r: number, + y0: number, + y1: number, + segs: number, +): void { + for (let i = 0; i < segs; i++) { + const a = (i / segs) * Math.PI * 2 + const b = ((i + 1) / segs) * Math.PI * 2 + const ca = Math.cos(a) + const sa = Math.sin(a) + const cb = Math.cos(b) + const sb = Math.sin(b) + const out: [number, number, number] = [Math.cos((a + b) / 2), 0, Math.sin((a + b) / 2)] + pushQuad( + p, + n, + uv, + [r * ca, y0, r * sa], + [r * cb, y0, r * sb], + [r * cb, y1, r * sb], + [r * ca, y1, r * sa], + out, + ) + } +} + +function disc( + p: number[], + n: number[], + uv: number[], + r: number, + y: number, + hint: [number, number, number], + segs = 32, +): void { + const center = new THREE.Vector3(0, y, 0) + for (let i = 0; i < segs; i++) { + const a = (i / segs) * Math.PI * 2 + const b = ((i + 1) / segs) * Math.PI * 2 + pushTri(p, n, uv, center, polar(a, r, y), polar(b, r, y), hint) + } +} + +// Half-ellipsoid cap: base radius `rb` at `y0`, apex `hd` above it. +function dome( + p: number[], + n: number[], + uv: number[], + rb: number, + y0: number, + hd: number, + lat: number, + lng: number, +): void { + const grid: THREE.Vector3[][] = [] + for (let i = 0; i <= lat; i++) { + const phi = (Math.PI / 2) * (i / lat) + const r = rb * Math.cos(phi) + const y = y0 + hd * Math.sin(phi) + const row: THREE.Vector3[] = [] + for (let j = 0; j <= lng; j++) { + const theta = (j / lng) * Math.PI * 2 + row.push(new THREE.Vector3(r * Math.cos(theta), y, r * Math.sin(theta))) + } + grid.push(row) + } + const center = new THREE.Vector3(0, y0, 0) + for (let i = 0; i < lat; i++) { + for (let j = 0; j < lng; j++) { + const a = grid[i]![j]! + const b = grid[i]![j + 1]! + const c = grid[i + 1]![j + 1]! + const d = grid[i + 1]![j]! + const mid = new THREE.Vector3().add(a).add(b).add(c).add(d).multiplyScalar(0.25) + const hint = mid.clone().sub(center).normalize() + pushQuad(p, n, uv, a, b, c, d, [hint.x, hint.y, hint.z]) + } + } +} + +// Small spindle knob at the top centre. +function knob(p: number[], n: number[], uv: number[], ro: number, y0: number, headH: number): void { + const kr = ro * 0.12 + const kh = headH * 0.06 + cylinderWall(p, n, uv, kr, y0, y0 + kh, 12) + dome(p, n, uv, kr, y0 + kh, kr * 0.9, 3, 12) +} + +// ─── Geometry plumbing ─────────────────────────────────────────────── + +function polar(angle: number, r: number, y: number): THREE.Vector3 { + return new THREE.Vector3(r * Math.cos(angle), y, r * Math.sin(angle)) +} + +function v(point: THREE.Vector3 | number[]): [number, number, number] { + if (Array.isArray(point)) return [point[0]!, point[1]!, point[2]!] + return [point.x, point.y, point.z] +} + +// Winding-safe quad: triangulates (a,b,c,d) and orients both triangles so +// their shared flat normal points toward `hint`. Front faces are then +// always visible from the intended side under a FrontSide material — no +// hand-traced winding to get wrong. UVs are dimension-based so painted +// presets tile at a consistent world density across the body and vanes. +function pushQuad( + positions: number[], + normals: number[], + uvs: number[], + ap: THREE.Vector3 | number[], + bp: THREE.Vector3 | number[], + cp: THREE.Vector3 | number[], + dp: THREE.Vector3 | number[], + hint: [number, number, number], +): void { + const a = v(ap) + const b = v(bp) + const c = v(cp) + const d = v(dp) + // Normal of triangle (a, c, b): (c-a) × (b-a). + let nx = (c[1]! - a[1]!) * (b[2]! - a[2]!) - (c[2]! - a[2]!) * (b[1]! - a[1]!) + let ny = (c[2]! - a[2]!) * (b[0]! - a[0]!) - (c[0]! - a[0]!) * (b[2]! - a[2]!) + let nz = (c[0]! - a[0]!) * (b[1]! - a[1]!) - (c[1]! - a[1]!) * (b[0]! - a[0]!) + const flip = nx * hint[0] + ny * hint[1] + nz * hint[2] < 0 + if (flip) { + nx = -nx + ny = -ny + nz = -nz + } + const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1 + nx /= len + ny /= len + nz /= len + + const abx = b[0]! - a[0]! + const aby = b[1]! - a[1]! + const abz = b[2]! - a[2]! + const adx = d[0]! - a[0]! + const ady = d[1]! - a[1]! + const adz = d[2]! - a[2]! + const u = Math.sqrt(abx * abx + aby * aby + abz * abz) + const vv = Math.sqrt(adx * adx + ady * ady + adz * adz) + + if (flip) { + // Reversed winding: (a,b,c) + (a,c,d). + positions.push(a[0]!, a[1]!, a[2]!, b[0]!, b[1]!, b[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, u, 0, u, vv) + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, d[0]!, d[1]!, d[2]!) + uvs.push(0, 0, u, vv, 0, vv) + } else { + // Default winding: (a,c,b) + (a,d,c). + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, b[0]!, b[1]!, b[2]!) + uvs.push(0, 0, u, vv, u, 0) + positions.push(a[0]!, a[1]!, a[2]!, d[0]!, d[1]!, d[2]!, c[0]!, c[1]!, c[2]!) + uvs.push(0, 0, 0, vv, u, vv) + } + for (let i = 0; i < 6; i++) normals.push(nx, ny, nz) +} + +function pushTri( + positions: number[], + normals: number[], + uvs: number[], + ap: THREE.Vector3 | number[], + bp: THREE.Vector3 | number[], + cp: THREE.Vector3 | number[], + hint: [number, number, number], +): void { + const a = v(ap) + const b = v(bp) + const c = v(cp) + let nx = (b[1]! - a[1]!) * (c[2]! - a[2]!) - (b[2]! - a[2]!) * (c[1]! - a[1]!) + let ny = (b[2]! - a[2]!) * (c[0]! - a[0]!) - (b[0]! - a[0]!) * (c[2]! - a[2]!) + let nz = (b[0]! - a[0]!) * (c[1]! - a[1]!) - (b[1]! - a[1]!) * (c[0]! - a[0]!) + const flip = nx * hint[0] + ny * hint[1] + nz * hint[2] < 0 + if (flip) { + nx = -nx + ny = -ny + nz = -nz + } + const len = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1 + nx /= len + ny /= len + nz /= len + + if (flip) { + positions.push(a[0]!, a[1]!, a[2]!, c[0]!, c[1]!, c[2]!, b[0]!, b[1]!, b[2]!) + } else { + positions.push(a[0]!, a[1]!, a[2]!, b[0]!, b[1]!, b[2]!, c[0]!, c[1]!, c[2]!) + } + uvs.push(0, 0, 1, 0, 0, 1) + for (let i = 0; i < 3; i++) normals.push(nx, ny, nz) +} + +function toGeometry(positions: number[], normals: number[], uvs: number[]): THREE.BufferGeometry { + const geo = new THREE.BufferGeometry() + geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)) + geo.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3)) + geo.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2)) + geo.computeBoundingSphere() + return geo +} diff --git a/packages/nodes/src/turbine-vent/index.ts b/packages/nodes/src/turbine-vent/index.ts new file mode 100644 index 00000000..edf36566 --- /dev/null +++ b/packages/nodes/src/turbine-vent/index.ts @@ -0,0 +1,3 @@ +export { turbineVentDefinition } from './definition' +export { buildTurbineVentGeometry } from './geometry' +export { TurbineVentNode } from './schema' diff --git a/packages/nodes/src/turbine-vent/move-tool.tsx b/packages/nodes/src/turbine-vent/move-tool.tsx new file mode 100644 index 00000000..5db5615c --- /dev/null +++ b/packages/nodes/src/turbine-vent/move-tool.tsx @@ -0,0 +1,204 @@ +'use client' + +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 { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' +import TurbineVentPreview from './preview' + +/** + * Turbine-vent move tool. Mirrors the box-vent move flow: the original + * mesh hides during the drag, a ghost tracks the cursor with the correct + * slope tilt + segment yaw, and the click updates the node's position + + * parent segment in one undoable step (reparenting between segments when + * needed). Cancel restores the original transform, or deletes a + * freshly-cloned vent (`metadata.isNew`). + */ +export default function MoveTurbineVentTool({ node }: { node: TurbineVentNode }) { + const exitMoveMode = useCallback(() => { + useEditor.getState().setMovingNode(null) + }, []) + + const [previewPos, setPreviewPos] = useState<[number, number, number] | null>(null) + const [previewSurfaceQuat, setPreviewSurfaceQuat] = useState(null) + const [previewYaw, setPreviewYaw] = useState(0) + + useEffect(() => { + useScene.temporal.getState().pause() + + const original = { + position: [...node.position] as [number, number, number], + rotation: node.rotation ?? 0, + roofSegmentId: node.roofSegmentId, + parentId: node.parentId, + metadata: node.metadata, + } + const meta = + typeof node.metadata === 'object' && node.metadata !== null + ? (node.metadata as Record) + : {} + const isNew = !!meta.isNew + + 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 + + const updatePreview = (event: RoofEvent) => { + const wx = event.position[0] + const wy = event.position[1] + const wz = event.position[2] + + const sx = Math.round(wx * 20) / 20 + const sz = Math.round(wz * 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) + setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion())) + setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0)) + setPreviewPos(worldToBuildingLocal(wx, wy, wz)) + 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 st = useScene.getState() + + const prevSegmentId = original.roofSegmentId as AnyNodeId | undefined + if (prevSegmentId && prevSegmentId !== targetSegmentId) { + const oldSeg = st.nodes[prevSegmentId] as RoofSegmentNode | undefined + if (oldSeg) { + st.updateNode(prevSegmentId, { + children: (oldSeg.children ?? []).filter((id) => id !== node.id), + }) + } + const newSeg = st.nodes[targetSegmentId] as RoofSegmentNode | undefined + if (newSeg && !(newSeg.children ?? []).includes(node.id)) { + st.updateNode(targetSegmentId, { + children: [...(newSeg.children ?? []), node.id], + }) + } + st.dirtyNodes.add(prevSegmentId) + } + + useScene.temporal.getState().resume() + st.updateNode(node.id as AnyNodeId, { + roofSegmentId: targetSegmentId, + parentId: targetSegmentId, + position: [hit.localX, hit.localY, hit.localZ], + rotation: original.rotation, + visible: true, + metadata: {}, + }) + useScene.temporal.getState().pause() + + st.dirtyNodes.add(targetSegmentId) + st.dirtyNodes.add(node.id as AnyNodeId) + + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + + triggerSFX('sfx:item-place') + exitMoveMode() + event.stopPropagation() + } + + const onCancel = () => { + if (isNew) { + const parentId = original.roofSegmentId as AnyNodeId | undefined + if (parentId) { + const parent = useScene.getState().nodes[parentId] as RoofSegmentNode | undefined + if (parent) { + useScene.getState().updateNode(parentId, { + children: (parent.children ?? []).filter((id) => id !== node.id), + }) + } + } + useScene.getState().deleteNode(node.id as AnyNodeId) + useScene.temporal.getState().resume() + markToolCancelConsumed() + exitMoveMode() + return + } + + useScene.getState().updateNode(node.id as AnyNodeId, { + position: original.position, + rotation: original.rotation, + roofSegmentId: original.roofSegmentId as AnyNodeId | undefined, + parentId: original.parentId as AnyNodeId | undefined, + metadata: original.metadata, + }) + if (original.roofSegmentId) { + useScene.getState().dirtyNodes.add(original.roofSegmentId as AnyNodeId) + } + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + + useScene.temporal.getState().resume() + markToolCancelConsumed() + exitMoveMode() + } + + emitter.on('roof:move', updatePreview) + emitter.on('roof:enter', updatePreview) + emitter.on('roof:click', onRoofClick) + emitter.on('tool:cancel', onCancel) + + return () => { + emitter.off('roof:move', updatePreview) + emitter.off('roof:enter', updatePreview) + emitter.off('roof:click', onRoofClick) + emitter.off('tool:cancel', onCancel) + + const obj = sceneRegistry.nodes.get(node.id) + if (obj) obj.visible = true + useScene.temporal.getState().resume() + } + }, [exitMoveMode, node]) + + if (!(previewPos && previewSurfaceQuat)) return null + + return ( + + + + + + + + ) +} diff --git a/packages/nodes/src/turbine-vent/panel.tsx b/packages/nodes/src/turbine-vent/panel.tsx new file mode 100644 index 00000000..57898e92 --- /dev/null +++ b/packages/nodes/src/turbine-vent/panel.tsx @@ -0,0 +1,338 @@ +'use client' + +import { + type AnyNode, + type AnyNodeId, + getActiveRoofHeight, + type RoofSegmentNode, + TurbineVentNode as TurbineVentSchema, + useLiveNodeOverrides, + useScene, +} from '@pascal-app/core' +import { + ActionButton, + ActionGroup, + PanelSection, + PanelWrapper, + SegmentedControl, + SliderControl, + triggerSFX, + useEditor, +} from '@pascal-app/editor' +import { useViewer } from '@pascal-app/viewer' +import { Copy, Move, Pause, Play, Trash2 } from 'lucide-react' +import { useCallback, useRef } from 'react' +import type { TurbineVentNode } from './schema' + +// Speed restored when resuming a paused turbine that has no remembered +// speed yet (matches the schema default). +const DEFAULT_SPIN_SPEED = 0.8 + +/** + * Inspector panel for a placed turbine vent. Exposes style + dimensions + + * spin speed plus Move / Duplicate / Delete wired into the same + * ghost-preview drag flow the placement tool uses (see `./move-tool.tsx`). + * Mirrors the box-vent panel. + */ +export default function TurbineVentPanel() { + const selectedId = useViewer((s) => s.selection.selectedIds[0]) + const setSelection = useViewer((s) => s.setSelection) + const updateNode = useScene((s) => s.updateNode) + const deleteNode = useScene((s) => s.deleteNode) + const setMovingNode = useEditor((s) => s.setMovingNode) + + const storeNode = useScene((s) => + selectedId ? (s.nodes[selectedId as AnyNode['id']] as TurbineVentNode | undefined) : undefined, + ) + const overrides = useLiveNodeOverrides((s) => + selectedId + ? (s.get(selectedId as AnyNodeId) as Partial | undefined) + : undefined, + ) + const node: TurbineVentNode | undefined = + storeNode && overrides ? ({ ...storeNode, ...overrides } as TurbineVentNode) : storeNode + + const segment = useScene((s) => + node?.roofSegmentId + ? (s.nodes[node.roofSegmentId as AnyNodeId] as RoofSegmentNode | undefined) + : undefined, + ) + + const previewProp = useCallback( + (updates: Partial) => { + if (!selectedId) return + useLiveNodeOverrides.getState().set(selectedId as AnyNodeId, updates) + }, + [selectedId], + ) + + const commitProp = useCallback( + (updates: Partial) => { + if (!selectedId) return + updateNode(selectedId as AnyNode['id'], updates) + useLiveNodeOverrides.getState().clear(selectedId as AnyNodeId) + }, + [selectedId, updateNode], + ) + + const handleUpdate = commitProp + + const handleClose = useCallback(() => { + setSelection({ selectedIds: [] }) + }, [setSelection]) + + const handleBack = useCallback(() => { + if (node?.roofSegmentId) { + setSelection({ selectedIds: [node.roofSegmentId as AnyNode['id']] }) + } + }, [node?.roofSegmentId, setSelection]) + + const handleMove = useCallback(() => { + if (!node) return + triggerSFX('sfx:item-pick') + setMovingNode(node as never) + setSelection({ selectedIds: [] }) + }, [node, setMovingNode, setSelection]) + + const handleDuplicate = useCallback(() => { + if (!node) return + triggerSFX('sfx:item-pick') + const parentId = node.roofSegmentId as AnyNodeId | undefined + if (!parentId) return + + const state = useScene.getState() + const meta = + typeof node.metadata === 'object' && node.metadata !== null + ? (node.metadata as Record) + : {} + const cloneInput = { + ...node, + id: undefined, + metadata: { ...meta, isNew: true }, + } as Record + const cloned = TurbineVentSchema.parse(cloneInput) as TurbineVentNode + + state.createNode(cloned, parentId) + state.dirtyNodes.add(parentId) + setMovingNode(cloned as never) + setSelection({ selectedIds: [] }) + }, [node, setMovingNode, setSelection]) + + const handleDelete = useCallback(() => { + if (!(selectedId && node)) return + triggerSFX('sfx:item-delete') + const segmentId = node.roofSegmentId + if (segmentId) { + const state = useScene.getState() + const seg = state.nodes[segmentId as AnyNodeId] as RoofSegmentNode | undefined + if (seg) { + state.updateNode(segmentId as AnyNode['id'], { + children: (seg.children ?? []).filter((id) => id !== selectedId), + }) + } + } + deleteNode(selectedId as AnyNodeId) + if (segmentId) { + useScene.getState().dirtyNodes.add(segmentId as AnyNodeId) + setSelection({ selectedIds: [segmentId as AnyNode['id']] }) + } else { + setSelection({ selectedIds: [] }) + } + }, [selectedId, node, deleteNode, setSelection]) + + // Play / pause the idle spin. Pausing remembers the current speed so + // Play restores it (falling back to the default if it was never running). + const lastSpeedRef = useRef(DEFAULT_SPIN_SPEED) + const isSpinning = (node?.spinSpeed ?? 0) > 0 + const handleToggleSpin = useCallback(() => { + if (!node) return + const current = node.spinSpeed ?? 0 + if (current > 0) { + lastSpeedRef.current = current + handleUpdate({ spinSpeed: 0 }) + } else { + handleUpdate({ + spinSpeed: lastSpeedRef.current > 0 ? lastSpeedRef.current : DEFAULT_SPIN_SPEED, + }) + } + }, [node, handleUpdate]) + + if (!(node && node.type === 'turbine-vent' && selectedId)) return null + + return ( + + + handleUpdate({ style: v as TurbineVentNode['style'] })} + options={[ + { label: 'Globe', value: 'globe' }, + { label: 'Cylinder', value: 'cylinder' }, + ]} + value={node.style ?? 'globe'} + /> + + + + previewProp({ diameter: v })} + onCommit={(v) => handleUpdate({ diameter: v })} + precision={2} + restoreOnCommit={false} + step={0.01} + unit="m" + value={Math.round(node.diameter * 100) / 100} + /> + previewProp({ height: v })} + onCommit={(v) => handleUpdate({ height: v })} + precision={2} + restoreOnCommit={false} + step={0.01} + unit="m" + value={Math.round(node.height * 100) / 100} + /> + previewProp({ neckHeight: v })} + onCommit={(v) => handleUpdate({ neckHeight: v })} + precision={2} + restoreOnCommit={false} + step={0.01} + unit="m" + value={Math.round((node.neckHeight ?? 0.09) * 100) / 100} + /> + previewProp({ vaneCount: Math.round(v) })} + onCommit={(v) => handleUpdate({ vaneCount: Math.round(v) })} + precision={0} + restoreOnCommit={false} + step={1} + unit="" + value={Math.round(node.vaneCount ?? 20)} + /> + + + + + : } + label={isSpinning ? 'Pause' : 'Play'} + onClick={handleToggleSpin} + /> + + previewProp({ spinSpeed: v })} + onCommit={(v) => handleUpdate({ spinSpeed: v })} + precision={1} + restoreOnCommit={false} + step={0.1} + unit="rad/s" + value={Math.round((node.spinSpeed ?? 0) * 10) / 10} + /> + + + + + previewProp({ position: [v, node.position[1] ?? 0, node.position[2] ?? 0] }) + } + onCommit={(v) => + handleUpdate({ position: [v, node.position[1] ?? 0, node.position[2] ?? 0] }) + } + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round((node.position[0] ?? 0) * 100) / 100} + /> + + previewProp({ position: [node.position[0] ?? 0, v, node.position[2] ?? 0] }) + } + onCommit={(v) => + handleUpdate({ position: [node.position[0] ?? 0, v, node.position[2] ?? 0] }) + } + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round((node.position[1] ?? 0) * 100) / 100} + /> + + previewProp({ position: [node.position[0] ?? 0, node.position[1] ?? 0, v] }) + } + onCommit={(v) => + handleUpdate({ position: [node.position[0] ?? 0, node.position[1] ?? 0, v] }) + } + precision={2} + restoreOnCommit={false} + step={0.05} + unit="m" + value={Math.round((node.position[2] ?? 0) * 100) / 100} + /> + previewProp({ rotation: (deg * Math.PI) / 180 })} + onCommit={(deg) => handleUpdate({ rotation: (deg * Math.PI) / 180 })} + precision={0} + restoreOnCommit={false} + step={1} + unit="°" + value={Math.round(((node.rotation ?? 0) * 180) / Math.PI)} + /> + + + + + } label="Move" onClick={handleMove} /> + } + label="Duplicate" + onClick={handleDuplicate} + /> + } + label="Delete" + onClick={handleDelete} + /> + + + + ) +} diff --git a/packages/nodes/src/turbine-vent/parametrics.ts b/packages/nodes/src/turbine-vent/parametrics.ts new file mode 100644 index 00000000..04cfcbfa --- /dev/null +++ b/packages/nodes/src/turbine-vent/parametrics.ts @@ -0,0 +1,37 @@ +import type { ParametricDescriptor } from '@pascal-app/core' +import type { TurbineVentNode } from './schema' + +/** + * Inspector descriptor for the turbine vent. Move / Duplicate need the + * kind-owned ghost-preview flow (see `./move-tool.tsx`), so the panel + * hosts those actions itself instead of relying on the generic inspector. + */ +export const turbineVentParametrics: ParametricDescriptor = { + customPanel: () => import('./panel'), + groups: [ + { + label: 'Style', + fields: [ + { + key: 'style', + kind: 'enum', + options: ['globe', 'cylinder'], + display: 'segmented', + }, + ], + }, + { + label: 'Dimensions', + fields: [ + { key: 'diameter', kind: 'number', unit: 'm', min: 0.15, max: 0.7, step: 0.01 }, + { key: 'height', kind: 'number', unit: 'm', min: 0.2, max: 0.9, step: 0.01 }, + { key: 'neckHeight', kind: 'number', unit: 'm', min: 0.02, max: 0.3, step: 0.01 }, + { key: 'vaneCount', kind: 'number', unit: '', min: 6, max: 36, step: 1 }, + ], + }, + { + label: 'Motion', + fields: [{ key: 'spinSpeed', kind: 'number', unit: 'rad/s', min: 0, max: 4, step: 0.1 }], + }, + ], +} diff --git a/packages/nodes/src/turbine-vent/preview.tsx b/packages/nodes/src/turbine-vent/preview.tsx new file mode 100644 index 00000000..04a63689 --- /dev/null +++ b/packages/nodes/src/turbine-vent/preview.tsx @@ -0,0 +1,64 @@ +'use client' + +import { useEffect, useMemo } from 'react' +import * as THREE from 'three' +import { buildTurbineVentGeometry } from './geometry' +import type { TurbineVentNode } from './schema' + +/** + * Translucent ghost of a turbine vent, used by the placement tool's + * cursor and the move-tool preview. Builds the combined (non-spinning) + * geometry through the shared pure builder so the ghost shape stays in + * lockstep with the committed vent. Raycast is disabled so the preview + * doesn't intercept the cursor ray feeding the placement tool. + */ +const TurbineVentPreview = ({ node }: { node: TurbineVentNode }) => { + const geometry = useMemo( + () => buildTurbineVentGeometry(node), + [node.style, node.diameter, node.height, node.neckHeight, node.vaneCount, node.baseOverhang], + ) + + const material = useMemo( + () => + new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + emissive: 0x6c_a3_ff, + emissiveIntensity: 0.18, + roughness: 0.6, + metalness: 0.2, + transparent: true, + opacity: 0.35, + depthWrite: false, + side: THREE.DoubleSide, + }), + [], + ) + + const edgesGeometry = useMemo(() => new THREE.EdgesGeometry(geometry, 25), [geometry]) + + useEffect( + () => () => { + geometry.dispose() + edgesGeometry.dispose() + material.dispose() + }, + [geometry, edgesGeometry, material], + ) + + return ( + + { + /* disabled — see component-level note */ + }} + /> + + + + + ) +} + +export default TurbineVentPreview diff --git a/packages/nodes/src/turbine-vent/renderer.tsx b/packages/nodes/src/turbine-vent/renderer.tsx new file mode 100644 index 00000000..2e768544 --- /dev/null +++ b/packages/nodes/src/turbine-vent/renderer.tsx @@ -0,0 +1,155 @@ +'use client' + +import { + type AnyNodeId, + type RoofSegmentNode, + type TurbineVentNode, + useLiveNodeOverrides, + useRegistry, + useScene, +} from '@pascal-app/core' +import { + type ColorPreset, + createMaterial, + createMaterialFromPresetRef, + createSurfaceRoleMaterial, + useNodeEvents, + useViewer, +} from '@pascal-app/viewer' +import { useFrame } from '@react-three/fiber' +import { useEffect, useMemo, useRef } from 'react' +import * as THREE from 'three' +import { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' +import { buildTurbineVentBase, buildTurbineVentHead } from './geometry' + +const defaultMaterial = new THREE.MeshStandardMaterial({ + color: 0xff_ff_ff, + roughness: 0.6, + metalness: 0.35, +}) + +/** + * Turbine vent renderer. Reproduces the box-vent transform stack + * (segment → slope tilt → yaw) so the vent rides whatever roof face it + * sits on, then adds the one thing no other vent has: the head spins. + * + * The mesh is split into a static base (flange + throat) and a head + * (finned crown + cap + knob) mounted in an inner `` that + * `useFrame` rotates about its own vertical axis at `node.spinSpeed` + * rad/s (0 = static). The spin lives entirely below the registered ref + * group, so the handle frame — read off the registered group — is + * untouched. + */ +const TurbineVentRenderer = ({ node: storeNode }: { node: TurbineVentNode }) => { + const ref = useRef(null!) + const headRef = useRef(null) + useRegistry(storeNode.id, 'turbine-vent', ref) + const handlers = useNodeEvents(storeNode, 'turbine-vent') + const shading = useViewer((s) => s.shading) + const textures = useViewer((s) => s.textures) + const colorPreset: ColorPreset = useViewer((s) => s.colorPreset) + const sceneTheme = useViewer((s) => s.sceneTheme) + + // Merge live overrides (panel slider drags) on top of the store node so + // the mesh updates frame-by-frame without polluting undo history. + const overrides = useLiveNodeOverrides( + (s) => s.get(storeNode.id as AnyNodeId) as Partial | undefined, + ) + const node: TurbineVentNode = overrides + ? ({ ...storeNode, ...overrides } as TurbineVentNode) + : storeNode + + const segment = useScene((state) => + node.roofSegmentId + ? (state.nodes[node.roofSegmentId as AnyNodeId] as RoofSegmentNode | undefined) + : undefined, + ) + + const baseGeometry = useMemo( + () => buildTurbineVentBase(node), + [node.diameter, node.height, node.neckHeight, node.baseOverhang], + ) + const headGeometry = useMemo( + () => buildTurbineVentHead(node), + [node.style, node.diameter, node.height, node.neckHeight, node.vaneCount], + ) + useEffect(() => () => baseGeometry.dispose(), [baseGeometry]) + useEffect(() => () => headGeometry.dispose(), [headGeometry]) + + // Idle spin. `delta` keeps it frame-rate independent; speed 0 holds the + // head still (the default — turbines start paused). Reads `node.spinSpeed` + // through the render closure so the panel slider / Play toggle take effect + // live. + const spin = node.spinSpeed ?? 0 + useFrame((_, delta) => { + if (headRef.current && spin !== 0) { + headRef.current.rotation.y += spin * delta + } + }) + + // Orient the vent to whatever roof face it sits on — same analytical + // normal the box-vent / solar-panel / skylight share. + const surfaceQuat = useMemo(() => { + if (!segment) return new THREE.Quaternion() + const normal = getAnalyticalNormal(node.position[0] ?? 0, node.position[2] ?? 0, segment) + return surfaceQuatFromNormal(normal, new THREE.Quaternion()) + }, [segment, node.position[0], node.position[2]]) + + const material = useMemo(() => { + if (!textures || (!node.material && !node.materialPreset)) { + return createSurfaceRoleMaterial('roof', colorPreset, THREE.FrontSide, sceneTheme) + } + return node.material + ? createMaterial(node.material, shading) + : (createMaterialFromPresetRef(node.materialPreset, shading) ?? defaultMaterial) + }, [textures, colorPreset, sceneTheme, shading, node.material, node.materialPreset]) + + // Compose slope tilt + yaw onto a single quaternion so the registered + // ref's local frame is vent-mesh-local (handles read this frame). + const yAxis = useMemo(() => new THREE.Vector3(0, 1, 0), []) + const composedQuat = useMemo(() => { + const yawQuat = new THREE.Quaternion().setFromAxisAngle(yAxis, node.rotation ?? 0) + return new THREE.Quaternion().copy(surfaceQuat).multiply(yawQuat) + }, [surfaceQuat, node.rotation, yAxis]) + + if (!segment) return null + + // Replicate the parent segment's roof-local transform — see the long + // note in box-vent's renderer for why segment-local coords must be + // bridged through the segment frame here. + const segPos = segment.position ?? [0, 0, 0] + const segRotY = segment.rotation ?? 0 + const neckH = Math.max(0.02, Math.min(node.neckHeight ?? 0.09, Math.max(0.12, node.height) * 0.5)) + + return ( + + + + + + + + + ) +} + +export default TurbineVentRenderer diff --git a/packages/nodes/src/turbine-vent/schema.ts b/packages/nodes/src/turbine-vent/schema.ts new file mode 100644 index 00000000..58f1e32e --- /dev/null +++ b/packages/nodes/src/turbine-vent/schema.ts @@ -0,0 +1,3 @@ +// Schema lives in core (referenced by the AnyNode union). Re-export so +// every turbine-vent-related import stays inside @pascal-app/nodes/turbine-vent. +export { TurbineVentNode } from '@pascal-app/core' diff --git a/packages/nodes/src/turbine-vent/tool.tsx b/packages/nodes/src/turbine-vent/tool.tsx new file mode 100644 index 00000000..5c88bb93 --- /dev/null +++ b/packages/nodes/src/turbine-vent/tool.tsx @@ -0,0 +1,131 @@ +'use client' + +import { + type AnyNodeId, + emitter, + type RoofEvent, + type RoofNode, + sceneRegistry, + TurbineVentNode, + useScene, +} from '@pascal-app/core' +import { triggerSFX } 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 { getAnalyticalNormal, surfaceQuatFromNormal } from '../shared/roof-surface' +import { turbineVentDefinition } from './definition' +import TurbineVentPreview from './preview' + +const worldPoint = new THREE.Vector3() + +/** + * Turbine-vent placement tool. Mounts when the palette activates the + * turbine-vent kind; listens for `roof:*` events; on click commits a new + * `TurbineVentNode` parented to the targeted segment with segment-local + * coordinates. Mirrors the box-vent placement flow. + */ +const TurbineVentTool = () => { + const activeBuildingId = useViewer((s) => s.selection.buildingId) + const setSelection = useViewer((s) => s.setSelection) + + const [previewPos, setPreviewPos] = useState<[number, number, number] | null>(null) + const [previewSurfaceQuat, setPreviewSurfaceQuat] = useState(null) + const [previewYaw, setPreviewYaw] = useState(0) + const lastSnapRef = useRef<[number, number] | null>(null) + + const previewNode = useMemo( + () => + TurbineVentNode.parse({ + ...turbineVentDefinition.defaults(), + name: 'Turbine Vent', + position: [0, 0, 0], + rotation: 0, + }), + [], + ) + + useEffect(() => { + if (!activeBuildingId) return + + const worldToBuildingLocal = (wx: number, wy: number, wz: number): [number, number, number] => { + const buildingObj = sceneRegistry.nodes.get(activeBuildingId as AnyNodeId) + if (!buildingObj) return [wx, wy, wz] + worldPoint.set(wx, wy, wz) + buildingObj.worldToLocal(worldPoint) + return [worldPoint.x, worldPoint.y, worldPoint.z] + } + + const updatePreview = (event: RoofEvent) => { + const wx = event.position[0] + const wy = event.position[1] + const wz = event.position[2] + + const sx = Math.round(wx * 20) / 20 + const sz = Math.round(wz * 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 normal = getAnalyticalNormal(hit.localX, hit.localZ, hit.segment) + setPreviewSurfaceQuat(surfaceQuatFromNormal(normal, new THREE.Quaternion())) + setPreviewYaw((event.node.rotation ?? 0) + (hit.segment.rotation ?? 0)) + setPreviewPos(worldToBuildingLocal(wx, wy, wz)) + 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 state = useScene.getState() + + const vent = TurbineVentNode.parse({ + ...turbineVentDefinition.defaults(), + name: 'Turbine Vent', + roofSegmentId: hit.segment.id, + position: [hit.localX, hit.localY, hit.localZ], + rotation: 0, + }) + state.createNode(vent, hit.segment.id as AnyNodeId) + state.dirtyNodes.add(hit.segment.id as AnyNodeId) + setSelection({ selectedIds: [vent.id] }) + triggerSFX('sfx:item-place') + event.stopPropagation() + } + + emitter.on('roof:move', updatePreview) + emitter.on('roof:enter', updatePreview) + emitter.on('roof:click', onClick) + + return () => { + emitter.off('roof:move', updatePreview) + emitter.off('roof:enter', updatePreview) + emitter.off('roof:click', onClick) + } + }, [activeBuildingId, setSelection]) + + if (!activeBuildingId || !previewPos || !previewSurfaceQuat) return null + + return ( + + + + + + + + ) +} + +export default TurbineVentTool diff --git a/packages/nodes/src/wall/move-endpoint-tool.tsx b/packages/nodes/src/wall/move-endpoint-tool.tsx index 019017f2..eb36b1d2 100644 --- a/packages/nodes/src/wall/move-endpoint-tool.tsx +++ b/packages/nodes/src/wall/move-endpoint-tool.tsx @@ -2,8 +2,11 @@ import { type AnyNodeId, + DEFAULT_WALL_HEIGHT, emitter, type GridEvent, + getWallCurveLength, + getWallThickness, pauseSceneHistory, resumeSceneHistory, useScene, @@ -15,6 +18,7 @@ import { getAngleToSegmentReference, getSegmentAngleReferenceAtPoint, isSegmentLongEnough, + MeasurementPill, type MovingWallEndpoint, markToolCancelConsumed, snapWallDraftPoint, @@ -187,6 +191,7 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({ return [point[0], 0, point[1]] }) const [altPressed, setAltPressed] = useState(false) + const unit = useViewer((s) => s.unit) const exitMoveMode = useCallback(() => { useEditor.getState().setMovingWallEndpoint(null) @@ -398,9 +403,39 @@ export const MoveWallEndpointTool: React.FC<{ target: MovingWallEndpoint }> = ({ } }, [exitMoveMode, target]) + // Live segment dimensions for the floating pill. The moving endpoint is + // `cursorLocalPos`; the other end is fixed. Length tracks the drag (curve + // offset is unchanged by an endpoint move); height + thickness are static. + const movingPlanPoint: WallPlanPoint = [cursorLocalPos[0], cursorLocalPos[2]] + const fixedPlanPoint = fixedPointRef.current + const previewStart = target.endpoint === 'start' ? movingPlanPoint : fixedPlanPoint + const previewEnd = target.endpoint === 'end' ? movingPlanPoint : fixedPlanPoint + const liveLength = getWallCurveLength({ + start: previewStart, + end: previewEnd, + curveOffset: target.wall.curveOffset, + }) + const wallHeight = target.wall.height ?? DEFAULT_WALL_HEIGHT + const dimMidX = (previewStart[0] + previewEnd[0]) / 2 + const dimMidZ = (previewStart[1] + previewEnd[1]) / 2 + return ( + + +