@pascal-app/editor 0.6.0 → 0.7.0

package/src/store/use-editor.tsx

@@ -5,18 +5,20 @@ import {
   type AssetInput,
   type BuildingNode,
   type CeilingNode,
+  type ColumnNode,
   type DoorNode,
   type FenceNode,
   type ItemNode,
   type LevelNode,
-  type RoofSurfaceMaterialRole,
   type RoofNode,
   type RoofSegmentNode,
+  type RoofSurfaceMaterialRole,
   type SlabNode,
   type Space,
-  type StairSurfaceMaterialRole,
+  type SpawnNode,
   type StairNode,
   type StairSegmentNode,
+  type StairSurfaceMaterialRole,
   useScene,
   type WallNode,
   type WallSurfaceSide,
@@ -26,6 +28,13 @@ 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
@@ -37,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 =
@@ -52,6 +61,7 @@ export type StructureTool =
   | 'stair'
   | 'item'
   | 'zone'
+  | 'spawn'
   | 'window'
   | 'door'
 
@@ -89,13 +99,28 @@ export type MovingFenceEndpoint = {
   endpoint: 'start' | 'end'
 }
 
-export type MaterialTargetRole = WallSurfaceSide | StairSurfaceMaterialRole | RoofSurfaceMaterialRole
+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
@@ -115,10 +140,12 @@ type EditorState = {
     | DoorNode
     | FenceNode
     | CeilingNode
+    | ColumnNode
     | SlabNode
     | WallNode
     | RoofNode
     | RoofSegmentNode
+    | SpawnNode
     | StairNode
     | StairSegmentNode
     | BuildingNode
@@ -130,10 +157,12 @@ type EditorState = {
       | DoorNode
       | FenceNode
       | CeilingNode
+      | ColumnNode
       | SlabNode
       | WallNode
       | RoofNode
       | RoofSegmentNode
+      | SpawnNode
       | StairNode
       | StairSegmentNode
       | BuildingNode
@@ -149,8 +178,21 @@ type EditorState = {
   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
@@ -175,6 +217,13 @@ type EditorState = {
   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
@@ -184,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
 }
@@ -200,6 +253,9 @@ type PersistedEditorLayoutState = Pick<
   | 'splitOrientation'
   | 'floorplanSelectionTool'
   | 'gridSnapStep'
+  | 'showReferenceFloor'
+  | 'referenceFloorOffset'
+  | 'referenceFloorOpacity'
 >
 type PersistedEditorState = PersistedEditorUiState & PersistedEditorLayoutState
 
@@ -219,6 +275,9 @@ export const DEFAULT_PERSISTED_EDITOR_LAYOUT_STATE: PersistedEditorLayoutState =
   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]
@@ -228,7 +287,7 @@ function normalizeModeForPhase(phase: Phase, mode: Mode | undefined): Mode {
     return 'select'
   }
 
-  return mode === 'build' || mode === 'delete' ? mode : 'select'
+  return mode === 'build' || mode === 'delete' || mode === 'material-paint' ? mode : 'select'
 }
 
 function normalizeFloorplanPaneRatio(value: unknown): number {
@@ -328,6 +387,16 @@ function normalizePersistedEditorLayoutState(
     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,
   }
 }
 
@@ -466,6 +535,8 @@ const useEditor = create<EditorState>()(
             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) {
@@ -530,8 +601,79 @@ const useEditor = create<EditorState>()(
       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,
@@ -563,6 +705,16 @@ const useEditor = create<EditorState>()(
       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,
@@ -570,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,
@@ -581,7 +731,6 @@ const useEditor = create<EditorState>()(
             tool: null,
             catalogCategory: null,
           })
-          useViewer.getState().setSelection({ selectedIds: [], zoneId: null })
         } else {
           const prevMode = get()._viewModeBeforeFirstPerson
           set({
@@ -593,6 +742,10 @@ 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) }),
@@ -629,6 +782,9 @@ const useEditor = create<EditorState>()(
         splitOrientation: state.splitOrientation,
         floorplanSelectionTool: state.floorplanSelectionTool,
         gridSnapStep: state.gridSnapStep,
+        showReferenceFloor: state.showReferenceFloor,
+        referenceFloorOffset: state.referenceFloorOffset,
+        referenceFloorOpacity: state.referenceFloorOpacity,
       }),
     },
   ),