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

refactor(edges): only redraw moved edges

Browse Source
This commit is contained in:
moklick
2019-07-31 16:29:04 +02:00
parent ec7231e42d
commit 6e71591cb8
9 changed files with 433 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
dist/ReactGraph.js vendored
View File

@@ -30239,8 +30239,8 @@
});
var graphContext = {
state: state,
onConnect: onConnect,
dispatch: dispatch
dispatch: dispatch,
onConnect: onConnect
};
return React__default.createElement(GraphContext.Provider, {
value: graphContext
@@ -30256,55 +30256,47 @@
edges: []
};
var NodeRenderer =
/*#__PURE__*/
function (_PureComponent) {
_inherits(NodeRenderer, _PureComponent);
function renderNode(d, props, graphContext) {
var nodeType = d.type || 'default';
function NodeRenderer() {
_classCallCheck(this, NodeRenderer);
return _possibleConstructorReturn(this, _getPrototypeOf(NodeRenderer).apply(this, arguments));
if (!props.nodeTypes[nodeType]) {
console.warn("No node type found for type \"".concat(nodeType, "\". Using fallback type \"default\"."));
}
_createClass(NodeRenderer, [{
key: "renderNode",
value: function renderNode(d) {
var nodeType = d.type || 'default';
var NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes["default"];
return React__default.createElement(NodeComponent, {
key: d.id,
id: d.id,
type: d.type,
data: d.data,
xPos: d.__rg.position.x,
yPos: d.__rg.position.y,
onClick: props.onElementClick,
onNodeDragStop: props.onNodeDragStop,
dispatch: graphContext.dispatch,
transform: graphContext.state.transform,
getNodeById: graphContext.getNodeById,
selectedElements: graphContext.state.selectedElements
});
}
if (!this.props.nodeTypes[nodeType]) {
console.warn("No node type found for type \"".concat(nodeType, "\". Using fallback type \"default\"."));
}
var NodeComponent = this.props.nodeTypes[nodeType] || this.props.nodeTypes["default"];
return React__default.createElement(NodeComponent, _extends({
key: d.id,
onClick: this.props.onElementClick,
onNodeDragStop: this.props.onNodeDragStop,
onConnect: this.props.onConnect
}, d));
}
}, {
key: "render",
value: function render() {
var _this = this;
return React__default.createElement(Consumer, null, function (_ref) {
var state = _ref.state;
return React__default.createElement("div", {
className: "react-graph__nodes",
style: {
transform: "translate(".concat(state.transform[0], "px,").concat(state.transform[1], "px) scale(").concat(state.transform[2], ")")
}
}, state.nodes.map(function (d) {
return _this.renderNode(d);
}));
});
}
}]);
return NodeRenderer;
}(React.PureComponent);
var NodeRenderer = React.memo(function (props) {
var graphContext = React.useContext(GraphContext);
var _graphContext$state = graphContext.state,
transform = _graphContext$state.transform,
nodes = _graphContext$state.nodes;
var transformStyle = {
transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")")
};
return React__default.createElement("div", {
className: "react-graph__nodes",
style: transformStyle
}, nodes.map(function (d) {
return renderNode(d, props, graphContext);
}));
});
NodeRenderer.displayName = 'NodeRenderer';
NodeRenderer.whyDidYouRender = false;
var classnames = createCommonjsModule(function (module) {
/*!
@@ -30397,84 +30389,78 @@
}, style)));
});
var EdgeRenderer =
/*#__PURE__*/
function (_PureComponent) {
_inherits(EdgeRenderer, _PureComponent);
function renderEdge(e, props, graphContext) {
var edgeType = e.type || 'default';
var sourceNode = graphContext.state.nodes.find(function (n) {
return n.id === e.source;
});
var targetNode = graphContext.state.nodes.find(function (n) {
return n.id === e.target;
});
function EdgeRenderer() {
_classCallCheck(this, EdgeRenderer);
return _possibleConstructorReturn(this, _getPrototypeOf(EdgeRenderer).apply(this, arguments));
if (!sourceNode) {
throw new Error("couldn't create edge for source id: ".concat(e.source));
}
_createClass(EdgeRenderer, [{
key: "renderEdge",
value: function renderEdge(e, nodes, onElementClick) {
var edgeType = e.type || 'default';
var sourceNode = nodes.find(function (n) {
return n.id === e.source;
});
var targetNode = nodes.find(function (n) {
return n.id === e.target;
});
if (!targetNode) {
throw new Error("couldn't create edge for target id: ".concat(e.target));
}
if (!sourceNode) {
throw new Error("couldn't create edge for source id: ".concat(e.source));
}
var EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes["default"];
return React__default.createElement(EdgeComponent, {
key: "".concat(e.source, "-").concat(e.target),
type: e.type,
sourceNode: sourceNode,
targetNode: targetNode,
onClick: props.onElementClick,
selectedElements: graphContext.state.selectedElements,
dispatch: graphContext.dispatch,
animated: e.animated,
style: e.style,
source: e.source,
target: e.target,
sourceNodeX: sourceNode.__rg.position.x,
sourceNodeY: sourceNode.__rg.position.y,
targetNodeX: targetNode.__rg.position.x,
targeteNodeY: targetNode.__rg.position.y
});
}
if (!targetNode) {
throw new Error("couldn't create edge for target id: ".concat(e.target));
}
var EdgeRenderer = React.memo(function (props) {
var graphContext = React.useContext(GraphContext);
var width = props.width,
height = props.height,
connectionLineStyle = props.connectionLineStyle,
connectionLineType = props.connectionLineType;
var EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes["default"];
return React__default.createElement(EdgeComponent, _extends({
key: "".concat(e.source, "-").concat(e.target),
sourceNode: sourceNode,
targetNode: targetNode,
onClick: onElementClick
}, e));
}
}, {
key: "render",
value: function render() {
var _this = this;
if (!width) {
return null;
}
var _this$props = this.props,
width = _this$props.width,
height = _this$props.height,
onElementClick = _this$props.onElementClick,
connectionLineStyle = _this$props.connectionLineStyle,
connectionLineType = _this$props.connectionLineType;
if (!width) {
return null;
}
return React__default.createElement(Consumer, null, function (_ref) {
var state = _ref.state;
return React__default.createElement("svg", {
width: width,
height: height,
className: "react-graph__edges"
}, React__default.createElement("g", {
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.connectionSourceId && React__default.createElement(ConnectionLine, {
nodes: state.nodes,
connectionSourceId: state.connectionSourceId,
connectionPosition: state.connectionPosition,
transform: state.transform,
connectionLineStyle: connectionLineStyle,
connectionLineType: connectionLineType
})));
});
}
}]);
return EdgeRenderer;
}(React.PureComponent);
var _graphContext$state = graphContext.state,
transform = _graphContext$state.transform,
edges = _graphContext$state.edges,
nodes = _graphContext$state.nodes,
connectionSourceId = _graphContext$state.connectionSourceId,
connectionPosition = _graphContext$state.connectionPosition;
var transformStyle = "translate(".concat(transform[0], ",").concat(transform[1], ") scale(").concat(transform[2], ")");
return React__default.createElement("svg", {
width: width,
height: height,
className: "react-graph__edges"
}, React__default.createElement("g", {
transform: transformStyle
}, edges.map(function (e) {
return renderEdge(e, props, graphContext);
}), connectionSourceId && React__default.createElement(ConnectionLine, {
nodes: nodes,
connectionSourceId: connectionSourceId,
connectionPosition: connectionPosition,
transform: transform,
connectionLineStyle: connectionLineStyle,
connectionLineType: connectionLineType
})));
});
var initialRect = {
startX: 0,
@@ -33020,10 +33006,6 @@
return null;
});
var NodeIdContext = React.createContext(null);
var Provider$1 = NodeIdContext.Provider;
var Consumer$1 = NodeIdContext.Consumer;
function _onMouseDown(evt, _ref) {
var nodeId = _ref.nodeId,
dispatch = _ref.dispatch,
@@ -33079,15 +33061,12 @@
var BaseHandle = React.memo(function (_ref2) {
var source = _ref2.source,
target = _ref2.target,
nodeId = _ref2.nodeId,
onConnect = _ref2.onConnect,
dispatch = _ref2.dispatch,
_ref2$className = _ref2.className,
className = _ref2$className === void 0 ? null : _ref2$className,
rest = _objectWithoutProperties(_ref2, ["source", "target", "className"]);
var nodeId = React.useContext(NodeIdContext);
var _useContext = React.useContext(GraphContext),
dispatch = _useContext.dispatch,
onConnect = _useContext.onConnect;
rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "dispatch", "className"]);
var handleClasses = classnames('react-graph__handle', className, {
source: source,
@@ -33107,15 +33086,37 @@
}, rest));
});
var TargetHandle = (function (props) {
var NodeIdContext = React.createContext(null);
var Provider$1 = NodeIdContext.Provider;
var Consumer$1 = NodeIdContext.Consumer;
var TargetHandle = React.memo(function (props) {
var nodeId = React.useContext(NodeIdContext);
var _useContext = React.useContext(GraphContext),
dispatch = _useContext.dispatch,
onConnect = _useContext.onConnect;
return React__default.createElement(BaseHandle, _extends({
target: true
target: true,
nodeId: nodeId,
dispatch: dispatch,
onConnect: onConnect
}, props));
});
var SourceHandle = (function (props) {
var SourceHandle = React.memo(function (props) {
var nodeId = React.useContext(NodeIdContext);
var _useContext = React.useContext(GraphContext),
dispatch = _useContext.dispatch,
onConnect = _useContext.onConnect;
return React__default.createElement(BaseHandle, _extends({
source: true
source: true,
nodeId: nodeId,
dispatch: dispatch,
onConnect: onConnect
}, props));
});
@@ -33227,38 +33228,36 @@
var onNodeClick = function onNodeClick(evt, _ref3) {
var onClick = _ref3.onClick,
dispatch = _ref3.dispatch,
data = _ref3.data,
id = _ref3.id,
type = _ref3.type,
position = _ref3.position;
position = _ref3.position,
data = _ref3.data;
if (isInput(evt)) {
return false;
}
dispatch(setSelectedElements({
data: data,
id: id
}));
onClick({
var node = {
id: id,
type: type,
data: data,
position: position
});
position: position,
data: data
};
dispatch(setSelectedElements(node));
onClick(node);
};
var _onStop = function onStop(_ref4) {
var onNodeDragStop = _ref4.onNodeDragStop,
id = _ref4.id,
type = _ref4.type,
data = _ref4.data,
position = _ref4.position;
position = _ref4.position,
data = _ref4.data;
onNodeDragStop({
id: id,
type: type,
data: data,
position: position
position: position,
data: data
});
};
@@ -33266,10 +33265,6 @@
return React.memo(function (props) {
var nodeElement = React.useRef(null);
var _useContext = React.useContext(GraphContext),
state = _useContext.state,
dispatch = _useContext.dispatch;
var _useState = React.useState({
x: 0,
y: 0
@@ -33278,20 +33273,29 @@
offset = _useState2[0],
setOffset = _useState2[1];
var data = props.data,
_onClick = props.onClick,
var id = props.id,
type = props.type,
id = props.id,
__rg = props.__rg,
data = props.data,
transform = props.transform,
xPos = props.xPos,
yPos = props.yPos,
selectedElements = props.selectedElements,
dispatch = props.dispatch,
getNodeById = props.getNodeById,
_onClick = props.onClick,
onNodeDragStop = props.onNodeDragStop;
var position = __rg.position;
console.log('render node', id);
var position = {
x: xPos,
y: yPos
};
var _state$transform = _slicedToArray(state.transform, 3),
x = _state$transform[0],
y = _state$transform[1],
k = _state$transform[2];
var _transform = _slicedToArray(transform, 3),
x = _transform[0],
y = _transform[1],
k = _transform[2];
var selected = state.selectedElements.filter(isNode).map(function (e) {
var selected = selectedElements.filter(isNode).map(function (e) {
return e.id;
}).includes(id);
var nodeClasses = classnames('react-graph__node', {
@@ -33299,7 +33303,7 @@
});
var nodeStyle = {
zIndex: selected ? 10 : 3,
transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
transform: "translate(".concat(xPos, "px,").concat(yPos, "px)")
};
React.useEffect(function () {
var bounds = nodeElement.current.getBoundingClientRect();
@@ -33319,7 +33323,7 @@
onStart: function onStart(evt) {
return _onStart(evt, {
setOffset: setOffset,
transform: state.transform,
transform: transform,
position: position
});
},
@@ -33328,7 +33332,7 @@
dispatch: dispatch,
id: id,
offset: offset,
transform: state.transform
transform: transform
});
},
onStop: function onStop() {
@@ -33336,23 +33340,24 @@
onNodeDragStop: onNodeDragStop,
id: id,
type: type,
data: data,
position: position
position: position,
data: data
});
},
scale: state.transform[2]
scale: transform[2]
}, React__default.createElement("div", {
className: nodeClasses,
ref: nodeElement,
style: nodeStyle,
onClick: function onClick(evt) {
return onNodeClick(evt, {
getNodeById: getNodeById,
onClick: _onClick,
dispatch: dispatch,
data: data,
id: id,
type: type,
position: position
position: position,
data: data
});
}
}, React__default.createElement(Provider$1, {
@@ -33423,16 +33428,14 @@
var wrapEdge = (function (EdgeComponent) {
return React.memo(function (props) {
var _useContext = React.useContext(GraphContext),
state = _useContext.state,
dispatch = _useContext.dispatch;
var source = props.source,
target = props.target,
animated = props.animated,
type = props.type,
dispatch = props.dispatch,
selectedElements = props.selectedElements,
_onClick = props.onClick;
var selected = state.selectedElements.filter(function (e) {
var selected = selectedElements.filter(function (e) {
return isEdge(e);
}).find(function (e) {
return e.source === source && e.target === target;
@@ -33507,6 +33510,12 @@
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);
if (process.env.NODE_ENV !== 'production') {
var whyDidYouRender = require('@welldone-software/why-did-you-render');
whyDidYouRender(React__default);
}
var ReactGraph =
/*#__PURE__*/
function (_PureComponent) {

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

@@ -38267,11 +38267,12 @@ var NodeRenderer = (0, _react.memo)(function (props) {
var _graphContext$state = graphContext.state,
transform = _graphContext$state.transform,
nodes = _graphContext$state.nodes;
var transformStyle = {
transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")")
};
return _react.default.createElement("div", {
className: "react-graph__nodes",
style: {
transform: "translate(".concat(transform[0], "px,").concat(transform[1], "px) scale(").concat(transform[2], ")")
}
style: transformStyle
}, nodes.map(function (d) {
return renderNode(d, props, graphContext);
}));
@@ -38422,105 +38423,78 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
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); }
function renderEdge(e, props, graphContext) {
var edgeType = e.type || 'default';
var sourceNode = graphContext.state.nodes.find(function (n) {
return n.id === e.source;
});
var targetNode = graphContext.state.nodes.find(function (n) {
return n.id === e.target;
});
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var EdgeRenderer =
/*#__PURE__*/
function (_PureComponent) {
_inherits(EdgeRenderer, _PureComponent);
function EdgeRenderer() {
_classCallCheck(this, EdgeRenderer);
return _possibleConstructorReturn(this, _getPrototypeOf(EdgeRenderer).apply(this, arguments));
if (!sourceNode) {
throw new Error("couldn't create edge for source id: ".concat(e.source));
}
_createClass(EdgeRenderer, [{
key: "renderEdge",
value: function renderEdge(e, nodes, onElementClick) {
var edgeType = e.type || 'default';
var sourceNode = nodes.find(function (n) {
return n.id === e.source;
});
var targetNode = nodes.find(function (n) {
return n.id === e.target;
});
if (!targetNode) {
throw new Error("couldn't create edge for target id: ".concat(e.target));
}
if (!sourceNode) {
throw new Error("couldn't create edge for source id: ".concat(e.source));
}
var EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
return _react.default.createElement(EdgeComponent, {
key: "".concat(e.source, "-").concat(e.target),
type: e.type,
sourceNode: sourceNode,
targetNode: targetNode,
onClick: props.onElementClick,
selectedElements: graphContext.state.selectedElements,
dispatch: graphContext.dispatch,
animated: e.animated,
style: e.style,
source: e.source,
target: e.target,
sourceNodeX: sourceNode.__rg.position.x,
sourceNodeY: sourceNode.__rg.position.y,
targetNodeX: targetNode.__rg.position.x,
targeteNodeY: targetNode.__rg.position.y
});
}
if (!targetNode) {
throw new Error("couldn't create edge for target id: ".concat(e.target));
}
var EdgeRenderer = (0, _react.memo)(function (props) {
var graphContext = (0, _react.useContext)(_GraphContext.GraphContext);
var width = props.width,
height = props.height,
connectionLineStyle = props.connectionLineStyle,
connectionLineType = props.connectionLineType;
var EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes.default;
return _react.default.createElement(EdgeComponent, _extends({
key: "".concat(e.source, "-").concat(e.target),
sourceNode: sourceNode,
targetNode: targetNode,
onClick: onElementClick
}, e));
}
}, {
key: "render",
value: function render() {
var _this = this;
var _this$props = this.props,
width = _this$props.width,
height = _this$props.height,
onElementClick = _this$props.onElementClick,
connectionLineStyle = _this$props.connectionLineStyle,
connectionLineType = _this$props.connectionLineType;
if (!width) {
return null;
}
return _react.default.createElement(_GraphContext.Consumer, null, function (_ref) {
var state = _ref.state;
return _react.default.createElement("svg", {
width: width,
height: height,
className: "react-graph__edges"
}, _react.default.createElement("g", {
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.connectionSourceId && _react.default.createElement(_ConnectionLine.default, {
nodes: state.nodes,
connectionSourceId: state.connectionSourceId,
connectionPosition: state.connectionPosition,
transform: state.transform,
connectionLineStyle: connectionLineStyle,
connectionLineType: connectionLineType
})));
});
}
}]);
return EdgeRenderer;
}(_react.PureComponent);
if (!width) {
return null;
}
var _graphContext$state = graphContext.state,
transform = _graphContext$state.transform,
edges = _graphContext$state.edges,
nodes = _graphContext$state.nodes,
connectionSourceId = _graphContext$state.connectionSourceId,
connectionPosition = _graphContext$state.connectionPosition;
var transformStyle = "translate(".concat(transform[0], ",").concat(transform[1], ") scale(").concat(transform[2], ")");
return _react.default.createElement("svg", {
width: width,
height: height,
className: "react-graph__edges"
}, _react.default.createElement("g", {
transform: transformStyle
}, edges.map(function (e) {
return renderEdge(e, props, graphContext);
}), connectionSourceId && _react.default.createElement(_ConnectionLine.default, {
nodes: nodes,
connectionSourceId: connectionSourceId,
connectionPosition: connectionPosition,
transform: transform,
connectionLineStyle: connectionLineStyle,
connectionLineType: connectionLineType
})));
});
var _default = EdgeRenderer;
exports.default = _default;
},{"react":"../node_modules/react/index.js","../GraphContext":"../src/GraphContext/index.js","../ConnectionLine":"../src/ConnectionLine/index.js"}],"../src/UserSelection/index.js":[function(require,module,exports) {
@@ -41218,25 +41192,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"}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Consumer = exports.Provider = exports.NodeIdContext = void 0;
var _react = require("react");
var NodeIdContext = (0, _react.createContext)(null);
exports.NodeIdContext = NodeIdContext;
var Provider = NodeIdContext.Provider;
exports.Provider = Provider;
var Consumer = NodeIdContext.Consumer;
exports.Consumer = Consumer;
var _default = NodeIdContext;
exports.default = _default;
},{"react":"../node_modules/react/index.js"}],"../src/NodeRenderer/HandleTypes/BaseHandle.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/HandleTypes/BaseHandle.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41248,10 +41204,6 @@ var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _NodeIdContext = _interopRequireDefault(require("../NodeIdContext"));
var _GraphContext = require("../../GraphContext");
var _actions = require("../../state/actions");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41319,15 +41271,12 @@ function _onMouseDown(evt, _ref) {
var _default = (0, _react.memo)(function (_ref2) {
var source = _ref2.source,
target = _ref2.target,
nodeId = _ref2.nodeId,
onConnect = _ref2.onConnect,
dispatch = _ref2.dispatch,
_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);
var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
dispatch = _useContext.dispatch,
onConnect = _useContext.onConnect;
rest = _objectWithoutProperties(_ref2, ["source", "target", "nodeId", "onConnect", "dispatch", "className"]);
var handleClasses = (0, _classnames.default)('react-graph__handle', className, {
source: source,
@@ -41348,7 +41297,25 @@ var _default = (0, _react.memo)(function (_ref2) {
});
exports.default = _default;
},{"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) {
},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../state/actions":"../src/state/actions.js"}],"../src/NodeRenderer/NodeIdContext.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Consumer = exports.Provider = exports.NodeIdContext = void 0;
var _react = require("react");
var NodeIdContext = (0, _react.createContext)(null);
exports.NodeIdContext = NodeIdContext;
var Provider = NodeIdContext.Provider;
exports.Provider = Provider;
var Consumer = NodeIdContext.Consumer;
exports.Consumer = Consumer;
var _default = NodeIdContext;
exports.default = _default;
},{"react":"../node_modules/react/index.js"}],"../src/NodeRenderer/HandleTypes/TargetHandle.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41356,22 +41323,37 @@ Object.defineProperty(exports, "__esModule", {
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));
var _BaseHandle = _interopRequireDefault(require("./BaseHandle"));
var _GraphContext = require("../../GraphContext");
var _NodeIdContext = _interopRequireDefault(require("../NodeIdContext"));
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); }
var _default = function _default(props) {
var _default = (0, _react.memo)(function (props) {
var nodeId = (0, _react.useContext)(_NodeIdContext.default);
var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
dispatch = _useContext.dispatch,
onConnect = _useContext.onConnect;
return _react.default.createElement(_BaseHandle.default, _extends({
target: true
target: true,
nodeId: nodeId,
dispatch: dispatch,
onConnect: onConnect
}, props));
};
});
exports.default = _default;
},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js"}],"../src/NodeRenderer/HandleTypes/SourceHandle.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js","../../GraphContext":"../src/GraphContext/index.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js"}],"../src/NodeRenderer/HandleTypes/SourceHandle.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41379,22 +41361,37 @@ Object.defineProperty(exports, "__esModule", {
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));
var _BaseHandle = _interopRequireDefault(require("./BaseHandle"));
var _NodeIdContext = _interopRequireDefault(require("../NodeIdContext"));
var _GraphContext = require("../../GraphContext");
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); }
var _default = function _default(props) {
var _default = (0, _react.memo)(function (props) {
var nodeId = (0, _react.useContext)(_NodeIdContext.default);
var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
dispatch = _useContext.dispatch,
onConnect = _useContext.onConnect;
return _react.default.createElement(_BaseHandle.default, _extends({
source: true
source: true,
nodeId: nodeId,
dispatch: dispatch,
onConnect: onConnect
}, props));
};
});
exports.default = _default;
},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js"}],"../src/NodeRenderer/NodeTypes/DefaultNode.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","./BaseHandle":"../src/NodeRenderer/HandleTypes/BaseHandle.js","../NodeIdContext":"../src/NodeRenderer/NodeIdContext.js","../../GraphContext":"../src/GraphContext/index.js"}],"../src/NodeRenderer/NodeTypes/DefaultNode.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -41864,8 +41861,6 @@ var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _GraphContext = require("../../GraphContext");
var _actions = require("../../state/actions");
var _graphUtils = require("../../graph-utils");
@@ -41880,16 +41875,14 @@ var isInput = function isInput(e) {
var _default = function _default(EdgeComponent) {
return (0, _react.memo)(function (props) {
var _useContext = (0, _react.useContext)(_GraphContext.GraphContext),
state = _useContext.state,
dispatch = _useContext.dispatch;
var source = props.source,
target = props.target,
animated = props.animated,
type = props.type,
dispatch = props.dispatch,
selectedElements = props.selectedElements,
_onClick = props.onClick;
var selected = state.selectedElements.filter(function (e) {
var selected = selectedElements.filter(function (e) {
return (0, _graphUtils.isEdge)(e);
}).find(function (e) {
return e.source === source && e.target === target;
@@ -41921,7 +41914,7 @@ var _default = function _default(EdgeComponent) {
};
exports.default = _default;
},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../GraphContext":"../src/GraphContext/index.js","../../state/actions":"../src/state/actions.js","../../graph-utils":"../src/graph-utils.js"}],"../src/EdgeRenderer/utils.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../state/actions":"../src/state/actions.js","../../graph-utils":"../src/graph-utils.js"}],"../src/EdgeRenderer/utils.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {

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

File diff suppressed because one or more lines are too long

11
src/EdgeRenderer/EdgeTypes/wrapEdge.js
View File

@@ -1,16 +1,17 @@
import React, { useContext, memo } from 'react';
import React, { memo } from 'react';
import cx from 'classnames';
import { GraphContext } from '../../GraphContext';
import { setSelectedElements } from '../../state/actions';
import { isEdge } from '../../graph-utils';
const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
export default EdgeComponent => memo((props) => {
const { state, dispatch } = useContext(GraphContext);
const { source, target, animated, type, onClick } = props;
const selected = state.selectedElements
const {
source, target, animated, type,
dispatch, selectedElements, onClick
} = props;
const selected = selectedElements
.filter(e => isEdge(e))
.find(e => e.source === source && e.target === target);
const edgeClasses = cx('react-graph__edge', { selected, animated: animated });

131
src/EdgeRenderer/index.js
View File

@@ -1,73 +1,78 @@
import React, { PureComponent } from 'react';
import React, { memo, useContext } from 'react';
import { Consumer } from '../GraphContext';
import { GraphContext } from '../GraphContext';
import ConnectionLine from '../ConnectionLine';
class EdgeRenderer extends PureComponent {
renderEdge(e, nodes, onElementClick) {
const edgeType = e.type || 'default';
const sourceNode = nodes.find(n => n.id === e.source);
const targetNode = nodes.find(n => n.id === e.target);
function renderEdge(e, props, graphContext) {
const edgeType = e.type || 'default';
const sourceNode = graphContext.state.nodes.find(n => n.id === e.source);
const targetNode = graphContext.state.nodes.find(n => n.id === e.target);
if (!sourceNode) {
throw new Error(`couldn't create edge for source id: ${e.source}`);
}
if (!targetNode) {
throw new Error(`couldn't create edge for target id: ${e.target}`);
}
const EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes.default;
return (
<EdgeComponent
key={`${e.source}-${e.target}`}
sourceNode={sourceNode}
targetNode={targetNode}
onClick={onElementClick}
{...e}
/>
);
if (!sourceNode) {
throw new Error(`couldn't create edge for source id: ${e.source}`);
}
render() {
const {
width, height, onElementClick,
connectionLineStyle, connectionLineType
} = this.props;
if (!width) {
return null;
}
return (
<Consumer>
{({ state }) => (
<svg
width={width}
height={height}
className="react-graph__edges"
>
<g
transform={`translate(${state.transform[0]},${state.transform[1]}) scale(${state.transform[2]})`}
>
{state.edges.map(e => this.renderEdge(e, state.nodes, onElementClick))}
{state.connectionSourceId && (
<ConnectionLine
nodes={state.nodes}
connectionSourceId={state.connectionSourceId}
connectionPosition={state.connectionPosition}
transform={state.transform}
connectionLineStyle={connectionLineStyle}
connectionLineType={connectionLineType}
/>
)}
</g>
</svg>
)}
</Consumer>
);
if (!targetNode) {
throw new Error(`couldn't create edge for target id: ${e.target}`);
}
const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
return (
<EdgeComponent
key={`${e.source}-${e.target}`}
type={e.type}
sourceNode={sourceNode}
targetNode={targetNode}
onClick={props.onElementClick}
selectedElements={graphContext.state.selectedElements}
dispatch={graphContext.dispatch}
animated={e.animated}
style={e.style}
source={e.source}
target={e.target}
sourceNodeX={sourceNode.__rg.position.x}
sourceNodeY={sourceNode.__rg.position.y}
targetNodeX={targetNode.__rg.position.x}
targeteNodeY={targetNode.__rg.position.y}
/>
);
}
const EdgeRenderer = memo((props) => {
const graphContext = useContext(GraphContext);
const {
width, height, connectionLineStyle, connectionLineType
} = props;
if (!width) {
return null;
}
const { transform, edges, nodes, connectionSourceId, connectionPosition } = graphContext.state;
const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
return (
<svg
width={width}
height={height}
className="react-graph__edges"
>
<g transform={transformStyle}>
{edges.map(e => renderEdge(e, props, graphContext))}
{connectionSourceId && (
<ConnectionLine
nodes={nodes}
connectionSourceId={connectionSourceId}
connectionPosition={connectionPosition}
transform={transform}
connectionLineStyle={connectionLineStyle}
connectionLineType={connectionLineType}
/>
)}
</g>
</svg>
);
});
export default EdgeRenderer;

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

@@ -1,8 +1,6 @@
import React, { memo, useContext } from 'react';
import React, { memo } from 'react';
import cx from 'classnames';
import NodeIdContext from '../NodeIdContext'
import { GraphContext } from '../../GraphContext';
import { setConnecting, setConnectionPos } from '../../state/actions';
function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
@@ -37,9 +35,7 @@ function onMouseDown(evt, { nodeId, dispatch, onConnect, isTarget }) {
document.addEventListener('mouseup', onMouseUp)
}
export default memo(({ source, target, className = null, ...rest }) => {
const nodeId = useContext(NodeIdContext);
const { dispatch, onConnect } = useContext(GraphContext);
export default memo(({ source, target, nodeId, onConnect, dispatch, className = null, ...rest }) => {
const handleClasses = cx(
'react-graph__handle',
className,

19
src/NodeRenderer/HandleTypes/SourceHandle.js
View File

@@ -1,5 +1,20 @@
import React from 'react';
import React, { memo, useContext } from 'react';
import BaseHandle from './BaseHandle';
import NodeIdContext from '../NodeIdContext'
import { GraphContext } from '../../GraphContext';
export default props => <BaseHandle source {...props} />;
export default memo((props) => {
const nodeId = useContext(NodeIdContext);
const { dispatch, onConnect } = useContext(GraphContext);
return (
<BaseHandle
source
nodeId={nodeId}
dispatch={dispatch}
onConnect={onConnect}
{...props}
/>
);
});

19
src/NodeRenderer/HandleTypes/TargetHandle.js
View File

@@ -1,6 +1,21 @@
import React from 'react';
import React, { memo, useContext } from 'react';
import BaseHandle from './BaseHandle';
import { GraphContext } from '../../GraphContext';
import NodeIdContext from '../NodeIdContext'
export default props => <BaseHandle target {...props} />;
export default memo((props) => {
const nodeId = useContext(NodeIdContext);
const { dispatch, onConnect } = useContext(GraphContext);
return (
<BaseHandle
target
nodeId={nodeId}
dispatch={dispatch}
onConnect={onConnect}
{...props}
/>
);
});

5
src/NodeRenderer/index.js
View File

@@ -32,13 +32,12 @@ function renderNode(d, props, graphContext) {
const NodeRenderer = memo((props) => {
const graphContext = useContext(GraphContext);
const { transform, nodes } = graphContext.state;
const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
return (
<div
className="react-graph__nodes"
style={{
transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`
}}
style={transformStyle}
>
{nodes.map(d => renderNode(d, props, graphContext))}
</div>