json based animation toy

experimental/docs/svgBackend.js

+var svgCache;
+var svgDefs;
+var svgGradients;
+var svgNS = "http://www.w3.org/2000/svg";
+var svgRoot;
+
+function displaySvg(displayList) {
+    for (var index = 0; index < displayList.length; ++index) {
+        drawToSvg(displayList[index]);
+    }
+}
+
+function drawToSvg(display) {
+    assert('string' == typeof(display.ref));
+    var cache;
+    if (display.ref in svgCache) {
+        cache = svgCache[display.ref];
+        if (display.drawDirty) {
+            switch (cache.spec) {
+                case "paths":
+                    svgSetPathData(cache.element, display.draw);
+                    break;
+                case "pictures":
+                    svgSetPictureData(cache.element, display.draw);
+                    break;
+                case "text":
+                    svgCreateText(cache.element, display.draw);
+                    break;
+                default:
+                    assert(0);
+            }
+        }
+    } else {
+        cache = {};
+        cache.action = display;
+        cache.spec = display.drawSpec;
+        var dot = cache.spec.indexOf(".");
+        if (dot > 0) {
+            cache.spec = cache.spec.substring(0, dot);
+        }
+        switch (cache.spec) {
+            case "paths":
+                cache.element = svgCreatePath(display.ref, display.draw);
+                break;
+            case "pictures":
+                cache.element = svgCreatePicture(display.ref, display.draw);
+                break;
+            case "text":
+                cache.element = svgCreateText(display.ref, display.draw);
+                break;
+            default:
+                assert(0);
+        }
+    }
+    display.drawDirty = false;
+    if (display.paintDirty) {
+        svgSetPaintData(cache.element, display.paint);
+        var opacity = svg_opacity(display.paint.color);
+        cache.element.setAttribute("fill-opacity", opacity);
+        cache.element.setAttribute("stroke-opacity", opacity);
+        display.paintDirty = false;
+    }
+    assert('object' == typeof(cache));
+    if (!(display.ref in svgCache)) {
+        svgRoot.appendChild(cache.element);
+        svgCache[display.ref] = cache;
+    }
+}
+
+function setupSvg() {
+    svgCache = { "paths":{}, "pictures":{}, "text":{} };
+    svgDefs = document.createElementNS(svgNS, "defs");
+    svgGradients = {};
+    svgRoot = document.getElementById("svg");
+    while (svgRoot.lastChild) {
+        svgRoot.removeChild(svgRoot.lastChild);
+    }
+    svgRoot.appendChild(svgDefs);
+}
+
+function svg_rbg(color) {
+    return "rgb(" + ((color >> 16) & 0xFF)
+            + "," + ((color >>  8) & 0xFF)
+            + "," + ((color >>  0) & 0xFF) + ")";
+}
+
+function svg_opacity(color) {
+    return ((color >> 24) & 0xFF) / 255.0;
+}
+
+function svgCreatePath(key, path) {
+    var svgPath = document.createElementNS(svgNS, "path");
+    svgPath.setAttribute("id", key);
+    svgSetPathData(svgPath, path);
+    return svgPath;
+}
+
+function svgCreatePicture(key, picture) {
+    var svgPicture = document.createElementNS(svgNS, "g");
+    svgPicture.setAttribute("id", key);
+    svgSetPictureData(svgPicture, picture);
+    return svgPicture;
+}
+
+function svgCreateRadialGradient(key) {
+    var g = gradients[key];
+    var e = document.createElementNS(svgNS, "radialGradient");
+    e.setAttribute("id", key);
+    e.setAttribute("cx", g.cx);
+    e.setAttribute("cy", g.cy);
+    e.setAttribute("r", g.r);
+    e.setAttribute("gradientUnits", "userSpaceOnUse");
+    var stopLen = g.stops.length;
+    for (var index = 0; index < stopLen; ++index) {
+        var stop = g.stops[index];
+        var color = svg_rbg(stop.color);
+        var s = document.createElementNS(svgNS, 'stop');
+        s.setAttribute("offset", stop.offset);
+        var style = "stop-color:" + svg_rbg(stop.color) + "; stop-opacity:"
+                + svg_opacity(stop.color);
+        s.setAttribute("style", style);
+        e.appendChild(s);
+    }
+    svgGradients[key] = e;
+    svgDefs.appendChild(e);
+}
+
+function svgCreateText(key, text) {
+    var svgText = document.createElementNS(svgNS, "text");
+    svgText.setAttribute("id", key);
+    var textNode = document.createTextNode(text.string);
+    svgText.appendChild(textNode);
+    svgSetTextData(svgText, text);
+    return svgText;
+}
+
+function svgSetPathData(svgPath, path) {
+    var dString = "";
+    for (var cIndex = 0; cIndex < path.length; ++cIndex) {
+        var curveKey = Object.keys(path[cIndex])[0];
+        var v = path[cIndex][curveKey];
+        switch (curveKey) {
+            case 'arcTo':
+                var clockwise = 1; // to do; work in general case
+                dString += " A" + v[4] + "," + v[4] + " 0 0," + clockwise + " "
+                        + v[2] + "," + v[3];
+                break;
+            case 'close':
+                dString += " z";
+                break;
+            case 'cubic':
+                dString += " M" + v[0] + "," + v[1];
+                dString += " C" + v[2] + "," + v[3]
+                          + " " + v[4] + "," + v[5]
+                          + " " + v[6] + "," + v[7];
+                break;
+            case 'line':
+                dString += " M" + v[0] + "," + v[1];
+                dString += " L" + v[2] + "," + v[3];
+                break;
+            case 'quad':
+                dString += " M" + v[0] + "," + v[1];
+                dString += " Q" + v[2] + "," + v[3]
+                          + " " + v[4] + "," + v[5];
+                break;
+            default:
+                assert(0);
+        }
+    }
+    svgPath.setAttribute("d", dString);
+}
+
+function svgSetPaintData(svgElement, paint) {
+    var color;
+    var inPicture = 'string' == typeof(paint);
+    if (inPicture) {
+        paint = (new Function("return " + paint))();
+        assert('object' == typeof(paint) && !isArray(paint));
+    }
+    if ('gradient' in paint) {
+        var gradient = paint.gradient.split('.');
+        var gradName = gradient[1];
+        if (!svgGradients[gradName]) {
+            svgCreateRadialGradient(gradName);
+        }
+        color = "url(#" + gradName + ")";
+    } else {
+        color = svg_rbg(paint.color);
+    }
+    svgElement.setAttribute("fill", 'fill' == paint.style ? color : "none");
+    if ('stroke' == paint.style) {
+        svgElement.setAttribute("stroke", color);
+    }
+    if ('strokeWidth' in paint) {
+        svgElement.setAttribute("stroke-width", paint.strokeWidth);
+    }
+    if ('typeface' in paint) {
+        var typeface = typefaces[paint.typeface];
+        var font = typeface.style;
+        if ('textSize' in paint) {
+            svgElement.setAttribute("font-size", paint.textSize);
+        }
+        if ('family' in typeface) {
+            svgElement.setAttribute("font-family", typeface.family);
+        }
+        if ('textAlign' in paint) {
+            svgElement.setAttribute("text-anchor", paint.textAlign == "right" ? "end" : assert(0));
+        }
+        if ('textBaseline' in paint) {
+            svgElement.setAttribute("alignment-baseline", paint.textBaseline);
+        }
+    }
+}
+
+function svgSetPictureData(svgPicture, picture) {
+    while (svgPicture.lastChild) {
+        svgPicture.removeChild(svgPicture.lastChild);
+    }
+    for (var index = 0; index < picture.length; ++index) {
+        var entry = picture[index];
+        var drawObj = (new Function("return " + entry.draw))();
+        var drawSpec = entry.draw.split('.');
+        var svgElement;
+        switch (drawSpec[0]) {
+            case 'paths':
+                svgElement = svgCreatePath(drawSpec[1], drawObj);
+                break;
+            case 'pictures':
+                svgElement = svgCreatePicture(drawSpec[1], drawObj);
+                break;
+            case 'text':
+                svgElement = svgCreateText(drawSpec[1], drawObj);
+                break;
+            default:
+                assert(0);
+        }
+        var paintObj = (new Function("return " + entry.paint))();
+        svgSetPaintData(svgElement, paintObj);
+        svgPicture.appendChild(svgElement);
+    }
+}
+
+function svgSetTextData(svgElement, text) {
+    svgElement.setAttribute('x', text.x);
+    svgElement.setAttribute('y', text.y);
+}