diff --git a/cypress/integration/flow/advanced.spec.js b/cypress/integration/flow/advanced.spec.js new file mode 100644 index 00000000..b9e499f2 --- /dev/null +++ b/cypress/integration/flow/advanced.spec.js @@ -0,0 +1,48 @@ +describe('Advanced Flow Rendering', () => { + it('renders a flow with sone nodes', () => { + cy.visit('/advanced.html'); + + cy.get('.react-flow__renderer'); + + cy.get('.react-flow__node').should('have.length', 9); + cy.get('.react-flow__edge').should('have.length', 9); + }); + + it('connects nodes', () => { + cy.get('.react-flow__node') + .contains('1 Tests') + .find('.react-flow__handle.source') + .trigger('mousedown', { which: 1 }); + + cy.get('.react-flow__node') + .contains('7 output') + .find('.react-flow__handle.target') + .trigger('mousemove') + .should('have.class', 'connecting') + .should('have.class', 'valid') + .trigger('mouseup', { force: true }) + .should('not.have.class', 'valid') + .should('not.have.class', 'connecting'); + + cy.get('.react-flow__edge').should('have.length', 10); + }); + + it('tries to make invalid connection', () => { + cy.get('.react-flow__node') + .contains('write something') + .parents('.react-flow__node') + .find('.react-flow__handle.source') + .trigger('mousedown', { which: 1 }); + + cy.get('.react-flow__node') + .contains('5 Another node') + .find('.react-flow__handle.target') + .trigger('mousemove') + .should('have.class', 'connecting') + .should('not.have.class', 'valid') + .trigger('mouseup', { force: true }) + .should('not.have.class', 'connecting'); + + cy.get('.react-flow__edge').should('have.length', 10); + }); +}); diff --git a/dist/ReactGraph.css b/dist/ReactFlow.css similarity index 100% rename from dist/ReactGraph.css rename to dist/ReactFlow.css diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js index 3916ea26..17d37095 100644 --- a/dist/ReactGraph.js +++ b/dist/ReactGraph.js @@ -1,7 +1,7 @@ (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('prop-types')) : typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'prop-types'], factory) : - (global = global || self, factory(global.ReactGraph = {}, global.React, global.ReactDOM, global.PropTypes)); + (global = global || self, factory(global.ReactFlow = {}, global.React, global.ReactDOM, global.PropTypes)); }(this, function (exports, React, reactDom, PropTypes) { 'use strict'; var React__default = 'default' in React ? React['default'] : React; @@ -9207,7 +9207,15 @@ x: evt.clientX - containerBounds.x, y: evt.clientY - containerBounds.y }); - setSourceId(nodeId); // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 } + setSourceId(nodeId); + + function resetRecentHandle() { + if (recentHoveredHandle) { + recentHoveredHandle.classList.remove('valid'); + recentHoveredHandle.classList.remove('connecting'); + } + } // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 } + function checkElementBelowIsValid(evt) { var elementBelow = document.elementFromPoint(evt.clientX, evt.clientY); @@ -9257,12 +9265,7 @@ isHoveringHandle = _checkElementBelowIsV.isHoveringHandle; if (!isHoveringHandle) { - if (recentHoveredHandle) { - recentHoveredHandle.classList.remove('valid'); - recentHoveredHandle.classList.remove('connecting'); - } - - return false; + return resetRecentHandle(); } var isOwnHandle = connection.source === connection.target; @@ -9283,10 +9286,7 @@ onConnect(connection); } - if (recentHoveredHandle) { - recentHoveredHandle.classList.remove('valid'); - } - + resetRecentHandle(); setSourceId(null); document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); diff --git a/rollup.config.js b/rollup.config.js index 7f55408d..896b19f7 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -16,7 +16,7 @@ export default [{ } }, output: { - name: 'ReactGraph', + name: 'ReactFlow', file: pkg.browser, format: 'umd', sourcemaps: true,