aboutsummaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
authorJakob Odersky <jodersky@gmail.com>2014-05-11 01:50:09 +0200
committerJakob Odersky <jodersky@gmail.com>2014-05-11 01:50:09 +0200
commit9c6e8430f2eae3413ec7d858b5920d70ba14db32 (patch)
treecb27b0d05b44e4260eaaa3bf308a1e83d6473b5e /app
parenta0c7682412ad701a7300e6ec29ba90d90999657e (diff)
downloadplayGraph-9c6e8430f2eae3413ec7d858b5920d70ba14db32.tar.gz
playGraph-9c6e8430f2eae3413ec7d858b5920d70ba14db32.tar.bz2
playGraph-9c6e8430f2eae3413ec7d858b5920d70ba14db32.zip
wip - paperjs directive
Diffstat (limited to 'app')
-rw-r--r--app/index.html53
-rw-r--r--app/js/controllers.js107
-rw-r--r--app/js/directives.js75
3 files changed, 128 insertions, 107 deletions
diff --git a/app/index.html b/app/index.html
index bfbc92e..b2d919d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -7,25 +7,70 @@
<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/directives.js" ></script>
+ <script src="js/controllers.js" ></script>
+
</head>
<body ng-app="playGraph" ng-controller="pointCtrl">
+ <div data-pg-epicness data-points="points"> </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>-->
-
- <canvas id="canvas" resize ng-mousedown="mouseDown($event)" ng-mousemove="mouseDrag($event)" ng-mouseup="mouseUp()"></canvas>
+<!--
+ <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 80303ab..11e0b24 100644
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -30,111 +30,14 @@ app.controller('pointCtrl', function($scope, $http, pathService){
}
}
+ $scope.foo = function (event) {
+ console.log("foobar");
- // Get a reference to the canvas object
- var canvas = document.getElementById('canvas');
- // Create an empty project and a view for the canvas:
- paper.setup(canvas);
- // Create a Paper.js Path to draw a line into it:
- var path = new paper.Path();
-
-
- // Give the stroke a color
- path.strokeColor = 'black';
- var start = new paper.Point(100, 100);
- var textItem = new paper.PointText({
- content: 'Click and drag to draw a line.',
- point: new Point(20, 30),
- fillColor: 'black',
- });
-
- // Move to start and draw a line from there
- path.moveTo(start);
- // Note that the plus operator on Point objects does not work
- // in JavaScript. Instead, we need to call the add() function:
- path.lineTo(start.add([ 200, -50 ]));
- // Draw the view now:
- paper.view.draw();
-
-
- $scope.mouseDown = function(event){
- console.log(event);
- if (path) {
- path.selected = false;
- }
-
- // Create a new path and set its stroke color to black:
- path = new paper.Path({
- segments: [new paper.Point(event.x, event.y)],
- strokeColor: 'black',
- // Select the path, so we can see its segment points:
- fullySelected: true
+ $scope.points.push({
+ x: 250,
+ y: 250
});
- };
-
- $scope.mouseDrag = function(event){
- path.add(new paper.Point(event.x, event.y));
-
- // Update the content of the text item to show how many
- // segments it has:
- textItem.content = 'Segment count: ' + path.segments.length;
- };
-
-$scope.mouseUp = function(){
- var segmentCount = path.segments.length;
-
- var points = Array();
-
- // When the mouse is released, simplify it:
- path.simplify(10);
-
- for(i=0; i<path._segments.length; i++)
- {
- points.push({'x' : path._segments[i]._point.x, 'y' : path._segments[i]._point.y});
- }
-
- console.log(points);
-
- var pointsAsString = points.map(function(o){return o.x+","+o.y});
-
- // Select the path, so we can see its segments:
- path.fullySelected = true;
-
- textItem.content = pointsAsString.join(' ; ');
};
-/*
-
-
- var path;
-
-
-
-
-
-
- $scope.mouseDown = function(event){
- 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',
- // Select the path, so we can see its segment points:
- fullySelected: true
- });
- };
- paper.install(window);
- var canvas = document.getElementById('myCanvas');
- paper.setup('canvas');
- */
-
-
- /*$http.get('data.json').then( function (response) {
- console.log(response.data.points);
- $scope.points=JSON.parse(response.data.points);
- });*/
}); \ No newline at end of file
diff --git a/app/js/directives.js b/app/js/directives.js
index ebc5dd1..40e7fab 100644
--- a/app/js/directives.js
+++ b/app/js/directives.js
@@ -1,3 +1,76 @@
'use strict';
-/* Directives */
+app.directive('pgEpicness', function () {
+ return {
+ restrict: 'A',
+ replace: 'false',
+ template: '<canvas resize></canvas>',
+ scope: {
+ points: '=',
+ line: '='
+ },
+ link: function (scope, elems, attrs) {
+ var canvas = elems[0];
+ var mainTool = new paper.Tool();
+ mainTool.activate();
+
+ paper.setup(canvas);
+
+ var paperPoints = [];
+ var paperLine = [];
+
+ var drawPoints = function(points) {
+ angular.forEach(points, function(point) {
+ var path = new paper.Path.Circle(new Point(point.x, point.y), 5);
+ path.strokeColor = 'gray';
+ path.strokeWidth = 2;
+ });
+ };
+
+ var selected = null;
+ var drag = false;
+ mainTool.onMouseDown = function(event) {
+ var hit = paper.project.hitTest(event.point)
+ if (hit) {
+ selected = hit.item;
+ } else {
+ var path = new paper.Path.Circle(new Point(event.point.x, event.point.y), 5);
+ path.strokeColor = 'gray';
+ path.strokeWidth = 2;
+ path.fillColor = 'white';
+ /*scope.points.push({
+ x: event.point.x,
+ y: event.point.y
+ });
+ scope.$apply();*/
+ selected = path;
+ };
+
+ drag = true;
+ };
+
+ mainTool.onMouseMove = function(event) {
+ if (drag && selected) {
+ selected.position = event.point;
+ scope.$apply();
+ }
+ }
+
+ mainTool.onMouseUp = function(event) {
+ drag = false;
+ }
+
+/*
+ scope.$watchCollection('points', function(newVal) {
+ console.log("update");
+ if (newVal) {
+ paper.project.clear();
+ drawPoints(scope.points);
+ }
+ }, true);
+*/
+
+ drawPoints();
+ }
+ }
+}); \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-16 15:18:33 +0000