Merge origin/master

Conflicts: app/js/services.js
author: Nicolas Bornand <nicolas74@gmail.com> 2014-05-11 10:54:55 +0200
committer: Nicolas Bornand <nicolas74@gmail.com> 2014-05-11 10:54:55 +0200
commit: 481dc29aa7225d7aa7a00b2690165245a4065252 (patch)
tree: a126488543379874bb1163754ff632f5e4951fa1
parent: 64b7faae30bb530b7fb4bd839735e8d4b3d6decb (diff)
parent: 9e579f32a7818f78f568089638fdcf8a06f579e6 (diff)
download: playGraph-481dc29aa7225d7aa7a00b2690165245a4065252.tar.gz
playGraph-481dc29aa7225d7aa7a00b2690165245a4065252.tar.bz2
playGraph-481dc29aa7225d7aa7a00b2690165245a4065252.zip
5 files changed, 262 insertions, 27 deletions
diff --git a/app/css/app.css b/app/css/app.css
index 8d3eae6..5f3e698 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -1 +1,34 @@
 /* app css stylesheet */
+
+.world {
+	position: relative;
+}
+
+.world .line {
+	position: absolute;
+}
+
+.point {
+	position: absolute;
+}
+
+.point > div {
+	position: relative;
+	border-radius: 50%;
+	margin-left: -10px;
+	margin-top: -10px;
+	width: 20px;
+	height: 20px;
+	border: solid #aaaaaa 2px;
+}
+
+.point > div:hover {
+	margin-left: -15px;
+	margin-top: -15px;
+	width: 30px;
+	height: 30px;
+}
+
+.selected > div {
+	background-color: red;
+}
+\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 6bf7fc0..843df21 100644
--- a/app/index.html
+++ b/app/index.html
@@ -4,25 +4,79 @@
         <meta charset="utf-8">
         <title>My HTML File</title>
         <link rel="stylesheet" href="css/app.css">
+        <script type="text/javascript" src="lib/paper-full.js"></script>
         <script src="lib/angular.js"></script>
         <script src="js/app.js" ></script>
-        <script src="js/controllers.js" ></script>
         <script src="js/services.js" ></script>
-        <script src="js/filters.js" ></script>
+        <script src="js/directives.js" ></script>
+        <script src="js/controllers.js" ></script>
+        
     </head>
     <body ng-app="playGraph" ng-controller="pointCtrl">
 
+        <div class="world" style="width: 100%; height: 500px;">
+            <div data-pg-line="line" class="line" resize></div>
+
+            <div data-ng-repeat="point in points" data-pg-draggable="point" class="point" style="top: {{point.x}}px; left: {{point.y}}px;" data-ng-class="{selected: point.selected==true}"><div></div></div>
+        </div>
+
+        <ul>
+            <li data-ng-repeat="point in points | filter:{selected:true}">{{point.x}}, {{point.y}}</li> 
+            
+        </ul>
+
+        <button ng-click="foo()">Add button</button>
+
+<!--
         <svg id="world" width="500" height="500">
             <circle data-ng-repeat="point in points" cx="{{point.x}}" cy="{{point.y}}" r="10" stroke="gray" stroke-width="2" fill="{{getColor(point)}}"></circle>
             <line data-ng-repeat="tuple in line | sliding2" x1="{{tuple[0].x}}" y1="{{tuple[0].y}}" x2="{{tuple[1].x}}" y2="{{tuple[1].y}}" style="stroke:rgb(255,0,0);stroke-width:2" />
-        </svg>
+        </svg>-->
+<!--
+        <a href="#" onclick="tool1.activate();">Lines</a>
+        <a href="#" onclick="tool2.activate();">Clouds</a>
+        <canvas id="myCanvas" resize></canvas>
         <ul>
             <li data-ng-repeat="song in playlist">
                 {{song}}
             </li>
         </ul>
 
+        <script>
+        
+        // Keep global references to both tools, so the HTML
+        // links below can access them.
+        var tool1, tool2;
+        paper.setup('myCanvas');
+
+        // Create two drawing tools.
+        // tool1 will draw straight lines,
+        // tool2 will draw clouds.
+
+        // Both share the mouseDown event:
+        var path;
+        function onMouseDown(event) {
+            path = new paper.Path();
+            path.strokeColor = 'black';
+            path.add(event.point);
+        }
+
+        tool1 = new paper.Tool();
+        tool1.onMouseDown = onMouseDown;
+
+        tool1.onMouseDrag = function(event) {
+            path.add(event.point);
+        }
+
+        tool2 = new paper.Tool();
+        tool2.minDistance = 20;
+        tool2.onMouseDown = onMouseDown;
 
-        <p>Nothing here {{}}</p>
+        tool2.onMouseDrag = function(event) {
+            // Use the arcTo command to draw cloudy lines
+            path.arcTo(event.point);
+        }
+        </script>
+    -->
     </body>
 </html>
diff --git a/app/js/controllers.js b/app/js/controllers.js
index e79dfa9..97e6366 100644
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -3,22 +3,31 @@
 /* Controllers */
 var p = new Point(1,2);
 
+
+
 app.controller('pointCtrl', function($scope, $http, pathService){
-	var constList = [
-		{x: 10, y:20},
-		{x: 20, y:30},
-		{x: 40, y:50},
-		{x: 60, y:60},
-		{x: 100, y:120},
-		{x: 150, y:300},
-		{x: 150, y:340}
-	];
-
-	var playlist = pathService.computePlaylist(dummyPoints,constList, 60);
-
-	$scope.line=constList;
+
 	$scope.points=dummyPoints;
-	$scope.playlist=playlist;
+	$scope.line = [];
+
+	var update = function(newPoints, newLine) {
+		if(newLine.length > 0) {
+			$scope.playlist=pathService.computePlaylist(newPoints, newLine, 60);
+		}
+	}
+
+	$scope.$watch('points', function(newVal, oldVal) {
+		console.log("r")
+		update(newVal, $scope.line);
+    }, true);
+
+    $scope.$watch('line', function(newVal) {
+		update($scope.points, newVal);
+    }, true);
+	
+
+//	$scope.line=constList;
+	
 
 	$scope.getColor = function(point) {
 		if (playlist.indexOf(point) == -1) {
@@ -27,11 +36,15 @@ app.controller('pointCtrl', function($scope, $http, pathService){
 			return "red"
 		}
 	}
-	
-	
 
-	/*$http.get('data.json').then( function (response) {
-		console.log(response.data.points);
-		$scope.points=JSON.parse(response.data.points);
-    });*/
+	$scope.foo = function (event) {
+		console.log("foobar");
+
+		$scope.points.push({
+			x: 250,
+			y: 250
+		});
+	};
+
+
 });
 \ No newline at end of file
diff --git a/app/js/directives.js b/app/js/directives.js
index ebc5dd1..a460d93 100644
--- a/app/js/directives.js
+++ b/app/js/directives.js
@@ -1,3 +1,126 @@
 'use strict';
 
-/* Directives */
+app.directive('pgLine', function () {
+    return {
+      restrict: 'A',
+      replace: 'false',
+      template: '<canvas resize></canvas>',
+      link: function (scope, elems, attrs) {
+      	var canvas = elems[0];
+      	var mainTool = new paper.Tool();
+      	mainTool.activate();
+
+      	scope.line = scope.$eval(attrs.pgLine);
+
+      	paper.setup(canvas);
+
+      	var path;
+      	var selected = null;
+      	var drag = false;
+
+      	mainTool.onMouseDown = function(event) {
+      		var hit = paper.project.hitTest(event.point)
+      		if (hit) {
+      			selected = hit.item;
+      		} else {
+      			paper.project.clear();
+				// If we produced a path before, deselect it:
+				if (path) {
+
+					path.selected = false;
+				}
+
+				// Create a new path and set its stroke color to black:
+				path = new paper.Path({
+					segments: [event.point],
+					strokeColor: 'black',
+					strokeWidth: 2,
+					fullySelected: true
+				});
+            	selected = null;
+      		};
+
+      		drag = true;
+      	};
+
+      	mainTool.onMouseMove = function(event) {
+      		if (drag) {
+      			if (selected) {
+      				selected.position = event.point;
+      				scope.$apply();	
+      			} else {
+      				path.add(event.point);		
+      			}
+      		}
+      	}
+
+      	mainTool.onMouseUp = function(event) {
+      		drag = false;
+      		var segmentCount = path.segments.length;
+
+			var points = Array();
+
+			// When the mouse is released, simplify it:
+			path.simplify(10);
+	
+			for(var i=0; i<path._segments.length; i++)
+			{
+				points.push({x : path._segments[i]._point.x, y : path._segments[i]._point.y});	
+			}
+	
+			scope.line = points;
+      		scope.$apply();
+      	}
+
+/*
+        scope.$watchCollection('points', function(newVal) {
+        	console.log("update");
+         	if (newVal) {
+         		paper.project.clear();
+            	drawPoints(scope.points);
+          	}
+        }, true);
+*/
+
+      }
+    }
+});
+
+app.directive('pgDraggable', ['$document' , function($document) {
+    return {
+      restrict: 'A',
+      link: function(scope, elm, attrs) {
+        var startX, startY, initialMouseX, initialMouseY;
+ 		scope.point = scope.$eval(attrs.pgDraggable);
+        elm.bind('mousedown', function($event) {
+          startX = elm.prop('offsetLeft');
+          startY = elm.prop('offsetTop');
+          initialMouseX = $event.clientX;
+          initialMouseY = $event.clientY;
+          $document.bind('mousemove', mousemove);
+          $document.bind('mouseup', mouseup);
+          return false;
+        });
+ 
+        function mousemove($event) {
+          var dx = $event.clientX - initialMouseX;
+          var dy = $event.clientY - initialMouseY;
+          var x = startY + dy;
+          var y = startX + dx;
+          elm.css({
+            top: x + 'px',
+            left: y + 'px'
+          });
+          scope.point.x = x;
+          scope.point.y = y;
+          scope.$apply();
+          return false;
+        }
+ 
+        function mouseup() {
+          $document.unbind('mousemove', mousemove);
+          $document.unbind('mouseup', mouseup);
+        }
+      }
+    };
+}]);
+\ No newline at end of file
diff --git a/app/js/services.js b/app/js/services.js
index b661da7..79d4c40 100644
--- a/app/js/services.js
+++ b/app/js/services.js
@@ -11,9 +11,11 @@ app.service('pathService', function() {
         },
         computePlaylist: function(songList, constrainList, duration) {
             //compute distances from the constrain path
+            
             var songListCopy = songList.slice(0);
             var maxDistOverall = Number.MIN_VALUE;
             angular.forEach(songListCopy, function(song){
+                song.selected = false;
                 song.minDist = Number.MAX_VALUE;
                 for(var i=0; i<constrainList.length;i++){
                     var point = constrainList[i];
@@ -32,17 +34,27 @@ app.service('pathService', function() {
             var selection = [];
             var tuning = .5;
             angular.forEach(songListCopy, function(song){
-                song.rand = (tuning + tuning*Math.random())*song.minDist;
+                song.rand = /*(tuning + tuning*Math.random())*/song.minDist;
             });
             songListCopy.sort(function(a,b){return a.rand-b.rand;});
             //take from the sorted list util we reach the desired duration
             while(duration > 0 && songListCopy.length > 0){
                 var removed = songListCopy.splice(0, 1);
-                console.log(removed[0].minDist);
                 selection.push(removed[0]);
                 duration -= 10;
+                removed[0].selected = true;
             }
+            
             selection.sort(function(a,b){ return a.closestIndex-b.closestIndex;});
+
+            //clean points
+            angular.forEach(songList, function(song) {
+                delete song.minDist;
+                delete song.closest;
+                delete song.closestIndex;
+                delete song.rand;
+            });
+
             return selection;
         }
     };
author	Nicolas Bornand <nicolas74@gmail.com>	2014-05-11 10:54:55 +0200
committer	Nicolas Bornand <nicolas74@gmail.com>	2014-05-11 10:54:55 +0200
commit	481dc29aa7225d7aa7a00b2690165245a4065252 (patch)
tree	a126488543379874bb1163754ff632f5e4951fa1
parent	64b7faae30bb530b7fb4bd839735e8d4b3d6decb (diff)
parent	9e579f32a7818f78f568089638fdcf8a06f579e6 (diff)
download	playGraph-481dc29aa7225d7aa7a00b2690165245a4065252.tar.gz playGraph-481dc29aa7225d7aa7a00b2690165245a4065252.tar.bz2 playGraph-481dc29aa7225d7aa7a00b2690165245a4065252.zip