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.

app/src/modules/scene/postProcessing/postProcessing.tsx

@@ -15,7 +15,7 @@ export default function PostProcessing() {
     const { selectedWallItem } = useSelectedWallItem();
     const { selectedFloorItem } = useSelectedFloorItem();
     const { selectedEventSphere } = useSelectedEventSphere();
-    const { selectedAisle } = useBuilderStore();
+    const { selectedAisle, selectedWall } = useBuilderStore();
 
     function flattenChildren(children: any[]) {
         const allChildren: any[] = [];
@@ -40,6 +40,10 @@ export default function PostProcessing() {
         // console.log('selectedAisle: ', selectedAisle);
     }, [selectedAisle])
 
+    useEffect(() => {
+        // console.log('selectedWall: ', selectedWall);
+    }, [selectedWall])
+
     return (
         <EffectComposer autoClear={false}>
             <N8AO
@@ -66,6 +70,21 @@ export default function PostProcessing() {
                     xRay={false}
                 />
             )}
+            {selectedWall && (
+                <Outline
+                    selection={selectedWall}
+                    selectionLayer={10}
+                    width={2000}
+                    blendFunction={BlendFunction.ALPHA}
+                    edgeStrength={5}
+                    resolutionScale={2}
+                    pulseSpeed={0}
+                    visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
+                    hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
+                    blur={true}
+                    xRay={true}
+                />
+            )}
             {deletableFloorItem && (
                 <Outline
                     selection={flattenChildren(deletableFloorItem.children)}

app/src/modules/scene/sceneContext.tsx

@@ -1,7 +1,11 @@
 import { createContext, useContext, useMemo } from 'react';
 
 import { createAssetStore, AssetStoreType } from '../../store/builder/useAssetStore';
+import { createWallAssetStore, WallAssetStoreType } from '../../store/builder/useWallAssetStore';
+import { createWallStore, WallStoreType } from '../../store/builder/useWallStore';
 import { createAisleStore, AisleStoreType } from '../../store/builder/useAisleStore';
+import { createZoneStore, ZoneStoreType } from '../../store/builder/useZoneStore';
+import { createFloorStore, FloorStoreType } from '../../store/builder/useFloorStore';
 
 import { createEventStore, EventStoreType } from '../../store/simulation/useEventsStore';
 import { createProductStore, ProductStoreType } from '../../store/simulation/useProductStore';
@@ -16,7 +20,11 @@ import { createStorageUnitStore, StorageUnitStoreType } from '../../store/simula
 type SceneContextValue = {
 
     assetStore: AssetStoreType,
+    wallAssetStore: WallAssetStoreType,
+    wallStore: WallStoreType,
     aisleStore: AisleStoreType,
+    zoneStore: ZoneStoreType,
+    floorStore: FloorStoreType,
 
     eventStore: EventStoreType,
     productStore: ProductStoreType,
@@ -44,7 +52,11 @@ export function SceneProvider({
 }) {
 
     const assetStore = useMemo(() => createAssetStore(), []);
+    const wallAssetStore = useMemo(() => createWallAssetStore(), []);
+    const wallStore = useMemo(() => createWallStore(), []);
     const aisleStore = useMemo(() => createAisleStore(), []);
+    const zoneStore = useMemo(() => createZoneStore(), []);
+    const floorStore = useMemo(() => createFloorStore(), []);
 
     const eventStore = useMemo(() => createEventStore(), []);
     const productStore = useMemo(() => createProductStore(), []);
@@ -58,7 +70,11 @@ export function SceneProvider({
 
     const clearStores = useMemo(() => () => {
         assetStore.getState().clearAssets();
+        wallAssetStore.getState().clearWallAssets();
+        wallStore.getState().clearWalls();
         aisleStore.getState().clearAisles();
+        zoneStore.getState().clearZones();
+        floorStore.getState().clearFloors();
         eventStore.getState().clearEvents();
         productStore.getState().clearProducts();
         materialStore.getState().clearMaterials();
@@ -67,12 +83,16 @@ export function SceneProvider({
         conveyorStore.getState().clearConveyors();
         vehicleStore.getState().clearVehicles();
         storageUnitStore.getState().clearStorageUnits();
-    }, [assetStore, aisleStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore]);
+    }, [assetStore, wallAssetStore, wallStore, aisleStore, zoneStore, floorStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore]);
 
     const contextValue = useMemo(() => (
         {
             assetStore,
+            wallAssetStore,
+            wallStore,
             aisleStore,
+            zoneStore,
+            floorStore,
             eventStore,
             productStore,
             materialStore,
@@ -84,7 +104,7 @@ export function SceneProvider({
             clearStores,
             layout
         }
-    ), [assetStore, aisleStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, clearStores, layout]);
+    ), [assetStore, wallAssetStore, wallStore, aisleStore, zoneStore, floorStore, eventStore, productStore, materialStore, armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, clearStores, layout]);
 
     return (
         <SceneContext.Provider value={contextValue}>