From 3c13da857d41623489a5091666c5849e5d332e5c Mon Sep 17 00:00:00 2001
From: hmt <hmt@corexalys.com>
Date: Fri, 16 Jul 2021 10:03:55 +0200
Subject: [PATCH 1/2] add drag handle

---
 src/components/graph/Graph.jsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/graph/Graph.jsx b/src/components/graph/Graph.jsx
index 50baf2f1..f466f479 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}`);
+ * };
  *
  * <Graph
  *      id='graph-id' // id is mandatory, if no id is defined rd3g will throw an error
@@ -126,7 +130,8 @@ import { merge, debounce, throwErr } from "../../utils";
  *      onMouseOverLink={onMouseOverLink}
  *      onMouseOutLink={onMouseOutLink}
  *      onNodePositionChange={onNodePositionChange}
- *      onZoomChange={onZoomChange}/>
+ *      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(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;
   }
 
   /**

From 2374e4264323fc0f506f3a3e33e1b090f96abc56 Mon Sep 17 00:00:00 2001
From: Corexalys <75850305+corexalys-admin@users.noreply.github.com>
Date: Tue, 20 Jul 2021 11:18:17 +0200
Subject: [PATCH 2/2] Update src/components/graph/Graph.jsx

Co-authored-by: Daniel Caldas <11733994+danielcaldas@users.noreply.github.com>
---
 src/components/graph/Graph.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/graph/Graph.jsx b/src/components/graph/Graph.jsx
index f466f479..d83864df 100644
--- a/src/components/graph/Graph.jsx
+++ b/src/components/graph/Graph.jsx
@@ -322,7 +322,7 @@ export default class Graph extends React.Component {
   _zoomedEnd = () => {
     const transform = d3Event.transform;
 
-    this.onDragChange(transform);
+    this.onDragChange && this.onDragChange(transform);
   }
 
   /**