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

Fixed not being able to copy anywhere

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-13 18:18:15 -03:00
commit cf0e3eb4cd
3 changed files with 60 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -13,7 +13,7 @@ export default function SingleAlert({
return ( return (
<Transition <Transition
className="relative" className="nocopy nowheel nopan nodelete nodrag noundo relative"
show={show} show={show}
appear={true} appear={true}
enter="transition-transform duration-500 ease-out" enter="transition-transform duration-500 ease-out"

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

@ -59,22 +59,21 @@ export default function Page({
flow: FlowType; flow: FlowType;
view?: boolean; view?: boolean;
}): JSX.Element { }): JSX.Element {
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 +90,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 +116,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 +124,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 +135,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,
]); ]);
@ -179,17 +178,17 @@ export default function Page({
}, []); }, []);
function handleUndo(e: KeyboardEvent) { function handleUndo(e: KeyboardEvent) {
e.preventDefault();
(e as unknown as Event).stopImmediatePropagation();
if (!isWrappedWithClass(e, "noundo")) { if (!isWrappedWithClass(e, "noundo")) {
e.preventDefault();
(e as unknown as Event).stopImmediatePropagation();
undo(); undo();
} }
} }
function handleRedo(e: KeyboardEvent) { function handleRedo(e: KeyboardEvent) {
e.preventDefault();
(e as unknown as Event).stopImmediatePropagation();
if (!isWrappedWithClass(e, "noundo")) { if (!isWrappedWithClass(e, "noundo")) {
e.preventDefault();
(e as unknown as Event).stopImmediatePropagation();
redo(); redo();
} }
} }
@ -213,55 +212,52 @@ 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(); if (!isWrappedWithClass(e, "nocopy")) {
(e as unknown as Event).stopImmediatePropagation(); e.preventDefault();
if ( (e as unknown as Event).stopImmediatePropagation();
!isWrappedWithClass(e, "nocopy") && if (window.getSelection()?.toString().length === 0 && lastSelection) {
window.getSelection()?.toString().length === 0 && setLastCopiedSelection(_.cloneDeep(lastSelection));
lastSelection }
) {
setLastCopiedSelection(_.cloneDeep(lastSelection));
} }
} }
function handleCut(e: KeyboardEvent) { function handleCut(e: KeyboardEvent) {
e.preventDefault(); if (!isWrappedWithClass(e, "nocopy")) {
(e as unknown as Event).stopImmediatePropagation(); e.preventDefault();
if ( (e as unknown as Event).stopImmediatePropagation();
!isWrappedWithClass(e, "nocopy") && if (window.getSelection()?.toString().length === 0 && lastSelection) {
window.getSelection()?.toString().length === 0 && setLastCopiedSelection(_.cloneDeep(lastSelection), true);
lastSelection }
) {
setLastCopiedSelection(_.cloneDeep(lastSelection), true);
} }
} }
function handlePaste(e: KeyboardEvent) { function handlePaste(e: KeyboardEvent) {
e.preventDefault(); if (!isWrappedWithClass(e, "nocopy")) {
(e as unknown as Event).stopImmediatePropagation(); e.preventDefault();
if ( (e as unknown as Event).stopImmediatePropagation();
!isWrappedWithClass(e, "nocopy") && if (
window.getSelection()?.toString().length === 0 && window.getSelection()?.toString().length === 0 &&
lastCopiedSelection lastCopiedSelection
) { ) {
takeSnapshot(); takeSnapshot();
paste(lastCopiedSelection, { paste(lastCopiedSelection, {
x: position.current.x, x: position.current.x,
y: position.current.y, y: position.current.y,
}); });
}
} }
} }
function handleDelete(e: KeyboardEvent) { function handleDelete(e: KeyboardEvent) {
e.preventDefault();
(e as unknown as Event).stopImmediatePropagation();
if (!isWrappedWithClass(e, "nodelete") && lastSelection) { if (!isWrappedWithClass(e, "nodelete") && lastSelection) {
e.preventDefault();
(e as unknown as Event).stopImmediatePropagation();
takeSnapshot(); takeSnapshot();
deleteNode(lastSelection.nodes.map((node) => node.id)); deleteNode(lastSelection.nodes.map((node) => node.id));
deleteEdge(lastSelection.edges.map((edge) => edge.id)); deleteEdge(lastSelection.edges.map((edge) => edge.id));
@ -277,27 +273,27 @@ export default function Page({
const cutAction = useShortcutsStore((state) => state.cut); const cutAction = useShortcutsStore((state) => state.cut);
const pasteAction = useShortcutsStore((state) => state.paste); const pasteAction = useShortcutsStore((state) => state.paste);
//@ts-ignore //@ts-ignore
useHotkeys(undoAction, handleUndo, { preventDefault }); useHotkeys(undoAction, handleUndo);
//@ts-ignore //@ts-ignore
useHotkeys(redoAction, handleRedo, { preventDefault }); useHotkeys(redoAction, handleRedo);
//@ts-ignore //@ts-ignore
useHotkeys(groupAction, handleGroup, { preventDefault }); useHotkeys(groupAction, handleGroup);
//@ts-ignore //@ts-ignore
useHotkeys(duplicate, handleDuplicate, { preventDefault }); useHotkeys(duplicate, handleDuplicate);
//@ts-ignore //@ts-ignore
useHotkeys(copyAction, handleCopy, { preventDefault }); useHotkeys(copyAction, handleCopy);
//@ts-ignore //@ts-ignore
useHotkeys(cutAction, handleCut, { preventDefault }); useHotkeys(cutAction, handleCut);
//@ts-ignore //@ts-ignore
useHotkeys(pasteAction, handlePaste, { preventDefault }); useHotkeys(pasteAction, handlePaste);
//@ts-ignore //@ts-ignore
useHotkeys(deleteAction, handleDelete, { preventDefault }); useHotkeys(deleteAction, handleDelete);
//@ts-ignore //@ts-ignore
useHotkeys("delete", handleDelete, { preventDefault }); useHotkeys("delete", handleDelete);
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 +302,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 +343,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 +359,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 +388,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 +404,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 +437,7 @@ export default function Page({
(flow: OnSelectionChangeParams): void => { (flow: OnSelectionChangeParams): void => {
setLastSelection(flow); setLastSelection(flow);
}, },
[] [],
); );
const onPaneClick = useCallback((flow) => { const onPaneClick = useCallback((flow) => {

2
src/frontend/src/style/applies.css
View file

@ -411,7 +411,7 @@
} }
.error-build-message { .error-build-message {
@apply mt-6 w-96 cursor-pointer rounded-md bg-error-background p-4 shadow-xl; @apply mt-6 w-96 rounded-md bg-error-background p-4 shadow-xl;
} }
.error-build-message-circle { .error-build-message-circle {
@apply alert-icon text-status-red; @apply alert-icon text-status-red;