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.
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.