diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx index 35517e6..96b526f 100644 --- a/app/src/components/layout/sidebarRight/Header.tsx +++ b/app/src/components/layout/sidebarRight/Header.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { AppDockIcon } from "../../icons/HeaderIcons"; import orgImg from "../../../assets/orgTemp.png"; import { useActiveUsers } from "../../../store/store"; @@ -14,6 +14,10 @@ const Header: React.FC = () => { (user: ActiveUser) => user.userName !== userName ); + useEffect(() => { + console.log(activeUsers); + }, []) + const [userManagement, setUserManagement] = useState(false); return ( diff --git a/app/src/components/ui/componets/RealTimeVisulization.tsx b/app/src/components/ui/componets/RealTimeVisulization.tsx index 346f114..500a6d9 100644 --- a/app/src/components/ui/componets/RealTimeVisulization.tsx +++ b/app/src/components/ui/componets/RealTimeVisulization.tsx @@ -13,7 +13,6 @@ import { useAsset3dWidget, useZones } from "../../../store/store"; import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones"; import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/getZoneData"; - type Side = "top" | "bottom" | "left" | "right"; type FormattedZoneData = Record< @@ -25,7 +24,7 @@ type FormattedZoneData = Record< lockedPanels: Side[]; zoneId: string; zoneViewPortTarget: number[]; - zoneViewPortPosition: number[] + zoneViewPortPosition: number[]; widgets: Widget[]; } >; @@ -45,8 +44,10 @@ const RealTimeVisulization: React.FC = () => { const [droppedObjects, setDroppedObjects] = useState([]); const [zonesData, setZonesData] = useState({}); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); - const { zones } = useZones() - const [floatingWidgets, setFloatingWidgets] = useState>({}); + const { zones } = useZones(); + const [floatingWidgets, setFloatingWidgets] = useState< + Record + >({}); const { widgetSelect, setWidgetSelect } = useAsset3dWidget(); useEffect(() => { async function GetZoneData() { @@ -57,28 +58,30 @@ const RealTimeVisulization: React.FC = () => { if (!Array.isArray(response)) { return; } - const formattedData = response.reduce((acc, zone) => { - acc[zone.zoneName] = { - activeSides: [], - panelOrder: [], - lockedPanels: [], - zoneId: zone.zoneId, - zoneViewPortTarget: zone.viewPortCenter, - zoneViewPortPosition: zone.viewPortposition, - widgets: [], - }; - return acc; - }, {}); + const formattedData = response.reduce( + (acc, zone) => { + acc[zone.zoneName] = { + activeSides: [], + panelOrder: [], + lockedPanels: [], + zoneId: zone.zoneId, + zoneViewPortTarget: zone.viewPortCenter, + zoneViewPortPosition: zone.viewPortposition, + widgets: [], + }; + return acc; + }, + {} + ); setZonesData(formattedData); } catch (error) { - console.log('error: ', error); + console.log("error: ", error); } } GetZoneData(); }, []); // Removed `zones` from dependencies - useEffect(() => { setZonesData((prev) => { if (!selectedZone) return prev; @@ -97,10 +100,8 @@ const RealTimeVisulization: React.FC = () => { }; }); }, [selectedZone]); - - useEffect(() => { - }, [floatingWidgets]) + useEffect(() => {}, [floatingWidgets]); const handleDrop = (event: React.DragEvent) => { event.preventDefault(); @@ -121,24 +122,31 @@ const RealTimeVisulization: React.FC = () => { position: [relativeY, relativeX], // Y first because of top/left style }; // Only set zone if it’s not already in the store (prevents overwriting objects) - const existingZone = useDroppedObjectsStore.getState().zones[selectedZone.zoneName]; + const existingZone = + useDroppedObjectsStore.getState().zones[selectedZone.zoneName]; if (!existingZone) { - useDroppedObjectsStore.getState().setZone(selectedZone.zoneName, selectedZone.zoneId); + useDroppedObjectsStore + .getState() + .setZone(selectedZone.zoneName, selectedZone.zoneId); } // Add the dropped object to the zone - useDroppedObjectsStore.getState().addObject(selectedZone.zoneName, newObject); + useDroppedObjectsStore + .getState() + .addObject(selectedZone.zoneName, newObject); setFloatingWidgets((prevWidgets) => ({ ...prevWidgets, [selectedZone.zoneName]: { ...prevWidgets[selectedZone.zoneName], zoneName: selectedZone.zoneName, zoneId: selectedZone.zoneId, - objects: [...(prevWidgets[selectedZone.zoneName]?.objects || []), newObject], + objects: [ + ...(prevWidgets[selectedZone.zoneName]?.objects || []), + newObject, + ], }, })); }; - return (
{ width: isPlaying || activeModule !== "visualization" ? "100vw" : "", left: isPlaying || activeModule !== "visualization" ? "0%" : "", }} - >
{ onDrop={(event) => handleDrop(event)} onDragOver={(event) => event.preventDefault()} > - - +
{activeModule === "visualization" && ( diff --git a/app/src/modules/collaboration/collabCams.tsx b/app/src/modules/collaboration/collabCams.tsx index bae58c2..9f49f0c 100644 --- a/app/src/modules/collaboration/collabCams.tsx +++ b/app/src/modules/collaboration/collabCams.tsx @@ -147,6 +147,7 @@ const CamModelsGroup = () => { const filteredData = data.cameraDatas.filter( (camera: any) => camera.userData.email !== email ); + let a:any = []; if (filteredData.length > 0) { loader.load(camModel, (gltf) => { const newCams = filteredData.map((cam: any) => { @@ -163,11 +164,10 @@ const CamModelsGroup = () => { cam.rotation.z ); newModel.userData = cam.userData; - if (!activeUsers.includes(cam.userData)) { - setActiveUsers([...activeUsers, cam.userData]); - } + a.push(cam.userData); return newModel; }); + setActiveUsers(a); setCams((prev) => [...prev, ...newCams]); }); } diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss index 18822b6..4d201ad 100644 --- a/app/src/styles/abstracts/variables.scss +++ b/app/src/styles/abstracts/variables.scss @@ -58,6 +58,9 @@ $acent-gradient: linear-gradient( #925df3 100% ); // Light mode accent gradient +$faint-gradient: radial-gradient(circle, #bfe0f8 0%, #e9ebff 46%, #e2acff 100%); +$faint-gradient-dark: radial-gradient(circle, #31373b 0%, #48494b 46%, #52415c 100%); + // ======================================================================== // Typography // ======================================================================== diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss index 73e602b..86495f5 100644 --- a/app/src/styles/base/base.scss +++ b/app/src/styles/base/base.scss @@ -12,6 +12,7 @@ --accent-color: #{$accent-color}; // Primary accent color for light theme --highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme --accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme + --faint-gradient-color: #{$faint-gradient}; // Background colors --background-color: #{$background-color}; // Main background color @@ -46,6 +47,7 @@ --accent-color: #{$accent-color-dark}; // Primary accent color for dark theme --highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme --accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme + --faint-gradient-color: #{$faint-gradient-dark}; // Background colors --background-color: #{$background-color-dark}; // Main background color @@ -84,7 +86,6 @@ } body { - background: var(--background-color); /* Font Sizes */ @@ -134,4 +135,4 @@ body { ::-webkit-scrollbar-corner { background: transparent; /* Remove corner styling for scrollable containers */ -} \ No newline at end of file +} diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss index 60b760f..a4348a3 100644 --- a/app/src/styles/components/menu/menu.scss +++ b/app/src/styles/components/menu/menu.scss @@ -1,129 +1,127 @@ .menu-bar { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 5; - background-color: var(--background-color); - color: var(--text-color); - box-shadow: var(--box-shadow-light); - border-radius: 8px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 5; + background-color: var(--background-color); + color: var(--text-color); + box-shadow: var(--box-shadow-light); + border-radius: 8px; + .menu-buttons { + display: flex; + flex-direction: column; + height: 100%; + padding: 8px 4px; + min-width: 178px; - .menu-buttons { + .menu-button-container { + position: relative; + height: 100%; + padding: 8px; + + .menu-button { + width: 100%; + cursor: pointer; + transition: all 0.2s ease; display: flex; - flex-direction: column; - height: 100%; - padding: 8px 4px; - min-width: 178px; + align-items: center; + justify-content: space-between; + position: relative; - .menu-button-container { - position: relative; - height: 100%; - padding: 8px; + .dropdown-icon { + margin-left: 5px; + font-size: var(--font-size-small); + color: #666666; + } + } - .menu-button { - width: 100%; - cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; - justify-content: space-between; - position: relative; + .dropdown-menu { + position: absolute; + top: 0; + left: 100%; + background-color: var(--background-color); + min-width: 220px; + border-radius: 4px; + box-shadow: var(--box-shadow-light); + border: 1px solid var(--background-color); + z-index: 100; + padding: 5px 0; - .dropdown-icon { - margin-left: 5px; - font-size: var(--font-size-small); - color: #666666; - } - } + .menu-item-container { + position: relative; - .dropdown-menu { - position: absolute; - top: 0; - left: 100%; - background-color: var(--background-color); - min-width: 220px; - border-radius: 4px; - box-shadow: var(--box-shadow-light); - border: 1px solid var(--background-color); - z-index: 100; - padding: 5px 0; - - .menu-item-container { - position: relative; - - .menu-item { - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 20px; - cursor: pointer; - white-space: nowrap; - color: var(--text-color); - - &:hover { - background-color: var(--highlight-accent-color); - color: var(--highlight-accent-color); - } - - .menu-item-right { - display: flex; - align-items: center; - gap: 15px; - - .shortcut { - color: var(--text-color); - font-size: var(--font-size-small); - } - - .icon { - font-size: var(--font-size-small); - color: var(--text-color); - } - } - } - - .submenu { - position: absolute; - left: 100%; - top: 0; - background-color: var(--background-color); - min-width: 200px; - border-radius: 0 4px 4px 4px; - box-shadow: var(--box-shadow-light); - border: 1px solid var(--background-color); - z-index: 101; - - .submenu-item { - padding: 8px 20px; - cursor: pointer; - display: flex; - justify-content: space-between; - color: var(--text-color); - - &:hover { - background-color: var(--background-color-gray); - color: var(--highlight-accent-color); - } - - .shortcut { - color: var(--text-color); - } - } - } - } - } + .menu-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 20px; + cursor: pointer; + white-space: nowrap; + color: var(--text-color); &:hover { - background-color: var(--highlight-accent-color); - color: var(--highlight-accent-color); + background-color: var(--highlight-accent-color); + color: var(--highlight-accent-color); } - } - } -} -.split { + .menu-item-right { + display: flex; + align-items: center; + gap: 15px; + + .shortcut { + color: var(--text-color); + font-size: var(--font-size-small); + } + + .icon { + font-size: var(--font-size-small); + color: var(--text-color); + } + } + } + + .submenu { + position: absolute; + left: 100%; + top: 0; + background-color: var(--background-color); + min-width: 200px; + border-radius: 0 4px 4px 4px; + box-shadow: var(--box-shadow-light); + border: 1px solid var(--background-color); + z-index: 101; + + .submenu-item { + padding: 8px 20px; + cursor: pointer; + display: flex; + justify-content: space-between; + color: var(--text-color); + + &:hover { + background-color: var(--background-color-gray); + color: var(--highlight-accent-color); + } + + .shortcut { + color: var(--text-color); + } + } + } + } + } + + &:hover { + background-color: var(--highlight-accent-color); + color: var(--highlight-accent-color); + } + } + } + .split { width: 100%; height: 1px; - background-color: #E0DFFF; -} \ No newline at end of file + background-color: #e0dfff; + } +} diff --git a/app/src/styles/layout/loading.scss b/app/src/styles/layout/loading.scss index a6e3bf5..0a13753 100644 --- a/app/src/styles/layout/loading.scss +++ b/app/src/styles/layout/loading.scss @@ -18,12 +18,7 @@ &::after { content: ""; position: absolute; - background: radial-gradient( - circle, - #bfe0f8 0%, - #e9ebff 46%, - #e2acff 100% - ); + background: var(--faint-gradient-color); height: 50vh; width: 50vw; top: 0; diff --git a/app/src/styles/pages/userAuth.scss b/app/src/styles/pages/userAuth.scss index fd4048c..1bf4c7e 100644 --- a/app/src/styles/pages/userAuth.scss +++ b/app/src/styles/pages/userAuth.scss @@ -10,7 +10,6 @@ color: var(--text-color); height: 100vh; background-color: var(--background-color); - background-color: #fcfdfd; position: relative; z-index: 1; .logo-icon { @@ -168,12 +167,7 @@ &::after { content: ""; position: absolute; - background: radial-gradient( - circle, - #bfe0f8 0%, - #e9ebff 46%, - #e2acff 100% - ); + background: var(--faint-gradient-color); height: 50vh; width: 50vw; top: 0;