Dwinzo-Beta
/
Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

widget hide panel

This commit is contained in:
Nalvazhuthi 2025-04-04 15:31:16 +05:30
parent 57ad4ea8e2
commit f738fec057
4 changed files with 72 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/src/components/ui/componets/AddButtons.tsx
View File

@ -59,7 +59,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
setHiddenPanels, setHiddenPanels,
hiddenPanels, hiddenPanels,
}) => { }) => {
const { visualizationSocket } = useSocketStore(); const { visualizationSocket } = useSocketStore();
// Local state to track hidden panels // Local state to track hidden panels
@ -129,10 +128,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
let deletePanel = { let deletePanel = {
organization: organization, organization: organization,
panelName: side, panelName: side,
zoneId: selectedZone.zoneId zoneId: selectedZone.zoneId,
} };
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-panel:delete", deletePanel) visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
} }
setSelectedZone(updatedZone); setSelectedZone(updatedZone);
@ -148,6 +147,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
// //
// } // }
} else { } else {
setHiddenPanels(hiddenPanels.filter((panel) => panel !== side));
// Panel does not exist: Create panel // Panel does not exist: Create panel
try { try {
// Get email and organization safely with a default fallback // Get email and organization safely with a default fallback
@ -167,10 +168,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
let addPanel = { let addPanel = {
organization: organization, organization: organization,
zoneId: selectedZone.zoneId, zoneId: selectedZone.zoneId,
panelOrder: newActiveSides panelOrder: newActiveSides,
} };
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-panel:add", addPanel) visualizationSocket.emit("v2:viz-panel:add", addPanel);
} }
setSelectedZone(updatedZone); setSelectedZone(updatedZone);
// API call to create panels // API call to create panels
@ -181,13 +182,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
// } else { // } else {
// //
// } // }
} catch (error) { } catch (error) {}
}
} }
}; };
return ( return (
<> <>
<div> <div>
@ -195,7 +193,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div key={side} className={`side-button-container ${side}`}> <div key={side} className={`side-button-container ${side}`}>
{/* "+" Button */} {/* "+" Button */}
<button <button
className={`side-button ${side}${selectedZone.activeSides.includes(side) ? " active" : "" className={`side-button ${side}${
selectedZone.activeSides.includes(side) ? " active" : ""
}`} }`}
onClick={() => handlePlusButtonClick(side)} onClick={() => handlePlusButtonClick(side)}
title={ title={
@ -214,7 +213,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div className="extra-Bs"> <div className="extra-Bs">
{/* Hide Panel */} {/* Hide Panel */}
<div <div
className={`icon ${hiddenPanels.includes(side) ? "active" : "" className={`icon ${
hiddenPanels.includes(side) ? "active" : ""
}`} }`}
title={ title={
hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel" hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
@ -222,7 +222,11 @@ const AddButtons: React.FC<ButtonsProps> = ({
onClick={() => toggleVisibility(side)} onClick={() => toggleVisibility(side)}
> >
<EyeIcon <EyeIcon
fill={hiddenPanels.includes(side) ? "var(--primary-color)" : "var(--text-color)"} fill={
hiddenPanels.includes(side)
? "var(--primary-color)"
: "var(--text-color)"
}
/> />
</div> </div>
@ -237,7 +241,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
{/* Lock/Unlock Panel */} {/* Lock/Unlock Panel */}
<div <div
className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : "" className={`icon ${
selectedZone.lockedPanels.includes(side) ? "active" : ""
}`} }`}
title={ title={
selectedZone.lockedPanels.includes(side) selectedZone.lockedPanels.includes(side)

3
app/src/components/ui/componets/DraggableWidget.tsx
View File

@ -260,7 +260,8 @@ export const DraggableWidget = ({
onDragOver={handleDragOver} onDragOver={handleDragOver}
onDrop={handleDrop} onDrop={handleDrop}
style={{ style={{
pointerEvents: isPanelHidden ? "none" : "auto", // pointerEvents: isPanelHidden ? "none" : "auto",
// opacity: isPanelHidden ? "0.1" : "0",
}} }}
ref={chartWidget} ref={chartWidget}
onClick={() => setSelectedChartId(widget)} onClick={() => setSelectedChartId(widget)}

55
app/src/components/ui/componets/DroppedFloatingWidgets.tsx
View File

@ -65,6 +65,7 @@ const DroppedObjects: React.FC = () => {
); );
const [offset, setOffset] = useState<[number, number] | null>(null); const [offset, setOffset] = useState<[number, number] | null>(null);
const { selectedChartId, setSelectedChartId } = useWidgetStore(); const { selectedChartId, setSelectedChartId } = useWidgetStore();
const [activeEdges, setActiveEdges] = useState<{ const [activeEdges, setActiveEdges] = useState<{
vertical: "top" | "bottom"; vertical: "top" | "bottom";
horizontal: "left" | "right"; horizontal: "left" | "right";
@ -84,7 +85,6 @@ const DroppedObjects: React.FC = () => {
// }); // });
const kebabRef = useRef<HTMLDivElement>(null); const kebabRef = useRef<HTMLDivElement>(null);
// Clean up animation frame on unmount // Clean up animation frame on unmount
useEffect(() => { useEffect(() => {
return () => { return () => {
@ -95,7 +95,10 @@ const DroppedObjects: React.FC = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) { if (
kebabRef.current &&
!kebabRef.current.contains(event.target as Node)
) {
setOpenKebabId(null); setOpenKebabId(null);
} }
}; };
@ -113,7 +116,6 @@ const DroppedObjects: React.FC = () => {
if (zoneEntries.length === 0) return null; if (zoneEntries.length === 0) return null;
const [zoneName, zone] = zoneEntries[0]; const [zoneName, zone] = zoneEntries[0];
function handleDuplicate(zoneName: string, index: number) { function handleDuplicate(zoneName: string, index: number) {
setOpenKebabId(null); setOpenKebabId(null);
duplicateObject(zoneName, index); // Call the duplicateObject method from the store duplicateObject(zoneName, index); // Call the duplicateObject method from the store
@ -124,15 +126,14 @@ const DroppedObjects: React.FC = () => {
const email = localStorage.getItem("email") || ""; const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0]; const organization = email?.split("@")[1]?.split(".")[0];
let deleteFloatingWidget = { let deleteFloatingWidget = {
floatWidgetID: id, floatWidgetID: id,
organization: organization, organization: organization,
zoneId: zone.zoneId zoneId: zone.zoneId,
} };
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget) visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget);
} }
deleteObject(zoneName, id); deleteObject(zoneName, id);
@ -142,13 +143,14 @@ const DroppedObjects: React.FC = () => {
// if (res.message === "FloatingWidget deleted successfully") { // if (res.message === "FloatingWidget deleted successfully") {
// deleteObject(zoneName, id, index); // Call the deleteObject method from the store // deleteObject(zoneName, id, index); // Call the deleteObject method from the store
// } // }
} catch (error) { } catch (error) {}
}
} }
const handlePointerDown = (event: React.PointerEvent, index: number) => { const handlePointerDown = (event: React.PointerEvent, index: number) => {
if ((event.target as HTMLElement).closest(".kebab-options") || (event.target as HTMLElement).closest(".kebab")) { if (
(event.target as HTMLElement).closest(".kebab-options") ||
(event.target as HTMLElement).closest(".kebab")
) {
return; // Prevent dragging when clicking on the kebab menu or its options return; // Prevent dragging when clicking on the kebab menu or its options
} }
const obj = zone.objects[index]; const obj = zone.objects[index];
@ -449,7 +451,6 @@ const DroppedObjects: React.FC = () => {
// position: boundedPosition, // position: boundedPosition,
// }); // });
let updateFloatingWidget = { let updateFloatingWidget = {
organization: organization, organization: organization,
widget: { widget: {
@ -457,15 +458,15 @@ const DroppedObjects: React.FC = () => {
position: boundedPosition, position: boundedPosition,
}, },
index: draggingIndex.index, index: draggingIndex.index,
zoneId: zone.zoneId zoneId: zone.zoneId,
} };
if (visualizationSocket) { if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget) visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget);
} }
// if (response.message === "Widget updated successfully") { // if (response.message === "Widget updated successfully") {
console.log('boundedPosition: ', boundedPosition); console.log("boundedPosition: ", boundedPosition);
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition); updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
// } // }
@ -479,7 +480,6 @@ const DroppedObjects: React.FC = () => {
// animationRef.current = null; // animationRef.current = null;
// } // }
} catch (error) { } catch (error) {
} finally { } finally {
// Clean up regardless of success or failure // Clean up regardless of success or failure
setDraggingIndex(null); setDraggingIndex(null);
@ -510,7 +510,7 @@ const DroppedObjects: React.FC = () => {
<div <div
key={`${zoneName}-${index}`} key={`${zoneName}-${index}`}
className={`${obj.className} ${ className={`${obj.className} ${
selectedChartId?.id === obj.id && "activeChart" selectedChartId?.id === obj.id && !isPlaying && "activeChart"
}`} }`}
ref={chartWidget} ref={chartWidget}
style={{ style={{
@ -571,26 +571,32 @@ const DroppedObjects: React.FC = () => {
ref={kebabRef} ref={kebabRef}
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
handleKebabClick(obj.id, event) handleKebabClick(obj.id, event);
}} }}
> >
<KebabIcon /> <KebabIcon />
</div> </div>
{openKebabId === obj.id && ( {openKebabId === obj.id && (
<div className="kebab-options" ref={kebabRef}> <div className="kebab-options" ref={kebabRef}>
<div className="dublicate btn" onClick={(event) => { <div
className="dublicate btn"
onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
handleDuplicate(zoneName, index); // Call the duplicate handler handleDuplicate(zoneName, index); // Call the duplicate handler
}}> }}
>
<div className="icon"> <div className="icon">
<DublicateIcon /> <DublicateIcon />
</div> </div>
<div className="label">Duplicate</div> <div className="label">Duplicate</div>
</div> </div>
<div className="edit btn" onClick={(event) => { <div
className="edit btn"
onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
handleDelete(zoneName, obj.id); // Call the delete handler handleDelete(zoneName, obj.id); // Call the delete handler
}}> }}
>
<div className="icon"> <div className="icon">
<DeleteIcon /> <DeleteIcon />
</div> </div>
@ -598,7 +604,6 @@ const DroppedObjects: React.FC = () => {
</div> </div>
</div> </div>
)} )}
</div> </div>
))} ))}
@ -636,5 +641,3 @@ const DroppedObjects: React.FC = () => {
}; };
export default DroppedObjects; export default DroppedObjects;

5
app/src/styles/pages/realTimeViz.scss
View File

@ -62,6 +62,7 @@
max-width: 80%; max-width: 80%;
overflow: auto; overflow: auto;
max-width: calc(100% - 500px); max-width: calc(100% - 500px);
z-index: 3;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
@ -173,9 +174,11 @@
overflow: auto; overflow: auto;
z-index: $z-index-tools; z-index: $z-index-tools;
overflow: auto; overflow: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;
} }
.panel-content { .panel-content {
position: relative; position: relative;
height: 100%; height: 100%;
@ -326,7 +329,7 @@
} }
.panel.hidePanel { .panel.hidePanel {
opacity: 0; opacity: 0.1;
} }
} }