@pascal-app/editor 0.4.0

package/src/components/editor/export-manager.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useViewer } from '@pascal-app/viewer'
+import { useThree } from '@react-three/fiber'
+import { useEffect } from 'react'
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js'
+import { OBJExporter } from 'three/examples/jsm/exporters/OBJExporter.js'
+import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js'
+
+export function ExportManager() {
+  const scene = useThree((state) => state.scene)
+  const setExportScene = useViewer((state) => state.setExportScene)
+
+  useEffect(() => {
+    const exportFn = async (format: 'glb' | 'stl' | 'obj' = 'glb') => {
+      // Find the scene renderer group by name
+      const sceneGroup = scene.getObjectByName('scene-renderer')
+      if (!sceneGroup) {
+        console.error('scene-renderer group not found')
+        return
+      }
+
+      const date = new Date().toISOString().split('T')[0]
+
+      if (format === 'stl') {
+        const exporter = new STLExporter()
+        const result = exporter.parse(sceneGroup, { binary: true })
+        const blob = new Blob([result], { type: 'model/stl' })
+        downloadBlob(blob, `model_${date}.stl`)
+        return
+      }
+
+      if (format === 'obj') {
+        const exporter = new OBJExporter()
+        const result = exporter.parse(sceneGroup)
+        const blob = new Blob([result], { type: 'model/obj' })
+        downloadBlob(blob, `model_${date}.obj`)
+        return
+      }
+
+      // Default: GLB export (existing behavior)
+      const exporter = new GLTFExporter()
+
+      return new Promise<void>((resolve, reject) => {
+        exporter.parse(
+          sceneGroup,
+          (gltf) => {
+            const blob = new Blob([gltf as ArrayBuffer], { type: 'model/gltf-binary' })
+            downloadBlob(blob, `model_${date}.glb`)
+            resolve()
+          },
+          (error) => {
+            console.error('Export error:', error)
+            reject(error)
+          },
+          { binary: true },
+        )
+      })
+    }
+
+    setExportScene(exportFn)
+
+    return () => {
+      setExportScene(null)
+    }
+  }, [scene, setExportScene])
+
+  return null
+}
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(url)
+}

package/src/components/editor/first-person-controls.tsx

@@ -0,0 +1,249 @@
+'use client'
+
+import { useFrame, useThree } from '@react-three/fiber'
+import { useCallback, useEffect, useRef } from 'react'
+import { Euler, Vector3 } from 'three'
+import useEditor from '../../store/use-editor'
+
+// Average human eye height in meters
+const EYE_HEIGHT = 1.65
+// Movement speed in meters per second
+const MOVE_SPEED = 5
+// Sprint multiplier when holding Shift
+const SPRINT_MULTIPLIER = 2
+// Vertical float speed in meters per second
+const VERTICAL_SPEED = 3
+// Mouse look sensitivity
+const MOUSE_SENSITIVITY = 0.002
+// Min Y position (eye height above ground)
+const MIN_Y = EYE_HEIGHT
+
+// Reusable vectors to avoid allocations in the render loop
+const _forward = new Vector3()
+const _right = new Vector3()
+const _moveVector = new Vector3()
+const _euler = new Euler(0, 0, 0, 'YXZ')
+
+export const FirstPersonControls = () => {
+  const { camera, gl } = useThree()
+  const keysRef = useRef<Set<string>>(new Set())
+  const yawRef = useRef(0)
+  const pitchRef = useRef(0)
+  const isLockedRef = useRef(false)
+  const initializedRef = useRef(false)
+
+  // Initialize camera for first-person view: start at center of scene, on the ground
+  useEffect(() => {
+    if (initializedRef.current) return
+    initializedRef.current = true
+
+    // Place camera at the origin (center of grid) at eye height, looking along +X
+    camera.position.set(0, EYE_HEIGHT, 0)
+    yawRef.current = 0
+    pitchRef.current = 0
+  }, [camera])
+
+  // Pointer lock and event handlers
+  useEffect(() => {
+    const canvas = gl.domElement
+
+    const requestLock = () => {
+      if (!isLockedRef.current) {
+        canvas.requestPointerLock()
+      }
+    }
+
+    const handlePointerLockChange = () => {
+      isLockedRef.current = document.pointerLockElement === canvas
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isLockedRef.current) return
+
+      yawRef.current -= e.movementX * MOUSE_SENSITIVITY
+      pitchRef.current -= e.movementY * MOUSE_SENSITIVITY
+      // Clamp pitch to prevent flipping (almost straight up/down)
+      pitchRef.current = Math.max(
+        -Math.PI / 2 + 0.05,
+        Math.min(Math.PI / 2 - 0.05, pitchRef.current),
+      )
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Skip if user is typing in an input
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return
+      }
+
+      const code = e.code
+
+      // Movement keys
+      if (
+        code === 'KeyW' ||
+        code === 'KeyA' ||
+        code === 'KeyS' ||
+        code === 'KeyD' ||
+        code === 'KeyQ' ||
+        code === 'KeyE' ||
+        code === 'ShiftLeft' ||
+        code === 'ShiftRight'
+      ) {
+        e.preventDefault()
+        e.stopPropagation()
+        keysRef.current.add(code)
+      }
+
+      // ESC exits first-person mode
+      if (code === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        if (document.pointerLockElement === canvas) {
+          document.exitPointerLock()
+        }
+        useEditor.getState().setFirstPersonMode(false)
+      }
+    }
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      keysRef.current.delete(e.code)
+    }
+
+    canvas.addEventListener('click', requestLock)
+    document.addEventListener('pointerlockchange', handlePointerLockChange)
+    document.addEventListener('mousemove', handleMouseMove)
+    // Use capture phase so we intercept movement keys before the global keyboard handler
+    document.addEventListener('keydown', handleKeyDown, true)
+    document.addEventListener('keyup', handleKeyUp)
+
+    return () => {
+      canvas.removeEventListener('click', requestLock)
+      document.removeEventListener('pointerlockchange', handlePointerLockChange)
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('keydown', handleKeyDown, true)
+      document.removeEventListener('keyup', handleKeyUp)
+      if (document.pointerLockElement === canvas) {
+        document.exitPointerLock()
+      }
+      keysRef.current.clear()
+    }
+  }, [gl])
+
+  // Per-frame movement and camera rotation
+  useFrame((_, delta) => {
+    // Clamp delta to avoid huge jumps (e.g. tab switching)
+    const dt = Math.min(delta, 0.1)
+    const keys = keysRef.current
+
+    const isSprinting = keys.has('ShiftLeft') || keys.has('ShiftRight')
+    const speed = MOVE_SPEED * (isSprinting ? SPRINT_MULTIPLIER : 1)
+
+    // Calculate forward and right vectors on the XZ plane (ignore pitch for movement)
+    _forward.set(-Math.sin(yawRef.current), 0, -Math.cos(yawRef.current))
+    _right.set(Math.cos(yawRef.current), 0, -Math.sin(yawRef.current))
+
+    _moveVector.set(0, 0, 0)
+
+    if (keys.has('KeyW')) _moveVector.add(_forward)
+    if (keys.has('KeyS')) _moveVector.sub(_forward)
+    if (keys.has('KeyA')) _moveVector.sub(_right)
+    if (keys.has('KeyD')) _moveVector.add(_right)
+
+    // Normalize diagonal movement so it's not faster
+    if (_moveVector.lengthSq() > 0) {
+      _moveVector.normalize().multiplyScalar(speed * dt)
+      camera.position.add(_moveVector)
+    }
+
+    // Vertical movement (Q = up, E = down)
+    if (keys.has('KeyQ')) {
+      camera.position.y += VERTICAL_SPEED * dt
+    }
+    if (keys.has('KeyE')) {
+      camera.position.y -= VERTICAL_SPEED * dt
+    }
+
+    // Clamp Y so camera never goes below ground level + eye height
+    if (camera.position.y < MIN_Y) {
+      camera.position.y = MIN_Y
+    }
+
+    // Apply look rotation
+    _euler.set(pitchRef.current, yawRef.current, 0, 'YXZ')
+    camera.quaternion.setFromEuler(_euler)
+  })
+
+  return null
+}
+
+/**
+ * Overlay UI for first-person mode: crosshair, controls hint, exit button.
+ * Rendered as a regular DOM overlay (not inside the Canvas).
+ */
+export const FirstPersonOverlay = ({ onExit }: { onExit: () => void }) => {
+  const handleExit = useCallback(() => {
+    if (document.pointerLockElement) {
+      document.exitPointerLock()
+    }
+    onExit()
+  }, [onExit])
+
+  return (
+    <>
+      {/* Crosshair */}
+      <div className="pointer-events-none fixed inset-0 z-40 flex items-center justify-center">
+        <div className="relative h-6 w-6">
+          <div className="absolute top-1/2 left-0 h-px w-full -translate-y-1/2 bg-white/60" />
+          <div className="absolute top-0 left-1/2 h-full w-px -translate-x-1/2 bg-white/60" />
+        </div>
+      </div>
+
+      {/* Exit button — top-right */}
+      <div className="fixed top-4 right-4 z-50">
+        <button
+          className="pointer-events-auto flex items-center gap-2 rounded-xl border border-border/40 bg-background/90 px-4 py-2 font-medium text-foreground text-sm shadow-lg backdrop-blur-xl transition-colors hover:bg-background"
+          onClick={handleExit}
+          type="button"
+        >
+          <kbd className="rounded border border-border/50 bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+            ESC
+          </kbd>
+          Exit Street View
+        </button>
+      </div>
+
+      {/* Controls hint — bottom-center */}
+      <div className="pointer-events-none fixed bottom-6 left-1/2 z-40 -translate-x-1/2">
+        <div className="flex items-center gap-4 rounded-2xl border border-border/35 bg-background/80 px-5 py-3 shadow-lg backdrop-blur-xl">
+          <ControlHint label="Move" keys={['W', 'A', 'S', 'D']} />
+          <div className="h-5 w-px bg-border/30" />
+          <ControlHint label="Up" keys={['Q']} />
+          <ControlHint label="Down" keys={['E']} />
+          <div className="h-5 w-px bg-border/30" />
+          <ControlHint label="Sprint" keys={['Shift']} />
+          <div className="h-5 w-px bg-border/30" />
+          <span className="text-muted-foreground/60 text-xs">Click to look around</span>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function ControlHint({ label, keys }: { label: string; keys: string[] }) {
+  return (
+    <div className="flex flex-col items-center gap-1.5">
+      <span className="font-medium text-[10px] text-muted-foreground/60 tracking-[0.03em]">
+        {label}
+      </span>
+      <div className="flex items-center gap-1">
+        {keys.map((key) => (
+          <kbd
+            className="flex h-5 min-w-5 items-center justify-center rounded border border-border/50 bg-accent/40 px-1 font-mono text-[10px] text-foreground/80 leading-none"
+            key={key}
+          >
+            {key}
+          </kbd>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,231 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  DoorNode,
+  ItemNode,
+  RoofNode,
+  RoofSegmentNode,
+  StairNode,
+  StairSegmentNode,
+  sceneRegistry,
+  useScene,
+  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 * as THREE from 'three'
+import { sfxEmitter } from '../../lib/sfx-bus'
+import useEditor from '../../store/use-editor'
+import { NodeActionMenu } from './node-action-menu'
+
+const ALLOWED_TYPES = [
+  'item',
+  'door',
+  'window',
+  'roof',
+  'roof-segment',
+  'stair',
+  'stair-segment',
+  'wall',
+  'slab',
+]
+const DELETE_ONLY_TYPES = ['wall', 'slab']
+
+export function FloatingActionMenu() {
+  const selectedIds = useViewer((s) => s.selection.selectedIds)
+  const nodes = useScene((s) => s.nodes)
+  const mode = useEditor((s) => s.mode)
+  const setMode = useEditor((s) => s.setMode)
+  const isFloorplanHovered = useEditor((s) => s.isFloorplanHovered)
+  const setMovingNode = useEditor((s) => s.setMovingNode)
+  const setSelection = useViewer((s) => s.setSelection)
+
+  const groupRef = useRef<THREE.Group>(null)
+
+  // Only show for single selection of specific types
+  const selectedId = selectedIds.length === 1 ? selectedIds[0] : null
+  const node = selectedId ? nodes[selectedId as AnyNodeId] : null
+  const isValidType = node ? ALLOWED_TYPES.includes(node.type) : false
+
+  useFrame(() => {
+    if (!(selectedId && isValidType && groupRef.current)) return
+
+    const obj = sceneRegistry.nodes.get(selectedId)
+    if (obj) {
+      // Calculate bounding box in world space
+      const box = new THREE.Box3().setFromObject(obj)
+      if (!box.isEmpty()) {
+        const center = box.getCenter(new THREE.Vector3())
+        // Position above the object, with extra offset for walls/slabs to avoid covering measurement labels
+        const isDeleteOnly = node && DELETE_ONLY_TYPES.includes(node.type)
+        const yOffset = isDeleteOnly ? 0.8 : 0.3
+        groupRef.current.position.set(center.x, box.max.y + yOffset, center.z)
+      }
+    }
+  })
+
+  const handleMove = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!node) return
+      sfxEmitter.emit('sfx:item-pick')
+      if (
+        node.type === 'item' ||
+        node.type === 'window' ||
+        node.type === 'door' ||
+        node.type === 'roof' ||
+        node.type === 'roof-segment' ||
+        node.type === 'stair' ||
+        node.type === 'stair-segment'
+      ) {
+        setMovingNode(node as any)
+      }
+      setSelection({ selectedIds: [] })
+    },
+    [node, setMovingNode, setSelection],
+  )
+
+  const handleDuplicate = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (!node?.parentId) return
+      sfxEmitter.emit('sfx:item-pick')
+      useScene.temporal.getState().pause()
+
+      let duplicateInfo = structuredClone(node) as any
+      delete duplicateInfo.id
+      duplicateInfo.metadata = { ...duplicateInfo.metadata, isNew: true }
+
+      let duplicate: AnyNode | null = null
+      try {
+        if (node.type === 'door') {
+          duplicate = DoorNode.parse(duplicateInfo)
+        } else if (node.type === 'window') {
+          duplicate = WindowNode.parse(duplicateInfo)
+        } else if (node.type === 'item') {
+          duplicate = ItemNode.parse(duplicateInfo)
+        } else if (node.type === 'roof') {
+          duplicate = RoofNode.parse(duplicateInfo)
+        } else if (node.type === 'roof-segment') {
+          duplicate = RoofSegmentNode.parse(duplicateInfo)
+        } else if (node.type === 'stair') {
+          duplicate = StairNode.parse(duplicateInfo)
+        } else if (node.type === 'stair-segment') {
+          duplicate = StairSegmentNode.parse(duplicateInfo)
+        }
+      } catch (error) {
+        console.error('Failed to parse duplicate', error)
+        return
+      }
+
+      if (duplicate) {
+        if (duplicate.type === 'door' || duplicate.type === 'window') {
+          useScene.getState().createNode(duplicate, duplicate.parentId as AnyNodeId)
+        } else if (
+          duplicate.type === 'roof' ||
+          duplicate.type === 'roof-segment' ||
+          duplicate.type === 'stair' ||
+          duplicate.type === 'stair-segment'
+        ) {
+          // Add small offset to make it visible
+          if ('position' in duplicate) {
+            duplicate.position = [
+              duplicate.position[0] + 1,
+              duplicate.position[1],
+              duplicate.position[2] + 1,
+            ]
+          }
+          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 (node.type === 'stair' && node.children) {
+            const nodesState = useScene.getState().nodes
+            for (const childId of node.children) {
+              const childNode = nodesState[childId]
+              if (childNode && childNode.type === 'stair-segment') {
+                let childDuplicateInfo = structuredClone(childNode) as any
+                delete childDuplicateInfo.id
+                childDuplicateInfo.metadata = { ...childDuplicateInfo.metadata, isNew: true }
+                try {
+                  const childDuplicate = StairSegmentNode.parse(childDuplicateInfo)
+                  useScene.getState().createNode(childDuplicate, duplicate.id as AnyNodeId)
+                } catch (e) {
+                  console.error('Failed to duplicate stair segment', e)
+                }
+              }
+            }
+          }
+        }
+        if (
+          duplicate.type === 'item' ||
+          duplicate.type === 'window' ||
+          duplicate.type === 'door' ||
+          duplicate.type === 'roof' ||
+          duplicate.type === 'roof-segment' ||
+          duplicate.type === 'stair' ||
+          duplicate.type === 'stair-segment'
+        ) {
+          setMovingNode(duplicate as any)
+        }
+        setSelection({ selectedIds: [] })
+      }
+    },
+    [node, setMovingNode, setSelection],
+  )
+
+  const handleDelete = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      // Activate delete mode (sledgehammer tool) instead of deleting directly
+      setSelection({ selectedIds: [] })
+      setMode('delete')
+    },
+    [setSelection, setMode],
+  )
+
+  if (!(selectedId && node && isValidType && !isFloorplanHovered && mode !== 'delete')) return null
+
+  return (
+    <group ref={groupRef}>
+      <Html
+        center
+        style={{
+          pointerEvents: 'auto',
+          touchAction: 'none',
+        }}
+        zIndexRange={[100, 0]}
+      >
+        <NodeActionMenu
+          onDelete={handleDelete}
+          onDuplicate={node && !DELETE_ONLY_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>
+  )
+}