feat: support auto scrolling when dragging

Author: mattlewis92

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "angular-draggable-droppable",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Drag and drop for angular 6.0+",
   "scripts": {
     "start": "concurrently --raw \"ng serve --open\" \"npm run test:watch\"",
     "build:demo": "ng build --prod",
-    "build:lib": "copyfiles package.json projects/angular-draggable-droppable && ng build angular-draggable-droppable && npm run copyfiles",
+    "build:lib": "copyfiles package.json projects/angular-draggable-droppable && ng build angular-draggable-droppable && rollup -c rollup.config.js && npm run copyfiles",
     "build:clean": "rm -rf dist",
     "copyfiles": "copyfiles CHANGELOG.md README.md LICENSE dist/angular-draggable-droppable",
     "test": "npm run lint && ng test angular-draggable-droppable --watch=false --code-coverage && npm run build:lib && npm run build:clean",
@@ -77,6 +77,10 @@
     "ng-packagr": "^4.1.1",
     "prettier": "^1.14.2",
     "pretty-quick": "^1.6.0",
+    "rollup": "^1.7.0",
+    "rollup-plugin-commonjs": "^9.2.1",
+    "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-terser": "^4.0.4",
     "rxjs": "^6.3.2",
     "sinon": "^6.3.3",
     "sinon-chai": "^3.2.0",
@@ -96,5 +100,8 @@
     "commitizen": {
       "path": "node_modules/cz-conventional-changelog"
     }
+  },
+  "dependencies": {
+    "dom-autoscroller": "^2.3.4"
   }
 }

package.json

@@ -0,0 +1 @@
+declare module 'dom-autoscroller';

projects/angular-draggable-droppable/custom-typings.d.ts

@@ -3,5 +3,9 @@
   "dest": "../../dist/angular-draggable-droppable",
   "lib": {
     "entryFile": "src/public_api.ts"
-  }
+  },
+  "whitelistedNonPeerDependencies": [
+    "tslib",
+    "dom-autoscroller"
+  ]
 }

projects/angular-draggable-droppable/ng-package.json

@@ -30,6 +30,7 @@ import {
 } from 'rxjs/operators';
 import { CurrentDragData, DraggableHelper } from './draggable-helper.provider';
 import { DOCUMENT } from '@angular/common';
+import autoScroll from 'dom-autoscroller';
 import { DraggableScrollContainerDirective } from './draggable-scroll-container.directive';
 
 export interface Coordinates {
@@ -207,6 +208,8 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
 
   private timeLongPress: TimeLongPress = { timerBegin: 0, timerEnd: 0 };
 
+  private scroller: { destroy: () => void };
+
   /**
    * @hidden
    */
@@ -349,6 +352,20 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
             this.dragStart.next({ cancelDrag$ });
           });
 
+          this.scroller = autoScroll(
+            [
+              this.scrollContainer
+                ? this.scrollContainer.elementRef.nativeElement
+                : this.document.defaultView
+            ],
+            {
+              margin: 20,
+              autoScroll() {
+                return true;
+              }
+            }
+          );
+
           this.renderer.addClass(
             this.element.nativeElement,
             this.dragActiveClass
@@ -441,6 +458,7 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
             })
           )
           .subscribe(({ x, y, dragCancelled }) => {
+            this.scroller.destroy();
             this.zone.run(() => {
               this.dragEnd.next({ x, y, dragCancelled });
             });

projects/angular-draggable-droppable/src/lib/draggable.directive.ts

@@ -12,10 +12,8 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "types": [],
-    "lib": [
-      "dom",
-      "es2015"
-    ]
+    "lib": ["dom", "es2015"],
+    "noImplicitAny": false
   },
   "angularCompilerOptions": {
     "annotateForClosureCompiler": true,
@@ -25,9 +23,6 @@
     "strictInjectionParameters": true,
     "enableResourceInlining": true
   },
-  "exclude": [
-    "src/test.ts",
-    "src/test-utils.ts",
-    "**/*.spec.ts"
-  ]
+  "include": ["custom-typings.d.ts", "src/**/*.ts"],
+  "exclude": ["src/test.ts", "src/test-utils.ts", "**/*.spec.ts"]
 }

projects/angular-draggable-droppable/tsconfig.lib.json

@@ -0,0 +1,37 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+
+const input =
+  'dist/angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js';
+
+// bundle dom-autoscroller lib so it's not a breaking change for systemjs users
+const base = {
+  input,
+  output: {
+    file: input,
+    format: 'umd',
+    name: 'angular-draggable-droppable',
+    sourcemap: true,
+    globals: {
+      rxjs: 'rxjs',
+      'rxjs/operators': 'rxjs.operators',
+      '@angular/core': 'ng.core',
+      '@angular/common': 'ng.common'
+    }
+  },
+  plugins: [resolve({ module: true }), commonjs()],
+  external: ['@angular/core', '@angular/common', 'rxjs', 'rxjs/operators']
+};
+
+export default [
+  base,
+  {
+    ...base,
+    output: {
+      ...base.output,
+      file: base.output.file.replace('.js', '.min.js')
+    },
+    plugins: [...base.plugins, terser()]
+  }
+];

rollup.config.js

@@ -6,6 +6,12 @@
   },
   "exclude": [
     "src/test.ts",
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "../projects/**/*.spec.ts"
+  ],
+  "include": [
+    "**/*.ts",
+    "../projects/angular-draggable-droppable/custom-typings.d.ts",
+    "../projects/src/**/*.ts"
   ]
 }