git.roojs.org Git - app.Builder.js/blob - ClutterTest/Window.js

   1 Gtk = imports.gi.Gtk;
   2 Gdk = imports.gi.Gdk;
   3 Pango = imports.gi.Pango;
   4 GLib = imports.gi.GLib;
   5 Gio = imports.gi.Gio;
   6 GObject = imports.gi.GObject;
   7 GtkSource = imports.gi.GtkSource;
   8 WebKit = imports.gi.WebKit;
   9 Vte = imports.gi.Vte;
  10 GtkClutter = imports.gi.GtkClutter;
  11 console = imports.console;
  12 XObject = imports.XObject.XObject;
  13 Window=new XObject({
  14     xtype: Gtk.Window,
  15     default_height : 900,
  16     default_width : 900,
  17     id : "Window",
  18     init : function() {
  19         XObject.prototype.init.call(this);
  20         this.el.show_all();
  21     },
  22     items : [
  23         {
  24             xtype: GtkClutter.Embed,
  25             id : "Canvas",
  26             pack : "add",
  27             activate : function(elname)
  28             {
  29
  30                 // enter event. - triggers start of possible re-arrange.
  31                 // --> 'next event'
  32                 // leave notify event...- cancel..
  33                 // --> clear next event
  34
  35
  36
  37
  38
  39
  40                // prevent dupes
  41
  42             /*   if (this.lastAct) {
  43                    if (((new Date()) - this.lastAct)  < 1000) {
  44                         return;
  45                     }
  46
  47                 }
  48                 */
  49                 this.lastAct = new Date();
  50
  51                // THIS NEEDS TO ACTIVATE CERTIAN LAYOUTS BASED ON WHAT ELEMENT
  52                // HAS BEEN ACTIVATED.
  53                var  Clutter = imports.gi.Clutter;
  54                var _t = this;
  55
  56                var moved = [];
  57                function mv(en, opts) {
  58                     moved.push(en);
  59                      if (opts.scale && !opts.scale_x) {
  60                         opts.scale_x = opts.scale;
  61                     }
  62                      if (opts.scale && !opts.scale_y) {
  63                         opts.scale_y = opts.scale;
  64                     }
  65                     if (opts.scale) {
  66                         delete opts.scale;
  67                     }
  68                     var anim =  _t.get(en).el.animate(    Clutter.AnimationMode.EASE_OUT_ELASTIC, 1000, opts         );
  69
  70                     anim.timeline.start();
  71                }
  72                var left = ['project',  'parts', 'props'  ];
  73                var right = [ 'filelist',  'editor', 'preview', 'palete' ];
  74                function emin() {
  75
  76                     left.forEach(function(e) {
  77                         if (moved.indexOf(e) > -1) { return; } // already moved
  78                         mv(e, { scale : 0.5, x : 5, y : left.indexOf(e)*60} );
  79                     });
  80                     right.forEach(function(e) {
  81                         if (moved.indexOf(e) > -1) { return; } // already moved
  82                         mv(e, { scale : 0.5, x : 700 , y : right.indexOf(e)*60} );
  83                     });
  84                }
  85
  86                // reserve left < 100 for icons...
  87                // elements have a few 'scale' states
  88                // a) minimized '50x50' box on left or right....
  89                // b) full size
  90                // c) reduced size (visible but not active..)
  91
  92                 // active element should always end up on left...
  93
  94                 switch (elname) {
  95                     case 'project':
  96                     case 'filelist':
  97
  98                         mv('project',   { scale : 2, x : 100 , y : 0}); // full left.
  99                         mv('filelist',  { scale : 2, x : 400 , y : 0}); // right.
 100                          break;
 101
 102
 103                     case 'parts': // tree of parts
 104                     case 'props':
 105                         mv('parts',   { scale : 2, x : 60 , y : 0}); // full left.
 106                         mv('props',   { scale : 2, x : 60 , y : 200}); // bottom (full)
 107                         mv('preview',   { scale : 1, x : 260 , y : 0}); // right (half.)
 108                          break;
 109
 110
 111                     case 'editor':
 112                         // editor = props / tree and editor (main!)
 113                         mv('editor',   { scale : 3, x : 300 , y : 0}); // main?
 114
 115                         mv('props',   { scale : 2, x : 60 , y : 0}); // bottom (full)
 116                        mv('parts',   { scale : 2, x : 60 , y : 200}); // full left.
 117
 118                         break;
 119
 120                     case 'preview':
 121                         // preview... debugger is probably helpful..?
 122                          mv('parts',   { scale : 1, x : 60 , y : 0}); // full left.
 123                          mv('props',   { scale : 1, x : 60 , y : 200}); // bottom (full)
 124                          mv('preview',   { scale : 3, x : 160 , y : 0}); // right (half.)
 125                          break;
 126                         break;
 127
 128                     case 'palete':
 129                         mv('parts',   { scale : 2, x : 60 , y : 0}); // full left.
 130                         mv('palete',   { scale : 2, x : 500 , y : 0}); // bottom (full)
 131
 132                         break;
 133
 134                 }
 135                             emin();
 136
 137             /*
 138
 139                 if (this.lastEl) {
 140                     mv(this.lastEl, { scale: 0.5 });
 141                 }
 142
 143                 this.lastEl = elname;
 144                 mv(elname, { scale: 2});
 145                 */
 146             },
 147             enter : function(n) {
 148                 print("ENTER : " + n);
 149                 this.nextActor = n;
 150                 // start countdown..
 151                 this.entered = new Date();
 152                 // set up a timeout..
 153                 if (this.hasTimeout) {
 154                     return;
 155                 }
 156                 var _t = this;
 157                 this.hasTimeout = GLib.timeout_add (GLib.PRIORITY_DEFAULT, 100, function() {
 158
 159                     if (!_t.nextActor) { // no actor..
 160                       //  print("no actor");
 161                         return true;
 162                     }
 163                     // lapsed
 164                     var lapsed = ((new Date()) - _t.entered);
 165                     //print ("lapsed: " + lapsed);
 166                     if (lapsed < 1000) { // not enought time yet..
 167                         //print("not yet");
 168                         return true;
 169                     }
 170                     var na =         _t.nextActor + '';
 171                     _t.nextActor = false;
 172                     _t.activate(na);
 173                     return true;
 174                 });
 175             },
 176             leave : function() {
 177                 this.nextActor = false;
 178             },
 179             items : [
 180                 {
 181                     xtype: GtkClutter.Actor,
 182                     id : "project",
 183                     pack : false,
 184                     scale_x : 0.5,
 185                     scale_y : 0.5,
 186                     x : 10,
 187                     y : 10,
 188                     items : [
 189                         {
 190                             xtype: Gtk.Button,
 191                             listeners : {
 192                                 enter_notify_event : function (self, event) {
 193                                    this.get('/Canvas').enter('project');
 194                                     return false;
 195                                 },
 196                                 leave_notify_event : function (self, event) {
 197                                 print("leave not event?");
 198                                    this.get('/Canvas').leave();
 199                                     return false;
 200                                 }
 201                             },
 202                             height_request : 100,
 203                             label : "project list",
 204                             pack : false,
 205                             width_request : 100
 206                         }
 207                     ]
 208                 },
 209                 {
 210                     xtype: GtkClutter.Actor,
 211                     id : "filelist",
 212                     pack : false,
 213                     x : 10,
 214                     y : 150,
 215                     items : [
 216                         {
 217                             xtype: Gtk.Button,
 218                             listeners : {
 219                                 enter_notify_event : function (self, event) {
 220                                    this.get('/Canvas').enter('filelist');
 221                                     return false;
 222                                 },
 223                                 leave_notify_event : function (self, event) {
 224                                    this.get('/Canvas').leave();
 225                                     return false;
 226                                 }
 227                             },
 228                             height_request : 100,
 229                             label : "file list",
 230                             pack : false,
 231                             width_request : 100
 232                         }
 233                     ]
 234                 },
 235                 {
 236                     xtype: GtkClutter.Actor,
 237                     id : "parts",
 238                     pack : false,
 239                     x : 10,
 240                     y : 300,
 241                     items : [
 242                         {
 243                             xtype: Gtk.ScrolledWindow,
 244                             listeners : {
 245                                 enter_notify_event : function (self, event) {
 246                                    this.get('/Canvas').enter('parts');
 247                                     return false;
 248                                 },
 249                                 leave_notify_event : function (self, event) {
 250                                    this.get('/Canvas').leave();
 251                                     return false;
 252                                 }
 253                             },
 254                             height_request : 400,
 255                             id : "LeftTree",
 256                             pack : "false",
 257                             width_request : 150,
 258                             getActiveElement : function() { // return path to actie node.
 259
 260                                  var path = this.getActivePath();
 261                                  if (!path) {
 262                                     return false;
 263                                  }
 264                                  var iter = new Gtk.TreeIter();
 265                                  this.get('model').el.get_iter_from_string(iter, path);
 266
 267                                  var value = new GObject.Value('');
 268                                  this.get('model').el.get_value(iter, 2, value);
 269
 270                                  return JSON.parse(value.value);
 271                             },
 272                             getActiveFile : function() {
 273                                 return this.get('model').file;
 274                             },
 275                             getActivePath : function() {
 276                                 var model = this.get('model');
 277                                 var view = this.get('view');
 278                                 if (view.selection.count_selected_rows() < 1) {
 279                                     return false;
 280                                 }
 281                                 var iter = new Gtk.TreeIter();
 282
 283                                 view.selection.get_selected(model.el, iter);
 284                                 return model.el.get_path(iter).to_string();
 285                             },
 286                             getPaleteProvider : function() {
 287                                 var model = this.get('model');
 288                                 var pm = imports.Builder.Provider.ProjectManager.ProjectManager;
 289                                 return pm.getPalete(model.file.getType());
 290                             },
 291                             getRenderer : function() {
 292
 293                                 switch( this.getActiveFile().getType()) {
 294                                         case 'Roo':
 295                                             return this.get('/RightBrowser.view');
 296                                         case 'Gtk':
 297                                             return this.get('/RightGtkView');
 298                                 }
 299
 300                             },
 301                             init : function() {
 302                                 XObject.prototype.init.call(this);
 303                                 this.el.set_policy (Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC)
 304                             },
 305                             renderView : function() {
 306                                 var render = this.getRenderer();
 307                                 var model = this.get('model');
 308                                 if (render) {
 309                                     render.renderJS(model.toJS(false,true)[0]);
 310                                 } else {
 311                                     print("NO RENDER JS METHOD?");
 312                                 }
 313                             },
 314                             shadow_type : Gtk.ShadowType.IN,
 315                             items : [
 316                                 {
 317                                     xtype: Gtk.TreeView,
 318                                     listeners : {
 319                                         button_press_event : function (self, ev) {
 320                                         //      console.log("button press?");
 321                                                 return;
 322                                                 if (ev.type != Gdk.EventType.BUTTON_PRESS  || ev.button.button != 3) {
 323                                                     print("click" + ev.type);
 324                                                     return false;
 325                                                 }
 326
 327
 328                                                 var res = {};
 329                                                 this.get('/LeftTree.view').el.get_path_at_pos(ev.button.x,ev.button.y, res);
 330
 331                                                 if (!this.get('/LeftTreeMenu').el)  this.get('/LeftTreeMenu').init();
 332
 333                                                 this.get('/LeftTreeMenu').el.set_screen(Gdk.Screen.get_default());
 334                                                 this.get('/LeftTreeMenu').el.show_all();
 335                                                 this.get('/LeftTreeMenu').el.popup(null, null, null, null, 3, ev.button.time);
 336                                                 print("click:" + res.path.to_string());
 337                                                 return false;
 338                                         },
 339                                         drag_begin : function (self, drag_context) {
 340                                                 print('SOURCE: drag-begin');
 341                                                  this.targetData = false;
 342                                                 // find what is selected in our tree...
 343                                                 var iter = new Gtk.TreeIter();
 344                                                 var s = this.selection;
 345                                                 s.get_selected(this.get('/LeftTree.model').el, iter);
 346
 347                                                 // set some properties of the tree for use by the dropped element.
 348                                                 var value = new GObject.Value('');
 349                                                 this.get('/LeftTree.model').el.get_value(iter, 2, value);
 350                                                 var data = JSON.parse(value.value);
 351                                                 var xname = this.get('/LeftTree.model').file.guessName(data);
 352
 353                                                 this.el.dragData = xname;
 354                                                 this.el.dropList = this.get('/LeftTree').getPaleteProvider().getDropList(xname);
 355
 356
 357                                                 // make the drag icon a picture of the node that was selected
 358                                                 var path = this.get('/LeftTree.model').el.get_path(iter);
 359                                                 this.el.treepath = path.to_string();
 360
 361                                                 var pix = this.el.create_row_drag_icon ( path);
 362
 363                                                 Gtk.drag_set_icon_pixmap (ctx,
 364                                                     pix.get_colormap(),
 365                                                     pix,
 366                                                     null,
 367                                                     -10,
 368                                                     -10);
 369
 370                                                 return true;
 371                                         },
 372                                         drag_end : function (self, drag_context) {
 373                                                 Seed.print('LEFT-TREE: drag-end');
 374                                                 this.el.dragData = false;
 375                                                 this.el.dropList = false;
 376                                                 this.targetData = false;
 377                                                 this.get('/LeftTree.view').highlight(false);
 378                                                 return true;
 379                                         },
 380                                         drag_motion : function (self, ctx, x, y, time) {
 381                                             console.log("LEFT-TREE: drag-motion");
 382                                                         var src = Gtk.drag_get_source_widget(ctx);
 383
 384                                                         // a drag from  elsewhere...- prevent drop..
 385                                                         if (!src.dragData) {
 386                                                             print("no drag data!");
 387                                                             Gdk.drag_status(ctx, 0, time);
 388                                                             this.targetData = false;
 389                                                             return true;
 390                                                         }
 391                                                         var action = Gdk.DragAction.COPY;
 392                                                         if (src == this.el) {
 393                                                             // unless we are copying!!! ctl button..
 394                                                             action = ctx.actions & Gdk.DragAction.MOVE ? Gdk.DragAction.MOVE : Gdk.DragAction.COPY ;
 395                                                         }
 396                                                         var data = {};
 397
 398                                                         if (!this.get('/LeftTree.model').el.iter_n_children(null)) {
 399                                                                 // no children.. -- asume it's ok..
 400                                                                 this.targetData =  [ '' , Gtk.TreeViewDropPosition.INTO_OR_AFTER , ''];
 401                                                                 Gdk.drag_status(ctx, action ,time);
 402                                                                 return true;
 403                                                         }
 404
 405                                                         print("GETTING POS");
 406                                                         var isOver = this.get('/LeftTree.view').el.get_dest_row_at_pos(x,y, data);
 407                                                         print("ISOVER? " + isOver);
 408                                                         if (!isOver) {
 409                                                             Gdk.drag_status(ctx, 0 ,time);
 410                                                             return false; // not over apoint!?!
 411                                                         }
 412                                                         // drag node is parent of child..
 413                                                         console.log("SRC TREEPATH: " + src.treepath);
 414                                                         console.log("TARGET TREEPATH: " + data.path.to_string());
 415
 416                                                         // nned to check a  few here..
 417                                                         //Gtk.TreeViewDropPosition.INTO_OR_AFTER
 418                                                         //Gtk.TreeViewDropPosition.INTO_OR_BEFORE
 419                                                         //Gtk.TreeViewDropPosition.AFTER
 420                                                         //Gtk.TreeViewDropPosition.BEFORE
 421
 422                                                         if (typeof(src.treepath) != 'undefined'  &&
 423                                                             src.treepath == data.path.to_string().substring(0,src.treepath.length)) {
 424                                                             print("subpath drag");
 425                                                              Gdk.drag_status(ctx, 0 ,time);
 426                                                             return false;
 427                                                         }
 428
 429                                                         // check that
 430                                                         //print("DUMPING DATA");
 431                                                         //console.dump(data);
 432                                                         // path, pos
 433
 434                                                         print(data.path.to_string() +' => '+  data.pos);
 435                                                         var tg = this.get('/LeftTree.model').findDropNodeByPath(
 436                                                             data.path.to_string(), src.dropList, data.pos);
 437
 438                                                         this.get('/LeftTree.view').highlight(tg);
 439                                                         if (!tg.length) {
 440                                                             print("Can not find drop node path");
 441                                                             this.targetData = false;
 442                                                             Gdk.drag_status(ctx, 0, time);
 443                                                             return true;
 444                                                         }
 445                                                         //console.dump(tg);
 446                                                         this.targetData = tg;
 447
 448
 449                                                         Gdk.drag_status(ctx, action ,time);
 450
 451                                                         return true;
 452                                         },
 453                                         drag_drop : function (w, ctx, x, y, time) {
 454                                               Seed.print("TARGET: drag-drop");
 455
 456                                                                 Gtk.drag_get_data
 457                                                                 (
 458                                                                         w,         /* will receive 'drag-data-received' signal */
 459                                                                         ctx,        /* represents the current state of the DnD */
 460                                                                         this.get('/Window').atoms["STRING"],    /* the target type we want */
 461                                                                         time            /* time stamp */
 462                                                                 );
 463
 464
 465                                                                 /* No target offered by source => error */
 466
 467
 468                                                                 return  true;
 469                                         },
 470                                         drag_data_received : function (self, ctx, x, y, sel_data, info, time) {
 471                                                  print("Tree: drag-data-received");
 472
 473                                                       var   delete_selection_data = false;
 474                                                        var  dnd_success = false;
 475                                                         /* Deal with what we are given from source */
 476                                                         if( sel_data && sel_data.length ) {
 477
 478                                                             if (ctx.action == Gdk.DragAction.ASK)  {
 479                                                                 /* Ask the user to move or copy, then set the ctx action. */
 480                                                             }
 481
 482                                                             if (ctx.action == Gdk.DragAction.MOVE) {
 483                                                                 //delete_selection_data = true;
 484                                                             }
 485
 486                                                             var source = Gtk.drag_get_source_widget(ctx);
 487
 488                                                             if (this.targetData) {
 489                                                                 if (source != this.el) {
 490                                                                     this.get('/LeftTree.model').dropNode(this.targetData,  source.dragData);
 491                                                                 } else {
 492                                                                     // drag around.. - reorder..
 493                                                                      this.get('/LeftTree.model').moveNode(this.targetData, ctx.action);
 494
 495
 496                                                                 }
 497                                                                 //Seed.print(this.targetData);
 498
 499                                                             }
 500
 501
 502
 503                                                             // we can send stuff to souce here...
 504
 505                                                             dnd_success = true;
 506
 507                                                         }
 508
 509                                                         if (dnd_success == false)
 510                                                         {
 511                                                                 Seed.print ("DnD data transfer failed!\n");
 512                                                         }
 513
 514                                                         Gtk.drag_finish (ctx, dnd_success, delete_selection_data, time);
 515                                                         return true;
 516                                         },
 517                                         cursor_changed : function (self) {
 518                                             return;
 519                                              if (this.blockChanges) { // probably not needed..
 520                                                return true;
 521                                              }
 522                                              var render = this.get('/LeftTree').getRenderer();
 523
 524
 525                                             if (this.selection.count_selected_rows() < 1) {
 526                                                 this.get('/LeftPanel.model').load( false);
 527                                                 this.get('/MidPropTree').activeElement =  false;
 528                                                 this.get('/MidPropTree').hideWin();
 529
 530                                                 var pm = this.get('/RightPalete.model');
 531                                                 if (!this.get('/LeftTree').getPaleteProvider()) {
 532                                                     // it may not be loaded yet..
 533                                                     return  true;
 534                                                 }
 535                                                 pm.load( this.get('/LeftTree').getPaleteProvider().gatherList(
 536                                                     this.get('/LeftTree.model').listAllTypes()));
 537                                                 if (render && render.redraw) {
 538                                                     render.redraw();
 539                                                 }
 540                                                 return true;
 541                                             }
 542
 543                                                     //console.log('changed');
 544                                                 var s = this.selection;
 545                                                   var iter = new Gtk.TreeIter();
 546                                                 s.get_selected(this.get('/LeftTree.model').el, iter);
 547
 548
 549                                                 // var val = "";
 550                                                 var value = new GObject.Value('');
 551                                                 this.get('/LeftTree.model').el.get_value(iter, 2, value);
 552                                                 this.get('/LeftTree.model').activePath = this.get('/LeftTree.model').el.get_path(iter).to_string();
 553
 554                                                 var data = JSON.parse(value.value);
 555                                                 this.get('/MidPropTree').activeElement =  data;
 556                                                 this.get('/MidPropTree').hideWin();
 557                                                 this.get('/LeftPanel.model').load( data);
 558
 559                                                 console.log(value.value);
 560                                                // _g.button.set_label(''+value.get_string());
 561
 562                                                 var pm =this.get('/RightPalete.model');
 563                                                 pm.load(  this.get('/LeftTree').getPaleteProvider().gatherList(
 564                                                      this.get('/LeftTree.model').listAllTypes()));
 565
 566
 567                                                    if (render && render.redraw) {
 568                                                     render.redraw();
 569                                                 }
 570
 571                                                     //Seed.print( value.get_string());
 572                                                     return true;
 573
 574                                         }
 575                                     },
 576                                     id : "view",
 577                                     pack : "add",
 578                                     tooltip_column : 1,
 579                                     enable_tree_lines : true,
 580                                     headers_visible : false,
 581                                     highlight : function(treepath_ar) {
 582
 583                                             // highlighting for drag/drop
 584                                             if (treepath_ar.length && treepath_ar[0].length ) {
 585                                                 this.el.set_drag_dest_row(
 586                                                         new  Gtk.TreePath.from_string( treepath_ar[0] ),  treepath_ar[1]);
 587                                                 } else {
 588                                                     this.el.set_drag_dest_row(null, Gtk.TreeViewDropPosition.INTO_OR_AFTER);
 589                                                 }
 590
 591                                             },
 592                                     init : function() {
 593                                                 XObject.prototype.init.call(this);
 594                                         var description = new Pango.FontDescription.c_new();
 595                                         description.set_size(8000);
 596                                         this.el.modify_font(description);
 597
 598                                         this.selection = this.el.get_selection();
 599                                         this.selection.set_mode( Gtk.SelectionMode.SINGLE);
 600                                         var _this = this;
 601
 602                                         // is this really needed??
 603                                         this.selection.signal['changed'].connect(function() {
 604                                                 _this.get('/LeftTree.view').listeners.cursor_changed.apply(
 605                                                     _this.get('/LeftTree.view'), [ _this.get('/LeftTree.view'), '']
 606                                                 );
 607                                         });
 608
 609                                         Gtk.drag_source_set (
 610                                                 this.el,            /* widget will be drag-able */
 611                                                 Gdk.ModifierType.BUTTON1_MASK,       /* modifier that will start a drag */
 612                                                 null,            /* lists of target to support */
 613                                                 0,              /* size of list */
 614                                                 Gdk.DragAction.COPY   | Gdk.DragAction.MOVE           /* what to do with data after dropped */
 615                                         );
 616
 617                                         Gtk.drag_source_set_target_list(this.el, this.get('/Window').targetList);
 618
 619                                         Gtk.drag_source_add_text_targets(this.el);
 620                                         Gtk.drag_dest_set
 621                                         (
 622                                             this.el,              /* widget that will accept a drop */
 623                                             Gtk.DestDefaults.MOTION  | Gtk.DestDefaults.HIGHLIGHT,
 624                                             null,            /* lists of target to support */
 625                                             0,              /* size of list */
 626                                             Gdk.DragAction.COPY   | Gdk.DragAction.MOVE       /* what to do with data after dropped */
 627                                         );
 628
 629                                         Gtk.drag_dest_set_target_list(this.el, this.get('/Window').targetList);
 630                                         Gtk.drag_dest_add_text_targets(this.el);
 631                                     },
 632                                     selectNode : function(treepath_str) {
 633                                         //this.selection.select_path(new  Gtk.TreePath.from_string( treepath_str));
 634                                      var tp = new Gtk.TreePath.from_string(treepath_str);
 635                                               this.el.set_cursor(tp, null, false);
 636                                           this.el.scroll_to_cell(tp, null, false, 0,0);
 637                                     },
 638                                     items : [
 639                                         {
 640                                             xtype: Gtk.TreeStore,
 641                                             activePath : false,
 642                                             currentTree : false,
 643                                             id : "model",
 644                                             pack : "set_model",
 645                                             changed : function(n, refresh) {
 646                                                 //     print("MODEL CHANGED CALLED" + this.activePath);
 647                                                      if (this.activePath) {
 648                                                         var iter = new Gtk.TreeIter();
 649                                                         this.el.get_iter(iter, new Gtk.TreePath.from_string(this.activePath))
 650                                                         this.el.set_value(iter, 0, [GObject.TYPE_STRING, this.nodeTitle(n)]);
 651                                                         this.el.set_value(iter, 1, [GObject.TYPE_STRING, this.nodeTitle(n)]);
 652
 653                                                         this.el.set_value(iter, 2, [GObject.TYPE_STRING, this.nodeToJSON(n)]);
 654                                                     }
 655                                                         //this.currentTree = this.toJS(false, true)[0];
 656                                                     this.file.items = this.toJS(false, false);
 657                                                   //  print("AFTER CHANGED");
 658                                                     //console.dump(this.file.items);
 659                                                     this.file.save();
 660                                                     this.currentTree = this.file.items[0];
 661                                                     //console.log(this.file.toSource());
 662
 663                                                     if (refresh) {
 664                                                         print("REDNER BROWSER?!");
 665                                                         this.get('/LeftTree').renderView();
 666
 667                                                         var pm = this.get('/RightPalete.model');
 668                                                         if (!this.get('/RightPalete').provider) {
 669                                                             pm.load([]);
 670                                                             return;
 671                                                         }
 672
 673
 674                                                         pm.load( this.get('/RightPalete').provider.gatherList(this.listAllTypes()));
 675                                                         //imports['Builder/RightBrowser.js'].renderJS(this.toJS());
 676                                                     }
 677
 678                                             },
 679                                             deleteSelected : function() {
 680                                                 this.get('/LeftTree.view').blockChanges = true;
 681                                                 var old_iter = new Gtk.TreeIter();
 682                                                 var s = this.get('/LeftTree.view').selection;
 683                                                 s.get_selected(this.el, old_iter);
 684                                                 var path = this.el.get_path(old_iter).to_string();
 685
 686                                                 this.activePath= false;
 687                                                 s.unselect_all();
 688
 689                                                 this.activePath= false;
 690                                                  var iter = new Gtk.TreeIter();
 691                                                 this.el.get_iter_from_string(iter, path);
 692                                                 this.el.remove(iter);
 693
 694                                                 // rebuild treemap. -- depreciated.!!
 695                                                 this.map = {};
 696                                                 this.treemap = { };
 697                                                 //this.toJS(null, true) // does not do anything?
 698                                                 this.activePath= false;
 699                                                 this.changed(false,true);
 700                                                 this.get('/LeftTree.view').blockChanges = false;
 701                                             },
 702                                             dropNode : function(target_data, node) {
 703                                                      print("drop Node");
 704                                                  // console.dump(node);
 705                                               //    console.dump(target_data);
 706                                                     var tp = target_data[0].length ? new  Gtk.TreePath.from_string( target_data[0] ) : false;
 707
 708                                                     print("add " + tp + "@" + target_data[1]  );
 709                                                     var parent = tp;
 710                                                     var after = false;
 711                                                     if (tp && target_data[1]  < 2) { // before or after..
 712                                                         var ar = target_data[0].split(':');
 713                                                         ar.pop();
 714                                                         parent  = new  Gtk.TreePath.from_string( ar.join(':') );
 715                                                         after = tp;
 716                                                     }
 717                                                     var n_iter = new Gtk.TreeIter();
 718                                                     var iter_par = new Gtk.TreeIter();
 719                                                     var iter_after = after ? new Gtk.TreeIter() : false;
 720
 721
 722
 723                                                     if (parent !== false) {
 724                                                         this.el.get_iter(iter_par, parent);
 725                                                     } else {
 726                                                         iter_par = null;
 727                                                     }
 728
 729
 730                                                     if (tp && after) {
 731                                                         print(target_data[1]  > 0 ? 'insert_after' : 'insert_before');
 732                                                         this.el.get_iter(iter_after, after);
 733                                                         this.el[ target_data[1]  > 0 ? 'insert_after' : 'insert_before'](
 734                                                                 n_iter, iter_par, iter_after);
 735
 736                                                     } else {
 737                                                         this.el.append(n_iter, iter_par);
 738
 739                                                     }
 740
 741                                                     if (typeof(node) == 'string') {
 742                                                         var ar = node.split('.');
 743                                                         var xtype = ar.pop();
 744
 745                                                         node = {
 746                                                             '|xns' : ar.join('.'),
 747                                                             'xtype' : xtype
 748                                                         };
 749                                                         if (target_data.length == 3 && target_data[2].length) {
 750                                                             node['*prop'] = target_data[2];
 751                                                         }
 752                                                         node = this.get('/DialogTemplateSelect').show(node);
 753
 754                                                     }
 755                                                     // work out what kind of packing to use..
 756                                                     if (typeof(node.pack) == 'undefined'  && parent !== false) {
 757                                                         var pal = this.get('/LeftTree').getPaleteProvider();
 758                                                         if (pal.name == 'Gtk') {
 759                                                             var pname = pal.guessName(this.singleNodeToJS(parent.to_string()));
 760                                                             var cname = pal.guessName(node);
 761                                                             node.pack = pal.getDefaultPack(pname, cname);
 762                                                         }
 763
 764                                                     }
 765
 766
 767                                                     var xitems = [];
 768                                                     if (node.items) {
 769                                                         xitems = node.items;
 770                                                         delete node.items;
 771                                                     }
 772                                             // load children - if it has any..
 773
 774                                                     if (xitems) {
 775                                                         this.load(xitems, n_iter);
 776                                                         this.get('/LeftTree.view').el.expand_row(this.el.get_path(n_iter), true);
 777                                                     }
 778                                                     if (tp && (xitems || after)) {
 779                                                         this.get('/LeftTree.view').el.expand_row(this.el.get_path(iter_par), true);
 780                                                     }
 781                                                     // wee need to get the empty proptypes from somewhere..
 782
 783                                                     //var olditer = this.activeIter;
 784                                                     this.activePath = this.el.get_path(n_iter).to_string();
 785
 786                                               // changed actually set's the node data..
 787                                                     this.changed(node, true);
 788
 789
 790
 791                                                     this.get('/LeftTree.view').el.set_cursor(this.el.get_path(n_iter), null, false);
 792
 793                                                     //Builder.MidPropTree._model.load(node);
 794                                                     //Builder.MidPropTree._win.hideWin();
 795                                                     //Builder.LeftPanel._model.load( node);
 796
 797
 798                                             },
 799                                             findDropNode : function(treepath_str, targets) {
 800
 801                                             // this is used by the dragdrop code in the roo version AFAIR..
 802
 803                                                                 var path = treepath_str.replace(/^builder-/, '');
 804                                                         // treemap is depreciated... - should really check if model has any entries..
 805
 806                                                         if (!this.el.iter_n_children(null)) {
 807                                                             print("NO KEYS");
 808                                                             return [ '',  Gtk.TreeViewDropPosition.INTO_OR_AFTER];
 809                                                         }
 810                                                         print("FIND treepath: " + path);
 811                                                         //console.dump(this.treemap);
 812
 813                                                         if (!treepath_str.match(/^builder-/)) {
 814                                                             return []; // nothing!
 815                                                         }
 816                                                         if (targets === true) {
 817                                                             return [ path ];
 818                                                         }
 819                                                         return this.findDropNodeByPath(path,targets)
 820                                             },
 821                                             findDropNodeByPath : function(treepath_str, targets, pref) {
 822                                                 var path = treepath_str + ''; // dupe it..
 823                                                 pref = typeof(pref) == 'undefined' ?  Gtk.TreeViewDropPosition.INTO_OR_AFTER : pref;
 824                                                 var last = false;
 825                                                 //console.dump(this.treemap);
 826                                                 while (path.length) {
 827                                                     print("LOOKING FOR PATH: " + path);
 828                                                     var node_data = this.singleNodeToJS(path);
 829                                                     if (node_data === false) {
 830                                                         print("node not found");
 831                                                         return [];
 832                                                     }
 833
 834                                                     var xname = this.get('/LeftTree.model').file.guessName(node_data);
 835                                                     var match = false;
 836                                                     var prop = '';
 837                                                     targets.forEach(function(tg) {
 838                                                         if (match) {
 839                                                             return;;
 840                                                         }
 841                                                         if ((tg == xname)  ) {
 842                                                             match = tg;
 843                                                         }
 844                                                         if (tg.indexOf(xname +':') === 0) {
 845                                                             match = tg;
 846                                                             prop = tg.split(':').pop();
 847                                                         }
 848                                                     });
 849
 850                                                     if (match) {
 851                                                         if (last) { // pref is after/before..
 852                                                             // then it's after last
 853                                                             if (pref > 1) {
 854                                                                 return []; // do not allow..
 855                                                             }
 856                                                             return [ last, pref , prop];
 857
 858                                                         }
 859                                                         return [ path , Gtk.TreeViewDropPosition.INTO_OR_AFTER , prop];
 860                                                     }
 861                                                     var par = path.split(':');
 862                                                     last = path;
 863                                                     par.pop();
 864                                                     path = par.join(':');
 865                                                 }
 866
 867                                                 return [];
 868
 869                                             },
 870                                             getIterValue : function (iter, col) {
 871                                                 var gval = new GObject.Value('');
 872                                                 this.el.get_value(iter, col ,gval);
 873                                                 return  gval.value;
 874
 875
 876                                             },
 877                                             init : function() {
 878                                                 XObject.prototype.init.call(this);
 879                                              this.el.set_column_types ( 3, [
 880                                                         GObject.TYPE_STRING, // title
 881                                                         GObject.TYPE_STRING, // tip
 882                                                         GObject.TYPE_STRING // source..
 883                                                         ] );
 884                                             },
 885                                             listAllTypes : function() {
 886                                                 var s = this.get('/LeftTree.view').selection;
 887                                                 print ("LIST ALL TYPES: " + s.count_selected_rows() );
 888
 889                                                 if (s.count_selected_rows() > 0) {
 890                                                     var iter = new Gtk.TreeIter();
 891                                                     s.get_selected(this.el, iter);
 892
 893                                                     // set some properties of the tree for use by the dropped element.
 894                                                     var value = new GObject.Value('');
 895                                                     this.el.get_value(iter, 2, value);
 896                                                     var data = JSON.parse(value.value);
 897
 898
 899                                                     var xname = this.get('/LeftTree.model').file.guessName(data);
 900                                                     console.log('selected:' + xname);
 901                                                     if (xname.length) {
 902                                                         return [ xname ];
 903                                                     }
 904                                                     return []; // could not find it..
 905                                                 }
 906
 907                                                 var ret = [ ];
 908
 909                                                var _this = this;
 910                                                 function addall(li)
 911                                                 {
 912                                                     li.forEach(function(el) {
 913                                                         // this is specific to roo!!!?
 914                                                         if (!el) { // skip empty?
 915                                                             return;
 916                                                         }
 917                                                         var fullpath =  _this.file.guessName(el);
 918                                                         if (fullpath.length && ret.indexOf(fullpath) < 0) {
 919                                                             ret.push(fullpath);
 920                                                         }
 921
 922
 923                                                         if (el.items && el.items.length) {
 924                                                             addall(el.items);
 925                                                         }
 926
 927                                                     });
 928
 929
 930                                                 }
 931
 932                                                 addall([this.currentTree]);
 933
 934                                                 // only if we have nothing, should we add '*top'
 935                                                 if (!ret.length) {
 936                                                     ret = [ '*top' ];
 937                                                 }
 938                                                 //console.log('all types in tree');
 939                                                 //console.dump(ret);
 940
 941                                                 return ret;
 942
 943                                             },
 944                                             load : function(tr,iter)
 945                                                     {
 946                                                         var citer = new Gtk.TreeIter();
 947                                                         //this.insert(citer,iter,0);
 948                                                         for(var i =0 ; i < tr.length; i++) {
 949                                                             if (iter) {
 950                                                                 this.el.insert(citer,iter,-1);
 951                                                             } else {
 952                                                                 this.el.append(citer);
 953                                                             }
 954
 955                                                             this.el.set_value(citer, 0, [GObject.TYPE_STRING, this.nodeTitle(tr[i]) ]);
 956                                                             this.el.set_value(citer, 1, [GObject.TYPE_STRING, this.nodeTip(tr[i]) ]);
 957                                                             this.el.set_value(citer, 2, [GObject.TYPE_STRING, this.nodeToJSON(tr[i])]);
 958                                                             if (tr[i].items && tr[i].items.length) {
 959                                                                 this.load(tr[i].items, citer);
 960                                                             }
 961                                                         }
 962                                                     },
 963                                             loadFile : function(f) {
 964                                                 //console.dump(f);
 965                                                         this.el.clear();
 966                                                         this.file = f;
 967
 968                                                         if (!f) {
 969                                                             console.log('missing file');
 970                                                             return;
 971                                                         }
 972
 973                                                         // load the file if not loaded..
 974                                                         if (f.items === false) {
 975                                                             var _this = this;
 976                                                             f.loadItems(function() {
 977                                                                 _this.loadFile(f);
 978                                                             });
 979                                                             return;
 980
 981                                                         }
 982                                                         this.get('/Window').setTitle(f.project.getName() + ' - ' + f.name);
 983
 984                                                         if (f.items.length && typeof(f.items[0]) == 'string') {
 985
 986                                                             this.get('/RightEditor').el.show();
 987                                                             this.get('/RightEditor.view').load( f.items[0]);
 988                                                             return;
 989                                                         }
 990                                                         print("LOAD");
 991                                                         print(JSON.stringify(f.items, null,4));
 992                                                         //console.dump(f.items);
 993                                                         this.load(f.items);
 994                                                         this.get('/LeftTree.view').el.expand_all();
 995
 996                                                         if (!f.items.length) {
 997                                                             // single item..
 998
 999                                                             this.get('/Window.leftvpaned').el.set_position(80);
1000                                                             // select first...
1001                                                             this.get('/LeftTree.view').el.set_cursor(
1002                                                                 new  Gtk.TreePath.from_string('0'), null, false);
1003
1004
1005                                                         } else {
1006                                                               this.get('/Window.leftvpaned').el.set_position(200);
1007                                                         }
1008
1009
1010                                                         //print("hide right editior");
1011                                                         this.get('/RightEditor').el.hide();
1012                                                         //print("set current tree");
1013                                                         this.currentTree = this.toJS(false, false)[0];
1014                                                         //console.dump(this.currentTree);
1015                                                         this.currentTree = this.currentTree || { items: [] };
1016                                                         this.get('/LeftTree').renderView();
1017                                                         //console.dump(this.map);
1018                                                         //var RightPalete     = imports.Builder.RightPalete.RightPalete;
1019                                                         var pm = this.get('/RightPalete.model');
1020                                                         // set up provider..
1021
1022                                                         this.get('/RightPalete').provider = this.get('/LeftTree').getPaleteProvider();
1023
1024                                                         if (!this.get('/RightPalete').provider) {
1025                                                             print ("********* PALETE PROVIDER MISSING?!!");
1026                                                         }
1027                                                         this.get('/LeftTree').renderView();
1028
1029                                                         pm.load( this.get('/LeftTree').getPaleteProvider().gatherList(this.listAllTypes()));
1030
1031
1032
1033                                                         this.get('/Window.view-notebook').el.set_current_page(
1034                                                             this.get('/LeftTree.model').file.getType()== 'Roo' ? 0 : -1);
1035
1036                                             },
1037                                             moveNode : function(target_data, action) {
1038                                                  //print("MOVE NODE");
1039                                                        // console.dump(target_data);
1040                                                         var old_iter = new Gtk.TreeIter();
1041                                                         var s = this.get('/LeftTree.view').selection;
1042                                                         s.get_selected(this.el, old_iter);
1043                                                         var node = this.nodeToJS(old_iter,false);
1044                                                         //console.dump(node);
1045
1046
1047                                                         // needs to drop first, otherwise the target_data
1048                                                         // treepath will be invalid.
1049
1050                                                         this.dropNode(target_data, node);
1051                                                   if (action & Gdk.DragAction.MOVE) {
1052                                                                   //          print("REMOVING OLD NODE");
1053                                                                             this.el.remove(old_iter);
1054
1055                                                         }
1056
1057                                                         this.activePath= false;
1058                                                         this.changed(false,true);
1059                                             },
1060                                             nodeTip : function(c) {
1061                                                 var ret = this.nodeTitle(c,true);
1062                                                 var funcs = '';
1063
1064
1065                                                 for( var i in c) {
1066
1067                                                     if (!i.length || i[0] != '|') {
1068                                                         continue;
1069                                                     }
1070                                                     if (i == '|init') {
1071                                                         continue;
1072                                                     }
1073                                                     if (typeof(c[i]) != 'string') {
1074                                                        continue;
1075                                                     }
1076                                                     //print("prop : " + i + ':' + c[i]);
1077                                                     if (!c[i].match(new RegExp('function'))) {
1078                                                         continue;
1079                                                     }
1080                                                     funcs += "\n<b>" + i.substring(1) + '</b> : ' + c[i].split(/\n/).shift();
1081
1082                                                 }
1083                                                 if (funcs.length) {
1084                                                     ret+="\n\nMethods:" + funcs;
1085                                                 }
1086                                                 return ret;
1087
1088                                             },
1089                                             nodeTitle : function(c, renderfull) {
1090                                                   var txt = [];
1091                                                 c = c || {};
1092                                                 var sr = (typeof(c['+buildershow']) != 'undefined') &&  !c['+buildershow'] ? true : false;
1093                                                 if (sr) txt.push('<s>');
1094                                                 if (typeof(c['*prop']) != 'undefined')   { txt.push(c['*prop']+ ':'); }
1095
1096                                                 if (renderfull && c['|xns']) {
1097                                                     txt.push(c['|xns']);
1098                                                 }
1099
1100                                                 if (c.xtype)      { txt.push(c.xtype); }
1101                                                 if (c.id)      { txt.push('<b>[id=' + c.id + ']</b>'); }
1102                                                 if (c.fieldLabel) { txt.push('[' + c.fieldLabel + ']'); }
1103                                                 if (c.boxLabel)   { txt.push('[' + c.boxLabel + ']'); }
1104
1105
1106                                                 if (c.layout)     { txt.push('<i>' + c.layout + '</i>'); }
1107                                                 if (c.title)      { txt.push('<b>' + c.title + '</b>'); }
1108                                                 if (c.label)      { txt.push('<b>' + c.label+ '</b>'); }
1109                                                 if (c.header)    { txt.push('<b>' + c.header + '</b>'); }
1110                                                 if (c.legend)      { txt.push('<b>' + c.legend + '</b>'); }
1111                                                 if (c.text)       { txt.push('<b>' + c.text + '</b>'); }
1112                                                 if (c.name)       { txt.push('<b>' + c.name+ '</b>'); }
1113                                                 if (c.region)     { txt.push('<i>(' + c.region + ')</i>'); }
1114                                                 if (c.dataIndex) { txt.push('[' + c.dataIndex+ ']'); }
1115
1116                                                 // for flat classes...
1117                                                 if (typeof(c['*class']) != 'undefined')  { txt.push('<b>' +  c['*class']+  '</b>'); }
1118                                                 if (typeof(c['*extends']) != 'undefined')  { txt.push(': <i>' +  c['*extends']+  '</i>'); }
1119
1120
1121                                                 if (sr) txt.push('</s>');
1122                                                 return (txt.length == 0 ? "Element" : txt.join(" "));
1123                                             },
1124                                             nodeToJS : function (treepath, with_id)
1125                                             {
1126
1127                                                 var iter = treepath;  // API used to be iter here..
1128                                                 if (typeof(iter) == 'string') {
1129                                                     iter = new Gtk.TreeIter();
1130                                                     if (!this.el.get_iter(iter, new Gtk.TreePath.from_string(treepath))) {
1131                                                         return false;
1132                                                     }
1133                                                 }
1134                                                 var par = new Gtk.TreeIter();
1135                                                 var iv = this.getIterValue(iter, 2);
1136                                                // print("IV" + iv);
1137                                                 var k = JSON.parse(iv);
1138                                                 if (k.json && !this.el.iter_parent( par, iter  )) {
1139                                                     delete k.json;
1140                                                 }
1141
1142                                                 if (with_id) {
1143                                                     var treepath_str = this.el.get_path(iter).to_string();
1144                                                     // not sure how we can handle mixed id stuff..
1145                                                     if (typeof(k.id) == 'undefined')  {
1146                                                         k.id =  'builder-'+ treepath_str ;
1147                                                     }
1148
1149                                                     // needed??
1150                                                     this.treemap[  treepath_str ] = k;
1151                                                     k.xtreepath = treepath_str ;
1152
1153                                                 }
1154                                                 if (this.el.iter_has_child(iter)) {
1155                                                     citer = new Gtk.TreeIter();
1156                                                     this.el.iter_children(citer, iter);
1157                                                     k.items = this.toJS(citer,with_id);
1158                                                 }
1159                                                 return k;
1160                                             },
1161                                             nodeToJSON : function(c) {
1162                                                 var o  = {}
1163                                                 for (var i in c) {
1164                                                     if (i == 'items') {
1165                                                          continue;
1166                                                     }
1167                                                     o[i] = c[i];
1168                                                 }
1169                                                 return JSON.stringify(o);
1170                                             },
1171                                             singleNodeToJS : function (treepath)
1172                                                     {
1173                                                         var iter = new Gtk.TreeIter();
1174                                                         if (!this.el.get_iter(iter, new Gtk.TreePath.from_string(treepath))) {
1175                                                             return false;
1176                                                         }
1177
1178                                                         var iv = this.getIterValue(iter, 2);
1179
1180                                                         return JSON.parse(iv);
1181
1182                                                     },
1183                                             toJS : function(treepath, with_id)
1184                                             {
1185                                                 //Seed.print("WITHID: "+ with_id);
1186                                                 var iter = treepath;  // API used to be iter here..
1187                                                 if (typeof(iter) == 'string') {
1188                                                     iter = new Gtk.TreeIter();
1189                                                     if (!this.el.get_iter(iter, new Gtk.TreePath.from_string(treepath))) {
1190                                                         return false;
1191                                                     }
1192                                                 }
1193                                                 var first = false;
1194                                                 if (!iter) {
1195
1196                                                     this.treemap = { };
1197
1198                                                     iter = new Gtk.TreeIter();
1199                                                     if (!this.el.get_iter_first(iter)) {
1200                                                         return [];
1201                                                     }
1202                                                     first = true;
1203                                                 }
1204
1205                                                 var ar = [];
1206
1207                                                 while (true) {
1208
1209                                                     var k = this.nodeToJS(iter, with_id);
1210                                                     ar.push(k);
1211
1212
1213                                                     if (!this.el.iter_next(iter)) {
1214                                                         break;
1215                                                     }
1216                                                 }
1217
1218                                                 if (treepath === false) {
1219                                                     //dupe!!!
1220                                                     return JSON.parse(JSON.stringify(ar));
1221                                                 }
1222
1223                                                 return ar;
1224                                                 // convert the list into a json string..
1225
1226
1227                                             }
1228                                         },
1229                                         {
1230                                             xtype: Gtk.TreeViewColumn,
1231                                             pack : "append_column",
1232                                             init : function() {
1233                                                 XObject.prototype.init.call(this);
1234                                                this.el.add_attribute(this.items[0].el , 'markup', 0 );
1235                                             },
1236                                             items : [
1237                                                 {
1238                                                     xtype: Gtk.CellRendererText,
1239                                                     pack : "pack_start"
1240                                                 }
1241                                             ]
1242                                         }
1243                                     ]
1244                                 },
1245                                 {
1246                                     xtype: Gtk.Menu,
1247                                     pack : false,
1248                                     id : "LeftTreeMenu",
1249                                     items : [
1250                                         {
1251                                             xtype: Gtk.MenuItem,
1252                                             pack : "add",
1253                                             label : "Delete Element",
1254                                             listeners : {
1255                                                 activate : function (self) {
1256
1257                                                      this.get('/LeftTree.model').deleteSelected();
1258                                                 }
1259                                             }
1260                                         },
1261                                         {
1262                                             xtype: Gtk.MenuItem,
1263                                             listeners : {
1264                                                 activate : function (self) {
1265
1266                                                      var tree = this.get('/LeftTree');
1267                                                       var model = this.get('/LeftTree.model');
1268                                                      var el = tree.getActivePath();
1269                                                      print(el);
1270                                                      var js = model.toJS(el, false);
1271                                                     // print(JSON.stringify(js[0], null,4));
1272                                                      this.get('/DialogSaveTemplate').show(JSON.stringify(js[0], null,4));
1273
1274
1275                                                 }
1276                                             },
1277                                             label : "Save as Template",
1278                                             pack : "add"
1279                                         }
1280                                     ]
1281                                 }
1282                             ]
1283                         }
1284                     ]
1285                 },
1286                 {
1287                     xtype: GtkClutter.Actor,
1288                     id : "props",
1289                     pack : false,
1290                     x : 10,
1291                     y : 450,
1292                     items : [
1293                         {
1294                             xtype: Gtk.Button,
1295                             listeners : {
1296                                 enter_notify_event : function (self, event) {
1297                                   this.get('/Canvas').enter('props');
1298                                     return false;
1299                                 },
1300                                 leave_notify_event : function (self, event) {
1301                                    this.get('/Canvas').leave();
1302                                     return false;
1303                                 }
1304                             },
1305                             height_request : 100,
1306                             label : "property editor",
1307                             pack : false,
1308                             width_request : 100
1309                         }
1310                     ]
1311                 },
1312                 {
1313                     xtype: GtkClutter.Actor,
1314                     id : "editor",
1315                     pack : false,
1316                     x : 150,
1317                     y : 450,
1318                     items : [
1319                         {
1320                             xtype: Gtk.Button,
1321                             listeners : {
1322                                 enter_notify_event : function (self, event) {
1323                                     this.get('/Canvas').enter('editor');
1324                                     return false;
1325                                 },
1326                                 leave_notify_event : function (self, event) {
1327                                    this.get('/Canvas').leave();
1328                                     return false;
1329                                 }
1330                             },
1331                             height_request : 100,
1332                             label : "text editor",
1333                             pack : false,
1334                             width_request : 100
1335                         }
1336                     ]
1337                 },
1338                 {
1339                     xtype: GtkClutter.Actor,
1340                     id : "preview",
1341                     pack : false,
1342                     x : 150,
1343                     y : 10,
1344                     items : [
1345                         {
1346                             xtype: Gtk.Button,
1347                             listeners : {
1348                                 enter_notify_event : function (self, event) {
1349                                     this.get('/Canvas').enter('preview');
1350                                     return false;
1351                                 },
1352                                 leave_notify_event : function (self, event) {
1353                                    this.get('/Canvas').leave();
1354                                     return false;
1355                                 }
1356                             },
1357                             height_request : 100,
1358                             label : "preview app",
1359                             pack : false,
1360                             width_request : 100
1361                         }
1362                     ]
1363                 },
1364                 {
1365                     xtype: GtkClutter.Actor,
1366                     id : "palete",
1367                     pack : false,
1368                     x : 100,
1369                     y : 300,
1370                     items : [
1371                         {
1372                             xtype: Gtk.Button,
1373                             listeners : {
1374                                 enter_notify_event : function (self, event) {
1375                                   this.get('/Canvas').enter('palete');
1376                                     return false;
1377                                 },
1378                                 leave_notify_event : function (self, event) {
1379                                    this.get('/Canvas').leave();
1380                                     return false;
1381                                 }
1382                             },
1383                             height_request : 100,
1384                             label : "palete",
1385                             pack : false,
1386                             width_request : 100
1387                         }
1388                     ]
1389                 }
1390             ]
1391         }
1392     ]
1393 });
1394 Window.init();
1395 XObject.cache['/Window'] = Window;