Hover menu at the edge of the screen is not

GoJS
1

I have a sample that shows ItemArray in a node
when entering the item on that array it shows action buttons like this
image

now if I move the node to the edge of the screen then we can not see the menu.
image

is there away to solve this problem

here is a link to show this problem

2

You can either reimplement the Adornment to use HTML instead (HTMLInfo), or you could adapt the Adornment to put the Buttons on the left side of the item when the node is too close to the right side of the viewport.

The latter you could do by setting the alignment and alignmentFocusof the Panel of Buttons to:

        { alignment: new go.Spot(0, 0.5, 8, 0), alignmentFocus: go.Spot.Right },

when

  panel.part.adornedPart.actualBounds.right >= panel.diagram.viewportBounds.right - 30

or something like that.

3

it almost works
If I put one node in this position

image
image881×400 25.3 KB

hovering on the 2nd element will show this

image
image881×399 25.3 KB

the binding looks like this

$(
        go.Panel,
        go.Panel.Auto,
        { mouseLeave: (e, buttonspanel, next) => hideAdornment(next) },
        // the buttons are intentionally slightly overlapping the item Panel (the Margin.offsetX)
        {  },
        new go.Binding('alignment', '', (a, panel: go.Panel) => {
          let diagramRight = panel.diagram.viewportBounds.right;
          let panelRight = panel.part.actualBounds.right;
          console.log(
            diagramRight,
            panelRight,
            diagramRight - panelRight < 30,
            diagramRight - panelRight
          );
          return diagramRight - panelRight < 30 ? go.Spot.Left : go.Spot.Right;
        }),
        new go.Binding('alignmentFocus', '', (a, panel) => {
          let diagramRight = panel.diagram.viewportBounds.right;
          let panelRight = panel.part.actualBounds.right;
          return diagramRight - panelRight < 30 ? go.Spot.Right : go.Spot.Left;
        }),
        $(go.Shape, {.....

here is a link to the example

4

Hi walter, can you look above and help ( I accidently marked this as a solution but it is not),
on the same node position the buttons appears on other sided

5

The behavior seems to match what you were looking for, and you didn’t ask a question, and the post seemed to say that everything’s OK. That’s why I marked it as Solved.

What’s the problem? What do you want instead?

6

I moved the node marked as “beta beta beta” next to the edge,
then I hover over some items,
in the first item the action buttons appears to the right of the shape
in the next item the action buttons appears to the left of the shape.
(the same problem appears on the next items)
I need the behavior to be constant.
In my app the buttons appears this happens also not so close to the edge

so the question is how to make this constant.

7

Ah, it should be this:

let panelRight = panel.part.adornedPart.actualBounds.right;
8

that works,
but then I find another problem,
the scenario is like this

  1. hover over an item → the menu appears on the right side
  2. drag the node to the edge
  3. hover over the same item as before (do not hove over other item) the item should appear on the left side but it appears next at the right.

it looks like it remember the position
if after that I hover another item and back to the first one then everything is ok

is there something I can do?

9

In removeAdornment, after removing the adornment from the node, set ItemAdornment.data = null;.

10

that works, thank you very much, it was a long journey, maybe it is good to have an example of that.