Arrows?

[samdoeswork]

Is it possible to add arrows to indicate direction between nodes?

[jerosoler]

Hello

There is no implemented function as such.

But you can refer to this example: https://github.com/jerosoler/Drawflow/issues/20#issuecomment-669753826

In the future I will add the function.

You could also change the onput / input circles to triangles with css.

[jerosoler]

Other solutions for arrows https://github.com/jerosoler/Drawflow/issues/163#issuecomment-828187507

[vivianspencer]

I've created an alternative solution here which adds a separate SVG path for the arrow so it can be styled differently to the main path.

https://github.com/vivianspencer/Drawflow/tree/arrows

[PabloPerezAguilo]

I've created an alternative solution here which adds a separate SVG path for the arrow so it can be styled differently to the main path.

https://github.com/vivianspencer/Drawflow/tree/arrows

The arrow is hidden under the point:

Maybe the point must be littler in arrow mode:

[vivianspencer]

Easy fix to update the transform on the CSS

Before:

.drawflow .connection .arrow {
    transform: translate(-9999px,-9999px);
}

After:

.drawflow .connection .arrow {
    transform: translate(-10005px,-9999px);
}

[ArFe]

Other solutions for arrows #163 (comment)

Using this same approach, I added a class to the output/input that informs it's connected (@jerosoler something it would be nice to have intrinsically to the library). Then I added the css Jero suggested, only when connected. Looks cleaner...

I used for input only though.

CSS:

.drawflow .drawflow-node .inputConnected {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent transparent transparent #007bff;
    background: transparent;
    border-radius: 0px;
}

JS:

editor.on("connectionCreated", function(info) {
  // Add arrow shape to input
  document.getElementById('node-'+info.input_id).getElementsByClassName(info.input_class)[0].classList.add('inputConnected');  
});

editor.on("connectionRemoved", function(info) {
  // Remove arrow shape from input
  document.getElementById('node-'+info.input_id).getElementsByClassName(info.input_class)[0].classList.remove('inputConnected');    
});

PS: I'm also restricting the inputs/outputs to one connection only. If allowing more connections per connection, a protection would be needed when removing the class ( if(editor.getNodeFromId(info.input_id).inputs[info.input_class].connections.length === 0) ).

[gharman]

@ArFe 's solution worked well for me; exactly what I wanted. However it assumes you are building the graph live & processing events. If you're loading a graph (e.g. via .import()), then add this immediately after the import:

var nodes = this.allNodes()
  for (var i in nodes) {
    // I don't like the 'input_1' magic symbol here - but it always seems to be the same... maybe a cleaner way to do this.
    var inpNodes = document.getElementById('node-'+nodes[i]).getElementsByClassName('input_1')
    if (inpNodes.length > 0) {
      inpNodes[0].classList.add('inputConnected');
    }
  }

And allNodes() (which would be a nice addition to the editor API):

allNodes() {
  var nodes = [];
  const editor = this.editor.drawflow.drawflow // Replace this.editor with wherever you have your Drawflow()
  Object.keys(editor).map(function(moduleName, index) {
       for (var node in editor[moduleName].data) {
            nodes.push(editor[moduleName].data[node].id);
        }
   });
 return nodes;
}