From 34473166cb5ca874ae7c6c17f8bdacdb4e1dfa14 Mon Sep 17 00:00:00 2001
From: Nate Amack <nate@amack.org>
Date: Tue, 18 Aug 2020 10:59:22 -0600
Subject: [PATCH 1/2] feat(onElementClick): always allow onElementClick to run

---
 cypress/integration/flow/interaction.spec.js | 4 ++--
 src/components/Edges/wrapEdge.tsx            | 8 +++-----
 src/components/Nodes/wrapNode.tsx            | 8 ++++----
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/cypress/integration/flow/interaction.spec.js b/cypress/integration/flow/interaction.spec.js
index 055a4214..7cd49edd 100644
--- a/cypress/integration/flow/interaction.spec.js
+++ b/cypress/integration/flow/interaction.spec.js
@@ -12,12 +12,12 @@ 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('none');
+    expect(pointerEvents).to.equal('all');
   });
 
   it('tries to select an edge by click', () => {
     const pointerEvents = Cypress.$('.react-flow__edge:first').css('pointer-events');
-    expect(pointerEvents).to.equal('none');
+    expect(pointerEvents).to.equal('all');
   });
 
   it('tries to do a selection', () => {
diff --git a/src/components/Edges/wrapEdge.tsx b/src/components/Edges/wrapEdge.tsx
index 21b1d471..23851899 100644
--- a/src/components/Edges/wrapEdge.tsx
+++ b/src/components/Edges/wrapEdge.tsx
@@ -53,15 +53,13 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
 
     const edgeClasses = cc(['react-flow__edge', `react-flow__edge-${type}`, className, { selected, animated }]);
     const edgeGroupStyle: CSSProperties = {
-      pointerEvents: elementsSelectable ? 'all' : 'none',
+      pointerEvents: elementsSelectable || onClick ? 'all' : 'none',
     };
     const onEdgeClick = (event: React.MouseEvent<SVGGElement, MouseEvent>): void => {
-      if (!elementsSelectable) {
-        return;
+      if (elementsSelectable) {
+        setSelectedElements({ id, source, target });
       }
 
-      setSelectedElements({ id, source, target });
-
       if (onClick) {
         const edgeElement: Edge = { id, source, target, type };
 
diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 5f816bef..a286bd33 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -241,10 +241,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       (event: MouseEvent) => {
         if (!isDraggable && isSelectable) {
           setSelectedElements({ id: node.id, type: node.type } as Node);
+        }
 
-          if (onClick) {
-            onClick(event, node);
-          }
+        if (onClick) {
+          onClick(event, node);
         }
       },
       [isSelectable, isDraggable, node]
@@ -279,7 +279,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     const nodeStyle: CSSProperties = {
       zIndex: selected ? 10 : 3,
       transform: `translate(${xPos}px,${yPos}px)`,
-      pointerEvents: isSelectable || isDraggable ? 'all' : 'none',
+      pointerEvents: isSelectable || isDraggable || onClick ? 'all' : 'none',
       ...style,
     };
 

From a803821a3ef4bcf3da1b35f1c1f48570b59d94bc Mon Sep 17 00:00:00 2001
From: Nate Amack <nate@amack.org>
Date: Tue, 18 Aug 2020 11:10:11 -0600
Subject: [PATCH 2/2] example(interactions): toggle on element click

---
 cypress/integration/flow/interaction.spec.js | 16 +++++++++++++++-
 example/src/Interaction/index.js             | 15 ++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/flow/interaction.spec.js b/cypress/integration/flow/interaction.spec.js
index 7cd49edd..08236192 100644
--- a/cypress/integration/flow/interaction.spec.js
+++ b/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');
   });
diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js
index 8d8da70b..81129be6 100644
--- a/example/src/Interaction/index.js
+++ b/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>
   );