Show graph exports

[bergie]

Show graph exports

[forresto]

I feel like if they look like nodes they should be able to connect to multiple inports (noflo/noflo#90). If they are associated 1-1 with a specific inport, then it could be a visual representation attached to the inport itself.

Could be added/removed from the node inspector, similar to IIPs.

A graph inspector shows the graph's exports as a list for immediate testing.

[bergie]

Hiding exports to the inspector would be a bad idea, because they are a very crucial part of graphs... they are the entry and exit points of the graph from the outside. In the original NoFlo UI I was considering rendering those as circles on the borders of the graph editor to emphasize that they're the connection to the outside, but I don't mind the way @t47lor designed them (imagine Kick being a exported inport):

The good thing about this approach is that it closely resembles how start/end is depicted in flowcharts:

It also is how we showed exports in noflo-graphviz:

[bergie]

Of course, as a counterpoint, Quartz Composer uses a separate dialog for exporting ports:

The exported ports are "greyed out" in the graph editor:

[forresto]

The flowchart point is good.

I was imagining something closer to QC, since that visually connects them to the port. It seems simpler to develop it that way.

[bergie]

Well, an additional argument is that exported ports are a feature of the graph, not of the node :-)

[forresto]

in/out ambiguity noflo/noflo#118 is making things ugly. In order to show the export, we need to find the port to connect the edge. If the library hasn't loaded yet, we should add a placeholder port to the node (like we do with edges). But we can't know if that will be an in or out.

So, we have to wait until the library has loaded to show the exports.

[forresto]

todo:

• show them in minimap
• fix port positioning on zoom

[forresto]

Getting stumped.

Ports on exports don't move on zoom.

On zoom, the-graph-process.graphZoom() is getting hit for the exports (this.nodeName === "THE-GRAPH-EXPORT"), but in

    // Update all ports
    var ports = Array.prototype.slice.call(this.getElementsByTagName('the-graph-port'));
    ports.forEach(function(port){
      port.graphZoom();
    }.bind(this));

... ports is an empty array, even though there is definitely a the-graph-port child.

Might be a Polymer bug, but I can't reduce it: http://jsbin.com/asIVajOg/4/edit?html,console,output

[forresto]

(using chrome console's built-in $ shortcut)

The only difference that I see between -process and -export is that -export extends -process. I tried to reduce it to a bug in the jsbin above, but couldn't.

[bergie]

@forresto maybe a question of lightdom vs. ShadowDOM?

[forresto]

the-graph-port is in the-graph-export

[forresto]

Tried it in Chrome Canary where more of Polymer is native, and it was even whacker. I think the issue had something to do with extends. So instead of the-graph-export extending the-graph-process, now it includes it. This seems cleaner, and works.

<the-graph-export>
  <the-graph-process></the-graph-process>
  <the-graph-edge></the-graph-edge>
</the-graph-export>