From 2591de38daf0a8a17a4259bbba38393d3af38455 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Thu, 27 Mar 2025 18:04:16 +0530 Subject: [PATCH 1/2] floating widgets data added --- .../components/layout/3D-cards/CardsScene.tsx | 2 +- .../components/ui/componets/DisplayZone.tsx | 8 +- .../ui/componets/DroppedFloatingWidgets.tsx | 274 +++++++++++++----- .../ui/componets/RealTimeVisulization.tsx | 59 ++-- .../ui/componets/zoneCameraTarget.tsx | 3 - .../realTimeVis/floating/FleetEfficiency.tsx | 18 +- .../ui/realTimeVis/floating/SimpleCard.tsx | 18 +- .../floating/WarehouseThroughput.tsx | 21 +- app/src/modules/scene/scene.tsx | 3 +- .../realTimeVisulization/zoneData/panel.ts | 67 +++-- app/src/store/store.ts | 35 +-- app/src/store/useDroppedObjectsStore.ts | 78 +++++ .../floating/energyConsumed.scss | 1 - app/src/styles/pages/realTimeViz.scss | 19 +- 14 files changed, 431 insertions(+), 175 deletions(-) create mode 100644 app/src/store/useDroppedObjectsStore.ts diff --git a/app/src/components/layout/3D-cards/CardsScene.tsx b/app/src/components/layout/3D-cards/CardsScene.tsx index 40f8537..471034c 100644 --- a/app/src/components/layout/3D-cards/CardsScene.tsx +++ b/app/src/components/layout/3D-cards/CardsScene.tsx @@ -11,7 +11,7 @@ const CardsScene = () => { {/* 3d-cards */} - {/* */} + {/* */} {/* */} {/* */} diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index 56c67bb..a3d87b9 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef } from "react"; import { Widget } from "../../../store/useWidgetStore"; +import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -64,9 +65,9 @@ const DisplayZone: React.FC = ({ const [selectedOption, setSelectedOption] = React.useState( null ); - // console.log('setSelectedOption: ', setSelectedOption); + // const [options, setOptions] = React.useState([]); - // console.log('setOptions: ', setOptions); + // // Scroll to the selected option when it changes useEffect(() => { @@ -170,8 +171,7 @@ const DisplayZone: React.FC = ({ className={`zone ${selectedZone.zoneName === zoneName ? "active" : "" }`} onClick={() => { - - + useDroppedObjectsStore.getState().setZone(zoneName, zonesData[zoneName]?.zoneId); setSelectedZone({ zoneName, activeSides: zonesData[zoneName].activeSides || [], diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx index f7c1bd3..95668f9 100644 --- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx +++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx @@ -1,89 +1,215 @@ -// 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) => ( -// -// -// -// -// ))} -// -// ); -// }; - -import { Html } from "@react-three/drei"; -import { useDroppedObjectsStore } from "../../../store/store"; - +import { WalletIcon } from "../../icons/3dChartIcons"; +import { useEffect, useRef, useState } from "react"; +import { Line } from "react-chartjs-2"; +import { useDroppedObjectsStore, Zones } from "../../../store/useDroppedObjectsStore"; const DroppedObjects: React.FC = () => { - const objects = useDroppedObjectsStore((state) => state.objects); // Get objects from Zustand store - console.log('objects: ', objects); + const zones = useDroppedObjectsStore((state) => state.zones); + + const updateObjectPosition = useDroppedObjectsStore((state) => state.updateObjectPosition); + const [draggingIndex, setDraggingIndex] = useState<{ zone: string; index: number } | null>(null); + const [offset, setOffset] = useState<[number, number] | null>(null); + const positionRef = useRef<[number, number] | null>(null); + const animationRef = useRef(null); + + // useEffect(() => { + // const initialZones: Record = { + // "Zone 1": { + // zoneName: "Zone 1", + // zoneId: "2e996073-546c-470c-8323-55bd3700c6aa", + // objects: [ + // { + // header: "Today’s Money", + // value: 53000, // ✅ Converted to number + // per: "+55%", + // className: "floating total-card", + // position: [146, 214], // ✅ No need for 'as' here + // }, + // { + // header: "New Clients", + // value: 250, // ✅ Converted to number + // per: "+12%", + // className: "floating total-card", + // position: [344, 295], + // }, + // ], + // }, + // }; + + // useDroppedObjectsStore.setState({ zones: initialZones }); + // }, []); + + const zoneEntries = Object.entries(zones); + if (zoneEntries.length === 0) return null; // No zone, nothing to render + const [zoneName, zone] = zoneEntries[0]; // Only render the first zone + + function handlePointerDown(event: React.PointerEvent, index: number) { + const obj = zone.objects[index]; + const offsetX = event.clientX - obj.position[1]; + const offsetY = event.clientY - obj.position[0]; + + setDraggingIndex({ zone: zoneName, index }); + setOffset([offsetY, offsetX]); + } + + function handlePointerMove(event: React.PointerEvent) { + if (!draggingIndex || !offset) return; + + const container = document.getElementById("real-time-vis-canvas"); + if (!container) return; + + const rect = container.getBoundingClientRect(); + + let newX = event.clientX - offset[1]; + let newY = event.clientY - offset[0]; + + newX = Math.max(0, Math.min(rect.width - 50, newX)); + newY = Math.max(0, Math.min(rect.height - 50, newY)); + + positionRef.current = [newY, newX]; + + if (!animationRef.current) { + animationRef.current = requestAnimationFrame(() => { + if (positionRef.current) { + updateObjectPosition(zoneName, draggingIndex.index, positionRef.current); + } + animationRef.current = null; + }); + } + } + + function handlePointerUp() { + setDraggingIndex(null); + setOffset(null); + if (animationRef.current) { + cancelAnimationFrame(animationRef.current); + animationRef.current = null; + } + } return ( - <> - {objects.map((obj, index) => ( - - -
-
{obj.header}
-
-
{obj.value}
-
{obj.per}
+
+ {zone.objects.map((obj, index) => ( +
handlePointerDown(event, index)} + > + {obj.className === "floating total-card" ? ( +
+
+
{obj.header}
+
+
{obj.value}
+
{obj.per}
+
+
+
+
- - + ) : obj.className === "warehouseThroughput floating" ? ( +
+
+

Warehouse Throughput

+

+ (+5) more in 2025 +

+
+
+ {/* */} +
+
+ ) : obj.className === "fleetEfficiency floating" ? ( +
+

Fleet Efficiency

+
+
+
+
+
+
+
+
+ 0% +
+
{obj.per}%
+
Optimal
+
+ 100% +
+
+ ) : null} +
))} - +
); }; + + + + export default DroppedObjects; + + + + + + + + + + + + + + + +// import { Html } from "@react-three/drei"; +// import { useDroppedObjectsStore } from "../../../store/store"; +// import { CartIcon, DocumentIcon, GlobeIcon, WalletIcon } from "../../icons/3dChartIcons"; +// import SimpleCard from "../realTimeVis/floating/SimpleCard"; + +// const ICON_MAP: Record>> = { +// WalletIcon, +// GlobeIcon, +// DocumentIcon, +// CartIcon +// }; +// const DroppedObjects: React.FC = () => { +// const objects = useDroppedObjectsStore((state) => state.objects); // Get objects from Zustand store +// + +// return ( +// <> +// {objects.map((obj, index) => { +// const IconComponent = obj.Icon || WalletIcon; // Use obj.Icon directly if it exists +// return ( +// +// ); +// })} +// +// ); +// }; + +// export default DroppedObjects; diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index cecc2c0..61b379b 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -6,8 +6,10 @@ import { useSelectedZoneStore } from "../../../store/useZoneStore"; import DisplayZone from "./DisplayZone"; import Scene from "../../../modules/scene/scene"; import useModuleStore from "../../../store/useModuleStore"; -import { useDroppedObjectsStore, useZones } from "../../../store/store"; + import DroppedObjects from "./DroppedFloatingWidgets"; +import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore"; +import { useZones } from "../../../store/store"; @@ -81,36 +83,36 @@ const RealTimeVisulization: React.FC = () => { }); }, [selectedZone]); - // const handleDrop = (event: React.DragEvent) => { - // 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) => { event.preventDefault(); - const data = event.dataTransfer.getData("text/plain"); // Use "text/plain" to match the drag event - - if (data) { - const droppedData = JSON.parse(data); - useDroppedObjectsStore.getState().addObject(droppedData); // Add to Zustand store + const data = event.dataTransfer.getData("text/plain"); + if (!data || !selectedZone.zoneName) return; + + const droppedData = JSON.parse(data); + const canvasElement = document.getElementById("real-time-vis-canvas"); + if (!canvasElement) return; + + const canvasRect = canvasElement.getBoundingClientRect(); + const relativeX = event.clientX - canvasRect.left; + const relativeY = event.clientY - canvasRect.top; + + const newObject = { + ...droppedData, + position: [relativeY, relativeX], // Y first because of top/left style + }; + + console.log("newObject: ", newObject); + + // Only set zone if it’s not already in the store (prevents overwriting objects) + const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName]; + if (!existingZone) { + useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId); } + + // Add the dropped object to the zone + useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject); }; + return (
{ onDrop={(event) => handleDrop(event)} onDragOver={(event) => event.preventDefault()} > - +
+ {activeModule === "visualization" && ( <> { controls.setLookAt(centrePoint[0], 100, centrePoint[2], ...centrePoint, true); setTimeout(() => { diff --git a/app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx b/app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx index 696b560..03c00e8 100644 --- a/app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx +++ b/app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx @@ -4,8 +4,24 @@ const FleetEfficiency = () => { // Calculate the rotation angle for the progress bar const rotationAngle = -90 + progress * 3.6; // Progress starts from the left (-90°) + const handleDragStart = (event: React.DragEvent) => { + const rect = event.currentTarget.getBoundingClientRect(); // Get position + + const cardData = JSON.stringify({ + className: event.currentTarget.className, + position: [rect.top, rect.left], // Store position + value: rotationAngle, // Example value (you can change if dynamic) + per: progress, + + }); + + console.log("Dragged Data:", cardData); + event.dataTransfer.setData("text/plain", cardData); + }; + + return ( -
+

Fleet Efficiency

diff --git a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx index ef3d85c..ee996bd 100644 --- a/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx +++ b/app/src/components/ui/realTimeVis/floating/SimpleCard.tsx @@ -5,6 +5,7 @@ interface SimpleCardProps { icon: React.ComponentType>; // React component for SVG icon value: string; per: string; // Percentage change + position?: [number, number] } const SimpleCard: React.FC = ({ @@ -12,23 +13,30 @@ const SimpleCard: React.FC = ({ icon: Icon, value, per, + position = [0, 0], }) => { const handleDragStart = (event: React.DragEvent) => { + const rect = event.currentTarget.getBoundingClientRect(); // Get position const cardData = JSON.stringify({ header, value, per, - className: event.currentTarget.className, + icon: Icon, + className: event.currentTarget.className, + position: [rect.top, rect.left], // ✅ Store position }); - - console.log("Dragging Data:", cardData); // ✅ Debugging log - + event.dataTransfer.setData("text/plain", cardData); }; return ( -
+
{header}
diff --git a/app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx b/app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx index 8a0c419..fd51426 100644 --- a/app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx +++ b/app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx @@ -111,8 +111,27 @@ const WarehouseThroughput = () => { }, }; + const handleDragStart = (event: React.DragEvent) => { + const rect = event.currentTarget.getBoundingClientRect(); // Get element position + + const cardData = JSON.stringify({ + header: "Warehouse Throughput", // Static header + value: "+5", // Example value (you can change if dynamic) + per: "2025", // Example percentage or date + icon: "📊", // Placeholder for an icon (if needed) + className: event.currentTarget.className, + position: [rect.top, rect.left], // ✅ Store initial position + lineGraphData, // ✅ Include chart data + lineGraphOptions, // ✅ Include chart options + }); + + + event.dataTransfer.setData("text/plain", cardData); + // event.dataTransfer.effectAllowed = "move"; // Improve drag effect + }; + return ( -
+

Warehouse Throughput

diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx index 0b8987f..17c6d74 100644 --- a/app/src/modules/scene/scene.tsx +++ b/app/src/modules/scene/scene.tsx @@ -19,7 +19,7 @@ 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 Throughput from "../../components/layout/3D-cards/cards/Throughput"; // import Simulation from "./simulationtemp/simulation"; @@ -47,7 +47,6 @@ export default function Scene() { }} > - diff --git a/app/src/services/realTimeVisulization/zoneData/panel.ts b/app/src/services/realTimeVisulization/zoneData/panel.ts index 5e0b5ac..b70889a 100644 --- a/app/src/services/realTimeVisulization/zoneData/panel.ts +++ b/app/src/services/realTimeVisulization/zoneData/panel.ts @@ -2,30 +2,47 @@ let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_BACKEND_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 }), - }); +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"); - } + if (!response.ok) { + throw new Error("Failed to add panelOrder for Zone"); } -}; \ No newline at end of file + + 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"); + } + } +}; +// {objects.map((obj, index) => ( +// +// +//

+//
{obj.header}
+//
+//
{obj.value}
+//
{obj.per}
+//
+//
+// +// +// ))} diff --git a/app/src/store/store.ts b/app/src/store/store.ts index 86c6dee..d158ca2 100644 --- a/app/src/store/store.ts +++ b/app/src/store/store.ts @@ -2,6 +2,7 @@ import * as THREE from "three"; import * as Types from "../types/world/worldTypes"; import { create } from "zustand"; import { io } from "socket.io-client"; +import { ComponentType, SVGProps } from "react"; export const useSocketStore = create((set: any, get: any) => ({ socket: null, @@ -428,30 +429,14 @@ export const usezonePosition = create((set: any) => ({ setZonePosition: (x: any) => set({ zonePosition: x }), })); - interface EditPositionState { - Edit: boolean; - setEdit: (value: boolean) => void; - } - - export const useEditPosition = create((set) => ({ - Edit: false, - setEdit: (value) => set({ Edit: value }), // Properly updating the state - })); + Edit: boolean; + setEdit: (value: boolean) => void; +} + +export const useEditPosition = create((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((set) => ({ - objects: [], - addObject: (obj) => set((state) => ({ objects: [...state.objects, obj] })), - })); \ No newline at end of file diff --git a/app/src/store/useDroppedObjectsStore.ts b/app/src/store/useDroppedObjectsStore.ts new file mode 100644 index 0000000..e47b12f --- /dev/null +++ b/app/src/store/useDroppedObjectsStore.ts @@ -0,0 +1,78 @@ +import { create } from "zustand"; + +type DroppedObject = { + className: string; + position: [number, number]; + value?: number; + per?: string; + header?: string; +}; + +type Zone = { + zoneName: string; + zoneId: string; + objects: DroppedObject[]; +}; + +type DroppedObjectsState = { + zones: Record; + setZone: (zoneName: string, zoneId: string) => void; + addObject: (zoneName: string, newObject: DroppedObject) => void; + updateObjectPosition: ( + zoneName: string, + index: number, + newPosition: [number, number] + ) => void; +}; + +export const useDroppedObjectsStore = create((set) => ({ + zones: {}, + + setZone: (zoneName: string, zoneId: string) => + set((state) => ({ + zones: { + [zoneName]: state.zones[zoneName] || { zoneName, zoneId, objects: [] }, // Keep existing zone if it exists + }, + })), + + addObject: (zoneName: string, newObject: DroppedObject) => + set((state) => ({ + zones: { + ...state.zones, + [zoneName]: { + ...state.zones[zoneName], + objects: [...state.zones[zoneName].objects, newObject], // Append new object + }, + }, + })), + + updateObjectPosition: (zoneName, index, newPosition) => + set((state) => { + const zone = state.zones[zoneName]; + if (!zone) return state; + return { + zones: { + [zoneName]: { + ...zone, + objects: zone.objects.map((obj, i) => + i === index ? { ...obj, position: newPosition } : obj + ), + }, + }, + }; + }), +})); + +export interface DroppedObjects { + header: string; + value: string | number; // ✅ Allows both numbers and formatted strings + per: string; + className: string; + position: [number, number]; // ✅ Ensures position is a tuple + } + + export interface Zones { + zoneName: string; + zoneId: string; + objects: DroppedObject[]; + } \ No newline at end of file diff --git a/app/src/styles/components/visualization/floating/energyConsumed.scss b/app/src/styles/components/visualization/floating/energyConsumed.scss index 12ae8ad..a5b9cee 100644 --- a/app/src/styles/components/visualization/floating/energyConsumed.scss +++ b/app/src/styles/components/visualization/floating/energyConsumed.scss @@ -9,7 +9,6 @@ padding: 6px; .floating { - min-height: 170px; background: var(--background-color); border: 1.23px solid var(--border-color); diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss index f4c9ab9..a203844 100644 --- a/app/src/styles/pages/realTimeViz.scss +++ b/app/src/styles/pages/realTimeViz.scss @@ -14,7 +14,18 @@ border-radius: #{$border-radius-medium}; transition: all 0.2s; z-index: #{$z-index-default}; - + .floating { + width: 100%; + max-width: 250px; + min-height: 83px; + background: var(--background-color); + border: 1.23px solid var(--border-color); + box-shadow: 0px 4.91px 4.91px 0px #0000001c; + border-radius: $border-radius-medium; + padding: 18px; + position: absolute; + z-index: 1000; + } .scene-container { overflow: hidden; } @@ -194,8 +205,6 @@ left: 0; right: 0; - - .panel-content { display: flex; flex-direction: row; @@ -236,8 +245,8 @@ } } -.playingFlase{ - .zoon-wrapper{ +.playingFlase { + .zoon-wrapper { bottom: 300px !important; } } From f69b6017854d65fa73ba39ead7426f9b3ed64101 Mon Sep 17 00:00:00 2001 From: Gomathi9520 Date: Thu, 27 Mar 2025 18:10:49 +0530 Subject: [PATCH 2/2] conflicts removed --- .../components/ui/componets/DisplayZone.tsx | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index ce91591..5aea5bc 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -1,5 +1,8 @@ import React, { useEffect, useRef, useState, useCallback } from "react"; import { Widget } from "../../../store/useWidgetStore"; +import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons"; +import { InfoIcon } from "../../icons/ExportCommonIcons"; +import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -60,16 +63,12 @@ const DisplayZone: React.FC = ({ // Ref for the container element const containerRef = useRef(null); - // Example state for selectedOption and options (adjust based on your actual use case) - const [selectedOption, setSelectedOption] = React.useState( - null - ); - // console.log('setSelectedOption: ', setSelectedOption); - const [options, setOptions] = React.useState([]); - // console.log('setOptions: ', setOptions); + // State to track overflow visibility + const [showLeftArrow, setShowLeftArrow] = useState(false); + const [showRightArrow, setShowRightArrow] = useState(false); - // Scroll to the selected option when it changes - useEffect(() => { + // Function to calculate overflow state + const updateOverflowState = useCallback(() => { const container = containerRef.current; if (container) { @@ -165,7 +164,7 @@ const DisplayZone: React.FC = ({ selectedZone.zoneName === zoneName ? "active" : "" }`} onClick={() => { - console.log("zoneName: ", zoneName); + useDroppedObjectsStore.getState().setZone(zoneName, zonesData[zoneName]?.zoneId); setSelectedZone({ zoneName, activeSides: zonesData[zoneName].activeSides || [],