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

refactor: Update layout styles and improve KeyPressListener for better UI responsiveness and shortcut handling

This commit is contained in:
Nalvazhuthi 2025-05-15 18:19:35 +05:30
parent 95f118f8ee
commit d6dceb400f
2 changed files with 55 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/src/styles/layout/compareLayout.scss
View File

@ -70,15 +70,20 @@
position: relative; position: relative;
.icon { .icon {
width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
text-align: center; text-align: center;
svg {
width: 100%;
}
} }
.value { .value {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 16px; font-size: var(--font-size-small);
font-weight: 500; font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
} }
@ -154,6 +159,7 @@
border-radius: 4px; border-radius: 4px;
svg { svg {
path { path {
fill: var(--background-color-accent); fill: var(--background-color-accent);
@ -185,9 +191,10 @@
} }
body.compare-layout-open { // body.compare-layout-open {
main { // main {
padding-right: 10px; // Adjust as needed // padding-right: 10px;
transition: padding 0.3s ease;
} // transition: padding 0.3s ease;
} // }
// }

71
app/src/utils/shortcutkeys/handleShortcutKeys.ts
View File

@ -12,25 +12,28 @@ import {
useToggleView, useToggleView,
useToolMode, useToolMode,
} from "../../store/builder/store"; } from "../../store/builder/store";
import useCameraModeStore, { usePlayButtonStore } from "../../store/usePlayButtonStore"; import useCameraModeStore, {
usePlayButtonStore,
} from "../../store/usePlayButtonStore";
import { detectModifierKeys } from "./detectModifierKeys"; import { detectModifierKeys } from "./detectModifierKeys";
import { useSelectedZoneStore } from "../../store/visualization/useZoneStore"; import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
const KeyPressListener: React.FC = () => { const KeyPressListener: React.FC = () => {
const { activeModule, setActiveModule } = useModuleStore(); const { activeModule, setActiveModule } = useModuleStore();
const { setActiveSubTool } = useActiveSubTool(); const { setActiveSubTool } = useActiveSubTool();
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore(); const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
const { setToggleThreeD } = useThreeDStore(); const { setToggleThreeD } = useThreeDStore();
const { setToolMode } = useToolMode(); const { setToolMode } = useToolMode();
const { isPlaying, setIsPlaying } = usePlayButtonStore(); const { isPlaying, setIsPlaying } = usePlayButtonStore();
const { toggleView, setToggleView } = useToggleView(); const { toggleView, setToggleView } = useToggleView();
const { setDeleteTool } = useDeleteTool(); const { setDeleteTool } = useDeleteTool();
const { setAddAction } = useAddAction(); const { setAddAction } = useAddAction();
const { setSelectedWallItem } = useSelectedWallItem(); const { setSelectedWallItem } = useSelectedWallItem();
const { setActiveTool } = useActiveTool(); const { setActiveTool } = useActiveTool();
const { clearSelectedZone } = useSelectedZoneStore(); const { clearSelectedZone } = useSelectedZoneStore();
const { showShortcuts, setShowShortcuts } = useShortcutStore(); const { showShortcuts, setShowShortcuts } = useShortcutStore();
const { setWalkMode } = useCameraModeStore(); const { setWalkMode } = useCameraModeStore();
const { setIsVersionSaved } = useSaveVersion();
const isTextInput = (element: Element | null): boolean => const isTextInput = (element: Element | null): boolean =>
element instanceof HTMLInputElement || element instanceof HTMLInputElement ||
@ -67,8 +70,8 @@ const KeyPressListener: React.FC = () => {
} }
}; };
const handleBuilderShortcuts = (key: string) => { const handleBuilderShortcuts = (key: string) => {
if (activeModule !== "builder" || isPlaying) return; if (activeModule !== "builder" || isPlaying) return;
if (key === "TAB") { if (key === "TAB") {
const toggleTo2D = toggleView; const toggleTo2D = toggleView;
@ -172,14 +175,15 @@ const KeyPressListener: React.FC = () => {
setIsPlaying(true); setIsPlaying(true);
} }
if (keyCombination === "ESCAPE") { if (keyCombination === "ESCAPE") {
setWalkMode(false); setWalkMode(false);
setActiveTool("cursor"); setActiveTool("cursor");
setActiveSubTool("cursor"); setActiveSubTool("cursor");
setIsPlaying(false); setIsPlaying(false);
clearSelectedZone(); clearSelectedZone();
setShowShortcuts(false); setShowShortcuts(false);
} setIsVersionSaved(false);
}
if (keyCombination === "Ctrl+Shift+?") { if (keyCombination === "Ctrl+Shift+?") {
setShowShortcuts(!showShortcuts); setShowShortcuts(!showShortcuts);
@ -195,11 +199,18 @@ const KeyPressListener: React.FC = () => {
} }
}; };
useEffect(() => { useEffect(() => {
window.addEventListener("keydown", handleKeyPress); window.addEventListener("keydown", handleKeyPress);
return () => window.removeEventListener("keydown", handleKeyPress); return () => window.removeEventListener("keydown", handleKeyPress);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeModule, toggleUIRight, toggleUILeft, toggleView, showShortcuts, isPlaying]); }, [
activeModule,
toggleUIRight,
toggleUILeft,
toggleView,
showShortcuts,
isPlaying,
]);
return null; return null;
}; };