refactor(inactivemode): no pointer events for nodes and edges closes #218

src/components/Edges/wrapEdge.tsx

@@ -37,6 +37,9 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
       ...rest
     }: EdgeWrapperProps) => {
       const edgeClasses = cx('react-flow__edge', { selected, animated });
+      const edgeGroupStyle: CSSProperties = {
+        pointerEvents: isInteractive ? 'all' : 'none',
+      };
       const onEdgeClick = (): void => {
         if (!isInteractive) {
           return;
@@ -47,7 +50,7 @@ export default (EdgeComponent: ComponentType<EdgeCompProps>) => {
       };
 
       return (
-        <g className={edgeClasses} onClick={onEdgeClick}>
+        <g className={edgeClasses} onClick={onEdgeClick} style={edgeGroupStyle}>
           <EdgeComponent
             id={id}
             source={source}

src/components/Nodes/wrapNode.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, memo, ComponentType } from 'react';
+import React, { useEffect, useRef, useState, memo, ComponentType, CSSProperties } from 'react';
 import { DraggableCore } from 'react-draggable';
 import cx from 'classnames';
 import { ResizeObserver } from 'resize-observer';
@@ -101,9 +101,10 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
       const [isDragging, setDragging] = useState(false);
       const position = { x: xPos, y: yPos };
       const nodeClasses = cx('react-flow__node', { selected });
-      const nodeStyle = {
+      const nodeStyle: CSSProperties = {
         zIndex: selected ? 10 : 3,
         transform: `translate(${xPos}px,${yPos}px)`,
+        pointerEvents: isInteractive ? 'all' : 'none',
       };
 
       const updateNode = (): void => {

src/style.css

@@ -100,20 +100,6 @@
   transform-origin: 0 0;
 }
 
-.is-interactive {
-  .react-flow__node {
-    cursor: grab;
-
-    &:hover > * {
-      box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
-    }
-  }
-
-  .react-flow__handle {
-    cursor: crosshair;
-  }
-}
-
 .react-flow__node {
   position: absolute;
   color: #222;
@@ -123,10 +109,20 @@
   user-select: none;
   pointer-events: all;
   transform-origin: 0 0;
+  cursor: grab;
 
-  &.selected > * {
+  &.selected > *,
+  &.selected:hover > * {
     box-shadow: 0 0 0 2px #555;
   }
+
+  &:hover > * {
+    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
+  }
+
+  .react-flow__handle {
+    cursor: crosshair;
+  }
 }
 
 .react-flow__handle {