@pascal-app/editor 0.9.1 → 1.0.0-beta.1

package/src/components/tools/wall/wall-snap-geometry.ts

@@ -15,6 +15,8 @@ export type WallPlanPoint = [number, number]
 /** Which kind of existing-geometry snap produced a drafted point. */
 export type WallDraftSnapKind = 'endpoint' | 'midpoint' | 'intersection' | 'wall'
 
+export type WallSnapRadii = Partial<Record<WallDraftSnapKind, number>>
+
 export type WallDraftSnapResult = {
   point: WallPlanPoint
   /**
@@ -23,9 +25,23 @@ export type WallDraftSnapResult = {
    * the "magnetic" snap the beacon visualises; `null` for grid/angle-only.
    */
   snap: WallDraftSnapKind | null
+  /**
+   * Walls whose geometry produced the snap. Kept separate from `snap` so a
+   * caller can use geometry for XZ alignment while independently deciding
+   * whether the target is allowed to transfer its construction plane.
+   */
+  targetWallIds: string[]
 }
 
 export const WALL_JOIN_SNAP_RADIUS = 0.35
+// Tight capture radius for the connectivity snap that runs in NON-magnetic modes
+// (grid / off / angles). Joining an existing wall is treated as connectivity —
+// separate from the 'lines' magnetic alignment — so a room can still close in
+// those modes: within this distance of a wall the endpoint sticks onto it (and
+// the beacon shows); beyond it, positioning is left to the mode. Kept small so
+// only the last few cm near a wall stick, well above the room-detection junction
+// tolerance so a captured endpoint always registers as connected.
+export const WALL_CONNECT_SNAP_RADIUS = 0.05
 // Generous radius for snapping to an *existing* wall's endpoint while
 // drafting. Larger than `WALL_JOIN_SNAP_RADIUS` because endpoint snap
 // is the strongest user intent (closing a polygon, attaching to a
@@ -108,6 +124,53 @@ export function findWallSnapTarget(
   return bestTarget
 }
 
+/**
+ * Wall ids that contain an already-resolved snap point.
+ *
+ * This is provenance, not another snap pass: the tolerance only absorbs float
+ * drift around a point the snap pipeline already chose.
+ */
+export function wallIdsAtSnapPoint(
+  point: WallPlanPoint,
+  walls: WallNode[],
+  ignoreWallIds?: string[],
+  tolerance = 1e-6,
+): string[] {
+  const ignored = new Set(ignoreWallIds ?? [])
+  const toleranceSquared = tolerance * tolerance
+  const ids: string[] = []
+
+  for (const wall of walls) {
+    if (ignored.has(wall.id)) continue
+    if (
+      distanceSquared(point, wall.start) <= toleranceSquared ||
+      distanceSquared(point, wall.end) <= toleranceSquared
+    ) {
+      ids.push(wall.id)
+      continue
+    }
+
+    if (isCurvedWall(wall)) {
+      const sampleCount = Math.max(8, Math.ceil(getWallCurveLength(wall) / 0.3))
+      for (let index = 1; index < sampleCount; index += 1) {
+        const frame = getWallCurveFrameAt(wall, index / sampleCount)
+        if (distanceSquared(point, [frame.point.x, frame.point.y]) <= toleranceSquared) {
+          ids.push(wall.id)
+          break
+        }
+      }
+      continue
+    }
+
+    const projected = projectPointOntoWall(point, wall)
+    if (projected && distanceSquared(point, projected) <= toleranceSquared) {
+      ids.push(wall.id)
+    }
+  }
+
+  return ids
+}
+
 /**
  * Endpoint-only snap from the *raw* cursor (no grid pre-snap), with a
  * generous radius. Use this before `findWallSnapTarget` so the strong
@@ -119,9 +182,10 @@ export function findWallEndpointFromRaw(
   point: WallPlanPoint,
   walls: WallNode[],
   ignoreWallIds?: string[],
+  radius = WALL_ENDPOINT_SNAP_RADIUS,
 ): WallPlanPoint | null {
   const ignored = new Set(ignoreWallIds ?? [])
-  const radiusSquared = WALL_ENDPOINT_SNAP_RADIUS ** 2
+  const radiusSquared = radius ** 2
   let best: WallPlanPoint | null = null
   let bestDistSq = Number.POSITIVE_INFINITY
 
@@ -152,9 +216,10 @@ export function findWallMidpointFromRaw(
   point: WallPlanPoint,
   walls: WallNode[],
   ignoreWallIds?: string[],
+  radius = WALL_MIDPOINT_SNAP_RADIUS,
 ): WallPlanPoint | null {
   const ignored = new Set(ignoreWallIds ?? [])
-  const radiusSquared = WALL_MIDPOINT_SNAP_RADIUS ** 2
+  const radiusSquared = radius ** 2
   let best: WallPlanPoint | null = null
   let bestDistSq = Number.POSITIVE_INFINITY
 
@@ -202,10 +267,11 @@ export function findWallIntersectionFromRaw(
   point: WallPlanPoint,
   walls: WallNode[],
   ignoreWallIds?: string[],
+  radius = WALL_INTERSECTION_SNAP_RADIUS,
 ): WallPlanPoint | null {
   const ignored = new Set(ignoreWallIds ?? [])
   const straight = walls.filter((wall) => !ignored.has(wall.id) && !isCurvedWall(wall))
-  const radiusSquared = WALL_INTERSECTION_SNAP_RADIUS ** 2
+  const radiusSquared = radius ** 2
   let best: WallPlanPoint | null = null
   let bestDistSq = Number.POSITIVE_INFINITY
 
@@ -246,6 +312,53 @@ function nearestCandidate(
   return best
 }
 
+// Tolerance for "the committed endpoint actually lies on existing wall
+// geometry". Commit-time resolution (corner join, connect snap, split) puts
+// the endpoint exactly on the geometry, so this only needs to absorb float
+// drift — it is NOT a snap radius.
+export const WALL_CHAIN_JOIN_TOLERANCE = 1e-3
+
+/**
+ * True when a committed chain segment's resolved `end` lies on wall geometry
+ * (an endpoint, or a straight wall's interior) of a wall outside the current
+ * draft chain. The wall tools stop chaining there: a segment that tees into
+ * the existing network is a termination — continuing would draft the next
+ * segment on top of existing walls. `chainWallIds` excludes the chain's own
+ * segments (including the just-committed one) so edge/midpoint snaps onto a
+ * previous own segment don't read as a join. Curved wall interiors are
+ * skipped (their endpoints still count) — resolving an end onto a curve body
+ * is rare and continuing there matches the previous behaviour.
+ */
+export function chainEndJoinsExistingWall(
+  end: WallPlanPoint,
+  walls: WallNode[],
+  chainWallIds: string[],
+  tolerance = WALL_CHAIN_JOIN_TOLERANCE,
+): boolean {
+  const ignored = new Set(chainWallIds)
+  const toleranceSquared = tolerance * tolerance
+
+  for (const wall of walls) {
+    if (ignored.has(wall.id)) continue
+
+    if (
+      distanceSquared(end, wall.start) <= toleranceSquared ||
+      distanceSquared(end, wall.end) <= toleranceSquared
+    ) {
+      return true
+    }
+
+    if (isCurvedWall(wall)) continue
+
+    const projected = projectPointOntoWall(end, wall)
+    if (projected && distanceSquared(end, projected) <= toleranceSquared) {
+      return true
+    }
+  }
+
+  return false
+}
+
 /**
  * Discrete "special point" snap from the raw cursor, in priority order:
  *   1. corners (endpoints) — strongest intent, largest radius
@@ -257,14 +370,29 @@ export function findWallSpecialPointSnap(
   point: WallPlanPoint,
   walls: WallNode[],
   ignoreWallIds?: string[],
+  radii?: WallSnapRadii,
 ): WallDraftSnapResult | null {
-  const endpoint = findWallEndpointFromRaw(point, walls, ignoreWallIds)
-  if (endpoint) return { point: endpoint, snap: 'endpoint' }
+  const endpoint = findWallEndpointFromRaw(point, walls, ignoreWallIds, radii?.endpoint)
+  if (endpoint) {
+    return {
+      point: endpoint,
+      snap: 'endpoint',
+      targetWallIds: wallIdsAtSnapPoint(endpoint, walls, ignoreWallIds),
+    }
+  }
 
-  const midpoint = findWallMidpointFromRaw(point, walls, ignoreWallIds)
-  const intersection = findWallIntersectionFromRaw(point, walls, ignoreWallIds)
+  const midpoint = findWallMidpointFromRaw(point, walls, ignoreWallIds, radii?.midpoint)
+  const intersection = findWallIntersectionFromRaw(point, walls, ignoreWallIds, radii?.intersection)
   return nearestCandidate(point, [
-    midpoint && { point: midpoint, snap: 'midpoint' },
-    intersection && { point: intersection, snap: 'intersection' },
+    midpoint && {
+      point: midpoint,
+      snap: 'midpoint',
+      targetWallIds: wallIdsAtSnapPoint(midpoint, walls, ignoreWallIds),
+    },
+    intersection && {
+      point: intersection,
+      snap: 'intersection',
+      targetWallIds: wallIdsAtSnapPoint(intersection, walls, ignoreWallIds),
+    },
   ])
 }

package/src/components/tools/zone/zone-boundary-editor.tsx

@@ -18,7 +18,11 @@ export const ZoneBoundaryEditor: React.FC<ZoneBoundaryEditorProps> = ({ zoneId }
 
   const handlePolygonChange = useCallback(
     (newPolygon: Array<[number, number]>) => {
-      updateNode(zoneId, { polygon: newPolygon })
+      updateNode(zoneId, {
+        polygon: newPolygon,
+        autoFromWalls: false,
+        boundaryWallIds: [],
+      })
     },
     [zoneId, updateNode],
   )

package/src/components/tools/zone/zone-tool.tsx

@@ -1,51 +1,28 @@
-import { emitter, type GridEvent, type LevelNode, useScene, ZoneNode } from '@pascal-app/core'
+import {
+  DEFAULT_ANGLE_STEP,
+  emitter,
+  type GridEvent,
+  type LevelNode,
+  snapPointAlongAngleRay,
+  useScene,
+  ZoneNode,
+} from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { BufferGeometry, DoubleSide, type Group, type Line, Shape, Vector3 } from 'three'
 import { EDITOR_LAYER } from './../../../lib/constants'
 import { sfxEmitter } from './../../../lib/sfx-bus'
+import {
+  clearSurfacePlanSnapFeedback,
+  resolveSurfacePlanPointSnap,
+} from './../../../lib/surface-plan-snap'
 import { snapWorldXZForActiveBuilding } from './../../../lib/world-grid-snap'
-import useEditor from './../../../store/use-editor'
+import useEditor, { isAngleSnapActive, isGridSnapActive } from './../../../store/use-editor'
+import { useFloorplanDraftPreview } from './../../../store/use-floorplan-draft-preview'
 import { CursorSphere } from '../shared/cursor-sphere'
 
 const Y_OFFSET = 0.02
 
-/**
- * Snaps a point to the nearest axis-aligned or 45-degree diagonal from the last point
- */
-const calculateSnapPoint = (
-  lastPoint: [number, number],
-  currentPoint: [number, number],
-): [number, number] => {
-  const [x1, y1] = lastPoint
-  const [x, y] = currentPoint
-
-  const dx = x - x1
-  const dy = y - y1
-  const absDx = Math.abs(dx)
-  const absDy = Math.abs(dy)
-
-  // Calculate distances to horizontal, vertical, and diagonal lines
-  const horizontalDist = absDy
-  const verticalDist = absDx
-  const diagonalDist = Math.abs(absDx - absDy)
-
-  // Find the minimum distance to determine which axis to snap to
-  const minDist = Math.min(horizontalDist, verticalDist, diagonalDist)
-
-  if (minDist === diagonalDist) {
-    // Snap to 45° diagonal
-    const diagonalLength = Math.min(absDx, absDy)
-    return [x1 + Math.sign(dx) * diagonalLength, y1 + Math.sign(dy) * diagonalLength]
-  }
-  if (minDist === horizontalDist) {
-    // Snap to horizontal
-    return [x, y1]
-  }
-  // Snap to vertical
-  return [x1, y]
-}
-
 /**
  * Creates a zone with the given polygon points
  */
@@ -103,15 +80,53 @@ export const ZoneTool: React.FC = () => {
     levelY: 0,
   })
 
+  useEffect(() => {
+    useFloorplanDraftPreview.getState().setPolygonDraft('zone', preview.points)
+  }, [preview.points])
+  useEffect(
+    () => () => {
+      const draftPreview = useFloorplanDraftPreview.getState()
+      if (draftPreview.polygonDraftType === 'zone') {
+        draftPreview.setPolygonDraft(null, [])
+      }
+      draftPreview.setCursorPoint(null)
+    },
+    [],
+  )
+
   useEffect(() => {
     if (!currentLevelId) return
 
     let cursorPosition: [number, number] = [0, 0]
+    let snappedCursorPosition: [number, number] | null = null
 
     // Initialize line geometries
     mainLineRef.current.geometry = new BufferGeometry()
     closingLineRef.current.geometry = new BufferGeometry()
 
+    // Snapping follows the active mode: `angles` locks the ray to 15° from the
+    // last vertex (grid quantizes the distance along it), otherwise `grid`
+    // quantizes to the world-aligned grid; the shared surface snap then layers
+    // wall-corner/midpoint/crossing magnetics and alignment guides on top —
+    // the same pipeline slab/ceiling drafting uses. No held-Shift bypass —
+    // Shift cycles the mode (see interaction-scope.md).
+    const snapDraftPoint = (
+      lastPoint: [number, number] | undefined,
+      gridPoint: [number, number],
+      rawPoint: [number, number],
+    ): [number, number] => {
+      const gridStep = isGridSnapActive() ? useEditor.getState().gridSnapStep : 0
+      const orthoPoint: [number, number] =
+        isAngleSnapActive() && lastPoint
+          ? [...snapPointAlongAngleRay(lastPoint, rawPoint, DEFAULT_ANGLE_STEP, gridStep)]
+          : gridPoint
+      return resolveSurfacePlanPointSnap({
+        rawPoint,
+        fallbackPoint: orthoPoint,
+        levelId: currentLevelId,
+      }).point
+    }
+
     const updateLines = () => {
       const points = pointsRef.current
       const y = levelYRef.current + Y_OFFSET
@@ -127,11 +142,9 @@ export const ZoneTool: React.FC = () => {
 
       // Add cursor point
       const lastPoint = points[points.length - 1]
-      if (lastPoint) {
-        const snapped = calculateSnapPoint(lastPoint, cursorPosition)
-        if (isValidPoint(snapped)) {
-          linePoints.push(new Vector3(snapped[0], y, snapped[1]))
-        }
+      const snapped = snappedCursorPosition ?? cursorPosition
+      if (lastPoint && isValidPoint(snapped)) {
+        linePoints.push(new Vector3(snapped[0], y, snapped[1]))
       }
 
       // Update main line geometry
@@ -145,17 +158,14 @@ export const ZoneTool: React.FC = () => {
 
       // Update closing line (from cursor back to first point)
       const firstPoint = points[0]
-      if (points.length >= 2 && lastPoint && isValidPoint(firstPoint)) {
-        const snapped = calculateSnapPoint(lastPoint, cursorPosition)
-        if (isValidPoint(snapped)) {
-          const closingPoints = [
-            new Vector3(snapped[0], y, snapped[1]),
-            new Vector3(firstPoint[0], y, firstPoint[1]),
-          ]
-          closingLineRef.current.geometry.dispose()
-          closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
-          closingLineRef.current.visible = true
-        }
+      if (points.length >= 2 && lastPoint && isValidPoint(firstPoint) && isValidPoint(snapped)) {
+        const closingPoints = [
+          new Vector3(snapped[0], y, snapped[1]),
+          new Vector3(firstPoint[0], y, firstPoint[1]),
+        ]
+        closingLineRef.current.geometry.dispose()
+        closingLineRef.current.geometry = new BufferGeometry().setFromPoints(closingPoints)
+        closingLineRef.current.visible = true
       } else {
         closingLineRef.current.visible = false
       }
@@ -163,40 +173,46 @@ export const ZoneTool: React.FC = () => {
 
     const updatePreview = () => {
       const points = pointsRef.current
-      const lastPoint = points[points.length - 1]
-
-      let cursorPt: [number, number] | null = null
-      if (lastPoint) {
-        cursorPt = calculateSnapPoint(lastPoint, cursorPosition)
-      } else if (points.length === 0) {
-        cursorPt = cursorPosition
-      }
+      const cursorPt = snappedCursorPosition ?? cursorPosition
 
-      setPreview({ points: [...points], cursorPoint: cursorPt, levelY: levelYRef.current })
+      setPreview({
+        points: [...points],
+        cursorPoint: isValidPoint(cursorPt) ? cursorPt : null,
+        levelY: levelYRef.current,
+      })
       updateLines()
     }
 
+    // World-grid snap projected into building-local; rotated buildings
+    // used to pull the snap off the visible grid lines. Grid quantize only
+    // in grid mode; off / lines / angles leave the raw cursor.
+    const gridPointOf = (event: GridEvent): [number, number] =>
+      isGridSnapActive()
+        ? snapWorldXZForActiveBuilding(
+            event.position[0],
+            event.position[2],
+            useEditor.getState().gridSnapStep,
+          ).local
+        : [event.localPosition[0], event.localPosition[2]]
+
     const onGridMove = (event: GridEvent) => {
       if (!cursorRef.current) return
 
-      // World-grid snap projected into building-local; rotated buildings
-      // used to pull the snap off the visible grid lines.
-      const [gridX, gridZ] = snapWorldXZForActiveBuilding(
-        event.position[0],
-        event.position[2],
-        0.5,
-      ).local
-      cursorPosition = [gridX, gridZ]
+      cursorPosition = gridPointOf(event)
       levelYRef.current = event.localPosition[1]
 
-      // If we have points, snap to axis from last point
       const lastPoint = pointsRef.current[pointsRef.current.length - 1]
-      const displayPoint = lastPoint
-        ? calculateSnapPoint(lastPoint, cursorPosition)
-        : cursorPosition
-
-      // Play snap sound when the snapped position changes during drawing
+      const displayPoint = snapDraftPoint(lastPoint, cursorPosition, [
+        event.localPosition[0],
+        event.localPosition[2],
+      ])
+      snappedCursorPosition = displayPoint
+      useFloorplanDraftPreview.getState().setCursorPoint(displayPoint)
+
+      // Play snap sound when the snapped position changes during drawing — only
+      // when a quantizing mode is active (off / lines move continuously).
       if (
+        (isGridSnapActive() || isAngleSnapActive()) &&
         pointsRef.current.length > 0 &&
         previousSnappedPointRef.current &&
         (displayPoint[0] !== previousSnappedPointRef.current[0] ||
@@ -214,18 +230,11 @@ export const ZoneTool: React.FC = () => {
     const onGridClick = (event: GridEvent) => {
       if (!currentLevelId) return
 
-      const [gridX, gridZ] = snapWorldXZForActiveBuilding(
-        event.position[0],
-        event.position[2],
-        0.5,
-      ).local
-      let clickPoint: [number, number] = [gridX, gridZ]
-
-      // Snap to axis from last point
       const lastPoint = pointsRef.current[pointsRef.current.length - 1]
-      if (lastPoint) {
-        clickPoint = calculateSnapPoint(lastPoint, clickPoint)
-      }
+      const clickPoint = snapDraftPoint(lastPoint, gridPointOf(event), [
+        event.localPosition[0],
+        event.localPosition[2],
+      ])
 
       // Check if clicking on the first point to close the shape
       const firstPoint = pointsRef.current[0]
@@ -279,6 +288,7 @@ export const ZoneTool: React.FC = () => {
 
       // Reset state on unmount
       pointsRef.current = []
+      clearSurfacePlanSnapFeedback()
     }
   }, [currentLevelId])
 

package/src/components/ui/action-menu/camera-actions.tsx

@@ -2,9 +2,14 @@
 
 import { emitter } from '@pascal-app/core'
 import Image from 'next/image'
+import useEditor from '../../../store/use-editor'
 import { ActionButton } from './action-button'
 
 export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
+  // Orbit stays useful in 2D-only (it spins the synced floorplan view), but
+  // top view only tilts the hidden 3D camera — pointless without the canvas.
+  const is2dOnly = useEditor((s) => s.viewMode === '2d')
+
   const goToTopView = () => {
     emitter.emit('camera-controls:top-view')
   }
@@ -33,7 +38,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
               alt="Orbit Left"
               className="h-[28px] w-[28px] -scale-x-100 object-contain opacity-70 transition-opacity group-hover:opacity-100"
               height={28}
-              src="/icons/rotate.png"
+              src="/icons/rotate.webp"
               width={28}
             />
           </ActionButton>
@@ -50,7 +55,7 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
               alt="Orbit Right"
               className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
               height={28}
-              src="/icons/rotate.png"
+              src="/icons/rotate.webp"
               width={28}
             />
           </ActionButton>
@@ -58,21 +63,23 @@ export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
       )}
 
       {/* Top View */}
-      <ActionButton
-        className="group hover:bg-white/5"
-        label="Top View"
-        onClick={goToTopView}
-        size="icon"
-        variant="ghost"
-      >
-        <Image
-          alt="Top View"
-          className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
-          height={28}
-          src="/icons/topview.png"
-          width={28}
-        />
-      </ActionButton>
+      {!is2dOnly && (
+        <ActionButton
+          className="group hover:bg-white/5"
+          label="Top View"
+          onClick={goToTopView}
+          size="icon"
+          variant="ghost"
+        >
+          <Image
+            alt="Top View"
+            className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
+            height={28}
+            src="/icons/topview.webp"
+            width={28}
+          />
+        </ActionButton>
+      )}
     </div>
   )
 }