equal
deleted
inserted
replaced
8 |
8 |
9 var jqs = $(".cutout-canvas"), |
9 var jqs = $(".cutout-canvas"), |
10 offset = jqs.offset(), |
10 offset = jqs.offset(), |
11 paper = new Raphael(jqs[0]), |
11 paper = new Raphael(jqs[0]), |
12 closed = false, |
12 closed = false, |
|
13 rectangleMode = false, |
13 closeTimeout, |
14 closeTimeout, |
14 points = []; |
15 points = []; |
15 |
16 |
16 paper.rect(0, 0, paper.width, paper.height) |
17 paper.rect(0, 0, paper.width, paper.height) |
17 .attr({ |
18 .attr({ |
34 for (var i = 0; i < 4; i++) { |
35 for (var i = 0; i < 4; i++) { |
35 addPoint(mx - offset.left, my - offset.top) |
36 addPoint(mx - offset.left, my - offset.top) |
36 } |
37 } |
37 redrawPath(); |
38 redrawPath(); |
38 pathDragging = true; |
39 pathDragging = true; |
|
40 rectangleMode = true; |
39 } |
41 } |
40 |
42 |
41 var x = mx - offset.left, |
43 var x = mx - offset.left, |
42 y = my - offset.top; |
44 y = my - offset.top; |
43 points[1].x = points[2].x = x; |
45 points[1].x = points[2].x = x; |
53 },0); |
55 },0); |
54 } |
56 } |
55 ); |
57 ); |
56 |
58 |
57 function resetPoints() { |
59 function resetPoints() { |
|
60 rectangleMode = false; |
58 points.forEach(function(p) { |
61 points.forEach(function(p) { |
59 p.handle.remove(); |
62 p.handle.remove(); |
60 }); |
63 }); |
61 points = []; |
64 points = []; |
62 } |
65 } |
66 var dragdeltax, dragdeltay, pointDragging, |
69 var dragdeltax, dragdeltay, pointDragging, |
67 point = { |
70 point = { |
68 x: Math.floor(x), |
71 x: Math.floor(x), |
69 y: Math.floor(y) |
72 y: Math.floor(y) |
70 } |
73 } |
|
74 |
|
75 var pointsWithSameX = [], pointsWithSameY = []; |
71 |
76 |
72 var pointrect = paper.rect(0, 0, HANDLESIZE, HANDLESIZE) |
77 var pointrect = paper.rect(0, 0, HANDLESIZE, HANDLESIZE) |
73 .attr({ |
78 .attr({ |
74 stroke: PATHCOLOR, |
79 stroke: PATHCOLOR, |
75 fill: PATHCOLOR, |
80 fill: PATHCOLOR, |
79 .drag( |
84 .drag( |
80 function(dx, dy) { |
85 function(dx, dy) { |
81 pointDragging = true; |
86 pointDragging = true; |
82 point.x = dx + dragdeltax; |
87 point.x = dx + dragdeltax; |
83 point.y = dy + dragdeltay; |
88 point.y = dy + dragdeltay; |
|
89 if (rectangleMode) { |
|
90 pointsWithSameX.forEach(function(p) { |
|
91 p.x = point.x; |
|
92 }); |
|
93 pointsWithSameY.forEach(function(p) { |
|
94 p.y = point.y; |
|
95 }); |
|
96 } |
84 redrawPath(); |
97 redrawPath(); |
85 }, |
98 }, |
86 function() { |
99 function() { |
87 dragdeltax = point.x; |
100 dragdeltax = point.x; |
88 dragdeltay = point.y; |
101 dragdeltay = point.y; |
|
102 if (rectangleMode) { |
|
103 pointsWithSameX = points.filter(function(p) { |
|
104 return p !== point && p.x === point.x; |
|
105 }); |
|
106 pointsWithSameY = points.filter(function(p) { |
|
107 return p !== point && p.y === point.y; |
|
108 }); |
|
109 } |
89 }, |
110 }, |
90 function() { |
111 function() { |
91 setTimeout(function() { |
112 setTimeout(function() { |
92 pointDragging = false; |
113 pointDragging = false; |
93 shapeMouseOut(pointrect); |
114 shapeMouseOut(pointrect); |
113 |
134 |
114 function clickAddPoint(e, mx, my) { |
135 function clickAddPoint(e, mx, my) { |
115 |
136 |
116 if (pathDragging) { |
137 if (pathDragging) { |
117 return; |
138 return; |
|
139 } |
|
140 |
|
141 if (rectangleMode) { |
|
142 resetPoints(); |
118 } |
143 } |
119 |
144 |
120 clearTimeout(closeTimeout); |
145 clearTimeout(closeTimeout); |
121 closed = false; |
146 closed = false; |
122 |
147 |