Feat/ux polish round2 (#123)

* Polish editor UI, radio, and state logic Multiple UI and state updates across the editor and viewer: - PascalRadio: Move radio play state into audio store (isRadioPlaying), update icons/behaviors (Volume2/VolumeX), remove autoplay UI, ensure pause/resume respects muted and radio playing state. - use-audio: Add isRadioPlaying, setRadioPlaying and toggleRadioPlaying to store; initialize state accordingly. - Action menu: Add layout/motion to container, refine transition, only show furnish/structure rows in build mode, tweak transition classes and hover/opacity behavior. - Furnish/Structure tools: Simplify inactive styling, change click behavior to only select tools (no direct deselect), remove "click to deselect" tooltip text. - Sidebar/Icon rail: Update logo link styling and image sizing; AppSidebar: add inline editable project title (optimistic local update + server update via updateProjectName), keyboard handling, and minor header layout changes. - Site panel: Add visual tree/branch lines, replace some icons, reorganize levels list and provide an Add level button, adjust spacing and layout for property/levels sections. - InlineRenameInput: Small height/spacing adjustments for inline inputs. - use-editor: Reset mode to 'select' when switching phases, ensure reasonable default tools when entering build mode, simplify setStructureLayer to reset mode/tool and viewer selection. - use-viewer: Improve selection hierarchy guard so children are only reset when not explicitly provided in updates. These changes improve UX consistency, state predictability when switching modes, and add inline project renaming with optimistic update. * Introduce isEditor mode and editor UX updates Add an isEditor flag (Viewer prop + store) and wire it from the Editor to enable editor-specific behaviors. Ceiling system: show ceiling grids per-level (or when ceiling tool active) by walking node ancestry and respecting active level/selection. Zone renderer: only show site edge labels in editor and add inline editable zone names (with hover/edit UI and save/escape handling). Auto-name new walls/doors/windows (incremental counts scoped by level) and simplify default names shown in various panels/tree nodes. Sidebar/site-panel: reverse level rendering, adjust tree-line styling, auto-expand parents when descendants are selected, and refactor zone row actions (camera view/capture/clear). UI polish: updated action-menu button styles and ensure keyboard shortcut 'b' switches to build mode. Misc: various tree node and item selection/hover improvements and minor refactors to support the above. * Fix sidebar flex layout and scrolling Adjust sidebar panel flexbox classes to ensure headers/controls don't collapse and content areas scroll correctly. Changes include adding shrink-0, flex-1 and min-h-0 to BuildingItem and buildings list containers, restructuring the active building panel so LevelsSection/LayerToggle are fixed height while ContentSection gets an overflow-y-auto scroll area, and making the site header non-shrinking with conditional overflow for the main panel when phase === "site". Uses the cn helper for conditional classes. * Fix TypeScript build errors with AnyNodeId indexing and type narrowing Cast string-typed node IDs and parentIds to AnyNodeId when indexing into the nodes Record, fix motion transition type literal, and remove redundant mode check in setMode. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 01:05:34 -05:00
parent 7681e79d59
commit 441517424d
31 changed files with 542 additions and 256 deletions
@@ -3,6 +3,7 @@ import { Html } from '@react-three/drei'
 import { useMemo, useRef } from 'react'
 import { BufferGeometry, Float32BufferAttribute, type Group, Shape } from 'three'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import useViewer from '../../../store/use-viewer'
 import { NodeRenderer } from '../node-renderer'

 const Y_OFFSET = 0.01
@@ -61,8 +62,11 @@ export const SiteRenderer = ({ node }: { node: SiteNode }) => {
    return createBoundaryLineGeometry(node.polygon.points)
  }, [node?.polygon?.points])

+  const isEditor = useViewer((state) => state.isEditor)
+
  // Edge distances for labels
  const edges = useMemo(() => {
+    if (!isEditor) return []
    const polygon = node?.polygon?.points ?? []
    if (polygon.length < 2) return []
    return polygon.map(([x1, z1], i) => {
@@ -72,7 +76,7 @@ export const SiteRenderer = ({ node }: { node: SiteNode }) => {
      const dist = Math.sqrt((x2 - x1!) ** 2 + (z2 - z1!) ** 2)
      return { midX, midZ, dist }
    })
-  }, [node?.polygon?.points])
+  }, [node?.polygon?.points, isEditor])

  const handlers = useNodeEvents(node, 'site')

@@ -103,7 +107,7 @@ export const SiteRenderer = ({ node }: { node: SiteNode }) => {
      </line>

      {/* Edge distance labels */}
-      {edges.map((edge, i) => (
+      {isEditor && edges.map((edge, i) => (
        <Html
          center
          key={`edge-${i}`}
@@ -1,10 +1,11 @@
-import { useRegistry, type ZoneNode } from '@pascal-app/core'
+import { useRegistry, type ZoneNode, useScene } from '@pascal-app/core'
 import { Html } from '@react-three/drei'
-import { useMemo, useRef } from 'react'
+import { useMemo, useRef, useState, useEffect } from 'react'
 import { BufferGeometry, Color, DoubleSide, Float32BufferAttribute, type Group, Shape } from 'three'
 import { color, float, uniform, uv } from 'three/tsl'
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import { useNodeEvents } from '../../../hooks/use-node-events'
+import useViewer from '../../../store/use-viewer'

 const Y_OFFSET = 0.01
 const WALL_HEIGHT = 2.3
@@ -104,6 +105,43 @@ const createWallGeometry = (polygon: Array<[number, number]>): BufferGeometry =>

 export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
  const ref = useRef<Group>(null!)
+  const updateNode = useScene((s) => s.updateNode)
+  const isEditor = useViewer((state) => state.isEditor)
+
+  const [isEditing, setIsEditing] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [editValue, setEditValue] = useState(node.name || '')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isEditing) {
+      setEditValue(node.name || '')
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus()
+          inputRef.current.select()
+        }
+      }, 0)
+    }
+  }, [isEditing, node.name])
+
+  const handleSave = () => {
+    const trimmed = editValue.trim()
+    if (trimmed !== node.name) {
+      updateNode(node.id, { name: trimmed || 'Zone' })
+    }
+    setIsEditing(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSave()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      setIsEditing(false)
+    }
+  }

  useRegistry(node.id, 'zone', ref)

@@ -181,7 +219,7 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
      labelPosition: [centroid[0], 1, centroid[1]]
    }}>
      <Html name="label" position={[centroid[0], 1, centroid[1]]} style={{
-        pointerEvents: 'none'
+        pointerEvents: isEditor ? 'auto' : 'none'
      }}
          zIndexRange={[10, 0]}>
        <div style={{
@@ -192,8 +230,57 @@ export const ZoneRenderer = ({ node }: { node: ZoneNode }) => {
          display: 'flex',
          gap: '8px',
          alignItems: 'center',
+          cursor: isEditor && !isEditing ? 'text' : 'default',
+        }}
+        onMouseEnter={() => isEditor && setIsHovered(true)}
+        onMouseLeave={() => isEditor && setIsHovered(false)}
+        onClick={(e) => {
+          if (isEditor && !isEditing) {
+            e.stopPropagation()
+            setIsEditing(true)
+          }
        }}>
-          {node.name}</div>
+          {isEditing ? (
+            <input
+              ref={inputRef}
+              type="text"
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onBlur={handleSave}
+              placeholder="Zone"
+              style={{
+                background: 'transparent',
+                color: 'white',
+                textShadow: 'inherit',
+                border: 'none',
+                borderBottom: '1px solid white',
+                outline: 'none',
+                padding: 0,
+                margin: 0,
+                fontSize: 'inherit',
+                fontFamily: 'inherit',
+                width: `${Math.max(editValue.length, 4) + 1}ch`,
+                minWidth: '50px',
+                textAlign: 'center'
+              }}
+              onClick={(e) => e.stopPropagation()}
+              onDoubleClick={(e) => e.stopPropagation()}
+            />
+          ) : (
+            <>
+              <span>{node.name}</span>
+              {isEditor && (
+                <div style={{ opacity: isHovered ? 1 : 0, transition: 'opacity 0.2s', display: 'flex', alignItems: 'center' }}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
+                    <path d="m15 5 4 4"/>
+                  </svg>
+                </div>
+              )}
+            </>
+          )}
+        </div>
      </Html>
      {/* Floor fill */}
      <mesh position={[0, Y_OFFSET, 0]} rotation={[-Math.PI / 2, 0, 0]} material={floorMaterial} name="floor">
@@ -15,6 +15,9 @@ import PostProcessing from './post-processing'
 import { SelectionManager } from './selection-manager'
 import { ViewerCamera } from './viewer-camera'

+import { useEffect } from 'react'
+import useViewer from '../../store/use-viewer'
+
 declare module '@react-three/fiber' {
  interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
 }
@@ -24,9 +27,16 @@ extend(THREE as any)
 interface ViewerProps {
  children?: React.ReactNode
  selectionManager?: 'default' | 'custom'
+  isEditor?: boolean
 }

-const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default' }) => {
+const Viewer: React.FC<ViewerProps> = ({ children, selectionManager = 'default', isEditor = false }) => {
+  const setIsEditor = useViewer((state) => state.setIsEditor)
+
+  useEffect(() => {
+    setIsEditor(isEditor)
+  }, [isEditor, setIsEditor])
+
  return (
    <Canvas
      dpr={[1, 1.5]}
@@ -25,6 +25,9 @@ type Outliner = {
 };

 type ViewerState = {
+  isEditor: boolean
+  setIsEditor: (isEditor: boolean) => void
+
  selection: SelectionPath
  hoveredId: AnyNode['id'] | ZoneNode['id'] | null
  setHoveredId: (id: AnyNode['id'] | ZoneNode['id'] | null) => void
@@ -61,6 +64,8 @@ type ViewerState = {
 const useViewer = create<ViewerState>()(
  persist(
    (set) => ({
+      isEditor: false,
+      setIsEditor: (isEditor) => set({ isEditor }),
      selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
      hoveredId: null,
      setHoveredId: (id) => set({ hoveredId: id }),
@@ -84,16 +89,18 @@ const useViewer = create<ViewerState>()(
        set((state) => {
          const newSelection = { ...state.selection, ...updates };

-          // Hierarchy Guard: If we change a high-level parent, reset the children
+          // Hierarchy Guard: If we change a high-level parent, reset the children unless explicitly provided
          if (updates.buildingId !== undefined) {
-            newSelection.levelId = null;
-            newSelection.zoneId = null;
-            newSelection.selectedIds = [];
-          } else if (updates.levelId !== undefined) {
-            newSelection.zoneId = null;
-            newSelection.selectedIds = [];
-          } else if (updates.zoneId !== undefined) {
-            newSelection.selectedIds = [];
+            if (updates.levelId === undefined) newSelection.levelId = null;
+            if (updates.zoneId === undefined) newSelection.zoneId = null;
+            if (updates.selectedIds === undefined) newSelection.selectedIds = [];
+          }
+          if (updates.levelId !== undefined) {
+            if (updates.zoneId === undefined) newSelection.zoneId = null;
+            if (updates.selectedIds === undefined) newSelection.selectedIds = [];
+          }
+          if (updates.zoneId !== undefined) {
+            if (updates.selectedIds === undefined) newSelection.selectedIds = [];
          }

          return { selection: newSelection };