add getHandlerId() to connection objects, for use with the test backend

cormacrelf · cormacrelf · commit 4952b85cd2ee · 2018-06-19T22:06:30.000+10:00
diff --git a/packages/angular-skyhook/src/connection-types.ts b/packages/angular-skyhook/src/connection-types.ts
@@ -8,15 +8,19 @@ import { DragSourceMonitor } from './source-monitor';
 import { TypeOrTypeArray } from './type-ish';
 import { Observable, TeardownLogic } from 'rxjs';
 import { DragLayerMonitor } from './layer-monitor';
-import { DropTargetConnector, DragSourceConnector, DragSourceOptions, DragPreviewOptions } from './connectors';
+import {
+    DropTargetConnector,
+    DragSourceConnector,
+    DragSourceOptions,
+    DragPreviewOptions
+} from './connectors';
 import { Subscription, SubscriptionLike } from 'rxjs';
 
 /**
  * A base type to represent a DOM connection.
  */
 export interface ConnectionBase<TMonitor> extends SubscriptionLike {
-
-  /**
+    /**
    * A connection maintains a subscription to `dnd-core`'s drag state
    * changes. This function is how you are notified of those changes.
    *
@@ -47,41 +51,40 @@ export interface ConnectionBase<TMonitor> extends SubscriptionLike {
 
    * You can also subscribe one-by-one, with `isDragging$ = listen(m => m.isDragging())`.
    */
-  listen<O>(mapTo: (monitor: TMonitor) => O): Observable<O>;
-
-  /**
-   * This method **MUST** be called, however you choose to, when `ngOnDestroy()` fires.
-   * If you don't, you will leave subscriptions hanging around that will fire
-   * callbacks on components that no longer exist.
-   */
-  unsubscribe(): void;
-
-  /**
-   * Same as RxJS Subscription.add().
-   * Useful, for example, for writing wrappers for the {@link SkyhookDndService} methods,
-   * which might internally listen()/subscribe to {@link DropTargetSpec#hover} and provide
-   * a convenient callback after you hover without dropping or exiting for a specified
-   * duration. That would require the following pattern:
-   *
-   * ```typescript
-   * function wrapper(dndService, types, spec, callback) {
-   *     let subj = new Subject();
-   *     let dt = dndService.dropTarget(types, {
-   *         ...spec,
-   *         hover: monitor => {
-   *             subj.next();
-   *             spec.hover && spec.hover(monitor);
-   *         }
-   *     });
-   *     // runs the callback until the returned connection
-   *     // is destroyed via unsubscribe()
-   *     dt.add(subj.pipe( ... ).subscribe(callback))
-   *     return dt;
-   * }
-   * ```
-   */
-  add(teardown: TeardownLogic): Subscription;
-
+    listen<O>(mapTo: (monitor: TMonitor) => O): Observable<O>;
+
+    /**
+     * This method **MUST** be called, however you choose to, when `ngOnDestroy()` fires.
+     * If you don't, you will leave subscriptions hanging around that will fire
+     * callbacks on components that no longer exist.
+     */
+    unsubscribe(): void;
+
+    /**
+     * Same as RxJS Subscription.add().
+     * Useful, for example, for writing wrappers for the {@link SkyhookDndService} methods,
+     * which might internally listen()/subscribe to {@link DropTargetSpec#hover} and provide
+     * a convenient callback after you hover without dropping or exiting for a specified
+     * duration. That would require the following pattern:
+     *
+     * ```typescript
+     * function wrapper(dndService, types, spec, callback) {
+     *     let subj = new Subject();
+     *     let dt = dndService.dropTarget(types, {
+     *         ...spec,
+     *         hover: monitor => {
+     *             subj.next();
+     *             spec.hover && spec.hover(monitor);
+     *         }
+     *     });
+     *     // runs the callback until the returned connection
+     *     // is destroyed via unsubscribe()
+     *     dt.add(subj.pipe( ... ).subscribe(callback))
+     *     return dt;
+     * }
+     * ```
+     */
+    add(teardown: TeardownLogic): Subscription;
 }
 
 /**
@@ -90,30 +93,31 @@ export interface ConnectionBase<TMonitor> extends SubscriptionLike {
  *
  * To create one, refer to {@link SkyhookDndService#dropTarget}.
  */
-export interface DropTarget<
-  Item = {},
-  DropResult = {}
-  > extends ConnectionBase<DropTargetMonitor<Item, DropResult>> {
-
-  /** Use this method to have a dynamically typed target. If no type has
-   *  previously been set, it creates the subscription and allows the
-   *  `[dragSource]` DOM element to be connected. If you do not need to
-   *  dynamically update the type, you can set it once via the
-   *  {@link DropTargetSpec#types} property.
-   *
-   *  See {@link DragSource#setType} for an example of how to set
-   *  a dynamic type, for it is very similar here.
-  */
-  setTypes(type: TypeOrTypeArray): void;
-
-  /** This function allows you to connect a DOM node to your `DropTarget`.
-   *  You will not usually need to call this directly;
-   *  it is more easily handled by the directives.
-   *
-   *  The subscription returned is automatically unsubscribed when the connection is made.
-   *  This may be immediate if the `DropTarget` already has a type.
-   */
-  connectDropTarget(elementOrNode: Node): Subscription;
+export interface DropTarget<Item = {}, DropResult = {}>
+    extends ConnectionBase<DropTargetMonitor<Item, DropResult>> {
+    /** Use this method to have a dynamically typed target. If no type has
+     *  previously been set, it creates the subscription and allows the
+     *  `[dragSource]` DOM element to be connected. If you do not need to
+     *  dynamically update the type, you can set it once via the
+     *  {@link DropTargetSpec#types} property.
+     *
+     *  See {@link DragSource#setType} for an example of how to set
+     *  a dynamic type, for it is very similar here.
+     */
+    setTypes(type: TypeOrTypeArray): void;
+
+    /** This function allows you to connect a DOM node to your `DropTarget`.
+     *  You will not usually need to call this directly;
+     *  it is more easily handled by the directives.
+     *
+     *  The subscription returned is automatically unsubscribed when the connection is made.
+     *  This may be immediate if the `DropTarget` already has a type.
+     */
+    connectDropTarget(elementOrNode: Node): Subscription;
+
+    /**
+     * Returns the drop target ID that can be used to simulate the drag and drop events with the testing backend. */
+    getHandlerId(): any;
 }
 
 /**
@@ -123,12 +127,9 @@ You do not have to connect it to a DOM element if that's all you want.
 
 To create one, refer to {@link SkyhookDndService#dragSource}.
  */
-export interface DragSource<
-  Item,
-  DropResult = {}
-  > extends ConnectionBase<DragSourceMonitor<Item, DropResult>> {
-
-  /** Use this method to have a dynamically typed source. If no type has
+export interface DragSource<Item, DropResult = {}>
+    extends ConnectionBase<DragSourceMonitor<Item, DropResult>> {
+    /** Use this method to have a dynamically typed source. If no type has
    *  previously been set, it creates the subscription and allows the
    *  `[dragSource]` DOM element to be connected. If you do not need to
    *  dynamically update the type, you can set it once via the
@@ -160,32 +161,42 @@ export interface DragSource<
    *     });
 
    */
-  setType(type: string | symbol): void;
-
-  /** This function allows you to connect a DOM node to your `DragSource`.
-   *  You will not usually need to call this directly;
-   *  it is more easily handled by the directives.
-   *
-   *  The subscription returned is automatically unsubscribed when the connection is made.
-   *  This may be immediate if the `DragSource` already has a type.
-   */
-  connectDragSource(elementOrNode: Node, options?: DragSourceOptions): Subscription;
-
-  /** This function allows you to connect a DOM node to your `DragSource` as a **preview**.
-   *  You will not usually need to call this directly;
-   *  it is more easily handled by the directives.
-   *
-   *  You might use an `ElementRef.nativeElement`, or even an
-   *  [`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image).
-   *
-   *      const img = new Image();
-   *      img.onload = this.source.connectDragPreview(img);
-   *      img.src = '...';
-   *
-   *  The subscription returned is automatically unsubscribed when the connection is made.
-   *  This may be immediate if the `DragSource` already has a type.
-   */
-  connectDragPreview(elementOrNode: Node, options?: DragPreviewOptions): Subscription;
+    setType(type: string | symbol): void;
+
+    /** This function allows you to connect a DOM node to your `DragSource`.
+     *  You will not usually need to call this directly;
+     *  it is more easily handled by the directives.
+     *
+     *  The subscription returned is automatically unsubscribed when the connection is made.
+     *  This may be immediate if the `DragSource` already has a type.
+     */
+    connectDragSource(
+        elementOrNode: Node,
+        options?: DragSourceOptions
+    ): Subscription;
+
+    /** This function allows you to connect a DOM node to your `DragSource` as a **preview**.
+     *  You will not usually need to call this directly;
+     *  it is more easily handled by the directives.
+     *
+     *  You might use an `ElementRef.nativeElement`, or even an
+     *  [`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image).
+     *
+     *      const img = new Image();
+     *      img.onload = this.source.connectDragPreview(img);
+     *      img.src = '...';
+     *
+     *  The subscription returned is automatically unsubscribed when the connection is made.
+     *  This may be immediate if the `DragSource` already has a type.
+     */
+    connectDragPreview(
+        elementOrNode: Node,
+        options?: DragPreviewOptions
+    ): Subscription;
+
+    /**
+     * Returns the drag source ID that can be used to simulate the drag and drop events with the testing backend. */
+    getHandlerId(): any;
 }
 
 /**
@@ -241,18 +252,16 @@ you must handle every draggable `type` in a drag layer to have any previews at
 all.
 
  */
-export interface DragLayer<Item = any> extends ConnectionBase<DragLayerMonitor<Item>> {
-
-  /** For listen functions in general, see {@link DragSource.listen}.
-   *
-   *  This listen function is called any time the global drag state
-   *  changes, including the coordinate changes, so that your component can
-   *  provide a timely updated custom drag preview. You can ask the monitor for
-   *  the client coordinates of the dragged item. Read the {@link DragLayerMonitor}
-   *  docs to see all the different possibile coordinates you might subscribe
-   *  to.
-   */
-  listen<O>(mapTo: (monitor: DragLayerMonitor<Item>) => O): Observable<O>;
-
+export interface DragLayer<Item = any>
+    extends ConnectionBase<DragLayerMonitor<Item>> {
+    /** For listen functions in general, see {@link DragSource.listen}.
+     *
+     *  This listen function is called any time the global drag state
+     *  changes, including the coordinate changes, so that your component can
+     *  provide a timely updated custom drag preview. You can ask the monitor for
+     *  the client coordinates of the dragged item. Read the {@link DragLayerMonitor}
+     *  docs to see all the different possibile coordinates you might subscribe
+     *  to.
+     */
+    listen<O>(mapTo: (monitor: DragLayerMonitor<Item>) => O): Observable<O>;
 }
-
