@pascal-app/editor 0.6.0 → 0.8.0

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

@@ -1,14 +1,100 @@
 import { emitter, type GridEvent, type LevelNode, useScene, type WallNode } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
-import { useEffect, useRef } from 'react'
+import { Html } from '@react-three/drei'
+import { useEffect, useRef, useState } from 'react'
 import { DoubleSide, type Group, type Mesh, Shape, ShapeGeometry, Vector3 } from 'three'
 import { markToolCancelConsumed } from '../../../hooks/use-keyboard'
 import { EDITOR_LAYER } from '../../../lib/constants'
 import { sfxEmitter } from '../../../lib/sfx-bus'
 import { CursorSphere } from '../shared/cursor-sphere'
+import {
+  formatAngleRadians,
+  getAngleToSegmentReference,
+  getSegmentAngleReferenceAtPoint,
+} from '../shared/segment-angle'
 import { createWallOnCurrentLevel, snapWallDraftPoint, type WallPlanPoint } from './wall-drafting'
 
 const WALL_HEIGHT = 2.5
+const DRAFT_LABEL_Y = WALL_HEIGHT + 0.22
+const DRAFT_ANGLE_LABEL_Y = 0.28
+
+type DraftAngleLabel = {
+  id: string
+  label: string
+  position: [number, number, number]
+}
+
+type DraftMeasurementState = {
+  lengthLabel: string
+  lengthPosition: [number, number, number]
+  angleLabels: DraftAngleLabel[]
+} | null
+
+function formatMeasurement(value: number, unit: 'metric' | 'imperial') {
+  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`
+}
+
+function getDraftAngleLabels(
+  start: WallPlanPoint,
+  end: WallPlanPoint,
+  walls: WallNode[],
+): DraftAngleLabel[] {
+  const draftFromStart: WallPlanPoint = [end[0] - start[0], end[1] - start[1]]
+  const draftFromEnd: WallPlanPoint = [start[0] - end[0], start[1] - end[1]]
+  const endpoints = [
+    { id: 'start', point: start, draftVector: draftFromStart },
+    { id: 'end', point: end, draftVector: draftFromEnd },
+  ]
+  const labels: DraftAngleLabel[] = []
+
+  for (const endpoint of endpoints) {
+    const connectedWall = walls.find((wall) =>
+      Boolean(getSegmentAngleReferenceAtPoint(endpoint.point, wall)),
+    )
+    if (!connectedWall) continue
+
+    const connectedReference = getSegmentAngleReferenceAtPoint(endpoint.point, connectedWall)
+    if (!connectedReference) continue
+
+    const angle = getAngleToSegmentReference(endpoint.draftVector, connectedReference)
+    if (angle === null) continue
+
+    labels.push({
+      id: endpoint.id,
+      label: formatAngleRadians(angle),
+      position: [endpoint.point[0], DRAFT_ANGLE_LABEL_Y, endpoint.point[1]],
+    })
+  }
+
+  return labels
+}
+
+function getDraftMeasurementState(
+  start: WallPlanPoint,
+  end: WallPlanPoint,
+  walls: WallNode[],
+  unit: 'metric' | 'imperial',
+): DraftMeasurementState {
+  const dx = end[0] - start[0]
+  const dz = end[1] - start[1]
+  const length = Math.hypot(dx, dz)
+
+  if (length < 0.01) return null
+
+  return {
+    lengthLabel: formatMeasurement(length, unit),
+    lengthPosition: [(start[0] + end[0]) / 2, DRAFT_LABEL_Y, (start[1] + end[1]) / 2],
+    angleLabels: getDraftAngleLabels(start, end, walls),
+  }
+}
 
 /**
  * Update wall preview mesh geometry to create a vertical plane between two points
@@ -67,19 +153,21 @@ const getCurrentLevelWalls = (): WallNode[] => {
 }
 
 export const WallTool: React.FC = () => {
+  const unit = useViewer((state) => state.unit)
   const cursorRef = useRef<Group>(null)
   const wallPreviewRef = useRef<Mesh>(null!)
+  // All positions are building-local: this tool is inside the ToolManager building group,
+  // so local coords are used for both data and visual positioning.
   const startingPoint = useRef(new Vector3(0, 0, 0))
   const endingPoint = useRef(new Vector3(0, 0, 0))
   const buildingState = useRef(0)
   const shiftPressed = useRef(false)
+  const [draftMeasurement, setDraftMeasurement] = useState<DraftMeasurementState>(null)
 
   useEffect(() => {
     let gridPosition: WallPlanPoint = [0, 0]
     let previousWallEnd: [number, number] | null = null
 
-    // All positions are building-local: this tool is inside the ToolManager building group,
-    // so local coords are used for both data and visual positioning.
     const onGridMove = (event: GridEvent) => {
       if (!(cursorRef.current && wallPreviewRef.current)) return
 
@@ -109,9 +197,18 @@ export const WallTool: React.FC = () => {
         previousWallEnd = currentWallEnd
 
         updateWallPreview(wallPreviewRef.current, startingPoint.current, endingPoint.current)
+        setDraftMeasurement(
+          getDraftMeasurementState(
+            [startingPoint.current.x, startingPoint.current.z],
+            snappedLocal,
+            walls,
+            unit,
+          ),
+        )
       } else {
         // Not drawing a wall yet, show the snapped anchor point.
         cursorRef.current.position.set(gridPosition[0], event.localPosition[1], gridPosition[1])
+        setDraftMeasurement(null)
       }
     }
 
@@ -126,6 +223,7 @@ export const WallTool: React.FC = () => {
         endingPoint.current.copy(startingPoint.current)
         buildingState.current = 1
         wallPreviewRef.current.visible = true
+        setDraftMeasurement(null)
       } else if (buildingState.current === 1) {
         const snappedEnd = snapWallDraftPoint({
           point: localClick,
@@ -140,6 +238,7 @@ export const WallTool: React.FC = () => {
         createWallOnCurrentLevel([startingPoint.current.x, startingPoint.current.z], snappedEnd)
         wallPreviewRef.current.visible = false
         buildingState.current = 0
+        setDraftMeasurement(null)
       }
     }
 
@@ -160,6 +259,7 @@ export const WallTool: React.FC = () => {
         markToolCancelConsumed()
         buildingState.current = 0
         wallPreviewRef.current.visible = false
+        setDraftMeasurement(null)
       }
     }
 
@@ -176,7 +276,7 @@ export const WallTool: React.FC = () => {
       window.removeEventListener('keydown', onKeyDown)
       window.removeEventListener('keyup', onKeyUp)
     }
-  }, [])
+  }, [unit])
 
   return (
     <group>
@@ -195,6 +295,38 @@ export const WallTool: React.FC = () => {
           transparent
         />
       </mesh>
+
+      {draftMeasurement && (
+        <>
+          <DraftMeasurementLabel
+            label={draftMeasurement.lengthLabel}
+            position={draftMeasurement.lengthPosition}
+          />
+          {draftMeasurement.angleLabels.map((angleLabel) => (
+            <DraftMeasurementLabel
+              key={angleLabel.id}
+              label={angleLabel.label}
+              position={angleLabel.position}
+            />
+          ))}
+        </>
+      )}
     </group>
   )
 }
+
+function DraftMeasurementLabel({
+  label,
+  position,
+}: {
+  label: string
+  position: [number, number, number]
+}) {
+  return (
+    <Html center position={position} style={{ pointerEvents: 'none' }} zIndexRange={[100, 0]}>
+      <div className="whitespace-nowrap rounded-full border border-border bg-background/95 px-2 py-1 font-mono font-semibold text-[11px] text-foreground shadow-lg backdrop-blur-md">
+        {label}
+      </div>
+    </Html>
+  )
+}

package/src/components/tools/window/move-window-tool.tsx

@@ -4,6 +4,7 @@ import {
   isCurvedWall,
   sceneRegistry,
   spatialGridManager,
+  useLiveTransforms,
   useScene,
   type WallEvent,
   WindowNode,
@@ -144,6 +145,10 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
         parentId: event.node.id,
         wallId: event.node.id,
       })
+      useLiveTransforms.getState().set(movingWindowNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
 
       if (prevWallId && prevWallId !== event.node.id) markWallDirty(prevWallId)
       markWallDirty(event.node.id)
@@ -215,6 +220,10 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
           windowMesh.updateMatrixWorld(true)
         }
       }
+      useLiveTransforms.getState().set(movingWindowNode.id, {
+        position: [clampedX, clampedY, 0],
+        rotation: itemRotation,
+      })
       markWallDirty(event.node.id)
 
       const valid = !hasWallChildOverlap(
@@ -285,6 +294,11 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
           parentId: event.node.id,
           width: movingWindowNode.width,
           height: movingWindowNode.height,
+          windowType: movingWindowNode.windowType,
+          operationState: movingWindowNode.operationState,
+          awningDirection: movingWindowNode.awningDirection,
+          casementStyle: movingWindowNode.casementStyle,
+          hingesSide: movingWindowNode.hingesSide,
           frameThickness: movingWindowNode.frameThickness,
           frameDepth: movingWindowNode.frameDepth,
           columnRatios: movingWindowNode.columnRatios,
@@ -326,6 +340,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
       }
 
       markWallDirty(event.node.id)
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       useScene.temporal.getState().pause()
 
       sfxEmitter.emit('sfx:item-place')
@@ -337,6 +352,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
 
     const onWallLeave = () => {
       hideCursor()
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       if (isNew) return // No original to restore for duplicates
       // Move mode: restore to original position while off-wall
       if (currentWallId && currentWallId !== original.parentId) {
@@ -354,6 +370,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
     }
 
     const onCancel = () => {
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       if (isNew) {
         useScene.getState().deleteNode(movingWindowNode.id)
         if (currentWallId) markWallDirty(currentWallId)
@@ -401,6 +418,7 @@ export const MoveWindowTool: React.FC<{ node: WindowNode }> = ({ node: movingWin
           if (original.parentId) markWallDirty(original.parentId)
         }
       }
+      useLiveTransforms.getState().clear(movingWindowNode.id)
       useScene.temporal.getState().resume()
       emitter.off('wall:enter', onWallEnter)
       emitter.off('wall:move', onWallMove)

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

@@ -262,6 +262,11 @@ export const WindowTool: React.FC = () => {
         parentId: event.node.id,
         width: draft.width,
         height: draft.height,
+        windowType: draft.windowType,
+        operationState: draft.operationState,
+        awningDirection: draft.awningDirection,
+        casementStyle: draft.casementStyle,
+        hingesSide: draft.hingesSide,
         frameThickness: draft.frameThickness,
         frameDepth: draft.frameDepth,
         columnRatios: draft.columnRatios,

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

@@ -3,6 +3,7 @@ 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 useEditor from './../../../store/use-editor'
 import { CursorSphere } from '../shared/cursor-sphere'
 
@@ -67,6 +68,9 @@ const commitZoneDrawing = (levelId: LevelNode['id'], points: Array<[number, numb
 
   // Select the newly created zone
   useViewer.getState().setSelection({ zoneId: zone.id })
+
+  // Play structure build sound
+  sfxEmitter.emit('sfx:structure-build')
 }
 
 type PreviewState = {
@@ -86,6 +90,7 @@ export const ZoneTool: React.FC = () => {
   const mainLineRef = useRef<Line>(null!)
   const closingLineRef = useRef<Line>(null!)
   const pointsRef = useRef<Array<[number, number]>>([])
+  const previousSnappedPointRef = useRef<[number, number] | null>(null)
   const levelYRef = useRef(0) // Track current level Y position
   const currentLevelId = useViewer((state) => state.selection.levelId)
   const setTool = useEditor((state) => state.setTool)
@@ -181,12 +186,22 @@ export const ZoneTool: React.FC = () => {
 
       // If we have points, snap to axis from last point
       const lastPoint = pointsRef.current[pointsRef.current.length - 1]
-      if (lastPoint) {
-        const snapped = calculateSnapPoint(lastPoint, cursorPosition)
-        cursorRef.current.position.set(snapped[0], event.localPosition[1], snapped[1])
-      } else {
-        cursorRef.current.position.set(gridX, event.localPosition[1], gridZ)
+      const displayPoint = lastPoint
+        ? calculateSnapPoint(lastPoint, cursorPosition)
+        : cursorPosition
+
+      // Play snap sound when the snapped position changes during drawing
+      if (
+        pointsRef.current.length > 0 &&
+        previousSnappedPointRef.current &&
+        (displayPoint[0] !== previousSnappedPointRef.current[0] ||
+          displayPoint[1] !== previousSnappedPointRef.current[1])
+      ) {
+        sfxEmitter.emit('sfx:grid-snap')
       }
+      previousSnappedPointRef.current = displayPoint
+
+      cursorRef.current.position.set(displayPoint[0], event.localPosition[1], displayPoint[1])
 
       updatePreview()
     }

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

@@ -4,7 +4,7 @@ import { emitter } from '@pascal-app/core'
 import Image from 'next/image'
 import { ActionButton } from './action-button'
 
-export function CameraActions() {
+export function CameraActions({ hideOrbit = false }: { hideOrbit?: boolean }) {
   const goToTopView = () => {
     emitter.emit('camera-controls:top-view')
   }
@@ -19,39 +19,43 @@ export function CameraActions() {
 
   return (
     <div className="flex items-center gap-1">
-      {/* Orbit CCW */}
-      <ActionButton
-        className="group hover:bg-white/5"
-        label="Orbit Left"
-        onClick={orbitCCW}
-        size="icon"
-        variant="ghost"
-      >
-        <Image
-          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"
-          width={28}
-        />
-      </ActionButton>
+      {!hideOrbit && (
+        <>
+          {/* Orbit CCW */}
+          <ActionButton
+            className="group hover:bg-white/5"
+            label="Orbit Left"
+            onClick={orbitCCW}
+            size="icon"
+            variant="ghost"
+          >
+            <Image
+              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"
+              width={28}
+            />
+          </ActionButton>
 
-      {/* Orbit CW */}
-      <ActionButton
-        className="group hover:bg-white/5"
-        label="Orbit Right"
-        onClick={orbitCW}
-        size="icon"
-        variant="ghost"
-      >
-        <Image
-          alt="Orbit Right"
-          className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
-          height={28}
-          src="/icons/rotate.png"
-          width={28}
-        />
-      </ActionButton>
+          {/* Orbit CW */}
+          <ActionButton
+            className="group hover:bg-white/5"
+            label="Orbit Right"
+            onClick={orbitCW}
+            size="icon"
+            variant="ghost"
+          >
+            <Image
+              alt="Orbit Right"
+              className="h-[28px] w-[28px] object-contain opacity-70 transition-opacity group-hover:opacity-100"
+              height={28}
+              src="/icons/rotate.png"
+              width={28}
+            />
+          </ActionButton>
+        </>
+      )}
 
       {/* Top View */}
       <ActionButton

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

@@ -9,7 +9,15 @@ import { cn } from './../../../lib/utils'
 import useEditor from './../../../store/use-editor'
 import { ActionButton } from './action-button'
 
-type ControlId = 'select' | 'box-select' | 'site-edit' | 'build' | 'furnish' | 'zone' | 'delete'
+type ControlId =
+  | 'select'
+  | 'box-select'
+  | 'site-edit'
+  | 'build'
+  | 'material-paint'
+  | 'furnish'
+  | 'zone'
+  | 'delete'
 
 type ControlConfig = {
   id: ControlId
@@ -54,6 +62,14 @@ const controls: ControlConfig[] = [
     color: 'hover:bg-green-500/20 hover:text-green-400',
     activeColor: 'bg-green-500/20 text-green-400',
   },
+  {
+    id: 'material-paint',
+    imageSrc: '/icons/paint.png',
+    label: 'Material Paint',
+    shortcut: 'P',
+    color: 'hover:bg-amber-500/20 hover:text-amber-400',
+    activeColor: 'bg-amber-500/20 text-amber-400',
+  },
   {
     id: 'furnish',
     imageSrc: '/icons/couch.png',
@@ -88,6 +104,9 @@ export function ControlModes() {
   const setPhase = useEditor((state) => state.setPhase)
   const setStructureLayer = useEditor((state) => state.setStructureLayer)
   const setSelectionTool = useEditor((state) => state.setFloorplanSelectionTool)
+  const primeMaterialPaintFromSelection = useEditor(
+    (state) => state.primeMaterialPaintFromSelection,
+  )
   const levelId = useViewer((s) => s.selection.levelId)
 
   // Only subscribe to the primitive `level` number — when walls are added to
@@ -112,6 +131,7 @@ export function ControlModes() {
     if (id === 'site-edit') return false
     if (id === 'build')
       return mode === 'build' && phase === 'structure' && structureLayer === 'elements'
+    if (id === 'material-paint') return mode === 'material-paint'
     if (id === 'furnish') return mode === 'build' && phase === 'furnish'
     if (id === 'zone')
       return mode === 'build' && phase === 'structure' && structureLayer === 'zones'
@@ -130,6 +150,8 @@ export function ControlModes() {
         // setPhase('site') calls viewer.resetSelection() which clears levelId,
         // breaking the 2D floorplan (it needs a level to render the SVG).
         useEditor.setState({ phase: 'site', mode: 'select', tool: null, catalogCategory: null })
+        // Clear object selection so the polygon editor handles receive pointer events
+        useViewer.getState().setSelection({ selectedIds: [] })
       }
       return
     }
@@ -155,12 +177,23 @@ export function ControlModes() {
         setStructureLayer('elements')
         setMode('build')
       }
+    } else if (id === 'material-paint') {
+      if (getIsActive('material-paint')) {
+        setMode('select')
+      } else {
+        primeMaterialPaintFromSelection()
+        setPhase('structure')
+        setStructureLayer('elements')
+        setMode('material-paint')
+      }
     } else if (id === 'furnish') {
       if (getIsActive('furnish')) {
         setMode('select')
       } else {
         setPhase('furnish')
         setMode('build')
+        // Auto-switch sidebar to the items panel so the user can pick furniture
+        useEditor.getState().setActiveSidebarPanel('items')
       }
     } else if (id === 'zone') {
       if (getIsActive('zone')) {

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

@@ -1,9 +1,4 @@
-'use client'
-
-import NextImage from 'next/image'
-import { cn } from './../../../lib/utils'
-import useEditor, { type CatalogCategory } from './../../../store/use-editor'
-import { ActionButton } from './action-button'
+import type { CatalogCategory } from './../../../store/use-editor'
 
 export type FurnishToolConfig = {
   id: 'item'
@@ -12,91 +7,10 @@ export type FurnishToolConfig = {
   catalogCategory: CatalogCategory
 }
 
-// Furnish mode tools: furniture, appliances, decoration (painting is now a control mode)
 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.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' },
 ]
-
-export function FurnishTools() {
-  const mode = useEditor((state) => state.mode)
-  const activeTool = useEditor((state) => state.tool)
-  const setActiveTool = useEditor((state) => state.setTool)
-  const setMode = useEditor((state) => state.setMode)
-  const catalogCategory = useEditor((state) => state.catalogCategory)
-  const setCatalogCategory = useEditor((state) => state.setCatalogCategory)
-
-  const hasActiveTool = furnishTools.some(
-    (tool) => mode === 'build' && activeTool === 'item' && catalogCategory === tool.catalogCategory,
-  )
-
-  return (
-    <div className="flex items-center gap-1.5 px-1">
-      {furnishTools.map((tool, index) => {
-        // For item tools with catalog category, check both tool and category match
-        const isActive =
-          mode === 'build' && activeTool === 'item' && catalogCategory === tool.catalogCategory
-
-        return (
-          <ActionButton
-            className={cn(
-              'rounded-lg duration-300',
-              isActive
-                ? 'z-10 scale-110 bg-black/40 hover:bg-black/40'
-                : 'scale-95 bg-transparent opacity-60 grayscale hover:bg-black/20 hover:opacity-100 hover:grayscale-0',
-            )}
-            key={`${tool.id}-${tool.catalogCategory ?? index}`}
-            label={tool.label}
-            onClick={() => {
-              if (!isActive) {
-                setCatalogCategory(tool.catalogCategory)
-                setActiveTool('item')
-                if (mode !== 'build') {
-                  setMode('build')
-                }
-              }
-            }}
-            size="icon"
-            variant="ghost"
-          >
-            <NextImage
-              alt={tool.label}
-              className="size-full object-contain"
-              height={28}
-              src={tool.iconSrc}
-              width={28}
-            />
-          </ActionButton>
-        )
-      })}
-    </div>
-  )
-}