I would like to have some nodes that have a fixed position on screen, i.e. independent of pan and zoom they always stay in the same spot. But they are still nodes, so they can have edges that connect them to other nodes that are normally panned and zoomed.
Is there a way to do this? Thanks!
Figured it out. Documentation is your friend...
The trick is to add an event listener to pan and zoom events, and to change the renderedPosition property in it.
function lock_node(e) {
cy.$('#a').renderedPosition({
x: 100,
y: 100
});
}
cy.on('pan zoom', lock_node)
Example at https://jsfiddle.net/D_P_R/fsogk5bt/8/ .
Thanks!
Related
Using react native, a ScrollView can snap to respecified points on the y axis of the ScrollView element:
<ScrollView
snapToOffsets={[0,96]}
This will snap to 0 and to 96. It appears however that every subsequent snap point must also be declared.
Is there a way to snap to that point at 96 and then scroll normally without snap offsets from that point going down.
This behaviour can be done on the web with CSS but there is no clear documentation on how to do the same in react. Imagine a header that we want to snap underneath of on the first scroll and then scroll normally thereafter.
By default, the end of the list counts as a snap offset. Set snapToEnd
to false to disable this behavior and allow the list to scroll freely
between its end and the last snap offsets offset
you can set snapToEnd to false to disable this behavior
snapToEnd={false}
documentation
Yes there is but it's not perfect. You can get it working as you would expect. The only issue with this solution is that when scrolling up is controlled by Momentum the snap is not triggering.
With this current limitation in mind, the trick is to use snapToInterval instead and then dynamically update the snapToInterval property onScroll.
Create a state in the constructor.
this.state= {
staticScrollY: 0,
}
Add a listener to onScroll to track the scroll position.
listener: (event) => this.handleOnScroll(event.nativeEvent.contentOffset.y)
Create a function between the Constructor and the Render
handleOnScroll = event => {
this.setState({
staticScrollY: event,
})
}
User a ternary operator in the snapToInterval property with the amount you want the for the first snap and what the snap should be once greater than that amount.
snapToInterval={this.state.staticScrollY < 99 ? 98 : 0}
QED..
PS. added limitation with this solution on Momentum Scroll. If anyone can address that, please post.
I thought of a simple algorithm and implemented it like this:
def parentcenter(self):
self.move(self.parent().frameGeometry().center().x() - self.frameGeometry().width()/2, self.parent().frameGeometry().center().y() - self.frameGeometry().height()/2)
It looks good on paper but it doesn't work properly. The child window places itself like it's placed at self.parent().frameGeometry().center(). I also tried to print the width and height of the child window by doing print(self.frameGeometry().width()) to see if anything is wrong, and it sure is. The values width and height shows much less than I expected. My child window has the width value of 100 while it's filling 1/3 of the screen. My screen resolution is not something like 300x300 lol
Why do this happen? Or can I still center my child window without using the methods above?
Thanks to three_pineapples, I have solved this problem. The only thing I did was to call parentcenter after the SetupUi at the __init__.
I have a site where I use TimelineLite paused and manually progress the timeline with a scrollbar.
I also have 5 pauses littered throughout the timeline so that I can click a button and watch one 'scene' of the timeline.
Each animation scene basically tweens offscreen at the top while the next element tweens into the screen from the bottom.
Everything works fine.
However when I resize the browser, I notice that the tweens of the timeline are still animating from the old values.
My timeline consists of TweenLite.to(...) tweens. For example if my browser height is 700 pixels and I tween scene 1 out of view and scene 2 into view, when I resize and use timeline.reverse();, I see scene 2 tween back to 700 pixels. (Scene 2 is absolutely positioned with translateY set to 100%) However since my tween is using y: '100%' I would expect it to reverse to 100% not this old pre resize value of 700 pixels.
Oddly enough, scene 1, which was originally at 0,0 and tweened to 0,-100%, still tweens to a percent value so that one looks ok.
So I find it really odd that scene 2 is tweening in pixels when I set a percent value and scene 1 tweens in percent.
Whats going on and how do I prevent this pixel value from caching in my tween?
I've already tried invalidate(), kill(), clear() and then setting the timeline to null, followed by reinserting new tweens on a new timeline but somehow those tween values still exist.
I'm at a loss. Any help would be greatly appreciated.
I think what you should be using is yPercent for animating your tweens instead of absolute pixel values or instead of simply animating the y property.
What yPercent (and xPercent) do is that they will always align your element regardless on the screen size, hence responsive, based on the value that you provide.
Here is an example made by the GSAP guys themselves which, by the looks of it and by what I was able to understand from your question, is actually very close to your own situation as well.
There is also a video tutorial by Petr Tichy who explains the differences between using x and xPercent.
P.S. Can you share this website you are working on or, prepare a fiddle or a codepen isolating the problem? This would help us in proposing an accurate solution.
Answering my own question since no correct answer exists. GSAP saves any tween data on the actual DOM element. Despite me setting the timeline or tweens to null, it had no effect because as I was tweening the same element, it would check the DOM element if it had the variables GSAP had saved prior.
To fix this I had to manually reset the DOM element variable.
If this is a problem for you, check the ._gsTransform variable on the element. You will see some x, y values that you can manually set to 0 or whatever else you need to set it to.
I'm using Datatables for rendering my table, but I'd like to scroll vertically when the user scrolls horizontally. In other terms, I'd like the scrolling to be synchronized?
I've looked into the API but wasn't able to figure this one out.
You could try binding an event listener for when the table scrolls in the X direction to also scroll it in the Y direction.
Have a look at this link: Bind to on scroll event of a DataTable.
The API doesn't actually control scrolling, it just sets up the table so it overflows the parent div.
An example of the kind of code you might write:
$('.dataTables_scrollBody').on('scroll', function() {
var scrollLeftVal = $('.dataTables_scrollBody').scrollLeft();
$('.dataTables_scrollBody').scrollTop(scrollLeftVal);
});
You would likely need to fine tune some things about it but the general idea might get you going in the right direction.
i use cytoscape.js. to draw Node Graphs
if i pan the Graph with Mouse, there is a grey circle on my mouse position.
I have no Idea how to remove this.
Can you help me please?
Thank you :)
Only Overwrite the Core style for remove grey circle:
.selector('core') // just core properties
.css({
'active-bg-size': 0
})
How about centering the arrow on the active background indicator. Right now there is a small padding (arrow slightly decentered) which causes improper click on edges. Thank you !
What you are describing is the active state on the background, indicated by the semitransparent circle around the cursor (or your finger on touch). For reasons of consistency across platforms and providing feedback to the user, this feature is not disableable. What we could do simply is allow the active area to be styled so you could effectively hide it. -M https://github.com/cytoscape/cytoscape.js/issues/337