Merge remote-tracking branch 'origin/v2' into v2-ui

app/src/modules/builder/builder.tsx

@@ -46,6 +46,7 @@ import ZoneGroup from "./groups/zoneGroup";
 import MeasurementTool from "../scene/tools/measurementTool";
 import NavMesh from "../simulation/vehicle/navMesh/navMesh";
 import CalculateAreaGroup from "./groups/calculateAreaGroup";
+import LayoutImage from "./layout/layoutImage";
 
 export default function Builder() {
     const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
@@ -299,8 +300,12 @@ export default function Builder() {
             />
 
             <MeasurementTool />
+
             <CalculateAreaGroup />
+
             <NavMesh lines={lines} />
+
+            <LayoutImage />
         </>
     );
 }

app/src/modules/builder/layout/layoutImage.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import layout1 from '../../../assets/gltf-glb/layouts/floorplane_1.glb';
+import layout2 from '../../../assets/gltf-glb/layouts/floorplane_2.glb';
+import useLayoutStore from '../../../store/builder/uselayoutStore';
+import { useGLTF } from '@react-three/drei';
+import { useToggleView } from '../../../store/builder/store';
+
+const modelPaths: Record<string, string> = {
+    'layout1': layout1,
+    'layout2': layout2
+};
+
+function LayoutModel() {
+    const { toggleView } = useToggleView();
+    const { currentLayout } = useLayoutStore();
+    if (!currentLayout) return null;
+
+    const path = modelPaths[currentLayout];
+    const gltf = useGLTF(path);
+    const cloned = useMemo(() => gltf?.scene?.clone(), [gltf]);
+
+    return (
+        <>
+            {toggleView &&
+                <group position={[0,0,0]} scale={[0,0,0]} dispose={null}>
+                    <primitive
+                        object={cloned}
+                    />
+                </group>
+            }
+        </>
+    );
+}
+
+export default LayoutModel;

app/src/store/builder/uselayoutStore.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+
+type Layout = null | 'layout1' | 'layout2';
+
+type LayoutState = {
+    currentLayout: Layout;
+    setLayout: (layout: Layout) => void;
+    resetLayout: () => void;
+};
+
+const LAYOUT_STORAGE_KEY = 'currentLayout';
+
+const useLayoutStore = create<LayoutState>((set) => ({
+    currentLayout: (() => {
+        if (typeof window !== 'undefined') {
+            const storedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY);
+            return storedLayout ? (JSON.parse(storedLayout) as Layout) : null;
+        }
+        return null;
+    })(),
+    
+    setLayout: (layout) => {
+        if (typeof window !== 'undefined') {
+            localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layout));
+        }
+        set({ currentLayout: layout });
+    },
+    
+    resetLayout: () => {
+        if (typeof window !== 'undefined') {
+            localStorage.removeItem(LAYOUT_STORAGE_KEY);
+        }
+        set({ currentLayout: null });
+    },
+}));
+
+export default useLayoutStore;