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