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

refactor: Enhance Point component with drag functionality and update state management in aisle store

This commit is contained in:
Jerald-Golden-B 2025-05-30 10:21:45 +05:30
parent 16e3f51448
commit e2fab37f0f
3 changed files with 101 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,11 +2,19 @@ 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 { DragControls } from '@react-three/drei';
import { useAisleStore } from '../../../store/builder/useAisleStore';
import { useThree } from '@react-three/fiber';
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 plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
const [isHovered, setIsHovered] = useState(false);
const { toolMode } = useToolMode();
const { setPosition } = useAisleStore();
const { hoveredPoint, setHoveredPoint } = useBuilderStore();
const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
const defaultInnerColor = Constants.pointConfig.defaultInnerColor;
@ -29,48 +37,91 @@ function Point({ point, userData }: { readonly point: Point, readonly userData:
uInnerColor: { value: new THREE.Color(defaultInnerColor) },
}), [borderColor, defaultInnerColor]);
const handleDrag = (point: Point) => {
if (toolMode === 'move' && isHovered) {
raycaster.setFromCamera(pointer, camera);
const intersectionPoint = new THREE.Vector3();
const position = raycaster.ray.intersectPlane(plane, intersectionPoint);
if (userData.pointType === 'Aisle') {
if (position) {
setPosition(point.uuid, [position.x, position.y, position.z]);
}
}
}
}
const handleDragEnd = (point: Point) => {
console.log('point: ', point);
}
useEffect(() => {
if (hoveredPoint && hoveredPoint.uuid !== point.uuid) {
setIsHovered(false);
}
}, [hoveredPoint])
if (!point) {
return null;
}
return (
<mesh
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
onPointerOver={() => setIsHovered(true)}
onPointerOut={() => setIsHovered(false)}
userData={userData}
<DragControls
axisLock='y'
autoTransform={false}
onDrag={() => { handleDrag(point) }}
onDragEnd={() => { handleDragEnd(point) }}
>
<boxGeometry args={boxScale} />
<shaderMaterial
ref={materialRef}
uniforms={uniforms}
vertexShader={`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
<mesh
uuid={point.uuid}
position={new THREE.Vector3(...point.position)}
onPointerOver={() => {
if (!hoveredPoint) {
setHoveredPoint(point);
setIsHovered(true)
}
`}
fragmentShader={`
varying vec2 vUv;
uniform vec3 uColor;
uniform vec3 uInnerColor;
void main() {
// Define the size of the white square as a proportion of the face
float borderThickness = 0.2; // Adjust this value for border thickness
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
}
}}
onPointerOut={() => {
if (hoveredPoint && hoveredPoint.uuid === point.uuid) {
setHoveredPoint(null);
}
`}
/>
</mesh>
setIsHovered(false)
}}
userData={userData}
>
<boxGeometry args={boxScale} />
<shaderMaterial
ref={materialRef}
uniforms={uniforms}
vertexShader={
`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`
}
fragmentShader={
`
varying vec2 vUv;
uniform vec3 uColor;
uniform vec3 uInnerColor;
void main() {
// Define the size of the white square as a proportion of the face
float borderThickness = 0.2; // Adjust this value for border thickness
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
}
}
`
}
/>
</mesh>
</DragControls>
);
}

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

@ -63,7 +63,6 @@ export const useAisleStore = create<AisleStore>()(
const point = aisle.points.find(p => p.uuid === pointUuid);
if (point) {
point.position = position;
break;
}
}
}),
@ -73,7 +72,6 @@ export const useAisleStore = create<AisleStore>()(
const point = aisle.points.find(p => p.uuid === pointUuid);
if (point) {
point.layer = layer;
break;
}
}
}),

16
app/src/store/builder/useBuilderStore.ts
View File

@ -3,6 +3,9 @@ import { immer } from 'zustand/middleware/immer';
interface BuilderState {
// Common properties
hoveredPoint: Point | null;
aisleType: AisleTypes;
aisleWidth: number;
aisleColor: AisleColors;
@ -18,6 +21,9 @@ interface BuilderState {
aisleLength: number;
// Setters for common properties
setHoveredPoint: (point: Point | null) => void;
setAisleType: (type: AisleTypes) => void;
setAisleWidth: (width: number) => void;
setAisleColor: (color: AisleColors) => void;
@ -42,6 +48,9 @@ interface BuilderState {
export const useBuilderStore = create<BuilderState>()(
immer((set) => ({
// Default values
hoveredPoint: null,
aisleType: 'solid-aisle',
aisleWidth: 0.1,
aisleColor: 'yellow',
@ -51,6 +60,13 @@ export const useBuilderStore = create<BuilderState>()(
aisleLength: 0.6,
// Individual setters
setHoveredPoint: (point: Point | null) => {
set((state) => {
state.hoveredPoint = point;
});
},
setAisleType: (type) => {
set((state) => {
state.aisleType = type;