import { Object3D } from 'three'; import { create } from 'zustand'; import { immer } from 'zustand/middleware/immer'; interface BuilderState { // Common properties hoveredPoint: Point | null; snappedPoint: Point | null; snappedPosition: [number, number, number] | null; hoveredLine: [Point, Point] | null; // Wall wallThickness: number; wallHeight: number; outsideMaterial: string; insideMaterial: string; setWallThickness: (thickness: number) => void; setWallHeight: (height: number) => void; setWallMaterial: (material: string, side: 'inside' | 'outside') => void; // Aisle selectedAisle: Object3D | null; aisleType: AisleTypes; aisleWidth: number; aisleColor: AisleColors; // Dashed aisle properties dashLength: number; gapLength: number; // Dotted aisle properties dotRadius: number; // Arrows aisle properties aisleLength: number; // Junction aisle properties isFlipped: boolean; // Setters for common properties setHoveredPoint: (point: Point | null) => void; setSnappedPoint: (point: Point | null) => void; setSnappedPosition: (position: [number, number, number] | null) => void; setHoveredLine: (line: [Point, Point] | null) => void; setSelectedAisle: (aisle: Object3D | null) => void; setAisleType: (type: AisleTypes) => void; setAisleWidth: (width: number) => void; setAisleColor: (color: AisleColors) => void; // Setters for dashed aisle setDashLength: (length: number) => void; setGapLength: (length: number) => void; // Setters for dotted aisle setDotRadius: (radius: number) => void; // Setters for arrows aisle setAisleLength: (length: number) => void; // Setters for junction aisle setIsFlipped: (isFlipped: boolean) => void; // Batch setters setDashedAisleProperties: (width: number, dashLength: number, gapLength: number) => void; setDottedAisleProperties: (width: number, dotRadius: number, gapLength: number) => void; setArrowsAisleProperties: (width: number, aisleLength: number, gapLength: number) => void; setAisleProperties: (type: AisleTypes, width: number, color: AisleColors) => void; } export const useBuilderStore = create()( immer((set) => ({ // Default values hoveredPoint: null, snappedPoint: null, snappedPosition: null, hoveredLine: null, // Wall wallThickness: 0.5, wallHeight: 7, outsideMaterial: 'Default Material', insideMaterial: 'Default Material', setWallThickness: (thickness: number) => { set((state) => { state.wallThickness = thickness; }) }, setWallHeight: (height: number) => { set((state) => { state.wallHeight = height; }) }, setWallMaterial: (material: string, side: 'inside' | 'outside') => { set((state) => { if (side === 'outside') state.outsideMaterial = material; else state.insideMaterial = material; }); }, // Aisle selectedAisle: null, aisleType: 'solid-aisle', aisleWidth: 0.1, aisleColor: 'yellow', dashLength: 0.5, gapLength: 0.3, dotRadius: 0.1, aisleLength: 0.6, isFlipped: false, // Individual setters setHoveredPoint: (point: Point | null) => { set((state) => { state.hoveredPoint = point; }); }, setHoveredLine: (line: [Point, Point] | null) => { set((state) => { state.hoveredLine = line; }) }, setSnappedPoint: (point: Point | null) => { set((state) => { state.snappedPoint = point; }); }, setSnappedPosition: (position: [number, number, number] | null) => { set((state) => { state.snappedPosition = position; }); }, setSelectedAisle: (aisle: Object3D | null) => { set((state) => { state.selectedAisle = aisle; }); }, setAisleType: (type) => { set((state) => { state.aisleType = type; }); }, setAisleWidth: (width) => { set((state) => { state.aisleWidth = width; }); }, setAisleColor: (color) => { set((state) => { state.aisleColor = color; }); }, setDashLength: (length) => { set((state) => { state.dashLength = length; }); }, setGapLength: (length) => { set((state) => { state.gapLength = length; }); }, setDotRadius: (radius) => { set((state) => { state.dotRadius = radius; }); }, setAisleLength: (length) => { set((state) => { state.aisleLength = length; }); }, setIsFlipped: (isFlipped) => { set((state) => { state.isFlipped = isFlipped; }); }, // Batch setters setDashedAisleProperties: (width, dashLength, gapLength) => { set((state) => { state.aisleType = 'dashed-aisle'; state.aisleWidth = width; state.dashLength = dashLength; state.gapLength = gapLength; }); }, setDottedAisleProperties: (width, dotRadius, gapLength) => { set((state) => { state.aisleType = 'dotted-aisle'; state.aisleWidth = width; state.dotRadius = dotRadius; state.gapLength = gapLength; }); }, setArrowsAisleProperties: (width, aisleLength, gapLength) => { set((state) => { state.aisleType = 'arrows-aisle'; state.aisleWidth = width; state.aisleLength = aisleLength; state.gapLength = gapLength; }); }, setAisleProperties: (type, width, color) => { set((state) => { state.aisleType = type; state.aisleWidth = width; state.aisleColor = color; }); } })) );