fix(connectionline): set stroke color

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;