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

src/Plugins/MiniMap/index.js

@@ -20,7 +20,7 @@ export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd'
     height: s.height,
     nodes: s.nodes,
     transform: s.transform,
-  }));  const mapClasses = classnames('react-graph__minimap', className);
+  }));  const mapClasses = classnames('react-flow__minimap', className);
   const nodePositions = state.nodes.map(n => n.__rg.position);
   const width = style.width || baseStyle.width;
   const height = (state.height / (state.width || 1)) * width;

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,

src/container/EdgeRenderer/index.js

@@ -162,7 +162,7 @@ const EdgeRenderer = memo((props) => {
     <svg
       width={width}
       height={height}
-      className="react-graph__edges"
+      className="react-flow__edges"
     >
       <g transform={transformStyle}>
         {edges.map(e => renderEdge(e, props, state))}

src/container/Editor/index.js

@@ -6,22 +6,22 @@ if (process.env.NODE_ENV !== 'production') {
   whyDidYouRender(React);
 }
 
-import GraphView from '../container/GraphView';
+import GraphView from '../GraphView';
 
-import DefaultNode from '../components/Nodes/DefaultNode';
-import InputNode from '../components/Nodes/InputNode';
-import OutputNode from '../components/Nodes/OutputNode';
-import { createNodeTypes } from '../container/NodeRenderer/utils';
+import DefaultNode from '../../components/Nodes/DefaultNode';
+import InputNode from '../../components/Nodes/InputNode';
+import OutputNode from '../../components/Nodes/OutputNode';
+import { createNodeTypes } from '../NodeRenderer/utils';
 
-import BezierEdge from '../components/Edges/BezierEdge';
-import StraightEdge from '../components/Edges/StraightEdge';
-import StepEdge from '../components/Edges/StepEdge';
-import { createEdgeTypes } from '../container/EdgeRenderer/utils';
-import store from '../store';
+import BezierEdge from '../../components/Edges/BezierEdge';
+import StraightEdge from '../../components/Edges/StraightEdge';
+import StepEdge from '../../components/Edges/StepEdge';
+import { createEdgeTypes } from '../EdgeRenderer/utils';
+import store from '../../store';
 
-import '../style.css';
+import '../../style.css';
 
-const ReactGraph = ({
+const Editor = ({
   style, onElementClick, elements, children,
   nodeTypes, edgeTypes, onLoad, onMove,
   onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
@@ -31,7 +31,7 @@ const ReactGraph = ({
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
 
   return (
-    <div style={style} className="react-graph">
+    <div style={style} className="react-flow">
       <StoreProvider store={store}>
         <GraphView
           onLoad={onLoad}
@@ -54,9 +54,9 @@ const ReactGraph = ({
   );
 };
 
-ReactGraph.displayName = 'ReactGraph';
+Editor.displayName = 'Editor';
 
-ReactGraph.defaultProps = {
+Editor.defaultProps = {
   onElementClick: () => {},
   onElementsRemove: () => {},
   onNodeDragStop: () => {},
@@ -79,4 +79,4 @@ ReactGraph.defaultProps = {
   selectionKeyCode: 16
 };
 
-export default ReactGraph;
+export default Editor;

src/container/GraphView/index.js

@@ -66,7 +66,7 @@ const GraphView = memo(({
   useElementUpdater({ elements });
 
   return (
-    <div className="react-graph__renderer" ref={rendererNode}>
+    <div className="react-flow__renderer" ref={rendererNode}>
       <NodeRenderer
         nodeTypes={nodeTypes}
         onElementClick={onElementClick}
@@ -83,7 +83,7 @@ const GraphView = memo(({
       {selectionKeyPressed && <UserSelection />}
       {state.nodesSelectionActive && <NodesSelection />}
       <div
-        className="react-graph__zoompane"
+        className="react-flow__zoompane"
         onClick={onZoomPaneClick}
         ref={zoomPane}
       />

src/container/NodeRenderer/index.js

@@ -45,7 +45,7 @@ const NodeRenderer = memo((props) => {
 
   return (
     <div
-      className="react-graph__nodes"
+      className="react-flow__nodes"
       style={transformStyle}
     >
       {nodes.map(d => renderNode(d, props, state))}

src/index.js

@@ -1,6 +1,6 @@
-import ReactGraph from './ReactGraph';
+import ReactFlow from './container/Editor';
 
-export default ReactGraph;
+export default ReactFlow;
 
 export { default as Handle } from './components/Handle';
 export { default as MiniMap } from './plugins/MiniMap';

src/store/actions.js

@@ -1,7 +1,7 @@
 import { action } from 'easy-peasy';
 import isEqual from 'fast-deep-equal';
 
-import { getBoundingBox, getNodesInside, getConnectedEdges } from './utils/graph';
+import { getBoundingBox, getNodesInside, getConnectedEdges } from '../utils/graph';
 
 export default {
   setOnConnect: action((state, onConnect) => {

src/style.css

@@ -1,17 +1,17 @@
-.react-graph {
+.react-flow {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }
 
-.react-graph__renderer {
+.react-flow__renderer {
   width: 100%;
   height: 100%;
   position: absolute;
 }
 
-.react-graph__zoompane {
+.react-flow__zoompane {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -20,7 +20,7 @@
   z-index: 1;
 }
 
-.react-graph__selectionpane {
+.react-flow__selectionpane {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -29,7 +29,7 @@
   z-index: 2;
 }
 
-.react-graph__selection {
+.react-flow__selection {
   position: absolute;
   top: 0;
   left: 0;
@@ -37,7 +37,7 @@
   border: 1px dotted rgba(0, 89, 220, 0.8);
 }
 
-.react-graph__edges {
+.react-flow__edges {
   position: absolute;
   top: 0;
   left: 0;
@@ -45,7 +45,7 @@
   z-index: 2;
 }
 
-.react-graph__edge {
+.react-flow__edge {
   fill: none;
   stroke: #bbb;
   stroke-width: 2;
@@ -70,7 +70,7 @@
   from {stroke-dashoffset: 10}
 }
 
-.react-graph__nodes {
+.react-flow__nodes {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -79,7 +79,7 @@
   transform-origin: 0 0;
 }
 
-.react-graph__node {
+.react-flow__node {
   position: absolute;
   color: #222;
   font-family: sans-serif;
@@ -99,7 +99,7 @@
   }
 }
 
-.react-graph__handle {
+.react-flow__handle {
   position: absolute;
   width: 10px;
   height: 8px;
@@ -133,7 +133,7 @@
   }
 }
 
-.react-graph__nodesselection {
+.react-flow__nodesselection {
   z-index: 3;
   position: absolute;
   width: 100%;

src/utils/graph.js

@@ -26,7 +26,7 @@ export const removeElements = (elements, elementsToRemove) => {
   });
 };
 
-const getEdgeId = (e) => `react-graph__edge-${e.source}-${e.target}`;
+const getEdgeId = (e) => `react-flow__edge-${e.source}-${e.target}`;
 
 const pointToRendererPoint = ({ x, y }, transform) => {
   const rendererX = (x - transform[0]) * (1 / [transform[2]]);