@pascal-app/editor 0.4.0 → 0.6.0

package/src/store/use-editor.tsx

@@ -1,22 +1,31 @@
 'use client'
 
-import type { AssetInput } from '@pascal-app/core'
 import {
+  type AnyNodeId,
+  type AssetInput,
   type BuildingNode,
+  type CeilingNode,
   type DoorNode,
+  type FenceNode,
   type ItemNode,
   type LevelNode,
+  type RoofSurfaceMaterialRole,
   type RoofNode,
   type RoofSegmentNode,
+  type SlabNode,
   type Space,
+  type StairSurfaceMaterialRole,
   type StairNode,
   type StairSegmentNode,
   useScene,
+  type WallNode,
+  type WallSurfaceSide,
   type WindowNode,
 } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
+import { getDefaultCatalogItem } from '../components/ui/item-catalog/catalog-items'
 
 const DEFAULT_ACTIVE_SIDEBAR_PANEL = 'site'
 const DEFAULT_FLOORPLAN_PANE_RATIO = 0.5
@@ -33,6 +42,7 @@ export type Mode = 'select' | 'edit' | 'delete' | 'build'
 // Structure mode tools (building elements)
 export type StructureTool =
   | 'wall'
+  | 'fence'
   | 'room'
   | 'custom-room'
   | 'slab'
@@ -64,10 +74,28 @@ export type CatalogCategory =
 export type StructureLayer = 'zones' | 'elements'
 
 export type FloorplanSelectionTool = 'click' | 'marquee'
+export type GridSnapStep = 0.5 | 0.25 | 0.1 | 0.05
 
 // Combined tool type
 export type Tool = SiteTool | StructureTool | FurnishTool
 
+export type MovingWallEndpoint = {
+  wall: WallNode
+  endpoint: 'start' | 'end'
+}
+
+export type MovingFenceEndpoint = {
+  fence: FenceNode
+  endpoint: 'start' | 'end'
+}
+
+export type MaterialTargetRole = WallSurfaceSide | StairSurfaceMaterialRole | RoofSurfaceMaterialRole
+
+export type SelectedMaterialTarget = {
+  nodeId: AnyNodeId
+  role: MaterialTargetRole
+}
+
 type EditorState = {
   phase: Phase
   setPhase: (phase: Phase) => void
@@ -85,22 +113,42 @@ type EditorState = {
     | ItemNode
     | WindowNode
     | DoorNode
+    | FenceNode
+    | CeilingNode
+    | SlabNode
+    | WallNode
     | RoofNode
     | RoofSegmentNode
     | StairNode
     | StairSegmentNode
+    | BuildingNode
     | null
   setMovingNode: (
     node:
       | ItemNode
       | WindowNode
       | DoorNode
+      | FenceNode
+      | CeilingNode
+      | SlabNode
+      | WallNode
       | RoofNode
       | RoofSegmentNode
       | StairNode
       | StairSegmentNode
+      | BuildingNode
       | null,
   ) => void
+  movingWallEndpoint: MovingWallEndpoint | null
+  setMovingWallEndpoint: (value: MovingWallEndpoint | null) => void
+  movingFenceEndpoint: MovingFenceEndpoint | null
+  setMovingFenceEndpoint: (value: MovingFenceEndpoint | null) => void
+  curvingWall: WallNode | null
+  setCurvingWall: (wall: WallNode | null) => void
+  curvingFence: FenceNode | null
+  setCurvingFence: (fence: FenceNode | null) => void
+  selectedMaterialTarget: SelectedMaterialTarget | null
+  setSelectedMaterialTarget: (target: SelectedMaterialTarget | null) => void
   selectedReferenceId: string | null
   setSelectedReferenceId: (id: string | null) => void
   // Space detection for cutaway mode
@@ -125,6 +173,8 @@ type EditorState = {
   setFloorplanHovered: (hovered: boolean) => void
   floorplanSelectionTool: FloorplanSelectionTool
   setFloorplanSelectionTool: (tool: FloorplanSelectionTool) => void
+  gridSnapStep: GridSnapStep
+  setGridSnapStep: (step: GridSnapStep) => void
   // First-person walkthrough mode (street view)
   isFirstPersonMode: boolean
   _viewModeBeforeFirstPerson: ViewMode | null
@@ -145,7 +195,11 @@ export type PersistedEditorUiState = Pick<
 
 type PersistedEditorLayoutState = Pick<
   EditorState,
-  'activeSidebarPanel' | 'floorplanPaneRatio' | 'splitOrientation' | 'floorplanSelectionTool'
+  | 'activeSidebarPanel'
+  | 'floorplanPaneRatio'
+  | 'splitOrientation'
+  | 'floorplanSelectionTool'
+  | 'gridSnapStep'
 >
 type PersistedEditorState = PersistedEditorUiState & PersistedEditorLayoutState
 
@@ -164,8 +218,11 @@ export const DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE: PersistedEditorLayoutState =
   floorplanPaneRatio: DEFAULT_FLOORPLAN_PANE_RATIO,
   splitOrientation: 'horizontal',
   floorplanSelectionTool: 'click',
+  gridSnapStep: 0.5,
 }
 
+const GRID_SNAP_STEPS: GridSnapStep[] = [0.5, 0.25, 0.1, 0.05]
+
 function normalizeModeForPhase(phase: Phase, mode: Mode | undefined): Mode {
   if (phase === 'site') {
     return 'select'
@@ -268,6 +325,9 @@ function normalizePersistedEditorLayoutState(
     floorplanPaneRatio: normalizeFloorplanPaneRatio(state?.floorplanPaneRatio),
     splitOrientation: state?.splitOrientation === 'vertical' ? 'vertical' : 'horizontal',
     floorplanSelectionTool: state?.floorplanSelectionTool === 'marquee' ? 'marquee' : 'click',
+    gridSnapStep: GRID_SNAP_STEPS.includes(state?.gridSnapStep as GridSnapStep)
+      ? (state?.gridSnapStep as GridSnapStep)
+      : DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.gridSnapStep,
   }
 }
 
@@ -327,6 +387,10 @@ export function selectDefaultBuildingAndLevel() {
   }
 }
 
+function getDefaultSelectedItemForCategory(category: CatalogCategory | null): AssetInput | null {
+  return getDefaultCatalogItem(category)
+}
+
 const useEditor = create<EditorState>()(
   persist(
     (set, get) => ({
@@ -348,7 +412,11 @@ const useEditor = create<EditorState>()(
           } else if (phase === 'structure') {
             set({ tool: 'wall', catalogCategory: null })
           } else if (phase === 'furnish') {
-            set({ tool: 'item', catalogCategory: 'furniture' })
+            set({
+              tool: 'item',
+              catalogCategory: 'furniture',
+              selectedItem: getDefaultSelectedItemForCategory('furniture'),
+            })
           }
         } else {
           // Reset to select mode and clear tool/catalog when switching phases
@@ -388,8 +456,15 @@ const useEditor = create<EditorState>()(
             } else if (phase === 'structure' && structureLayer === 'elements') {
               set({ tool: 'wall' })
             } else if (phase === 'furnish') {
-              set({ tool: 'item', catalogCategory: 'furniture' })
+              set({
+                tool: 'item',
+                catalogCategory: 'furniture',
+                selectedItem: getDefaultSelectedItemForCategory('furniture'),
+              })
             }
+          } else if (phase === 'furnish' && tool === 'item' && !get().selectedItem) {
+            const category = get().catalogCategory ?? 'furniture'
+            set({ selectedItem: getDefaultSelectedItemForCategory(category) })
           }
         }
         // When leaving build mode, clear tool
@@ -417,19 +492,44 @@ const useEditor = create<EditorState>()(
         })
       },
       catalogCategory: DEFAULT_PERSISTED_EDITOR_UI_STATE.catalogCategory,
-      setCatalogCategory: (category) => set({ catalogCategory: category }),
+      setCatalogCategory: (category) =>
+        set((state) => ({
+          catalogCategory: category,
+          selectedItem:
+            category !== null &&
+            state.phase === 'furnish' &&
+            state.mode === 'build' &&
+            state.tool === 'item'
+              ? getDefaultSelectedItemForCategory(category)
+              : state.selectedItem,
+        })),
       selectedItem: null,
       setSelectedItem: (item) => set({ selectedItem: item }),
       movingNode: null as
         | ItemNode
         | WindowNode
         | DoorNode
+        | FenceNode
+        | CeilingNode
+        | SlabNode
+        | WallNode
         | RoofNode
         | RoofSegmentNode
         | StairNode
         | StairSegmentNode
+        | BuildingNode
         | null,
       setMovingNode: (node) => set({ movingNode: node }),
+      movingWallEndpoint: null,
+      setMovingWallEndpoint: (value) => set({ movingWallEndpoint: value }),
+      movingFenceEndpoint: null,
+      setMovingFenceEndpoint: (value) => set({ movingFenceEndpoint: value }),
+      curvingWall: null,
+      setCurvingWall: (wall) => set({ curvingWall: wall }),
+      curvingFence: null,
+      setCurvingFence: (fence) => set({ curvingFence: fence }),
+      selectedMaterialTarget: null,
+      setSelectedMaterialTarget: (target) => set({ selectedMaterialTarget: target }),
       selectedReferenceId: null,
       setSelectedReferenceId: (id) => set({ selectedReferenceId: id }),
       spaces: {},
@@ -461,6 +561,8 @@ const useEditor = create<EditorState>()(
       setFloorplanHovered: (hovered) => set({ isFloorplanHovered: hovered }),
       floorplanSelectionTool: 'click' as FloorplanSelectionTool,
       setFloorplanSelectionTool: (tool) => set({ floorplanSelectionTool: tool }),
+      gridSnapStep: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.gridSnapStep,
+      setGridSnapStep: (step) => set({ gridSnapStep: step }),
       allowUndergroundCamera: false,
       setAllowUndergroundCamera: (enabled) => set({ allowUndergroundCamera: enabled }),
       isFirstPersonMode: false,
@@ -497,11 +599,23 @@ const useEditor = create<EditorState>()(
     }),
     {
       name: 'pascal-editor-ui-preferences',
-      merge: (persistedState, currentState) => ({
-        ...currentState,
-        ...normalizePersistedEditorUiState(persistedState as Partial<PersistedEditorState>),
-        ...normalizePersistedEditorLayoutState(persistedState as Partial<PersistedEditorState>),
-      }),
+      merge: (persistedState, currentState) => {
+        const mergedState = {
+          ...currentState,
+          ...normalizePersistedEditorUiState(persistedState as Partial<PersistedEditorState>),
+          ...normalizePersistedEditorLayoutState(persistedState as Partial<PersistedEditorState>),
+        }
+
+        return {
+          ...mergedState,
+          selectedItem:
+            mergedState.phase === 'furnish' &&
+            mergedState.mode === 'build' &&
+            mergedState.tool === 'item'
+              ? getDefaultSelectedItemForCategory(mergedState.catalogCategory ?? 'furniture')
+              : currentState.selectedItem,
+        }
+      },
       partialize: (state) => ({
         phase: state.phase,
         mode: state.mode,
@@ -514,6 +628,7 @@ const useEditor = create<EditorState>()(
         floorplanPaneRatio: state.floorplanPaneRatio,
         splitOrientation: state.splitOrientation,
         floorplanSelectionTool: state.floorplanSelectionTool,
+        gridSnapStep: state.gridSnapStep,
       }),
     },
   ),