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 }>;