diff --git a/app/src/modules/builder/IntialLoad/loadInitialPoint.ts b/app/src/modules/builder/IntialLoad/loadInitialPoint.ts index 7dfdf1d..91db577 100644 --- a/app/src/modules/builder/IntialLoad/loadInitialPoint.ts +++ b/app/src/modules/builder/IntialLoad/loadInitialPoint.ts @@ -31,7 +31,7 @@ function loadInitialPoint( const geometry = new THREE.BoxGeometry(...CONSTANTS.pointConfig.boxScale); const material = new THREE.ShaderMaterial({ uniforms: { - uColor: { value: new THREE.Color(colour) }, // Blue color for the border + uOuterColor: { value: new THREE.Color(colour) }, // Blue color for the border uInnerColor: { value: new THREE.Color(CONSTANTS.pointConfig.defaultInnerColor) }, // White color for the inner square }, vertexShader: ` @@ -44,7 +44,7 @@ function loadInitialPoint( `, fragmentShader: ` varying vec2 vUv; - uniform vec3 uColor; + uniform vec3 uOuterColor; uniform vec3 uInnerColor; void main() { @@ -54,7 +54,7 @@ function loadInitialPoint( vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { gl_FragColor = vec4(uInnerColor, 1.0); // White inner square } else { - gl_FragColor = vec4(uColor, 1.0); // Blue border + gl_FragColor = vec4(uOuterColor, 1.0); // Blue border } } `, diff --git a/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx b/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx index f8598fc..9325855 100644 --- a/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx +++ b/app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx @@ -7,6 +7,7 @@ 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(); @@ -15,7 +16,7 @@ function AisleCreator() { const { toolMode } = useToolMode(); const { activeLayer } = useActiveLayer(); const { socket } = useSocketStore(); - const { aisles, addAisle } = useAisleStore(); + const { aisles, addAisle, getAislePointById } = useAisleStore(); const [tempPoints, setTempPoints] = useState([]); const [isCreating, setIsCreating] = useState(false); @@ -76,16 +77,27 @@ function AisleCreator() { raycaster.setFromCamera(pointer, camera); const intersectionPoint = new THREE.Vector3(); - const point = raycaster.ray.intersectPlane(plane, intersectionPoint); + const position = raycaster.ray.intersectPlane(plane, intersectionPoint); + if (!position) return; - if (!point) return; + const intersects = raycaster.intersectObjects(scene.children).find((intersect) => intersect.object.name === 'Aisle-Point'); + + const newPoint: Point = { + uuid: THREE.MathUtils.generateUUID(), + position: [position.x, position.y, position.z], + layer: activeLayer + }; + + if (intersects) { + const point = getAislePointById(intersects.object.uuid); + if (point) { + newPoint.uuid = point.uuid; + newPoint.position = point.position; + newPoint.layer = point.layer; + } + } if (aisleType === 'solid-aisle') { - const newPoint: Point = { - uuid: THREE.MathUtils.generateUUID(), - position: [point.x, point.y, point.z], - layer: activeLayer - }; if (tempPoints.length === 0) { setTempPoints([newPoint]); @@ -105,11 +117,6 @@ function AisleCreator() { setTempPoints([newPoint]); } } else if (aisleType === 'dashed-aisle') { - const newPoint: Point = { - uuid: THREE.MathUtils.generateUUID(), - position: [point.x, point.y, point.z], - layer: activeLayer - }; if (tempPoints.length === 0) { setTempPoints([newPoint]); @@ -131,11 +138,6 @@ function AisleCreator() { setTempPoints([newPoint]); } } else if (aisleType === 'stripped-aisle') { - const newPoint: Point = { - uuid: THREE.MathUtils.generateUUID(), - position: [point.x, point.y, point.z], - layer: activeLayer - }; if (tempPoints.length === 0) { setTempPoints([newPoint]); @@ -155,11 +157,6 @@ function AisleCreator() { setTempPoints([newPoint]); } } else if (aisleType === 'dotted-aisle') { - const newPoint: Point = { - uuid: THREE.MathUtils.generateUUID(), - position: [point.x, point.y, point.z], - layer: activeLayer - }; if (tempPoints.length === 0) { setTempPoints([newPoint]); @@ -182,11 +179,6 @@ function AisleCreator() { } else if (aisleType === 'arrow-aisle') { console.log('Creating arrow-aisle'); } else if (aisleType === 'arrows-aisle') { - const newPoint: Point = { - uuid: THREE.MathUtils.generateUUID(), - position: [point.x, point.y, point.z], - layer: activeLayer - }; if (tempPoints.length === 0) { setTempPoints([newPoint]); @@ -246,19 +238,23 @@ function AisleCreator() { return ( <> - - {tempPoints.map((point) => ( - - ))} - + {toggleView && + <> + + {tempPoints.map((point) => ( + + ))} + - - {allPoints.map((point) => ( - - ))} - + + {allPoints.map((point) => ( + + ))} + - + + + } ); } diff --git a/app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx b/app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx index d17a2eb..a6d2764 100644 --- a/app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx +++ b/app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx @@ -144,7 +144,7 @@ function ReferenceAisle({ tempPoints }: Readonly) { }; return ( - + {renderAisle()} ); diff --git a/app/src/modules/builder/functions/deletableLineOrPoint.ts b/app/src/modules/builder/functions/deletableLineOrPoint.ts index 2690bf7..cbca682 100644 --- a/app/src/modules/builder/functions/deletableLineOrPoint.ts +++ b/app/src/modules/builder/functions/deletableLineOrPoint.ts @@ -46,11 +46,11 @@ function DeletableLineorPoint( hoveredDeletablePoint.current = (visibleIntersectPoint as any).object; (hoveredDeletablePoint.current as any).material.uniforms.uInnerColor.value.set(new THREE.Color("red")); - (hoveredDeletablePoint.current as any).material.uniforms.uColor.value.set(new THREE.Color("red")); + (hoveredDeletablePoint.current as any).material.uniforms.uOuterColor.value.set(new THREE.Color("red")); // (hoveredDeletablePoint.current as THREE.Mesh).scale.set(1.5, 1.5, 1.5); } else if (hoveredDeletablePoint.current) { (hoveredDeletablePoint.current as any).material.uniforms.uInnerColor.value.set(CONSTANTS.pointConfig.defaultInnerColor); - (hoveredDeletablePoint.current as any).material.uniforms.uColor.value.set((hoveredDeletablePoint.current as any).userData.color); + (hoveredDeletablePoint.current as any).material.uniforms.uOuterColor.value.set((hoveredDeletablePoint.current as any).userData.color); // hoveredDeletablePoint.current.scale.set(1, 1, 1); hoveredDeletablePoint.current = null; } @@ -65,7 +65,7 @@ function DeletableLineorPoint( if (hoveredDeletablePoint.current) { (hoveredDeletablePoint.current as any).material.uniforms.uInnerColor.value.set(CONSTANTS.pointConfig.defaultInnerColor); - (hoveredDeletablePoint.current as any).material.uniforms.uColor.value.set((hoveredDeletablePoint.current as any).userData.color); + (hoveredDeletablePoint.current as any).material.uniforms.uOuterColor.value.set((hoveredDeletablePoint.current as any).userData.color); // hoveredDeletablePoint.current.scale.set(1, 1, 1); hoveredDeletablePoint.current = null; } diff --git a/app/src/modules/builder/geomentries/points/addPointToScene.ts b/app/src/modules/builder/geomentries/points/addPointToScene.ts index 922a6bb..b182128 100644 --- a/app/src/modules/builder/geomentries/points/addPointToScene.ts +++ b/app/src/modules/builder/geomentries/points/addPointToScene.ts @@ -17,7 +17,7 @@ function addPointToScene( const geometry = new THREE.BoxGeometry(...CONSTANTS.pointConfig.boxScale); const material = new THREE.ShaderMaterial({ uniforms: { - uColor: { value: new THREE.Color(colour) }, // Blue color for the border + uOuterColor: { value: new THREE.Color(colour) }, // Blue color for the border uInnerColor: { value: new THREE.Color(CONSTANTS.pointConfig.defaultInnerColor) }, // White color for the inner square }, vertexShader: ` @@ -30,7 +30,7 @@ function addPointToScene( `, fragmentShader: ` varying vec2 vUv; - uniform vec3 uColor; + uniform vec3 uOuterColor; uniform vec3 uInnerColor; void main() { @@ -40,7 +40,7 @@ function addPointToScene( vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { gl_FragColor = vec4(uInnerColor, 1.0); // White inner square } else { - gl_FragColor = vec4(uColor, 1.0); // Blue border + gl_FragColor = vec4(uOuterColor, 1.0); // Blue border } } `, diff --git a/app/src/modules/builder/geomentries/zones/addZonesToScene.ts b/app/src/modules/builder/geomentries/zones/addZonesToScene.ts index 6cfc22d..2832c7a 100644 --- a/app/src/modules/builder/geomentries/zones/addZonesToScene.ts +++ b/app/src/modules/builder/geomentries/zones/addZonesToScene.ts @@ -13,14 +13,14 @@ const baseMaterial = new THREE.ShaderMaterial({ `, fragmentShader: ` varying vec2 vUv; - uniform vec3 uColor; + uniform vec3 uOuterColor; void main(){ float alpha = 1.0 - vUv.y; - gl_FragColor = vec4(uColor, alpha); + gl_FragColor = vec4(uOuterColor, alpha); } `, uniforms: { - uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.defaultColor) }, + uOuterColor: { value: new THREE.Color(CONSTANTS.zoneConfig.defaultColor) }, }, transparent: true, }); @@ -39,7 +39,7 @@ export default function addZonesToScene( const geometry = new THREE.PlaneGeometry(length, 10); const material = baseMaterial.clone(); - material.uniforms.uColor.value.set(color.r, color.g, color.b); + material.uniforms.uOuterColor.value.set(color.r, color.g, color.b); const mesh = new THREE.Mesh(geometry, material); diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index 985c2c8..a18e265 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -58,14 +58,14 @@ const ZoneGroup: React.FC = () => { `, fragmentShader: ` varying vec2 vUv; - uniform vec3 uColor; + uniform vec3 uOuterColor; void main(){ float alpha = 1.0 - vUv.y; - gl_FragColor = vec4(uColor, alpha); + gl_FragColor = vec4(uOuterColor, alpha); } `, uniforms: { - uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) }, + uOuterColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) }, }, transparent: true, depthWrite: false, diff --git a/app/src/modules/builder/point/point.tsx b/app/src/modules/builder/point/point.tsx index 7636e16..7a48432 100644 --- a/app/src/modules/builder/point/point.tsx +++ b/app/src/modules/builder/point/point.tsx @@ -1,7 +1,7 @@ import * as THREE from 'three'; import * as Constants from '../../../types/world/worldConstants'; import { useRef, useState, useEffect, useMemo } from 'react'; -import { useToolMode } from '../../../store/builder/store'; +import { useDeletePointOrLine, useToolMode } from '../../../store/builder/store'; import { DragControls } from '@react-three/drei'; import { useAisleStore } from '../../../store/builder/useAisleStore'; import { useThree } from '@react-three/fiber'; @@ -9,33 +9,44 @@ import { useBuilderStore } from '../../../store/builder/useBuilderStore'; function Point({ point, userData }: { readonly point: Point, readonly userData: any }) { const materialRef = useRef(null); - const { raycaster, camera, scene, pointer } = useThree(); + 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 } = useAisleStore(); + const { setPosition, removePoint } = useAisleStore(); const { hoveredPoint, setHoveredPoint } = useBuilderStore(); + const { deletePointOrLine } = useDeletePointOrLine(); const boxScale: [number, number, number] = Constants.pointConfig.boxScale; const defaultInnerColor = Constants.pointConfig.defaultInnerColor; - const borderColor = Constants.pointConfig.aisleOuterColor; + const defaultOuterColor = Constants.pointConfig.aisleOuterColor; + const defaultDeleteColor = Constants.pointConfig.deleteColor; useEffect(() => { - if (materialRef.current && toolMode === 'move') { - materialRef.current.uniforms.uInnerColor.value.set( - isHovered ? borderColor : defaultInnerColor - ); + if (materialRef.current && (toolMode === 'move' || deletePointOrLine)) { + let innerColor; + let outerColor; + if (isHovered) { + innerColor = deletePointOrLine ? defaultDeleteColor : defaultOuterColor; + outerColor = deletePointOrLine ? defaultDeleteColor : defaultOuterColor; + } else { + innerColor = defaultInnerColor; + outerColor = defaultOuterColor; + } + materialRef.current.uniforms.uInnerColor.value.set(innerColor); + materialRef.current.uniforms.uOuterColor.value.set(outerColor); materialRef.current.uniformsNeedUpdate = true; } else if (materialRef.current && toolMode !== 'move') { materialRef.current.uniforms.uInnerColor.value.set(defaultInnerColor); + materialRef.current.uniforms.uOuterColor.value.set(defaultOuterColor); materialRef.current.uniformsNeedUpdate = true; } - }, [isHovered, borderColor, defaultInnerColor, toolMode]); + }, [isHovered, defaultInnerColor, defaultOuterColor, toolMode, deletePointOrLine, defaultDeleteColor]); const uniforms = useMemo(() => ({ - uColor: { value: new THREE.Color(borderColor) }, + uOuterColor: { value: new THREE.Color(defaultOuterColor) }, uInnerColor: { value: new THREE.Color(defaultInnerColor) }, - }), [borderColor, defaultInnerColor]); + }), [defaultInnerColor, defaultInnerColor]); const handleDrag = (point: Point) => { if (toolMode === 'move' && isHovered) { @@ -51,9 +62,20 @@ function Point({ point, userData }: { readonly point: Point, readonly userData: } const handleDragEnd = (point: Point) => { + if (deletePointOrLine) return; console.log('point: ', point); } + const handlePointClick = (point: Point) => { + if (deletePointOrLine) { + const removedAisles = removePoint(point.uuid); + if (removedAisles.length > 0) { + setHoveredPoint(null); + console.log(removedAisles); + } + } + } + useEffect(() => { if (hoveredPoint && hoveredPoint.uuid !== point.uuid) { setIsHovered(false); @@ -72,8 +94,13 @@ function Point({ point, userData }: { readonly point: Point, readonly userData: onDragEnd={() => { handleDragEnd(point) }} > { + handlePointClick(point); + }} onPointerOver={() => { if (!hoveredPoint) { setHoveredPoint(point); @@ -105,7 +132,7 @@ function Point({ point, userData }: { readonly point: Point, readonly userData: fragmentShader={ ` varying vec2 vUv; - uniform vec3 uColor; + uniform vec3 uOuterColor; uniform vec3 uInnerColor; void main() { @@ -114,7 +141,7 @@ function Point({ point, userData }: { readonly point: Point, readonly userData: if (vUv.x > borderThickness && vUv.x < 1.0 - borderThickness && vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { gl_FragColor = vec4(uInnerColor, 1.0); // Inner square } else { - gl_FragColor = vec4(uColor, 1.0); // Border + gl_FragColor = vec4(uOuterColor, 1.0); // Border } } ` diff --git a/app/src/modules/builder/point/referencePoint.tsx b/app/src/modules/builder/point/referencePoint.tsx index 88ea652..ac1666c 100644 --- a/app/src/modules/builder/point/referencePoint.tsx +++ b/app/src/modules/builder/point/referencePoint.tsx @@ -1,33 +1,18 @@ import * as THREE from 'three'; import * as Constants from '../../../types/world/worldConstants'; -import { useRef, useState, useEffect, useMemo } from 'react'; -import { useToolMode } from '../../../store/builder/store'; +import { useRef, useMemo } from 'react'; function ReferencePoint({ point }: { readonly point: Point }) { const materialRef = useRef(null); - const [isHovered, setIsHovered] = useState(false); - const { toolMode } = useToolMode(); const boxScale: [number, number, number] = Constants.pointConfig.boxScale; const defaultInnerColor = Constants.pointConfig.defaultInnerColor; - const borderColor = Constants.pointConfig.aisleOuterColor; - - useEffect(() => { - if (materialRef.current && toolMode === 'move') { - materialRef.current.uniforms.uInnerColor.value.set( - isHovered ? borderColor : defaultInnerColor - ); - materialRef.current.uniformsNeedUpdate = true; - } else if (materialRef.current && toolMode !== 'move') { - materialRef.current.uniforms.uInnerColor.value.set(defaultInnerColor); - materialRef.current.uniformsNeedUpdate = true; - } - }, [isHovered, borderColor, defaultInnerColor, toolMode]); + const defaultOuterColor = Constants.pointConfig.aisleOuterColor; const uniforms = useMemo(() => ({ - uColor: { value: new THREE.Color(borderColor) }, + uOuterColor: { value: new THREE.Color(defaultOuterColor) }, uInnerColor: { value: new THREE.Color(defaultInnerColor) }, - }), [borderColor, defaultInnerColor]); + }), [defaultOuterColor, defaultInnerColor]); if (!point) { return null; @@ -36,8 +21,6 @@ function ReferencePoint({ point }: { readonly point: Point }) { return ( setIsHovered(true)} - onPointerOut={() => setIsHovered(false)} > borderThickness && vUv.y < 1.0 - borderThickness) { gl_FragColor = vec4(uInnerColor, 1.0); // Inner square } else { - gl_FragColor = vec4(uColor, 1.0); // Border + gl_FragColor = vec4(uOuterColor, 1.0); // Border } } `} diff --git a/app/src/modules/collaboration/socket/socketResponses.dev.tsx b/app/src/modules/collaboration/socket/socketResponses.dev.tsx index b36aa34..2238178 100644 --- a/app/src/modules/collaboration/socket/socketResponses.dev.tsx +++ b/app/src/modules/collaboration/socket/socketResponses.dev.tsx @@ -688,7 +688,7 @@ export default function SocketResponses({ ); const material = new THREE.ShaderMaterial({ uniforms: { - uColor: { value: new THREE.Color(pointColour) }, // Blue color for the border + uOuterColor: { value: new THREE.Color(pointColour) }, // Blue color for the border uInnerColor: { value: new THREE.Color(CONSTANTS.pointConfig.defaultInnerColor), }, // White color for the inner square @@ -703,7 +703,7 @@ export default function SocketResponses({ `, fragmentShader: ` varying vec2 vUv; - uniform vec3 uColor; + uniform vec3 uOuterColor; uniform vec3 uInnerColor; void main() { @@ -713,7 +713,7 @@ export default function SocketResponses({ vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { gl_FragColor = vec4(uInnerColor, 1.0); // White inner square } else { - gl_FragColor = vec4(uColor, 1.0); // Blue border + gl_FragColor = vec4(uOuterColor, 1.0); // Blue border } } `, diff --git a/app/src/store/builder/useAisleStore.ts b/app/src/store/builder/useAisleStore.ts index e93b2c2..2bb17af 100644 --- a/app/src/store/builder/useAisleStore.ts +++ b/app/src/store/builder/useAisleStore.ts @@ -7,6 +7,7 @@ interface AisleStore { addAisle: (aisle: Aisle) => void; updateAisle: (uuid: string, updated: Partial) => void; removeAisle: (uuid: string) => void; + removePoint: (uuid: string) => Aisles; setPosition: (pointUuid: string, position: [number, number, number]) => void; setLayer: (pointUuid: string, layer: number) => void; setColor: (aisleUuid: string, color: AisleColors) => void; @@ -32,6 +33,7 @@ interface AisleStore { setJunctionAisleWidth: (aisleUuid: string, width: number) => void; getAisleById: (uuid: string) => Aisle | undefined; + getAislePointById: (uuid: string) => Point | undefined; getAisleType: (uuid: string) => T | undefined; } @@ -58,6 +60,21 @@ export const useAisleStore = create()( state.aisles = state.aisles.filter((a) => a.uuid !== uuid); }), + removePoint: (uuid) => { + const removedAisles: Aisle[] = []; + set((state) => { + state.aisles = state.aisles.filter((aisle) => { + const hasPoint = aisle.points.some((point) => point.uuid === uuid); + if (hasPoint) { + removedAisles.push(JSON.parse(JSON.stringify(aisle))); + return false; + } + return true; + }); + }); + return removedAisles; + }, + setPosition: (pointUuid, position) => set((state) => { for (const aisle of state.aisles) { const point = aisle.points.find(p => p.uuid === pointUuid); @@ -156,6 +173,16 @@ export const useAisleStore = create()( return get().aisles.find((a) => a.uuid === uuid); }, + getAislePointById: (uuid) => { + for (const aisle of get().aisles) { + const point = aisle.points.find(p => p.uuid === uuid); + if (point) { + return point; + } + } + return undefined; + }, + getAisleType: (uuid: string) => { const aisle = get().aisles.find(a => a.uuid === uuid); return aisle?.type as T | undefined;