From 44e0328f362e3ec19fbc81168348d8b209364806 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Thu, 11 Apr 2024 13:43:36 -0300 Subject: [PATCH 01/12] Refactor: Use react-hotkeys-hook lib to handle shortcuts usability --- src/frontend/package-lock.json | 10 + src/frontend/package.json | 1 + .../components/nodeToolbarComponent/index.tsx | 195 ++++++++---------- 3 files changed, 99 insertions(+), 107 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 971c9eee11..4e3967f1be 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -50,6 +50,7 @@ "react-cookie": "^4.1.1", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.11", + "react-hotkeys-hook": "^4.5.0", "react-icons": "^5.0.1", "react-laag": "^2.0.5", "react-markdown": "^8.0.7", @@ -10471,6 +10472,15 @@ "react": ">=16.13.1" } }, + "node_modules/react-hotkeys-hook": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-4.5.0.tgz", + "integrity": "sha512-Samb85GSgAWFQNvVt3PS90LPPGSf9mkH/r4au81ZP1yOIFayLC3QAvqTgGtJ8YEDMXtPmaVBs6NgipHO6h4Mug==", + "peerDependencies": { + "react": ">=16.8.1", + "react-dom": ">=16.8.1" + } + }, "node_modules/react-icons": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index fd27d8bd6c..e298a84fb2 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -45,6 +45,7 @@ "react-cookie": "^4.1.1", "react-dom": "^18.2.0", "react-error-boundary": "^4.0.11", + "react-hotkeys-hook": "^4.5.0", "react-icons": "^5.0.1", "react-laag": "^2.0.5", "react-markdown": "^8.0.7", diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 8a134f48ad..9d097cb12d 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -31,6 +31,7 @@ import { } from "../../../../utils/reactflowUtils"; import { classNames } from "../../../../utils/utils"; import ToolbarSelectItem from "./toolbarSelectItem"; +import { useHotkeys } from "react-hotkeys-hook"; export default function NodeToolbarComponent({ data, @@ -65,6 +66,92 @@ export default function NodeToolbarComponent({ const hasApiKey = useStoreStore((state) => state.hasApiKey); const validApiKey = useStoreStore((state) => state.validApiKey); + function handleMinimizeWShortcut(e: KeyboardEvent) { + e.preventDefault() + if (isMinimal) { + setShowState((show) => !show); + setShowNode(data.showNode ?? true ? false : true); + return; + } + setNoticeData({ + title: + "Minimization are only available for nodes with one handle or fewer.", + }); + return; + } + + function handleUpdateWShortcut(e: KeyboardEvent) { + e.preventDefault() + if ((hasApiKey || hasStore)) { + handleSelectChange("update"); + } + } + + function handleGroupWShortcut(e: KeyboardEvent) { + e.preventDefault() + if (isGroup) { + handleSelectChange("ungroup"); + } + } + + function handleShareWShortcut(e: KeyboardEvent) { + e.preventDefault() + if (hasApiKey || hasStore) { + setShowconfirmShare((state) => !state); + } + } + + function handleCodeWShortcut(e: KeyboardEvent) { + e.preventDefault() + if (hasCode) return setOpenModal((state) => !state); + setNoticeData({ title: `You can not access ${data.id} code` }); + } + + function handleAdvancedWShortcut(e: KeyboardEvent) { + e.preventDefault() + if (!isGroup) { + setShowModalAdvanced((state) => !state); + } + } + + function handleSaveWShortcut(e: KeyboardEvent) { + e.preventDefault() + if (isSaved) { + setShowOverrideModal((state) => !state); + return; + } + if (hasCode) { + saveComponent(cloneDeep(data), false); + setSuccessData({ title: `${data.id} saved successfully` }); + return; + } + } + + function handleDocsWShortcut(e: KeyboardEvent) { + e.preventDefault(); + if (data.node?.documentation) { + return openInNewTab(data.node?.documentation); + } + setNoticeData({ + title: `${data.id} docs is not available at the moment.`, + }); + } + + function handleDownloadWShortcut(e: KeyboardEvent) { + e.preventDefault(); + downloadNode(flowComponent!); + } + + useHotkeys("ctrl+q", handleMinimizeWShortcut); + useHotkeys("ctrl+u", handleUpdateWShortcut); + useHotkeys("ctrl+g", handleGroupWShortcut); + useHotkeys("ctrl+shift+s", handleShareWShortcut); + useHotkeys("ctrl+shift+u", handleCodeWShortcut); + useHotkeys("ctrl+shift+a", handleAdvancedWShortcut); + useHotkeys("ctrl+s", handleSaveWShortcut); + useHotkeys("ctrl+shift+d", handleDocsWShortcut); + useHotkeys("ctrl+j", handleDownloadWShortcut); + const isMinimal = numberOfHandles <= 1; const isGroup = data.node?.flow ? true : false; @@ -265,112 +352,6 @@ export default function NodeToolbarComponent({ const [openModal, setOpenModal] = useState(false); const hasCode = Object.keys(data.node!.template).includes("code"); - useEffect(() => { - function onKeyDown(event: KeyboardEvent) { - if ( - selected && - (hasApiKey || hasStore) && - (event.ctrlKey || event.metaKey) && - event.key === "u" - ) { - event.preventDefault(); - handleSelectChange("update"); - } - if ( - selected && - isGroup && - (event.ctrlKey || event.metaKey) && - event.key === "g" - ) { - event.preventDefault(); - handleSelectChange("ungroup"); - } - if ( - selected && - (hasApiKey || hasStore) && - (event.ctrlKey || event.metaKey) && - event.shiftKey && - event.key === "S" - ) { - event.preventDefault(); - setShowconfirmShare((state) => !state); - } - - if ( - selected && - (event.ctrlKey || event.metaKey) && - event.shiftKey && - event.key === "Q" - ) { - event.preventDefault(); - if (isMinimal) { - setShowState((show) => !show); - setShowNode(data.showNode ?? true ? false : true); - return; - } - setNoticeData({ - title: - "Minimization are only available for nodes with one handle or fewer.", - }); - } - if ( - selected && - (event.ctrlKey || event.metaKey) && - event.shiftKey && - event.key === "U" - ) { - event.preventDefault(); - if (hasCode) return setOpenModal((state) => !state); - setNoticeData({ title: `You can not access ${data.id} code` }); - } - if ( - selected && - !isGroup && - (event.ctrlKey || event.metaKey) && - event.shiftKey && - event.key === "A" - ) { - event.preventDefault(); - setShowModalAdvanced((state) => !state); - } - if (selected && (event.ctrlKey || event.metaKey) && event.key === "s") { - if (isSaved) { - event.preventDefault(); - return setShowOverrideModal((state) => !state); - } - if (hasCode) { - event.preventDefault(); - saveComponent(cloneDeep(data), false); - setSuccessData({ title: `${data.id} saved successfully` }); - } - } - if ( - selected && - (event.ctrlKey || event.metaKey) && - event.shiftKey && - event.key === "D" - ) { - event.preventDefault(); - if (data.node?.documentation) { - return openInNewTab(data.node?.documentation); - } - setNoticeData({ - title: `${data.id} docs is not available at the moment.`, - }); - } - if (selected && (event.ctrlKey || event.metaKey) && event.key === "j") { - event.preventDefault(); - downloadNode(flowComponent!); - } - } - - document.addEventListener("keydown", onKeyDown); - - return () => { - document.removeEventListener("keydown", onKeyDown); - }; - }, [isSaved, showNode, data.showNode, isMinimal]); - return ( <>
@@ -567,7 +548,7 @@ export default function NodeToolbarComponent({ icon={showNode ? "Minimize2" : "Maximize2"} value={showNode ? "Minimize" : "Expand"} isMac={navigator.userAgent.toUpperCase().includes("MAC")} - shift={true} + shift={false} keyboardKey={"Q"} dataTestId={"minimize-button-nodeToolbar"} /> From 489fc0d64c72ef372d0cf388428ec494834e0779 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 12 Apr 2024 18:55:25 -0300 Subject: [PATCH 02/12] Refactor: Use mod key instead of ctrl key to enable shortcuts to mac users --- .../components/nodeToolbarComponent/index.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index f1f52b050b..8dcd851e72 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -142,15 +142,15 @@ export default function NodeToolbarComponent({ downloadNode(flowComponent!); } - useHotkeys("ctrl+q", handleMinimizeWShortcut); - useHotkeys("ctrl+u", handleUpdateWShortcut); - useHotkeys("ctrl+g", handleGroupWShortcut); - useHotkeys("ctrl+shift+s", handleShareWShortcut); - useHotkeys("ctrl+shift+u", handleCodeWShortcut); - useHotkeys("ctrl+shift+a", handleAdvancedWShortcut); - useHotkeys("ctrl+s", handleSaveWShortcut); - useHotkeys("ctrl+shift+d", handleDocsWShortcut); - useHotkeys("ctrl+j", handleDownloadWShortcut); + useHotkeys("mod+q", handleMinimizeWShortcut); + useHotkeys("mod+u", handleUpdateWShortcut); + useHotkeys("mod+g", handleGroupWShortcut); + useHotkeys("mod+shift+s", handleShareWShortcut); + useHotkeys("mod+shift+u", handleCodeWShortcut); + useHotkeys("mod+shift+a", handleAdvancedWShortcut); + useHotkeys("mod+s", handleSaveWShortcut); + useHotkeys("mod+shift+d", handleDocsWShortcut); + useHotkeys("mod+j", handleDownloadWShortcut); const isMinimal = numberOfHandles <= 1; const isGroup = data.node?.flow ? true : false; From 53f0388649705575f35cee89b807a82e9ea0e9b7 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Wed, 17 Apr 2024 19:56:21 -0300 Subject: [PATCH 03/12] Feat: add API Modal shortcut (ctrl+r) --- .../src/components/chatComponent/index.tsx | 36 +++++++++---------- src/frontend/src/modals/ApiModal/index.tsx | 9 ++++- .../components/nodeToolbarComponent/index.tsx | 2 +- 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index 66ff2b609f..0eff32c8d8 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/src/frontend/src/components/chatComponent/index.tsx @@ -9,32 +9,32 @@ import { useStoreStore } from "../../stores/storeStore"; import { classNames } from "../../utils/utils"; import ForwardedIconComponent from "../genericIconComponent"; import { Separator } from "../ui/separator"; +import { useHotkeys } from "react-hotkeys-hook"; export default function FlowToolbar(): JSX.Element { + function handleAPIWShortcut(e: KeyboardEvent) { + e.preventDefault(); + setOpenCodeModal((oldOpen) => !oldOpen) + } + + function handleChatWShortcut(e: KeyboardEvent) { + if (useFlowStore.getState().hasIO) { + e.preventDefault(); + setOpen((oldState) => !oldState); + } + } + + useHotkeys("mod+k", handleChatWShortcut); + useHotkeys("mod+r", handleAPIWShortcut); const [open, setOpen] = useState(false); + const [openCodeModal, setOpenCodeModal] = useState(false); + const hasIO = useFlowStore((state) => state.hasIO); const hasStore = useStoreStore((state) => state.hasStore); const validApiKey = useStoreStore((state) => state.validApiKey); const currentFlow = useFlowsManagerStore((state) => state.currentFlow); const hasApiKey = useStoreStore((state) => state.hasApiKey); - useEffect(() => { - const handleKeyDown = (event: KeyboardEvent) => { - if ( - (event.key === "K" || event.key === "k") && - (event.metaKey || event.ctrlKey) && - useFlowStore.getState().hasIO - ) { - event.preventDefault(); - setOpen((oldState) => !oldState); - } - }; - document.addEventListener("keydown", handleKeyDown); - return () => { - document.removeEventListener("keydown", handleKeyDown); - }; - }, []); - const prevNodesRef = useRef(); const ModalMemo = useMemo( @@ -117,7 +117,7 @@ export default function FlowToolbar(): JSX.Element {
{currentFlow && currentFlow.data && ( - +
{ const { autoLogin } = useContext(AuthContext); - const [open, setOpen] = useState(false); + const [open, setOpen] = + mySetOpen !== undefined && myOpen !== undefined + ? [myOpen, mySetOpen] + : useState(false); const [activeTab, setActiveTab] = useState("0"); const tweak = useRef([]); const tweaksList = useRef([]); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 8dcd851e72..c862558486 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -95,8 +95,8 @@ export default function NodeToolbarComponent({ } function handleShareWShortcut(e: KeyboardEvent) { - e.preventDefault() if (hasApiKey || hasStore) { + e.preventDefault() setShowconfirmShare((state) => !state); } } From 58f78c3680d6cd11dc5fc6ef83e8277d2199924a Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 19 Apr 2024 13:33:11 -0300 Subject: [PATCH 04/12] Feat: make space open node code modal --- .../src/pages/FlowPage/components/nodeToolbarComponent/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index c862558486..fa7478b4a5 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -151,6 +151,7 @@ export default function NodeToolbarComponent({ useHotkeys("mod+s", handleSaveWShortcut); useHotkeys("mod+shift+d", handleDocsWShortcut); useHotkeys("mod+j", handleDownloadWShortcut); + useHotkeys("space", handleCodeWShortcut) const isMinimal = numberOfHandles <= 1; const isGroup = data.node?.flow ? true : false; From a0a01aef3fe166fcb7202fc6ecb117312f0eeb55 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 19 Apr 2024 16:57:57 -0300 Subject: [PATCH 05/12] Feat: make possible to open node advanced settings by double clicking the node --- .../src/CustomNodes/GenericNode/index.tsx | 7 ++++++ .../src/modals/EditNodeModal/index.tsx | 8 +++++++ .../components/nodeToolbarComponent/index.tsx | 23 ++++++++++++++----- src/frontend/src/types/components/index.ts | 11 ++------- 4 files changed, 34 insertions(+), 15 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 29673fdb89..bc0ff0fd85 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -339,6 +339,8 @@ export default function GenericNode({ ); }; + const [openWDoubleCLick, setOpenWDoubleCLick] = useState(false); + const getBaseBorderClass = (selected) => selected ? "border border-ring" : "border"; @@ -349,6 +351,8 @@ export default function GenericNode({ return ( { takeSnapshot(); @@ -382,12 +386,15 @@ export default function GenericNode({ updateNodeCode, isOutdated, selected, + openWDoubleCLick, + setOpenWDoubleCLick ]); return ( <> {memoizedNodeToolbarComponent}
setOpenWDoubleCLick(true)} className={getNodeBorderClassName( selected, showNode, diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 17da8c73b3..1e90cacce9 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -46,11 +46,13 @@ const EditNodeModal = forwardRef( nodeLength, open, setOpen, + setOpenWDoubleClick, }: { data: NodeDataType; nodeLength: number; open: boolean; setOpen: (open: boolean) => void; + setOpenWDoubleClick: (open: boolean) => void; }, ref ) => { @@ -82,6 +84,12 @@ const EditNodeModal = forwardRef( } }, [open]); + useEffect(() => { + return () => { + setOpenWDoubleClick(false) + } + }, []) + const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); return ( diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index fa7478b4a5..220b53ee02 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -45,6 +45,8 @@ export default function NodeToolbarComponent({ setShowState, onCloseAdvancedModal, isOutdated, + openWDoubleClick, + setOpenWDoubleClick, }: nodeToolbarPropsType): JSX.Element { const nodeLength = Object.keys(data.node!.template).filter( (templateField) => @@ -176,6 +178,12 @@ export default function NodeToolbarComponent({ createFlowComponent(cloneDeep(data), version) ); + useEffect(() => { + console.log(openWDoubleClick) + if (openWDoubleClick) setShowModalAdvanced(true) + }, [openWDoubleClick, setOpenWDoubleClick]); + + const openInNewTab = (url) => { window.open(url, "_blank", "noreferrer"); }; @@ -621,12 +629,15 @@ export default function NodeToolbarComponent({ - + {showModalAdvanced && ( + + )} {showconfirmShare && ( void; - setDb: (value: boolean) => void; - name: string; - data: NodeDataType; - editNode?: boolean; -}; - export type KeyPairListComponentType = { value: any; onChange: (value: Object[]) => void; @@ -511,6 +502,8 @@ export type fileCardPropsType = { }; export type nodeToolbarPropsType = { + openWDoubleClick: boolean; + setOpenWDoubleClick: (open: boolean) => void; data: NodeDataType; deleteNode: (idx: string) => void; setShowNode: (boolean: any) => void; From 2818909126f044198f72012c16d5e373b85211bc Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Fri, 19 Apr 2024 16:58:41 -0300 Subject: [PATCH 06/12] remove console.log --- .../src/pages/FlowPage/components/nodeToolbarComponent/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 220b53ee02..0636ec7e3e 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -179,7 +179,6 @@ export default function NodeToolbarComponent({ ); useEffect(() => { - console.log(openWDoubleClick) if (openWDoubleClick) setShowModalAdvanced(true) }, [openWDoubleClick, setOpenWDoubleClick]); From c550a1dd8ae92235e2b863afdc982b5b6a0fee70 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 22 Apr 2024 20:58:03 -0300 Subject: [PATCH 07/12] Refactor: Add all toolbar options into more --- .../components/nodeToolbarComponent/index.tsx | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 0636ec7e3e..858cc555af 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -215,6 +215,15 @@ export default function NodeToolbarComponent({ const handleSelectChange = (event) => { switch (event) { + case "save": + if (isSaved) { + return setShowOverrideModal(true); + } + saveComponent(cloneDeep(data), false); + break; + case "code": + setOpenModal(!openModal); + break; case "advanced": setShowModalAdvanced(true); break; @@ -461,6 +470,18 @@ export default function NodeToolbarComponent({ + {hasCode && ( + + + + )} {nodeLength > 0 && ( )} + + + + + + {/* Date: Mon, 22 Apr 2024 21:49:36 -0300 Subject: [PATCH 08/12] Feat: add shortcut to open flow share modal (ctrl+alt+s) --- src/frontend/src/modals/shareModal/index.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx index 8272bddbe3..2d23563f19 100644 --- a/src/frontend/src/modals/shareModal/index.tsx +++ b/src/frontend/src/modals/shareModal/index.tsx @@ -25,6 +25,7 @@ import { import { getTagsIds } from "../../utils/storeUtils"; import ConfirmationModal from "../ConfirmationModal"; import BaseModal from "../baseModal"; +import { useHotkeys } from "react-hotkeys-hook"; export default function ShareModal({ component, @@ -41,6 +42,10 @@ export default function ShareModal({ setOpen?: (open: boolean) => void; disabled?: boolean; }): JSX.Element { + function handleOpenWShortcut(e: KeyboardEvent) { + e.preventDefault() + internalSetOpen(state => !state); + } const version = useDarkStore((state) => state.version); const hasStore = useStoreStore((state) => state.hasStore); const hasApiKey = useStoreStore((state) => state.hasApiKey); @@ -51,6 +56,8 @@ export default function ShareModal({ const [openConfirmationModal, setOpenConfirmationModal] = useState(false); const nameComponent = is_component ? "component" : "workflow"; + useHotkeys("mod+alt+s", handleOpenWShortcut) + const [tags, setTags] = useState<{ id: string; name: string }[]>([]); const [loadingTags, setLoadingTags] = useState(false); const [sharePublic, setSharePublic] = useState(true); From 113b47804fe53d53621ec866fc508d0598a2e6dc Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 22 Apr 2024 22:23:47 -0300 Subject: [PATCH 09/12] Feat: Add validation to avoid error when user doesnt have access to the store --- src/frontend/src/modals/shareModal/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/modals/shareModal/index.tsx b/src/frontend/src/modals/shareModal/index.tsx index 2d23563f19..d40a5a3991 100644 --- a/src/frontend/src/modals/shareModal/index.tsx +++ b/src/frontend/src/modals/shareModal/index.tsx @@ -43,8 +43,10 @@ export default function ShareModal({ disabled?: boolean; }): JSX.Element { function handleOpenWShortcut(e: KeyboardEvent) { - e.preventDefault() - internalSetOpen(state => !state); + if (hasApiKey || hasStore) { + e.preventDefault() + internalSetOpen(state => !state); + } } const version = useDarkStore((state) => state.version); const hasStore = useStoreStore((state) => state.hasStore); From cfff4e3f1e834aaad6d1983657c1bcf139c86523 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Mon, 29 Apr 2024 23:28:18 +0200 Subject: [PATCH 10/12] Fixed double click on description opening Settings modal --- .../src/CustomNodes/GenericNode/index.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index bc0ff0fd85..600f20d1fb 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -27,7 +27,13 @@ import { validationStatusType } from "../../types/components"; import { NodeDataType } from "../../types/flow"; import { handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils"; import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils"; -import { classNames, cn, getFieldTitle, sortFields } from "../../utils/utils"; +import { + classNames, + cn, + getFieldTitle, + isWrappedWithClass, + sortFields, +} from "../../utils/utils"; import ParameterComponent from "./components/parameterComponent"; export default function GenericNode({ @@ -387,14 +393,17 @@ export default function GenericNode({ isOutdated, selected, openWDoubleCLick, - setOpenWDoubleCLick + setOpenWDoubleCLick, ]); return ( <> {memoizedNodeToolbarComponent}
setOpenWDoubleCLick(true)} + onDoubleClick={(event) => { + if (!isWrappedWithClass(event, "nodoubleclick")) + setOpenWDoubleCLick(true); + }} className={getNodeBorderClassName( selected, showNode, @@ -467,7 +476,7 @@ export default function GenericNode({ event.preventDefault(); }} data-testid={"title-" + data.node?.display_name} - className="generic-node-tooltip-div cursor-text text-primary" + className="nodoubleclick generic-node-tooltip-div cursor-text text-primary" > {data.node?.display_name}
@@ -720,7 +729,7 @@ export default function GenericNode({ ) : (
Date: Mon, 29 Apr 2024 23:37:31 +0200 Subject: [PATCH 11/12] Fixed Code shortcut --- .../components/nodeToolbarComponent/index.tsx | 37 +++++++------------ .../toolbarSelectItem/index.tsx | 34 +++++++++-------- src/frontend/src/types/components/index.ts | 1 + 3 files changed, 32 insertions(+), 40 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 858cc555af..bf94458c74 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -1,5 +1,6 @@ import _, { cloneDeep } from "lodash"; import { useEffect, useState } from "react"; +import { useHotkeys } from "react-hotkeys-hook"; import { useUpdateNodeInternals } from "reactflow"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; import CodeAreaComponent from "../../../../components/codeAreaComponent"; @@ -31,7 +32,6 @@ import { } from "../../../../utils/reactflowUtils"; import { classNames } from "../../../../utils/utils"; import ToolbarSelectItem from "./toolbarSelectItem"; -import { useHotkeys } from "react-hotkeys-hook"; export default function NodeToolbarComponent({ data, @@ -69,7 +69,7 @@ export default function NodeToolbarComponent({ const validApiKey = useStoreStore((state) => state.validApiKey); function handleMinimizeWShortcut(e: KeyboardEvent) { - e.preventDefault() + e.preventDefault(); if (isMinimal) { setShowState((show) => !show); setShowNode(data.showNode ?? true ? false : true); @@ -83,14 +83,14 @@ export default function NodeToolbarComponent({ } function handleUpdateWShortcut(e: KeyboardEvent) { - e.preventDefault() - if ((hasApiKey || hasStore)) { + e.preventDefault(); + if (hasApiKey || hasStore) { handleSelectChange("update"); } } function handleGroupWShortcut(e: KeyboardEvent) { - e.preventDefault() + e.preventDefault(); if (isGroup) { handleSelectChange("ungroup"); } @@ -98,26 +98,26 @@ export default function NodeToolbarComponent({ function handleShareWShortcut(e: KeyboardEvent) { if (hasApiKey || hasStore) { - e.preventDefault() + e.preventDefault(); setShowconfirmShare((state) => !state); } } function handleCodeWShortcut(e: KeyboardEvent) { - e.preventDefault() + e.preventDefault(); if (hasCode) return setOpenModal((state) => !state); setNoticeData({ title: `You can not access ${data.id} code` }); } function handleAdvancedWShortcut(e: KeyboardEvent) { - e.preventDefault() + e.preventDefault(); if (!isGroup) { setShowModalAdvanced((state) => !state); } } function handleSaveWShortcut(e: KeyboardEvent) { - e.preventDefault() + e.preventDefault(); if (isSaved) { setShowOverrideModal((state) => !state); return; @@ -153,7 +153,7 @@ export default function NodeToolbarComponent({ useHotkeys("mod+s", handleSaveWShortcut); useHotkeys("mod+shift+d", handleDocsWShortcut); useHotkeys("mod+j", handleDownloadWShortcut); - useHotkeys("space", handleCodeWShortcut) + useHotkeys("space", handleCodeWShortcut); const isMinimal = numberOfHandles <= 1; const isGroup = data.node?.flow ? true : false; @@ -165,7 +165,6 @@ export default function NodeToolbarComponent({ const setNodes = useFlowStore((state) => state.setNodes); const setEdges = useFlowStore((state) => state.setEdges); - const unselectAll = useFlowStore((state) => state.unselectAll); const saveComponent = useFlowsManagerStore((state) => state.saveComponent); const getNodePosition = useFlowStore((state) => state.getNodePosition); const flows = useFlowsManagerStore((state) => state.flows); @@ -179,10 +178,9 @@ export default function NodeToolbarComponent({ ); useEffect(() => { - if (openWDoubleClick) setShowModalAdvanced(true) + if (openWDoubleClick) setShowModalAdvanced(true); }, [openWDoubleClick, setOpenWDoubleClick]); - const openInNewTab = (url) => { window.open(url, "_blank", "noreferrer"); }; @@ -473,9 +471,10 @@ export default function NodeToolbarComponent({ {hasCode && ( - {/* - - */} {value} - {isMac ? ( - - ) : ( - - {shift ? "Ctrl" : "Ctrl +"} - - )} + {mod && + (isMac ? ( + + ) : ( + + {shift ? "Ctrl" : "Ctrl +"} + + ))} {shift && ( Date: Mon, 29 Apr 2024 23:51:11 +0200 Subject: [PATCH 12/12] Fixed PageComponent shortcuts not considering shift --- .../pages/FlowPage/components/PageComponent/index.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index e0b7af4f76..7883317ad8 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -145,6 +145,7 @@ export default function Page({ if ( selectionMenuVisible && (event.ctrlKey || event.metaKey) && + !event.shiftKey && event.key === "g" ) { event.preventDefault(); @@ -153,6 +154,7 @@ export default function Page({ if ( (event.ctrlKey || event.metaKey) && event.key === "p" && + !event.shiftKey && selectedNode.length > 0 ) { event.preventDefault(); @@ -169,6 +171,7 @@ export default function Page({ } if ( (event.ctrlKey || event.metaKey) && + !event.shiftKey && event.key === "d" && selectedNode.length > 0 ) { @@ -183,12 +186,12 @@ export default function Page({ } if (!isWrappedWithClass(event, "noundo")) { if ( - (event.key === "y" || (event.key === "z" && event.shiftKey)) && + ((event.key === "y" && !event.shiftKey) || (event.key === "z" && event.shiftKey)) && (event.ctrlKey || event.metaKey) ) { event.preventDefault(); // prevent the default action redo(); - } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) { + } else if (event.key === "z" && (event.ctrlKey || event.metaKey) && !event.shiftKey) { event.preventDefault(); undo(); } @@ -199,6 +202,7 @@ export default function Page({ ) { if ( (event.ctrlKey || event.metaKey) && + !event.shiftKey && event.key === "c" && lastSelection ) { @@ -206,6 +210,7 @@ export default function Page({ setLastCopiedSelection(_.cloneDeep(lastSelection)); } else if ( (event.ctrlKey || event.metaKey) && + !event.shiftKey && event.key === "x" && lastSelection ) { @@ -213,6 +218,7 @@ export default function Page({ setLastCopiedSelection(_.cloneDeep(lastSelection), true); } else if ( (event.ctrlKey || event.metaKey) && + !event.shiftKey && event.key === "v" && lastCopiedSelection ) { @@ -224,6 +230,7 @@ export default function Page({ }); } else if ( (event.ctrlKey || event.metaKey) && + !event.shiftKey && event.key === "g" && lastSelection ) {