Enabling ongoing d3 node animation triggered by mousedown/drag - javascript

I'm trying to create a node animation that's triggered on an event like mousedown or drag, but doesn't die when the existing mousedown/drag event ends.
For example, when the user is dragging a node I want the node stroke-width to transition back and forth between 2 values. So on my ondrag event I call a function that triggers the animation - which works great after 1 drag event if I keep the mouse where it is, but is immediately reset after the second, third drag etc.
I suppose what I'm asking is more of a javascript question, but does anyone know if there's any way that I can say "while (drag/mousedown)" instead of having to trigger a new call every time (and in the process destroy the reference to the old active call that was handling the animation).
Even with mousedown I have the same problem - i.e. the animation works great on click/hold, but then when you move the mouse, you get a mousemove event which destroys the reference to the running animation function.
Thanks for any thoughts!

Related

Canvas mouse events with requestanimationframe

I'm working on a game with the goal to use all canvas.
Currently I have a mouse event for my buttons (mousemove, mousedown, mouseup). Should I just update my canvas-buttons directly from this event or integrate it with requestionanimationframe? I read that a mouse event can be called hundreds of times per second...
Maybe extraneous to the problem: When triggered the event calls objects with buttons to check for mouse position (this is due to only the top-most layer registering mouse events and the way pre-rendering works). Essentially, it's not a 'real' mouse event on each canvas object/button.
Thanks!
It's hard to answer your question without knowing more about your game, but in general:
If your game critically relies on the timing of button presses, then run your game logic with each mousedown (don't wait for rAF). For example, in a shooting game the enemy might move off-target if you wait until rAF to test if the bullet hits the enemy.
If your game relies on the quantity of button presses regardless of the time, then just accumulate the mousedown count until rAF. For example, in a fast-twitch game you're just testing how many times the user can press your button in response to a prompt.
Either way, put your display redraws inside rAF to make the game display as efficiently as possible.

Touch + Hold then Drag with HTML Drag and Drop

This is mostly an 'is this possible' type of question, because after a day of testing options, I am not sure that it is.
We have a list of item within a scrollable DIV, each of which needs to be touch draggable. Just turning on drag and drop for each time will break the ability to scroll the list, as a swipe to scroll gets interpreted as a drag event as well. The easiest option if to add a drag handle to each item, but we have very little UI space available on these items, and the powers that be were hoping to not squeeze things even tighter to add a touch hit area for said handle.
The option I am looking into is a 'touch and hold to release'. The user touched and holds the touch for one second, and the item 'unlocks' to be draggable. This sounded easiest enough when I set out, using HammerJS for the Press event, then calling a start for the drag and drop event process. This is not working out however, as none of the browser drag events can be manually started. I can call 'touchstart' with a trigger or dispatchEvent, which will do the setup we need, but no drag events every occur. 'dragstart' normally gets fired as soon as the touchstart occurs, and since I am needing to wait, there is never and dragstart to kick off the process.
I assume the browser's drag and drop events work only under specific circumstances. Triggering dragstart manually wont be a real drag event (its missing all the dataTransfer stuff), and most importantly, nothing actually gets dragged, despite the element being a valid, draggable element. Using an alternate event like 'dragover' works, but since its there was never a real dragstart, there is no actual drag and drop occurring.
Is this just something that browsers do not support short of dropping the HTML drag and drop for javascript? Or is there something I am missing?

jquery ensuring that mouseup is fired

I have an app that uses mouseup and down to draw elements. The problem is that if for any reason the mouseup event is not fired after mousedown ( let's say I introduce an escape key that cancels drawing the new element), the element would be "incomplete", and hence it would cause problem. So I want to know if there is any mechanism that I can use inside mousedown to ensure that mouseup is fired after it, and if not, destroy the new element ?
You're gonna have to destroy the drawing on the events which you can think of that would make the mouseup not fire following the mousedown -- pressing keys, releasing the mouse outside of the drawing region, right clicking while left click is still holding down, switching the window with alt+tab while drawing, computer being struck with lightening in the middle of a tornado while drawing, etc.

Javascript IE mouse events restricted to original recipient?

I have an info overlay that works great in Chrome and FF. It is a div containing a table (for border image layout) and then a central content div. I trigger mousedown on the appropriate border table cells.
Once this happens, a different div is brought to the front with z-index, and that passes along the mousemove and mouseup events to handle dragging the info bubble around. Once the mouseup is fired, the info bubble puts the "event" div back to where it was.
I also follow the same process for dragging the lower right corner of the bubble to resize it. Again, works in Chrome and FF, but fails in IE.
IE seems to be restricting the event triggers to the info div. If the mouse manages to move outside the div (from dragging faster then the events fire/update), the info overlay no longer receives mousemove events. However, if I move the mouse back over the overlay (without releasing the button) it continues to receive mouse events.
Edit: In creating some example code (the current functionality is split across several JS modules), it worked in IE. As soon as I find the difference between my example code and the actual code, I will update again.
Edit/Answer: (SO wont let a new user answer their own question in this time span...)
Still not sure what the actual problem was. (If you ask me, a div with a z-index of 100 should be receiving mouse events just fine?)
My solution was to fix my mouse event handling such that I could attach my mousemove and mouseup to the parent div (as should have been done in the first place) for all dragging/resizing behaviors I wanted to set up.
The problem was due to a newbie approach to the events and having stopPropagation() in too many locations preventing me from taking such an approach. (I wanted text, etc in my info box to be selectable).
I adjusted the code so that my text containers only had to stop propagation on mousedown instead of all the mouse events.

mouseover fired with mouse still and element moving

I am in a situation where I need jQuery's mouseover event to be fired when an element (in this case an image) moves under the mouse, so unlike the common situation is an element that is moving, not the mouse.
Do you know of any library/gist/technology that could help me in this sense?
I've tried with flash but with no luck, is this something than can actually be done?
You can track mouse position by binding a handler to mousemove on the body, and calculate after every move of the image whether the pointer is over it.
I ran across a similar issue. In my case I did a "good enough" workaround by keeping track of the time the mouse last moved and then in the mouseover handler seeing if the mouse had moved recently -- within 30ms of the current time. That way I can bail out in cases where the mouse didn't actually move, but I don't have to test the hitboxes myself -- something very hard to do right and fast, and fortunately something I can leave to the browser by doing this.

Categories