1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
'use strict';
app.directive('pgLine', function () {
return {
restrict: 'A',
replace: 'false',
scope: {
line: '=',
list: '='
},
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);
paper.setup(canvas);
var path;
var drag = false;
mainTool.onMouseDown = function(event) {
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: 'rgba(7,140,255,.3)',
strokeWidth: 100,
strokeCap: 'round'
});
drag = true;
};
mainTool.onMouseMove = function(event) {
if (drag) {
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.$watch('list', function(newPoints) {
console.log("update");
if (newPoints) {
for (var i = 0; i < newPoints.length - 1; ++i) {
if (newPoints[i].selected) {
var line = paper.Path.Line(newPoints[i], newPoints[i+1]);
line.strokeColor = 'red';
line.strokeWidth = 2;
}
}
}
}, 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 y = startY + dy;
var x = startX + dx;
elm.css({
top: y + 'px',
left: x + 'px'
});
scope.point.x = x;
scope.point.y = y;
scope.$apply();
return false;
}
function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
}
};
}]);
|
