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

refactor: Enhance aisle management by adding selectedAisle state and click handling in aisle components

This commit is contained in:
Jerald-Golden-B 2025-05-30 12:19:07 +05:30
parent 84d1022432
commit 0e0a53bd5a
7 changed files with 190 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/src/modules/builder/aisle/Instances/aisleInstances.tsx
View File

@ -11,13 +11,13 @@ function AisleInstances() {
return ( return (
<> <group name='Aisles-Group'>
{aisles.map((aisle) => {aisles.map((aisle) =>
<AisleInstance aisle={aisle} key={aisle.uuid} /> <AisleInstance aisle={aisle} key={aisle.uuid} />
)} )}
</> </group>
) )
} }

21
app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowsAisle.tsx
View File

@ -1,9 +1,15 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { useMemo } from 'react'; import { useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei'; import { Extrude } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants'; import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore';
function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) { function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const arrows = useMemo(() => { const arrows = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'arrows-aisle') return []; if (aisle.points.length < 2 || aisle.type.aisleType !== 'arrows-aisle') return [];
@ -46,12 +52,25 @@ function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
return arrowShapes; return arrowShapes;
}, [aisle]); }, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
}
}
if (arrows.length === 0) return null; if (arrows.length === 0) return null;
return ( return (
<group <group
name='Arrows-Aisle'
ref={aisleRef}
position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]} position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]}
rotation={[Math.PI / 2, 0, 0]} rotation={[Math.PI / 2, 0, 0]}
userData={aisle}
onClick={handleClick}
onPointerMissed={() => {
setSelectedAisle(null);
}}
> >
{arrows.map(({ shape, position, rotationY }, index) => ( {arrows.map(({ shape, position, rotationY }, index) => (
<group key={index} position={[position.x, position.z, 0]} rotation={[0, 0, -rotationY]}> <group key={index} position={[position.x, position.z, 0]} rotation={[0, 0, -rotationY]}>

21
app/src/modules/builder/aisle/Instances/instance/aisleTypes/dashedAisle.tsx
View File

@ -1,9 +1,15 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { useMemo } from 'react'; import { useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei'; import { Extrude } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants'; import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore';
function DashedAisle({ aisle }: { readonly aisle: Aisle }) { function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const shapes = useMemo(() => { const shapes = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dashed-aisle') return []; if (aisle.points.length < 2 || aisle.type.aisleType !== 'dashed-aisle') return [];
@ -44,12 +50,25 @@ function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
return shapes; return shapes;
}, [aisle]); }, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
}
}
if (shapes.length === 0) return null; if (shapes.length === 0) return null;
return ( return (
<group <group
name='Dashed-Aisle'
ref={aisleRef}
position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]} position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]}
rotation={[Math.PI / 2, 0, 0]} rotation={[Math.PI / 2, 0, 0]}
userData={aisle}
onClick={handleClick}
onPointerMissed={() => {
setSelectedAisle(null);
}}
> >
{shapes.map((shape, index) => ( {shapes.map((shape, index) => (
<Extrude <Extrude

21
app/src/modules/builder/aisle/Instances/instance/aisleTypes/dottedAisle.tsx
View File

@ -1,9 +1,15 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { useMemo } from 'react'; import { useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei'; import { Extrude } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants'; import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore';
function DottedAisle({ aisle }: { readonly aisle: Aisle }) { function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const shapes = useMemo(() => { const shapes = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dotted-aisle') return []; if (aisle.points.length < 2 || aisle.type.aisleType !== 'dotted-aisle') return [];
@ -31,12 +37,25 @@ function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
return shapes; return shapes;
}, [aisle]); }, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
}
}
if (shapes.length === 0) return null; if (shapes.length === 0) return null;
return ( return (
<group <group
name='Dotted-Aisle'
ref={aisleRef}
position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]} position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]}
rotation={[Math.PI / 2, 0, 0]} rotation={[Math.PI / 2, 0, 0]}
userData={aisle}
onClick={handleClick}
onPointerMissed={() => {
setSelectedAisle(null);
}}
> >
{shapes.map((shape, index) => ( {shapes.map((shape, index) => (
<Extrude <Extrude

21
app/src/modules/builder/aisle/Instances/instance/aisleTypes/solidAisle.tsx
View File

@ -1,9 +1,15 @@
import * as THREE from 'three'; import * as THREE from 'three';
import { useMemo } from 'react'; import { useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei'; import { Extrude } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants'; import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore';
function SolidAisle({ aisle }: { readonly aisle: Aisle }) { function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const shape = useMemo(() => { const shape = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'solid-aisle') return null; if (aisle.points.length < 2 || aisle.type.aisleType !== 'solid-aisle') return null;
@ -29,12 +35,25 @@ function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
return shape; return shape;
}, [aisle]); }, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
}
}
if (!shape) return null; if (!shape) return null;
return ( return (
<group <group
name='Solid-Aisle'
ref={aisleRef}
position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]} position={[0, (aisle.points[0].layer - 1) * Constants.wallConfig.height + 0.01, 0]}
rotation={[Math.PI / 2, 0, 0]} rotation={[Math.PI / 2, 0, 0]}
userData={aisle}
onClick={handleClick}
onPointerMissed={() => {
setSelectedAisle(null);
}}
> >
<Extrude <Extrude
args={[shape, { depth: 0.01, bevelEnabled: false }]} args={[shape, { depth: 0.01, bevelEnabled: false }]}

171
app/src/modules/scene/postProcessing/postProcessing.tsx
View File

@ -8,12 +8,14 @@ import {
import * as CONSTANTS from "../../../types/world/worldConstants"; import * as CONSTANTS from "../../../types/world/worldConstants";
import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore"; import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import { useEffect } from "react"; import { useEffect } from "react";
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
export default function PostProcessing() { export default function PostProcessing() {
const { deletableFloorItem } = useDeletableFloorItem(); const { deletableFloorItem } = useDeletableFloorItem();
const { selectedWallItem } = useSelectedWallItem(); const { selectedWallItem } = useSelectedWallItem();
const { selectedFloorItem } = useSelectedFloorItem(); const { selectedFloorItem } = useSelectedFloorItem();
const { selectedEventSphere } = useSelectedEventSphere(); const { selectedEventSphere } = useSelectedEventSphere();
const { selectedAisle } = useBuilderStore();
function flattenChildren(children: any[]) { function flattenChildren(children: any[]) {
const allChildren: any[] = []; const allChildren: any[] = [];
@ -26,87 +28,104 @@ export default function PostProcessing() {
return allChildren; return allChildren;
} }
useEffect(()=>{ useEffect(() => {
// console.log('selectedFloorItem: ', selectedFloorItem); // console.log('selectedFloorItem: ', selectedFloorItem);
},[selectedFloorItem]) }, [selectedFloorItem])
useEffect(()=>{ useEffect(() => {
// console.log('selectedFloorItem: ', deletableFloorItem); // console.log('selectedFloorItem: ', deletableFloorItem);
},[deletableFloorItem]) }, [deletableFloorItem])
useEffect(() => {
console.log('selectedAisle: ', selectedAisle);
}, [selectedAisle])
return ( return (
<> <EffectComposer autoClear={false}>
<EffectComposer autoClear={false}> <N8AO
<N8AO color="black"
color="black" aoRadius={20}
aoRadius={20} intensity={7}
intensity={7} distanceFalloff={4}
distanceFalloff={4} aoSamples={32}
aoSamples={32} denoiseRadius={6}
denoiseRadius={6} denoiseSamples={16}
denoiseSamples={16} />
{selectedAisle && (
<Outline
selection={flattenChildren(selectedAisle.children)}
selectionLayer={10}
width={2000}
blendFunction={BlendFunction.ALPHA}
edgeStrength={5}
resolutionScale={2}
pulseSpeed={0}
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
blur={true}
xRay={false}
/> />
{deletableFloorItem && ( )}
<Outline {deletableFloorItem && (
selection={flattenChildren(deletableFloorItem.children)} <Outline
selectionLayer={10} selection={flattenChildren(deletableFloorItem.children)}
width={3000} selectionLayer={10}
blendFunction={BlendFunction.ALPHA} width={3000}
edgeStrength={5} blendFunction={BlendFunction.ALPHA}
resolutionScale={2} edgeStrength={5}
pulseSpeed={0} resolutionScale={2}
visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} pulseSpeed={0}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
blur={true} hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
xRay={true} blur={true}
/> xRay={true}
)} />
{selectedWallItem && ( )}
<Outline {selectedWallItem && (
selection={flattenChildren(selectedWallItem.children)} <Outline
selectionLayer={10} selection={flattenChildren(selectedWallItem.children)}
width={3000} selectionLayer={10}
blendFunction={BlendFunction.ALPHA} width={3000}
edgeStrength={5} blendFunction={BlendFunction.ALPHA}
resolutionScale={2} edgeStrength={5}
pulseSpeed={0} resolutionScale={2}
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} pulseSpeed={0}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
blur={true} hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
xRay={true} blur={true}
/> xRay={true}
)} />
{selectedFloorItem && ( )}
<Outline {selectedFloorItem && (
selection={flattenChildren(selectedFloorItem.children)} <Outline
selectionLayer={10} selection={flattenChildren(selectedFloorItem.children)}
width={3000} selectionLayer={10}
blendFunction={BlendFunction.ALPHA} width={3000}
edgeStrength={5} blendFunction={BlendFunction.ALPHA}
resolutionScale={2} edgeStrength={5}
pulseSpeed={0} resolutionScale={2}
visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} pulseSpeed={0}
hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor} visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
blur={true} hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
xRay={true} blur={true}
/> xRay={true}
)} />
{selectedEventSphere && ( )}
<Outline {selectedEventSphere && (
selection={[selectedEventSphere]} <Outline
selectionLayer={10} selection={[selectedEventSphere]}
width={1000} selectionLayer={10}
blendFunction={BlendFunction.ALPHA} width={1000}
edgeStrength={10} blendFunction={BlendFunction.ALPHA}
resolutionScale={2} edgeStrength={10}
pulseSpeed={0} resolutionScale={2}
visibleEdgeColor={0x6f42c1} pulseSpeed={0}
hiddenEdgeColor={0x6f42c1} visibleEdgeColor={0x6f42c1}
blur={true} hiddenEdgeColor={0x6f42c1}
xRay={true} blur={true}
/> xRay={true}
)} />
</EffectComposer> )}
</> </EffectComposer>
); );
} }

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

@ -1,3 +1,4 @@
import { Object3D } from 'three';
import { create } from 'zustand'; import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer'; import { immer } from 'zustand/middleware/immer';
@ -6,6 +7,8 @@ interface BuilderState {
hoveredPoint: Point | null; hoveredPoint: Point | null;
selectedAisle: Object3D | null;
aisleType: AisleTypes; aisleType: AisleTypes;
aisleWidth: number; aisleWidth: number;
aisleColor: AisleColors; aisleColor: AisleColors;
@ -24,6 +27,8 @@ interface BuilderState {
setHoveredPoint: (point: Point | null) => void; setHoveredPoint: (point: Point | null) => void;
setSelectedAisle: (aisle: Object3D | null) => void;
setAisleType: (type: AisleTypes) => void; setAisleType: (type: AisleTypes) => void;
setAisleWidth: (width: number) => void; setAisleWidth: (width: number) => void;
setAisleColor: (color: AisleColors) => void; setAisleColor: (color: AisleColors) => void;
@ -51,6 +56,8 @@ export const useBuilderStore = create<BuilderState>()(
hoveredPoint: null, hoveredPoint: null,
selectedAisle: null,
aisleType: 'solid-aisle', aisleType: 'solid-aisle',
aisleWidth: 0.1, aisleWidth: 0.1,
aisleColor: 'yellow', aisleColor: 'yellow',
@ -67,6 +74,12 @@ export const useBuilderStore = create<BuilderState>()(
}); });
}, },
setSelectedAisle: (aisle: Object3D | null) => {
set((state) => {
state.selectedAisle = aisle;
});
},
setAisleType: (type) => { setAisleType: (type) => {
set((state) => { set((state) => {
state.aisleType = type; state.aisleType = type;