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

feat(renderer): add connection line

Browse Source
This commit is contained in:
moklick
2019-07-31 11:32:56 +02:00
parent 915cba94a7
commit 2d5e2d9241
18 changed files with 336 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/ReactGraph.js
Vendored
+124 -49
View File
@@ -29926,7 +29926,6 @@
nodesSelectionActive: false,
selectionActive: false,
selection: {},
isConnecting: false,
connectionSourceId: null,
connectionPosition: {
x: 0,
@@ -30032,6 +30031,17 @@
});
}
case SET_CONNECTING:
{
if (!action.payload.connectionPosition) {
return _objectSpread2({}, state, {
connectionSourceId: action.payload.connectionSourceId
});
}
return _objectSpread2({}, state, {}, action.payload);
}
case SET_NODES:
case SET_EDGES:
case UPDATE_TRANSFORM:
@@ -30039,7 +30049,6 @@
case UPDATE_SIZE:
case SET_SELECTION:
case SET_SELECTED_ELEMENTS:
case SET_CONNECTING:
case SET_CONNECTION_POS:
return _objectSpread2({}, state, {}, action.payload);
@@ -30167,10 +30176,36 @@
}
};
};
var setConnecting = function setConnecting(_ref4) {
var connectionSourceId = _ref4.connectionSourceId,
_ref4$connectionPosit = _ref4.connectionPosition,
connectionPosition = _ref4$connectionPosit === void 0 ? false : _ref4$connectionPosit;
return {
type: SET_CONNECTING,
payload: {
connectionSourceId: connectionSourceId,
connectionPosition: connectionPosition
}
};
};
var setConnectionPos = function setConnectionPos(_ref5) {
var x = _ref5.x,
y = _ref5.y;
return {
type: SET_CONNECTION_POS,
payload: {
connectionPosition: {
x: x,
y: y
}
}
};
};
var GraphContext = React.createContext({});
var Provider = function Provider(props) {
var children = props.children;
var children = props.children,
onConnect = props.onConnect;
var _useReducer = React.useReducer(reducer, initialState),
_useReducer2 = _slicedToArray(_useReducer, 2),
@@ -30204,6 +30239,7 @@
});
var graphContext = {
state: state,
onConnect: onConnect,
dispatch: dispatch
};
return React__default.createElement(GraphContext.Provider, {
@@ -30319,7 +30355,7 @@
}());
});
var ConnectorEdge = (function (props) {
var ConnectionLine = (function (props) {
var _useState = React.useState(null),
_useState2 = _slicedToArray(_useState, 2),
sourceNode = _useState2[0],
@@ -30335,8 +30371,8 @@
return null;
}
var style = props.style || {};
var className = classnames('react-graph__edge', 'connector', props.className);
var style = props.connectionLineStyle || {};
var className = classnames('react-graph__edge', 'connection', props.className);
var sourceHandle = sourceNode.__rg.handleBounds.source;
var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
@@ -30344,13 +30380,21 @@
var sourceY = sourceNode.__rg.position.y + sourceHandleY;
var targetX = props.connectionPosition.x * (1 / props.transform[2]) - props.transform[0] * (1 / props.transform[2]);
var targetY = props.connectionPosition.y * (1 / props.transform[2]) - props.transform[1] * (1 / props.transform[2]);
var yOffset = Math.abs(targetY - sourceY) / 2;
var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
var dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
return React__default.createElement("path", _extends({
className: className,
var dAttr = '';
if (props.connectionLineType === 'bezier') {
var yOffset = Math.abs(targetY - sourceY) / 2;
var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
} else {
dAttr = "M".concat(sourceX, ",").concat(sourceY, " ").concat(targetX, ",").concat(targetY);
}
return React__default.createElement("g", {
className: className
}, React__default.createElement("path", _extends({
d: dAttr
}, style));
}, style)));
});
var EdgeRenderer =
@@ -30399,7 +30443,9 @@
var _this$props = this.props,
width = _this$props.width,
height = _this$props.height,
onElementClick = _this$props.onElementClick;
onElementClick = _this$props.onElementClick,
connectionLineStyle = _this$props.connectionLineStyle,
connectionLineType = _this$props.connectionLineType;
if (!width) {
return null;
@@ -30415,11 +30461,13 @@
transform: "translate(".concat(state.transform[0], ",").concat(state.transform[1], ") scale(").concat(state.transform[2], ")")
}, state.edges.map(function (e) {
return _this.renderEdge(e, state.nodes, onElementClick);
}), state.isConnecting && React__default.createElement(ConnectorEdge, {
}), state.connectionSourceId && React__default.createElement(ConnectionLine, {
nodes: state.nodes,
connectionSourceId: state.connectionSourceId,
connectionPosition: state.connectionPosition,
transform: state.transform
transform: state.transform,
connectionLineStyle: connectionLineStyle,
connectionLineType: connectionLineType
})));
});
}
@@ -32926,13 +32974,14 @@
}, React__default.createElement(NodeRenderer, {
nodeTypes: props.nodeTypes,
onElementClick: props.onElementClick,
onNodeDragStop: props.onNodeDragStop,
onConnect: props.onConnect
onNodeDragStop: props.onNodeDragStop
}), React__default.createElement(EdgeRenderer, {
width: state.width,
height: state.height,
edgeTypes: props.edgeTypes,
onElementClick: props.onElementClick
onElementClick: props.onElementClick,
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",
onClick: function onClick() {
@@ -32975,11 +33024,43 @@
var Provider$1 = NodeIdContext.Provider;
var Consumer$1 = NodeIdContext.Consumer;
function _onDragStart(evt, nodeId, dispatch) {
evt.dataTransfer.setData('text/plain', nodeId); // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
}
function _onMouseDown(evt, nodeId, dispatch, onConnect) {
var connectionPosition = {
x: evt.clientX,
y: evt.clientY
};
dispatch(setConnecting({
connectionPosition: connectionPosition,
connectionSourceId: nodeId
}));
function onDragStop(evt, dispatch) {// dispatch(setConnecting({ isConnecting: false }));
function onMouseMove(evt) {
dispatch(setConnectionPos({
x: evt.clientX,
y: evt.clientY
}));
}
function onMouseUp(evt) {
var elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
if (elementBelow && elementBelow.classList.contains('target')) {
var targetId = elementBelow.getAttribute('data-nodeid');
onConnect({
source: nodeId,
target: targetId
});
}
dispatch(setConnecting({
connectionSourceId: false
}));
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}
var BaseHandle = React.memo(function (_ref) {
@@ -32992,7 +33073,8 @@
var nodeId = React.useContext(NodeIdContext);
var _useContext = React.useContext(GraphContext),
dispatch = _useContext.dispatch;
dispatch = _useContext.dispatch,
onConnect = _useContext.onConnect;
var handleClasses = classnames('react-graph__handle', className, {
source: source,
@@ -33001,19 +33083,17 @@
if (target) {
return React__default.createElement("div", _extends({
"data-nodeid": nodeId,
className: handleClasses
}, rest));
}
return React__default.createElement("div", _extends({
draggable: true,
onDragStart: function onDragStart(evt) {
return _onDragStart(evt, nodeId);
},
onDragEnd: function onDragEnd(evt) {
return onDragStop();
},
className: handleClasses
"data-nodeid": nodeId,
className: handleClasses,
onMouseDown: function onMouseDown(evt) {
return _onMouseDown(evt, nodeId, dispatch, onConnect);
}
}, rest));
});
@@ -33077,7 +33157,7 @@
};
var isHandle = function isHandle(e) {
return e.target.className && e.target.className.includes('source');
return e.target.className && e.target.className.includes && e.target.className.includes('source');
};
var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k) {
@@ -33124,7 +33204,6 @@
type = props.type,
id = props.id,
__rg = props.__rg,
onConnect = props.onConnect,
onNodeDragStop = props.onNodeDragStop;
var position = __rg.position;
@@ -33208,15 +33287,6 @@
});
};
var onDrop = function onDrop(evt) {
evt.preventDefault();
var source = evt.dataTransfer.getData('text/plain');
onConnect({
source: source,
target: id
});
};
return React__default.createElement(reactDraggable.DraggableCore, {
grid: [1, 1],
onStart: onStart,
@@ -33224,7 +33294,6 @@
onStop: onStop,
scale: k
}, React__default.createElement("div", {
onDrop: onDrop,
onDragOver: onDragOver,
className: nodeClasses,
ref: nodeElement,
@@ -33382,7 +33451,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.connector {\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}\n\n.react-graph__handle.source {\n top: auto;\n left: 50%;\n bottom: 0;\n transform: translate(-50%, 0);\n cursor: crosshair;\n }\n\n.react-graph__handle.target {\n left: 50%;\n top: 0;\n transform: translate(-50%, 0);\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-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}\n\n.react-graph__handle.source {\n top: auto;\n left: 50%;\n bottom: 0;\n transform: translate(-50%, 0);\n cursor: crosshair;\n }\n\n.react-graph__handle.target {\n left: 50%;\n top: 0;\n transform: translate(-50%, 0);\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 }";
styleInject(css);
var ReactGraph =
@@ -33414,7 +33483,9 @@
elements = _this$props.elements,
onElementsRemove = _this$props.onElementsRemove,
onConnect = _this$props.onConnect,
onNodeDragStop = _this$props.onNodeDragStop;
onNodeDragStop = _this$props.onNodeDragStop,
connectionLineType = _this$props.connectionLineType,
connectionLineStyle = _this$props.connectionLineStyle;
var _elements$map$reduce = elements.map(parseElements).reduce(separateElements, {}),
nodes = _elements$map$reduce.nodes,
@@ -33425,16 +33496,18 @@
className: "react-graph"
}, React__default.createElement(Provider, {
nodes: nodes,
edges: edges
edges: edges,
onConnect: onConnect
}, React__default.createElement(GraphView$1, {
onLoad: onLoad,
onMove: onMove,
onChange: onChange,
onElementClick: onElementClick,
onConnect: onConnect,
onNodeDragStop: onNodeDragStop,
nodeTypes: this.nodeTypes,
edgeTypes: this.edgeTypes
edgeTypes: this.edgeTypes,
connectionLineType: connectionLineType,
connectionLineStyle: connectionLineStyle
}), React__default.createElement(GlobalKeyHandler, {
onElementsRemove: onElementsRemove
}), children));
@@ -33460,7 +33533,9 @@
edgeTypes: {
"default": BezierEdge,
straight: StraightEdge
}
},
connectionLineType: 'bezier',
connectionLineStyle: {}
};
exports.SourceHandle = SourceHandle;
example/SimpleGraph.js
+10 -7
View File
@@ -43,13 +43,13 @@ class App extends PureComponent {
this.state = {
graphLoaded: false,
elements: [
{ id: '1', type: 'input', data: { label: 'Tests' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: 'This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: 'I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
{ id: '4', type: 'output', data: { label: 'nody nodes' }, position: { x: 50, y: 300 } },
{ id: '5', type: 'default', data: { label: 'Another node'}, position: { x: 400, y: 300 } },
{ id: '6', type: 'special', onChange, data: { label: 'no option selected' }, position: { x: 425, y: 375 } },
{ id: '7', type: 'output', data: { label: 'output' }, position: { x: 250, y: 500 } },
{ id: '1', type: 'input', data: { label: '1 Tests' }, position: { x: 250, y: 5 } },
{ id: '2', data: { label: '2 This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ id: '3', data: { label: '3 I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
{ id: '4', type: 'output', data: { label: '4 nody nodes' }, position: { x: 50, y: 300 } },
{ id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
{ id: '6', type: 'special', onChange, data: { label: '6 no option selected' }, position: { x: 425, y: 375 } },
{ id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
{ source: '1', target: '2', animated: true },
{ source: '2', target: '3' },
{ source: '3', target: '4' },
@@ -113,6 +113,7 @@ class App extends PureComponent {
}
onConnect(params) {
console.log('connect', params);
this.setState(prevState => ({
elements: prevState.elements.concat(params)
}));
@@ -132,6 +133,8 @@ class App extends PureComponent {
nodeTypes={{
special: SpecialNode
}}
connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
connectionLineType="bezier"
>
<button
type="button"
example/build/example.e31bb0bc.css
+2 -1
View File
@@ -62,7 +62,8 @@
animation: dashdraw 0.5s linear infinite;
}
.react-graph__edge.connector {
.react-graph__edge.connection {
stroke: '#ddd';
pointer-events: none;
}
example/build/example.e31bb0bc.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,oBAAoB;EACpB,UAAU;AACZ;;AAEA;EACE,UAAU;EACV,YAAY;EACZ,eAAe;EACf,mBAAmB;AAcrB;;AAZE;IACE,YAAY;EACd;;AAEA;IACE,mBAAmB;IACnB,gDAAwC;YAAxC,wCAAwC;EAC1C;;AAEA;IACE,oBAAoB;EACtB;;AAGF;EACE,MAAM,qBAAqB;AAC7B;;AAFA;EACE,MAAM,qBAAqB;AAC7B;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACV,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,uBAAuB;EACvB,eAAe;EACf,kBAAkB;EAClB,oBAAY;EAAZ,YAAY;EACZ,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;AASvB;;AAPE;IACE,6CAA6C;EAC/C;;AAEA;IACE,0BAA0B;EAC5B;;AAGF;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,oCAAoC;AAetC;;AAbE;IACE,SAAS;IACT,SAAS;IACT,SAAS;IACT,6BAA6B;IAC7B,iBAAiB;EACnB;;AAEA;IACE,SAAS;IACT,MAAM;IACN,6BAA6B;EAC/B;;AAGF;EACE,UAAU;EACV,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,MAAM;EACN,OAAO;EACP,0BAA0B;EAC1B,oBAAoB;AAQtB;;AANE;IACE,kBAAkB;IAClB,kCAAkC;IAClC,wCAAwC;IACxC,mBAAmB;EACrB","file":"example.e31bb0bc.css","sourceRoot":"..","sourcesContent":[".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 &.selected {\n stroke: #555;\n }\n\n &.animated {\n stroke-dasharray: 5;\n animation: dashdraw 0.5s linear infinite;\n }\n\n &.connector {\n pointer-events: none;\n }\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: grab;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n\n &:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n &.selected > * {\n box-shadow: 0 0 0 2px #555;\n }\n}\n\n.react-graph__handle {\n position: absolute;\n width: 10px;\n height: 8px;\n background: rgba(255, 255, 255, 0.4);\n\n &.source {\n top: auto;\n left: 50%;\n bottom: 0;\n transform: translate(-50%, 0);\n cursor: crosshair;\n }\n\n &.target {\n left: 50%;\n top: 0;\n transform: translate(-50%, 0);\n }\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 &-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 }\n}"]}
{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,UAAU;AACZ;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,kCAAkC;EAClC,wCAAwC;AAC1C;;AAEA;EACE,kBAAkB;EAClB,MAAM;EACN,OAAO;EACP,oBAAoB;EACpB,UAAU;AACZ;;AAEA;EACE,UAAU;EACV,YAAY;EACZ,eAAe;EACf,mBAAmB;AAerB;;AAbE;IACE,YAAY;EACd;;AAEA;IACE,mBAAmB;IACnB,gDAAwC;YAAxC,wCAAwC;EAC1C;;AAEA;IACE,cAAc;IACd,oBAAoB;EACtB;;AAGF;EACE,MAAM,qBAAqB;AAC7B;;AAFA;EACE,MAAM,qBAAqB;AAC7B;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,kBAAkB;EAClB,UAAU;EACV,oBAAoB;EACpB,qBAAqB;AACvB;;AAEA;EACE,kBAAkB;EAClB,WAAW;EACX,uBAAuB;EACvB,eAAe;EACf,kBAAkB;EAClB,oBAAY;EAAZ,YAAY;EACZ,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;EACjB,mBAAmB;EACnB,qBAAqB;AASvB;;AAPE;IACE,6CAA6C;EAC/C;;AAEA;IACE,0BAA0B;EAC5B;;AAGF;EACE,kBAAkB;EAClB,WAAW;EACX,WAAW;EACX,oCAAoC;AAetC;;AAbE;IACE,SAAS;IACT,SAAS;IACT,SAAS;IACT,6BAA6B;IAC7B,iBAAiB;EACnB;;AAEA;IACE,SAAS;IACT,MAAM;IACN,6BAA6B;EAC/B;;AAGF;EACE,UAAU;EACV,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,MAAM;EACN,OAAO;EACP,0BAA0B;EAC1B,oBAAoB;AAQtB;;AANE;IACE,kBAAkB;IAClB,kCAAkC;IAClC,wCAAwC;IACxC,mBAAmB;EACrB","file":"example.e31bb0bc.css","sourceRoot":"..","sourcesContent":[".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 &.selected {\n stroke: #555;\n }\n\n &.animated {\n stroke-dasharray: 5;\n animation: dashdraw 0.5s linear infinite;\n }\n\n &.connection {\n stroke: '#ddd';\n pointer-events: none;\n }\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: grab;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n\n &:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n &.selected > * {\n box-shadow: 0 0 0 2px #555;\n }\n}\n\n.react-graph__handle {\n position: absolute;\n width: 10px;\n height: 8px;\n background: rgba(255, 255, 255, 0.4);\n\n &.source {\n top: auto;\n left: 50%;\n bottom: 0;\n transform: translate(-50%, 0);\n cursor: crosshair;\n }\n\n &.target {\n left: 50%;\n top: 0;\n transform: translate(-50%, 0);\n }\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 &-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 }\n}"]}
example/build/example.e31bb0bc.js
+119 -65
View File
@@ -37768,7 +37768,6 @@ var initialState = {
nodesSelectionActive: false,
selectionActive: false,
selection: {},
isConnecting: false,
connectionSourceId: null,
connectionPosition: {
x: 0,
@@ -37878,6 +37877,17 @@ var reducer = function reducer(state, action) {
});
}
case SET_CONNECTING:
{
if (!action.payload.connectionPosition) {
return _objectSpread({}, state, {
connectionSourceId: action.payload.connectionSourceId
});
}
return _objectSpread({}, state, {}, action.payload);
}
case SET_NODES:
case SET_EDGES:
case UPDATE_TRANSFORM:
@@ -37885,7 +37895,6 @@ var reducer = function reducer(state, action) {
case UPDATE_SIZE:
case SET_SELECTION:
case SET_SELECTED_ELEMENTS:
case SET_CONNECTING:
case SET_CONNECTION_POS:
return _objectSpread({}, state, {}, action.payload);
@@ -38079,13 +38088,14 @@ var updateSelection = function updateSelection(selection) {
exports.updateSelection = updateSelection;
var setConnecting = function setConnecting(_ref4) {
var isConnecting = _ref4.isConnecting,
connectionSourceId = _ref4.connectionSourceId;
var connectionSourceId = _ref4.connectionSourceId,
_ref4$connectionPosit = _ref4.connectionPosition,
connectionPosition = _ref4$connectionPosit === void 0 ? false : _ref4$connectionPosit;
return {
type: _index.SET_CONNECTING,
payload: {
isConnecting: isConnecting,
connectionSourceId: connectionSourceId
connectionSourceId: connectionSourceId,
connectionPosition: connectionPosition
}
};
};
@@ -38147,7 +38157,8 @@ var GraphContext = (0, _react.createContext)({});
exports.GraphContext = GraphContext;
var Provider = function Provider(props) {
var children = props.children;
var children = props.children,
onConnect = props.onConnect;
var _useReducer = (0, _react.useReducer)(_state.reducer, _state.initialState),
_useReducer2 = _slicedToArray(_useReducer, 2),
@@ -38181,6 +38192,7 @@ var Provider = function Provider(props) {
});
var graphContext = {
state: state,
onConnect: onConnect,
dispatch: dispatch
};
return _react.default.createElement(GraphContext.Provider, {
@@ -38340,7 +38352,7 @@ var define;
}
}());
},{}],"../src/ConnectorEdge/index.js":[function(require,module,exports) {
},{}],"../src/ConnectionLine/index.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -38382,8 +38394,8 @@ var _default = function _default(props) {
return null;
}
var style = props.style || {};
var className = (0, _classnames.default)('react-graph__edge', 'connector', props.className);
var style = props.connectionLineStyle || {};
var className = (0, _classnames.default)('react-graph__edge', 'connection', props.className);
var sourceHandle = sourceNode.__rg.handleBounds.source;
var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
var sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rg.height;
@@ -38391,13 +38403,21 @@ var _default = function _default(props) {
var sourceY = sourceNode.__rg.position.y + sourceHandleY;
var targetX = props.connectionPosition.x * (1 / props.transform[2]) - props.transform[0] * (1 / props.transform[2]);
var targetY = props.connectionPosition.y * (1 / props.transform[2]) - props.transform[1] * (1 / props.transform[2]);
var yOffset = Math.abs(targetY - sourceY) / 2;
var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
var dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
return _react.default.createElement("path", _extends({
className: className,
var dAttr = '';
if (props.connectionLineType === 'bezier') {
var yOffset = Math.abs(targetY - sourceY) / 2;
var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
dAttr = "M".concat(sourceX, ",").concat(sourceY, " C").concat(sourceX, ",").concat(centerY, " ").concat(targetX, ",").concat(centerY, " ").concat(targetX, ",").concat(targetY);
} else {
dAttr = "M".concat(sourceX, ",").concat(sourceY, " ").concat(targetX, ",").concat(targetY);
}
return _react.default.createElement("g", {
className: className
}, _react.default.createElement("path", _extends({
d: dAttr
}, style));
}, style)));
};
exports.default = _default;
@@ -38413,7 +38433,7 @@ var _react = _interopRequireWildcard(require("react"));
var _GraphContext = require("../GraphContext");
var _ConnectorEdge = _interopRequireDefault(require("../ConnectorEdge"));
var _ConnectionLine = _interopRequireDefault(require("../ConnectionLine"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38485,7 +38505,9 @@ function (_PureComponent) {
var _this$props = this.props,
width = _this$props.width,
height = _this$props.height,
onElementClick = _this$props.onElementClick;
onElementClick = _this$props.onElementClick,
connectionLineStyle = _this$props.connectionLineStyle,
connectionLineType = _this$props.connectionLineType;
if (!width) {
return null;
@@ -38501,11 +38523,13 @@ function (_PureComponent) {
transform: "translate(".concat(state.transform[0], ",").concat(state.transform[1], ") scale(").concat(state.transform[2], ")")
}, state.edges.map(function (e) {
return _this.renderEdge(e, state.nodes, onElementClick);
}), state.isConnecting && _react.default.createElement(_ConnectorEdge.default, {
}), state.connectionSourceId && _react.default.createElement(_ConnectionLine.default, {
nodes: state.nodes,
connectionSourceId: state.connectionSourceId,
connectionPosition: state.connectionPosition,
transform: state.transform
transform: state.transform,
connectionLineStyle: connectionLineStyle,
connectionLineType: connectionLineType
})));
});
}
@@ -38516,7 +38540,7 @@ function (_PureComponent) {
var _default = EdgeRenderer;
exports.default = _default;
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectorEdge":"../src/ConnectorEdge/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectionLine":"../src/ConnectionLine/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41136,13 +41160,14 @@ var GraphView = (0, _react.memo)(function (props) {
}, _react.default.createElement(_NodeRenderer.default, {
nodeTypes: props.nodeTypes,
onElementClick: props.onElementClick,
onNodeDragStop: props.onNodeDragStop,
onConnect: props.onConnect
onNodeDragStop: props.onNodeDragStop
}), _react.default.createElement(_EdgeRenderer.default, {
width: state.width,
height: state.height,
edgeTypes: props.edgeTypes,
onElementClick: props.onElementClick
onElementClick: props.onElementClick,
connectionLineType: props.connectionLineType,
connectionLineStyle: props.connectionLineStyle
}), shiftPressed && _react.default.createElement(_UserSelection.default, null), state.nodesSelectionActive && _react.default.createElement(_NodesSelection.default, null), _react.default.createElement("div", {
className: "react-graph__zoompane",
onClick: function onClick() {
@@ -41256,14 +41281,43 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _onDragStart(evt, nodeId, dispatch) {
evt.dataTransfer.setData('text/plain', nodeId); // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
}
function _onMouseDown(evt, nodeId, dispatch, onConnect) {
var connectionPosition = {
x: evt.clientX,
y: evt.clientY
};
dispatch((0, _actions.setConnecting)({
connectionPosition: connectionPosition,
connectionSourceId: nodeId
}));
function onDragStop(evt, dispatch) {// dispatch(setConnecting({ isConnecting: false }));
}
function onMouseMove(evt) {
dispatch((0, _actions.setConnectionPos)({
x: evt.clientX,
y: evt.clientY
}));
}
function onDrag(evt, dispatch) {// dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
function onMouseUp(evt) {
var elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
if (elementBelow && elementBelow.classList.contains('target')) {
var targetId = elementBelow.getAttribute('data-nodeid');
onConnect({
source: nodeId,
target: targetId
});
}
dispatch((0, _actions.setConnecting)({
connectionSourceId: false
}));
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
}
var _default = (0, _react.memo)(function (_ref) {
@@ -41276,7 +41330,8 @@ var _default = (0, _react.memo)(function (_ref) {
var nodeId = (0, _react.useContext)(_NodeIdContext.default);
var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
dispatch = _useContext.dispatch;
dispatch = _useContext.dispatch,
onConnect = _useContext.onConnect;
var handleClasses = (0, _classnames.default)('react-graph__handle', className, {
source: source,
@@ -41285,19 +41340,17 @@ var _default = (0, _react.memo)(function (_ref) {
if (target) {
return _react.default.createElement("div", _extends({
"data-nodeid": nodeId,
className: handleClasses
}, rest));
}
return _react.default.createElement("div", _extends({
draggable: true,
onDragStart: function onDragStart(evt) {
return _onDragStart(evt, nodeId, dispatch);
},
onDragEnd: function onDragEnd(evt) {
return onDragStop(evt, dispatch);
},
className: handleClasses
"data-nodeid": nodeId,
className: handleClasses,
onMouseDown: function onMouseDown(evt) {
return _onMouseDown(evt, nodeId, dispatch, onConnect);
}
}, rest));
});
@@ -41500,7 +41553,7 @@ var isInput = function isInput(e) {
};
var isHandle = function isHandle(e) {
return e.target.className && e.target.className.includes('source');
return e.target.className && e.target.className.includes && e.target.className.includes('source');
};
var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k) {
@@ -41547,7 +41600,6 @@ var _default = function _default(NodeComponent) {
type = props.type,
id = props.id,
__rg = props.__rg,
onConnect = props.onConnect,
onNodeDragStop = props.onNodeDragStop;
var position = __rg.position;
@@ -41631,15 +41683,6 @@ var _default = function _default(NodeComponent) {
});
};
var onDrop = function onDrop(evt) {
evt.preventDefault();
var source = evt.dataTransfer.getData('text/plain');
onConnect({
source: source,
target: id
});
};
return _react.default.createElement(_reactDraggable.default.DraggableCore, {
grid: [1, 1],
onStart: onStart,
@@ -41647,7 +41690,6 @@ var _default = function _default(NodeComponent) {
onStop: onStop,
scale: k
}, _react.default.createElement("div", {
onDrop: onDrop,
onDragOver: onDragOver,
className: nodeClasses,
ref: nodeElement,
@@ -42033,7 +42075,9 @@ function (_PureComponent) {
elements = _this$props.elements,
onElementsRemove = _this$props.onElementsRemove,
onConnect = _this$props.onConnect,
onNodeDragStop = _this$props.onNodeDragStop;
onNodeDragStop = _this$props.onNodeDragStop,
connectionLineType = _this$props.connectionLineType,
connectionLineStyle = _this$props.connectionLineStyle;
var _elements$map$reduce = elements.map(_graphUtils.parseElements).reduce(_graphUtils.separateElements, {}),
nodes = _elements$map$reduce.nodes,
@@ -42044,16 +42088,18 @@ function (_PureComponent) {
className: "react-graph"
}, _react.default.createElement(_GraphContext.Provider, {
nodes: nodes,
edges: edges
edges: edges,
onConnect: onConnect
}, _react.default.createElement(_GraphView.default, {
onLoad: onLoad,
onMove: onMove,
onChange: onChange,
onElementClick: onElementClick,
onConnect: onConnect,
onNodeDragStop: onNodeDragStop,
nodeTypes: this.nodeTypes,
edgeTypes: this.edgeTypes
edgeTypes: this.edgeTypes,
connectionLineType: connectionLineType,
connectionLineStyle: connectionLineStyle
}), _react.default.createElement(_GlobalKeyHandler.default, {
onElementsRemove: onElementsRemove
}), children));
@@ -42079,7 +42125,9 @@ ReactGraph.defaultProps = {
edgeTypes: {
default: _BezierEdge.default,
straight: _StraightEdge.default
}
},
connectionLineType: 'bezier',
connectionLineStyle: {}
};
var _default = ReactGraph;
exports.default = _default;
@@ -42247,7 +42295,7 @@ function (_PureComponent) {
id: '1',
type: 'input',
data: {
label: 'Tests'
label: '1 Tests'
},
position: {
x: 250,
@@ -42256,7 +42304,7 @@ function (_PureComponent) {
}, {
id: '2',
data: {
label: 'This is a node This is a node This is a node This is a node'
label: '2 This is a node This is a node This is a node This is a node'
},
position: {
x: 100,
@@ -42265,7 +42313,7 @@ function (_PureComponent) {
}, {
id: '3',
data: {
label: 'I bring my own style'
label: '3 I bring my own style'
},
position: {
x: 100,
@@ -42280,7 +42328,7 @@ function (_PureComponent) {
id: '4',
type: 'output',
data: {
label: 'nody nodes'
label: '4 nody nodes'
},
position: {
x: 50,
@@ -42290,7 +42338,7 @@ function (_PureComponent) {
id: '5',
type: 'default',
data: {
label: 'Another node'
label: '5 Another node'
},
position: {
x: 400,
@@ -42301,7 +42349,7 @@ function (_PureComponent) {
type: 'special',
onChange: onChange,
data: {
label: 'no option selected'
label: '6 no option selected'
},
position: {
x: 425,
@@ -42311,7 +42359,7 @@ function (_PureComponent) {
id: '7',
type: 'output',
data: {
label: 'output'
label: '7 output'
},
position: {
x: 250,
@@ -42421,6 +42469,7 @@ function (_PureComponent) {
}, {
key: "onConnect",
value: function onConnect(params) {
console.log('connect', params);
this.setState(function (prevState) {
return {
elements: prevState.elements.concat(params)
@@ -42458,7 +42507,12 @@ function (_PureComponent) {
},
nodeTypes: {
special: SpecialNode
}
},
connectionLineStyle: {
stroke: '#ddd',
strokeWidth: 2
},
connectionLineType: "bezier"
}, _react.default.createElement("button", {
type: "button",
onClick: function onClick() {
@@ -42536,7 +42590,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "54380" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "55285" + '/');
ws.onmessage = function (event) {
checkedAssets = {};
example/build/example.e31bb0bc.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
example/build/index.js
+1 -1
View File
@@ -212,7 +212,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "54380" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "55285" + '/');
ws.onmessage = function (event) {
checkedAssets = {};
example/build/index.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/ConnectorEdge/index.js → src/ConnectionLine/index.js
+18 -10
View File
@@ -7,12 +7,13 @@ export default (props) => {
setSourceNode(props.nodes.find(n => n.id === props.connectionSourceId));
}, []);
if (!sourceNode) {
return null;
}
const style = props.style || {};
const className = cx('react-graph__edge', 'connector', props.className);
const style = props.connectionLineStyle || {};
const className = cx('react-graph__edge', 'connection', props.className);
const sourceHandle = sourceNode.__rg.handleBounds.source;
const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
@@ -23,15 +24,22 @@ export default (props) => {
const targetX = (props.connectionPosition.x * (1 / props.transform[2])) - (props.transform[0] * (1 / props.transform[2]));
const targetY = (props.connectionPosition.y * (1 / props.transform[2])) - (props.transform[1] * (1 / props.transform[2]));
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
const dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
let dAttr = '';
if (props.connectionLineType === 'bezier') {
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
dAttr = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
} else {
dAttr = `M${sourceX},${sourceY} ${targetX},${targetY}`;
}
return (
<path
className={className}
d={dAttr}
{...style}
/>
<g className={className}>
<path
d={dAttr}
{...style}
/>
</g>
);
};
src/EdgeRenderer/index.js
+9 -4
View File
@@ -1,7 +1,7 @@
import React, { PureComponent } from 'react';
import { Consumer } from '../GraphContext';
import ConnectorEdge from '../ConnectorEdge';
import ConnectionLine from '../ConnectionLine';
class EdgeRenderer extends PureComponent {
renderEdge(e, nodes, onElementClick) {
@@ -31,7 +31,10 @@ class EdgeRenderer extends PureComponent {
}
render() {
const { width, height, onElementClick } = this.props;
const {
width, height, onElementClick,
connectionLineStyle, connectionLineType
} = this.props;
if (!width) {
return null;
@@ -49,12 +52,14 @@ class EdgeRenderer extends PureComponent {
transform={`translate(${state.transform[0]},${state.transform[1]}) scale(${state.transform[2]})`}
>
{state.edges.map(e => this.renderEdge(e, state.nodes, onElementClick))}
{state.isConnecting && (
<ConnectorEdge
{state.connectionSourceId && (
<ConnectionLine
nodes={state.nodes}
connectionSourceId={state.connectionSourceId}
connectionPosition={state.connectionPosition}
transform={state.transform}
connectionLineStyle={connectionLineStyle}
connectionLineType={connectionLineType}
/>
)}
</g>
src/GraphContext/index.js
+3 -1
View File
@@ -9,7 +9,8 @@ export const GraphContext = createContext({});
export const Provider = (props) => {
const {
children
children,
onConnect
} = props;
const [state, dispatch] = useReducer(reducer, initialState);
@@ -42,6 +43,7 @@ export const Provider = (props) => {
const graphContext = {
state,
onConnect,
dispatch
};
src/GraphView/index.js
+2 -1
View File
@@ -83,13 +83,14 @@ const GraphView = memo((props) => {
nodeTypes={props.nodeTypes}
onElementClick={props.onElementClick}
onNodeDragStop={props.onNodeDragStop}
onConnect={props.onConnect}
/>
<EdgeRenderer
width={state.width}
height={state.height}
edgeTypes={props.edgeTypes}
onElementClick={props.onElementClick}
connectionLineType={props.connectionLineType}
connectionLineStyle={props.connectionLineStyle}
/>
{shiftPressed && <UserSelection />}
{state.nodesSelectionActive && <NodesSelection />}
src/NodeRenderer/HandleTypes/BaseHandle.js
+24 -13
View File
@@ -5,23 +5,34 @@ import NodeIdContext from '../NodeIdContext'
import { GraphContext } from '../../GraphContext';
import { setConnecting, setConnectionPos } from '../../state/actions';
function onDragStart(evt, nodeId, dispatch) {
evt.dataTransfer.setData('text/plain', nodeId);
function onMouseDown(evt, nodeId, dispatch, onConnect) {
const connectionPosition = { x: evt.clientX, y: evt.clientY };
dispatch(setConnecting({ connectionPosition, connectionSourceId: nodeId }))
// dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
}
function onMouseMove(evt) {
dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
}
function onDragStop(evt, dispatch) {
// dispatch(setConnecting({ isConnecting: false }));
}
function onMouseUp(evt) {
const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
function onDrag(evt, dispatch) {
// dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
if (elementBelow && elementBelow.classList.contains('target')) {
const targetId = elementBelow.getAttribute('data-nodeid');
onConnect({ source: nodeId, target: targetId });
}
dispatch(setConnecting({ connectionSourceId: false }));
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp)
}
export default memo(({ source, target, className = null, ...rest }) => {
const nodeId = useContext(NodeIdContext);
const { dispatch } = useContext(GraphContext);
const { dispatch, onConnect } = useContext(GraphContext);
const handleClasses = cx(
'react-graph__handle',
className,
@@ -31,6 +42,7 @@ export default memo(({ source, target, className = null, ...rest }) => {
if (target) {
return (
<div
data-nodeid={nodeId}
className={handleClasses}
{...rest}
/>
@@ -39,10 +51,9 @@ export default memo(({ source, target, className = null, ...rest }) => {
return (
<div
draggable
onDragStart={evt => onDragStart(evt, nodeId, dispatch)}
onDragEnd={evt => onDragStop(evt, dispatch)}
data-nodeid={nodeId}
className={handleClasses}
onMouseDown={evt => onMouseDown(evt, nodeId, dispatch, onConnect)}
{...rest}
/>
);
src/NodeRenderer/NodeTypes/wrapNode.js
+2 -11
View File
@@ -8,7 +8,7 @@ import { isNode } from '../../graph-utils';
import { Provider } from '../NodeIdContext';
const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
const isHandle = e => e.target.className && e.target.className.includes('source');
const isHandle = e => e.target.className && e.target.className.includes && e.target.className.includes('source');
const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
const handle = nodeElement.querySelector(sel);
@@ -40,7 +40,7 @@ export default NodeComponent => memo((props) => {
const { state, dispatch } = useContext(GraphContext);
const [offset, setOffset] = useState({ x: 0, y: 0 });
const {
data, onClick, type, id, __rg, onConnect, onNodeDragStop
data, onClick, type, id, __rg, onNodeDragStop
} = props;
const { position } = __rg;
const [ x, y, k ] = state.transform;
@@ -104,14 +104,6 @@ export default NodeComponent => memo((props) => {
});
}
const onDrop = (evt) => {
evt.preventDefault();
const source = evt.dataTransfer.getData('text/plain');
onConnect({ source, target: id });
};
return (
<ReactDraggable.DraggableCore
grid={[1, 1]}
@@ -121,7 +113,6 @@ export default NodeComponent => memo((props) => {
scale={k}
>
<div
onDrop={onDrop}
onDragOver={onDragOver}
className={nodeClasses}
ref={nodeElement}
src/ReactGraph/index.js
+8 -4
View File
@@ -28,7 +28,8 @@ class ReactGraph extends PureComponent {
const {
style, onElementClick, children, onLoad,
onMove, onChange, elements, onElementsRemove,
onConnect, onNodeDragStop
onConnect, onNodeDragStop, connectionLineType,
connectionLineStyle
} = this.props;
const { nodes, edges } = elements
@@ -37,16 +38,17 @@ class ReactGraph extends PureComponent {
return (
<div style={style} className="react-graph">
<Provider nodes={nodes} edges={edges}>
<Provider nodes={nodes} edges={edges} onConnect={onConnect}>
<GraphView
onLoad={onLoad}
onMove={onMove}
onChange={onChange}
onElementClick={onElementClick}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
nodeTypes={this.nodeTypes}
edgeTypes={this.edgeTypes}
connectionLineType={connectionLineType}
connectionLineStyle={connectionLineStyle}
/>
<GlobalKeyHandler
onElementsRemove={onElementsRemove}
@@ -74,7 +76,9 @@ ReactGraph.defaultProps = {
edgeTypes: {
default: BezierEdge,
straight: StraightEdge
}
},
connectionLineType: 'bezier',
connectionLineStyle: {}
};
export default ReactGraph;
src/state/actions.js
+2 -2
View File
@@ -102,8 +102,8 @@ export const updateSelection = (selection) => {
};
};
export const setConnecting = ({ isConnecting, connectionSourceId }) => {
return { type: SET_CONNECTING, payload: { isConnecting, connectionSourceId }};
export const setConnecting = ({ connectionSourceId, connectionPosition = false}) => {
return { type: SET_CONNECTING, payload: { connectionSourceId, connectionPosition }};
};
export const setConnectionPos = ({ x, y }) => {
src/state/index.js
+7 -2
View File
@@ -37,7 +37,6 @@ export const initialState = {
selectionActive: false,
selection: {},
isConnecting: false,
connectionSourceId: null,
connectionPosition: { x: 0, y: 0 }
};
@@ -125,6 +124,13 @@ export const reducer = (state, action) => {
return { ...state, nodes: nextNodes, edges: nextEdges };
}
case SET_CONNECTING: {
if (!action.payload.connectionPosition) {
return { ...state, connectionSourceId: action.payload.connectionSourceId };
}
return { ...state, ...action.payload };
}
case SET_NODES:
case SET_EDGES:
case UPDATE_TRANSFORM:
@@ -132,7 +138,6 @@ export const reducer = (state, action) => {
case UPDATE_SIZE:
case SET_SELECTION:
case SET_SELECTED_ELEMENTS:
case SET_CONNECTING:
case SET_CONNECTION_POS:
return { ...state, ...action.payload };
default:
src/style.css
+2 -1
View File
@@ -60,7 +60,8 @@
animation: dashdraw 0.5s linear infinite;
}
&.connector {
&.connection {
stroke: '#ddd';
pointer-events: none;
}
}