diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index ad76ff49a..7faf4bc79 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -21,6 +21,7 @@ import { useDarkStore } from "./stores/darkStore"; import useFlowsManagerStore from "./stores/flowsManagerStore"; import { useStoreStore } from "./stores/storeStore"; import { useTypesStore } from "./stores/typesStore"; +import useFlowStore from "./stores/flowStore"; export default function App() { const removeFromTempNotificationList = useAlertStore( @@ -44,6 +45,25 @@ export default function App() { const refreshStars = useDarkStore((state) => state.refreshStars); const checkHasStore = useStoreStore((state) => state.checkHasStore); + const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut); + const nodes = useFlowStore(state => state.nodes); + + useEffect(() => { + const onKeyDown = (event: KeyboardEvent) => { + const selectedNode = nodes.filter((obj) => obj.selected); + if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) { + event.preventDefault(); + handleModalWShortcut("code"); + } + }; + + document.addEventListener("keydown", onKeyDown); + + return () => { + document.removeEventListener("keydown", onKeyDown); + }; + }, [handleModalWShortcut, nodes]); + useEffect(() => { refreshStars(); refreshVersion(); diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index ecfe6b5eb..8a83aac62 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -267,6 +267,7 @@ export default function GenericNode({ showNode={showNode} openAdvancedModal={false} onCloseAdvancedModal={() => {}} + selected={selected} >
state.handleModalWShortcut) + const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut); +const nodes = useFlowStore(state => state.nodes); + +useEffect(() => { + const onKeyDown = (event: KeyboardEvent) => { + + const selectedNode = nodes.filter((obj) => obj.selected); + if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) { + event.preventDefault(); + setOpen(openCodeModalWShortcut) + } + + } + document.addEventListener("keydown", onKeyDown); + + return () => { + document.removeEventListener("keydown", onKeyDown); + } +}, []); + useEffect(() => { if (openModal) setOpen(true); }, [openModal]); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index a0136ba85..7eef65c7e 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -36,6 +36,7 @@ export default function NodeToolbarComponent({ numberOfHandles, showNode, name = "code", + selected, onCloseAdvancedModal, }: nodeToolbarPropsType): JSX.Element { const nodeLength = Object.keys(data.node!.template).filter( @@ -89,6 +90,14 @@ export default function NodeToolbarComponent({ }, [showModalAdvanced]); const updateNodeInternals = useUpdateNodeInternals(); + const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut); + const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut); + + useEffect(() => { + console.log(openCodeModalWShortcut) + setOpenModal(openCodeModalWShortcut) + }, [openCodeModalWShortcut, handleModalWShortcut]) + const setLastCopiedSelection = useFlowStore(state => state.setLastCopiedSelection); useEffect(() => { setFlowComponent(createFlowComponent(cloneDeep(data), version)); diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index f9a211e86..1d1c1ad14 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -48,6 +48,16 @@ const useFlowStore = create((set, get) => ({ flowPool: {}, inputs: [], outputs: [], + openCodeModalWShortcut: false, + handleModalWShortcut: ((modal) => { + switch (modal) { + case "code": + set((state) => ({ + openCodeModalWShortcut: !state.openCodeModalWShortcut, + })); + break + } + }), setFlowPool: (flowPool) => { set({ flowPool }); }, diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 30a32ba19..4f5d1bb60 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -484,6 +484,7 @@ export type nodeToolbarPropsType = { name?: string; openAdvancedModal?: boolean; onCloseAdvancedModal?: (close: boolean) => void; + selected: boolean; }; export type parsedDataType = { diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index c506b034f..1b3056122 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -37,6 +37,8 @@ export type FlowPoolType = { }; export type FlowStoreType = { + openCodeModalWShortcut: boolean; + handleModalWShortcut: (modal: string) => void flowPool: FlowPoolType; inputs: Array<{ type: string; id: string }>; outputs: Array<{ type: string; id: string }>;