diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index b361395..0fda5ff 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -37,37 +37,33 @@ const SideBarRight: React.FC = () => { {toggleUI && (
{/* {activeModule === "builder" && ( */} -
setSubModule("properties")} - > - -
+ onClick={() => setSubModule("properties")} + > + +
{/* )} */} {activeModule === "simulation" && ( <>
setSubModule("mechanics")} >
setSubModule("simulations")} >
setSubModule("analysis")} > @@ -77,6 +73,17 @@ const SideBarRight: React.FC = () => {
)} {/* process builder */} + {toggleUI && + subModule === "zoneProperties" && + activeModule === "builder" && ( +
+
+ {/* */} + + {/* */} +
+
+ )} {toggleUI && subModule === "properties" && activeModule !== "visualization" && ( @@ -88,7 +95,6 @@ const SideBarRight: React.FC = () => { )} - {/* simulation */} {toggleUI && activeModule === "simulation" && ( diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx index 65dd55f..4baf91c 100644 --- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx @@ -1,9 +1,11 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import RenameInput from "../../../ui/inputs/RenameInput"; import Vector3Input from "../customInput/Vector3Input"; +import { useSelectedZoneStore } from "../../../../store/useZoneStore"; const ZoneProperties: React.FC = () => { const [Edit, setEdit] = useState(false); + const { selectedZone, setSelectedZone } = useSelectedZoneStore(); function handleSetView() { setEdit(false); @@ -16,17 +18,21 @@ const ZoneProperties: React.FC = () => { setEdit(true); } } + useEffect(() => { + + console.log(' selectedZone.zoneName: ', selectedZone.zoneName); + }, [selectedZone]) return (
- +
{Edit ? "Cancel" : "Edit"}
- {}} header="Viewport Target" /> - {}} header="Viewport Position" /> + { }} header="Viewport Target" /> + { }} header="Viewport Position" /> {Edit && (
Set View diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx index 85fa976..4410cb6 100644 --- a/app/src/components/ui/componets/AddButtons.tsx +++ b/app/src/components/ui/componets/AddButtons.tsx @@ -4,6 +4,7 @@ import { EyeIcon, LockIcon, } from "../../icons/RealTimeVisulationIcons"; +import { panelData } from "../../../services/realTimeVisulization/zoneData/panel"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -15,6 +16,9 @@ interface ButtonsProps { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; + zoneId: string; + zoneViewPortTarget: number[]; + zoneViewPortPosition: number[] widgets: { id: string; type: string; @@ -29,6 +33,9 @@ interface ButtonsProps { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; + zoneId: string; + zoneViewPortTarget: number[]; + zoneViewPortPosition: number[] widgets: { id: string; type: string; @@ -108,7 +115,7 @@ const AddButtons: React.FC = ({ panelOrder: newActiveSides, }; - // Update the selectedZone state + // Delete the selectedZone state console.log('updatedZone: ', updatedZone); setSelectedZone(updatedZone); } else { @@ -120,6 +127,10 @@ const AddButtons: React.FC = ({ activeSides: newActiveSides, panelOrder: newActiveSides, }; + const email = localStorage.getItem('email') + const organization = (email!.split("@")[1]).split(".")[0]; + let response = panelData(organization, selectedZone.zoneId, newActiveSides) + console.log('response: ', response); // Update the selectedZone state console.log('updatedZone: ', updatedZone); @@ -128,70 +139,73 @@ const AddButtons: React.FC = ({ }; return ( -
- {(["top", "right", "bottom", "left"] as Side[]).map((side) => ( -
- {/* "+" Button */} - + <> - {/* Extra Buttons */} - {selectedZone.activeSides.includes(side) && ( -
- {/* Hide Panel */} -
toggleVisibility(side)} - > - + {(["top", "right", "bottom", "left"] as Side[]).map((side) => ( +
+ {/* "+" Button */} + + + {/* Extra Buttons */} + {selectedZone.activeSides.includes(side) && ( +
+ {/* Hide Panel */} +
-
+ onClick={() => toggleVisibility(side)} + > + +
- {/* Clean Panel */} -
cleanPanel(side)} - > - -
+ {/* Clean Panel */} +
cleanPanel(side)} + > + +
- {/* Lock/Unlock Panel */} -
toggleLockPanel(side)} - > - + {/* Lock/Unlock Panel */} +
toggleLockPanel(side)} + > + +
-
- )} -
- ))} -
+ )} +
+ ))} +
+ ); }; diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index e699f27..56c67bb 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -11,6 +11,9 @@ interface DisplayZoneProps { panelOrder: Side[]; lockedPanels: Side[]; widgets: Widget[]; + zoneId: string; + zoneViewPortTarget: number[]; + zoneViewPortPosition: number[]; }; }; selectedZone: { @@ -18,6 +21,9 @@ interface DisplayZoneProps { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; + zoneId: string; + zoneViewPortTarget: number[]; + zoneViewPortPosition: number[]; widgets: { id: string; type: string; @@ -32,6 +38,9 @@ interface DisplayZoneProps { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; + zoneId: string; + zoneViewPortTarget: number[]; + zoneViewPortPosition: number[]; widgets: { id: string; type: string; @@ -152,16 +161,16 @@ const DisplayZone: React.FC = ({ return (
{Object.keys(zonesData).map((zoneName, index) => (
{ - console.log('zoneName: ', zoneName); + setSelectedZone({ zoneName, @@ -169,12 +178,15 @@ const DisplayZone: React.FC = ({ panelOrder: zonesData[zoneName].panelOrder || [], lockedPanels: zonesData[zoneName].lockedPanels || [], widgets: zonesData[zoneName].widgets || [], - }) + zoneId: zonesData[zoneName]?.zoneId || "", + zoneViewPortTarget: zonesData[zoneName].zoneViewPortTarget || [], + zoneViewPortPosition: + zonesData[zoneName].zoneViewPortPosition || [], + }); // setSelectedZone({ // zoneName, // ...zonesData[zoneName], // }); - console.log(selectedZone); }} > {zoneName} @@ -184,4 +196,4 @@ const DisplayZone: React.FC = ({ ); }; -export default DisplayZone; \ No newline at end of file +export default DisplayZone; diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx new file mode 100644 index 0000000..19b1717 --- /dev/null +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -0,0 +1,59 @@ +import { useState } from "react"; +import { useThree } from "@react-three/fiber"; +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"); + if (!data) return; + + try { + const cardData = JSON.parse(data); + if (!cardData.className.includes("floating total-card")) { + console.log("Drop rejected: Incorrect element."); + return; + } + + // Convert 2D drop position to 3D world coordinates + const x = (event.clientX / window.innerWidth) * 2 - 1; + const y = -(event.clientY / window.innerHeight) * 2 + 1; + + // Raycasting to determine the drop position in 3D + const raycaster = new THREE.Raycaster(); + const mouseVector = new THREE.Vector2(x, y); + raycaster.setFromCamera(mouseVector, camera); + + // Intersect with a ground plane (assume y = 0) + const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); + const intersection = new THREE.Vector3(); + 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 ( + + {/* Render dropped objects as green boxes */} + {objects.map((obj) => ( + + + + + ))} + + ); +}; + +export default DroppedObjects; diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx index ba08334..bea30f4 100644 --- a/app/src/components/ui/componets/Panel.tsx +++ b/app/src/components/ui/componets/Panel.tsx @@ -20,6 +20,9 @@ interface PanelProps { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; + zoneId: string; + zoneViewPortTarget: number[]; + zoneViewPortPosition: number[] widgets: Widget[]; }; setSelectedZone: React.Dispatch< @@ -28,6 +31,9 @@ interface PanelProps { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; + zoneId: string; + zoneViewPortTarget: number[]; + zoneViewPortPosition: number[] widgets: Widget[]; }> >; diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 53e9999..ae32857 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -6,7 +6,8 @@ import { useSelectedZoneStore } from "../../../store/useZoneStore"; import DisplayZone from "./DisplayZone"; import Scene from "../../../modules/scene/scene"; import useModuleStore from "../../../store/useModuleStore"; -import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones"; +import { useZones } from "../../../store/store"; + type Side = "top" | "bottom" | "left" | "right"; @@ -17,7 +18,9 @@ type FormattedZoneData = Record< activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; - zoneCentrePoint: number[]; + zoneId: string; + zoneViewPortTarget: number[]; + zoneViewPortPosition: number[] widgets: Widget[]; } >; @@ -28,12 +31,6 @@ type Widget = { panel: Side; data: any; }; -type Zone = { - zoneId: string; - zoneName: string; - points: number[][]; - layer: number; -}; const RealTimeVisulization: React.FC = () => { const [hiddenPanels, setHiddenPanels] = React.useState([]); @@ -43,45 +40,30 @@ const RealTimeVisulization: React.FC = () => { const [zonesData, setZonesData] = useState({}); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); + const { zones } = useZones() useEffect(() => { - async function GetZoneData() { - try { - const response: { data: Zone[] } | undefined = await getZonesApi( - "hexrfactory" - ); + const data = Array.isArray(zones) ? zones : []; + console.log('data: ', data); + const formattedData = data.reduce((acc, zone) => { + acc[zone.zoneName] = { + activeSides: [], + panelOrder: [], + lockedPanels: [], + zoneId: zone.zoneId, + zoneViewPortTarget: zone.viewPortCenter, + zoneViewPortPosition: zone.viewPortposition, + widgets: [], + }; + return acc; + }, {}); - if (!response || !response.data) { - return; - } - const formattedData = response?.data?.reduce( - (acc, zone) => { - acc[zone.zoneName] = { - activeSides: [], - panelOrder: [], - lockedPanels: [], - zoneCentrePoint: [], - widgets: [], - }; - return acc; - }, - {} - ); - setZonesData(formattedData); - } catch (error) { } - } - GetZoneData(); - }, []); - - useEffect(() => { - - console.log('zonesData: ', zonesData); - }, [zonesData]); + setZonesData(formattedData); + }, [zones]); useEffect(() => { setZonesData((prev) => { if (!selectedZone) return prev; - return { ...prev, [selectedZone.zoneName]: { @@ -89,12 +71,32 @@ const RealTimeVisulization: React.FC = () => { activeSides: selectedZone.activeSides || [], panelOrder: selectedZone.panelOrder || [], lockedPanels: selectedZone.lockedPanels || [], + zoneId: selectedZone.zoneId || "", + zoneViewPortTarget: selectedZone.zoneViewPortTarget || [], + zoneViewPortPosition: selectedZone.zoneViewPortPosition || [], widgets: selectedZone.widgets || [], }, }; }); }, [selectedZone]); + const handleDrop = (event: React.DragEvent) => { + event.preventDefault(); + const canvas = document.querySelector(".scene-container"); + 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); + canvas.dispatchEvent(dragEvent); + } + }; + + return (
{ width: "100%", borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px", }} + onDrop={handleDrop} > + {/* {objects.map((obj) => ( + + + + + ))} */}
{activeModule === "visualization" && ( @@ -124,7 +133,7 @@ const RealTimeVisulization: React.FC = () => { setSelectedZone={setSelectedZone} /> - {!isPlaying && ( + {!isPlaying && selectedZone?.zoneName !== "" && ( { )} diff --git a/app/src/components/ui/componets/zoneCameraTarget.tsx b/app/src/components/ui/componets/zoneCameraTarget.tsx new file mode 100644 index 0000000..8605afa --- /dev/null +++ b/app/src/components/ui/componets/zoneCameraTarget.tsx @@ -0,0 +1,96 @@ +import { useEffect, useMemo, useRef, useState } from "react"; +import { useThree } from "@react-three/fiber"; +import * as THREE from "three"; +import { useSelectedZoneStore } from "../../../store/useZoneStore"; + +export default function ZoneCentreTarget() { + const { selectedZone, setSelectedZone } = useSelectedZoneStore(); + const [previousZoneCentre, setPreviousZoneCentre] = useState(null); + const sphereRef = useRef(null); + const { camera, controls }: any = useThree(); + + + useEffect(() => { + if ( + selectedZone.zoneViewPortTarget && + JSON.stringify(previousZoneCentre) !== JSON.stringify(selectedZone.zoneViewPortTarget) + ) { + setPreviousZoneCentre(selectedZone.zoneViewPortTarget); + } + }, [selectedZone.zoneViewPortTarget, previousZoneCentre]); + + const centrePoint = useMemo(() => { + if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null; + return previousZoneCentre.map((value, index) => + (value + selectedZone.zoneViewPortTarget[index]) / 2 + ); + }, [previousZoneCentre, selectedZone.zoneViewPortTarget]); + + useEffect(() => { + if (selectedZone.zoneName !== "") { + if (sphereRef.current) { + sphereRef.current.position.set(selectedZone.zoneViewPortTarget[0], selectedZone.zoneViewPortTarget[1], selectedZone.zoneViewPortTarget[2]); + } + if (centrePoint) { + + if (centrePoint.length > 0) { + + let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition); + let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget); + + const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize(); + + const worldUp = new THREE.Vector3(0, 0, 1); + const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize(); + const up = new THREE.Vector3().crossVectors(direction, right).normalize(); + + const offsetPosition = up.clone().multiplyScalar(20); + + camPosition.add(offsetPosition); + + + const setCam = async () => { + controls.setLookAt(centrePoint[0], 100, centrePoint[2], ...centrePoint, true); + setTimeout(() => { + controls?.setLookAt( + ...camPosition.toArray(), + selectedZone.zoneViewPortTarget[0], + selectedZone.zoneViewPortTarget[1], + selectedZone.zoneViewPortTarget[2], + true + ); + }, 400) + }; + setCam(); + } else { + + let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition); + let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget); + + const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize(); + + const worldUp = new THREE.Vector3(0, 0, 1); + const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize(); + const up = new THREE.Vector3().crossVectors(direction, right).normalize(); + + const offsetPosition = up.clone().multiplyScalar(20); + + camPosition.add(offsetPosition); + const setCam = async () => { + controls?.setLookAt( + ...camPosition.toArray(), + selectedZone.zoneViewPortTarget[0], + selectedZone.zoneViewPortTarget[1], + selectedZone.zoneViewPortTarget[2], + true + ); + }; + setCam(); + } + } + } + }, [selectedZone.zoneViewPortTarget, camera, controls]); + return ( + <> + ); +} diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx index a61054b..96985a3 100644 --- a/app/src/components/ui/list/DropDownList.tsx +++ b/app/src/components/ui/list/DropDownList.tsx @@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react"; import List from "./List"; import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons"; import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect"; -import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones"; +import { useZones } from "../../../store/store"; +import { useSelectedZoneStore } from "../../../store/useZoneStore"; interface DropDownListProps { value?: string; // Value to display in the DropDownList @@ -29,24 +30,23 @@ const DropDownList: React.FC = ({ defaultOpen = false, listType = "default", }) => { + const [isOpen, setIsOpen] = useState(defaultOpen); + const { zones, setZones } = useZones() const handleToggle = () => { setIsOpen((prev) => !prev); // Toggle the state }; const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]); + const { selectedZone, setSelectedZone } = useSelectedZoneStore(); useEffect(() => { - async function GetZoneData() { - const response = await getZonesApi("hexrfactory") - console.log('response: ', response.data); - setZoneDataList([{ id: "1", name: "zone1" }, - { id: "2", name: "Zone 2" },]) - } - - GetZoneData() - - }, []) + const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({ + id: val.zoneId, + name: val.zoneName + })); + setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev)); + }, [zones]); return (
diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index bdf4749..75ff903 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -1,6 +1,9 @@ import React from "react"; import RenameInput from "../inputs/RenameInput"; import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons"; +import { useSelectedZoneStore } from "../../../store/useZoneStore"; +import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones"; +import { useSubModuleStore } from "../../../store/useModuleStore"; interface ListProps { items?: { id: string; name: string }[]; // Optional array of items to render @@ -8,7 +11,28 @@ interface ListProps { } const List: React.FC = ({ items = [] }) => { - console.log('items: ', items); + const { selectedZone, setSelectedZone } = useSelectedZoneStore(); + const { subModule, setSubModule } = useSubModuleStore(); + + async function handleSelectZone(id: string) { + setSubModule("zoneProperties") + const email = localStorage.getItem('email') + const organization = (email!.split("@")[1]).split(".")[0]; + let response = await getZoneData(id, organization) + console.log('response: ', response); + setSelectedZone({ + zoneName: response?.zoneName, + activeSides: response?.activeSides || [], + panelOrder: response?.panelOrder || [], + lockedPanels: response?.lockedPanels || [], + widgets: response?.widgets || [], + zoneId: response?.zoneId, + zoneViewPortTarget: response?.viewPortCenter || [], + zoneViewPortPosition: + response?.viewPortposition || [], + }); + + } return ( <> {items.length > 0 ? ( @@ -16,7 +40,7 @@ const List: React.FC = ({ items = [] }) => { {items.map((item, index) => (
  • -
    +
    handleSelectZone(item.id)}>
    diff --git a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx index d67e87f..fca0c3d 100644 --- a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx +++ b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx @@ -13,8 +13,19 @@ const SimpleCard: React.FC = ({ value, per, }) => { + + const handleDragStart = (event: React.DragEvent) => { + const cardData = JSON.stringify({ + header, + value, + per, + className: event.currentTarget.className, // Store the class name + }); + event.dataTransfer.setData("text/plain", cardData); + }; + return ( -
    +
    {header}
    diff --git a/app/src/modules/builder/geomentries/assets/assetManager.ts b/app/src/modules/builder/geomentries/assets/assetManager.ts index f083395..38d0721 100644 --- a/app/src/modules/builder/geomentries/assets/assetManager.ts +++ b/app/src/modules/builder/geomentries/assets/assetManager.ts @@ -112,7 +112,7 @@ export default async function assetManager( ) { if (!activePromises.get(taskId)) return; // Stop processing if task is canceled - const existingModel = itemsGroup.current.getObjectByProperty("uuid", item.modeluuid); + const existingModel = itemsGroup?.current?.getObjectByProperty("uuid", item.modeluuid); if (existingModel) { // console.log(`Model ${item.modelname} already exists in the scene.`); resolve(); diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx index 9e0bc15..3d47a7e 100644 --- a/app/src/modules/builder/groups/zoneGroup.tsx +++ b/app/src/modules/builder/groups/zoneGroup.tsx @@ -65,6 +65,8 @@ const ZoneGroup: React.FC = () => { zoneId: zone.zoneId, zoneName: zone.zoneName, points: zone.points, + viewPortCenter: zone.viewPortCenter, + viewPortposition: zone.viewPortposition, layer: zone.layer })); @@ -145,7 +147,7 @@ const ZoneGroup: React.FC = () => { const target: [number, number, number] | null = calculateCenter(zone.points); if (!target) return; - const position = [target[0], 75, target[2]]; + const position = [target[0], 10, target[2]]; const input = { userId: userId, @@ -186,7 +188,7 @@ const ZoneGroup: React.FC = () => { const target: [number, number, number] | null = calculateCenter(zone.points); if (!target) return; - const position = [target[0], 75, target[2]]; + const position = [target[0], 10, target[2]]; const input = { userId: userId, diff --git a/app/src/modules/collaboration/socketResponses.dev.tsx b/app/src/modules/collaboration/socketResponses.dev.tsx index e9ca9e0..031629f 100644 --- a/app/src/modules/collaboration/socketResponses.dev.tsx +++ b/app/src/modules/collaboration/socketResponses.dev.tsx @@ -745,6 +745,7 @@ export default function SocketResponses({ return } if (data.message === "zone deleted") { + console.log('data: ', data); const updatedZones = zones.filter((zone: any) => zone.zoneId !== data.data.zoneId); setZones(updatedZones); diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx index 3aaff94..9286a66 100644 --- a/app/src/modules/scene/scene.tsx +++ b/app/src/modules/scene/scene.tsx @@ -1,4 +1,4 @@ -import { useMemo } from "react"; +import { useMemo, useState } from "react"; import { Canvas } from "@react-three/fiber"; import { Environment, KeyboardControls } from "@react-three/drei"; @@ -15,6 +15,11 @@ import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr"; import SelectionControls from "./controls/selection/selectionControls"; import MeasurementTool from "./tools/measurementTool"; import Simulation from "../simulation/simulation"; +import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget"; + +import { useThree } from "@react-three/fiber"; +import * as THREE from "three"; +import DroppedObjects from "../../components/ui/componets/DroppedFloatingWidgets"; // import Simulation from "./simulationtemp/simulation"; export default function Scene() { @@ -27,6 +32,9 @@ export default function Scene() { // { name: "jump", keys: ["Space"] }, ], []) + + + return ( { e.preventDefault(); }} + > + + {/* */} diff --git a/app/src/services/realTimeVisulization/zoneData/getZones.ts b/app/src/services/realTimeVisulization/zoneData/getZones.ts index b5e8147..39031d8 100644 --- a/app/src/services/realTimeVisulization/zoneData/getZones.ts +++ b/app/src/services/realTimeVisulization/zoneData/getZones.ts @@ -1,25 +1,23 @@ -let url_Backend_dwinzo = `http://185.100.212.76:5000`; +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; -export const getZonesApi = async (organization: string) => { - try { - const response = await fetch(`${url_Backend_dwinzo}/api/v2/findZones/${organization}`, { - method: "GET", - headers: { - "Content-Type": "application/json", - }, - }); +export const getZoneData = async (zoneId: string, organization: string) => { + try { + const response = await fetch( + `${url_Backend_dwinzo}/api/v2/A_zone/${zoneId}/${organization}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + } + ); - // if (!response.ok) { - // throw new Error("Failed to get Zones"); - // } - - const result = await response.json(); - return result; - } catch (error) { - if (error instanceof Error) { - throw new Error(error.message); - } else { - throw new Error("An unknown error occurred"); - } + if (!response.ok) { + throw new Error("Failed to fetch zoneData"); } -}; \ No newline at end of file + + return await response.json(); + } catch (error: any) { + throw new Error(error.message); + } +}; diff --git a/app/src/services/realTimeVisulization/zoneData/panel.tsx b/app/src/services/realTimeVisulization/zoneData/panel.tsx new file mode 100644 index 0000000..793bedb --- /dev/null +++ b/app/src/services/realTimeVisulization/zoneData/panel.tsx @@ -0,0 +1,31 @@ +let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`; + +type Side = "top" | "bottom" | "left" | "right"; + +export const panelData = async (organization: string, zoneID: string, panelOrder: Side[]) => { + console.log('panelOrder: ', panelOrder); + console.log('zoneID: ', zoneID); + console.log('organization: ', organization); + try { + const response = await fetch(`${url_Backend_dwinzo}/api/v1/panel/save`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ organization, zoneID, panelOrder }), + }); + + if (!response.ok) { + throw new Error("Failed to add panelOrder for Zone"); + } + + const result = await response.json(); + return result; + } catch (error) { + if (error instanceof Error) { + throw new Error(error.message); + } else { + throw new Error("An unknown error occurred"); + } + } +}; \ No newline at end of file diff --git a/app/src/store/useZoneStore.ts b/app/src/store/useZoneStore.ts index e0a66f0..007a1c6 100644 --- a/app/src/store/useZoneStore.ts +++ b/app/src/store/useZoneStore.ts @@ -15,21 +15,31 @@ interface SelectedZoneState { activeSides: Side[]; panelOrder: Side[]; lockedPanels: Side[]; + zoneId: string; + zoneViewPortTarget: number[]; + zoneViewPortPosition: number[]; widgets: Widget[]; } interface SelectedZoneStore { selectedZone: SelectedZoneState; - setSelectedZone: (zone: Partial | ((prev: SelectedZoneState) => SelectedZoneState)) => void; + setSelectedZone: ( + zone: + | Partial + | ((prev: SelectedZoneState) => SelectedZoneState) + ) => void; } export const useSelectedZoneStore = create((set) => ({ selectedZone: { - zoneName: "", - activeSides: [], - panelOrder: [], - lockedPanels: [], - widgets: [], + zoneName: "", // Empty string initially + activeSides: [], // Empty array + panelOrder: [], // Empty array + lockedPanels: [], // Empty array + zoneId: "", + zoneViewPortTarget: [], + zoneViewPortPosition: [], + widgets: [], // Empty array }, setSelectedZone: (zone) => set((state) => ({ @@ -38,4 +48,4 @@ export const useSelectedZoneStore = create((set) => ({ ? zone(state.selectedZone) // Handle functional updates : { ...state.selectedZone, ...zone }, // Handle partial updates })), -})); \ No newline at end of file +}));