mouseEnter property

void Function(InputEvent, GraphObject, GraphObject)? get mouseEnter

Gets or sets the function to execute when the user moves the mouse into this object without holding down any buttons. This property is used by the ToolManager.

If this property value is a function, it is called with an InputEvent, this GraphObject that the mouse is now in, and any previous GraphObject that the mouse was in. The InputEvent#targetObject provides the GraphObject that was found at the mouse point before looking up the visual tree of GraphObject#panels to get to this object. By default this property is null.

This function is called with Diagram#skipsUndoManager temporarily set to true, so that any changes to GraphObjects are not recorded in the UndoManager. You do not need to start and commit any transaction in this function. After calling this function the diagram will be updated immediately.

For example, consider the situation where one wants to display buttons that the user can click whenever the user passes the mouse over a node, and the buttons automatically disappear when the mouse leaves the node. This can be implemented by showing an Adornment holding the buttons.

var nodeContextMenu =
  $(go.Adornment, "Spot",
    { background: "transparent" },  // to help detect when the mouse leaves the area
    $(go.Placeholder),
    $(go.Panel, "Vertical",
      { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
      $("Button",
        $(go.TextBlock, "Command 1"),
        {
          click: (e, obj) => {
            var node = obj.part.adornedPart;
            alert("Command 1 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          }
        }),
      $("Button",
        $(go.TextBlock, "Command 2"),
        {
          click: (e, obj) => {
            var node = obj.part.adornedPart;
            alert("Command 2 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          }
        })
      ));

Then in the definition of the Node we can implement a mouseEnter event handler:

myDiagram.nodeTemplate =
  $(go.Node,
    . . .
    {
      mouseEnter: (e, node) => {
        nodeContextMenu.adornedObject = node;
        nodeContextMenu.mouseLeave = (ev, cm) => {
          node.removeAdornment("ContextMenuOver");
        }
        node.addAdornment("ContextMenuOver", nodeContextMenu);
      }
    });

Note how it automatically defines a #mouseLeave event handler too. The context menu Adornment is removed either when the mouse leaves the area of the Adornment or when the user executes a button click event handler.

Implementation

void Function(
  _i3.InputEvent,
  _i3.GraphObject,
  _i3.GraphObject,
)? get mouseEnter => (
      _i3.InputEvent p0,
      _i3.GraphObject p1,
      _i3.GraphObject p2,
    ) =>
        _i4.callMethod(
          _i4.getProperty(
            this,
            'mouseEnter',
          ),
          r'call',
          [
            this,
            p0,
            p1,
            p2,
          ],
        );

set mouseEnter (void value(InputEvent, GraphObject, GraphObject)?)

Implementation

set mouseEnter(
    void Function(
      _i3.InputEvent,
      _i3.GraphObject,
      _i3.GraphObject,
    )? value) {
  _i4.setProperty(
    this,
    'mouseEnter',
    value == null ? _i5.undefined : _i4.allowInterop(value),
  );
}