From fae76a4a5e4a1424976e5ff1b73c998379708277 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 20 Jul 2023 14:04:03 -0300 Subject: [PATCH 1/6] Changed placeholder and text placement on prompt component --- src/frontend/src/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css index 180744ab5..b8ac21fef 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -243,11 +243,11 @@ The cursor: default; property value restores the browser's default cursor style @apply focus:placeholder-transparent focus:ring-ring focus:border-ring } .input-primary { - @apply bg-background block border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full; + @apply bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full; } .input-edit-node{ - @apply input-primary border-border placeholder:text-center pt-0.5 pb-0.5 text-center + @apply input-primary border-border pt-0.5 pb-0.5 text-left w-full } .input-search{ @apply input-primary pr-7 mx-2 From 7b1b028364cdbb59b1e2d44ff9821ff33b6411c2 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 20 Jul 2023 16:49:41 -0300 Subject: [PATCH 2/6] Fixed node dragging and selecting text on input --- .../components/parameterComponent/index.tsx | 2 +- src/frontend/src/contexts/undoRedoContext.tsx | 8 ------- src/frontend/src/modals/baseModal/index.tsx | 23 +++++++++---------- .../components/PageComponent/index.tsx | 5 ++-- 4 files changed, 15 insertions(+), 23 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index b143304f4..d9960ce7b 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -152,7 +152,7 @@ export default function ParameterComponent({ return (
<>
{ - undo: () => void; - redo: () => void; - takeSnapshot: () => void; - canUndo: boolean; - canRedo: boolean; -}; - type HistoryItem = { nodes: Node[]; edges: Edge[]; diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index 069cd8ee9..bdecd172a 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -97,25 +97,24 @@ function BaseModal({ break; } - const { setDisableCopyPaste } = useContext(TabsContext); - const [openInner, setOpenInner] = useState(open ?? false); + const { disableCopyPaste, setDisableCopyPaste } = useContext(TabsContext); + const [keepDisabling, setKeepDisabling] = useState(false); useEffect(() => { - setOpenInner(open); - }, [open]); - - useEffect(() => { - setOpen(openInner); - if (openInner) { + if (keepDisabling) { setDisableCopyPaste(true); - } else { - setDisableCopyPaste(false); } - }, [openInner]); + }, [disableCopyPaste]); + + useEffect(() => { + if (!open) { + setKeepDisabling(false); + } + }, [open]); //UPDATE COLORS AND STYLE CLASSSES return ( - + diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index f27002847..9e83d11c6 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -379,12 +379,15 @@ export default function Page({ flow }: { flow: FlowType }) { }} edges={edges} onPaneClick={() => { + console.log("enableCopyPastePaneClick"); setDisableCopyPaste(false); }} onPaneMouseLeave={() => { + console.log("enableCopyPastePaneLeave"); setDisableCopyPaste(true); }} onPaneMouseEnter={() => { + console.log("enableCopyPastePaneEnter"); setDisableCopyPaste(false); }} onNodesChange={onNodesChangeMod} @@ -407,8 +410,6 @@ export default function Page({ flow }: { flow: FlowType }) { onDrop={onDrop} onNodesDelete={onDelete} onSelectionChange={onSelectionChange} - nodesDraggable={!disableCopyPaste} - panOnDrag={!disableCopyPaste} zoomOnDoubleClick={!disableCopyPaste} className="theme-attribution" minZoom={0.01} From a63dcfa1092e7282192994a8a9584f3f068e4f8a Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 20 Jul 2023 17:00:37 -0300 Subject: [PATCH 3/6] Fixed undo of nodes when on input --- .../components/parameterComponent/index.tsx | 2 +- src/frontend/src/contexts/undoRedoContext.tsx | 27 +++++++++++-------- src/frontend/src/utils/utils.ts | 3 +++ 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index d9960ce7b..7fa485df0 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -152,7 +152,7 @@ export default function ParameterComponent({ return (
<>
{ - if ( - event.key === "z" && - (event.ctrlKey || event.metaKey) && - event.shiftKey - ) { - redo(); - } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) { - event.preventDefault(); // prevent the default action - redo(); - } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) { - undo(); + if (!isWrappedWithClass(event, "noundo")) { + if ( + event.key === "z" && + (event.ctrlKey || event.metaKey) && + event.shiftKey + ) { + event.preventDefault(); + redo(); + } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) { + event.preventDefault(); // prevent the default action + redo(); + } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) { + event.preventDefault(); + undo(); + } } }; diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index f16ef4650..4f7bfd8ba 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -85,6 +85,9 @@ export function checkUpperWords(str: string) { return words.join(" "); } +export const isWrappedWithClass = (event: any, className: string | undefined) => + event.target.closest(`.${className}`); + export function groupByFamily(data, baseClasses, left, type) { let parentOutput: string; let arrOfParent: string[] = []; From 4c834ab239ae525cfcc31dae277f83e72b243425 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 20 Jul 2023 17:01:34 -0300 Subject: [PATCH 4/6] Fixed undoing nodes on modal --- src/frontend/src/components/ui/dialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx index 54f261183..b7a909740 100644 --- a/src/frontend/src/components/ui/dialog.tsx +++ b/src/frontend/src/components/ui/dialog.tsx @@ -44,7 +44,7 @@ const DialogContent = React.forwardRef< Date: Thu, 20 Jul 2023 17:07:54 -0300 Subject: [PATCH 5/6] Disable copy paste removed in favor of class wrapping --- .../components/parameterComponent/index.tsx | 2 +- src/frontend/src/components/ui/dialog.tsx | 2 +- src/frontend/src/contexts/tabsContext.tsx | 6 -- .../components/PageComponent/index.tsx | 73 ++++++++----------- src/frontend/src/types/tabs/index.ts | 3 - 5 files changed, 31 insertions(+), 55 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 7fa485df0..9a3afec58 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -152,7 +152,7 @@ export default function ParameterComponent({ return (
<>
{}, hardReset: () => {}, saveFlow: async (flow: FlowType) => {}, - disableCopyPaste: false, - setDisableCopyPaste: (state: boolean) => {}, lastCopiedSelection: null, setLastCopiedSelection: (selection: any) => {}, tabsState: {}, @@ -585,16 +583,12 @@ export function TabsProvider({ children }: { children: ReactNode }) { } } - const [disableCopyPaste, setDisableCopyPaste] = useState(false); - return ( { - if ( - (event.ctrlKey || event.metaKey) && - event.key === "c" && - lastSelection && - !disableCopyPaste - ) { - event.preventDefault(); - setLastCopiedSelection(_.cloneDeep(lastSelection)); - } - if ( - (event.ctrlKey || event.metaKey) && - event.key === "v" && - lastCopiedSelection && - !disableCopyPaste - ) { - event.preventDefault(); - let bounds = reactFlowWrapper.current.getBoundingClientRect(); - paste(lastCopiedSelection, { - x: position.x - bounds.left, - y: position.y - bounds.top, - }); - } - if ( - (event.ctrlKey || event.metaKey) && - event.key === "g" && - lastSelection - ) { - event.preventDefault(); + if (!isWrappedWithClass(event, "nocopy")) { + if ( + (event.ctrlKey || event.metaKey) && + event.key === "c" && + lastSelection + ) { + event.preventDefault(); + setLastCopiedSelection(_.cloneDeep(lastSelection)); + } + if ( + (event.ctrlKey || event.metaKey) && + event.key === "v" && + lastCopiedSelection + ) { + event.preventDefault(); + let bounds = reactFlowWrapper.current.getBoundingClientRect(); + paste(lastCopiedSelection, { + x: position.x - bounds.left, + y: position.y - bounds.top, + }); + } + if ( + (event.ctrlKey || event.metaKey) && + event.key === "g" && + lastSelection + ) { + event.preventDefault(); + } } }; const handleMouseMove = (event) => { @@ -355,8 +355,6 @@ export default function Page({ flow }: { flow: FlowType }) { setLastSelection(flow); }, []); - const { setDisableCopyPaste } = useContext(TabsContext); - return (
@@ -378,18 +376,6 @@ export default function Page({ flow }: { flow: FlowType }) { }); }} edges={edges} - onPaneClick={() => { - console.log("enableCopyPastePaneClick"); - setDisableCopyPaste(false); - }} - onPaneMouseLeave={() => { - console.log("enableCopyPastePaneLeave"); - setDisableCopyPaste(true); - }} - onPaneMouseEnter={() => { - console.log("enableCopyPastePaneEnter"); - setDisableCopyPaste(false); - }} onNodesChange={onNodesChangeMod} onEdgesChange={onEdgesChangeMod} onConnect={onConnect} @@ -410,7 +396,6 @@ export default function Page({ flow }: { flow: FlowType }) { onDrop={onDrop} onNodesDelete={onDelete} onSelectionChange={onSelectionChange} - zoomOnDoubleClick={!disableCopyPaste} className="theme-attribution" minZoom={0.01} maxZoom={8} diff --git a/src/frontend/src/types/tabs/index.ts b/src/frontend/src/types/tabs/index.ts index 82e75e4e4..1a873f651 100644 --- a/src/frontend/src/types/tabs/index.ts +++ b/src/frontend/src/types/tabs/index.ts @@ -20,9 +20,6 @@ export type TabsContextType = { uploadFlows: () => void; uploadFlow: (newFlow?: boolean, file?: File) => void; hardReset: () => void; - //disable CopyPaste - disableCopyPaste: boolean; - setDisableCopyPaste: (value: boolean) => void; getNodeId: (nodeType: string) => string; tabsState: TabsState; setTabsState: Dispatch>; From ab185f57bd2f0d8ab3ee1a8161b921b7ac55d161 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 20 Jul 2023 17:17:48 -0300 Subject: [PATCH 6/6] Fixed copy paste on all components --- .../components/parameterComponent/index.tsx | 5 +---- .../EditFlowSettingsComponent/index.tsx | 2 +- .../src/components/floatComponent/index.tsx | 17 ++++------------ .../src/components/inputComponent/index.tsx | 14 +++---------- .../components/inputListComponent/index.tsx | 5 +++-- .../src/components/intComponent/index.tsx | 16 ++++----------- .../components/textAreaComponent/index.tsx | 13 ++---------- src/frontend/src/components/ui/input.tsx | 2 +- .../src/components/ui/rename-label.tsx | 2 +- src/frontend/src/modals/baseModal/index.tsx | 20 ++----------------- .../extraSidebarComponent/index.tsx | 2 +- src/frontend/src/types/components/index.ts | 2 -- 12 files changed, 23 insertions(+), 77 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 9a3afec58..cfa9b8b92 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -152,7 +152,7 @@ export default function ParameterComponent({ return (
<>
@@ -309,7 +307,6 @@ export default function ParameterComponent({
diff --git a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx index 349b151b5..390c3572e 100644 --- a/src/frontend/src/components/EditFlowSettingsComponent/index.tsx +++ b/src/frontend/src/components/EditFlowSettingsComponent/index.tsx @@ -51,7 +51,7 @@ export const EditFlowSettings: React.FC = ({ )}
{ - if (disableCopyPaste) setDisableCopyPaste(true); - }} - onBlur={() => { - if (disableCopyPaste) setDisableCopyPaste(false); - }} type="number" step={step} min={min} @@ -45,9 +35,10 @@ export default function FloatComponent({ max={max} value={value ?? ""} className={ - editNode + "nopan nodrag noundo nocopy " + + (editNode ? "input-edit-node" - : "input-primary" + (disabled ? " input-disable " : "") + : "input-primary" + (disabled ? " input-disable " : "")) } placeholder={ editNode ? "Number 0 to 1" : "Type a number from zero to one" diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index 7b33f18df..682d5716c 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -1,18 +1,15 @@ -import { useContext, useEffect, useState } from "react"; -import { TabsContext } from "../../contexts/tabsContext"; +import { useEffect, useState } from "react"; import { InputComponentType } from "../../types/components"; import { classNames } from "../../utils/utils"; export default function InputComponent({ value, onChange, - disableCopyPaste = false, disabled, password, editNode = false, }: InputComponentType) { const [pwdVisible, setPwdVisible] = useState(false); - const { setDisableCopyPaste } = useContext(TabsContext); // Clear component state useEffect(() => { @@ -25,18 +22,13 @@ export default function InputComponent({
{ - if (disableCopyPaste) setDisableCopyPaste(true); - }} - onBlur={() => { - if (disableCopyPaste) setDisableCopyPaste(false); - }} className={classNames( disabled ? " input-disable " : "", password && !pwdVisible && value !== "" ? " text-clip password " : "", editNode ? " input-edit-node " : " input-primary ", password && editNode ? "pr-8" : "", - password && !editNode ? "pr-10" : "" + password && !editNode ? "pr-10" : "", + "nopan nodrag noundo nocopy" )} placeholder={password && editNode ? "Key" : "Type something..."} onChange={(e) => { diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx index d924095dd..a54b4151f 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/src/frontend/src/components/inputListComponent/index.tsx @@ -40,9 +40,10 @@ export default function InputListComponent({ type="text" value={i} className={ - editNode + "nopan nodrag noundo nocopy " + + (editNode ? "input-edit-node " - : "input-primary " + (disabled ? "input-disable" : "") + : "input-primary " + (disabled ? "input-disable" : "")) } placeholder="Type something..." onChange={(e) => { diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx index c846fb772..24d28e4f5 100644 --- a/src/frontend/src/components/intComponent/index.tsx +++ b/src/frontend/src/components/intComponent/index.tsx @@ -1,15 +1,12 @@ -import { useContext, useEffect } from "react"; -import { TabsContext } from "../../contexts/tabsContext"; +import { useEffect } from "react"; import { FloatComponentType } from "../../types/components"; export default function IntComponent({ value, onChange, - disableCopyPaste = false, disabled, editNode = false, }: FloatComponentType) { - const { setDisableCopyPaste } = useContext(TabsContext); const min = 0; // Clear component state @@ -27,12 +24,6 @@ export default function IntComponent({ } > { - if (disableCopyPaste) setDisableCopyPaste(true); - }} - onBlur={() => { - if (disableCopyPaste) setDisableCopyPaste(false); - }} onKeyDown={(event) => { if ( event.key !== "Backspace" && @@ -61,9 +52,10 @@ export default function IntComponent({ }} value={value ?? ""} className={ - editNode + "nopan nodrag noundo nocopy " + + (editNode ? " input-edit-node " - : " input-primary " + (disabled ? " input-disable" : "") + : " input-primary " + (disabled ? " input-disable" : "")) } placeholder={editNode ? "Integer number" : "Type an integer number"} onChange={(e) => { diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx index 0602fc7b6..2bead9a2d 100644 --- a/src/frontend/src/components/textAreaComponent/index.tsx +++ b/src/frontend/src/components/textAreaComponent/index.tsx @@ -1,6 +1,5 @@ -import { useContext, useEffect } from "react"; +import { useEffect } from "react"; import { TypeModal } from "../../constants/enums"; -import { TabsContext } from "../../contexts/tabsContext"; import GenericModal from "../../modals/genericModal"; import { TextAreaComponentType } from "../../types/components"; import IconComponent from "../genericIconComponent"; @@ -11,8 +10,6 @@ export default function TextAreaComponent({ disabled, editNode = false, }: TextAreaComponentType) { - const { setDisableCopyPaste } = useContext(TabsContext); - // Clear text area useEffect(() => { if (disabled) { @@ -25,17 +22,11 @@ export default function TextAreaComponent({
{ - setDisableCopyPaste(true); - }} - onBlur={() => { - setDisableCopyPaste(false); - }} className={ (editNode ? " input-edit-node " : " input-primary " + (disabled ? " input-disable" : "")) + - " w-full" + " nopan nodrag noundo nocopy w-full" } placeholder={"Type something..."} onChange={(e) => { diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx index a59b419f3..0942a3930 100644 --- a/src/frontend/src/components/ui/input.tsx +++ b/src/frontend/src/components/ui/input.tsx @@ -10,7 +10,7 @@ const Input = React.forwardRef( { diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index bdecd172a..e679c2d89 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useContext, useEffect, useState } from "react"; +import { ReactNode } from "react"; import React from "react"; import { @@ -9,7 +9,6 @@ import { DialogTitle, DialogTrigger, } from "../../components/ui/dialog"; -import { TabsContext } from "../../contexts/tabsContext"; type ContentProps = { children: ReactNode }; type HeaderProps = { children: ReactNode; description: string }; @@ -97,24 +96,9 @@ function BaseModal({ break; } - const { disableCopyPaste, setDisableCopyPaste } = useContext(TabsContext); - const [keepDisabling, setKeepDisabling] = useState(false); - - useEffect(() => { - if (keepDisabling) { - setDisableCopyPaste(true); - } - }, [disableCopyPaste]); - - useEffect(() => { - if (!open) { - setKeepDisabling(false); - } - }, [open]); - //UPDATE COLORS AND STYLE CLASSSES return ( - + diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index befaf798d..45aa67526 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -114,7 +114,7 @@ export default function ExtraSidebar() { name="search" id="search" placeholder="Search" - className="input-search" + className="nopan nodrag noundo nocopy input-search" onChange={(e) => { handleSearchInput(e.target.value); // Set search input state diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 2910a6e97..6491355cc 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -7,7 +7,6 @@ export type InputComponentType = { disabled?: boolean; onChange: (value: string) => void; password: boolean; - disableCopyPaste?: boolean; editNode?: boolean; onChangePass?: (value: boolean | boolean) => void; showPass?: boolean; @@ -94,7 +93,6 @@ export type DisclosureComponentType = { export type FloatComponentType = { value: string; disabled?: boolean; - disableCopyPaste?: boolean; onChange: (value: string) => void; editNode?: boolean; };