1 var svgCache; 2 var svgDefs; 3 var svgGradients; 4 var svgNS = "http://www.w3.org/2000/svg"; 5 var svgRoot; 6 7 function displaySvg(displayList) { 8 for (var index = 0; index < displayList.length; ++index) { 9 drawToSvg(displayList[index]); 10 } 11 } 12 13 function drawToSvg(display) { 14 assert('string' == typeof(display.ref)); 15 var cache; 16 if (display.ref in svgCache) { 17 cache = svgCache[display.ref]; 18 if (display.drawDirty) { 19 switch (cache.spec) { 20 case "paths": 21 svgSetPathData(cache.element, display.draw); 22 break; 23 case "pictures": 24 svgSetPictureData(cache.element, display.draw); 25 break; 26 case "text": 27 svgCreateText(cache.element, display.draw); 28 break; 29 default: 30 assert(0); 31 } 32 } 33 } else { 34 cache = {}; 35 cache.action = display; 36 cache.spec = display.drawSpec; 37 var dot = cache.spec.indexOf("."); 38 if (dot > 0) { 39 cache.spec = cache.spec.substring(0, dot); 40 } 41 switch (cache.spec) { 42 case "paths": 43 cache.element = svgCreatePath(display.ref, display.draw); 44 break; 45 case "pictures": 46 cache.element = svgCreatePicture(display.ref, display.draw); 47 break; 48 case "text": 49 cache.element = svgCreateText(display.ref, display.draw); 50 break; 51 default: 52 assert(0); 53 } 54 } 55 display.drawDirty = false; 56 if (display.paintDirty) { 57 svgSetPaintData(cache.element, display.paint); 58 var opacity = svg_opacity(display.paint.color); 59 cache.element.setAttribute("fill-opacity", opacity); 60 cache.element.setAttribute("stroke-opacity", opacity); 61 display.paintDirty = false; 62 } 63 assert('object' == typeof(cache)); 64 if (!(display.ref in svgCache)) { 65 svgRoot.appendChild(cache.element); 66 svgCache[display.ref] = cache; 67 } 68 } 69 70 function setupSvg() { 71 svgCache = { "paths":{}, "pictures":{}, "text":{} }; 72 svgDefs = document.createElementNS(svgNS, "defs"); 73 svgGradients = {}; 74 svgRoot = document.getElementById("svg"); 75 while (svgRoot.lastChild) { 76 svgRoot.removeChild(svgRoot.lastChild); 77 } 78 svgRoot.appendChild(svgDefs); 79 } 80 81 function svg_rbg(color) { 82 return "rgb(" + ((color >> 16) & 0xFF) 83 + "," + ((color >> 8) & 0xFF) 84 + "," + ((color >> 0) & 0xFF) + ")"; 85 } 86 87 function svg_opacity(color) { 88 return ((color >> 24) & 0xFF) / 255.0; 89 } 90 91 function svgCreatePath(key, path) { 92 var svgPath = document.createElementNS(svgNS, "path"); 93 svgPath.setAttribute("id", key); 94 svgSetPathData(svgPath, path); 95 return svgPath; 96 } 97 98 function svgCreatePicture(key, picture) { 99 var svgPicture = document.createElementNS(svgNS, "g"); 100 svgPicture.setAttribute("id", key); 101 svgSetPictureData(svgPicture, picture); 102 return svgPicture; 103 } 104 105 function svgCreateRadialGradient(key) { 106 var g = gradients[key]; 107 var e = document.createElementNS(svgNS, "radialGradient"); 108 e.setAttribute("id", key); 109 e.setAttribute("cx", g.cx); 110 e.setAttribute("cy", g.cy); 111 e.setAttribute("r", g.r); 112 e.setAttribute("gradientUnits", "userSpaceOnUse"); 113 var stopLen = g.stops.length; 114 for (var index = 0; index < stopLen; ++index) { 115 var stop = g.stops[index]; 116 var color = svg_rbg(stop.color); 117 var s = document.createElementNS(svgNS, 'stop'); 118 s.setAttribute("offset", stop.offset); 119 var style = "stop-color:" + svg_rbg(stop.color) + "; stop-opacity:" 120 + svg_opacity(stop.color); 121 s.setAttribute("style", style); 122 e.appendChild(s); 123 } 124 svgGradients[key] = e; 125 svgDefs.appendChild(e); 126 } 127 128 function svgCreateText(key, text) { 129 var svgText = document.createElementNS(svgNS, "text"); 130 svgText.setAttribute("id", key); 131 var textNode = document.createTextNode(text.string); 132 svgText.appendChild(textNode); 133 svgSetTextData(svgText, text); 134 return svgText; 135 } 136 137 function svgSetPathData(svgPath, path) { 138 var dString = ""; 139 for (var cIndex = 0; cIndex < path.length; ++cIndex) { 140 var curveKey = Object.keys(path[cIndex])[0]; 141 var v = path[cIndex][curveKey]; 142 switch (curveKey) { 143 case 'arcTo': 144 var clockwise = 1; // to do; work in general case 145 dString += " A" + v[4] + "," + v[4] + " 0 0," + clockwise + " " 146 + v[2] + "," + v[3]; 147 break; 148 case 'close': 149 dString += " z"; 150 break; 151 case 'cubic': 152 dString += " M" + v[0] + "," + v[1]; 153 dString += " C" + v[2] + "," + v[3] 154 + " " + v[4] + "," + v[5] 155 + " " + v[6] + "," + v[7]; 156 break; 157 case 'line': 158 dString += " M" + v[0] + "," + v[1]; 159 dString += " L" + v[2] + "," + v[3]; 160 break; 161 case 'quad': 162 dString += " M" + v[0] + "," + v[1]; 163 dString += " Q" + v[2] + "," + v[3] 164 + " " + v[4] + "," + v[5]; 165 break; 166 default: 167 assert(0); 168 } 169 } 170 svgPath.setAttribute("d", dString); 171 } 172 173 function svgSetPaintData(svgElement, paint) { 174 var color; 175 var inPicture = 'string' == typeof(paint); 176 if (inPicture) { 177 paint = (new Function("return " + paint))(); 178 assert('object' == typeof(paint) && !isArray(paint)); 179 } 180 if ('gradient' in paint) { 181 var gradient = paint.gradient.split('.'); 182 var gradName = gradient[1]; 183 if (!svgGradients[gradName]) { 184 svgCreateRadialGradient(gradName); 185 } 186 color = "url(#" + gradName + ")"; 187 } else { 188 color = svg_rbg(paint.color); 189 } 190 svgElement.setAttribute("fill", 'fill' == paint.style ? color : "none"); 191 if ('stroke' == paint.style) { 192 svgElement.setAttribute("stroke", color); 193 } 194 if ('strokeWidth' in paint) { 195 svgElement.setAttribute("stroke-width", paint.strokeWidth); 196 } 197 if ('typeface' in paint) { 198 var typeface = typefaces[paint.typeface]; 199 var font = typeface.style; 200 if ('textSize' in paint) { 201 svgElement.setAttribute("font-size", paint.textSize); 202 } 203 if ('family' in typeface) { 204 svgElement.setAttribute("font-family", typeface.family); 205 } 206 if ('textAlign' in paint) { 207 svgElement.setAttribute("text-anchor", paint.textAlign == "right" ? "end" : assert(0)); 208 } 209 if ('textBaseline' in paint) { 210 svgElement.setAttribute("alignment-baseline", paint.textBaseline); 211 } 212 } 213 } 214 215 function svgSetPictureData(svgPicture, picture) { 216 while (svgPicture.lastChild) { 217 svgPicture.removeChild(svgPicture.lastChild); 218 } 219 for (var index = 0; index < picture.length; ++index) { 220 var entry = picture[index]; 221 var drawObj = (new Function("return " + entry.draw))(); 222 var drawSpec = entry.draw.split('.'); 223 var svgElement; 224 switch (drawSpec[0]) { 225 case 'paths': 226 svgElement = svgCreatePath(drawSpec[1], drawObj); 227 break; 228 case 'pictures': 229 svgElement = svgCreatePicture(drawSpec[1], drawObj); 230 break; 231 case 'text': 232 svgElement = svgCreateText(drawSpec[1], drawObj); 233 break; 234 default: 235 assert(0); 236 } 237 var paintObj = (new Function("return " + entry.paint))(); 238 svgSetPaintData(svgElement, paintObj); 239 svgPicture.appendChild(svgElement); 240 } 241 } 242 243 function svgSetTextData(svgElement, text) { 244 svgElement.setAttribute('x', text.x); 245 svgElement.setAttribute('y', text.y); 246 } 247
