[FIXED] Write text on textarea at mouse coordinates

Issue

I am trying to create something similiar like MS paint and I need a feature where I can click on the scene and immediately being able to write where I clicked. I took the the entire code example from this Anwser to solve how to switch between canvas and textarea. In other word how to switch between "drawing" and "writing" mode. So currently I can draw and write Current progress , but my problem is I want to write text where ever I click on the textarea and not at the beginning of the row. This is how I imagine it (Goal).

So I wanted to add a handler, which can give the mouse coordinates and set the Caret to that positon:

textarea.setOnMouseClicked(event->{
        textarea.positionCaret();
    });

To only realise that positionCaret() only takes 1 parameter. So I am not able to position my "Caret" to the x,y position of my mouse click. So the question is how do I move the "Caret"/cursor to any given positon within my textarea?

Solution

Explaining Caret positioning and why it is irrelevant for your purposes

You are misunderstanding the concept of the caret position-related APIs for JavaFX text input. The APIs have nothing to do with screen coordinates. They are referring to the position of the caret with respect to the text in the text input field.

Let's say you have the following word:

happy

• Caret position 0 positions the caret before the h.
• Caret position 3 positions the caret in-between the two ps.

Once the caret is positioned. If somebody starts typing, the new text will be inserted at the caret.

So if you do:

setCaretPositon(3)

Then you type haphap, then the text will become:

haphaphappy

If somebody clicks in an editable text field, the JavaFX system is smart enough to handle the click by default to position the caret next to the closest letter to the click (and also handle selection and other tasks). You don't need to write any code to get the functionality.

So the caret API has nothing to do with the task you want to accomplish.

Absolute positioning for Text (or any other Node)

If you want to define an absolute position for a text input field on mouse click, then you do it in the exact same way you position any node in JavaFX, i.e. you use the node layout functions. Specifically, you set the x and y coordinates of the node. The co-ordinate system and relevant APIs are explained in the Node javadoc. To set both the x and y values at once, you call the relocate method.

Example for positioning editable text in a pane on mouse click

Here is an example, which generates a new text area and positions the top left corner of the new text area at the position a mouse was clicked.

Pane pane = new Pane();

pane.setOnMouseClicked(event -> {
    if (event.getTarget() == pane) {
        TextArea newTextArea = new TextArea();
        newTextArea.relocate(
                event.getX(), 
                event.getY()
        );
        pane.getChildren().add(
                newTextArea
        );
    }
});

The example uses a Pane because that is a parent node which does not apply layout positioning to its children (unlike a StackPane which will overwrite any layout values you set and apply its own layout algorithm, which, by default, will center a node in its parent node).

You can see a more comprehensive example in context in the answer to:

• How do I create an editable Label in javafx 2.2

That example will convert the text between a Label and TextField on click to allow the label value to be edited. You could choose to use such functionality in your paint program, or you could do it the way MS Paint does it.

How to emulate MS Paint

What MS Paint does is allow you to initially edit the text, but once you hit return to commit the edit, it snapshots the text and paints it as an image on the canvas, converting it from a node-type object to a bit on the canvas. Thereafter you can't edit the text directly anymore. If you want to do things that way you can use a combination of the node snapshot function and the graphics context drawImage function. If you do a snapshot, make sure you set the background correctly in the SnapshotParameters, so that it is transparent, that way the text background won't overwrite your drawing (or do set a background to the appropriate color, if you wanted an overwrite).

I won't provide full code for such functionality here at this time.

Styling text input

You probably want to style (using CSS) the text input field to get the look you want. The editable label example gives some hints on how to do this, but you probably want a different style for your app. Specifically, the default style for text input will have a box and background, which you may or may not want.

Answered By - jewelsea
Answer Checked By - David Goodson (JavaFixing Volunteer)