alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
moklick
2019-10-06 19:13:18 +02:00
parent 3bb6e892aa
commit 4f4f597eb6
22 changed files with 117 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -1 +1 @@
# react-graph # react-flow
cypress/integration/flow/basic.spec.js
+34 -34
View File
@@ -2,55 +2,55 @@ describe('Basic Flow Rendering', () => {
it('renders a flow with three nodes', () => { it('renders a flow with three nodes', () => {
cy.visit('/index.html'); cy.visit('/index.html');
cy.get('.react-graph__renderer'); cy.get('.react-flow__renderer');
cy.get('.react-graph__node').should('have.length', 4); cy.get('.react-flow__node').should('have.length', 4);
cy.get('.react-graph__edge').should('have.length', 2); cy.get('.react-flow__edge').should('have.length', 2);
cy.get('.react-graph__node').children('div').children('.react-graph__handle'); cy.get('.react-flow__node').children('div').children('.react-flow__handle');
}); });
it('selects a node', () => { 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', () => { it('deselects node', () => {
cy.get('.react-graph__renderer').click('bottomRight'); cy.get('.react-flow__renderer').click('bottomRight');
cy.get('.react-graph__node:first').should('not.have.class', 'selected'); cy.get('.react-flow__node:first').should('not.have.class', 'selected');
}); });
it('selects an edge', () => { 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', () => { it('deselects edge', () => {
cy.get('.react-graph__renderer').click('bottomRight'); cy.get('.react-flow__renderer').click('bottomRight');
cy.get('.react-graph__edge:first').should('not.have.class', 'selected'); cy.get('.react-flow__edge:first').should('not.have.class', 'selected');
}); });
it('selects all nodes', () => { it('selects all nodes', () => {
cy.get('body') cy.get('body')
.type('{shift}', { release: false }) .type('{shift}', { release: false })
.get('.react-graph__selectionpane') .get('.react-flow__selectionpane')
.trigger('mousedown', 'topLeft', { which: 1, force: true }) .trigger('mousedown', 'topLeft', { which: 1, force: true })
.trigger('mousemove', 'bottomRight', { which: 1 }) .trigger('mousemove', 'bottomRight', { which: 1 })
.trigger('mouseup', 'bottomRight', { force: true }) .trigger('mouseup', 'bottomRight', { force: true })
.get('.react-graph__node') .get('.react-flow__node')
.should('have.class', 'selected') .should('have.class', 'selected')
.get('.react-graph__nodesselection-rect'); .get('.react-flow__nodesselection-rect');
}); });
it('removes selection', () => { it('removes selection', () => {
cy.get('.react-graph__renderer').click('bottomRight'); cy.get('.react-flow__renderer').click('bottomRight');
cy.get('.react-graph__nodesselection-rect').should('not.exist'); cy.get('.react-flow__nodesselection-rect').should('not.exist');
}); });
it('selects an edge', () => { 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', () => { 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 => { .then($el => {
const styleAfterDrag = $el.css('transform'); const styleAfterDrag = $el.css('transform');
expect(styleBeforeDrag).to.not.equal(styleAfterDrag); expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
@@ -58,33 +58,33 @@ describe('Basic Flow Rendering', () => {
}); });
it('removes a node', () => { 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('body').type('{backspace}');
cy.get('.react-graph__node').should('have.length', 3); cy.get('.react-flow__node').should('have.length', 3);
cy.get('.react-graph__edge').should('have.length', 1); cy.get('.react-flow__edge').should('have.length', 1);
}); });
it('connects nodes', () => { it('connects nodes', () => {
cy.get('.react-graph__node') cy.get('.react-flow__node')
.contains('Node 3') .contains('Node 3')
.find('.react-graph__handle.source') .find('.react-flow__handle.source')
.trigger('mousedown', { which: 1 }); .trigger('mousedown', { which: 1 });
cy.get('.react-graph__node') cy.get('.react-flow__node')
.contains('Node 4') .contains('Node 4')
.find('.react-graph__handle.target') .find('.react-flow__handle.target')
.trigger('mousemove') .trigger('mousemove')
.trigger('mouseup', { force: true }); .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', () => { 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('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', () => { it('drags the pane', () => {
@@ -96,27 +96,27 @@ describe('Basic Flow Rendering', () => {
clientY: Cypress.config('viewportHeight') * 0.7 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.window().then((win) => {
cy.get('.react-graph__zoompane') cy.get('.react-flow__zoompane')
.trigger('mousedown', { which: 1, view: win }) .trigger('mousedown', { which: 1, view: win })
.trigger('mousemove', newPosition) .trigger('mousemove', newPosition)
.trigger('mouseup', { force: true, view: win }) .trigger('mouseup', { force: true, view: win })
.then(() => { .then(() => {
const styleAfterDrag = Cypress.$('.react-graph__nodes').css('transform'); const styleAfterDrag = Cypress.$('.react-flow__nodes').css('transform');
expect(styleBeforeDrag).to.not.equal(styleAfterDrag); expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
}); });
}); });
}); });
it('zooms the pane', () => { 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 }) .trigger('wheel','topLeft', { deltaY: -200 })
.then(() => { .then(() => {
const styleAfterZoom = Cypress.$('.react-graph__nodes').css('transform'); const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
expect(styleBeforeZoom).to.not.equal(styleAfterZoom); expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
}); });
}); });
dist/ReactGraph.css
Vendored
+15 -15
View File
@@ -1,17 +1,17 @@
.react-graph { .react-flow {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.react-graph__renderer { .react-flow__renderer {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
} }
.react-graph__zoompane { .react-flow__zoompane {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@@ -20,7 +20,7 @@
z-index: 1; z-index: 1;
} }
.react-graph__selectionpane { .react-flow__selectionpane {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@@ -29,7 +29,7 @@
z-index: 2; z-index: 2;
} }
.react-graph__selection { .react-flow__selection {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -37,7 +37,7 @@
border: 1px dotted rgba(0, 89, 220, 0.8); border: 1px dotted rgba(0, 89, 220, 0.8);
} }
.react-graph__edges { .react-flow__edges {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -45,18 +45,18 @@
z-index: 2; z-index: 2;
} }
.react-graph__edge { .react-flow__edge {
fill: none; fill: none;
stroke: #333; stroke: #333;
stroke-width: 2; stroke-width: 2;
pointer-events: all; pointer-events: all;
} }
.react-graph__edge.selected { .react-flow__edge.selected {
stroke: #ff5050; stroke: #ff5050;
} }
.react-graph__nodes { .react-flow__nodes {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@@ -65,7 +65,7 @@
transform-origin: 0 0; transform-origin: 0 0;
} }
.react-graph__node { .react-flow__node {
position: absolute; position: absolute;
color: #222; color: #222;
font-family: sans-serif; font-family: sans-serif;
@@ -81,15 +81,15 @@
transform-origin: 0 0; transform-origin: 0 0;
} }
.react-graph__node:hover > * { .react-flow__node:hover > * {
box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08); 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; box-shadow: 0 0 0 2px #000;
} }
.react-graph__handle { .react-flow__handle {
position: absolute; position: absolute;
width: 12px; width: 12px;
height: 12px; height: 12px;
@@ -99,7 +99,7 @@
border-radius: 50%; border-radius: 50%;
} }
.react-graph__nodesselection { .react-flow__nodesselection {
z-index: 3; z-index: 3;
position: absolute; position: absolute;
width: 100%; width: 100%;
@@ -110,7 +110,7 @@
pointer-events: none; pointer-events: none;
} }
.react-graph__nodesselection-rect { .react-flow__nodesselection-rect {
position: absolute; position: absolute;
background: rgba(0, 89, 220, 0.08); background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8); border: 1px dotted rgba(0, 89, 220, 0.8);
dist/ReactGraph.js
Vendored
+19 -19
View File
@@ -6168,7 +6168,7 @@
}; };
var getEdgeId = function getEdgeId(e) { var getEdgeId = function getEdgeId(e) {
return "react-graph__edge-".concat(e.source, "-").concat(e.target); return "react-flow__edge-".concat(e.source, "-").concat(e.target);
}; };
var pointToRendererPoint = function pointToRendererPoint(_ref, transform) { var pointToRendererPoint = function pointToRendererPoint(_ref, transform) {
@@ -6330,7 +6330,7 @@
transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")") transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")")
}; };
return React__default.createElement("div", { return React__default.createElement("div", {
className: "react-graph__nodes", className: "react-flow__nodes",
style: transformStyle style: transformStyle
}, nodes.map(function (d) { }, nodes.map(function (d) {
return renderNode(d, props, state); return renderNode(d, props, state);
@@ -6419,7 +6419,7 @@
} }
var style = props.connectionLineStyle || {}; var style = props.connectionLineStyle || {};
var className = classnames('react-graph__edge', 'connection', props.className); var className = classnames('react-flow__edge', 'connection', props.className);
var sourceHandle = handleId ? sourceNode.__rg.handleBounds.source.find(function (d) { var sourceHandle = handleId ? sourceNode.__rg.handleBounds.source.find(function (d) {
return d.id === handleId; return d.id === handleId;
}) : sourceNode.__rg.handleBounds.source[0]; }) : sourceNode.__rg.handleBounds.source[0];
@@ -6640,7 +6640,7 @@
return React__default.createElement("svg", { return React__default.createElement("svg", {
width: width, width: width,
height: height, height: height,
className: "react-graph__edges" className: "react-flow__edges"
}, React__default.createElement("g", { }, React__default.createElement("g", {
transform: transformStyle transform: transformStyle
}, edges.map(function (e) { }, edges.map(function (e) {
@@ -6668,7 +6668,7 @@
}; };
function getMousePosition(evt) { function getMousePosition(evt) {
var containerBounds = document.querySelector('.react-graph').getBoundingClientRect(); var containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
return { return {
x: evt.clientX - containerBounds.left, x: evt.clientX - containerBounds.left,
y: evt.clientY - containerBounds.top y: evt.clientY - containerBounds.top
@@ -6752,10 +6752,10 @@
}; };
}, []); }, []);
return React__default.createElement("div", { return React__default.createElement("div", {
className: "react-graph__selectionpane", className: "react-flow__selectionpane",
ref: selectionPane ref: selectionPane
}, (rect.draw || rect.fixed) && React__default.createElement("div", { }, (rect.draw || rect.fixed) && React__default.createElement("div", {
className: "react-graph__selection", className: "react-flow__selection",
style: { style: {
width: rect.width, width: rect.width,
height: rect.height, height: rect.height,
@@ -33788,7 +33788,7 @@
}; };
return React__default.createElement("div", { return React__default.createElement("div", {
className: "react-graph__nodesselection", className: "react-flow__nodesselection",
style: { style: {
transform: "translate(".concat(x, "px,").concat(y, "px) scale(").concat(k, ")") transform: "translate(".concat(x, "px,").concat(y, "px) scale(").concat(k, ")")
} }
@@ -33797,7 +33797,7 @@
onStart: onStart, onStart: onStart,
onDrag: onDrag onDrag: onDrag
}, React__default.createElement("div", { }, React__default.createElement("div", {
className: "react-graph__nodesselection-rect", className: "react-flow__nodesselection-rect",
style: { style: {
width: state.selectedNodesBbox.width, width: state.selectedNodesBbox.width,
height: state.selectedNodesBbox.height, height: state.selectedNodesBbox.height,
@@ -33951,7 +33951,7 @@
} }
}, [state.d3Initialised]); }, [state.d3Initialised]);
return React__default.createElement("div", { return React__default.createElement("div", {
className: "react-graph__renderer", className: "react-flow__renderer",
ref: rendererNode ref: rendererNode
}, React__default.createElement(NodeRenderer, { }, React__default.createElement(NodeRenderer, {
nodeTypes: props.nodeTypes, nodeTypes: props.nodeTypes,
@@ -33965,7 +33965,7 @@
connectionLineType: props.connectionLineType, connectionLineType: props.connectionLineType,
connectionLineStyle: props.connectionLineStyle connectionLineStyle: props.connectionLineStyle
}), shiftPressed && React__default.createElement(UserSelection, null), state.nodesSelectionActive && React__default.createElement(NodesSelection, null), React__default.createElement("div", { }), shiftPressed && React__default.createElement(UserSelection, null), state.nodesSelectionActive && React__default.createElement(NodesSelection, null), React__default.createElement("div", {
className: "react-graph__zoompane", className: "react-flow__zoompane",
onClick: function onClick() { onClick: function onClick() {
return setNodesSelection({ return setNodesSelection({
isActive: false isActive: false
@@ -34011,7 +34011,7 @@
setPosition = _ref.setPosition, setPosition = _ref.setPosition,
onConnect = _ref.onConnect, onConnect = _ref.onConnect,
isTarget = _ref.isTarget; isTarget = _ref.isTarget;
var containerBounds = document.querySelector('.react-graph').getBoundingClientRect(); var containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
setPosition({ setPosition({
x: evt.clientX - containerBounds.x, x: evt.clientX - containerBounds.x,
y: evt.clientY - containerBounds.y y: evt.clientY - containerBounds.y
@@ -34066,7 +34066,7 @@
rest = _objectWithoutProperties(_ref2, ["type", "nodeId", "onConnect", "position", "setSourceId", "setPosition", "className", "id"]); rest = _objectWithoutProperties(_ref2, ["type", "nodeId", "onConnect", "position", "setSourceId", "setPosition", "className", "id"]);
var isTarget = type === 'target'; var isTarget = type === 'target';
var handleClasses = classnames('react-graph__handle', className, position, { var handleClasses = classnames('react-flow__handle', className, position, {
source: !isTarget, source: !isTarget,
target: isTarget target: isTarget
}); });
@@ -34168,7 +34168,7 @@
style = _ref.style; style = _ref.style;
return React__default.createElement("div", { return React__default.createElement("div", {
style: _objectSpread2$1({}, nodeStyles$1, {}, style), style: _objectSpread2$1({}, nodeStyles$1, {}, style),
className: "react-graph__node-inner" className: "react-flow__node-inner"
}, data.label, React__default.createElement(Handle, { }, data.label, React__default.createElement(Handle, {
type: "source", type: "source",
position: "bottom" position: "bottom"
@@ -34334,7 +34334,7 @@
x: xPos, x: xPos,
y: yPos y: yPos
}; };
var nodeClasses = classnames('react-graph__node', { var nodeClasses = classnames('react-flow__node', {
selected: selected selected: selected
}); });
var nodeStyle = { var nodeStyle = {
@@ -34522,7 +34522,7 @@
type = props.type, type = props.type,
selected = props.selected, selected = props.selected,
onClick = props.onClick; onClick = props.onClick;
var edgeClasses = classnames('react-graph__edge', { var edgeClasses = classnames('react-flow__edge', {
selected: selected, selected: selected,
animated: animated animated: animated
}); });
@@ -34648,7 +34648,7 @@
} }
} }
var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #bbb;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-graph__edge.selected {\n stroke: #555;\n }\n\n.react-graph__edge.animated {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n\n.react-graph__edge.connection {\n stroke: '#ddd';\n pointer-events: none;\n }\n\n@-webkit-keyframes dashdraw {\n from {stroke-dashoffset: 10}\n}\n\n@keyframes dashdraw {\n from {stroke-dashoffset: 10}\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 3;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #555;\n }\n\n.react-graph__handle {\n position: absolute;\n width: 10px;\n height: 8px;\n background: rgba(255, 255, 255, 0.4);\n cursor: crosshair;\n}\n\n.react-graph__handle.bottom {\n top: auto;\n left: 50%;\n bottom: 0;\n transform: translate(-50%, 0);\n }\n\n.react-graph__handle.top {\n left: 50%;\n top: 0;\n transform: translate(-50%, 0);\n }\n\n.react-graph__handle.left {\n top: 50%;\n left: 0;\n transform: translate(0, -50%);\n\n }\n\n.react-graph__handle.right {\n right: 0;\n top: 50%;\n transform: translate(0, -50%);\n }\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n pointer-events: all;\n }"; var css = ".react-flow {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-flow__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-flow__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-flow__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-flow__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-flow__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-flow__edge {\n fill: none;\n stroke: #bbb;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-flow__edge.selected {\n stroke: #555;\n }\n\n.react-flow__edge.animated {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n\n.react-flow__edge.connection {\n stroke: '#ddd';\n pointer-events: none;\n }\n\n@-webkit-keyframes dashdraw {\n from {stroke-dashoffset: 10}\n}\n\n@keyframes dashdraw {\n from {stroke-dashoffset: 10}\n}\n\n.react-flow__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 3;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-flow__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-flow__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n.react-flow__node.selected > * {\n box-shadow: 0 0 0 2px #555;\n }\n\n.react-flow__handle {\n position: absolute;\n width: 10px;\n height: 8px;\n background: rgba(255, 255, 255, 0.4);\n cursor: crosshair;\n}\n\n.react-flow__handle.bottom {\n top: auto;\n left: 50%;\n bottom: 0;\n transform: translate(-50%, 0);\n }\n\n.react-flow__handle.top {\n left: 50%;\n top: 0;\n transform: translate(-50%, 0);\n }\n\n.react-flow__handle.left {\n top: 50%;\n left: 0;\n transform: translate(0, -50%);\n\n }\n\n.react-flow__handle.right {\n right: 0;\n top: 50%;\n transform: translate(0, -50%);\n }\n\n.react-flow__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-flow__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n pointer-events: all;\n }";
styleInject(css); styleInject(css);
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
@@ -34679,7 +34679,7 @@
}, []); }, []);
return React__default.createElement("div", { return React__default.createElement("div", {
style: style, style: style,
className: "react-graph" className: "react-flow"
}, React__default.createElement(StoreProvider, { }, React__default.createElement(StoreProvider, {
store: store store: store
}, React__default.createElement(ElementUpdater$1, { }, React__default.createElement(ElementUpdater$1, {
@@ -34745,7 +34745,7 @@
transform: s.transform transform: s.transform
}; };
}); });
var mapClasses = classnames('react-graph__minimap', className); var mapClasses = classnames('react-flow__minimap', className);
var nodePositions = state.nodes.map(function (n) { var nodePositions = state.nodes.map(function (n) {
return n.__rg.position; return n.__rg.position;
}); });
package-lock.json
Generated
+1 -1
View File
@@ -1,5 +1,5 @@
{ {
"name": "react-graph", "name": "react-flow",
"version": "1.0.0", "version": "1.0.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
package.json
+1 -1
View File
@@ -1,5 +1,5 @@
{ {
"name": "react-graph", "name": "react-flow",
"version": "1.0.0", "version": "1.0.0",
"module": "dist/ReactGraph.esm.js", "module": "dist/ReactGraph.esm.js",
"browser": "dist/ReactGraph.js", "browser": "dist/ReactGraph.js",
src/Plugins/MiniMap/index.js
+1 -1
View File
@@ -20,7 +20,7 @@ export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd'
height: s.height, height: s.height,
nodes: s.nodes, nodes: s.nodes,
transform: s.transform, 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 nodePositions = state.nodes.map(n => n.__rg.position);
const width = style.width || baseStyle.width; const width = style.width || baseStyle.width;
const height = (state.height / (state.width || 1)) * width; const height = (state.height / (state.width || 1)) * width;
src/components/ConnectionLine/index.js
+1 -1
View File
@@ -17,7 +17,7 @@ export default (props) => {
} }
const style = props.connectionLineStyle || {}; 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 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; const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
src/components/Edges/wrapEdge.js
+1 -1
View File
@@ -10,7 +10,7 @@ export default EdgeComponent => {
id, source, target, type, id, source, target, type,
animated, selected, onClick animated, selected, onClick
} = props; } = props;
const edgeClasses = cx('react-graph__edge', { selected, animated }); const edgeClasses = cx('react-flow__edge', { selected, animated });
const onEdgeClick = (evt) => { const onEdgeClick = (evt) => {
if (isInputNode(evt)) { if (isInputNode(evt)) {
return false; return false;
src/components/Handle/BaseHandle.js
+2 -2
View File
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
import cx from 'classnames'; import cx from 'classnames';
function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget }) { function onMouseDown(evt, { nodeId, setSourceId, setPosition, onConnect, isTarget }) {
const containerBounds = document.querySelector('.react-graph').getBoundingClientRect(); const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
setPosition({ setPosition({
x: evt.clientX - containerBounds.x, x: evt.clientX - containerBounds.x,
@@ -46,7 +46,7 @@ const BaseHandle = memo(({
}) => { }) => {
const isTarget = type === 'target'; const isTarget = type === 'target';
const handleClasses = cx( const handleClasses = cx(
'react-graph__handle', 'react-flow__handle',
className, className,
position, position,
{ source: !isTarget, target: isTarget } { source: !isTarget, target: isTarget }
src/components/Nodes/wrapNode.js
+1 -1
View File
@@ -97,7 +97,7 @@ export default NodeComponent => {
} = props; } = props;
const position = { x: xPos, y: yPos }; 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 nodeStyle = { zIndex: selected ? 10 : 3, transform: `translate(${xPos}px,${yPos}px)` };
const updateNode = () => { const updateNode = () => {
src/components/NodesSelection/index.js
+2 -2
View File
@@ -60,7 +60,7 @@ export default memo(() => {
return ( return (
<div <div
className="react-graph__nodesselection" className="react-flow__nodesselection"
style={{ style={{
transform: `translate(${x}px,${y}px) scale(${k})` transform: `translate(${x}px,${y}px) scale(${k})`
}} }}
@@ -71,7 +71,7 @@ export default memo(() => {
onDrag={onDrag} onDrag={onDrag}
> >
<div <div
className="react-graph__nodesselection-rect" className="react-flow__nodesselection-rect"
style={{ style={{
width: state.selectedNodesBbox.width, width: state.selectedNodesBbox.width,
height: state.selectedNodesBbox.height, height: state.selectedNodesBbox.height,
src/components/UserSelection/index.js
+3 -3
View File
@@ -12,7 +12,7 @@ const initialRect = {
}; };
function getMousePosition(evt) { function getMousePosition(evt) {
const containerBounds = document.querySelector('.react-graph').getBoundingClientRect(); const containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
return { return {
x: evt.clientX - containerBounds.left, x: evt.clientX - containerBounds.left,
@@ -91,12 +91,12 @@ export default memo(() => {
return ( return (
<div <div
className="react-graph__selectionpane" className="react-flow__selectionpane"
ref={selectionPane} ref={selectionPane}
> >
{(rect.draw || rect.fixed) && ( {(rect.draw || rect.fixed) && (
<div <div
className="react-graph__selection" className="react-flow__selection"
style={{ style={{
width: rect.width, width: rect.width,
height: rect.height, height: rect.height,
src/container/EdgeRenderer/index.js
+1 -1
View File
@@ -162,7 +162,7 @@ const EdgeRenderer = memo((props) => {
<svg <svg
width={width} width={width}
height={height} height={height}
className="react-graph__edges" className="react-flow__edges"
> >
<g transform={transformStyle}> <g transform={transformStyle}>
{edges.map(e => renderEdge(e, props, state))} {edges.map(e => renderEdge(e, props, state))}
src/ReactGraph/index.js → src/container/Editor/index.js
+16 -16
View File
@@ -6,22 +6,22 @@ if (process.env.NODE_ENV !== 'production') {
whyDidYouRender(React); whyDidYouRender(React);
} }
import GraphView from '../container/GraphView'; import GraphView from '../GraphView';
import DefaultNode from '../components/Nodes/DefaultNode'; import DefaultNode from '../../components/Nodes/DefaultNode';
import InputNode from '../components/Nodes/InputNode'; import InputNode from '../../components/Nodes/InputNode';
import OutputNode from '../components/Nodes/OutputNode'; import OutputNode from '../../components/Nodes/OutputNode';
import { createNodeTypes } from '../container/NodeRenderer/utils'; import { createNodeTypes } from '../NodeRenderer/utils';
import BezierEdge from '../components/Edges/BezierEdge'; import BezierEdge from '../../components/Edges/BezierEdge';
import StraightEdge from '../components/Edges/StraightEdge'; import StraightEdge from '../../components/Edges/StraightEdge';
import StepEdge from '../components/Edges/StepEdge'; import StepEdge from '../../components/Edges/StepEdge';
import { createEdgeTypes } from '../container/EdgeRenderer/utils'; import { createEdgeTypes } from '../EdgeRenderer/utils';
import store from '../store'; import store from '../../store';
import '../style.css'; import '../../style.css';
const ReactGraph = ({ const Editor = ({
style, onElementClick, elements, children, style, onElementClick, elements, children,
nodeTypes, edgeTypes, onLoad, onMove, nodeTypes, edgeTypes, onLoad, onMove,
onElementsRemove, onConnect, onNodeDragStop, connectionLineType, onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
@@ -31,7 +31,7 @@ const ReactGraph = ({
const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []); const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
return ( return (
<div style={style} className="react-graph"> <div style={style} className="react-flow">
<StoreProvider store={store}> <StoreProvider store={store}>
<GraphView <GraphView
onLoad={onLoad} onLoad={onLoad}
@@ -54,9 +54,9 @@ const ReactGraph = ({
); );
}; };
ReactGraph.displayName = 'ReactGraph'; Editor.displayName = 'Editor';
ReactGraph.defaultProps = { Editor.defaultProps = {
onElementClick: () => {}, onElementClick: () => {},
onElementsRemove: () => {}, onElementsRemove: () => {},
onNodeDragStop: () => {}, onNodeDragStop: () => {},
@@ -79,4 +79,4 @@ ReactGraph.defaultProps = {
selectionKeyCode: 16 selectionKeyCode: 16
}; };
export default ReactGraph; export default Editor;
src/container/GraphView/index.js
+2 -2
View File
@@ -66,7 +66,7 @@ const GraphView = memo(({
useElementUpdater({ elements }); useElementUpdater({ elements });
return ( return (
<div className="react-graph__renderer" ref={rendererNode}> <div className="react-flow__renderer" ref={rendererNode}>
<NodeRenderer <NodeRenderer
nodeTypes={nodeTypes} nodeTypes={nodeTypes}
onElementClick={onElementClick} onElementClick={onElementClick}
@@ -83,7 +83,7 @@ const GraphView = memo(({
{selectionKeyPressed && <UserSelection />} {selectionKeyPressed && <UserSelection />}
{state.nodesSelectionActive && <NodesSelection />} {state.nodesSelectionActive && <NodesSelection />}
<div <div
className="react-graph__zoompane" className="react-flow__zoompane"
onClick={onZoomPaneClick} onClick={onZoomPaneClick}
ref={zoomPane} ref={zoomPane}
/> />
src/container/NodeRenderer/index.js
+1 -1
View File
@@ -45,7 +45,7 @@ const NodeRenderer = memo((props) => {
return ( return (
<div <div
className="react-graph__nodes" className="react-flow__nodes"
style={transformStyle} style={transformStyle}
> >
{nodes.map(d => renderNode(d, props, state))} {nodes.map(d => renderNode(d, props, state))}
src/index.js
+2 -2
View File
@@ -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 Handle } from './components/Handle';
export { default as MiniMap } from './plugins/MiniMap'; export { default as MiniMap } from './plugins/MiniMap';
src/actions.js → src/store/actions.js
+1 -1
View File
@@ -1,7 +1,7 @@
import { action } from 'easy-peasy'; import { action } from 'easy-peasy';
import isEqual from 'fast-deep-equal'; import isEqual from 'fast-deep-equal';
import { getBoundingBox, getNodesInside, getConnectedEdges } from './utils/graph'; import { getBoundingBox, getNodesInside, getConnectedEdges } from '../utils/graph';
export default { export default {
setOnConnect: action((state, onConnect) => { setOnConnect: action((state, onConnect) => {
src/store.js → src/store/index.js
View File
src/style.css
+11 -11
View File
@@ -1,17 +1,17 @@
.react-graph { .react-flow {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.react-graph__renderer { .react-flow__renderer {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
} }
.react-graph__zoompane { .react-flow__zoompane {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@@ -20,7 +20,7 @@
z-index: 1; z-index: 1;
} }
.react-graph__selectionpane { .react-flow__selectionpane {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@@ -29,7 +29,7 @@
z-index: 2; z-index: 2;
} }
.react-graph__selection { .react-flow__selection {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -37,7 +37,7 @@
border: 1px dotted rgba(0, 89, 220, 0.8); border: 1px dotted rgba(0, 89, 220, 0.8);
} }
.react-graph__edges { .react-flow__edges {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -45,7 +45,7 @@
z-index: 2; z-index: 2;
} }
.react-graph__edge { .react-flow__edge {
fill: none; fill: none;
stroke: #bbb; stroke: #bbb;
stroke-width: 2; stroke-width: 2;
@@ -70,7 +70,7 @@
from {stroke-dashoffset: 10} from {stroke-dashoffset: 10}
} }
.react-graph__nodes { .react-flow__nodes {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@@ -79,7 +79,7 @@
transform-origin: 0 0; transform-origin: 0 0;
} }
.react-graph__node { .react-flow__node {
position: absolute; position: absolute;
color: #222; color: #222;
font-family: sans-serif; font-family: sans-serif;
@@ -99,7 +99,7 @@
} }
} }
.react-graph__handle { .react-flow__handle {
position: absolute; position: absolute;
width: 10px; width: 10px;
height: 8px; height: 8px;
@@ -133,7 +133,7 @@
} }
} }
.react-graph__nodesselection { .react-flow__nodesselection {
z-index: 3; z-index: 3;
position: absolute; position: absolute;
width: 100%; width: 100%;
src/utils/graph.js
+1 -1
View File
@@ -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 pointToRendererPoint = ({ x, y }, transform) => {
const rendererX = (x - transform[0]) * (1 / [transform[2]]); const rendererX = (x - transform[0]) * (1 / [transform[2]]);