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.
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 }),
),
);
}