Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Update color uniform naming across multiple components for consistency

This commit is contained in:
Jerald-Golden-B 2025-05-30 11:34:57 +05:30
parent e2fab37f0f
commit 84d1022432
11 changed files with 128 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/modules/builder/IntialLoad/loadInitialPoint.ts
View File

@ -31,7 +31,7 @@ function loadInitialPoint(
const geometry = new THREE.BoxGeometry(...CONSTANTS.pointConfig.boxScale); const geometry = new THREE.BoxGeometry(...CONSTANTS.pointConfig.boxScale);
const material = new THREE.ShaderMaterial({ const material = new THREE.ShaderMaterial({
uniforms: { 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 uInnerColor: { value: new THREE.Color(CONSTANTS.pointConfig.defaultInnerColor) }, // White color for the inner square
}, },
vertexShader: ` vertexShader: `
@ -44,7 +44,7 @@ function loadInitialPoint(
`, `,
fragmentShader: ` fragmentShader: `
varying vec2 vUv; varying vec2 vUv;
uniform vec3 uColor; uniform vec3 uOuterColor;
uniform vec3 uInnerColor; uniform vec3 uInnerColor;
void main() { void main() {
@ -54,7 +54,7 @@ function loadInitialPoint(
vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) {
gl_FragColor = vec4(uInnerColor, 1.0); // White inner square gl_FragColor = vec4(uInnerColor, 1.0); // White inner square
} else { } else {
gl_FragColor = vec4(uColor, 1.0); // Blue border gl_FragColor = vec4(uOuterColor, 1.0); // Blue border
} }
} }
`, `,

50
app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx
View File

@ -7,6 +7,7 @@ import ReferenceAisle from './referenceAisle';
import { useBuilderStore } from '../../../../store/builder/useBuilderStore'; import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
import ReferencePoint from '../../point/referencePoint'; import ReferencePoint from '../../point/referencePoint';
import Point from '../../point/point'; import Point from '../../point/point';
import { intersect } from '@turf/turf';
function AisleCreator() { function AisleCreator() {
const { scene, camera, raycaster, gl, pointer } = useThree(); const { scene, camera, raycaster, gl, pointer } = useThree();
@ -15,7 +16,7 @@ function AisleCreator() {
const { toolMode } = useToolMode(); const { toolMode } = useToolMode();
const { activeLayer } = useActiveLayer(); const { activeLayer } = useActiveLayer();
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { aisles, addAisle } = useAisleStore(); const { aisles, addAisle, getAislePointById } = useAisleStore();
const [tempPoints, setTempPoints] = useState<Point[]>([]); const [tempPoints, setTempPoints] = useState<Point[]>([]);
const [isCreating, setIsCreating] = useState(false); const [isCreating, setIsCreating] = useState(false);
@ -76,17 +77,28 @@ function AisleCreator() {
raycaster.setFromCamera(pointer, camera); raycaster.setFromCamera(pointer, camera);
const intersectionPoint = new THREE.Vector3(); 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');
if (aisleType === 'solid-aisle') {
const newPoint: Point = { const newPoint: Point = {
uuid: THREE.MathUtils.generateUUID(), uuid: THREE.MathUtils.generateUUID(),
position: [point.x, point.y, point.z], position: [position.x, position.y, position.z],
layer: activeLayer 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') {
if (tempPoints.length === 0) { if (tempPoints.length === 0) {
setTempPoints([newPoint]); setTempPoints([newPoint]);
setIsCreating(true); setIsCreating(true);
@ -105,11 +117,6 @@ function AisleCreator() {
setTempPoints([newPoint]); setTempPoints([newPoint]);
} }
} else if (aisleType === 'dashed-aisle') { } 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) { if (tempPoints.length === 0) {
setTempPoints([newPoint]); setTempPoints([newPoint]);
@ -131,11 +138,6 @@ function AisleCreator() {
setTempPoints([newPoint]); setTempPoints([newPoint]);
} }
} else if (aisleType === 'stripped-aisle') { } 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) { if (tempPoints.length === 0) {
setTempPoints([newPoint]); setTempPoints([newPoint]);
@ -155,11 +157,6 @@ function AisleCreator() {
setTempPoints([newPoint]); setTempPoints([newPoint]);
} }
} else if (aisleType === 'dotted-aisle') { } 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) { if (tempPoints.length === 0) {
setTempPoints([newPoint]); setTempPoints([newPoint]);
@ -182,11 +179,6 @@ function AisleCreator() {
} else if (aisleType === 'arrow-aisle') { } else if (aisleType === 'arrow-aisle') {
console.log('Creating arrow-aisle'); console.log('Creating arrow-aisle');
} else if (aisleType === 'arrows-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) { if (tempPoints.length === 0) {
setTempPoints([newPoint]); setTempPoints([newPoint]);
@ -246,13 +238,15 @@ function AisleCreator() {
return ( return (
<> <>
<group > {toggleView &&
<>
<group name='Aisle-Reference-Points-Group'>
{tempPoints.map((point) => ( {tempPoints.map((point) => (
<ReferencePoint key={point.uuid} point={point} /> <ReferencePoint key={point.uuid} point={point} />
))} ))}
</group> </group>
<group > <group name='Aisle-Points-Group'>
{allPoints.map((point) => ( {allPoints.map((point) => (
<Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} /> <Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} />
))} ))}
@ -260,6 +254,8 @@ function AisleCreator() {
<ReferenceAisle tempPoints={tempPoints} /> <ReferenceAisle tempPoints={tempPoints} />
</> </>
}
</>
); );
} }

2
app/src/modules/builder/aisle/aisleCreator/referenceAisle.tsx
View File

@ -144,7 +144,7 @@ function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
}; };
return ( return (
<group> <group name='Aisle-Reference-Group'>
{renderAisle()} {renderAisle()}
</group> </group>
); );

6
app/src/modules/builder/functions/deletableLineOrPoint.ts
View File

@ -46,11 +46,11 @@ function DeletableLineorPoint(
hoveredDeletablePoint.current = (visibleIntersectPoint as any).object; 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.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); // (hoveredDeletablePoint.current as THREE.Mesh).scale.set(1.5, 1.5, 1.5);
} else if (hoveredDeletablePoint.current) { } else if (hoveredDeletablePoint.current) {
(hoveredDeletablePoint.current as any).material.uniforms.uInnerColor.value.set(CONSTANTS.pointConfig.defaultInnerColor); (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.scale.set(1, 1, 1);
hoveredDeletablePoint.current = null; hoveredDeletablePoint.current = null;
} }
@ -65,7 +65,7 @@ function DeletableLineorPoint(
if (hoveredDeletablePoint.current) { if (hoveredDeletablePoint.current) {
(hoveredDeletablePoint.current as any).material.uniforms.uInnerColor.value.set(CONSTANTS.pointConfig.defaultInnerColor); (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.scale.set(1, 1, 1);
hoveredDeletablePoint.current = null; hoveredDeletablePoint.current = null;
} }

6
app/src/modules/builder/geomentries/points/addPointToScene.ts
View File

@ -17,7 +17,7 @@ function addPointToScene(
const geometry = new THREE.BoxGeometry(...CONSTANTS.pointConfig.boxScale); const geometry = new THREE.BoxGeometry(...CONSTANTS.pointConfig.boxScale);
const material = new THREE.ShaderMaterial({ const material = new THREE.ShaderMaterial({
uniforms: { 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 uInnerColor: { value: new THREE.Color(CONSTANTS.pointConfig.defaultInnerColor) }, // White color for the inner square
}, },
vertexShader: ` vertexShader: `
@ -30,7 +30,7 @@ function addPointToScene(
`, `,
fragmentShader: ` fragmentShader: `
varying vec2 vUv; varying vec2 vUv;
uniform vec3 uColor; uniform vec3 uOuterColor;
uniform vec3 uInnerColor; uniform vec3 uInnerColor;
void main() { void main() {
@ -40,7 +40,7 @@ function addPointToScene(
vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) {
gl_FragColor = vec4(uInnerColor, 1.0); // White inner square gl_FragColor = vec4(uInnerColor, 1.0); // White inner square
} else { } else {
gl_FragColor = vec4(uColor, 1.0); // Blue border gl_FragColor = vec4(uOuterColor, 1.0); // Blue border
} }
} }
`, `,

8
app/src/modules/builder/geomentries/zones/addZonesToScene.ts
View File

@ -13,14 +13,14 @@ const baseMaterial = new THREE.ShaderMaterial({
`, `,
fragmentShader: ` fragmentShader: `
varying vec2 vUv; varying vec2 vUv;
uniform vec3 uColor; uniform vec3 uOuterColor;
void main(){ void main(){
float alpha = 1.0 - vUv.y; float alpha = 1.0 - vUv.y;
gl_FragColor = vec4(uColor, alpha); gl_FragColor = vec4(uOuterColor, alpha);
} }
`, `,
uniforms: { uniforms: {
uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.defaultColor) }, uOuterColor: { value: new THREE.Color(CONSTANTS.zoneConfig.defaultColor) },
}, },
transparent: true, transparent: true,
}); });
@ -39,7 +39,7 @@ export default function addZonesToScene(
const geometry = new THREE.PlaneGeometry(length, 10); const geometry = new THREE.PlaneGeometry(length, 10);
const material = baseMaterial.clone(); 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); const mesh = new THREE.Mesh(geometry, material);

6
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -58,14 +58,14 @@ const ZoneGroup: React.FC = () => {
`, `,
fragmentShader: ` fragmentShader: `
varying vec2 vUv; varying vec2 vUv;
uniform vec3 uColor; uniform vec3 uOuterColor;
void main(){ void main(){
float alpha = 1.0 - vUv.y; float alpha = 1.0 - vUv.y;
gl_FragColor = vec4(uColor, alpha); gl_FragColor = vec4(uOuterColor, alpha);
} }
`, `,
uniforms: { uniforms: {
uColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) }, uOuterColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) },
}, },
transparent: true, transparent: true,
depthWrite: false, depthWrite: false,

53
app/src/modules/builder/point/point.tsx
View File

@ -1,7 +1,7 @@
import * as THREE from 'three'; import * as THREE from 'three';
import * as Constants from '../../../types/world/worldConstants'; import * as Constants from '../../../types/world/worldConstants';
import { useRef, useState, useEffect, useMemo } from 'react'; 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 { DragControls } from '@react-three/drei';
import { useAisleStore } from '../../../store/builder/useAisleStore'; import { useAisleStore } from '../../../store/builder/useAisleStore';
import { useThree } from '@react-three/fiber'; 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 }) { function Point({ point, userData }: { readonly point: Point, readonly userData: any }) {
const materialRef = useRef<THREE.ShaderMaterial>(null); const materialRef = useRef<THREE.ShaderMaterial>(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 plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const { toolMode } = useToolMode(); const { toolMode } = useToolMode();
const { setPosition } = useAisleStore(); const { setPosition, removePoint } = useAisleStore();
const { hoveredPoint, setHoveredPoint } = useBuilderStore(); const { hoveredPoint, setHoveredPoint } = useBuilderStore();
const { deletePointOrLine } = useDeletePointOrLine();
const boxScale: [number, number, number] = Constants.pointConfig.boxScale; const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
const defaultInnerColor = Constants.pointConfig.defaultInnerColor; const defaultInnerColor = Constants.pointConfig.defaultInnerColor;
const borderColor = Constants.pointConfig.aisleOuterColor; const defaultOuterColor = Constants.pointConfig.aisleOuterColor;
const defaultDeleteColor = Constants.pointConfig.deleteColor;
useEffect(() => { useEffect(() => {
if (materialRef.current && toolMode === 'move') { if (materialRef.current && (toolMode === 'move' || deletePointOrLine)) {
materialRef.current.uniforms.uInnerColor.value.set( let innerColor;
isHovered ? borderColor : defaultInnerColor 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; materialRef.current.uniformsNeedUpdate = true;
} else if (materialRef.current && toolMode !== 'move') { } else if (materialRef.current && toolMode !== 'move') {
materialRef.current.uniforms.uInnerColor.value.set(defaultInnerColor); materialRef.current.uniforms.uInnerColor.value.set(defaultInnerColor);
materialRef.current.uniforms.uOuterColor.value.set(defaultOuterColor);
materialRef.current.uniformsNeedUpdate = true; materialRef.current.uniformsNeedUpdate = true;
} }
}, [isHovered, borderColor, defaultInnerColor, toolMode]); }, [isHovered, defaultInnerColor, defaultOuterColor, toolMode, deletePointOrLine, defaultDeleteColor]);
const uniforms = useMemo(() => ({ const uniforms = useMemo(() => ({
uColor: { value: new THREE.Color(borderColor) }, uOuterColor: { value: new THREE.Color(defaultOuterColor) },
uInnerColor: { value: new THREE.Color(defaultInnerColor) }, uInnerColor: { value: new THREE.Color(defaultInnerColor) },
}), [borderColor, defaultInnerColor]); }), [defaultInnerColor, defaultInnerColor]);
const handleDrag = (point: Point) => { const handleDrag = (point: Point) => {
if (toolMode === 'move' && isHovered) { if (toolMode === 'move' && isHovered) {
@ -51,9 +62,20 @@ function Point({ point, userData }: { readonly point: Point, readonly userData:
} }
const handleDragEnd = (point: Point) => { const handleDragEnd = (point: Point) => {
if (deletePointOrLine) return;
console.log('point: ', point); 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(() => { useEffect(() => {
if (hoveredPoint && hoveredPoint.uuid !== point.uuid) { if (hoveredPoint && hoveredPoint.uuid !== point.uuid) {
setIsHovered(false); setIsHovered(false);
@ -72,8 +94,13 @@ function Point({ point, userData }: { readonly point: Point, readonly userData:
onDragEnd={() => { handleDragEnd(point) }} onDragEnd={() => { handleDragEnd(point) }}
> >
<mesh <mesh
key={point.uuid}
uuid={point.uuid} uuid={point.uuid}
name='Aisle-Point'
position={new THREE.Vector3(...point.position)} position={new THREE.Vector3(...point.position)}
onClick={() => {
handlePointClick(point);
}}
onPointerOver={() => { onPointerOver={() => {
if (!hoveredPoint) { if (!hoveredPoint) {
setHoveredPoint(point); setHoveredPoint(point);
@ -105,7 +132,7 @@ function Point({ point, userData }: { readonly point: Point, readonly userData:
fragmentShader={ fragmentShader={
` `
varying vec2 vUv; varying vec2 vUv;
uniform vec3 uColor; uniform vec3 uOuterColor;
uniform vec3 uInnerColor; uniform vec3 uInnerColor;
void main() { 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) { 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 gl_FragColor = vec4(uInnerColor, 1.0); // Inner square
} else { } else {
gl_FragColor = vec4(uColor, 1.0); // Border gl_FragColor = vec4(uOuterColor, 1.0); // Border
} }
} }
` `

29
app/src/modules/builder/point/referencePoint.tsx
View File

@ -1,33 +1,18 @@
import * as THREE from 'three'; import * as THREE from 'three';
import * as Constants from '../../../types/world/worldConstants'; import * as Constants from '../../../types/world/worldConstants';
import { useRef, useState, useEffect, useMemo } from 'react'; import { useRef, useMemo } from 'react';
import { useToolMode } from '../../../store/builder/store';
function ReferencePoint({ point }: { readonly point: Point }) { function ReferencePoint({ point }: { readonly point: Point }) {
const materialRef = useRef<THREE.ShaderMaterial>(null); const materialRef = useRef<THREE.ShaderMaterial>(null);
const [isHovered, setIsHovered] = useState(false);
const { toolMode } = useToolMode();
const boxScale: [number, number, number] = Constants.pointConfig.boxScale; const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
const defaultInnerColor = Constants.pointConfig.defaultInnerColor; const defaultInnerColor = Constants.pointConfig.defaultInnerColor;
const borderColor = Constants.pointConfig.aisleOuterColor; const defaultOuterColor = 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 uniforms = useMemo(() => ({ const uniforms = useMemo(() => ({
uColor: { value: new THREE.Color(borderColor) }, uOuterColor: { value: new THREE.Color(defaultOuterColor) },
uInnerColor: { value: new THREE.Color(defaultInnerColor) }, uInnerColor: { value: new THREE.Color(defaultInnerColor) },
}), [borderColor, defaultInnerColor]); }), [defaultOuterColor, defaultInnerColor]);
if (!point) { if (!point) {
return null; return null;
@ -36,8 +21,6 @@ function ReferencePoint({ point }: { readonly point: Point }) {
return ( return (
<mesh <mesh
position={new THREE.Vector3(...point.position)} position={new THREE.Vector3(...point.position)}
onPointerOver={() => setIsHovered(true)}
onPointerOut={() => setIsHovered(false)}
> >
<boxGeometry args={boxScale} /> <boxGeometry args={boxScale} />
<shaderMaterial <shaderMaterial
@ -53,7 +36,7 @@ function ReferencePoint({ point }: { readonly point: Point }) {
`} `}
fragmentShader={` fragmentShader={`
varying vec2 vUv; varying vec2 vUv;
uniform vec3 uColor; uniform vec3 uOuterColor;
uniform vec3 uInnerColor; uniform vec3 uInnerColor;
void main() { void main() {
@ -63,7 +46,7 @@ function ReferencePoint({ point }: { readonly point: Point }) {
vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) {
gl_FragColor = vec4(uInnerColor, 1.0); // Inner square gl_FragColor = vec4(uInnerColor, 1.0); // Inner square
} else { } else {
gl_FragColor = vec4(uColor, 1.0); // Border gl_FragColor = vec4(uOuterColor, 1.0); // Border
} }
} }
`} `}

6
app/src/modules/collaboration/socket/socketResponses.dev.tsx
View File

@ -688,7 +688,7 @@ export default function SocketResponses({
); );
const material = new THREE.ShaderMaterial({ const material = new THREE.ShaderMaterial({
uniforms: { uniforms: {
uColor: { value: new THREE.Color(pointColour) }, // Blue color for the border uOuterColor: { value: new THREE.Color(pointColour) }, // Blue color for the border
uInnerColor: { uInnerColor: {
value: new THREE.Color(CONSTANTS.pointConfig.defaultInnerColor), value: new THREE.Color(CONSTANTS.pointConfig.defaultInnerColor),
}, // White color for the inner square }, // White color for the inner square
@ -703,7 +703,7 @@ export default function SocketResponses({
`, `,
fragmentShader: ` fragmentShader: `
varying vec2 vUv; varying vec2 vUv;
uniform vec3 uColor; uniform vec3 uOuterColor;
uniform vec3 uInnerColor; uniform vec3 uInnerColor;
void main() { void main() {
@ -713,7 +713,7 @@ export default function SocketResponses({
vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) { vUv.y > borderThickness && vUv.y < 1.0 - borderThickness) {
gl_FragColor = vec4(uInnerColor, 1.0); // White inner square gl_FragColor = vec4(uInnerColor, 1.0); // White inner square
} else { } else {
gl_FragColor = vec4(uColor, 1.0); // Blue border gl_FragColor = vec4(uOuterColor, 1.0); // Blue border
} }
} }
`, `,

27
app/src/store/builder/useAisleStore.ts
View File

@ -7,6 +7,7 @@ interface AisleStore {
addAisle: (aisle: Aisle) => void; addAisle: (aisle: Aisle) => void;
updateAisle: (uuid: string, updated: Partial<Aisle>) => void; updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
removeAisle: (uuid: string) => void; removeAisle: (uuid: string) => void;
removePoint: (uuid: string) => Aisles;
setPosition: (pointUuid: string, position: [number, number, number]) => void; setPosition: (pointUuid: string, position: [number, number, number]) => void;
setLayer: (pointUuid: string, layer: number) => void; setLayer: (pointUuid: string, layer: number) => void;
setColor: (aisleUuid: string, color: AisleColors) => void; setColor: (aisleUuid: string, color: AisleColors) => void;
@ -32,6 +33,7 @@ interface AisleStore {
setJunctionAisleWidth: (aisleUuid: string, width: number) => void; setJunctionAisleWidth: (aisleUuid: string, width: number) => void;
getAisleById: (uuid: string) => Aisle | undefined; getAisleById: (uuid: string) => Aisle | undefined;
getAislePointById: (uuid: string) => Point | undefined;
getAisleType: <T extends AisleType>(uuid: string) => T | undefined; getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
} }
@ -58,6 +60,21 @@ export const useAisleStore = create<AisleStore>()(
state.aisles = state.aisles.filter((a) => a.uuid !== uuid); 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) => { setPosition: (pointUuid, position) => set((state) => {
for (const aisle of state.aisles) { for (const aisle of state.aisles) {
const point = aisle.points.find(p => p.uuid === pointUuid); const point = aisle.points.find(p => p.uuid === pointUuid);
@ -156,6 +173,16 @@ export const useAisleStore = create<AisleStore>()(
return get().aisles.find((a) => a.uuid === uuid); 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: <T extends AisleType>(uuid: string) => { getAisleType: <T extends AisleType>(uuid: string) => {
const aisle = get().aisles.find(a => a.uuid === uuid); const aisle = get().aisles.find(a => a.uuid === uuid);
return aisle?.type as T | undefined; return aisle?.type as T | undefined;