Customization

Node templates

With the help of templates you can change the location or behaviour of the necessary elements inside the node (title / inputs / outputs / controls) or add your own. Templates are rendered using Angular Light, so you can use all available directives or even define your own.

By default, each node has a standart template. To define your template, you must specify it in the Component:

var componentNum = new D3NE.Component("number", {
   template: template,
    ...
});

Then certain nodes created in this component will use your template. You can specify either a single template for each of the components, as well as an individual for a particular type of nodes.

In the scope of the template, an instance of the Node class is available. For example, next expression print the node's title

{{node.title}}

Using al-repeat directive, it is necessary to display all inputs, outputs and controls. They also have some properties that you can use to add behavior. As in that example, the number of connections to the socket is checked and a class used is assigned if there is at least one connection

<div al-repeat="output in node.outputs" style="text-align: right">
     <div class="output-title">{{output.title}}</div>
     <div class="socket output {{output.socket.id}} {{output.connections.length>0?'used':''}}" 
                al-pick-output="al-pick-output"
                title="{{output.socket.name}} {{output.socket.hint}}">
    </div>
</div>

Connections

Most often in the nodes editors there are connections built using basis curve and four points (one in the output socket, two in the middle, and one in the input socket). They form a curve as in the screenshot below.

basis connections

But if you need to specify a different kind of connection, you can override connectionProducer method by returning points and curve type

editor.view.connectionProducer = (x1,y1,x2,y2) => {
    return {
        points:[[x1,y1],[x2,y2]],
        curve: 'step' // linear, step or basis(default)
    };
};

step connections

Styling

This is displayed in standard styles

default

If you prefer a different appearance, then you can override class properties or completely replace the file with the styles on your own.The following screenshot shows the appearance of the nodes to the UE4 Style example

ue4

As you can see, the styles have been changed not only for nodes, but for connections and background.

.socket.id-of-socket{
    background: #96b38a
}

.node.title-of-node{
    background: #96b38a
}

.connection.input-id-of-socket{
   stroke: red !important
}

.connection.output-id-of-socket{
   stroke: red !important
}

where id-of-socket is cebab case of socket id

new D3NE.Socket("ID of socket",...

and title-of-node:

new D3NE.Component("Title of node", ...

There is another way through which you can assign styles to a specific node/connection/group. Each of them has a property style in which you can change the Style Object Properties.

node.style.boxShadow = "2px 2px 20px red";
group.style.BackgroundColor = "black";
connection.style.stroke = 8; // only properties for <path> 

editor.view.update();