Node editor which compiles flow to human readable javascript. Try at https://ayushk7.github.io/CodeWire/
Try at https://ayushk7.github.io/CodeWire/ CodeWire is a node based editor inspired by UE4 Blueprints which helps in better visualization of the code, and faster scripting of complex and repetitive tasks. It doesn't bind to any particular language. Multiple target languages can be added to added in the future.
Tutorial:
This project is still in under development, subsequent new features like functions, delay, sand boxing, save, undo will be added.
Join Discord Server https://discord.gg/VuB2UjzqrK Thanks @L-o-o-t for creating the server
//description of the Print node
if (type == 'Print') {
nodeDescription.nodeTitle = 'Print';
nodeDescription.execIn = true;
nodeDescription.pinExecInId = null;
nodeDescription.execOut = {
execOut0: {
execOutTitle: null,
pinExecOutId: null,
outOrder: 0,
},
}
nodeDescription.inputs = {
input0: {
inputTitle: 'Value',
dataType: 'Data',
defValue: "'hello'",
pinInId: null,
}
}
// styling for the node
nodeDescription.color = 'Print';
nodeDescription.rows = 3;
nodeDescription.colums = 12;
}
//NOTE: this same object is furthur used for serialization and deserialization of the graph, so we have some meta info like pinIds
But still the node is not available in the context menu
<div class="context-menu-items">Begin</div>
<div class="context-menu-items">Print</div> <!-- this is the title of the newly added node -->
<div class="context-menu-items">Alert</div>
<div class="context-menu-items">Confirm</div>
Result
For this you need add the logic in VisualScriptToJavascript.js in coreAlgorithm(node) method
case "Print": {
this.script += `console.log(${this.handleInp(inputPins[0])});\n
`;
this.coreAlgorithm(execOutPins[0]); // this tells algo to go to the next node which is connected at first pin(triangle shaped)
}
// this will append the console.log(input) in the generated js
Result
Example: Add Node
Description:
if (type == 'Add') { // this type should match the entry in the context menu's markup in index.html
nodeDescription.nodeTitle = 'Add';
nodeDescription.inputs = {
input0: {
inputTitle: 'ValueA',
dataType: 'Number',
defValue: 0,
pinInId: null,
},
input1: {
inputTitle: 'ValueB',
dataType: 'Number',
defValue: 0,
pinInId: null,
}
}
nodeDescription.outputs = {
output0: {
outputTitle: 'Result',
dataType: 'Number',
pinOutId: null,
outOrder: 0,
}
}
nodeDescription.color = 'Math';
nodeDescription.rows = 2;
nodeDescription.colums = 10;
}
And In VisualScriptToJavascript.js
in handleInputs() method
case "Add": {
expr = `(${this.handleInputs(inputPins[0])} + ${this.handleInputs(inputPins[1])})`;
}
// this will generate and return (inp1 + inp2) expression