@pascal-app/editor 1.0.4 → 1.0.5

package/src/components/editor/floorplan-panel.tsx

@@ -5,6 +5,7 @@ import {
   type AnyNode,
   type AnyNodeId,
   type BuildingNode,
+  type CameraControlFrameEvent,
   type CeilingNode,
   CeilingNode as CeilingNodeSchema,
   type ColumnNode,
@@ -18,7 +19,6 @@ import {
   type FenceNode,
   type FloorplanGeometry,
   type GeometryContext,
-  type GridEvent,
   type GuideNode,
   getRenderableSlabPolygon,
   getWallChordFrame,
@@ -134,6 +134,7 @@ import {
   zoneAtLevelPoint,
 } from '../../lib/units'
 import { cn } from '../../lib/utils'
+import { framingAnimates } from '../../lib/viewer-selection'
 import { getWallDrawVariant } from '../../lib/wall-draw-variant'
 import {
   addWallPolygonDraftCorner,
@@ -165,7 +166,13 @@ import useInteractionScope, {
 import usePlacementPreview from '../../store/use-placement-preview'
 import { expandSessionSelectionForNode } from '../../store/use-session-groups'
 import { useStairBuildPreview } from '../../store/use-stair-build-preview'
-import { activeViewLayout, isViewVisible, VIEW_2D, visibleScene } from '../../store/view-layout'
+import {
+  activeViewLayout,
+  isViewVisible,
+  VIEW_2D,
+  VIEW_3D,
+  visibleScene,
+} from '../../store/view-layout'
 import { FloorplanAlignmentGuideLayer } from '../editor-2d/floorplan-alignment-guide-layer'
 import { FloorplanCursorIndicatorOverlay as Editor2dFloorplanCursorIndicatorOverlay } from '../editor-2d/floorplan-cursor-indicator-overlay'
 import { FloorplanGroupActionMenu } from '../editor-2d/floorplan-group-action-menu'
@@ -4196,6 +4203,8 @@ function FloorplanStairBuildPreviewLayer({
   const point = useStairBuildPreview((s) => s.point)
   const rotation = useStairBuildPreview((s) => s.rotation)
   const rise = useStairBuildPreview((s) => s.rise)
+  const length = useStairBuildPreview((s) => s.length)
+  const stepCount = useStairBuildPreview((s) => s.stepCount)
   const isActive = mode === 'build' && tool === 'stair'
 
   const previewGeometry = useMemo(() => {
@@ -4204,6 +4213,8 @@ function FloorplanStairBuildPreviewLayer({
     }
     const previewSegment = {
       ...createSizedStairFlight(rise),
+      ...(length !== null ? { length } : {}),
+      ...(stepCount !== null ? { stepCount } : {}),
       id: 'sseg_floorplan_preview' as const,
       parentId: 'stair_floorplan_preview' as const,
     }
@@ -4229,7 +4240,7 @@ function FloorplanStairBuildPreviewLayer({
         }),
       ) ?? null
     )
-  }, [isActive, point, rotation, rise, palette])
+  }, [isActive, point, rotation, rise, length, stepCount, palette])
 
   if (!previewGeometry) return null
   return <FloorplanGeometryRenderer geometry={previewGeometry} pointerEventsOverride="none" />
@@ -6683,6 +6694,58 @@ export function FloorplanPanel({
     stopFloorplanViewAnimation,
   ])
 
+  // A frame request ("show me this node") moves the 3D camera and the plan follows its pose; with no
+  // 3D view on screen no pose reaches the plan, so it frames the node itself. The request waits for
+  // the selection it came with to render: a node on another floor or in another building is placed
+  // with that building's transform, after the floor change has reset the view.
+  const [pendingFrame, setPendingFrame] = useState<CameraControlFrameEvent | null>(null)
+  useEffect(() => {
+    const frame = (event: CameraControlFrameEvent) => {
+      if (isFloorplanOpenRef.current && !isViewVisible(useEditor.getState(), VIEW_3D))
+        setPendingFrame(event)
+    }
+    emitter.on('camera-controls:frame', frame)
+    return () => emitter.off('camera-controls:frame', frame)
+  }, [])
+
+  useEffect(() => {
+    if (!pendingFrame) return
+    setPendingFrame(null)
+    const userRotationDeg = latestFloorplanUserRotationDegRef.current
+    const toLocal = (x: number, z: number) =>
+      worldToFloorplanLocalPoint(x, z, buildingPosition, buildingRotationY)
+    const { bounds, pose } = pendingFrame
+    let centre: SvgPoint
+    let width: number | undefined
+    if (bounds) {
+      // The box's corners as the plan shows them now, so it fits the pane at any turn and aspect.
+      const sceneRotationDeg = FLOORPLAN_VIEW_ROTATION_DEG + userRotationDeg - buildingRotationDeg
+      const shown = [bounds.min[0], bounds.max[0]].flatMap((x) =>
+        [bounds.min[2], bounds.max[2]].map((z) => rotateSvgPoint(toLocal(x, z), sceneRotationDeg)),
+      )
+      const xs = shown.map((point) => point.x)
+      const ys = shown.map((point) => point.y)
+      centre = toLocal((bounds.min[0] + bounds.max[0]) / 2, (bounds.min[2] + bounds.max[2]) / 2)
+      width = Math.max(
+        Math.max(...xs) - Math.min(...xs) + FLOORPLAN_PADDING * 2,
+        (Math.max(...ys) - Math.min(...ys) + FLOORPLAN_PADDING * 2) * svgAspectRatio,
+      )
+    } else if (pose) {
+      // A saved view with nothing to measure: its target, at the zoom the person has.
+      centre = toLocal(pose.target[0], pose.target[2])
+    } else return
+    // A floor change has just reset the view to the whole floor: glide from there, not from nothing.
+    latestViewportRef.current ??= latestFittedViewportRef.current
+    applyFloorplanNavigationView(centre, userRotationDeg, width, { smooth: framingAnimates() })
+  }, [
+    applyFloorplanNavigationView,
+    buildingPosition,
+    buildingRotationDeg,
+    buildingRotationY,
+    pendingFrame,
+    svgAspectRatio,
+  ])
+
   const viewBox = useMemo(() => {
     const currentViewport = viewport ?? fittedViewport
     const width = currentViewport.width
@@ -7990,22 +8053,6 @@ export function FloorplanPanel({
       useStairBuildPreview.getState().reset()
       return
     }
-
-    const handleGridMove = (event: GridEvent) => {
-      // Publish to the dedicated store (deduped on the snapped point), NOT panel
-      // state: the stair preview lives in `FloorplanStairBuildPreviewLayer`, so a
-      // per-move update re-renders only that tiny leaf instead of this entire
-      // (~200ms) panel — the same pattern that keeps column/elevator smooth.
-      useStairBuildPreview
-        .getState()
-        .setPoint(getSnappedFloorplanPoint([event.localPosition[0], event.localPosition[2]]))
-    }
-
-    emitter.on('grid:move', handleGridMove)
-
-    return () => {
-      emitter.off('grid:move', handleGridMove)
-    }
   }, [isStairBuildActive])
 
   useEffect(() => {
@@ -9278,7 +9325,9 @@ export function FloorplanPanel({
         )
         const fenceGridBase = snapWallPointToGrid(planPoint)
         const fenceLocked =
-          fenceSnapped[0] !== fenceGridBase[0] || fenceSnapped[1] !== fenceGridBase[1]
+          event.altKey ||
+          fenceSnapped[0] !== fenceGridBase[0] ||
+          fenceSnapped[1] !== fenceGridBase[1]
         let snappedPoint = fenceSnapped
         if (fenceLocked) useAlignmentGuides.getState().clear()
         // Alignment lines show in every mode; the pull applies only when
@@ -11265,7 +11314,7 @@ export function FloorplanPanel({
             }}
           >
             <div className="mb-3 flex items-start gap-2.5">
-              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-border bg-white/5">
+              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-border bg-black/4 dark:bg-white/5">
                 <Ruler className="h-4 w-4 text-foreground/80" />
               </div>
               <div className="min-w-0">
@@ -11277,7 +11326,7 @@ export function FloorplanPanel({
               </div>
             </div>
 
-            <div className="mb-3 rounded-xl border border-border/70 bg-white/5 px-3 py-2">
+            <div className="mb-3 rounded-xl border border-border/70 bg-black/4 dark:bg-white/5 px-3 py-2">
               <div className="text-[11px] text-muted-foreground uppercase tracking-wide">
                 Drawn line
               </div>
@@ -11340,7 +11389,7 @@ export function FloorplanPanel({
 
             <div className="mt-4 flex justify-end gap-2">
               <button
-                className="h-8 rounded-lg border border-border px-3 font-medium text-muted-foreground text-xs transition hover:bg-white/8 hover:text-foreground"
+                className="h-8 rounded-lg border border-border px-3 font-medium text-muted-foreground text-xs transition hover:bg-black/5 dark:hover:bg-white/8 hover:text-foreground"
                 onClick={() => setPendingReferenceScale(null)}
                 type="button"
               >