git.roojs.org Git - Pman.Builder/blob - Pman.Builder.Tree.js

   1 /**
   2  * The code that manages the tree...
   3  *
   4  * used to be inside the Interface, but has proved to be to difficult to manage.
   5  *
   6  * In principle, simple event handling code is put in the interface, and any hard
   7  * lifting is done in nice files...
   8  *
   9  * It might be better to just extend 'tree', and use the extended class..
  10  *
  11  */
  12
  13 Pman.Builder.Tree = {
  14
  15     currentNode: false,
  16     dragProp: '',
  17
  18     appendNode : function(parent, inConfig, point) {
  19
  20
  21         var tree = Pman.Tab.BuilderTree.tree;
  22
  23         if (typeof(inConfig) == 'undefined') {
  24             return;
  25         }
  26         var items = [];
  27         if (typeof(inConfig) !== 'undefined' && inConfig.items) { // loading!
  28             items = inConfig.items;
  29             delete inConfig.items;
  30         }
  31
  32         var config = this.cloneConfig(inConfig);
  33
  34         var hidden =  config['builder.hidden'] || false;
  35
  36         if (!parent) {
  37             parent = tree.root;
  38         }
  39
  40         var newNode = new Roo.tree.TreeNode({
  41             text: this.configToText(config)
  42         });
  43
  44         newNode.elConfig = config;
  45
  46         //if (markUndo === true) {
  47         //Pman.Tab.Builder.markUndo("Add " + newNode.text);
  48         //
  49             // appends to our tree...
  50         console.log("APPEND NODE: " + point);
  51         switch(point) {
  52             case 'above':
  53                 parent.parentNode.insertBefore(newNode, parent);
  54                 parent.parentNode.expand(true);
  55                 break;
  56             case 'below':
  57                 // if it's the last node.. then we append..
  58                 var ix = parent.parentNode.indexOf(parent) + 1;
  59                 if (parent.parentNode.childNodes.length == ix) {
  60                      parent.parentNode.appendChild(newNode);
  61                      break;
  62                 }
  63                 var bef = parent.parentNode.childNodes[ix];
  64                 parent.parentNode.insertBefore(newNode, bef);
  65                 parent.parentNode.expand(true);
  66                 break;
  67
  68             case 'append':
  69             default:
  70                 parent.appendChild(newNode);
  71                 parent.expand(true);
  72                 break;
  73         }
  74
  75         newNode.ui.ctNode.style.display = hidden ? 'none' : '';
  76
  77         if (items.length) {
  78             Roo.each(items, function(i) {
  79                 this.appendNode(newNode, i);
  80             },this);
  81
  82         }
  83
  84
  85             /*
  86             -- panels with panes...
  87                 if (items && items.length) {
  88                         for (var i = 0; i < items.length; i++) {
  89                                         this.appendConfig(items[i], newNode, false);
  90                         }
  91                 }
  92                 if (opts.doUpdate !== false) {
  93                         this.updateForm(false, newNode);
  94                 }
  95             */
  96         return newNode;
  97
  98
  99     },
 100     clearAll : function() {
 101         var tree = Pman.Tab.BuilderTree.tree;
 102
 103         var rt = tree.root;
 104          if (rt.childNodes.length) {
 105             rt.removeChild(rt.childNodes[0]);
 106         }
 107
 108         tree.root.elConfig  = Roo.apply({ }, this.defaultElConfig());
 109         //var btop = Pman.Tab.BuilderTop;
 110         //if (btop.modsel && btop.modsel.lastData) {
 111         //    this.tree.root.elConfig.app = btop.modsel.lastData.app;
 112         //}
 113
 114         this.setCurrentNode(tree.root,true);
 115
 116     },
 117     cloneConfig : function(config) {
 118         if (!config) { return null; }
 119         var newConfig = {};
 120
 121         for (var i in config) {
 122             if (i.match(/^builder\./)) {
 123                 continue;
 124             }
 125             if (typeof config[i] == 'object') {
 126                  newConfig[i] = this.cloneConfig(config[i]);
 127             } else if (typeof config[i] != 'function') { // should this happen?
 128                  newConfig[i] = config[i];
 129             }
 130         }
 131         return newConfig;
 132     },
 133     configToText : function(c) {
 134
 135         var txt = [];
 136         c = c || {};
 137               var sr = (typeof(c['+buildershow']) != 'undefined') &&  !c['+buildershow'] ? true : false;
 138             if (sr) {
 139                 txt.push('<s>');
 140             }
 141             if (typeof(c['*prop']) != 'undefined')   { txt.push(c['*prop']+ ':'); }
 142         if (c.xtype)      { txt.push(c.xtype); }
 143         if (c.fieldLabel) { txt.push('[' + c.fieldLabel + ']'); }
 144         if (c.boxLabel)   { txt.push('[' + c.boxLabel + ']'); }
 145
 146
 147         if (c.layout)     { txt.push('<i>' + c.layout + '</i>'); }
 148         if (c.title)      { txt.push('<b>' + c.title + '</b>'); }
 149             if (c.header)    { txt.push('<b>' + c.header + '</b>'); }
 150             if (c.legend)      { txt.push('<b>' + c.legend + '</b>'); }
 151         if (c.text)       { txt.push('<b>' + c.text + '</b>'); }
 152             if (c.name)       { txt.push('<b>' + c.name+ '</b>'); }
 153         if (c.region)     { txt.push('<i>(' + c.region + ')</i>'); }
 154             if (c.dataIndex) { txt.push('[' + c.dataIndex+ ']'); }
 155             if (sr) {
 156                 txt.push('</s>');
 157             }
 158         return (txt.length == 0 ? "Element" : txt.join(" "));
 159
 160
 161     },
 162     currentNodeType : function() {
 163         return this.nodeXtype(this.currentNode);
 164
 165     },
 166     defaultElConfig : function() {
 167         return {
 168            xtype : '*top',
 169
 170             module : 'TestApp',
 171             part:   'Partname',
 172             modkey : 0,
 173             region : 'center',
 174             parent : 'Pman',
 175             name : 'Module Name',
 176             items: []
 177         };
 178     },
 179
 180     replaceCurrentNode : function(cfg)
 181     {
 182         var tree = Pman.Tab.BuilderTree.tree;
 183
 184         if (this.currentNode == tree.root) {
 185             return false;
 186         }
 187         var pn = this.currentNode.parentNode;
 188
 189         var ix = pn.indexOf(this.currentNode);
 190         pn.removeChild(this.currentNode);
 191
 192         if (!pn.childNodes.length) {
 193             this.appendNode(pn, cfg, 'append');
 194             return true;
 195         }
 196         if (!ix) {
 197             // first..
 198             this.appendNode(pn.childNodes[0], cfg, 'above');
 199             return true;
 200
 201         }
 202
 203         this.appendNode(pn.childNodes[ix-1], cfg, 'below');
 204
 205
 206         return true;
 207     },
 208
 209     collapseToggle : function()
 210     {
 211         var tree = Pman.Tab.BuilderTree.tree;
 212
 213         if (this.currentNode == tree.root) {
 214             return false;
 215         }
 216         var cfg = this.currentNode.elConfig;
 217         // things that can not be deleted...
 218         var hidden = cfg['builder.hidden'] || 0;
 219         if (hidden) {
 220             delete cfg['builder.hidden'];
 221         } else {
 222             cfg['builder.hidden'] = 1;
 223         }
 224
 225
 226         this.currentNode.ui.ctNode.style.display = !hidden ? 'none' : '';
 227
 228
 229         //this.setCurrentNode(pn.childNodes.length ? pn.childNodes[ix] : pn  ,true);
 230         return true;
 231     },
 232
 233
 234
 235
 236     deleteCurrent : function()
 237     {
 238
 239         var tree = Pman.Tab.BuilderTree.tree;
 240
 241         if (this.currentNode == tree.root) {
 242             return false;
 243         }
 244         var cfg = this.currentNode.elConfig;
 245         // things that can not be deleted...
 246
 247
 248         var pn = this.currentNode.parentNode;
 249
 250         // work out if we make the next or parent the 'current node'
 251         var ix = pn.indexOf(this.currentNode);
 252         //  console.log(ix);
 253         pn.removeChild(this.currentNode);
 254         if (pn.childNodes.length) {
 255             ix = Math.min(pn.childNodes.length-1, ix);
 256         }
 257         this.setCurrentNode(pn.childNodes.length ? pn.childNodes[ix] : pn  ,true);
 258         return true;
 259     },
 260     dupeNode : function(node)
 261     {
 262             var cfg = this.cloneConfig(node.elConfig);
 263
 264             var newNode = new Roo.tree.TreeNode(
 265             {
 266                     id: Roo.id(),
 267                     text: this.configToText(cfg)
 268             });
 269
 270             newNode.elConfig = cfg;
 271             node.eachChild(function(n) {
 272                 newNode.appendChild(this.dupeNode(n));
 273             },this);
 274
 275             return newNode;
 276
 277     },
 278     loadBJS : function(module, part)
 279     {
 280         var _t = this;
 281         new Pman.Request({
 282             url : baseURL + '/Roo/Builder_part.php',
 283             method : 'GET',
 284             params : {
 285                _id : part
 286             },
 287             success : function(res)
 288             {
 289                 // data is in..
 290                 Roo.log(res);
 291
 292                 if (!res.data.json.length) {
 293                     var cfg = _t.defaultElConfig();
 294                     cfg.name = Pman.Tab.BuilderTop.filesel.lastData.name;
 295                     cfg.part = Pman.Tab.BuilderTop.filesel.lastData.name;
 296                     cfg.module = '';
 297                     _t.loadTree(cfg);
 298                     return;
 299
 300                 }
 301
 302                 _t.loadTree(JSON.parse(res.data.json));
 303
 304
 305             }
 306
 307          })
 308
 309
 310
 311     },
 312     loadTree : function(o)
 313     {
 314         var tree = Pman.Tab.BuilderTree.tree;
 315         this.clearAll();
 316         tree.root.elConfig = o;
 317         if (typeof(o.xtype) == 'undefined') {
 318             o.xtype = '*top';
 319         }
 320         tree.root.setText(this.configToText(tree.root.elConfig));
 321         this.appendNode(tree.root, o.items[0]);
 322         tree.root.expand(true);
 323         Pman.Tab.BuilderView.panel.redraw();
 324         this.setCurrentNode(tree.root,true);
 325     },
 326     nodeXtype : function(n)
 327     {
 328         var tree = Pman.Tab.BuilderTree.tree;
 329         if (!n || !n.elConfig) {return ''; }
 330         var xt = n.elConfig.xtype ||  '';
 331         var xns= n.elConfig['|xns'] ||   '';
 332         xns += xns.length ? '.' : '';
 333         return xns + xt;
 334     },
 335     setCurrentNode : function(node,select)
 336     {
 337         var tree = Pman.Tab.BuilderTree.tree;
 338
 339         this.currentNode = node || tree.root;
 340
 341         //Pman.Tab.BuilderView.highlightElement(this.currentNode);
 342
 343         var p = Pman.Tab.BuilderProps.grid;
 344         if (p) { //may not be ready yet..
 345             p.setCurrrentNode(this.currentNode);
 346         }
 347
 348
 349         this.currentNode.setText(this.configToText(this.currentNode.elConfig));
 350
 351         if (select) { //&& node !== this.tree.root) {
 352             if (this.currentNode !== tree.root)  {
 353                      this.currentNode.ensureVisible();
 354               }
 355              this.currentNode.expand(false,false);
 356             this.currentNode.select();
 357         }
 358         // update palete..
 359         Pman.Tab.BuilderPalette.grid.getSelectionModel().clearSelections();
 360         Pman.Tab.BuilderPalette.grid.view.refresh();
 361
 362     },
 363     toJS : function(n)
 364     {
 365         if (!n) {
 366             var tree = Pman.Tab.BuilderTree.tree;
 367             return this.toJS(tree.root);
 368         }
 369         var _this = this;
 370         var ret = this.cloneConfig(n.elConfig);
 371         if (n.childNodes.length) {
 372             ret.items = [];
 373             n.eachChild(function(cn) {
 374                 ret.items.push(_this.toJS(cn));
 375             });
 376
 377         }
 378         return ret;
 379
 380
 381     },
 382
 383     /**
 384      * handle dropNode
 385      */
 386
 387     handleDropNode : function (e)
 388     {
 389         // nodedragover handles the allow/disallow..
 390
 391         /*
 392         tree - The TreePanel
 393         target - The node being targeted for the drop
 394         data - The drag data from the drag source
 395         point - The point of the drop - append, above or below
 396         source - The drag source
 397         rawEvent - Raw mouse event
 398         dropNode - Drop node(s) provided by the source OR you can supply node(s) to be inserted by setting them on this object.
 399         cancel - Set this to true to cancel the drop.
 400         */
 401
 402         var _t = this;
 403         var np = e.point == 'append' ? e.target : e.target.parentNode ; // new parent
 404
 405         if (!e.tree || !e.dropNode) {
 406
 407             // form palete...
 408             var data  = e.source.dragData.selections[0].data;
 409
 410             var xar = data.name.split('.');
 411
 412             var cfg = {
 413                 'xtype' : xar.pop(),
 414                 '|xns' : xar.join('.')
 415
 416             };
 417             if (this.dragProp.length > 1) {
 418                 cfg['*prop'] = this.dragProp;
 419             }
 420             // at this point it should of a set of options...
 421              var cls = cfg['|xns'] + '.' + cfg['xtype'];
 422
 423
 424             if (typeof(Pman.Builder.Wizard[cls]) != 'undefined') {
 425                 Pman.Dialog.BuilderAdd.show( cfg , function(fdata ) {
 426
 427                     _t.appendNode(e.target, fdata , e.point);
 428                      Pman.Tab.BuilderView.panel.redraw();
 429
 430                  });
 431                  return false;
 432              }
 433              this.appendNode(e.target, cfg, e.point);
 434               Pman.Tab.BuilderView.panel.redraw();
 435
 436             return false; // fixme drop of elements from palete..
 437         }
 438
 439         // always drop onto own parent
 440         if (np == e.dropNode.parentNode) {
 441             if (e.rawEvent.ctrlKey) {
 442                 e.dropNode = this.dupeNode(e.dropNode);
 443             }
 444             return true;
 445         }
 446         // can append has to use palete...
 447         // this code should be in nodedragover.
 448         if (e.dropNode) {
 449             var cfg = this.toJS(e.dropNode);
 450             this.appendNode(e.target, cfg, e.point);
 451         }
 452         Roo.log('no e.dropNode?');
 453         return false; // do not allow movement..
 454
 455         if (_this.canAppend(np, e.dropNode.elConfig)) {
 456             if (e.rawEvent.ctrlKey) {
 457                 e.dropNode = _this.dupeNode(e.dropNode);
 458
 459                 if (np.elConfig.xtype == 'GridEditor') {
 460                     e.dropNode.elConfig['*prop'] = 'field';
 461                 }
 462
 463             }
 464             return true;
 465         }
 466         Roo.log('can not drop ' + e.dropNode.elConfig.xtype + ' ontop of ' + np.elConfig.xtype);
 467
 468
 469
 470         return false;
 471
 472
 473     },
 474     handleDragOver : function(e)
 475     {
 476         Roo.log('nodedragover');
 477         Roo.log(e);
 478         // e.cancel..
 479         // if we have within the same tree:
 480           // dropNode (the node being dragged !!important!!)
 481           // point: below, append
 482           // target - node
 483        // for palete
 484            // dropNode = false;
 485            // grid = the grid...
 486            // source.dragData.selections[..]
 487
 488
 489        // we can only check parents... (we in theory can check dupe properties.. but let's ignore that for the time being.)
 490
 491        // ok off we go.
 492
 493        if (!e.dropNode) {
 494            // drag from palete..
 495            if (!e.source.dragData.selections.length) {
 496                e.cancel = true;
 497                return;
 498            }
 499            var drop_rec = e.source.dragData.selections[0];
 500            var drop_xtype = drop_rec.data.name;
 501            var ok_parents = drop_rec.json.parents;
 502
 503            Roo.log("TEST PARENTS: " + ok_parents.join(', '));
 504            var new_parent = this.nodeXtype((e.point == 'append') ? e.target :  e.target.parentNode);
 505            Roo.log("NEW PARENT: " + e.point + " = " + new_parent);
 506
 507            // see if the new_parent is actually in the list of ok_parents
 508            e.cancel = true;
 509            this.dragProp = '';
 510            var _t = this;
 511            Roo.each(ok_parents, function(n) {
 512                 Roo.log("compare "+n+" ? " + new_parent);
 513                 if (n == new_parent || n.split(':').shift() == new_parent) {
 514                    Roo.log("got match!");
 515                    e.cancel = false;
 516                    _t.dragProp = (n == new_parent) ?  '' : n.split(':').pop();
 517                    return true;
 518                 }
 519                return null;
 520             });
 521
 522            // done all the checks...
 523            return;
 524
 525         }
 526
 527
 528         // have a drop node - hence comming from the same object..
 529         var drop_xtype = this.nodeXtype(e.dropNode);
 530         // currently we can not determine validity..
 531         e.cancel = false;
 532         return ;
 533
 534
 535
 536     },
 537     save : function()
 538     {
 539        // first see if first element has a name.. - we can not save otherwise..
 540         var t = Pman.Tab.BuilderTree.tree;
 541         if (!t.root.elConfig.name.length) {
 542             Roo.MessageBox.alert("Error", "No name set for form");
 543             return;
 544         }
 545
 546         var  sid = (typeof(sid) == 'undefined') ?
 547              (Pman.Tab.BuilderTop.filesel.lastData ? Pman.Tab.BuilderTop.filesel.lastData.id : 0) : sid;
 548
 549
 550         var js = this.toJS();
 551         var render = new Pman.Builder.JsRender(js);
 552
 553         // console.log(js);
 554         // console.log(json);
 555
 556         // check the select box to see if that has been set... - save it with that id..
 557
 558         //var _this = this;
 559
 560         Pman.request({
 561             url: baseURL + '/Roo/Builder_part.php',
 562             method : 'POST',
 563             params : {
 564                 json : Roo.encode(js, null, 4),
 565                 jsource : render.toSource(),
 566                 name :   js.name,
 567                 module_id : Pman.Tab.BuilderTop.modsel.getValue(),
 568                 id : sid
 569             },
 570             success : function(data) {
 571                 // set the fileSel!!
 572                 console.log(data);
 573                 //if (data) {
 574                 //    _this.filesel.setFromData(data);
 575 //                    if (cb) {
 576 //                        cb.call(_this,data);
 577   //                  }
 578 //                    _this.postCode(data);
 579 //                }
 580             }
 581         });
 582 }
 583
 584
 585
 586 }