how to use the-graph-editor

[yosiat]

Hi,

I am trying on my local machine, and I am getting the next errors in the console -

No noflo directory at all under bower_components and no require. What should I do in order to fix it?

[forresto]

Sorry about that.

I need to make a component.json to pull that in. You can save this built noflo.js http://the-grid.github.io/the-graph/bower_components/noflo/browser/noflo.js to that location if you want a quick hack.

[yosiat]

Thanks @forresto it works!

Does the "the-graph" have any documentation? I want to use it in my project.

[forresto]

If you want compatibility with a full FBP IDE, you can wire in with FlowHub by making your runtime talk the FBP protocol: http://noflojs.org/documentation/protocol/ . FlowHub (noflo-ui) provides lots of stuff around the-graph, like a component library, journal for undo/redo, browser storage, and github connection.

To use just the-graph, you'll have to hook into the noflo graph events.

[yosiat]

I want to use the "the-graph", How can I learn for example how to add a node with input and output port?

[forresto]

OK, I made a basic demo that shows making a custom component library and adding nodes:

http://the-grid.github.io/the-graph/the-graph-editor/demo-simple.html

The relevant code:

    // The graph editor
    var editor = document.getElementById('editor');

    // Component library
    var library = {
      basic: {
        name: 'basic',
        description: 'basic demo component',
        icon: 'eye',
        inports: [
          {'name': 'in', 'type': 'all'}
        ],
        outports: [
          {'name': 'out', 'type': 'all'}
        ]
      }
    };
    editor.$.graph.library = library;

    // Load empty graph
    var graph = {};
    editor.graph = graph;

    // Add node button
    var addnode = function () {
      var id = Math.round(Math.random()*100000).toString(36);
      var component = 'basic';
      var metadata = {
        label: 'label',
        x: Math.round(Math.random()*800),
        y: Math.round(Math.random()*600)
      };
      var newNode = editor.nofloGraph.addNode(id, component, metadata);
      console.log(newNode);
    };
    document.getElementById("addnode").addEventListener("click", addnode);

[yosiat]

hi @forresto , thank you for the simple demo!