Refactor builder store and remove wall store
Refactor builder store and remove wall store - Consolidated wall-related state management into the builder store by removing the useWallStore. - Added new properties and setters for wall attributes (thickness, height, materials) in the builder store. - Introduced SelectedWallProperties and WallProperties components for managing wall properties in the sidebar. - Created a new floor store for managing floor-related state. - Added a wall asset store for managing wall assets. - Implemented a zone store for managing zones and their properties. - Updated sidebar styles for better layout and appearance.
This commit is contained in:
@@ -3,74 +3,58 @@ import { create } from 'zustand';
|
||||
import { immer } from 'zustand/middleware/immer';
|
||||
|
||||
interface BuilderState {
|
||||
// Common properties
|
||||
|
||||
// Point & Line Interaction
|
||||
hoveredPoint: Point | null;
|
||||
snappedPoint: Point | null;
|
||||
snappedPosition: [number, number, number] | null;
|
||||
|
||||
hoveredLine: [Point, Point] | null;
|
||||
|
||||
// Wall
|
||||
|
||||
// Wall Settings
|
||||
selectedWall: Object3D | null;
|
||||
wallThickness: number;
|
||||
wallHeight: number;
|
||||
outsideMaterial: string;
|
||||
insideMaterial: string;
|
||||
|
||||
setWallThickness: (thickness: number) => void;
|
||||
setWallHeight: (height: number) => void;
|
||||
setWallMaterial: (material: string, side: 'inside' | 'outside') => void;
|
||||
|
||||
// Aisle
|
||||
|
||||
// Aisle General
|
||||
selectedAisle: Object3D | null;
|
||||
|
||||
aisleType: AisleTypes;
|
||||
aisleWidth: number;
|
||||
aisleColor: AisleColors;
|
||||
|
||||
// Dashed aisle properties
|
||||
// Aisle Specific Styles
|
||||
dashLength: number;
|
||||
gapLength: number;
|
||||
|
||||
// Dotted aisle properties
|
||||
dotRadius: number;
|
||||
|
||||
// Arrows aisle properties
|
||||
aisleLength: number;
|
||||
|
||||
// Junction aisle properties
|
||||
isFlipped: boolean;
|
||||
|
||||
// Setters for common properties
|
||||
|
||||
// Setters - Point/Line
|
||||
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;
|
||||
// Setters - Wall
|
||||
setSelectedWall: (wall: Object3D | null) => void;
|
||||
setWallThickness: (thickness: number) => void;
|
||||
setWallHeight: (height: number) => void;
|
||||
setWallMaterial: (material: string, side: 'inside' | 'outside') => void;
|
||||
|
||||
// Setters - Aisle General
|
||||
setSelectedAisle: (aisle: Object3D | null) => void;
|
||||
setAisleType: (type: AisleTypes) => void;
|
||||
setAisleWidth: (width: number) => void;
|
||||
setAisleColor: (color: AisleColors) => void;
|
||||
|
||||
// Setters for dashed aisle
|
||||
// Setters - Aisle Specific
|
||||
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
|
||||
// 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;
|
||||
@@ -79,20 +63,62 @@ interface BuilderState {
|
||||
|
||||
export const useBuilderStore = create<BuilderState>()(
|
||||
immer((set) => ({
|
||||
// Default values
|
||||
|
||||
// === Defaults ===
|
||||
hoveredPoint: null,
|
||||
snappedPoint: null,
|
||||
snappedPosition: null,
|
||||
|
||||
hoveredLine: null,
|
||||
|
||||
// Wall
|
||||
|
||||
selectedWall: null,
|
||||
wallThickness: 0.5,
|
||||
wallHeight: 7,
|
||||
outsideMaterial: 'Default Material',
|
||||
insideMaterial: 'Default Material',
|
||||
insideMaterial: 'Material 1',
|
||||
|
||||
selectedAisle: null,
|
||||
aisleType: 'solid-aisle',
|
||||
aisleWidth: 0.1,
|
||||
aisleColor: 'yellow',
|
||||
|
||||
dashLength: 0.5,
|
||||
gapLength: 0.3,
|
||||
dotRadius: 0.1,
|
||||
aisleLength: 0.6,
|
||||
isFlipped: false,
|
||||
|
||||
// === Setters: Point/Line ===
|
||||
|
||||
setHoveredPoint: (point: Point | null) => {
|
||||
set((state) => {
|
||||
state.hoveredPoint = point;
|
||||
});
|
||||
},
|
||||
|
||||
setSnappedPoint: (point: Point | null) => {
|
||||
set((state) => {
|
||||
state.snappedPoint = point;
|
||||
});
|
||||
},
|
||||
|
||||
setSnappedPosition: (position: [number, number, number] | null) => {
|
||||
set((state) => {
|
||||
state.snappedPosition = position;
|
||||
});
|
||||
},
|
||||
|
||||
setHoveredLine: (line: [Point, Point] | null) => {
|
||||
set((state) => {
|
||||
state.hoveredLine = line;
|
||||
})
|
||||
},
|
||||
|
||||
// === Setters: Wall ===
|
||||
|
||||
setSelectedWall: (wall: Object3D | null) => {
|
||||
set((state) => {
|
||||
state.selectedWall = wall;
|
||||
})
|
||||
},
|
||||
|
||||
setWallThickness: (thickness: number) => {
|
||||
set((state) => {
|
||||
@@ -113,44 +139,7 @@ export const useBuilderStore = create<BuilderState>()(
|
||||
});
|
||||
},
|
||||
|
||||
// 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;
|
||||
});
|
||||
},
|
||||
// === Setters: Aisle General ===
|
||||
|
||||
setSelectedAisle: (aisle: Object3D | null) => {
|
||||
set((state) => {
|
||||
@@ -163,73 +152,78 @@ export const useBuilderStore = create<BuilderState>()(
|
||||
state.aisleType = type;
|
||||
});
|
||||
},
|
||||
|
||||
setAisleWidth: (width) => {
|
||||
set((state) => {
|
||||
state.aisleWidth = width;
|
||||
});
|
||||
},
|
||||
|
||||
setAisleColor: (color) => {
|
||||
set((state) => {
|
||||
state.aisleColor = color;
|
||||
});
|
||||
},
|
||||
|
||||
// === Setters: Aisle Specific ===
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
// === 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;
|
||||
})
|
||||
}))
|
||||
);
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user