Fixed issues with corners and scrollbar

gabrielbull · May 24, 2016 · befed8b · befed8b
1 parent 55ce354
commit befed8b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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
@@ -43,23 +43,28 @@ 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;
     let finalLine = [];
     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;