From cf0e3eb4cd821af0feca17c4790d3fe728f0d100 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 13 Jun 2024 18:18:15 -0300 Subject: [PATCH] Fixed not being able to copy anywhere --- .../components/singleAlertComponent/index.tsx | 2 +- .../components/PageComponent/index.tsx | 120 +++++++++--------- src/frontend/src/style/applies.css | 2 +- 3 files changed, 60 insertions(+), 64 deletions(-) diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx index cf392872c..953305c84 100644 --- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx +++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx @@ -13,7 +13,7 @@ export default function SingleAlert({ return ( 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(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 +90,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 +116,7 @@ export default function Page({ clonedSelection!, clonedNodes, clonedEdges, - getRandomName() + getRandomName(), ); const newGroupNode = generateNodeFromFlow(newFlow, getNodeId); const newEdges = reconnectEdges(newGroupNode, removedEdges); @@ -125,8 +124,8 @@ export default function Page({ ...clonedNodes.filter( (oldNodes) => !clonedSelection?.nodes.some( - (selectionNode) => selectionNode.id === oldNodes.id - ) + (selectionNode) => selectionNode.id === oldNodes.id, + ), ), newGroupNode, ]); @@ -136,8 +135,8 @@ export default function Page({ !clonedSelection!.nodes.some( (selectionNode) => selectionNode.id === oldEdge.target || - selectionNode.id === oldEdge.source - ) + selectionNode.id === oldEdge.source, + ), ), ...newEdges, ]); @@ -179,17 +178,17 @@ export default function Page({ }, []); function handleUndo(e: KeyboardEvent) { - e.preventDefault(); - (e as unknown as Event).stopImmediatePropagation(); if (!isWrappedWithClass(e, "noundo")) { + e.preventDefault(); + (e as unknown as Event).stopImmediatePropagation(); undo(); } } function handleRedo(e: KeyboardEvent) { - e.preventDefault(); - (e as unknown as Event).stopImmediatePropagation(); if (!isWrappedWithClass(e, "noundo")) { + e.preventDefault(); + (e as unknown as Event).stopImmediatePropagation(); redo(); } } @@ -213,55 +212,52 @@ export default function Page({ { x: position.current.x, y: position.current.y, - } + }, ); } } function handleCopy(e: KeyboardEvent) { - e.preventDefault(); - (e as unknown as Event).stopImmediatePropagation(); - if ( - !isWrappedWithClass(e, "nocopy") && - window.getSelection()?.toString().length === 0 && - lastSelection - ) { - setLastCopiedSelection(_.cloneDeep(lastSelection)); + if (!isWrappedWithClass(e, "nocopy")) { + e.preventDefault(); + (e as unknown as Event).stopImmediatePropagation(); + if (window.getSelection()?.toString().length === 0 && lastSelection) { + setLastCopiedSelection(_.cloneDeep(lastSelection)); + } } } function handleCut(e: KeyboardEvent) { - e.preventDefault(); - (e as unknown as Event).stopImmediatePropagation(); - if ( - !isWrappedWithClass(e, "nocopy") && - window.getSelection()?.toString().length === 0 && - lastSelection - ) { - setLastCopiedSelection(_.cloneDeep(lastSelection), true); + if (!isWrappedWithClass(e, "nocopy")) { + e.preventDefault(); + (e as unknown as Event).stopImmediatePropagation(); + if (window.getSelection()?.toString().length === 0 && lastSelection) { + setLastCopiedSelection(_.cloneDeep(lastSelection), true); + } } } function handlePaste(e: KeyboardEvent) { - e.preventDefault(); - (e as unknown as Event).stopImmediatePropagation(); - if ( - !isWrappedWithClass(e, "nocopy") && - window.getSelection()?.toString().length === 0 && - lastCopiedSelection - ) { - takeSnapshot(); - paste(lastCopiedSelection, { - x: position.current.x, - y: position.current.y, - }); + if (!isWrappedWithClass(e, "nocopy")) { + e.preventDefault(); + (e as unknown as Event).stopImmediatePropagation(); + if ( + window.getSelection()?.toString().length === 0 && + lastCopiedSelection + ) { + takeSnapshot(); + paste(lastCopiedSelection, { + x: position.current.x, + y: position.current.y, + }); + } } } function handleDelete(e: KeyboardEvent) { - e.preventDefault(); - (e as unknown as Event).stopImmediatePropagation(); if (!isWrappedWithClass(e, "nodelete") && lastSelection) { + e.preventDefault(); + (e as unknown as Event).stopImmediatePropagation(); takeSnapshot(); deleteNode(lastSelection.nodes.map((node) => node.id)); deleteEdge(lastSelection.edges.map((edge) => edge.id)); @@ -277,27 +273,27 @@ export default function Page({ const cutAction = useShortcutsStore((state) => state.cut); const pasteAction = useShortcutsStore((state) => state.paste); //@ts-ignore - useHotkeys(undoAction, handleUndo, { preventDefault }); + useHotkeys(undoAction, handleUndo); //@ts-ignore - useHotkeys(redoAction, handleRedo, { preventDefault }); + useHotkeys(redoAction, handleRedo); //@ts-ignore - useHotkeys(groupAction, handleGroup, { preventDefault }); + useHotkeys(groupAction, handleGroup); //@ts-ignore - useHotkeys(duplicate, handleDuplicate, { preventDefault }); + useHotkeys(duplicate, handleDuplicate); //@ts-ignore - useHotkeys(copyAction, handleCopy, { preventDefault }); + useHotkeys(copyAction, handleCopy); //@ts-ignore - useHotkeys(cutAction, handleCut, { preventDefault }); + useHotkeys(cutAction, handleCut); //@ts-ignore - useHotkeys(pasteAction, handlePaste, { preventDefault }); + useHotkeys(pasteAction, handlePaste); //@ts-ignore - useHotkeys(deleteAction, handleDelete, { preventDefault }); + useHotkeys(deleteAction, handleDelete); //@ts-ignore - useHotkeys("delete", handleDelete, { preventDefault }); + useHotkeys("delete", handleDelete); 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 +302,7 @@ export default function Page({ takeSnapshot(); onConnect(params); }, - [takeSnapshot, onConnect] + [takeSnapshot, onConnect], ); 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 const data: { type: string; node?: APIClassType } = JSON.parse( - event.dataTransfer.getData("nodedata") + event.dataTransfer.getData("nodedata"), ); const newId = getNodeId(data.type); @@ -363,7 +359,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 +388,7 @@ export default function Page({ } }, // Specify dependencies for useCallback - [getNodeId, setNodes, takeSnapshot, paste] + [getNodeId, setNodes, takeSnapshot, paste], ); const onEdgeUpdateStart = useCallback(() => { @@ -408,7 +404,7 @@ export default function Page({ setEdges((els) => updateEdge(oldEdge, newConnection, els)); } }, - [setEdges] + [setEdges], ); const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => { @@ -441,7 +437,7 @@ export default function Page({ (flow: OnSelectionChangeParams): void => { setLastSelection(flow); }, - [] + [], ); const onPaneClick = useCallback((flow) => { diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index fe51b6af4..8a015dd3d 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -411,7 +411,7 @@ } .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 { @apply alert-icon text-status-red;