From 6bab95c959cb404bf1c677df1c60de2c96a45bd3 Mon Sep 17 00:00:00 2001 From: Cormac Relf Date: Tue, 19 Jun 2018 14:49:36 +1000 Subject: [PATCH] examples: more types pinned down on sources and targets --- .../examples/src/app/drag-layer/BoxWithLocation.ts | 6 ++++++ .../drag-container/drag-container.component.ts | 4 ++-- .../draggable-box/draggable-box.component.ts | 13 +++++++------ .../examples/src/app/drag-layer/dragged-item.ts | 5 ----- packages/examples/src/app/xy-pad/cube.component.ts | 5 ++--- .../custom-drag-layer.component.ts | 8 ++++---- .../xy-pad/draggable-box/draggable-box.component.ts | 2 +- 7 files changed, 22 insertions(+), 21 deletions(-) create mode 100644 packages/examples/src/app/drag-layer/BoxWithLocation.ts delete mode 100644 packages/examples/src/app/drag-layer/dragged-item.ts diff --git a/packages/examples/src/app/drag-layer/BoxWithLocation.ts b/packages/examples/src/app/drag-layer/BoxWithLocation.ts new file mode 100644 index 00000000..e4e6c058 --- /dev/null +++ b/packages/examples/src/app/drag-layer/BoxWithLocation.ts @@ -0,0 +1,6 @@ +export interface BoxWithLocation { + id: number; + title: string; + left: number; + top: number; +} diff --git a/packages/examples/src/app/drag-layer/drag-container/drag-container.component.ts b/packages/examples/src/app/drag-layer/drag-container/drag-container.component.ts index 96fc8886..e42ddf10 100644 --- a/packages/examples/src/app/drag-layer/drag-container/drag-container.component.ts +++ b/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('BOX', { + boxTarget = this.dnd.dropTarget('BOX', { drop: (monitor) => { const delta = monitor.getDifferenceFromInitialOffset(); const item = monitor.getItem(); diff --git a/packages/examples/src/app/drag-layer/draggable-box/draggable-box.component.ts b/packages/examples/src/app/drag-layer/draggable-box/draggable-box.component.ts index 8f065cc1..03d00d97 100644 --- a/packages/examples/src/app/drag-layer/draggable-box/draggable-box.component.ts +++ b/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('BOX', { beginDrag: () => { - const { id, title, left, top } = this; + const { id, title, left, top } = this; return { id, title, left, top }; } }); diff --git a/packages/examples/src/app/drag-layer/dragged-item.ts b/packages/examples/src/app/drag-layer/dragged-item.ts deleted file mode 100644 index c741d350..00000000 --- a/packages/examples/src/app/drag-layer/dragged-item.ts +++ /dev/null @@ -1,5 +0,0 @@ -export interface DraggedItem { - id: number; - left: number; - top: number; -} diff --git a/packages/examples/src/app/xy-pad/cube.component.ts b/packages/examples/src/app/xy-pad/cube.component.ts index 1e3edbff..c3dc3a0e 100644 --- a/packages/examples/src/app/xy-pad/cube.component.ts +++ b/packages/examples/src/app/xy-pad/cube.component.ts @@ -56,10 +56,9 @@ export class CubeComponent { @Input() x: number; @Input() y: number; @Output() endDrag = new EventEmitter(); - source = this.dnd.dragSource('BOX', { + source = this.dnd.dragSource('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(); diff --git a/packages/examples/src/app/xy-pad/custom-drag-layer/custom-drag-layer.component.ts b/packages/examples/src/app/xy-pad/custom-drag-layer/custom-drag-layer.component.ts index 43549d61..cd5abf25 100644 --- a/packages/examples/src/app/xy-pad/custom-drag-layer/custom-drag-layer.component.ts +++ b/packages/examples/src/app/xy-pad/custom-drag-layer/custom-drag-layer.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 { `, 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(); 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, diff --git a/packages/examples/src/app/xy-pad/draggable-box/draggable-box.component.ts b/packages/examples/src/app/xy-pad/draggable-box/draggable-box.component.ts index b66b0079..74cd61b6 100644 --- a/packages/examples/src/app/xy-pad/draggable-box/draggable-box.component.ts +++ b/packages/examples/src/app/xy-pad/draggable-box/draggable-box.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('BOX', { beginDrag: () => { return this.spot; },