diff --git a/app/src/modules/builder/aisle/Instances/aisleInstances.tsx b/app/src/modules/builder/aisle/Instances/aisleInstances.tsx
index efcbf58..6f34726 100644
--- a/app/src/modules/builder/aisle/Instances/aisleInstances.tsx
+++ b/app/src/modules/builder/aisle/Instances/aisleInstances.tsx
@@ -11,13 +11,13 @@ function AisleInstances() {
return (
- <>
+
{aisles.map((aisle) =>
)}
- >
+
)
}
diff --git a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowsAisle.tsx b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowsAisle.tsx
index a0c5c32..28fe74a 100644
--- a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowsAisle.tsx
+++ b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/arrowsAisle.tsx
@@ -1,9 +1,15 @@
import * as THREE from 'three';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei';
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 }) {
+ const aisleRef = useRef(null);
+ const { toolMode } = useToolMode();
+ const { setSelectedAisle, hoveredPoint } = useBuilderStore();
+
const arrows = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'arrows-aisle') return [];
@@ -46,12 +52,25 @@ function ArrowsAisle({ aisle }: { readonly aisle: Aisle }) {
return arrowShapes;
}, [aisle]);
+ const handleClick = () => {
+ if (toolMode === 'move' && !hoveredPoint) {
+ setSelectedAisle(aisleRef.current);
+ }
+ }
+
if (arrows.length === 0) return null;
return (
{
+ setSelectedAisle(null);
+ }}
>
{arrows.map(({ shape, position, rotationY }, index) => (
diff --git a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dashedAisle.tsx b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dashedAisle.tsx
index c75b621..5a8c028 100644
--- a/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dashedAisle.tsx
+++ b/app/src/modules/builder/aisle/Instances/instance/aisleTypes/dashedAisle.tsx
@@ -1,9 +1,15 @@
import * as THREE from 'three';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
import { Extrude } from '@react-three/drei';
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 }) {
+ const aisleRef = useRef(null);
+ const { toolMode } = useToolMode();
+ const { setSelectedAisle, hoveredPoint } = useBuilderStore();
+
const shapes = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dashed-aisle') return [];
@@ -44,12 +50,25 @@ function DashedAisle({ aisle }: { readonly aisle: Aisle }) {
return shapes;
}, [aisle]);
+ const handleClick = () => {
+ if (toolMode === 'move' && !hoveredPoint) {
+ setSelectedAisle(aisleRef.current);
+ }
+ }
+
if (shapes.length === 0) return null;
return (
{
+ setSelectedAisle(null);
+ }}
>
{shapes.map((shape, index) => (
(null);
+ const { toolMode } = useToolMode();
+ const { setSelectedAisle, hoveredPoint } = useBuilderStore();
+
const shapes = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'dotted-aisle') return [];
@@ -31,12 +37,25 @@ function DottedAisle({ aisle }: { readonly aisle: Aisle }) {
return shapes;
}, [aisle]);
+ const handleClick = () => {
+ if (toolMode === 'move' && !hoveredPoint) {
+ setSelectedAisle(aisleRef.current);
+ }
+ }
+
if (shapes.length === 0) return null;
return (
{
+ setSelectedAisle(null);
+ }}
>
{shapes.map((shape, index) => (
(null);
+ const { toolMode } = useToolMode();
+ const { setSelectedAisle, hoveredPoint } = useBuilderStore();
+
const shape = useMemo(() => {
if (aisle.points.length < 2 || aisle.type.aisleType !== 'solid-aisle') return null;
@@ -29,12 +35,25 @@ function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
return shape;
}, [aisle]);
+ const handleClick = () => {
+ if (toolMode === 'move' && !hoveredPoint) {
+ setSelectedAisle(aisleRef.current);
+ }
+ }
+
if (!shape) return null;
return (
{
+ setSelectedAisle(null);
+ }}
>
{
+ useEffect(() => {
// console.log('selectedFloorItem: ', selectedFloorItem);
- },[selectedFloorItem])
+ }, [selectedFloorItem])
- useEffect(()=>{
+ useEffect(() => {
// console.log('selectedFloorItem: ', deletableFloorItem);
- },[deletableFloorItem])
+ }, [deletableFloorItem])
+
+ useEffect(() => {
+ console.log('selectedAisle: ', selectedAisle);
+ }, [selectedAisle])
return (
- <>
-
-
+
+ {selectedAisle && (
+
- {deletableFloorItem && (
-
- )}
- {selectedWallItem && (
-
- )}
- {selectedFloorItem && (
-
- )}
- {selectedEventSphere && (
-
- )}
-
- >
+ )}
+ {deletableFloorItem && (
+
+ )}
+ {selectedWallItem && (
+
+ )}
+ {selectedFloorItem && (
+
+ )}
+ {selectedEventSphere && (
+
+ )}
+
);
}
diff --git a/app/src/store/builder/useBuilderStore.ts b/app/src/store/builder/useBuilderStore.ts
index cbf71dd..f8f52e7 100644
--- a/app/src/store/builder/useBuilderStore.ts
+++ b/app/src/store/builder/useBuilderStore.ts
@@ -1,3 +1,4 @@
+import { Object3D } from 'three';
import { create } from 'zustand';
import { immer } from 'zustand/middleware/immer';
@@ -6,6 +7,8 @@ interface BuilderState {
hoveredPoint: Point | null;
+ selectedAisle: Object3D | null;
+
aisleType: AisleTypes;
aisleWidth: number;
aisleColor: AisleColors;
@@ -24,6 +27,8 @@ interface BuilderState {
setHoveredPoint: (point: Point | null) => void;
+ setSelectedAisle: (aisle: Object3D | null) => void;
+
setAisleType: (type: AisleTypes) => void;
setAisleWidth: (width: number) => void;
setAisleColor: (color: AisleColors) => void;
@@ -51,6 +56,8 @@ export const useBuilderStore = create()(
hoveredPoint: null,
+ selectedAisle: null,
+
aisleType: 'solid-aisle',
aisleWidth: 0.1,
aisleColor: 'yellow',
@@ -67,6 +74,12 @@ export const useBuilderStore = create()(
});
},
+ setSelectedAisle: (aisle: Object3D | null) => {
+ set((state) => {
+ state.selectedAisle = aisle;
+ });
+ },
+
setAisleType: (type) => {
set((state) => {
state.aisleType = type;