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

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

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