drag hanging

It seems this has to de with the mouse events mixing between elements.

reproduce

Click on the menu icon, so mouse down-mouse up. Now move your cursor down, the topicbar now 'sticks' to your mouse.

This is a question of sorting out the mouse events and priorities.A

If you mousedown and up on the rest of the bar, everything goes well. If you do it on the hamburger icon, it pops up the menu but also start the drag action.

The best is to disable the mouse down to propagate down to the tree. This probably went wrong when using mouseup for the menu functions !

We should just get the click event correct !!

esbuild

A very handy site : visit

Does an esbuild for you online !.

where does the click go ?

Because the menu does drop down, where is the click captured. Try adding click handler to various elements.

I traced it down to the endDrag handler.

for the dragbar there are 3 events registered.

• for the dragbar "mousedown" to start the drag action
• for the page the "mousemove" event because you do the movement down the page and you leave the dragbar while dragging
• for the page the "mouseup" event to stop the resize

Why does the event not bubble down to the newly created menudiv and menuoption divs ?

monitorEvents

visit

A VERY handy option only available in the developer console, just type this to see all events :

monitorEvents(window)

However that is a bit noisy, so you could also try a more specific dom element or only a certain event. For this problem, i would say :

unmonitorEvents(window)
monitorEvents(window,"click")

unmonitorEvents works in the opposite direction

monitorEvents(window,["click","mousedown"])
# now logging click, mousedown on window only
monitorEvents(window,"mouseup")
# now logging click, mousedown and mouseup on window only
unmonitorEvents(window,"click")
# now logging mousedown and mouseup on window only
unmonitorEvents(window) 
# monitoring nothing.
unmonitorEvents()
monitorEvents()
# this has no effect, a dom element is needed

For our problem we need to :

- start the app
- open op dev console
- go to source and set a breakpoint on the call to add_args_listener()
- click on the topiconbar to open the menu, you should stop
- click in the console and type
- monitorEvents(window,["click","mousedown","mouseup"])
- monitorEvents(menuoption,["click","mousedown","mouseup"])
- continue running, possibly clearing the breakpoint first
- go to console again to see the events.

In my case the events on the main windows were

mousedown,mouseup,click

For the menuoption they were

mousedown,mouseup

Also, they only fire on menuoption, not on the lower window.

Find that event propagation page again.

real problem

Finally the problem :

We have an endDrag function installed on mouseup:

endDrag

function EndDrag(e) {
    isDragging = false;
    SetCursor("auto");
    console.log("from EndDrag")
    clearMenu(e)
}

That in turn calls

clearMenu

function clearMenu(e)
{
    let menubox = document.getElementById("menubox")
    clear_children(menubox)
    menubox.style.display = "none"
}

And there is the culprit :

clear_children

function clear_children(elm)
{
    // return here would fix it 
    while (elm.firstChild) {
       elm.removeChild(elm.lastChild);
    }       
}           

clearMenu, remove clear_children

function clearMenu(e)
{
    let menubox = document.getElementById("menubox")
    menubox.style.display = "none"
}

The dom elements are removed here before the event can fire ! So we have a menuoption div that can fire the add_topics handler, but the mouseup event on the page div removes it before it fires. In fact removing the call

The menu gets cleared without that call anyway.