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 => {