|
1 // A source of tile images of a specific width/height, zoom level range, and some other attributes |
|
2 var Source = Class.create({ |
|
3 initialize: function (path, tile_width, tile_height, zoom_min, zoom_max) { |
|
4 // relative path? |
|
5 if (path.substring(0, 1) != "/") { |
|
6 // current document path |
|
7 _path = document.location.pathname; |
|
8 |
|
9 // as relative |
|
10 _path = _path.substring(0, _path.lastIndexOf("/")); |
|
11 |
|
12 // conact to make absolute path |
|
13 path = _path + "/" + path |
|
14 |
|
15 } |
|
16 |
|
17 // store |
|
18 this.path = path; |
|
19 this.tile_width = tile_width; |
|
20 this.tile_height = tile_height; |
|
21 this.zoom_min = zoom_min; |
|
22 this.zoom_max = zoom_max; |
|
23 |
|
24 this.refresh = false; |
|
25 this.opt_key = this.opt_value = null; |
|
26 }, |
|
27 |
|
28 // build a URL for the given tile image |
|
29 build_url: function (col, row, zl, sw, sh) { |
|
30 // two-bit hash (0-4) based on the (col, row) |
|
31 var hash = ( (col % 2) << 1 | (row % 2) ) + 1; |
|
32 |
|
33 // the subdomain to use |
|
34 var subdomain = ""; |
|
35 |
|
36 if (0) |
|
37 subdomain = "tile" + hash + "."; |
|
38 |
|
39 // the (x, y) co-ordinates |
|
40 var x = col * this.tile_width; |
|
41 var y = row * this.tile_height; |
|
42 |
|
43 var url = "http://" + subdomain + document.location.host + this.path + "?x=" + x + "&y=" + y + "&z=" + zl + "&sw=" + sw + "&sh=" + sh; |
|
44 |
|
45 if (this.refresh) |
|
46 url += "&ts=" + new Date().getTime(); |
|
47 |
|
48 if (this.opt_key && this.opt_value) |
|
49 url += "&" + this.opt_key + "=" + this.opt_value; |
|
50 |
|
51 return url; |
|
52 }, |
|
53 }); |
|
54 |
|
55 // a viewport that contains a substrate which contains several zoom layers which contain many tiles |
|
56 var Viewport = Class.create({ |
|
57 initialize: function (source, viewport_id) { |
|
58 this.source = source; |
|
59 |
|
60 this.id = viewport_id; |
|
61 this.div = $(viewport_id); |
|
62 this.substrate = this.div.down("div.substrate"); |
|
63 |
|
64 // the stack of zoom levels |
|
65 this.zoom_layers = []; |
|
66 |
|
67 // pre-populate the stack |
|
68 for (var zoom_level = source.zoom_min; zoom_level <= source.zoom_max; zoom_level++) { |
|
69 var zoom_layer = new ZoomLayer(source, zoom_level); |
|
70 |
|
71 this.substrate.appendChild(zoom_layer.div); |
|
72 this.zoom_layers[zoom_level] = zoom_layer; |
|
73 } |
|
74 |
|
75 // make the substrate draggable |
|
76 this.draggable = new Draggable(this.substrate, { |
|
77 onStart: this.on_scroll_start.bind(this), |
|
78 onDrag: this.on_scroll_move.bind(this), |
|
79 onEnd: this.on_scroll_end.bind(this), |
|
80 }); |
|
81 |
|
82 // event handlers |
|
83 Event.observe(this.substrate, "dblclick", this.on_dblclick.bindAsEventListener(this)); |
|
84 Event.observe(this.substrate, "mousewheel", this.on_mousewheel.bindAsEventListener(this)); |
|
85 Event.observe(this.substrate, "DOMMouseScroll", this.on_mousewheel.bindAsEventListener(this)); // mozilla |
|
86 Event.observe(document, "resize", this.on_resize.bindAsEventListener(this)); |
|
87 |
|
88 // load initial view |
|
89 this.update_size(); |
|
90 |
|
91 // this sets the scroll offsets, zoom level, and loads the tiles |
|
92 this.zoom_to(0, 0, 0); |
|
93 }, |
|
94 |
|
95 /* event handlers */ |
|
96 |
|
97 // window resized |
|
98 on_resize: function (ev) { |
|
99 this.update_size(); |
|
100 this.update_tiles(); |
|
101 }, |
|
102 |
|
103 // double-click handler |
|
104 on_dblclick: function (ev) { |
|
105 var offset = this.event_offset(ev); |
|
106 |
|
107 this.zoom_center_to( |
|
108 this.scroll_x + offset.x, |
|
109 this.scroll_y + offset.y, |
|
110 1 // zoom in |
|
111 ); |
|
112 }, |
|
113 |
|
114 // mousewheel handler |
|
115 on_mousewheel: function (ev) { |
|
116 // this works in very weird ways, so it's based on code from http://adomas.org/javascript-mouse-wheel/ |
|
117 // (it didn't include any license, so this is written out manually) |
|
118 var delta; |
|
119 |
|
120 // this is browser-dependant... |
|
121 if (ev.wheelDelta) { |
|
122 // IE + Opera |
|
123 delta = ev.wheelDelta; |
|
124 |
|
125 if (window.opera) { |
|
126 // Opera, but apparently not newer versions? |
|
127 //delta = -delta; |
|
128 } |
|
129 |
|
130 } else if (ev.detail) { |
|
131 // Mozilla |
|
132 delta = -ev.detail; |
|
133 |
|
134 } else { |
|
135 // mousewheel not supported... |
|
136 return; |
|
137 |
|
138 } |
|
139 |
|
140 // don't scroll the page |
|
141 if (ev.preventDefault) |
|
142 ev.preventDefault(); |
|
143 |
|
144 // delta > 0 : scroll up, zoom in |
|
145 // delta < 0 : scroll down, zoom out |
|
146 delta = delta < 0 ? -1 : 1; |
|
147 |
|
148 // Firefox's DOMMouseEvent's pageX/Y attributes are broken. layerN is for mozilla, offsetN for IE, seems to work |
|
149 |
|
150 // absolute location of the cursor |
|
151 var x = parseInt(ev.target.style.left) + (ev.layerX ? ev.layerX : ev.offsetX); |
|
152 var y = parseInt(ev.target.style.top) + (ev.layerY ? ev.layerY : ev.offsetY); |
|
153 |
|
154 // zoom \o/ |
|
155 this.zoom_center_to(x, y, delta); |
|
156 }, |
|
157 |
|
158 // substrate scroll was started |
|
159 on_scroll_start: function (ev) { |
|
160 |
|
161 }, |
|
162 |
|
163 // substrate was scrolled, update scroll_{x,y}, and then update tiles after 100ms |
|
164 on_scroll_move: function (ev) { |
|
165 this.update_scroll(); |
|
166 this.update_after_timeout(); |
|
167 }, |
|
168 |
|
169 // substrate scroll was ended, update tiles now |
|
170 on_scroll_end: function (ev) { |
|
171 this.update_now(); |
|
172 }, |
|
173 |
|
174 /* get state */ |
|
175 |
|
176 // return the absolute (x, y) coords of the given event inside the viewport |
|
177 event_offset: function (ev) { |
|
178 var offset = this.div.cumulativeOffset(); |
|
179 |
|
180 return { |
|
181 x: ev.pointerX() - offset.left, |
|
182 y: ev.pointerY() - offset.top |
|
183 }; |
|
184 }, |
|
185 |
|
186 /* modify state */ |
|
187 |
|
188 // scroll the view to place the given absolute (x, y) co-ordinate at the top left |
|
189 scroll_to: function (x, y) { |
|
190 // update it via the style |
|
191 this.substrate.style.top = "-" + y + "px"; |
|
192 this.substrate.style.left = "-" + x + "px"; |
|
193 |
|
194 // update these as well |
|
195 this.scroll_x = x; |
|
196 this.scroll_y = y; |
|
197 }, |
|
198 |
|
199 // scroll the view to place the given absolute (x, y) co-ordinate at the center |
|
200 scroll_center_to: function (x, y) { |
|
201 return this.scroll_to( |
|
202 x - this.center_offset_x, |
|
203 y - this.center_offset_y |
|
204 ); |
|
205 }, |
|
206 |
|
207 // zoom à la delta such that the given (zoomed) absolute (x, y) co-ordinates will be at the top left |
|
208 zoom_scaled: function (x, y, delta) { |
|
209 if (!this.update_zoom(delta)) |
|
210 return false; |
|
211 |
|
212 // scroll to the new position |
|
213 this.scroll_to(x, y); |
|
214 |
|
215 // update view |
|
216 // XXX: ... |
|
217 this.update_after_timeout(); |
|
218 |
|
219 return true; |
|
220 }, |
|
221 |
|
222 // zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the top left |
|
223 zoom_to: function (x, y, delta) { |
|
224 return this.zoom_scaled( |
|
225 scaleByZoomDelta(x, delta), |
|
226 scaleByZoomDelta(y, delta), |
|
227 delta |
|
228 ); |
|
229 }, |
|
230 |
|
231 // zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the center |
|
232 zoom_center_to: function (x, y, delta) { |
|
233 return this.zoom_scaled( |
|
234 scaleByZoomDelta(x, delta) - this.center_offset_x, |
|
235 scaleByZoomDelta(y, delta) - this.center_offset_y, |
|
236 delta |
|
237 ); |
|
238 }, |
|
239 |
|
240 |
|
241 /* update view/state to reflect reality */ |
|
242 |
|
243 // figure out the viewport dimensions |
|
244 update_size: function () { |
|
245 this.view_width = this.div.getWidth(); |
|
246 this.view_height = this.div.getHeight(); |
|
247 |
|
248 this.center_offset_x = Math.floor(this.view_width / 2); |
|
249 this.center_offset_y = Math.floor(this.view_height / 2); |
|
250 }, |
|
251 |
|
252 // figure out the scroll offset as absolute pixel co-ordinates at the top left |
|
253 update_scroll: function() { |
|
254 this.scroll_x = -parseInt(this.substrate.style.left); |
|
255 this.scroll_y = -parseInt(this.substrate.style.top); |
|
256 }, |
|
257 |
|
258 // wiggle the ZoomLevels around to match the current zoom level |
|
259 update_zoom: function(delta) { |
|
260 if (!this.zoom_layer) { |
|
261 // first zoom operation |
|
262 |
|
263 // is the new zoom level valid? |
|
264 if (!this.zoom_layers[delta]) |
|
265 return false; |
|
266 |
|
267 // set the zoom layyer |
|
268 this.zoom_layer = this.zoom_layers[delta]; |
|
269 |
|
270 // enable it |
|
271 this.zoom_layer.enable(11); |
|
272 |
|
273 // no need to .update_tiles or anything like that |
|
274 |
|
275 } else { |
|
276 // is the new zoom level valid? |
|
277 if (!this.zoom_layers[this.zoom_layer.level + delta]) |
|
278 return false; |
|
279 |
|
280 var zoom_old = this.zoom_layer; |
|
281 var zoom_new = this.zoom_layers[this.zoom_layer.level + delta]; |
|
282 |
|
283 // XXX: ugly hack |
|
284 if (this.zoom_timer) { |
|
285 clearTimeout(this.zoom_timer); |
|
286 this.zoom_timer = null; |
|
287 } |
|
288 |
|
289 // get other zoom layers out of the way |
|
290 this.zoom_layers.each(function (zl) { |
|
291 zl.disable(); |
|
292 }); |
|
293 |
|
294 // update the zoom layer |
|
295 this.zoom_layer = zoom_new; |
|
296 |
|
297 // apply new z-indexes, preferr the current one over the new one |
|
298 zoom_new.enable(11); |
|
299 zoom_old.enable(10); |
|
300 |
|
301 // resize the tiles in the two zoom layers |
|
302 zoom_new.update_tiles(zoom_new.level); |
|
303 zoom_old.update_tiles(zoom_old.level); |
|
304 |
|
305 // XXX: ugly hack |
|
306 this.zoom_timer = setTimeout(function () { zoom_old.disable()}, 1000); |
|
307 } |
|
308 |
|
309 return true; |
|
310 }, |
|
311 |
|
312 // ensure that all tiles that are currently visible are loaded |
|
313 update_tiles: function() { |
|
314 // short names for some vars... |
|
315 var x = this.scroll_x; |
|
316 var y = this.scroll_y; |
|
317 var sw = this.view_width; |
|
318 var sh = this.view_height; |
|
319 var tw = this.source.tile_width; |
|
320 var th = this.source.tile_height; |
|
321 var zl = this.zoom_layer.level; |
|
322 |
|
323 // figure out what set of columns are visible |
|
324 var start_col = Math.max(0, Math.floor(x / tw)); |
|
325 var start_row = Math.max(0, Math.floor(y / th)); |
|
326 var end_col = Math.floor((x + sw) / tw); |
|
327 var end_row = Math.floor((y + sh) / th); |
|
328 |
|
329 // loop through all those tiles |
|
330 for (var col = start_col; col <= end_col; col++) { |
|
331 for (var row = start_row; row <= end_row; row++) { |
|
332 // the tile's id |
|
333 var id = "tile_" + this.zoom_layer.level + "_" + col + "_" + row; |
|
334 |
|
335 // does the element exist already? |
|
336 var t = $(id); |
|
337 |
|
338 if (!t) { |
|
339 // build a new tile |
|
340 t = Builder.node("img", { |
|
341 src: this.source.build_url(col, row, zl, sw, sh), |
|
342 id: id, |
|
343 title: "(" + col + ", " + row + ")", |
|
344 // style set later |
|
345 } |
|
346 ); |
|
347 |
|
348 // set the CSS style stuff |
|
349 t.style.top = th * row; |
|
350 t.style.left = tw * col; |
|
351 t.style.display = "none"; |
|
352 |
|
353 // wait for it to load |
|
354 Event.observe(t, "load", _tile_loaded.bindAsEventListener(t)); |
|
355 |
|
356 // store the col/row |
|
357 t.__col = col; |
|
358 t.__row = row; |
|
359 |
|
360 // add it to the zoom layer |
|
361 this.zoom_layer.add_tile(t); |
|
362 |
|
363 } else if (this.source.reload) { |
|
364 // force the tile to reload |
|
365 touch_tile(t, col, row); |
|
366 |
|
367 } |
|
368 } |
|
369 } |
|
370 |
|
371 /* XXX: fixme |
|
372 // update the link-to-this-page thing |
|
373 document.location.hash = "#goto_" + (x + g_w_half) + ":" + g_w + "_" + (y + g_h_half) + ":" + g_h + "_" + g_z; |
|
374 */ |
|
375 |
|
376 }, |
|
377 |
|
378 // do update_tiles after 100ms, unless we are called again |
|
379 update_after_timeout: function () { |
|
380 this._update_idle = false; |
|
381 |
|
382 if (this._update_timeout) |
|
383 clearTimeout(this._update_timeout); |
|
384 |
|
385 this._update_timeout = setTimeout(this._update_timeout_trigger.bind(this), 100); |
|
386 }, |
|
387 |
|
388 _update_timeout_trigger: function () { |
|
389 this._update_idle = true; |
|
390 |
|
391 this.update_tiles(); |
|
392 }, |
|
393 |
|
394 // call update_tiles if it hasn't been called due to update_after_timeout |
|
395 update_now: function () { |
|
396 if (this._update_timeout) |
|
397 clearTimeout(this._update_timeout); |
|
398 |
|
399 if (!this._update_idle) |
|
400 this.update_tiles(); |
|
401 }, |
|
402 |
|
403 }); |
|
404 |
|
405 // used by Viewport.update_tiles to make a tile visible after it has loaded |
|
406 function _tile_loaded (ev) { |
|
407 this.style.display = "block"; |
|
408 } |
|
409 |
|
410 // a zoom layer containing the tiles for one zoom level |
|
411 var ZoomLayer = Class.create({ |
|
412 initialize: function (source, zoom_level) { |
|
413 this.source = source; |
|
414 this.level = zoom_level; |
|
415 this.div = Builder.node("div", { id: "zl_" + this.level, style: "position: relative; display: none;"}); |
|
416 |
|
417 // our tiles |
|
418 this.tiles = []; |
|
419 }, |
|
420 |
|
421 // add a tile to this zoom layer |
|
422 add_tile: function (tile) { |
|
423 this.div.appendChild(tile); |
|
424 this.tiles.push(tile); |
|
425 }, |
|
426 |
|
427 // make this zoom layer visible with the given z-index |
|
428 enable: function (z_index) { |
|
429 this.div.style.zIndex = z_index; |
|
430 this.div.show(); |
|
431 }, |
|
432 |
|
433 // hide this zoom layer |
|
434 disable: function (z_index) { |
|
435 this.div.hide(); |
|
436 }, |
|
437 |
|
438 // update the tiles in this zoom layer so that they are in the correct position and of the correct size when |
|
439 // viewed with the given zoom level |
|
440 update_tiles: function (zoom_level) { |
|
441 var zd = zoom_level - this.level; |
|
442 |
|
443 var tw = scaleByZoomDelta(this.source.tile_width, zd); |
|
444 var th = scaleByZoomDelta(this.source.tile_height, zd); |
|
445 |
|
446 var tiles = this.tiles; |
|
447 var tiles_len = tiles.length; |
|
448 var t, ts; |
|
449 |
|
450 for (var i = 0; i < tiles_len; i++) { |
|
451 t = tiles[i]; |
|
452 ts = t.style; |
|
453 |
|
454 ts.width = tw; |
|
455 ts.height = th; |
|
456 ts.top = th*t.__row; |
|
457 ts.left = tw*t.__col; |
|
458 } |
|
459 }, |
|
460 |
|
461 |
|
462 |
|
463 }); |
|
464 |
|
465 // scale the given co-ordinate by a zoom delta. If we zoom in (dz > 0), n will become larger, and if we zoom |
|
466 // out (dz < 0), n will become smaller. |
|
467 function scaleByZoomDelta (n, dz) { |
|
468 if (dz > 0) |
|
469 return n << dz; |
|
470 else |
|
471 return n >> -dz; |
|
472 } |
|
473 |