JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div id="StratusCanvas" class="span12"></div>
JavaScript
// Data
var data = {
"shapes": {
"Start": {
"type": "rect",
"x": "0.3",
"y": "0.01",
"w": "60",
"h": "40",
"cr": "10",
"cl": "#a44",
"tx": "5",
"ty": "5",
"tcl": "#222",
"t": "Start"
},
"Middle": {
"type": "rect",
"x": "0.45",
"y": "0.15",
"w": "100",
"h": "40",
"cr": "10",
"cl": "#a44",
"tx": "5",
"ty": "5",
"tcl": "#222",
"t": "Middle"
},
"End": {
"type": "rect",
"x": "0.25",
"y": "0.3",
"w": "100",
"h": "40",
"cr": "10",
"cl": "#a44",
"tx": "5",
"ty": "5",
"tcl": "#222",
"t": "End"
}
},
"connections": {
"0": {
"s": "Start",
"e": "Middle",
"cl": "#222",
"bg": "#222|4"
},
"1": {
"s": "Middle",
"e": "End",
"cl": "#222",
"bg": "#222|4"
}
}
};
// --------------------------------------
// Function to draw shape connections
//
// From raphaeljs.com/graffle.html
// --------------------------------------
Raphael.fn.connection = function(obj1, obj2, line, bg) {
if (obj1.line && obj1.from && obj1.to) {
line = obj1;
obj1 = line.from;
obj2 = line.to;
}
var bb1 = obj1.node.getBBox(),
bb2 = obj2.node.getBBox(),
p = [{
x: bb1.x + bb1.width / 2,
y: bb1.y - 1},
{
x: bb1.x + bb1.width / 2,
y: bb1.y + bb1.height + 1},
{
x: bb1.x - 1,
y: bb1.y + bb1.height / 2},
{
x: bb1.x + bb1.width + 1,
y: bb1.y + bb1.height / 2},
{
...