Gojs Group hovering is not working as expected

GoJS
1

Hi Team,

I am using Gojs group (nested level) and I want to add custom hoverAdornment.

Hover Adornment:
It works for the outer gojs group but the mouse leave doesn’t get triggered if I move between 2 gojs groups. it only works, if I hover on a group and then move my focus back to the empty canvas area, then mouseLeave event is triggered. but the same won’t happen if I move my focus from one group to another group at the outer level or in the nested internal level.

here is my grp template code:

const hoverAdornment = (
  shapeName: string,
): {
  mouseEnter: (e: any, graphObject: GraphObject) => void;
  mouseLeave: (e: any, graphObject: GraphObject) => void;
} => {
  const mouseEnter = (_e: any, graphObject: GraphObject) => {
    const shape: any = (graphObject as Panel).findObject(shapeName);
    if (shape) {
      shape.fill = 'green';
      shape.stroke = 'green';
    }
  };

  const mouseLeave = (_e: any, graphObject: GraphObject) => {
    const shape: any = (graphObject as Panel).findObject(shapeName);
    const isSelected = (graphObject as Part).isSelected;
    if (shape) {
      shape.fill = 'white';
      shape.stroke = isSelected ? 'blue' : 'white';
    }
  };

  return {
    mouseEnter,
    mouseLeave,
  };
};

export const groupTemplate = (minWidth: number, minHeight: number, color: string, groupZOrder: zOrder) => {
  return $(
    Group,
    'Auto',
    groupShadow(),
    settings(),
    { selectable: true },
    { zOrder: groupZOrder },
    { minSize: new Size(minWidth, minHeight) },
    { layout: diagramTreeLayout() },
    { isLayoutPositioned: true },
    roundedPanel(
      color,
      true,
      'flowShape',
      { alignment: Spot.Center },
      hoverAdornment('flowShape'),
    ),
  );
};

i use this group template to draw multiple gojs group on my canvas.

fyi, i checked the samples from gojs site and i do not see much of a difference between the sample code and the one i have wrote or is there any ?

do you see any issue with my code ?

any quick help will be really appreciated @walter :)

2

This has the same kind of problem as Go js Group is not selectable. It’s OK to set mouseEnter and mouseLeave on whatever that roundedPanel is, but the second argument to those event handlers will be that object, not the Group.

3

im not sure I quite understand what you mean.

btw, this is what roundedPanel looks like,

/** Panel creates a rounded rectangular box with provided width, height and color */
export const roundedPanel = (
  color: string,
  alwaysShowGojsNode = false,
  shapeName = diagramShapeName,
  ...props: any
) => {
  return $(
    Panel,
    'Auto',
    { alignment: Spot.Left },
    $(Shape, { name: shapeName }, 'RoundedRectangle', {
      ...colors(color, alwaysShowGojsNode),
      parameter1: 14,
    }),
    $(Placeholder, { padding: 16 }),
    ...props,
  );
};

just to re-iterate the issue i am facing is that, the hover works when i move the mouse inside the stage box and move out on the outer canvas.

but if i move the mouse to top stage group and then move the mouse down to second stage group box(stage2), then focus does move from top stage group box to below stage group box.

when i debugged, control was never hitting mouseLeave event handler,

Screenshot 2024-03-13 at 21.28.30
Screenshot 2024-03-13 at 21.28.302168×1370 139 KB

Also the same group boxes are not selectable :(

im pretty sure, i have done some silly mistake, but not sure where.

4

That value will always be undefined because graphObject will be a Panel but not a Group, and there exists no Panel.isSelected property.

5

yep that was definately wrong, i will udpate.

btw, the whole reason for selection not working on the Group was because of the html layer overlapping on it(z-order was more than gojs canvas layer).

anyway, thanks for the help @walter :)