Go Node Hover Adornment location is not proper for the row in table layout

GoJS
1

I am using table layout and i need to show a delete icon on hovering the row,
but for every row the icon is coming at the top right.

image
image559×598 40.8 KB

This is my group template code

 const templateName = 'ListContainer';
        this.diagram.groupTemplateMap.add(templateName,
            $(go.Group, 'Auto',
                {
                    layerName: 'Background',
                    name: 'LIST_CONTAINER',
                    stretch: go.GraphObject.Fill,
                    width: 500,
                    height: 600,
                    selectable: false,
                    computesBoundsAfterDrag: false,
                    computesBoundsIncludingLocation: false,
                    handlesDragDropForMembers: false,
                    mouseDragEnter: function (e: go.InputEvent, group: any, prev: go.GraphObject) { group.isHighlighted = true; },
                    mouseDragLeave: function (e: go.InputEvent, group: any, next: go.GraphObject) { group.isHighlighted = false; },
                    mouseDrop: (e, obj) => this.listContainerGroupMouseDropHandler(e, obj)
                },
                new go.Binding('row'),
                new go.Binding('column', 'col'),
                $(go.Shape,
                    {
                        stroke: 'lightgray',
                        fill: 'white',
                        stretch: go.GraphObject.Fill,
                    },
                ),

                $(go.Panel, 'Auto', { name: 'LIST_CONTAINER' },
                    { width: 300, margin: 10 },
                    $(go.Shape,
                        {
                            stroke: 'lightgray',
                            fill: 'white',
                            stretch: go.GraphObject.Fill,

                        },

                    ),
                    $(go.Panel, 'Table',
                        {
                            name: 'POSITIONS_CONTAINER_DATA',
                            defaultRowSeparatorStroke: 'lightgray',
                            defaultRowSeparatorStrokeWidth: 1,
                            stretch: go.GraphObject.Fill,

                            itemTemplate: this.setupListRowContainerTemplate()
                        },
                        new go.Binding('itemArray', 'positions')
                    )

                )
            ));

I have added the code for the adorment in the this.setupListRowContainerTemplate().

I have added this in my panel of row. And called the adorment function like
var nodeHoverAdornment = this.setupMouseOverDelete();

mouseHover: (e: any, obj: { part: any; }): void => {
                    console.log(obj);
                    var node = obj.part;
                    if (nodeHoverAdornment) { nodeHoverAdornment.adornedObject = node; }
                    node.addAdornment('mouseHover', nodeHoverAdornment);
                },
                mouseLeave: (e, obj) => {
                    setTimeout(function () {
                        if (obj.part) {
                            obj.part.removeAdornment('mouseHover');
                        }
                    }, 1000);
                } },

This is my adormnent code

private setupMouseOverDelete(): go.Adornment | undefined {
        return $(go.Adornment, 'Spot',
            $(go.Placeholder,
                {
                    isActionable: true,  // needed because this is in a temporary Layer
                    click: (e: any, obj: any) => {
                        var node = obj.part.adornedPart;
                        node.diagram.select(node);
                    }
                }),
            $('Button', { alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Right, 'ButtonBorder.figure': 'Circle', 'ButtonBorder.stroke': 'transparent' },
                { click: (e, obj) => console.log(obj) },
                $(go.Shape, 'Circle', {
                    fill: '#ff6600', width: 20, height: 20, stroke: null, strokeWidth: 0, name: 'DELETE_SHAPE'
                }), this.addIcon('\ue872', { stroke: '#E0E0E0', height: 14 }),
            ),
        );
    }
2

You don’t show what the itemTemplate is. Did you want to show the delete button for each item panel when the user hovers over it?

But I’ll guess that the problem is that in your mouseHover event handler you are putting the adornment on the Node rather than on the item Panel. So I’ll guess that you need to change your code:

            var node = obj.part;
            if (nodeHoverAdornment) { nodeHoverAdornment.adornedObject = node; }
            node.addAdornment('mouseHover', nodeHoverAdornment);

to something like:

            var item = obj.findBindingPanel();
            if (nodeHoverAdornment) { nodeHoverAdornment.adornedObject = item; }
            item.part.addAdornment('mouseHover', nodeHoverAdornment);