Changes to the ER Diagram Plot Tool.

Esse commit está contido em:
felipenmoura
2010-06-20 23:20:33 +00:00
commit 39f42cf1e1
+120 -14
Ver Arquivo
@@ -669,6 +669,28 @@ Mind.ERD= {
o.style.MozTransform= 'scale('+s+')';
o.style.webkitTransform= 'scale('+s+')';
},
drawTable: function(ctx, l, t, w, h)
{
var lingrad = ctx.createLinearGradient(0,t,0,t+h);
lingrad.addColorStop(0, '#bbb');
lingrad.addColorStop(1, '#fff');
ctx.lineWidth= 0.7;
//lingrad.addColorStop(0.5, '#26C000');
//lingrad.addColorStop(1, '#fff');
var lingrad2 = ctx.createLinearGradient(0,t,0,t+h);
lingrad2.addColorStop(0, '#000');
lingrad2.addColorStop(0.5, '#ddd');
lingrad2.addColorStop(1, '#000');
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
// draw shapes
ctx.fillRect(l, t, w, h);
ctx.strokeRect(l, t, w, h);
},
Plot: function(){
var oCanvas= document.getElementById('oCanvas');
var strDataURI = oCanvas.toDataURL("image/jpeg");
@@ -701,6 +723,10 @@ Mind.ERD= {
var h= oCanvas.offsetHeight;
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = "red";
ctx.strokeStyle = 'red';
// drawing the tables
ctx.font= "16px Tahoma";
var l=0, t= 0;
@@ -708,22 +734,65 @@ Mind.ERD= {
var c= 0;
// first, the relations
var links= Mind.ERD.mapAreaContainer.getElementsByTagName('DIV');
var curPos= 0;
var start= 0;
var end= 0;
//var lastLeft= 0;
for(var i= 0, j= links.length; i<j; i++)
{
l= links[i].offsetLeft - leftEst;
t= links[i].offsetTop - toppEst;
tW= links[i].offsetWidth;
tH= links[i].offsetHeight;
ctx.fillRect(l,t,tW,tH);
/*ctx.fillStyle= 'red';
ctx.fillStyle = "red";
ctx.lineWidth = "8";
ctx.lineStyle = "red";
ctx.lineColor = "red";*/
ctx.strokeStyle= '#777';
ctx.lineWidth = "0.5";
var curPos= 0;
while(curPos < tW)
{
ctx.moveTo(l+curPos, t);
//ctx.lineTo(l+curPos+4, t);
ctx.strokeRect(l+curPos+2, t, 2, 1);
curPos+= 4;
}
//ctx.stroke();
curPos= 0;
while(curPos < tH -3)
{
ctx.moveTo(l, t+curPos);
//ctx.lineTo(l, t+curPos+4);
ctx.strokeRect(l+2, t+curPos+2, 1, 2);
curPos+= 4;
}
//ctx.stroke();
}
// then, the tables
for(i in this.shownTables)
{
ctx.fillStyle = "black";
//ctx.fillStyle = "black";
l= this.shownTables[i].OO.offsetLeft - leftEst;
t= this.shownTables[i].OO.offsetTop - toppEst+10;
tW= this.shownTables[i].OO.offsetWidth;
tH= this.shownTables[i].OO.offsetHeight-10;
ctx.clearRect(l+1,t+1,tW-2,tH-2);
this.drawTable(ctx, l, t, tW+10, tH);/**************************************************************/
ctx.textAlign= 'center';
ctx.font= "16px Arial, Tahoma";
ctx.fillStyle = "#000";
ctx.fillText(this.shownTables[i].name, l+(tW/2), t+15);
ctx.fillStyle = "#444";
ctx.textAlign= 'left';
/*
ctx.fillRect(l,t,tW,tH);
ctx.clearRect(l+1,t+1,tW-2,tH-2);
ctx.textAlign= 'center';
@@ -732,33 +801,69 @@ Mind.ERD= {
ctx.fillText(this.shownTables[i].name, l+(tW/2), t+15);
ctx.fillStyle = "black";
obj= Mind.Project.knowledge.tables[this.shownTables[i].name];
//obj= Mind.Project.knowledge.tables[this.shownTables[i].name];
ctx.textAlign= 'left';
*/
//ctx.fillStyle = "black";
obj= Mind.Project.knowledge.tables[this.shownTables[i].name];
t+= 2;
c= 0;
var lH= 20;
if(obj.attributes)
{
ctx.moveTo(l,t+18);
ctx.lineTo(l+tW,t+18);
ctx.stroke();
ctx.lineWidth= 0.5;
ctx.strokeRect(l, t+18, tW, 1);
ctx.lineWidth= 1;
t+= 4;
c= 0;
for(var att in obj.attributes)
{
c+= 22;
ctx.fillText(obj.attributes[att].name, l+3, t+9+c);
c+= lH;
ctx.fillText(obj.attributes[att].name, l+13, t+8+c);
if(obj.attributes[att].pk)
{
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 6;
ctx.shadowColor = "rgba(0, 0, 0, 0.7)";
ctx.fillStyle= '#ff0';
ctx.beginPath();
ctx.moveTo(l+6, t+20);
ctx.lineTo(l+2, t+24);
ctx.lineTo(l+6, t+28);
ctx.lineTo(l+10, t+24);
ctx.closePath();
ctx.fill();
ctx.fillStyle= '#555';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 0;
}
}
}
// foreign keys
c+= lH+8;
if(obj.foreignKeys.length > 0)
{
ctx.moveTo(l,t+c+16);
ctx.lineTo(l+tW,t+c+16);
ctx.stroke();
//ctx.moveTo(l,t+c);
for(fk in obj.foreignKeys)
{
c+= 22;
ctx.fillText(obj.foreignKeys[fk][0], l+3, t+9+c);
ctx.fillText(obj.foreignKeys[fk][0], l+13, t+c);
ctx.fillStyle= '#777';
ctx.beginPath();
ctx.moveTo(l+6, t+c-8);
ctx.lineTo(l+2, t+c+4-8);
ctx.lineTo(l+6, t+c+8-8);
ctx.lineTo(l+10, t+c+4-8);
ctx.closePath();
ctx.fill();
ctx.fillStyle= '#555';
c+= lH;
}
}
}
@@ -773,6 +878,7 @@ Mind.ERD= {
'ER Diagram', w+40, h+60, true);
var image= Canvas2Image.saveAsPNG(document.getElementById('oCanvas'), true);
document.getElementById('tmpCanvas').appendChild(image);
document.getElementById('tmpCanvas').parentNode.style.backgroundImage= "url("+Mind.Properties.imagesPath+"/back_der.gif)";
ctx.clearRect(0, 0, 99999, 99999);
}
};