Provide a way to customize Connector UI/Skin

[davidB]

Goals : a simple a way to customize the display of ther connector. eg :

• using arraw instead of node
• adding label, tooltips info

Info : How to access ui nodes of a connector doesn't allow to replace current current node (CircleNode)

[davidB]

As current partial workaround (to be able to add PopOver) I expose FXFlowNodeSkin.connectors as ReadOnlyMapProperty

-    Map<Connector, Shape> connectors = new HashMap<>();
+    final ObservableMap<Connector, Shape> connectors = FXCollections.observableMap(new HashMap<Connector, Shape>());
+    public final ReadOnlyMapProperty<Connector, Shape> connectorsProperty =  new ReadOnlyMapWrapper<>(this, "connectors", connectors).getReadOnlyProperty();

sample usage :

        PopOver popOver = new PopOver();
        flow.getNodes().addListener(new ListChangeListener<VNode>(){
            @Override
            public void onChanged(ListChangeListener.Change<? extends VNode> c) {
                while (c.next()) {
                    if (c.wasAdded()){
                        for (VNode vn : c.getAddedSubList()) {
                            flow.getNodeSkinsById(vn.getId())
                            .stream()
                            .filter(s -> s instanceof FXFlowNodeSkin)
                            .forEach(s -> {
                                //TODO Store registration
                                ((FXFlowNodeSkin) s).connectorsProperty.addListener(new MapChangeListener<Connector,Shape>(){
                                    @Override
                                    public void onChanged(MapChangeListener.Change<? extends Connector, ? extends Shape> change) {
                                        if (change.wasAdded()) {
                                            Connector c = change.getKey();
                                            Shape cn =  change.getValueAdded();
                                            //TODO Store registration
                                            cn.addEventHandler(MouseEvent.MOUSE_ENTERED, (e) -> {
                                                ((Label)popOver.getContentNode()).setText(change.getKey().getLocalId() + " : " + c.getType());
                                                popOver.show((javafx.scene.Node)e.getSource(), -10);
                                            });
                                            cn.addEventHandler(MouseEvent.MOUSE_EXITED, (e) -> {
                                                popOver.hide();
                                            });
                                        } else if (change.wasRemoved()) {
                                            //TODO remove registration
                                        }
                                    }
                                });
                            });
                        }
                    } else if (c.wasRemoved()) {
                        //TODO remove registration
                    }
                }
            }
        });

[miho]

The connectors can now be styled via CSS (see sample project). Custom UI controls should be placed inside the window. We will provide a way to visually bind the UI contained in the window to specific connectors.