Merge pull request #213 from wbkd/develop

fix(connectionline): set stroke color

src/components/ConnectionLine/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, SVGAttributes } from 'react';
+import React, { useEffect, useState, CSSProperties } from 'react';
 import cx from 'classnames';
 
 import { ElementId, Node, Transform, HandleElement } from '../../types';
@@ -11,7 +11,7 @@ interface ConnectionLineProps {
   nodes: Node[];
   transform: Transform;
   isInteractive: boolean;
-  connectionLineStyle?: SVGAttributes<{}>;
+  connectionLineStyle?: CSSProperties;
   className?: string;
 }
 
@@ -41,7 +41,7 @@ export default ({
     return null;
   }
 
-  const edgeClasses: string = cx('react-flow__edge', 'react-flow__connection', className);
+  const connectionLineClasses: string = cx('react-flow__connection', className);
   const hasSource = sourceNode.__rg.handleBounds.source !== null;
 
   // output nodes don't have source handles so we need to use the target one
@@ -69,8 +69,8 @@ export default ({
   }
 
   return (
-    <g className={edgeClasses}>
-      <path d={dAttr} {...connectionLineStyle} />
+    <g className={connectionLineClasses}>
+      <path d={dAttr} className="react-flow__connection-path" style={connectionLineStyle} />
     </g>
   );
 };

src/components/Edges/BezierEdge.tsx

@@ -44,10 +44,10 @@ export default memo(
     ) : null;
 
     return (
-      <g>
+      <>
         <path style={style} d={dAttr} className="react-flow__edge-path" />
         {text}
-      </g>
+      </>
     );
   }
 );

src/components/Edges/StepEdge.tsx

@@ -23,14 +23,14 @@ export default memo(
     ) : null;
 
     return (
-      <g>
+      <>
         <path
           style={style}
           className="react-flow__edge-path"
           d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
         />
         {text}
-      </g>
+      </>
     );
   }
 );

src/components/Edges/StraightEdge.tsx

@@ -23,10 +23,10 @@ export default memo(
     ) : null;
 
     return (
-      <g>
+      <>
         <path style={style} className="react-flow__edge-path" d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`} />
         {text}
-      </g>
+      </>
     );
   }
 );

src/container/EdgeRenderer/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo, SVGAttributes } from 'react';
+import React, { memo, CSSProperties } from 'react';
 
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
@@ -9,7 +9,7 @@ interface EdgeRendererProps {
   width: number;
   height: number;
   edgeTypes: any;
-  connectionLineStyle?: SVGAttributes<{}>;
+  connectionLineStyle?: CSSProperties;
   connectionLineType?: string;
   onElementClick?: () => void;
 }

src/container/GraphView/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, memo, SVGAttributes } from 'react';
+import React, { useEffect, useRef, memo, CSSProperties } from 'react';
 import classnames from 'classnames';
 
 import { useStoreState, useStoreActions } from '../../store/hooks';
@@ -27,7 +27,7 @@ export interface GraphViewProps {
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   connectionLineType: string;
-  connectionLineStyle: SVGAttributes<{}>;
+  connectionLineStyle: CSSProperties;
   deleteKeyCode: number;
   showBackground: boolean;
   backgroundGap: number;
@@ -65,7 +65,7 @@ const GraphView = memo(
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
-    const state = useStoreState(s => ({
+    const state = useStoreState((s) => ({
       width: s.width,
       height: s.height,
       nodes: s.nodes,
@@ -73,11 +73,11 @@ const GraphView = memo(
       d3Initialised: s.d3Initialised,
       nodesSelectionActive: s.nodesSelectionActive,
     }));
-    const updateSize = useStoreActions(actions => actions.updateSize);
-    const setNodesSelection = useStoreActions(actions => actions.setNodesSelection);
-    const setOnConnect = useStoreActions(a => a.setOnConnect);
-    const setSnapGrid = useStoreActions(actions => actions.setSnapGrid);
-    const setInteractive = useStoreActions(actions => actions.setInteractive);
+    const updateSize = useStoreActions((actions) => actions.updateSize);
+    const setNodesSelection = useStoreActions((actions) => actions.setNodesSelection);
+    const setOnConnect = useStoreActions((a) => a.setOnConnect);
+    const setSnapGrid = useStoreActions((actions) => actions.setSnapGrid);
+    const setInteractive = useStoreActions((actions) => actions.setInteractive);
     const selectionKeyPressed = useKeyPress(selectionKeyCode);
     const rendererClasses = classnames('react-flow__renderer', { 'is-interactive': isInteractive });
 

src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, SVGAttributes, HTMLAttributes } from 'react';
+import React, { useMemo, CSSProperties, HTMLAttributes } from 'react';
 import { StoreProvider } from 'easy-peasy';
 
 const nodeEnv: string = process.env.NODE_ENV as string;
@@ -33,7 +33,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   nodeTypes: NodeTypesType;
   edgeTypes: EdgeTypesType;
   connectionLineType: string;
-  connectionLineStyle: SVGAttributes<{}>;
+  connectionLineStyle: CSSProperties;
   deleteKeyCode: number;
   selectionKeyCode: number;
   showBackground: boolean;

src/style.css

@@ -48,6 +48,12 @@
 .react-flow__edge {
   pointer-events: all;
 
+  &.selected {
+    .react-flow__edge-path {
+      stroke: #555;
+    }
+  }
+
   &.animated path {
     stroke-dasharray: 5;
     animation: dashdraw 0.5s linear infinite;
@@ -55,19 +61,19 @@
 }
 
 .react-flow__connection {
-  fill: none;
-  stroke: '#ddd';
   pointer-events: none;
 }
 
+.react-flow__connection-path {
+  fill: none;
+  stroke: #ddd;
+  stroke-width: 2;
+}
+
 .react-flow__edge-path {
   fill: none;
   stroke: #bbb;
   stroke-width: 2;
-
-  &.selected {
-    stroke: #555;
-  }
 }
 
 .react-flow__edge-text {