diff --git a/examples/react/cypress/e2e/basic.cy.ts b/examples/react/cypress/e2e/basic.cy.ts
index 07c7e4c4..10c0ce62 100644
--- a/examples/react/cypress/e2e/basic.cy.ts
+++ b/examples/react/cypress/e2e/basic.cy.ts
@@ -92,7 +92,7 @@ describe('Basic Flow Rendering', { testIsolation: false }, () => {
it('drags a node', () => {
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
- cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then(($el: any) => {
+ cy.drag('.react-flow__node:first', { x: 10, y: 10 }).then(($el: any) => {
const styleAfterDrag = $el.css('transform');
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
});
@@ -103,7 +103,7 @@ describe('Basic Flow Rendering', { testIsolation: false }, () => {
cy.get('html').realPress('Backspace');
cy.get('.react-flow__node').should('have.length', 3);
- cy.get('.react-flow__edge').should('have.length', 1);
+ cy.get('.react-flow__edge').should('have.length', 0);
});
it('connects nodes', () => {
@@ -120,14 +120,14 @@ describe('Basic Flow Rendering', { testIsolation: false }, () => {
.trigger('mouseup', { force: true, button: 0 });
cy.get('.react-flow__edge').as('edge');
- cy.get('@edge').should('have.length', 3);
+ cy.get('@edge').should('have.length', 1);
});
it('removes an edge', () => {
cy.get('.react-flow__edge:first').click();
cy.get('html').realPress('Backspace');
- cy.get('.react-flow__edge').should('have.length', 1);
+ cy.get('.react-flow__edge').should('have.length', 0);
});
it('drags the pane', () => {
diff --git a/examples/react/src/examples/Basic/index.tsx b/examples/react/src/examples/Basic/index.tsx
index a41f50db..cafa9fa8 100644
--- a/examples/react/src/examples/Basic/index.tsx
+++ b/examples/react/src/examples/Basic/index.tsx
@@ -45,7 +45,6 @@ const initialNodes: Node[] = [
data: { label: 'Node 4' },
position: { x: 400, y: 200 },
className: 'light',
- connectable: false,
},
];
@@ -129,6 +128,7 @@ const BasicFlow = () => {
selectNodesOnDrag={false}
elevateEdgesOnSelect
elevateNodesOnSelect={false}
+ nodeDragThreshold={0}
>
diff --git a/examples/react/src/examples/DragHandle/index.tsx b/examples/react/src/examples/DragHandle/index.tsx
index a7a75fcf..2f7b9502 100644
--- a/examples/react/src/examples/DragHandle/index.tsx
+++ b/examples/react/src/examples/DragHandle/index.tsx
@@ -33,6 +33,7 @@ const DragHandleFlow = () => {
edges={edges}
nodeTypes={nodeTypes}
onNodeClick={onNodeClick}
+ nodeDragThreshold={0}
/>
);
};
diff --git a/examples/react/src/examples/Interaction/index.tsx b/examples/react/src/examples/Interaction/index.tsx
index 0dcee27b..ba3ecf03 100644
--- a/examples/react/src/examples/Interaction/index.tsx
+++ b/examples/react/src/examples/Interaction/index.tsx
@@ -36,7 +36,7 @@ const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('click', nod
const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edge);
const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
-const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
+const onPaneContextMenu = (event: ReactMouseEvent | MouseEvent) => console.log('onPaneContextMenu', event);
const onMoveEnd = (_: TouchEvent | MouseEvent | null, viewport: Viewport) => console.log('onMoveEnd', viewport);
const InteractionFlow = () => {
@@ -80,6 +80,7 @@ const InteractionFlow = () => {
onPaneClick={captureZoomClick ? onPaneClick : undefined}
onPaneScroll={captureZoomScroll ? onPaneScroll : undefined}
onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
+ nodeDragThreshold={0}
onMoveEnd={onMoveEnd}
>