diff --git a/src/components/graph/Graph.jsx b/src/components/graph/Graph.jsx index 50baf2f1..d83864df 100644 --- a/src/components/graph/Graph.jsx +++ b/src/components/graph/Graph.jsx @@ -110,6 +110,10 @@ import { merge, debounce, throwErr } from "../../utils"; * window.alert(`Graph is now zoomed at ${newZoom} from ${previousZoom}`); * }; * + * const onDragChange = function(newZoom) { + * // newZoom is like {x: 1, y: 1, k: 1} + * window.alert(`Graph is now zoomed/dragged ending at ${newZoom}`); + * }; * * + * onZoomChange={onZoomChange} + * onDragChange={onDragChange} /> */ export default class Graph extends React.Component { /** @@ -300,6 +305,9 @@ export default class Graph extends React.Component { if (!this.state.config.freezeAllDragEvents) { zoomObject.on("zoom", this._zoomed); + if (this.onDragChange) { + zoomObject.on("end", this._zoomedEnd); + } } if (this.state.config.initialZoom !== null) { @@ -311,6 +319,12 @@ export default class Graph extends React.Component { selector.call(zoomObject).on("dblclick.zoom", null); }; + _zoomedEnd = () => { + const transform = d3Event.transform; + + this.onDragChange && this.onDragChange(transform); + } + /** * Handler for 'zoom' event within zoom config. * @returns {Object} returns the transformed elements within the svg graph area. @@ -545,6 +559,7 @@ export default class Graph extends React.Component { this.isDraggingNode = false; this.state = initializeGraphState(this.props, this.state); this.debouncedOnZoomChange = this.props.onZoomChange ? debounce(this.props.onZoomChange, 100) : null; + this.onDragChange = this.props.onDragChange ? this.props.onDragChange : null; } /**