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 uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const autoSaveCurrentFlow = useFlowsManagerStore(
(state) => state.autoSaveCurrentFlow
(state) => state.autoSaveCurrentFlow,
);
const types = useTypesStore((state) => state.types);
const templates = useTypesStore((state) => state.templates);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const reactFlowWrapper = useRef<HTMLDivElement>(null);
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 setReactFlowInstance = useFlowStore(
(state) => state.setReactFlowInstance
(state) => state.setReactFlowInstance,
);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
@ -91,10 +91,10 @@ export default function Page({
const paste = useFlowStore((state) => state.paste);
const resetFlow = useFlowStore((state) => state.resetFlow);
const lastCopiedSelection = useFlowStore(
(state) => state.lastCopiedSelection
(state) => state.lastCopiedSelection,
);
const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection
(state) => state.setLastCopiedSelection,
);
const onConnect = useFlowStore((state) => state.onConnect);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@ -117,7 +117,7 @@ export default function Page({
clonedSelection!,
clonedNodes,
clonedEdges,
getRandomName()
getRandomName(),
);
const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
const newEdges = reconnectEdges(newGroupNode, removedEdges);
@ -125,8 +125,8 @@ export default function Page({
...clonedNodes.filter(
(oldNodes) =>
!clonedSelection?.nodes.some(
(selectionNode) => selectionNode.id === oldNodes.id
)
(selectionNode) => selectionNode.id === oldNodes.id,
),
),
newGroupNode,
]);
@ -136,8 +136,8 @@ export default function Page({
!clonedSelection!.nodes.some(
(selectionNode) =>
selectionNode.id === oldEdge.target ||
selectionNode.id === oldEdge.source
)
selectionNode.id === oldEdge.source,
),
),
...newEdges,
]);
@ -180,7 +180,7 @@ export default function Page({
function handleUndo(e: KeyboardEvent) {
e.preventDefault();
e.stopImmediatePropagation();
(e as unknown as Event).stopImmediatePropagation();
if (!isWrappedWithClass(e, "noundo")) {
undo();
}
@ -188,7 +188,7 @@ export default function Page({
function handleRedo(e: KeyboardEvent) {
e.preventDefault();
e.stopImmediatePropagation();
(e as unknown as Event).stopImmediatePropagation();
if (!isWrappedWithClass(e, "noundo")) {
redo();
}
@ -196,7 +196,7 @@ export default function Page({
function handleGroup(e: KeyboardEvent) {
e.preventDefault();
e.stopImmediatePropagation();
(e as unknown as Event).stopImmediatePropagation();
if (selectionMenuVisible) {
handleGroupNode();
}
@ -205,7 +205,7 @@ export default function Page({
function handleDuplicate(e: KeyboardEvent) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
(e as unknown as Event).stopImmediatePropagation();
const selectedNode = nodes.filter((obj) => obj.selected);
if (selectedNode.length > 0) {
paste(
@ -213,14 +213,14 @@ export default function Page({
{
x: position.current.x,
y: position.current.y,
}
},
);
}
}
function handleCopy(e: KeyboardEvent) {
e.preventDefault();
e.stopImmediatePropagation();
(e as unknown as Event).stopImmediatePropagation();
if (
!isWrappedWithClass(e, "nocopy") &&
window.getSelection()?.toString().length === 0 &&
@ -232,7 +232,7 @@ export default function Page({
function handleCut(e: KeyboardEvent) {
e.preventDefault();
e.stopImmediatePropagation();
(e as unknown as Event).stopImmediatePropagation();
if (
!isWrappedWithClass(e, "nocopy") &&
window.getSelection()?.toString().length === 0 &&
@ -244,7 +244,7 @@ export default function Page({
function handlePaste(e: KeyboardEvent) {
e.preventDefault();
e.stopImmediatePropagation();
(e as unknown as Event).stopImmediatePropagation();
if (
!isWrappedWithClass(e, "nocopy") &&
window.getSelection()?.toString().length === 0 &&
@ -260,7 +260,7 @@ export default function Page({
function handleDelete(e: KeyboardEvent) {
e.preventDefault();
e.stopImmediatePropagation();
(e as unknown as Event).stopImmediatePropagation();
if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
takeSnapshot();
deleteNode(lastSelection.nodes.map((node) => node.id));
@ -297,7 +297,7 @@ export default function Page({
useEffect(() => {
setSHowCanvas(
Object.keys(templates).length > 0 && Object.keys(types).length > 0
Object.keys(templates).length > 0 && Object.keys(types).length > 0,
);
}, [templates, types]);
@ -306,7 +306,7 @@ export default function Page({
takeSnapshot();
onConnect(params);
},
[takeSnapshot, onConnect]
[takeSnapshot, onConnect],
);
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
const data: { type: string; node?: APIClassType } = JSON.parse(
event.dataTransfer.getData("nodedata")
event.dataTransfer.getData("nodedata"),
);
const newId = getNodeId(data.type);
@ -363,7 +363,7 @@ export default function Page({
};
paste(
{ nodes: [newNode], edges: [] },
{ x: event.clientX, y: event.clientY }
{ x: event.clientX, y: event.clientY },
);
} else if (event.dataTransfer.types.some((types) => types === "Files")) {
takeSnapshot();
@ -392,7 +392,7 @@ export default function Page({
}
},
// Specify dependencies for useCallback
[getNodeId, setNodes, takeSnapshot, paste]
[getNodeId, setNodes, takeSnapshot, paste],
);
const onEdgeUpdateStart = useCallback(() => {
@ -408,7 +408,7 @@ export default function Page({
setEdges((els) => updateEdge(oldEdge, newConnection, els));
}
},
[setEdges]
[setEdges],
);
const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@ -441,7 +441,7 @@ export default function Page({
(flow: OnSelectionChangeParams): void => {
setLastSelection(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 [showOverrideModal, setShowOverrideModal] = useState(false);
const [flowComponent, setFlowComponent] = useState<FlowType>(
createFlowComponent(cloneDeep(data), version)
createFlowComponent(cloneDeep(data), version),
);
const preventDefault = true;
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 === "int" ||
data.node.template[templateField].type === "dict" ||
data.node.template[templateField].type === "NestedDict")
data.node.template[templateField].type === "NestedDict"),
).length;
const hasStore = useStoreStore((state) => state.hasStore);
@ -221,7 +221,7 @@ export default function NodeToolbarComponent({
const updateNodeInternals = useUpdateNodeInternals();
const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection
(state) => state.setLastCopiedSelection,
);
const setSuccessData = useAlertStore((state) => state.setSuccessData);
@ -295,7 +295,7 @@ export default function NodeToolbarComponent({
nodes,
edges,
setNodes,
setEdges
setEdges,
);
break;
case "override":
@ -319,14 +319,14 @@ export default function NodeToolbarComponent({
y: 10,
paneX: nodes.find((node) => node.id === data.id)?.position.x,
paneY: nodes.find((node) => node.id === data.id)?.position.y,
}
},
);
break;
}
};
const isSaved = flows.some((flow) =>
Object.values(flow).includes(data.node?.display_name!)
Object.values(flow).includes(data.node?.display_name!),
);
function displayShortcut({
@ -344,7 +344,7 @@ export default function NodeToolbarComponent({
}
});
const filteredShortcut = fixedShortcut.filter(
(key) => !key.toLowerCase().includes("shift")
(key) => !key.toLowerCase().includes("shift"),
);
let shortcutWPlus: string[] = [];
if (!hasShift) shortcutWPlus = filteredShortcut.join("+").split(" ");
@ -368,7 +368,7 @@ export default function NodeToolbarComponent({
const setNode = useFlowStore((state) => state.setNode);
const handleOnNewValue = (
newValue: string | string[] | boolean | Object[]
newValue: string | string[] | boolean | Object[],
): void => {
if (data.node!.template[name].value !== newValue) {
takeSnapshot();
@ -414,6 +414,7 @@ export default function NodeToolbarComponent({
const [openModal, setOpenModal] = useState(false);
const hasCode = Object.keys(data.node!.template).includes("code");
const [deleteIsFocus, setDeleteIsFocus] = useState(false);
return (
<>
@ -423,8 +424,8 @@ export default function NodeToolbarComponent({
<ShadTooltip
content={displayShortcut(
shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "code"
)!
({ name }) => name.split(" ")[0].toLowerCase() === "code",
)!,
)}
side="top"
>
@ -443,8 +444,8 @@ export default function NodeToolbarComponent({
<ShadTooltip
content={displayShortcut(
shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "advanced"
)!
({ name }) => name.split(" ")[0].toLowerCase() === "advanced",
)!,
)}
side="top"
>
@ -483,14 +484,14 @@ export default function NodeToolbarComponent({
<ShadTooltip
content={displayShortcut(
shortcuts.find(
({ name }) => name.split(" ")[0].toLowerCase() === "freeze"
)!
({ name }) => name.split(" ")[0].toLowerCase() === "freeze",
)!,
)}
side="top"
>
<button
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) => {
event.preventDefault();
@ -511,7 +512,7 @@ export default function NodeToolbarComponent({
className={cn(
"h-4 w-4 transition-all",
// TODO UPDATE THIS COLOR TO BE A VARIABLE
frozen ? "animate-wiggle text-ice" : ""
frozen ? "animate-wiggle text-ice" : "",
)}
/>
</button>
@ -539,7 +540,7 @@ export default function NodeToolbarComponent({
<div
data-testid="more-options-modal"
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
@ -693,14 +694,21 @@ export default function NodeToolbarComponent({
dataTestId="download-button-modal"
/>
</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">
<IconComponent
name="Trash2"
className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "}
<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
name="Delete"
className="h-4 w-4 stroke-2 text-red-400"