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

added selectedAisleProperties and its backend updation

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-08-28 18:00:00 +05:30
parent cb87cd067b
commit 94bec4f2f0
14 changed files with 765 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/src/components/layout/sidebarRight/SideBarRight.tsx
View File

@@ -6,7 +6,7 @@ import { useToggleStore } from "../../../store/useUIToggleStore";
import Visualization from "./visualization/Visualization";
import Analysis from "./analysis/Analysis";
import Simulations from "./simulation/Simulations";
import useVersionHistoryVisibleStore, { useDecalStore, useSaveVersion, useSelectedFloorItem, useToolMode, } from "../../../store/builder/store";
import useVersionHistoryVisibleStore, { useSaveVersion, useSelectedFloorItem, useToolMode } from "../../../store/builder/store";
import { useSelectedEventData, useSelectedEventSphere, } from "../../../store/simulation/useSimulationStore";
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
import GlobalProperties from "./properties/GlobalProperties";
@@ -19,8 +19,9 @@ import WallProperties from "./properties/WallProperties";
import FloorProperties from "./properties/FloorProperties";
import SelectedWallProperties from "./properties/SelectedWallProperties";
import SelectedFloorProperties from "./properties/SelectedFloorProperties";
import ResourceManagement from "./resourceManagement/ResourceManagement";
import SelectedDecalProperties from "./properties/SelectedDecalProperties";
import SelectedAisleProperties from "./properties/SelectedAisleProperties";
import ResourceManagement from "./resourceManagement/ResourceManagement";
type DisplayComponent =
| "versionHistory"
@@ -31,12 +32,13 @@ type DisplayComponent =
| "assetProperties"
| "selectedWallProperties"
| "selectedFloorProperties"
| "selectedDecalProperties"
| "selectedAisleProperties"
| "zoneProperties"
| "simulations"
| "mechanics"
| "analysis"
| "visualization"
| "selectedDecalProperties"
| "resourceManagement"
| "none";
@@ -110,23 +112,27 @@ const SideBarRight: React.FC = () => {
setDisplayComponent("assetProperties");
return;
}
if (!selectedFloorItem && !selectedFloor && !selectedAisle && selectedWall) {
if (!selectedFloorItem && !selectedFloor && !selectedAisle && !selectedDecal && selectedWall) {
setDisplayComponent("selectedWallProperties");
return;
}
if (!selectedFloorItem && !selectedWall && !selectedAisle && selectedFloor) {
if (!selectedFloorItem && !selectedWall && !selectedAisle && !selectedDecal && selectedFloor) {
setDisplayComponent("selectedFloorProperties");
return;
}
if (viewVersionHistory) {
if (viewVersionHistory && !selectedFloorItem && !selectedWall && !selectedAisle && !selectedFloor && !selectedDecal) {
setDisplayComponent("versionHistory");
return;
}
if (selectedDecal) {
if (!selectedFloorItem && !selectedFloor && !selectedAisle && !selectedWall && selectedDecal) {
setDisplayComponent("selectedDecalProperties");
return;
}
if (!selectedFloorItem && !selectedFloor && !selectedWall && !selectedDecal) {
if (!selectedFloorItem && !selectedFloor && !selectedWall && !selectedDecal && selectedAisle) {
setDisplayComponent("selectedAisleProperties");
return;
}
if (!selectedFloorItem && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle) {
if (toolMode === "Aisle") {
setDisplayComponent("aisleProperties");
return;
@@ -166,12 +172,16 @@ const SideBarRight: React.FC = () => {
return <FloorProperties />;
case "assetProperties":
return <AssetProperties />;
case "zoneProperties":
return <ZoneProperties />;
case "selectedWallProperties":
return <SelectedWallProperties />;
case "selectedFloorProperties":
return <SelectedFloorProperties />;
case "zoneProperties":
return <ZoneProperties />;
case "selectedDecalProperties":
return <SelectedDecalProperties />;
case "selectedAisleProperties":
return <SelectedAisleProperties />;
case "simulations":
return <Simulations />;
case "mechanics":
@@ -180,8 +190,6 @@ const SideBarRight: React.FC = () => {
return <Analysis />;
case "visualization":
return <Visualization />;
case "selectedDecalProperties":
return <SelectedDecalProperties />;
case "resourceManagement":
return <ResourceManagement />;
default:

545
app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx Normal file
View File

@@ -0,0 +1,545 @@
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
import { ArrowIcon } from "../../../icons/ExportCommonIcons";
// image imports
import Arc from "../../../../assets/image/aisleTypes/Arc.png";
import Arrow from "../../../../assets/image/aisleTypes/Arrow.png";
import Arrows from "../../../../assets/image/aisleTypes/Arrows.png";
import Circle from "../../../../assets/image/aisleTypes/Circle.png";
import Dashed from "../../../../assets/image/aisleTypes/Dashed.png";
import Directional from "../../../../assets/image/aisleTypes/Directional.png";
import Dotted from "../../../../assets/image/aisleTypes/Dotted.png";
import Solid from "../../../../assets/image/aisleTypes/Solid.png";
import InputToggle from "../../../ui/inputs/InputToggle";
import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
import { useSceneContext } from "../../../../modules/scene/sceneContext";
import { useVersionContext } from "../../../../modules/builder/version/versionContext";
import { useSocketStore } from "../../../../store/builder/store";
import { getUserData } from "../../../../functions/getUserData";
// import { upsertAisleApi } from "../../../../services/factoryBuilder/aisle/upsertAisleApi";
interface TextureItem {
color: string;
id: AisleColors;
brief: string;
texture: string;
}
const SelectedAisleProperties: React.FC = () => {
const [collapsePresets, setCollapsePresets] = useState(false);
const [collapseTexture, setCollapseTexture] = useState(true);
const { aisleStore } = useSceneContext();
const { getAisleById, updateAisle, setDashedAisleProperties, setDottedAisleProperties, setArrowsAisleProperties, setArcAisleWidth, setColor } = aisleStore();
const { selectedVersionStore } = useVersionContext();
const { selectedVersion } = selectedVersionStore();
const { socket } = useSocketStore();
const { userId, organization } = getUserData();
const { projectId } = useParams();
const [selectedAisleData, setSelectedAisleData] = useState<Aisle | undefined>();
const { selectedAisle, setSelectedAisle } = useBuilderStore();
useEffect(() => {
const aisleData = getAisleById(selectedAisle?.aisleMesh?.uuid || "");
setSelectedAisleData(aisleData);
}, [selectedAisle, getAisleById]);
if (!selectedAisleData) return null;
const updateBackend = (updatedAisle: Aisle) => {
if (updatedAisle && projectId) {
// API
// upsertAisleApi(updatedAisle.aisleUuid, updatedAisle.points, updatedAisle.type, projectId, selectedVersion?.versionId || '');
// SOCKET
const data = {
projectId: projectId,
versionId: selectedVersion?.versionId || '',
userId: userId,
organization: organization,
aisleUuid: updatedAisle.aisleUuid,
points: updatedAisle.points,
type: updatedAisle.type
}
socket.emit('v1:model-aisle:add', data);
}
}
const aisleTextureList: TextureItem[] = [
{ color: "yellow", id: "yellow", brief: "pedestrian walkways", texture: "" },
{ color: "gray", id: "gray", brief: "basic", texture: "" },
{ color: "green", id: "green", brief: "pedestrian walkways", texture: "" },
{ color: "orange", id: "orange", brief: "material flow", texture: "" },
{ color: "blue", id: "blue", brief: "vehicle paths", texture: "" },
{ color: "purple", id: "purple", brief: "material flow", texture: "" },
{ color: "red", id: "red", brief: "safety zone", texture: "" },
{ color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
{ color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
{ color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
];
const aisleTypes: {
name: string;
type: AisleTypes;
id: string;
thumbnail: string;
}[] = [
{ name: "Solid", type: "solid-aisle", id: "1", thumbnail: Solid },
{ name: "Dotted", type: "dotted-aisle", id: "2", thumbnail: Dotted },
{ name: "Dashed", type: "dashed-aisle", id: "3", thumbnail: Dashed },
{ name: "Arrow", type: "arrow-aisle", id: "4", thumbnail: Arrow },
{ name: "Continuous Arrows", type: "arrows-aisle", id: "5", thumbnail: Arrows },
{ name: "Directional", type: "junction-aisle", id: "6", thumbnail: Directional },
{ name: "Arc", type: "arc-aisle", id: "7", thumbnail: Arc },
{ name: "Circle", type: "circle-aisle", id: "8", thumbnail: Circle },
];
const createAisleTypeObject = (newType: AisleTypes, currentType: AisleType): AisleType => {
switch (newType) {
case 'solid-aisle':
return {
aisleType: 'solid-aisle',
aisleColor: currentType.aisleColor,
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1
} as SolidAisle;
case 'dashed-aisle':
return {
aisleType: 'dashed-aisle',
aisleColor: currentType.aisleColor,
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1,
dashLength: 'dashLength' in currentType ? (currentType as DashedAisle).dashLength : 0.5,
gapLength: 'gapLength' in currentType ? (currentType as DashedAisle).gapLength : 0.3
} as DashedAisle;
case 'dotted-aisle':
return {
aisleType: 'dotted-aisle',
aisleColor: currentType.aisleColor,
dotRadius: 'dotRadius' in currentType ? (currentType as DottedAisle).dotRadius : 0.1,
gapLength: 'gapLength' in currentType ? (currentType as DottedAisle).gapLength : 0.3
} as DottedAisle;
case 'arrow-aisle':
return {
aisleType: 'arrow-aisle',
aisleColor: currentType.aisleColor,
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1
} as ArrowAisle;
case 'arrows-aisle':
return {
aisleType: 'arrows-aisle',
aisleColor: currentType.aisleColor,
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1,
aisleLength: 'aisleLength' in currentType ? (currentType as ArrowsAisle).aisleLength : 0.6,
gapLength: 'gapLength' in currentType ? (currentType as ArrowsAisle).gapLength : 0.3
} as ArrowsAisle;
case 'arc-aisle':
return {
aisleType: 'arc-aisle',
aisleColor: currentType.aisleColor,
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1,
isFlipped: 'isFlipped' in currentType ? (currentType as ArcAisle).isFlipped : false
} as ArcAisle;
case 'circle-aisle':
return {
aisleType: 'circle-aisle',
aisleColor: currentType.aisleColor,
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1
} as CircleAisle;
case 'junction-aisle':
return {
aisleType: 'junction-aisle',
aisleColor: currentType.aisleColor,
aisleWidth: 'aisleWidth' in currentType ? currentType.aisleWidth : 0.1,
isFlipped: 'isFlipped' in currentType ? (currentType as JunctionAisle).isFlipped : false
} as JunctionAisle;
default:
return {
aisleType: 'solid-aisle',
aisleColor: currentType.aisleColor,
aisleWidth: 0.1
} as SolidAisle;
}
};
const handleAisleTypeChange = (newType: AisleTypes) => {
if (!selectedAisle?.aisleData) return;
const newAisleType = createAisleTypeObject(newType, selectedAisleData.type);
const updatedAisle = updateAisle(selectedAisleData.aisleUuid, {
type: newAisleType
});
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: null });
setSelectedAisleData({
...selectedAisleData,
type: newAisleType
});
if (updatedAisle) {
updateBackend(updatedAisle);
}
};
const handleColorChange = (value: AisleColors) => {
const updatedAisle = setColor(selectedAisleData.aisleUuid, value);
setSelectedAisleData({
...selectedAisleData,
type: {
...selectedAisleData.type,
aisleColor: value
}
})
if (updatedAisle) {
updateBackend(updatedAisle);
}
};
const handleAisleWidthChange = (value: string) => {
const width = parseFloat(value);
if (!isNaN(width) && selectedAisleData.type.aisleType !== 'dotted-aisle') {
const updatedAisle = updateAisle(selectedAisleData.aisleUuid, {
type: {
...selectedAisleData.type,
aisleWidth: width
}
});
setSelectedAisleData({
...selectedAisleData,
type: {
...selectedAisleData.type,
aisleWidth: width
}
})
if (updatedAisle) {
updateBackend(updatedAisle);
}
}
};
const handleDashLengthChange = (value: string) => {
const length = parseFloat(value);
if (!isNaN(length) && selectedAisleData.type.aisleType === 'dashed-aisle') {
const updatedAisle = setDashedAisleProperties(selectedAisleData.aisleUuid, {
dashLength: length
});
setSelectedAisleData({
...selectedAisleData,
type: {
...(selectedAisleData.type as DashedAisle),
dashLength: length
}
})
if (updatedAisle) {
updateBackend(updatedAisle);
}
}
};
const handleGapLengthChange = (value: string) => {
const length = parseFloat(value);
if (!isNaN(length) && (selectedAisleData.type.aisleType === 'dashed-aisle' || selectedAisleData.type.aisleType === 'dotted-aisle' || selectedAisleData.type.aisleType === 'arrows-aisle')) {
if (selectedAisleData.type.aisleType === 'dashed-aisle') {
const updatedAisle = setDashedAisleProperties(selectedAisleData.aisleUuid, {
gapLength: length
});
setSelectedAisleData({
...selectedAisleData,
type: {
...(selectedAisleData.type as DashedAisle),
gapLength: length
}
})
if (updatedAisle) {
updateBackend(updatedAisle);
}
} else if (selectedAisleData.type.aisleType === 'dotted-aisle') {
const updatedAisle = setDottedAisleProperties(selectedAisleData.aisleUuid, {
gapLength: length
});
setSelectedAisleData({
...selectedAisleData,
type: {
...(selectedAisleData.type as DottedAisle),
gapLength: length
}
})
if (updatedAisle) {
updateBackend(updatedAisle);
}
} else if (selectedAisleData.type.aisleType === 'arrows-aisle') {
const updatedAisle = setArrowsAisleProperties(selectedAisleData.aisleUuid, {
gapLength: length
});
setSelectedAisleData({
...selectedAisleData,
type: {
...(selectedAisleData.type as ArrowsAisle),
gapLength: length
}
})
if (updatedAisle) {
updateBackend(updatedAisle);
}
}
}
};
const handleDotRadiusChange = (value: string) => {
const radius = parseFloat(value);
if (!isNaN(radius) && selectedAisleData.type.aisleType === 'dotted-aisle') {
const updatedAisle = setDottedAisleProperties(selectedAisleData.aisleUuid, {
dotRadius: radius
});
setSelectedAisleData({
...selectedAisleData,
type: {
...(selectedAisleData.type as DottedAisle),
dotRadius: radius
}
})
if (updatedAisle) {
updateBackend(updatedAisle);
}
}
};
const handleAisleLengthChange = (value: string) => {
const length = parseFloat(value);
if (!isNaN(length) && selectedAisleData.type.aisleType === 'arrows-aisle') {
const updatedAisle = setArrowsAisleProperties(selectedAisleData.aisleUuid, {
aisleLength: length
});
setSelectedAisleData({
...selectedAisleData,
type: {
...(selectedAisleData.type as ArrowsAisle),
aisleLength: length
}
})
if (updatedAisle) {
updateBackend(updatedAisle);
}
}
};
const handleIsFlippedChange = () => {
if (selectedAisleData.type.aisleType === 'arc-aisle' || selectedAisleData.type.aisleType === 'junction-aisle') {
const currentType = selectedAisleData.type as ArcAisle | JunctionAisle;
const currentFlipped = currentType.isFlipped || false;
const updatedAisle = setArcAisleWidth(selectedAisleData.aisleUuid, {
isFlipped: !currentFlipped
});
setSelectedAisleData({
...selectedAisleData,
type: {
...currentType,
isFlipped: !currentFlipped
}
})
if (updatedAisle) {
updateBackend(updatedAisle);
}
}
};
const renderAdvancedProperties = () => {
switch (selectedAisleData.type.aisleType) {
case 'dashed-aisle':
const dashedType = selectedAisleData.type as DashedAisle;
return (
<>
<InputWithDropDown
label="Dash Length"
value={`${dashedType.dashLength}`}
min={0.1}
step={0.1}
max={2}
onChange={handleDashLengthChange}
/>
<InputWithDropDown
label="Gap Length"
value={`${dashedType.gapLength}`}
min={0.1}
step={0.1}
max={2}
onChange={handleGapLengthChange}
/>
</>
);
case 'dotted-aisle':
const dottedType = selectedAisleData.type as DottedAisle;
return (
<>
<InputWithDropDown
label="Dot Radius"
value={`${dottedType.dotRadius}`}
min={0.1}
step={0.1}
max={2}
onChange={handleDotRadiusChange}
/>
<InputWithDropDown
label="Gap Length"
value={`${dottedType.gapLength}`}
min={0.1}
step={0.1}
max={2}
onChange={handleGapLengthChange}
/>
</>
);
case 'arrows-aisle':
const arrowsType = selectedAisleData.type as ArrowsAisle;
return (
<>
<InputWithDropDown
label="Arrow Length"
value={`${arrowsType.aisleLength}`}
min={0.1}
step={0.1}
max={2}
onChange={handleAisleLengthChange}
/>
<InputWithDropDown
label="Gap Length"
value={`${arrowsType.gapLength}`}
min={0.1}
step={0.1}
max={2}
onChange={handleGapLengthChange}
/>
</>
);
case 'junction-aisle':
case 'arc-aisle':
const flippedType = selectedAisleData.type as ArcAisle | JunctionAisle;
return (
<InputToggle
inputKey="Flip Aisle"
label="Flip Aisle"
value={flippedType.isFlipped || false}
onClick={handleIsFlippedChange}
/>
);
default:
return null;
}
};
return (
<div className="aisle-properties-container">
<div className="header">Properties</div>
{/* Basic Properties */}
<section>
{selectedAisleData.type.aisleType !== 'dotted-aisle' &&
<InputWithDropDown
label="Aisle Width"
value={`${selectedAisleData.type.aisleWidth || 0.5}`}
min={0.1}
step={0.1}
max={2}
onChange={handleAisleWidthChange}
/>
}
{renderAdvancedProperties()}
</section>
{/* Presets */}
<section>
<button
className="header"
onClick={() => setCollapsePresets(!collapsePresets)}
aria-expanded={!collapsePresets}
>
<div className="value">Presets</div>
<div className="icon">
<ArrowIcon />
</div>
</button>
{!collapsePresets && (
<div className="presets-list-container">
{aisleTypes.map((val) => (
<div className="preset-list" key={val.id}>
<button
className={`thumbnail ${selectedAisleData.type.aisleType === val.type ? "selected" : ""}`}
title={val.name}
onClick={() => handleAisleTypeChange(val.type)}
>
<img src={val.thumbnail} alt="" />
</button>
</div>
))}
</div>
)}
</section>
{/* Texture */}
<section>
<button
className="header"
onClick={() => setCollapseTexture(!collapseTexture)}
aria-expanded={!collapseTexture}
>
<div className="value">Aisle Texture</div>
<div className="icon" style={{ rotate: collapseTexture ? "" : "-90deg" }}>
<ArrowIcon />
</div>
</button>
{collapseTexture && (
<div className="aisle-texture-container">
{aisleTextureList.map((val) => (
<button
key={val.id}
title={val.brief || val.id}
className={`aisle-list ${selectedAisleData.type.aisleColor === val.id ? "selected" : ""}`}
onClick={() => handleColorChange(val.id)}
aria-pressed={selectedAisleData.type.aisleColor === val.id}
>
<div className="texture-display">{val.texture}</div>
<div className="aisle-color">{val.color}</div>
<div className="aisle-brief">{`( ${val.brief} )`}</div>
</button>
))}
</div>
)}
</section>
</div>
);
};
export default SelectedAisleProperties;

23
app/src/components/layout/sidebarRight/properties/SelectedDecalProperties.tsx
View File

@@ -5,7 +5,6 @@ import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
import { LayeringBottomIcon, LayeringTopIcon } from "../../../icons/ExportCommonIcons";
import { useSocketStore } from "../../../../store/builder/store";
import InputRange from "../../../ui/inputs/InputRange";
import RotationInput from "../customInput/RotationInput";
import { getUserData } from "../../../../functions/getUserData";
// import { upsertWallApi } from "../../../../services/factoryBuilder/wall/upsertWallApi";
@@ -134,18 +133,22 @@ const SelectedDecalProperties = () => {
<div className="decal-transformation-container">
<div className="header">Decal Properties</div>
<section>
<RotationInput
onChange={(e) => { handleRotationChange(parseFloat(e)) }}
<InputRange
label="Rotation"
value={selectedDecal.decalData.decalRotation || 0}
min={0}
max={360}
step={1}
onChange={(value: number) => handleRotationChange(value)}
/>
<RotationInput
min={0.1}
max={10}
step={0.1}
heading="Scaling"
label="Scale :"
onChange={(e) => { handleScaleChange(parseFloat(e)) }}
<InputRange
label="Scale"
value={selectedDecal.decalData.decalScale || 1}
min={0.1}
max={5}
step={0.1}
onChange={(value: number) => handleScaleChange(value)}
/>
</section>

14
app/src/modules/builder/aisle/Instances/instance/aisleTypes/arcAisle.tsx
View File

@@ -1,5 +1,5 @@
import * as THREE from 'three';
import { useMemo, useRef } from 'react';
import { useEffect, useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
@@ -8,7 +8,13 @@ import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore
function ArcAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const { setSelectedAisle, hoveredPoint, selectedAisle } = useBuilderStore();
useEffect(() => {
if (selectedAisle?.aisleData.aisleUuid === aisle.aisleUuid && !selectedAisle.aisleMesh) {
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: aisleRef.current });
}
}, [selectedAisle])
const arc = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'arc-aisle') return null;
@@ -63,8 +69,8 @@ function ArcAisle({ aisle }: { readonly aisle: Aisle }) {
}, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
if ((toolMode === 'move' || toolMode === 'cursor') && !hoveredPoint) {
setSelectedAisle({ aisleMesh: aisleRef.current, aisleData: aisle });
}
}

14
app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowAisle.tsx
View File

@@ -1,5 +1,5 @@
import * as THREE from 'three';
import { useMemo, useRef } from 'react';
import { useEffect, useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
@@ -8,7 +8,13 @@ import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore
function ArrowAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const { setSelectedAisle, hoveredPoint, selectedAisle } = useBuilderStore();
useEffect(() => {
if (selectedAisle?.aisleData.aisleUuid === aisle.aisleUuid && !selectedAisle.aisleMesh) {
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: aisleRef.current });
}
}, [selectedAisle])
const arrow = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'arrow-aisle') return null;
@@ -50,8 +56,8 @@ function ArrowAisle({ aisle }: { readonly aisle: Aisle }) {
}, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
if ((toolMode === 'move' || toolMode === 'cursor') && !hoveredPoint) {
setSelectedAisle({ aisleMesh: aisleRef.current, aisleData: aisle });
}
}

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

@@ -1,5 +1,5 @@
import * as THREE from 'three';
import { useMemo, useRef } from 'react';
import { useEffect, useMemo, useRef } from 'react';
import { Instances, Instance } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
@@ -8,7 +8,13 @@ import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore
function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const { setSelectedAisle, hoveredPoint, selectedAisle } = useBuilderStore();
useEffect(() => {
if (selectedAisle?.aisleData.aisleUuid === aisle.aisleUuid && !selectedAisle.aisleMesh) {
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: aisleRef.current });
}
}, [selectedAisle])
const { arrowGeometry, arrowInstances } = useMemo(() => {
const result = {
@@ -68,8 +74,8 @@ function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
}, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
if ((toolMode === 'move' || toolMode === 'cursor') && !hoveredPoint) {
setSelectedAisle({ aisleMesh: aisleRef.current, aisleData: aisle });
}
};

14
app/src/modules/builder/aisle/Instances/instance/aisleTypes/circleAisle.tsx
View File

@@ -1,5 +1,5 @@
import * as THREE from 'three';
import { useMemo, useRef } from 'react';
import { useEffect, useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
@@ -8,7 +8,13 @@ import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore
function CircleAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const { setSelectedAisle, hoveredPoint, selectedAisle } = useBuilderStore();
useEffect(() => {
if (selectedAisle?.aisleData.aisleUuid === aisle.aisleUuid && !selectedAisle.aisleMesh) {
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: aisleRef.current });
}
}, [selectedAisle])
const circle = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'circle-aisle') return null;
@@ -38,8 +44,8 @@ function CircleAisle({ aisle }: { readonly aisle: Aisle }) {
}, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
if ((toolMode === 'move' || toolMode === 'cursor') && !hoveredPoint) {
setSelectedAisle({ aisleMesh: aisleRef.current, aisleData: aisle });
}
}

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

@@ -1,5 +1,5 @@
import * as THREE from 'three';
import { useMemo, useRef } from 'react';
import { useEffect, useMemo, useRef } from 'react';
import { Instances, Instance } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
@@ -8,7 +8,13 @@ import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore
function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const { setSelectedAisle, hoveredPoint, selectedAisle } = useBuilderStore();
useEffect(() => {
if (selectedAisle?.aisleData.aisleUuid === aisle.aisleUuid && !selectedAisle.aisleMesh) {
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: aisleRef.current });
}
}, [selectedAisle])
const dashInstances = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dashed-aisle') return [];
@@ -43,8 +49,8 @@ function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
}, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
if ((toolMode === 'move' || toolMode === 'cursor') && !hoveredPoint) {
setSelectedAisle({ aisleMesh: aisleRef.current, aisleData: aisle });
}
};

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

@@ -1,5 +1,5 @@
import * as THREE from 'three';
import { useMemo, useRef } from 'react';
import { useEffect, useMemo, useRef } from 'react';
import { Instance, Instances } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
@@ -8,7 +8,13 @@ import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore
function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const { setSelectedAisle, hoveredPoint, selectedAisle } = useBuilderStore();
useEffect(() => {
if (selectedAisle?.aisleData.aisleUuid === aisle.aisleUuid && !selectedAisle.aisleMesh) {
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: aisleRef.current });
}
}, [selectedAisle])
const dotPositions = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dotted-aisle') return [];
@@ -27,8 +33,8 @@ function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
}, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
if ((toolMode === 'move' || toolMode === 'cursor') && !hoveredPoint) {
setSelectedAisle({ aisleMesh: aisleRef.current, aisleData: aisle });
}
}

14
app/src/modules/builder/aisle/Instances/instance/aisleTypes/junctionAisle.tsx
View File

@@ -1,5 +1,5 @@
import * as THREE from 'three';
import { useMemo, useRef } from 'react';
import { useEffect, useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
@@ -8,7 +8,13 @@ import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore
function JunctionAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const { setSelectedAisle, hoveredPoint, selectedAisle } = useBuilderStore();
useEffect(() => {
if (selectedAisle?.aisleData.aisleUuid === aisle.aisleUuid && !selectedAisle.aisleMesh) {
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: aisleRef.current });
}
}, [selectedAisle])
const arrows = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'junction-aisle') return null;
@@ -85,8 +91,8 @@ function JunctionAisle({ aisle }: { readonly aisle: Aisle }) {
}, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
if ((toolMode === 'move' || toolMode === 'cursor') && !hoveredPoint) {
setSelectedAisle({ aisleMesh: aisleRef.current, aisleData: aisle });
}
}

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

@@ -1,5 +1,5 @@
import * as THREE from 'three';
import { useMemo, useRef } from 'react';
import { useEffect, useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei';
import * as Constants from '../../../../../../types/world/worldConstants';
import { useToolMode } from '../../../../../../store/builder/store';
@@ -8,7 +8,14 @@ import { useBuilderStore } from '../../../../../../store/builder/useBuilderStore
function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
const aisleRef = useRef<THREE.Group>(null);
const { toolMode } = useToolMode();
const { setSelectedAisle, hoveredPoint } = useBuilderStore();
const { setSelectedAisle, hoveredPoint, selectedAisle } = useBuilderStore();
useEffect(() => {
if (selectedAisle?.aisleData.aisleUuid === aisle.aisleUuid && !selectedAisle.aisleMesh) {
setSelectedAisle({ aisleData: selectedAisle.aisleData, aisleMesh: aisleRef.current });
}
}, [selectedAisle])
const shape = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'solid-aisle') return null;
@@ -35,8 +42,8 @@ function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
}, [aisle]);
const handleClick = () => {
if (toolMode === 'move' && !hoveredPoint) {
setSelectedAisle(aisleRef.current);
if ((toolMode === 'move' || toolMode === 'cursor') && !hoveredPoint) {
setSelectedAisle({ aisleMesh: aisleRef.current, aisleData: aisle });
}
}

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

@@ -120,7 +120,7 @@ export default function PostProcessing() {
)}
{selectedAisle && (
<Outline
selection={flattenChildren(selectedAisle.children)}
selection={flattenChildren(selectedAisle.aisleMesh?.children || [])}
selectionLayer={10}
width={2000}
blendFunction={BlendFunction.ALPHA}

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

@@ -3,43 +3,42 @@ import { immer } from "zustand/middleware/immer";
interface AisleStore {
aisles: Aisles;
setAisles: (aisles: Aisles) => void;
addAisle: (aisle: Aisle) => void;
updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
removeAisle: (uuid: string) => void;
setAisles: (aisles: Aisles) => Aisles;
addAisle: (aisle: Aisle) => Aisle;
updateAisle: (uuid: string, updated: Partial<Aisle>) => Aisle | undefined;
removeAisle: (uuid: string) => Aisle | undefined;
removePoint: (uuid: string) => Aisles;
clearAisles: () => void;
clearAisles: () => Aisles;
setPosition: (
pointUuid: string,
position: [number, number, number]
) => Aisle | undefined;
setLayer: (pointUuid: string, layer: number) => void;
setColor: (aisleUuid: string, color: AisleColors) => void;
setLayer: (pointUuid: string, layer: number) => Aisle | undefined;
setColor: (aisleUuid: string, color: AisleColors) => Aisle | undefined;
// Type-specific setters
setSolidAisleWidth: (aisleUuid: string, width: number) => void;
setSolidAisleWidth: (aisleUuid: string, width: number) => Aisle | undefined;
setDashedAisleProperties: (
aisleUuid: string,
props: { aisleWidth?: number; dashLength?: number; gapLength?: number }
) => void;
) => Aisle | undefined;
setDottedAisleProperties: (
aisleUuid: string,
props: { dotRadius?: number; gapLength?: number }
) => void;
setArrowAisleWidth: (aisleUuid: string, width: number) => void;
) => Aisle | undefined;
setArrowAisleWidth: (aisleUuid: string, width: number) => Aisle | undefined;
setArrowsAisleProperties: (
aisleUuid: string,
props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
) => void;
) => Aisle | undefined;
setArcAisleWidth: (
aisleUuid: string,
props: { aisleWidth?: number; isFlipped: boolean }
) => void;
setCircleAisleWidth: (aisleUuid: string, width: number) => void;
) => Aisle | undefined;
setCircleAisleWidth: (aisleUuid: string, width: number) => Aisle | undefined;
setJunctionAisleProperties: (
aisleUuid: string,
props: { aisleWidth?: number; isFlipped: boolean }
) => void;
) => Aisle | undefined;
getAisleById: (uuid: string) => Aisle | undefined;
getAislesByPointId: (uuid: string) => Aisle[] | [];
@@ -53,28 +52,43 @@ export const createAisleStore = () => {
immer((set, get) => ({
aisles: [],
setAisles: (aisles) =>
setAisles: (aisles) => {
set((state) => {
state.aisles = aisles;
}),
});
return aisles;
},
addAisle: (aisle) =>
addAisle: (aisle) => {
set((state) => {
state.aisles.push(aisle);
}),
});
return aisle;
},
updateAisle: (uuid, updated) =>
updateAisle: (uuid, updated) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
if (aisle) {
Object.assign(aisle, updated);
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
removeAisle: (uuid) =>
removeAisle: (uuid) => {
let removedAisle: Aisle | undefined;
set((state) => {
state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
}),
const index = state.aisles.findIndex((a) => a.aisleUuid === uuid);
if (index !== -1) {
removedAisle = JSON.parse(JSON.stringify(state.aisles[index]));
state.aisles.splice(index, 1);
}
});
return removedAisle;
},
removePoint: (uuid) => {
const removedAisles: Aisle[] = [];
@@ -94,9 +108,11 @@ export const createAisleStore = () => {
},
clearAisles: () => {
const clearedAisles = get().aisles;
set((state) => {
state.aisles = [];
})
});
return clearedAisles;
},
setPosition: (pointUuid, position) => {
@@ -113,34 +129,46 @@ export const createAisleStore = () => {
return updatedAisle;
},
setLayer: (pointUuid, layer) =>
setLayer: (pointUuid, layer) => {
let updatedAisle: Aisle | undefined;
set((state) => {
for (const aisle of state.aisles) {
const point = aisle.points.find((p) => p.pointUuid === pointUuid);
if (point) {
point.layer = layer;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}
}),
});
return updatedAisle;
},
setColor: (aisleUuid, color) =>
setColor: (aisleUuid, color) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle) {
aisle.type.aisleColor = color;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
// Type-specific property setters
setSolidAisleWidth: (aisleUuid, width) =>
setSolidAisleWidth: (aisleUuid, width) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "solid-aisle") {
aisle.type.aisleWidth = width;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
setDashedAisleProperties: (aisleUuid, props) =>
setDashedAisleProperties: (aisleUuid, props) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "dashed-aisle") {
@@ -150,10 +178,14 @@ export const createAisleStore = () => {
aisle.type.dashLength = props.dashLength;
if (props.gapLength !== undefined)
aisle.type.gapLength = props.gapLength;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
setDottedAisleProperties: (aisleUuid, props) =>
setDottedAisleProperties: (aisleUuid, props) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "dotted-aisle") {
@@ -161,18 +193,26 @@ export const createAisleStore = () => {
aisle.type.dotRadius = props.dotRadius;
if (props.gapLength !== undefined)
aisle.type.gapLength = props.gapLength;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
setArrowAisleWidth: (aisleUuid, width) =>
setArrowAisleWidth: (aisleUuid, width) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "arrow-aisle") {
aisle.type.aisleWidth = width;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
setArrowsAisleProperties: (aisleUuid, props) =>
setArrowsAisleProperties: (aisleUuid, props) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "arrows-aisle") {
@@ -182,10 +222,14 @@ export const createAisleStore = () => {
aisle.type.aisleLength = props.aisleLength;
if (props.gapLength !== undefined)
aisle.type.gapLength = props.gapLength;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
setArcAisleWidth: (aisleUuid, props) =>
setArcAisleWidth: (aisleUuid, props) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "arc-aisle") {
@@ -193,18 +237,26 @@ export const createAisleStore = () => {
aisle.type.aisleWidth = props.aisleWidth;
if (props.isFlipped !== undefined)
aisle.type.isFlipped = props.isFlipped;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
setCircleAisleWidth: (aisleUuid, width) =>
setCircleAisleWidth: (aisleUuid, width) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "circle-aisle") {
aisle.type.aisleWidth = width;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
setJunctionAisleProperties: (aisleUuid, props) =>
setJunctionAisleProperties: (aisleUuid, props) => {
let updatedAisle: Aisle | undefined;
set((state) => {
const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
if (aisle && aisle.type.aisleType === "junction-aisle") {
@@ -212,8 +264,11 @@ export const createAisleStore = () => {
aisle.type.aisleWidth = props.aisleWidth;
if (props.isFlipped !== undefined)
aisle.type.isFlipped = props.isFlipped;
updatedAisle = JSON.parse(JSON.stringify(aisle));
}
}),
});
return updatedAisle;
},
getAisleById: (uuid) => {
return get().aisles.find((a) => a.aisleUuid === uuid);

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

@@ -47,7 +47,7 @@ interface BuilderState {
},
// Aisle General
selectedAisle: Object3D | null;
selectedAisle: {aisleMesh: Object3D | null, aisleData: Aisle} | null;
aisleType: AisleTypes;
aisleWidth: number;
aisleColor: AisleColors;
@@ -97,7 +97,7 @@ interface BuilderState {
setDecalDragState: (isDragging: boolean, draggingDecalUuid: string | null, dragOffset: Vector3 | null) => void;
// Setters - Aisle General
setSelectedAisle: (aisle: Object3D | null) => void;
setSelectedAisle: (aisle: {aisleMesh: Object3D | null, aisleData: Aisle} | null) => void;
setAisleType: (type: AisleTypes) => void;
setAisleWidth: (width: number) => void;
setAisleColor: (color: AisleColors) => void;
@@ -325,7 +325,7 @@ export const useBuilderStore = create<BuilderState>()(
// === Setters: Aisle General ===
setSelectedAisle: (aisle: Object3D | null) => {
setSelectedAisle: (aisle: {aisleMesh: Object3D | null, aisleData: Aisle} | null) => {
set((state) => {
state.selectedAisle = aisle;
});