goJS diagram eating mouse up event

GoJS
#1

Hi,

I’m using goJS version 1.6.17.

if I put a html input textbox next to a gojs diagram… when I try to select the text in the html input by clicking, dragging and then releasing the mouse over the diagram the text does not get selected.

I tried doing this:

diagram.toolManager.doMouseUp = function () {
    go.ToolManager.prototype.doMouseUp.call(this);
    diagram.lastInput.handled = false;
    diagram.lastInput.bubbles = true;
};

but it didn’t help… :(

it helps if I don’t call the go.ToolManager.prototype.doMouseUp function… then the text can be selected just fine in my scenario.
but I guess doMouseUp function is pretty important to goJS… :D

so… any ideas?

it’s easy to test… just inject a textbox into any sample page and you’ll see the issue.

#2

I’m sorry, but I am unable to reproduce the behavior that you are seeing. I tried it at Org Chart Editor.

I believe that for most s when the user uses a mouse to select text, the mouse is “captured”. That means the Diagram will not receive any mouse events while dragging the mouse when initiated within the TextArea.

#3

https://www.screencast.com/t/Jo5ohUs2KH2I

this is in Chrome… maybe that’s relevant…

but you can see how the goJs diagram becomes focused when the mouse is released.
and the textbox losing focus/selection.

#4

I guess the browser is relevant – that behavior only happens in Chrome, not in any other browser that I have tried.

#5

that’s bad for us… as Chrome is our primary thing… :(

so… any ideas?

#6

I don’t quite understand what’s going on here.

But additionally, the screencast you shared works differently in my Chrome, which is

Version 58.0.3004.3 (Official Build) dev (64-bit) aka Chrome Dev

If I select text and click on the Diagram, all of the text goes away because the object gets de-selected.

Why is mine different? If its only on “older” (stable) versions of chrome, maybe it was a Chrome bug after all.

#7

Oh, I think I see what you mean: You start the drag on the textblock, hold your mouse and release the mouse while over the Diagram. In that case, for me, all browsers act the same.

What if you just remembered which mouse actions began on the Diagram, and if they did not begin on the Diagram, don’t let GoJS’ default actions (which involve calling Diagram.focus() on doMouseUp) to occur.

var mouseOnDiagram = false;
myDiagram.toolManager.doMouseDown = function () {
    go.ToolManager.prototype.doMouseDown.call(this);
    mouseOnDiagram = true;
};

myDiagram.toolManager.doMouseUp = function () {
    if (mouseOnDiagram) {
      go.ToolManager.prototype.doMouseUp.call(this);
    }
    mouseOnDiagram = false;
};

The reason that your code didn’t work is most likely because of the call to focus that the regular doMouseUp call does.

#8

So, Simon, you are saying that the alpha version of Chrome now behaves the same way that Firefox and InternetExplorer do, even though the current version of Chrome behaves differently.

But I still do not understand what it is that the original poster is asking about.

#9

@walter, catface is saying that any mouseUp on the Diagram, even when the mouseDown began elsewhere, is causing the Diagram to focus, which is causing his TextArea to lose focus. This is intentional behavior on part of the Diagram, because we often want events that go:

  • mouseDown on element A
  • mouseUp on Diagram B

to focus Diagram B. (For instance if Element A was a Palette, or an HTML element that was supposed to be “dropped” onto the Diagram, or even something dragged in from outside the Diagram window).

catface’s element A is a text area/input, and he does not want it to lose focus when he selects the text and (perhaps accidentally) mouses up over the diagram at the end of the text selection. I think this is understandable to want, but you have to explicitly turn off the focus-on-mouseup that GoJS is doing to achieve it.

#10

But when I start dragging within a TextArea and release (mouse-up) in a Diagram, the Diagram does not get focus. That is the case in both Firefox and IE11.

#11

the mouseOnDiagram thing worked fine… thanks… :)

but for some reason that looks like a hack to me… would it be possible to only do focus on mouse down?.. or at mouse up, but only if the corresponding mouse down was also on the diagram?

#12

Actually, yes, I suppose you could be more specific and just stop the focusing on mouseUp. Perhaps do this instead:

    var mouseOnDiagram = false;
    myDiagram.toolManager.doMouseDown = function () {
        go.ToolManager.prototype.doMouseDown.call(this);
        mouseOnDiagram = true;
    };

    myDiagram.toolManager.doMouseUp = function () {
        go.ToolManager.prototype.doMouseUp.call(this);
        mouseOnDiagram = false;
    };

    myDiagram.doFocus = function() {
      if (mouseOnDiagram) this.focus();
    };
Button not working on browser resizing
#13

that is also good… but… the problem with both these solutions is that you can:

  1. click on diagram, move mouse outside, release
  2. click in textbox, move mouse over diagram, release

and you will still have the issue…

but I guess that’s a highly unlikable scenario… :)
and besides, if you try selection again it will work because the flag gets reset…

thanks.

#14

Hi,
is this still the suggested workaround for the described problem or is there a different approach possible in a newer version?

#15

Hello @Dominic.Lerbs, not particularly. You do have the option to override the focus method:

myDiagram.focus = function() {
  // Maybe decide to do something differently
  if (/* TODO some criteria */) {
    // Do different behavior, and do not focus the Diagram
    // ... TODO
  } else {
    // do the default behavior
    go.Diagram.prototype.focus.call(this);
  }
}

But you would have to come up with some other criteria to specify to stop the focusing.

#16

okay, thanks!