feat: expose interfaces for all events

Author: mattlewis92

demo/demo.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { DropEvent } from '../src';
 
 @Component({
   selector: 'mwl-demo-app',
@@ -59,7 +60,7 @@ import { Component } from '@angular/core';
 export class DemoComponent {
   droppedData: string = '';
 
-  onDrop({ dropData }: { dropData: any }): void {
+  onDrop({ dropData }: DropEvent<string>): void {
     this.droppedData = dropData;
     setTimeout(() => {
       this.droppedData = '';

src/draggable.directive.ts

@@ -44,11 +44,15 @@ export interface SnapGrid {
   y?: number;
 }
 
-export interface DragStart {
+export interface DragPointerDownEvent extends Coordinates {}
+
+export interface DragStartEvent {
   cancelDrag$: ReplaySubject<void>;
 }
 
-export interface DragEnd extends Coordinates {
+export interface DragMoveEvent extends Coordinates {}
+
+export interface DragEndEvent extends Coordinates {
   dragCancelled: boolean;
 }
 
@@ -117,14 +121,14 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
   /**
    * Called when the element can be dragged along one axis and has the mouse or pointer device pressed on it
    */
-  @Output() dragPointerDown = new EventEmitter<Coordinates>();
+  @Output() dragPointerDown = new EventEmitter<DragPointerDownEvent>();
 
   /**
    * Called when the element has started to be dragged.
    * Only called after at least one mouse or touch move event.
    * If you call $event.cancelDrag$.emit() it will cancel the current drag
    */
-  @Output() dragStart = new EventEmitter<DragStart>();
+  @Output() dragStart = new EventEmitter<DragStartEvent>();
 
   /**
    * Called after the ghost element has been created
@@ -134,27 +138,27 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
   /**
    * Called when the element is being dragged
    */
-  @Output() dragging = new EventEmitter<Coordinates>();
+  @Output() dragging = new EventEmitter<DragMoveEvent>();
 
   /**
    * Called after the element is dragged
    */
-  @Output() dragEnd = new EventEmitter<DragEnd>();
+  @Output() dragEnd = new EventEmitter<DragEndEvent>();
 
   /**
    * @hidden
    */
-  pointerDown: Subject<PointerEvent> = new Subject();
+  pointerDown = new Subject<PointerEvent>();
 
   /**
    * @hidden
    */
-  pointerMove: Subject<PointerEvent> = new Subject();
+  pointerMove = new Subject<PointerEvent>();
 
   /**
    * @hidden
    */
-  pointerUp: Subject<PointerEvent> = new Subject();
+  pointerUp = new Subject<PointerEvent>();
 
   private eventListenerSubscriptions: {
     mousemove?: () => void;

src/droppable.directive.ts

@@ -26,8 +26,8 @@ function isCoordinateWithinRectangle(
   );
 }
 
-export interface DropData {
-  dropData: any;
+export interface DropEvent<T = any> {
+  dropData: T;
 }
 
 @Directive({
@@ -47,22 +47,22 @@ export class DroppableDirective implements OnInit, OnDestroy {
   /**
    * Called when a draggable element starts overlapping the element
    */
-  @Output() dragEnter = new EventEmitter<DropData>();
+  @Output() dragEnter = new EventEmitter<DropEvent>();
 
   /**
    * Called when a draggable element stops overlapping the element
    */
-  @Output() dragLeave = new EventEmitter<DropData>();
+  @Output() dragLeave = new EventEmitter<DropEvent>();
 
   /**
    * Called when a draggable element is moved over the element
    */
-  @Output() dragOver = new EventEmitter<DropData>();
+  @Output() dragOver = new EventEmitter<DropEvent>();
 
   /**
    * Called when a draggable element is dropped on this element
    */
-  @Output() drop = new EventEmitter<DropData>(); // tslint:disable-line no-output-named-after-standard-event
+  @Output() drop = new EventEmitter<DropEvent>(); // tslint:disable-line no-output-named-after-standard-event
 
   currentDragSubscription: Subscription;
 

src/index.ts

@@ -1 +1,8 @@
 export * from './drag-and-drop.module';
+export { DropEvent } from './droppable.directive';
+export {
+  DragPointerDownEvent,
+  DragStartEvent,
+  DragMoveEvent,
+  DragEndEvent
+} from './draggable.directive';

tslint.json

@@ -5,6 +5,7 @@
     "no-unused-expression": [false],
     "max-inline-declarations": false,
     "enforce-component-selector": false,
-    "no-unused-css": false
+    "no-unused-css": false,
+    "no-empty-interface": false
   }
 }