diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx index ee3092e..1545729 100644 --- a/app/src/components/ui/componets/AddButtons.tsx +++ b/app/src/components/ui/componets/AddButtons.tsx @@ -109,7 +109,7 @@ const AddButtons: React.FC = ({ }; // Update the selectedZone state - console.log('updatedZone: ', updatedZone); + console.log("updatedZone: ", updatedZone); setSelectedZone(updatedZone); } else { // If the panel is not active, activate it @@ -122,7 +122,7 @@ const AddButtons: React.FC = ({ }; // Update the selectedZone state - console.log('updatedZone: ', updatedZone); + console.log("updatedZone: ", updatedZone); setSelectedZone(updatedZone); } }; @@ -148,8 +148,9 @@ const AddButtons: React.FC = ({
{/* Hide Panel */}
= ({ {/* Lock/Unlock Panel */}
= ({ } onClick={() => toggleLockPanel(side)} > - +
)} diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx index d25c8ec..743549f 100644 --- a/app/src/components/ui/componets/DraggableWidget.tsx +++ b/app/src/components/ui/componets/DraggableWidget.tsx @@ -10,7 +10,7 @@ import { DublicateIcon, KebabIcon, } from "../../icons/ExportCommonIcons"; -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; type Side = "top" | "bottom" | "left" | "right"; @@ -24,7 +24,7 @@ interface Widget { export const DraggableWidget = ({ widget, - hiddenPanels, // Add this prop to track hidden panels + hiddenPanels, index, onReorder, openKebabId, @@ -49,111 +49,108 @@ export const DraggableWidget = ({ }> >; widget: any; - hiddenPanels: string[]; // Array of hidden panel names + hiddenPanels: string[]; index: number; onReorder: (fromIndex: number, toIndex: number) => void; - openKebabId: string | null; // ID of the widget with an open kebab menu - setOpenKebabId: (id: string | null) => void; // Function to update the open kebab menu + openKebabId: string | null; + setOpenKebabId: (id: string | null) => void; }) => { const { selectedChartId, setSelectedChartId } = useWidgetStore(); - + const [panelDimensions, setPanelDimensions] = useState<{ + [side in Side]?: { width: number; height: number }; + }>({}); const handlePointerDown = () => { if (selectedChartId?.id !== widget.id) { setSelectedChartId(widget); } }; - // Determine if the widget's panel is hidden const isPanelHidden = hiddenPanels.includes(widget.panel); - const handleDragStart = (event: React.DragEvent) => { - event.dataTransfer.setData("text/plain", index.toString()); // Store the index of the dragged widget - }; - const handleDragEnter = (event: React.DragEvent) => { - event.preventDefault(); // Allow drop - }; - - const handleDragOver = (event: React.DragEvent) => { - event.preventDefault(); // Allow drop - }; - - const handleDrop = (event: React.DragEvent) => { - event.preventDefault(); - const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10); // Get the dragged widget's index - const toIndex = index; // The index of the widget where the drop occurred - if (fromIndex !== toIndex) { - onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop - } - }; - // Handle kebab icon click to toggle kebab options - const handleKebabClick = (event: React.MouseEvent) => { - event.stopPropagation(); // Prevent click from propagating to parent elements - if (openKebabId === widget.id) { - // If the current kebab is already open, close it - setOpenKebabId(null); - } else { - // Open the kebab for the clicked widget and close others - setOpenKebabId(widget.id); - } - }; - const deleteSelectedChart = () => { - // Filter out the widget to be deleted const updatedWidgets = selectedZone.widgets.filter( (w: Widget) => w.id !== widget.id ); - // Update the selectedZone state setSelectedZone((prevZone: any) => ({ ...prevZone, - widgets: updatedWidgets, // Replace the widgets array with the updated one + widgets: updatedWidgets, })); - // Close the kebab menu after deletion setOpenKebabId(null); }; + + const getCurrentWidgetCount = (panel: Side) => + selectedZone.widgets.filter((w) => w.panel === panel).length; + + const calculatePanelCapacity = (panel: Side) => { + const CHART_WIDTH = 150; + const CHART_HEIGHT = 150; + const FALLBACK_HORIZONTAL_CAPACITY = 5; + const FALLBACK_VERTICAL_CAPACITY = 3; + + const dimensions = panelDimensions[panel]; + if (!dimensions) { + return panel === "top" || panel === "bottom" + ? FALLBACK_HORIZONTAL_CAPACITY + : FALLBACK_VERTICAL_CAPACITY; + } + + return panel === "top" || panel === "bottom" + ? Math.floor(dimensions.width / CHART_WIDTH) + : Math.floor(dimensions.height / CHART_HEIGHT); + }; + + const isPanelFull = (panel: Side) => { + const currentWidgetCount = getCurrentWidgetCount(panel); + const panelCapacity = calculatePanelCapacity(panel); + return currentWidgetCount >= panelCapacity; + }; + + const duplicateWidget = () => { + const duplicatedWidget: Widget = { + ...widget, + id: `${widget.id}-copy-${Date.now()}`, + }; + + setSelectedZone((prevZone: any) => ({ + ...prevZone, + widgets: [...prevZone.widgets, duplicatedWidget], + })); + + setOpenKebabId(null); + + console.log("Duplicated widget with ID:", duplicatedWidget.id); + }; + + const handleKebabClick = (event: React.MouseEvent) => { + event.stopPropagation(); + if (openKebabId === widget.id) { + setOpenKebabId(null); + } else { + setOpenKebabId(widget.id); + } + }; + const widgetRef = useRef(null); - // Handle click outside to close the kebab menu useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( widgetRef.current && !widgetRef.current.contains(event.target as Node) ) { - setOpenKebabId(null); // Close the kebab menu if the click is outside + setOpenKebabId(null); } }; document.addEventListener("mousedown", handleClickOutside); - // Cleanup event listener on component unmount return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [setOpenKebabId]); - - const duplicateWidget = () => { - // Create a copy of the current widget with a new unique ID - const duplicatedWidget: Widget = { - ...widget, - id: `${widget.id}-copy-${Date.now()}`, // Generate a unique ID using a timestamp - }; - - // Add the duplicated widget to the selectedZone's widgets array - setSelectedZone((prevZone: any) => ({ - ...prevZone, - widgets: [...prevZone.widgets, duplicatedWidget], - })); - - // Close the kebab menu after duplication - setOpenKebabId(null); - - console.log("Duplicated widget with ID:", duplicatedWidget.id); - }; - - return ( <>