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