diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx
index 9ce64cb..2dde977 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,9 +63,9 @@ 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);
@@ -78,8 +75,7 @@ const DisplayZone: React.FC = ({
// 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;
@@ -92,59 +88,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",
});
}
@@ -158,19 +151,18 @@ const DisplayZone: React.FC = ({
setSelectedChartId(null)
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 || [],
@@ -182,17 +174,14 @@ const DisplayZone: React.FC = ({
zoneViewPortPosition: response.viewPortposition || {},
});
} catch (error) {
-
-
+ console.error(error);
}
}
-
return (
{/* Left Arrow */}
{showLeftArrow && (
@@ -201,28 +190,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!
+
+ )}
+
- {obj.position.top.toFixed()}px
-
- )}
-
- {activeEdges.vertical === "bottom" &&
- typeof obj.position.bottom === "number" && (
-
- {obj.position.bottom.toFixed()}px
-
- )}
-
- {activeEdges.horizontal === "left" &&
- typeof obj.position.left === "number" && (
-
- {obj.position.left.toFixed()}px
-
- )}
-
- {activeEdges.horizontal === "right" &&
- typeof obj.position.right === "number" && (
-
- {obj.position.right.toFixed()}px
-
- )}
-
- );
-};
-
-export default DistanceLines;
\ No newline at end of file
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
+