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

Refactor styles across components to utilize variable-based border-radius for consistency and improved maintainability. Added SkeletonUI component and corresponding styles for loading states.

Browse Source
This commit is contained in:
Nalvazhuthi
2025-05-05 18:02:04 +05:30
parent f888c2798c
commit bdfe0900d1
30 changed files with 497 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
app/src/modules/visualization/RealTimeVisulization.tsx
View File

@@ -4,17 +4,8 @@ import Panel from "./widgets/panel/Panel";
import AddButtons from "./widgets/panel/AddButtons";
import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
import DisplayZone from "./zone/DisplayZone";
import Scene from "../scene/scene";
import useModuleStore from "../../store/useModuleStore";
import {
useDroppedObjectsStore,
useFloatingWidget,
} from "../../store/visualization/useDroppedObjectsStore";
import { useSocketStore, useWidgetSubOption } from "../../store/store";
import { getZone2dData } from "../../services/visulization/zone/getZoneData";
import { generateUniqueId } from "../../functions/generateUniqueId";
import { determinePosition } from "./functions/determinePosition";
import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
import RenderOverlay from "../../components/templates/Overlay";
import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
@@ -27,7 +18,6 @@ import {
} from "../../store/visualization/useZone3DWidgetStore";
import OuterClick from "../../utils/outerClick";
import { useWidgetStore } from "../../store/useWidgetStore";
import { getActiveProperties } from "./functions/getActiveProperties";
type Side = "top" | "bottom" | "left" | "right";
@@ -66,12 +56,10 @@ const RealTimeVisulization: React.FC = () => {
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
const { setRightSelect } = useRightSelected();
const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore();
const { editWidgetOptions, setEditWidgetOptions } =
useEditWidgetOptionsStore();
const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
const { setFloatingWidget } = useFloatingWidget();
const { widgetSubOption } = useWidgetSubOption();
const { visualizationSocket } = useSocketStore();
const { setSelectedChartId } = useWidgetStore();
const [waitingPanels, setWaitingPanels] = useState(null);
@@ -142,109 +130,6 @@ const RealTimeVisulization: React.FC = () => {
});
}, [selectedZone]);
// const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
// event.preventDefault();
// try {
// const email = localStorage.getItem("email") ?? "";
// const organization = email?.split("@")[1]?.split(".")[0];
// const data = event.dataTransfer.getData("text/plain");
// if (widgetSubOption === "3D") return;
// if (!data || selectedZone.zoneName === "") return;
// const droppedData = JSON.parse(data);
// const canvasElement = document.getElementById("real-time-vis-canvas");
// if (!canvasElement) throw new Error("Canvas element not found");
// const rect = canvasElement.getBoundingClientRect();
// const relativeX = event.clientX - rect.left;
// const relativeY = event.clientY - rect.top;
// // Widget dimensions
// const widgetWidth = droppedData.width ?? 125;
// const widgetHeight = droppedData.height ?? 100;
// // Center the widget at cursor
// const centerOffsetX = widgetWidth / 2;
// const centerOffsetY = widgetHeight / 2;
// const adjustedX = relativeX - centerOffsetX;
// const adjustedY = relativeY - centerOffsetY;
// const finalPosition = determinePosition(rect, adjustedX, adjustedY);
// const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
// let finalY = 0;
// let finalX = 0;
// if (activeProp1 === "top") {
// finalY = adjustedY;
// } else {
// finalY = rect.height - (adjustedY + widgetHeight);
// }
// if (activeProp2 === "left") {
// finalX = adjustedX;
// } else {
// finalX = rect.width - (adjustedX + widgetWidth);
// }
// // Clamp to boundaries
// finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
// finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
// const boundedPosition = {
// ...finalPosition,
// [activeProp1]: finalY,
// [activeProp2]: finalX,
// [activeProp1 === "top" ? "bottom" : "top"]: "auto",
// [activeProp2 === "left" ? "right" : "left"]: "auto",
// };
// const newObject = {
// ...droppedData,
// id: generateUniqueId(),
// position: boundedPosition,
// };
// const existingZone =
// useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
// if (!existingZone) {
// useDroppedObjectsStore
// .getState()
// .setZone(selectedZone.zoneName, selectedZone.zoneId);
// }
// const addFloatingWidget = {
// organization,
// widget: newObject,
// zoneId: selectedZone.zoneId,
// };
// if (visualizationSocket) {
// visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
// }
// useDroppedObjectsStore
// .getState()
// .addObject(selectedZone.zoneName, newObject);
// const droppedObjectsStore = useDroppedObjectsStore.getState();
// const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
// if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
// console.log(
// `Objects for Zone ${selectedZone.zoneId}:`,
// currentZone.objects
// );
// setFloatingWidget(currentZone.objects);
// } else {
// console.warn("Zone not found or zoneId mismatch");
// }
// } catch (error) {
// console.error("Error in handleDrop:", error);
// }
// };
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
@@ -295,9 +180,7 @@ const RealTimeVisulization: React.FC = () => {
{`
:root {
--realTimeViz-container-width: ${canvasDimensions.width}px;
--realTimeViz-container-height: ${canvasDimensions.height}px;
}
`}
</style>