miho / VWorkflows

Flow Visualization Library for JavaFX and VRL-Studio
http://vworkflows.mihosoft.eu
Other
294 stars 67 forks source link

Connections not Showing Up #59

Closed ddukki closed 7 years ago

ddukki commented 7 years ago

I'm fairly new at this, but I didn't see any tutorials or sample code online besides those found on this repository.

Basically, I'm using one of the tutorial programs on the website, but it doesn't seem to show any of the connections or the connectors on the nodes themselves. I'll include the code I'm using, as well as a screen shot of what it looks like.

Using Maven build 0.2.4.3

ddukki commented 7 years ago
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package workflowprototype;

import eu.mihosoft.vrl.workflow.FlowFactory;
import eu.mihosoft.vrl.workflow.VFlow;
import eu.mihosoft.vrl.workflow.VNode;
import eu.mihosoft.vrl.workflow.fx.FXSkinFactory;
import eu.mihosoft.vrl.workflow.fx.ScalableContentPane;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author Michael Hoffer <info@michaelhoffer.de>
 */
public class Main extends Application {

    /**
     * The main() method is ignored in correctly deployed JavaFX application.
     * main() serves only as fallback in case the application can not be
     * launched through deployment artifacts, e.g., in IDEs with limited FX
     * support. NetBeans ignores main().
     *
     * @param args the command line arguments
     */
    public static void main(final String[] args) {
        launch(args);
    }

    @Override
    public void start(final Stage primaryStage) {

        // create scalable root pane
        final ScalableContentPane canvas = new ScalableContentPane();

        // define background style
        canvas.setStyle("-fx-background-color: linear-gradient(to bottom, rgb(10,32,60), rgb(42,52,120));");

        // create a new flow object
        final VFlow flow = FlowFactory.newFlow();

        // create skin factory for flow visualization
        final FXSkinFactory fXSkinFactory = new FXSkinFactory(canvas);

        // generate the ui for the flow
        flow.setSkinFactories(fXSkinFactory);

        // make it visible
        flow.setVisible(true);

        // create flow with depth 3 and width 10
        createFlow(flow, 3, 10);

        // show the main stage/window
        showStage(canvas, primaryStage);

    }

    private void showStage(final ScalableContentPane canvas, final Stage primaryStage) {
        // the usual application setup
        final Scene scene = new Scene(canvas, 800, 800);
        primaryStage.setTitle("VWorkflows Tutorial 02");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * Creates a flow with specified width and depth.
     *
     * @param workflow parent workflow
     * @param depth flow depth (number of nested nodes)
     * @param width flow width (number of nodes per layer)
     */
    public void createFlow(final VFlow workflow, final int depth, final int width) {

        // stop if we reached deppest layer
        if (depth < 1) {
            return;
        }

        // create nodes in current layer
        for (int i = 0; i < width; i++) {

            VNode n;

            // every second node shall be a subflow
            if (i % 2 == 0) {
                // create subflow
                final VFlow subFlow = workflow.newSubFlow();
                n = subFlow.getModel();
                createFlow(subFlow, depth - 1, width);
            } else {
                //create leaf node
                n = workflow.newNode();
            }

            n.setTitle("Node " + i);

            // every third node shall have the same connection type
            // colors for "control", "data" and "event" are currently hardcoded
            // in skin. This will change!
            if (i % 3 == 0) {
                n.addInput("control");
                n.addOutput("control");
            } else if (i % 3 == 1) {
                n.addInput("data");
                n.addOutput("data");
            } else if (i % 3 == 2) {
                n.addInput("event");
                n.addOutput("event");
            }

            // specify node size
            n.setWidth(300);
            n.setHeight(200);

            // gap between nodes
            final int gap = 30;

            final int numNodesPerRow = 5;

            // specify node position (we use grid layout)
            n.setX(gap+(i % numNodesPerRow) * (n.getWidth() + gap));
            n.setY(gap+(i / numNodesPerRow) * (n.getHeight() + gap));

        }
    }
}

image

ddukki commented 7 years ago

Changing the CSS file to the "dark.css" found in another tutorial seems to have fixed the issue. Looks like it was a styling problem with the default CSS file.