I'm not familiar with rxjs.
how can I first wheel event from single user wheel move action?
my idea is use debounceTime to get when user wheel action end and get first event from wheel event start to end.
how can I first wheel event from single user wheel move action?
You can use the following code. This will log the first value coming from wheel event, but you can do anything you want in the subscription:
firstWheelEvent = fromEvent(document, 'wheel').pipe(first()).subscribe(console.log);
Related
I'm learning React+Redux and I don't understand the proper way of doing the animations. Lets speak by example:
For instance, I have a list and I would like to remove items on click. That's super easy if I have no animation effects there: dispatch REMOVE_ITEM action on click, reducer removes the item from the store and react re-renders html.
Let's add an animation of deleting the line item on click. So, when user clicks on an item I want to run a fancy effect of line item removal and... how? I can think of several ways how to do it:
1) On click I dispatch REMOVE_ITEM action, then reducer mark an item as goingToBeDeleted in Store, then react renders that element with a class of .fancy-dissolve-animation and I run a timer to dispatch the second action REMOVE_ITEM_COMPLETED. I don't like this idea, because it's still unclear how to add JS animations here (for example, with TweenMax) and I run a JS timer to re-render when CSS animation ends. Doesn't sound good.
2) I dispatch ITEM_REMOVE_PROGRESS actions with an interval of ~30ms, and store holds some "value" which represents the current state of animation. I don't like it too, as it would require me to copy the store ~120 times for ~2 seconds of animation (say, I want smooth 60 fps animation) and that's simply a waste of memory.
3) Make an animation and dispatch REMOVE_ITEM only after animation finishes. That's the most appropriate way I can think of, but still I'd like to have things changed in store right after user makes the action. For example, animation may take longer than few seconds and REMOVE_ITEM might sync with a backend – there's no reason to wait animation finish to make a backend API call.
Thanks for reading – any suggestions?
React has a great solution to this problem in the ReactCSSTransitionGroup helper class (see https://facebook.github.io/react/docs/animation.html). With this option, React takes care of it for you, by keeping the DOM state for the child as it was at the last render. You simply wrap your items in a ReactCSSTransitionGroup object. This keeps track of its children, and when it is rendered with a child removed, instead of rendering without the child, it renders with the child, but adds a CSS class to the child (which you can use to trigger a CSS animation, or you can just use CSS transitions for simplicity). Then, after a timeout (configured as a prop passed to ReactCSSTransitionGroup), it will re-render again, with the child removed from the DOM.
To use ReactCSSTransitionGroup, you'll need to npm install react-addons-css-transition-group, and then require/import 'react-addons-css-transition-group'. The animation docs give more detailed information.
One thing to remember - make sure the children have unique, unchanging keys. Just using the index as the key will make it behave incorrectly.
Instant actions are problematic in redux which saves state, so if we send action and it will change store then this change in store is available in next states, so We can have situation where animation is showing over and over because in store such parameter was set.
My solution for redux instant actions is to add some id like ( Action example code ):
{
type:"SOME_ANIMATION",
id: new Date().getTime() //we get timestamp of animation init
}
Next in component which runs animations save last animation id and if its match don't do animation. I use component state so for example ( Component code):
componentDidUpdate (){
if (this.lastAnimationId===this.props.animation.id)
return; //the same animation id so do not do anything
//here setState or do animation because it is new one
this.lastAnimationId=this.props.animation.id; //here set new id of last abnimation
}
Thanks id we can have only one action without actions which are reversing the state. Reversing actions after timeout can cause problems because if other action ( which is connected with component ) will be send before reverse action then animation can start again.
Minuses of proposed by me approach are that animation data exists in state, but exists also animation id which give us information about it. So we can say that store saves last dispatched animation.
I am trying to run some code upon cancellation of an AppointmentItem, however two of the events that I tried to capture fire more than once (Application.Send, AppointmentItem.Write, BeforeDelete doesn't fire). This bring me to re-think my logic and find a suitable place to implement it. I couldn't find a reason why the two events are fired twice in my case as I am using inspector wrapper to register these events on a new inspector window and Un-registering them on inspector close event.
Please note that I want to monitor all possible scenario where an Appointment can be canceled/deleted.
Why do you even need any inspector events? Monitor the Application.ItemSend event, check if you get a MeetingItem object as an argument, check that the message class is "IPM.Schedule.Meeting.Resp.Neg" or Class = 55 (OlObjectClass.olMeetingResponseNegative).
I need to implement a behavior:
when element clicked - one thing happens
but when it's clicked and held for more than one second, something else happens (e.g element becomes draggable) and then the first event never fires
I think I know how to catch click&hold type of events, but how to distinguish between first and second?
Can you show me how to do that using this jsbin. I already made the "click, hold & drag" part, except that it is still firing the 'click' event after dragging the element and it shouldn't.
again: element clicked - one event, click and hold - element is draggable (even after mouse up) and when clicked again it's back to normal (undraggable) state.
I am not looking for a trivial solution, it has to be built using Rx.Observable or at least Bacon's streamEvent object
Thank you
I think you were pretty close with your solution, but probably it is not possible to elegantly achieve what you want while using the browser's built-in click event.
HERE is my attempt to tackle your problem.
The main idea is to define your own click streams like so:
var clicks = downs.flatMapLatest(function(){
return ups.takeUntil(Rx.Observable.timer(250));
});
var longDownsStart = downs.flatMapLatest(function(){
return Rx.Observable.timer(1000).takeUntil(ups);
});
In case of clicks we wait max 250 ms after a mouse down for a mouse-up; in case of the latter we generate the event only if there was no mouse-up within 1000 ms.
There might be some corner cases in which the code does not work as intended.
Here is my proposed solution (with Bacon.js).
How can I do something (I want to increment a variable and display it on the screen) during someone pressed the button. Actually there is no event called OnPressed for a button in Windows Phone.
The Button has a Click event that you can handle and use to perform your logic.
In order to execute logic for the duration of the press, handle the ManipulationStarted and ManipulationEnded events.
In addition to the click event, you can use Tap event.
The problem is that your button will handle the event and prevent it from bubbling - if that wasn't the case you could use MouseLeftButtonDown/Up events to do this.
However there is a way to get around this and still get the event by using the more tedious UIElement.AddHandler method.
Ex:
myButton.AddHandler(UIElement.MouseLeftButtonDownEvent, new MouseButtonEventHandler(myMouseEventHandlerMethod), true);
The last bit ('true') is important since this overrides the event bubbling. 'myMouseEventHandlerMethod' is the method that you usually would use for handling a MouseLeftButtonDown event.
Handling 'Up' is the same thing. You probably also want to handle "Leave", or use CaptureMouse() when down triggers.
I've got a question about layering images/buttons with Corona/Lua. If I create one button on top of another one and then click it, both buttons' events are triggered. How do I prevent this?
Thanks, Elliot Bonneville
EDIT: Here's how I create the buttons:
button1 = display.newImage("button1.png")
button1:addEventListener("tap", Button1Call)
button2 = display.newImage("button2.png")
button2:addEventListener("tap", Button2Call)
Return true from the event handling function. Touch events keep propagating through the listeners until handled; it's explained here:
http://developer.anscamobile.com/content/events-and-listeners#Touch_Events
Note that the event listeners must be listening for the same event. In other words, both listeners must be set on either "touch" or "tap". Literally last night I was tripped up by this; I had a button listening to "touch" and another image on top listening to "tap" and was wondering why the button was still receiving events.
Use return true in the event handler where you handle the event to prevent further event propagation.
So, in your example, button2 will get the event first, since it's created last. If you handle the event in Button2Call andreturn true, Button1Call won't see the event at all. If you return false, or simply leave out the return statement altogether, Button1Call will get the event and can decide whether to handle it.