How to fix a ScrollPane scroll bar position at a specific position so that it displays for example the last item of it's child Table instead of the first item Table(default)? I try setScrollX and setScrollY but it doesn't work.
I have a game level menu(with many levels) and i would like to display the last unlocked level to the user when opening that menu.
You might have to call layout() on the ScrollPane yourself manually before trying to call setScrollX or setScrollY
When you want to avoid the ScrollPanes fling effect, use the following code in your show() method, so the ScrollPane immediately shows the exact position you specified.
scrollPane.layout();
scrollPane.setScrollPercentY(.5f);
scrollPane.updateVisualScroll();
Instead of setting the scrollPercent, you could also use
scrollPane.scrollTo(x, y, width, height);
or
scrollPane.setScrollY(y);
This works for me if you've got a vertically stacked pane:
setScrollPercentY(100);
This worked for me:
scrollPane.layout();
scrollPane.setScrollPercentY(100);
For me, all the previous answers did not work:
Even after calling scrollPane.layout() multiple times, the scroll pane still had an areaHeight (scrollHeight) of -2, 0, or sth else. Only later during subsequent layout calls the correct height would be set, causing an animation where the content would slide in from the top.
The only option that fixed it for my use case (scrolling to bottom initially after adding all the initial content) was to override the ScrollPane.layout() and scroll to bottom after each layout change:
open class BottomScrollingScrollPane(actor: Actor?, skin: Skin, style: String): ScrollPane(actor, skin, style) {
override fun layout() {
super.layout()
scrollTo(0f, 0f, 0f, 0f)
updateVisualScroll()
}
}
... and optionally, if you use libktx:
#Scene2dDsl
#OptIn(ExperimentalContracts::class)
inline fun <S> KWidget<S>.bottomScrollingScrollPane(
style: String = defaultStyle,
skin: Skin = Scene2DSkin.defaultSkin,
init: KBottomScrollingScrollPane.(S) -> Unit = {}
): KBottomScrollingScrollPane {
contract { callsInPlace(init, InvocationKind.EXACTLY_ONCE) }
return actor(KBottomScrollingScrollPane(skin, style), init)
}
class KBottomScrollingScrollPane(skin: Skin, style: String) : BottomScrollingScrollPane(null, skin, style), KGroup {
override fun addActor(actor: Actor?) {
this.actor == null || throw IllegalStateException("ScrollPane may store only a single child.")
this.actor = actor
}
}
One side effect is scrolling down again after each layout change, resize etc., but that's fine for me as the layout is very short-lived anyway.
this code is set the position, width and height of ScrollPane.
scroll.setBounds(0, 60, Gdx.graphics.getWidth(), 200);
Related
In SwiftUI, I have a List where the cells contain images which I want to change depending on whether the cell is selected. (The images are tinted SF Symbols, and I want to draw them untinted when selected because it looks better, which I do by setting the isTemplate property.)
Below is a simplified version of my code. It works, with one small problem - there is a slight delay before the image actually changes after the cell is selected/deselected. The delay is a fraction of a second after the mouse is released, so with drag-selecting it becomes very noticeable. How can I achieve this so that the change is instant?
I'm guessing it's because the selection binding doesn't get updated until after the mouse event handling is finished. So how can I react to the changes happening during the event? I would have expected an #Environment key for selected state, but I don't see one.
var body: some View
{
List(changes, id: \.path, selection: $selection) {
ItemCell(fileChange: $0, selected: selection.contains($0.path))
}
}
struct ItemCell: View
{
let item: MyItem
let selected: Bool
var body: some View
{
HStack {
// (other things in the cell)
// The `image` property is computed and loads a new NSImage every time
Image(nsImage: item.image.asTemplate(selected))
}
}
}
extension NSImage
{
func asTemplate(_ template: Bool) -> NSImage
{
isTemplate = template
return self
}
}
Update:
I tried using a Label to display the icon instead because that displays symbol images using the accent color, and changes the color (instantly) to white when the row is selected. But I also need to vary the icon color (eg, the "deleted" icon is red), and .tint(), .listItemTint() and .accentColor() all fail to change the color, while .foregroundColor() loses the automatic change to white when selected.
Label("", systemImage: item.symbolName)
.tint(item.symbolColor) // has no effect
// makes the icon always white
//.labelStyle(.iconOnly)
Stats: macOS 12.5.1, Xcode 13.4.1
I found a solution: applying listItemTint() to the enclosing HStack, rather than to the Label directly, gets the desired color and the white-when-selected behavior.
Also, using .labelStyle(.iconOnly) still cancels that out and makes the icon white, and an empty string makes the layout a little wrong, but using EmptyView for the title works better:
Label(title: { EmptyView() },
icon: { Image(systemName: symbol )})
I'm using this scroll bar from idiotWu which works great so far:
https://github.com/idiotWu/react-smooth-scrollbar
What I need to do next is in my react project, I need to programatically change the scroll position. In my project, when my fires reactComponent.render() again because of some things I'm doing, I need to scroll back to the top of the <Scrollbar />. I don't see in the documentation any mention of how to do something like a element.scrollTop() or <Scrollbar scrollPosition={0} />.
I tried to manually set the transform translate3d of <div class="scroll-content">, but that didn't work because the scrollbar is saving it's scroll position value somewhere, and I don't know how to access it.
How do I reset the scroll to the beginning? Alternatively, how do I state the scroll position?
EDIT
I also tried each of these but they all did not produce the results I wanted
export default class MyClass extends React.Component {
render() {
document.getElementById('panel').setPosition(0,0); // setPosition is not a defined method
document.getElementById('panel').scrollTop=0; // had no effect
scrollbar.setPosition(0,0); // scrollbar not defined
scrollbar.scrollTop=0; //scrollbar not defined
return (<Scrollbar id="panel">stuff</Scrollbar>);
}
}
Try scrollbar.scrollTop = 0 or scrollbar.setPosition(scrollbar.offset.x, 0).
I'm developing a TimeLine component. There are Views list inside horizontal ScrollView that represents half an hour blocks. And I have a Component called TimeRangeSelector, which I use to select a range of time in TimeLine ScrollView. So while I scroll the ScrollView I need to move the TimeRangeSelector in parallel without any lag. Below is the TimeLine component. You can see the 30mins blocks are filled inside ScrollView. The yellow color one is the TimeRangeSelector which is a Animated.View. And the left position of the TimeRangeSelector is set using the scroll position. Each time ScrollView moves im setting the state as below.
<ScrollView
horizontal={true}
onScroll={this.onScrollFunc}
>
{timelineElements}
</ScrollView>
onScrollFunc = (event, gesture) => {
this.setState({
contentOffsetX: event.nativeEvent.contentOffset.x,
scrollStopped: false
});
};
And Im passing the scrollBarPosition as props to the TimeRangeSelector and setting its left position style as shown in below code
<TimeRangeSelector
scrollBarPosition={this.state.contentOffsetX}
/>
let styles= [
{
position: "absolute",
left: this.props.scrollBarPosition,
backgroundColor: backgroundColor,
marginTop: 20,
marginLeft: 1,
width: this.state.selectionWidth,
height: 100
}
];
But the issue is when I scroll the ScrollView the TimeRangeSelector moves with it, but it has a delay.. when I scroll faster the distance between where it should be and where it is, is becoming high. Can anyone give me some ideas according to your knowledge.
My assumption: According to my understanding, I think the lag is because of it takes several instances to reach the setState in and set the ScrollBarPosition as below steps.
ScrollView moved 1 frame.
ScrollView fires the onScroll function and emmits the event with new x point.
Then in the onScroll function it sets the State.
As I understand it takes some time to happen all these steps from JavaScript thread all the way to Native Thread and come back to JS thread again.
You should use something like const onScroll = Animated.event([{ nativeEvent: { contentOffset: { x: animatedValue } } }], { useNativeDriver: true }); with const animatedValue = new Animated.Value(0). This way the animation is only done on the native level without going back and forth through the JS thread.
This animated value can only be used effectively with opacity and transform style properties, but it should help you with your problem.
You can read more about this, in this awesome article.
I have a quite complex scene graph which has led me to some resizing problems. I'd be glad if you could help me solve it.
My root node is a BorderPane that its center is filled with a ListView. Each cell of the ListView is filled with a customized zoomable ScrollPane as below:
public class ZoomableScrollPane extends ScrollPane {
Group zoomGroup;
Scale scaleTransform;
LineChart<Number , Number> content;
double scaleValue = 1.0;
double delta = 0.1;
public ZoomableScrollPane(LineChart<Number , Number> content, double height) {
this.content = content;
this.setPrefHeight(height);
Group contentGroup = new Group();
zoomGroup = new Group();
contentGroup.getChildren().add(zoomGroup);
zoomGroup.getChildren().add(content);
setContent(contentGroup);
scaleTransform = new Scale(scaleValue, scaleValue, 0, 0);
zoomGroup.getTransforms().add(scaleTransform);
}
}
As you can see there is a LineChart inside of each ZoomableScrollPane. I want to do two things with this chart. Firstly, to somehow bind its width with the root layout to get the desired result in case of resizing the window (not zooming, zooming is OK), and secondly to change the chart's width at run time whenever a button is pressed:
public void handleButton(ActionEvent actionEvent) {
MainController.lineChart1.setPrefWidth(MainController.lineChart1.getPrefWidth() + CONSTANT);
}
The problem is that here I face a conflict. Cause the LineChart is the child of a Group (not a pane), I just know one way of resizability and that is to bind its width manually with the root BorderPane's like this:
MainController.lineChart1.prefWidthProperty().bind(fourChannels.widthProperty().subtract(40));
And in that case, I cannot change the LineChart's width at run time and will get A bound value cannot be set Exception.
I guess one solution could be revising the ZoomableScrollPane class to somehow avoid the need of manual binding, but really have no idea how to do it.
Any help on this would be greatly appreciated.
You can detect if a property is bound and then unbind it before manipulating it:
if (content.prefWidthProperty().isBound()) {
content.prefWidthProperty().unbind();
}
...
Presumably when you are zoomed in on a chart and the window is resized the content will already be larger than the viewport, so a forced change in width shouldn't kick in until the window is resized beyond the zoomed in size of the chart?
Given the different conditions you have you might be better off monitoring the size of the BorderPane/ListView and when that changes adjust the size of the charts that need it.
I'm using Hammer.js to look for horizontal pan gestures, I've devised a simple function to clicks a button when panned left or right. It works okay, except the vertical scroll doesn't do anything on a touch device, or it's really glitchy and weird.
Here's the function:
var panelSliderPan = function() {
// Pan options
myOptions = {
// possible option
};
var myElement = document.querySelector('.scroll__inner'),
mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan(myOptions));
// Pan control
var panIt = function(e) {
// I'm checking the direction here, my common sense says it shouldn't
// affect the vertical gestures, but it blocks them somehow
// 2 means it's left pan
if (e.direction === 2) {
$('.controls__btn--next').click();
// 4 == right
} else if (e.direction === 4) {
$('.controls__btn--prev').click();
}
};
// Call it
mc.on("panstart", function(e) {
panIt(e);
});
};
I've tried to add a horizontal direction to the recognizer but it didn't really help (not sure if I did it even right):
mc = new Hammer.Manager(myElement, {
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
Thanks!
Try setting the touch-action property to auto.
mc = new Hammer.Manager(myElement, {
touchAction: 'auto',
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
From the hammer.js docs:
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
User patforna is correct. You need to adjust the touch-action property. This will fix scrolling not working when you have hammer bound on a big element in mobile.
You create a Hammer instance like so
var h = new Hammer(options.contentEl, {
touchAction : 'auto'
});
I was working on a pull to refresh feature, so I need the pan event.
Add the recognizers.
h.get( 'pan' ).set({
direction : Hammer.DIRECTION_VERTICAL,
});
h.on('panstart pandown panup panend', eventHandler);
Inside the eventhandler, you'd look at the event that was triggered and manually call on event.preventDefault() when you require it. This is applicable for hammer 2.0.6.
For anyone who's looking the pull to refresh code was taken from - https://github.com/apeatling/web-pull-to-refresh
My problem was that vertical scroll was toggling a sidebar that was supposed to show/hide on horizontal pan/swipe. After looking at the event details, I realized that Hammer probably triggers panleft and panright event based on X delta and doesn't consider Y delta, so my quick solution was to check the pan direction in my handler:
this.$data.$hammer.on('panleft', (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
return;
}
this.isVisible = true;
});
I was stuck on this for several days. Hope this will fix your problem.
mc = new Hammer(myElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
touchAction: 'auto',
});
When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.
mc.on('panmove panstart', event => {
mc.addClass('is-dragging');
}
);
.is-dragging {
touch-action: none !important;
}
Hammer 2.x does not support vertical swipe/pan. Documentation says:
Notes:
When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures
You can however use older 1.1.x version, which supports vertical gestures
——
Clarification: this refers to a ‘simple instance’ which is when you don’t pass in any recognizer configuration as the second parameter. In other words these are the defaults but can (and usually should) be overridden.