Merge branch 'modalRefactor' into python_custom_node_component

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -243,7 +243,6 @@ export default function ParameterComponent({
             ) : (
               <InputComponent
                 disabled={disabled}
-                disableCopyPaste={true}
                 password={data.node.template[name].password ?? false}
                 value={data.node.template[name].value ?? ""}
                 onChange={handleOnNewValue}
@@ -265,7 +264,6 @@ export default function ParameterComponent({
           <div className="mt-2 w-full">
             <FloatComponent
               disabled={disabled}
-              disableCopyPaste={true}
               value={data.node.template[name].value ?? ""}
               onChange={handleOnNewValue}
             />
@@ -311,7 +309,6 @@ export default function ParameterComponent({
           <div className="mt-2 w-full">
             <IntComponent
               disabled={disabled}
-              disableCopyPaste={true}
               value={data.node.template[name].value ?? ""}
               onChange={handleOnNewValue}
             />

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -51,7 +51,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           )}
         </div>
         <Input
-          className="mt-2 font-normal"
+          className="nopan nodrag noundo nocopy mt-2 font-normal"
           onChange={handleNameChange}
           type="text"
           name="name"

src/frontend/src/components/floatComponent/index.tsx

@@ -1,16 +1,12 @@
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
-import { TabsContext } from "../../contexts/tabsContext";
 import { FloatComponentType } from "../../types/components";
 
 export default function FloatComponent({
   value,
   onChange,
-  disableCopyPaste = false,
   disabled,
   editNode = false,
 }: FloatComponentType) {
-  const { setDisableCopyPaste } = useContext(TabsContext);
-
   const step = 0.1;
   const min = 0;
   const max = 1;
@@ -25,12 +21,6 @@ export default function FloatComponent({
   return (
     <div className={"w-full " + (disabled ? "float-component-pointer" : "")}>
       <input
-        onFocus={() => {
-          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"

src/frontend/src/components/inputComponent/index.tsx

@@ -1,18 +1,15 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
-import { TabsContext } from "../../contexts/tabsContext";
 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({
     <div className={disabled ? "input-component-div" : "relative"}>
       <input
         value={value}
-        onFocus={() => {
-          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) => {

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) => {

src/frontend/src/components/intComponent/index.tsx

@@ -1,15 +1,12 @@
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
-import { TabsContext } from "../../contexts/tabsContext";
 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({
       }
     >
       <input
-        onFocus={() => {
-          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) => {

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({
       <div className="flex w-full items-center">
         <input
           value={value}
-          onFocus={() => {
-            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) => {

src/frontend/src/components/ui/dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 flex w-full flex-col gap-3 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+        "noundo nocopy fixed z-50 flex w-full flex-col gap-3 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
         className
       )}
       {...props}

src/frontend/src/components/ui/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "nopan nodrag noundo nocopy flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

src/frontend/src/components/ui/rename-label.tsx

@@ -57,7 +57,7 @@ export default function RenameLabel(props) {
           ref={inputRef}
           onInput={resizeInput}
           className={cn(
-            "rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
+            "nopan nodrag noundo nocopy rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
             props.className
           )}
           onBlur={() => {

src/frontend/src/contexts/tabsContext.tsx

@@ -42,8 +42,6 @@ const TabsContextInitialValue: TabsContextType = {
   uploadFlow: () => {},
   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 (
     <TabsContext.Provider
       value={{
         saveFlow,
         lastCopiedSelection,
         setLastCopiedSelection,
-        disableCopyPaste,
-        setDisableCopyPaste,
         hardReset,
         tabId,
         setTabId,

src/frontend/src/contexts/undoRedoContext.tsx

@@ -7,6 +7,7 @@ import {
   useState,
 } from "react";
 import { Edge, Node, useReactFlow } from "reactflow";
+import { isWrappedWithClass } from "../utils/utils";
 import { TabsContext } from "./tabsContext";
 
 type undoRedoContextType = {
@@ -20,14 +21,6 @@ type UseUndoRedoOptions = {
   enableShortcuts: boolean;
 };
 
-type UseUndoRedo = (options?: UseUndoRedoOptions) => {
-  undo: () => void;
-  redo: () => void;
-  takeSnapshot: () => void;
-  canUndo: boolean;
-  canRedo: boolean;
-};
-
 type HistoryItem = {
   nodes: Node[];
   edges: Edge[];
@@ -156,17 +149,21 @@ export function UndoRedoProvider({ children }) {
     }
 
     const keyDownHandler = (event: KeyboardEvent) => {
-      if (
+      if (!isWrappedWithClass(event, "noundo")) {
-        event.key === "z" &&
+        if (
-        (event.ctrlKey || event.metaKey) &&
+          event.key === "z" &&
-        event.shiftKey
+          (event.ctrlKey || event.metaKey) &&
-      ) {
+          event.shiftKey
-        redo();
+        ) {
-      } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) {
+          event.preventDefault();
-        event.preventDefault(); // prevent the default action
+          redo();
-        redo();
+        } else if (event.key === "y" && (event.ctrlKey || event.metaKey)) {
-      } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
+          event.preventDefault(); // prevent the default action
-        undo();
+          redo();
+        } else if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
+          event.preventDefault();
+          undo();
+        }
       }
     };
 

src/frontend/src/index.css

@@ -241,8 +241,8 @@ The cursor: default; property value restores the browser's default cursor style
     @apply form-input block w-full truncate rounded-md border-border bg-background px-3 text-left shadow-sm placeholder:text-muted-foreground sm:text-sm;
   }
 
-  .input-edit-node {
+  .input-edit-node{
-    @apply input-primary border-border pb-0.5 pt-0.5;
+    @apply input-primary border-border pt-0.5 pb-0.5 text-left w-full
   }
   .input-search {
     @apply input-primary mx-2 pr-7;

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,25 +96,9 @@ function BaseModal({
       break;
   }
 
-  const { setDisableCopyPaste } = useContext(TabsContext);
-  const [openInner, setOpenInner] = useState(open ?? false);
-
-  useEffect(() => {
-    setOpenInner(open);
-  }, [open]);
-
-  useEffect(() => {
-    setOpen(openInner);
-    if (openInner) {
-      setDisableCopyPaste(true);
-    } else {
-      setDisableCopyPaste(false);
-    }
-  }, [openInner]);
-
   //UPDATE COLORS AND STYLE CLASSSES
   return (
-    <Dialog open={openInner} onOpenChange={setOpenInner}>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger className="w-full" hidden={triggerChild ? false : true}>
         {triggerChild}
       </DialogTrigger>

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -27,6 +27,7 @@ import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import { APIClassType } from "../../../../types/api";
 import { FlowType, NodeType } from "../../../../types/flow";
 import { isValidConnection } from "../../../../utils/reactflowUtils";
+import { isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
 import ExtraSidebar from "../extraSidebarComponent";
 
@@ -38,7 +39,6 @@ export default function Page({ flow }: { flow: FlowType }) {
   let {
     updateFlow,
     uploadFlow,
-    disableCopyPaste,
     addFlow,
     getNodeId,
     paste,
@@ -63,34 +63,34 @@ export default function Page({ flow }: { flow: FlowType }) {
     // this effect is used to attach the global event handlers
 
     const onKeyDown = (event: KeyboardEvent) => {
-      if (
+      if (!isWrappedWithClass(event, "nocopy")) {
-        (event.ctrlKey || event.metaKey) &&
+        if (
-        event.key === "c" &&
+          (event.ctrlKey || event.metaKey) &&
-        lastSelection &&
+          event.key === "c" &&
-        !disableCopyPaste
+          lastSelection
-      ) {
+        ) {
-        event.preventDefault();
+          event.preventDefault();
-        setLastCopiedSelection(_.cloneDeep(lastSelection));
+          setLastCopiedSelection(_.cloneDeep(lastSelection));
-      }
+        }
-      if (
+        if (
-        (event.ctrlKey || event.metaKey) &&
+          (event.ctrlKey || event.metaKey) &&
-        event.key === "v" &&
+          event.key === "v" &&
-        lastCopiedSelection &&
+          lastCopiedSelection
-        !disableCopyPaste
+        ) {
-      ) {
+          event.preventDefault();
-        event.preventDefault();
+          let bounds = reactFlowWrapper.current.getBoundingClientRect();
-        let bounds = reactFlowWrapper.current.getBoundingClientRect();
+          paste(lastCopiedSelection, {
-        paste(lastCopiedSelection, {
+            x: position.x - bounds.left,
-          x: position.x - bounds.left,
+            y: position.y - bounds.top,
-          y: position.y - bounds.top,
+          });
-        });
+        }
-      }
+        if (
-      if (
+          (event.ctrlKey || event.metaKey) &&
-        (event.ctrlKey || event.metaKey) &&
+          event.key === "g" &&
-        event.key === "g" &&
+          lastSelection
-        lastSelection
+        ) {
-      ) {
+          event.preventDefault();
-        event.preventDefault();
+        }
       }
     };
     const handleMouseMove = (event) => {
@@ -355,8 +355,6 @@ export default function Page({ flow }: { flow: FlowType }) {
     setLastSelection(flow);
   }, []);
 
-  const { setDisableCopyPaste } = useContext(TabsContext);
-
   return (
     <div className="flex h-full overflow-hidden">
       <ExtraSidebar />
@@ -378,15 +376,6 @@ export default function Page({ flow }: { flow: FlowType }) {
                       });
                   }}
                   edges={edges}
-                  onPaneClick={() => {
-                    setDisableCopyPaste(false);
-                  }}
-                  onPaneMouseLeave={() => {
-                    setDisableCopyPaste(true);
-                  }}
-                  onPaneMouseEnter={() => {
-                    setDisableCopyPaste(false);
-                  }}
                   onNodesChange={onNodesChangeMod}
                   onEdgesChange={onEdgesChangeMod}
                   onConnect={onConnect}
@@ -407,9 +396,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}
                   maxZoom={8}

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

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;
@@ -95,7 +94,6 @@ export type DisclosureComponentType = {
 export type FloatComponentType = {
   value: string;
   disabled?: boolean;
-  disableCopyPaste?: boolean;
   onChange: (value: string) => void;
   editNode?: boolean;
 };

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<SetStateAction<TabsState>>;

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[] = [];