SnapsvgwithAngular

Snap.svg with Angular.js

by phollott

HTML

<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<div ng-app="myApp" ng-controller="myController" class="rhizome" align="center">
    <div ng-bind="questionnaire.name.text" class="label"></div>
    <svg version="1.1" id="svgpanel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="250" height="250" viewBox="0 0 250 250" rhiz-svg-panel>
        <defs>
            <marker id="markerArrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
                <path d="M2,2 L2,8 L7,6 L2,4" />
            </marker>
        </defs>
        <rect id="question1" width="100" height="100" x="10" y="10" class="frame" />
        <g transform="translate(45 48)">
        <rect rx="3" ry="3" width="25" height="14" style="fill:none;stroke: #3f829f;stroke-width:2;opacity:0.5" />
            <path d="M25,6 L40,6" style="stroke: black; stroke-width:2; fill: none;marker-end: url(#markerArrow);" />
            <text x="7" y="10" color="violet" font-size="10">No</text>
         </g>
        <g transform="translate(45 66)">
            <rect rx="3" ry="3" width="25" height="14" style="fill:none;stroke: #3f829f;stroke-width:2;opacity:0.5" />
            <path d="M13,15 L13,19" style="stroke: black; stroke-width:2; fill: none;marker-end: url(#markerArrow);" />
            <text x="5" y="10" font-size="10">Yes</text>
         </g>
        <text x="20" y="40" font-size="10">Are you a patient?</text>
        <rect id="question2" width="100" height="100" x="20" y="97" class="frame" />
        <text font-size="9" x="22" y="120">Are you male or female?</text>
        <g transform="translate(43 127)">
        <rect rx="3" ry="3" width="36" height="13" style="fill:none;stroke: #3f829f;stroke-width:2;opacity:0.5" />
            <path d="M36,6 L46,6" style="stroke: black; stroke-width:2; fill: none;marker-end: url(#markerArrow);" />
            <text x="5" y="10" font-size="9">Female</text>
         </g>
        <g...

CSS

.frame {
    opacity: 0
}
.theory {
    position: absolute;
    width: 600px;
    height: 414px;
    top: 0px;
    left: 315px;
    padding-left: 8px;
    color: #312b02;
    background-color: #adb39b
}
.rhizome {
    width:290px;
    height:400px;
    border-style: ridge;
    background-color: #3f829f
}
#svgpanel {
    background-color: white
}
#quiz {
    width:250px;
    height:200px;
}
.buttonface {
    width: 250px;
    height: 25px;
}
ol.buttonlist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.question {
    padding: 5px;
    max-width: 250px;
}
.label {
    font-weight: bold;
    color: #b8d3da
}
/* http://jsfiddle.net/maasaamiichii/8Fp8Y/4/light/ */

/* http://www.codeproject.com/Tips/863825/Angular-Calling-Directive-Method-from-Controller
http://plnkr.co/edit/JPh3wZ?p=preview */

JavaScript

//BootStrap
var app = angular.module('myApp', ['rhizome']);

var rhizome = angular.module('rhizome', []);

rhizome.factory('codeService', function () {
    var svc = {}

    svc.codedConcept = Object;

    svc.loadCodedConcepts = function (contained) {
        for (co in contained) {
            var definedConcept = contained[co].define.concept;
            for (cd in definedConcept) {
                definedConcept[cd].system = contained[co].define.system;
            }
            svc.codedConcept[contained[co].id] = definedConcept;
        }
    };

    svc.getCodedConcept = function (optionReference, removeHash) {
        if (removeHash) {
            optionReference = optionReference.substr(1);
        }
        return (svc.codedConcept[optionReference]);
    };

    return svc
});

rhizome.directive('rhizSvgPanel', function () {
    return function ($scope, $element, $attr) {
        var canvas = Snap($element[0]);
        var w = canvas.attr('width')
        var h = canvas.attr('height')

            function focusFrame(frId) {
                if (frId === 'home') {
                    tr = 't0,0'
                } else {
                    var el = canvas.select(frId)
                    var tgt = measureFrame(el)
                    var s = calculateScale(tgt, w, h)
                    var xadj = ((tgt.w / 2) * s) - tgt.cx
                    var yadj = ((tgt.h / 2) * s) - tgt.cy
                    var tr = 't' + xadj + ',' + yadj +
                        's' + s + ',' + tgt.cx + ',' + tgt.cy
                }
                setTimeout(function () {
                    canvas.animate({
                        transform: tr
                    }, 2000)
                }, 500)
            }

            function measureFrame(fr) {
                var w = fr.attr('width'),
                    h = fr.attr('height')
                    var meas = {
                    "cx": (w / 2) + Number(fr.attr('x')),
                        "cy": (h / 2) +...