jquery NodeEditor

by ihope

HTML

<div class='node'  style='left:150px;top:80px'> <span class='node-title'>&nbsp;Int</span>
    <div class='params'>
        <div class='inputs'>
             <a href='javascript:void(0)' class='node-input'><input type="number" name="points" min="-9999999999" max="9999999999"></a>
        </div>
        <div class='outputs'>
             <a  href='javascript:void(0)' class='node-output'>value<span class='bullet'>&#8226;</span></a>
           
        </div>
    </div>
</div>
<div class='node' style='left:350px;top:30px'> <span class='node-title'>&nbsp;Add</span>
    <div class='params'>
        <div class='inputs'>
             <a href='javascript:void(0)' class='node-input'><span class='bullet'>&#8226;</span>input_1</a>
             <a href='javascript:void(0)' class='node-input'><span class='bullet'>&#8226;</span>input_2</a>
        </div>
        <div class='outputs'>
             <a  href='javascript:void(0)' class='node-output'>Sum<span class='bullet'>&#8226;</span></a>
           
        </div>
    </div>
</div>

<div class='node' style='left: 534px; top: -179px; position: relative;'> <span class='node-title'>&nbsp;String</span>
    <div class='params'>
        <div class='inputs'>
            <a href='javascript:void(0)' class='node-input'><input type="text"/></a>        </div>
        <div class='outputs'>
             <a  href='javascript:void(0)' class='node-output'>value<span class='bullet'>&#8226;</span></a>
             
        </div>
    </div>
</div>
    

<div class='node' style='left:150px;top:30px'> <span class='node-title'>&nbsp;Display:Image</span>
    <div class='params'>
        <img src=''>
        <div class='inputs'>
            <a href='javascript:void(0)' class='node-input'><span class='bullet'>&#8226;</span>source</a>  <a href='javascript:void(0)' class='node-input'><span class='bullet'>&#8226;</span>imageData</a>        </div>
        <div class='outputs'>
        </div>
    </div>
</div>

CSS

body{
    font-family: arial,sans-serif;
    font-size:10pt;
}
.node {
    border:1px solid black;
    display:block;

    max-width: 164px;

    background:#333;

    color:#eee;

    z-index:1000;

    cursor: default;

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    padding : 3px;

    border-radius:3px;
    padding-bottom:5px;

}
.node a {
    text-decoration: none;
    color: inherit;
    border-radius:2px;
}
.node a:hover {
    text-decoration: none;
    color: #fff;
    background: #666;
}
.params{
    display:block;
        margin: 0;
    padding: 0;
    border: 0;
    vertical-align: top;
    margin-top: 4px;
    text-align: center ;
}
.params input[type=text] {
    width:100%;
}
.params img {
    width:140px;
    height:140px;
}
.inputs, .outputs {
   /* width:48.3463535%;*/
    text-align: left ;
    width:100%;
    margin: 0;
    padding: 0;
    border: 0;
    display:inline-block;
    vertical-align: top;
}
.node-input, .node-output {
    padding:3px;
    display:block;

    margin-top:3px

}
.bullet {
    color : red;
    margin:3px;
    font-size:1.2em;
}
.node-title:hover {
    background:#555;
    color:white;
}
.node-title {
    border-radius:2px;
    display:block;
    height:1.5em;
    width:100%;
    cursor:pointer;
    background:#eee;

    margin-left:3px;
    margin-right:6px;
    color:#555;

    
}

.node-output {
    text-align:right;
    /*padding-right : 0.5em;*/

}

JavaScript

getPath = function() {
        var diffx, diffy, f1, f2, min_diff, offset, ofx, ofy, x1, x2, x3, x4, y1, y2, y3, y4;
        f1 = this.getFieldPosition(this.model.from_field);
        f2 = this.getFieldPosition(this.model.to_field);
        offset = $("#container-wrapper").offset();
        ofx = $("#container-wrapper").scrollLeft() - offset.left;
        ofy = $("#container-wrapper").scrollTop() - offset.top;
        x1 = f1.left + ofx;
        y1 = f1.top + ofy;
        x4 = f2.left + ofx;
        y4 = f2.top + ofy;
        min_diff = 42;
        diffx = Math.max(min_diff, x4 - x1);
        diffy = Math.max(min_diff, y4 - y1);
        x2 = x1 + diffx * 0.5;
        y2 = y1;
        x3 = x4 - diffx * 0.5;
        y3 = y4;
        return ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
      };
nodeEditor = {
    title: 'some math node editor',
    type: 'nodeEditor.Math',
    view: {
        x: -200,
        y: -200,
        width: 400,
        height: 400,
    },
    nodes: [{
        type: 'Int',
        id: 'N0',
        pos: {
            x: 10,
            y: 60
        },
        output_1: {
            id: 'N1',
            val: 'input_1'
        },
    }, {
        type: 'Add',
        id: 'N1',
        pos: {
            x: 70,
            y: 120
        },
        integer_1: {
            id: 'N0',
            val: 'output_1'
        },
        integer_2: 8,
        output_1: {
            id: 'N2',
            val: 'input_1'
        }
    }, {
        type: 'Display',
        id: 'N2',
        pos: {
            x: 130,
            y: 180
        },
        input_1: {
            id: 'N0',
            val: 'output_1',
        }
    }]
}

$(function () {
    $(".node").draggable({ handle: ".node-title" });
});