Added reactive extensions and used that to implement the map drag and…

… select
TheGrandUser · Sep 21, 2014 · 49711ef · 49711ef
1 parent da5f769
commit 49711ef
Show file tree

Hide file tree

Showing 38 changed files with 13,120 additions and 91 deletions.
diff --git a/HexCrawlManager/App/HexMaps/HexMapModule.js b/HexCrawlManager/App/HexMaps/HexMapModule.js
diff --git a/HexCrawlManager/App/HexMaps/HexMapModule.js.map b/HexCrawlManager/App/HexMaps/HexMapModule.js.map
diff --git a/HexCrawlManager/App/HexMaps/HexMapModule.ts b/HexCrawlManager/App/HexMaps/HexMapModule.ts
@@ -1,4 +1,8 @@
 /// <reference path="../../scripts/typings/angularjs/angular.d.ts" />
+/// <reference path="../../scripts/typings/rx/rx.d.ts" />
+/// <reference path="../../scripts/typings/rx/rx.async.d.ts" />
+/// <reference path="../../scripts/typings/rx/rx.binding.d.ts" />
+/// <reference path="../../scripts/typings/rx/rx.time.d.ts" />
 /// <reference path="modeltypes.ts" />
 
 module HexMaps {
@@ -60,6 +64,11 @@ module HexMaps {
         static $inject = ['$scope', 'hexMapService', 'cameraService'];
     }
 
+    class DragEvent {
+        constructor(public start: Point, public end: Point) {
+        }
+    }
+
     export function SelectHexMapDirective(
         hexMapInteractionService: IHexMapInteractionService,
         cameraService: ICameraService): ng.IDirective {
@@ -70,54 +79,40 @@ module HexMaps {
 
                 console.log("Linking a selectHexMap directive!");
 
-                var offsetLeft = element[0].offsetLeft;
-                var offsetTop = element[0].offsetTop;
-                var mouseDown: Point = new Point(0, 0);
-                var lastMousePos: Point = new Point(0, 0);
+                var eventToPoint = (mouseEvent: JQueryMouseEventObject) => new Point(mouseEvent.offsetX, mouseEvent.offsetY);
+
+                var mouseDownObs = Rx.Observable.fromEventPattern<JQueryMouseEventObject>(
+                    function (handler: (event: JQueryMouseEventObject) => void) { element.bind("mousedown", handler); },
+                    function (handler: (event: JQueryMouseEventObject) => void) { element.unbind("mousedown"); });
 
-                var mouseDrag = false;
+                var mouseUpObs = Rx.Observable.fromEventPattern<JQueryMouseEventObject>(
+                    function (handler: (event: JQueryMouseEventObject) => void) { element.bind("mouseup", handler); },
+                    function (handler: (event: JQueryMouseEventObject) => void) { element.unbind("mouseup"); });
 
-                element.bind('mousedown', function (event: JQueryMouseEventObject) {
+                var mouseMoveObs = Rx.Observable.fromEventPattern<JQueryMouseEventObject>(
+                    function (handler: (event: JQueryMouseEventObject) => void) { element.bind("mousemove", handler); },
+                    function (handler: (event: JQueryMouseEventObject) => void) { element.unbind("mousemove"); });
 
-                    if (event.button === 0) {
+                var mousePointerObs = mouseMoveObs.select(eventToPoint).throttle(1/15);
 
-                        //var currentTarget: any = event.currentTarget;
+                var drag = mouseDownObs
+                    .where(downEvent => downEvent.button === 0)
+                    .selectMany(downEvent => mousePointerObs
+                        .startWith(eventToPoint(downEvent))
+                        .zip(mousePointerObs, (first, second) => first.sub(second))
+                        .takeUntil(mouseUpObs));
 
-                        //console.log("Mouse click at " + event.clientX + ", " + event.clientY);
-                        //console.log("     offset at " + event.offsetX + ", " + event.offsetY);
-                        //console.log(" target offset " + currentTarget.offsetLeft + ", " + currentTarget.offsetTop);
-                        //console.log("   target size " + currentTarget.width + ", " + currentTarget.height);
-
-                        mouseDown = new Point(event.offsetX, event.offsetY);
-                        lastMousePos = new Point(event.offsetX, event.offsetY);
-                        mouseDrag = true;
-
-                    } else if (event.button === 2) {
-                        event.preventDefault();
-                    }
+                drag.subscribe(delta => {
+                    cameraService.position = cameraService.position.add(delta);
+                    hexMapInteractionService.doRender();
                 });
 
-                element.bind('mouseup', function (event: JQueryMouseEventObject) {
-                    if (event.button === 0) {
-                        if (lastMousePos.X === mouseDown.X || lastMousePos.Y === mouseDown.Y) {
-                            hexMapInteractionService.makeSelection(mouseDown);
-                        }
-                        mouseDrag = false;
-                    } else if (event.button === 2) {
-                        event.preventDefault();
-                    }
-                });
+                var selection = mouseDownObs
+                    .where(downEvent => downEvent.button === 0)
+                    .selectMany(downEvent => mouseUpObs.takeUntil(mouseMoveObs).take(1));
 
-                element.bind('mousemove', function (event: JQueryMouseEventObject) {
-                    if (mouseDrag) {
-                        var newMousePos = new Point(event.offsetX, event.offsetY);
-                        var diff = lastMousePos.sub(newMousePos);
-
-                        lastMousePos = newMousePos;
-
-                        cameraService.position = cameraService.position.add(diff);
-                        hexMapInteractionService.doRender();
-                    }
+                selection.subscribe(clickEvent => {
+                    hexMapInteractionService.makeSelection(eventToPoint(clickEvent));
                 });
             }
         };

diff --git a/HexCrawlManager/App/HexMaps/ModelTypes.js b/HexCrawlManager/App/HexMaps/ModelTypes.js
diff --git a/HexCrawlManager/App/HexMaps/ModelTypes.js.map b/HexCrawlManager/App/HexMaps/ModelTypes.js.map
diff --git a/HexCrawlManager/App/HexMaps/ModelTypes.ts b/HexCrawlManager/App/HexMaps/ModelTypes.ts
@@ -1,4 +1,8 @@
-
+/// <reference path="../../scripts/typings/rx/rx.d.ts" />
+/// <reference path="../../scripts/typings/rx/rx.async.d.ts" />
+/// <reference path="../../scripts/typings/rx/rx.binding.d.ts" />
+/// <reference path="../../scripts/typings/rx/rx.time.d.ts" />
+
 module HexMaps {
 
     'use strict';
@@ -177,11 +181,6 @@ module HexMaps {
             this.leftEdgeOffsetLeftOne = upperLeftOffset.X < -HexagonDefinition.SideLength / 2;
             this.lowerEdgeDownFirst = lowerLeftCenter.Y > 0;
             this.rightEdgeOffsetRightOne = upperRightCenter.X > HexagonDefinition.SideLength / 2;
-
-            console.log("upperEdgeDownFirst: " + this.upperEdgeDownFirst);
-            console.log("leftEdgeOffsetLeftOne: " + this.leftEdgeOffsetLeftOne);
-            console.log("bottomEdgeDownFirst: " + this.lowerEdgeDownFirst);
-            console.log("rightEdgeOffsetRightOne: " + this.rightEdgeOffsetRightOne);
         }
 
         isInBounds(coord: AxialCoord): boolean {

diff --git a/HexCrawlManager/App_Start/BundleConfig.cs b/HexCrawlManager/App_Start/BundleConfig.cs
@@ -27,6 +27,12 @@ public static void RegisterBundles(BundleCollection bundles)
             "~/Scripts/angular.js",
             "~/Scripts/angular-route.js"));
 
+         bundles.Add(new ScriptBundle("~/bundles/rx").Include(
+                     "~/Scripts/rx.js",
+                     "~/Scripts/rx.async.js",
+                     "~/Scripts/rx.binding.js",
+                     "~/Scripts/rx.time.js"));
+
          bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/bootstrap.css",
                    "~/Content/site.css"));

diff --git a/HexCrawlManager/HexCrawlManager.csproj b/HexCrawlManager/HexCrawlManager.csproj
@@ -236,6 +236,12 @@
     <Content Include="Scripts\respond.min.js" />
     <Content Include="Scripts\rx.aggregates.js" />
     <Content Include="Scripts\rx.aggregates.min.js" />
+    <Content Include="Scripts\rx.angular.js" />
+    <Content Include="Scripts\rx.angular.min.js" />
+    <Content Include="Scripts\rx.async.compat.js" />
+    <Content Include="Scripts\rx.async.compat.min.js" />
+    <Content Include="Scripts\rx.async.js" />
+    <Content Include="Scripts\rx.async.min.js" />
     <Content Include="Scripts\rx.binding.js" />
     <Content Include="Scripts\rx.binding.min.js" />
     <Content Include="Scripts\rx.coincidence.js" />
@@ -246,6 +252,10 @@
     <Content Include="Scripts\rx.joinpatterns.js" />
     <Content Include="Scripts\rx.joinpatterns.min.js" />
     <Content Include="Scripts\rx.js" />
+    <Content Include="Scripts\rx.lite.compat.js" />
+    <Content Include="Scripts\rx.lite.compat.min.js" />
+    <Content Include="Scripts\rx.lite.js" />
+    <Content Include="Scripts\rx.lite.min.js" />
     <Content Include="Scripts\rx.testing.js" />
     <Content Include="Scripts\rx.testing.min.js" />
     <Content Include="Scripts\rx.time.js" />
@@ -314,6 +324,24 @@
     <TypeScriptCompile Include="Scripts\typings\angularjs\angular-scenario.d.ts" />
     <TypeScriptCompile Include="Scripts\typings\angularjs\angular.d.ts" />
     <TypeScriptCompile Include="Scripts\typings\jquery\jquery.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx-lite.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.aggregates.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.async-lite.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.async.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.backpressure-lite.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.backpressure.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.binding-lite.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.binding.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.coincidence-lite.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.coincidence.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.experimental.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.joinpatterns.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.lite.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.testing.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.time-lite.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.time.d.ts" />
+    <TypeScriptCompile Include="Scripts\typings\rx\rx.virtualtime.d.ts" />
     <TypeScriptCompile Include="Scripts\typings\signalr\signalr.d.ts" />
   </ItemGroup>
   <PropertyGroup>