fix(drag): fix drag mouse position in scrollabe container

swiety85 · Jan 26, 2019 · d044b54 · d044b54
1 parent 1fb0cd4
commit d044b54
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/projects/angular2gridster/src/lib/gridster.component.ts b/projects/angular2gridster/src/lib/gridster.component.ts
@@ -142,6 +142,15 @@ export class GridsterComponent implements OnInit, AfterContentInit, OnDestroy {
                     this.updateGridsterElementData()
                 )
             );
+            const scrollableContainer = utils.getScrollableContainer(this.$element);
+            if (scrollableContainer) {
+                this.subscription.add(
+                    fromEvent(scrollableContainer, 'scroll', { passive: true })
+                    .subscribe(() =>
+                        this.updateGridsterElementData()
+                    )
+                );
+            }
         });
     }
 

diff --git a/projects/angular2gridster/src/lib/utils/utils.ts b/projects/angular2gridster/src/lib/utils/utils.ts
@@ -91,5 +91,43 @@ export const utils = {
             top: elementRect.top - parentElementRect.top,
             left: elementRect.left - parentElementRect.left
         };
+    },
+    getScrollableContainer(node) {
+        const regex = /(auto|scroll)/;
+        const parents = (_node, ps) => {
+            if (_node.parentNode === null) {
+                return ps;
+            }
+            return parents(_node.parentNode, ps.concat([_node]));
+        };
+
+        const style = (_node, prop) => {
+            return getComputedStyle(_node, null).getPropertyValue(prop);
+        };
+        const overflow = _node => {
+            return (
+                style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x')
+            );
+        };
+        const scroll = _node => regex.test(overflow(_node));
+
+        /* eslint-disable consistent-return */
+        const scrollParent = _node => {
+            if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
+                return;
+            }
+
+            const ps = parents(_node.parentNode, []);
+
+            for (let i = 0; i < ps.length; i += 1) {
+                if (scroll(ps[i])) {
+                    return ps[i];
+                }
+            }
+
+            return document.scrollingElement || document.documentElement;
+        };
+
+        return scrollParent(node);
     }
 };