git.roojs.org Git - app.Builder.js/blob - oldbuilder/RightBrowser.js

   1 //<Script type="text/javascript">
   2 Gio = imports.gi.Gio;
   3 Gtk = imports.gi.Gtk;
   4 Gdk = imports.gi.Gdk;
   5 GObject = imports.gi.GObject;
   6 Pango = imports.gi.Pango ;
   7 WebKit= imports.gi.WebKit;
   8
   9 /**
  10  * The based browser component - draws html/js lib based elements.
  11  *
  12  * the API for the rendered HTML goes like this:
  13  *
  14  * Builder.render(.... json string ...)
  15  * Builder.overPos(" + x +','+ y + ");");  // mouse hovering over this pos..
  16  *
  17  *
  18  * callbacks are done with.. console.log(
  19  *   .. { id : 'xxx' } - highlights an elements
  20  *      { width : xx }  = sets the width of the selected element (with id)
  21  *      { height: xx }  = sets the width of the selected element (with id)
  22  * .. { hover-node : 'xxx' } - response to overPos
  23  *
  24  * basic dumping is done with alert();
  25  *
  26  *
  27  */
  28
  29
  30 XObject = imports.XObject.XObject;
  31 File = imports.File.File;
  32 console = imports.console;
  33
  34 LeftTree = imports.Builder.LeftTree.LeftTree ;
  35 LeftPanel = imports.Builder.LeftPanel.LeftPanel;
  36  //console.dump(imports.Builder.LeftTree);
  37  //Seed.quit();
  38
  39 RightBrowser = new XObject({
  40         xtype : Gtk.VBox,
  41        pack : [ 'append_page', new Gtk.Label({ label : "Roo View" })  ],
  42         items : [
  43
  44             {
  45                 xtype: Gtk.HBox,
  46                 pack : [ 'pack_start', false, true, 0 ],
  47                 items : [
  48                     {
  49
  50
  51                         xtype: Gtk.Button,
  52                         label : 'Dump HTML',
  53                          pack : [ 'pack_start', false, false, 0 ],
  54                         listeners : {
  55                             // pressed...
  56                             'button-press-event' : function(w, ev ){
  57                                 /// dump..
  58                                 RightBrowser.get('view').el.execute_script(
  59                                     "console.log(document.body.innerHTML);");
  60                                 RightBrowser.get('view').el.execute_script(
  61                                     "console.log(Builder.dump(Builder));");
  62                                 return true;
  63                                 // show the MidPropTree..
  64                             }
  65
  66                         }
  67                     }
  68                 ]
  69             },
  70             {
  71
  72
  73                 renderedData : false,
  74                 xtype: Gtk.ScrolledWindow,
  75
  76                 smooth_scroll : true,
  77                 shadow_type : Gtk.ShadowType.IN ,
  78                 init : function() {
  79                     XObject.prototype.init.call(this);
  80
  81                     this.el.set_policy(Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC);
  82                 },
  83
  84                 items : [
  85
  86
  87                     {
  88                         id : 'view',
  89                         xtype : WebKit.WebView,
  90                         packing : ['add' ],
  91                         ready : false,
  92                         init : function() {
  93                             XObject.prototype.init.call(this);
  94                             // fixme!
  95                             this.el.open('file:///' + __script_path__ + '/../builder.html');
  96
  97                             Gtk.drag_dest_set
  98                             (
  99                                     this.el,              /* widget that will accept a drop */
 100                                     Gtk.DestDefaults.MOTION  | Gtk.DestDefaults.HIGHLIGHT,
 101                                     null,            /* lists of target to support */
 102                                     0,              /* size of list */
 103                                     Gdk.DragAction.COPY         /* what to do with data after dropped */
 104                             );
 105
 106                            // print("RB: TARGETS : " + LeftTree.atoms["STRING"]);
 107                             Gtk.drag_dest_set_target_list(this.el, LeftTree.targetList);
 108                             //Gtk.drag_dest_add_text_targets(this.el);
 109                         },
 110                         listeners : {
 111
 112
 113
 114                             'load-finished' : function() {
 115                                 if (this.ready) { // dont do it twice!
 116                                     return;
 117                                 }
 118                                 this.ready = true;
 119
 120                                 this.renderJS(LeftTree.get('model').toJS()[0]);
 121                                // this.el.execute_script("alert(document.documentElement.innerHTML);");
 122                             },
 123                             // we should really use console...
 124                             'script-alert' : function(w,s,r) {
 125                                 Seed.print(r);
 126                                 return false;
 127                                 return true;
 128                             },
 129                             'console-message' : function (a,b,c) {
 130                                 console.log(b);
 131                                 if (!b.match(/^\{/)) {
 132                                     return false; // do not handle!!! -> later maybe in console..
 133                                 }
 134                                 console.log(b);
 135                                 var val =  JSON.parse(b);
 136                                 if (typeof(val['hover-node']) != 'undefined') {
 137                                     this.activeNode = val['hover-node'];
 138                                     console.log('active node: ' + this.activeNode);
 139                                     return true;
 140                                 }
 141                                 var ret = false;
 142                                  if (typeof(val['id']) != 'undefined') {
 143                                    // this.activeNode = val['id'];
 144                                     var tg = LeftTree.get('model').findDropNode(val['id'], true);
 145                                     if (!tg) {
 146                                         return false;
 147                                     }
 148                                     LeftTree.get('view').selectNode(tg[0]);
 149                                     ret  = true;
 150
 151                                 }
 152                                 if (ret && typeof(val['set']) != 'undefined') {
 153                                     LeftPanel.get('model').add({
 154                                         key : val['set'],
 155                                         val : val['value']
 156                                     });
 157                                     //console.log('active node: ' + this.activeNode);
 158
 159                                 }
 160                                 //Seed.print('a:'+a);
 161                                 //Seed.print('b:'+b);
 162                                 //Seed.print('c:'+c);
 163                                 return ret;
 164                             },
 165
 166                             "drag-leave" : function () {
 167                                 Seed.print("TARGET: drag-leave");
 168                                 // stop monitoring of mouse montion in rendering..
 169                                 return true;
 170                             },
 171                             'drag-motion' : function (w, ctx,  x,   y,   time, ud)
 172                             {
 173
 174
 175                                // console.log('DRAG MOTION');
 176                                 // status:
 177                                 // if lastCurrentNode == this.currentNode.. -- don't change anything..
 178                                 this.targetData = [];
 179                                 this.el.execute_script("Builder.overPos(" + x +','+ y + ");");
 180
 181                                 // A) find out from drag all the places that node could be dropped.
 182                                 var src = Gtk.drag_get_source_widget(ctx);
 183                                 if (!src.dropList) {
 184                                     Gdk.drag_status(ctx, 0, time);
 185                                     return true;
 186                                 }
 187                                 // b) get what we are over.. (from activeNode)
 188                                 // tree is empty.. - list should be correct..
 189                                 if (!LeftTree.get('model').currentTree) {
 190                                     Gdk.drag_status(ctx, Gdk.DragAction.COPY,time);
 191                                     return true;
 192
 193                                 }
 194                                 // c) ask tree where it should be dropped... - eg. parent.. (after node ontop)
 195
 196                                 var tg = LeftTree.get('model').findDropNode(this.activeNode, src.dropList);
 197                                 console.dump(tg);
 198                                 if (!tg.length) {
 199                                     Gdk.drag_status(ctx, 0,time);
 200                                     LeftTree.get('view').highlight(false);
 201                                     return true;
 202                                 }
 203
 204                                 // if we have a target..
 205                                 // -> highlight it! (in browser)
 206                                 // -> highlight it! (in tree)
 207
 208                                 Gdk.drag_status(ctx, Gdk.DragAction.COPY,time);
 209                                 LeftTree.get('view').highlight(tg);
 210                                 this.targetData = tg;
 211                                 // for tree we should handle this...
 212                                 return true;
 213                             },
 214                             "drag-drop"  : function (w, ctx,x,y,time, ud)
 215                             {
 216
 217                                 Seed.print("TARGET: drag-drop");
 218                                 is_valid_drop_site = true;
 219
 220
 221                                 Gtk.drag_get_data
 222                                 (
 223                                         w,         /* will receive 'drag-data-received' signal */
 224                                         ctx,        /* represents the current state of the DnD */
 225                                         LeftTree.atoms["STRING"],    /* the target type we want */
 226                                         time            /* time stamp */
 227                                 );
 228
 229
 230                                 /* No target offered by source => error */
 231
 232
 233                                 return  is_valid_drop_site;
 234
 235
 236                             },
 237                             "drag-data-received" : function (w, ctx,  x,  y, sel_data,  target_type,  time, ud)
 238                             {
 239                                 Seed.print("Browser: drag-data-received");
 240                                 delete_selection_data = false;
 241                                 dnd_success = false;
 242                                 /* Deal with what we are given from source */
 243                                 if( sel_data && sel_data.length ) {
 244
 245                                     if (ctx.action == Gdk.DragAction.ASK)  {
 246                                         /* Ask the user to move or copy, then set the ctx action. */
 247                                     }
 248
 249                                     if (ctx.action == Gdk.DragAction.MOVE) {
 250                                         delete_selection_data = true;
 251                                     }
 252                                     var source = Gtk.drag_get_source_widget(ctx);
 253
 254                                     Seed.print("Browser: source.DRAGDATA? " + source.dragData);
 255                                     if (this.targetData) {
 256                                         Seed.print(this.targetData);
 257                                         LeftTree.get('model').dropNode(this.targetData,  source.dragData);
 258                                     }
 259
 260
 261
 262                                     dnd_success = true;
 263
 264                                 }
 265
 266                                 if (dnd_success == false)
 267                                 {
 268                                         Seed.print ("DnD data transfer failed!\n");
 269                                 }
 270
 271                                 Gtk.drag_finish (ctx, dnd_success, delete_selection_data, time);
 272                                 return true;
 273                             }
 274
 275                            //'line-mark-activated' : line_mark_activated,
 276
 277
 278                         },
 279                         renderJS: function(data) {
 280                             this.renderedData = data;
 281                             var str = JSON.stringify(data) ;
 282
 283                             if (!this.ready) {
 284                                 console.log('not loaded yet');
 285                             }
 286                             Seed.print("RENDER:" + str);
 287                             File.write('/tmp/builder.debug.js', "Builder.render(" + JSON.stringify(data) + ");");
 288                             this.el.execute_script("Builder.render(" + JSON.stringify(data) + ");");
 289                         }
 290
 291                     }
 292                 ]
 293             }
 294
 295         ]
 296     }
 297
 298
 299 );
 300