The SVG drawing library
Utility library for working with objects and collections
DOM manipulations, events
Add paragraphs of wrapped text in Raphael.js
Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
You can find all them under /src/vendor
directory.
/src/vax.js
/src/styles.css
/src/vax-grid.gif
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.
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}]});
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
[{
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
}
}
}]