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: | }); |