Handling/bubbling mouse up events over the diagram

Hello,

I am attempting to overlay a jQuery UI Slider over the go.js canvas in order to use it for zooming. All works fine except for if the user clicks and holds on the slider button, moves the slider, and the moves the mouse off the slider button over the canvas and releases the left mouse button. If the user releases the mouse button while over the slider button the mouse up event is handled correctly and the slider is released. However if the user releases the mouse button over the canvas the mouse up event does not seem to bubble correctly.

I have tried to handle this using a custom ToolManager which I gather handles the mouse events when the mouse is over the diagram/canvas and not doing anything. However my attempts to implement a custom tool manager have failed because if I use my custom manager the diagram does not respond. Also the diagram appears to create it’s own manager and use that for defaultTool and currentTool and overwriting those properties with my customToolManager does not seem to help.

I think I may have misunderstood how to apply the inheritance model with the go.js components, or I have missed some step or ordering in my setup. I read the following topics related to tool inheritance: http://www.nwoods.com/forum/forum_posts.asp?TID=4979&KW=inherit&PID=21471&title=tool-canstart#21471 and http://www.nwoods.com/forum/forum_posts.asp?TID=4881&KW=inherit&PID=21081&title=adornments#21081 and the section on handling input events http://gojs.net/latest/intro/events.html

I have created a jsFiddle to demonstrate this issue, using the state change example as the basis.

http://jsfiddle.net/tRFqB/6/

If you zoom using the slider and then only release the mouse button over the canvas, it does not release the slider and the subsequent mouse moves are linked to the slider, causing the diagram to zoom. If you release the button over the white space just to left of the canvas div, the mouse up event is fired and the slider releases the mouse movement correctly.

Any help would be greatly appreciated.

Thanks.

Kind regards,

Jonathan

I don’t know why the mouse isn’t captured in this jQuery slider, which would seem like the correct and natural thing to do, and I’m afraid I’m not experienced enough with jQuery to know how mouse capture works in the framework.


Regardless this does show a bug with GoJS. In this case the mouseup event isn’t doing anything in the Diagram, and the event is supposed to bubble, but we arbitrarily don’t let any mouseup events bubble right now, which was incorrect.

I’ve fixed that, and it will be in the next beta release sometime soon.

Hi. Could you try the “go.js” or “go-debug.js” that is in http://gojs.net/beta? This is version 1.1.1.

If it works for you, we can make that the “latest” supported version and then if you’re a customer you’ll be able to get your own copy of the library for your web site.

Hi Walter.

Sure will give it a bash tomorrow at work. I’ll try edit the jsfiddle tonight and report back on that.

Thanks.

Jonathan

Hi Walter,

Thanks yes this does fix the issue, I have updated the jsfiddle and it works great, thanks!

Kind regards,

Jonathan

The 1.1.1 that we just released, in http://gojs.net/latest, is actually a newer version that has a couple more bug fixes in it.