@pascal-app/editor 0.5.1 → 0.7.0

package/src/components/editor/floating-action-menu.tsx

@@ -4,24 +4,30 @@ import {
   type AnyNode,
   type AnyNodeId,
   type CeilingNode,
+  ColumnNode,
   DoorNode,
   FenceNode,
+  generateId,
   ItemNode,
-  RoofNode,
   RoofSegmentNode,
   type SlabNode,
+  SpawnNode,
   StairNode,
   StairSegmentNode,
   sceneRegistry,
   useScene,
+  WallNode,
   WindowNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Html } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
-import { useCallback, useRef } from 'react'
+import { Move } from 'lucide-react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import * as THREE from 'three'
+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 { NodeActionMenu } from './node-action-menu'
 
@@ -35,29 +41,88 @@ const ALLOWED_TYPES = [
   'stair-segment',
   'wall',
   'fence',
+  'column',
   'slab',
   'ceiling',
+  'spawn',
 ]
-const DELETE_ONLY_TYPES = ['wall']
+const DELETE_ONLY_TYPES: string[] = []
 const HOLE_TYPES = ['slab', 'ceiling']
 
 export function FloatingActionMenu() {
   const selectedIds = useViewer((s) => s.selection.selectedIds)
-  const nodes = useScene((s) => s.nodes)
   const updateNode = useScene((s) => s.updateNode)
   const mode = useEditor((s) => s.mode)
   const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+  const movingWallEndpoint = useEditor((s) => s.movingWallEndpoint)
+  const movingFenceEndpoint = useEditor((s) => s.movingFenceEndpoint)
+  const curvingFence = useEditor((s) => s.curvingFence)
   const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setMovingWallEndpoint = useEditor((s) => s.setMovingWallEndpoint)
+  const setMovingFenceEndpoint = useEditor((s) => s.setMovingFenceEndpoint)
+  const setCurvingWall = useEditor((s) => s.setCurvingWall)
+  const setCurvingFence = useEditor((s) => s.setCurvingFence)
   const setSelection = useViewer((s) => s.setSelection)
   const setEditingHole = useEditor((s) => s.setEditingHole)
 
   const groupRef = useRef<THREE.Group>(null)
+  const startEndpointGroupRef = useRef<THREE.Group>(null)
+  const endEndpointGroupRef = useRef<THREE.Group>(null)
+  const [altPressed, setAltPressed] = useState(false)
 
   // Only show for single selection of specific types
   const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
-  const node = selectedId ? nodes[selectedId as AnyNodeId] : null
+
+  // Subscribe just to the selected node so unrelated scene updates do not
+  // re-render this menu.
+  const node = useScene((s) => (selectedId ? (s.nodes[selectedId as AnyNodeId] ?? null) : null))
   const isValidType = node ? ALLOWED_TYPES.includes(node.type) : false
 
+  // Boolean selector, only re-renders when curving availability actually flips.
+  const canCurveSelectedWall = useScene((s) => {
+    if (!selectedId) return false
+    const selectedNode = s.nodes[selectedId as AnyNodeId]
+    if (selectedNode?.type !== 'wall') return false
+    return !(selectedNode.children ?? []).some((childId) => {
+      const child = s.nodes[childId as AnyNodeId]
+      if (!child) return false
+      if (child.type === 'door' || child.type === 'window') return true
+      if (child.type === 'item') {
+        const attachTo = child.asset?.attachTo
+        return attachTo === 'wall' || attachTo === 'wall-side'
+      }
+      return false
+    })
+  })
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Alt') {
+        setAltPressed(true)
+      }
+    }
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key === 'Alt') {
+        setAltPressed(false)
+      }
+    }
+
+    const handleBlur = () => {
+      setAltPressed(false)
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+    window.addEventListener('blur', handleBlur)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
+      window.removeEventListener('blur', handleBlur)
+    }
+  }, [])
+
   useFrame(() => {
     if (!(selectedId && isValidType && groupRef.current)) return
 
@@ -72,6 +137,40 @@ export function FloatingActionMenu() {
         const yOffset = isStructural ? 0.8 : 0.3
         groupRef.current.position.set(center.x, box.max.y + yOffset, center.z)
       }
+
+      if (node?.type === 'wall' || node?.type === 'fence') {
+        const segment = node as WallNode | FenceNode
+        const endpointYOffset = 0.35
+        const startWorld =
+          node.type === 'wall'
+            ? obj.localToWorld(new THREE.Vector3(0, 0, 0))
+            : obj.localToWorld(new THREE.Vector3(segment.start[0], 0, segment.start[1]))
+        const endWorld =
+          node.type === 'wall'
+            ? obj.localToWorld(
+                new THREE.Vector3(
+                  Math.hypot(segment.end[0] - segment.start[0], segment.end[1] - segment.start[1]),
+                  0,
+                  0,
+                ),
+              )
+            : obj.localToWorld(new THREE.Vector3(segment.end[0], 0, segment.end[1]))
+
+        if (startEndpointGroupRef.current) {
+          startEndpointGroupRef.current.position.set(
+            startWorld.x,
+            startWorld.y + endpointYOffset,
+            startWorld.z,
+          )
+        }
+        if (endEndpointGroupRef.current) {
+          endEndpointGroupRef.current.position.set(
+            endWorld.x,
+            endWorld.y + endpointYOffset,
+            endWorld.z,
+          )
+        }
+      }
     }
   })
 
@@ -84,7 +183,12 @@ export function FloatingActionMenu() {
         node.type === 'item' ||
         node.type === 'window' ||
         node.type === 'door' ||
+        node.type === 'wall' ||
         node.type === 'fence' ||
+        node.type === 'column' ||
+        node.type === 'slab' ||
+        node.type === 'ceiling' ||
+        node.type === 'spawn' ||
         node.type === 'roof' ||
         node.type === 'roof-segment' ||
         node.type === 'stair' ||
@@ -96,12 +200,55 @@ export function FloatingActionMenu() {
     },
     [node, setMovingNode, setSelection],
   )
+  const handleCurve = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!node) return
+      sfxEmitter.emit('sfx:item-pick')
+      if (node.type === 'wall') {
+        if (!canCurveSelectedWall) return
+        setCurvingWall(node)
+      } else if (node.type === 'fence') {
+        setCurvingFence(node)
+      } else {
+        return
+      }
+      setSelection({ selectedIds: [] })
+    },
+    [canCurveSelectedWall, node, setCurvingFence, setCurvingWall, setSelection],
+  )
+  const handleEndpointMove = useCallback(
+    (endpoint: 'start' | 'end', e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!node) return
+      sfxEmitter.emit('sfx:item-pick')
+      if (node.type === 'wall') {
+        setMovingWallEndpoint({ wall: node, endpoint })
+      } else if (node.type === 'fence') {
+        setMovingFenceEndpoint({ fence: node, endpoint })
+      } else {
+        return
+      }
+      setSelection({ selectedIds: [] })
+    },
+    [node, setMovingFenceEndpoint, setMovingWallEndpoint, setSelection],
+  )
 
   const handleDuplicate = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
       if (!node?.parentId) return
       sfxEmitter.emit('sfx:item-pick')
+
+      if (node.type === 'roof') {
+        try {
+          duplicateRoofSubtree(node.id as AnyNodeId, { mode: 'move' })
+        } catch (error) {
+          console.error('Failed to duplicate roof', error)
+        }
+        return
+      }
+
       useScene.temporal.getState().pause()
 
       let duplicateInfo = structuredClone(node) as any
@@ -116,13 +263,16 @@ export function FloatingActionMenu() {
           duplicate = WindowNode.parse(duplicateInfo)
         } else if (node.type === 'item') {
           duplicate = ItemNode.parse(duplicateInfo)
+        } else if (node.type === 'column') {
+          duplicate = ColumnNode.parse(duplicateInfo)
+        } else if (node.type === 'wall') {
+          duplicate = WallNode.parse(duplicateInfo)
         } else if (node.type === 'fence') {
           duplicate = FenceNode.parse(duplicateInfo)
           duplicate.start = [duplicate.start[0] + 1, duplicate.start[1] + 1]
           duplicate.end = [duplicate.end[0] + 1, duplicate.end[1] + 1]
-        } else if (node.type === 'roof') {
-          duplicate = RoofNode.parse(duplicateInfo)
         } else if (node.type === 'roof-segment') {
+          duplicateInfo.id = generateId('rseg')
           duplicate = RoofSegmentNode.parse(duplicateInfo)
         } else if (node.type === 'stair') {
           duplicateInfo.children = []
@@ -131,19 +281,28 @@ export function FloatingActionMenu() {
           duplicate = StairNode.parse(duplicateInfo)
         } else if (node.type === 'stair-segment') {
           duplicate = StairSegmentNode.parse(duplicateInfo)
+        } else if (node.type === 'spawn') {
+          duplicate = SpawnNode.parse(duplicateInfo)
         }
       } catch (error) {
         console.error('Failed to parse duplicate', error)
+        useScene.temporal.getState().resume()
+        return
+      }
+
+      if (!duplicate) {
+        useScene.temporal.getState().resume()
         return
       }
 
       if (duplicate) {
         if (duplicate.type === 'door' || duplicate.type === 'window') {
           useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+        } else if (duplicate.type === 'wall') {
+          useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
         } else if (duplicate.type === 'fence') {
           useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
         } else if (
-          duplicate.type === 'roof' ||
           duplicate.type === 'roof-segment' ||
           duplicate.type === 'stair' ||
           duplicate.type === 'stair-segment'
@@ -157,63 +316,22 @@ export function FloatingActionMenu() {
             ]
           }
           if (node.type === 'stair' && duplicate.type === 'stair') {
-            const nodesState = useScene.getState().nodes
-            const createOps: { node: AnyNode; parentId?: AnyNodeId }[] = [
-              { node: duplicate, parentId: duplicate.parentId as AnyNodeId },
-            ]
-
-            for (const childId of node.children ?? []) {
-              const childNode = nodesState[childId]
-              if (childNode?.type !== 'stair-segment') {
-                continue
-              }
-
-              let childDuplicateInfo = structuredClone(childNode) as any
-              delete childDuplicateInfo.id
-              childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata }
-              delete childDuplicateInfo.metadata?.isNew
-
-              try {
-                const childDuplicate = StairSegmentNode.parse(childDuplicateInfo)
-                createOps.push({ node: childDuplicate, parentId: duplicate.id as AnyNodeId })
-              } catch (e) {
-                console.error('Failed to duplicate stair segment', e)
-              }
-            }
-
-            useScene.getState().createNodes(createOps)
+            duplicateStairSubtree(node.id as AnyNodeId, { mode: 'move' })
           } else {
             useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
           }
 
-          // Duplicate children for roof nodes
-          if (node.type === 'roof' && node.children) {
-            const nodesState = useScene.getState().nodes
-            for (const childId of node.children) {
-              const childNode = nodesState[childId]
-              if (childNode && childNode.type === 'roof-segment') {
-                let childDuplicateInfo = structuredClone(childNode) as any
-                delete childDuplicateInfo.id
-                childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata, isNew: true }
-                try {
-                  const childDuplicate = RoofSegmentNode.parse(childDuplicateInfo)
-                  useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
-                } catch (e) {
-                  console.error('Failed to duplicate roof segment', e)
-                }
-              }
-            }
-          }
-
           // Duplicate children for stair nodes
         }
         if (
           duplicate.type === 'item' ||
+          duplicate.type === 'column' ||
+          duplicate.type === 'wall' ||
           duplicate.type === 'fence' ||
           duplicate.type === 'window' ||
           duplicate.type === 'door' ||
-          duplicate.type === 'roof' ||
           duplicate.type === 'roof-segment' ||
+          duplicate.type === 'spawn' ||
           duplicate.type === 'stair-segment'
         ) {
           setMovingNode(duplicate as any)
@@ -250,8 +368,15 @@ export function FloatingActionMenu() {
         [cx + holeSize, cz + holeSize],
         [cx - holeSize, cz + holeSize],
       ]
-      const currentHoles = (node as SlabNode | CeilingNode).holes || []
-      updateNode(selectedId as AnyNodeId, { holes: [...currentHoles, newHole] })
+      const surfaceNode = node as SlabNode | CeilingNode
+      const currentHoles = surfaceNode.holes || []
+      const currentMetadata = currentHoles.map(
+        (_, index) => surfaceNode.holeMetadata?.[index] ?? { source: 'manual' as const },
+      )
+      updateNode(selectedId as AnyNodeId, {
+        holes: [...currentHoles, newHole],
+        holeMetadata: [...currentMetadata, { source: 'manual' }],
+      })
       setEditingHole({ nodeId: selectedId, holeIndex: currentHoles.length })
       // Re-assert selection so the node stays selected
       setSelection({ selectedIds: [selectedId] })
@@ -263,41 +388,114 @@ export function FloatingActionMenu() {
     (e: React.MouseEvent) => {
       e.stopPropagation()
       if (!selectedId) return
+      if (node?.type === 'item') {
+        sfxEmitter.emit('sfx:item-delete')
+      } else {
+        sfxEmitter.emit('sfx:structure-delete')
+      }
       setSelection({ selectedIds: [] })
       useScene.getState().deleteNode(selectedId as AnyNodeId)
     },
-    [selectedId, setSelection],
+    [node?.type, selectedId, setSelection],
   )
 
-  if (!(selectedId && node && isValidType && !isFloorplanHovered && mode !== 'delete')) return null
+  if (
+    !(selectedId && node && isValidType && !isFloorplanHovered && mode !== 'delete') ||
+    movingWallEndpoint ||
+    movingFenceEndpoint ||
+    curvingFence
+  )
+    return null
 
   return (
-    <group ref={groupRef}>
-      <Html
-        center
-        style={{
-          pointerEvents: 'auto',
-          touchAction: 'none',
-        }}
-        zIndexRange={[100, 0]}
-      >
-        <NodeActionMenu
-          onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : undefined}
-          onDelete={handleDelete}
-          onDuplicate={
-            node && !DELETE_ONLY_TYPES.includes(node.type) && !HOLE_TYPES.includes(node.type)
-              ? handleDuplicate
-              : undefined
-          }
-          onMove={
-            node && !DELETE_ONLY_TYPES.includes(node.type) && !HOLE_TYPES.includes(node.type)
-              ? handleMove
-              : undefined
-          }
-          onPointerDown={(e) => e.stopPropagation()}
-          onPointerUp={(e) => e.stopPropagation()}
-        />
-      </Html>
+    <group>
+      <group ref={groupRef}>
+        <Html
+          center
+          style={{
+            pointerEvents: 'auto',
+            touchAction: 'none',
+          }}
+          zIndexRange={[100, 0]}
+        >
+          <NodeActionMenu
+            onAddHole={node && HOLE_TYPES.includes(node.type) ? handleAddHole : undefined}
+            onCurve={
+              node?.type === 'fence' || (node?.type === 'wall' && canCurveSelectedWall)
+                ? handleCurve
+                : undefined
+            }
+            onDelete={handleDelete}
+            onDuplicate={
+              node &&
+              node.type !== 'spawn' &&
+              !DELETE_ONLY_TYPES.includes(node.type) &&
+              !HOLE_TYPES.includes(node.type)
+                ? handleDuplicate
+                : undefined
+            }
+            onMove={node && !DELETE_ONLY_TYPES.includes(node.type) ? handleMove : undefined}
+            onPointerDown={(e) => e.stopPropagation()}
+            onPointerUp={(e) => e.stopPropagation()}
+          />
+        </Html>
+      </group>
+      {(node?.type === 'wall' || node?.type === 'fence') && (
+        <>
+          <group ref={startEndpointGroupRef}>
+            <Html
+              center
+              style={{ pointerEvents: 'auto', touchAction: 'none' }}
+              zIndexRange={[100, 0]}
+            >
+              <button
+                aria-label={node.type === 'wall' ? 'Move wall start' : 'Move fence start'}
+                className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
+                  altPressed
+                    ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
+                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+                onClick={(e) => handleEndpointMove('start', e)}
+                onPointerDown={(e) => e.stopPropagation()}
+                title={
+                  node.type === 'wall'
+                    ? 'Move wall start (Alt to detach)'
+                    : 'Move fence start (Alt to detach)'
+                }
+                type="button"
+              >
+                <Move className="h-4 w-4" />
+              </button>
+            </Html>
+          </group>
+          <group ref={endEndpointGroupRef}>
+            <Html
+              center
+              style={{ pointerEvents: 'auto', touchAction: 'none' }}
+              zIndexRange={[100, 0]}
+            >
+              <button
+                aria-label={node.type === 'wall' ? 'Move wall end' : 'Move fence end'}
+                className={`pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full border bg-background/95 shadow-lg backdrop-blur-md transition-colors ${
+                  altPressed
+                    ? 'border-amber-500/80 bg-amber-500/15 text-amber-100 hover:bg-amber-500/20 hover:text-white'
+                    : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground'
+                }`}
+                onClick={(e) => handleEndpointMove('end', e)}
+                onPointerDown={(e) => e.stopPropagation()}
+                title={
+                  node.type === 'wall'
+                    ? 'Move wall end (Alt to detach)'
+                    : 'Move fence end (Alt to detach)'
+                }
+                type="button"
+              >
+                <Move className="h-4 w-4" />
+              </button>
+            </Html>
+          </group>
+        </>
+      )}
     </group>
   )
 }

package/src/components/editor/floating-building-action-menu.tsx

@@ -15,7 +15,6 @@ export function FloatingBuildingActionMenu() {
   const levelId = useViewer((s) => s.selection.levelId)
   const setMovingNode = useEditor((s) => s.setMovingNode)
   const setSelection = useViewer((s) => s.setSelection)
-  const nodes = useScene((s) => s.nodes)
 
   const groupRef = useRef<THREE.Group>(null)
 
@@ -36,13 +35,15 @@ export function FloatingBuildingActionMenu() {
     (e: React.MouseEvent) => {
       e.stopPropagation()
       if (!buildingId) return
-      const node = nodes[buildingId]
+      // Read lazily at click time — no need to subscribe to nodes for a
+      // one-shot action.
+      const node = useScene.getState().nodes[buildingId]
       if (!node || node.type !== 'building') return
       sfxEmitter.emit('sfx:item-pick')
       setMovingNode(node as BuildingNode)
       setSelection({ buildingId: null })
     },
-    [buildingId, nodes, setMovingNode, setSelection],
+    [buildingId, setMovingNode, setSelection],
   )
 
   // Only show when a building is selected without a level

package/src/components/editor/floorplan-background-selection.ts

@@ -0,0 +1,113 @@
+'use client'
+
+import type { Point2D, ZoneNode as ZoneNodeType } from '@pascal-app/core'
+import { isPointInsidePolygon } from '../../lib/floorplan'
+import type { WallPlanPoint } from '../tools/wall/wall-drafting'
+
+type ModifierKeys = {
+  meta: boolean
+  ctrl: boolean
+}
+
+type ZoneHitEntry = {
+  zone: {
+    id: ZoneNodeType['id']
+  }
+  polygon: Point2D[]
+}
+
+type ResolveFloorplanBackgroundSelectionArgs = {
+  canSelectElementFloorplanGeometry: boolean
+  canSelectFloorplanZones: boolean
+  currentSelectedIds: string[]
+  getFloorplanHitIdAtPoint: (planPoint: WallPlanPoint) => string | null
+  isWallBuildActive: boolean
+  modifierKeys: ModifierKeys
+  planPoint: WallPlanPoint
+  structureLayer: string
+  toPoint2D: (point: WallPlanPoint) => Point2D
+  visibleZonePolygons: ZoneHitEntry[]
+}
+
+export type FloorplanBackgroundSelectionResult =
+  | {
+      handled: true
+      kind: 'select-zone'
+      zoneId: ZoneNodeType['id']
+    }
+  | {
+      handled: true
+      kind: 'select-elements'
+      selectedIds: string[]
+    }
+  | {
+      handled: true
+      kind: 'clear-zones'
+    }
+  | {
+      handled: true
+      kind: 'clear-elements'
+      preserveSelection: boolean
+    }
+  | {
+      handled: false
+    }
+
+export function resolveFloorplanBackgroundSelection({
+  canSelectElementFloorplanGeometry,
+  canSelectFloorplanZones,
+  currentSelectedIds,
+  getFloorplanHitIdAtPoint,
+  isWallBuildActive,
+  modifierKeys,
+  planPoint,
+  structureLayer,
+  toPoint2D,
+  visibleZonePolygons,
+}: ResolveFloorplanBackgroundSelectionArgs): FloorplanBackgroundSelectionResult {
+  if (canSelectFloorplanZones) {
+    const zoneHit = visibleZonePolygons.find(({ polygon }) =>
+      isPointInsidePolygon(toPoint2D(planPoint), polygon),
+    )
+    if (zoneHit) {
+      return {
+        handled: true,
+        kind: 'select-zone',
+        zoneId: zoneHit.zone.id,
+      }
+    }
+  }
+
+  if (canSelectElementFloorplanGeometry) {
+    const hitId = getFloorplanHitIdAtPoint(planPoint)
+    if (hitId) {
+      return {
+        handled: true,
+        kind: 'select-elements',
+        selectedIds:
+          modifierKeys.meta || modifierKeys.ctrl
+            ? currentSelectedIds.includes(hitId)
+              ? currentSelectedIds.filter((selectedId) => selectedId !== hitId)
+              : [...currentSelectedIds, hitId]
+            : [hitId],
+      }
+    }
+  }
+
+  if (!isWallBuildActive) {
+    if (structureLayer === 'zones') {
+      return {
+        handled: true,
+        kind: 'clear-zones',
+      }
+    }
+
+    return {
+      handled: true,
+      kind: 'clear-elements',
+      preserveSelection: modifierKeys.meta || modifierKeys.ctrl,
+    }
+  }
+
+  return { handled: false }
+}