From befed8b3cf71bd1c4a1b0f145e4967a7cea98ba2 Mon Sep 17 00:00:00 2001
From: Gabriel Bull <me@gabrielbull.com>
Date: Tue, 24 May 2016 11:48:56 -0400
Subject: [PATCH] Fixed issues with corners and scrollbar

---
 playground/corners/corners.js |  2 +-
 playground/index.js           |  2 +-
 src/corners.js                | 13 +++++++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/playground/corners/corners.js b/playground/corners/corners.js
index 2381c38..a1338e9 100644
--- a/playground/corners/corners.js
+++ b/playground/corners/corners.js
@@ -30,7 +30,7 @@ class Corners extends Component {
 
   render() {
     return (
-      <svg ref="svg" width="100%" height="100%"/>
+      <svg ref="svg" width="100vw" height="100vh" style={{ display: 'block' }}/>
     );
   }
 }
diff --git a/playground/index.js b/playground/index.js
index 87e537c..9cd867e 100644
--- a/playground/index.js
+++ b/playground/index.js
@@ -11,7 +11,7 @@ document.body.style.width = '100%';
 document.body.style.height = '100%';
 
 document.body.innerHTML = `
-  <div id="main" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center"></div>
+  <div id="main" style="width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center"></div>
 `;
 
 ReactDOM.render(<Playground/>, document.getElementById('main'));
diff --git a/src/corners.js b/src/corners.js
index cbf4424..6babebb 100644
--- a/src/corners.js
+++ b/src/corners.js
@@ -43,6 +43,11 @@ export function coordinates(lines, source, target) {
   source = source.getBoundingClientRect();
   target = target.getBoundingClientRect();
 
+  var doc = document.documentElement;
+  var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+  var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
+
+
   let finalLines = [];
   lines.forEach(line => {
     let el = source;
@@ -50,16 +55,16 @@ export function coordinates(lines, source, target) {
     line.forEach(point => {
       switch (point) {
       case 'top-right':
-        finalLine.push({ x: el.left + el.width, y: el.top });
+        finalLine.push({ x: el.left + el.width + left, y: el.top + top });
         break;
       case 'top-left':
-        finalLine.push({ x: el.left, y: el.top });
+        finalLine.push({ x: el.left + left, y: el.top + top });
         break;
       case 'bottom-right':
-        finalLine.push({ x: el.left + el.width, y: el.top + el.height });
+        finalLine.push({ x: el.left + el.width + left, y: el.top + el.height + top });
         break;
       case 'bottom-left':
-        finalLine.push({ x: el.left, y: el.top + el.height });
+        finalLine.push({ x: el.left + left, y: el.top + el.height + top });
         break;
       }
       el = target;