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

2
README.md
View File

@@ -1 +1 @@
# react-graph
# react-flow

68
cypress/integration/flow/basic.spec.js
View File

@@ -2,55 +2,55 @@ 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);
@@ -58,33 +58,33 @@ describe('Basic Flow Rendering', () => {
});
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);
});
});

30
dist/ReactGraph.css vendored
View File

@@ -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,18 +45,18 @@
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);

38
dist/ReactGraph.js vendored
View File

@@ -6168,7 +6168,7 @@
};
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) {
@@ -6330,7 +6330,7 @@
transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")")
};
return React__default.createElement("div", {
className: "react-graph__nodes",
className: "react-flow__nodes",
style: transformStyle
}, nodes.map(function (d) {
return renderNode(d, props, state);
@@ -6419,7 +6419,7 @@
}
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) {
return d.id === handleId;
}) : sourceNode.__rg.handleBounds.source[0];
@@ -6640,7 +6640,7 @@
return React__default.createElement("svg", {
width: width,
height: height,
className: "react-graph__edges"
className: "react-flow__edges"
}, React__default.createElement("g", {
transform: transformStyle
}, edges.map(function (e) {
@@ -6668,7 +6668,7 @@
};
function getMousePosition(evt) {
var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
var containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
return {
x: evt.clientX - containerBounds.left,
y: evt.clientY - containerBounds.top
@@ -6752,10 +6752,10 @@
};
}, []);
return React__default.createElement("div", {
className: "react-graph__selectionpane",
className: "react-flow__selectionpane",
ref: selectionPane
}, (rect.draw || rect.fixed) && React__default.createElement("div", {
className: "react-graph__selection",
className: "react-flow__selection",
style: {
width: rect.width,
height: rect.height,
@@ -33788,7 +33788,7 @@
};
return React__default.createElement("div", {
className: "react-graph__nodesselection",
className: "react-flow__nodesselection",
style: {
transform: "translate(".concat(x, "px,").concat(y, "px) scale(").concat(k, ")")
}
@@ -33797,7 +33797,7 @@
onStart: onStart,
onDrag: onDrag
}, React__default.createElement("div", {
className: "react-graph__nodesselection-rect",
className: "react-flow__nodesselection-rect",
style: {
width: state.selectedNodesBbox.width,
height: state.selectedNodesBbox.height,
@@ -33951,7 +33951,7 @@
}
}, [state.d3Initialised]);
return React__default.createElement("div", {
className: "react-graph__renderer",
className: "react-flow__renderer",
ref: rendererNode
}, React__default.createElement(NodeRenderer, {
nodeTypes: props.nodeTypes,
@@ -33965,7 +33965,7 @@
connectionLineType: props.connectionLineType,
connectionLineStyle: props.connectionLineStyle
}), 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() {
return setNodesSelection({
isActive: false
@@ -34011,7 +34011,7 @@
setPosition = _ref.setPosition,
onConnect = _ref.onConnect,
isTarget = _ref.isTarget;
var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
var containerBounds = document.querySelector('.react-flow').getBoundingClientRect();
setPosition({
x: evt.clientX - containerBounds.x,
y: evt.clientY - containerBounds.y
@@ -34066,7 +34066,7 @@
rest = _objectWithoutProperties(_ref2, ["type", "nodeId", "onConnect", "position", "setSourceId", "setPosition", "className", "id"]);
var isTarget = type === 'target';
var handleClasses = classnames('react-graph__handle', className, position, {
var handleClasses = classnames('react-flow__handle', className, position, {
source: !isTarget,
target: isTarget
});
@@ -34168,7 +34168,7 @@
style = _ref.style;
return React__default.createElement("div", {
style: _objectSpread2$1({}, nodeStyles$1, {}, style),
className: "react-graph__node-inner"
className: "react-flow__node-inner"
}, data.label, React__default.createElement(Handle, {
type: "source",
position: "bottom"
@@ -34334,7 +34334,7 @@
x: xPos,
y: yPos
};
var nodeClasses = classnames('react-graph__node', {
var nodeClasses = classnames('react-flow__node', {
selected: selected
});
var nodeStyle = {
@@ -34522,7 +34522,7 @@
type = props.type,
selected = props.selected,
onClick = props.onClick;
var edgeClasses = classnames('react-graph__edge', {
var edgeClasses = classnames('react-flow__edge', {
selected: selected,
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);
if (process.env.NODE_ENV !== 'production') {
@@ -34679,7 +34679,7 @@
}, []);
return React__default.createElement("div", {
style: style,
className: "react-graph"
className: "react-flow"
}, React__default.createElement(StoreProvider, {
store: store
}, React__default.createElement(ElementUpdater$1, {
@@ -34745,7 +34745,7 @@
transform: s.transform
};
});
var mapClasses = classnames('react-graph__minimap', className);
var mapClasses = classnames('react-flow__minimap', className);
var nodePositions = state.nodes.map(function (n) {
return n.__rg.position;
});

2
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{
"name": "react-graph",
"name": "react-flow",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,

2
package.json
View File

@@ -1,5 +1,5 @@
{
"name": "react-graph",
"name": "react-flow",
"version": "1.0.0",
"module": "dist/ReactGraph.esm.js",
"browser": "dist/ReactGraph.js",

2
src/Plugins/MiniMap/index.js
View File

@@ -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;

2
src/components/ConnectionLine/index.js
View File

@@ -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;

2
src/components/Edges/wrapEdge.js
View File

@@ -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;

4
src/components/Handle/BaseHandle.js
View File

@@ -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 }

2
src/components/Nodes/wrapNode.js
View File

@@ -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 = () => {

4
src/components/NodesSelection/index.js
View File

@@ -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,

6
src/components/UserSelection/index.js
View File

@@ -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,

2
src/container/EdgeRenderer/index.js
View File

@@ -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))}

32
src/ReactGraph/index.js → src/container/Editor/index.js
View File

@@ -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;

4
src/container/GraphView/index.js
View File

@@ -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}
/>

2
src/container/NodeRenderer/index.js
View File

@@ -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))}

4
src/index.js
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 MiniMap } from './plugins/MiniMap';

2
src/actions.js → src/store/actions.js
View File

@@ -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) => {

0
src/store.js → src/store/index.js
View File

22
src/style.css
View File

@@ -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%;

2
src/utils/graph.js
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 rendererX = (x - transform[0]) * (1 / [transform[2]]);