4 files changed, 24 insertions, 7 deletions

diff --git a/app/css/app.css b/app/css/app.css
index 5f3e698..d0abf83 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -1,7 +1,14 @@
 /* app css stylesheet */
 
+* {
+	margin: 0;
+	padding: 0;
+}
+
 .world {
 	position: relative;
+	background-color: lightyellow;
+	overflow: hidden;
 }
 
 .world .line {
diff --git a/app/index.html b/app/index.html
index 4798294..ac1f1a5 100644
--- a/app/index.html
+++ b/app/index.html
@@ -10,6 +10,7 @@
         <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/filters.js" ></script>
         <script src="js/services.js" ></script>
         <script src="js/directives.js" ></script>
         <script src="js/controllers.js" ></script>
@@ -47,7 +48,9 @@
         <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 data-ng-repeat="point in points" data-pg-draggable="point" class="point" style="top: {{point.y}}px; left: {{point.x}}px;" data-ng-class="{selected: point.selected==true}"><div></div></div>
+
+            <div data-ng-repeat="point in points | filter:{selected:true} | sliding2">{{point._1}}, {{point._2}}</div>
         </div>
 
         <ul>
diff --git a/app/js/directives.js b/app/js/directives.js
index a460d93..d20c034 100644
--- a/app/js/directives.js
+++ b/app/js/directives.js
@@ -4,10 +4,11 @@ app.directive('pgLine', function () {
     return {
       restrict: 'A',
       replace: 'false',
-      template: '<canvas resize></canvas>',
+      template: '<canvas width=100%; height: 100%></canvas>',
       link: function (scope, elems, attrs) {
       	var canvas = elems[0];
       	var mainTool = new paper.Tool();
+      	
       	mainTool.activate();
 
       	scope.line = scope.$eval(attrs.pgLine);
@@ -18,6 +19,7 @@ app.directive('pgLine', function () {
       	var selected = null;
       	var drag = false;
 
+
       	mainTool.onMouseDown = function(event) {
       		var hit = paper.project.hitTest(event.point)
       		if (hit) {
@@ -33,9 +35,10 @@ app.directive('pgLine', function () {
 				// Create a new path and set its stroke color to black:
 				path = new paper.Path({
 					segments: [event.point],
-					strokeColor: 'black',
-					strokeWidth: 2,
-					fullySelected: true
+					strokeColor: 'rgba(7,140,255,.5)',
+					strokeWidth: 100,
+					fullySelected: true,
+                                        strokeCap: 'round'
 				});
             	selected = null;
       		};
@@ -44,6 +47,7 @@ app.directive('pgLine', function () {
       	};
 
       	mainTool.onMouseMove = function(event) {
+      		console.log(event.point);
       		if (drag) {
       			if (selected) {
       				selected.position = event.point;
@@ -61,7 +65,7 @@ app.directive('pgLine', function () {
 			var points = Array();
 
 			// When the mouse is released, simplify it:
-			path.simplify(10);
+			path.simplify(1);
 	
 			for(var i=0; i<path._segments.length; i++)
 			{
diff --git a/app/js/filters.js b/app/js/filters.js
index dce2495..7db9f17 100644
--- a/app/js/filters.js
+++ b/app/js/filters.js
@@ -6,7 +6,10 @@ app.filter('sliding2', function() {
     var groups = [];
 
     for (var i = 0; i < input.length - 1; ++i) {
-      groups.push([input[i], input[i+1]]);
+      	groups.push({
+      		_1: input[i],
+      		_2: input[i+1]
+      	});
     }
     return groups;
   };