examples: more types pinned down on sources and targets

Author: cormacrelf

packages/examples/src/app/drag-layer/BoxWithLocation.ts

@@ -0,0 +1,6 @@
+export interface BoxWithLocation {
+    id: number;
+    title: string;
+    left: number;
+    top: number;
+}

packages/examples/src/app/drag-layer/drag-container/drag-container.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { SkyhookDndService } from 'angular-skyhook';
-import { DraggedItem } from '../dragged-item';
+import { BoxWithLocation } from '../BoxWithLocation';
 
 @Component({
   selector: 'app-drag-container',
@@ -24,7 +24,7 @@ export class DragContainerComponent implements OnInit, OnDestroy {
     position: 'relative',
   };
 
-  boxTarget = this.dnd.dropTarget<DraggedItem>('BOX', {
+  boxTarget = this.dnd.dropTarget<BoxWithLocation>('BOX', {
     drop: (monitor) => {
       const delta = monitor.getDifferenceFromInitialOffset();
       const item = monitor.getItem();

packages/examples/src/app/drag-layer/draggable-box/draggable-box.component.ts

@@ -3,6 +3,7 @@ import { SkyhookDndService, DragPreviewOptions } from 'angular-skyhook';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { map } from 'rxjs/operators';
 import { ChangeDetectionStrategy } from '@angular/core';
+import { BoxWithLocation } from '../BoxWithLocation';
 
 @Component({
   selector: 'app-draggable-box',
@@ -15,14 +16,14 @@ import { ChangeDetectionStrategy } from '@angular/core';
 })
 export class DraggableBoxComponent {
 
-  @Input() id;
-  @Input() title;
-  @Input() left;
-  @Input() top;
+  @Input() id: number;
+  @Input() title: string;
+  @Input() left: number;
+  @Input() top: number;
 
-  source = this.dnd.dragSource('BOX', {
+  source = this.dnd.dragSource<BoxWithLocation>('BOX', {
     beginDrag: () => {
-      const  { id, title, left, top } = this;
+      const { id, title, left, top } = this;
       return { id, title, left, top };
     }
   });

packages/examples/src/app/drag-layer/dragged-item.ts

@@ -56,10 +56,9 @@ export class CubeComponent {
     @Input() x: number;
     @Input() y: number;
     @Output() endDrag = new EventEmitter<void>();
-    source = this.dnd.dragSource('BOX', {
+    source = this.dnd.dragSource<Spot>('BOX', {
         beginDrag: () => {
-            let spot = { id: 123, x: this.x, y: this.y, fromCube: true } as Spot;
-            return spot;
+            return { id: 123, x: this.x, y: this.y, fromCube: true };
         },
         endDrag: (monitor) => {
             this.endDrag.emit();

packages/examples/src/app/xy-pad/cube.component.ts

@@ -9,7 +9,7 @@ import { Rect, alongEdge, plus, minus, clone, fmap } from '../vectors';
 
 interface Collected {
   item: Spot;
-  itemType: string|symbol;
+  itemType: string | symbol;
   isDragging: boolean;
   initialOffset: Offset;
   currentOffset: Offset;
@@ -39,7 +39,7 @@ interface Collected {
   </ng-container>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-    styleUrls: ['./custom-drag-layer.component.scss']
+  styleUrls: ['./custom-drag-layer.component.scss']
 })
 export class CustomDragLayerComponent {
 
@@ -54,7 +54,7 @@ export class CustomDragLayerComponent {
 
   rect: Rect = { x: 0, y: 0, width: 0, height: 0 };
 
-  dragLayer = this.dnd.dragLayer();
+  dragLayer = this.dnd.dragLayer<Spot>();
 
   collect$ = this.dragLayer.listen(monitor => {
     this.setWindowRelativeOffset();
@@ -133,7 +133,7 @@ export class CustomDragLayerComponent {
       };
     }
 
-    let {x, y} = this.getXY(item, initialOffset, currentOffset, true);
+    let { x, y } = this.getXY(item, initialOffset, currentOffset, true);
     const transform = `translate3d(${x}px, ${y}px, 0)`;
     return {
       transform,

packages/examples/src/app/xy-pad/custom-drag-layer/custom-drag-layer.component.ts

@@ -38,7 +38,7 @@ export class DraggableBoxComponent {
   @Input() spot: Spot;
   @Output() endDrag = new EventEmitter<{ spot: Spot }>();
 
-  source = this.dnd.dragSource('BOX', {
+  source = this.dnd.dragSource<Spot>('BOX', {
     beginDrag: () => {
       return this.spot;
     },