Merge pull request xyflow#260 from wbkd/develop

Develop

Author: moklick

README.md

@@ -188,6 +188,7 @@ const targetHandleWithValidation = (
 - `onConnect`: function that gets triggered on connect
 - `isValidConnection`: function receives a connection `{ target: 'some-id', source: 'another-id' }` as param, returns a boolean - true by default
 - `style`: css properties
+- `className`: additional class name
 
 #### Multiple Handles
 

assets/icons/unlock.svg

@@ -6,7 +6,7 @@ describe('Basic Graph Rendering', () => {
     cy.get('.react-flow-basic-example'); // check if className prop works
     cy.get('.react-flow__node').should('have.length', 4);
     cy.get('.react-flow__edge').should('have.length', 2);
-    cy.get('.react-flow__node').children('div').children('.react-flow__handle');
+    cy.get('.react-flow__node').children('.react-flow__handle');
   });
 
   it('renders a grid', () => {

cypress/integration/flow/basic.spec.js

@@ -5,7 +5,7 @@ describe('Inactive Graph Rendering', () => {
     cy.get('.react-flow__renderer');
     cy.get('.react-flow__node').should('have.length', 4);
     cy.get('.react-flow__edge').should('have.length', 2);
-    cy.get('.react-flow__node').children('div').children('.react-flow__handle');
+    cy.get('.react-flow__node').children('.react-flow__handle');
   });
 
   it('tries to select a node by click', () => {

cypress/integration/flow/inactive.spec.js

@@ -2,11 +2,9 @@ import React from 'react';
 
 import { Handle } from 'react-flow-renderer';
 
-export default ({ data, styles }) => {
+export default ({ data }) => {
   return (
-    <div
-      style={{ background: '#eee', border: '1px solid #ddd', padding: 10, borderRadius: 5, ...styles }}
-    >
+    <>
       <Handle
         type="target"
         position="left"
@@ -27,6 +25,6 @@ export default ({ data, styles }) => {
         id="b"
         style={{ bottom: 10, top: 'auto', background: '#fff' }}
       />
-    </div>
+    </>
   );
 };

example/src/CustomNode/ColorSelectorNode.js

@@ -37,7 +37,7 @@ const CustomNodeFlow = () => {
 
     setElements([
       { id: '1', type: 'input', data: { label: 'An input node' }, position: { x: 0, y: 50 }, sourcePosition: 'right' },
-      { id: '2', type: 'selectorNode', data: { onChange: onChange, color: initBgColor }, position: { x: 250, y: 50 } },
+      { id: '2', type: 'selectorNode', data: { onChange: onChange, color: initBgColor }, style: { border: '1px solid #777' }, position: { x: 250, y: 50 } },
       { id: '3', type: 'output', data: { label: 'Output A' }, position: { x: 550, y: 25 }, targetPosition: 'left' },
       { id: '4', type: 'output', data: { label: 'Output B' }, position: { x: 550, y: 100 }, targetPosition: 'left' },
 

example/src/CustomNode/index.js

@@ -9,11 +9,20 @@ const onLoad = (graph) => {
 const initialElements = [
   { id: '1', sourcePosition: 'right', type: 'input', className: 'dark-node', data: { label: 'Input' }, position: { x: 0, y: 80 } },
   { id: '2', sourcePosition: 'right', targetPosition: 'left', data: { label: 'A Node' }, position: { x: 250, y: 0 } },
-  { id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Another node' }, position: { x: 250, y: 160 } },
-  { id: '4', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 4' }, position: { x: 500, y: 80 } },
+  { id: '3', sourcePosition: 'right', targetPosition: 'left', data: { label: 'Node 3' }, position: { x: 250, y: 160 } },
+  { 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: 'e1-2', source: '1', target: '2', animated: true,  },
   { id: 'e1-3', source: '1', target: '3', animated: true, },
-  { id: 'e1-4', source: '2', target: '4', label: 'edge label' }
+  { id: 'e1-4', source: '2', target: '4', label: 'edge label' },
+  { id: 'e3-5', source: '3', target: '5', animated: true },
+  { id: 'e3-6', source: '3', target: '6', animated: true },
+  { id: 'e5-7', source: '5', target: '7', animated: true },
+  { id: 'e6-8', source: '6', target: '8', animated: true },
 ];
 
 const HorizontalFlow = () => {

example/src/Horizontal/index.js

@@ -136,9 +136,9 @@ nav a.active:before {
   color: #111;
 }
 
-.dark-node>div {
-  background: #333 !important;
-  color: #f8f8f8 !important;
+.dark-node {
+  background: #333;
+  color: #f8f8f8;
 }
 
 @media screen and (min-width: 768px) {

example/src/index.css

@@ -37,7 +37,9 @@ export default [
     ],
     plugins: [
       bundleSize(),
-      postcss(),
+      postcss({
+        minimize: isProd,
+      }),
       babel({
         exclude: 'node_modules/**',
       }),

rollup.config.js

@@ -1,30 +1,26 @@
-import React, { memo, HTMLAttributes, CSSProperties } from 'react';
+import React, { memo, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 
 import { useStoreState } from '../../store/hooks';
 import { BackgroundVariant } from '../../types';
 import { createGridLinesPath, createGridDotsPath } from './utils';
 
+import './style.css';
+
 interface BackgroundProps extends HTMLAttributes<SVGElement> {
   variant?: BackgroundVariant;
   gap?: number;
   color?: string;
   size?: number;
 }
 
-const baseStyles: CSSProperties = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-};
-
 const defaultColors = {
   [BackgroundVariant.Dots]: '#999',
   [BackgroundVariant.Lines]: '#eee',
 };
 
 const Background = memo(
-  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style = {}, className = '' }: BackgroundProps) => {
+  ({ variant = BackgroundVariant.Dots, gap = 24, size = 0.5, color, style, className }: BackgroundProps) => {
     const width = useStoreState((s) => s.width);
     const height = useStoreState((s) => s.height);
     const [x, y, scale] = useStoreState((s) => s.transform);
@@ -42,7 +38,7 @@ const Background = memo(
     const stroke = isLines ? bgColor : 'none';
 
     return (
-      <svg width={width} height={height} style={{ ...baseStyles, ...style }} className={bgClasses}>
+      <svg width={width} height={height} style={style} className={bgClasses}>
         <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
       </svg>
     );