Graph Prop: isInteractive (#56)

* feat(props): add isInteractive

* refactor(selection): dont allow if not interactive

* feat(renderer): add class if is interactive

* chore(inactive): add tests

* refactor(inactive): no connection line, no edge selection

closes #49

src/components/ConnectionLine/index.tsx

@@ -10,6 +10,7 @@ interface ConnectionLineProps {
   connectionLineType?: string | null;
   nodes: Node[];
   transform: Transform;
+  isInteractive: boolean;
   connectionLineStyle?: SVGAttributes<{}>;
   className?: string;
 }
@@ -23,6 +24,7 @@ export default ({
   nodes = [],
   className,
   transform,
+  isInteractive,
 }: ConnectionLineProps) => {
   const [sourceNode, setSourceNode] = useState<Node | null>(null);
   const hasHandleId = connectionSourceId.includes('__');
@@ -35,23 +37,17 @@ export default ({
     setSourceNode(nextSourceNode);
   }, []);
 
-  if (!sourceNode) {
+  if (!sourceNode || !isInteractive) {
     return null;
   }
 
   const edgeClasses: string = cx('react-flow__edge', 'connection', className);
 
   const sourceHandle = handleId
-    ? sourceNode.__rg.handleBounds.source.find(
-        (d: HandleElement) => d.id === handleId
-      )
+    ? sourceNode.__rg.handleBounds.source.find((d: HandleElement) => d.id === handleId)
     : sourceNode.__rg.handleBounds.source[0];
-  const sourceHandleX = sourceHandle
-    ? sourceHandle.x + sourceHandle.width / 2
-    : sourceNode.__rg.width / 2;
-  const sourceHandleY = sourceHandle
-    ? sourceHandle.y + sourceHandle.height / 2
-    : sourceNode.__rg.height;
+  const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
+  const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
   const sourceX = sourceNode.__rg.position.x + sourceHandleX;
   const sourceY = sourceNode.__rg.position.y + sourceHandleY;