From ccd6298d1781e511795fa0e2634214bbac32df2d Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 8 May 2025 14:18:02 +0530
Subject: [PATCH] Refactor canvas element references to use consistent ID for
workspace
---
.../collaboration/camera/collabCams.tsx | 25 +---------
.../visualization/RealTimeVisulization.tsx | 2 +-
.../functions/captureVisualization.ts | 2 +-
.../visualization/functions/handleUiDrop.ts | 2 +-
.../widgets/2d/DraggableWidget.tsx | 2 +-
.../widgets/3d/Dropped3dWidget.tsx | 6 +--
.../floating/DroppedFloatingWidgets.tsx | 48 +++----------------
.../visualization/widgets/panel/Panel.tsx | 5 +-
app/src/pages/Project.tsx | 2 +-
9 files changed, 18 insertions(+), 76 deletions(-)
diff --git a/app/src/modules/collaboration/camera/collabCams.tsx b/app/src/modules/collaboration/camera/collabCams.tsx
index 0b01af1..6ce26b0 100644
--- a/app/src/modules/collaboration/camera/collabCams.tsx
+++ b/app/src/modules/collaboration/camera/collabCams.tsx
@@ -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) => (
diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx
index eaff2af..8bf1613 100644
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -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 = () => {
diff --git a/app/src/modules/visualization/functions/captureVisualization.ts b/app/src/modules/visualization/functions/captureVisualization.ts
index d8d3ba2..291a002 100644
--- a/app/src/modules/visualization/functions/captureVisualization.ts
+++ b/app/src/modules/visualization/functions/captureVisualization.ts
@@ -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;
diff --git a/app/src/modules/visualization/functions/handleUiDrop.ts b/app/src/modules/visualization/functions/handleUiDrop.ts
index a70742e..0d02936 100644
--- a/app/src/modules/visualization/functions/handleUiDrop.ts
+++ b/app/src/modules/visualization/functions/handleUiDrop.ts
@@ -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();
diff --git a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
index 3f22fee..5972405 100644
--- a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
+++ b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx
@@ -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 = () => {
diff --git a/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx b/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
index 4ca3c31..cf4d97b 100644
--- a/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
+++ b/app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx
@@ -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();
diff --git a/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx b/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
index ec86fb6..5e26975 100644
--- a/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
+++ b/app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx
@@ -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);
diff --git a/app/src/modules/visualization/widgets/panel/Panel.tsx b/app/src/modules/visualization/widgets/panel/Panel.tsx
index c1eeefc..1a06a40 100644
--- a/app/src/modules/visualization/widgets/panel/Panel.tsx
+++ b/app/src/modules/visualization/widgets/panel/Panel.tsx
@@ -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 = {
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index 16a1495..1187cd5 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -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" : "",