Usage

Dependencies

You can find all them under /src/vendor directory.

VAX files

Creating VAX object

First you have to define a container element on your page:

<div id="vax" style="width: 400px; height: 300px"></div>

Then you create a VAX object:

var myVAX = new VAX('vax', {
      schema: /*...*/    // your schema

    , userFunctionsSaveHandler: function(id, config, callback) {
        $.post('/vax/saveUserFunction', {schema: 'sql', id: id, config: JSON.stringify(config)}, function() { callback(); });
    }

    , userFunctionsLoadHandler: function(callback) {
        $.getJSON('/vax/loadUserFunctions', {schema: 'sql'}, function(data) { callback(data.userFunctions); });
    }
});

In config you provide a schema and handlers for saving/loading user functions, if needed. By default they are stored in localStorage. See the schema definition documentation.

Load/save blueprints

You can save your current blueprint graph with the saveGraph() or the serializeGraph() functions:

myVAX.saveGraph();
myVAX.serializeGraph();

In order to load a blueprint:

myVAX.loadGraph({nodes:[{c: "Select", id: 1, x: 900, y: 200}]});

Compose trees

To convert your blueprint to a tree use the composeTreesInlined() or the composeTrees()function:

myVAX.composeTreesInlined(); // returns an array of trees with inlined user functions
myVAX.composeTrees();        // returns an array of trees with untouched user functions

Tree structure

[{
    id: 8, // node id
    c: "Plus", // component name
    t: { // type params
        "T": "Numeric"
    },
    links: { // wired inputs
      A: { // input name
        id: 2,
        c: "Literal",
        a: { // attributes
          "V": "2"
        },
        links: {},
        out: "O" // output name
      },
      B: {
        id: 5,
        c: "Literal",
        a: {
          "V": "2"
        },
        links: {},
        out: "O" // output name
      }
    }
}]