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 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
}
}
`,

74
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 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<Point[]>([]);
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 (
<>
<group >
{tempPoints.map((point) => (
<ReferencePoint key={point.uuid} point={point} />
))}
</group>
{toggleView &&
<>
<group name='Aisle-Reference-Points-Group'>
{tempPoints.map((point) => (
<ReferencePoint key={point.uuid} point={point} />
))}
</group>
<group >
{allPoints.map((point) => (
<Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} />
))}
</group>
<group name='Aisle-Points-Group'>
{allPoints.map((point) => (
<Point key={point.uuid} point={point} userData={{ pointType: 'Aisle' }} />
))}
</group>
<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 (
<group>
<group name='Aisle-Reference-Group'>
{renderAisle()}
</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 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;
}

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 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
}
}
`,

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

@ -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);

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

@ -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,

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

@ -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<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 [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) }}
>
<mesh
key={point.uuid}
uuid={point.uuid}
name='Aisle-Point'
position={new THREE.Vector3(...point.position)}
onClick={() => {
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
}
}
`

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

@ -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<THREE.ShaderMaterial>(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 (
<mesh
position={new THREE.Vector3(...point.position)}
onPointerOver={() => setIsHovered(true)}
onPointerOut={() => setIsHovered(false)}
>
<boxGeometry args={boxScale} />
<shaderMaterial
@ -53,7 +36,7 @@ function ReferencePoint({ point }: { readonly point: Point }) {
`}
fragmentShader={`
varying vec2 vUv;
uniform vec3 uColor;
uniform vec3 uOuterColor;
uniform vec3 uInnerColor;
void main() {
@ -63,7 +46,7 @@ function ReferencePoint({ point }: { readonly point: Point }) {
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
}
}
`}

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

@ -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
}
}
`,

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

@ -7,6 +7,7 @@ interface AisleStore {
addAisle: (aisle: Aisle) => void;
updateAisle: (uuid: string, updated: Partial<Aisle>) => 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: <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);
}),
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<AisleStore>()(
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) => {
const aisle = get().aisles.find(a => a.uuid === uuid);
return aisle?.type as T | undefined;