gtkfisheyelist/gtkfisheyelistview.vala

   1 /*
   2  * FisheyeListView - View a TreeModel as a list that does not need scrolling
   3  *
   4  * Copyright (C) 2009  Enrico Zini <enrico@enricozini.org>
   5  *
   6  * This program is free software; you can redistribute it and/or modify
   7  * it under the terms of the GNU General Public License as published by
   8  * the Free Software Foundation; either version 2 of the License, or
   9  * (at your option) any later version.
  10  *
  11  * This program is distributed in the hope that it will be useful,
  12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14  * GNU General Public License for more details.
  15  *
  16  * You should have received a copy of the GNU General Public License
  17  * along with this program; if not, write to the Free Software
  18  * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
  19  */
  20
  21 using GLib;
  22
  23 protected struct FocusInfo
  24 {
  25         int y;
  26         int renderer;
  27 }
  28
  29 protected class PrefixInfo
  30 {
  31         public string prefix;
  32         public size_t pfx_len;
  33         public int pos;
  34         public int layout_pos;
  35
  36         public PrefixInfo(string prefix, int pos)
  37         {
  38                 this.prefix = prefix;
  39                 this.pfx_len = prefix.size();
  40                 this.pos = pos;
  41                 this.layout_pos = 0;
  42         }
  43
  44         /**
  45          * If s and prefix share a prefix, set prefix to the common prefix, and
  46          * return true.
  47          * Else, return false.
  48          */
  49         public bool refine(string s)
  50         {
  51                 size_t len;
  52                 for (len = 0; prefix[len] != 0 && s[len] != 0 && s[len] == prefix[len]; ++len)
  53                         ;
  54                 if (len == 0) return false;
  55                 if (len != pfx_len)
  56                 {
  57                         prefix = prefix.substring(0, (int)len);
  58                         pfx_len = len;
  59                 }
  60                 return true;
  61         }
  62 }
  63
  64 public class FisheyeListView : Gtk.DrawingArea
  65 {
  66         protected Gtk.TreeModel model;
  67         protected Gdk.Pixmap background;
  68         protected Gdk.Pixmap backing_store;
  69
  70         // Renderers used at different sizes
  71         protected const int steps = 5;
  72         protected Gtk.CellRendererText[] renderers;
  73         protected int[] renderer_sizes;
  74         protected int max_renderer_size;
  75
  76         // Labels to show, extracted from the model
  77         protected string[] label_cache;
  78         protected bool base_layout_needed;
  79
  80         // Prefix information
  81         protected List<PrefixInfo> prefixes;
  82         protected Pango.Layout prefix_layout;
  83
  84         protected int cur_el;
  85         protected weak PrefixInfo cur_pfx;
  86
  87         // Layout information
  88         protected int focus_first;
  89         protected int focus_end;
  90         protected FocusInfo[] focus_info;
  91         protected bool focus_locked;
  92         protected bool focus_layout_needed;
  93         protected bool is_fisheye;
  94         protected int focus_step_size;
  95         protected int focus_area_start;
  96
  97         // Number of elements in full focus
  98         protected int _focus_size;
  99         public int focus_size {
 100                 get { return _focus_size; }
 101                 set {
 102                         _focus_size = value;
 103                         focus_info = new FocusInfo[_focus_size+2*steps+1];
 104                         focus_layout_needed = true;
 105                         queue_draw();
 106                 }
 107         }
 108
 109         protected int _label_column;
 110         public int label_column {
 111                 get { return _label_column; }
 112                 set {
 113                         _label_column = value;
 114                         base_layout_needed = true;
 115                         queue_draw();
 116                 }
 117         }
 118
 119         //public virtual signal void cursor_changed ();
 120         public signal void row_activated(Gtk.TreePath path);
 121
 122         public FisheyeListView()
 123         {
 124                 model = null;
 125                 backing_store = null;
 126
 127                 label_cache = null;
 128                 prefixes = null;
 129
 130                 renderers = new Gtk.CellRendererText[steps];
 131                 renderer_sizes = new int[steps];
 132                 prefix_layout = null;
 133
 134                 // Defaults for properties
 135                 focus_size = 10;
 136                 label_column = 0;
 137
 138                 cur_el = 0;
 139                 cur_pfx = null;
 140                 focus_locked = false;
 141
 142                 add_events(Gdk.EventMask.POINTER_MOTION_MASK
 143                          | Gdk.EventMask.BUTTON_PRESS_MASK
 144                          | Gdk.EventMask.BUTTON_RELEASE_MASK);
 145         }
 146
 147         public unowned Gtk.TreeModel get_model() { return model; }
 148         public void set_model (Gtk.TreeModel? model)
 149         {
 150                 if (this.model != null)
 151                 {
 152                         this.model.row_changed -= on_row_changed;
 153                         this.model.row_deleted -= on_row_deleted;
 154                         this.model.row_has_child_toggled -= on_row_has_child_toggled;
 155                         this.model.row_inserted -= on_row_inserted;
 156                         this.model.rows_reordered -= on_rows_reordered;
 157                 }
 158                 this.model = model;
 159                 this.model.row_changed += on_row_changed;
 160                 this.model.row_deleted += on_row_deleted;
 161                 this.model.row_has_child_toggled += on_row_has_child_toggled;
 162                 this.model.row_inserted += on_row_inserted;
 163                 this.model.rows_reordered += on_rows_reordered;
 164                 base_layout_needed = true;
 165                 queue_draw();
 166         }
 167
 168         private void on_row_changed(Gtk.TreePath path, Gtk.TreeIter iter) { base_layout_needed = true; }
 169         private void on_row_deleted(Gtk.TreePath path) { base_layout_needed = true; }
 170         private void on_row_has_child_toggled(Gtk.TreePath path, Gtk.TreeIter iter) { base_layout_needed = true; }
 171         private void on_row_inserted(Gtk.TreePath path, Gtk.TreeIter iter) { base_layout_needed = true; }
 172         private void on_rows_reordered(Gtk.TreePath path, Gtk.TreeIter iter, void* new_order) { base_layout_needed = true; }
 173
 174         /* Mouse button got pressed over widget */
 175         /*
 176         public override bool button_press_event(Gdk.EventButton event)
 177         {
 178                 stderr.printf("Mouse pressed on %d %s\n", cur_el, label_cache[cur_el]);
 179                 return false;
 180         }
 181         */
 182
 183         /* Mouse button got released */
 184         public override bool button_release_event(Gdk.EventButton event)
 185         {
 186                 if (model == null) return false;
 187                 //stderr.printf("Mouse released on %d %s\n", cur_el, label_cache[cur_el]);
 188
 189                 // Emit row_activated if applicable
 190                 int x = (int)event.x;
 191                 if (x < allocation.width / 3)
 192                 {
 193                         Gtk.TreeIter iter;
 194                         if (model.iter_nth_child(out iter, null, cur_el))
 195                         {
 196                                 Gtk.TreePath path = model.get_path(iter);
 197                                 row_activated(path);
 198                         }
 199                 } else if (cur_pfx != null && x > allocation.width * 2 / 3) {
 200                         stderr.printf("Mouse released on prefix %s\n", cur_pfx.prefix);
 201                 }
 202                 return false;
 203         }
 204
 205         /* Mouse pointer moved over widget */
 206         public override bool motion_notify_event(Gdk.EventMotion event)
 207         {
 208                 int old_cur_el = cur_el;
 209                 int x = (int)event.x;
 210                 int y = (int)event.y;
 211
 212                 if (is_fisheye)
 213                 {
 214                         focus_locked = !focus_layout_needed && x < allocation.width/3 && y >= focus_area_start+focus_info[0].y && y < focus_area_start+focus_info[focus_end - focus_first].y;
 215
 216                         if (!focus_locked || y < focus_area_start+focus_info[0].y || y >= focus_area_start+focus_info[focus_end - focus_first].y)
 217                                 cur_el = y * (label_cache.length+1) / allocation.height;
 218                         else
 219                                 for (int idx = 0; idx < focus_info.length; ++idx)
 220                                         if (y - focus_area_start < focus_info[idx].y + renderer_sizes[focus_info[idx].renderer])
 221                                         {
 222                                                 cur_el = idx + focus_first;
 223                                                 break;
 224                                         }
 225
 226                         if (prefixes != null)
 227                         {
 228                                 cur_pfx = prefixes.data;
 229                                 for (weak List<PrefixInfo> i = prefixes; i != null && y > i.data.layout_pos; i = i.next)
 230                                         cur_pfx = i.data;
 231                         } else {
 232                                 cur_pfx = null;
 233                         }
 234
 235                         if (!focus_locked && old_cur_el != cur_el)
 236                                 focus_layout_needed = true;
 237                 } else {
 238                         cur_el = y / max_renderer_size;
 239                         if (cur_el >= label_cache.length)
 240                                 cur_el = label_cache.length - 1;
 241                 }
 242
 243                 //stderr.printf("MOTION %f %f CE %d\n", event.x, event.y, cur_el);
 244                 if (old_cur_el != cur_el)
 245                 {
 246                         queue_draw();
 247                         old_cur_el = cur_el;
 248                 }
 249                 return false;
 250         }
 251
 252         public override bool configure_event (Gdk.EventConfigure event)
 253         {
 254                 base_layout_needed = true;
 255                 queue_draw();
 256                 return false;
 257         }
 258
 259         /* Widget is asked to draw itself */
 260         public override bool expose_event (Gdk.EventExpose event)
 261         {
 262                 draw();
 263
 264                 window.draw_drawable(
 265                         get_style().fg_gc[Gtk.StateType.NORMAL],
 266                         backing_store,
 267                         event.area.x, event.area.y,
 268                         event.area.x, event.area.y,
 269                         event.area.width, event.area.height);
 270
 271                 return false;
 272         }
 273
 274         public override void style_set(Gtk.Style? previous_style)
 275         {
 276                 base_layout_needed = true;
 277         }
 278         public override void direction_changed(Gtk.TextDirection previous_direction)
 279         {
 280                 base_layout_needed = true;
 281         }
 282
 283         protected Gtk.CellRendererText make_cell_renderer()
 284         {
 285                 var res = new Gtk.CellRendererText();
 286                 res.font_desc = get_style().font_desc;
 287                 res.ypad = 0;
 288                 return res;
 289         }
 290
 291         protected void base_layout()
 292         {
 293                 // Rebuild label cache
 294                 prefixes = new List<PrefixInfo>();
 295                 if (model == null)
 296                 {
 297                         label_cache = new string[0];
 298                 } else {
 299                         Gtk.TreeIter iter;
 300                         if (!model.get_iter_first(out iter))
 301                         {
 302                                 label_cache = new string[0];
 303                         }
 304                         else
 305                         {
 306                                 int count = model.iter_n_children(null);
 307                                 label_cache = new string[count];
 308
 309                                 int i = 0;
 310                                 PrefixInfo pi = null;
 311                                 do {
 312                                         string val;
 313                                         model.get(iter, _label_column, out val, -1);
 314                                         label_cache[i] = val;
 315                                         if (pi == null || !pi.refine(val))
 316                                         {
 317                                                 if (pi != null) prefixes.append(pi);
 318                                                 pi = new PrefixInfo(val, i);
 319                                         }
 320                                         ++i;
 321                                 } while (model.iter_next(ref iter));
 322                                 prefixes.append(pi);
 323                         }
 324                 }
 325                 for (weak List<PrefixInfo> i = prefixes; i != null; i = i.next)
 326                         i.data.layout_pos = i.data.pos * allocation.height / (label_cache.length+1);
 327
 328                 background = new Gdk.Pixmap(window, allocation.width, allocation.height, -1);
 329                 backing_store = new Gdk.Pixmap(window, allocation.width, allocation.height, -1);
 330
 331                 // Recreate the renderers
 332                 renderers[renderers.length-1] = make_cell_renderer();
 333                 renderers[renderers.length-1].set_fixed_height_from_font(1);
 334                 renderers[renderers.length-1].get_size(this, null, null, null, null, out max_renderer_size);
 335                 renderer_sizes[renderers.length-1] = max_renderer_size;
 336
 337                 is_fisheye = label_cache.length * max_renderer_size > allocation.height;
 338
 339                 if (is_fisheye)
 340                 {
 341                         renderers[0] = make_cell_renderer();
 342                         renderers[0].size = Pango.SCALE;
 343                         renderers[0].set_fixed_height_from_font(1);
 344                         int min_renderer_size;
 345                         renderers[0].get_size(this, null, null, null, null, out min_renderer_size);
 346                         renderer_sizes[0] = min_renderer_size;
 347
 348                         focus_step_size = 0;    // Size of the diminishing area
 349                         for (int i = 1; i < renderers.length-1; ++i)
 350                         {
 351                                 renderers[i] = make_cell_renderer();
 352                                 renderers[i].scale = (double)i / renderers.length;
 353                                 renderers[i].set_fixed_height_from_font(1);
 354                                 int size;
 355                                 renderers[i].get_size(this, null, null, null, null, out size);
 356                                 renderer_sizes[i] = size;
 357                                 focus_step_size += size;
 358                         }
 359                 }
 360
 361                 // Draw background
 362                 draw_background(background);
 363
 364                 base_layout_needed = false;
 365                 focus_layout_needed = true;
 366         }
 367
 368         protected int el_renderer(int idx)
 369         {
 370                 int fs2 = _focus_size/2;
 371                 int renderer_idx;
 372                 if (idx < cur_el)
 373                         renderer_idx = idx - (cur_el-fs2-steps);
 374                 else
 375                         renderer_idx = (cur_el+fs2+steps) - idx;
 376                 if (renderer_idx < 0)
 377                         return 0;
 378                 if (renderer_idx >= renderer_sizes.length)
 379                         return renderer_sizes.length-1;
 380                 return renderer_idx;
 381         }
 382
 383         protected void focus_layout()
 384         {
 385                 if (!is_fisheye || label_cache.length == 0)
 386                 {
 387                         focus_first = 0;
 388                         focus_end = 0;
 389                         focus_layout_needed = false;
 390                         return;
 391                 }
 392
 393                 focus_first = cur_el - _focus_size/2 - steps;
 394                 if (focus_first < 0) focus_first = 0;
 395                 if (focus_first + focus_info.length > label_cache.length)
 396                         focus_first = label_cache.length - focus_info.length;
 397
 398                 int cur_pos = 0;
 399                 int cur_idx = 0;
 400                 int focus_area_pre = 0;
 401                 while (cur_pos < allocation.height && cur_idx < focus_info.length)
 402                 {
 403                         if (focus_first + cur_idx == cur_el)
 404                                 focus_area_pre = cur_pos;
 405                         focus_info[cur_idx].y = cur_pos;
 406                         focus_info[cur_idx].renderer = el_renderer(focus_first + cur_idx);
 407 //                      stderr.printf("LAYOUT %d+[0-%d-%d] item %d/%d: pos %d rend %d rsz %d\n",
 408 //                              focus_first, cur_idx, focus_info.length, focus_first + cur_idx, label_cache.length,
 409 //                              cur_pos, focus_info[cur_idx].renderer, renderer_sizes[focus_info[cur_idx].renderer]);
 410                         cur_pos += renderer_sizes[focus_info[cur_idx].renderer];
 411                         ++cur_idx;
 412                 }
 413
 414                 focus_info[cur_idx].y = cur_pos;
 415                 focus_info[cur_idx].renderer = 0;
 416                 focus_end = focus_first + cur_idx;
 417
 418                 int anchor_y = cur_el * allocation.height / (label_cache.length+1);
 419                 int focus_area_size = cur_pos;
 420
 421                 focus_area_start = anchor_y - focus_area_pre;
 422                 if (focus_area_start < 0) focus_area_start = 0;
 423                 if (focus_area_start + focus_area_size > allocation.height)
 424                         focus_area_start = allocation.height - focus_area_size;
 425
 426 //              stderr.printf("FA [0 [%d+%d=%d] %d]\n", focus_area_start, focus_area_size, focus_area_start+focus_area_size, allocation.height);
 427
 428                 focus_layout_needed = false;
 429         }
 430
 431         protected void draw_background(Gdk.Drawable drawable)
 432         {
 433                 Gtk.Style style = get_style();
 434
 435                 // Background
 436                 drawable.draw_rectangle(style.bg_gc[Gtk.StateType.NORMAL], true, 0, 0, allocation.width, allocation.height);
 437
 438                 if (!is_fisheye)
 439                         return;
 440
 441                 // Focus movement area
 442                 drawable.draw_rectangle(style.bg_gc[Gtk.StateType.INSENSITIVE], true,
 443                         allocation.width/3, 0, allocation.width/3, allocation.height);
 444
 445                 for (int y = 0; y < allocation.height/2 - 30; y += 30)
 446                 {
 447                         Gtk.paint_arrow(style, (Gdk.Window*)drawable, Gtk.StateType.INSENSITIVE, Gtk.ShadowType.NONE,
 448                                 null, this, null, Gtk.ArrowType.UP, false,
 449                                 allocation.width/3, y, allocation.width/3, 10);
 450                         Gtk.paint_arrow(style, (Gdk.Window*)drawable, Gtk.StateType.INSENSITIVE, Gtk.ShadowType.NONE,
 451                                 null, this, null, Gtk.ArrowType.DOWN, false,
 452                                 allocation.width/3, allocation.height-y-30, allocation.width/3, 10);
 453                 }
 454
 455                 // Draw tiny labels
 456                 Gdk.Rectangle expose_area = Gdk.Rectangle();
 457                 expose_area.x = expose_area.y = 0;
 458                 expose_area.width = allocation.width;
 459                 expose_area.height = allocation.height;
 460
 461                 Gdk.Rectangle cell_area = Gdk.Rectangle();
 462                 cell_area.x = 0;
 463                 cell_area.width = allocation.width;
 464                 cell_area.height = renderer_sizes[0];
 465                 if (label_cache.length * cell_area.height >= allocation.height)
 466                 {
 467                         for (int y = 0; y < allocation.height; y += cell_area.height)
 468                         {
 469                                 int idx = y * label_cache.length / allocation.height;
 470                                 cell_area.y = y;
 471                                 renderers[0].text = label_cache[idx];
 472                                 renderers[0].render((Gdk.Window*)drawable, this,
 473                                                 cell_area,
 474                                                 cell_area,
 475                                                 expose_area,
 476                                                 0);
 477                         }
 478                 } else {
 479                         int count = int.min(allocation.height/(2*cell_area.height), label_cache.length);
 480                         for (int idx = 0; idx < count; ++idx)
 481                         {
 482                                 cell_area.y = idx * cell_area.height;
 483                                 renderers[0].text = label_cache[idx];
 484                                 renderers[0].render((Gdk.Window*)drawable, this,
 485                                                 cell_area,
 486                                                 cell_area,
 487                                                 expose_area,
 488                                                 0);
 489
 490                                 cell_area.y = allocation.height-cell_area.y;
 491                                 renderers[0].text = label_cache[label_cache.length-idx];
 492                                 renderers[0].render((Gdk.Window*)drawable, this,
 493                                                 cell_area,
 494                                                 cell_area,
 495                                                 expose_area,
 496                                                 0);
 497                         }
 498                 }
 499
 500                 // Draw prefix labels
 501                 prefix_layout = create_pango_layout(null);
 502                 Pango.Rectangle lr;
 503                 prefix_layout.get_extents(null, out lr);
 504                 int label_height = lr.height / Pango.SCALE;
 505                 prefix_layout.set_alignment(Pango.Alignment.RIGHT);
 506                 prefix_layout.set_width(allocation.width*Pango.SCALE/3);
 507                 prefix_layout.set_height(0);
 508                 prefix_layout.set_ellipsize(Pango.EllipsizeMode.END);
 509
 510                 int last_covered = 0;
 511
 512                 for (weak List<PrefixInfo> i = prefixes; i != null; i = i.next)
 513                 {
 514                         if (i.data.layout_pos < last_covered)
 515                                 i.data.layout_pos = last_covered;
 516                         prefix_layout.set_text(i.data.prefix, (int)i.data.pfx_len);
 517                         Gtk.paint_layout(style, (Gdk.Window*)drawable, Gtk.StateType.INSENSITIVE, true, null, this, null, allocation.width*2/3, i.data.layout_pos, prefix_layout);
 518                         last_covered = i.data.layout_pos + label_height;
 519                 }
 520         }
 521
 522         protected void draw()
 523         {
 524                 if (base_layout_needed)
 525                         base_layout();
 526                 if (focus_layout_needed)
 527                         focus_layout();
 528
 529                 var drawable = backing_store;
 530                 Gtk.Style style = get_style();
 531                 Gdk.Rectangle expose_area = Gdk.Rectangle();
 532                 expose_area.x = expose_area.y = 0;
 533                 expose_area.width = allocation.width;
 534                 expose_area.height = allocation.height;
 535
 536                 // Background
 537                 drawable.draw_drawable(
 538                         get_style().fg_gc[Gtk.StateType.NORMAL],
 539                         background,
 540                         0, 0, 0, 0,
 541                         allocation.width, allocation.height);
 542
 543                 if (is_fisheye)
 544                 {
 545                         // Paint current prefix
 546                         if (cur_pfx != null)
 547                         {
 548                                 prefix_layout.set_text(cur_pfx.prefix, (int)cur_pfx.pfx_len);
 549                                 Gtk.paint_layout(style, (Gdk.Window*)drawable, Gtk.StateType.NORMAL, true, null, this, null, allocation.width*2/3, cur_pfx.layout_pos, prefix_layout);
 550                         }
 551
 552                         // Focus lock area
 553                         drawable.draw_rectangle(style.bg_gc[Gtk.StateType.ACTIVE], true,
 554                                 0, focus_area_start + focus_info[0].y, allocation.width/3, focus_info[focus_end - focus_first].y);
 555
 556                         // Paint items around focus
 557                         Gdk.Rectangle cell_area = Gdk.Rectangle();
 558                         cell_area.x = 0;
 559                         cell_area.width = expose_area.width;
 560                         for (int idx = 0; idx < focus_info.length; ++idx)
 561                         {
 562                                 var renderer = renderers[focus_info[idx].renderer];
 563                                 cell_area.y = focus_area_start + focus_info[idx].y;
 564                                 cell_area.height = renderer_sizes[focus_info[idx].renderer];
 565
 566                                 Gtk.CellRendererState rflags = 0;
 567                                 if (idx + focus_first == cur_el)
 568                                 {
 569                                         rflags |= Gtk.CellRendererState.SELECTED | Gtk.CellRendererState.FOCUSED;
 570                                         drawable.draw_rectangle(style.bg_gc[Gtk.StateType.SELECTED], true,
 571                                                         cell_area.x, cell_area.y, allocation.width, cell_area.height);
 572                                 }
 573
 574                                 renderer.text = label_cache[idx + focus_first];
 575                                 renderer.render((Gdk.Window*)drawable, this,
 576                                                 cell_area,
 577                                                 cell_area,
 578                                                 expose_area,
 579                                                 rflags);
 580
 581                                 //Gdk.draw_line(drawable, style.fg_gc[itemState], 0, y0, allocation.width, y0);
 582                         }
 583                 } else {
 584                         // Paint all items sequentially
 585                         var renderer = renderers[renderers.length-1];
 586                         Gdk.Rectangle cell_area = Gdk.Rectangle();
 587                         cell_area.x = 0;
 588                         cell_area.width = allocation.width;
 589                         cell_area.height = max_renderer_size;
 590                         for (int idx = 0; idx < label_cache.length; ++idx)
 591                         {
 592                                 cell_area.y = idx * cell_area.height;
 593
 594                                 Gtk.CellRendererState rflags = 0;
 595                                 if (idx == cur_el)
 596                                 {
 597                                         rflags |= Gtk.CellRendererState.SELECTED | Gtk.CellRendererState.FOCUSED;
 598                                         drawable.draw_rectangle(style.bg_gc[Gtk.StateType.SELECTED], true,
 599                                                         cell_area.x, cell_area.y, cell_area.width, cell_area.height);
 600                                 }
 601
 602                                 renderer.text = label_cache[idx];
 603                                 renderer.render((Gdk.Window*)drawable, this,
 604                                                 cell_area,
 605                                                 cell_area,
 606                                                 expose_area,
 607                                                 rflags);
 608                         }
 609                 }
 610         }
 611
 612         /*
 613          * A relevant annotation from Prefuse:
 614          *
 615          * For more details on this form of transformation, see Manojit Sarkar and
 616          * Marc H. Brown, "Graphical Fisheye Views of Graphs", in Proceedings of
 617          * CHI'92, Human Factors in Computing Systems, p. 83-91, 1992. Available
 618          * online at <a href="http://citeseer.ist.psu.edu/sarkar92graphical.html">
 619          * http://citeseer.ist.psu.edu/sarkar92graphical.html</a>.
 620          *
 621          * See also http://www.cs.umd.edu/hcil/fisheyemenu/
 622          */
 623 }