@pascal-app/editor 0.5.1 → 0.7.0

package/src/store/use-editor.tsx

@@ -1,23 +1,40 @@
 'use client'
 
-import type { AssetInput } from '@pascal-app/core'
 import {
+  type AnyNodeId,
+  type AssetInput,
   type BuildingNode,
+  type CeilingNode,
+  type ColumnNode,
   type DoorNode,
   type FenceNode,
   type ItemNode,
   type LevelNode,
   type RoofNode,
   type RoofSegmentNode,
+  type RoofSurfaceMaterialRole,
+  type SlabNode,
   type Space,
+  type SpawnNode,
   type StairNode,
   type StairSegmentNode,
+  type StairSurfaceMaterialRole,
   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'
+import {
+  type ActivePaintMaterial,
+  type PaintableMaterialTarget,
+  resolveActivePaintMaterialFromSelection,
+  resolvePaintTargetFromSelection,
+  type SingleSurfaceMaterialRole,
+} from '../lib/material-paint'
 
 const DEFAULT_ACTIVE_SIDEBAR_PANEL = 'site'
 const DEFAULT_FLOORPLAN_PANE_RATIO = 0.5
@@ -29,7 +46,7 @@ export type SplitOrientation = 'horizontal' | 'vertical'
 
 export type Phase = 'site' | 'structure' | 'furnish'
 
-export type Mode = 'select' | 'edit' | 'delete' | 'build'
+export type Mode = 'select' | 'edit' | 'delete' | 'build' | 'material-paint'
 
 // Structure mode tools (building elements)
 export type StructureTool =
@@ -44,6 +61,7 @@ export type StructureTool =
   | 'stair'
   | 'item'
   | 'zone'
+  | 'spawn'
   | 'window'
   | 'door'
 
@@ -66,10 +84,43 @@ 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
+  | SingleSurfaceMaterialRole
+
+export type SelectedMaterialTarget = {
+  nodeId: AnyNodeId
+  role: MaterialTargetRole
+}
+
+type MaterialPaintSelectionSnapshot = {
+  selectedId: string | null
+  activePaintTarget: PaintableMaterialTarget
+  activePaintMaterial: ActivePaintMaterial | null
+}
+
+export type GuideUiState = {
+  locked?: boolean
+  scaleReferenceVisible?: boolean
+}
+
 type EditorState = {
   phase: Phase
   setPhase: (phase: Phase) => void
@@ -88,8 +139,13 @@ type EditorState = {
     | WindowNode
     | DoorNode
     | FenceNode
+    | CeilingNode
+    | ColumnNode
+    | SlabNode
+    | WallNode
     | RoofNode
     | RoofSegmentNode
+    | SpawnNode
     | StairNode
     | StairSegmentNode
     | BuildingNode
@@ -100,15 +156,43 @@ type EditorState = {
       | WindowNode
       | DoorNode
       | FenceNode
+      | CeilingNode
+      | ColumnNode
+      | SlabNode
+      | WallNode
       | RoofNode
       | RoofSegmentNode
+      | SpawnNode
       | 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
+  activePaintMaterial: ActivePaintMaterial | null
+  setActivePaintMaterial: (material: ActivePaintMaterial | null) => void
+  activePaintTarget: PaintableMaterialTarget
+  setActivePaintTarget: (target: PaintableMaterialTarget) => void
+  primeMaterialPaintFromSelection: () => MaterialPaintSelectionSnapshot
+  hoveredPaintTarget: PaintableMaterialTarget | null
+  setHoveredPaintTarget: (target: PaintableMaterialTarget | null) => void
+  isPaintPanelOpen: boolean
+  setPaintPanelOpen: (open: boolean) => void
   selectedReferenceId: string | null
   setSelectedReferenceId: (id: string | null) => void
+  guideUi: Record<string, GuideUiState>
+  setGuideLocked: (guideId: string, locked: boolean) => void
+  setGuideScaleReferenceVisible: (guideId: string, visible: boolean) => void
+  clearGuideUi: (guideId: string) => void
   // Space detection for cutaway mode
   spaces: Record<string, Space>
   setSpaces: (spaces: Record<string, Space>) => void
@@ -131,6 +215,15 @@ type EditorState = {
   setFloorplanHovered: (hovered: boolean) => void
   floorplanSelectionTool: FloorplanSelectionTool
   setFloorplanSelectionTool: (tool: FloorplanSelectionTool) => void
+  gridSnapStep: GridSnapStep
+  setGridSnapStep: (step: GridSnapStep) => void
+  showReferenceFloor: boolean
+  toggleReferenceFloor: () => void
+  setShowReferenceFloor: (show: boolean) => void
+  referenceFloorOffset: number
+  setReferenceFloorOffset: (offset: number) => void
+  referenceFloorOpacity: number
+  setReferenceFloorOpacity: (opacity: number) => void
   // First-person walkthrough mode (street view)
   isFirstPersonMode: boolean
   _viewModeBeforeFirstPerson: ViewMode | null
@@ -140,6 +233,10 @@ type EditorState = {
   setAllowUndergroundCamera: (enabled: boolean) => void
   activeSidebarPanel: string
   setActiveSidebarPanel: (id: string) => void
+  mobilePanelSheetHeight: number
+  setMobilePanelSheetHeight: (height: number) => void
+  isCaptureMode: boolean
+  setIsCaptureMode: (enabled: boolean) => void
   floorplanPaneRatio: number
   setFloorplanPaneRatio: (ratio: number) => void
 }
@@ -151,7 +248,14 @@ export type PersistedEditorUiState = Pick<
 
 type PersistedEditorLayoutState = Pick<
   EditorState,
-  'activeSidebarPanel' | 'floorplanPaneRatio' | 'splitOrientation' | 'floorplanSelectionTool'
+  | 'activeSidebarPanel'
+  | 'floorplanPaneRatio'
+  | 'splitOrientation'
+  | 'floorplanSelectionTool'
+  | 'gridSnapStep'
+  | 'showReferenceFloor'
+  | 'referenceFloorOffset'
+  | 'referenceFloorOpacity'
 >
 type PersistedEditorState = PersistedEditorUiState & PersistedEditorLayoutState
 
@@ -170,14 +274,20 @@ export const DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE: PersistedEditorLayoutState =
   floorplanPaneRatio: DEFAULT_FLOORPLAN_PANE_RATIO,
   splitOrientation: 'horizontal',
   floorplanSelectionTool: 'click',
+  gridSnapStep: 0.5,
+  showReferenceFloor: false,
+  referenceFloorOffset: 1,
+  referenceFloorOpacity: 0.35,
 }
 
+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'
   }
 
-  return mode === 'build' || mode === 'delete' ? mode : 'select'
+  return mode === 'build' || mode === 'delete' || mode === 'material-paint' ? mode : 'select'
 }
 
 function normalizeFloorplanPaneRatio(value: unknown): number {
@@ -274,6 +384,19 @@ 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,
+    showReferenceFloor: state?.showReferenceFloor === true,
+    referenceFloorOffset:
+      typeof state?.referenceFloorOffset === 'number' && state.referenceFloorOffset >= 1
+        ? Math.floor(state.referenceFloorOffset)
+        : DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.referenceFloorOffset,
+    referenceFloorOpacity:
+      typeof state?.referenceFloorOpacity === 'number' &&
+      Number.isFinite(state.referenceFloorOpacity)
+        ? Math.min(0.8, Math.max(0.1, state.referenceFloorOpacity))
+        : DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.referenceFloorOpacity,
   }
 }
 
@@ -333,6 +456,10 @@ export function selectDefaultBuildingAndLevel() {
   }
 }
 
+function getDefaultSelectedItemForCategory(category: CatalogCategory | null): AssetInput | null {
+  return getDefaultCatalogItem(category)
+}
+
 const useEditor = create<EditorState>()(
   persist(
     (set, get) => ({
@@ -354,7 +481,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
@@ -394,9 +525,18 @@ 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) })
           }
+        } else if (mode === 'material-paint') {
+          get().primeMaterialPaintFromSelection()
         }
         // When leaving build mode, clear tool
         else if (tool) {
@@ -423,13 +563,27 @@ 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
@@ -437,8 +591,89 @@ const useEditor = create<EditorState>()(
         | 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 }),
+      activePaintMaterial: null,
+      setActivePaintMaterial: (material) => set({ activePaintMaterial: material }),
+      activePaintTarget: 'wall',
+      setActivePaintTarget: (target) =>
+        set((state) =>
+          state.activePaintTarget === target ? state : { activePaintTarget: target },
+        ),
+      primeMaterialPaintFromSelection: () => {
+        const selectedId =
+          useViewer.getState().selection.selectedIds.length === 1
+            ? (useViewer.getState().selection.selectedIds[0] ?? null)
+            : null
+        const activePaintTarget =
+          resolvePaintTargetFromSelection({
+            nodes: useScene.getState().nodes,
+            selectedId,
+          }) ?? get().activePaintTarget
+        const activePaintMaterial = resolveActivePaintMaterialFromSelection({
+          nodes: useScene.getState().nodes,
+          selectedId,
+          selectedMaterialTarget: get().selectedMaterialTarget,
+        })
+
+        set({
+          activePaintTarget,
+          ...(activePaintMaterial ? { activePaintMaterial } : {}),
+        })
+
+        return {
+          selectedId,
+          activePaintTarget,
+          activePaintMaterial: activePaintMaterial ?? get().activePaintMaterial,
+        }
+      },
+      hoveredPaintTarget: null,
+      setHoveredPaintTarget: (target) =>
+        set((state) =>
+          state.hoveredPaintTarget === target ? state : { hoveredPaintTarget: target },
+        ),
+      isPaintPanelOpen: false,
+      setPaintPanelOpen: (open) => set({ isPaintPanelOpen: open }),
       selectedReferenceId: null,
       setSelectedReferenceId: (id) => set({ selectedReferenceId: id }),
+      guideUi: {},
+      setGuideLocked: (guideId, locked) =>
+        set((state) => ({
+          guideUi: {
+            ...state.guideUi,
+            [guideId]: {
+              ...state.guideUi[guideId],
+              locked,
+            },
+          },
+        })),
+      setGuideScaleReferenceVisible: (guideId, visible) =>
+        set((state) => ({
+          guideUi: {
+            ...state.guideUi,
+            [guideId]: {
+              ...state.guideUi[guideId],
+              scaleReferenceVisible: visible,
+            },
+          },
+        })),
+      clearGuideUi: (guideId) =>
+        set((state) => {
+          if (!state.guideUi[guideId]) {
+            return state
+          }
+          const guideUi = { ...state.guideUi }
+          delete guideUi[guideId]
+          return { guideUi }
+        }),
       spaces: {},
       setSpaces: (spaces) => set({ spaces }),
       editingHole: null,
@@ -468,6 +703,18 @@ 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 }),
+      showReferenceFloor: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.showReferenceFloor,
+      toggleReferenceFloor: () =>
+        set((state) => ({ showReferenceFloor: !state.showReferenceFloor })),
+      setShowReferenceFloor: (show) => set({ showReferenceFloor: show }),
+      referenceFloorOffset: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.referenceFloorOffset,
+      setReferenceFloorOffset: (offset) =>
+        set({ referenceFloorOffset: Math.max(1, Math.floor(offset)) }),
+      referenceFloorOpacity: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.referenceFloorOpacity,
+      setReferenceFloorOpacity: (opacity) =>
+        set({ referenceFloorOpacity: Math.min(0.8, Math.max(0.1, opacity)) }),
       allowUndergroundCamera: false,
       setAllowUndergroundCamera: (enabled) => set({ allowUndergroundCamera: enabled }),
       isFirstPersonMode: false,
@@ -475,8 +722,6 @@ const useEditor = create<EditorState>()(
       setFirstPersonMode: (enabled) => {
         if (enabled) {
           const currentViewMode = get().viewMode
-          useViewer.getState().setCameraMode('perspective')
-          useViewer.getState().setWallMode('up')
           set({
             isFirstPersonMode: true,
             _viewModeBeforeFirstPerson: currentViewMode,
@@ -486,7 +731,6 @@ const useEditor = create<EditorState>()(
             tool: null,
             catalogCategory: null,
           })
-          useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
         } else {
           const prevMode = get()._viewModeBeforeFirstPerson
           set({
@@ -498,17 +742,33 @@ const useEditor = create<EditorState>()(
       },
       activeSidebarPanel: DEFAULT_ACTIVE_SIDEBAR_PANEL,
       setActiveSidebarPanel: (id) => set({ activeSidebarPanel: id }),
+      mobilePanelSheetHeight: 0,
+      setMobilePanelSheetHeight: (height) => set({ mobilePanelSheetHeight: height }),
+      isCaptureMode: false,
+      setIsCaptureMode: (enabled) => set({ isCaptureMode: enabled }),
       floorplanPaneRatio: DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE.floorplanPaneRatio,
       setFloorplanPaneRatio: (ratio) =>
         set({ floorplanPaneRatio: normalizeFloorplanPaneRatio(ratio) }),
     }),
     {
       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,
@@ -521,6 +781,10 @@ const useEditor = create<EditorState>()(
         floorplanPaneRatio: state.floorplanPaneRatio,
         splitOrientation: state.splitOrientation,
         floorplanSelectionTool: state.floorplanSelectionTool,
+        gridSnapStep: state.gridSnapStep,
+        showReferenceFloor: state.showReferenceFloor,
+        referenceFloorOffset: state.referenceFloorOffset,
+        referenceFloorOpacity: state.referenceFloorOpacity,
       }),
     },
   ),