Refactor RealTimeVisualization component and handle widget drop functionality
- Commented out the handleDrop function in RealTimeVisualization.tsx and moved its logic to a new utility function createHandleDrop for better separation of concerns. - Updated Project.tsx to utilize the new createHandleDrop function, improving readability and maintainability. - Enhanced styling for the scene container and real-time visualization components to improve layout and responsiveness. - Removed unnecessary styles and consolidated button and input styles for consistency. - Cleaned up unused imports and variables in various files to streamline the codebase.
This commit is contained in:
@@ -143,109 +143,109 @@ 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 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 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 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;
|
||||
// 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;
|
||||
// // 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;
|
||||
// // Center the widget at cursor
|
||||
// const centerOffsetX = widgetWidth / 2;
|
||||
// const centerOffsetY = widgetHeight / 2;
|
||||
|
||||
const adjustedX = relativeX - centerOffsetX;
|
||||
const adjustedY = relativeY - centerOffsetY;
|
||||
// const adjustedX = relativeX - centerOffsetX;
|
||||
// const adjustedY = relativeY - centerOffsetY;
|
||||
|
||||
const finalPosition = determinePosition(rect, adjustedX, adjustedY);
|
||||
const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
|
||||
// const finalPosition = determinePosition(rect, adjustedX, adjustedY);
|
||||
// const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
|
||||
|
||||
let finalY = 0;
|
||||
let finalX = 0;
|
||||
// let finalY = 0;
|
||||
// let finalX = 0;
|
||||
|
||||
if (activeProp1 === "top") {
|
||||
finalY = adjustedY;
|
||||
} else {
|
||||
finalY = rect.height - (adjustedY + widgetHeight);
|
||||
}
|
||||
// if (activeProp1 === "top") {
|
||||
// finalY = adjustedY;
|
||||
// } else {
|
||||
// finalY = rect.height - (adjustedY + widgetHeight);
|
||||
// }
|
||||
|
||||
if (activeProp2 === "left") {
|
||||
finalX = adjustedX;
|
||||
} else {
|
||||
finalX = rect.width - (adjustedX + widgetWidth);
|
||||
}
|
||||
// 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));
|
||||
// // 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 boundedPosition = {
|
||||
// ...finalPosition,
|
||||
// [activeProp1]: finalY,
|
||||
// [activeProp2]: finalX,
|
||||
// [activeProp1 === "top" ? "bottom" : "top"]: "auto",
|
||||
// [activeProp2 === "left" ? "right" : "left"]: "auto",
|
||||
// };
|
||||
|
||||
const newObject = {
|
||||
...droppedData,
|
||||
id: generateUniqueId(),
|
||||
position: boundedPosition,
|
||||
};
|
||||
// const newObject = {
|
||||
// ...droppedData,
|
||||
// id: generateUniqueId(),
|
||||
// position: boundedPosition,
|
||||
// };
|
||||
|
||||
const existingZone =
|
||||
useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
|
||||
if (!existingZone) {
|
||||
useDroppedObjectsStore
|
||||
.getState()
|
||||
.setZone(selectedZone.zoneName, selectedZone.zoneId);
|
||||
}
|
||||
// const existingZone =
|
||||
// useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
|
||||
// if (!existingZone) {
|
||||
// useDroppedObjectsStore
|
||||
// .getState()
|
||||
// .setZone(selectedZone.zoneName, selectedZone.zoneId);
|
||||
// }
|
||||
|
||||
const addFloatingWidget = {
|
||||
organization,
|
||||
widget: newObject,
|
||||
zoneId: selectedZone.zoneId,
|
||||
};
|
||||
// const addFloatingWidget = {
|
||||
// organization,
|
||||
// widget: newObject,
|
||||
// zoneId: selectedZone.zoneId,
|
||||
// };
|
||||
|
||||
if (visualizationSocket) {
|
||||
visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
|
||||
}
|
||||
// if (visualizationSocket) {
|
||||
// visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
|
||||
// }
|
||||
|
||||
useDroppedObjectsStore
|
||||
.getState()
|
||||
.addObject(selectedZone.zoneName, newObject);
|
||||
// useDroppedObjectsStore
|
||||
// .getState()
|
||||
// .addObject(selectedZone.zoneName, newObject);
|
||||
|
||||
const droppedObjectsStore = useDroppedObjectsStore.getState();
|
||||
const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
|
||||
// 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);
|
||||
}
|
||||
};
|
||||
// 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) => {
|
||||
@@ -302,16 +302,7 @@ const RealTimeVisulization: React.FC = () => {
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
<div
|
||||
ref={containerRef}
|
||||
id="real-time-vis-canvas"
|
||||
className={`realTime-viz canvas ${isPlaying ? "playingFlase" : ""}`}
|
||||
style={{
|
||||
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
|
||||
width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
|
||||
left: isPlaying || activeModule !== "visualization" ? "0%" : "",
|
||||
}}
|
||||
>
|
||||
<div ref={containerRef} className="realTime-viz">
|
||||
<div className="realTime-viz-wrapper">
|
||||
{openConfirmationPopup && (
|
||||
<RenderOverlay>
|
||||
@@ -322,20 +313,6 @@ const RealTimeVisulization: React.FC = () => {
|
||||
/>
|
||||
</RenderOverlay>
|
||||
)}
|
||||
<div
|
||||
className="scene-container"
|
||||
style={{
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
borderRadius:
|
||||
isPlaying || activeModule !== "visualization" ? "" : "6px",
|
||||
}}
|
||||
role="application"
|
||||
onDrop={(event) => handleDrop(event)}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
>
|
||||
<Scene />
|
||||
</div>
|
||||
{activeModule === "visualization" && selectedZone.zoneName !== "" && (
|
||||
<DroppedObjects />
|
||||
)}
|
||||
|
||||
122
app/src/modules/visualization/functions/handleUiDrop.ts
Normal file
122
app/src/modules/visualization/functions/handleUiDrop.ts
Normal file
@@ -0,0 +1,122 @@
|
||||
import { generateUniqueId } from "../../../functions/generateUniqueId";
|
||||
import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore";
|
||||
import { determinePosition } from "./determinePosition";
|
||||
import { getActiveProperties } from "./getActiveProperties";
|
||||
|
||||
interface HandleDropProps {
|
||||
widgetSubOption: any;
|
||||
visualizationSocket: any;
|
||||
selectedZone: any;
|
||||
setFloatingWidget: (value: any) => void;
|
||||
event: React.DragEvent<HTMLDivElement>
|
||||
}
|
||||
|
||||
export const createHandleDrop = ({
|
||||
widgetSubOption,
|
||||
visualizationSocket,
|
||||
selectedZone,
|
||||
setFloatingWidget,
|
||||
event,
|
||||
}: HandleDropProps) => {
|
||||
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);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user