OLD | NEW |
---|---|
(Empty) | |
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 cr.define('print_preview', function() { | |
6 'strict'; | |
7 | |
8 /** | |
9 * @constructor | |
10 * This class represents a margin line and a textbox corresponding to that | |
11 * margin. | |
12 */ | |
13 function MarginsUIPair(groupName) { | |
14 var marginsUIPair = document.createElement('div'); | |
15 marginsUIPair.__proto__ = MarginsUIPair.prototype; | |
16 marginsUIPair.className = MarginsUIPair.CSS_CLASS; | |
17 // @type {string} Specifies which margin this line refers to. | |
18 marginsUIPair.marginGroup = groupName; | |
19 | |
20 marginsUIPair.isTop_() || marginsUIPair.isBottom_() ? | |
21 marginsUIPair.classList.add('top-bottom') : | |
22 marginsUIPair.classList.add('left-right'); | |
23 | |
24 // @type {print_preview.Rect} A rectangle describing the dimensions of | |
25 // the draggable area. | |
26 marginsUIPair.rectangle = null; | |
27 // @type {print_preview.Rect} A rectangle describing the four margins. | |
28 marginsUIPair.marginsRectangle = null; | |
29 // @type {print_preview.MarginLine} The line representing the margin. | |
30 marginsUIPair.line_ = new print_preview.MarginLine(groupName); | |
31 // @type {print_preview.MarginTextbox} The textbox corresponding to this | |
32 // margin. | |
33 marginsUIPair.box_ = new print_preview.MarginTextbox(groupName); | |
34 // @type {print_preview.Point} The point where mousedown occured within the | |
35 // draggable area with respect the top-left corner of |this|. | |
36 marginsUIPair.mousePointerOffset = null; | |
37 // @type {print_preview.Point} The position of the origin before any | |
38 // dragging in progress occured. | |
39 marginsUIPair.originBeforeDragging = null; | |
40 | |
41 marginsUIPair.appendChild(marginsUIPair.line_); | |
42 marginsUIPair.appendChild(marginsUIPair.box_); | |
43 | |
44 marginsUIPair.addEventListeners_(); | |
45 return marginsUIPair; | |
46 } | |
47 | |
48 MarginsUIPair.CSS_CLASS = 'margins-ui-pair'; | |
49 // Width of the clickable region around each margin line in screen pixels. | |
50 MarginsUIPair.CLICKABLE_REGION = 20; | |
51 | |
52 MarginsUIPair.prototype = { | |
53 __proto__: HTMLDivElement.prototype, | |
54 | |
55 /** | |
56 * Updates the state. | |
57 */ | |
58 update: function(marginsRectangle, value, valueLimit, keepDisplayedValue, | |
59 valueLimitInPercent) { | |
60 this.marginsRectangle = marginsRectangle; | |
61 this.valueLimitInPercent = valueLimitInPercent; | |
62 this.rectangle = this.getCoordinates_(this.marginsRectangle); | |
63 this.box_.update(value, valueLimit, keepDisplayedValue); | |
64 }, | |
65 | |
66 /** | |
67 * Draws |this| based on the state. | |
68 */ | |
69 draw: function() { | |
70 this.drawDraggableArea_(); | |
71 this.line_.draw(); | |
72 this.box_.draw(); | |
73 }, | |
74 | |
75 /** | |
76 * Draws the area that can be clicked in order to start dragging. | |
77 * @private | |
78 */ | |
79 drawDraggableArea_: function() { | |
80 var width = previewArea.pdfPlugin_.offsetWidth; | |
81 var height = previewArea.pdfPlugin_.offsetHeight; | |
82 | |
83 this.style.left = Math.round(this.rectangle.x * width) + 'px'; | |
84 this.style.top = Math.round(this.rectangle.y * height) + 'px'; | |
85 this.style.width = Math.round(this.rectangle.width * width) + 'px'; | |
86 this.style.height = Math.round(this.rectangle.height * height) + 'px'; | |
87 }, | |
88 | |
89 /** | |
90 * Calculates the coordinates and size of |this|. | |
91 * @param {print_preview.Rect} marginsRectangle A rectangle describing the | |
92 * selected margins values in percentages. | |
93 * @private | |
94 */ | |
95 getCoordinates_: function(marginsRectangle) { | |
96 var pageLocation = previewArea.getPageLocationNormalized(); | |
97 var totalWidth = previewArea.pdfPlugin_.offsetWidth; | |
98 var totalHeight = previewArea.pdfPlugin_.offsetHeight; | |
99 var offsetY = (MarginsUIPair.CLICKABLE_REGION / 2) / totalHeight; | |
100 var offsetX = (MarginsUIPair.CLICKABLE_REGION / 2) / totalWidth; | |
101 | |
102 if (this.isTop_()) { | |
103 var lineCoordinates = new print_preview.Rect( | |
104 pageLocation.x, | |
105 marginsRectangle.y - offsetY, | |
106 pageLocation.width, | |
107 MarginsUIPair.CLICKABLE_REGION / totalHeight); | |
108 } else if (this.isBottom_()) { | |
109 var lineCoordinates = new print_preview.Rect( | |
110 pageLocation.x, | |
111 marginsRectangle.bottom - offsetY, | |
112 pageLocation.width, | |
113 MarginsUIPair.CLICKABLE_REGION / totalHeight); | |
114 } else if (this.isRight_()) { | |
115 var lineCoordinates = new print_preview.Rect( | |
116 marginsRectangle.right - offsetX, | |
117 pageLocation.y, | |
118 MarginsUIPair.CLICKABLE_REGION / totalWidth, | |
119 pageLocation.height); | |
120 } else if (this.isLeft_()) { | |
121 var lineCoordinates = new print_preview.Rect( | |
122 marginsRectangle.x - offsetX, | |
123 pageLocation.y, | |
124 MarginsUIPair.CLICKABLE_REGION / totalWidth, | |
125 pageLocation.height); | |
126 } | |
127 return lineCoordinates; | |
128 }, | |
129 | |
130 /** | |
131 * @return {boolean} True if |this| refers to the top margin. | |
132 * @private | |
133 */ | |
134 isTop_: function() { | |
135 return this.marginGroup == print_preview.MarginSettings.TOP_GROUP; | |
136 }, | |
137 | |
138 /** | |
139 * @return {boolean} True if |this| refers to the bottom margin. | |
140 * @private | |
141 */ | |
142 isBottom_: function() { | |
143 return this.marginGroup == print_preview.MarginSettings.BOTTOM_GROUP; | |
144 }, | |
145 | |
146 /** | |
147 * @return {boolean} True if |this| refers to the left margin. | |
148 * @private | |
149 */ | |
150 isLeft_: function() { | |
151 return this.marginGroup == print_preview.MarginSettings.LEFT_GROUP; | |
152 }, | |
153 | |
154 /** | |
155 * @return {boolean} True if |this| refers to the bottom margin. | |
156 * @private | |
157 */ | |
158 isRight_: function() { | |
159 return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP; | |
160 }, | |
161 | |
162 /** | |
163 * Adds event listeners for events related to dragging. | |
164 */ | |
165 addEventListeners_: function() { | |
166 this.onmousedown = this.onMouseDown_.bind(this); | |
167 }, | |
168 | |
169 /** | |
170 * Executes whenever a mousedown event occurs on |this| or its child nodes. | |
171 * @parameter {MouseEvent} e The event that occured. | |
172 */ | |
173 onMouseDown_: function(e) { | |
174 if (e.target != this) | |
175 return; | |
176 var point = print_preview.MarginsUI.convert({x: e.x, y: e.y}); | |
177 this.originBeforeDragging = | |
178 new print_preview.Point(this.offsetLeft, this.offsetTop); | |
179 | |
180 this.mousePointerOffset = | |
181 { x: point.x - this.offsetLeft, y: point.y - this.offsetTop }; | |
182 cr.dispatchSimpleEvent(this, 'MarginsLineMouseDown'); | |
183 }, | |
184 | |
185 /** | |
186 * Moves |this| including all its children to |point|. | |
187 * @param {print_preview.Point} point The point where |this| should be | |
188 * moved. | |
189 */ | |
190 moveTo: function(point) { | |
191 if (this.isTop_() || this.isBottom_()) | |
192 this.style.top = point.y - this.mousePointerOffset.y + 'px'; | |
193 else | |
194 this.style.left = point.x - this.mousePointerOffset.x + 'px'; | |
195 }, | |
196 | |
197 /** | |
198 * @param {print_preview.Point} rhs The point to compare with. | |
199 * @return {number} The horizontal or vertical displacement in pixels | |
200 * between |this.originBeforeDragging| and |rhs|. | |
201 */ | |
202 getDragDisplacementFrom: function(rhs) { | |
203 var dragDisplacement = 0; | |
204 if (this.isTop_() || this.isBottom_()) { | |
205 dragDisplacement = (rhs.y - this.originBeforeDragging.y - | |
206 this.mousePointerOffset.y) / previewArea.height; | |
207 } else { | |
208 dragDisplacement = (rhs.x - this.originBeforeDragging.x - | |
209 this.mousePointerOffset.x) / previewArea.width; | |
210 } | |
211 | |
212 if (this.isBottom_() || this.isRight_()) | |
213 dragDisplacement *= -1; | |
Evan Stade
2011/10/14 21:58:36
my point was that it seems like if you take the bo
dpapad
2011/10/14 23:14:38
Done.
| |
214 return dragDisplacement; | |
215 }, | |
216 | |
217 /** | |
218 * Updates |this| while dragging is in progress. Takes care of rejecting | |
219 * invalid margin values. | |
220 * @param {number} dragDeltaInPoints The difference in points between the | |
221 * currently applied margin and the margin indicated by | |
222 * |destinationPoint|. | |
223 * @param {print_preview.Point} destinationPoint The point where the margin | |
224 * line should be drawn if |dragDeltaInPoints| is applied. | |
225 */ | |
226 updateWhileDragging: function(dragDeltaInPoints, destinationPoint) { | |
227 this.box_.updateWhileDragging(dragDeltaInPoints); | |
228 var validity = this.box_.validateDelta(dragDeltaInPoints); | |
229 if (validity == 0) | |
230 this.moveTo(destinationPoint); | |
231 else if (validity == -1) | |
232 this.snapToMinValue_(); | |
233 else if (validity == 1) | |
234 this.snapToMaxValue_(); | |
235 }, | |
236 | |
237 /** | |
238 * Snaps |this| to the minimum allowed margin value (0). Happens whenever | |
239 * the user drags the margin line to a smaller value than the minimum | |
240 * allowed. | |
241 * @private | |
242 */ | |
243 snapToMinValue_: function() { | |
244 var pageInformation = previewArea.getPageLocationNormalized(); | |
245 var newMarginsRectangle = this.marginsRectangle.clone(); | |
246 if (this.isTop_()) { | |
247 newMarginsRectangle.y = pageInformation.y; | |
248 } else if (this.isLeft_()) { | |
249 newMarginsRectangle.x = pageInformation.x; | |
250 } else if (this.isRight_()) { | |
251 newMarginsRectangle.x = pageInformation.x; | |
252 newMarginsRectangle.width = pageInformation.width; | |
253 } else if (this.isBottom_()) { | |
254 newMarginsRectangle.y = pageInformation.y; | |
255 newMarginsRectangle.height = pageInformation.height; | |
256 } | |
257 | |
258 this.rectangle = this.getCoordinates_(newMarginsRectangle); | |
259 this.drawDraggableArea_(); | |
260 }, | |
261 | |
262 /** | |
263 * Snaps |this| to the maximum allowed margin value. Happens whenever | |
264 * the user drags the margin line to a larger value than the maximum | |
265 * allowed. | |
266 * @private | |
267 */ | |
268 snapToMaxValue_: function() { | |
269 var newMarginsRectangle = this.marginsRectangle.clone(); | |
270 | |
271 if (this.isTop_()) { | |
272 newMarginsRectangle.y = this.valueLimitInPercent; | |
273 } else if (this.isLeft_()) { | |
274 newMarginsRectangle.x = this.valueLimitInPercent; | |
275 } else if (this.isRight_()) { | |
276 newMarginsRectangle.x = 0; | |
277 newMarginsRectangle.width = this.valueLimitInPercent; | |
278 } else if (this.isBottom_()) { | |
279 newMarginsRectangle.y = 0; | |
280 newMarginsRectangle.height = this.valueLimitInPercent; | |
281 } | |
282 | |
283 this.rectangle = this.getCoordinates_(newMarginsRectangle); | |
284 this.drawDraggableArea_(); | |
285 }, | |
286 | |
Evan Stade
2011/10/14 21:58:36
don't need this newline
dpapad
2011/10/14 23:14:38
Done.
| |
287 }; | |
288 | |
289 return { | |
290 MarginsUIPair: MarginsUIPair | |
291 }; | |
292 }); | |
OLD | NEW |