From beeeae082a4b992052b71ad252914b0d7575167a Mon Sep 17 00:00:00 2001 From: bflatastic Date: Fri, 11 Apr 2025 00:37:09 +0700 Subject: [PATCH] added shortcut "b" key to open/browse 3d assets modal --- .../PageEnigma/Editor/keybinds_controls.ts | 6 +++ .../PageEnigma/comps/AssetMenu/AssetModal.tsx | 21 +++++---- .../comps/Controls3D/Controls3D.tsx | 46 +++++++++---------- .../comps/ControlsTopButtons/Help/Help.tsx | 3 ++ .../pages/PageEnigma/signals/assetModal.ts | 1 + 5 files changed, 45 insertions(+), 32 deletions(-) diff --git a/frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts b/frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts index 79006e314f..5898527096 100644 --- a/frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts +++ b/frontend/editor3d/app/pages/PageEnigma/Editor/keybinds_controls.ts @@ -4,6 +4,7 @@ import { hotkeysStatus, outlinerState, showObjectPanel, + assetModalVisible, } from "../signals"; import { OrbitControls, @@ -292,6 +293,11 @@ export class MouseControls { return; } else if (event.key === "k") { this.toggleFKMode(); + } else if (event.key === "b") { + // Open asset modal + event.preventDefault(); + assetModalVisible.value = true; + return; } if ((event.ctrlKey || event.metaKey) && !this.isProcessing) { diff --git a/frontend/editor3d/app/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx b/frontend/editor3d/app/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx index 96f4f0bab0..b148260c87 100644 --- a/frontend/editor3d/app/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx +++ b/frontend/editor3d/app/pages/PageEnigma/comps/AssetMenu/AssetModal.tsx @@ -22,6 +22,7 @@ import { demoCharacterItems, assetModalVisibleDuringDrag, reopenAfterDragSignal, + assetModalVisible, } from "../../signals"; import { MediaItem } from "../../models"; import { useUserObjects, useFeaturedObjects } from "../SidePanelTabs/hooks"; @@ -73,7 +74,7 @@ const AllTabSection = ({ ); -export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => { +export const AssetModal = () => { useSignals(); const [activeLibraryTab, setActiveLibraryTab] = useState("library"); const [activeAssetTab, setActiveAssetTab] = useState("all"); @@ -81,20 +82,24 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => { const [reopenAfterAdd, setReopenAfterAdd] = useState(false); const searchInputRef = useRef(null); + const handleClose = () => { + assetModalVisible.value = false; + }; + // Update the signal when the preference changes useEffect(() => { reopenAfterDragSignal.value = reopenAfterAdd; }, [reopenAfterAdd]); useEffect(() => { - if (isOpen) { + if (assetModalVisible.value) { // Small delay to ensure the modal is fully mounted const timer = setTimeout(() => { searchInputRef.current?.focus(); }, 100); return () => clearTimeout(timer); } - }, [isOpen]); + }, [assetModalVisible.value]); // Fetch objects for different categories const { userObjects: userCharacters } = useUserObjects({ @@ -262,10 +267,10 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => { if (reopenAfterAdd) { // Small delay to allow the modal to close and reopen setTimeout(() => { - onClose(); + handleClose(); }, 100); } else { - onClose(); + handleClose(); } }; @@ -273,8 +278,8 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => { return ( @@ -350,7 +355,7 @@ export const AssetModal = ({ isOpen, onClose }: AssetModalProps) => { /> )} - +
{ useSignals(); const editorEngine = useContext(EngineContext); + const handleModeChange = (value: string) => { + selectedMode.value = value; + switch (value) { + case "move": + handleMoveArrows(); + break; + case "rotate": + handleRotateArrows(); + break; + case "scale": + handleZoomArrows(); + break; + default: + console.log("Unknown option"); + } + }; + const handleMoveArrows = () => { if (!editorEngine) { return; @@ -36,23 +53,6 @@ export const Controls3D = () => { editorEngine.change_mode("scale"); }; - const handleModeChange = (value: string) => { - selectedMode.value = value; - switch (value) { - case "move": - handleMoveArrows(); - break; - case "rotate": - handleRotateArrows(); - break; - case "scale": - handleZoomArrows(); - break; - default: - console.log("Unknown option"); - } - }; - const modes = [ { value: "move", @@ -74,11 +74,9 @@ export const Controls3D = () => { }, ]; - const [isModalOpen, setIsModalOpen] = useState(false); - const handleOpenModal = () => { assetModalVisibleDuringDrag.value = true; - setIsModalOpen(true); + assetModalVisible.value = true; }; return ( @@ -88,7 +86,7 @@ export const Controls3D = () => {
{
- setIsModalOpen(false)} /> +
); }; diff --git a/frontend/editor3d/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx b/frontend/editor3d/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx index 17c807a849..ebdbd0ef73 100644 --- a/frontend/editor3d/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx +++ b/frontend/editor3d/app/pages/PageEnigma/comps/ControlsTopButtons/Help/Help.tsx @@ -139,6 +139,9 @@ export const Help = () => { + + + diff --git a/frontend/editor3d/app/pages/PageEnigma/signals/assetModal.ts b/frontend/editor3d/app/pages/PageEnigma/signals/assetModal.ts index 69a35477c1..c1eab50cda 100644 --- a/frontend/editor3d/app/pages/PageEnigma/signals/assetModal.ts +++ b/frontend/editor3d/app/pages/PageEnigma/signals/assetModal.ts @@ -2,3 +2,4 @@ import { signal } from "@preact/signals-react"; export const assetModalVisibleDuringDrag = signal(true); export const reopenAfterDragSignal = signal(false); +export const assetModalVisible = signal(false);