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
121
122
123
124
125
126
|
'use strict';
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);
}
}
};
}]);
|