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

Refactor aisle properties and types in builder store

Browse Source 
- Updated AisleProperties component to include new properties for dashed, dotted, and arrows aisles.
- Added new handlers for dash length, gap length, dot radius, and aisle length changes.
- Enhanced aisle type management in AisleCreator to handle new aisle types and their properties.
- Introduced type-specific setters in useAisleStore for better aisle property management.
- Updated builderTypes to define specific interfaces for each aisle type.
- Improved rendering logic for advanced properties based on selected aisle type.
This commit is contained in:
Jerald-Golden-B
2025-05-29 16:37:25 +05:30
parent d30ae34426
commit 9875239d54
11 changed files with 609 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,13 +5,13 @@ import * as Constants from '../../../../../../types/world/worldConstants';
function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
const arrows = useMemo(() => {
if (aisle.points.length < 2) return [];
if (aisle.points.length < 2 || aisle.type.aisleType !== 'arrows-aisle') return [];
const start = new THREE.Vector3(...aisle.points[0].position);
const end = new THREE.Vector3(...aisle.points[1].position);
const width = aisle.type.aisleWidth || 0.1;
const arrowLength = 0.6;
const spacing = 0.6;
const arrowLength = aisle.type.aisleLength || 0.6;
const spacing = aisle.type.gapLength || 0.6;
const direction = new THREE.Vector3().subVectors(end, start);
const length = direction.length();
@@ -22,7 +22,7 @@ function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
const arrowShapes: { shape: THREE.Shape; position: THREE.Vector3; rotationY: number }[] = [];
for (let i = 0; i < count; i++) {
const initialOffset = 0.6;
const initialOffset = arrowLength;
const center = new THREE.Vector3().copy(start).addScaledVector(direction, initialOffset + i * (arrowLength + spacing));
const shape = new THREE.Shape();

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

@@ -5,13 +5,13 @@ import * as Constants from '../../../../../../types/world/worldConstants';
function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
const shapes = useMemo(() => {
if (aisle.points.length < 2) return [];
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dashed-aisle') return [];
const start = new THREE.Vector3(...aisle.points[0].position);
const end = new THREE.Vector3(...aisle.points[1].position);
const width = aisle.type.aisleWidth || 0.1;
const dashLength = 0.5;
const gapLength = 0.3;
const dashLength = aisle.type.dashLength || 0.5;
const gapLength = aisle.type.gapLength || 0.3;
const direction = new THREE.Vector3().subVectors(end, start).normalize();
const perp = new THREE.Vector3(-direction.z, 0, direction.x).normalize();

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

@@ -5,12 +5,12 @@ import * as Constants from '../../../../../../types/world/worldConstants';
function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
const shapes = useMemo(() => {
if (aisle.points.length < 2) return [];
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dotted-aisle') return [];
const start = new THREE.Vector3(...aisle.points[0].position);
const end = new THREE.Vector3(...aisle.points[1].position);
const width = aisle.type.aisleWidth || 0.1;
const dotSpacing = 0.5;
const width = aisle.type.dotRadius || 0.1;
const dotSpacing = aisle.type.gapLength || 0.5;
const dotRadius = width * 0.6;
const totalLength = new THREE.Vector3().subVectors(end, start).length();

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

@@ -5,7 +5,7 @@ import * as Constants from '../../../../../../types/world/worldConstants';
function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
const shape = useMemo(() => {
if (aisle.points.length < 2) return null;
if (aisle.points.length < 2 || aisle.type.aisleType !== 'solid-aisle') return null;
const start = new THREE.Vector3(...aisle.points[0].position);
const end = new THREE.Vector3(...aisle.points[1].position);

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

@@ -17,7 +17,7 @@ function AisleCreator() {
const [tempPoints, setTempPoints] = useState<Point[]>([]);
const [isCreating, setIsCreating] = useState(false);
const { aisleType, aisleWidth, aisleColor } = useBuilderStore();
const { aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength, } = useBuilderStore();
// useEffect(() => {
// if (tempPoints.length > 0) {
@@ -86,7 +86,7 @@ function AisleCreator() {
if (!point) return;
if (['solid-aisle', 'dashed-aisle', 'stripped-aisle', 'dotted-aisle', 'arrows-aisle'].includes(aisleType)) {
if (aisleType === 'solid-aisle') {
const newPoint: Point = {
uuid: THREE.MathUtils.generateUUID(),
position: [point.x, point.y, point.z],
@@ -102,18 +102,123 @@ function AisleCreator() {
points: [tempPoints[0], newPoint],
type: {
typeName: 'Aisle',
aisleType: aisleType,
aisleType: 'solid-aisle',
aisleColor: aisleColor,
aisleWidth: aisleWidth
}
};
addAisle(aisle);
setTempPoints([newPoint]);
}
} else if (['arc-aisle', 'circle-aisle', 'arrow-aisle', 'junction-aisle'].includes(aisleType)) {
console.log();
} 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]);
setIsCreating(true);
} else {
const aisle: Aisle = {
uuid: THREE.MathUtils.generateUUID(),
points: [tempPoints[0], newPoint],
type: {
typeName: 'Aisle',
aisleType: 'dashed-aisle',
aisleColor: aisleColor,
aisleWidth: aisleWidth,
dashLength: dashLength,
gapLength: gapLength
}
};
addAisle(aisle);
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]);
setIsCreating(true);
} else {
const aisle: Aisle = {
uuid: THREE.MathUtils.generateUUID(),
points: [tempPoints[0], newPoint],
type: {
typeName: 'Aisle',
aisleType: 'stripped-aisle',
aisleColor: aisleColor,
aisleWidth: aisleWidth
}
};
addAisle(aisle);
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]);
setIsCreating(true);
} else {
const aisle: Aisle = {
uuid: THREE.MathUtils.generateUUID(),
points: [tempPoints[0], newPoint],
type: {
typeName: 'Aisle',
aisleType: 'dotted-aisle',
aisleColor: aisleColor,
dotRadius: dotRadius,
gapLength: gapLength
}
};
addAisle(aisle);
setTempPoints([newPoint]);
}
} 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]);
setIsCreating(true);
} else {
const aisle: Aisle = {
uuid: THREE.MathUtils.generateUUID(),
points: [tempPoints[0], newPoint],
type: {
typeName: 'Aisle',
aisleType: 'arrows-aisle',
aisleColor: aisleColor,
aisleWidth: aisleWidth,
aisleLength: aisleLength,
gapLength: gapLength
}
};
addAisle(aisle);
setTempPoints([newPoint]);
}
} else if (aisleType === 'arc-aisle') {
console.log('Creating arc-aisle');
} else if (aisleType === 'circle-aisle') {
console.log('Creating circle-aisle');
} else if (aisleType === 'junction-aisle') {
console.log('Creating junction-aisle');
}
};
@@ -143,7 +248,7 @@ function AisleCreator() {
canvasElement.removeEventListener("click", onMouseClick);
canvasElement.removeEventListener("contextmenu", onContext);
};
}, [gl, camera, scene, raycaster, pointer, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, addAisle, aisleType, aisleColor, aisleWidth]);
}, [gl, camera, scene, raycaster, pointer, plane, toggleView, toolMode, activeLayer, socket, tempPoints, isCreating, addAisle, aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength]);
return (
<>
@@ -161,7 +266,7 @@ function AisleCreator() {
))}
</group>
<ReferenceAisle tempPoints={tempPoints} aisleType={aisleType} aisleWidth={aisleWidth} aisleColor={aisleColor} />
<ReferenceAisle tempPoints={tempPoints} />
</>
);
}

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

@@ -4,15 +4,14 @@ import { useFrame, useThree } from '@react-three/fiber';
import { useActiveLayer, useToolMode, useToggleView } from '../../../../store/builder/store';
import * as Constants from '../../../../types/world/worldConstants';
import { Extrude } from '@react-three/drei';
import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
interface ReferenceAisleProps {
tempPoints: Point[];
aisleType: AisleTypes;
aisleWidth: number;
aisleColor: AisleColors;
}
function ReferenceAisle({ tempPoints, aisleType, aisleWidth, aisleColor }: Readonly<ReferenceAisleProps>) {
function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
const { aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength, } = useBuilderStore();
const { pointer, raycaster, camera } = useThree();
const { toolMode } = useToolMode();
const { toggleView } = useToggleView();
@@ -31,23 +30,92 @@ function ReferenceAisle({ tempPoints, aisleType, aisleWidth, aisleColor }: Reado
if (intersectionPoint) {
mousePosRef.current.copy(intersectionPoint);
setTempAisle({
uuid: 'temp-aisle',
points: [
tempPoints[0],
{
uuid: 'temp-point',
position: [mousePosRef.current.x, mousePosRef.current.y, mousePosRef.current.z],
layer: activeLayer
if (aisleType === 'solid-aisle' || aisleType === 'stripped-aisle') {
setTempAisle({
uuid: 'temp-aisle',
points: [
tempPoints[0],
{
uuid: 'temp-point',
position: [mousePosRef.current.x, mousePosRef.current.y, mousePosRef.current.z],
layer: activeLayer
}
],
type: {
typeName: 'Aisle',
aisleType: aisleType,
aisleColor: aisleColor,
aisleWidth: aisleWidth
}
],
type: {
typeName: 'Aisle',
aisleType: aisleType,
aisleColor: aisleColor,
aisleWidth: aisleWidth
}
});
});
} else if (aisleType === 'dashed-aisle') {
setTempAisle({
uuid: 'temp-aisle',
points: [
tempPoints[0],
{
uuid: 'temp-point',
position: [mousePosRef.current.x, mousePosRef.current.y, mousePosRef.current.z],
layer: activeLayer
}
],
type: {
typeName: 'Aisle',
aisleType: aisleType,
aisleColor: aisleColor,
aisleWidth: aisleWidth,
dashLength: dashLength,
gapLength: gapLength
}
});
} else if (aisleType === 'dotted-aisle') {
setTempAisle({
uuid: 'temp-aisle',
points: [
tempPoints[0],
{
uuid: 'temp-point',
position: [mousePosRef.current.x, mousePosRef.current.y, mousePosRef.current.z],
layer: activeLayer
}
],
type: {
typeName: 'Aisle',
aisleType: aisleType,
aisleColor: aisleColor,
dotRadius: dotRadius,
gapLength: gapLength
}
});
} else if (aisleType === 'arrow-aisle') {
console.log();
} else if (aisleType === 'arrows-aisle') {
setTempAisle({
uuid: 'temp-aisle',
points: [
tempPoints[0],
{
uuid: 'temp-point',
position: [mousePosRef.current.x, mousePosRef.current.y, mousePosRef.current.z],
layer: activeLayer
}
],
type: {
typeName: 'Aisle',
aisleType: aisleType,
aisleColor: aisleColor,
aisleWidth: aisleWidth,
aisleLength: aisleLength,
gapLength: gapLength
}
});
} else if (aisleType === 'arc-aisle') {
console.log();
} else if (aisleType === 'circle-aisle') {
console.log();
} else if (aisleType === 'junction-aisle') {
console.log();
}
}
} else if (tempAisle !== null) {
setTempAisle(null);
@@ -86,7 +154,7 @@ export default ReferenceAisle;
function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
const shape = useMemo(() => {
if (aisle.points.length < 2) return null;
if (aisle.points.length < 2 || aisle.type.aisleType !== 'solid-aisle') return null;
const start = new THREE.Vector3(...aisle.points[0].position);
const end = new THREE.Vector3(...aisle.points[1].position);
@@ -133,13 +201,13 @@ function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
const shapes = useMemo(() => {
if (aisle.points.length < 2) return [];
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dashed-aisle') return [];
const start = new THREE.Vector3(...aisle.points[0].position);
const end = new THREE.Vector3(...aisle.points[1].position);
const width = aisle.type.aisleWidth || 0.1;
const dashLength = 0.5;
const gapLength = 0.3;
const dashLength = aisle.type.dashLength || 0.5;
const gapLength = aisle.type.gapLength || 0.3;
const direction = new THREE.Vector3().subVectors(end, start).normalize();
const perp = new THREE.Vector3(-direction.z, 0, direction.x).normalize();
@@ -198,12 +266,12 @@ function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
const shapes = useMemo(() => {
if (aisle.points.length < 2) return [];
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dotted-aisle') return [];
const start = new THREE.Vector3(...aisle.points[0].position);
const end = new THREE.Vector3(...aisle.points[1].position);
const width = aisle.type.aisleWidth || 0.1;
const dotSpacing = 0.5;
const width = aisle.type.dotRadius || 0.1;
const dotSpacing = aisle.type.gapLength || 0.5;
const dotRadius = width * 0.6;
const totalLength = new THREE.Vector3().subVectors(end, start).length();
@@ -250,13 +318,13 @@ function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
const arrows = useMemo(() => {
if (aisle.points.length < 2) return [];
if (aisle.points.length < 2 || aisle.type.aisleType !== 'arrows-aisle') return [];
const start = new THREE.Vector3(...aisle.points[0].position);
const end = new THREE.Vector3(...aisle.points[1].position);
const width = aisle.type.aisleWidth || 0.1;
const arrowLength = 0.6;
const spacing = 0.6;
const arrowLength = aisle.type.aisleLength || 0.6;
const spacing = aisle.type.gapLength || 0.6;
const direction = new THREE.Vector3().subVectors(end, start);
const length = direction.length();
@@ -267,7 +335,7 @@ function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
const arrowShapes: { shape: THREE.Shape; position: THREE.Vector3; rotationY: number }[] = [];
for (let i = 0; i < count; i++) {
const initialOffset = 0.6;
const initialOffset = arrowLength;
const center = new THREE.Vector3().copy(start).addScaledVector(direction, initialOffset + i * (arrowLength + spacing));
const shape = new THREE.Shape();