jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge branch 'modalRefactor' into python_custom_node_component

Browse source
This commit is contained in:
Lucas Oliveira 2023-07-20 17:22:25 -03:00
commit 6242d80635
19 changed files with 73 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -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}
/>

2
src/frontend/src/components/EditFlowSettingsComponent/index.tsx
View file

@ -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"

17
src/frontend/src/components/floatComponent/index.tsx
View file

@ -1,16 +1,12 @@
import { useContext, useEffect } from "react";
import { TabsContext } from "../../contexts/tabsContext";
import { useEffect } from "react";
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"

14
src/frontend/src/components/inputComponent/index.tsx
View file

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

5
src/frontend/src/components/inputListComponent/index.tsx
View file

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

16
src/frontend/src/components/intComponent/index.tsx
View file

@ -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({
}
>
<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) => {

13
src/frontend/src/components/textAreaComponent/index.tsx
View file

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

2
src/frontend/src/components/ui/dialog.tsx
View file

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

2
src/frontend/src/components/ui/input.tsx
View file

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

2
src/frontend/src/components/ui/rename-label.tsx
View file

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

6
src/frontend/src/contexts/tabsContext.tsx
View file

@ -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,

35
src/frontend/src/contexts/undoRedoContext.tsx
View file

@ -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 (
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();
}
}
};

4
src/frontend/src/index.css
View file

@ -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 {
@apply input-primary border-border pb-0.5 pt-0.5;
.input-edit-node{
@apply input-primary border-border pt-0.5 pb-0.5 text-left w-full
}
.input-search {
@apply input-primary mx-2 pr-7;

21
src/frontend/src/modals/baseModal/index.tsx
View file

@ -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>

72
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -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 (
(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 (
<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}

2
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -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

2
src/frontend/src/types/components/index.ts
View file

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

3
src/frontend/src/types/tabs/index.ts
View file

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

3
src/frontend/src/utils/utils.ts
View file

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