diff options
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 |
Merge origin/master
Conflicts:
app/js/services.js
-rw-r--r-- | app/css/app.css | 33 | ||||
-rw-r--r-- | app/index.html | 62 | ||||
-rw-r--r-- | app/js/controllers.js | 53 | ||||
-rw-r--r-- | app/js/directives.js | 125 | ||||
-rw-r--r-- | app/js/services.js | 16 |
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; } }; |