From fe49ba9e236db987a14e256cd207eb09b519ebaa Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Mon, 10 Jun 2024 19:57:55 -0300 Subject: [PATCH] Refactor: remove delete visual shortcut background color on hover --- .../components/PageComponent/index.tsx | 52 +++++++++---------- .../components/nodeToolbarComponent/index.tsx | 46 +++++++++------- 2 files changed, 53 insertions(+), 45 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 8a8bd4d6c..43e6a320c 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -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(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) => { diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index c953548db..49636c4cb 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -49,7 +49,7 @@ export default function NodeToolbarComponent({ const [showconfirmShare, setShowconfirmShare] = useState(false); const [showOverrideModal, setShowOverrideModal] = useState(false); const [flowComponent, setFlowComponent] = useState( - 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({ name.split(" ")[0].toLowerCase() === "code" - )! + ({ name }) => name.split(" ")[0].toLowerCase() === "code", + )!, )} side="top" > @@ -443,8 +444,8 @@ export default function NodeToolbarComponent({ name.split(" ")[0].toLowerCase() === "advanced" - )! + ({ name }) => name.split(" ")[0].toLowerCase() === "advanced", + )!, )} side="top" > @@ -483,14 +484,14 @@ export default function NodeToolbarComponent({ name.split(" ")[0].toLowerCase() === "freeze" - )! + ({ name }) => name.split(" ")[0].toLowerCase() === "freeze", + )!, )} side="top" > @@ -539,7 +540,7 @@ export default function NodeToolbarComponent({
- + setDeleteIsFocus(true)} + onBlur={() => setDeleteIsFocus(false)} + >
{" "} Delete{" "} - +