initial commit

LICENSE.html

+<p>Copyright (c) HTML5 Boilerplate</p>
+
+<p>Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the &quot;Software&quot;), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:</p>
+
+<p>The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.</p>
+
+<p>THE SOFTWARE IS PROVIDED &quot;AS IS&quot;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.</p>

css/main.css

+/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
+
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html,
+button,
+input,
+select,
+textarea {
+    color: #222;
+}
+
+html {
+    font-size: 1em;
+    line-height: 1.4;
+}
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+::selection {
+    background: #b3d4fc;
+    text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #ccc;
+    margin: 1em 0;
+    padding: 0;
+}
+
+/*
+ * Remove the gap between images, videos, audio and canvas and the bottom of
+ * their containers: h5bp.com/i/440
+ */
+
+audio,
+canvas,
+img,
+video {
+    vertical-align: middle;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+    resize: vertical;
+}
+
+/* ==========================================================================
+   Browse Happy prompt
+   ========================================================================== */
+
+.browsehappy {
+    margin: 0.2em 0;
+    background: #ccc;
+    color: #000;
+    padding: 0.2em 0;
+}
+
+/* ==========================================================================
+   Author's custom styles
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==========================================================================
+   Helper classes
+   ========================================================================== */
+
+/*
+ * Image replacement
+ */
+
+.ir {
+    background-color: transparent;
+    border: 0;
+    overflow: hidden;
+    /* IE 6/7 fallback */
+    *text-indent: -9999px;
+}
+
+.ir:before {
+    content: "";
+    display: block;
+    width: 0;
+    height: 150%;
+}
+
+/*
+ * Hide from both screenreaders and browsers: h5bp.com/u
+ */
+
+.hidden {
+    display: none !important;
+    visibility: hidden;
+}
+
+/*
+ * Hide only visually, but have it available for screenreaders: h5bp.com/v
+ */
+
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+/*
+ * Extends the .visuallyhidden class to allow the element to be focusable
+ * when navigated to via the keyboard: h5bp.com/p
+ */
+
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+}
+
+/*
+ * Hide visually and from screenreaders, but maintain layout
+ */
+
+.invisible {
+    visibility: hidden;
+}
+
+/*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ *    `contenteditable` attribute is included anywhere else in the document.
+ *    Otherwise it causes space to appear at the top and bottom of elements
+ *    that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ *    `:before` to contain the top-margins of child elements.
+ */
+
+.clearfix:before,
+.clearfix:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+/*
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+ */
+
+.clearfix {
+    *zoom: 1;
+}
+
+/* ==========================================================================
+   EXAMPLE Media Queries for Responsive Design.
+   These examples override the primary ('mobile first') styles.
+   Modify as content requires.
+   ========================================================================== */
+
+@media only screen and (min-width: 35em) {
+    /* Style adjustments for viewports that meet the condition */
+}
+
+@media print,
+       (-o-min-device-pixel-ratio: 5/4),
+       (-webkit-min-device-pixel-ratio: 1.25),
+       (min-resolution: 120dpi) {
+    /* Style adjustments for high resolution devices */
+}
+
+/* ==========================================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+@media print {
+    * {
+        background: transparent !important;
+        color: #000 !important; /* Black prints faster: h5bp.com/s */
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+    /*
+     * Don't show links for images, or javascript/internal links
+     */
+
+    .ir a:after,
+    a[href^="javascript:"]:after,
+    a[href^="#"]:after {
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead {
+        display: table-header-group; /* h5bp.com/t */
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    @page {
+        margin: 0.5cm;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+}

css/normalize.min.css

+/*! normalize.css v1.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
\ No newline at end of file

index.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+
+		<link rel='stylesheet' href='css/main.css'>
+		<link rel='stylesheet' href='css/normalize.min.css'>
+
+    </head>
+    <body>
+        <!-- Add your site or application content here -->
+        <div id="app">
+            {{ msg }}
+            </div>
+        
+
+        <script src='js/vue.js'></script>
+        <script src='js/svg.js'></script>
+        <script src='js/draggy.js'></script>
+        <script src='js/connectable.js'></script>
+        
+        <script src='js/main.js'></script>
+    </body>
+</html>

js/connectable.js

+"use strict";
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+(function e(t, n, r) {
+  function s(o, u) {
+    if (!n[o]) {
+      if (!t[o]) {
+        var a = typeof require == "function" && require;if (!u && a) return a(o, !0);if (i) return i(o, !0);var f = new Error("Cannot find module '" + o + "'");throw f.code = "MODULE_NOT_FOUND", f;
+      }var l = n[o] = { exports: {} };t[o][0].call(l.exports, function (e) {
+        var n = t[o][1][e];return s(n ? n : e);
+      }, l, l.exports, e, t, n, r);
+    }return n[o].exports;
+  }var i = typeof require == "function" && require;for (var o = 0; o < r.length; o++) {
+    s(r[o]);
+  }return s;
+})({ 1: [function (require, module, exports) {
+    var Id = require("idy"),
+        SetOrGet = require("set-or-get"),
+        IterateObject = require("iterate-object"),
+        Deffy = require("deffy");var _connections = {},
+        _betweenTwoBubbles = {},
+        container = null,
+        markers = null;function connectable(options, elmTarget) {
+      var con = {};if (elmTarget === undefined) {
+        elmTarget = options;options = {};
+      }container = options.container || container;var elmSource = this;markers = options.markers || markers;options.k = options.k || 100;options.kk = options.kk || 10;var marker = markers.marker(10, 10),
+          markerId = "triangle-" + Id(),
+          line = container.path().attr("marker-end", "url(#" + markerId + ")").fill("none");marker.attr({ id: markerId, viewBox: "0 0 10 10", refX: "0", refY: "5", markerUnits: "strokeWidth", markerWidth: "4", markerHeight: "5" });marker.path().attr({ d: "M 0 0 L 10 5 L 0 10 z" });var sPos = {},
+          tPos = {};con.source = elmSource;con.target = elmTarget;con.line = line;con.marker = marker;SetOrGet(_connections, con.source.id(), []).push(con);SetOrGet(_connections, con.target.id(), []).push(con);SetOrGet(_betweenTwoBubbles, { toString: function toString() {
+          var ids = [con.source.id(), con.target.id()],
+              id1 = ids.join("->"),
+              id2 = ids.reverse().join("->");con._ = con.id = id1;if (_betweenTwoBubbles[id2]) {
+            con._ = id2;return id2;
+          }con.id = id1;return id1;
+        } }, []).push(con);con.computeLineCoordinates = function (cons) {
+        var output = [],
+            l = cons.length;IterateObject(cons, function (con, i) {
+          var sT = con.source.transform(),
+              tT = con.target.transform(),
+              sB = con.source.bbox(),
+              tB = con.target.bbox(),
+              x1 = sT.x + sB.width / 2,
+              y1 = sT.y + sB.height / 2,
+              x2 = tT.x + tB.width / 2,
+              y2 = tT.y + tB.height / 2,
+              cx = (x1 + x2) / 2,
+              cy = (y1 + y2) / 2,
+              dx = Math.abs((x1 - x2) / 2),
+              dy = Math.abs((y1 - y2) / 2),
+              dd = null,
+              out = { x1: x1, y1: y1, x2: x2, y2: y2, ex: x1, ey: y1 };if (i !== (l - 1) / 2) {
+            dd = Math.sqrt(dx * dx + dy * dy);out.ex = cx + dy / dd * options.k * (i - (l - 1) / 2);out.ey = cy - dx / dd * options.k * (i - (l - 1) / 2);
+          }output.push(out);
+        });return output;
+      };if (options.padEllipse) {
+        con.computeLineCoordinates = function (cons) {
+          var output = [],
+              l = cons.length;IterateObject(cons, function (con, i) {
+            var elmS = con.source.node.querySelector("ellipse") || con.source.node.querySelector("circle"),
+                elmT = con.target.node.querySelector("ellipse") || con.target.node.querySelector("circle"),
+                xR1,
+                xR2,
+                yR1,
+                yR2,
+                sT = con.source.transform(),
+                tT = con.target.transform(),
+                sB = con.source.bbox(),
+                tB = con.target.bbox();if (elmS.tagName === "circle") {
+              xR1 = yR1 = parseFloat(elmS.getAttribute("r"));xR2 = yR2 = parseFloat(elmT.getAttribute("r"));
+            } else {
+              xR1 = parseFloat(elmS.getAttribute("rx"));yR1 = parseFloat(elmS.getAttribute("ry"));xR2 = parseFloat(elmT.getAttribute("rx"));yR2 = parseFloat(elmT.getAttribute("ry"));
+            }var sx = sT.x + xR1 / 2,
+                sy = sT.y + yR1 / 2,
+                tx = tT.x + xR2 / 2,
+                ty = tT.y + yR2 / 2,
+                dx = tx - sx,
+                dy = ty - sy,
+                d = Math.sqrt(dx * dx + dy * dy),
+                ux = dx / d,
+                uy = dy / d,
+                cx1 = sx + xR1 * ux,
+                cy1 = sy + yR1 * uy,
+                cx2 = sx + (d - xR2 - 5) * ux,
+                cy2 = sy + (d - yR2 - 5) * uy;var x1 = cx1 + xR1 / 2,
+                y1 = cy1 + yR1 / 2,
+                x2 = cx2 + xR2 / 2,
+                y2 = cy2 + yR2 / 2;var cx = (x1 + x2) / 2,
+                cy = (y1 + y2) / 2,
+                dd = null,
+                out = { x1: x1, y1: y1, x2: x2, y2: y2, ex: x1, ey: y1 };if (isNaN(out.x1)) {
+              out.x1 = sT.x + xR1 * 2;out.y1 = sT.y + yR1 / 2;out.x2 = sT.x;out.y2 = out.y1;out.ex = (out.x1 + out.x2) / 2;out.ey = out.y1 - options.kk * (i + 1);
+            } else {
+              dx = Math.abs((x1 - x2) / 2);dy = Math.abs((y1 - y2) / 2);if (i !== (l - 1) / 2) {
+                dd = Math.sqrt(dx * dx + dy * dy);out.ex = cx + dy / dd * options.k * (i - (l - 1) / 2);out.ey = cy - dx / dd * options.k * (i - (l - 1) / 2);
+              }
+            }output.push(out);
+          });return output;
+        };
+      }elmSource.cons = elmSource.cons || [];elmSource.cons.push(con);con.update = function () {
+        var cons = Deffy(_betweenTwoBubbles[con._], []),
+            results = con.computeLineCoordinates(cons);IterateObject(results, function (r, i) {
+          cons[i].line.plot("M" + r.x1 + " " + r.y1 + " Q" + r.ex + " " + r.ey + " " + r.x2 + " " + r.y2);
+        });
+      };con.update();elmSource.on("dragmove", con.update);elmTarget.on("dragmove", con.update);con.setLineColor = function (color, c) {
+        c = c || this;c.line.stroke(color);c.marker.fill(color);
+      };return con;
+    }if (typeof SVG === "function") {
+      SVG.extend(SVG.Element, { connectable: connectable });
+    } else if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") {
+      throw new Error("SVG.js is not loaded but it is required.");
+    }module.exports = connectable;
+  }, { deffy: 2, idy: 4, "iterate-object": 5, "set-or-get": 6 }], 2: [function (require, module, exports) {
+    var Typpy = require("typpy");function Deffy(input, def, options) {
+      if (typeof def === "function") {
+        return def(input);
+      }options = Typpy(options) === "boolean" ? { empty: options } : { empty: false };if (options.empty) {
+        return input || def;
+      }if (Typpy(input) === Typpy(def)) {
+        return input;
+      }return def;
+    }module.exports = Deffy;
+  }, { typpy: 3 }], 3: [function (require, module, exports) {
+    function Typpy(input, target) {
+      if (arguments.length === 2) {
+        return Typpy.is(input, target);
+      }return Typpy.get(input, true);
+    }Typpy.is = function (input, target) {
+      return Typpy.get(input, typeof target === "string") === target;
+    };Typpy.get = function (input, str) {
+      if (typeof input === "string") {
+        return str ? "string" : String;
+      }if (null === input) {
+        return str ? "null" : null;
+      }if (undefined === input) {
+        return str ? "undefined" : undefined;
+      }if (input !== input) {
+        return str ? "nan" : NaN;
+      }return str ? input.constructor.name.toLowerCase() : input.constructor;
+    };module.exports = Typpy;
+  }, {}], 4: [function (require, module, exports) {
+    function Idy(length) {
+      length = length || 10;return Math.random().toString(35).substr(2, length);
+    }module.exports = Idy;
+  }, {}], 5: [function (require, module, exports) {
+    function IterateObject(obj, fn) {
+      var i = 0,
+          keys = [];if (Array.isArray(obj)) {
+        for (; i < obj.length; ++i) {
+          if (fn(obj[i], i, obj) === false) {
+            break;
+          }
+        }
+      } else {
+        keys = Object.keys(obj);for (; i < keys.length; ++i) {
+          if (fn(obj[keys[i]], keys[i], obj) === false) {
+            break;
+          }
+        }
+      }
+    }module.exports = IterateObject;
+  }, {}], 6: [function (require, module, exports) {
+    var Deffy = require("deffy");function SetOrGet(input, field, def) {
+      return input[field] = Deffy(input[field], def);
+    }module.exports = SetOrGet;
+  }, { deffy: 7 }], 7: [function (require, module, exports) {
+    arguments[4][2][0].apply(exports, arguments);
+  }, { dup: 2, typpy: 8 }], 8: [function (require, module, exports) {
+    arguments[4][3][0].apply(exports, arguments);
+  }, { dup: 3 }] }, {}, [1]);
\ No newline at end of file

js/draggy.js

+(function() {
+    SVG.extend(SVG.Element, {
+        /**
+         * draggy
+         * Makes an element draggable.
+         *
+         * @name draggy
+         * @function
+         * @param {Object|Function} constraint An object containing the
+         * constraint values or a function which gets the `x` and `y` values
+         * and returns a boolean or an object containing the `x` and `y`
+         * boolean values.`false` skips moving while `true` allows it.
+         * @return {SVG} The SVG element.
+         */
+        draggy: function (constraint) {
+
+            var start
+              , drag
+              , end
+              , element = this
+              ;
+
+            // Remove draggable if already present
+            if (typeof this.fixed === "function") {
+                this.fixed();
+            }
+
+            // Ensure constraint object
+            constraint = constraint || {};
+
+            // Start dragging
+            start = function(event) {
+                var parent = this.parent(SVG.Nested) || this.parent(SVG.Doc);
+                event = event || window.event;
+
+                // Invoke any callbacks
+                if (element.beforedrag) {
+                    element.beforedrag(event);
+                }
+
+                // Get element bounding box
+                var box = element.bbox();
+
+                if (element instanceof SVG.G) {
+                    box.x = element.x();
+                    box.y = element.y();
+                } else if (element instanceof SVG.Nested) {
+                    box = {
+                        x: element.x()
+                      , y: element.y()
+                      , width: element.width()
+                      , height: element.height()
+                    };
+                }
+
+                // Store event
+                element.startEvent = event;
+
+                // Store start position
+                element.startPosition = {
+                    x: box.x
+                  , y: box.y
+                  , width: box.width
+                  , height: box.height
+                  , zoom: parent.viewbox().zoom
+                  , rotation: element.transform("rotation") * Math.PI / 180
+                };
+
+                // Add while and end events to window
+                SVG.on(window, "mousemove", drag);
+                SVG.on(window, "touchmove", drag);
+
+                SVG.on(window, "mouseup", end);
+                SVG.on(window, "touchend", end);
+
+                // Invoke any callbacks
+                element.node.dispatchEvent(new CustomEvent("dragstart", {
+                    detail: {
+                        event: event
+                      , delta: {
+                            x: 0
+                          , y: 0
+                        }
+                    }
+                }));
+
+                // Prevent selection dragging
+                if (event.preventDefault) {
+                    event.preventDefault();
+                } else {
+                    event.returnValue = false;
+                }