Previously mouseEnter even fireing again when we are drop any element in the diagram and the dropHandler return void

GoJS
1

image
Here this delete icon comes when we mouseEnter in the row and when we mouseLeave it get disappear after 3 second.
Now when we try to drop any new product in the list and the mouseDrop event returns nothing then the this delete icon get visible for every row which was hovered previously.

This is my mouseDrop event.

 mouseDrop: (e, obj) => this.listContainerGroupMouseDropHandler(e, obj)

 public listContainerGroupMouseDropHandler(e: go.InputEvent, group: any): void {
//some code
 e.diagram.currentTool.doCancel();
    return;
 }

If i am returning like this then these delete icon get visible for all the previously hovered rows.

image

2

What are your mouseEnter and mouseLeave code?

3 
 private setupListRowContainerTemplate(): go.Panel | undefined {
        var row: any;
        return $(go.Panel, 'TableRow', {
            mouseEnter: function (e, obj: any) {
                if (obj.data.productId || obj.data.containerType === 'RETURN') {
                    row = obj.data;
                    var btn = obj.findObject('DeleteButton');
                    btn.visible = true;
                    console.log('d');
                }
            },
            mouseLeave: function (e, obj: any) {
                setTimeout(function () {
                    if (obj.data.productId || obj.data.containerType === 'RETURN') {
                        var btn = obj.findObject('DeleteButton')!;
                        btn.visible = false;
                    }
                }, 3000);
            },
        },
            this.displayProductAndBinNode()
            ,
            $('Button', { name: 'DeleteButton', alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Right, 'ButtonBorder.figure': 'Circle', 'ButtonBorder.stroke': 'transparent', visible: false, margin: new go.Margin(2, 2, 2, 2) },
                {
                    click: (e, obj) => {
                        this.removeProductAndBin(e, row, this.diagram);
                    }
                },
                $(go.Shape, 'Circle', {
                    fill: '#ff6600', width: 20, height: 20, stroke: null, strokeWidth: 0, name: 'DELETE_SHAPE'
                }), this.addIcon('\ue872', { stroke: '#E0E0E0', height: 14 }),
            ),
        );
    }
4

That row variable is very suspicious. I’m surprised the code works reliably.

Here’s what I would do. In this screenshot the mouse is over or near the “2nd” text:
image

The complete code:

<!DOCTYPE html>
<html>
<head>
  <title>Deleting Items</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:400px"></div>
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>

  <script src="https://unpkg.com/[email protected]"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      "undoManager.isEnabled": true,
      "ModelChanged": e => {     // just for demonstration purposes,
        if (e.isTransactionFinished) {  // show the model data in the page's TextArea
          document.getElementById("mySavedModel").textContent = e.model.toJson();
        }
      }
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: null, stroke: "gray" }),
    $(go.Panel, "Table",
      { background: "whitesmoke" },
      $(go.Panel, "Auto",
        { row: 0, stretch: go.GraphObject.Fill },
        new go.Binding("background", "color"),
        $(go.TextBlock, { margin: 4, font: "bold 11pt sans-serif" },
          new go.Binding("text"))
      ),
      $(go.Panel, "Table",
        { row: 1, stretch: go.GraphObject.Fill },
        new go.Binding("itemArray", "items"),
        $(go.RowColumnDefinition, { column: 0, sizing: go.RowColumnDefinition.None }),
        {
          itemTemplate:
            $(go.Panel, "TableRow",
              {
                mouseEnter: (e, pan) => pan.findObject("DeleteButton").visible = true,
                mouseLeave: (e, pan) => pan.findObject("DeleteButton").visible = false,
                background: "transparent"  // capture mouse events for each TableRow Panel
              },
              $(go.TextBlock, { column: 0, margin: 5 },
                new go.Binding("text", "id")),
              $(go.TextBlock, { column: 1, margin: 5 },
                new go.Binding("text", "t")),
              $("Button", { column: 1, alignment: go.Spot.Right },
                {
                  name: "DeleteButton",
                  visible: false,  // default invisible
                  "ButtonBorder.strokeWidth": 0,
                  click: (e, button) => {
                    const elt = button.findBindingPanel();
                    const pan = elt.panel;
                    alert(`deleting item ${elt.data.id}: ${elt.data.t}`);
                    e.diagram.model.commit(m => {
                      m.removeArrayItem(pan.itemArray, elt.itemIndex);
                    });
                  }
                },
                $(go.Shape, "XLine", { width: 10, height: 10, stroke: "red", strokeWidth: 3 }))
            )
        }
      )
    )
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue",
    items: [
      { id: 1, t: "first" },
      { id: 2, t: "second" },
      { id: 3, t: "first" },
      { id: 4, t: "second" },
    ] },
  { key: 2, text: "Beta Beta Beta", color: "orange",
    items: [
      { id: 1, t: "1st" },
      { id: 2, t: "2nd" },
    ] },
]);
  </script>
</body>
</html>

Of course I’d remove the alert call, at least.

5

Will try this approach and let you know,
By the way what time you get active to reply.

6

We’re on the east coast of the US, outside of Boston Massachusetts.

7

Just stay a ctive right now, i am trying this approach

8

It’s working fine.