From 6c7e6968bc6dd18b3eaeb5aebacd2904e7895843 Mon Sep 17 00:00:00 2001
From: Alex de Mulder <alex@almende.org>
Date: Wed, 7 May 2014 11:07:32 +0200
Subject: [PATCH] added DOMtoCanvas and canvasToDOM

---
 HISTORY.md         |  4 ++++
 docs/graph.html    | 13 ++++++++++++-
 src/graph/Graph.js | 21 +++++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/HISTORY.md b/HISTORY.md
index 2b7cf756..d5435c42 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -4,6 +4,10 @@ http://visjs.org
 
 ## not yet released, version 1.0.1
 
+### Graph
+
+- added coordinate conversion from DOM to Canvas.
+
 
 ## 2014-05-02, version 1.0.0
 
diff --git a/docs/graph.html b/docs/graph.html
index 579cbb5c..c8e81586 100644
--- a/docs/graph.html
+++ b/docs/graph.html
@@ -1999,7 +1999,18 @@ var options: {
             You can use this to stablize your graph once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
         </td>
     </tr>
-
+    <tr>
+        <td>DOMtoCanvas(pos)</td>
+        <td>object</td>
+        <td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
+        </td>
+    </tr>
+    <tr>
+        <td>canvasToDOM(pos)</td>
+        <td>object</td>
+        <td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
+        </td>
+    </tr>
   <tr>
     <td>on(event, callback)</td>
     <td>none</td>
diff --git a/src/graph/Graph.js b/src/graph/Graph.js
index c88c1412..ace7ad8a 100644
--- a/src/graph/Graph.js
+++ b/src/graph/Graph.js
@@ -1734,6 +1734,27 @@ Graph.prototype._yToCanvas = function(y) {
   return y * this.scale + this.translation.y ;
 };
 
+
+/**
+ *
+ * @param {object} pos   = {x: number, y: number}
+ * @returns {{x: number, y: number}}
+ * @constructor
+ */
+Graph.prototype.DOMtoCanvas = function(pos) {
+  return {x:this._xToCanvas(pos.x),y:this._yToCanvas(pos.y)};
+}
+
+/**
+ *
+ * @param {object} pos   = {x: number, y: number}
+ * @returns {{x: number, y: number}}
+ * @constructor
+ */
+Graph.prototype.canvasToDOM = function(pos) {
+  return {x:this._canvasToX(pos.x),y:this._canvasToY(pos.y)};
+}
+
 /**
  * Redraw all nodes
  * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');