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
dist/ReactGraph.js
Vendored
+33 -24
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 =