refactor: Add point snapping functionality and enhance aisle management with new Point and Gizmo components

app/package-lock.json

@@ -30,6 +30,7 @@
         "glob": "^11.0.0",
         "gsap": "^3.12.5",
         "html2canvas": "^1.4.1",
+        "immer": "^10.1.1",
         "leva": "^0.10.0",
         "mqtt": "^5.10.4",
         "postprocessing": "^6.36.4",
@@ -43,6 +44,7 @@
         "sass": "^1.78.0",
         "socket.io-client": "^4.8.1",
         "three": "^0.168.0",
+        "three-viewport-gizmo": "^2.2.0",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4",
         "zustand": "^5.0.0-rc.2"
@@ -2021,7 +2023,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2033,7 +2035,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4136,6 +4138,26 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4247,25 +4269,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -9019,7 +9041,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9896,7 +9918,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -12726,9 +12748,10 @@
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "node_modules/immer": {
-      "version": "9.0.21",
+      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
-      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -15259,7 +15282,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -17990,6 +18013,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/react-dev-utils/node_modules/immer": {
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/react-dev-utils/node_modules/loader-utils": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
@@ -20534,6 +20567,15 @@
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
       "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg=="
     },
+    "node_modules/three-viewport-gizmo": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/three-viewport-gizmo/-/three-viewport-gizmo-2.2.0.tgz",
+      "integrity": "sha512-Jo9Liur1rUmdKk75FZumLU/+hbF+RtJHi1qsKZpntjKlCYScK6tjbYoqvJ9M+IJphrlQJF5oReFW7Sambh0N4Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.162.0 <1.0.0"
+      }
+    },
     "node_modules/throat": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
@@ -20727,7 +20769,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20770,7 +20812,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20782,7 +20824,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21278,7 +21320,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22337,7 +22379,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }

app/package.json

@@ -39,6 +39,7 @@
     "sass": "^1.78.0",
     "socket.io-client": "^4.8.1",
     "three": "^0.168.0",
+    "three-viewport-gizmo": "^2.2.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
     "zustand": "^5.0.0-rc.2"

app/src/modules/builder/aisle/Instances/aisleInstances.tsx

@@ -1,23 +1,49 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useAisleStore } from '../../../../store/builder/useAisleStore';
+import { useToggleView } from '../../../../store/builder/store';
 import AisleInstance from './instance/aisleInstance';
+import Point from '../../point/point';
 
 function AisleInstances() {
     const { aisles } = useAisleStore();
+    const { toggleView } = useToggleView();
+
+    const allPoints = useMemo(() => {
+        const points: Point[] = [];
+        const seenUuids = new Set<string>();
+
+        aisles.forEach(aisle => {
+            aisle.points.forEach(point => {
+                if (!seenUuids.has(point.uuid)) {
+                    seenUuids.add(point.uuid);
+                    points.push(point);
+                }
+            });
+        });
+
+        return points;
+    }, [aisles]);
 
     useEffect(() => {
         // console.log('aisles: ', aisles);
     }, [aisles]);
 
     return (
+        <>
+            {toggleView &&
+                <group name='Aisle-Points-Group'>
+                    {allPoints.map((point) => (
+                        <Point key={point.uuid} point={point} />
+                    ))}
+                </group>
+            }
 
-        <group name='Aisles-Group'>
+            <group name='Aisles-Group'>
-
+                {aisles.map((aisle) =>
-            {aisles.map((aisle) =>
+                    <AisleInstance aisle={aisle} key={aisle.uuid} />
-                <AisleInstance aisle={aisle} key={aisle.uuid} />
+                )}
-            )}
+            </group>
-
+        </>
-        </group>
     )
 }
 

app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx

@@ -6,8 +6,6 @@ import { useAisleStore } from '../../../../store/builder/useAisleStore';
 import ReferenceAisle from './referenceAisle';
 import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
 import ReferencePoint from '../../point/referencePoint';
-import Point from '../../point/point';
-import { intersect } from '@turf/turf';
 
 function AisleCreator() {
     const { scene, camera, raycaster, gl, pointer } = useThree();
@@ -16,7 +14,7 @@ function AisleCreator() {
     const { toolMode } = useToolMode();
     const { activeLayer } = useActiveLayer();
     const { socket } = useSocketStore();
-    const { aisles, addAisle, getAislePointById } = useAisleStore();
+    const { addAisle, getAislePointById } = useAisleStore();
 
     const [tempPoints, setTempPoints] = useState<Point[]>([]);
     const [isCreating, setIsCreating] = useState(false);
@@ -29,24 +27,6 @@ function AisleCreator() {
     //     }
     // }, [aisleType]);
 
-    const allPoints = useMemo(() => {
-        const points: Point[] = [];
-        const seenUuids = new Set<string>();
-
-        // Add points from existing aisles
-        aisles.forEach(aisle => {
-            aisle.points.forEach(point => {
-                if (!seenUuids.has(point.uuid)) {
-                    seenUuids.add(point.uuid);
-                    points.push(point);
-                }
-            });
-        });
-
-        return points;
-    }, [aisles]);
-
-
     useEffect(() => {
         const canvasElement = gl.domElement;
 
@@ -84,6 +64,7 @@ function AisleCreator() {
 
             const newPoint: Point = {
                 uuid: THREE.MathUtils.generateUUID(),
+                pointType: 'Aisle',
                 position: [position.x, position.y, position.z],
                 layer: activeLayer
             };
@@ -107,7 +88,6 @@ function AisleCreator() {
                         uuid: THREE.MathUtils.generateUUID(),
                         points: [tempPoints[0], newPoint],
                         type: {
-                            typeName: 'Aisle',
                             aisleType: 'solid-aisle',
                             aisleColor: aisleColor,
                             aisleWidth: aisleWidth
@@ -126,7 +106,6 @@ function AisleCreator() {
                         uuid: THREE.MathUtils.generateUUID(),
                         points: [tempPoints[0], newPoint],
                         type: {
-                            typeName: 'Aisle',
                             aisleType: 'dashed-aisle',
                             aisleColor: aisleColor,
                             aisleWidth: aisleWidth,
@@ -147,7 +126,6 @@ function AisleCreator() {
                         uuid: THREE.MathUtils.generateUUID(),
                         points: [tempPoints[0], newPoint],
                         type: {
-                            typeName: 'Aisle',
                             aisleType: 'stripped-aisle',
                             aisleColor: aisleColor,
                             aisleWidth: aisleWidth
@@ -166,7 +144,6 @@ function AisleCreator() {
                         uuid: THREE.MathUtils.generateUUID(),
                         points: [tempPoints[0], newPoint],
                         type: {
-                            typeName: 'Aisle',
                             aisleType: 'dotted-aisle',
                             aisleColor: aisleColor,
                             dotRadius: dotRadius,
@@ -188,7 +165,6 @@ function AisleCreator() {
                         uuid: THREE.MathUtils.generateUUID(),
                         points: [tempPoints[0], newPoint],
                         type: {
-                            typeName: 'Aisle',
                             aisleType: 'arrows-aisle',
                             aisleColor: aisleColor,
                             aisleWidth: aisleWidth,
@@ -246,12 +222,6 @@ function AisleCreator() {
                         ))}
                     </group>
 
-                    <group name='Aisle-Points-Group'>
-                        {allPoints.map((point) => (
-                            <Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} />
-                        ))}
-                    </group>
-
                     <ReferenceAisle tempPoints={tempPoints} />
                 </>
             }

app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx

@@ -37,12 +37,12 @@ function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
                             tempPoints[0],
                             {
                                 uuid: 'temp-point',
+                                pointType: 'Aisle',
                                 position: [mousePosRef.current.x, mousePosRef.current.y, mousePosRef.current.z],
                                 layer: activeLayer
                             }
                         ],
                         type: {
-                            typeName: 'Aisle',
                             aisleType: aisleType,
                             aisleColor: aisleColor,
                             aisleWidth: aisleWidth
@@ -55,12 +55,12 @@ function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
                             tempPoints[0],
                             {
                                 uuid: 'temp-point',
+                                pointType: 'Aisle',
                                 position: [mousePosRef.current.x, mousePosRef.current.y, mousePosRef.current.z],
                                 layer: activeLayer
                             }
                         ],
                         type: {
-                            typeName: 'Aisle',
                             aisleType: aisleType,
                             aisleColor: aisleColor,
                             aisleWidth: aisleWidth,
@@ -75,12 +75,12 @@ function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
                             tempPoints[0],
                             {
                                 uuid: 'temp-point',
+                                pointType: 'Aisle',
                                 position: [mousePosRef.current.x, mousePosRef.current.y, mousePosRef.current.z],
                                 layer: activeLayer
                             }
                         ],
                         type: {
-                            typeName: 'Aisle',
                             aisleType: aisleType,
                             aisleColor: aisleColor,
                             dotRadius: dotRadius,
@@ -96,12 +96,12 @@ function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
                             tempPoints[0],
                             {
                                 uuid: 'temp-point',
+                                pointType: 'Aisle',
                                 position: [mousePosRef.current.x, mousePosRef.current.y, mousePosRef.current.z],
                                 layer: activeLayer
                             }
                         ],
                         type: {
-                            typeName: 'Aisle',
                             aisleType: aisleType,
                             aisleColor: aisleColor,
                             aisleWidth: aisleWidth,

app/src/modules/builder/point/point.tsx

@@ -6,14 +6,16 @@ import { DragControls } from '@react-three/drei';
 import { useAisleStore } from '../../../store/builder/useAisleStore';
 import { useThree } from '@react-three/fiber';
 import { useBuilderStore } from '../../../store/builder/useBuilderStore';
+import { usePointSnapping } from './usePointSnapping';
 
-function Point({ point, userData }: { readonly point: Point, readonly userData: any }) {
+function Point({ point }: { readonly point: Point }) {
     const materialRef = useRef<THREE.ShaderMaterial>(null);
     const { raycaster, camera, pointer } = useThree();
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const [isHovered, setIsHovered] = useState(false);
     const { toolMode } = useToolMode();
     const { setPosition, removePoint } = useAisleStore();
+    const { checkSnapForAisle } = usePointSnapping(point);
     const { hoveredPoint, setHoveredPoint } = useBuilderStore();
     const { deletePointOrLine } = useDeletePointOrLine();
 
@@ -53,9 +55,12 @@ function Point({ point, userData }: { readonly point: Point, readonly userData:
             raycaster.setFromCamera(pointer, camera);
             const intersectionPoint = new THREE.Vector3();
             const position = raycaster.ray.intersectPlane(plane, intersectionPoint);
-            if (userData.pointType === 'Aisle') {
+            if (point.pointType === 'Aisle') {
                 if (position) {
-                    setPosition(point.uuid, [position.x, position.y, position.z]);
+                    const newPosition: [number, number, number] = [position.x, position.y, position.z];
+                    const snappedPosition = checkSnapForAisle(newPosition);
+
+                    setPosition(point.uuid, snappedPosition);
                 }
             }
         }
@@ -113,7 +118,7 @@ function Point({ point, userData }: { readonly point: Point, readonly userData:
                     }
                     setIsHovered(false)
                 }}
-                userData={userData}
+                userData={point}
             >
                 <boxGeometry args={boxScale} />
                 <shaderMaterial

app/src/modules/builder/point/usePointSnapping.tsx

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useAisleStore } from '../../../store/builder/useAisleStore';
+import * as THREE from 'three';
+
+const SNAP_THRESHOLD = 0.25; // Distance threshold for snapping in meters
+
+export const usePointSnapping = (currentPoint: Point | null) => {
+    const { aisles } = useAisleStore();
+    const [snappedPosition, setSnappedPosition] = useState<[number, number, number] | null>(null);
+    const [snappedPointId, setSnappedPointId] = useState<string | null>(null);
+
+    // Get all points from all aisles except the current point
+    const getAllOtherPoints = useCallback(() => {
+        if (!currentPoint) return [];
+
+        return aisles.flatMap(aisle =>
+            aisle.points.filter(point => point.uuid !== currentPoint.uuid)
+        );
+    }, [aisles, currentPoint]);
+
+    // Check if there's a nearby Aisle point to snap to
+    const checkSnapForAisle = useCallback((position: [number, number, number]) => {
+        if (!currentPoint) return position;
+
+        const otherPoints = getAllOtherPoints();
+        const currentVec = new THREE.Vector3(...position);
+
+        for (const point of otherPoints) {
+            const pointVec = new THREE.Vector3(...point.position);
+            const distance = currentVec.distanceTo(pointVec);
+
+            if (distance <= SNAP_THRESHOLD && point.pointType === 'Aisle') {
+                setSnappedPointId(point.uuid);
+                return point.position;
+            }
+        }
+
+        // No snap found
+        setSnappedPointId(null);
+        return position;
+    }, [currentPoint, getAllOtherPoints]);
+
+    // Reset snap state when current point changes
+    useEffect(() => {
+        setSnappedPosition(null);
+        setSnappedPointId(null);
+    }, [currentPoint]);
+
+    return {
+        snappedPosition,
+        snappedPointId,
+        checkSnapForAisle,
+        isSnapped: snappedPointId !== null
+    };
+};

app/src/modules/scene/gizmo/gizmo.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from 'react'
+import { useThree, useFrame } from '@react-three/fiber'
+import { ViewportGizmo } from 'three-viewport-gizmo'
+import { PerspectiveCamera, WebGLRenderer, Scene } from 'three'
+
+type Controls = {
+    enabled: boolean
+    setPosition: (...args: number[]) => void
+    getTarget: (target: any) => void
+    addEventListener: (type: string, listener: (...args: any[]) => void) => void
+}
+
+export const Gizmo = () => {
+    const { camera, gl, scene, controls } = useThree<{
+        camera: PerspectiveCamera
+        gl: WebGLRenderer
+        scene: Scene
+        controls?: Controls
+    }>()
+
+    const gizmoRef = useRef<ViewportGizmo | null>(null)
+
+    useEffect(() => {
+        const gizmo = new ViewportGizmo(camera, gl, {})
+        gizmoRef.current = gizmo
+
+        const resize = () => {
+            const width = window.innerWidth
+            const height = window.innerHeight - 1
+            camera.aspect = width / height
+            camera.updateProjectionMatrix()
+            gl.setSize(width, height)
+            gizmo.update()
+        }
+
+        if (controls) {
+            gizmo.addEventListener('start', () => { controls.enabled = false })
+            gizmo.addEventListener('end', () => { controls.enabled = true })
+            gizmo.addEventListener('change', () => {
+                controls.setPosition(...camera.position.toArray())
+            })
+            controls.addEventListener('update', () => {
+                controls.getTarget(gizmo.target)
+                gizmo.update()
+            })
+        }
+
+        window.addEventListener('resize', resize)
+
+        return () => {
+            window.removeEventListener('resize', resize)
+        }
+    }, [camera, gl, scene, controls])
+
+    useFrame(() => {
+        if (gizmoRef.current) {
+            gl.render(scene, camera)
+            gizmoRef.current.render()
+        }
+    })
+
+    return null
+}

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

@@ -37,7 +37,7 @@ export default function PostProcessing() {
     }, [deletableFloorItem])
 
     useEffect(() => {
-        console.log('selectedAisle: ', selectedAisle);
+        // console.log('selectedAisle: ', selectedAisle);
     }, [selectedAisle])
 
     return (

app/src/types/builderTypes.d.ts

@@ -31,25 +31,27 @@ interface Asset {
 type Assets = Asset[];
 
 
+type PointTypes = 'Aisle' | 'Wall' | 'Floor' | 'Zone';
+
 interface Point {
     uuid: string;
+    pointType: PointTypes;
     position: [number, number, number];
     layer: number;
 }
 
-type AisleTypes = | 'solid-aisle' | 'dashed-aisle' | 'stripped-aisle' | 'dotted-aisle' | 'arrow-aisle' | 'arrows-aisle' | 'arc-aisle' | 'circle-aisle' | 'junction-aisle';
 
-type AisleColors = | 'gray' | 'yellow' | 'green' | 'orange' | 'blue' | 'purple' | 'red' | 'bright green' | 'yellow-black' | 'white-black'
+type AisleTypes = 'solid-aisle' | 'dashed-aisle' | 'stripped-aisle' | 'dotted-aisle' | 'arrow-aisle' | 'arrows-aisle' | 'arc-aisle' | 'circle-aisle' | 'junction-aisle';
+
+type AisleColors = 'gray' | 'yellow' | 'green' | 'orange' | 'blue' | 'purple' | 'red' | 'bright green' | 'yellow-black' | 'white-black'
 
 interface SolidAisle {
-    typeName: 'Aisle';
     aisleType: 'solid-aisle';
     aisleColor: AisleColors;
     aisleWidth: number;
 }
 
 interface DashedAisle {
-    typeName: 'Aisle';
     aisleType: 'dashed-aisle';
     aisleColor: AisleColors;
     aisleWidth: number;
@@ -58,14 +60,12 @@ interface DashedAisle {
 }
 
 interface StrippedAisle {
-    typeName: 'Aisle';
     aisleType: 'stripped-aisle';
     aisleColor: AisleColors;
     aisleWidth: number;
 }
 
 interface DottedAisle {
-    typeName: 'Aisle';
     aisleType: 'dotted-aisle';
     aisleColor: AisleColors;
     dotRadius: number;
@@ -73,14 +73,12 @@ interface DottedAisle {
 }
 
 interface ArrowAisle {
-    typeName: 'Aisle';
     aisleType: 'arrow-aisle';
     aisleColor: AisleColors;
     aisleWidth: number;
 }
 
 interface ArrowsAisle {
-    typeName: 'Aisle';
     aisleType: 'arrows-aisle';
     aisleColor: AisleColors;
     aisleWidth: number;
@@ -89,21 +87,18 @@ interface ArrowsAisle {
 }
 
 interface ArcAisle {
-    typeName: 'Aisle';
     aisleType: 'arc-aisle';
     aisleColor: AisleColors;
     aisleWidth: number;
 }
 
 interface CircleAisle {
-    typeName: 'Aisle';
     aisleType: 'circle-aisle';
     aisleColor: AisleColors;
     aisleWidth: number;
 }
 
 interface JunctionAisle {
-    typeName: 'Aisle';
     aisleType: 'junction-aisle';
     aisleColor: AisleColors;
     aisleWidth: number;