Is there are any implementation of rectangle selection in javafx?

Question

I mean like in file managers, when you would click, drag the mouse, creating a rectangle selection and after the mouse released selection is created?

I could do that like this (pseude-code like):

onMousePressed:
setGestureStarted(true)

onMouseMoved:
if isGestureStarted:
   changeRectangle(event.getX, event.getY)

onMouseReleased:
   select(getSelectionRectange())

But I thought that it's pretty common behavior and maybe it's already in framework.

EDIT1:

I was trying to do zoomable linechart. And I actually came across library to do that. It's pretty good, but could be better though. Right now I'm considering the actual worth of javaFX in our web project, because I don't like how such thing as zoomable chart is not in the library. Probably would be better with javascript (except I should learn it first, but It shouldn't be that hard).

Answer 1

You would probably need to make your own implementation for this. I found your pseudo code is quiet good. If you like to select for any component then you need to first create a simple rectangular boundary which is easily possible by your pseudo code.

Now for finding out either your node is inside that boundary then you need to do iteration of all the nodes/children of certain Parent Object by using this function: Node Intersect check

I would suggest to use that function after the onMouseReleased or if you like to see things in realtime then it is preferable in onMouseMoved

Answer 2

Your question asks "Is there any implementation of rectangle selection in JavaFX?"

The answer is "yes".

SceneBuilder implements drag-select functionality.

SceneBuilder is open source, so take a look through the source if you are interested on how this behaviour is achieved in JavaFX by SceneBuilder.

---

SceneBuilderKit is the framework from which SceneBuilder is derived, its source is at the link I provided.

From the SceneBuilder release notes:

JavaFX Scene Builder Kit is an API that allows the integration of Scene Builder panels and functionalities directly into the GUI of a larger application, or a Java IDE, such as NetBeans, IntelliJ, and Eclipse.

---

where is documentation?

From the release notes:

The javafx_scenebuilder_kit_javadoc-2_0-ea--.zip file, which contains an API javadoc for the JavaFX Scene Builder Kit. You can download the zip file from http://www.oracle.com/technetwork/java/javafx/downloads/devpreview-1429449.html.

The javafx_scenebuilder_kit_samples-2_0-ea--.zip file, which contains the SceneBuilderHello sample application that shows a minimal Java source code example of how the Scene Builder Kit API can be used. This sample is delivered as a NetBeans project. It can be downloaded from http://www.oracle.com/technetwork/java/javafx/downloads/devpreview-1429449.html.

---

Perhaps after you investigate, SceneBuilder and SceneBuilderKit might not be what you are looking for. In which case, edit your question to make it more explicit and perhaps include source for your rectangle selection implementation attempt and more detail on your requirements (what you intending to select, an image showing how the feature works, etc).

Answer 3

yes, in jfxtras-labs project via:

MouseControlUtil.addSelectionRectangleGesture(Parent root, Rectangle rect)

or

MouseControlUtil.addSelectionRectangleGesture(Parent root, Rectangle rect, EventHandler<MouseEvent> dragHandler, EventHandler<MouseEvent> pressHandler, EventHandler<MouseEvent> releaseHandler)

more info: http://jfxtras.org/doc/8.0labs/jfxtras/labs/util/event/MouseControlUtil.html

Note that selection behavior is extremely application specific and the class above is just a helper class to help you with selection gesture implementations. In the end you have to implement selection behavior yourself.

For a more detailed and matured example of node selection in JavaFx see my other answer here.

---

Edit: Basic Demo

This is the basic usage. Note that it's just a demo and should NOT be considered final or production ready! For more complex implementation of selection behavior you should tailor it (mostly mouse handlers) on your own based on your application's specific requirements.

import java.util.ArrayList;
import java.util.List;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape;
import javafx.stage.Stage;
import jfxtras.labs.util.event.MouseControlUtil;

public class ShapeSelectionExample extends Application {

private List<Shape> selected = new ArrayList<>();

@Override
public void start(Stage primaryStage) {

    final Group shapesGroup = new Group();
    final AnchorPane root = new AnchorPane(shapesGroup);

    // Add whatever shapes you like...
    Rectangle shape1 = new Rectangle(200, 20, 50, 50);
    Rectangle shape2 = new Rectangle(300, 60, 50, 50);
    Circle shape3 = new Circle(100, 100, 30);
    shapesGroup.getChildren().addAll(shape1, shape2, shape3);
    
    final Rectangle selectionRect = new Rectangle(10, 10, Color.TRANSPARENT);
    selectionRect.setStroke(Color.BLACK);
    
    EventHandler<MouseEvent> mouseDragHanlder = new EventHandler<MouseEvent>() {
        public void handle(MouseEvent event) {
            for (Node shape : shapesGroup.getChildren()) {
                handleSelection(selectionRect, (Shape) shape);
            }
        }
    };
    
    // Add selection gesture
    MouseControlUtil.addSelectionRectangleGesture(root, selectionRect, mouseDragHanlder, null, null);
    
    primaryStage.setScene(new Scene(root, 400, 300));
    primaryStage.show();
}

private void handleSelection(Rectangle selectionRect, Shape shape) {
    if(selectionRect.getBoundsInParent().intersects(shape.getBoundsInParent())) {
        shape.setFill(Color.RED);
        if(!this.selected.contains(shape))
            this.selected.add(shape);
    } else {
        shape.setFill(Color.BLACK);
        this.selected.remove(shape);
    }
    System.out.println("number of selected items:" + this.selected.size());
}

public static void main(String[] args) {
    launch(args);
}

}

This is how the result would look like:

You could also write mouse press and release handlers (currently null in this code) to handle selection behavior while mouse button is pressed or released (which is different to mouse drag).