Clash of mouseOver, mouseLeave, clickand doubleClick events

GoJS
1

I have a highlighting function, that i call on mouseOver, then an action I wish to execute if they click (or maybe double click) the item, however, although the click and mouse events work if i comment out either of the other ones.

If I include all the following code, the mouseOver action is constantly running (i see it actioning in firefox) and prevents the doubleClick from actioning. Also the context menu is frozen out if I include the mouseOver actions. Do you have any idea of a solution for this.

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
 	{
        //click: function(e, obj) {
        //	alert(obj.part.data.key);
        //},
        mouseOver: function(e, obj) {
            highlightDependancies(obj.part.data.key);
        },
        mouseLeave: function(e, obj) {
            restoreDiagram(e, obj);
        },
        doubleClick: function(e, obj) {
            load_content(obj.part.data.url);
        }
    },      
    $(go.Shape, "Rectangle",
      { fill: "white", portId: "", cursor: "pointer", fromLinkable: true, toLinkable: true },
      new go.Binding("fill", "bgcolor")),
    $(go.TextBlock, { margin: 5 },
      new go.Binding("text", "titletxt"),
      new go.Binding("stroke", "txcolor")),
    { dragComputation: stayInGroup }, // limit dragging of Nodes to stay within the containing Group, defined above
  {
    contextMenu:     // define a context menu for each node
      $(go.Adornment, "Vertical",  
        $("ContextMenuButton",
          $(go.TextBlock, "Show Dependancies"),
          { click: showDependancies }),
        $("ContextMenuButton",
          $(go.TextBlock, "Highlight Dependancies"),
          { click: highlightDependancies }),
        $("ContextMenuButton",
          $(go.TextBlock, "Restore Diagram"),
          { click: restoreDiagram })
      )  // end Adornment
  }
2

When I add these event handlers to a node template:

      $(go.Node, "Auto",
        new go.Binding("location", "loc", go.Point.parse),
        {
          click: function(e, obj) {
            console.log("click");
          },
          mouseOver: function(e, obj) {
            console.log("mouseOver");
          },
          mouseLeave: function(e, obj) {
            console.log("mouseLeave");
          },
          doubleClick: function(e, obj) {
            console.log("doubleClick");
          }
        }, 
        . . .

I find I get all of the expected console messages.

So there must be a problem with what you are doing in highlightDependancies or restoreDiagram or load_content.

3

In my mouseOver I calculate all the linked items (forwards and back), then reload the diagram.

I see now, that this is causing a mouseLeave event, which restores the diagram, and once restored it detects the mouseOver again, resulting in a never ending loop.

My error, I shall find a workaround.

Thanks for your quick response.

4

Yes, all of those mouse... event handlers are supposed to be quick and non-destructive.

5

The solution was:

Instead of looping through my node list and doing a:

	for (var i in JSONobj.nodeDataArray) {
		if (viewlist.indexOf(JSONobj.nodeDataArray[i].key) == -1 && JSONobj.nodeDataArray[i].key.substring(0,4) != "Pool" && JSONobj.nodeDataArray[i].key.substring(0,4) != "Lane" ) {
			if (node !== null) {
			  delete JSONobj.nodeDataArray[i];
			}
		}
	}
    load();

Then repainting the diagram, I just needed to loop through and:

    myDiagram.startTransaction();
	for (var i in JSONobj.nodeDataArray) {
		if (viewlist.indexOf(JSONobj.nodeDataArray[i].key) == -1 && JSONobj.nodeDataArray[i].key.substring(0,4) != "Pool" && JSONobj.nodeDataArray[i].key.substring(0,4) != "Lane" ) {
			var node = myDiagram.findNodeForKey(JSONobj.nodeDataArray[i].key);
			if (node !== null) {
			  myDiagram.remove(node);
			}
		}
	}
  	myDiagram.commitTransaction("delete nodes");

Then I didn’t need to do the reload, so my mouseLeave wasn’t triggered. :-)