refactor(app): rename react-graph to react-flow

src/components/ConnectionLine/index.js

@@ -17,7 +17,7 @@ export default (props) => {
   }
 
   const style = props.connectionLineStyle || {};
-  const className = cx('react-graph__edge', 'connection', props.className);
+  const className = cx('react-flow__edge', 'connection', props.className);
 
   const sourceHandle = handleId ? sourceNode.__rg.handleBounds.source.find(d => d.id === handleId) : sourceNode.__rg.handleBounds.source[0];
   const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;

src/components/Edges/wrapEdge.js

@@ -10,7 +10,7 @@ export default EdgeComponent => {
       id, source, target, type,
       animated, selected, onClick
     } = props;
-    const edgeClasses = cx('react-graph__edge', { selected, animated });
+    const edgeClasses = cx('react-flow__edge', { selected, animated });
     const onEdgeClick = (evt) => {
       if (isInputNode(evt)) {
         return false;

src/components/Handle/BaseHandle.js

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import cx from 'classnames';
 
 function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget }) {
-  const containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
+  const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
 
   setPosition({
     x: evt.clientX - containerBounds.x,
@@ -46,7 +46,7 @@ const BaseHandle = memo(({
 }) => {
   const isTarget = type === 'target';
   const handleClasses = cx(
-    'react-graph__handle',
+    'react-flow__handle',
     className,
     position,
     { source: !isTarget, target: isTarget }

src/components/Nodes/wrapNode.js

@@ -97,7 +97,7 @@ export default NodeComponent => {
     } = props;
 
     const position = { x: xPos, y: yPos };
-    const nodeClasses = cx('react-graph__node', { selected });
+    const nodeClasses = cx('react-flow__node', { selected });
     const nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
 
     const updateNode = () => {

src/components/NodesSelection/index.js

@@ -60,7 +60,7 @@ export default memo(() => {
 
   return (
     <div
-      className="react-graph__nodesselection"
+      className="react-flow__nodesselection"
       style={{
         transform: `translate(${x}px,${y}px) scale(${k})`
       }}
@@ -71,7 +71,7 @@ export default memo(() => {
         onDrag={onDrag}
       >
         <div
-          className="react-graph__nodesselection-rect"
+          className="react-flow__nodesselection-rect"
           style={{
             width: state.selectedNodesBbox.width,
             height: state.selectedNodesBbox.height,

src/components/UserSelection/index.js

@@ -12,7 +12,7 @@ const initialRect = {
 };
 
 function getMousePosition(evt) {
-  const containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
+  const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
 
   return {
     x: evt.clientX - containerBounds.left,
@@ -91,12 +91,12 @@ export default memo(() => {
 
   return (
     <div
-      className="react-graph__selectionpane"
+      className="react-flow__selectionpane"
       ref={selectionPane}
     >
       {(rect.draw || rect.fixed) && (
         <div
-          className="react-graph__selection"
+          className="react-flow__selection"
           style={{
             width: rect.width,
             height: rect.height,