Please disable Adblockers and enable JavaScript for domain CEWebS.cs.univie.ac.at! We have NO ADS, but they may interfere with some of our course material.

Name: orgviz-js/lib/svg.js 
1:
function width_of(txt){                                                                                              
2:
  // Create a dummy canvas (render invisible with css)
3:
  var c=document.createElement('canvas');
4:
  // Get the context of the dummy canvas
5:
  var ctx=c.getContext('2d');
6:
  // Set the context.font to the font that you are using
7:
  ctx.font = "10" + 'px' + "Helvetica";
8:
  // Measure the string
9:
  // !!! <CRUCIAL>  !!!
10:
  var length = ctx.measureText(txt).width;
11:
  // !!! </CRUCIAL> !!!
12:
  // Return width
13:
  return length;  // Create dummy span
14:
}
15:
 
16:
function height_of(txt){                                                                                              
17:
  // Create a dummy canvas (render invisible with css)
18:
  var c=document.createElement('canvas');
19:
  // Get the context of the dummy canvas
20:
  var ctx=c.getContext('2d');
21:
  // Set the context.font to the font that you are using
22:
  ctx.font = "10" + 'px' + "Helvetica";
23:
  // Measure the string
24:
  // !!! <CRUCIAL>  !!!
25:
  var length = ctx.measureText(txt).height;
26:
  // !!! </CRUCIAL> !!!
27:
  // Return width
28:
  return height;  // Create dummy span
29:
}
30:
 
31:
function degrees_to_rad(d){
32:
  return d * Math.PI / 180;
33:
}
34:
 
35:
function circle_point(cx, cy, r, angle){
36:
  var x1 = cx + r * Math.cos(degrees_to_rad(angle));
37:
  var y1 = cy - r * Math.sin(degrees_to_rad(angle));
38:
  return [x1, y1]
39:
}
40:
 
41:
function circle_line_from(cx, cy, r, angle){
42:
  return ["M", cx, cy, "L"] + circle_point(cx, cy, r, angle);
43:
}
44:
 
45:
var SVG = function(){
46:
  this.res = '';
47:
  this.defs = '';
48:
 
49:
  this.add_group = function(nid, block, options, yieldfunc){
50:
    options = (typeof options === "undefined") ? {} : options;
51:
    var opts = "";
52:
    for (var i in options) {
53:
          opts += i + "=\"" + options[i] + "\" ";
54:
    }
55:
    this.res += "<g id='" + nid + "'" + (opts == "") ? "" : " " + opts + ">\n";
56:
    yieldfunc();
57:
    this.refs += "</g>\n";
58:
  };
59:
 
60:
  this.add_path = function(d,options){
61:
    options = (typeof options === "undefined") ? {} : options;
62:
    var opts = "";
63:
    for (var i in options) {
64:
          if(options.hasOwnProperty(i)) opts += i + "=\"" + options[i] + "\" ";
65:
    }
66:
    this.res += "  <path d='" + (typeof d === "object" ? d.join(" ") : d) + "'" + (opts == "" ? "" : " " + opts) + "/>\n";
67:
  };
68:
 
69:
  this.add_circle = function(cx, cy, radius, cls){
70:
    cls = (typeof cls === "undefined") ? '' : cls;
71:
    this.res += "  <circle class='" +cls+ "' cx=\"" +cx+ "\" cy=\"" +cy+"\" r=\""+ radius+ "\"/>\n";
72:
  };
73:
 
74:
  this.add_rectangle = function(lx,ly,opacity,lwidth,lheight, cls){
75:
    cls = (typeof cls === "undefined") ? '' : cls;
76:
    this.res += "  <rect class='" +cls+ "' fill-opacity='" +opacity+ "' x=\"" +lx+ "\" y=\"" +ly+ "\" width=\"" +lwidth+ "\" height=\"" +lheight+ "\"/>\n";
77:
  };
78:
 
79:
  this.add_radialGradient = function(id, cls1, cls2){
80:
    cls1 = (typeof cls1 === "undefined") ? '' : cls1;
81:
    cls2 = (typeof cls2 === "undefined") ? '' : cls2;
82:
    this.defs += "  <radialGradient id=\""+id+"\" cx=\"50%\" cy=\"50%\" r=\"70%\" fx=\"70%\" fy=\"30%\">\n    <stop offset=\"0%\" stop-color=\""+cls1+"\" stop-opacity=\"1\"/>\n    <stop offset=\"100%\" stop-color=\""+cls2+"\" stop-opacity=\"1\"/>\n  </radialGradient>\n"
83:
  };
84:
  
85:
  this.add_text = function(x, y, options, yieldfunc) {
86:
    options = (typeof options === "undefined") ? {} : options;
87:
    options["cls"] = (typeof options["cls"] === "undefined") ? '' : options["cls"];
88:
    options["transform"] = (typeof options["transform"] === "undefined") ? '' : options["transform"];
89:
    this.res += "  <text x='"+x+"' y='"+y+"'"+
90:
                ((typeof options["cls"] === "undefined") ? '' : " class='"+options["cls"]+"'") +
91:
                ((typeof options["transform"] === "undefined") ? '' : " transform='"+options["transform"]+"'") +
92:
                ((typeof options["id"] === "undefined") ? '' : " id='"+options["id"]+"'") +
93:
                ">";
94:
    this.res += yieldfunc();
95:
    this.res += "</text>\n";
96:
  };
97:
  
98:
  this.add_tspan = function(options, spanval){
99:
    options = (typeof options === "undefined") ? {} : options;
100:
    this.res += "  <tspan x='"+x+"' y='"+y+"'"+
101:
                ((typeof options["transform"] === "undefined") ? '' : " transform='"+options["transform"]+"'") +
102:
                ((typeof options["cls"] === "undefined") ? '' : " class='"+options["cls"]+"'") +
103:
                ((typeof options["dx"] === "undefined") ? '' : " dx='"+options["dx"]+"'") +
104:
                ((typeof options["dy"] === "undefined") ? '' : " dy='"+options["dy"]+"'") +
105:
                ((typeof options["x"] === "undefined") ? '' : " x='"+options["x"]+"'") +
106:
                ((typeof options["y"] === "undefined") ? '' : " y='"+options["y"]+"'") +
107:
                ">";
108:
    this.res += spanval;
109:
    this.res += "</tspan>\n";
110:
    return '';
111:
  };
112:
  
113:
  this.add_orbit = function(center_x, center_y, angle1, angle2, radius, oradius, options) {
114:
    var x1 = circle_point(center_x, center_y, radius, angle1);
115:
    var y1 = circle_point(center_x, center_y, radius, angle1);
116:
    var x2 = circle_point(center_x, center_y, radius, angle2);
117:
    var y2 = circle_point(center_x, center_y, radius, angle2);
118:
 
119:
    var bogerl = 10;
120:
    var sect = (bogerl / (2.0 * (radius+oradius) * Math.PI)) * 360;
121:
 
122:
    var ovx1 = circle_point(center_x,center_y,radius+oradius-bogerl,angle1);
123:
    var ovy1 = circle_point(center_x,center_y,radius+oradius-bogerl,angle1);
124:
    var obx1 = center_x + Math.cos(degrees_to_rad(angle1 - sect)) * (radius+oradius);
125:
    var oby1 = center_y - Math.sin(degrees_to_rad(angle1 - sect)) * (radius+oradius);
126:
 
127:
    var ovx2 = circle_point(center_x,center_y,radius+oradius-bogerl,angle2);
128:
    var ovy2 = circle_point(center_x,center_y,radius+oradius-bogerl,angle2);
129:
    var obx2 = center_x + Math.cos(degrees_to_rad(angle2 + sect)) * (radius+oradius);
130:
    var oby2 = center_y - Math.sin(degrees_to_rad(angle2 + sect)) * (radius+oradius);
131:
 
132:
    var path = '';
133:
    if(angle1 - angle2 > 180){
134:
      path = "M "+x1+" "+y1+" L "+ovx1+" "+ovy1+" A "+bogerl+" "+bogerl+" 0 0 1 "+obx1+" "+oby1+" A "+radius+oradius+" "+radius+oradius+" 0 1 1 "+obx2+" "+oby2+" A "+bogerl+" "+bogerl+" 0 0 1 "+ovx2+" "+ovy2+" L "+x2+" "+y2;
135:
    }
136:
    else{
137:
      path = "M "+x1+" "+y1+" L "+ovx1+" "+ovy1+" A "+bogerl+" "+bogerl+" 0 0 1 "+obx1+" "+oby1+" A "+radius+oradius+" "+radius+oradius+" 0 0 1 "+obx2+" "+oby2+" A "+bogerl+" "+bogerl+" 0 0 1 "+ovx2+" "+ovy2+" L "+x2+" "+y2;
138:
    }
139:
    add_path(path, options);
140:
  };
141:
  
142:
  this.add_rectorbit = function(x1,y1,x2,y2,b,height,position,bogerl,options){
143:
    if(position == "left"){
144:
      add_path("M "+x1+" "+y1+(height/2)+" h -"+b+" a "+bogerl+" "+bogerl+" 0 0 1 -"+bogerl+" -"+bogerl+" V "+(y2+(height/2))+bogerl+" a "+bogerl+" "+bogerl+" 0 0 1 "+bogerl+"  -"+bogerl+" h "+b+" ",options);
145:
    }
146:
    else if(position == "right") {
147:
      add_path("M "+x1+" "+y1+(height/2)+" h "+b+"  a "+bogerl+" "+bogerl+" 0 0 0 "+bogerl+"  -"+bogerl+" V "+(y2+(height/2))+bogerl+" a "+bogerl+" "+bogerl+" 0 0 0 -"+bogerl+" -"+bogerl+" h -"+b+" ",options);
148:
    }
149:
  };
150:
  
151:
  this.add_subject = function(x,y,number,clsbody,clsnumber,clsnumbernormal,clsnumberspecial){
152:
    var subjectheadradius = 3;
153:
    add_subject_icon(x,y-subjectheadradius,clsbody,subjectheadradius);
154:
    var yieldfunc = function(){
155:
      add_tspan({x: x, y: y+10, cls: clsnumbernormal}, number);
156:
      add_tspan({x: x, y: y+10, cls: clsnumberspecial}, '');
157:
    }
158:
    add_text(x, y+10, {cls: clsbody + ' ' + clsnumber}, yieldfunc)  
159:
  };
160:
  
161:
  this.add_subject_icon = function(x,y,cls,headradius){
162:
    var scale = headradius / 3;
163:
    var bogerl = (11 + headradius) * scale;
164:
    y += headradius;
165:
    add_path("M "+x+" "+y+" L "+x+5*scale+" "+y+11*scale+" A "+bogerl+" "+bogerl+" 0 0 1 "+x-5*scale+" "+y+11*scale+" z", {class : cls});
166:
    add_circle(x,y,headradius,cls);
167:
    return [x+5*scale,y+bogerl];
168:
  };
169:
});