7 * x, y, zl URL query parameters. |
7 * x, y, zl URL query parameters. |
8 * |
8 * |
9 * x, y - the pixel coordinates of the top-left corner |
9 * x, y - the pixel coordinates of the top-left corner |
10 * XXX: these are scaled from the image coordinates by the zoom level |
10 * XXX: these are scaled from the image coordinates by the zoom level |
11 * |
11 * |
12 * zl - the zoom level used, out < zl < in. |
12 * zl - the zoom level used, in < zl < out. |
13 * The image pixels are scaled by powers-of-two, so a 256x256 tile at zl=-1 shows a 512x512 area of the |
13 * The image pixels are scaled by powers-of-two, so a 256x256 tile at zl=1 shows a 512x512 area of the |
14 * 1:1 image. |
14 * 1:1 image. |
15 */ |
15 */ |
16 var Source = Class.create({ |
16 var Source = Class.create({ |
17 initialize: function (path, tile_width, tile_height, zoom_min, zoom_max, img_width, img_height) { |
17 initialize: function (path, tile_width, tile_height, zoom_min, zoom_max, img_width, img_height) { |
18 this.path = path; |
18 this.path = path; |
232 if (ev.preventDefault) |
232 if (ev.preventDefault) |
233 ev.preventDefault(); |
233 ev.preventDefault(); |
234 |
234 |
235 // delta > 0 : scroll up, zoom in |
235 // delta > 0 : scroll up, zoom in |
236 // delta < 0 : scroll down, zoom out |
236 // delta < 0 : scroll down, zoom out |
237 delta = delta < 0 ? -1 : 1; |
237 delta = delta < 0 ? 1 : -1; |
238 |
238 |
239 // Firefox's DOMMouseEvent's pageX/Y attributes are broken. layerN is for mozilla, offsetN for IE, seems to work |
239 // Firefox's DOMMouseEvent's pageX/Y attributes are broken. layerN is for mozilla, offsetN for IE, seems to work |
240 |
240 |
241 // absolute location of the cursor |
241 // absolute location of the cursor |
242 var x = parseInt(ev.target.style.left) + (ev.layerX ? ev.layerX : ev.offsetX); |
242 var x = parseInt(ev.target.style.left) + (ev.layerX ? ev.layerX : ev.offsetX); |
313 }, |
313 }, |
314 |
314 |
315 /** Zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the top left */ |
315 /** Zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the top left */ |
316 zoom_to: function (x, y, delta) { |
316 zoom_to: function (x, y, delta) { |
317 return this.zoom_scaled( |
317 return this.zoom_scaled( |
318 scaleByZoomDelta(x, delta), |
318 scaleByZoomDelta(x, -delta), |
319 scaleByZoomDelta(y, delta), |
319 scaleByZoomDelta(y, -delta), |
320 delta |
320 delta |
321 ); |
321 ); |
322 }, |
322 }, |
323 |
323 |
324 /** Zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the center */ |
324 /** Zoom à la delta such that the given (current) absolute (x, y) co-ordinates will be at the center */ |
325 zoom_center_to: function (x, y, delta) { |
325 zoom_center_to: function (x, y, delta) { |
326 return this.zoom_scaled( |
326 return this.zoom_scaled( |
327 scaleByZoomDelta(x, delta) - this.center_offset_x, |
327 scaleByZoomDelta(x, -delta) - this.center_offset_x, |
328 scaleByZoomDelta(y, delta) - this.center_offset_y, |
328 scaleByZoomDelta(y, -delta) - this.center_offset_y, |
329 delta |
329 delta |
330 ); |
330 ); |
331 }, |
331 }, |
332 |
332 |
333 /** Zoom à la delta, keeping the view centered */ |
333 /** Zoom à la delta, keeping the view centered */ |
339 ); |
339 ); |
340 }, |
340 }, |
341 |
341 |
342 /** Zoom in one level, keeping the view centered */ |
342 /** Zoom in one level, keeping the view centered */ |
343 zoom_in: function () { |
343 zoom_in: function () { |
344 return this.zoom_centered(+1); |
344 return this.zoom_centered(-1); |
345 }, |
345 }, |
346 |
346 |
347 /** Zoom out one level, keeping the view centered */ |
347 /** Zoom out one level, keeping the view centered */ |
348 zoom_out: function () { |
348 zoom_out: function () { |
349 return this.zoom_centered(-1); |
349 return this.zoom_centered(+1); |
350 }, |
350 }, |
351 |
351 |
352 /** Center the view on the given coords, and zoom in, if possible */ |
352 /** Center the view on the given coords, and zoom in, if possible */ |
353 center_and_zoom_in: function (cx, cy) { |
353 center_and_zoom_in: function (cx, cy) { |
354 // try and zoom in |
354 // try and zoom in |
355 if (this.update_zoom(1)) { |
355 if (this.update_zoom(-1)) { |
356 // scaled coords |
356 // scaled coords |
357 cx = scaleByZoomDelta(cx, 1); |
357 cx = scaleByZoomDelta(cx, 1); |
358 cy = scaleByZoomDelta(cy, 1); |
358 cy = scaleByZoomDelta(cy, 1); |
359 } |
359 } |
360 |
360 |
546 * Update any zl-dependant UI elements |
546 * Update any zl-dependant UI elements |
547 */ |
547 */ |
548 update_zoom_ui: function () { |
548 update_zoom_ui: function () { |
549 // deactivate zoom-in button if zoomed in |
549 // deactivate zoom-in button if zoomed in |
550 if (this.btn_zoom_in) |
550 if (this.btn_zoom_in) |
551 (this.zoom_layer.level >= this.source.zoom_max) ? this.btn_zoom_in.disable() : this.btn_zoom_in.enable(); |
551 (this.zoom_layer.level <= this.source.zoom_min) ? this.btn_zoom_in.disable() : this.btn_zoom_in.enable(); |
552 |
552 |
553 // deactivate zoom-out button if zoomed out |
553 // deactivate zoom-out button if zoomed out |
554 if (this.btn_zoom_out) |
554 if (this.btn_zoom_out) |
555 (this.zoom_layer.level <= this.source.zoom_min) ? this.btn_zoom_out.disable() : this.btn_zoom_out.enable(); |
555 (this.zoom_layer.level >= this.source.zoom_max) ? this.btn_zoom_out.disable() : this.btn_zoom_out.enable(); |
556 |
556 |
557 // link-to-image |
557 // link-to-image |
558 this.update_image_link(); |
558 this.update_image_link(); |
559 }, |
559 }, |
560 |
560 |
630 * when viewed with the given zoom level. |
630 * when viewed with the given zoom level. |
631 * |
631 * |
632 * For zoom levels different than this layer's level, this will resize the tiles! |
632 * For zoom levels different than this layer's level, this will resize the tiles! |
633 */ |
633 */ |
634 update_tiles: function (zoom_level) { |
634 update_tiles: function (zoom_level) { |
635 var zd = zoom_level - this.level; |
635 var zd = this.level - zoom_level; |
636 |
636 |
637 // desired tile size |
637 // desired tile size |
638 var tw = scaleByZoomDelta(this.source.tile_width, zd); |
638 var tw = scaleByZoomDelta(this.source.tile_width, zd); |
639 var th = scaleByZoomDelta(this.source.tile_height, zd); |
639 var th = scaleByZoomDelta(this.source.tile_height, zd); |
640 |
640 |
654 ts.left = tw * t.__col; |
654 ts.left = tw * t.__col; |
655 } |
655 } |
656 } |
656 } |
657 }); |
657 }); |
658 |
658 |
659 // scale the given co-ordinate by a zoom delta. If we zoom in (dz > 0), n will become larger, and if we zoom |
659 // scale the given co-ordinate by a zoom delta. If we zoom out (dz > 0), n will become larger, and if we zoom |
660 // out (dz < 0), n will become smaller. |
660 // in (dz < 0), n will become smaller. |
661 function scaleByZoomDelta (n, dz) { |
661 function scaleByZoomDelta (n, dz) { |
662 if (dz > 0) |
662 if (dz > 0) |
663 return n << dz; |
663 return n << dz; |
664 else |
664 else |
665 return n >> -dz; |
665 return n >> -dz; |