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

Editor components

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

 

Dependencies