example(interactions): toggle on element click

cypress/integration/flow/interaction.spec.js

@@ -12,10 +12,24 @@ describe('Interaction Flow Rendering', () => {
 
   it('tries to select a node by click', () => {
     const pointerEvents = Cypress.$('.react-flow__node:first').css('pointer-events');
-    expect(pointerEvents).to.equal('all');
+    expect(pointerEvents).to.equal('none');
   });
 
   it('tries to select an edge by click', () => {
+    const pointerEvents = Cypress.$('.react-flow__edge:first').css('pointer-events');
+    expect(pointerEvents).to.equal('none');
+  });
+
+  it('toggles on capture element click', () => {
+    cy.get('.react-flow__captureelementclick').click();
+  });
+
+  it('allows node clicks when enabled', () => {
+    const pointerEvents = Cypress.$('.react-flow__node:first').css('pointer-events');
+    expect(pointerEvents).to.equal('all');
+  });
+
+  it('allows edge clicks when enabled', () => {
     const pointerEvents = Cypress.$('.react-flow__edge:first').css('pointer-events');
     expect(pointerEvents).to.equal('all');
   });

example/src/Interaction/index.js

@@ -28,6 +28,7 @@ const InteractionFlow = () => {
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
   const [paneMoveable, setPaneMoveable] = useState(true);
   const [captureZoomClick, setCaptureZoomClick] = useState(false);
+  const [captureElementClick, setCaptureElementClick] = useState(false);
 
   return (
     <ReactFlow
@@ -38,7 +39,7 @@ const InteractionFlow = () => {
       zoomOnScroll={zoomOnScroll}
       zoomOnDoubleClick={zoomOnDoubleClick}
       onConnect={onConnect}
-      onElementClick={onElementClick}
+      onElementClick={captureElementClick ? onElementClick : undefined}
       onNodeDragStart={onNodeDragStart}
       onNodeDragStop={onNodeDragStop}
       paneMoveable={paneMoveable}
@@ -133,6 +134,18 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="captureelementclick">
+            capture element click
+            <input
+              id="captureelementclick"
+              type="checkbox"
+              checked={captureElementClick}
+              onChange={(event) => setCaptureElementClick(event.target.checked)}
+              className="react-flow__captureelementclick"
+            />
+          </label>
+        </div>
       </div>
     </ReactFlow>
   );