refactor: clean up code and improve readability in SidePannel, FileMenu, Scene, and detectModifierKeys and remove settimeout in scene

This commit is contained in:
Poovizhi99 2025-06-13 12:15:29 +05:30
parent ae20cf1437
commit ac78309bcc
4 changed files with 47 additions and 67 deletions

View File

@ -163,7 +163,10 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
<SettingsIcon /> <SettingsIcon />
Settings Settings
</div> </div>
<div className="option-list" style={{ cursor: "pointer" }}> <div className="option-list" style={{ cursor: "pointer" }} onClick={() => {
localStorage.clear();
navigate("/");
}}>
<LogoutIcon /> <LogoutIcon />
Log out Log out
</div> </div>

View File

@ -93,9 +93,7 @@ const FileMenu: React.FC = () => {
// console.log('Project update response:', data); // console.log('Project update response:', data);
// dashBoardSocket.off("v1-project:response:update", handleResponse); // Clean up // dashBoardSocket.off("v1-project:response:update", handleResponse); // Clean up
// }; // };
// dashBoardSocket.on("v1-project:response:update", handleResponse); // dashBoardSocket.on("v1-project:response:update", handleResponse);
// dashBoardSocket.emit("v1:project:update", updateProjects); // dashBoardSocket.emit("v1:project:update", updateProjects);
// } // }
@ -108,9 +106,7 @@ const FileMenu: React.FC = () => {
projectName projectName
); );
// //
} catch (error) { } catch (error) {}
}
}; };
return ( return (
<button <button

View File

@ -24,36 +24,17 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
], []); ], []);
const { assets } = useAssetsStore(); const { assets } = useAssetsStore();
const { userId, organization } = getUserData(); const { userId, organization } = getUserData();
const { activeModule } = useModuleStore();
const { projectId } = useParams(); const { projectId } = useParams();
const { projectSocket } = useSocketStore(); const { projectSocket } = useSocketStore();
const { activeModule } = useModuleStore();
const { loadingProgress } = useLoadingProgress(); const { loadingProgress } = useLoadingProgress();
const handleUpdatingProject = async () => { const handleUpdatingProject = async () => {
if (!projectId) return; if (!projectId && loadingProgress > 1) return;
try { try {
const projects = await getAllProjects(userId, organization); const projects = await getAllProjects(userId, organization);
let projectUuid = projects.Projects.find( let projectUuid = projects.Projects.find(
(val: any) => val.projectUuid === projectId || val._id === projectId (val: any) => val.projectUuid === projectId || val._id === projectId
); );
if (activeModule === "builder" && loadingProgress !== 1) {
const canvas =
document.getElementById("sceneCanvas")?.children[0]?.children[0];
const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
setTimeout(() => {
const updateProjects = {
projectId: projectUuid,
organization,
userId,
projectName: projectUuid.projectName,
thumbnail: screenshotDataUrl,
};
if (projectSocket) {
projectSocket.emit("v1:project:update", updateProjects);
}
}, 8000);
} else {
const canvas = const canvas =
document.getElementById("sceneCanvas")?.children[0]?.children[0]; document.getElementById("sceneCanvas")?.children[0]?.children[0];
const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png"); const screenshotDataUrl = (canvas as HTMLCanvasElement)?.toDataURL("image/png");
@ -64,13 +45,9 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
projectName: projectUuid.projectName, projectName: projectUuid.projectName,
thumbnail: screenshotDataUrl, thumbnail: screenshotDataUrl,
}; };
// console.log('screenshotDataUrl: ', screenshotDataUrl);
// console.log('updateProjects: ', updateProjects);
if (projectSocket) { if (projectSocket) {
projectSocket.emit("v1:project:update", updateProjects); projectSocket.emit("v1:project:update", updateProjects);
} }
}
} catch (error) { } } catch (error) { }
}; };
useEffect(() => { useEffect(() => {

View File

@ -5,13 +5,18 @@ export const detectModifierKeys = (event: KeyboardEvent): string => {
event.ctrlKey ? "Ctrl" : "", event.ctrlKey ? "Ctrl" : "",
event.altKey ? "Alt" : "", event.altKey ? "Alt" : "",
event.shiftKey ? "Shift" : "", event.shiftKey ? "Shift" : "",
event.metaKey ? "Meta" : "" // Add support for Command/Win key event.metaKey ? "Meta" : "", // Add support for Command/Win key
].filter(Boolean); ].filter(Boolean);
// Ignore modifier keys when they're pressed alone // Ignore modifier keys when they're pressed alone
const isModifierKey = [ const isModifierKey = [
"Control", "Shift", "Alt", "Meta", "Control",
"Ctrl", "AltGraph", "OS" // Additional modifier key aliases "Shift",
"Alt",
"Meta",
"Ctrl",
"AltGraph",
"OS", // Additional modifier key aliases
].includes(event.key); ].includes(event.key);
const mainKey = isModifierKey ? "" : event.key.toUpperCase(); const mainKey = isModifierKey ? "" : event.key.toUpperCase();
@ -19,7 +24,6 @@ export const detectModifierKeys = (event: KeyboardEvent): string => {
// Handle special cases for keys with different representations // Handle special cases for keys with different representations
const normalizedKey = mainKey === " " ? "Space" : mainKey; const normalizedKey = mainKey === " " ? "Space" : mainKey;
// Build the combination string // Build the combination string
if (modifiers.length > 0 && normalizedKey) { if (modifiers.length > 0 && normalizedKey) {
return `${modifiers.join("+")}+${normalizedKey}`; return `${modifiers.join("+")}+${normalizedKey}`;