[added] Draggable

Summary:
To make our API structure consistent, I've extracted `state` into a `ReactiveProperty`.  The next phase will be to implement `dragSystem`, which will return a stream of `Point2D`s representing translation.  The final step will be to implement a `velocity` operator that maps over those points to compute velocity.

Closes #185

Reviewers: O2 Material Motion, O3 Material JavaScript platform reviewers, #material_motion, featherless

Reviewed By: O2 Material Motion, #material_motion, featherless

Tags: #material_motion

Differential Revision: http://codereview.cc/D3079

packages/core/src/interactions/Draggable.ts

@@ -0,0 +1,48 @@
+/** @license
+ *  Copyright 2016 - present The Material Motion Authors. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ *  use this file except in compliance with the License. You may obtain a copy
+ *  of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *  License for the specific language governing permissions and limitations
+ *  under the License.
+ */
+
+import createProperty from '../properties/createProperty';
+
+import {
+  Observable,
+  PartialPointerEvent,
+  PropertyObservable,
+} from '../types';
+
+import {
+  GestureRecognitionState,
+} from '../GestureRecognitionState';
+
+export type PointerEventStreams = {
+  down$: Observable<PartialPointerEvent>;
+  move$: Observable<PartialPointerEvent>;
+  up$: Observable<PartialPointerEvent>;
+};
+
+export class Draggable {
+  state: PropertyObservable<GestureRecognitionState> = createProperty<GestureRecognitionState>({ initialValue: GestureRecognitionState.POSSIBLE });
+  recognitionThreshold: PropertyObservable<number> = createProperty<number>({ initialValue: 16 });
+  down$: Observable<PartialPointerEvent>;
+  move$: Observable<PartialPointerEvent>;
+  up$: Observable<PartialPointerEvent>;
+
+  constructor({ down$, move$, up$ }: PointerEventStreams) {
+    this.down$ = down$;
+    this.move$ = move$;
+    this.up$ = up$;
+  }
+}
+export default Draggable;

packages/core/src/types.ts

@@ -98,6 +98,22 @@ export type Point2D = {
   y: number,
 };
 
+/**
+ * There are 2 competing input events on the Web: `PointerEvent`s and
+ * `TouchEvent`s. Our gesture system only needs 3 properties: x, y, and and ID.
+ * In both models, `pageX` and `pageY` are provided. `TouchEvent` calls its ID
+ * `identifier`; whereas, `PointerEvent` uses `pointerId`.
+ *
+ * `PartialPointerEvent` is the subset we care about.  `PointerEvent` already
+ * has this shape.  `TouchEvent` can be trivially converted by extracting the
+ * touches and renaming `identifier` to `pointerId`.
+ */
+export type PartialPointerEvent = {
+  pageX: number;
+  pageY: number;
+  pointerId: number;
+};
+
 export type Read<T> = () => T;
 export interface ScopedReadable<T> {
   read: Read<T>;