@pascal-app/editor 0.9.1 → 0.9.2

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

@@ -1,51 +1,27 @@
-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 { 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
  */
@@ -107,11 +83,35 @@ export const ZoneTool: React.FC = () => {
     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 +127,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 +143,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 +158,45 @@ export const ZoneTool: React.FC = () => {
 
     const updatePreview = () => {
       const points = pointsRef.current
-      const lastPoint = points[points.length - 1]
+      const cursorPt = snappedCursorPosition ?? cursorPosition
 
-      let cursorPt: [number, number] | null = null
-      if (lastPoint) {
-        cursorPt = calculateSnapPoint(lastPoint, cursorPosition)
-      } else if (points.length === 0) {
-        cursorPt = 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
+
+      // 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 +214,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 +272,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>
   )
 }

package/src/components/ui/action-menu/control-modes.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import { Icon } from '@iconify/react'
-import { type LevelNode, useScene } from '@pascal-app/core'
-import { useViewer } from '@pascal-app/viewer'
 import { type LucideIcon, Trash2 } from 'lucide-react'
 import Image from 'next/image'
+import { Fragment } from 'react'
 import { cn } from './../../../lib/utils'
-import useEditor, { selectSiteFloorplanContext } from './../../../store/use-editor'
+import useEditor from './../../../store/use-editor'
 import { ActionButton } from './action-button'
+import { MeasurementControl } from './measurement-control'
 
-type ControlId = 'select' | 'box-select' | 'site-edit' | 'zone' | 'delete'
+type ControlId = 'select' | 'box-select' | 'zone' | 'delete'
 
 type ControlConfig = {
   id: ControlId
@@ -26,22 +26,15 @@ type ControlConfig = {
 const controls: ControlConfig[] = [
   {
     id: 'select',
-    imageSrc: '/icons/select.png',
+    imageSrc: '/icons/select.webp',
     label: 'Select',
     shortcut: 'V',
     color: 'hover:bg-blue-500/20 hover:text-blue-400',
     activeColor: 'bg-blue-500/20 text-blue-400',
   },
-  {
-    id: 'site-edit',
-    imageSrc: '/icons/site-flag.png',
-    label: 'Edit site',
-    color: 'hover:bg-white/5',
-    activeColor: 'bg-white/10 hover:bg-white/10',
-  },
   {
     id: 'zone',
-    imageSrc: '/icons/zone.png',
+    imageSrc: '/icons/zone.webp',
     label: 'Zone',
     shortcut: 'Z',
     color: 'hover:bg-green-500/20 hover:text-green-400',
@@ -65,47 +58,20 @@ export function ControlModes() {
   const setPhase = useEditor((state) => state.setPhase)
   const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
-  const levelId = useViewer((s) => s.selection.levelId)
-
-  // Only subscribe to the primitive `level` number — when walls are added to
-  // this level the object ref changes but this number doesn't, so Object.is
-  // dedupes and we avoid a re-render.
-  const levelIndex = useScene((state) => {
-    if (!levelId) return null
-    const node = state.nodes[levelId]
-    return node?.type === 'level' ? (node as LevelNode).level : null
-  })
 
   const isSiteEditing = phase === 'site'
-  const isGroundFloor = levelIndex === 0
-  const canEnterSiteEdit = isGroundFloor || isSiteEditing
 
   const structureLayer = useEditor((state) => state.structureLayer)
 
   const getIsActive = (id: ControlId): boolean => {
-    if (isSiteEditing) return id === 'site-edit'
     if (id === 'select') return mode === 'select' && selectionTool === 'click'
     if (id === 'box-select') return mode === 'select' && selectionTool === 'marquee'
-    if (id === 'site-edit') return false
     if (id === 'zone')
       return mode === 'build' && phase === 'structure' && structureLayer === 'zones'
     return mode === id
   }
 
   const handleClick = (id: ControlId) => {
-    if (id === 'site-edit') {
-      if (isSiteEditing) {
-        // Toggle off → back to structure/select
-        setPhase('structure')
-        setMode('select')
-        setStructureLayer('elements')
-      } else if (isGroundFloor) {
-        useEditor.setState({ phase: 'site', mode: 'select', tool: null, catalogCategory: null })
-        selectSiteFloorplanContext()
-      }
-      return
-    }
-
     // Exit site editing first if needed
     if (isSiteEditing) {
       setPhase('structure')
@@ -136,64 +102,45 @@ export function ControlModes() {
       {controls.map((c) => {
         const ModeIcon = c.icon
         const isImageMode = Boolean(c.imageSrc)
-        const isSiteButton = c.id === 'site-edit'
         const isActive = getIsActive(c.id)
-        const isDisabled = isSiteButton && !canEnterSiteEdit
 
         return (
-          <ActionButton
-            className={cn(
-              'group text-muted-foreground',
-              isSiteButton
-                ? isActive
-                  ? c.activeColor
-                  : canEnterSiteEdit
-                    ? 'opacity-60 grayscale hover:bg-white/5 hover:opacity-100 hover:grayscale-0'
-                    : 'cursor-not-allowed opacity-35 grayscale'
-                : !(isImageMode || isActive) && c.color,
-              !(isSiteButton || isImageMode) && isActive && c.activeColor,
-              !isSiteButton && isImageMode && isActive && 'bg-white/10 hover:bg-white/10',
-              !isSiteButton && isImageMode && !isActive && 'hover:bg-white/5',
-            )}
-            disabled={isDisabled}
-            key={c.id}
-            label={
-              isSiteButton
-                ? isActive
-                  ? 'Exit site editing'
-                  : canEnterSiteEdit
-                    ? 'Edit site'
-                    : 'Site editing (ground level only)'
-                : c.label
-            }
-            onClick={() => handleClick(c.id)}
-            shortcut={c.shortcut}
-            size="icon"
-            variant="ghost"
-          >
-            {c.imageSrc ? (
-              <Image
-                alt={c.label}
-                className={cn(
-                  'h-[28px] w-[28px] object-contain transition-[opacity,filter] duration-200',
-                  isSiteButton
-                    ? isActive
-                      ? 'opacity-100 grayscale-0'
-                      : ''
-                    : isActive
+          <Fragment key={c.id}>
+            {c.id === 'delete' ? <MeasurementControl /> : null}
+            <ActionButton
+              className={cn(
+                'group text-muted-foreground',
+                !(isImageMode || isActive) && c.color,
+                !isImageMode && isActive && c.activeColor,
+                isImageMode && isActive && 'bg-white/10 hover:bg-white/10',
+                isImageMode && !isActive && 'hover:bg-white/5',
+              )}
+              label={c.label}
+              onClick={() => handleClick(c.id)}
+              shortcut={c.shortcut}
+              size="icon"
+              variant="ghost"
+            >
+              {c.imageSrc ? (
+                <Image
+                  alt={c.label}
+                  className={cn(
+                    'h-[28px] w-[28px] object-contain transition-[opacity,filter] duration-200',
+                    isActive
                       ? 'opacity-100 grayscale-0'
                       : 'opacity-60 grayscale group-hover:opacity-100 group-hover:grayscale-0',
-                )}
-                height={28}
-                src={c.imageSrc}
-                width={28}
-              />
-            ) : c.iconifyIcon ? (
-              <Icon color="currentColor" height={18} icon={c.iconifyIcon} width={18} />
-            ) : (
-              ModeIcon && <ModeIcon className="h-5 w-5" />
-            )}
-          </ActionButton>
+                  )}
+                  height={28}
+                  src={c.imageSrc}
+                  width={28}
+                />
+              ) : c.iconifyIcon ? (
+                <Icon color="currentColor" height={18} icon={c.iconifyIcon} width={18} />
+              ) : (
+                ModeIcon && <ModeIcon className="h-5 w-5" />
+              )}
+            </ActionButton>
+          </Fragment>
         )
       })}
     </div>

package/src/components/ui/action-menu/furnish-tools.tsx

@@ -8,9 +8,9 @@ export type FurnishToolConfig = {
 }
 
 export const furnishTools: FurnishToolConfig[] = [
-  { id: 'item', iconSrc: '/icons/couch.png', label: 'Furniture', catalogCategory: 'furniture' },
-  { id: 'item', iconSrc: '/icons/appliance.png', label: 'Appliance', catalogCategory: 'appliance' },
-  { id: 'item', iconSrc: '/icons/kitchen.png', label: 'Kitchen', catalogCategory: 'kitchen' },
-  { id: 'item', iconSrc: '/icons/bathroom.png', label: 'Bathroom', catalogCategory: 'bathroom' },
-  { id: 'item', iconSrc: '/icons/tree.png', label: 'Outdoor', catalogCategory: 'outdoor' },
+  { id: 'item', iconSrc: '/icons/couch.webp', label: 'Furniture', catalogCategory: 'furniture' },
+  { id: 'item', iconSrc: '/icons/appliance.webp', label: 'Appliance', catalogCategory: 'appliance' },
+  { id: 'item', iconSrc: '/icons/kitchen.webp', label: 'Kitchen', catalogCategory: 'kitchen' },
+  { id: 'item', iconSrc: '/icons/bathroom.webp', label: 'Bathroom', catalogCategory: 'bathroom' },
+  { id: 'item', iconSrc: '/icons/tree.webp', label: 'Outdoor', catalogCategory: 'outdoor' },
 ]

package/src/components/ui/action-menu/index.tsx

@@ -9,7 +9,7 @@ import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { CameraActions } from './camera-actions'
 import { ControlModes } from './control-modes'
-import { GridSnapControl, SecondaryToggles } from './view-toggles'
+import { SecondaryToggles } from './view-toggles'
 
 // Mobile bottom offset matches the viewer's overlap behind the sheet's
 // rounded corners (SHEET_OVERLAP_PX in editor-layout-mobile) so the menu sits
@@ -57,9 +57,8 @@ export function ActionMenu({ className }: { className?: string }) {
             <div className="flex items-center justify-center gap-1">
               <ControlModes />
             </div>
-            {/* Row 2: grid snap + secondary toggles (orbit + top view hidden) */}
+            {/* Row 2: secondary toggles (orbit + top view hidden) */}
             <div className="flex items-center justify-center gap-1 border-border/50 border-t pt-1">
-              <GridSnapControl />
               <SecondaryToggles />
             </div>
           </div>
@@ -67,7 +66,6 @@ export function ActionMenu({ className }: { className?: string }) {
           <div className="flex items-center justify-center gap-1 px-2 py-1.5">
             <ControlModes />
             <div className="mx-1 h-5 w-px bg-border" />
-            <GridSnapControl />
             <SecondaryToggles />
             <div className="mx-1 h-5 w-px bg-border" />
             <CameraActions />