From 7a2bff2502a76d4632c7e03c86e7ae25bd1439fe Mon Sep 17 00:00:00 2001 From: moklick Date: Mon, 11 May 2020 17:49:07 +0200 Subject: [PATCH] fix(connectionline): set stroke color --- src/components/ConnectionLine/index.tsx | 10 +++++----- src/components/Edges/BezierEdge.tsx | 4 ++-- src/components/Edges/StepEdge.tsx | 4 ++-- src/components/Edges/StraightEdge.tsx | 4 ++-- src/container/EdgeRenderer/index.tsx | 4 ++-- src/container/GraphView/index.tsx | 16 ++++++++-------- src/container/ReactFlow/index.tsx | 4 ++-- src/style.css | 18 ++++++++++++------ 8 files changed, 35 insertions(+), 29 deletions(-) diff --git a/src/components/ConnectionLine/index.tsx b/src/components/ConnectionLine/index.tsx index 428a7c72..c2c977ca 100644 --- a/src/components/ConnectionLine/index.tsx +++ b/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 ( - - + + ); }; diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index 33f10c4f..5486408e 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/src/components/Edges/BezierEdge.tsx @@ -44,10 +44,10 @@ export default memo( ) : null; return ( - + <> {text} - + ); } ); diff --git a/src/components/Edges/StepEdge.tsx b/src/components/Edges/StepEdge.tsx index bcf8d2df..485d8e6b 100644 --- a/src/components/Edges/StepEdge.tsx +++ b/src/components/Edges/StepEdge.tsx @@ -23,14 +23,14 @@ export default memo( ) : null; return ( - + <> {text} - + ); } ); diff --git a/src/components/Edges/StraightEdge.tsx b/src/components/Edges/StraightEdge.tsx index 2b15e666..878bcba2 100644 --- a/src/components/Edges/StraightEdge.tsx +++ b/src/components/Edges/StraightEdge.tsx @@ -23,10 +23,10 @@ export default memo( ) : null; return ( - + <> {text} - + ); } ); diff --git a/src/container/EdgeRenderer/index.tsx b/src/container/EdgeRenderer/index.tsx index a5baba09..855b4fdb 100644 --- a/src/container/EdgeRenderer/index.tsx +++ b/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; } diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx index 996e1ac6..aa78cef8 100644 --- a/src/container/GraphView/index.tsx +++ b/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(null); const rendererNode = useRef(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 }); diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx index f61a69e5..d7c86841 100644 --- a/src/container/ReactFlow/index.tsx +++ b/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, 'on nodeTypes: NodeTypesType; edgeTypes: EdgeTypesType; connectionLineType: string; - connectionLineStyle: SVGAttributes<{}>; + connectionLineStyle: CSSProperties; deleteKeyCode: number; selectionKeyCode: number; showBackground: boolean; diff --git a/src/style.css b/src/style.css index da2dca9f..9bd3d521 100644 --- a/src/style.css +++ b/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 {