Skip to content

Commit

Permalink
feat(nodeWrap): add onNodeDragStop callback
Browse files Browse the repository at this point in the history
  • Loading branch information
@moklick
moklick committed Jul 30, 2019
1 parent 18baa3d commit 9d17245
Show file tree
Hide file tree
Showing 9 changed files with 79 additions and 11 deletions.
38 changes: 35 additions & 3 deletions dist/ReactGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,20 @@
var isNode = function isNode(element) {
return !element.source && !element.target;
};
var getOutgoers = function getOutgoers(node, elements) {
if (!isNode(node)) {
return [];
}

var outgoerIds = elements.filter(function (e) {
return e.source === node.id;
}).map(function (e) {
return e.target;
});
return elements.filter(function (e) {
return outgoerIds.includes(e.id);
});
};
var removeElements = function removeElements(elements, elementsToRemove) {
var nodeIdsToRemove = elementsToRemove.filter(isNode).map(function (n) {
return n.id;
Expand Down Expand Up @@ -30218,6 +30232,7 @@
return React__default.createElement(NodeComponent, _extends({
key: d.id,
onClick: this.props.onElementClick,
onNodeDragStop: this.props.onNodeDragStop,
onConnect: this.props.onConnect
}, d));
}
Expand Down Expand Up @@ -32811,6 +32826,7 @@
}, React__default.createElement(NodeRenderer, {
nodeTypes: props.nodeTypes,
onElementClick: props.onElementClick,
onNodeDragStop: props.onNodeDragStop,
onConnect: props.onConnect
}), React__default.createElement(EdgeRenderer, {
width: state.width,
Expand Down Expand Up @@ -32999,7 +33015,7 @@
};

var isHandle = function isHandle(e) {
return e.target.className.includes('source');
return e.target.className && e.target.className.includes('source');
};

var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
Expand Down Expand Up @@ -33044,7 +33060,8 @@
type = props.type,
id = props.id,
__rg = props.__rg,
onConnect = props.onConnect;
onConnect = props.onConnect,
onNodeDragStop = props.onNodeDragStop;
var position = __rg.position;

var _state$transform = _slicedToArray(state.transform, 3),
Expand Down Expand Up @@ -33118,6 +33135,15 @@
});
};

var onStop = function onStop() {
onNodeDragStop({
id: id,
type: type,
data: data,
position: position
});
};

var onDrop = function onDrop(evt) {
evt.preventDefault();
var source = evt.dataTransfer.getData('text/plain');
Expand All @@ -33137,6 +33163,7 @@
grid: [1, 1],
onStart: onStart,
onDrag: onDrag,
onStop: onStop,
scale: k
}, React__default.createElement("div", {
onDrop: onDrop,
Expand Down Expand Up @@ -33328,7 +33355,8 @@
onChange = _this$props.onChange,
elements = _this$props.elements,
onElementsRemove = _this$props.onElementsRemove,
onConnect = _this$props.onConnect;
onConnect = _this$props.onConnect,
onNodeDragStop = _this$props.onNodeDragStop;

var _elements$map$reduce = elements.map(parseElements).reduce(separateElements, {}),
nodes = _elements$map$reduce.nodes,
Expand All @@ -33347,6 +33375,7 @@
onChange: onChange,
onElementClick: onElementClick,
onConnect: onConnect,
onNodeDragStop: onNodeDragStop,
nodeTypes: this.nodeTypes,
edgeTypes: this.edgeTypes
}), React__default.createElement(GlobalKeyHandler, {
Expand All @@ -33361,6 +33390,7 @@
ReactGraph.defaultProps = {
onElementClick: function onElementClick() {},
onElementsRemove: function onElementsRemove() {},
onNodeDragStop: function onNodeDragStop() {},
onConnect: function onConnect() {},
onLoad: function onLoad() {},
onMove: function onMove() {},
Expand All @@ -33379,12 +33409,14 @@
var isNode$1 = isNode;
var isEdge$1 = isEdge;
var removeElements$1 = removeElements;
var getOutgoers$1 = getOutgoers;
var SourceHandle = _SourceHandle;
var TargetHandle = _TargetHandle;

exports.SourceHandle = SourceHandle;
exports.TargetHandle = TargetHandle;
exports.default = ReactGraph;
exports.getOutgoers = getOutgoers$1;
exports.isEdge = isEdge$1;
exports.isNode = isNode$1;
exports.removeElements = removeElements$1;
Expand Down
1 change: 1 addition & 0 deletions example/SimpleGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ class App extends PureComponent {
onElementClick={element => this.onElementClick(element)}
onElementsRemove={elements => this.onElementsRemove(elements)}
onConnect={params => console.log(params)}
onNodeDragStop={node => console.log('drag stop', node)}
style={{ width: '100%', height: '100%' }}
onLoad={graphInstance => this.onLoad(graphInstance)}
onChange={(elements) => this.onChange(elements)}
Expand Down
27 changes: 23 additions & 4 deletions example/build/example.e31bb0bc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38213,6 +38213,7 @@ function (_PureComponent) {
return _react.default.createElement(NodeComponent, _extends({
key: d.id,
onClick: this.props.onElementClick,
onNodeDragStop: this.props.onNodeDragStop,
onConnect: this.props.onConnect
}, d));
}
Expand Down Expand Up @@ -40966,6 +40967,7 @@ var GraphView = (0, _react.memo)(function (props) {
}, _react.default.createElement(_NodeRenderer.default, {
nodeTypes: props.nodeTypes,
onElementClick: props.onElementClick,
onNodeDragStop: props.onNodeDragStop,
onConnect: props.onConnect
}), _react.default.createElement(_EdgeRenderer.default, {
width: state.width,
Expand Down Expand Up @@ -41365,7 +41367,7 @@ var isInput = function isInput(e) {
};

var isHandle = function isHandle(e) {
return e.target.className.includes('source');
return e.target.className && e.target.className.includes('source');
};

var getHandleBounds = function getHandleBounds(sel, nodeElement, parentBounds) {
Expand Down Expand Up @@ -41410,7 +41412,8 @@ var _default = function _default(NodeComponent) {
type = props.type,
id = props.id,
__rg = props.__rg,
onConnect = props.onConnect;
onConnect = props.onConnect,
onNodeDragStop = props.onNodeDragStop;
var position = __rg.position;

var _state$transform = _slicedToArray(state.transform, 3),
Expand Down Expand Up @@ -41484,6 +41487,15 @@ var _default = function _default(NodeComponent) {
});
};

var onStop = function onStop() {
onNodeDragStop({
id: id,
type: type,
data: data,
position: position
});
};

var onDrop = function onDrop(evt) {
evt.preventDefault();
var source = evt.dataTransfer.getData('text/plain');
Expand All @@ -41503,6 +41515,7 @@ var _default = function _default(NodeComponent) {
grid: [1, 1],
onStart: onStart,
onDrag: onDrag,
onStop: onStop,
scale: k
}, _react.default.createElement("div", {
onDrop: onDrop,
Expand Down Expand Up @@ -41890,7 +41903,8 @@ function (_PureComponent) {
onChange = _this$props.onChange,
elements = _this$props.elements,
onElementsRemove = _this$props.onElementsRemove,
onConnect = _this$props.onConnect;
onConnect = _this$props.onConnect,
onNodeDragStop = _this$props.onNodeDragStop;

var _elements$map$reduce = elements.map(_graphUtils.parseElements).reduce(_graphUtils.separateElements, {}),
nodes = _elements$map$reduce.nodes,
Expand All @@ -41909,6 +41923,7 @@ function (_PureComponent) {
onChange: onChange,
onElementClick: onElementClick,
onConnect: onConnect,
onNodeDragStop: onNodeDragStop,
nodeTypes: this.nodeTypes,
edgeTypes: this.edgeTypes
}), _react.default.createElement(_GlobalKeyHandler.default, {
Expand All @@ -41923,6 +41938,7 @@ function (_PureComponent) {
ReactGraph.defaultProps = {
onElementClick: function onElementClick() {},
onElementsRemove: function onElementsRemove() {},
onNodeDragStop: function onNodeDragStop() {},
onConnect: function onConnect() {},
onLoad: function onLoad() {},
onMove: function onMove() {},
Expand Down Expand Up @@ -42266,6 +42282,9 @@ function (_PureComponent) {
onConnect: function onConnect(params) {
return console.log(params);
},
onNodeDragStop: function onNodeDragStop(node) {
return console.log('drag stop', node);
},
style: {
width: '100%',
height: '100%'
Expand Down Expand Up @@ -42356,7 +42375,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "54186" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "61136" + '/');

ws.onmessage = function (event) {
checkedAssets = {};
Expand Down
2 changes: 1 addition & 1 deletion example/build/example.e31bb0bc.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion example/build/index.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/GraphView/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ const GraphView = memo((props) => {
<NodeRenderer
nodeTypes={props.nodeTypes}
onElementClick={props.onElementClick}
onNodeDragStop={props.onNodeDragStop}
onConnect={props.onConnect}
/>
<EdgeRenderer
Expand Down
14 changes: 13 additions & 1 deletion src/NodeRenderer/NodeTypes/wrapNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ 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, onConnect } = props;
const {
data, onClick, type, id, __rg, onConnect, onNodeDragStop
} = props;
const { position } = __rg;
const [ x, y, k ] = state.transform;
const selected = state.selectedElements.filter(isNode).map(e => e.id).includes(id);
Expand Down Expand Up @@ -90,6 +92,15 @@ export default NodeComponent => memo((props) => {
onClick({ id, type, data, position });
};

const onStop = () => {
onNodeDragStop({
id,
type,
data,
position
});
}

const onDrop = (evt) => {
evt.preventDefault();

Expand All @@ -108,6 +119,7 @@ export default NodeComponent => memo((props) => {
grid={[1, 1]}
onStart={onStart}
onDrag={onDrag}
onStop={onStop}
scale={k}
>
<div
Expand Down
1 change: 1 addition & 0 deletions src/NodeRenderer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ class NodeRenderer extends PureComponent {
<NodeComponent
key={d.id}
onClick={this.props.onElementClick}
onNodeDragStop={this.props.onNodeDragStop}
onConnect={this.props.onConnect}
{...d}
/>
Expand Down
4 changes: 3 additions & 1 deletion src/ReactGraph/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class ReactGraph extends PureComponent {
const {
style, onElementClick, children, onLoad,
onMove, onChange, elements, onElementsRemove,
onConnect
onConnect, onNodeDragStop
} = this.props;

const { nodes, edges } = elements
Expand All @@ -44,6 +44,7 @@ class ReactGraph extends PureComponent {
onChange={onChange}
onElementClick={onElementClick}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
nodeTypes={this.nodeTypes}
edgeTypes={this.edgeTypes}
/>
Expand All @@ -60,6 +61,7 @@ class ReactGraph extends PureComponent {
ReactGraph.defaultProps = {
onElementClick: () => {},
onElementsRemove: () => {},
onNodeDragStop: () => {},
onConnect: () => {},
onLoad: () => {},
onMove: () => {},
Expand Down

0 comments on commit 9d17245

Please sign in to comment.