Merge pull request #54 from wbkd/develop

Develop

README.md

@@ -40,16 +40,18 @@ const BasicGraph = () => (
 - `onMove`: move handler
 - `nodeTypes`: object with node types
 - `edgeTypes`: object with node types
+- `style`: css style passed to the wrapper
 - `connectionLineType`: connection line type = `straight` or `bezier`
 - `connectionLineStyle`: connection style as svg attributes
-- `deleteKeyCode`: delete key code
-- `selectionKeyCode`: selection key code
-- `showBackground`: boolean
-- `backgroundGap`: gap size
-- `backgroundColor`: color of dots or lines
-- `backgroundType`: background type = `dots` or `lines`
-- `snapToGrid`: boolean
-- `snapGrid`: [x, y] array
+- `deleteKeyCode`: default: `16`
+- `selectionKeyCode`: default: `false`
+- `showBackground`: default: `true`
+- `backgroundGap`: gap size - default: `16`
+- `backgroundColor`: color of dots or lines - default: `#eee`
+- `backgroundType`: background type = `dots` or `lines` - default: `dots`
+- `snapToGrid`: default: `false`
+- `snapGrid`: [x, y] array - default: `[16, 16]`
+- `onlyRenderVisibleNodes`: default: `true`
 
 # Plugins
 

cypress/integration/flow/basic.spec.js

@@ -1,4 +1,4 @@
-describe('Basic Flow Rendering', () => {
+describe('Basic Graph Rendering', () => {
   it('renders a flow with three nodes', () => {
     cy.visit('/basic');
 

cypress/integration/flow/custom-nodes.js

@@ -1,11 +1,11 @@
-describe('Advanced Flow Rendering', () => {
+describe('Custom Nodes Graph Rendering', () => {
   it('renders a flow with sone nodes', () => {
     cy.visit('/');
 
     cy.get('.react-flow__renderer');
 
-    cy.get('.react-flow__node').should('have.length', 9);
-    cy.get('.react-flow__edge').should('have.length', 9);
+    cy.get('.react-flow__node').should('have.length', 8);
+    cy.get('.react-flow__edge').should('have.length', 8);
   });
 
   it('renders a grid', () => {
@@ -31,7 +31,7 @@ describe('Advanced Flow Rendering', () => {
       .should('not.have.class', 'valid')
       .should('not.have.class', 'connecting');
 
-    cy.get('.react-flow__edge').should('have.length', 10);
+    cy.get('.react-flow__edge').should('have.length', 9);
   });
 
   it('tries to make invalid connection', () => {
@@ -50,6 +50,6 @@ describe('Advanced Flow Rendering', () => {
       .trigger('mouseup', { force: true })
       .should('not.have.class', 'connecting');
 
-    cy.get('.react-flow__edge').should('have.length', 10);
+    cy.get('.react-flow__edge').should('have.length', 9);
   });
 });

cypress/integration/flow/empty.spec.js

@@ -0,0 +1,17 @@
+describe('Empty Flow Rendering', () => {
+  it('renders an empty graph', () => {
+    cy.visit('/empty');
+
+    cy.get('.react-flow__renderer');
+    cy.get('.react-flow__node').should('not.exist');
+    cy.get('.react-flow__edge').should('not.exist');
+  });
+
+  it('renders a control panel', () => {
+    cy.get('.react-flow__controls');
+  });
+
+  it('renders a mini map', () => {
+    cy.get('.react-flow__minimap');
+  });
+});

dist/container/EdgeRenderer/index.d.ts

@@ -7,5 +7,5 @@ interface EdgeRendererProps {
     connectionLineType?: string;
     onElementClick?: () => void;
 }
-declare const EdgeRenderer: React.MemoExoticComponent<({ width, height, connectionLineStyle, connectionLineType, ...rest }: EdgeRendererProps) => JSX.Element | null>;
+declare const EdgeRenderer: React.MemoExoticComponent<(props: EdgeRendererProps) => JSX.Element | null>;
 export default EdgeRenderer;

example/src/Advanced/index.js

@@ -1,174 +0,0 @@
-import React, { PureComponent } from 'react';
-
-import Graph, { isEdge, removeElements, addEdge, getOutgoers, MiniMap, Controls } from 'react-flow';
-
-import SpecialNode from './SpecialNode';
-import InputNode from './InputNode';
-
-const onNodeDragStop = node => console.log('drag stop', node);
-
-class App extends PureComponent {
-  constructor() {
-    super();
-
-    const onChange = (option, d) => {
-      this.setState(prevState => (
-        {elements: prevState.elements.map(e => {
-          if (isEdge(e) || e.id !== '6') {
-            return e;
-          }
-
-          return {
-            ...e,
-            data: {
-              ...e.data,
-              label: `Option ${option} selected.`
-            }
-          };
-        })}
-      ));
-    }
-
-    const onChangeInput = (input, d) => {
-      this.setState(prevState => (
-        {elements: prevState.elements.map(e => {
-          if (isEdge(e) || e.id !== '8') {
-            return e;
-          }
-
-          if (e.id === '8') {
-            return {
-              ...e,
-              data: {
-                ...e.data,
-                input: input || 'write something'
-              }
-            };
-          } else {
-            return e;
-          }
-        })}
-      ));
-    }
-
-    this.state = {
-      graphLoaded: false,
-      elements: [
-        { id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },
-        { id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
-        { id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
-        { id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },
-        { id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
-        { id: '6', type: 'special', data: { onChange, label: '6 no option selected' }, position: { x: 425, y: 375 } },
-        { id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
-        { id: '8', type: 'text', data: { onChange: onChangeInput, input: 'write something' }, position: { x: 350, y: 100 } },
-        { id: '9', type: 'text', data: { label: 'right' }, position: { x: 600, y: 100 } },
-        { id: 'e1-2', source: '1', target: '2', animated: true },
-        { id: 'e1-8', source: '1', target: '8', animated: true },
-        { id: 'e8-9', source: '8', target: '9', animated: true },
-        { id: 'e2-3', source: '2', target: '3' },
-        { id: 'e3-4', source: '3', target: '4', type: 'step' },
-        { id: 'e3-5', source: '3', target: '5' },
-        { id: 'e5-6b', source: '5', target: '6__b' },
-        { id: 'e5-6a', source: '5', target: '6__a', type: 'step', animated: true, style: { stroke: '#FFCC00' } },
-        { id: 'e6-7', source: '6', target: '7', style: { stroke: '#FFCC00' }},
-      ]
-    };
-  }
-
-  onLoad(graphInstance) {
-    console.log('graph loaded:', graphInstance);
-    window.rg = graphInstance;
-
-    this.graphInstance = graphInstance;
-    this.graphInstance.fitView({ padding: 0.1 });
-    this.setState({
-      graphLoaded: true
-    });
-  }
-
-  onFitView() {
-    this.graphInstance.fitView();
-  }
-
-  onAdd() {
-    this.setState(prevState => ({
-      ...prevState,
-      elements: prevState.elements.concat({
-        id: (prevState.elements.length + 1).toString(),
-        data: { label: 'Added node' },
-        position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
-      })
-    }));
-  }
-
-  onElementClick(element) {
-    console.log('click', element);
-    console.log('outgoers', getOutgoers(element, this.state.elements));
-  }
-
-  onZoomIn() {
-    this.graphInstance.zoomIn();
-  }
-
-  onZoomOut() {
-    this.graphInstance.zoomOut();
-  }
-
-  onElementsRemove(elementsToRemove) {
-    this.setState(prevState => ({
-      elements: removeElements(elementsToRemove, prevState.elements)
-    }));
-  }
-
-  onConnect(params) {
-    this.setState(prevState => ({
-      elements: addEdge(params, prevState.elements)
-    }));
-  }
-
-  render() {
-    return (
-      <Graph
-        elements={this.state.elements}
-        onElementClick={element => this.onElementClick(element)}
-        onElementsRemove={elements => this.onElementsRemove(elements)}
-        onConnect={params => this.onConnect(params)}
-        onNodeDragStop={onNodeDragStop}
-        style={{ width: '100%', height: '100%' }}
-        onLoad={graphInstance => this.onLoad(graphInstance)}
-        nodeTypes={{
-          special: SpecialNode,
-          text: InputNode
-        }}
-        connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
-        connectionLineType="bezier"
-        backgroundColor="#888"
-        backgroundGap={16}
-        snapToGrid={true}
-        snapGrid={[16, 16]}
-      >
-        <MiniMap
-          style={{ position: 'absolute', right: 10, bottom: 10, backgroundColor: '#f8f8f8'}}
-          nodeColor={n => {
-            if (n.type === 'input') return 'blue';
-            if (n.type === 'output') return 'green';
-            if (n.type === 'default') return 'red';
-
-            return '#FFCC00';
-          }}
-        />
-        <Controls />
-        <button
-          type="button"
-          onClick={() => this.onAdd()}
-          style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
-        >
-          add
-        </button>
-      </Graph>
-    );
-  }
-}
-
-export default App;

example/src/CustomNodes/index.js

@@ -0,0 +1,119 @@
+import React, { useState, useEffect } from 'react';
+
+import Graph, { isEdge, removeElements, addEdge, MiniMap, Controls } from 'react-flow';
+
+import SpecialNode from './SpecialNode';
+import InputNode from './InputNode';
+
+const onNodeDragStop = node => console.log('drag stop', node);
+const onElementClick = element => console.log('click', element);
+const onLoad = (graph) => console.log('graph loaded:', graph);
+
+const CustomNodesGraph = () => {
+  const [elements, setElements] = useState([]);
+
+  useEffect(() => {
+    const onChange = (option, d) => {
+      setElements(els => els.map(e => {
+        if (isEdge(e) || e.id !== '6') {
+          return e;
+        }
+
+        return {
+          ...e,
+          data: {
+            ...e.data,
+            label: `Option ${option} selected.`
+          }
+        };
+      }));
+    };
+
+    const onChangeInput = (input, d) => {
+      setElements(els => els.map(e => {
+        if (isEdge(e) || e.id !== '8') {
+          return e;
+        }
+
+        return {
+          ...e,
+          data: {
+            ...e.data,
+            input: input || 'write something'
+          }
+        };
+      }));
+    };
+
+    setElements([
+      { id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },
+      { id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
+      { id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
+      { id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },
+      { id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
+      { id: '6', type: 'special', data: { onChange: onChange, label: '6 no option selected' }, position: { x: 425, y: 375 } },
+      { id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
+      { id: '8', type: 'text', data: { onChange: onChangeInput, input: 'write something' }, position: { x: 350, y: 100 } },
+      { id: 'e1-2', source: '1', target: '2', animated: true },
+      { id: 'e1-8', source: '1', target: '8', animated: true },
+      { id: 'e2-3', source: '2', target: '3', animated: true },
+      { id: 'e3-4', source: '3', target: '4', animated: true },
+      { id: 'e3-5', source: '3', target: '5', animated: true },
+      { id: 'e5-6b', source: '5', target: '6__b', animated: true  },
+      { id: 'e5-6a', source: '5', target: '6__a', animated: true },
+      { id: 'e6-7', source: '6', target: '7', animated: true },
+    ])
+  }, []);
+
+  const addRandomNode = () => {
+    setElements(els => els.concat({
+      id: (els.length + 1).toString(),
+      data: { label: 'Added node' },
+      position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
+    }));
+  };
+  const onElementsRemove = (elementsToRemove) => setElements(els => removeElements(elementsToRemove, els));
+  const onConnect = (params) => setElements(els => addEdge(params, els));
+
+  return (
+    <Graph
+      elements={elements}
+      onElementClick={onElementClick}
+      onElementsRemove={onElementsRemove}
+      onConnect={onConnect}
+      onNodeDragStop={onNodeDragStop}
+      style={{ width: '100%', height: '100%' }}
+      onLoad={onLoad}
+      nodeTypes={{
+        special: SpecialNode,
+        text: InputNode
+      }}
+      connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
+      connectionLineType="bezier"
+      backgroundColor="#888"
+      backgroundGap={16}
+      snapToGrid={true}
+      snapGrid={[16, 16]}
+    >
+      <MiniMap
+        nodeColor={n => {
+          if (n.type === 'input') return 'blue';
+          if (n.type === 'output') return 'green';
+          if (n.type === 'default') return 'red';
+
+          return '#FFCC00';
+        }}
+      />
+      <Controls />
+      <button
+        type="button"
+        onClick={addRandomNode}
+        style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
+      >
+        add node
+      </button>
+    </Graph>
+  );
+}
+
+export default CustomNodesGraph;

example/src/Empty/index.js

@@ -11,7 +11,7 @@ const EmptyGraph = () => {
   const onElementsRemove = (elementsToRemove) =>
     setElements(els => removeElements(elementsToRemove, els));
   const onConnect = (params) => setElements(els => addEdge(params, els));
-  const onAdd = () => {
+  const addRandomNode = () => {
     const nodeId = (elements.length + 1).toString();
     const newNode = {
       id: nodeId,
@@ -36,10 +36,10 @@ const EmptyGraph = () => {
     <Controls />
     <button
       type="button"
-      onClick={onAdd}
+      onClick={addRandomNode}
       style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}
     >
-      add
+      add node
     </button>
     </Graph>
   );

example/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
-import Advanced from './Advanced';
+import CustomNodes from './CustomNodes';
 import Basic from './Basic';
 import Empty from './Empty';
 
@@ -18,7 +18,7 @@ ReactDOM.render((
         <Empty />
       </Route>
       <Route path="/">
-        <Advanced />
+        <CustomNodes />
       </Route>
     </Switch>
   </Router>

src/components/NodesSelection/index.tsx

@@ -29,10 +29,13 @@ export default memo(() => {
     transform: s.transform,
     selectedNodesBbox: s.selectedNodesBbox,
     selectedElements: s.selectedElements,
+    snapToGrid: s.snapToGrid,
+    snapGrid: s.snapGrid
   }));
   const updateNodePos = useStoreActions(a => a.updateNodePos);
   const [x, y, k] = state.transform;
   const position = state.selectedNodesBbox;
+  const grid = (state.snapToGrid ? state.snapGrid : [1, 1])! as [number, number];
 
   const onStart = (evt: MouseEvent) => {
     const scaledClient: XYPosition = {
@@ -84,6 +87,7 @@ export default memo(() => {
     >
       <ReactDraggable
         scale={k}
+        grid={grid}
         onStart={evt => onStart(evt as MouseEvent)}
         onDrag={evt => onDrag(evt as MouseEvent)}
       >

src/container/EdgeRenderer/index.tsx

@@ -3,7 +3,7 @@ import React, { memo, SVGAttributes } from 'react';
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
-import { XYPosition, Position, Edge, Node, ElementId, Transform, HandleElement } from '../../types';
+import { XYPosition, Position, Edge, Node, ElementId, HandleElement, Elements } from '../../types';
 
 interface EdgeRendererProps {
   width: number;
@@ -14,15 +14,6 @@ interface EdgeRendererProps {
   onElementClick?: () => void;
 }
 
-interface EdgeRendererState {
-  nodes: Node[];
-  edges: Edge[];
-  transform: Transform;
-  selectedElements: any;
-  connectionSourceId: ElementId | null;
-  position: XYPosition;
-}
-
 interface EdgePositions {
   sourceX: number;
   sourceY: number;
@@ -122,20 +113,12 @@ function getEdgePositions(
   };
 }
 
-function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererState) {
-  const edgeType = edge.type || 'default';
+function renderEdge(edge: Edge, props: EdgeRendererProps, nodes: Node[], selectedElements: Elements) {
+  const [sourceId, sourceHandleId] = edge.source.split('__');
+  const [targetId, targetHandleId] = edge.target.split('__');
 
-  const hasSourceHandleId = edge.source.includes('__');
-  const hasTargetHandleId = edge.target.includes('__');
-
-  const sourceId = hasSourceHandleId ? edge.source.split('__')[0] : edge.source;
-  const targetId = hasTargetHandleId ? edge.target.split('__')[0] : edge.target;
-
-  const sourceHandleId = hasSourceHandleId ? edge.source.split('__')[1] : null;
-  const targetHandleId = hasTargetHandleId ? edge.target.split('__')[1] : null;
-
-  const sourceNode = state.nodes.find(n => n.id === sourceId);
-  const targetNode = state.nodes.find(n => n.id === targetId);
+  const sourceNode = nodes.find(n => n.id === sourceId);
+  const targetNode = nodes.find(n => n.id === targetId);
 
   if (!sourceNode) {
     throw new Error(`couldn't create edge for source id: ${sourceId}`);
@@ -144,7 +127,7 @@ function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererSta
   if (!targetNode) {
     throw new Error(`couldn't create edge for target id: ${targetId}`);
   }
-
+  const edgeType = edge.type || 'default';
   const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
   const sourceHandle = getHandle(sourceNode.__rg.handleBounds.source, sourceHandleId);
   const targetHandle = getHandle(targetNode.__rg.handleBounds.target, targetHandleId);
@@ -159,9 +142,10 @@ function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererSta
     targetHandle,
     targetPosition
   );
-  const selected = state.selectedElements
-    .filter(isEdge)
-    .find((elm: Edge) => elm.source === sourceId && elm.target === targetId);
+
+  const isSelected = (selectedElements as Edge[]).some(
+    elm => isEdge(elm) && elm.source === sourceId && elm.target === targetId
+  );
 
   return (
     <EdgeComponent
@@ -169,7 +153,7 @@ function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererSta
       id={edge.id}
       type={edge.type}
       onClick={props.onElementClick}
-      selected={selected}
+      selected={isSelected}
       animated={edge.animated}
       style={edge.style}
       source={sourceId}
@@ -186,44 +170,35 @@ function renderEdge(edge: Edge, props: EdgeRendererProps, state: EdgeRendererSta
   );
 }
 
-const EdgeRenderer = memo(({ width, height, connectionLineStyle, connectionLineType, ...rest }: EdgeRendererProps) => {
-  const state: EdgeRendererState = useStoreState(s => ({
-    nodes: s.nodes,
-    edges: s.edges,
-    transform: s.transform,
-    selectedElements: s.selectedElements,
-    connectionSourceId: s.connectionSourceId,
-    position: s.connectionPosition,
-  }));
+const EdgeRenderer = memo((props: EdgeRendererProps) => {
+  const {
+    transform,
+    edges,
+    nodes,
+    connectionSourceId,
+    connectionPosition: { x, y },
+    selectedElements,
+  } = useStoreState(s => s);
+
+  const { width, height, connectionLineStyle, connectionLineType } = props;
+
   if (!width) {
     return null;
   }
 
-  const { transform, edges, nodes, connectionSourceId, position } = state;
-  const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
+  const [tx, ty, tScale] = transform;
+  const transformStyle = `translate(${tx},${ty}) scale(${tScale})`;
 
   return (
     <svg width={width} height={height} className="react-flow__edges">
       <g transform={transformStyle}>
-        {edges.map((e: Edge) =>
-          renderEdge(
-            e,
-            {
-              width,
-              height,
-              connectionLineStyle,
-              connectionLineType,
-              ...rest,
-            },
-            state
-          )
-        )}
+        {edges.map((e: Edge) => renderEdge(e, props, nodes, selectedElements))}
         {connectionSourceId && (
           <ConnectionLine
             nodes={nodes}
             connectionSourceId={connectionSourceId}
-            connectionPositionX={position.x}
-            connectionPositionY={position.y}
+            connectionPositionX={x}
+            connectionPositionY={y}
             transform={transform}
             connectionLineStyle={connectionLineStyle}
             connectionLineType={connectionLineType}

src/store/index.ts

@@ -200,6 +200,14 @@ const storeModel: StoreModel = {
       selection,
       state.transform
     );
+
+    if (!selectedNodes.length) {
+      state.nodesSelectionActive = false;
+      state.selectedElements = [];
+
+      return;
+    }
+
     const selectedNodesBbox = getRectOfNodes(selectedNodes);
 
     state.selection = selection;

src/utils/graph.ts

@@ -152,10 +152,13 @@ export const getNodesInside = (
     width: rect.width / tScale,
     height: rect.height / tScale,
   });
+
   return nodes.filter(({ __rg: { position, width, height } }) => {
     const nBox = rectToBox({ ...position, width, height });
-    const overlappingArea =
-      (Math.max(rBox.x, nBox.x) - Math.min(rBox.x2, nBox.x2)) * (Math.max(rBox.y, nBox.y) - Math.min(rBox.y2, nBox.y2));
+    const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x));
+    const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y));
+    const overlappingArea = xOverlap * yOverlap;
+
     if (partially) {
       return overlappingArea >= 0;
     }