From 33b1ee83651071b2819dc0ba22cdd12c1ff19364 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 10 Jun 2024 23:24:57 -0300 Subject: [PATCH] Feat: Add shortcut for output inspection and play component --- .../components/parameterComponent/index.tsx | 38 ++++++++++++++----- .../src/CustomNodes/GenericNode/index.tsx | 14 +++++++ src/frontend/src/constants/constants.ts | 8 ++++ src/frontend/src/stores/shortcuts.ts | 2 + src/frontend/src/types/components/index.ts | 9 +++-- src/frontend/src/types/store/index.ts | 2 + 6 files changed, 60 insertions(+), 13 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 37ef5cf60..90520f939 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -39,7 +39,11 @@ import { scapedJSONStringfy, } from "../../../../utils/reactflowUtils"; import { nodeColors } from "../../../../utils/styleUtils"; -import { classNames, groupByFamily } from "../../../../utils/utils"; +import { + classNames, + groupByFamily, + isThereModal, +} from "../../../../utils/utils"; import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount"; import useHandleOnNewValue from "../../../hooks/use-handle-new-value"; import useHandleNodeClass from "../../../hooks/use-handle-node-class"; @@ -47,6 +51,8 @@ import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-butto import OutputModal from "../outputModal"; import TooltipRenderComponent from "../tooltipRenderComponent"; import { TEXT_FIELD_TYPES } from "./constants"; +import { useShortcutsStore } from "../../../../stores/shortcuts"; +import { useHotkeys } from "react-hotkeys-hook"; export default function ParameterComponent({ left, @@ -63,6 +69,7 @@ export default function ParameterComponent({ proxy, showNode, index = "", + selected, }: ParameterComponentType): JSX.Element { const ref = useRef(null); const refHtml = useRef(null); @@ -90,6 +97,19 @@ export default function ParameterComponent({ "unknown" ); + const preventDefault = true; + + function handleOutputWShortcut() { + if (!displayOutputPreview || unknownOutput) return; + if (isThereModal() && !openOutputModal) return; + if (selected && !left) { + setOpenOutputModal((state) => !state); + } + } + + const output = useShortcutsStore((state) => state.output); + useHotkeys(output, handleOutputWShortcut, { preventDefault }); + const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue( data, name, @@ -98,7 +118,7 @@ export default function ParameterComponent({ debouncedHandleUpdateValues, setNode, renderTooltips, - setIsLoading + setIsLoading, ); const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass( @@ -107,7 +127,7 @@ export default function ParameterComponent({ takeSnapshot, setNode, updateNodeInternals, - renderTooltips + renderTooltips, ); const { handleRefreshButtonPress: handleRefreshButtonPressHook } = @@ -116,7 +136,7 @@ export default function ParameterComponent({ let disabled = edges.some( (edge) => - edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id) + edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id), ) ?? false; const handleRefreshButtonPress = async (name, data) => { @@ -129,12 +149,12 @@ export default function ParameterComponent({ handleUpdateValues, setNode, renderTooltips, - setIsLoading + setIsLoading, ); const handleOnNewValue = async ( newValue: string | string[] | boolean | Object[], - skipSnapshot: boolean | undefined = false + skipSnapshot: boolean | undefined = false, ): Promise => { handleOnNewValueHook(newValue, skipSnapshot); }; @@ -216,7 +236,7 @@ export default function ParameterComponent({ className={classNames( left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ", "h-3 w-3 rounded-full border-2 bg-background", - !showNode ? "mt-0" : "" + !showNode ? "mt-0" : "", )} style={{ borderColor: color ?? nodeColors.unknown, @@ -286,7 +306,7 @@ export default function ParameterComponent({ "h-5 w-5 rounded-md", displayOutputPreview && !unknownOutput ? " hover:bg-secondary-foreground/5 hover:text-medium-indigo" - : " cursor-not-allowed text-muted-foreground" + : " cursor-not-allowed text-muted-foreground", )} name={"ScanEye"} /> @@ -336,7 +356,7 @@ export default function ParameterComponent({ } className={classNames( left ? "-ml-0.5" : "-mr-0.5", - "h-3 w-3 rounded-full border-2 bg-background" + "h-3 w-3 rounded-full border-2 bg-background", )} style={{ borderColor: color ?? nodeColors.unknown }} onClick={() => setFilterEdge(groupedEdge.current)} diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 467122451..83a7a7354 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -241,8 +241,18 @@ export default function GenericNode({ } } + function handlePlayWShortcut() { + if (buildStatus === BuildStatus.BUILDING || isBuilding || !selected) return; + setValidationStatus(null); + console.log(data.node?.display_name); + buildFlow({ stopNodeId: data.id }); + } + const update = useShortcutsStore((state) => state.update); + const play = useShortcutsStore((state) => state.play); + useHotkeys(update, handleUpdateCodeWShortcut, { preventDefault }); + useHotkeys(play, handlePlayWShortcut, { preventDefault }); const shortcuts = useShortcutsStore((state) => state.shortcuts); @@ -388,6 +398,7 @@ export default function GenericNode({ data.node!.template[templateField].show && !data.node!.template[templateField].advanced && ( {data.node!.base_classes.length > 0 && ( ((set, get) => ({ setShortcuts: (newShortcuts) => { set({ shortcuts: newShortcuts }); }, + output: "o", + play: "p", flow: "mod+b", undo: "mod+z", redo: "mod+y", diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 8d1fef5d1..097a351f2 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -54,6 +54,7 @@ export type DropDownComponentType = { children?: ReactNode; }; export type ParameterComponentType = { + selected: boolean; data: NodeDataType; title: string; id: sourceHandleType | targetHandleType; @@ -491,7 +492,7 @@ export type ChatInputType = { isDragging: boolean; files: FilePreviewType[]; setFiles: ( - files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[]) + files: FilePreviewType[] | ((prev: FilePreviewType[]) => FilePreviewType[]), ) => void; chatValue: string; inputRef: { @@ -593,7 +594,7 @@ export type chatMessagePropsType = { updateChat: ( chat: ChatMessageType, message: string, - stream_url?: string + stream_url?: string, ) => void; }; @@ -685,12 +686,12 @@ export type codeTabsPropsType = { value: string, node: NodeType, template: TemplateVariableType, - tweak: tweakType + tweak: tweakType, ) => string; buildTweakObject?: ( tw: string, changes: string | string[] | boolean | number | Object[] | Object, - template: TemplateVariableType + template: TemplateVariableType, ) => Promise; }; activeTweaks?: boolean; diff --git a/src/frontend/src/types/store/index.ts b/src/frontend/src/types/store/index.ts index 5d21ee8bf..54b7cb478 100644 --- a/src/frontend/src/types/store/index.ts +++ b/src/frontend/src/types/store/index.ts @@ -21,6 +21,8 @@ export type StoreComponentResponse = { export type shortcutsStoreType = { updateUniqueShortcut: (name: string, combination: string) => void; + output: string; + play: string; flow: string; group: string; cut: string;