diff --git a/cypress/support/commands.js b/cypress/support/commands.js index e79261d9..62ae943f 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -24,10 +24,10 @@ // -- This is will overwrite an existing command -- // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) - Cypress.Commands.add('drag', (selector, { x, y }) => { - return cy.get(selector) - .trigger('mousedown', { which: 1 }) - .trigger('mousemove', { clientX: x, clientY: y }) + return cy + .get(selector) + .trigger('mousedown', { which: 1, force: true }) + .trigger('mousemove', { clientX: x, clientY: y, force: true }) .trigger('mouseup', { force: true }); }); diff --git a/example/src/Undirectional/index.tsx b/example/src/Undirectional/index.tsx index 5f955f08..28656ada 100644 --- a/example/src/Undirectional/index.tsx +++ b/example/src/Undirectional/index.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import React, { MouseEvent, useCallback } from 'react'; import ReactFlow, { useReactFlow, @@ -189,7 +189,7 @@ const UpdateNodeInternalsFlow = () => { setEdges((els) => updateEdge(oldEdge, newConnection, els)); const onPaneClick = useCallback( - (evt) => + (evt: MouseEvent) => setNodes((nds) => nds.concat({ id: getId(), @@ -198,7 +198,7 @@ const UpdateNodeInternalsFlow = () => { data: null, }) ), - [project] + [project, setNodes] ); return ( diff --git a/example/src/UseReactFlow/index.tsx b/example/src/UseReactFlow/index.tsx index d980d3a7..bab82e2c 100644 --- a/example/src/UseReactFlow/index.tsx +++ b/example/src/UseReactFlow/index.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, MouseEvent } from 'react'; import ReactFlow, { Node, @@ -36,7 +36,7 @@ const UseZoomPanHelperFlow = () => { const { project, setCenter, zoomIn, zoomOut, fitView, addNodes, setNodes: setNodesHook } = useReactFlow(); const onPaneClick = useCallback( - (evt) => { + (evt: MouseEvent) => { const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 }); setNodes((nds) => @@ -53,8 +53,8 @@ const UseZoomPanHelperFlow = () => { ); const onNodeClick = useCallback( - (_, element) => { - const { x, y } = element.position; + (_: MouseEvent, node: Node) => { + const { x, y } = node.position; setCenter(x, y, { zoom: 1, duration: 1200 }); }, [setCenter] @@ -72,9 +72,7 @@ const UseZoomPanHelperFlow = () => { addNodes(newNode); }, [addNodes]); - const onResetNodes = useCallback(() => { - setNodesHook(initialNodes); - }, [setNodesHook]); + const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]); return ( { const { project } = useReactFlow(); const onPaneClick = useCallback( - (evt) => + (evt: MouseEvent) => setNodes((nds) => nds.concat({ id: getId(), @@ -54,7 +54,7 @@ const UpdateNodeInternalsFlow = () => { sourcePosition: Position.Right, }) ), - [project] + [project, setNodes] ); const toggleHandleCount = useCallback(() => { @@ -63,7 +63,7 @@ const UpdateNodeInternalsFlow = () => { return { ...node, data: { ...node.data, handleCount: node.data?.handleCount === 1 ? 2 : 1 } }; }) ); - }, []); + }, [setNodes]); const toggleHandlePosition = useCallback(() => { setNodes((nds) => @@ -71,7 +71,7 @@ const UpdateNodeInternalsFlow = () => { return { ...node, data: { ...node.data, handlePosition: node.data?.handlePosition === 0 ? 1 : 0 } }; }) ); - }, []); + }, [setNodes]); const updateNode = useCallback(() => updateNodeInternals('1'), [updateNodeInternals]); diff --git a/package-lock.json b/package-lock.json index 44198b76..0983f729 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "@rollup/plugin-replace": "^4.0.0", "@types/d3": "^7.1.0", "@types/react": "^18.0.1", + "@types/react-dom": "^18.0.2", "@types/resize-observer-browser": "^0.1.7", "autoprefixer": "^10.4.2", "babel-preset-react-app": "^10.0.1", @@ -2593,6 +2594,15 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-dom": { + "version": "18.0.2", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.2.tgz", + "integrity": "sha512-UxeS+Wtj5bvLRREz9tIgsK4ntCuLDo0EcAcACgw3E+9wE8ePDr9uQpq53MfcyxyIS55xJ+0B6mDS8c4qkkHLBg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resize-observer-browser": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz", @@ -12145,6 +12155,15 @@ "csstype": "^3.0.2" } }, + "@types/react-dom": { + "version": "18.0.2", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.2.tgz", + "integrity": "sha512-UxeS+Wtj5bvLRREz9tIgsK4ntCuLDo0EcAcACgw3E+9wE8ePDr9uQpq53MfcyxyIS55xJ+0B6mDS8c4qkkHLBg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/resize-observer-browser": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz", diff --git a/package.json b/package.json index 1b8911e2..5f0f169a 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "@rollup/plugin-replace": "^4.0.0", "@types/d3": "^7.1.0", "@types/react": "^18.0.1", + "@types/react-dom": "^18.0.2", "@types/resize-observer-browser": "^0.1.7", "autoprefixer": "^10.4.2", "babel-preset-react-app": "^10.0.1",