feat: drag-element example with rx

Author: PatrickJS

public/index.html

@@ -9,8 +9,21 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <base href="/">
-  <!-- styles -->
+  <!--
+  Angular Material styles
   <link href="/css/angular2_material.css" rel="stylesheet" type="text/css">
+  -->
+
+  <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.4/css/bootstrap.min.css">
+  <style type="text/css">
+    html  {
+      -moz-user-select: none;
+      -khtml-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  </style>
+
   <!-- Angular 2 -->
   <script src="/lib/traceur.min.js"></script>
 </head>

src/app/bootstrap.ts

@@ -28,5 +28,5 @@ bootstrap(App, [
   // appServicesInjectables,
   modelInjectables,
   rxPipeRegistry,
-  bind(ChangeDetection).toClass(JitChangeDetection)
+  // bind(ChangeDetection).toClass(JitChangeDetection)
 ]);

src/app/components/app.ts

@@ -2,7 +2,7 @@
 /// <reference path="../../custom_typings/ng2.d.ts" />
 
 // Angular 2
-import {Component, View, coreDirectives, onChange, ON_PUSH} from 'angular2/angular2';
+import {Directive, Component, View, coreDirectives, onChange, onDestroy, ON_PUSH, ElementRef} from 'angular2/angular2';
 import {Observable} from 'angular2/src/facade/async';
 import {Inject} from 'angular2/di'
 import {RouteConfig, Router, RouterOutlet, RouterLink} from 'angular2/router';
@@ -23,23 +23,89 @@ import {GreetIntent} from '../intents/GreetIntent';
 import {GreetModel} from '../models/GreetModel';
 
 
+@Directive({
+  selector: '[drag-element]',
+  hostListeners: {
+    // Observable plz
+    // 'mouseup': 'onMouseup($event)',
+    // 'mousedown': 'onMousedown($event)'
+    // 'window:mousemove': 'onMousedown($event)'
+  }
+})
+export class DragElement {
+  mouseup:   Rx.Observable<any>;
+  mousemove: Rx.Observable<any>;
+  mousedown: Rx.Observable<any>;
+  mousedrag: Rx.Observable<any>;
+  constructor( {domElement}: ElementRef ) {
+
+    this.mouseup = this.fromDOMSource('mouseup', domElement)
+    this.mousemove = this.fromDOMSource('mousemove', window.document);
+    this.mousedown = this.fromDOMSource('mousedown', domElement).
+      map( event => {
+        event.preventDefault();
+        // calculate offsets when mouse down
+        var {clientY, clientX} = event;
+        return {
+         left: clientX - domElement.getBoundingClientRect().left,
+         top:  clientY - domElement.getBoundingClientRect().top,
+        };
+      });
+
+    // Combine mouse down with mouse move until mouse up
+    this.mousedrag = this.mousedown.
+      selectMany( imageOffset => {
+        return this.mousemove.map(  pos => {
+          var {clientY, clientX} =  pos;
+          var {top, left} = imageOffset;
+          // calculate offsets from mouse down to mouse moves
+          return {
+            top:  clientY - top,
+            left: clientX - left
+          };
+        }).takeUntil(this.mouseup);
+      });
+    /*
+    todo: Use requestAnimationFrame Scheduler
+    */
+    this.mousedrag.subscribe( pos => {
+      var {top, left} = pos;
+      var {style}     = domElement;
+      // Update position
+      // requestAnimationFrame
+      style.top  = top + 'px';
+      style.left = left + 'px';
+    });
+  }
+
+  fromDOMSource(eventName: string, el: any): Rx.Observable<any> {
+    return Rx.Observable.fromEventPattern(
+      callback => el.addEventListener(eventName, callback, false),
+      callback => el.removeEventListener(eventName, callback)
+    );
+  }
+}
+
+
 @Component({
   selector: 'count',
-  lifecycle: [onChange],
+  // lifecycle: [onChange],
   // changeDetection: ON_PUSH,
   properties: { 'counter': 'counter' }
 })
 @View({
+  directives: [ ],
   template: `
   <div>
     counter {{ counter }}
 
-    <div>
+
+    <p>
       <button (click)="incrementCounter()">
         Increment Counter from Component
       </button>
       <content></content>
-    </div>
+    </p>
 
   </div>
   `
@@ -53,34 +119,68 @@ export class Count {
     this.counterIntent.incrementCounter();
   }
 
-  onChange(value) {
-    console.log('CHANGE Count','\n', JSON.stringify(value, null, 2));
-  }
+  // onChange(value) {
+  //   console.log('CHANGE Count','\n', JSON.stringify(value, null, 2));
+  // }
 }
 
 
 
 @Component({
   selector: 'app',
-  lifecycle: [onChange],
   // changeDetection: ON_PUSH
 })
 @View({
   // needed in order to tell Angular's compiler what's in the template
-  directives: [ routerDirectives, coreDirectives, Count ],
+  directives: [ routerDirectives, coreDirectives, Count, DragElement ],
   template: `
+    <style>
+    [drag-element] {
+      -webkit-transform: translate3d(0, 0, 0);
+      -moz-transform: translate3d(0, 0, 0);
+      -ms-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+      background-image: url(https://cdn.rawgit.com/Reactive-Extensions/rx.angular.js/master/examples/draganddrop/logo.png);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      height: 200px;
+      width: 200px;
+      color: #000000;
+      border: 1px solid #666666;
+      padding: 10px;
+      position: absolute;
+      cursor: move;
+    }
+  </style>
+
+  <header>
+    <h1 class="title">Hello Reactive Angular 2</h1>
+  </header>
+
+  <main>
+    <count [counter]="appState | async | get('counter')">
+      <button (click)="handleIncrement()">Increment Counter from App</button>
+    </count>
+
+    <h2>
+      Greet {{ appState | async | get('greeting') }}
+    </h2>
+
+    <p>
+      <button (^click)="toggleGreet()">Greet {{ appState | async | get('greeting') }} </button>
+    </p>
+    <p>
+      <pre>appState = {{ appState | async | json }}</pre>
+    </p>
+  </main>
+
+  <footer>
+    <div drag-element>
+      Draggable Div
+    </div>
+  </footer>
 
-  <h1 class="title">Hello Reactive Angular 2</h1>
-
-  <count [counter]="appState | async | get('counter')">
-    <button (click)="handleIncrement()">Increment Counter from App</button>
-  </count>
-
-  <h2>Greet {{ appState | async | get('greeting') }}</h2>
-  <div>
-    <button (^click)="toggleGreet()">Greet {{ appState | async | get('greeting') }} </button>
-  </div>
-  <pre>appState = {{ appState | async | json }}</pre>
   `
 })
 export class App {
@@ -107,8 +207,4 @@ export class App {
     this.greetIntent.toggleGreet();
   }
 
-  onChange(value) {
-    console.log('CHANGE App', '\n', JSON.stringify(value, null, 2));
-  }
-
 }

src/common/rxPipes.ts

@@ -35,9 +35,7 @@ export class GetPipe extends Pipe {
   onDestroy() {}
   supports(val) { return true }
   transform(val) {
-    // console.log('wat1', val)
-    return function(prop) {
-      // console.log('wat2', val, prop);
+    return function getProp(prop) {
       return (val) ? val[prop] : val;
     }
   }