Installing
You can take latest build in Releases. Add it and dependencies to your application.
<script src="https://cdn.jsdelivr.net/npm/rete@1.0.0-alpha.9/build/rete.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-vue-render-plugin@0.2.0/build/vue-render-plugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rete-connection-plugin@0.1.2/build/connection-plugin.min.js"></script>
Using the build system, you can install a library from npm
npm install rete rete-vue-render-plugin rete-connection-plugin
Import as follows
import Rete from "rete";
import ConnectionPlugin from 'rete-connection-plugin';
import VueRenderPlugin from 'rete-vue-render-plugin';
Node.js (optionally, only for processing on the server)
import { Engine, ComponentWorker } from "rete/build/rete-engine.min";
Getting started
Create needed Sockets
const numSocket = new Rete.Socket('Number value');
Define styles
.socket.number{
background: #96b38a
}
Create component
class NumComponent extends Rete.Component {
constructor(){
super('Number');
}
builder(node) {
let out = new Rete.Output('Number',numSocket);
node.addOutput(out);
}
worker(node, inputs, outputs){
outputs[0] = node.data.num;
}
}
Initialize a node editor and register component
<div id="rete" class="node-editor"></div>
const container = document.querySelector('#rete');
const editor = new Rete.NodeEditor('demo@0.1.0', container);
editor.use(ConnectionPlugin)
editor.use(VueRenderPlugin)
const numComponent = new NumComponent();
editor.register(numComponent);
Use the Engine to start processing the data
const engine = new Rete.Engine('demo@0.1.0');
editor.register(numComponent);
editor.on('process nodecreated noderemoved connectioncreated connectionremoved', async () => {
await engine.abort();
await engine.process(editor.toJSON());
});