Refactor sidebar toggle functionality to support independent left and right UI states; update related components and styles for improved usability

This commit is contained in:
2025-05-13 10:32:24 +05:30
parent b1569e64ed
commit 4337bb9056
10 changed files with 300 additions and 197 deletions

View File

@@ -17,7 +17,7 @@ import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
const KeyPressListener: React.FC = () => {
const { activeModule, setActiveModule } = useModuleStore();
const { setActiveSubTool } = useActiveSubTool();
const { toggleUI, setToggleUI } = useToggleStore();
const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
const { setToggleThreeD } = useThreeDStore();
const { setToolMode } = useToolMode();
const { setIsPlaying } = usePlayButtonStore();
@@ -26,7 +26,7 @@ const KeyPressListener: React.FC = () => {
const { setAddAction } = useAddAction();
const { setSelectedWallItem } = useSelectedWallItem();
const { setActiveTool } = useActiveTool();
const { clearSelectedZone} = useSelectedZoneStore();
const { clearSelectedZone } = useSelectedZoneStore();
const isTextInput = (element: Element | null): boolean =>
element instanceof HTMLInputElement ||
@@ -44,7 +44,7 @@ const KeyPressListener: React.FC = () => {
if (module && !toggleView) {
setActiveTool("cursor");
setActiveSubTool("cursor");
if (module === "market") setToggleUI(false);
if (module === "market") setToggleUI(false, false);
setActiveModule(module);
}
};
@@ -69,6 +69,7 @@ const KeyPressListener: React.FC = () => {
const toggleTo2D = toggleView;
setToggleView(!toggleTo2D);
setToggleThreeD(toggleTo2D);
setToggleUI(toggleTo2D, toggleTo2D);
if (toggleTo2D) {
setSelectedWallItem(null);
setDeleteTool(false);
@@ -114,7 +115,24 @@ const KeyPressListener: React.FC = () => {
event.preventDefault();
if (keyCombination === "Ctrl+\\") {
if (activeModule !== "market") setToggleUI(!toggleUI);
if (toggleUILeft === toggleUIRight) {
setToggleUI(!toggleUILeft, !toggleUIRight);
}
else {
activeModule !== "market" && setToggleUI(true, true);
}
return;
}
if (keyCombination === "Ctrl+]") {
if (activeModule !== "market") {
setToggleUI(toggleUILeft, !toggleUIRight);
}
return;
}
if (keyCombination === "Ctrl+[") {
if (activeModule !== "market") {
setToggleUI(!toggleUILeft, toggleUIRight);
}
return;
}
@@ -132,6 +150,7 @@ const KeyPressListener: React.FC = () => {
if (keyCombination === "ESCAPE") {
setActiveTool("cursor");
setActiveSubTool("cursor");
setIsPlaying(false);
clearSelectedZone();
}
@@ -146,7 +165,7 @@ const KeyPressListener: React.FC = () => {
window.addEventListener("keydown", handleKeyPress);
return () => window.removeEventListener("keydown", handleKeyPress);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeModule, toggleUI, toggleView]);
}, [activeModule, toggleUIRight, toggleUILeft, toggleView]);
return null;
};