refactor: Add point snapping functionality and enhance aisle management with new Point and Gizmo components
This commit is contained in:
parent
0e0a53bd5a
commit
63bb7c84aa
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
||||
{aisles.map((aisle) =>
|
||||
<AisleInstance aisle={aisle} key={aisle.uuid} />
|
||||
)}
|
||||
|
||||
</group>
|
||||
<group name='Aisles-Group'>
|
||||
{aisles.map((aisle) =>
|
||||
<AisleInstance aisle={aisle} key={aisle.uuid} />
|
||||
)}
|
||||
</group>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
</>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
};
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ export default function PostProcessing() {
|
|||
}, [deletableFloorItem])
|
||||
|
||||
useEffect(() => {
|
||||
console.log('selectedAisle: ', selectedAisle);
|
||||
// console.log('selectedAisle: ', selectedAisle);
|
||||
}, [selectedAisle])
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue