Changes to the ER Diagram Plot Tool.
Esse commit está contido em:
@@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
Referência em uma Nova Issue
Bloquear um usuário