diff --git a/README.md b/README.md index 8bd0e870..3b068061 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ const BasicFlow = () => ; - `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 = () => ; #### 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 = ( { }); 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', () => { diff --git a/cypress/integration/flow/interaction.spec.js b/cypress/integration/flow/interaction.spec.js index 08236192..8846aade 100644 --- a/cypress/integration/flow/interaction.spec.js +++ b/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', () => { diff --git a/example/src/CustomNode/ColorSelectorNode.js b/example/src/CustomNode/ColorSelectorNode.js index 54ffdacf..1b6381f3 100644 --- a/example/src/CustomNode/ColorSelectorNode.js +++ b/example/src/CustomNode/ColorSelectorNode.js @@ -8,15 +8,15 @@ export default memo(({ data }) => { console.log('handle onConnect', params)} />
Custom Color Picker Node: {data.color}
- - + + ); }); diff --git a/example/src/CustomNode/index.js b/example/src/CustomNode/index.js index b633608d..6fa29443 100644 --- a/example/src/CustomNode/index.js +++ b/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} > { - 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'; }} /> diff --git a/example/src/Horizontal/index.js b/example/src/Horizontal/index.js index e66e5c8a..3b9ce9fb 100644 --- a/example/src/Horizontal/index.js +++ b/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 }, diff --git a/example/src/Overview/index.js b/example/src/Overview/index.js index 20246191..d5703ead 100644 --- a/example/src/Overview/index.js +++ b/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} > { + 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} /> diff --git a/example/src/index.css b/example/src/index.css index c9324205..8ad19a95 100644 --- a/example/src/index.css +++ b/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; } -} \ No newline at end of file +} diff --git a/src/additional-components/Background/index.tsx b/src/additional-components/Background/index.tsx index 2007702a..4f1530a1 100644 --- a/src/additional-components/Background/index.tsx +++ b/src/additional-components/Background/index.tsx @@ -15,13 +15,13 @@ interface BackgroundProps extends HTMLAttributes { } 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, diff --git a/src/additional-components/MiniMap/MiniMapNode.tsx b/src/additional-components/MiniMap/MiniMapNode.tsx index a3ab7a43..618c6135 100644 --- a/src/additional-components/MiniMap/MiniMapNode.tsx +++ b/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} /> ); }; diff --git a/src/additional-components/MiniMap/index.tsx b/src/additional-components/MiniMap/index.tsx index f01671c6..e1670738 100644 --- a/src/additional-components/MiniMap/index.tsx +++ b/src/additional-components/MiniMap/index.tsx @@ -12,6 +12,7 @@ type StringFunc = (node: Node) => string; interface MiniMapProps extends React.HTMLAttributes { 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)} /> ))}