git.roojs.org Git - Pman.Builder/blob - Pman.Tab.BuilderErm.js

   1 //<script type="text/javascript">
   2
   3
   4 /*
   5
   6
   7
   8
   9
  10
  11 Pman.Tab.BuilderErm = {
  12
  13
  14     init: function(el)
  15     {
  16
  17         if (this.svg) {
  18
  19             return;
  20         }
  21         this.el = el;
  22         this.wrapper = el;
  23
  24         var _this = this;
  25         if (Roo.isIE) {
  26
  27             this.embed = el.createChild({
  28
  29                 tag : 'embed',
  30                 codebase: 'http://www.adobe.com/svg/viewer/install/',
  31                 classid: 'clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2',
  32                 pluginspage: 'http://www.adobe.com/svg/viewer/install/',
  33                 src: 'about:blank',
  34                 width: 10000,
  35                 height: 4000,
  36                 type: 'image/svg+xml'
  37             });
  38             this.wrapper = this.embed;
  39
  40         }
  41
  42
  43
  44
  45         this.svg =  this.wrapper.createChild( {
  46              ns: 'svg',
  47              xmlns: 'http://www.w3.org/2000/svg',
  48              tag: 'svg',
  49              width: 100,
  50              height: 400
  51
  52        });
  53        this.grp = this.svg.createChild( {
  54              ns: 'svg',
  55              tag: 'g'
  56        });
  57           //this.paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);
  58
  59         this.currentX = this.START_X;
  60                 this.currentY = this.START_Y;
  61
  62
  63         Pman.request({
  64             url: baseURL+'/Builder/ERM.php',
  65             method: 'GET',
  66             success: function (data) {
  67                 _this.tables = data.tables;
  68                 _this.links = data.links;
  69                 _this.drawTables();
  70                 _this.svg.set({
  71                     width: _this.maxX,
  72                     height: _this.maxY
  73                 });
  74
  75             }
  76         });
  77        // el.dom.addEventListener("DOMMouseScroll", function(e) { _this.mouseScroll(e); }, false);
  78        // el.dom.addEventListener("mousewheel", function(e) { _this.mouseScroll(e); }, false);
  79         el.dom.addEventListener("scroll", function(e) { _this.redrawTables(); }, false);
  80         //document.addEventListener("keypress", function(e) { _this.keyPress(e); }, false);
  81         //this.grp.on("mousedown", function(e) { _this.mouseDown(e); }, false);
  82
  83             this.svg.on("mouseup", function(e) { _this.mouseUp(e); } , false);
  84             this.svg.on("mousemove", function(e) { _this.mouseMove(e); }, false);
  85             //document.addEventListener("mouseout", mouseUp, false);
  86
  87         },
  88
  89
  90
  91
  92
  93     paper : false,
  94
  95     FONT_SIZE : 12,
  96     TEXT_PAD : 4,
  97     START_X : 10,
  98     START_Y : 10,
  99     maxTableHeight : 0,
 100     currentX : 0,
 101     currentY : 0,
 102     maxX : 0,
 103     maxY : 0,
 104     positions : false,
 105     lpositions : false,
 106     currentScale: 1.0,
 107     groupId : 0,
 108     tableLocations : [],
 109     tableMap : { },
 110     widthLimit: 3000,
 111
 112     drawTables : function() {
 113                 this.el.mask("Drawing");
 114                 this.tableLocations = [];
 115                 for (var i in this.tables) {
 116             var data = this.drawTable( i, this.tables[i], this.groupId++ );
 117                         this.tableLocations.push(data);
 118             this.tableMap[data.name] = data;
 119             //if (this.groupId > 10) { break; }
 120
 121            // return;
 122                 }
 123                 this.el.unmask();
 124                 return ;
 125         },
 126
 127     redrawTables : function()
 128     {
 129         console.log('redraw');
 130         Roo.each(this.tableLocations , this.renderTable , this);
 131
 132     },
 133
 134     renderTable : function ( data)
 135     {
 136
 137         var _this = this;
 138         if (!data.grp) { // always make the group..
 139             data.grp = this.grp.createChild({
 140                 ns: 'svg',
 141                 tag: 'g'
 142             });
 143         }
 144         //
 145         data.grp.dom.tdata = data;
 146
 147
 148
 149         if (!this.canSee({
 150                 top: data.rectX,
 151                 left:  data.rectY,
 152                 right: data.rectX + data.rectW,
 153                 bottom: data.rectY + data.rectH
 154             })
 155         ) {
 156
 157             //console.log('can Not see : ' + data.name);
 158
 159             if (!data.rect) { // already deleted!!!
 160                 return;
 161             }
 162             // delete everythting..
 163             while (data.grp.dom.childNodes.length) {
 164                 data.grp.dom.removeChild(data.grp.dom.firstChild);
 165             }
 166             data.rect = false;
 167             data.rectHead = false;
 168             data.rectText = false;
 169
 170             for (var i =0; i <  data.cols.length; i++) {
 171                 data.cols[i].textH = false;
 172                 data.cols[i].textD = false;
 173             }
 174             return;
 175         }
 176
 177
 178
 179
 180         if (!data.rect) {
 181             data.rect = data.grp.createChild({
 182                 ns: 'svg',
 183                 tag: 'rect',
 184                 x:      0,
 185                 y:      0,
 186                 width:  data.rectW,
 187                 height: data.rectH,
 188                  r:"0", rx:"0", ry:"0",
 189                  fill:"none", stroke:"#000",
 190                 //id : tableId,
 191                 'class' : 'b-erm-rect'
 192             });
 193             data.rect.on("mousedown", function(e) { _this.mouseDown(e); }, false);
 194         }
 195
 196         if (!data.rectHead) {
 197             data.rectHead =  data.grp.createChild({
 198                 ns: 'svg',
 199                 tag: 'rect',
 200                 x: 0,
 201                 y: 0,
 202                 width: data.rectW,
 203                 height: this.TEXT_PAD + this.FONT_SIZE+ 8,
 204                 //id : 'r2-tableId',
 205                 'class' : 'b-erm-recthead'
 206             });
 207         }
 208
 209
 210         if (!data.rectText) {
 211                 //add the table name
 212             data.rectText =  data.grp.createChild({
 213                 ns: 'svg',
 214                 tag: 'text',
 215                 x:  this.TEXT_PAD + 10,
 216                 y:   this.TEXT_PAD + this.FONT_SIZE+4,
 217                 'class' : 'b-erm-tblname',
 218                 cn : [  data.name  ]
 219             });
 220         }
 221
 222
 223
 224         var drawHowMuch = this.drawHowMuch();
 225         // sc = 0  (nothing)
 226         // sc = 1 (name)
 227         // sc = 2 (both)
 228
 229
 230         for (var i =0; i <  data.cols.length; i++) {
 231             var c = data.cols[i];
 232             if (drawHowMuch < 1 && c.textH) {
 233                 c.textH.remove();
 234                 c.textH = false;
 235             }
 236             if (drawHowMuch < 2 && c.textD) {
 237                 c.textD.remove();
 238                 c.textD = false;
 239             }
 240
 241             if (drawHowMuch < 1) {
 242                 continue;  // dont draw..
 243             }
 244
 245
 246             if (!c.textH) {
 247                 c.textH = data.grp.createChild({
 248                     ns: 'svg',
 249                     tag: 'text',
 250                     x:  c.textX,
 251                     y: c.textY,
 252                     'class' : 'b-erm-colname',
 253                     cn : [
 254                         {
 255                             ns: 'svg',
 256                             tag: 'tspan',
 257                             cn : [ c.name ]
 258                         }
 259                     ]
 260                 });
 261             }
 262
 263             if (drawHowMuch < 2) {
 264                 continue;
 265             }
 266             if (!c.textD) {
 267                 c.textD = c.textH.createChild({
 268                     ns: 'svg',
 269                     tag: 'tspan',
 270                     'class' : 'b-erm-coltype',
 271                     cn : [ '\u00a0' + c.desc ]
 272
 273                 });
 274             }
 275
 276
 277
 278         }
 279         console.log('translate(' + data.rectX + "," + data.rectY + ')');
 280         data.grp.dom.setAttribute('transform', 'translate(' + data.rectX + "," + data.rectY + ')');
 281
 282     },
 283
 284
 285     drawHowMuch : function ()
 286     {
 287         if (this.currentScale > 0.9) {
 288             return 2;
 289         }
 290         if (this.currentScale > 0.5) {
 291             return 1;
 292         }
 293         return 0;
 294     },
 295
 296     canSee: function (box)
 297     {
 298         // work out limits of screen!!!
 299         var scroll = this.el.getScroll(); // perhasp we should cache these!!!!
 300         var outersize = this.el.getSize();
 301         // get width / height from svg element..
 302         // diviede by the scale to calc position?
 303         var scale = 1.0/this.currentScale;
 304
 305         var vbox = {
 306             top:   scale * scroll.top,
 307             left:  scale * scroll.left,
 308             bottom:  scale * (scroll.top +  outersize.height),
 309             right: scale * (scroll.left +  outersize.width)
 310         };
 311
 312         //console.log('check See: ---');
 313         //console.log('window: ' + vbox.toSource());
 314         //console.log('tablebox: ' + box.toSource());
 315         //console.log('---');
 316         /// option a) - any of the points are inside the box..
 317
 318         // box.top/box.left
 319         if (
 320             (vbox.bottom > box.top && box.top > vbox.top ) &&
 321             (vbox.right > box.left && box.left > vbox.left )
 322         ) {
 323             return true;
 324         }
 325         // box.bottom / box right
 326         if (
 327             (vbox.bottom > box.bottom && box.bottom  > vbox.top ) &&
 328             (vbox.right > box.right && box.right > vbox.left )
 329         ) {
 330             return true;
 331         }
 332         // points outside!, but body inside..
 333         if (
 334             (box.right > vbox.left && box.left < vbox.right) &&
 335             (box.bottome > vbox.top && box.top < vbox.bottom )
 336         ) {
 337             return true;
 338         }
 339         return false;
 340
 341
 342
 343     },
 344
 345
 346
 347
 348     drawTable : function ( name, cols, groupId )
 349     {
 350                 //alert(table.toSource());
 351                 // create a group
 352
 353
 354         var ret = { links: [] };
 355
 356
 357
 358
 359                 //tabGrp.node.setAttribute("id", "G" + tableId);
 360                 //draw the box - attempt some layout
 361
 362                 var maxWidth = 0;
 363                 var length = 0;
 364                 for (var i in cols ) {
 365                         var sl = i.length + cols[i].length + 1;
 366                         maxWidth = maxWidth > sl ? maxWidth : sl;
 367                         length++;
 368                 }
 369
 370
 371                 var tableWidth = (maxWidth*this.FONT_SIZE *0.5) + (2*this.TEXT_PAD) + 10;
 372                 //height of the box is table name+num columns*font height + padding
 373
 374                 var  tableHeight = ((length+1)*(this.FONT_SIZE*1.2)) +
 375                                 ((length +1)*this.TEXT_PAD) + 5;
 376
 377                 this.maxTableHeight = (tableHeight > this.maxTableHeight)? tableHeight : this.maxTableHeight;
 378
 379                 // preserve the existing position of the table
 380                 // obviously this will look rubbish if there are new tables and
 381                  // existing ones
 382                 var box = null;
 383
 384                 if (typeof(this.positions[name]) == "undefined") {
 385                         box = {
 386                                 x: this.currentX,
 387                                 y: this.currentY,
 388                                 width: tableWidth,
 389                                 height: tableHeight
 390                         };
 391                         //store position, may be handy later
 392                         this.positions[name] = box;
 393                 } else {
 394                         box = this.positions[name];
 395                         this.currentX = box.x;
 396                         this.currentY = box.y;
 397                 }
 398
 399         ret.rectX = this.currentX;
 400         ret.rectY = this.currentY;
 401         ret.rectW = tableWidth;
 402         ret.rectH = tableHeight;
 403
 404
 405                 var textY =  this.TEXT_PAD + this.FONT_SIZE+4;
 406
 407         ret.name = name;
 408
 409
 410
 411                 textY += (this.TEXT_PAD*2) + this.FONT_SIZE;
 412
 413                 //add the column name and type  text
 414
 415         ret.cols = [];
 416         ret.linkPos = { };
 417
 418                 for (var i in  cols) {
 419                         //String[] colAndType : ) {
 420
 421
 422             ret.cols.push( {
 423                 textX : this.TEXT_PAD + 10,
 424                 textY : textY,
 425                 name : i,
 426                 desc:  cols[i]
 427             })
 428
 429             ret.linkPos[i] = {
 430                                 l: 0,
 431                                 r: tableWidth,
 432                                 y: textY - 4
 433                         };
 434
 435                         this.lpositions[name + '.' + i] = {
 436                                 l: 0,
 437                                 r:   tableWidth,
 438                                 y: textY - 4
 439                         };
 440
 441
 442                         textY += this.TEXT_PAD + this.FONT_SIZE;
 443                 }
 444
 445
 446                 this.currentX += tableWidth + 10;
 447                 this.maxX = (this.maxX<this.currentX) ? this.currentX : this.maxX;
 448                 if (this.currentX > this.widthLimit) {
 449                         this.currentX = this.START_X;
 450                         this.currentY += this.maxTableHeight + 10;
 451                 }
 452                 //alert(this.currentY);
 453                 this.maxY = ((this.currentY + tableHeight) > this.maxY) ? this.currentY + tableHeight : this.maxY;
 454                 //close the group
 455
 456                 //tabGrp.node.setAttribute("tableName", name);
 457         var _this = this;
 458
 459
 460         this.renderTable(ret);
 461                 return ret;
 462         },
 463     zoom : function(factor)
 464     {
 465             var outersize = this.el.getSize();
 466             var de = this.grp.dom;
 467             this.currentScale = this.currentScale || 1.0;
 468            // var oldTranslate = { x: de.currentTranslate.x, y: de.currentTranslate.y };
 469             var s = 1.3;
 470
 471             this.currentScale *=  factor;
 472
 473             de.setAttribute('transform','scale('+this.currentScale+')');
 474
 475                         // correct currentTranslate so zooming is to the center of the viewport:
 476                         //sessionStorage.zoom = "" + de.currentScale ;
 477             this.svg.set({
 478                     width: Math.max(this.maxX * this.currentScale, outersize.width),
 479                     height: Math.max(this.maxY * this.currentScale, outersize.height)
 480              });
 481
 482             this.redrawTables();
 483
 484             return;
 485
 486
 487
 488             var vp_width, vp_height;
 489             try {
 490                 vp_width = de.viewport.width;
 491                 vp_height = de.viewport.height;
 492             }
 493             catch (e) {
 494                 // work around difficiency in moz ('viewport' property not implemented)
 495                 vp_width = window.innerWidth;
 496                 vp_height = window.innerHeight;
 497             }
 498             //de.currentTranslate.x = mouseX - (de.currentScale/oldScale) * (mouseX - oldTranslate.x);
 499             //de.currentTranslate.y = mouseY - (de.currentScale/oldScale) * (mouseY - oldTranslate.y);
 500
 501             //de.currentTranslate.x = vp_width/2 - (de.currentScale/oldScale) * (vp_width/2 - oldTranslate.x + (mouseX - vp_width/2));
 502             //de.currentTranslate.y = vp_height/2 - (de.currentScale/oldScale) * (vp_height/2 - oldTranslate.y + (mouseY - vp_height/2));
 503
 504
 505         },
 506
 507
 508     // mouse down applied to elements (other mouse events are handled by doc)
 509     mouseDown : function (e) {
 510         this.draggingElement = e.getTarget().parentNode;
 511
 512         //var tdata = this.draggingElement.tdata;
 513         var xy = e.getXY();
 514         this.startX = xy[0];
 515         this.startY = xy[0];
 516         return;
 517
 518      //   console.log('set drag element');
 519         var p = this.svg.dom.createSVGPoint();
 520         p.x = e.getXY()[0];
 521         p.y = e.getXY()[1];
 522
 523         //var m = this.getScreenCTM(this.svg.dom);
 524
 525         //p = p.matrixTransform(m.inverse());
 526         this.nMouseOffsetX = p.x - parseInt(this.draggingElement.getAttribute("dragx") || 0);
 527         this.nMouseOffsetY = p.y - parseInt(this.draggingElement.getAttribute("dragy") || 0);
 528
 529     },
 530     mouseUp : function (evt) {
 531         //console.log(evt);
 532
 533         if (!this.draggingElement ) {
 534             return;
 535         }
 536         var tdata = this.draggingElement.tdata;
 537         tdata.rectX = this.lastX;
 538         tdata.rectY = this.lastY;
 539
 540         this.nMouseOffsetX = 0;
 541         this.nMouseOffsetY = 0;
 542         this.draggingElement = null;
 543
 544
 545         this.redrawTables();
 546
 547        //console.log('unset drag element');
 548
 549     },
 550     mouseMove : function (e) {
 551         if(!this.draggingElement ) {
 552             return;
 553         }
 554
 555         var xy = e.getXY();
 556         var tdata = this.draggingElement.tdata;
 557         var x = this.currentScale * (xy[0] - this.startX);
 558         var y = this.currentScale * (xy[1] - this.startY);
 559         this.lastX = (tdata.rectX + x);
 560         this.lastY = (tdata.rectY + y);
 561
 562
 563
 564         this.draggingElement.setAttribute("transform",
 565             "translate(" + this.lastX + "," + this.lastY + ")");
 566         return;
 567
 568
 569
 570         var p = this.svg.dom.createSVGPoint();
 571         p.x = e.getXY()[0];
 572         p.y = e.getXY()[1];
 573
 574         var m = this.getScreenCTM(this.svg.dom);
 575
 576         p = p.matrixTransform(m.inverse());
 577         p.x -= this.nMouseOffsetX;
 578         p.y -= this.nMouseOffsetY;
 579       //  console.log(' drag ' + p.x + ',' + p.y );
 580
 581         this.draggingElement.setAttribute("dragx", p.x);
 582         this.draggingElement.setAttribute("dragy", p.y);
 583         this.draggingElement.setAttribute("transform", "translate(" + p.x + "," + p.y + ")");
 584         //this.draggingElement.moveCallback(
 585           //  Pman.Tab.BuilderErm.Movable.draggingElement.obj);
 586
 587
 588     },
 589
 590
 591
 592
 593      getScreenCTM : function (doc){
 594         if(doc.getScreenCTM) {
 595             return doc.getScreenCTM();
 596         }
 597
 598         var root=doc
 599         var sCTM= root.createSVGMatrix()
 600
 601         var tr= root.createSVGMatrix()
 602         var par=root.getAttribute("preserveAspectRatio")
 603         if (par==null || par=="") par="xMidYMid meet"//setting to default value
 604         parX=par.substring(0,4) //xMin;xMid;xMax
 605         parY=par.substring(4,8)//YMin;YMid;YMax;
 606         ma=par.split(" ")
 607         mos=ma[1] //meet;slice
 608
 609         //get dimensions of the viewport
 610         sCTM.a= 1
 611         sCTM.d=1
 612         sCTM.e= 0
 613         sCTM.f=0
 614
 615
 616         w=root.getAttribute("width")
 617         if (w==null || w=="") w=innerWidth
 618
 619         h=root.getAttribute("height")
 620         if (h==null || h=="") h=innerHeight
 621
 622         // Jeff Schiller:  Modified to account for percentages - I'm not
 623         // absolutely certain this is correct but it works for 100%/100%
 624         if(w.substr(w.length-1, 1) == "%") {
 625             w = (parseFloat(w.substr(0,w.length-1)) / 100.0) * innerWidth;
 626         }
 627         if(h.substr(h.length-1, 1) == "%") {
 628             h = (parseFloat(h.substr(0,h.length-1)) / 100.0) * innerHeight;
 629         }
 630
 631         // get the ViewBox
 632         vba=root.getAttribute("viewBox")
 633         if(vba==null) vba="0 0 "+w+" "+h
 634         var vb=vba.split(" ")//get the viewBox into an array
 635
 636         //--------------------------------------------------------------------------
 637         //create a matrix with current user transformation
 638         tr.a= this.currentScale;
 639         tr.d=this.currentScale;
 640         tr.e= root.currentTranslate.x;
 641         tr.f=root.currentTranslate.y;
 642
 643
 644         //scale factors
 645         sx=w/vb[2]
 646         sy=h/vb[3]
 647
 648
 649         //meetOrSlice
 650         if(mos=="slice"){
 651         s=(sx>sy ? sx:sy)
 652         }else{
 653         s=(sx<sy ? sx:sy)
 654         }
 655
 656         //preserveAspectRatio="none"
 657         if (par=="none"){
 658             sCTM.a=sx//scaleX
 659             sCTM.d=sy//scaleY
 660             sCTM.e=- vb[0]*sx //translateX
 661             sCTM.f=- vb[0]*sy //translateY
 662             sCTM=tr.multiply(sCTM)//taking user transformations into acount
 663
 664             return sCTM
 665         }
 666
 667
 668         sCTM.a=s //scaleX
 669         sCTM.d=s//scaleY
 670         //-------------------------------------------------------
 671         switch(parX){
 672             case "xMid":
 673                 sCTM.e=((w-vb[2]*s)/2) - vb[0]*s //translateX
 674                 break;
 675
 676             case "xMin":
 677                 sCTM.e=- vb[0]*s//translateX
 678                 break;
 679
 680             case "xMax":
 681                 sCTM.e=(w-vb[2]*s)- vb[0]*s //translateX
 682                 break;
 683
 684         }
 685         //------------------------------------------------------------
 686         switch(parY){
 687             case "YMid":
 688                 sCTM.f=(h-vb[3]*s)/2 - vb[1]*s //translateY
 689                 break;
 690
 691             case "YMin":
 692                 sCTM.f=- vb[1]*s//translateY
 693                 break;
 694
 695             case "YMax":
 696                 sCTM.f=(h-vb[3]*s) - vb[1]*s //translateY
 697                 break;
 698
 699         }
 700         sCTM=tr.multiply(sCTM)//taking user transformations into acount
 701
 702         return sCTM
 703     },
 704
 705
 706
 707
 708
 709
 710
 711
 712
 713
 714
 715
 716
 717         keyPress: function (evt) {
 718                 //alert(evt.charCode);
 719         return;
 720                 if (evt.charCode != 115) { // s = save!
 721                         return;
 722                 }
 723                 var w = window.open("about:blank", "default.js");
 724                 w.document.write("<H1> Save this as default.js</H1><code>");
 725                 w.document.write("var positions = " + sessionStorage.positions + ";");
 726                 w.document.write("</code>");
 727                 w.document.close();
 728                 //w.close();
 729
 730
 731         },
 732
 733
 734     drawConnections  : function()
 735     {
 736         //alert(this.positions.toSource());
 737         for(var tn in this.links) {
 738
 739             for (var linkfrom in this.links[tn]) {
 740
 741                 var link = {
 742                     ontable : this.tableMap[tn],
 743                     oncol : linkfrom,
 744                     totable: this.tableMap[this.links[tn][0]],
 745                     tocol: this.links[tn][1]
 746                 };
 747                 link.fromtable.links.push(link);
 748                 link.totable.links.push(link);
 749             }
 750         }
 751
 752     },
 753
 754
 755
 756 };
 757 */
 758 /*
 759
 760 Pman.Tab.BuilderErm.Movable = function(obj, eobj, moveCallback)
 761 {
 762     var _this =this;
 763     this.nMouseOffsetX = 0;
 764     this.nMouseOffsetY = 0;
 765
 766     if (!eobj) {
 767             eobj = obj;
 768     }
 769     eobj.addEventListener("mousedown", function(e) { _this.mouseDown(e); }, false);
 770     if (!Pman.Tab.BuilderErm.Movable.loaded) {
 771             document.addEventListener("mouseup", function(e) { _this.mouseUp(e); } , false);
 772             document.addEventListener("mousemove", function(e) { _this.mouseMove(e); }, false);
 773             //document.addEventListener("mouseout", mouseUp, false);
 774             Pman.Tab.BuilderErm.Movable.loaded = true;
 775         }
 776
 777     obj.setAttribute('dragx', '0');
 778     obj.setAttribute('dragy', '0');
 779         this.obj = obj;
 780         this.moveCallback = moveCallback;
 781         var _this = this;
 782 }
 783 Pman.Tab.BuilderErm.Movable.draggingElement = false;
 784 Pman.Tab.BuilderErm.Movable.loaded = false;
 785
 786 Roo.apply(Pman.Tab.BuilderErm.Movable.prototype, {
 787
 788
 789     // Following is from Holger Will since ASV3 and O9 do not support getScreenTCM()
 790     // See http://groups.yahoo.com/group/svg-developers/message/50789
 791     getScreenCTM : function (doc){
 792         if(doc.getScreenCTM) {
 793             return doc.getScreenCTM();
 794         }
 795
 796         var root=doc
 797         var sCTM= root.createSVGMatrix()
 798
 799         var tr= root.createSVGMatrix()
 800         var par=root.getAttribute("preserveAspectRatio")
 801         if (par==null || par=="") par="xMidYMid meet"//setting to default value
 802         parX=par.substring(0,4) //xMin;xMid;xMax
 803         parY=par.substring(4,8)//YMin;YMid;YMax;
 804         ma=par.split(" ")
 805         mos=ma[1] //meet;slice
 806
 807         //get dimensions of the viewport
 808         sCTM.a= 1
 809         sCTM.d=1
 810         sCTM.e= 0
 811         sCTM.f=0
 812
 813
 814         w=root.getAttribute("width")
 815         if (w==null || w=="") w=innerWidth
 816
 817         h=root.getAttribute("height")
 818         if (h==null || h=="") h=innerHeight
 819
 820         // Jeff Schiller:  Modified to account for percentages - I'm not
 821         // absolutely certain this is correct but it works for 100%/100%
 822         if(w.substr(w.length-1, 1) == "%") {
 823             w = (parseFloat(w.substr(0,w.length-1)) / 100.0) * innerWidth;
 824         }
 825         if(h.substr(h.length-1, 1) == "%") {
 826             h = (parseFloat(h.substr(0,h.length-1)) / 100.0) * innerHeight;
 827         }
 828
 829         // get the ViewBox
 830         vba=root.getAttribute("viewBox")
 831         if(vba==null) vba="0 0 "+w+" "+h
 832         var vb=vba.split(" ")//get the viewBox into an array
 833
 834         //--------------------------------------------------------------------------
 835         //create a matrix with current user transformation
 836         tr.a= root.currentScale
 837         tr.d=root.currentScale
 838         tr.e= root.currentTranslate.x
 839         tr.f=root.currentTranslate.y
 840
 841
 842         //scale factors
 843         sx=w/vb[2]
 844         sy=h/vb[3]
 845
 846
 847         //meetOrSlice
 848         if(mos=="slice"){
 849         s=(sx>sy ? sx:sy)
 850         }else{
 851         s=(sx<sy ? sx:sy)
 852         }
 853
 854         //preserveAspectRatio="none"
 855         if (par=="none"){
 856             sCTM.a=sx//scaleX
 857             sCTM.d=sy//scaleY
 858             sCTM.e=- vb[0]*sx //translateX
 859             sCTM.f=- vb[0]*sy //translateY
 860             sCTM=tr.multiply(sCTM)//taking user transformations into acount
 861
 862             return sCTM
 863         }
 864
 865
 866         sCTM.a=s //scaleX
 867         sCTM.d=s//scaleY
 868         //-------------------------------------------------------
 869         switch(parX){
 870             case "xMid":
 871                 sCTM.e=((w-vb[2]*s)/2) - vb[0]*s //translateX
 872                 break;
 873
 874             case "xMin":
 875                 sCTM.e=- vb[0]*s//translateX
 876                 break;
 877
 878             case "xMax":
 879                 sCTM.e=(w-vb[2]*s)- vb[0]*s //translateX
 880                 break;
 881
 882         }
 883         //------------------------------------------------------------
 884         switch(parY){
 885             case "YMid":
 886                 sCTM.f=(h-vb[3]*s)/2 - vb[1]*s //translateY
 887                 break;
 888
 889             case "YMin":
 890                 sCTM.f=- vb[1]*s//translateY
 891                 break;
 892
 893             case "YMax":
 894                 sCTM.f=(h-vb[3]*s) - vb[1]*s //translateY
 895                 break;
 896
 897         }
 898         sCTM=tr.multiply(sCTM)//taking user transformations into acount
 899
 900         return sCTM
 901     },
 902
 903
 904
 905     mouseDown : function (evt) {
 906
 907         Pman.Tab.BuilderErm.Movable.draggingElement = _this;
 908
 909         var p = document.documentElement.createSVGPoint();
 910         p.x = evt.clientX;
 911         p.y = evt.clientY;
 912
 913         var m = getScreenCTM(document.documentElement);
 914
 915         p = p.matrixTransform(m.inverse());
 916         _this.nMouseOffsetX = p.x - parseInt(Pman.Tab.BuilderErm.Movable.draggingElement.obj.getAttribute("dragx"));
 917         _this.nMouseOffsetY = p.y - parseInt(Pman.Tab.BuilderErm.Movable.draggingElement.obj.getAttribute("dragy"));
 918
 919     },
 920     mouseUp : function (evt) {
 921
 922         if (!Pman.Tab.BuilderErm.Movable.draggingElement ) {
 923             return;
 924         }
 925         Pman.Tab.BuilderErm.Movable.draggingElement.nMouseOffsetX = 0;
 926         Pman.Tab.BuilderErm.Movable.draggingElement.nMouseOffsetY = 0;
 927         Pman.Tab.BuilderErm.Movable.draggingElement = null;
 928
 929     },
 930     mouseMove : function (evt) {
 931         var p = document.documentElement.createSVGPoint();
 932         p.x = evt.clientX;
 933         p.y = evt.clientY;
 934
 935         var m = getScreenCTM(document.documentElement);
 936         if(Pman.Tab.BuilderErm.Movable.draggingElement ) {
 937             p = p.matrixTransform(m.inverse());
 938             p.x -= Pman.Tab.BuilderErm.Movable.draggingElement.nMouseOffsetX;
 939             p.y -= Pman.Tab.BuilderErm.Movable.draggingElement.nMouseOffsetY;
 940
 941
 942             Pman.Tab.BuilderErm.Movable.draggingElement.obj.setAttribute("dragx", p.x);
 943             Pman.Tab.BuilderErm.Movable.draggingElement.obj.setAttribute("dragy", p.y);
 944             Pman.Tab.BuilderErm.Movable.draggingElement.obj.setAttribute("transform", "translate(" + p.x + "," + p.y + ")");
 945             Pman.Tab.BuilderErm.Movable.draggingElement.moveCallback(Pman.Tab.BuilderErm.Movable.draggingElement.obj);
 946         }
 947
 948
 949     }
 950
 951
 952 });
 953
 954
 955
 956 // Rectangle ??
 957
 958 Pman.Tab.BuilderErm.SVGDiagram = function()
 959 {
 960
 961     this.positions = {};
 962     this.lpositions = {};
 963
 964
 965
 966 }
 967 Roo.apply(Pman.Tab.BuilderErm.SVGDiagram.Prototype, {
 968
 969
 970
 971         FONT_SIZE : 12,
 972     TEXT_PAD : 4,
 973     START_X : 10,
 974     START_Y : 10,
 975     maxTableHeight : 0,
 976     currentX : 0,
 977     currentY : 0,
 978     maxX : 0,
 979     maxY : 0,
 980     positions : false,
 981     lpositions : false,
 982
 983
 984     savePositions :function() {
 985             //alert('save');
 986             sessionStorage.positions = this.positions.toSource();
 987         },
 988
 989
 990         loadPositions : function () {
 991                  if (sessionStorage.getItem("positions")) {
 992                         eval ("this.positions = " + sessionStorage.positions);
 993                 }
 994         },
 995
 996
 997                 this.currentX += tableWidth + 10;
 998                 this.maxX = (this.maxX<this.currentX) ? this.currentX : this.maxX;
 999                 if (this.currentX > this.widthLimit) {
1000                         this.currentX = this.START_X;
1001                         this.currentY += this.maxTableHeight + 10;
1002                 }
1003                 //alert(this.currentY);
1004                 this.maxY = ((this.currentY + tableHeight) > this.maxY) ? this.currentY + tableHeight : this.maxY;
1005                 //close the group
1006                 var _t = this;
1007                 var _cb = function(e) {
1008                         _t.positions[name].x = parseInt(rect.getAttribute("x")) + parseInt(tabGrp.getAttribute("dragx"));
1009                         _t.positions[name].y = parseInt(rect.getAttribute("y")) + parseInt(tabGrp.getAttribute("dragy"));
1010                         _t.savePositions();
1011                         _t.drawConnections(e.getAttribute("tableName"));
1012
1013                 }
1014                 new Pman.Tab.BuilderErm.Movable(tabGrp, rect, _cb);
1015                 //new Pman.Tab.BuilderErm.Movable(tabGrp, rect2, _cb);
1016                 tabGrp.setAttribute("tableName", name);
1017                 return tabGrp;
1018         },
1019
1020         drawConnections  : function(tablematch)
1021         {
1022                 //alert(this.positions.toSource());
1023                 for(var tn in this.links) {
1024                         for (var linkfrom in this.links[tn]) {
1025                                 if (typeof(tablematch) != "undefined") {
1026                                         if ((tn != tablematch) && (this.links[tn][linkfrom][0] != tablematch)) {
1027                                                 continue;
1028                                         }
1029
1030                                 }
1031
1032
1033                                 this.drawConnection(tn, linkfrom, this.links[tn][linkfrom][0], this.links[tn][linkfrom][1]);
1034                         }
1035                 }
1036
1037         },
1038         drawConnections  : function(tablematch)
1039     {
1040         //alert(this.positions.toSource());
1041         for(var tn in this.links) {
1042             for (var linkfrom in this.links[tn]) {
1043                 if (typeof(tablematch) != "undefined") {
1044                     if ((tn != tablematch) && (this.links[tn][linkfrom][0] != tablematch)) {
1045                         continue;
1046                     }
1047
1048                 }
1049
1050
1051                 this.drawConnection(tn, linkfrom, this.links[tn][linkfrom][0], this.links[tn][linkfrom][1]);
1052             }
1053         }
1054
1055     },
1056     drawConnection : function( tablefrom, colfrom, tableto, colto )
1057     {
1058         var doffset = 6;
1059         var id = 'LINK-' + tablefrom +'-' + colfrom +'-' + tableto +'-' +  colto;
1060         //alert(id);
1061         var pfrom = this.lpositions[tablefrom + '.' + colfrom];
1062         var pto = this.lpositions[tableto+ '.' + colto];
1063         if (!pfrom || !pto) {
1064             // should be alert!
1065             return;
1066         }
1067         //alert(pfrom.toSource());
1068         //alert(pto.toSource());
1069         // decide how to join.
1070
1071         fobj = document.getElementById('GT~' + tablefrom);
1072         tobj = document.getElementById('GT~' + tableto);
1073
1074         froml = pfrom.l + parseInt(fobj.getAttribute("dragx"));
1075         fromr = pfrom.r + parseInt(fobj.getAttribute("dragx"));
1076
1077         tol = pto.l + parseInt(tobj.getAttribute("dragx"));
1078         tor = pto.r + parseInt(tobj.getAttribute("dragx"));
1079
1080
1081         fx = froml > tol ? froml  : fromr;
1082         tx = froml > tol ? tor : tol;
1083
1084         var line = document.getElementById(id);
1085         var create = false;
1086         if (!line) {
1087             create = true;
1088             line = document.createElementNS(SVGNS, 'line');
1089         }
1090
1091         line.setAttribute('id', id);
1092         line.setAttribute('x1', fx);
1093         line.setAttribute('y1', doffset  + pfrom.y + parseInt(fobj.getAttribute("dragy")));
1094         line.setAttribute('x2', tx);
1095         line.setAttribute('y2', doffset  + pto.y + parseInt(tobj.getAttribute("dragy")));
1096         line.setAttribute('stroke', 'red');
1097         if (create) {
1098             document.rootElement.appendChild(line);
1099
1100         }
1101         // draw a line on the target!
1102
1103         var id = 'LINKL-' + tablefrom +'-' + colfrom;
1104         if (!document.getElementById(id)) {
1105             var line = document.createElementNS(SVGNS, 'line');
1106             line.setAttribute('id', id);
1107             line.setAttribute('x1', pfrom.l);
1108             line.setAttribute('y1', pfrom.y+doffset );
1109             line.setAttribute('x2', pfrom.r);
1110             line.setAttribute('y2', pfrom.y+doffset );
1111             line.setAttribute('stroke', 'red');
1112             var tb = document.getElementById("GT~" + tablefrom);
1113             tb.insertBefore(line, tb.getElementsByTagName('text')[0]);
1114
1115         }
1116         var id = 'LINKL-' + tableto +'-' + colto;
1117         if (!document.getElementById(id)) {
1118             var line = document.createElementNS(SVGNS, 'line');
1119             line.setAttribute('id', id);
1120             line.setAttribute('x1', pto.l);
1121             line.setAttribute('y1', pto.y+doffset );
1122             line.setAttribute('x2', pto.r);
1123             line.setAttribute('y2', pto.y+doffset );
1124             var tb = document.getElementById("GT~" + tableto);
1125             tb.insertBefore(line, tb.getElementsByTagName('text')[0]);
1126             line.setAttribute('stroke', 'red');
1127         }
1128
1129
1130
1131
1132
1133     }
1134
1135
1136
1137
1138 })
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152 */