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

fix(connection): always scale handle dimensions

Browse Source
This commit is contained in:
moklick
2019-07-30 18:22:33 +02:00
parent 9d17245cca
commit 84a17dd01d
15 changed files with 336 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
example/SimpleGraph.js
View File

@@ -112,13 +112,19 @@ class App extends PureComponent {
}));
}
onConnect(params) {
this.setState(prevState => ({
elements: prevState.elements.concat(params)
}));
}
render() {
return (
<Graph
elements={this.state.elements}
onElementClick={element => this.onElementClick(element)}
onElementsRemove={elements => this.onElementsRemove(elements)}
onConnect={params => console.log(params)}
onConnect={params => this.onConnect(params)}
onNodeDragStop={node => console.log('drag stop', node)}
style={{ width: '100%', height: '100%' }}
onLoad={graphInstance => this.onLoad(graphInstance)}

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

@@ -62,6 +62,10 @@
animation: dashdraw 0.5s linear infinite;
}
.react-graph__edge.connector {
pointer-events: none;
}
@-webkit-keyframes dashdraw {
from {stroke-dashoffset: 10}
}

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;AAUrB;;AARE;IACE,YAAY;EACd;;AAEA;IACE,mBAAmB;IACnB,gDAAwC;YAAxC,wCAAwC;EAC1C;;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\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;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}"]}

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

@@ -37695,7 +37695,7 @@ module.exports = isEqual;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.reducer = exports.initialState = exports.REMOVE_NODES = exports.SET_SELECTED_ELEMENTS = exports.SET_NODES_SELECTION = exports.SET_SELECTION = exports.UPDATE_SELECTION = exports.ZOOM_OUT = exports.ZOOM_IN = exports.FIT_VIEW = exports.INIT_D3 = exports.UPDATE_SIZE = exports.UPDATE_TRANSFORM = exports.UPDATE_NODE_POS = exports.UPDATE_NODE_DATA = exports.SET_NODES = exports.SET_EDGES = void 0;
exports.reducer = exports.initialState = exports.SET_CONNECTION_POS = exports.SET_CONNECTING = exports.REMOVE_NODES = exports.SET_SELECTED_ELEMENTS = exports.SET_NODES_SELECTION = exports.SET_SELECTION = exports.UPDATE_SELECTION = exports.ZOOM_OUT = exports.ZOOM_IN = exports.FIT_VIEW = exports.INIT_D3 = exports.UPDATE_SIZE = exports.UPDATE_TRANSFORM = exports.UPDATE_NODE_POS = exports.UPDATE_NODE_DATA = exports.SET_NODES = exports.SET_EDGES = void 0;
var _d3Zoom = require("d3-zoom");
@@ -37745,6 +37745,10 @@ var SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
exports.SET_SELECTED_ELEMENTS = SET_SELECTED_ELEMENTS;
var REMOVE_NODES = 'REMOVE_NODES';
exports.REMOVE_NODES = REMOVE_NODES;
var SET_CONNECTING = 'SET_CONNECTING';
exports.SET_CONNECTING = SET_CONNECTING;
var SET_CONNECTION_POS = 'SET_CONNECTION_POS';
exports.SET_CONNECTION_POS = SET_CONNECTION_POS;
var initialState = {
width: 0,
height: 0,
@@ -37763,7 +37767,13 @@ var initialState = {
d3Initialised: false,
nodesSelectionActive: false,
selectionActive: false,
selection: {}
selection: {},
isConnecting: false,
connectionSourceId: null,
connectionPosition: {
x: 0,
y: 0
}
};
exports.initialState = initialState;
@@ -37875,6 +37885,8 @@ 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);
default:
@@ -37889,7 +37901,7 @@ exports.reducer = reducer;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = exports.updateSize = exports.updateTransform = void 0;
exports.setConnectionPos = exports.setConnecting = exports.updateSelection = exports.removeNodes = exports.setSelectedElements = exports.setNodesSelection = exports.setSelection = exports.zoomOut = exports.zoomIn = exports.fitView = exports.initD3 = exports.updateNodePos = exports.updateNodeData = exports.setEdges = exports.setNodes = exports.updateSize = exports.updateTransform = void 0;
var _index = require("./index");
@@ -38063,6 +38075,36 @@ var updateSelection = function updateSelection(selection) {
};
exports.updateSelection = updateSelection;
var setConnecting = function setConnecting(_ref4) {
var isConnecting = _ref4.isConnecting,
connectionSourceId = _ref4.connectionSourceId;
return {
type: _index.SET_CONNECTING,
payload: {
isConnecting: isConnecting,
connectionSourceId: connectionSourceId
}
};
};
exports.setConnecting = setConnecting;
var setConnectionPos = function setConnectionPos(_ref5) {
var x = _ref5.x,
y = _ref5.y;
return {
type: _index.SET_CONNECTION_POS,
payload: {
connectionPosition: {
x: x,
y: y
}
}
};
};
exports.setConnectionPos = setConnectionPos;
},{"./index":"../src/state/index.js"}],"../src/GraphContext/index.js":[function(require,module,exports) {
"use strict";
@@ -38241,7 +38283,123 @@ function (_PureComponent) {
var _default = NodeRenderer;
exports.default = _default;
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js"}],"../src/EdgeRenderer/index.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js"}],"../node_modules/classnames/index.js":[function(require,module,exports) {
var define;
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if (typeof module !== 'undefined' && module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// register as 'classnames', consistent with npm package name
define('classnames', [], function () {
return classNames;
});
} else {
window.classNames = classNames;
}
}());
},{}],"../src/ConnectorEdge/index.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var _default = function _default(props) {
var _useState = (0, _react.useState)(null),
_useState2 = _slicedToArray(_useState, 2),
sourceNode = _useState2[0],
setSourceNode = _useState2[1];
(0, _react.useEffect)(function () {
setSourceNode(props.nodes.find(function (n) {
return n.id === props.connectionSourceId;
}));
}, []);
if (!sourceNode) {
return null;
}
var style = props.style || {};
var className = (0, _classnames.default)('react-graph__edge', 'connector', 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;
var sourceX = sourceNode.__rg.position.x + sourceHandleX;
var sourceY = sourceNode.__rg.position.y + sourceHandleY;
var targetX = props.connectionPosition.x;
var targetY = props.connectionPosition.y;
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,
d: dAttr
}, style));
};
exports.default = _default;
},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js"}],"../src/EdgeRenderer/index.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -38253,6 +38411,10 @@ var _react = _interopRequireWildcard(require("react"));
var _GraphContext = require("../GraphContext");
var _ConnectorEdge = _interopRequireDefault(require("../ConnectorEdge"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -38320,15 +38482,15 @@ function (_PureComponent) {
var _this$props = this.props,
width = _this$props.width,
height = _this$props.height;
height = _this$props.height,
onElementClick = _this$props.onElementClick;
if (!width) {
return null;
}
return _react.default.createElement(_GraphContext.Consumer, null, function (_ref) {
var state = _ref.state,
onElementClick = _ref.onElementClick;
var state = _ref.state;
return _react.default.createElement("svg", {
width: width,
height: height,
@@ -38337,7 +38499,11 @@ 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, {
nodes: state.nodes,
connectionSourceId: state.connectionSourceId,
connectionPosition: state.connectionPosition
}));
});
}
}]);
@@ -38347,7 +38513,7 @@ function (_PureComponent) {
var _default = EdgeRenderer;
exports.default = _default;
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectorEdge":"../src/ConnectorEdge/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -40972,7 +41138,8 @@ var GraphView = (0, _react.memo)(function (props) {
}), _react.default.createElement(_EdgeRenderer.default, {
width: state.width,
height: state.height,
edgeTypes: props.edgeTypes
edgeTypes: props.edgeTypes,
onElementClick: props.onElementClick
}), 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() {
@@ -41040,62 +41207,7 @@ var _default = (0, _react.memo)(function (props) {
});
exports.default = _default;
},{"react":"../node_modules/react/index.js","../hooks":"../src/hooks.js","../state/actions":"../src/state/actions.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js"}],"../node_modules/classnames/index.js":[function(require,module,exports) {
var define;
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames () {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if (typeof module !== 'undefined' && module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// register as 'classnames', consistent with npm package name
define('classnames', [], function () {
return classNames;
});
} else {
window.classNames = classNames;
}
}());
},{}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","../hooks":"../src/hooks.js","../state/actions":"../src/state/actions.js","../GraphContext":"../src/GraphContext/index.js","../graph-utils":"../src/graph-utils.js"}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41126,6 +41238,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
var _NodeIdContext = require("../NodeIdContext");
var _GraphContext = require("../../GraphContext");
var _actions = require("../../state/actions");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -41136,8 +41252,14 @@ 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) {
evt.dataTransfer.setData("text/plain", nodeId);
function _onDragStart(evt, nodeId, dispatch) {
evt.dataTransfer.setData("text/plain", nodeId); // dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
}
function onDragStop(evt, dispatch) {// dispatch(setConnecting({ isConnecting: false }));
}
function _onDrag(evt, dispatch) {// dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
}
var _default = (0, _react.memo)(function (_ref) {
@@ -41145,6 +41267,9 @@ var _default = (0, _react.memo)(function (_ref) {
target = _ref.target,
rest = _objectWithoutProperties(_ref, ["source", "target"]);
var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
dispatch = _useContext.dispatch;
var handleClasses = (0, _classnames.default)('react-graph__handle', rest.className, {
source: source,
target: target
@@ -41162,14 +41287,20 @@ var _default = (0, _react.memo)(function (_ref) {
}, rest, {
draggable: true,
onDragStart: function onDragStart(evt) {
return _onDragStart(evt, nodeId);
return _onDragStart(evt, nodeId, dispatch);
},
onDrag: function onDrag(evt) {
return _onDrag(evt, dispatch);
},
onDragEnd: function onDragEnd(evt) {
return onDragStop(evt, dispatch);
}
}));
});
});
exports.default = _default;
},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/HandleTypes/TargetHandle.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js","../../GraphContext":"../src/GraphContext/index.js","../../state/actions":"../src/state/actions.js"}],"../src/NodeRenderer/HandleTypes/TargetHandle.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41370,7 +41501,7 @@ var isHandle = function isHandle(e) {
return e.target.className && e.target.className.includes('source');
};
var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds, k) {
var handle = nodeElement.querySelector(sel);
if (!handle) {
@@ -41378,11 +41509,13 @@ var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
}
var bounds = handle.getBoundingClientRect();
var unscaledWith = Math.round(bounds.width * (1 / k));
var unscaledHeight = Math.round(bounds.height * (1 / k));
return {
x: bounds.x - parentBounds.x,
y: bounds.y - parentBounds.y,
width: bounds.width,
height: bounds.height
x: (bounds.x - parentBounds.x) * (1 / k),
y: (bounds.y - parentBounds.y) * (1 / k),
width: unscaledWith,
height: unscaledHeight
};
};
@@ -41432,8 +41565,8 @@ var _default = function _default(NodeComponent) {
var unscaledWith = Math.round(bounds.width * (1 / k));
var unscaledHeight = Math.round(bounds.height * (1 / k));
var handleBounds = {
source: getHandleBounds('.source', nodeElement.current, bounds),
target: getHandleBounds('.target', nodeElement.current, bounds)
source: getHandleBounds('.source', nodeElement.current, bounds, k),
target: getHandleBounds('.target', nodeElement.current, bounds, k)
};
dispatch((0, _actions.updateNodeData)(id, {
width: unscaledWith,
@@ -41915,8 +42048,7 @@ function (_PureComponent) {
className: "react-graph"
}, _react.default.createElement(_GraphContext.Provider, {
nodes: nodes,
edges: edges,
onElementClick: onElementClick
edges: edges
}, _react.default.createElement(_GraphView.default, {
onLoad: onLoad,
onMove: onMove,
@@ -42266,6 +42398,15 @@ function (_PureComponent) {
};
});
}
}, {
key: "onConnect",
value: function onConnect(params) {
this.setState(function (prevState) {
return {
elements: prevState.elements.concat(params)
};
});
}
}, {
key: "render",
value: function render() {
@@ -42280,7 +42421,7 @@ function (_PureComponent) {
return _this2.onElementsRemove(elements);
},
onConnect: function onConnect(params) {
return console.log(params);
return _this2.onConnect(params);
},
onNodeDragStop: function onNodeDragStop(node) {
return console.log('drag stop', node);
@@ -42375,7 +42516,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 + ':' + "61136" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "50947" + '/');
ws.onmessage = function (event) {
checkedAssets = {};

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

File diff suppressed because one or more lines are too long

2
example/build/index.js
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 + ':' + "61136" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "50947" + '/');
ws.onmessage = function (event) {
checkedAssets = {};

37
src/ConnectorEdge/index.js Normal file
View File

@@ -0,0 +1,37 @@
import React, { useEffect, useState } from 'react';
import cx from 'classnames';
export default (props) => {
const [sourceNode, setSourceNode] = useState(null);
useEffect(() => {
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 sourceHandle = sourceNode.__rg.handleBounds.source;
const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
const sourceHandleY = sourceHandle ? sourceHandle.y + (sourceHandle.height / 2) : sourceNode.__rg.height;
const sourceX = sourceNode.__rg.position.x + sourceHandleX;
const sourceY = sourceNode.__rg.position.y + sourceHandleY;
const targetX = props.connectionPosition.x;
const targetY = props.connectionPosition.y;
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}`;
return (
<path
className={className}
d={dAttr}
{...style}
/>
);
};

12
src/EdgeRenderer/index.js
View File

@@ -1,6 +1,7 @@
import React, { PureComponent } from 'react';
import { Consumer } from '../GraphContext';
import ConnectorEdge from '../ConnectorEdge';
class EdgeRenderer extends PureComponent {
renderEdge(e, nodes, onElementClick) {
@@ -30,7 +31,7 @@ class EdgeRenderer extends PureComponent {
}
render() {
const { width, height } = this.props;
const { width, height, onElementClick } = this.props;
if (!width) {
return null;
@@ -38,7 +39,7 @@ class EdgeRenderer extends PureComponent {
return (
<Consumer>
{({ state, onElementClick }) => (
{({ state }) => (
<svg
width={width}
height={height}
@@ -49,6 +50,13 @@ class EdgeRenderer extends PureComponent {
>
{state.edges.map(e => this.renderEdge(e, state.nodes, onElementClick))}
</g>
{state.isConnecting && (
<ConnectorEdge
nodes={state.nodes}
connectionSourceId={state.connectionSourceId}
connectionPosition={state.connectionPosition}
/>
)}
</svg>
)}
</Consumer>

1
src/GraphView/index.js
View File

@@ -88,6 +88,7 @@ const GraphView = memo((props) => {
width={state.width}
height={state.height}
edgeTypes={props.edgeTypes}
onElementClick={props.onElementClick}
/>
{shiftPressed && <UserSelection />}
{state.nodesSelectionActive && <NodesSelection />}

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

@@ -1,13 +1,26 @@
import React, { memo } from 'react';
import React, { memo, useContext } from 'react';
import cx from 'classnames';
import { Consumer } from '../NodeIdContext'
import { GraphContext } from '../../GraphContext';
import { setConnecting, setConnectionPos } from '../../state/actions';
function onDragStart(evt, nodeId) {
function onDragStart(evt, nodeId, dispatch) {
evt.dataTransfer.setData("text/plain", nodeId);
// dispatch(setConnecting({ isConnecting: true, connectionSourceId: nodeId }));
}
function onDragStop(evt, dispatch) {
// dispatch(setConnecting({ isConnecting: false }));
}
function onDrag(evt, dispatch) {
// dispatch(setConnectionPos({ x: evt.clientX, y: evt.clientY }));
}
export default memo(({ source, target, ...rest }) => {
const { dispatch } = useContext(GraphContext)
const handleClasses = cx(
'react-graph__handle',
rest.className,
@@ -30,7 +43,9 @@ export default memo(({ source, target, ...rest }) => {
className={handleClasses}
{...rest}
draggable
onDragStart={evt => onDragStart(evt, nodeId)}
onDragStart={evt => onDragStart(evt, nodeId, dispatch)}
onDrag={evt => onDrag(evt, dispatch)}
onDragEnd={evt => onDragStop(evt, dispatch)}
/>
)}
</Consumer>

17
src/NodeRenderer/NodeTypes/wrapNode.js
View File

@@ -10,7 +10,7 @@ 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 getHandleBounds = (sel, nodeElement, parentBounds) => {
const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
const handle = nodeElement.querySelector(sel);
if (!handle) {
@@ -18,11 +18,14 @@ const getHandleBounds = (sel, nodeElement, parentBounds) => {
}
const bounds = handle.getBoundingClientRect();
const unscaledWith = Math.round(bounds.width * (1 / k));
const unscaledHeight = Math.round(bounds.height * (1 / k));
return {
x: bounds.x - parentBounds.x,
y: bounds.y - parentBounds.y,
width: bounds.width,
height: bounds.height
x: (bounds.x - parentBounds.x) * (1 / k),
y: (bounds.y - parentBounds.y) * (1 / k),
width: unscaledWith,
height: unscaledHeight
};
};
@@ -49,8 +52,8 @@ export default NodeComponent => memo((props) => {
const unscaledWith = Math.round(bounds.width * (1 / k));
const unscaledHeight = Math.round(bounds.height * (1 / k));
const handleBounds = {
source: getHandleBounds('.source', nodeElement.current, bounds),
target: getHandleBounds('.target', nodeElement.current, bounds)
source: getHandleBounds('.source', nodeElement.current, bounds, k),
target: getHandleBounds('.target', nodeElement.current, bounds, k)
};
dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight, handleBounds }));

2
src/ReactGraph/index.js
View File

@@ -37,7 +37,7 @@ class ReactGraph extends PureComponent {
return (
<div style={style} className="react-graph">
<Provider nodes={nodes} edges={edges} onElementClick={onElementClick}>
<Provider nodes={nodes} edges={edges}>
<GraphView
onLoad={onLoad}
onMove={onMove}

13
src/state/actions.js
View File

@@ -2,7 +2,8 @@ import {
UPDATE_TRANSFORM, UPDATE_SIZE, SET_NODES, SET_EDGES,
UPDATE_NODE_DATA, UPDATE_NODE_POS, INIT_D3, FIT_VIEW,
UPDATE_SELECTION, SET_SELECTION, SET_NODES_SELECTION,
SET_SELECTED_ELEMENTS, REMOVE_NODES, ZOOM_IN, ZOOM_OUT
SET_SELECTED_ELEMENTS, REMOVE_NODES, ZOOM_IN, ZOOM_OUT,
SET_CONNECTING, SET_CONNECTION_POS
} from './index';
export const updateTransform = (transform) => {
@@ -90,7 +91,7 @@ export const removeNodes = (ids) => {
const idArray = Array.isArray(ids) ? ids : [ids];
return { type: REMOVE_NODES, payload: { ids: idArray } };
}
};
export const updateSelection = (selection) => {
return {
@@ -100,3 +101,11 @@ export const updateSelection = (selection) => {
}
};
};
export const setConnecting = ({ isConnecting, connectionSourceId }) => {
return { type: SET_CONNECTING, payload: { isConnecting, connectionSourceId }};
};
export const setConnectionPos = ({ x, y }) => {
return { type: SET_CONNECTION_POS, payload: { connectionPosition: { x, y } } };
}

8
src/state/index.js
View File

@@ -17,6 +17,8 @@ export const SET_SELECTION = 'SET_SELECTION';
export const SET_NODES_SELECTION = 'SET_NODES_SELECTION';
export const SET_SELECTED_ELEMENTS = 'SET_SELECTED_ELEMENTS';
export const REMOVE_NODES = 'REMOVE_NODES';
export const SET_CONNECTING = 'SET_CONNECTING';
export const SET_CONNECTION_POS = 'SET_CONNECTION_POS';
export const initialState = {
width: 0,
@@ -34,6 +36,10 @@ export const initialState = {
nodesSelectionActive: false,
selectionActive: false,
selection: {},
isConnecting: false,
connectionSourceId: null,
connectionPosition: { x: 0, y: 0 }
};
export const reducer = (state, action) => {
@@ -126,6 +132,8 @@ 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:
return state;

4
src/style.css
View File

@@ -59,6 +59,10 @@
stroke-dasharray: 5;
animation: dashdraw 0.5s linear infinite;
}
&.connector {
pointer-events: none;
}
}
@keyframes dashdraw {