style(flow): new default styles

README.md

@@ -76,7 +76,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 - `defaultZoom`: default: `1`
 - `defaultPosition`: default: `[0, 0]`
 - `snapToGrid`: default: `false`
-- `snapGrid`: [x, y] array - default: `[16, 16]`
+- `snapGrid`: [x, y] array - default: `[15, 15]`
 - `onlyRenderVisibleNodes`: default: `true`
 - `translateExtent`: [default `[[-∞, -∞], [+∞, +∞]]`](https://github.com/d3/d3-zoom#zoom_translateExtent)
 
@@ -118,7 +118,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
 #### Element Customization
 - `nodeTypes`: object with [node types](#node-types--custom-nodes)
 - `edgeTypes`: object with [edge types](#edge-types--custom-edges)
-- `arrowHeadColor`: default: `#bbb`
+- `arrowHeadColor`: default: `#b1b1b7`
 
 #### Connection Line Options
 - `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep`
@@ -405,9 +405,9 @@ const FlowWithBackground = () => (
 ### Prop Types
 
 - `variant`: string - has to be 'dots' or 'lines' - default: `dots`
-- `gap`: number - the gap between the dots or lines - default: `16`
+- `gap`: number - the gap between the dots or lines - default: `15`
 - `size`: number - the radius of the dots or the stroke width of the lines - default: `0.5`
-- `color`: string - the color of the dots or lines - default: `#999` for dots, `#eee` for lines
+- `color`: string - the color of the dots or lines - default: `#81818a` for dots, `#eee` for lines
 - `style`: css properties
 - `className`: additional class name
 
@@ -437,6 +437,7 @@ const FlowWithMiniMap = () => (
 ### Prop Types
 
 - `nodeColor`: string or function - If you pass a color as a string all nodes will get that color. If you pass a function you can return a color depending on the passed node.
+- `nodeStrokeColor`: string or function - If you pass a color as a string all nodes will get that stroke color. If you pass a function you can return a color depending on the passed node.
 - `nodeBorderRadius`: number
 - `nodeClassName`: string or function for adding an additional class to the nodes inside the mini map
 - `maskColor`: string
@@ -543,7 +544,7 @@ The React Flow wrapper has the className `react-flow`. If you want to change the
 You could achieve the same effect by passing a style prop to the `ReactFlow` component:
 
 ```javascript
-const style = { background: 'red', width: '100%' height: '300px' };
+const style = { background: 'red', height: '300px' };
 
 const FlowWithRedBg = (
   <ReactFlow

cypress/integration/flow/basic.spec.js

@@ -25,7 +25,7 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('selects an edge by click', () => {
-    cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
   });
 
   it('deselects edge', () => {
@@ -71,7 +71,7 @@ describe('Basic Flow Rendering', () => {
   });
 
   it('selects an edge', () => {
-    cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
   });
 
   it('drags a node', () => {

cypress/integration/flow/interaction.spec.js

@@ -93,7 +93,7 @@ describe('Interaction Flow Rendering', () => {
   });
 
   it('selects an edge by click', () => {
-    cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__edge:first').click({ force: true }).should('have.class', 'selected');
   });
 
   it('toggles connectable mode', () => {

example/src/CustomNode/ColorSelectorNode.js

@@ -8,15 +8,15 @@ export default memo(({ data }) => {
       <Handle
         type="target"
         position="left"
-        style={{ background: '#fff' }}
+        style={{ background: '#555' }}
         onConnect={(params) => console.log('handle onConnect', params)}
       />
       <div>
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>
       <input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
-      <Handle type="source" position="right" id="a" style={{ top: 10, background: '#fff' }} />
-      <Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#fff' }} />
+      <Handle type="source" position="right" id="a" style={{ top: 10, background: '#555' }} />
+      <Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#555' }} />
     </>
   );
 });

example/src/CustomNode/index.js

@@ -8,7 +8,7 @@ const onLoad = (reactFlowInstance) => console.log('flow loaded:', reactFlowInsta
 const onNodeDragStop = (event, node) => console.log('drag stop', node);
 const onElementClick = (event, element) => console.log('click', element);
 
-const initBgColor = '#f0e742';
+const initBgColor = '#1A192B';
 
 const connectionLineStyle = { stroke: '#fff' };
 const snapGrid = [16, 16];
@@ -78,12 +78,17 @@ const CustomNodeFlow = () => {
       connectionLineStyle={connectionLineStyle}
       snapToGrid={true}
       snapGrid={snapGrid}
+      defaultZoom={1.5}
     >
       <MiniMap
-        nodeColor={(n) => {
-          if (n.type === 'input') return 'blue';
+        nodeStrokeColor={(n) => {
+          if (n.type === 'input') return '#0041d0';
           if (n.type === 'selectorNode') return bgColor;
-          if (n.type === 'output') return 'green';
+          if (n.type === 'output') return '#ff0072';
+        }}
+        nodeColor={(n) => {
+          if (n.type === 'selectorNode') return bgColor;
+          return '#fff';
         }}
       />
       <Controls />

example/src/Horizontal/index.js

@@ -26,8 +26,22 @@ const initialElements = [
   { id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 0 } },
   { id: '5', sourcePosition: 'top', targetPosition: 'bottom', data: { label: 'Node 5' }, position: { x: 500, y: 100 } },
   { id: '6', sourcePosition: 'bottom', targetPosition: 'top', data: { label: 'Node 6' }, position: { x: 500, y: 230 } },
-  { id: '7', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 7' }, position: { x: 750, y: 50 } },
-  { id: '8', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 8' }, position: { x: 750, y: 300 } },
+  {
+    id: '7',
+    type: 'output',
+    sourcePosition: 'right',
+    targetPosition: 'left',
+    data: { label: 'Node 7' },
+    position: { x: 750, y: 50 },
+  },
+  {
+    id: '8',
+    type: 'output',
+    sourcePosition: 'right',
+    targetPosition: 'left',
+    data: { label: 'Node 8' },
+    position: { x: 750, y: 300 },
+  },
 
   { id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
   { id: 'e1-3', source: '1', type: 'smoothstep', target: '3', animated: true },

example/src/Overview/index.js

@@ -54,7 +54,7 @@ const initialElements = [
       ),
     },
     position: { x: 400, y: 100 },
-    style: { background: '#eee', color: '#222', border: '1px solid #bbb', width: 180 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
   },
   {
     id: '4',
@@ -139,14 +139,20 @@ const OverviewFlow = () => {
       snapGrid={snapGrid}
     >
       <MiniMap
-        nodeColor={(n) => {
+        nodeStrokeColor={(n) => {
           if (n.style?.background) return n.style.background;
-          if (n.type === 'input') return '#9999ff';
-          if (n.type === 'output') return '#79c9b7';
-          if (n.type === 'default') return '#ff6060';
+          if (n.type === 'input') return '#0041d0';
+          if (n.type === 'output') return '#ff0072';
+          if (n.type === 'default') return '#1a192b';
 
           return '#eee';
         }}
+        nodeColor={(n) => {
+          if (n.style?.background) return n.style.background;
+
+          return '#fff';
+        }}
+        borderRadius={2}
       />
       <Controls />
       <Background color="#aaa" gap={16} />

example/src/index.css

@@ -138,18 +138,22 @@ nav a.active:before {
 }
 
 .react-flow__node.dark-node {
-  background: #333;
+  background: #0041d0;
   color: #f8f8f8;
 }
 
 .react-flow__node-selectorNode {
   font-size: 12px;
-  background: #eee;
-  border: 1px solid #555;
+  background: #f0f2f3;
+  border: 1px solid 555;
   border-radius: 5px;
   text-align: center;
 }
 
+.react-flow__node-selectorNode .react-flow__handle {
+  border-color: #f0f2f3;
+}
+
 @media screen and (min-width: 768px) {
   nav {
     position: relative;
@@ -176,4 +180,4 @@ nav a.active:before {
   .overview-example__add {
     display: block;
   }
-}
+}

src/additional-components/Background/index.tsx

@@ -15,13 +15,13 @@ interface BackgroundProps extends HTMLAttributes<SVGElement> {
 }
 
 const defaultColors = {
-  [BackgroundVariant.Dots]: '#999',
+  [BackgroundVariant.Dots]: '#81818a',
   [BackgroundVariant.Lines]: '#eee',
 };
 
 const Background = ({
   variant = BackgroundVariant.Dots,
-  gap = 24,
+  gap = 15,
   size = 0.5,
   color,
   style,

src/additional-components/MiniMap/MiniMapNode.tsx

@@ -6,13 +6,14 @@ interface MiniMapNodeProps {
   y: number;
   width: number;
   height: number;
-  color: string;
-  className: string;
   borderRadius: number;
+  className: string;
+  color: string;
+  strokeColor: string;
   style?: CSSProperties;
 }
 
-const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadius }: MiniMapNodeProps) => {
+const MiniMapNode = ({ x, y, width, height, style, color, strokeColor, className, borderRadius }: MiniMapNodeProps) => {
   const { background, backgroundColor } = style || {};
   const fill = (color || background || backgroundColor) as string;
 
@@ -26,6 +27,8 @@ const MiniMapNode = ({ x, y, width, height, style, color, className, borderRadiu
       width={width}
       height={height}
       fill={fill}
+      stroke={strokeColor}
+      strokeWidth={2}
     />
   );
 };

src/additional-components/MiniMap/index.tsx

@@ -12,6 +12,7 @@ type StringFunc = (node: Node) => string;
 
 interface MiniMapProps extends React.HTMLAttributes<SVGSVGElement> {
   nodeColor?: string | StringFunc;
+  nodeStrokeColor?: string | StringFunc;
   nodeClassName?: string | StringFunc;
   nodeBorderRadius?: number;
   maskColor?: string;
@@ -21,12 +22,13 @@ const defaultWidth = 200;
 const defaultHeight = 150;
 
 const MiniMap = ({
-  style = { backgroundColor: '#f8f8f8' },
+  style = { backgroundColor: '#fff' },
   className,
-  nodeColor = '#ddd',
+  nodeStrokeColor = '#555',
+  nodeColor = '#fff',
   nodeClassName = '',
   nodeBorderRadius = 5,
-  maskColor = 'rgba(10, 10, 10, .25)',
+  maskColor = '#F0F2F3',
 }: MiniMapProps) => {
   const containerWidth = useStoreState((s) => s.width);
   const containerHeight = useStoreState((s) => s.height);
@@ -37,6 +39,9 @@ const MiniMap = ({
   const elementWidth = (style.width || defaultWidth)! as number;
   const elementHeight = (style.height || defaultHeight)! as number;
   const nodeColorFunc = (nodeColor instanceof Function ? nodeColor : () => nodeColor) as StringFunc;
+  const nodeStrokeColorFunc = (nodeStrokeColor instanceof Function
+    ? nodeStrokeColor
+    : () => nodeStrokeColor) as StringFunc;
   const nodeClassNameFunc = (nodeClassName instanceof Function ? nodeClassName : () => nodeClassName) as StringFunc;
   const hasNodes = nodes && nodes.length;
   const bb = getRectOfNodes(nodes);
@@ -79,6 +84,7 @@ const MiniMap = ({
             className={nodeClassNameFunc(node)}
             color={nodeColorFunc(node)}
             borderRadius={nodeBorderRadius}
+            strokeColor={nodeStrokeColorFunc(node)}
           />
         ))}
       <path

src/container/ReactFlow/index.tsx

@@ -224,7 +224,7 @@ ReactFlow.defaultProps = {
   deleteKeyCode: 8,
   selectionKeyCode: 16,
   snapToGrid: false,
-  snapGrid: [16, 16],
+  snapGrid: [15, 15],
   onlyRenderVisibleNodes: true,
   nodesDraggable: true,
   nodesConnectable: true,
@@ -235,7 +235,7 @@ ReactFlow.defaultProps = {
   maxZoom: 2,
   defaultZoom: 1,
   defaultPosition: [0, 0],
-  arrowHeadColor: '#bbb',
+  arrowHeadColor: '#b1b1b7',
   zoomOnScroll: true,
   zoomOnDoubleClick: true,
 };

src/style.css

@@ -62,12 +62,12 @@
 
 .react-flow__edge-path {
   fill: none;
-  stroke: #bbb;
-  stroke-width: 1.5;
+  stroke: #b1b1b7;
+  stroke-width: 1;
 }
 
 .react-flow__edge-text {
-  font-size: 12px;
+  font-size: 10px;
   pointer-events: none;
   user-select: none;
 }
@@ -87,8 +87,8 @@
 
 .react-flow__connection-path {
   fill: none;
-  stroke: #ddd;
-  stroke-width: 1.5;
+  stroke: #b1b1b7;
+  stroke-width: 1;
 }
 
 .react-flow__nodes {
@@ -117,32 +117,58 @@
   font-size: 12px;
   color: #222;
   text-align: center;
+  border-width: 1px;
+  border-style: solid;
 }
 
 .react-flow__node-default.selectable,
 .react-flow__node-input.selectable,
 .react-flow__node-output.selectable {
-
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 1px #333;
-  }
-
   &:hover {
-    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
   }
 }
 
 .react-flow__node-input {
-  background: #9999ff;
+  background: #fff;
+  border-color: #0041d0;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #0041d0;
+  }
+
+  .react-flow__handle {
+    background: #0041d0;
+  }
 }
 
 .react-flow__node-default {
-  background: #ff6060;
+  background: #fff;
+  border-color: #1a192b;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #1a192b;
+  }
+
+  .react-flow__handle {
+    background: #1a192b;
+  }
 }
 
 .react-flow__node-output {
-  background: #79c9b7;
+  background: #fff;
+  border-color: #ff0072;
+
+  &.selected,
+  &.selected:hover {
+    box-shadow: 0 0 0 0.5px #ff0072;
+  }
+
+  .react-flow__handle {
+    background: #ff0072;
+  }
 }
 
 .react-flow__nodesselection {
@@ -165,10 +191,12 @@
 
 .react-flow__handle {
   position: absolute;
-  width: 10px;
-  height: 8px;
-  background: rgba(255, 255, 255, 0.4);
+  width: 6px;
+  height: 6px;
+  background: #555;
+  border: 1px solid white;
   pointer-events: none;
+  border-radius: 100%;
 
   &.connectable {
     pointer-events: all;
@@ -179,24 +207,24 @@
 .react-flow__handle-bottom {
   top: auto;
   left: 50%;
-  bottom: 0;
+  bottom: -4px;
   transform: translate(-50%, 0);
 }
 
 .react-flow__handle-top {
   left: 50%;
-  top: 0;
+  top: -4px;
   transform: translate(-50%, 0);
 }
 
 .react-flow__handle-left {
   top: 50%;
-  left: 0;
+  left: -4px;
   transform: translate(0, -50%);
 }
 
 .react-flow__handle-right {
-  right: 0;
+  right: -4px;
   top: 50%;
   transform: translate(0, -50%);
-}
+}