1

// A source of tile images of a specific width/height, zoom level range, and some other attributes

     2

     3

/**

     4

 * A source of image tiles.

     5

 *

     6

 * The image source is expected to serve fixed-size tiles (tile_width × tile_height) of image data based on the 

     7

 * x, y, zl URL query parameters. 

     8

 *

     9

 *  x, y        - the pixel coordinates of the top-left corner

    10

 *                XXX: these are scaled from the image coordinates by the zoom level

    11

 *

    12

 *  zl          - the zoom level used, out < zl < in.

    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.

    15

 */

    16

var Source = Class.create({

    17

    initialize: function (path, tile_width, tile_height, zoom_min, zoom_max, img_width, img_height) {

    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

        this.img_width = img_width;

    24

        this.img_height = img_height;

    25

    26

        this.refresh = false;

    27

        this.opt_key = this.opt_value = null;

    28

    },

    29

    30

    /**

    31

     * Return an URL representing the tile at the given viewport (row, col) at the given zl.

    32

     *

    33

     * XXX: sw/sh = screen-width/height, used to choose an appropriate output size for dynamic image sources...

    34

     */

    35

    build_url: function (col, row, zl /*, sw, sh */) {

    36

        // XXX: distribute tile requests across tile*.foo.bar

    37

        if (0) {

    38

            // two-bit hash (0-4) based on the (col, row)

    39

            var hash = ( (col % 2) << 1 | (row % 2) ) + 1;

    40

    41

            // the subdomain to use

    42

            var subdomain = "";

    43

    44

            subdomain = "tile" + hash + ".";

    45

        }

    46

    47

        // the (x, y) co-ordinates

    48

        var x = col * this.tile_width;

    49

        var y = row * this.tile_height;

    50

    51

        var url = this.path + "?x=" + x + "&y=" + y + "&zl=" + zl; // + "&sw=" + sw + "&sh=" + sh;

    52

    53

        // refresh the tile each time it is loaded?

    54

        if (this.refresh)

    55

            url += "&ts=" + new Date().getTime();

    56

    57

        // XXX: additional parameters, not used

    58

        if (this.opt_key && this.opt_value)

    59

            url += "&" + this.opt_key + "=" + this.opt_value;

    60

    61

        return url;

    62

    },

    63

    64

    // build an URL for a full image

    65

    build_image_url: function (cx, cy, w, h, zl) {

    66

        return (this.path + "?cx=" + cx + "&cy=" + cy + "&w=" + w + "&h=" + h + "&zl=" + zl);

    67

    }

    68

});

    69

    70

/**

    71

 * Viewport implements the tiles-UI. It consists of a draggable substrate, which in turn consists of several

    72

 * ZoomLayers, which then contain the actual tile images.

    73

 *

    74

 * Vars:

    75

 *      scroll_x/y      - the visible pixel offset of the top-left corner

    76

 */

    77

var Viewport = Class.create({

    78

    initialize: function (source, viewport_id) {

    79

        this.source = source;

    80

    81

        // get a handle on the UI elements

    82

        this.id = viewport_id;

    83

        this.div = $(viewport_id);

    84

        this.substrate = this.div.down("div.substrate");

    85

    86

        // make the substrate draggable

    87

        this.draggable = new Draggable(this.substrate, {

    88

            onStart: this.on_scroll_start.bind(this),

    89

            onDrag: this.on_scroll_move.bind(this),

    91

        });

    92

    93

        // register event handlers for other UI functions

    94

        Event.observe(this.substrate, "dblclick", this.on_dblclick.bindAsEventListener(this));

    95

        Event.observe(this.substrate, "mousewheel", this.on_mousewheel.bindAsEventListener(this));

    96

        Event.observe(this.substrate, "DOMMouseScroll", this.on_mousewheel.bindAsEventListener(this));     // mozilla

    97

        Event.observe(document, "resize", this.on_resize.bindAsEventListener(this));

    98

    99

        // init zoom UI buttons

   100

        this.btn_zoom_in = $("btn-zoom-in");

   101

        this.btn_zoom_out = $("btn-zoom-out");

   102

   103

        if (this.btn_zoom_in)

   104

            Event.observe(this.btn_zoom_in, "click", this.zoom_in.bindAsEventListener(this));

   105

   106

        if (this.btn_zoom_out)

   107

            Event.observe(this.btn_zoom_out, "click", this.zoom_out.bindAsEventListener(this));

   108

   109

        // initial view location (centered)

   110

        var cx = 0, cy = 0, zl = 0;

   111

   112

        // from link?

   113

        if (document.location.hash) {

   114

            // parse x:y:z tuple

   115

            var pt = document.location.hash.substr(1).split(":");

   116

   117

            // unpack    

   118

            if (pt.length) cx = parseInt(pt.shift());

   119

            if (pt.length) cy = parseInt(pt.shift());

   120

            if (pt.length) zl = parseInt(pt.shift());

   121

   122

        } else {

   123

            // start in the center

   124

            cx = this.source.img_width / 2;

   125

            cy = this.source.img_height / 2;

   126

            zl = 0; // XXX: need to scale x/y for this: (this.source.zoom_min + this.source.zoom_max) / 2;

   127

        }

   128

   129

        // initialize zoom state to given zl

   130

        this._init_zoom(zl);

   131

   132

        // initialize viewport size

   133

        this.update_size();

   134

   135

        // initialize scroll offset

   136

        this._init_scroll(cx, cy);

   137

   138

        // this comes after update_size, so that the initial update_size doesn't try and update the image_link,

   139

        // since this only works once we have the zoom layers set up...

   140

        this.image_link = $("lnk-image");

   141

        this.update_image_link();

   142

   143

        // display tiles!

   144

        this.update_tiles();

   145

    },

   146

   147

/*

   148

 * Initializers - only run once

   149

 */

   150

   151

    /** Initialize the zoom state to show the given zoom level */

   152

    _init_zoom: function (zl) {

   153

        // the stack of zoom levels

   154

        this.zoom_layers = [];

   155

   156

        // populate the zoom-layers stack based on the number of zoom levels defined for the source

   157

        for (var zoom_level = this.source.zoom_min; zoom_level <= this.source.zoom_max; zoom_level++) {

   158

            var zoom_layer = new ZoomLayer(this.source, zoom_level);

   159

   160

            this.substrate.appendChild(zoom_layer.div);

   161

            this.zoom_layers[zoom_level] = zoom_layer;

   162

        }

   163

   164

        // is the new zoom level valid?

   165

        if (!this.zoom_layers[zl])

   166

            // XXX: nasty, revert to something else?

   167

            return false;

   168

   169

        // set the zoom layyer

   170

        this.zoom_layer = this.zoom_layers[zl];

   171

   172

        // enable it with initial z-index

   173

        this.zoom_layer.enable(11);

   174

   175

        // init the UI accordingly

   176

        this.update_zoom_ui();

   177

    },

   178

   179

    /** Initialize the scroll state to show the given (scaled) centered coordinates */

   180

    _init_scroll: function (cx, cy) {

   181

        // scroll center

   182

        this.scroll_center_to(cx, cy);

   183

    },

   184

   185

   186

/*

   187

 * Handle input events

   188

 */    

   189

   190

    /** Viewport resized */

   191

    on_resize: function (ev) {

   192

        this.update_size();

   193

        this.update_tiles();

   194

    },

   195

   196

    /** Double-click to zoom and center */

   197

    on_dblclick: function (ev) {

   198

        var offset = this.event_offset(ev);

   199

   200

        // center view and zoom in

   201

        this.center_and_zoom_in(

   202

            this.scroll_x + offset.x,

   203

            this.scroll_y + offset.y

   204

        );

   205

    },

   206

   207

    // mousewheel handler

   208

    on_mousewheel: function (ev) {

   209

        // this works in very weird ways, so it's based on code from http://adomas.org/javascript-mouse-wheel/

   210

        // (it didn't include any license, so this is written out manually)

   211

        var delta;

   212

   213

        // this is browser-dependant...

   214

        if (ev.wheelDelta) {

   215

            // IE + Opera

   216

            delta = ev.wheelDelta;

   217

   218

            if (window.opera) {  

   219

                // Opera, but apparently not newer versions?

   220

                //delta = -delta;

   221

            }

   222

   223

        } else if (ev.detail) {

   224

            // Mozilla

   225

            delta = -ev.detail;

   226

   227

        } else {

   228

            // mousewheel not supported...

   229

            return;

   230

   231

        }

   232

   233

        // don't scroll the page

   234

        if (ev.preventDefault)

   235

            ev.preventDefault();

   236

   237

        // delta > 0 : scroll up, zoom in

   238

        // delta < 0 : scroll down, zoom out

   239

        delta = delta < 0 ? -1 : 1;

   240

   241

        // Firefox's DOMMouseEvent's pageX/Y attributes are broken. layerN is for mozilla, offsetN for IE, seems to work

   242

   243

        // absolute location of the cursor

   244

        var x = parseInt(ev.target.style.left) + (ev.layerX ? ev.layerX : ev.offsetX);

   245

        var y = parseInt(ev.target.style.top) + (ev.layerY ? ev.layerY : ev.offsetY);

   246

   247

        // zoom \o/

   248

        this.zoom_center_to(x, y, delta);

   249

    },

   250

   251

    /** Substrate scroll was started */

   252

    on_scroll_start: function (ev) {

   253

   254

    },

   255

   256

    /** Substrate was scrolled, update scroll_{x,y}, and then update tiles after 100ms */

   257

    on_scroll_move: function (ev) {

   258

        this.update_scroll();

   259

        this.update_after_timeout();

   260

    },

   261

   262

    /** Substrate scroll was ended, update tiles now */

   263

    on_scroll_end: function (ev) {

   264

        this.update_now();

   265

    },

   266

   267

    /** Calculate the absolute (x, y) coords of the given event inside the viewport */

   268

    event_offset: function (ev) {

   269

        var offset = this.div.cumulativeOffset();

   270

   271

        return {

   272

            x: ev.pointerX() - offset.left, 

   273

            y: ev.pointerY() - offset.top

   274

        };

   275

    },

   276

   277

/*

   278

 * Change view - scroll/zoom

   279

 */                  

   280

   281

    /** Scroll the view to place the given absolute (x, y) co-ordinate at the top left */

   282

    scroll_to: function (x, y) {

   283

        // update it via the style

   284

        this.substrate.style.top = "-" + y + "px";

   285

        this.substrate.style.left = "-" + x + "px";

   286

   287

        // update these as well

   288

        this.scroll_x = x;

   289

        this.scroll_y = y;

   290

    },

   291

   292

    /** Scroll the view to place the given absolute (x, y) co-ordinate at the center */

   293

    scroll_center_to: function (x, y) {

   294

        return this.scroll_to(

   295

            x - this.center_offset_x,

   296

            y - this.center_offset_y

   297

        );

   298

    },

   299

   300

    /** Zoom à la delta such that the given (zoomed) absolute (x, y) co-ordinates will be at the top left */

   301

    zoom_scaled: function (x, y, delta) {

   302

        if (!this.update_zoom(delta))

   303

            // couldn't zoom, scaled coords are wrong

   304

            return false;

   305

   306

        // scroll to the new position

   307

        this.scroll_to(x, y);

   308

   309

        // update view after 100ms - in case we zoom again?

   310

        this.update_after_timeout();

   311

   312

        return true;

   313

    },

   314

   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) {

   317

        return this.zoom_scaled(

   318

            scaleByZoomDelta(x, delta),

   319

            scaleByZoomDelta(y, delta),

   320

            delta

   321

        );

   322

    },

   323

   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) {

   326

        return this.zoom_scaled(

   327

            scaleByZoomDelta(x, delta) - this.center_offset_x,

   328

            scaleByZoomDelta(y, delta) - this.center_offset_y,

   329

            delta

   330

        );

   331

    },

   332

   333

    /** Zoom à la delta, keeping the view centered */

   334

    zoom_centered: function (delta) {

   335

        return this.zoom_center_to(

   336

            this.scroll_x + this.center_offset_x,

   337

            this.scroll_y + this.center_offset_y,

   338

            delta

   339

        );

   340

    },

   341

   342

    /** Zoom in one level, keeping the view centered */

   343

    zoom_in: function () {

   344

        return this.zoom_centered(+1);

   345

    },

   346

   347

    /** Zoom out one level, keeping the view centered */

   348

    zoom_out: function () {

   349

        return this.zoom_centered(-1);

   350

    },

   351

   352

    /** Center the view on the given coords, and zoom in, if possible */

   353

    center_and_zoom_in: function (cx, cy) {

   354

        // try and zoom in

   355

        if (this.update_zoom(1)) {

   356

            // scaled coords

   357

            cx = scaleByZoomDelta(cx, 1);

   358

            cy = scaleByZoomDelta(cy, 1);

   359

        }

   360

   361

        // re-center

   362

        this.scroll_center_to(cx, cy);

   363

   364

        // update view after 100ms - in case we zoom again?

   365

        this.update_after_timeout();

   366

    },

   367

   368

/*

   369

 * Update view state

   370

 */              

   371

   372

    /** Update the view_* / center_offset_* vars, and any dependent items */

   373

    update_size: function () {

   374

        this.view_width = this.div.getWidth();

   375

        this.view_height = this.div.getHeight();

   376

   377

        this.center_offset_x = Math.floor(this.view_width / 2);

   378

        this.center_offset_y = Math.floor(this.view_height / 2);

   379

   380

        // the link-to-image uses the current view size

   381

        this.update_image_link();

   382

    },

   383

   384

    /**

   385

     * Update the scroll_x/y state

   386

     */    

   387

    update_scroll: function() {

   388

        this.scroll_x = -parseInt(this.substrate.style.left);

   389

        this.scroll_y = -parseInt(this.substrate.style.top);

   390

    },

   391

   392

    /**

   393

     * Switch zoom layers

   394

     */

   395

    update_zoom: function (delta) {

   396

        // is the new zoom level valid?

   397

        if (!this.zoom_layers[this.zoom_layer.level + delta])

   398

            return false;

   399

   400

        var zoom_old = this.zoom_layer;

   401

        var zoom_new = this.zoom_layers[this.zoom_layer.level + delta];

   402

   403

        // XXX: clear hide-zoom-after-timeout

   404

        if (this.zoom_timer) {

   405

            clearTimeout(this.zoom_timer);

   406

            this.zoom_timer = null;

   407

        }

   408

   409

        // get other zoom layers out of the way

   410

        // XXX: u

   411

        this.zoom_layers.each(function (zl) {

   412

            zl.disable();

   413

        });

   414

   415

        // update the current zoom layer

   416

        this.zoom_layer = zoom_new;

   417

   418

        // layer them such that the old on remains visible underneath the new one

   419

        zoom_new.enable(11);

   420

        zoom_old.enable(10);

   421

   422

        // resize the tiles in the two zoom layers

   423

        zoom_new.update_tiles(zoom_new.level);

   424

        zoom_old.update_tiles(zoom_new.level);

   425

   426

        // disable the old zoom layer after 1000ms - after the new zoom layer has loaded - not an optimal solution

   427

        this.zoom_timer = setTimeout(function () { zoom_old.disable()}, 1000);

   428

   429

        // update UI state

   430

        this.update_zoom_ui();

   431

   432

        return true;

   433

    },

   434

   435

    /** Schedule an update_tiles() after a 100ms interval */

   436

    update_after_timeout: function () {

   437

        // have not called update_tiles() yet

   438

        this._update_idle = false;

   439

   440

        // cancel old timeout

   441

        if (this._update_timeout)

   442

            clearTimeout(this._update_timeout);

   443

   444

        // trigger in 100ms

   445

        this._update_timeout = setTimeout(this._update_timeout_trigger.bind(this), 100);  

   446

    },

   447

   448

    _update_timeout_trigger: function () {

   449

        // have called update_tiles()

   450

        this._update_idle = true;

   451

   452

        this.update_tiles();

   453

    },

   454

   455

    /** 

   456

     * Unschedule the call to update_tiles() and call it now, unless it's already been triggered by the previous call to

   457

     * update_after_timeout

   458

     */

   459

    update_now: function () {

   460

        // abort trigger if active

   461

        if (this._update_timeout)

   462

            clearTimeout(this._update_timeout);

   463

   464

        // update now unless already done

   465

        if (!this._update_idle)

   466

            this.update_tiles();

   467

    },

   468

   469

    /**

   470

     * Determine the set of visible tiles, and ensure they are loaded

   471

     */

   472

    update_tiles: function () {

   473

        // short names for some vars...

   474

        var x = this.scroll_x;

   475

        var y = this.scroll_y;

   476

        var sw = this.view_width;

   477

        var sh = this.view_height;

   478

        var tw = this.source.tile_width;

   479

        var th = this.source.tile_height;

   480

        var zl = this.zoom_layer.level;

   481

   482

        // figure out which set of cols/rows are visible 

   483

        var start_col = Math.max(0, Math.floor(x / tw));

   484

        var start_row = Math.max(0, Math.floor(y / th));

   485

        var end_col = Math.floor((x + sw) / tw);

   486

        var end_row = Math.floor((y + sh) / th);

   487

   488

        // loop through all visible tiles

   489

        for (var col = start_col; col <= end_col; col++) {

   490

            for (var row = start_row; row <= end_row; row++) {

   491

                // the tile's id

   492

                var id = "tile_" + zl + "_" + col + "_" + row;

   493

   494

                // does the element exist already?

   495

                // XXX: use basic document.getElementById for perf?

   496

                var t = $(id);

   497

   498

                if (!t) {

   499

                    // build a new tile

   500

                    t = Builder.node("img", {

   501

                            src:    this.source.build_url(col, row, zl /* , sw, sh */),