diff options
-rw-r--r-- | app/css/app.css | 29 | ||||
-rw-r--r-- | app/index.html | 62 | ||||
-rw-r--r-- | app/js/controllers.js | 53 | ||||
-rw-r--r-- | app/js/directives.js | 125 |
4 files changed, 244 insertions, 25 deletions
diff --git a/app/css/app.css b/app/css/app.css index 8d3eae6..960eac4 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -1 +1,30 @@ /* 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; +}
\ No newline at end of file diff --git a/app/index.html b/app/index.html index 6bf7fc0..537996f 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;"><div></div></div> + </div> + + <ul> + <li data-ng-repeat="point in points">{{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..29e7c0d 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) { + 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 |