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

feat(connection): target -> source

Browse Source
This commit is contained in:
moklick
2019-07-31 11:52:26 +02:00
parent 191bc11253
commit 9d7e7e6363
8 changed files with 81 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
dist/ReactGraph.js vendored
View File

@@ -33024,7 +33024,11 @@
var Provider$1 = NodeIdContext.Provider;
var Consumer$1 = NodeIdContext.Consumer;
function _onMouseDown(evt, nodeId, dispatch, onConnect) {
function _onMouseDown(evt, _ref) {
var nodeId = _ref.nodeId,
dispatch = _ref.dispatch,
onConnect = _ref.onConnect,
isTarget = _ref.isTarget;
var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
var connectionPosition = {
x: evt.clientX - containerBounds.x,
@@ -33045,12 +33049,20 @@
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
});
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
if (isTarget) {
var sourceId = elementBelow.getAttribute('data-nodeid');
onConnect({
source: sourceId,
target: nodeId
});
} else {
var targetId = elementBelow.getAttribute('data-nodeid');
onConnect({
source: nodeId,
target: targetId
});
}
}
dispatch(setConnecting({
@@ -33064,12 +33076,12 @@
document.addEventListener('mouseup', onMouseUp);
}
var BaseHandle = React.memo(function (_ref) {
var source = _ref.source,
target = _ref.target,
_ref$className = _ref.className,
className = _ref$className === void 0 ? null : _ref$className,
rest = _objectWithoutProperties(_ref, ["source", "target", "className"]);
var BaseHandle = React.memo(function (_ref2) {
var source = _ref2.source,
target = _ref2.target,
_ref2$className = _ref2.className,
className = _ref2$className === void 0 ? null : _ref2$className,
rest = _objectWithoutProperties(_ref2, ["source", "target", "className"]);
var nodeId = React.useContext(NodeIdContext);
@@ -33081,19 +33093,16 @@
source: source,
target: target
});
if (target) {
return React__default.createElement("div", _extends({
"data-nodeid": nodeId,
className: handleClasses
}, rest));
}
return React__default.createElement("div", _extends({
"data-nodeid": nodeId,
className: handleClasses,
onMouseDown: function onMouseDown(evt) {
return _onMouseDown(evt, nodeId, dispatch, onConnect);
return _onMouseDown(evt, {
nodeId: nodeId,
dispatch: dispatch,
onConnect: onConnect,
isTarget: target
});
}
}, rest));
});
@@ -33158,7 +33167,7 @@
};
var isHandle = function isHandle(e) {
return e.target.className && e.target.className.includes && e.target.className.includes('source');
return e.target.className && e.target.className.includes && (e.target.className.includes('source') || e.target.className.includes('target'));
};
var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k) {
@@ -33446,7 +33455,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}\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 cursor: crosshair;\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 =

1
example/build/example.e31bb0bc.css
View File

@@ -126,6 +126,7 @@
.react-graph__handle.target {
left: 50%;
top: 0;
cursor: crosshair;
transform: translate(-50%, 0);
}

2
example/build/example.e31bb0bc.css.map
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;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}"]}
{"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;AAgBtC;;AAdE;IACE,SAAS;IACT,SAAS;IACT,SAAS;IACT,6BAA6B;IAC7B,iBAAiB;EACnB;;AAEA;IACE,SAAS;IACT,MAAM;IACN,iBAAiB;IACjB,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 cursor: crosshair;\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}"]}

55
example/build/example.e31bb0bc.js
View File

@@ -41281,7 +41281,11 @@ 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 _onMouseDown(evt, nodeId, dispatch, onConnect) {
function _onMouseDown(evt, _ref) {
var nodeId = _ref.nodeId,
dispatch = _ref.dispatch,
onConnect = _ref.onConnect,
isTarget = _ref.isTarget;
var containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
var connectionPosition = {
x: evt.clientX - containerBounds.x,
@@ -41302,12 +41306,20 @@ function _onMouseDown(evt, nodeId, dispatch, onConnect) {
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
});
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
if (isTarget) {
var sourceId = elementBelow.getAttribute('data-nodeid');
onConnect({
source: sourceId,
target: nodeId
});
} else {
var targetId = elementBelow.getAttribute('data-nodeid');
onConnect({
source: nodeId,
target: targetId
});
}
}
dispatch((0, _actions.setConnecting)({
@@ -41321,12 +41333,12 @@ function _onMouseDown(evt, nodeId, dispatch, onConnect) {
document.addEventListener('mouseup', onMouseUp);
}
var _default = (0, _react.memo)(function (_ref) {
var source = _ref.source,
target = _ref.target,
_ref$className = _ref.className,
className = _ref$className === void 0 ? null : _ref$className,
rest = _objectWithoutProperties(_ref, ["source", "target", "className"]);
var _default = (0, _react.memo)(function (_ref2) {
var source = _ref2.source,
target = _ref2.target,
_ref2$className = _ref2.className,
className = _ref2$className === void 0 ? null : _ref2$className,
rest = _objectWithoutProperties(_ref2, ["source", "target", "className"]);
var nodeId = (0, _react.useContext)(_NodeIdContext.default);
@@ -41338,19 +41350,16 @@ var _default = (0, _react.memo)(function (_ref) {
source: source,
target: target
});
if (target) {
return _react.default.createElement("div", _extends({
"data-nodeid": nodeId,
className: handleClasses
}, rest));
}
return _react.default.createElement("div", _extends({
"data-nodeid": nodeId,
className: handleClasses,
onMouseDown: function onMouseDown(evt) {
return _onMouseDown(evt, nodeId, dispatch, onConnect);
return _onMouseDown(evt, {
nodeId: nodeId,
dispatch: dispatch,
onConnect: onConnect,
isTarget: target
});
}
}, rest));
});
@@ -41554,7 +41563,7 @@ var isInput = function isInput(e) {
};
var isHandle = function isHandle(e) {
return e.target.className && e.target.className.includes && e.target.className.includes('source');
return e.target.className && e.target.className.includes && (e.target.className.includes('source') || e.target.className.includes('target'));
};
var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k) {

2
example/build/example.e31bb0bc.js.map
View File

File diff suppressed because one or more lines are too long

26
src/NodeRenderer/HandleTypes/BaseHandle.js
View File

@@ -5,7 +5,7 @@ import NodeIdContext from '../NodeIdContext'
import { GraphContext } from '../../GraphContext';
import { setConnecting, setConnectionPos } from '../../state/actions';
function onMouseDown(evt, nodeId, dispatch, onConnect) {
function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
const containerBounds = document.querySelector('.react-graph').getBoundingClientRect();
const connectionPosition = { x: evt.clientX - containerBounds.x, y: evt.clientY - containerBounds.y };
dispatch(setConnecting({ connectionPosition, connectionSourceId: nodeId }))
@@ -17,9 +17,15 @@ function onMouseDown(evt, nodeId, dispatch, onConnect) {
function onMouseUp(evt) {
const elementBelow = document.elementFromPoint(evt.clientX, evt.clientY);
if (elementBelow && elementBelow.classList.contains('target')) {
const targetId = elementBelow.getAttribute('data-nodeid');
onConnect({ source: nodeId, target: targetId });
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
if (isTarget) {
const sourceId = elementBelow.getAttribute('data-nodeid');
onConnect({ source: sourceId, target: nodeId });
} else {
const targetId = elementBelow.getAttribute('data-nodeid');
onConnect({ source: nodeId, target: targetId });
}
}
dispatch(setConnecting({ connectionSourceId: false }));
@@ -40,21 +46,11 @@ export default memo(({ source, target, className = null, ...rest }) => {
{ source, target }
);
if (target) {
return (
<div
data-nodeid={nodeId}
className={handleClasses}
{...rest}
/>
);
}
return (
<div
data-nodeid={nodeId}
className={handleClasses}
onMouseDown={evt => onMouseDown(evt, nodeId, dispatch, onConnect)}
onMouseDown={evt => onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget: target })}
{...rest}
/>
);

2
src/NodeRenderer/NodeTypes/wrapNode.js
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 && e.target.className.includes('source');
const isHandle = e => e.target.className && e.target.className.includes && (e.target.className.includes('source') || e.target.className.includes('target'));
const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
const handle = nodeElement.querySelector(sel);

1
src/style.css
View File

@@ -116,6 +116,7 @@
&.target {
left: 50%;
top: 0;
cursor: crosshair;
transform: translate(-50%, 0);
}
}