From e95abfb4dd1816017283f6b8bfc7ede26522d2d9 Mon Sep 17 00:00:00 2001 From: Vishnu Date: Tue, 1 Apr 2025 12:25:01 +0530 Subject: [PATCH] Refactor DistanceLines component for improved label positioning and remove unused DistanceLine component --- .../components/ui/componets/DisplayZone.tsx | 137 ++++++++---------- .../components/ui/componets/DistanceLine.tsx | 130 ----------------- .../components/ui/componets/DistanceLines.tsx | 75 +++++++--- 3 files changed, 120 insertions(+), 222 deletions(-) delete mode 100644 app/src/components/ui/componets/DistanceLine.tsx diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx index 3889139..1a2d545 100644 --- a/app/src/components/ui/componets/DisplayZone.tsx +++ b/app/src/components/ui/componets/DisplayZone.tsx @@ -15,7 +15,6 @@ interface DisplayZoneProps { [key: string]: { activeSides: Side[]; panelOrder: Side[]; - lockedPanels: Side[]; widgets: Widget[]; zoneId: string; @@ -27,7 +26,6 @@ interface DisplayZoneProps { zoneName: string; activeSides: Side[]; panelOrder: Side[]; - lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; @@ -45,7 +43,6 @@ interface DisplayZoneProps { zoneName: string; activeSides: Side[]; panelOrder: Side[]; - lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; @@ -66,19 +63,18 @@ const DisplayZone: React.FC = ({ selectedZone, setSelectedZone, }) => { - - // Ref for the container element + // Refs const containerRef = useRef(null); + const scrollContainerRef = useRef(null); // State to track overflow visibility const [showLeftArrow, setShowLeftArrow] = useState(false); const [showRightArrow, setShowRightArrow] = useState(false); - const { floatingWidget, setFloatingWidget } = useFloatingWidget() + const { floatingWidget, setFloatingWidget } = useFloatingWidget(); // Function to calculate overflow state const updateOverflowState = useCallback(() => { - const container = containerRef.current; - + const container = scrollContainerRef.current; if (container) { const isOverflowing = container.scrollWidth > container.clientWidth; const canScrollLeft = container.scrollLeft > 0; @@ -91,59 +87,56 @@ const DisplayZone: React.FC = ({ }, []); useEffect(() => { - const container = containerRef.current; + const container = scrollContainerRef.current; + if (!container) return; - if (container) { - // Initial calculation after the DOM has been rendered - const handleInitialRender = () => { - requestAnimationFrame(updateOverflowState); - }; + // Initial calculation after the DOM has been rendered + const observer = new ResizeObserver(updateOverflowState); + observer.observe(container); - handleInitialRender(); + // Update on scroll + const handleScroll = () => updateOverflowState(); + container.addEventListener("scroll", handleScroll); - // Update on window resize or scroll - const handleResize = () => updateOverflowState(); - const handleScroll = () => updateOverflowState(); + // Add mouse wheel listener for horizontal scrolling + const handleWheel = (event: WheelEvent) => { + if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) { + event.preventDefault(); + container.scrollBy({ + left: event.deltaY * 2, + behavior: "smooth", + }); + } + }; - // Add mouse wheel listener for horizontal scrolling - const handleWheel = (event: WheelEvent) => { - event.preventDefault(); // Prevent default vertical scrolling - if (container) { - container.scrollBy({ - left: event.deltaY * 2, // Translate vertical scroll to horizontal scroll - behavior: "smooth", - }); - } - }; + container.addEventListener("wheel", handleWheel, { passive: false }); - container.addEventListener("scroll", handleScroll); - window.addEventListener("resize", handleResize); - container.addEventListener("wheel", handleWheel, { passive: false }); + // Initial check + updateOverflowState(); - return () => { - container.removeEventListener("scroll", handleScroll); - window.removeEventListener("resize", handleResize); - container.removeEventListener("wheel", handleWheel); - }; - } + return () => { + observer.disconnect(); + container.removeEventListener("scroll", handleScroll); + container.removeEventListener("wheel", handleWheel); + }; }, [updateOverflowState]); // Handle scrolling with navigation arrows const handleScrollLeft = () => { - const container = containerRef.current; + const container = scrollContainerRef.current; if (container) { container.scrollBy({ - left: -200, // Scroll left by 200px + left: -200, behavior: "smooth", }); } }; const handleScrollRight = () => { - const container = containerRef.current; + const container = scrollContainerRef.current; if (container) { container.scrollBy({ - left: 200, // Scroll right by 200px + left: 200, behavior: "smooth", }); } @@ -152,24 +145,22 @@ const DisplayZone: React.FC = ({ async function handleSelect2dZoneData(zoneId: string, zoneName: string) { try { if (selectedZone?.zoneId === zoneId) { - return; } const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; - // Fetch data from backend let response = await getSelect2dZoneData(zoneId, organization); console.log('response: ', response); let res = await getFloatingZoneData(zoneId, organization); - setFloatingWidget(res) - // Set the selected zone in the store + setFloatingWidget(res); + useDroppedObjectsStore.getState().setZone(zoneName, zoneId); if (Array.isArray(res)) { res.forEach((val) => { useDroppedObjectsStore.getState().addObject(zoneName, val); }); } - // Update selected zone state + setSelectedZone({ zoneName, activeSides: response.activeSides || [], @@ -181,17 +172,14 @@ const DisplayZone: React.FC = ({ zoneViewPortPosition: response.viewPortposition || {}, }); } catch (error) { - - + console.error(error); } } - return (
{/* Left Arrow */} {showLeftArrow && ( @@ -200,28 +188,31 @@ const DisplayZone: React.FC = ({ )} - {/* Zones Wrapper */} - {Object.keys(zonesData).length !== 0 ? ( -
- {Object.keys(zonesData).map((zoneName, index) => ( -
{ - handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName) - }} - > - {zoneName} -
- ))} -
- ) : ( -
- - No zones? Create one! -
- )} + {/* Scrollable Zones Container */} +
+ {Object.keys(zonesData).length !== 0 ? ( + <> + {Object.keys(zonesData).map((zoneName, index) => ( +
handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)} + > + {zoneName} +
+ ))} + + ) : ( +
+ + No zones? Create one! +
+ )} +
{/* Right Arrow */} {showRightArrow && ( diff --git a/app/src/components/ui/componets/DistanceLine.tsx b/app/src/components/ui/componets/DistanceLine.tsx deleted file mode 100644 index 62cfd3b..0000000 --- a/app/src/components/ui/componets/DistanceLine.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import React from "react"; - -interface DistanceLinesProps { - obj: { - position: { - top?: number | "auto"; - left?: number | "auto"; - right?: number | "auto"; - bottom?: number | "auto"; - }; - }; - activeEdges: { - vertical: "top" | "bottom"; - horizontal: "left" | "right"; - } | null; -} - -const DistanceLines: React.FC = ({ obj, activeEdges }) => { - if (!activeEdges) return null; - - return ( - <> - {activeEdges.vertical === "top" && - typeof obj.position.top === "number" && ( -
- - {obj.position.top}px - -
- )} - - {activeEdges.vertical === "bottom" && - typeof obj.position.bottom === "number" && ( -
- - {obj.position.bottom}px - -
- )} - - {activeEdges.horizontal === "left" && - typeof obj.position.left === "number" && ( -
- - {obj.position.left}px - -
- )} - - {activeEdges.horizontal === "right" && - typeof obj.position.right === "number" && ( -
- - {obj.position.right}px - -
- )} - - ); -}; - -export default DistanceLines; diff --git a/app/src/components/ui/componets/DistanceLines.tsx b/app/src/components/ui/componets/DistanceLines.tsx index 07cf202..62cfd3b 100644 --- a/app/src/components/ui/componets/DistanceLines.tsx +++ b/app/src/components/ui/componets/DistanceLines.tsx @@ -20,21 +20,31 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { return ( <> - {activeEdges.vertical === "top" && typeof obj.position.top === "number" && ( -
- {obj.position.top}px -
- )} + {activeEdges.vertical === "top" && + typeof obj.position.top === "number" && ( +
+ + {obj.position.top}px + +
+ )} {activeEdges.vertical === "bottom" && typeof obj.position.bottom === "number" && ( @@ -49,7 +59,16 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { height: `${obj.position.bottom}px`, }} > - {obj.position.bottom}px + + {obj.position.bottom}px +
)} @@ -66,7 +85,16 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { width: `${obj.position.left}px`, }} > - {obj.position.left}px + + {obj.position.left}px + )} @@ -83,11 +111,20 @@ const DistanceLines: React.FC = ({ obj, activeEdges }) => { width: `${obj.position.right}px`, }} > - {obj.position.right}px + + {obj.position.right}px + )} ); }; -export default DistanceLines; \ No newline at end of file +export default DistanceLines;