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

Merge branch 'master' of github.com:wbkd/react-graph

Browse Source
This commit is contained in:
moklick
2019-07-29 22:11:58 +02:00
parent 71afccbaf3 a681bab94e
commit 819a822340
34 changed files with 43948 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,4 +1,3 @@
.DS_Store
node_modules
example/build
.cache

196
dist/ReactGraph.js vendored
View File

@@ -250,14 +250,22 @@
return !nodeIdsToRemove.includes(e.id) && !nodeIdsToRemove.includes(e.target) && !nodeIdsToRemove.includes(e.source);
});
};
var internalNodeId = 0;
var getId = function getId() {
return internalNodeId++;
};
var parseElements = function parseElements(e) {
e.type = e.type || 'default';
e.id = e.id ? e.id : getId();
if (isEdge(e)) {
return e;
}
return _objectSpread2({}, e, {
id: e.id.toString(),
__rg: {
position: e.position,
width: null,
@@ -30136,8 +30144,7 @@
var GraphContext = React.createContext({});
var Provider = function Provider(props) {
var onElementClick = props.onElementClick,
children = props.children;
var children = props.children;
var _useReducer = React.useReducer(reducer, initialState),
_useReducer2 = _slicedToArray(_useReducer, 2),
@@ -30170,7 +30177,6 @@
}
});
var graphContext = {
onElementClick: onElementClick,
state: state,
dispatch: dispatch
};
@@ -30201,7 +30207,7 @@
_createClass(NodeRenderer, [{
key: "renderNode",
value: function renderNode(d, onElementClick) {
value: function renderNode(d) {
var nodeType = d.type || 'default';
if (!this.props.nodeTypes[nodeType]) {
@@ -30211,7 +30217,8 @@
var NodeComponent = this.props.nodeTypes[nodeType] || this.props.nodeTypes["default"];
return React__default.createElement(NodeComponent, _extends({
key: d.id,
onClick: onElementClick
onClick: this.props.onElementClick,
onConnect: this.props.onConnect
}, d));
}
}, {
@@ -30220,15 +30227,14 @@
var _this = this;
return React__default.createElement(Consumer, null, function (_ref) {
var onElementClick = _ref.onElementClick,
state = _ref.state;
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, onElementClick);
return _this.renderNode(d);
}));
});
}
@@ -30264,7 +30270,7 @@
}
if (!targetNode) {
throw new Error("couldn't create edge for source id: ".concat(e.target));
throw new Error("couldn't create edge for target id: ".concat(e.target));
}
var EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes["default"];
@@ -32803,7 +32809,9 @@
return React__default.createElement("div", {
className: "react-graph__renderer"
}, React__default.createElement(NodeRenderer, {
nodeTypes: props.nodeTypes
nodeTypes: props.nodeTypes,
onElementClick: props.onElementClick,
onConnect: props.onConnect
}), React__default.createElement(EdgeRenderer, {
width: state.width,
height: state.height,
@@ -32895,18 +32903,52 @@
}());
});
var Handle = React.memo(function (_ref) {
var input = _ref.input,
output = _ref.output,
rest = _objectWithoutProperties(_ref, ["input", "output"]);
var NodeIdContext = React.createContext(null);
var Provider$1 = NodeIdContext.Provider;
var Consumer$1 = NodeIdContext.Consumer;
var handleClasses = classnames('react-graph__handle', {
input: input,
output: output
function _onDragStart(evt, nodeId) {
evt.dataTransfer.setData("text/plain", nodeId);
}
var BaseHandle = React.memo(function (_ref) {
var source = _ref.source,
target = _ref.target,
rest = _objectWithoutProperties(_ref, ["source", "target"]);
var handleClasses = classnames('react-graph__handle', rest.className, {
source: source,
target: target
});
return React__default.createElement("div", _extends({
className: handleClasses
}, rest));
if (target) {
return React__default.createElement("div", _extends({
className: handleClasses
}, rest));
}
return React__default.createElement(Consumer$1, null, function (nodeId) {
return React__default.createElement("div", _extends({
className: handleClasses
}, rest, {
draggable: true,
onDragStart: function onDragStart(evt) {
return _onDragStart(evt, nodeId);
}
}));
});
});
var _TargetHandle = (function (props) {
return React__default.createElement(BaseHandle, _extends({
target: true
}, props));
});
var _SourceHandle = (function (props) {
return React__default.createElement(BaseHandle, _extends({
source: true
}, props));
});
var nodeStyles = {
@@ -32920,11 +32962,7 @@
style = _ref.style;
return React__default.createElement("div", {
style: _objectSpread2({}, nodeStyles, {}, style)
}, React__default.createElement(Handle, {
input: true
}), data.label, React__default.createElement(Handle, {
output: true
}));
}, React__default.createElement(_TargetHandle, null), data.label, React__default.createElement(_SourceHandle, null));
});
var nodeStyles$1 = {
@@ -32939,9 +32977,7 @@
return React__default.createElement("div", {
style: _objectSpread2({}, nodeStyles$1, {}, style),
className: "react-graph__node-inner"
}, data.label, React__default.createElement(Handle, {
output: true
}));
}, data.label, React__default.createElement(_SourceHandle, null));
});
var nodeStyles$2 = {
@@ -32955,15 +32991,38 @@
style = _ref.style;
return React__default.createElement("div", {
style: _objectSpread2({}, nodeStyles$2, {}, style)
}, React__default.createElement(Handle, {
input: true
}), data.label);
}, React__default.createElement(_TargetHandle, null), data.label);
});
var isInputTarget = function isInputTarget(e) {
var isInput = function isInput(e) {
return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
};
var isHandle = function isHandle(e) {
return e.target.className.includes('source');
};
var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
var handle = nodeElement.querySelector(sel);
if (!handle) {
return null;
}
var bounds = handle.getBoundingClientRect();
return {
x: bounds.x - parentBounds.x,
y: bounds.y - parentBounds.y,
width: bounds.width,
height: bounds.height
};
};
var onDragOver = function onDragOver(evt) {
evt.preventDefault();
evt.dataTransfer.dropEffect = "move";
};
var wrapNode = (function (NodeComponent) {
return React.memo(function (props) {
var nodeElement = React.useRef(null);
@@ -32984,7 +33043,8 @@
onClick = props.onClick,
type = props.type,
id = props.id,
__rg = props.__rg;
__rg = props.__rg,
onConnect = props.onConnect;
var position = __rg.position;
var _state$transform = _slicedToArray(state.transform, 3),
@@ -33002,14 +33062,19 @@
var bounds = nodeElement.current.getBoundingClientRect();
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)
};
dispatch(updateNodeData(id, {
width: unscaledWith,
height: unscaledHeight
height: unscaledHeight,
handleBounds: handleBounds
}));
}, []);
var onStart = function onStart(evt) {
if (isInputTarget(evt)) {
if (isInput(evt) || isHandle(evt)) {
return false;
}
@@ -33037,7 +33102,7 @@
};
var onNodeClick = function onNodeClick(evt) {
if (isInputTarget(evt)) {
if (isInput(evt)) {
return false;
}
@@ -33053,12 +33118,29 @@
});
};
var onDrop = function onDrop(evt) {
evt.preventDefault();
var source = evt.dataTransfer.getData('text/plain');
if (source === id) {
console.warn('You can\'t connect a node with itself.');
return false;
}
onConnect({
source: source,
target: id
});
};
return React__default.createElement(reactDraggable.DraggableCore, {
grid: [1, 1],
onStart: onStart,
onDrag: onDrag,
scale: k
}, React__default.createElement("div", {
onDrop: onDrop,
onDragOver: onDragOver,
className: nodeClasses,
ref: nodeElement,
style: {
@@ -33066,9 +33148,11 @@
transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
},
onClick: onNodeClick
}, React__default.createElement(Provider$1, {
value: id
}, React__default.createElement(NodeComponent, _extends({}, props, {
selected: selected
}))));
})))));
});
});
@@ -33091,10 +33175,16 @@
var targetNode = props.targetNode,
sourceNode = props.sourceNode;
var style = props.style || {};
var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
var targetY = targetNode.__rg.position.y;
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 targetHandle = targetNode.__rg.handleBounds.target;
var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
var targetHandleY = targetHandle ? targetHandle.y + targetHandle.height / 2 : 0;
var targetX = targetNode.__rg.position.x + targetHandleX;
var targetY = targetNode.__rg.position.y + targetHandleY;
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);
@@ -33107,16 +33197,20 @@
var targetNode = props.targetNode,
sourceNode = props.sourceNode;
var style = props.style || {};
var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
var sourceHandle = sourceNode.__rg.handleBounds.source;
var sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rg.width / 2;
var sourceX = sourceNode.__rg.position.x + sourceHandleX;
var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
var targetHandle = targetNode.__rg.handleBounds.target;
var targetHandleX = targetHandle ? targetHandle.x + targetHandle.width / 2 : targetNode.__rg.width / 2;
var targetX = targetNode.__rg.position.x + targetHandleX;
var targetY = targetNode.__rg.position.y;
return React__default.createElement("path", _extends({}, style, {
d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(targetX, ",").concat(targetY)
}));
});
var isInputTarget$1 = function isInputTarget(e) {
var isInput$1 = function isInput(e) {
return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
};
@@ -33143,7 +33237,7 @@
return React__default.createElement("g", {
className: edgeClasses,
onClick: function onClick(e) {
if (isInputTarget$1(e)) {
if (isInput$1(e)) {
return false;
}
@@ -33203,7 +33297,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@-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: 5px;\n transform: translate(-50%, 0);\n background: rgba(255, 255, 255, 0.4);\n left: 50%;\n top: 0;\n}\n\n.react-graph__handle.output {\n top: auto;\n bottom: 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@-webkit-keyframes dashdraw {\n from {stroke-dashoffset: 10}\n}\n\n@keyframes dashdraw {\n from {stroke-dashoffset: 10}\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 3;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #555;\n }\n\n.react-graph__handle {\n position: absolute;\n width: 10px;\n height: 8px;\n background: rgba(255, 255, 255, 0.4);\n}\n\n.react-graph__handle.source {\n top: auto;\n left: 50%;\n bottom: 0;\n transform: translate(-50%, 0);\n cursor: crosshair;\n }\n\n.react-graph__handle.target {\n left: 50%;\n top: 0;\n transform: translate(-50%, 0);\n }\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n pointer-events: all;\n }";
styleInject(css);
var ReactGraph =
@@ -33233,7 +33327,8 @@
onMove = _this$props.onMove,
onChange = _this$props.onChange,
elements = _this$props.elements,
onElementsRemove = _this$props.onElementsRemove;
onElementsRemove = _this$props.onElementsRemove,
onConnect = _this$props.onConnect;
var _elements$map$reduce = elements.map(parseElements).reduce(separateElements, {}),
nodes = _elements$map$reduce.nodes,
@@ -33250,6 +33345,8 @@
onLoad: onLoad,
onMove: onMove,
onChange: onChange,
onElementClick: onElementClick,
onConnect: onConnect,
nodeTypes: this.nodeTypes,
edgeTypes: this.edgeTypes
}), React__default.createElement(GlobalKeyHandler, {
@@ -33264,6 +33361,7 @@
ReactGraph.defaultProps = {
onElementClick: function onElementClick() {},
onElementsRemove: function onElementsRemove() {},
onConnect: function onConnect() {},
onLoad: function onLoad() {},
onMove: function onMove() {},
onChange: function onChange() {},
@@ -33281,7 +33379,11 @@
var isNode$1 = isNode;
var isEdge$1 = isEdge;
var removeElements$1 = removeElements;
var SourceHandle = _SourceHandle;
var TargetHandle = _TargetHandle;
exports.SourceHandle = SourceHandle;
exports.TargetHandle = TargetHandle;
exports.default = ReactGraph;
exports.isEdge = isEdge$1;
exports.isNode = isNode$1;

13
example/SimpleGraph.js
View File

@@ -1,18 +1,20 @@
import React, { PureComponent } from 'react';
import Graph, { isEdge, removeElements, getOutgoers } from '../src';
import Graph, { isEdge, removeElements, getOutgoers, SourceHandle, TargetHandle } from '../src';
// import Graph from '../dist/ReactGraph';
const SpecialNode = ({ data, onChange, styles }) => (
<div
style={{ background: '#FFCC00', padding: 10, borderRadius: 30, ...styles }}
style={{ background: '#FFCC00', padding: 10, borderRadius: 2, ...styles }}
>
<TargetHandle style={{ left: 10, background: '#999' }} />
<div>I am <strong>special</strong>!<br />{data.label}</div>
<select onChange={(e) => onChange(e.target.value, data)}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<SourceHandle style={{ left: 10, background: '#999' }} />
</div>
);
@@ -46,12 +48,14 @@ class App extends PureComponent {
{ id: '3', data: { label: 'I bring my own style' }, position: { x: 100, y: 200 }, style: { background: '#eee', color: '#222', border: '1px solid #bbb' } },
{ id: '4', type: 'output', data: { label: 'nody nodes' }, position: { x: 50, y: 300 } },
{ id: '5', type: 'default', data: { label: 'Another node'}, position: { x: 400, y: 300 } },
{ id: '6', type: 'special', onChange, data: { label: 'no option selected' }, position: { x: 425, y: 400 } },
{ id: '6', type: 'special', onChange, data: { label: 'no option selected' }, position: { x: 425, y: 375 } },
{ id: '7', type: 'output', data: { label: 'output' }, position: { x: 250, y: 500 } },
{ source: '1', target: '2', animated: true },
{ source: '2', target: '3' },
{ source: '3', target: '4' },
{ source: '3', target: '5' },
{ source: '5', target: '6', type: 'straight', animated: true, style: { stroke: '#FFCC00' } }
{ source: '5', target: '6', type: 'straight', animated: true, style: { stroke: '#FFCC00' } },
{ source: '6', target: '7', style: { stroke: '#FFCC00' }},
]
};
}
@@ -114,6 +118,7 @@ class App extends PureComponent {
elements={this.state.elements}
onElementClick={element => this.onElementClick(element)}
onElementsRemove={elements => this.onElementsRemove(elements)}
onConnect={params => console.log(params)}
style={{ width: '100%', height: '100%' }}
onLoad={graphInstance => this.onLoad(graphInstance)}
onChange={(elements) => this.onChange(elements)}

119
example/build/ReactGraph.ba0da17b.css Normal file
View File

@@ -0,0 +1,119 @@
.react-graph {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.react-graph__renderer {
width: 100%;
height: 100%;
position: absolute;
}
.react-graph__zoompane {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.react-graph__selectionpane {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.react-graph__selection {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-graph__edges {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 2;
}
.react-graph__edge {
fill: none;
stroke: #333;
stroke-width: 2;
pointer-events: all;
}
.react-graph__edge.selected {
stroke: #ff5050;
}
.react-graph__nodes {
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
pointer-events: none;
transform-origin: 0 0;
}
.react-graph__node {
position: absolute;
color: #222;
font-family: sans-serif;
font-size: 12px;
text-align: center;
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
}
.react-graph__node:hover > * {
box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
}
.react-graph__node.selected > * {
box-shadow: 0 0 0 2px #000;
}
.react-graph__handle {
position: absolute;
width: 12px;
height: 12px;
transform: translate(-50%, -50%);
background: #222;
left: 50%;
border-radius: 50%;
}
.react-graph__nodesselection {
z-index: 3;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: left top;
pointer-events: none;
}
.react-graph__nodesselection-rect {
position: absolute;
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
/*# sourceMappingURL=/ReactGraph.ba0da17b.css.map */

1
example/build/ReactGraph.ba0da17b.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../dist/ReactGraph.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"ReactGraph.ba0da17b.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: #333;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-graph__edge.selected {\n stroke: #ff5050;\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 #000;\n }\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\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 }"]}

396
example/build/ReactGraph.ba0da17b.js Normal file
View File

@@ -0,0 +1,396 @@
// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles
parcelRequire = (function (modules, cache, entry, globalName) {
// Save the require from previous bundle to this closure if any
var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
var nodeRequire = typeof require === 'function' && require;
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
if (!jumped && currentRequire) {
return currentRequire(name, true);
}
// If there are other bundles on this page the require from the
// previous one is saved to 'previousRequire'. Repeat this as
// many times as there are bundles until the module is found or
// we exhaust the require chain.
if (previousRequire) {
return previousRequire(name, true);
}
// Try the node require function if it exists.
if (nodeRequire && typeof name === 'string') {
return nodeRequire(name);
}
var err = new Error('Cannot find module \'' + name + '\'');
err.code = 'MODULE_NOT_FOUND';
throw err;
}
localRequire.resolve = resolve;
localRequire.cache = {};
var module = cache[name] = new newRequire.Module(name);
modules[name][0].call(module.exports, localRequire, module, module.exports, this);
}
return cache[name].exports;
function localRequire(x){
return newRequire(localRequire.resolve(x));
}
function resolve(x){
return modules[name][1][x] || x;
}
}
function Module(moduleName) {
this.id = moduleName;
this.bundle = newRequire;
this.exports = {};
}
newRequire.isParcelRequire = true;
newRequire.Module = Module;
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
newRequire.register = function (id, exports) {
modules[id] = [function (require, module) {
module.exports = exports;
}, {}];
};
var error;
for (var i = 0; i < entry.length; i++) {
try {
newRequire(entry[i]);
} catch (e) {
// Save first error but execute all entries
if (!error) {
error = e;
}
}
}
if (entry.length) {
// Expose entry point to Node, AMD or browser globals
// Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
var mainExports = newRequire(entry[entry.length - 1]);
// CommonJS
if (typeof exports === "object" && typeof module !== "undefined") {
module.exports = mainExports;
// RequireJS
} else if (typeof define === "function" && define.amd) {
define(function () {
return mainExports;
});
// <script>
} else if (globalName) {
this[globalName] = mainExports;
}
}
// Override the current require with this new one
parcelRequire = newRequire;
if (error) {
// throw error from earlier, _after updating parcelRequire_
throw error;
}
return newRequire;
})({"../node_modules/parcel-bundler/src/builtins/bundle-url.js":[function(require,module,exports) {
var bundleURL = null;
function getBundleURLCached() {
if (!bundleURL) {
bundleURL = getBundleURL();
}
return bundleURL;
}
function getBundleURL() {
// Attempt to find the URL of the current script and use that as the base URL
try {
throw new Error();
} catch (err) {
var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
if (matches) {
return getBaseURL(matches[0]);
}
}
return '/';
}
function getBaseURL(url) {
return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^/]+$/, '$1') + '/';
}
exports.getBundleURL = getBundleURLCached;
exports.getBaseURL = getBaseURL;
},{}],"../node_modules/parcel-bundler/src/builtins/css-loader.js":[function(require,module,exports) {
var bundle = require('./bundle-url');
function updateLink(link) {
var newLink = link.cloneNode();
newLink.onload = function () {
link.remove();
};
newLink.href = link.href.split('?')[0] + '?' + Date.now();
link.parentNode.insertBefore(newLink, link.nextSibling);
}
var cssTimeout = null;
function reloadCSS() {
if (cssTimeout) {
return;
}
cssTimeout = setTimeout(function () {
var links = document.querySelectorAll('link[rel="stylesheet"]');
for (var i = 0; i < links.length; i++) {
if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
updateLink(links[i]);
}
}
cssTimeout = null;
}, 50);
}
module.exports = reloadCSS;
},{"./bundle-url":"../node_modules/parcel-bundler/src/builtins/bundle-url.js"}],"../dist/ReactGraph.css":[function(require,module,exports) {
var reloadCSS = require('_css_loader');
module.hot.dispose(reloadCSS);
module.hot.accept(reloadCSS);
},{"_css_loader":"../node_modules/parcel-bundler/src/builtins/css-loader.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
var global = arguments[3];
var OVERLAY_ID = '__parcel__error__overlay__';
var OldModule = module.bundle.Module;
function Module(moduleName) {
OldModule.call(this, moduleName);
this.hot = {
data: module.bundle.hotData,
_acceptCallbacks: [],
_disposeCallbacks: [],
accept: function (fn) {
this._acceptCallbacks.push(fn || function () {});
},
dispose: function (fn) {
this._disposeCallbacks.push(fn);
}
};
module.bundle.hotData = null;
}
module.bundle.Module = Module;
var checkedAssets, assetsToAccept;
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 + ':' + "65126" + '/');
ws.onmessage = function (event) {
checkedAssets = {};
assetsToAccept = [];
var data = JSON.parse(event.data);
if (data.type === 'update') {
var handled = false;
data.assets.forEach(function (asset) {
if (!asset.isNew) {
var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
if (didAccept) {
handled = true;
}
}
}); // Enable HMR for CSS by default.
handled = handled || data.assets.every(function (asset) {
return asset.type === 'css' && asset.generated.js;
});
if (handled) {
console.clear();
data.assets.forEach(function (asset) {
hmrApply(global.parcelRequire, asset);
});
assetsToAccept.forEach(function (v) {
hmrAcceptRun(v[0], v[1]);
});
} else {
window.location.reload();
}
}
if (data.type === 'reload') {
ws.close();
ws.onclose = function () {
location.reload();
};
}
if (data.type === 'error-resolved') {
console.log('[parcel] ✨ Error resolved');
removeErrorOverlay();
}
if (data.type === 'error') {
console.error('[parcel] 🚨 ' + data.error.message + '\n' + data.error.stack);
removeErrorOverlay();
var overlay = createErrorOverlay(data);
document.body.appendChild(overlay);
}
};
}
function removeErrorOverlay() {
var overlay = document.getElementById(OVERLAY_ID);
if (overlay) {
overlay.remove();
}
}
function createErrorOverlay(data) {
var overlay = document.createElement('div');
overlay.id = OVERLAY_ID; // html encode message and stack trace
var message = document.createElement('div');
var stackTrace = document.createElement('pre');
message.innerText = data.error.message;
stackTrace.innerText = data.error.stack;
overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
return overlay;
}
function getParents(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return [];
}
var parents = [];
var k, d, dep;
for (k in modules) {
for (d in modules[k][1]) {
dep = modules[k][1][d];
if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
parents.push(k);
}
}
}
if (bundle.parent) {
parents = parents.concat(getParents(bundle.parent, id));
}
return parents;
}
function hmrApply(bundle, asset) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (modules[asset.id] || !bundle.parent) {
var fn = new Function('require', 'module', 'exports', asset.generated.js);
asset.isNew = !modules[asset.id];
modules[asset.id] = [fn, asset.deps];
} else if (bundle.parent) {
hmrApply(bundle.parent, asset);
}
}
function hmrAcceptCheck(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (!modules[id] && bundle.parent) {
return hmrAcceptCheck(bundle.parent, id);
}
if (checkedAssets[id]) {
return;
}
checkedAssets[id] = true;
var cached = bundle.cache[id];
assetsToAccept.push([bundle, id]);
if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
return true;
}
return getParents(global.parcelRequire, id).some(function (id) {
return hmrAcceptCheck(global.parcelRequire, id);
});
}
function hmrAcceptRun(bundle, id) {
var cached = bundle.cache[id];
bundle.hotData = {};
if (cached) {
cached.hot.data = bundle.hotData;
}
if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
cached.hot._disposeCallbacks.forEach(function (cb) {
cb(bundle.hotData);
});
}
delete bundle.cache[id];
bundle(id);
cached = bundle.cache[id];
if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
cached.hot._acceptCallbacks.forEach(function (cb) {
cb();
});
return true;
}
}
},{}]},{},["../node_modules/parcel-bundler/src/builtins/hmr-runtime.js"], null)
//# sourceMappingURL=/ReactGraph.ba0da17b.js.map

1
example/build/ReactGraph.ba0da17b.js.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../node_modules/parcel-bundler/src/builtins/bundle-url.js","../node_modules/parcel-bundler/src/builtins/css-loader.js"],"names":["bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","stack","match","getBaseURL","url","replace","exports","bundle","require","updateLink","link","newLink","cloneNode","onload","remove","href","split","Date","now","parentNode","insertBefore","nextSibling","cssTimeout","reloadCSS","setTimeout","links","document","querySelectorAll","i","length","module"],"mappings":"AAAA,ACAA,IDAIA,ACAAY,MAAM,GDAG,ACAAC,GDAG,IAAhB,ACAoB,CAAC,cAAD,CAApB;;ADCA,ACCA,SDDSZ,ACCAa,UAAT,CAAoBC,IAApB,EAA0B,CDD1B,GAA8B;AAC5B,ACCA,MDDI,ACCAC,CDDChB,MCCM,GDDX,ACCce,EDDE,ECCE,CAACE,SAAL,EAAd;ADAEjB,IAAAA,SAAS,GAAGE,YAAY,EAAxB;AACD,ACADc,EAAAA,OAAO,CAACE,MAAR,GAAiB,YAAY;AAC3BH,IAAAA,IAAI,CAACI,MAAL;ADCF,ACAC,GAFD,MDEOnB,SAAP;AACD;ACACgB,EAAAA,OAAO,CAACI,IAAR,GAAeL,IAAI,CAACK,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,IAA0B,GAA1B,GAAgCC,IAAI,CAACC,GAAL,EAA/C;ADEF,ACDER,EAAAA,IAAI,CAACS,EDCEtB,QCDP,CAAgBuB,GDClB,GAAwB,MCDtB,CAA6BT,OAA7B,EAAsCD,IAAI,CAACW,WAA3C;ADEA,ACDD;ADEC,MAAI;AACF,ACDJ,IAAIC,MDCM,IAAIxB,ACDA,GAAG,EDCP,EAAN,ACDJ;ADEG,GAFD,CAEE,OAAOC,GAAP,EAAY;AACZ,ACFJ,QDEQC,CCFCuB,MDEM,GAAG,ACFlB,CDEmB,ECFE,GDEGxB,GAAG,CAACE,KAAV,EAAiBC,KAAjB,CAAuB,+DAAvB,CAAd;ACDF,MAAIoB,UAAJ,EAAgB;ADEd,ACDA,QDCItB,OAAJ,EAAa;AACX,ACDH,aDCUG,UAAU,CAACH,OAAO,CAAC,CAAD,CAAR,CAAjB;AACD;AACF,ACDDsB,EAAAA,UAAU,GAAGE,UAAU,CAAC,YAAY;AAClC,QAAIC,KAAK,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,CAAZ;ADEF,SAAO,GAAP;AACD,ACFG,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,UAAIrB,MAAM,CAACJ,UAAP,CAAkBsB,KAAK,CAACG,CAAD,CAAL,CAASb,IAA3B,MAAqCR,MAAM,CAACV,YAAP,EAAzC,EAAgE;ADGtE,ACFQY,QAAAA,CDECN,SCFS,CDElB,ACFmBsB,CDECrB,GAApB,CCFwB,CDEC,ACFAwB,CAAD,CAAN,CAAV;ADGN,ACFK,SDEE,CAAC,KAAKxB,GAAN,EAAWC,OAAX,CAAmB,sEAAnB,EAA2F,IAA3F,IAAmG,GAA1G;AACD,ACFI;;ADILC,ACFIgB,IAAAA,GDEG,CAACzB,MCFM,GAAG,GDEjB,CCFI,EDEmBD,kBAAvB;AACAU,ACFG,GATsB,EASpB,EDEE,ACXkB,CDWjBH,ACXN,UDWF,GAAqBA,UAArB;ACDC;;AAED2B,MAAM,CAACxB,OAAP,GAAiBiB,SAAjB","file":"ReactGraph.ba0da17b.js","sourceRoot":"..","sourcesContent":["var bundleURL = null;\nfunction getBundleURLCached() {\n if (!bundleURL) {\n bundleURL = getBundleURL();\n }\n\n return bundleURL;\n}\n\nfunction getBundleURL() {\n // Attempt to find the URL of the current script and use that as the base URL\n try {\n throw new Error;\n } catch (err) {\n var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n if (matches) {\n return getBaseURL(matches[0]);\n }\n }\n\n return '/';\n}\n\nfunction getBaseURL(url) {\n return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var bundle = require('./bundle-url');\n\nfunction updateLink(link) {\n var newLink = link.cloneNode();\n newLink.onload = function () {\n link.remove();\n };\n newLink.href = link.href.split('?')[0] + '?' + Date.now();\n link.parentNode.insertBefore(newLink, link.nextSibling);\n}\n\nvar cssTimeout = null;\nfunction reloadCSS() {\n if (cssTimeout) {\n return;\n }\n\n cssTimeout = setTimeout(function () {\n var links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n for (var i = 0; i < links.length; i++) {\n if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {\n updateLink(links[i]);\n }\n }\n\n cssTimeout = null;\n }, 50);\n}\n\nmodule.exports = reloadCSS;\n"]}

145
example/build/example.e31bb0bc.css Normal file
View File

@@ -0,0 +1,145 @@
.react-graph {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.react-graph__renderer {
width: 100%;
height: 100%;
position: absolute;
}
.react-graph__zoompane {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.react-graph__selectionpane {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.react-graph__selection {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
}
.react-graph__edges {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 2;
}
.react-graph__edge {
fill: none;
stroke: #bbb;
stroke-width: 2;
pointer-events: all;
}
.react-graph__edge.selected {
stroke: #555;
}
.react-graph__edge.animated {
stroke-dasharray: 5;
-webkit-animation: dashdraw 0.5s linear infinite;
animation: dashdraw 0.5s linear infinite;
}
@-webkit-keyframes dashdraw {
from {stroke-dashoffset: 10}
}
@keyframes dashdraw {
from {stroke-dashoffset: 10}
}
.react-graph__nodes {
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
pointer-events: none;
transform-origin: 0 0;
}
.react-graph__node {
position: absolute;
color: #222;
font-family: sans-serif;
font-size: 12px;
text-align: center;
cursor: -webkit-grab;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: all;
transform-origin: 0 0;
}
.react-graph__node:hover > * {
box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
}
.react-graph__node.selected > * {
box-shadow: 0 0 0 2px #555;
}
.react-graph__handle {
position: absolute;
width: 10px;
height: 8px;
background: rgba(255, 255, 255, 0.4);
}
.react-graph__handle.source {
top: auto;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
cursor: crosshair;
}
.react-graph__handle.target {
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
.react-graph__nodesselection {
z-index: 3;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: left top;
pointer-events: none;
}
.react-graph__nodesselection-rect {
position: absolute;
background: rgba(0, 89, 220, 0.08);
border: 1px dotted rgba(0, 89, 220, 0.8);
pointer-events: all;
}
/*# sourceMappingURL=/example.e31bb0bc.css.map */

1
example/build/example.e31bb0bc.css.map Normal file
View File

@@ -0,0 +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}"]}

42535
example/build/example.e31bb0bc.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
example/build/example.e31bb0bc.js.map Normal file
View File

File diff suppressed because one or more lines are too long

26
example/build/index.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" type="text/css" href="../dist/ReactGraph.css">-->
<title>Document</title>
<style>html, body {
margin: 0
}
html, body, #root {
height: 100%;
}
.controls {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 4;
}</style>
<link rel="stylesheet" href="/example.e31bb0bc.css"></head>
<body>
<div id="root"></div>
<script src="/example.e31bb0bc.js"></script>
</body>
</html>

391
example/build/index.js Normal file
View File

@@ -0,0 +1,391 @@
// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles
parcelRequire = (function (modules, cache, entry, globalName) {
// Save the require from previous bundle to this closure if any
var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
var nodeRequire = typeof require === 'function' && require;
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
if (!jumped && currentRequire) {
return currentRequire(name, true);
}
// If there are other bundles on this page the require from the
// previous one is saved to 'previousRequire'. Repeat this as
// many times as there are bundles until the module is found or
// we exhaust the require chain.
if (previousRequire) {
return previousRequire(name, true);
}
// Try the node require function if it exists.
if (nodeRequire && typeof name === 'string') {
return nodeRequire(name);
}
var err = new Error('Cannot find module \'' + name + '\'');
err.code = 'MODULE_NOT_FOUND';
throw err;
}
localRequire.resolve = resolve;
localRequire.cache = {};
var module = cache[name] = new newRequire.Module(name);
modules[name][0].call(module.exports, localRequire, module, module.exports, this);
}
return cache[name].exports;
function localRequire(x){
return newRequire(localRequire.resolve(x));
}
function resolve(x){
return modules[name][1][x] || x;
}
}
function Module(moduleName) {
this.id = moduleName;
this.bundle = newRequire;
this.exports = {};
}
newRequire.isParcelRequire = true;
newRequire.Module = Module;
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
newRequire.register = function (id, exports) {
modules[id] = [function (require, module) {
module.exports = exports;
}, {}];
};
var error;
for (var i = 0; i < entry.length; i++) {
try {
newRequire(entry[i]);
} catch (e) {
// Save first error but execute all entries
if (!error) {
error = e;
}
}
}
if (entry.length) {
// Expose entry point to Node, AMD or browser globals
// Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
var mainExports = newRequire(entry[entry.length - 1]);
// CommonJS
if (typeof exports === "object" && typeof module !== "undefined") {
module.exports = mainExports;
// RequireJS
} else if (typeof define === "function" && define.amd) {
define(function () {
return mainExports;
});
// <script>
} else if (globalName) {
this[globalName] = mainExports;
}
}
// Override the current require with this new one
parcelRequire = newRequire;
if (error) {
// throw error from earlier, _after updating parcelRequire_
throw error;
}
return newRequire;
})({"../node_modules/parcel-bundler/src/builtins/bundle-url.js":[function(require,module,exports) {
var bundleURL = null;
function getBundleURLCached() {
if (!bundleURL) {
bundleURL = getBundleURL();
}
return bundleURL;
}
function getBundleURL() {
// Attempt to find the URL of the current script and use that as the base URL
try {
throw new Error();
} catch (err) {
var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\/\/[^)\n]+/g);
if (matches) {
return getBaseURL(matches[0]);
}
}
return '/';
}
function getBaseURL(url) {
return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\/\/.+)\/[^/]+$/, '$1') + '/';
}
exports.getBundleURL = getBundleURLCached;
exports.getBaseURL = getBaseURL;
},{}],"../node_modules/parcel-bundler/src/builtins/css-loader.js":[function(require,module,exports) {
var bundle = require('./bundle-url');
function updateLink(link) {
var newLink = link.cloneNode();
newLink.onload = function () {
link.remove();
};
newLink.href = link.href.split('?')[0] + '?' + Date.now();
link.parentNode.insertBefore(newLink, link.nextSibling);
}
var cssTimeout = null;
function reloadCSS() {
if (cssTimeout) {
return;
}
cssTimeout = setTimeout(function () {
var links = document.querySelectorAll('link[rel="stylesheet"]');
for (var i = 0; i < links.length; i++) {
if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {
updateLink(links[i]);
}
}
cssTimeout = null;
}, 50);
}
module.exports = reloadCSS;
},{"./bundle-url":"../node_modules/parcel-bundler/src/builtins/bundle-url.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
var global = arguments[3];
var OVERLAY_ID = '__parcel__error__overlay__';
var OldModule = module.bundle.Module;
function Module(moduleName) {
OldModule.call(this, moduleName);
this.hot = {
data: module.bundle.hotData,
_acceptCallbacks: [],
_disposeCallbacks: [],
accept: function (fn) {
this._acceptCallbacks.push(fn || function () {});
},
dispose: function (fn) {
this._disposeCallbacks.push(fn);
}
};
module.bundle.hotData = null;
}
module.bundle.Module = Module;
var checkedAssets, assetsToAccept;
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 + ':' + "54186" + '/');
ws.onmessage = function (event) {
checkedAssets = {};
assetsToAccept = [];
var data = JSON.parse(event.data);
if (data.type === 'update') {
var handled = false;
data.assets.forEach(function (asset) {
if (!asset.isNew) {
var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
if (didAccept) {
handled = true;
}
}
}); // Enable HMR for CSS by default.
handled = handled || data.assets.every(function (asset) {
return asset.type === 'css' && asset.generated.js;
});
if (handled) {
console.clear();
data.assets.forEach(function (asset) {
hmrApply(global.parcelRequire, asset);
});
assetsToAccept.forEach(function (v) {
hmrAcceptRun(v[0], v[1]);
});
} else {
window.location.reload();
}
}
if (data.type === 'reload') {
ws.close();
ws.onclose = function () {
location.reload();
};
}
if (data.type === 'error-resolved') {
console.log('[parcel] ✨ Error resolved');
removeErrorOverlay();
}
if (data.type === 'error') {
console.error('[parcel] 🚨 ' + data.error.message + '\n' + data.error.stack);
removeErrorOverlay();
var overlay = createErrorOverlay(data);
document.body.appendChild(overlay);
}
};
}
function removeErrorOverlay() {
var overlay = document.getElementById(OVERLAY_ID);
if (overlay) {
overlay.remove();
}
}
function createErrorOverlay(data) {
var overlay = document.createElement('div');
overlay.id = OVERLAY_ID; // html encode message and stack trace
var message = document.createElement('div');
var stackTrace = document.createElement('pre');
message.innerText = data.error.message;
stackTrace.innerText = data.error.stack;
overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
return overlay;
}
function getParents(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return [];
}
var parents = [];
var k, d, dep;
for (k in modules) {
for (d in modules[k][1]) {
dep = modules[k][1][d];
if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
parents.push(k);
}
}
}
if (bundle.parent) {
parents = parents.concat(getParents(bundle.parent, id));
}
return parents;
}
function hmrApply(bundle, asset) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (modules[asset.id] || !bundle.parent) {
var fn = new Function('require', 'module', 'exports', asset.generated.js);
asset.isNew = !modules[asset.id];
modules[asset.id] = [fn, asset.deps];
} else if (bundle.parent) {
hmrApply(bundle.parent, asset);
}
}
function hmrAcceptCheck(bundle, id) {
var modules = bundle.modules;
if (!modules) {
return;
}
if (!modules[id] && bundle.parent) {
return hmrAcceptCheck(bundle.parent, id);
}
if (checkedAssets[id]) {
return;
}
checkedAssets[id] = true;
var cached = bundle.cache[id];
assetsToAccept.push([bundle, id]);
if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
return true;
}
return getParents(global.parcelRequire, id).some(function (id) {
return hmrAcceptCheck(global.parcelRequire, id);
});
}
function hmrAcceptRun(bundle, id) {
var cached = bundle.cache[id];
bundle.hotData = {};
if (cached) {
cached.hot.data = bundle.hotData;
}
if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
cached.hot._disposeCallbacks.forEach(function (cb) {
cb(bundle.hotData);
});
}
delete bundle.cache[id];
bundle(id);
cached = bundle.cache[id];
if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
cached.hot._acceptCallbacks.forEach(function (cb) {
cb();
});
return true;
}
}
},{}]},{},["../node_modules/parcel-bundler/src/builtins/hmr-runtime.js"], null)
//# sourceMappingURL=/index.js.map

1
example/build/index.js.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../node_modules/parcel-bundler/src/builtins/bundle-url.js","../node_modules/parcel-bundler/src/builtins/css-loader.js"],"names":["bundleURL","getBundleURLCached","getBundleURL","Error","err","matches","stack","match","getBaseURL","url","replace","exports","bundle","require","updateLink","link","newLink","cloneNode","onload","remove","href","split","Date","now","parentNode","insertBefore","nextSibling","cssTimeout","reloadCSS","setTimeout","links","document","querySelectorAll","i","length","module"],"mappings":"AAAA,ACAA,IDAIA,ACAAY,MAAM,GDAG,ACAAC,GDAG,IAAhB,ACAoB,CAAC,cAAD,CAApB;;ADCA,ACCA,SDDSZ,ACCAa,UAAT,CAAoBC,IAApB,EAA0B,CDD1B,GAA8B;AAC5B,ACCA,MDDI,ACCAC,CDDChB,MCCM,GDDX,ACCce,EDDE,ECCE,CAACE,SAAL,EAAd;ADAEjB,IAAAA,SAAS,GAAGE,YAAY,EAAxB;AACD,ACADc,EAAAA,OAAO,CAACE,MAAR,GAAiB,YAAY;AAC3BH,IAAAA,IAAI,CAACI,MAAL;ADCF,ACAC,GAFD,MDEOnB,SAAP;AACD;ACACgB,EAAAA,OAAO,CAACI,IAAR,GAAeL,IAAI,CAACK,IAAL,CAAUC,KAAV,CAAgB,GAAhB,EAAqB,CAArB,IAA0B,GAA1B,GAAgCC,IAAI,CAACC,GAAL,EAA/C;ADEF,ACDER,EAAAA,IAAI,CAACS,EDCEtB,QCDP,CAAgBuB,GDClB,GAAwB,MCDtB,CAA6BT,OAA7B,EAAsCD,IAAI,CAACW,WAA3C;ADEA,ACDD;ADEC,MAAI;AACF,ACDJ,IAAIC,MDCM,IAAIxB,ACDA,GAAG,EDCP,EAAN,ACDJ;ADEG,GAFD,CAEE,OAAOC,GAAP,EAAY;AACZ,ACFJ,QDEQC,CCFCuB,MDEM,GAAG,ACFlB,CDEmB,ECFE,GDEGxB,GAAG,CAACE,KAAV,EAAiBC,KAAjB,CAAuB,+DAAvB,CAAd;ACDF,MAAIoB,UAAJ,EAAgB;ADEd,ACDA,QDCItB,OAAJ,EAAa;AACX,ACDH,aDCUG,UAAU,CAACH,OAAO,CAAC,CAAD,CAAR,CAAjB;AACD;AACF,ACDDsB,EAAAA,UAAU,GAAGE,UAAU,CAAC,YAAY;AAClC,QAAIC,KAAK,GAAGC,QAAQ,CAACC,gBAAT,CAA0B,wBAA1B,CAAZ;ADEF,SAAO,GAAP;AACD,ACFG,SAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGH,KAAK,CAACI,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,UAAIrB,MAAM,CAACJ,UAAP,CAAkBsB,KAAK,CAACG,CAAD,CAAL,CAASb,IAA3B,MAAqCR,MAAM,CAACV,YAAP,EAAzC,EAAgE;ADGtE,ACFQY,QAAAA,CDECN,SCFS,CDElB,ACFmBsB,CDECrB,GAApB,CCFwB,CDEC,ACFAwB,CAAD,CAAN,CAAV;ADGN,ACFK,SDEE,CAAC,KAAKxB,GAAN,EAAWC,OAAX,CAAmB,sEAAnB,EAA2F,IAA3F,IAAmG,GAA1G;AACD,ACFI;;ADILC,ACFIgB,IAAAA,GDEG,CAACzB,MCFM,GAAG,GDEjB,CCFI,EDEmBD,kBAAvB;AACAU,ACFG,GATsB,EASpB,EDEE,ACXkB,CDWjBH,ACXN,UDWF,GAAqBA,UAArB;ACDC;;AAED2B,MAAM,CAACxB,OAAP,GAAiBiB,SAAjB","file":"index.js","sourceRoot":"..","sourcesContent":["var bundleURL = null;\nfunction getBundleURLCached() {\n if (!bundleURL) {\n bundleURL = getBundleURL();\n }\n\n return bundleURL;\n}\n\nfunction getBundleURL() {\n // Attempt to find the URL of the current script and use that as the base URL\n try {\n throw new Error;\n } catch (err) {\n var matches = ('' + err.stack).match(/(https?|file|ftp|chrome-extension|moz-extension):\\/\\/[^)\\n]+/g);\n if (matches) {\n return getBaseURL(matches[0]);\n }\n }\n\n return '/';\n}\n\nfunction getBaseURL(url) {\n return ('' + url).replace(/^((?:https?|file|ftp|chrome-extension|moz-extension):\\/\\/.+)\\/[^/]+$/, '$1') + '/';\n}\n\nexports.getBundleURL = getBundleURLCached;\nexports.getBaseURL = getBaseURL;\n","var bundle = require('./bundle-url');\n\nfunction updateLink(link) {\n var newLink = link.cloneNode();\n newLink.onload = function () {\n link.remove();\n };\n newLink.href = link.href.split('?')[0] + '?' + Date.now();\n link.parentNode.insertBefore(newLink, link.nextSibling);\n}\n\nvar cssTimeout = null;\nfunction reloadCSS() {\n if (cssTimeout) {\n return;\n }\n\n cssTimeout = setTimeout(function () {\n var links = document.querySelectorAll('link[rel=\"stylesheet\"]');\n for (var i = 0; i < links.length; i++) {\n if (bundle.getBaseURL(links[i].href) === bundle.getBundleURL()) {\n updateLink(links[i]);\n }\n }\n\n cssTimeout = null;\n }, 50);\n}\n\nmodule.exports = reloadCSS;\n"]}

14
src/EdgeRenderer/EdgeTypes/BezierEdge.js
View File

@@ -4,11 +4,17 @@ export default (props) => {
const { targetNode, sourceNode } = props;
const style = props.style || {};
const sourceX = sourceNode.__rg.position.x + (sourceNode.__rg.width / 2);
const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
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 = targetNode.__rg.position.x + (targetNode.__rg.width / 2);
const targetY = targetNode.__rg.position.y;
const targetHandle = targetNode.__rg.handleBounds.target;
const targetHandleX = targetHandle ? targetHandle.x + (targetHandle.width / 2) : targetNode.__rg.width / 2;
const targetHandleY = targetHandle ? targetHandle.y + (targetHandle.height / 2) : 0;
const targetX = targetNode.__rg.position.x + targetHandleX;
const targetY = targetNode.__rg.position.y + targetHandleY;
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;

8
src/EdgeRenderer/EdgeTypes/StraightEdge.js
View File

@@ -4,10 +4,14 @@ export default (props) => {
const { targetNode, sourceNode } = props;
const style = props.style || {};
const sourceX = sourceNode.__rg.position.x + (sourceNode.__rg.width / 2);
const sourceHandle = sourceNode.__rg.handleBounds.source;
const sourceHandleX = sourceHandle ? sourceHandle.x + (sourceHandle.width / 2) : sourceNode.__rg.width / 2;
const sourceX = sourceNode.__rg.position.x + sourceHandleX;
const sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
const targetX = targetNode.__rg.position.x + (targetNode.__rg.width / 2);
const targetHandle = targetNode.__rg.handleBounds.target;
const targetHandleX = targetHandle ? targetHandle.x + (targetHandle.width / 2) : targetNode.__rg.width / 2;
const targetX = targetNode.__rg.position.x + targetHandleX;
const targetY = targetNode.__rg.position.y;
return (

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

@@ -5,7 +5,7 @@ import { GraphContext } from '../../GraphContext';
import { setSelectedElements } from '../../state/actions';
import { isEdge } from '../../graph-utils';
const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
export default EdgeComponent => memo((props) => {
const { state, dispatch } = useContext(GraphContext);
@@ -19,7 +19,7 @@ export default EdgeComponent => memo((props) => {
<g
className={edgeClasses}
onClick={(e) => {
if (isInputTarget(e)) {
if (isInput(e)) {
return false;
}

2
src/EdgeRenderer/index.js
View File

@@ -13,7 +13,7 @@ class EdgeRenderer extends PureComponent {
}
if (!targetNode) {
throw new Error(`couldn't create edge for source id: ${e.target}`);
throw new Error(`couldn't create edge for target id: ${e.target}`);
}
const EdgeComponent = this.props.edgeTypes[edgeType] || this.props.edgeTypes.default;

2
src/GraphContext/index.js
View File

@@ -9,7 +9,6 @@ export const GraphContext = createContext({});
export const Provider = (props) => {
const {
onElementClick,
children
} = props;
@@ -42,7 +41,6 @@ export const Provider = (props) => {
});
const graphContext = {
onElementClick,
state,
dispatch
};

6
src/GraphView/index.js
View File

@@ -78,7 +78,11 @@ const GraphView = memo((props) => {
return (
<div className="react-graph__renderer">
<NodeRenderer nodeTypes={props.nodeTypes} />
<NodeRenderer
nodeTypes={props.nodeTypes}
onElementClick={props.onElementClick}
onConnect={props.onConnect}
/>
<EdgeRenderer
width={state.width}
height={state.height}

15
src/NodeRenderer/Handle/index.js
View File

@@ -1,15 +0,0 @@
import React, { memo } from 'react';
import cx from 'classnames';
export default memo(({ input, output, ...rest }) => {
const handleClasses = cx(
'react-graph__handle', { input, output }
);
return (
<div
className={handleClasses}
{...rest}
/>
);
});

38
src/NodeRenderer/HandleTypes/BaseHandle.js Normal file
View File

@@ -0,0 +1,38 @@
import React, { memo } from 'react';
import cx from 'classnames';
import { Consumer } from '../NodeIdContext'
function onDragStart(evt, nodeId) {
evt.dataTransfer.setData("text/plain", nodeId);
}
export default memo(({ source, target, ...rest }) => {
const handleClasses = cx(
'react-graph__handle',
rest.className,
{ source, target }
);
if (target) {
return (
<div
className={handleClasses}
{...rest}
/>
)
}
return (
<Consumer>
{nodeId => (
<div
className={handleClasses}
{...rest}
draggable
onDragStart={evt => onDragStart(evt, nodeId)}
/>
)}
</Consumer>
);
});

5
src/NodeRenderer/HandleTypes/SourceHandle.js Normal file
View File

@@ -0,0 +1,5 @@
import React from 'react';
import BaseHandle from './BaseHandle';
export default props => <BaseHandle source {...props} />;

6
src/NodeRenderer/HandleTypes/TargetHandle.js Normal file
View File

@@ -0,0 +1,6 @@
import React from 'react';
import BaseHandle from './BaseHandle';
export default props => <BaseHandle target {...props} />;

8
src/NodeRenderer/NodeIdContext.js Normal file
View File

@@ -0,0 +1,8 @@
import { createContext } from 'react';
const NodeIdContext = createContext(null);
export const Provider = NodeIdContext.Provider;
export const Consumer = NodeIdContext.Consumer;
export default NodeIdContext;

7
src/NodeRenderer/NodeTypes/DefaultNode.js
View File

@@ -1,6 +1,7 @@
import React from 'react';
import Handle from '../Handle';
import TargetHandle from '../HandleTypes/TargetHandle';
import SourceHandle from '../HandleTypes/SourceHandle';
const nodeStyles = {
background: '#ff6060',
@@ -11,8 +12,8 @@ const nodeStyles = {
export default ({ data, style }) => (
<div style={{ ...nodeStyles, ...style }}>
<Handle input />
<TargetHandle />
{data.label}
<Handle output />
<SourceHandle />
</div>
);

4
src/NodeRenderer/NodeTypes/InputNode.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import Handle from '../Handle';
import SourceHandle from '../HandleTypes/SourceHandle';
const nodeStyles = {
background: '#9999ff',
@@ -15,6 +15,6 @@ export default ({ data, style }) => (
className="react-graph__node-inner"
>
{data.label}
<Handle output />
<SourceHandle />
</div>
);

4
src/NodeRenderer/NodeTypes/OutputNode.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import Handle from '../Handle';
import TargetHandle from '../HandleTypes/TargetHandle';
const nodeStyles = {
background: '#55dd99',
@@ -11,7 +11,7 @@ const nodeStyles = {
export default ({ data, style }) => (
<div style={{ ...nodeStyles, ...style }}>
<Handle input />
<TargetHandle />
{data.label}
</div>
);

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

@@ -5,14 +5,38 @@ import cx from 'classnames';
import { GraphContext } from '../../GraphContext';
import { updateNodeData, updateNodePos, setSelectedElements } from '../../state/actions';
import { isNode } from '../../graph-utils';
import { Provider } from '../NodeIdContext';
const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
const isInput = e => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
const isHandle = e => e.target.className.includes('source');
const getHandleBounds = (sel, nodeElement, parentBounds) => {
const handle = nodeElement.querySelector(sel);
if (!handle) {
return null;
}
const bounds = handle.getBoundingClientRect();
return {
x: bounds.x - parentBounds.x,
y: bounds.y - parentBounds.y,
width: bounds.width,
height: bounds.height
};
};
const onDragOver = evt => {
evt.preventDefault();
evt.dataTransfer.dropEffect = "move";
}
export default NodeComponent => memo((props) => {
const nodeElement = useRef(null);
const { state, dispatch } = useContext(GraphContext);
const [offset, setOffset] = useState({ x: 0, y: 0 });
const { data, onClick, type, id, __rg } = props;
const { data, onClick, type, id, __rg, onConnect } = props;
const { position } = __rg;
const [ x, y, k ] = state.transform;
const selected = state.selectedElements.filter(isNode).map(e => e.id).includes(id);
@@ -22,12 +46,16 @@ export default NodeComponent => memo((props) => {
const bounds = nodeElement.current.getBoundingClientRect();
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)
};
dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight }));
dispatch(updateNodeData(id, { width: unscaledWith, height: unscaledHeight, handleBounds }));
}, []);
const onStart = (evt) => {
if (isInputTarget(evt)) {
if (isInput(evt) || isHandle(evt)) {
return false;
}
@@ -54,7 +82,7 @@ export default NodeComponent => memo((props) => {
};
const onNodeClick = (evt) => {
if (isInputTarget(evt)) {
if (isInput(evt)) {
return false;
}
@@ -62,6 +90,19 @@ export default NodeComponent => memo((props) => {
onClick({ id, type, data, position });
};
const onDrop = (evt) => {
evt.preventDefault();
const source = evt.dataTransfer.getData('text/plain');
if (source === id) {
console.warn('You can\'t connect a node with itself.');
return false;
}
onConnect({ source, target: id });
};
return (
<ReactDraggable.DraggableCore
grid={[1, 1]}
@@ -70,12 +111,16 @@ export default NodeComponent => memo((props) => {
scale={k}
>
<div
onDrop={onDrop}
onDragOver={onDragOver}
className={nodeClasses}
ref={nodeElement}
style={{ zIndex: selected ? 10 : 3, transform: `translate(${position.x}px,${position.y}px)` }}
onClick={onNodeClick}
>
<NodeComponent {...props} selected={selected} />
<Provider value={id}>
<NodeComponent {...props} selected={selected} />
</Provider>
</div>
</ReactDraggable.DraggableCore>
);

9
src/NodeRenderer/index.js
View File

@@ -4,7 +4,7 @@ import { Consumer } from '../GraphContext';
class NodeRenderer extends PureComponent {
renderNode(d, onElementClick) {
renderNode(d) {
const nodeType = d.type || 'default';
if (!this.props.nodeTypes[nodeType]) {
console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
@@ -15,7 +15,8 @@ class NodeRenderer extends PureComponent {
return (
<NodeComponent
key={d.id}
onClick={onElementClick}
onClick={this.props.onElementClick}
onConnect={this.props.onConnect}
{...d}
/>
);
@@ -24,14 +25,14 @@ class NodeRenderer extends PureComponent {
render() {
return (
<Consumer>
{({ onElementClick, state }) => (
{({ state }) => (
<div
className="react-graph__nodes"
style={{
transform: `translate(${state.transform[0]}px,${state.transform[1]}px) scale(${state.transform[2]})`
}}
>
{state.nodes.map(d => this.renderNode(d, onElementClick))}
{state.nodes.map(d => this.renderNode(d))}
</div>
)}
</Consumer>

6
src/ReactGraph/index.js
View File

@@ -27,7 +27,8 @@ class ReactGraph extends PureComponent {
render() {
const {
style, onElementClick, children, onLoad,
onMove, onChange, elements, onElementsRemove
onMove, onChange, elements, onElementsRemove,
onConnect
} = this.props;
const { nodes, edges } = elements
@@ -41,6 +42,8 @@ class ReactGraph extends PureComponent {
onLoad={onLoad}
onMove={onMove}
onChange={onChange}
onElementClick={onElementClick}
onConnect={onConnect}
nodeTypes={this.nodeTypes}
edgeTypes={this.edgeTypes}
/>
@@ -57,6 +60,7 @@ class ReactGraph extends PureComponent {
ReactGraph.defaultProps = {
onElementClick: () => {},
onElementsRemove: () => {},
onConnect: () => {},
onLoad: () => {},
onMove: () => {},
onChange: () => {},

6
src/graph-utils.js
View File

@@ -23,8 +23,13 @@ export const removeElements = (elements, elementsToRemove) => {
});
};
let internalNodeId = 0;
const getId = () => internalNodeId++;
export const parseElements = e => {
e.type = e.type || 'default';
e.id = e.id ? e.id : getId();
if (isEdge(e)) {
return e;
@@ -32,6 +37,7 @@ export const parseElements = e => {
return {
...e,
id: e.id.toString(),
__rg: {
position: e.position,
width: null,

6
src/index.js
View File

@@ -1,4 +1,7 @@
import ReactGraph from './ReactGraph';
import _SourceHandle from './NodeRenderer/HandleTypes/SourceHandle';
import _TargetHandle from './NodeRenderer/HandleTypes/TargetHandle';
import {
isNode as _isNode ,
isEdge as _isEdge,
@@ -11,4 +14,7 @@ export const isEdge = _isEdge;
export const removeElements = _removeElements;
export const getOutgoers = _getOutgoers;
export const SourceHandle = _SourceHandle;
export const TargetHandle = _TargetHandle;
export default ReactGraph;

16
src/style.css
View File

@@ -97,15 +97,21 @@
.react-graph__handle {
position: absolute;
width: 10px;
height: 5px;
transform: translate(-50%, 0);
height: 8px;
background: rgba(255, 255, 255, 0.4);
left: 50%;
top: 0;
&.output {
&.source {
top: auto;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
cursor: crosshair;
}
&.target {
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
}