Disable the default focus on hover the canvas

GoJS
1

Hello,
There is an option the prevent the default focus (which turns on the mouse and keyboard events) to the canvas on the mouse hover event?
We want the focus will be only after mouse left-click.

2

“Default focus” is something determined by how the page is defined. Yes, many tool operations in a GoJS Diagram will request focus, including when tools are activated, but that’s only when the user is interacting with the diagram.

I just checked using the following code. Simply hovering over a Diagram does not change focus. Try selecting some text in the textarea holding the JSON-formatted model, and then hover the mouse over the background of the diagram. You’ll see a “hover” message in the console. But when you type some characters, they go to the textarea, not to the diagram.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      mouseHover: e => console.log("hover", Date.now()),
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>
3

Ok, so maybe the focus has not changed but the diagram starts reacting to events.
The problem is that: we integrated the diagram inside a big page with a scroll bar. When the user is
scrolling this page, and the mouse gets hovered on the diagram, eventually the diagram gets scrolled instead of the parent page.
Do you have any idea how to solve it, please?

4

I’m not sure what the problem is. In fact, just using the scroll wheel to scroll this HTML page in the forum (no GoJS running anywhere) I find that I first scroll the page some, and then I scroll the text holding the sample code.

5

Ok, this is probably the browser behavior and can’t be controlled by you (GoJS) or by a developer.

Thank you,
Michael

6

It is possible to affect the behavior when the wheel events come to the GoJS diagram, as well as to the page.

7

Can you detail please?

8

I still don’t know exactly what you want to do.

First, I assume you know about: ToolManager | GoJS API

Second, you could override ToolManager.doMouseWheel to do whatever you want. Maybe you’ll want to call Tool.standardMouseWheel in order to get the standard behavior, or maybe you’ll want to do something completely different.
ToolManager | GoJS API
Tool | GoJS API

You might want to set InputEvent | GoJS API to true when handling an InputEvent. Again, it depends on the circumstances and what you want to do.

You might want to call Diagram | GoJS API, if the circumstances warrant it.