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

Refactor: remove delete visual shortcut background color on hover

Browse source
This commit is contained in:
igorrCarvalho 2024-06-10 19:57:55 -03:00
commit fe49ba9e23
2 changed files with 53 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -62,19 +62,19 @@ export default function Page({
const preventDefault = true; const preventDefault = true;
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow); const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const autoSaveCurrentFlow = useFlowsManagerStore( const autoSaveCurrentFlow = useFlowsManagerStore(
(state) => state.autoSaveCurrentFlow (state) => state.autoSaveCurrentFlow,
); );
const types = useTypesStore((state) => state.types); const types = useTypesStore((state) => state.types);
const templates = useTypesStore((state) => state.templates); const templates = useTypesStore((state) => state.templates);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge); const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const reactFlowWrapper = useRef<HTMLDivElement>(null); const reactFlowWrapper = useRef<HTMLDivElement>(null);
const [showCanvas, setSHowCanvas] = useState( const [showCanvas, setSHowCanvas] = useState(
Object.keys(templates).length > 0 && Object.keys(types).length > 0 Object.keys(templates).length > 0 && Object.keys(types).length > 0,
); );
const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance); const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
const setReactFlowInstance = useFlowStore( const setReactFlowInstance = useFlowStore(
(state) => state.setReactFlowInstance (state) => state.setReactFlowInstance,
); );
const nodes = useFlowStore((state) => state.nodes); const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges); const edges = useFlowStore((state) => state.edges);
@ -91,10 +91,10 @@ export default function Page({
const paste = useFlowStore((state) => state.paste); const paste = useFlowStore((state) => state.paste);
const resetFlow = useFlowStore((state) => state.resetFlow); const resetFlow = useFlowStore((state) => state.resetFlow);
const lastCopiedSelection = useFlowStore( const lastCopiedSelection = useFlowStore(
(state) => state.lastCopiedSelection (state) => state.lastCopiedSelection,
); );
const setLastCopiedSelection = useFlowStore( const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection (state) => state.setLastCopiedSelection,
); );
const onConnect = useFlowStore((state) => state.onConnect); const onConnect = useFlowStore((state) => state.onConnect);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId); const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@ -117,7 +117,7 @@ export default function Page({
clonedSelection!, clonedSelection!,
clonedNodes, clonedNodes,
clonedEdges, clonedEdges,
getRandomName() getRandomName(),
); );
const newGroupNode = generateNodeFromFlow(newFlow, getNodeId); const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
const newEdges = reconnectEdges(newGroupNode, removedEdges); const newEdges = reconnectEdges(newGroupNode, removedEdges);
@ -125,8 +125,8 @@ export default function Page({
...clonedNodes.filter( ...clonedNodes.filter(
(oldNodes) => (oldNodes) =>
!clonedSelection?.nodes.some( !clonedSelection?.nodes.some(
(selectionNode) => selectionNode.id === oldNodes.id (selectionNode) => selectionNode.id === oldNodes.id,
) ),
), ),
newGroupNode, newGroupNode,
]); ]);
@ -136,8 +136,8 @@ export default function Page({
!clonedSelection!.nodes.some( !clonedSelection!.nodes.some(
(selectionNode) => (selectionNode) =>
selectionNode.id === oldEdge.target || selectionNode.id === oldEdge.target ||
selectionNode.id === oldEdge.source selectionNode.id === oldEdge.source,
) ),
), ),
...newEdges, ...newEdges,
]); ]);
@ -180,7 +180,7 @@ export default function Page({
function handleUndo(e: KeyboardEvent) { function handleUndo(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); (e as unknown as Event).stopImmediatePropagation();
if (!isWrappedWithClass(e, "noundo")) { if (!isWrappedWithClass(e, "noundo")) {
undo(); undo();
} }
@ -188,7 +188,7 @@ export default function Page({
function handleRedo(e: KeyboardEvent) { function handleRedo(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); (e as unknown as Event).stopImmediatePropagation();
if (!isWrappedWithClass(e, "noundo")) { if (!isWrappedWithClass(e, "noundo")) {
redo(); redo();
} }
@ -196,7 +196,7 @@ export default function Page({
function handleGroup(e: KeyboardEvent) { function handleGroup(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); (e as unknown as Event).stopImmediatePropagation();
if (selectionMenuVisible) { if (selectionMenuVisible) {
handleGroupNode(); handleGroupNode();
} }
@ -205,7 +205,7 @@ export default function Page({
function handleDuplicate(e: KeyboardEvent) { function handleDuplicate(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); (e as unknown as Event).stopImmediatePropagation();
const selectedNode = nodes.filter((obj) => obj.selected); const selectedNode = nodes.filter((obj) => obj.selected);
if (selectedNode.length > 0) { if (selectedNode.length > 0) {
paste( paste(
@ -213,14 +213,14 @@ export default function Page({
{ {
x: position.current.x, x: position.current.x,
y: position.current.y, y: position.current.y,
} },
); );
} }
} }
function handleCopy(e: KeyboardEvent) { function handleCopy(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); (e as unknown as Event).stopImmediatePropagation();
if ( if (
!isWrappedWithClass(e, "nocopy") && !isWrappedWithClass(e, "nocopy") &&
window.getSelection()?.toString().length === 0 && window.getSelection()?.toString().length === 0 &&
@ -232,7 +232,7 @@ export default function Page({
function handleCut(e: KeyboardEvent) { function handleCut(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); (e as unknown as Event).stopImmediatePropagation();
if ( if (
!isWrappedWithClass(e, "nocopy") && !isWrappedWithClass(e, "nocopy") &&
window.getSelection()?.toString().length === 0 && window.getSelection()?.toString().length === 0 &&
@ -244,7 +244,7 @@ export default function Page({
function handlePaste(e: KeyboardEvent) { function handlePaste(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); (e as unknown as Event).stopImmediatePropagation();
if ( if (
!isWrappedWithClass(e, "nocopy") && !isWrappedWithClass(e, "nocopy") &&
window.getSelection()?.toString().length === 0 && window.getSelection()?.toString().length === 0 &&
@ -260,7 +260,7 @@ export default function Page({
function handleDelete(e: KeyboardEvent) { function handleDelete(e: KeyboardEvent) {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); (e as unknown as Event).stopImmediatePropagation();
if (!isWrappedWithClass(e, "nodelete") && lastSelection) { if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
takeSnapshot(); takeSnapshot();
deleteNode(lastSelection.nodes.map((node) => node.id)); deleteNode(lastSelection.nodes.map((node) => node.id));
@ -297,7 +297,7 @@ export default function Page({
useEffect(() => { useEffect(() => {
setSHowCanvas( setSHowCanvas(
Object.keys(templates).length > 0 && Object.keys(types).length > 0 Object.keys(templates).length > 0 && Object.keys(types).length > 0,
); );
}, [templates, types]); }, [templates, types]);
@ -306,7 +306,7 @@ export default function Page({
takeSnapshot(); takeSnapshot();
onConnect(params); onConnect(params);
}, },
[takeSnapshot, onConnect] [takeSnapshot, onConnect],
); );
const onNodeDragStart: NodeDragHandler = useCallback(() => { const onNodeDragStart: NodeDragHandler = useCallback(() => {
@ -347,7 +347,7 @@ export default function Page({
// Extract the data from the drag event and parse it as a JSON object // Extract the data from the drag event and parse it as a JSON object
const data: { type: string; node?: APIClassType } = JSON.parse( const data: { type: string; node?: APIClassType } = JSON.parse(
event.dataTransfer.getData("nodedata") event.dataTransfer.getData("nodedata"),
); );
const newId = getNodeId(data.type); const newId = getNodeId(data.type);
@ -363,7 +363,7 @@ export default function Page({
}; };
paste( paste(
{ nodes: [newNode], edges: [] }, { nodes: [newNode], edges: [] },
{ x: event.clientX, y: event.clientY } { x: event.clientX, y: event.clientY },
); );
} else if (event.dataTransfer.types.some((types) => types === "Files")) { } else if (event.dataTransfer.types.some((types) => types === "Files")) {
takeSnapshot(); takeSnapshot();
@ -392,7 +392,7 @@ export default function Page({
} }
}, },
// Specify dependencies for useCallback // Specify dependencies for useCallback
[getNodeId, setNodes, takeSnapshot, paste] [getNodeId, setNodes, takeSnapshot, paste],
); );
const onEdgeUpdateStart = useCallback(() => { const onEdgeUpdateStart = useCallback(() => {
@ -408,7 +408,7 @@ export default function Page({
setEdges((els) => updateEdge(oldEdge, newConnection, els)); setEdges((els) => updateEdge(oldEdge, newConnection, els));
} }
}, },
[setEdges] [setEdges],
); );
const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => { const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@ -441,7 +441,7 @@ export default function Page({
(flow: OnSelectionChangeParams): void => { (flow: OnSelectionChangeParams): void => {
setLastSelection(flow); setLastSelection(flow);
}, },
[] [],
); );
const onPaneClick = useCallback((flow) => { const onPaneClick = useCallback((flow) => {

46
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -49,7 +49,7 @@ export default function NodeToolbarComponent({
const [showconfirmShare, setShowconfirmShare] = useState(false); const [showconfirmShare, setShowconfirmShare] = useState(false);
const [showOverrideModal, setShowOverrideModal] = useState(false); const [showOverrideModal, setShowOverrideModal] = useState(false);
const [flowComponent, setFlowComponent] = useState<FlowType>( const [flowComponent, setFlowComponent] = useState<FlowType>(
createFlowComponent(cloneDeep(data), version) createFlowComponent(cloneDeep(data), version),
); );
const preventDefault = true; const preventDefault = true;
const isMac = navigator.platform.toUpperCase().includes("MAC"); const isMac = navigator.platform.toUpperCase().includes("MAC");
@ -66,7 +66,7 @@ export default function NodeToolbarComponent({
data.node.template[templateField].type === "Any" || data.node.template[templateField].type === "Any" ||
data.node.template[templateField].type === "int" || data.node.template[templateField].type === "int" ||
data.node.template[templateField].type === "dict" || data.node.template[templateField].type === "dict" ||
data.node.template[templateField].type === "NestedDict") data.node.template[templateField].type === "NestedDict"),
).length; ).length;
const hasStore = useStoreStore((state) => state.hasStore); const hasStore = useStoreStore((state) => state.hasStore);
@ -221,7 +221,7 @@ export default function NodeToolbarComponent({
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const setLastCopiedSelection = useFlowStore( const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection (state) => state.setLastCopiedSelection,
); );
const setSuccessData = useAlertStore((state) => state.setSuccessData); const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -295,7 +295,7 @@ export default function NodeToolbarComponent({
nodes, nodes,
edges, edges,
setNodes, setNodes,
setEdges setEdges,
); );
break; break;
case "override": case "override":
@ -319,14 +319,14 @@ export default function NodeToolbarComponent({
y: 10, y: 10,
paneX: nodes.find((node) => node.id === data.id)?.position.x, paneX: nodes.find((node) => node.id === data.id)?.position.x,
paneY: nodes.find((node) => node.id === data.id)?.position.y, paneY: nodes.find((node) => node.id === data.id)?.position.y,
} },
); );
break; break;
} }
}; };
const isSaved = flows.some((flow) => const isSaved = flows.some((flow) =>
Object.values(flow).includes(data.node?.display_name!) Object.values(flow).includes(data.node?.display_name!),
); );
function displayShortcut({ function displayShortcut({
@ -344,7 +344,7 @@ export default function NodeToolbarComponent({
} }
}); });
const filteredShortcut = fixedShortcut.filter( const filteredShortcut = fixedShortcut.filter(
(key) => !key.toLowerCase().includes("shift") (key) => !key.toLowerCase().includes("shift"),
); );
let shortcutWPlus: string[] = []; let shortcutWPlus: string[] = [];
if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" "); if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
@ -368,7 +368,7 @@ export default function NodeToolbarComponent({
const setNode = useFlowStore((state) => state.setNode); const setNode = useFlowStore((state) => state.setNode);
const handleOnNewValue = ( const handleOnNewValue = (
newValue: string | string[] | boolean | Object[] newValue: string | string[] | boolean | Object[],
): void => { ): void => {
if (data.node!.template[name].value !== newValue) { if (data.node!.template[name].value !== newValue) {
takeSnapshot(); takeSnapshot();
@ -414,6 +414,7 @@ export default function NodeToolbarComponent({
const [openModal, setOpenModal] = useState(false); const [openModal, setOpenModal] = useState(false);
const hasCode = Object.keys(data.node!.template).includes("code"); const hasCode = Object.keys(data.node!.template).includes("code");
const [deleteIsFocus, setDeleteIsFocus] = useState(false);
return ( return (
<> <>
@ -423,8 +424,8 @@ export default function NodeToolbarComponent({
<ShadTooltip <ShadTooltip
content={displayShortcut( content={displayShortcut(
shortcuts.find( shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "code" ({ name }) => name.split(" ")[0].toLowerCase() === "code",
)! )!,
)} )}
side="top" side="top"
> >
@ -443,8 +444,8 @@ export default function NodeToolbarComponent({
<ShadTooltip <ShadTooltip
content={displayShortcut( content={displayShortcut(
shortcuts.find( shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "advanced" ({ name }) => name.split(" ")[0].toLowerCase() === "advanced",
)! )!,
)} )}
side="top" side="top"
> >
@ -483,14 +484,14 @@ export default function NodeToolbarComponent({
<ShadTooltip <ShadTooltip
content={displayShortcut( content={displayShortcut(
shortcuts.find( shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "freeze" ({ name }) => name.split(" ")[0].toLowerCase() === "freeze",
)! )!,
)} )}
side="top" side="top"
> >
<button <button
className={classNames( className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -511,7 +512,7 @@ export default function NodeToolbarComponent({
className={cn( className={cn(
"h-4 w-4 transition-all", "h-4 w-4 transition-all",
// TODO UPDATE THIS COLOR TO BE A VARIABLE // TODO UPDATE THIS COLOR TO BE A VARIABLE
frozen ? "animate-wiggle text-ice" : "" frozen ? "animate-wiggle text-ice" : "",
)} )}
/> />
</button> </button>
@ -539,7 +540,7 @@ export default function NodeToolbarComponent({
<div <div
data-testid="more-options-modal" data-testid="more-options-modal"
className={classNames( className={classNames(
"relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
)} )}
> >
<IconComponent <IconComponent
@ -693,14 +694,21 @@ export default function NodeToolbarComponent({
dataTestId="download-button-modal" dataTestId="download-button-modal"
/> />
</SelectItem> </SelectItem>
<SelectItem value={"delete"} className="focus:bg-red-400/[.20]"> <SelectItem
value={"delete"}
className="focus:bg-red-400/[.20]"
onFocus={() => setDeleteIsFocus(true)}
onBlur={() => setDeleteIsFocus(false)}
>
<div className="font-red flex text-status-red"> <div className="font-red flex text-status-red">
<IconComponent <IconComponent
name="Trash2" name="Trash2"
className="relative top-0.5 mr-2 h-4 w-4 " className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "} />{" "}
<span className="">Delete</span>{" "} <span className="">Delete</span>{" "}
<span className="justify absolute right-2 top-2 flex items-center rounded-sm bg-muted px-1 py-[0.2]"> <span
className={`justify absolute right-2 top-2 flex items-center rounded-sm px-1 py-[0.2] ${deleteIsFocus ? " " : "bg-muted"}`}
>
<IconComponent <IconComponent
name="Delete" name="Delete"
className="h-4 w-4 stroke-2 text-red-400" className="h-4 w-4 stroke-2 text-red-400"