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

zone camera and target updation added

This commit is contained in:
Gomathi 2025-03-27 12:28:17 +05:30
parent fea5c168d1
commit dac7edb837
13 changed files with 458 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,9 +37,8 @@ const SideBarRight: React.FC = () => {
<div className="sidebar-actions-container"> <div className="sidebar-actions-container">
{/* {activeModule === "builder" && ( */} {/* {activeModule === "builder" && ( */}
<div <div
className={`sidebar-action-list ${ className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
subModule === "properties" ? "active" : "" }`}
}`}
onClick={() => setSubModule("properties")} onClick={() => setSubModule("properties")}
> >
<PropertiesIcon isActive={subModule === "properties"} /> <PropertiesIcon isActive={subModule === "properties"} />
@ -84,6 +83,17 @@ const SideBarRight: React.FC = () => {
</div> </div>
</div> </div>
)} )}
{toggleUI &&
subModule === "zoneProperties" &&
activeModule === "builder" && (
<div className="sidebar-right-container">
<div className="sidebar-right-content-container">
{/* <GlobalProperties /> */}
<ZoneProperties />
{/* <AsstePropertiies /> */}
</div>
</div>
)}
{/* simulation */} {/* simulation */}
{toggleUI && activeModule === "simulation" && ( {toggleUI && activeModule === "simulation" && (

71
app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
View File

@ -1,62 +1,57 @@
import React from "react"; import React from "react";
import { EyeDroperIcon } from "../../../icons/ExportCommonIcons"; import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
// import { useThree } from "@react-three/fiber";
interface PositionInputProps { interface PositionInputProps {
onChange: (value: string) => void; // Callback for value change onChange: (value: [number, number, number]) => void; // Callback for value change
header: string; header: string;
placeholder?: string; // Optional placeholder placeholder?: string; // Optional placeholder
type?: string; // Input type (e.g., text, number, email) type?: string; // Input type (e.g., text, number, email)
value: [number, number, number] | null;
disabled?: boolean; // To enable/disable editing
} }
const Vector3Input: React.FC<PositionInputProps> = ({ const Vector3Input: React.FC<PositionInputProps> = ({
onChange, onChange,
header, header,
placeholder = "Enter value", // Default placeholder placeholder = "Enter value", // Default placeholder
type = "number", // Default type type = "string", // Default type
value,
disabled = false, // Default to disabled
}) => { }) => {
const handleChange = (index: number, newValue: string) => {
if (!value) return;
const updatedValue = [...value] as [number, number, number];
updatedValue[index] = parseFloat(newValue) || 0;
console.log('updatedValue: ', updatedValue);
onChange(updatedValue);
};
return ( return (
<div className="custom-input-container"> <div className="custom-input-container">
<div className="header"> <div className="header">
{header}{" "} {header}
<div className="eyedrop-button">
<EyeDroperIcon isActive={false} />
</div>
</div> </div>
<div className="inputs-container"> <div className="inputs-container">
<div className="input-container"> {["X", "Y", "Z"].map((axis, i) => (
<div className="custom-input-label">X : </div> <div className="input-container" key={axis}>
<input <div className="custom-input-label">{axis}:</div>
className="custom-input-field" <input
type={type} className="custom-input-field"
onChange={(e) => onChange(e.target.value)} type={type}
placeholder={placeholder} value={value?.[i] !== undefined ? value[i].toFixed(2) : ""}
disabled // onChange={(e) => handleChange(i, e.target.value)}
/> placeholder={placeholder}
</div> disabled={disabled}
<div className="input-container"> />
<div className="custom-input-label">Y : </div> </div>
<input ))}
className="custom-input-field"
type={type}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
disabled
min={0}
/>
</div>
<div className="input-container">
<div className="custom-input-label">Z : </div>
<input
className="custom-input-field"
type={type}
onChange={(e) => onChange(e.target.value)}
placeholder={placeholder}
disabled
/>
</div>
</div> </div>
</div> </div>
); );
}; };
export default Vector3Input; export default Vector3Input;

52
app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
View File

@ -2,37 +2,64 @@ import React, { useEffect, useState } from "react";
import RenameInput from "../../../ui/inputs/RenameInput"; import RenameInput from "../../../ui/inputs/RenameInput";
import Vector3Input from "../customInput/Vector3Input"; import Vector3Input from "../customInput/Vector3Input";
import { useSelectedZoneStore } from "../../../../store/useZoneStore"; import { useSelectedZoneStore } from "../../../../store/useZoneStore";
import { useEditPosition, usezonePosition, usezoneTarget } from "../../../../store/store";
const ZoneProperties: React.FC = () => { const ZoneProperties: React.FC = () => {
const [Edit, setEdit] = useState(false); const { Edit, setEdit } = useEditPosition();
const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { zonePosition, setZonePosition } = usezonePosition();
const { zoneTarget, setZoneTarget } = usezoneTarget();
useEffect(() => {
setZonePosition(selectedZone.zoneViewPortPosition)
setZoneTarget(selectedZone.zoneViewPortTarget)
}, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])
function handleSetView() { function handleSetView() {
console.log("setApi");
console.log('zoneTarget: ', zoneTarget);
console.log('zonePosition: ', zonePosition);
setEdit(false); setEdit(false);
} }
function handleEditView() { function handleEditView() {
if (Edit) { setEdit(!Edit); // This will toggle the `Edit` state correctly
setEdit(false);
} else {
setEdit(true);
}
} }
useEffect(() => {
console.log(' selectedZone.zoneName: ', selectedZone.zoneName); function handleZoneNameChange(newName: string) {
}, [selectedZone]) setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
}
function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
}
useEffect(() => {
console.log("Updated selectedZone: ", selectedZone);
}, [selectedZone]);
return ( return (
<div className="zone-properties-container"> <div className="zone-properties-container">
<div className="header"> <div className="header">
<RenameInput value={selectedZone.zoneName ? selectedZone.zoneName : ""} /> <RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} />
<div className="button" onClick={handleEditView}> <div className="button" onClick={handleEditView}>
{Edit ? "Cancel" : "Edit"} {Edit ? "Cancel" : "Edit"}
</div> </div>
</div> </div>
<Vector3Input onChange={() => { }} header="Viewport Target" /> <Vector3Input
<Vector3Input onChange={() => { }} header="Viewport Position" /> onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
header="Viewport Target"
value={zoneTarget as [number, number, number]}
disabled={!Edit}
/>
<Vector3Input
onChange={(value) => handleVectorChange("zoneViewPortPosition", value)}
header="Viewport Position"
value={zonePosition as [number, number, number]}
disabled={!Edit}
/>
{Edit && ( {Edit && (
<div className="button-save" onClick={handleSetView}> <div className="button-save" onClick={handleSetView}>
Set View Set View
@ -43,3 +70,4 @@ const ZoneProperties: React.FC = () => {
}; };
export default ZoneProperties; export default ZoneProperties;

5
app/src/components/ui/componets/AddButtons.tsx
View File

@ -129,8 +129,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
}; };
const email = localStorage.getItem('email') const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0]; const organization = (email!.split("@")[1]).split(".")[0];
let response = panelData(organization, selectedZone.zoneId, newActiveSides) // let response = panelData(organization, selectedZone.zoneId, newActiveSides)
console.log('response: ', response); // console.log('response: ', response);
// Update the selectedZone state // Update the selectedZone state
console.log("updatedZone: ", updatedZone); console.log("updatedZone: ", updatedZone);
@ -140,7 +140,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
return ( return (
<> <>
<div> <div>
{(["top", "right", "bottom", "left"] as Side[]).map((side) => ( {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
<div key={side} className={`side-button-container ${side}`}> <div key={side} className={`side-button-container ${side}`}>

116
app/src/components/ui/componets/DroppedFloatingWidgets.tsx
View File

@ -1,59 +1,89 @@
import { useState } from "react"; // import { useState } from "react";
import { useThree } from "@react-three/fiber"; // import { useThree } from "@react-three/fiber";
import * as THREE from "three"; // import * as THREE from "three";
const DroppedObjects = () => {
const { camera } = useThree(); // Now inside Canvas ✅
const [objects, setObjects] = useState<{ id: number; position: [number, number, number] }[]>([]);
// Function to convert drop event into 3D position
const handleDrop = (event: DragEvent) => {
event.preventDefault();
const data = event.dataTransfer?.getData("text/plain"); // const DroppedObjects = () => {
if (!data) return; // const { camera } = useThree(); // Now inside Canvas ✅
// const [objects, setObjects] = useState<{ id: number; position: [number, number, number] }[]>([]);
try { // // Function to convert drop event into 3D position
const cardData = JSON.parse(data); // const handleDrop = (event: DragEvent) => {
if (!cardData.className.includes("floating total-card")) { // event.preventDefault();
console.log("Drop rejected: Incorrect element.");
return;
}
// Convert 2D drop position to 3D world coordinates // const data = event.dataTransfer?.getData("text/plain");
const x = (event.clientX / window.innerWidth) * 2 - 1; // if (!data) return;
const y = -(event.clientY / window.innerHeight) * 2 + 1;
// Raycasting to determine the drop position in 3D // try {
const raycaster = new THREE.Raycaster(); // const cardData = JSON.parse(data);
const mouseVector = new THREE.Vector2(x, y); // if (!cardData.className.includes("floating total-card")) {
raycaster.setFromCamera(mouseVector, camera); // console.log("Drop rejected: Incorrect element.");
// return;
// }
// Intersect with a ground plane (assume y = 0) // // Convert 2D drop position to 3D world coordinates
const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // const x = (event.clientX / window.innerWidth) * 2 - 1;
const intersection = new THREE.Vector3(); // const y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.ray.intersectPlane(groundPlane, intersection);
console.log("Spawn Object at:", intersection); // // Raycasting to determine the drop position in 3D
// const raycaster = new THREE.Raycaster();
// const mouseVector = new THREE.Vector2(x, y);
// raycaster.setFromCamera(mouseVector, camera);
// Add the dropped object to the scene state // // Intersect with a ground plane (assume y = 0)
setObjects((prev) => [...prev, { id: Date.now(), position: [intersection.x, intersection.y, intersection.z] }]); // const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
} catch (error) { // const intersection = new THREE.Vector3();
console.error("Invalid data:", error); // raycaster.ray.intersectPlane(groundPlane, intersection);
}
}; // console.log("Spawn Object at:", intersection);
// // Add the dropped object to the scene state
// setObjects((prev) => [...prev, { id: Date.now(), position: [intersection.x, intersection.y, intersection.z] }]);
// } catch (error) {
// console.error("Invalid data:", error);
// }
// };
// return (
// <group>
// {/* Render dropped objects as green boxes */}
// {objects.map((obj) => (
// <mesh key={obj.id} position={obj.position}>
// <boxGeometry args={[1, 1, 1]} />
// <meshStandardMaterial color="green" />
// </mesh>
// ))}
// </group>
// );
// };
import { Html } from "@react-three/drei";
import { useDroppedObjectsStore } from "../../../store/store";
const DroppedObjects: React.FC = () => {
const objects = useDroppedObjectsStore((state) => state.objects); // Get objects from Zustand store
console.log('objects: ', objects);
return ( return (
<group> <>
{/* Render dropped objects as green boxes */} {objects.map((obj, index) => (
{objects.map((obj) => ( <group key={index} position={[Math.random() * 5, Math.random() * 5, 0]}>
<mesh key={obj.id} position={obj.position}> <Html wrapperClass={obj.className}>
<boxGeometry args={[1, 1, 1]} /> <div style={{ padding: "10px", background: "#fff", borderRadius: "6px" }}>
<meshStandardMaterial color="green" /> <div className="header">{obj.header}</div>
</mesh> <div className="data-values">
<div className="value">{obj.value}</div>
<div className="per">{obj.per}</div>
</div>
</div>
</Html>
</group>
))} ))}
</group> </>
); );
}; };
export default DroppedObjects; export default DroppedObjects;

55
app/src/components/ui/componets/RealTimeVisulization.tsx
View File

@ -6,7 +6,8 @@ import { useSelectedZoneStore } from "../../../store/useZoneStore";
import DisplayZone from "./DisplayZone"; import DisplayZone from "./DisplayZone";
import Scene from "../../../modules/scene/scene"; import Scene from "../../../modules/scene/scene";
import useModuleStore from "../../../store/useModuleStore"; import useModuleStore from "../../../store/useModuleStore";
import { useZones } from "../../../store/store"; import { useDroppedObjectsStore, useZones } from "../../../store/store";
import DroppedObjects from "./DroppedFloatingWidgets";
@ -37,14 +38,14 @@ const RealTimeVisulization: React.FC = () => {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
const [zonesData, setZonesData] = useState<FormattedZoneData>({}); const [zonesData, setZonesData] = useState<FormattedZoneData>({});
const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { zones } = useZones() const { zones } = useZones()
useEffect(() => { useEffect(() => {
const data = Array.isArray(zones) ? zones : []; const data = Array.isArray(zones) ? zones : [];
console.log('data: ', data);
const formattedData = data.reduce<FormattedZoneData>((acc, zone) => { const formattedData = data.reduce<FormattedZoneData>((acc, zone) => {
acc[zone.zoneName] = { acc[zone.zoneName] = {
activeSides: [], activeSides: [],
@ -80,23 +81,37 @@ const RealTimeVisulization: React.FC = () => {
}); });
}, [selectedZone]); }, [selectedZone]);
// const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
// console.log("Drop event fired! ✅");
// event.preventDefault();
// const data = event.dataTransfer.getData("text/plain");
// if (!data) {
// console.log("❌ No data received on drop!");
// return;
// }
// try {
// const droppedData = JSON.parse(data);
// console.log("✅ Dropped Data:", droppedData);
// console.log('droppedData: ', droppedData);
// setDroppedObjects((prev) => [...prev, droppedData]); // ✅ Add to state
// console.log(droppedObjects);
// } catch (error) {
// console.error("❌ Error parsing dropped data:", error);
// }
// };
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => { const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
event.preventDefault(); event.preventDefault();
const canvas = document.querySelector(".scene-container"); const data = event.dataTransfer.getData("text/plain"); // Use "text/plain" to match the drag event
if (canvas) {
// Extract relevant properties manually
const dragEvent = new DragEvent("drop", {
bubbles: true,
cancelable: true,
dataTransfer: event.dataTransfer, // Attach dataTransfer manually ✅
});
console.log('dragEvent: ', dragEvent); if (data) {
canvas.dispatchEvent(dragEvent); const droppedData = JSON.parse(data);
useDroppedObjectsStore.getState().addObject(droppedData); // Add to Zustand store
} }
}; };
return ( return (
<div <div
ref={containerRef} ref={containerRef}
@ -115,14 +130,10 @@ const RealTimeVisulization: React.FC = () => {
width: "100%", width: "100%",
borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px", borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
}} }}
onDrop={handleDrop} onDrop={(event) => handleDrop(event)}
onDragOver={(event) => event.preventDefault()}
> >
{/* {objects.map((obj) => (
<mesh key={obj.id} position={obj.position}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="green" />
</mesh>
))} */}
<Scene /> <Scene />
</div> </div>
{activeModule === "visualization" && ( {activeModule === "visualization" && (
@ -146,7 +157,7 @@ const RealTimeVisulization: React.FC = () => {
hiddenPanels={hiddenPanels} hiddenPanels={hiddenPanels}
selectedZone={selectedZone} selectedZone={selectedZone}
setSelectedZone={setSelectedZone} setSelectedZone={setSelectedZone}
/> />
</> </>
)} )}

21
app/src/components/ui/componets/zoneCameraTarget.tsx
View File

@ -1,13 +1,17 @@
import { useEffect, useMemo, useRef, useState } from "react"; import { useEffect, useMemo, useRef, useState } from "react";
import { useThree } from "@react-three/fiber"; import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three"; import * as THREE from "three";
import { useSelectedZoneStore } from "../../../store/useZoneStore"; import { useSelectedZoneStore } from "../../../store/useZoneStore";
import { useEditPosition, usezonePosition, usezoneTarget } from "../../../store/store";
export default function ZoneCentreTarget() { export default function ZoneCentreTarget() {
const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null); const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
const sphereRef = useRef<THREE.Mesh>(null); const sphereRef = useRef<THREE.Mesh>(null);
const { camera, controls }: any = useThree(); const { camera, controls }: any = useThree();
const { zonePosition, setZonePosition } = usezonePosition();
const { zoneTarget, setZoneTarget } = usezoneTarget();
const { Edit, setEdit } = useEditPosition();
useEffect(() => { useEffect(() => {
@ -32,9 +36,9 @@ export default function ZoneCentreTarget() {
sphereRef.current.position.set(selectedZone.zoneViewPortTarget[0], selectedZone.zoneViewPortTarget[1], selectedZone.zoneViewPortTarget[2]); sphereRef.current.position.set(selectedZone.zoneViewPortTarget[0], selectedZone.zoneViewPortTarget[1], selectedZone.zoneViewPortTarget[2]);
} }
if (centrePoint) { if (centrePoint) {
if (centrePoint.length > 0) { if (centrePoint.length > 0) {
let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition); let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget); let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
@ -63,7 +67,7 @@ export default function ZoneCentreTarget() {
}; };
setCam(); setCam();
} else { } else {
let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition); let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget); let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
@ -89,7 +93,14 @@ export default function ZoneCentreTarget() {
} }
} }
} }
}, [selectedZone.zoneViewPortTarget, camera, controls]); }, [selectedZone.zoneViewPortTarget]);
useFrame(() => {
if (Edit) {
setZonePosition([controls.getPosition().x, controls.getPosition().y, controls.getPosition().z])
setZoneTarget([controls.getTarget().x, controls.getTarget().y, controls.getTarget().z])
}
})
return ( return (
<> </> <> </>
); );

5
app/src/components/ui/inputs/RenameInput.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useRef } from "react"; import React, { useState, useRef, useEffect } from "react";
interface RenameInputProps { interface RenameInputProps {
value: string; value: string;
@ -9,6 +9,9 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const [text, setText] = useState(value); const [text, setText] = useState(value);
const inputRef = useRef<HTMLInputElement | null>(null); const inputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {
setText(value); // Ensure state updates when parent value changes
}, [value]);
const handleDoubleClick = () => { const handleDoubleClick = () => {
setIsEditing(true); setIsEditing(true);

7
app/src/components/ui/list/List.tsx
View File

@ -12,17 +12,14 @@ interface ListProps {
} }
const List: React.FC<ListProps> = ({ items = [], remove }) => { const List: React.FC<ListProps> = ({ items = [], remove }) => {
console.log("items: ", items); const { setSelectedZone } = useSelectedZoneStore();
const { setSubModule } = useSubModuleStore();
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { subModule, setSubModule } = useSubModuleStore();
async function handleSelectZone(id: string) { async function handleSelectZone(id: string) {
setSubModule("zoneProperties") setSubModule("zoneProperties")
const email = localStorage.getItem('email') const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0]; const organization = (email!.split("@")[1]).split(".")[0];
let response = await getZoneData(id, organization) let response = await getZoneData(id, organization)
console.log('response: ', response);
setSelectedZone({ setSelectedZone({
zoneName: response?.zoneName, zoneName: response?.zoneName,
activeSides: response?.activeSides || [], activeSides: response?.activeSides || [],

5
app/src/components/ui/realTimeVis/floating/SimpleCard.tsx
View File

@ -19,8 +19,11 @@ const SimpleCard: React.FC<SimpleCardProps> = ({
header, header,
value, value,
per, per,
className: event.currentTarget.className, // Store the class name className: event.currentTarget.className,
}); });
console.log("Dragging Data:", cardData); // ✅ Debugging log
event.dataTransfer.setData("text/plain", cardData); event.dataTransfer.setData("text/plain", cardData);
}; };

3
app/src/modules/scene/scene.tsx
View File

@ -20,6 +20,7 @@ import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
import { useThree } from "@react-three/fiber"; import { useThree } from "@react-three/fiber";
import * as THREE from "three"; import * as THREE from "three";
import DroppedObjects from "../../components/ui/componets/DroppedFloatingWidgets"; import DroppedObjects from "../../components/ui/componets/DroppedFloatingWidgets";
// import Simulation from "./simulationtemp/simulation"; // import Simulation from "./simulationtemp/simulation";
export default function Scene() { export default function Scene() {
@ -44,7 +45,7 @@ export default function Scene() {
onContextMenu={(e) => { onContextMenu={(e) => {
e.preventDefault(); e.preventDefault();
}} }}
> >
<DroppedObjects/> <DroppedObjects/>
<Controls /> <Controls />

2
app/src/services/realTimeVisulization/zoneData/panel.tsx → app/src/services/realTimeVisulization/zoneData/panel.ts
View File

@ -1,4 +1,4 @@
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_BACKEND_URL}`;
type Side = "top" | "bottom" | "left" | "right"; type Side = "top" | "bottom" | "left" | "right";

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

@ -1,324 +1,344 @@
import * as THREE from "three"; import * as THREE from "three";
import * as Types from '../types/world/worldTypes'; import * as Types from "../types/world/worldTypes";
import { create } from "zustand"; 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: any) => { initializeSocket: (email: any) => {
const existingSocket = get().socket; const existingSocket = get().socket;
if (existingSocket) { if (existingSocket) {
return; return;
}
const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`, {
reconnection: false,
auth: { email }
});
set({ socket });
},
disconnectSocket: () => {
set((state: any) => {
state.socket?.disconnect();
return { socket: null };
});
} }
const socket = io(
`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`,
{
reconnection: false,
auth: { email },
}
);
set({ socket });
},
disconnectSocket: () => {
set((state: any) => {
state.socket?.disconnect();
return { socket: null };
});
},
})); }));
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 useZones = create<any>((set: any) => ({ export const useZones = create<any>((set: any) => ({
zones: [], zones: [],
setZones: (x: any) => set(() => ({ zones: x })), setZones: (x: any) => set(() => ({ zones: x })),
})); }));
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: "" }, selectedItem: { name: "", id: "" },
setSelectedItem: (x: any) => set(() => ({ selectedItem: x })), setSelectedItem: (x: any) => set(() => ({ selectedItem: 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 useDeleteModels = create<any>((set: any) => ({ export const useDeleteModels = create<any>((set: any) => ({
deleteModels: false, deleteModels: false,
setDeleteModels: (x: any) => set(() => ({ deleteModels: x })), setDeleteModels: (x: any) => set(() => ({ deleteModels: 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) => ({ export const useMovePoint = create<any>((set: any) => ({
movePoint: false, movePoint: false,
setMovePoint: (x: any) => set(() => ({ movePoint: x })), 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" typeof callback === "function" ? callback(state.floorItems) : callback,
? 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" typeof callback === "function" ? callback(state.wallItems) : callback,
? 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) => set({ sunPosition: newSuntPosition }), setSunPosition: (newSuntPosition: any) =>
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 }),
})); }));
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 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: 50, renderDistance: 50,
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) => set({ objectPosition: newObjectPosition }), setObjectPosition: (newObjectPosition: any) =>
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) => set({ objectRotation: newObjectRotation }), setObjectRotation: (newObjectRotation: any) =>
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: (x: any) => set({ activeUsers: x }), setActiveUsers: (x: any) => set({ activeUsers: x }),
})); }));
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) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })), setDrieUIValue: (x: any) =>
set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
setTouch: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, touch: value } })), setTouch: (value: any) =>
setTemperature: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, temperature: value } })), set((state: any) => ({
setHumidity: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, humidity: value } })), drieUIValue: { ...state.drieUIValue, touch: value },
})),
setTemperature: (value: any) =>
set((state: any) => ({
drieUIValue: { ...state.drieUIValue, temperature: value },
})),
setHumidity: (value: any) =>
set((state: any) => ({
drieUIValue: { ...state.drieUIValue, humidity: value },
})),
})); }));
export const useDrawMaterialPath = create<any>((set: any) => ({ export const useDrawMaterialPath = create<any>((set: any) => ({
drawMaterialPath: false, drawMaterialPath: false,
setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }), setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }),
})); }));
export const useSelectedActionSphere = create<any>((set: any) => ({ export const useSelectedActionSphere = create<any>((set: any) => ({
selectedActionSphere: undefined, selectedActionSphere: undefined,
setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }), setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }),
})); }));
export const useSelectedPath = create<any>((set: any) => ({ export const useSelectedPath = create<any>((set: any) => ({
selectedPath: undefined, selectedPath: undefined,
setSelectedPath: (x: any) => set({ selectedPath: x }), setSelectedPath: (x: any) => set({ selectedPath: x }),
})); }));
interface Path { interface Path {
modeluuid: string; modeluuid: string;
modelName: string; modelName: string;
points: { points: {
uuid: string; uuid: string;
position: [number, number, number]; position: [number, number, number];
rotation: [number, number, number]; rotation: [number, number, number];
actions: { uuid: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | []; actions:
triggers: { uuid: string; type: string; isUsed: boolean }[] | []; | {
}[]; uuid: string;
pathPosition: [number, number, number]; type: string;
pathRotation: [number, number, number]; material: string;
speed: number; delay: number | string;
spawnInterval: number | string;
isUsed: boolean;
}[]
| [];
triggers: { uuid: string; type: string; isUsed: boolean }[] | [];
}[];
pathPosition: [number, number, number];
pathRotation: [number, number, number];
speed: number;
} }
interface SimulationPathsStore { interface SimulationPathsStore {
simulationPaths: Path[]; simulationPaths: Path[];
setSimulationPaths: (paths: Path[]) => void; setSimulationPaths: (paths: Path[]) => void;
} }
export const useSimulationPaths = create<SimulationPathsStore>((set) => ({ export const useSimulationPaths = create<SimulationPathsStore>((set) => ({
simulationPaths: [], simulationPaths: [],
setSimulationPaths: (paths) => set({ simulationPaths: paths }), setSimulationPaths: (paths) => set({ simulationPaths: paths }),
})); }));
// interface Point { // interface Point {
// uuid: string; // uuid: string;
// position: [number, number, number]; // position: [number, number, number];
@ -363,40 +383,75 @@ export const useSimulationPaths = create<SimulationPathsStore>((set) => ({
// setSimulationPaths: (paths) => set({ simulationPaths: paths }), // setSimulationPaths: (paths) => set({ simulationPaths: paths }),
// })); // }));
export const useConnections = create<Types.ConnectionStore>((set) => ({ export const useConnections = create<Types.ConnectionStore>((set) => ({
connections: [], connections: [],
setConnections: (connections) => set({ connections }), setConnections: (connections) => set({ connections }),
addConnection: (newConnection) => addConnection: (newConnection) =>
set((state) => ({ set((state) => ({
connections: [...state.connections, newConnection], connections: [...state.connections, newConnection],
})), })),
removeConnection: (fromUUID, toUUID) => removeConnection: (fromUUID, toUUID) =>
set((state) => ({ set((state) => ({
connections: state.connections connections: state.connections
.map((connection) => .map((connection) =>
connection.fromUUID === fromUUID connection.fromUUID === fromUUID
? { ? {
...connection, ...connection,
toConnections: connection.toConnections.filter( toConnections: connection.toConnections.filter(
(to) => to.toUUID !== toUUID (to) => to.toUUID !== toUUID
), ),
} }
: connection : connection
) )
.filter((connection) => connection.toConnections.length > 0), .filter((connection) => connection.toConnections.length > 0),
})), })),
})); }));
export const useIsConnecting = create<any>((set: any) => ({ export const useIsConnecting = create<any>((set: any) => ({
isConnecting: false, isConnecting: false,
setIsConnecting: (x: any) => set({ isConnecting: x }), setIsConnecting: (x: any) => set({ isConnecting: x }),
})); }));
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 usezoneTarget = create<any>((set: any) => ({
zoneTarget: [],
setZoneTarget: (x: any) => set({ zoneTarget: x }),
}));
export const usezonePosition = create<any>((set: any) => ({
zonePosition: [],
setZonePosition: (x: any) => set({ zonePosition: x }),
}));
interface EditPositionState {
Edit: boolean;
setEdit: (value: boolean) => void;
}
export const useEditPosition = create<EditPositionState>((set) => ({
Edit: false,
setEdit: (value) => set({ Edit: value }), // Properly updating the state
}));
interface DroppedObject {
header: string;
value: string;
per: string;
className: string;
}
interface DroppedObjectsState {
objects: DroppedObject[];
addObject: (obj: DroppedObject) => void;
}
export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
objects: [],
addObject: (obj) => set((state) => ({ objects: [...state.objects, obj] })),
}));