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

xyflow · Oct 6, 2019 · 4f4f597 · 4f4f597
1 parent 3bb6e89
commit 4f4f597
Show file tree

Hide file tree

Showing 22 changed files with 117 additions and 117 deletions.
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# react-graph
+# react-flow
diff --git a/cypress/integration/flow/basic.spec.js b/cypress/integration/flow/basic.spec.js
@@ -2,89 +2,89 @@ describe('Basic Flow Rendering', () => {
   it('renders a flow with three nodes', () => {
     cy.visit('/index.html');
 
-    cy.get('.react-graph__renderer');
-    cy.get('.react-graph__node').should('have.length', 4);
-    cy.get('.react-graph__edge').should('have.length', 2);
-    cy.get('.react-graph__node').children('div').children('.react-graph__handle');
+    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');
   });
 
   it('selects a node', () => {
-    cy.get('.react-graph__node:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__node:first').click().should('have.class', 'selected');
   });
 
   it('deselects node', () => {
-    cy.get('.react-graph__renderer').click('bottomRight');
-    cy.get('.react-graph__node:first').should('not.have.class', 'selected');
+    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__node:first').should('not.have.class', 'selected');
   });
 
   it('selects an edge', () => {
-    cy.get('.react-graph__edge:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
   });
 
   it('deselects edge', () => {
-    cy.get('.react-graph__renderer').click('bottomRight');
-    cy.get('.react-graph__edge:first').should('not.have.class', 'selected');
+    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
   });
 
   it('selects all nodes', () => {
     cy.get('body')
       .type('{shift}', { release: false })
-      .get('.react-graph__selectionpane')
+      .get('.react-flow__selectionpane')
       .trigger('mousedown', 'topLeft', { which: 1, force: true })
       .trigger('mousemove', 'bottomRight', { which: 1 })
       .trigger('mouseup', 'bottomRight', { force: true })
-      .get('.react-graph__node')
+      .get('.react-flow__node')
       .should('have.class', 'selected')
-      .get('.react-graph__nodesselection-rect');
+      .get('.react-flow__nodesselection-rect');
   });
 
   it('removes selection', () => {
-    cy.get('.react-graph__renderer').click('bottomRight');
-    cy.get('.react-graph__nodesselection-rect').should('not.exist');
+    cy.get('.react-flow__renderer').click('bottomRight');
+    cy.get('.react-flow__nodesselection-rect').should('not.exist');
   });
 
   it('selects an edge', () => {
-    cy.get('.react-graph__edge:first').click().should('have.class', 'selected');
+    cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
   });
 
   it('drags a node', () => {
-    const styleBeforeDrag = Cypress.$('.react-graph__node:first').css('transform');
+    const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
 
-    cy.drag('.react-graph__node:first', { x: 500, y: 25 })
+    cy.drag('.react-flow__node:first', { x: 500, y: 25 })
       .then($el => {
         const styleAfterDrag = $el.css('transform');
         expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
       });
   });
 
   it('removes a node', () => {
-    cy.get('.react-graph__node').contains('Node 2').click();
+    cy.get('.react-flow__node').contains('Node 2').click();
     cy.get('body').type('{backspace}');
 
-    cy.get('.react-graph__node').should('have.length', 3);
-    cy.get('.react-graph__edge').should('have.length', 1);
+    cy.get('.react-flow__node').should('have.length', 3);
+    cy.get('.react-flow__edge').should('have.length', 1);
   });
 
   it('connects nodes', () => {
-    cy.get('.react-graph__node')
+    cy.get('.react-flow__node')
       .contains('Node 3')
-      .find('.react-graph__handle.source')
+      .find('.react-flow__handle.source')
       .trigger('mousedown', { which: 1 });
 
-    cy.get('.react-graph__node')
+    cy.get('.react-flow__node')
       .contains('Node 4')
-      .find('.react-graph__handle.target')
+      .find('.react-flow__handle.target')
       .trigger('mousemove')
       .trigger('mouseup', { force: true });
 
-    cy.get('.react-graph__edge').should('have.length', 2);
+    cy.get('.react-flow__edge').should('have.length', 2);
   });
 
   it('removes an edge', () => {
-    cy.get('.react-graph__edge:first').click();
+    cy.get('.react-flow__edge:first').click();
     cy.get('body').type('{backspace}');
 
-    cy.get('.react-graph__edge').should('have.length', 1);
+    cy.get('.react-flow__edge').should('have.length', 1);
   });
 
   it('drags the pane', () => {
@@ -96,27 +96,27 @@ describe('Basic Flow Rendering', () => {
       clientY: Cypress.config('viewportHeight') * 0.7
     };
 
-    const styleBeforeDrag = Cypress.$('.react-graph__nodes').css('transform');
+    const styleBeforeDrag = Cypress.$('.react-flow__nodes').css('transform');
 
     cy.window().then((win) => {
-      cy.get('.react-graph__zoompane')
+      cy.get('.react-flow__zoompane')
         .trigger('mousedown', { which: 1, view: win })
         .trigger('mousemove', newPosition)
         .trigger('mouseup', { force: true, view: win })
         .then(() => {
-          const styleAfterDrag = Cypress.$('.react-graph__nodes').css('transform');
+          const styleAfterDrag = Cypress.$('.react-flow__nodes').css('transform');
           expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
         });
     });
   });
 
   it('zooms the pane', () => {
-    const styleBeforeZoom = Cypress.$('.react-graph__nodes').css('transform');
+    const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
 
-    cy.get('.react-graph__zoompane')
+    cy.get('.react-flow__zoompane')
       .trigger('wheel','topLeft', { deltaY: -200 })
       .then(() => {
-        const styleAfterZoom = Cypress.$('.react-graph__nodes').css('transform');
+        const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
         expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
       });
   });

diff --git a/dist/ReactGraph.css b/dist/ReactGraph.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,34 +29,34 @@
   z-index: 2;
 }
 
-.react-graph__selection {
+.react-flow__selection {
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(0, 89, 220, 0.08);
   border: 1px dotted rgba(0, 89, 220, 0.8);
 }
 
-.react-graph__edges {
+.react-flow__edges {
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
   z-index: 2;
 }
 
-.react-graph__edge {
+.react-flow__edge {
   fill: none;
   stroke: #333;
   stroke-width: 2;
   pointer-events: all;
 }
 
-.react-graph__edge.selected {
+.react-flow__edge.selected {
     stroke: #ff5050;
   }
 
-.react-graph__nodes {
+.react-flow__nodes {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -65,7 +65,7 @@
   transform-origin: 0 0;
 }
 
-.react-graph__node {
+.react-flow__node {
   position: absolute;
   color: #222;
   font-family: sans-serif;
@@ -81,15 +81,15 @@
   transform-origin: 0 0;
 }
 
-.react-graph__node:hover > * {
+.react-flow__node:hover > * {
     box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
   }
 
-.react-graph__node.selected > * {
+.react-flow__node.selected > * {
     box-shadow: 0 0 0 2px #000;
   }
 
-.react-graph__handle {
+.react-flow__handle {
   position: absolute;
   width: 12px;
   height: 12px;
@@ -99,7 +99,7 @@
   border-radius: 50%;
 }
 
-.react-graph__nodesselection {
+.react-flow__nodesselection {
   z-index: 3;
   position: absolute;
   width: 100%;
@@ -110,7 +110,7 @@
   pointer-events: none;
 }
 
-.react-graph__nodesselection-rect {
+.react-flow__nodesselection-rect {
     position: absolute;
     background: rgba(0, 89, 220, 0.08);
     border: 1px dotted rgba(0, 89, 220, 0.8);