TESTES COM JOINT

Framework criada para desenvolvimento de diagramas, com base em Raphael.

by Klawztro

HTML

<script src="http://www.jointjs.com/build/joint.all.min.js"></script>
<script src="http://www.jointjs.com/build/joint.dia.fsa.min.js"></script>
<div id='container'></div>
<input type='button' name='novo_estado' value='Novo estado' />
<input type='button' name='nova_funcao' value='Nova funcao' />

CSS

#container {
    width:500px;
    height:300px;
    border:1px solid #ccc;
}

JavaScript

$(function() {

        
    Joint.paper('container',500,300);
    var fsa = Joint.dia.fsa;
    var s0 = fsa.StartState.create({ position: {x: 50, y: 50} });
    var se = fsa.EndState.create({ position: {x: 450, y: 150} });
    var s1 = fsa.State.create({ position: {x: 120, y: 120}, label: "state 1" });
    var s2 = fsa.State.create({ position: {x: 300, y: 50}, label: "state 2" });
    var all = [s0, s1, s2, se];
    s0.joint(s1, (fsa.arrow.label = "a",fsa.arrow));
    s1.joint(s2, (fsa.arrow.label = "b",fsa.arrow));
    s2.joint(se, (fsa.arrow.label = "c",fsa.arrow));    
    
    var MYAPP = {};
    MYAPP.arrow = {};
    
    $("input[name=novo_estado]").click(function() {
        var new_state = createState(10,10);
    });
    
   
    
    $("input[name=nova_funcao]").click(function() {
        MYAPP.arrow.init_arrow = true;
    });    
    
    
    
    function createState(_x,_y,config) {
        config = config || {};
        var novo_estado = fsa.State.create({ position: {x: _x, y: _y} },config);
        return novo_estado;
    }
});