I'd like to change visibility of a panel when mouse over on or mouse leave off a picture. How to do it?

GoJS
1

This is the picture: Monosnap
When I hover over the picture, I’d like to display overlay like this: Monosnap

And when mouse leaves, I’d like to hide overlay.

To do so, I already made picture and overlay panel:

        $(go.Picture,
          {
            name: "screenshot",
            desiredSize: new go.Size(193, 145),
          },
          new go.Binding("source", "screenshot"),
          {
            mouseOver: function(e, obj) {
           
            },
            mouseLeave: function(e, obj) {

            }
          }
        ),
        $(go.Panel, "Auto",
          {
            name: "hover-screenshot-panel",
            visible: false,
          },
          new go.Binding("visible", "visibilityOfPageFunctionPanel").ofModel(),
          $(go.Shape, "Rectangle",
            {
              name: "hover-bg",
              stroke: null,
              fill: "rgba(49, 67, 76, 0.9)" 
            }
          )
        )

(*Fyi, I’m building Angular project and I made separate ts file for node template.)
So how do I toggle visibility of overlay panel?
Regards

2

Usually one uses the GraphObject.mouseEnter and GraphObject.mouseLeave events. But since you mention “hover”, if you really want to wait before showing something, you can use the GraphObject.mouseHover event.

But using mouseLeave is problematic if what you are going to show is going to be in front of the object, because the new object will occlude the original object, causing the mouse to leave the original object and then entering the new object.

Instead you will probably want to implement a mouseLeave event handler on the new object, rather than on the original object.

3

Thanks for your reply, Walter!
But my question is how to toggle visibility of overlay panel?
how to control visibility of overlay panel when mouse over a picture which is neighbor of the overlay panel?
Plz tell me with lines of code.

4

Have you seen Buttons that show on Hover ?

5

Yes, It used adornment. But I’m gonna try in a different way. I already made picture and overlay panel.
They are siblings inside parent panel. How can I change visibility of overlay panel when mouse over picture?

6

Give it a GraphObject.name, call Panel.findObject on the Node (GraphObject.part) with that name, and then set its GraphObject.visible property.

The “PanelExpanderButton” does this: GoJS Buttons -- Northwoods Software. See its definition at https://gojs.net/latest/extensions/Buttons.js

7

Thanks for your suggestion. It helped me a lot!
As you said before, I’d like to implement a mouseLeave event handler on the overlay panel which is in front of the picture.
And I already implemented mouseEnter in the picture like this:
{
mouseEnter: function(e, obj) {
var panel = obj.panel.findObject(“hover-screenshot-panel”);
panel.visible = true;
},
}

Now where and how should I implement mouseLeave in which overlay panel should be hidden?

8

Implement it on the overlay panel itself. It should be similar to the mouseEnter function, but you can just set obj.visible = false.