I want to make a button with a shape of svg format and i have written the CSS code below:
.button {
-fx-background-color: #44c553;
-size: 100px;
-fx-min-height: -size;
-fx-min-width: -size;
-fx-max-height: -size;
-fx-max-width: -size;
-fx-shape: "m207.10955,279.95363l101.61276,-154.83848l101.61276,154.83848l-203.22552,0z" ;
}
the problem is that when i hover mouse on button i can press it from outside of its shape because the button borders are still rectangular. how can i make the button not clickable from outside of its shape?
Node has the pickOnBounds property:
Defines how the picking computation is done for this node when triggered by a MouseEvent or a contains function call. If pickOnBounds is true, then picking is computed by intersecting with the bounds of this node, else picking is computed by intersecting with the geometric shape of this node.
This property has a default value of false, which is what you want. However, the Region class sets this property to true in its only constructor:
Creates a new Region with an empty Background and and empty Border. The Region defaults to having pickOnBounds set to true, meaning that any pick (mouse picking or touch picking etc) that occurs within the bounds in local of the Region will return true, regardless of whether the Region is filled or transparent.
Since Button is a subclass of Region it also has its pickOnBounds property set to true. In order to have the behavior you want you'll need to set this property back to false. Unfortunately, pickOnBounds doesn't seem settable from CSS; meaning you'll need to set it from code or FXML.
Related
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?
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.
I am trying to change the background color of cells on a full calendar, regardless of whether there is an event that shares the cell. I have availability data for different times and would like to display a heatmap on my FullCalendar of member availability, a little like a when2meet. I have attempted to do this with uneditable background events without titles, but their background color does not match what I put the background color as (for example, if I set color for a background to "#000000" it displays as light gray).
Is there either a way to add classes to certain time slot cells (for example 8-8:30 on x date) so I can edit their css or to make background color for background events display correctly?
FullCalendar automatically adjusts the colours specified for background events to give them a faded effect.
This is controlled very simply through the "opacity" CSS property of the "fc-bgevent" class, which gets added to every background event's element.
To prevent that you can simply override that property:
.fc-bgevent
{
opacity: 1;
}
See http://jsfiddle.net/qxLuLhsf/2/ for a working demo
I am implementing narrow resize handles which give me annoying behavior. The cursor shape is as expected while the mouse is directly over the handle, but once dragging the handle is initiated, the cursor shape becomes inconsistent. There are two causes of this:
when the cursor moves fast and goes ahead of the handle until the handle "catches up" (or when "fluid qml" is too fluid) - this is particularly nasty as the cursor shape rapidly changes and blinks
when the cursor moves outside of the allowed degree of freedom for the handle
I looked up the doc but it doesn't seem to contain anything about locking the cursor until the press is released.
I did manage to find a hack to fix it - using a dummy overlay MouseArea with acceptedButtons: Qt.NoButton - this actually helps to fake cursor consistency, but comes with an issue of its own. Having that overlay mouse area doesn't allow the cursor to change to a resize shape when it is over the handle, since the handle is under the overlay mouse area it doesn't get to modify the cursor shape at all. So the resize shape kicks in only after the handle is clicked, which is far from ideal. Setting the overlay mouse area to enabled: false doesn't change that - it still keeps blocking cursor shape changes from underlying mouse areas. There is a workaround for that as well, for example setting the overlay mouse area size to 0x0, but it is kind of ugly.
Ideally, the cursor shape should persist until the mouse area is pressed, regardless of whether it is in or outside of its area - after all, the press is not released if you go outside of it, thus the mouse area is still in control and should persist its cursor shape. For example - the window resize handles remain resize shape even if it is moved to resize the window smaller than its minimal size, until the press is released.
To me it seems that there are flaws in the implementation of MouseArea - the cursor shape is not kept while pressed, and the cursor shape is changed even if the mouse area is disabled.
I didn't find a way to do this out-of-the-box, it is pretty easy to create a helper for this though. On the qml side you can e.g. have:
CursorChanger {
cursor: Qt.SizeHorCursor
active: dragArea.containsMouse || dragArea.drag.active
}
On the C++ side you'll need a helper class like this:
class CursorChanger : public QObject
{
Q_OBJECT
Q_PROPERTY(bool active READ active WRITE setActive NOTIFY activeChanged)
Q_PROPERTY(int cursor READ cursor WRITE setCursor NOTIFY cursorChanged)
// ...
}
In the implementation you can use QGuiApplication::setOverrideCursor and QGuiApplication::restoreOverrideCursor to actually set/reset the cursor. Don't forget to also reset in the CursorChanger destructor if active at that point. If you then register the type:
qmlRegisterType<CursorChanger>(uri, 1, 0, "CursorChanger");`
You can use this type from qml.
I think there are some use cases for the current behavior. For instance, the cursor could convey some relationship between the currently hovered object and the one where the mouse was pressed. Another example, a drag could have its speed intentionally limited, and when the user goes too fast there is a consequence that depends on the item behind.
dtech's demand is more common for sure, and I also would like to see that as an optional feature, but not as a change. The way it is now provides more versatile pieces for apps. I don't like polished components that can be used only exactly as the library writer imagined.
Another QML only solution for a persistent drag cursor is to have a MouseArea behind all itens to hold the persistent shape when needed:
Item
{
id: scene; width: 800; height: 600
MouseArea
{
id: mouse
anchors.fill: scene
}
Rectangle
{
id: draggable; width: 40; height: 30; color: "red"
MouseArea
{
anchors.fill: draggable
drag.target : draggable
//set and unset a persistent cursor
onPressed : mouse.cursorShape = Qt.DragMoveCursor;
onReleased: mouse.cursorShape = Qt.ArrowCursor; //QT default cursor
//let non default scene cursors prevail over the item's
cursorShape: mouse.cursorShape === Qt.ArrowCursor ?
Qt.OpenHandCursor : mouse.cursorShape;
}
}
}
After trying to find a solution for Centering Text on a Button with Offset, I'm doing now a custom component.
The goal is to make a button-like component that has an icon on one side and a centered text filling the rest of the button.
The component contains either two Label/ Buttons to display the Icon and text. Both of them have a background Image, defined in css.
The css looks like this for Icon and the text with exchanged image as background for text
#button-icon-cancel{
-fx-font-family: "Arial";
-fx-padding: 0,0,0,0;
-fx-background-color: transparent;
-fx-font-size: 28px;
-fx-graphic: url('images/button/cancel.png');
}
#button-icon-cancel:pressed{
-fx-graphic: url('images/button/cancel-pressed.png');
}
The images are loaded by setId(). Currently both components are added to a Panel before passing to the stage. They contain an OnClickEvent for processing.
Now to the actual question
How can I achieve that if one Component is clicked, the other one is getting the :pressed from css as well?
Adding the ClickEvent to the Panel is doing nothing (regarding clicking on either Label/ Button)
Adding both of them to a HBox, adding the Event to the HBox work in that regard, that I can click either component and the Event gets fired, BUT the :pressed State is only applied to the component you clicked.
Is it possible to give all childs the notification, that they should behave like they got pressed? Since we have a lot of small Icon, but only one background for the text, placing a Label over the whole thing create a lot of unneeded wasted Image space. Also this would cause the problematic for changing font color if not all css are changed at once (the label-over-button-solution with .setMouseTransparent(true) wouldn't change the font color of the text label since the label doesn't notice button is pressed)
First of all, JFX-8 will support wider range of css improvements, which will allow you to solve the issue easier.
To solve your issue, i can suggest the following : each node have a pressed property. You can add a listener on this property, and when it changes to true, use setStyle(String) method on needed nodes, and use setStyle(null | "") on changing to false.
I understand that google.maps.Marker can have a title set to them in their options, can the same be done for google.maps.Circle?
I've tried just setting title on the google.maps.CircleOptions object, but that doesn't seem to do anything.
Is there a way I can give the circle overlays a title? I imagine there is, as when you hover over a circle, the cursor is changed to pointer so there must be some kind of detection there. I don't want to make my own custom tooltip and attach it to the hover event on the circle, I want to use the browser's built in title hover.
Circles:
https://developers.google.com/maps/documentation/javascript/overlays#Circles
CircleOptions object: https://developers.google.com/maps/documentation/javascript/reference#CircleOptions
It is not currently possible to add a title to a circle. As you can see from the CircleOptions, it doesn't list 'title' as a option that you can use.
A work around could be to listen to the mousemove event on the circle then to show your own title as a custom OverlayView