From 1692be3ac2219d471084b2a8222eea869bbd4814 Mon Sep 17 00:00:00 2001
From: Hang Ye <piujohanye@gmail.com>
Date: Mon, 22 Aug 2016 20:58:59 +0000
Subject: [PATCH] add scrollTop and scrollLeft value to dragging position

---
 lib/react-ui-tree.js | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/lib/react-ui-tree.js b/lib/react-ui-tree.js
index d8527524..3ec661c1 100644
--- a/lib/react-ui-tree.js
+++ b/lib/react-ui-tree.js
@@ -26,6 +26,10 @@ module.exports = React.createClass({
     else this._updated = false;
   },
 
+  componentDidMount() {
+    this.refs.scrollParent = this.getScrollParent();
+  },
+
   init(props) {
     var tree = new Tree(props.tree);
     tree.isNodeCollapsed = props.isNodeCollapsed;
@@ -45,6 +49,25 @@ module.exports = React.createClass({
     };
   },
 
+  getScrollParent() {
+    var parents = function(node, ps) {
+      return null === node.parentNode ? ps : parents(node.parentNode, ps.concat([node]));
+    },
+
+    check = function(node) {
+      var o = "overflow", gpv = "getPropertyValue", gcs = "getComputedStyle";
+      return window[gcs](node, null)[gpv](o) + window[gcs](node, null)[gpv](o+"-y") + window[gcs](node, null)[gpv](o+"-x");
+    };
+
+    var ps = parents(this.refs.tree, []);
+    for (var i = 0;i < ps.length;i += 1) {
+      if (/(auto|scroll)/.test(check(ps[i]))) {
+        return ps[i];
+      }
+    }
+    return document.body;
+  },
+
   getDraggingDom() {
     var tree = this.state.tree;
     var dragging = this.state.dragging;
@@ -77,7 +100,7 @@ module.exports = React.createClass({
     var draggingDom = this.getDraggingDom();
 
     return (
-      <div className="m-tree">
+      <div className="m-tree" ref="tree">
         {draggingDom}
         <Node
           tree={tree}
@@ -103,8 +126,8 @@ module.exports = React.createClass({
 
     this._startX = dom.offsetLeft;
     this._startY = dom.offsetTop;
-    this._offsetX = e.clientX;
-    this._offsetY = e.clientY;
+    this._offsetX = e.clientX + this.refs.scrollParent.scrollLeft;
+    this._offsetY = e.clientY + this.refs.scrollParent.scrollTop;
     this._start = true;
 
     window.addEventListener('mousemove', this.drag);
@@ -133,8 +156,8 @@ module.exports = React.createClass({
     var _offsetY = this._offsetY;
 
     var pos = {
-      x: _startX + e.clientX - _offsetX,
-      y: _startY + e.clientY - _offsetY
+      x: _startX + e.clientX + this.refs.scrollParent.scrollLeft - _offsetX,
+      y: _startY + e.clientY + this.refs.scrollParent.scrollTop - _offsetY
     };
     dragging.x = pos.x;
     dragging.y = pos.y;