diff --git a/.gitignore b/.gitignore index bcddf59b..1fa6f567 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ .DS_Store node_modules -example/build .cache \ No newline at end of file diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js index bc01273e..9699935a 100644 --- a/dist/ReactGraph.js +++ b/dist/ReactGraph.js @@ -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; diff --git a/example/SimpleGraph.js b/example/SimpleGraph.js index 7b4e030b..01f1bf0f 100644 --- a/example/SimpleGraph.js +++ b/example/SimpleGraph.js @@ -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 }) => (
+
I am special!
{data.label}
+
); @@ -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)} diff --git a/example/build/ReactGraph.ba0da17b.css b/example/build/ReactGraph.ba0da17b.css new file mode 100644 index 00000000..46cdd3f1 --- /dev/null +++ b/example/build/ReactGraph.ba0da17b.css @@ -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 */ \ No newline at end of file diff --git a/example/build/ReactGraph.ba0da17b.css.map b/example/build/ReactGraph.ba0da17b.css.map new file mode 100644 index 00000000..a6a0c525 --- /dev/null +++ b/example/build/ReactGraph.ba0da17b.css.map @@ -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 }"]} \ No newline at end of file diff --git a/example/build/ReactGraph.ba0da17b.js b/example/build/ReactGraph.ba0da17b.js new file mode 100644 index 00000000..dc03e7a6 --- /dev/null +++ b/example/build/ReactGraph.ba0da17b.js @@ -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; + }); + + // + + \ No newline at end of file diff --git a/example/build/index.js b/example/build/index.js new file mode 100644 index 00000000..9ecd2e8c --- /dev/null +++ b/example/build/index.js @@ -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; + }); + + //