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

v2-ui #84

Merged
Vishnu merged 53 commits from v2-ui into main 2025-05-10 13:42:19 +00:00
Conversation 0 Commits 53 Files Changed 92 +1075 -604
9 changed files with 1075 additions and 604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 32b3247765 - Show all commits

453
app/src/modules/builder/builder.tsx
View File

@ -51,59 +51,60 @@ import Layer2DVisibility from "./geomentries/layers/layer2DVisibility";
import ZoneGroup from "./groups/zoneGroup"; import ZoneGroup from "./groups/zoneGroup";
import MeasurementTool from "../scene/tools/measurementTool"; import MeasurementTool from "../scene/tools/measurementTool";
import NavMesh from "../simulation/vehicle/navMesh/navMesh"; import NavMesh from "../simulation/vehicle/navMesh/navMesh";
import CalculateAreaGroup from "./groups/calculateAreaGroup";
export default function Builder() { export default function Builder() {
const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements. const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
const csg = useRef(); // Reference for CSG object, used for 3D modeling. const csg = useRef(); // Reference for CSG object, used for 3D modeling.
const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects. const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects.
const scene = useRef() as Types.RefScene; // Reference to the scene. const scene = useRef() as Types.RefScene; // Reference to the scene.
const camera = useRef() as Types.RefCamera; // Reference to the camera object. const camera = useRef() as Types.RefCamera; // Reference to the camera object.
const controls = useRef<any>(); // Reference to the controls object. const controls = useRef<any>(); // Reference to the controls object.
const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene. const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene.
const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control. const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.
// Assigning the scene and camera from the Three.js state to the references. // Assigning the scene and camera from the Three.js state to the references.
scene.current = state.scene; scene.current = state.scene;
camera.current = state.camera; camera.current = state.camera;
controls.current = state.controls; controls.current = state.controls;
raycaster.current = state.raycaster; raycaster.current = state.raycaster;
const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference. const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
const grid = useRef() as any; // Reference for a grid object for raycaster reference. const grid = useRef() as any; // Reference for a grid object for raycaster reference.
const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line. const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
const isSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (end). const isSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (end).
const anglesnappedPoint = useRef() as Types.RefVector3; // Reference for storing an angle-snapped point when the line is in 90 degree etc... const anglesnappedPoint = useRef() as Types.RefVector3; // Reference for storing an angle-snapped point when the line is in 90 degree etc...
const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active. const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active.
const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point. const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point.
const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start). const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start).
const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items. const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items.
const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active. const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active.
const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation. const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation.
const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn. const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn.
const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn. const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
const onlyFloorline = useRef<Types.OnlyFloorLine>([]); // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn. const onlyFloorline = useRef<Types.OnlyFloorLine>([]); // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn.
const onlyFloorlines = useRef<Types.OnlyFloorLines>([]); // Reference for all the floor lines that are ever drawn. const onlyFloorlines = useRef<Types.OnlyFloorLines>([]); // Reference for all the floor lines that are ever drawn.
const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw. const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw.
const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not. const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not.
const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed. const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed.
const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf). const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf).
const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors. const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
const AttachedObject = useRef() as Types.RefMesh; // Reference for an object that is attached using dbl click for transform controls rotation. const AttachedObject = useRef() as Types.RefMesh; // Reference for an object that is attached using dbl click for transform controls rotation.
const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group. const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group.
const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn. const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created. const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
const floorGroupAisle = useRef() as Types.RefGroup; const floorGroupAisle = useRef() as Types.RefGroup;
const zoneGroup = useRef() as Types.RefGroup; const zoneGroup = useRef() as Types.RefGroup;
const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls. const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.
const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted. const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted.
const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted. const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted.
const hoveredDeletableFloorItem = useRef() as Types.RefMesh; // Reference for the currently hovered floor item that can be deleted. const hoveredDeletableFloorItem = useRef() as Types.RefMesh; // Reference for the currently hovered floor item that can be deleted.
const hoveredDeletableWallItem = useRef() as Types.RefMesh; // Reference for the currently hovered wall item that can be deleted. const hoveredDeletableWallItem = useRef() as Types.RefMesh; // Reference for the currently hovered wall item that can be deleted.
const hoveredDeletablePillar = useRef() as Types.RefMesh; // Reference for the currently hovered pillar that can be deleted. const hoveredDeletablePillar = useRef() as Types.RefMesh; // Reference for the currently hovered pillar that can be deleted.
const currentWallItem = useRef() as Types.RefMesh; // Reference for the currently selected wall item that can be scaled, dragged etc... const currentWallItem = useRef() as Types.RefMesh; // Reference for the currently selected wall item that can be scaled, dragged etc...
const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position. const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
const [selectedItemsIndex, setSelectedItemsIndex] = useState<Types.Number | null>(null); // State for tracking the index of the selected item. const [selectedItemsIndex, setSelectedItemsIndex] = useState<Types.Number | null>(null); // State for tracking the index of the selected item.
const { activeLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx. const { activeLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
@ -119,42 +120,42 @@ export default function Builder() {
const { setWalls } = useWalls(); const { setWalls } = useWalls();
const { refTextupdate, setRefTextUpdate } = useRefTextUpdate(); const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
// const loader = new GLTFLoader(); // const loader = new GLTFLoader();
// const dracoLoader = new DRACOLoader(); // const dracoLoader = new DRACOLoader();
// dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/'); // dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
// loader.setDRACOLoader(dracoLoader); // loader.setDRACOLoader(dracoLoader);
////////// Assest Configuration Values ////////// ////////// Assest Configuration Values //////////
const AssetConfigurations: Types.AssetConfigurations = { const AssetConfigurations: Types.AssetConfigurations = {
arch: { arch: {
modelUrl: arch, modelUrl: arch,
scale: [0.75, 0.75, 0.75], scale: [0.75, 0.75, 0.75],
csgscale: [2, 4, 0.5], csgscale: [2, 4, 0.5],
csgposition: [0, 2, 0], csgposition: [0, 2, 0],
positionY: () => 0, positionY: () => 0,
type: "Fixed-Move", type: "Fixed-Move",
}, },
door: { door: {
modelUrl: door, modelUrl: door,
scale: [0.75, 0.75, 0.75], scale: [0.75, 0.75, 0.75],
csgscale: [2, 4, 0.5], csgscale: [2, 4, 0.5],
csgposition: [0, 2, 0], csgposition: [0, 2, 0],
positionY: () => 0, positionY: () => 0,
type: "Fixed-Move", type: "Fixed-Move",
}, },
window: { window: {
modelUrl: Window, modelUrl: Window,
scale: [0.75, 0.75, 0.75], scale: [0.75, 0.75, 0.75],
csgscale: [5, 3, 0.5], csgscale: [5, 3, 0.5],
csgposition: [0, 1.5, 0], csgposition: [0, 1.5, 0],
positionY: (intersectionPoint) => intersectionPoint.point.y, positionY: (intersectionPoint) => intersectionPoint.point.y,
type: "Free-Move", type: "Free-Move",
}, },
}; };
////////// All Toggle's ////////// ////////// All Toggle's //////////
useEffect(() => { useEffect(() => {
setRefTextUpdate((prevUpdate: number) => prevUpdate - 1); setRefTextUpdate((prevUpdate: number) => prevUpdate - 1);
@ -176,167 +177,167 @@ export default function Builder() {
} }
}, [toggleView]); }, [toggleView]);
useEffect(() => { useEffect(() => {
THREE.Cache.clear(); THREE.Cache.clear();
THREE.Cache.enabled = true; THREE.Cache.enabled = true;
}, []); }, []);
useEffect(() => { useEffect(() => {
const email = localStorage.getItem("email"); const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0]; const organization = email!.split("@")[1].split(".")[0];
async function fetchVisibility() { async function fetchVisibility() {
const visibility = await findEnvironment( const visibility = await findEnvironment(
organization, organization,
localStorage.getItem("userId")! localStorage.getItem("userId")!
); );
if (visibility) { if (visibility) {
setRoofVisibility(visibility.roofVisibility); setRoofVisibility(visibility.roofVisibility);
setWallVisibility(visibility.wallVisibility); setWallVisibility(visibility.wallVisibility);
setShadows(visibility.shadowVisibility); setShadows(visibility.shadowVisibility);
setRenderDistance(visibility.renderDistance); setRenderDistance(visibility.renderDistance);
setLimitDistance(visibility.limitDistance); setLimitDistance(visibility.limitDistance);
} }
} }
fetchVisibility(); fetchVisibility();
}, []); }, []);
////////// UseFrame is Here ////////// ////////// UseFrame is Here //////////
useFrame(() => { useFrame(() => {
if (toolMode) { if (toolMode) {
Draw( Draw(
state, state,
plane, plane,
cursorPosition, cursorPosition,
floorPlanGroupPoint, floorPlanGroupPoint,
floorPlanGroupLine, floorPlanGroupLine,
snappedPoint, snappedPoint,
isSnapped, isSnapped,
isSnappedUUID, isSnappedUUID,
line, line,
lines, lines,
ispreSnapped, ispreSnapped,
floorPlanGroup, floorPlanGroup,
ReferenceLineMesh, ReferenceLineMesh,
LineCreated, LineCreated,
setRefTextUpdate, setRefTextUpdate,
Tube, Tube,
anglesnappedPoint, anglesnappedPoint,
isAngleSnapped, isAngleSnapped,
toolMode toolMode
); );
} }
}); });
////////// Return ////////// ////////// Return //////////
return ( return (
<> <>
<Ground grid={grid} plane={plane} /> <Ground grid={grid} plane={plane} />
<DistanceText key={toggleView} /> <DistanceText key={toggleView} />
<ReferenceDistanceText <ReferenceDistanceText
key={refTextupdate} key={refTextupdate}
line={ReferenceLineMesh.current} line={ReferenceLineMesh.current}
/> />
<SocketResponses <SocketResponses
floorPlanGroup={floorPlanGroup} floorPlanGroup={floorPlanGroup}
lines={lines} lines={lines}
floorGroup={floorGroup} floorGroup={floorGroup}
floorGroupAisle={floorGroupAisle} floorGroupAisle={floorGroupAisle}
scene={scene} scene={scene}
onlyFloorlines={onlyFloorlines} onlyFloorlines={onlyFloorlines}
AssetConfigurations={AssetConfigurations} AssetConfigurations={AssetConfigurations}
itemsGroup={itemsGroup} itemsGroup={itemsGroup}
isTempLoader={isTempLoader} isTempLoader={isTempLoader}
tempLoader={tempLoader} tempLoader={tempLoader}
currentLayerPoint={currentLayerPoint} currentLayerPoint={currentLayerPoint}
floorPlanGroupPoint={floorPlanGroupPoint} floorPlanGroupPoint={floorPlanGroupPoint}
floorPlanGroupLine={floorPlanGroupLine} floorPlanGroupLine={floorPlanGroupLine}
zoneGroup={zoneGroup} zoneGroup={zoneGroup}
dragPointControls={dragPointControls} dragPointControls={dragPointControls}
/> />
<WallsAndWallItems <WallsAndWallItems
CSGGroup={CSGGroup} CSGGroup={CSGGroup}
AssetConfigurations={AssetConfigurations} AssetConfigurations={AssetConfigurations}
setSelectedItemsIndex={setSelectedItemsIndex} setSelectedItemsIndex={setSelectedItemsIndex}
selectedItemsIndex={selectedItemsIndex} selectedItemsIndex={selectedItemsIndex}
currentWallItem={currentWallItem} currentWallItem={currentWallItem}
csg={csg} csg={csg}
lines={lines} lines={lines}
hoveredDeletableWallItem={hoveredDeletableWallItem} hoveredDeletableWallItem={hoveredDeletableWallItem}
/> />
<FloorItemsGroup <FloorItemsGroup
itemsGroup={itemsGroup} itemsGroup={itemsGroup}
hoveredDeletableFloorItem={hoveredDeletableFloorItem} hoveredDeletableFloorItem={hoveredDeletableFloorItem}
AttachedObject={AttachedObject} AttachedObject={AttachedObject}
floorGroup={floorGroup} floorGroup={floorGroup}
tempLoader={tempLoader} tempLoader={tempLoader}
isTempLoader={isTempLoader} isTempLoader={isTempLoader}
plane={plane} plane={plane}
/> />
<FloorGroup <FloorGroup
floorGroup={floorGroup} floorGroup={floorGroup}
lines={lines} lines={lines}
referencePole={referencePole} referencePole={referencePole}
hoveredDeletablePillar={hoveredDeletablePillar} hoveredDeletablePillar={hoveredDeletablePillar}
/> />
<FloorPlanGroup <FloorPlanGroup
floorPlanGroup={floorPlanGroup} floorPlanGroup={floorPlanGroup}
floorPlanGroupLine={floorPlanGroupLine} floorPlanGroupLine={floorPlanGroupLine}
floorPlanGroupPoint={floorPlanGroupPoint} floorPlanGroupPoint={floorPlanGroupPoint}
floorGroup={floorGroup} floorGroup={floorGroup}
currentLayerPoint={currentLayerPoint} currentLayerPoint={currentLayerPoint}
dragPointControls={dragPointControls} dragPointControls={dragPointControls}
hoveredDeletablePoint={hoveredDeletablePoint} hoveredDeletablePoint={hoveredDeletablePoint}
hoveredDeletableLine={hoveredDeletableLine} hoveredDeletableLine={hoveredDeletableLine}
plane={plane} plane={plane}
line={line} line={line}
lines={lines} lines={lines}
onlyFloorline={onlyFloorline} onlyFloorline={onlyFloorline}
onlyFloorlines={onlyFloorlines} onlyFloorlines={onlyFloorlines}
ReferenceLineMesh={ReferenceLineMesh} ReferenceLineMesh={ReferenceLineMesh}
LineCreated={LineCreated} LineCreated={LineCreated}
isSnapped={isSnapped} isSnapped={isSnapped}
ispreSnapped={ispreSnapped} ispreSnapped={ispreSnapped}
snappedPoint={snappedPoint} snappedPoint={snappedPoint}
isSnappedUUID={isSnappedUUID} isSnappedUUID={isSnappedUUID}
isAngleSnapped={isAngleSnapped} isAngleSnapped={isAngleSnapped}
anglesnappedPoint={anglesnappedPoint} anglesnappedPoint={anglesnappedPoint}
/> />
<ZoneGroup /> <ZoneGroup />
<FloorGroupAilse <FloorGroupAilse
floorGroupAisle={floorGroupAisle} floorGroupAisle={floorGroupAisle}
plane={plane} plane={plane}
floorPlanGroupLine={floorPlanGroupLine} floorPlanGroupLine={floorPlanGroupLine}
floorPlanGroupPoint={floorPlanGroupPoint} floorPlanGroupPoint={floorPlanGroupPoint}
line={line} line={line}
lines={lines} lines={lines}
currentLayerPoint={currentLayerPoint} currentLayerPoint={currentLayerPoint}
dragPointControls={dragPointControls} dragPointControls={dragPointControls}
floorPlanGroup={floorPlanGroup} floorPlanGroup={floorPlanGroup}
ReferenceLineMesh={ReferenceLineMesh} ReferenceLineMesh={ReferenceLineMesh}
LineCreated={LineCreated} LineCreated={LineCreated}
isSnapped={isSnapped} isSnapped={isSnapped}
ispreSnapped={ispreSnapped} ispreSnapped={ispreSnapped}
snappedPoint={snappedPoint} snappedPoint={snappedPoint}
isSnappedUUID={isSnappedUUID} isSnappedUUID={isSnappedUUID}
isAngleSnapped={isAngleSnapped} isAngleSnapped={isAngleSnapped}
anglesnappedPoint={anglesnappedPoint} anglesnappedPoint={anglesnappedPoint}
/> />
<MeasurementTool /> <MeasurementTool />
<CalculateAreaGroup />
<NavMesh lines={lines} /> <NavMesh lines={lines} />
</> </>
); );
} }

29
app/src/modules/builder/functions/computeArea.ts Normal file
View File

@ -0,0 +1,29 @@
import { Vector2 } from "three";
export function computeArea(data: any, type: "zone" | "rooms" | "aisle"): any {
if (type === "zone") {
const points3D = data.map((p: any) => new Vector2(p[0], p[2]));
let area = 0;
for (let i = 0; i < points3D.length - 1; i++) {
const current = points3D[i];
const next = points3D[i + 1];
area += current.x * next.y - next.x * current.y;
}
return Math.abs(area) / 2;
}
if (type === "rooms") {
const points2D = data.coordinates.map(
(coordinate: any) =>
new Vector2(coordinate.position.x, coordinate.position.z)
);
let area = 0;
for (let i = 0; i < points2D.length - 1; i++) {
const current = points2D[i];
const next = points2D[i + 1];
area += current.x * next.y - next.x * current.y;
}
return Math.abs(area) / 2;
}
}

348
app/src/modules/builder/geomentries/lines/distanceText/distanceText.tsx
View File

@ -2,180 +2,226 @@ import { useEffect, useState } from "react";
import { getLines } from "../../../../../services/factoryBuilder/lines/getLinesApi"; import { getLines } from "../../../../../services/factoryBuilder/lines/getLinesApi";
import * as THREE from "three"; import * as THREE from "three";
import { import {
useActiveLayer, useActiveLayer,
useDeletedLines, useDeletedLines,
useNewLines, useNewLines,
useRoomsState, useRoomsState,
useToggleView, useToggleView,
} from "../../../../../store/store"; } from "../../../../../store/store";
import objectLinesToArray from "../lineConvertions/objectLinesToArray"; import objectLinesToArray from "../lineConvertions/objectLinesToArray";
import { Html } from "@react-three/drei"; import { Html } from "@react-three/drei";
import { Vector2 } from "three";
import * as Types from "../../../../../types/world/worldTypes"; import * as Types from "../../../../../types/world/worldTypes";
import getRoomsFromLines from "../getRoomsFromLines"; import getRoomsFromLines from "../getRoomsFromLines";
import * as turf from '@turf/turf';
const DistanceText = () => { const DistanceText = () => {
const [lines, setLines] = useState< const [lines, setLines] = useState<
{ {
distance: string; distance: string;
position: THREE.Vector3; position: THREE.Vector3;
userData: Types.Line; userData: Types.Line;
layer: string; layer: string;
}[] }[]
>([]); >([]);
const { activeLayer } = useActiveLayer(); const { activeLayer } = useActiveLayer();
const { toggleView } = useToggleView(); const { toggleView } = useToggleView();
const { newLines, setNewLines } = useNewLines(); const { newLines, setNewLines } = useNewLines();
const { deletedLines, setDeletedLines } = useDeletedLines(); const { deletedLines, setDeletedLines } = useDeletedLines();
const [linesState, setLinesState] = useState<Types.Lines>([]); const [linesState, setLinesState] = useState<Types.Lines>([]);
const { roomsState, setRoomsState } = useRoomsState(); const { roomsState, setRoomsState } = useRoomsState();
useEffect(() => {
if (linesState.length === 0) return;
const getLines = async () => {
if (lines.length > 2) {
const linesByLayer = linesState.reduce((acc: { [key: number]: any[] }, pair) => {
const layer = pair[0][2];
if (!acc[layer]) acc[layer] = [];
acc[layer].push(pair);
return acc;
}, {});
for (const layer in linesByLayer) {
const rooms: Types.Rooms = await getRoomsFromLines({ current: linesByLayer[layer] });
} useEffect(() => {
}
if (linesState.length === 0) return;
const getLines = async () => {
const points3D = linesState.map(line => {
const startPoint = line[0][0]; // First point of each wall line
return [startPoint.x, 0, startPoint.z];
});
// Ensure the polygon is closed
if (
points3D[0][0] !== points3D[points3D.length - 1][0] ||
points3D[0][1] !== points3D[points3D.length - 1][1]
) {
points3D.push(points3D[0]);
}
// Convert to 2D for turf (x, z)
const coords2D = points3D.map(p => [p[0], p[1]]);
const projected = points3D.map((p: any) => new Vector2(p[0], p[1]));
// Shoelace formula for 2D polygon
let area = 0;
const n = projected.length;
for (let i = 0; i < n - 1; i++) {
const curr = projected[i];
const next = projected[i + 1];
area += curr.x * next.y - next.x * curr.y;
}
// return Math.abs(area) / 2;
// Build polygon and compute area
// const polygon = turf.polygon([coords2D]);
// const area = turf.area(polygon);
// const area = computeAreaFrom3DPoints(coords2D)
//
if (lines.length > 2) {
const linesByLayer = linesState.reduce((acc: { [key: number]: any[] }, pair) => {
const layer = pair[0][2];
if (!acc[layer]) acc[layer] = [];
acc[layer].push(pair);
return acc;
}, {});
for (const layer in linesByLayer) {
const rooms: Types.Rooms = await getRoomsFromLines({ current: linesByLayer[layer] });
setRoomsState(rooms)
} }
getLines(); }
}, [linesState]) }
getLines();
}, [linesState, roomsState])
useEffect(() => {
const email = localStorage.getItem("email");
if (!email) return;
const organization = email.split("@")[1].split(".")[0];
getLines(organization).then((data) => { useEffect(() => {
data = objectLinesToArray(data); const email = localStorage.getItem("email");
setLinesState(data); if (!email) return;
const organization = email.split("@")[1].split(".")[0];
const lines = data getLines(organization).then((data) => {
.filter((line: Types.Line) => line[0][2] === activeLayer) data = objectLinesToArray(data);
.map((line: Types.Line) => { setLinesState(data);
const point1 = new THREE.Vector3(
line[0][0].x, const lines = data
line[0][0].y, .filter((line: Types.Line) => line[0][2] === activeLayer)
line[0][0].z .map((line: Types.Line) => {
); const point1 = new THREE.Vector3(
const point2 = new THREE.Vector3( line[0][0].x,
line[1][0].x, line[0][0].y,
line[1][0].y, line[0][0].z
line[1][0].z );
); const point2 = new THREE.Vector3(
const distance = point1.distanceTo(point2); line[1][0].x,
const midpoint = new THREE.Vector3() line[1][0].y,
.addVectors(point1, point2) line[1][0].z
.divideScalar(2); );
return { const distance = point1.distanceTo(point2);
distance: distance.toFixed(1), const midpoint = new THREE.Vector3()
position: midpoint, .addVectors(point1, point2)
userData: line, .divideScalar(2);
layer: activeLayer, return {
}; distance: distance.toFixed(1),
}); position: midpoint,
setLines(lines); userData: line,
layer: activeLayer,
};
}); });
}, [activeLayer]); setLines(lines);
});
}, [activeLayer]);
useEffect(() => { useEffect(() => {
if (newLines.length > 0) { if (newLines.length > 0) {
if (newLines[0][0][2] !== activeLayer) return; if (newLines[0][0][2] !== activeLayer) return;
const newLinesData = newLines.map((line: Types.Line) => { const newLinesData = newLines.map((line: Types.Line) => {
const point1 = new THREE.Vector3( const point1 = new THREE.Vector3(
line[0][0].x, line[0][0].x,
line[0][0].y, line[0][0].y,
line[0][0].z line[0][0].z
); );
const point2 = new THREE.Vector3( const point2 = new THREE.Vector3(
line[1][0].x, line[1][0].x,
line[1][0].y, line[1][0].y,
line[1][0].z line[1][0].z
); );
const distance = point1.distanceTo(point2); const distance = point1.distanceTo(point2);
const midpoint = new THREE.Vector3() const midpoint = new THREE.Vector3()
.addVectors(point1, point2) .addVectors(point1, point2)
.divideScalar(2); .divideScalar(2);
return { return {
distance: distance.toFixed(1), distance: distance.toFixed(1),
position: midpoint, position: midpoint,
userData: line, userData: line,
layer: activeLayer, layer: activeLayer,
}; };
}); });
setLines((prevLines) => [...prevLines, ...newLinesData]); setLines((prevLines) => [...prevLines, ...newLinesData]);
setLinesState((prevLines) => [...prevLines, ...newLines]); setLinesState((prevLines) => [...prevLines, ...newLines]);
setNewLines([]); setNewLines([]);
} }
}, [newLines, activeLayer]); }, [newLines, activeLayer]);
useEffect(() => { useEffect(() => {
if ((deletedLines as Types.Lines).length > 0) { if ((deletedLines as Types.Lines).length > 0) {
setLines((prevLines) => setLines((prevLines) =>
prevLines.filter( prevLines.filter(
(line) => (line) =>
!deletedLines.some( !deletedLines.some(
(deletedLine: any) => (deletedLine: any) =>
deletedLine[0][1] === line.userData[0][1] && deletedLine[0][1] === line.userData[0][1] &&
deletedLine[1][1] === line.userData[1][1] deletedLine[1][1] === line.userData[1][1]
) )
) )
); );
setLinesState(prev => setLinesState(prev =>
prev.filter(line => prev.filter(line =>
!(deletedLines as Types.Lines).some( !(deletedLines as Types.Lines).some(
deleted => deleted =>
line[0][1] === deleted[0][1] && line[1][1] === deleted[1][1] line[0][1] === deleted[0][1] && line[1][1] === deleted[1][1]
) )
) )
); );
setDeletedLines([]); setDeletedLines([]);
} setRoomsState([])
}, [deletedLines]); }
}, [deletedLines]);
return ( return (
<> <>
{toggleView && ( {toggleView && (
<group name="Distance_Text"> <group name="Distance_Text">
{lines.map((text) => ( {lines.map((text) => (
<Html <Html
// data // data
key={`${text.userData[0][1]}_${text.userData[1][1]}`} key={`${text.userData[0][1]}_${text.userData[1][1]}`}
userData={text.userData} userData={text.userData}
position={[text.position.x, 1, text.position.z]} position={[text.position.x, 1, text.position.z]}
// class // class
wrapperClass="distance-text-wrapper" wrapperClass="distance-text-wrapper"
className="distance-text" className="distance-text"
// other // other
zIndexRange={[1, 0]} zIndexRange={[1, 0]}
prepend prepend
sprite sprite
> >
<div <div
key={`${text.userData[0][1]}_${text.userData[1][1]}`} key={`${text.userData[0][1]}_${text.userData[1][1]}`}
className={`distance line-${text.userData[0][1]}_${text.userData[1][1]}_${text.layer}`} className={`distance line-${text.userData[0][1]}_${text.userData[1][1]}_${text.layer}`}
> >
{text.distance} m {text.distance} m
</div> </div>
</Html> </Html>
))} ))}
</group> </group>
)} )}
</> </>
); );
}; };
export default DistanceText; export default DistanceText;

65
app/src/modules/builder/groups/calculateAreaGroup.tsx Normal file
View File

@ -0,0 +1,65 @@
import React, { useEffect } from 'react';
import { useRoomsState, useToggleView } from '../../../store/store';
import { computeArea } from '../functions/computeArea';
import { Html } from '@react-three/drei';
import * as CONSTANTS from "../../../types/world/worldConstants";
import * as turf from '@turf/turf';
const CalculateAreaGroup = () => {
const { roomsState } = useRoomsState();
const { toggleView } = useToggleView();
return (
<group name="roomArea" visible={toggleView}>
{roomsState.length > 0 &&
roomsState.flat().map((room: any, index: number) => {
if (!toggleView) return null;
const coordinates = room.coordinates;
if (!coordinates || coordinates.length < 3) return null;
let coords2D = coordinates.map((p: any) => [p.position.x, p.position.z]);
const first = coords2D[0];
const last = coords2D[coords2D.length - 1];
if (first[0] !== last[0] || first[1] !== last[1]) {
coords2D.push(first);
}
const polygon = turf.polygon([coords2D]);
const center2D = turf.center(polygon).geometry.coordinates;
const sumY = coordinates.reduce((sum: number, p: any) => sum + p.position.y, 0);
const avgY = sumY / coordinates.length;
const area = computeArea(room, "rooms");
const formattedArea = `${area.toFixed(2)} m²`;
const htmlPosition: [number, number, number] = [
center2D[0],
avgY + CONSTANTS.zoneConfig.height,
center2D[1],
];
return (
<Html
key={`${index}-${room.layer || index}`}
position={htmlPosition}
wrapperClass="distance-text-wrapper"
className="distance-text"
zIndexRange={[1, 0]}
prepend
center
sprite
>
<div className={`distance area line-${room.layer || index}`}>
Room ({formattedArea})
</div>
</Html>
);
})}
</group>
);
}
export default CalculateAreaGroup;

69
app/src/modules/builder/groups/zoneGroup.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useMemo, useRef } from "react"; import React, { useState, useEffect, useMemo, useRef } from "react";
import { Line, Sphere } from "@react-three/drei"; import { Html, Line, Sphere } from "@react-three/drei";
import { useThree, useFrame } from "@react-three/fiber"; import { useThree, useFrame } from "@react-three/fiber";
import * as THREE from "three"; import * as THREE from "three";
import { import {
@ -16,6 +16,8 @@ import {
import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi"; import { getZonesApi } from "../../../services/factoryBuilder/zones/getZonesApi";
import * as CONSTANTS from "../../../types/world/worldConstants"; import * as CONSTANTS from "../../../types/world/worldConstants";
import * as turf from '@turf/turf';
import { computeArea } from "../functions/computeArea";
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore"; import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
const ZoneGroup: React.FC = () => { const ZoneGroup: React.FC = () => {
@ -525,6 +527,7 @@ const ZoneGroup: React.FC = () => {
} }
}); });
return ( return (
<group ref={groupsRef} name="zoneGroup"> <group ref={groupsRef} name="zoneGroup">
<group name="zones" visible={!toggleView}> <group name="zones" visible={!toggleView}>
@ -595,7 +598,61 @@ const ZoneGroup: React.FC = () => {
}} }}
/> />
))} ))}
</group> </group>
<group name="zoneArea" visible={toggleView}>
{zones.map((zone: any, index: any) => {
if (!toggleView) return null;
const points3D = zone.points;
const coords2D = points3D.map((p: any) => [p[0], p[2]]);
if (
coords2D.length < 3 ||
coords2D[0][0] !== coords2D[coords2D.length - 1][0] ||
coords2D[0][1] !== coords2D[coords2D.length - 1][1]
) {
coords2D.push(coords2D[0]);
}
const polygon = turf.polygon([coords2D]);
const center2D = turf.center(polygon).geometry.coordinates;
const sumY = points3D.reduce((sum: number, p: any) => sum + p[1], 0);
const avgY = sumY / points3D.length;
const area = computeArea(points3D, "zone");
const formattedArea = `${area.toFixed(2)} m²`;
const htmlPosition: [number, number, number] = [
center2D[0],
avgY + CONSTANTS.zoneConfig.height,
center2D[1]
];
return (
<Html
// data
key={`${index}-${zone}`}
position={htmlPosition}
// class
wrapperClass="distance-text-wrapper"
className="distance-text"
// other
zIndexRange={[1, 0]}
prepend
center
sprite
>
<div
className={`distance area line-${zone}`}
key={`${index}-${zone}`}
>
{zone.zoneName} ({formattedArea})
</div>
</Html>
);
})}
</group>
<group name="zonePoints" visible={toggleView}> <group name="zonePoints" visible={toggleView}>
{zones {zones
.filter((zone: any) => zone.layer === activeLayer) .filter((zone: any) => zone.layer === activeLayer)
@ -627,8 +684,18 @@ const ZoneGroup: React.FC = () => {
/> />
)} )}
</group> </group>
</group> </group>
); );
}; };
export default ZoneGroup; export default ZoneGroup;

253
app/src/modules/scene/controls/selectionControls/distanceFindingControls.tsx Normal file
View File

@ -0,0 +1,253 @@
import React, { useEffect, useRef } from "react";
import { Vector3, Raycaster, BufferGeometry, LineBasicMaterial, Line, Object3D, Mesh } from "three";
import { useThree, useFrame } from "@react-three/fiber";
import { Group } from "three";
import { Html } from "@react-three/drei";
import * as THREE from "three";
interface DistanceFindingControlsProps {
boundingBoxRef: React.RefObject<Mesh>;
}
const DistanceFindingControls = ({ boundingBoxRef }: DistanceFindingControlsProps) => {
const { camera, scene } = useThree();
// Refs for measurement lines
const line1 = useRef<Line>(null);
const line2 = useRef<Line>(null);
const line3 = useRef<Line>(null);
const line4 = useRef<Line>(null);
const line5 = useRef<Line>(null);
// Refs for measurement text labels
const textPosX = useRef<Group>(null);
const textNegX = useRef<Group>(null);
const textPosZ = useRef<Group>(null);
const textNegZ = useRef<Group>(null);
const textPosY = useRef<Group>(null);
// Store line geometries to avoid recreation
const lineGeometries = useRef({
posX: new BufferGeometry(),
negX: new BufferGeometry(),
posZ: new BufferGeometry(),
negZ: new BufferGeometry(),
posY: new BufferGeometry()
});
useFrame(() => {
if (!boundingBoxRef?.current) return;
boundingBoxRef.current.geometry.computeBoundingBox();
const bbox = boundingBoxRef.current.geometry.boundingBox;
if (!bbox) return;
const size = {
x: bbox.max.x - bbox.min.x,
y: bbox.max.y - bbox.min.y,
z: bbox.max.z - bbox.min.z
};
const vec = boundingBoxRef.current?.getWorldPosition(new Vector3()).clone();
if (!vec) return;
updateLine({
line: line1.current,
geometry: lineGeometries.current.posX,
direction: new Vector3(1, 0, 0), // Positive X
angle: 'pos',
mesh: textPosX,
vec,
size
});
updateLine({
line: line2.current,
geometry: lineGeometries.current.negX,
direction: new Vector3(-1, 0, 0), // Negative X
angle: 'neg',
mesh: textNegX,
vec,
size
});
updateLine({
line: line3.current,
geometry: lineGeometries.current.posZ,
direction: new Vector3(0, 0, 1), // Positive Z
angle: 'pos',
mesh: textPosZ,
vec,
size
});
updateLine({
line: line4.current,
geometry: lineGeometries.current.negZ,
direction: new Vector3(0, 0, -1), // Negative Z
angle: 'neg',
mesh: textNegZ,
vec,
size
});
updateLine({
line: line5.current,
geometry: lineGeometries.current.posY,
direction: new Vector3(0, -1, 0), // Down (Y)
angle: 'posY',
mesh: textPosY,
vec,
size
});
});
const updateLine = ({
line,
geometry,
direction,
angle,
mesh,
vec,
size
}: {
line: Line | null,
geometry: BufferGeometry,
direction: Vector3,
angle: string,
mesh: React.RefObject<Group>,
vec: Vector3,
size: { x: number, y: number, z: number }
}) => {
if (!line) return;
const points = [];
if (angle === "pos") {
points[0] = new Vector3(vec.x, vec.y, vec.z).add(
new Vector3((direction.x * size.x) / 2, 0, (direction.z * size.z) / 2)
);
} else if (angle === "neg") {
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
new Vector3((-direction.x * size.x) / 2, 0, (-direction.z * size.z) / 2)
);
} else if (angle === "posY") {
points[0] = new Vector3(vec.x, vec.y, vec.z).sub(
new Vector3(0, size.y / 2, 0)
);
}
const ray = new Raycaster();
if (camera) ray.camera = camera;
ray.set(new Vector3(vec.x, vec.y, vec.z), direction);
ray.params.Line.threshold = 0.1;
// Find intersection points
const wallsGroup = scene.children.find(val => val?.name.includes("Walls"));
const intersects = wallsGroup ? ray.intersectObjects([wallsGroup], true) : [];
// Find intersection point
if (intersects[0]) {
for (const intersect of intersects) {
if (intersect.object.name.includes("Wall")) {
points[1] = angle !== "posY" ? intersect.point : new Vector3(vec.x, 0, vec.z); // Floor
break;
}
}
}
// Update line geometry
if (points[1]) {
geometry.dispose();
geometry.setFromPoints([points[0], points[1]]);
line.geometry = geometry;
// Update measurement text
if (mesh?.current) {
geometry.computeBoundingSphere();
const center = geometry.boundingSphere?.center;
if (center) {
mesh.current.position.copy(center);
}
const label = document.getElementById(mesh.current.name);
if (label) {
label.innerText = `${points[0].distanceTo(points[1]).toFixed(2)}m`;
}
}
} else {
// No intersection found - clear the line
geometry.dispose();
geometry.setFromPoints([new Vector3(), new Vector3()]);
line.geometry = geometry;
const label = document.getElementById(mesh?.current?.name || "");
if (label) label.innerText = "";
}
};
const Material = new LineBasicMaterial({ color: "red" });
return (
<>
{/* Measurement text labels */}
{boundingBoxRef.current && (
<>
<group name="textPosX" ref={textPosX}>
<Html zIndexRange={[1, 0]} style={{ pointerEvents: 'none' }}>
<div className="distance-label" id="textPosX" style={{
background: 'rgba(0,0,0,0.7)',
color: 'white',
padding: '2px 5px',
borderRadius: '3px',
fontSize: '12px',
whiteSpace: 'nowrap'
}}></div>
</Html>
</group>
<group name="textNegX" ref={textNegX}>
<Html zIndexRange={[1, 0]} style={{ pointerEvents: 'none' }}>
<div className="distance-label" id="textNegX" style={{
background: 'rgba(0,0,0,0.7)',
color: 'white',
padding: '2px 5px',
borderRadius: '3px',
fontSize: '12px',
whiteSpace: 'nowrap'
}}></div>
</Html>
</group>
<group name="textPosZ" ref={textPosZ}>
<Html zIndexRange={[2, 0]} style={{ pointerEvents: 'none' }}>
<div className="distance-label" id="textPosZ" style={{
background: 'rgba(0,0,0,0.7)',
color: 'white',
padding: '2px 5px',
borderRadius: '3px',
fontSize: '12px',
whiteSpace: 'nowrap'
}}></div>
</Html>
</group>
<group name="textNegZ" ref={textNegZ}>
<Html zIndexRange={[1, 0]} style={{ pointerEvents: 'none' }}>
<div className="distance-label" id="textNegZ" style={{
background: 'rgba(0,0,0,0.7)',
color: 'white',
padding: '2px 5px',
borderRadius: '3px',
fontSize: '12px',
whiteSpace: 'nowrap'
}}></div>
</Html>
</group>
{/* Measurement lines */}
<primitive object={new Line(new BufferGeometry(), Material)} ref={line1} />
<primitive object={new Line(new BufferGeometry(), Material)} ref={line2} />
<primitive object={new Line(new BufferGeometry(), Material)} ref={line3} />
<primitive object={new Line(new BufferGeometry(), Material)} ref={line4} />
</>
)}
</>
);
};
export default DistanceFindingControls;

24
app/src/modules/scene/controls/selectionControls/moveControls.tsx
View File

@ -11,8 +11,10 @@ import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore"; import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi"; import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
import { snapControls } from "../../../../utils/handleSnap"; import { snapControls } from "../../../../utils/handleSnap";
import DistanceFindingControls from "./distanceFindingControls";
function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) { function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObjects, setCopiedObjects, pastedObjects, setpastedObjects, duplicatedObjects, setDuplicatedObjects, selectionGroup, rotatedObjects, setRotatedObjects, boundingBoxRef }: any) {
const { camera, controls, gl, scene, pointer, raycaster } = useThree(); const { camera, controls, gl, scene, pointer, raycaster } = useThree();
const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []); const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
@ -23,7 +25,6 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const itemsData = useRef<Types.FloorItems>([]); const itemsData = useRef<Types.FloorItems>([]);
const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">("") const [keyEvent, setKeyEvent] = useState<"Ctrl" | "Shift" | "Ctrl+Shift" | "">("")
const email = localStorage.getItem('email') const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0]; const organization = (email!.split("@")[1]).split(".")[0];
@ -156,17 +157,18 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
if (keyEvent === "Ctrl") { if (keyEvent === "Ctrl") {
targetX = snapControls(targetX, "Ctrl"); targetX = snapControls(targetX, "Ctrl");
targetZ = snapControls(targetZ, "Ctrl"); targetZ = snapControls(targetZ, "Ctrl");
} else if (keyEvent === "Ctrl+Shift") {
targetX = snapControls(targetX, "Ctrl+Shift");
targetZ = snapControls(targetZ, "Ctrl+Shift");
} else if (keyEvent === "Shift") {
targetX = snapControls(targetX, "Shift");
targetZ = snapControls(targetZ, "Shift");
} else {
} }
// else if (keyEvent === "Ctrl+Shift") {
// targetX = snapControls(targetX, "Ctrl+Shift");
// targetZ = snapControls(targetZ, "Ctrl+Shift");
// } else if (keyEvent === "Shift") {
// targetX = snapControls(targetX, "Shift");
// targetZ = snapControls(targetZ, "Shift");
// } else {
// }
const position = new THREE.Vector3(); const position = new THREE.Vector3();
if (boundingBoxRef.current) { if (boundingBoxRef.current) {
boundingBoxRef.current.getWorldPosition(position); boundingBoxRef.current.getWorldPosition(position);
selectionGroup.current.position.lerp( selectionGroup.current.position.lerp(
@ -194,6 +196,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
} }
} }
} }
}); });
@ -215,7 +218,6 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
obj.position.copy(worldPosition); obj.position.copy(worldPosition);
if (itemsGroupRef.current) { if (itemsGroupRef.current) {
const newFloorItem: Types.FloorItemType = { const newFloorItem: Types.FloorItemType = {
modelUuid: obj.uuid, modelUuid: obj.uuid,
modelName: obj.userData.name, modelName: obj.userData.name,
@ -311,7 +313,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
setKeyEvent("") setKeyEvent("")
} }
return null; return <DistanceFindingControls boundingBoxRef={boundingBoxRef} />;
} }
export default MoveControls export default MoveControls

435
app/src/store/store.ts
View File

@ -4,429 +4,434 @@ import { create } from "zustand";
import { io } from "socket.io-client"; import { io } from "socket.io-client";
export const useSocketStore = create<any>((set: any, get: any) => ({ export const useSocketStore = create<any>((set: any, get: any) => ({
socket: null, socket: null,
initializeSocket: (email: string, organization: string) => { initializeSocket: (email: string, organization: string) => {
const existingSocket = get().socket; const existingSocket = get().socket;
if (existingSocket) { if (existingSocket) {
return; return;
} }
const socket = io( const socket = io(
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`, `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Builder`,
{ {
reconnection: true, reconnection: true,
auth: { email, organization }, auth: { email, organization },
} }
); );
const visualizationSocket = io( const visualizationSocket = io(
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`, `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/Visualization`,
{ {
reconnection: true, reconnection: true,
auth: { email, organization }, auth: { email, organization },
} }
); );
set({ socket, visualizationSocket }); set({ socket, visualizationSocket });
}, },
disconnectSocket: () => { disconnectSocket: () => {
set((state: any) => { set((state: any) => {
state.socket?.disconnect(); state.socket?.disconnect();
state.visualizationSocket?.disconnect(); state.visualizationSocket?.disconnect();
return { socket: null }; return { socket: null };
}); });
}, },
})); }));
export const useLoadingProgress = create<{ export const useLoadingProgress = create<{
loadingProgress: number; loadingProgress: number;
setLoadingProgress: (x: number) => void; setLoadingProgress: (x: number) => void;
}>((set) => ({ }>((set) => ({
loadingProgress: 1, loadingProgress: 1,
setLoadingProgress: (x: number) => set({ loadingProgress: x }), setLoadingProgress: (x: number) => set({ loadingProgress: x }),
})); }));
export const useOrganization = create<any>((set: any) => ({ export const useOrganization = create<any>((set: any) => ({
organization: "", organization: "",
setOrganization: (x: any) => set(() => ({ organization: x })), setOrganization: (x: any) => set(() => ({ organization: x })),
})); }));
export const useToggleView = create<any>((set: any) => ({ export const useToggleView = create<any>((set: any) => ({
toggleView: false, toggleView: false,
setToggleView: (x: any) => set(() => ({ toggleView: x })), setToggleView: (x: any) => set(() => ({ toggleView: x })),
})); }));
export const useUpdateScene = create<any>((set: any) => ({ export const useUpdateScene = create<any>((set: any) => ({
updateScene: false, updateScene: false,
setUpdateScene: (x: any) => set(() => ({ updateScene: x })), setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
})); }));
export const useWalls = create<any>((set: any) => ({ export const useWalls = create<any>((set: any) => ({
walls: [], walls: [],
setWalls: (x: any) => set(() => ({ walls: x })), setWalls: (x: any) => set(() => ({ walls: x })),
})); }));
export const useRoomsState = create<any>((set: any) => ({ export const useRoomsState = create<any>((set: any) => ({
roomsState: [], roomsState: [],
setRoomsState: (x: any) => set(() => ({ walls: x })), setRoomsState: (x: any) => set(() => ({ roomsState: x })),
})); }));
export const useZones = create<any>((set: any) => ({ export const useZones = create<any>((set: any) => ({
zones: [], zones: [],
setZones: (callback: any) => setZones: (callback: any) =>
set((state: any) => ({ set((state: any) => ({
zones: typeof callback === "function" ? callback(state.zones) : callback, zones: typeof callback === "function" ? callback(state.zones) : callback,
})), })),
})); }));
interface ZonePointsState { interface ZonePointsState {
zonePoints: THREE.Vector3[]; zonePoints: THREE.Vector3[];
setZonePoints: (points: THREE.Vector3[]) => void; setZonePoints: (points: THREE.Vector3[]) => void;
} }
export const useZonePoints = create<ZonePointsState>((set) => ({ export const useZonePoints = create<ZonePointsState>((set) => ({
zonePoints: [], zonePoints: [],
setZonePoints: (points) => set({ zonePoints: points }), setZonePoints: (points) => set({ zonePoints: points }),
})); }));
export const useSelectedItem = create<any>((set: any) => ({ export const useSelectedItem = create<any>((set: any) => ({
selectedItem: { name: "", id: "", type: undefined }, selectedItem: { name: "", id: "", type: undefined },
setSelectedItem: (x: any) => set(() => ({ selectedItem: x })), setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
})); }));
export const useNavMesh = create<any>((set: any) => ({ export const useNavMesh = create<any>((set: any) => ({
navMesh: null, navMesh: null,
setNavMesh: (x: any) => set({ navMesh: x }), setNavMesh: (x: any) => set({ navMesh: x }),
})); }));
export const useSelectedAssets = create<any>((set: any) => ({ export const useSelectedAssets = create<any>((set: any) => ({
selectedAssets: [], selectedAssets: [],
setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })), setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
})); }));
export const useLayers = create<any>((set: any) => ({ export const useLayers = create<any>((set: any) => ({
Layers: 1, Layers: 1,
setLayers: (x: any) => set(() => ({ Layers: x })), setLayers: (x: any) => set(() => ({ Layers: x })),
})); }));
export const useCamPosition = create<any>((set: any) => ({ export const useCamPosition = create<any>((set: any) => ({
camPosition: { x: undefined, y: undefined, z: undefined }, camPosition: { x: undefined, y: undefined, z: undefined },
setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }), setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
})); }));
export const useMenuVisible = create<any>((set: any) => ({ export const useMenuVisible = create<any>((set: any) => ({
menuVisible: false, menuVisible: false,
setMenuVisible: (x: any) => set(() => ({ menuVisible: x })), setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
})); }));
export const useDeleteTool = create<any>((set: any) => ({ export const useDeleteTool = create<any>((set: any) => ({
deleteTool: false, deleteTool: false,
setDeleteTool: (x: any) => set(() => ({ deleteTool: x })), setDeleteTool: (x: any) => set(() => ({ deleteTool: x })),
})); }));
export const useToolMode = create<any>((set: any) => ({ export const useToolMode = create<any>((set: any) => ({
toolMode: null, toolMode: null,
setToolMode: (x: any) => set(() => ({ toolMode: x })), setToolMode: (x: any) => set(() => ({ toolMode: x })),
})); }));
export const useNewLines = create<any>((set: any) => ({ export const useNewLines = create<any>((set: any) => ({
newLines: [], newLines: [],
setNewLines: (x: any) => set(() => ({ newLines: x })), setNewLines: (x: any) => set(() => ({ newLines: x })),
})); }));
export const useDeletedLines = create<any>((set: any) => ({ export const useDeletedLines = create<any>((set: any) => ({
deletedLines: [], deletedLines: [],
setDeletedLines: (x: any) => set(() => ({ deletedLines: x })), setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
}));
export const useMovePoint = create<any>((set: any) => ({
movePoint: false,
setMovePoint: (x: any) => set(() => ({ movePoint: x })),
})); }));
export const useTransformMode = create<any>((set: any) => ({ export const useTransformMode = create<any>((set: any) => ({
transformMode: null, transformMode: null,
setTransformMode: (x: any) => set(() => ({ transformMode: x })), setTransformMode: (x: any) => set(() => ({ transformMode: x })),
})); }));
export const useDeletePointOrLine = create<any>((set: any) => ({ export const useDeletePointOrLine = create<any>((set: any) => ({
deletePointOrLine: false, deletePointOrLine: false,
setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })), setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
})); }));
export const useFloorItems = create<any>((set: any) => ({ export const useFloorItems = create<any>((set: any) => ({
floorItems: null, floorItems: null,
setFloorItems: (callback: any) => setFloorItems: (callback: any) =>
set((state: any) => ({ set((state: any) => ({
floorItems: floorItems:
typeof callback === "function" ? callback(state.floorItems) : callback, typeof callback === "function" ? callback(state.floorItems) : callback,
})), })),
})); }));
export const useWallItems = create<any>((set: any) => ({ export const useWallItems = create<any>((set: any) => ({
wallItems: [], wallItems: [],
setWallItems: (callback: any) => setWallItems: (callback: any) =>
set((state: any) => ({ set((state: any) => ({
wallItems: wallItems:
typeof callback === "function" ? callback(state.wallItems) : callback, typeof callback === "function" ? callback(state.wallItems) : callback,
})), })),
})); }));
export const useSelectedWallItem = create<any>((set: any) => ({ export const useSelectedWallItem = create<any>((set: any) => ({
selectedWallItem: null, selectedWallItem: null,
setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })), setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
})); }));
export const useSelectedFloorItem = create<any>((set: any) => ({ export const useSelectedFloorItem = create<any>((set: any) => ({
selectedFloorItem: null, selectedFloorItem: null,
setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })), setSelectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
})); }));
export const useDeletableFloorItem = create<any>((set: any) => ({ export const useDeletableFloorItem = create<any>((set: any) => ({
deletableFloorItem: null, deletableFloorItem: null,
setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })), setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
})); }));
export const useSetScale = create<any>((set: any) => ({ export const useSetScale = create<any>((set: any) => ({
scale: null, scale: null,
setScale: (x: any) => set(() => ({ scale: x })), setScale: (x: any) => set(() => ({ scale: x })),
})); }));
export const useRoofVisibility = create<any>((set: any) => ({ export const useRoofVisibility = create<any>((set: any) => ({
roofVisibility: false, roofVisibility: false,
setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })), setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
})); }));
export const useWallVisibility = create<any>((set: any) => ({ export const useWallVisibility = create<any>((set: any) => ({
wallVisibility: false, wallVisibility: false,
setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })), setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
})); }));
export const useShadows = create<any>((set: any) => ({ export const useShadows = create<any>((set: any) => ({
shadows: false, shadows: false,
setShadows: (x: any) => set(() => ({ shadows: x })), setShadows: (x: any) => set(() => ({ shadows: x })),
})); }));
export const useSunPosition = create<any>((set: any) => ({ export const useSunPosition = create<any>((set: any) => ({
sunPosition: { x: undefined, y: undefined, z: undefined }, sunPosition: { x: undefined, y: undefined, z: undefined },
setSunPosition: (newSuntPosition: any) => setSunPosition: (newSuntPosition: any) =>
set({ sunPosition: newSuntPosition }), set({ sunPosition: newSuntPosition }),
})); }));
export const useRemoveLayer = create<any>((set: any) => ({ export const useRemoveLayer = create<any>((set: any) => ({
removeLayer: false, removeLayer: false,
setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })), setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
})); }));
export const useRemovedLayer = create<any>((set: any) => ({ export const useRemovedLayer = create<any>((set: any) => ({
removedLayer: null, removedLayer: null,
setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })), setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
})); }));
export const useActiveLayer = create<any>((set: any) => ({ export const useActiveLayer = create<any>((set: any) => ({
activeLayer: 1, activeLayer: 1,
setActiveLayer: (x: any) => set({ activeLayer: x }), setActiveLayer: (x: any) => set({ activeLayer: x }),
})); }));
interface RefTextUpdateState { interface RefTextUpdateState {
refTextupdate: number; refTextupdate: number;
setRefTextUpdate: ( setRefTextUpdate: (
callback: (currentValue: number) => number | number callback: (currentValue: number) => number | number
) => void; ) => void;
} }
export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({ export const useRefTextUpdate = create<RefTextUpdateState>((set) => ({
refTextupdate: -1000, refTextupdate: -1000,
setRefTextUpdate: (callback) => setRefTextUpdate: (callback) =>
set((state) => ({ set((state) => ({
refTextupdate: refTextupdate:
typeof callback === "function" typeof callback === "function"
? callback(state.refTextupdate) ? callback(state.refTextupdate)
: callback, : callback,
})), })),
})); }));
export const useResetCamera = create<any>((set: any) => ({ export const useResetCamera = create<any>((set: any) => ({
resetCamera: false, resetCamera: false,
setResetCamera: (x: any) => set({ resetCamera: x }), setResetCamera: (x: any) => set({ resetCamera: x }),
})); }));
export const useAddAction = create<any>((set: any) => ({ export const useAddAction = create<any>((set: any) => ({
addAction: null, addAction: null,
setAddAction: (x: any) => set({ addAction: x }), setAddAction: (x: any) => set({ addAction: x }),
})); }));
export const useActiveTool = create<any>((set: any) => ({ export const useActiveTool = create<any>((set: any) => ({
activeTool: "cursor", activeTool: "cursor",
setActiveTool: (x: any) => set({ activeTool: x }), setActiveTool: (x: any) => set({ activeTool: x }),
})); }));
export const useActiveSubTool = create<any>((set: any) => ({ export const useActiveSubTool = create<any>((set: any) => ({
activeSubTool: "cursor", activeSubTool: "cursor",
setActiveSubTool: (x: any) => set({ activeSubTool: x }), setActiveSubTool: (x: any) => set({ activeSubTool: x }),
})); }));
export const use2DUndoRedo = create<any>((set: any) => ({ export const use2DUndoRedo = create<any>((set: any) => ({
is2DUndoRedo: null, is2DUndoRedo: null,
set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }), set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
})); }));
export const useElevation = create<any>((set: any) => ({ export const useElevation = create<any>((set: any) => ({
elevation: 45, elevation: 45,
setElevation: (x: any) => set({ elevation: x }), setElevation: (x: any) => set({ elevation: x }),
})); }));
export const useAzimuth = create<any>((set: any) => ({ export const useAzimuth = create<any>((set: any) => ({
azimuth: -160, azimuth: -160,
setAzimuth: (x: any) => set({ azimuth: x }), setAzimuth: (x: any) => set({ azimuth: x }),
})); }));
export const useRenderDistance = create<any>((set: any) => ({ export const useRenderDistance = create<any>((set: any) => ({
renderDistance: 40, renderDistance: 40,
setRenderDistance: (x: any) => set({ renderDistance: x }), setRenderDistance: (x: any) => set({ renderDistance: x }),
})); }));
export const useCamMode = create<any>((set: any) => ({ export const useCamMode = create<any>((set: any) => ({
camMode: "ThirdPerson", camMode: "ThirdPerson",
setCamMode: (x: any) => set({ camMode: x }), setCamMode: (x: any) => set({ camMode: x }),
})); }));
export const useUserName = create<any>((set: any) => ({ export const useUserName = create<any>((set: any) => ({
userName: "", userName: "",
setUserName: (x: any) => set({ userName: x }), setUserName: (x: any) => set({ userName: x }),
})); }));
export const useObjectPosition = create<any>((set: any) => ({ export const useObjectPosition = create<any>((set: any) => ({
objectPosition: { x: undefined, y: undefined, z: undefined }, objectPosition: { x: undefined, y: undefined, z: undefined },
setObjectPosition: (newObjectPosition: any) => setObjectPosition: (newObjectPosition: any) =>
set({ objectPosition: newObjectPosition }), set({ objectPosition: newObjectPosition }),
})); }));
export const useObjectScale = create<any>((set: any) => ({ export const useObjectScale = create<any>((set: any) => ({
objectScale: { x: undefined, y: undefined, z: undefined }, objectScale: { x: undefined, y: undefined, z: undefined },
setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }), setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
})); }));
export const useObjectRotation = create<any>((set: any) => ({ export const useObjectRotation = create<any>((set: any) => ({
objectRotation: { x: undefined, y: undefined, z: undefined }, objectRotation: { x: undefined, y: undefined, z: undefined },
setObjectRotation: (newObjectRotation: any) => setObjectRotation: (newObjectRotation: any) =>
set({ objectRotation: newObjectRotation }), set({ objectRotation: newObjectRotation }),
})); }));
export const useDrieTemp = create<any>((set: any) => ({ export const useDrieTemp = create<any>((set: any) => ({
drieTemp: undefined, drieTemp: undefined,
setDrieTemp: (x: any) => set({ drieTemp: x }), setDrieTemp: (x: any) => set({ drieTemp: x }),
})); }));
export const useActiveUsers = create<any>((set: any) => ({ export const useActiveUsers = create<any>((set: any) => ({
activeUsers: [], activeUsers: [],
setActiveUsers: (callback: (prev: any[]) => any[] | any[]) => setActiveUsers: (callback: (prev: any[]) => any[] | any[]) =>
set((state: { activeUsers: any[] }) => ({ set((state: { activeUsers: any[] }) => ({
activeUsers: activeUsers:
typeof callback === "function" ? callback(state.activeUsers) : callback, typeof callback === "function" ? callback(state.activeUsers) : callback,
})), })),
})); }));
export const useDrieUIValue = create<any>((set: any) => ({ export const useDrieUIValue = create<any>((set: any) => ({
drieUIValue: { touch: null, temperature: null, humidity: null }, drieUIValue: { touch: null, temperature: null, humidity: null },
setDrieUIValue: (x: any) => setDrieUIValue: (x: any) =>
set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })), set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
setTouch: (value: any) => setTouch: (value: any) =>
set((state: any) => ({ set((state: any) => ({
drieUIValue: { ...state.drieUIValue, touch: value }, drieUIValue: { ...state.drieUIValue, touch: value },
})), })),
setTemperature: (value: any) => setTemperature: (value: any) =>
set((state: any) => ({ set((state: any) => ({
drieUIValue: { ...state.drieUIValue, temperature: value }, drieUIValue: { ...state.drieUIValue, temperature: value },
})), })),
setHumidity: (value: any) => setHumidity: (value: any) =>
set((state: any) => ({ set((state: any) => ({
drieUIValue: { ...state.drieUIValue, humidity: value }, drieUIValue: { ...state.drieUIValue, humidity: value },
})), })),
})); }));
export const useStartSimulation = create<any>((set: any) => ({ export const useStartSimulation = create<any>((set: any) => ({
startSimulation: false, startSimulation: false,
setStartSimulation: (x: any) => set({ startSimulation: x }), setStartSimulation: (x: any) => set({ startSimulation: x }),
})); }));
export const useEyeDropMode = create<any>((set: any) => ({ export const useEyeDropMode = create<any>((set: any) => ({
eyeDropMode: false, eyeDropMode: false,
setEyeDropMode: (x: any) => set({ eyeDropMode: x }), setEyeDropMode: (x: any) => set({ eyeDropMode: x }),
})); }));
export const useEditingPoint = create<any>((set: any) => ({ export const useEditingPoint = create<any>((set: any) => ({
editingPoint: false, editingPoint: false,
setEditingPoint: (x: any) => set({ editingPoint: x }), setEditingPoint: (x: any) => set({ editingPoint: x }),
})); }));
export const usezoneTarget = create<any>((set: any) => ({ export const usezoneTarget = create<any>((set: any) => ({
zoneTarget: [], zoneTarget: [],
setZoneTarget: (x: any) => set({ zoneTarget: x }), setZoneTarget: (x: any) => set({ zoneTarget: x }),
})); }));
export const usezonePosition = create<any>((set: any) => ({ export const usezonePosition = create<any>((set: any) => ({
zonePosition: [], zonePosition: [],
setZonePosition: (x: any) => set({ zonePosition: x }), setZonePosition: (x: any) => set({ zonePosition: x }),
})); }));
interface EditPositionState { interface EditPositionState {
Edit: boolean; Edit: boolean;
setEdit: (value: boolean) => void; setEdit: (value: boolean) => void;
} }
export const useEditPosition = create<EditPositionState>((set) => ({ export const useEditPosition = create<EditPositionState>((set) => ({
Edit: false, Edit: false,
setEdit: (value) => set({ Edit: value }), setEdit: (value) => set({ Edit: value }),
})); }));
export const useAsset3dWidget = create<any>((set: any) => ({ export const useAsset3dWidget = create<any>((set: any) => ({
widgetSelect: "", widgetSelect: "",
setWidgetSelect: (x: any) => set({ widgetSelect: x }), setWidgetSelect: (x: any) => set({ widgetSelect: x }),
})); }));
export const useWidgetSubOption = create<any>((set: any) => ({ export const useWidgetSubOption = create<any>((set: any) => ({
widgetSubOption: "2D", widgetSubOption: "2D",
setWidgetSubOption: (x: any) => set({ widgetSubOption: x }), setWidgetSubOption: (x: any) => set({ widgetSubOption: x }),
})); }));
export const useLimitDistance = create<any>((set: any) => ({ export const useLimitDistance = create<any>((set: any) => ({
limitDistance: true, limitDistance: true,
setLimitDistance: (x: any) => set({ limitDistance: x }), setLimitDistance: (x: any) => set({ limitDistance: x }),
})); }));
export const useTileDistance = create<any>((set: any) => ({ export const useTileDistance = create<any>((set: any) => ({
gridValue: { size: 300, divisions: 75 }, gridValue: { size: 300, divisions: 75 },
planeValue: { height: 300, width: 300 }, planeValue: { height: 300, width: 300 },
setGridValue: (value: any) => setGridValue: (value: any) =>
set((state: any) => ({ set((state: any) => ({
gridValue: { ...state.gridValue, ...value }, gridValue: { ...state.gridValue, ...value },
})), })),
setPlaneValue: (value: any) => setPlaneValue: (value: any) =>
set((state: any) => ({ set((state: any) => ({
planeValue: { ...state.planeValue, ...value }, planeValue: { ...state.planeValue, ...value },
})), })),
})); }));
export const usePlayAgv = create<any>((set, get) => ({ export const usePlayAgv = create<any>((set, get) => ({
PlayAgv: [], PlayAgv: [],
setPlayAgv: (updateFn: (prev: any[]) => any[]) => setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
set({ PlayAgv: updateFn(get().PlayAgv) }), set({ PlayAgv: updateFn(get().PlayAgv) }),
})); }));
// Define the Asset type // Define the Asset type
type Asset = { type Asset = {
id: string; id: string;
name: string; name: string;
position?: [number, number, number]; // Optional: 3D position position?: [number, number, number]; // Optional: 3D position
rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation rotation?: { x: number; y: number; z: number }; // Optional: Euler rotation
}; };
// Zustand store type // Zustand store type
type ZoneAssetState = { type ZoneAssetState = {
zoneAssetId: Asset | null; zoneAssetId: Asset | null;
setZoneAssetId: (asset: Asset | null) => void; setZoneAssetId: (asset: Asset | null) => void;
}; };
// Zustand store // Zustand store
export const useZoneAssetId = create<ZoneAssetState>((set) => ({ export const useZoneAssetId = create<ZoneAssetState>((set) => ({
zoneAssetId: null, zoneAssetId: null,
setZoneAssetId: (asset) => set({ zoneAssetId: asset }), setZoneAssetId: (asset) => set({ zoneAssetId: asset }),
})); }));

3
app/src/styles/scene/scene.scss
View File

@ -19,6 +19,9 @@
border-radius: #{$border-radius-medium}; border-radius: #{$border-radius-medium};
box-shadow: var(--box-shadow-light); box-shadow: var(--box-shadow-light);
} }
.area{
background: #008cff;
}
} }
.pointer-none { .pointer-none {