From 63bb7c84aae49058be3e7b662379d09bfa46d311 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Fri, 30 May 2025 14:33:55 +0530 Subject: [PATCH] refactor: Add point snapping functionality and enhance aisle management with new Point and Gizmo components --- app/package-lock.json | 76 ++++++++++++++----- app/package.json | 1 + .../aisle/Instances/aisleInstances.tsx | 42 ++++++++-- .../aisle/aisleCreator/aisleCreator.tsx | 34 +-------- .../aisle/aisleCreator/referenceAisle.tsx | 8 +- app/src/modules/builder/point/point.tsx | 13 +++- .../builder/point/usePointSnapping.tsx | 55 ++++++++++++++ app/src/modules/scene/gizmo/gizmo.tsx | 63 +++++++++++++++ .../scene/postProcessing/postProcessing.tsx | 2 +- app/src/types/builderTypes.d.ts | 17 ++--- 10 files changed, 234 insertions(+), 77 deletions(-) create mode 100644 app/src/modules/builder/point/usePointSnapping.tsx create mode 100644 app/src/modules/scene/gizmo/gizmo.tsx diff --git a/app/package-lock.json b/app/package-lock.json index 3d5aea4..f95a0c3 100644 --- a/app/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz", - "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==", + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "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" } diff --git a/app/package.json b/app/package.json index 66158c0..18a8228 100644 --- a/app/package.json +++ b/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" diff --git a/app/src/modules/builder/aisle/Instances/aisleInstances.tsx b/app/src/modules/builder/aisle/Instances/aisleInstances.tsx index 6f34726..1d26157 100644 --- a/app/src/modules/builder/aisle/Instances/aisleInstances.tsx +++ b/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(); + + 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 && + + {allPoints.map((point) => ( + + ))} + + } - - - {aisles.map((aisle) => - - )} - - + + {aisles.map((aisle) => + + )} + + ) } diff --git a/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx b/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx index 9325855..baaf9df 100644 --- a/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx +++ b/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([]); const [isCreating, setIsCreating] = useState(false); @@ -29,24 +27,6 @@ function AisleCreator() { // } // }, [aisleType]); - const allPoints = useMemo(() => { - const points: Point[] = []; - const seenUuids = new Set(); - - // 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() { ))} - - {allPoints.map((point) => ( - - ))} - - } diff --git a/app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx b/app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx index a6d2764..bf02755 100644 --- a/app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx +++ b/app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx @@ -37,12 +37,12 @@ function ReferenceAisle({ tempPoints }: Readonly) { 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) { 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) { 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) { 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, diff --git a/app/src/modules/builder/point/point.tsx b/app/src/modules/builder/point/point.tsx index 7a48432..c61a3db 100644 --- a/app/src/modules/builder/point/point.tsx +++ b/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(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} > { + const { aisles } = useAisleStore(); + const [snappedPosition, setSnappedPosition] = useState<[number, number, number] | null>(null); + const [snappedPointId, setSnappedPointId] = useState(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 + }; +}; \ No newline at end of file diff --git a/app/src/modules/scene/gizmo/gizmo.tsx b/app/src/modules/scene/gizmo/gizmo.tsx new file mode 100644 index 0000000..2a590e2 --- /dev/null +++ b/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(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 +} \ No newline at end of file diff --git a/app/src/modules/scene/postProcessing/postProcessing.tsx b/app/src/modules/scene/postProcessing/postProcessing.tsx index e1c69f1..276f0bf 100644 --- a/app/src/modules/scene/postProcessing/postProcessing.tsx +++ b/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 ( diff --git a/app/src/types/builderTypes.d.ts b/app/src/types/builderTypes.d.ts index 22d4f7e..b9f7616 100644 --- a/app/src/types/builderTypes.d.ts +++ b/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;