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:
@@ -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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user