From ec104c25c4643a55fa28f55b3bc4c1bed43221cb Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Mon, 7 Apr 2025 17:59:52 +0530 Subject: [PATCH 1/2] builder zone data updated --- .../properties/ZoneProperties.tsx | 7 +- .../components/ui/componets/AddButtons.tsx | 5 +- .../ui/componets/Dropped3dWidget.tsx | 117 +++++++-------- app/src/components/ui/componets/Panel.tsx | 1 - app/src/components/ui/list/DropDownList.tsx | 139 +++++++++--------- .../factoryBuilder/zones/deleteZoneApi.ts | 2 +- .../realTimeVisulization/zoneData/getZones.ts | 3 +- 7 files changed, 138 insertions(+), 136 deletions(-) diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx index 9e8b37e..ce399b4 100644 --- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx +++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx @@ -28,9 +28,12 @@ const ZoneProperties: React.FC = () => { }; let response = await zoneCameraUpdate(zonesdata, organization); - console.log('response: ', response); + if (response.message === "updated successfully") { + setEdit(false); + } else { + console.log("Not updated Camera Position and Target"); + } - setEdit(false); } catch (error) { console.error("Error in handleSetView:", error); } diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx index d5bfb29..f898b1f 100644 --- a/app/src/components/ui/componets/AddButtons.tsx +++ b/app/src/components/ui/componets/AddButtons.tsx @@ -66,6 +66,8 @@ const AddButtons: React.FC = ({ // Function to toggle lock/unlock a panel const toggleLockPanel = (side: Side) => { + console.log('side: ', side); + //add api const newLockedPanels = selectedZone.lockedPanels.includes(side) ? selectedZone.lockedPanels.filter((panel) => panel !== side) : [...selectedZone.lockedPanels, side]; @@ -93,6 +95,8 @@ const AddButtons: React.FC = ({ // Function to clean all widgets from a panel const cleanPanel = (side: Side) => { + //add api + console.log('side: ', side); const cleanedWidgets = selectedZone.widgets.filter( (widget) => widget.panel !== side ); @@ -101,7 +105,6 @@ const AddButtons: React.FC = ({ ...selectedZone, widgets: cleanedWidgets, }; - // Update the selectedZone state setSelectedZone(updatedZone); }; diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx index d870195..d805776 100644 --- a/app/src/components/ui/componets/Dropped3dWidget.tsx +++ b/app/src/components/ui/componets/Dropped3dWidget.tsx @@ -44,9 +44,7 @@ export default function Dropped3dWidgets() { const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move const planeIntersect = useRef(new THREE.Vector3()); - // const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); - // const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); - // const planeIntersect = useRef(new THREE.Vector3()); + const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]); const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 }); @@ -60,7 +58,7 @@ export default function Dropped3dWidgets() { async function get3dWidgetData() { const result = await get3dWidgetZoneData(selectedZone.zoneId, organization); - console.log('result: ', result); + setWidgets3D(result); const formattedWidgets = result.map((widget: WidgetData) => ({ @@ -84,8 +82,31 @@ export default function Dropped3dWidgets() { const canvasElement = gl.domElement; + const handleDragEnter = (event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + console.log("Drag enter"); + + }; + + const handleDragOver = (event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + + }; + + const handleDragLeave = (event: DragEvent) => { + event.preventDefault(); + event.stopPropagation(); + console.log("Drag leave"); + // Remove visual feedback + canvasElement.style.cursor = ""; + }; + const onDrop = async (event: DragEvent) => { event.preventDefault(); + event.stopPropagation(); + canvasElement.style.cursor = ""; // Reset cursor const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; @@ -93,6 +114,12 @@ export default function Dropped3dWidgets() { const group1 = scene.getObjectByName("itemsGroup"); if (!group1) return; + // Update raycaster with current mouse position + const rect = canvasElement.getBoundingClientRect(); + mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; + mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; + raycaster.setFromCamera(mouse, camera); + const intersects = raycaster.intersectObjects(scene.children, true).filter( (intersect) => !intersect.object.name.includes("Roof") && @@ -125,12 +152,21 @@ export default function Dropped3dWidgets() { } }; + // Add all event listeners + canvasElement.addEventListener("dragenter", handleDragEnter); + canvasElement.addEventListener("dragover", handleDragOver); + canvasElement.addEventListener("dragleave", handleDragLeave); canvasElement.addEventListener("drop", onDrop); - return () => { - canvasElement.removeEventListener("drop", onDrop); - }; - }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption]); + return () => { + // Clean up all event listeners + canvasElement.removeEventListener("dragenter", handleDragEnter); + canvasElement.removeEventListener("dragover", handleDragOver); + canvasElement.removeEventListener("dragleave", handleDragLeave); + canvasElement.removeEventListener("drop", onDrop); + canvasElement.style.cursor = ""; // Ensure cursor is reset + }; + }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption, gl.domElement, scene, raycaster, camera]); const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || []; useEffect(() => { @@ -161,7 +197,7 @@ export default function Dropped3dWidgets() { visualizationSocket.emit("v2:viz-3D-widget:add", adding3dWidget); } // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget) - // console.log('response: ', response); + // addWidget(selectedZone.zoneId, newWidget); setRightSelect(null); @@ -179,7 +215,7 @@ export default function Dropped3dWidgets() { zoneId: selectedZone.zoneId, }; - console.log('deleteWidget: ', deleteWidget); + if (visualizationSocket) { visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget); } @@ -190,7 +226,7 @@ export default function Dropped3dWidgets() { activeZoneWidgets.filter((w: WidgetData) => w.id !== rightClickSelected) ); } catch (error) { - console.error("Error deleting widget:", error); + } finally { setRightClickSelected(null); setRightSelect(null); @@ -304,20 +340,15 @@ export default function Dropped3dWidgets() { const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected); if (!selectedWidget) return; - - - // Format values to 2 decimal places const formatValues = (vals: number[]) => vals.map(val => parseFloat(val.toFixed(2))); - if (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move") { - console.log(`${rightSelect} Completed - Full Position:`, formatValues(selectedWidget.position)); let lastPosition = formatValues(selectedWidget.position) as [number, number, number]; // (async () => { // let response = await update3dWidget(selectedZone, organization, rightClickSelected, lastPosition); - // console.log('response: ', response); + // // if (response) { - // console.log("Widget position updated in API:", response); + // // } // })(); let updatingPosition = { @@ -333,13 +364,13 @@ export default function Dropped3dWidgets() { } else if (rightSelect.includes("Rotate")) { const rotation = selectedWidget.rotation || [0, 0, 0]; - console.log(`${rightSelect} Completed - Full Rotation:`, formatValues(rotation)); + let lastRotation = formatValues(rotation) as [number, number, number]; // (async () => { // let response = await update3dWidgetRotation(selectedZone, organization, rightClickSelected, lastRotation); - // console.log('response: ', response); + // // if (response) { - // console.log("Widget position updated in API:", response); + // // } // })(); let updatingRotation = { @@ -388,49 +419,13 @@ export default function Dropped3dWidgets() { switch (type) { case "ui-Widget 1": - return ( - handleRightClick(e, id)} - /> - ); + return ( handleRightClick(e, id)} />); case "ui-Widget 2": - return ( - handleRightClick(e, id)} - /> - ); + return ( handleRightClick(e, id)} />); case "ui-Widget 3": - return ( - handleRightClick(e, id)} - /> - ); + return ( handleRightClick(e, id)} />); case "ui-Widget 4": - return ( - handleRightClick(e, id)} - /> - ); + return ( handleRightClick(e, id)} />); default: return null; } diff --git a/app/src/components/ui/componets/Panel.tsx b/app/src/components/ui/componets/Panel.tsx index 8ec26a0..c57dac7 100644 --- a/app/src/components/ui/componets/Panel.tsx +++ b/app/src/components/ui/componets/Panel.tsx @@ -21,7 +21,6 @@ interface PanelProps { zoneName: string; activeSides: Side[]; panelOrder: Side[]; - lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx index 3d2a828..3260eb6 100644 --- a/app/src/components/ui/list/DropDownList.tsx +++ b/app/src/components/ui/list/DropDownList.tsx @@ -47,80 +47,83 @@ const DropDownList: React.FC = ({ const [zoneDataList, setZoneDataList] = useState< { id: string; name: string; assets: Asset[] }[] >([]); + const [zonePoints3D, setZonePoints3D] = useState<[]>([]); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); useEffect(() => { - // console.log(zones); - // setZoneDataList([ - // { id: "2e996073-546c-470c-8323-55bd3700c6aa", name: "zone1" }, - // { id: "3f473bf0-197c-471c-a71f-943fc9ca2b47", name: "zone2" }, - // { id: "905e8fb6-9e18-469b-9474-e0478fb9601b", name: "zone3" }, - // { id: "9d9efcbe-8e96-47eb-bfad-128a9e4c532e", name: "zone4" }, - // { id: "884f3d29-eb5a-49a5-abe9-d11971c08e85", name: "zone5" }, - // { id: "70fa55cd-b5c9-4f80-a8c4-6319af3bfb4e", name: "zone6" }, - // ]) + // const value = (zones || []).map( + // (val: { zoneId: string; zoneName: string }) => ({ + // id: val.zoneId, + // name: val.zoneName, + // }) + // ); + // console.log('zones: ', zones); + 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)); + const allPoints = zones.flatMap((zone: any) => zone.points); + setZonePoints3D(allPoints); + // setZoneDataList([ + // { + // id: "zone1", + // name: "Zone 1", + // assets: [ + // { + // id: "asset1", + // name: "Asset 1", + // }, + // { + // id: "asset2", + // name: "Asset 2", + // }, + // { + // id: "asset3", + // name: "Asset 3", + // }, + // ], + // }, + // { + // id: "zone2", + // name: "Zone 2", + // assets: [ + // { + // id: "asset4", + // name: "Asset 4", + // }, + // { + // id: "asset5", + // name: "Asset 5", + // }, + // { + // id: "asset6", + // name: "Asset 6", + // }, + // ], + // }, + // { + // id: "zone3", + // name: "Zone 3", + // assets: [ + // { + // id: "asset7", + // name: "Asset 7", + // }, + // { + // id: "asset8", + // name: "Asset 8", + // }, + // ], + // }, + // ]); - const value = (zones || []).map( - (val: { zoneId: string; zoneName: string }) => ({ - id: val.zoneId, - name: val.zoneName, - }) - ); - setZoneDataList([ - { - id: "zone1", - name: "Zone 1", - assets: [ - { - id: "asset1", - name: "Asset 1", - }, - { - id: "asset2", - name: "Asset 2", - }, - { - id: "asset3", - name: "Asset 3", - }, - ], - }, - { - id: "zone2", - name: "Zone 2", - assets: [ - { - id: "asset4", - name: "Asset 4", - }, - { - id: "asset5", - name: "Asset 5", - }, - { - id: "asset6", - name: "Asset 6", - }, - ], - }, - { - id: "zone3", - name: "Zone 3", - assets: [ - { - id: "asset7", - name: "Asset 7", - }, - { - id: "asset8", - name: "Asset 8", - }, - ], - }, - ]); - }, [zones]); + useEffect(() => { + + // console.log('zonePoints3D: ', zonePoints3D); + }, [zonePoints3D]) return (
diff --git a/app/src/services/factoryBuilder/zones/deleteZoneApi.ts b/app/src/services/factoryBuilder/zones/deleteZoneApi.ts index fbe4a83..2537fb6 100644 --- a/app/src/services/factoryBuilder/zones/deleteZoneApi.ts +++ b/app/src/services/factoryBuilder/zones/deleteZoneApi.ts @@ -15,7 +15,7 @@ export const deleteZonesApi = async (userId: string, organization: string, zoneI } const result = await response.json(); - console.log('result: ', result); + return result; } catch (error) { if (error instanceof Error) { diff --git a/app/src/services/realTimeVisulization/zoneData/getZones.ts b/app/src/services/realTimeVisulization/zoneData/getZones.ts index 8dbf79a..b189050 100644 --- a/app/src/services/realTimeVisulization/zoneData/getZones.ts +++ b/app/src/services/realTimeVisulization/zoneData/getZones.ts @@ -2,8 +2,7 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_UR // let url_Backend_dwinzo = `http://192.168.0.102:5000`; export const getZoneData = async (zoneId: string, organization: string) => { - console.log("organization: ", organization); - console.log("zoneId: ", zoneId); + try { const response = await fetch( `${url_Backend_dwinzo}/api/v2/A_zone/${zoneId}/${organization}`, From cf5faad3d7a2577d4717c380b715692390cbc827 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Mon, 7 Apr 2025 18:00:43 +0530 Subject: [PATCH 2/2] updated 3d widget data --- .../ui/componets/Dropped3dWidget.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/app/src/components/ui/componets/Dropped3dWidget.tsx b/app/src/components/ui/componets/Dropped3dWidget.tsx index d805776..f03dea8 100644 --- a/app/src/components/ui/componets/Dropped3dWidget.tsx +++ b/app/src/components/ui/componets/Dropped3dWidget.tsx @@ -86,13 +86,13 @@ export default function Dropped3dWidgets() { event.preventDefault(); event.stopPropagation(); console.log("Drag enter"); - + }; const handleDragOver = (event: DragEvent) => { event.preventDefault(); event.stopPropagation(); - + }; const handleDragLeave = (event: DragEvent) => { @@ -153,16 +153,16 @@ export default function Dropped3dWidgets() { }; // Add all event listeners - canvasElement.addEventListener("dragenter", handleDragEnter); - canvasElement.addEventListener("dragover", handleDragOver); - canvasElement.addEventListener("dragleave", handleDragLeave); + // canvasElement.addEventListener("dragenter", handleDragEnter); + // canvasElement.addEventListener("dragover", handleDragOver); + // canvasElement.addEventListener("dragleave", handleDragLeave); canvasElement.addEventListener("drop", onDrop); return () => { - // Clean up all event listeners - canvasElement.removeEventListener("dragenter", handleDragEnter); - canvasElement.removeEventListener("dragover", handleDragOver); - canvasElement.removeEventListener("dragleave", handleDragLeave); + // // Clean up all event listeners + // canvasElement.removeEventListener("dragenter", handleDragEnter); + // canvasElement.removeEventListener("dragover", handleDragOver); + // canvasElement.removeEventListener("dragleave", handleDragLeave); canvasElement.removeEventListener("drop", onDrop); canvasElement.style.cursor = ""; // Ensure cursor is reset };