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

widget hide panel

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

73
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 { selectedChartId, setSelectedChartId } = useWidgetStore();
const [activeEdges, setActiveEdges] = useState<{
vertical: "top" | "bottom";
horizontal: "left" | "right";
@@ -84,7 +85,6 @@ const DroppedObjects: React.FC = () => {
// });
const kebabRef = useRef<HTMLDivElement>(null);
// Clean up animation frame on unmount
useEffect(() => {
return () => {
@@ -95,7 +95,10 @@ const DroppedObjects: React.FC = () => {
}, []);
useEffect(() => {
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);
}
};
@@ -112,7 +115,6 @@ const DroppedObjects: React.FC = () => {
const zoneEntries = Object.entries(zones);
if (zoneEntries.length === 0) return null;
const [zoneName, zone] = zoneEntries[0];
function handleDuplicate(zoneName: string, index: number) {
setOpenKebabId(null);
@@ -123,16 +125,15 @@ const DroppedObjects: React.FC = () => {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
let deleteFloatingWidget = {
floatWidgetID: id,
organization: organization,
zoneId: zone.zoneId
}
zoneId: zone.zoneId,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget)
visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget);
}
deleteObject(zoneName, id);
@@ -142,13 +143,14 @@ const DroppedObjects: React.FC = () => {
// if (res.message === "FloatingWidget deleted successfully") {
// deleteObject(zoneName, id, index); // Call the deleteObject method from the store
// }
} catch (error) {
}
} catch (error) {}
}
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
}
const obj = zone.objects[index];
@@ -448,7 +450,6 @@ const DroppedObjects: React.FC = () => {
// ...zone.objects[draggingIndex.index],
// position: boundedPosition,
// });
let updateFloatingWidget = {
organization: organization,
@@ -456,16 +457,16 @@ const DroppedObjects: React.FC = () => {
...zone.objects[draggingIndex.index],
position: boundedPosition,
},
index:draggingIndex.index,
zoneId: zone.zoneId
}
index: draggingIndex.index,
zoneId: zone.zoneId,
};
if (visualizationSocket) {
visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget)
visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget);
}
// if (response.message === "Widget updated successfully") {
console.log('boundedPosition: ', boundedPosition);
console.log("boundedPosition: ", boundedPosition);
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
// }
@@ -479,7 +480,6 @@ const DroppedObjects: React.FC = () => {
// animationRef.current = null;
// }
} catch (error) {
} finally {
// Clean up regardless of success or failure
setDraggingIndex(null);
@@ -510,7 +510,7 @@ const DroppedObjects: React.FC = () => {
<div
key={`${zoneName}-${index}`}
className={`${obj.className} ${
selectedChartId?.id === obj.id && "activeChart"
selectedChartId?.id === obj.id && !isPlaying && "activeChart"
}`}
ref={chartWidget}
style={{
@@ -559,7 +559,7 @@ const DroppedObjects: React.FC = () => {
</>
) : obj.className === "warehouseThroughput floating" ? (
<>
<WarehouseThroughputComponent object={obj}/>
<WarehouseThroughputComponent object={obj} />
</>
) : obj.className === "fleetEfficiency floating" ? (
<>
@@ -571,26 +571,32 @@ const DroppedObjects: React.FC = () => {
ref={kebabRef}
onClick={(event) => {
event.stopPropagation();
handleKebabClick(obj.id, event)
handleKebabClick(obj.id, event);
}}
>
<KebabIcon />
</div>
{openKebabId === obj.id && (
<div className="kebab-options" ref={kebabRef}>
<div className="dublicate btn" onClick={(event) => {
event.stopPropagation();
handleDuplicate(zoneName, index); // Call the duplicate handler
}}>
<div
className="dublicate btn"
onClick={(event) => {
event.stopPropagation();
handleDuplicate(zoneName, index); // Call the duplicate handler
}}
>
<div className="icon">
<DublicateIcon />
</div>
<div className="label">Duplicate</div>
</div>
<div className="edit btn" onClick={(event) => {
event.stopPropagation();
handleDelete(zoneName, obj.id); // Call the delete handler
}}>
<div
className="edit btn"
onClick={(event) => {
event.stopPropagation();
handleDelete(zoneName, obj.id); // Call the delete handler
}}
>
<div className="icon">
<DeleteIcon />
</div>
@@ -598,7 +604,6 @@ const DroppedObjects: React.FC = () => {
</div>
</div>
)}
</div>
))}
@@ -636,5 +641,3 @@ const DroppedObjects: React.FC = () => {
};
export default DroppedObjects;