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

Refactor canvas element references to use consistent ID for workspace

This commit is contained in:
Vishnu 2025-05-08 14:18:02 +05:30
parent a2480748a8
commit ccd6298d17
9 changed files with 18 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/src/modules/collaboration/camera/collabCams.tsx
View File

@ -12,7 +12,6 @@ import CollabUserIcon from "./collabUserIcon";
import useModuleStore from "../../../store/useModuleStore";
import { getAvatarColor } from "../functions/getAvatarColor";
import { useSelectedUserStore } from "../../../store/useCollabStore";
import { opacity } from "html2canvas/dist/types/css/property-descriptors/opacity";
const CamModelsGroup = () => {
const navigate = useNavigate();
@ -166,6 +165,7 @@ const CamModelsGroup = () => {
socket.off("userDisConnectResponse");
socket.off("cameraUpdateResponse");
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [email, loader, navigate, setActiveUsers, socket]);
useFrame(() => {
@ -232,30 +232,9 @@ const CamModelsGroup = () => {
});
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// collide validate
const collisionThreshold = 0.001;
const collidedCamUUIDs = new Set<string>();
for (let i = 0; i < cams.length; i++) {
for (let j = i + 1; j < cams.length; j++) {
const posA = cams[i].position;
const posB = cams[j].position;
const distSquared =
Math.pow(posA.x - posB.x, 2) +
Math.pow(posA.y - posB.y, 2) +
Math.pow(posA.z - posB.z, 2);
if (distSquared < collisionThreshold ** 2) {
collidedCamUUIDs.add(cams[i].uuid);
collidedCamUUIDs.add(cams[j].uuid);
}
}
}
return (
<group ref={groupRef} name="Cam-Model-Group">
{cams.map((cam, index) => (

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

@ -155,7 +155,7 @@ const RealTimeVisulization: React.FC = () => {
height: 0,
});
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
const canvas = document.getElementById("work-space-three-d-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {

2
app/src/modules/visualization/functions/captureVisualization.ts
View File

@ -1,7 +1,7 @@
import html2canvas from "html2canvas";
export const captureVisualization = async (): Promise<string | null> => {
const container = document.getElementById("real-time-vis-canvas");
const container = document.getElementById("work-space-three-d-canvas");
if (!container) {
console.error("Container element not found");
return null;

2
app/src/modules/visualization/functions/handleUiDrop.ts
View File

@ -28,7 +28,7 @@ export const createHandleDrop = ({
if (!data || selectedZone.zoneName === "") return;
const droppedData = JSON.parse(data);
const canvasElement = document.getElementById("real-time-vis-canvas");
const canvasElement = document.getElementById("work-space-three-d-canvas");
if (!canvasElement) throw new Error("Canvas element not found");
const rect = canvasElement.getBoundingClientRect();

2
app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
View File

@ -269,7 +269,7 @@ export const DraggableWidget = ({
// Current: Two identical useEffect hooks for canvas dimensions
// Remove the duplicate and keep only one
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
const canvas = document.getElementById("work-space-three-d-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {

6
app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
View File

@ -89,7 +89,7 @@ export default function Dropped3dWidgets() {
if (widgetSubOption === "Floating" || widgetSubOption === "2D") return;
if (selectedZone.zoneName === "") return;
const canvasElement = document.getElementById("real-time-vis-canvas");
const canvasElement = document.getElementById("work-space-three-d-canvas");
if (!canvasElement) return;
@ -601,7 +601,7 @@ export default function Dropped3dWidgets() {
const handleRightClick3d = (event: React.MouseEvent, id: string) => {
event.preventDefault();
const canvasElement = document.getElementById("real-time-vis-canvas");
const canvasElement = document.getElementById("work-space-three-d-canvas");
if (!canvasElement) throw new Error("Canvas element not found");
const canvasRect = canvasElement.getBoundingClientRect();
@ -654,7 +654,7 @@ export default function Dropped3dWidgets() {
setSelectedChartId({ id: id, type: type })
event.preventDefault();
const canvasElement = document.getElementById(
"real-time-vis-canvas"
"work-space-three-d-canvas"
);
if (!canvasElement) throw new Error("Canvas element not found");
const canvasRect = canvasElement.getBoundingClientRect();

48
app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
View File

@ -1,8 +1,6 @@
import { WalletIcon } from "../../../../components/icons/3dChartIcons";
import { useEffect, useRef, useState } from "react";
import {
useDroppedObjectsStore,
Zones,
} from "../../../../store/visualization/useDroppedObjectsStore";
import useModuleStore from "../../../../store/useModuleStore";
import { determinePosition } from "../../functions/determinePosition";
@ -14,14 +12,12 @@ import {
DeleteIcon,
} from "../../../../components/icons/ExportCommonIcons";
import DistanceLines from "./DistanceLines"; // Import the DistanceLines component
import { deleteFloatingWidgetApi } from "../../../../services/visulization/zone/deleteFloatingWidget";
import TotalCardComponent from "./cards/TotalCardComponent";
import WarehouseThroughputComponent from "./cards/WarehouseThroughputComponent";
import FleetEfficiencyComponent from "./cards/FleetEfficiencyComponent";
import { useWidgetStore } from "../../../../store/useWidgetStore";
import { useSocketStore } from "../../../../store/store";
import { useClickOutside } from "../../functions/handleWidgetsOuterClick";
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
interface DraggingState {
@ -54,7 +50,7 @@ const DroppedObjects: React.FC = () => {
const updateObjectPosition = useDroppedObjectsStore(
(state) => state.updateObjectPosition
);
const { setSelectedZone, selectedZone } = useSelectedZoneStore();
const { selectedZone } = useSelectedZoneStore();
const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
@ -79,12 +75,8 @@ const DroppedObjects: React.FC = () => {
bottom: number | "auto";
} | null>(null); // State to track the current position during drag
const animationRef = useRef<number | null>(null);
const { activeModule } = useModuleStore();
const chartWidget = useRef<HTMLDivElement>(null);
// useClickOutside(chartWidget, () => {
// setSelectedChartId(null);
// });
const kebabRef = useRef<HTMLDivElement>(null);
// Clean up animation frame on unmount
@ -141,12 +133,6 @@ const DroppedObjects: React.FC = () => {
}
deleteObject(zoneName, id);
// let res = await deleteFloatingWidgetApi(id, organization);
// s
// if (res.message === "FloatingWidget deleted successfully") {
// deleteObject(zoneName, id, index); // Call the deleteObject method from the store
// }
} catch (error) {}
}
@ -160,7 +146,7 @@ const DroppedObjects: React.FC = () => {
const obj = zone.objects[index];
const element = event.currentTarget as HTMLElement;
element.setPointerCapture(event.pointerId);
const container = document.getElementById("real-time-vis-canvas");
const container = document.getElementById("work-space-three-d-canvas");
if (!container) return;
const rect = container.getBoundingClientRect();
@ -322,6 +308,7 @@ const DroppedObjects: React.FC = () => {
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
}
} catch (error) {
console.log(error);
} finally {
setDraggingIndex(null);
setOffset(null);
@ -343,7 +330,7 @@ const DroppedObjects: React.FC = () => {
const handlePointerMove = (event: React.PointerEvent) => {
if (!draggingIndex || !offset) return;
if (isPlaying === true) return;
const container = document.getElementById("real-time-vis-canvas");
const container = document.getElementById("work-space-three-d-canvas");
if (!container) return;
const rect = container.getBoundingClientRect();
@ -394,12 +381,6 @@ const DroppedObjects: React.FC = () => {
// Update position immediately without animation frame
updateObjectPosition(zoneName, draggingIndex.index, newPosition);
// if (!animationRef.current) {
// animationRef.current = requestAnimationFrame(() => {
// updateObjectPosition(zoneName, draggingIndex.index, newPosition);
// animationRef.current = null;
// });
// }
};
const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
@ -407,7 +388,7 @@ const DroppedObjects: React.FC = () => {
if (!draggingIndex || !offset) return;
if (isPlaying === true) return;
const container = document.getElementById("real-time-vis-canvas");
const container = document.getElementById("work-space-three-d-canvas");
if (!container) return;
const rect = container.getBoundingClientRect();
@ -450,11 +431,6 @@ const DroppedObjects: React.FC = () => {
// Save to backend
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
// const response = await addingFloatingWidgets(zone.zoneId, organization, {
// ...zone.objects[draggingIndex.index],
// position: boundedPosition,
// });
let updateFloatingWidget = {
organization: organization,
widget: {
@ -468,21 +444,9 @@ const DroppedObjects: React.FC = () => {
visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget);
}
// if (response.message === "Widget updated successfully") {
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
// }
// // Clean up
// setDraggingIndex(null);
// setOffset(null);
// setActiveEdges(null); // Clear active edges
// setCurrentPosition(null); // Reset current position
// if (animationRef.current) {
// cancelAnimationFrame(animationRef.current);
// animationRef.current = null;
// }
} catch (error) {
console.log(error);
} finally {
// Clean up regardless of success or failure
setDraggingIndex(null);

5
app/src/modules/visualization/widgets/panel/Panel.tsx
View File

@ -56,7 +56,6 @@ const Panel: React.FC<PanelProps> = ({
setZonesData,
waitingPanels,
}) => {
const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
const [panelDimensions, setPanelDimensions] = useState<{
[side in Side]?: { width: number; height: number };
@ -71,7 +70,7 @@ const Panel: React.FC<PanelProps> = ({
// Track canvas dimensions
useEffect(() => {
const canvas = document.getElementById("real-time-vis-canvas");
const canvas = document.getElementById("work-space-three-d-canvas");
if (!canvas) return;
const updateCanvasDimensions = () => {
@ -183,7 +182,7 @@ const Panel: React.FC<PanelProps> = ({
// Add widget to panel
const addWidgetToPanel = async (asset: any, panel: Side) => {
const email = localStorage.getItem("email") || "";
const email = localStorage.getItem("email") ?? "";
const organization = email?.split("@")[1]?.split(".")[0];
const newWidget = {

2
app/src/pages/Project.tsx
View File

@ -102,7 +102,7 @@ const Project: React.FC = () => {
)}
<div
className="scene-container"
id="real-time-vis-canvas"
id="work-space-three-d-canvas"
style={{
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
width: isPlaying || activeModule !== "visualization" ? "100vw" : "",