Installing
You can take latest build in Releases. Add it and dependencies to your application.
<script src="https://cdn.jsdelivr.net/npm/alight@0.14.0/alight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@4.10.2/build/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-node-editor@0.6.6/build/d3-node-editor.js"></script>
<link href="https://cdn.jsdelivr.net/npm/d3-node-editor@0.6.6/build/d3-node-editor.css" rel="stylesheet"></link>
Using the build system, you can install a library from npm
npm install d3-node-editor
Import as follows
import * as D3NE from "d3-node-editor";
Node.js (optionally, only for processing on the server)
import { Engine, ComponentWorker } from "d3-node-editor/build/d3-node-editor.engine";
Getting started
Create needed Sockets
var numSocket = new D3NE.Socket('number', 'Number value', 'hint');
Define them styles
.socket.number{
background: #96b38a
}
Create some components
var numComp = new D3NE.Component('Number',{
builder(node) {
var out = new D3NE.Output('Number',numSocket);
var numControl = new D3NE.Control('<input type="number">',(element, control)=>{
control.putData('num', 1);
});
return node
.addControl(numControl)
.addOutput(out);
},
worker(node, inputs, outputs){
outputs[0] = node.data.num;
}
});
var addComp = new D3NE.Component('Add',{
template: '<div .... ',
builder(node){
//...
return node;
},
async worker(node, inputs, outputs){
await asyncTask();
}
});
var components = [numComp,addComp];
Initialize context menu and node editor
<div id="d3ne" class="node-editor"></div>
var menu = new D3NE.ContextMenu({
'Actions':{
'Action': function(){alert('Subitem selected');}
},
'Nodes':{
'Number': numComp,
'Add': addComp
}
});
var container = document.querySelector('#d3ne');
var editor = new D3NE.NodeEditor('demo@0.1.0', container, components, menu);
Use the Engine to start processing the data (also avaliable cross-platform Engine)
var engine = new D3NE.Engine('demo@0.1.0', components);
editor.eventListener.on('change', async () => {
await engine.abort();
var status = await engine.process(editor.toJSON());
});
Full code and example you can take on the Codepen
Architecture