Node Connect

by rajeshpillai

HTML

<link rel="stylesheet" href="http://mking.me/html5-node-diagram/diagram.css">
<script src="http://mking.me/html5-node-diagram/models-no-arrowhead-drag.js"></script>
<div id="stage">
</div>

JavaScript

var stage = $('#stage');

var NODE_DIMENSIONS = {
    w: 50,
    h: 50
};

var nodeA = new Node({
    title: 'Node A',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: 50,
    y: 50,
    events: {
        click: function() {
            window.console.log(this);
        }
    }
}).attach();

var nodeB = new Node({
    title: 'Node B',
    stage: stage,
    w: NODE_DIMENSIONS.w,
    h: NODE_DIMENSIONS.h,
    x: 350,
    y: 150
}).attach();

new Segment({
    h: 5,
    stage: stage,
    origin: nodeA,
    destination: nodeB
}).attach();

new Segment({
    h: 5,
    stage: stage,
    origin: nodeC,
    destination: nodeA
}).attach();