mouseDragEnter doesn't fire

Hello,
I noticed that for my node template events mouseDragEnter, mouseDragLeave doesn’t work. mouseEnter and mouseLeave work fine. What’s wrong with my code ?

            mouseEnter: function (e, obj) { 
                  console.log("mouse enter"); },
            mouseLeave: function (e, obj) { 
               console.log("mouse leave"); },
            mouseDragEnter: function (e, node, prev) {
                console.log("mouse drag enter");
            },
            mouseDragLeave: function (e, node, next) {
                console.log("mouse drag leave");
            },
            mouseDrop: function (e, node) {
                console.log("mouse drag drop");
            }

Thanks in advance.

I just copy-and-pasted your code into the node template used in the Minimal sample, and it worked just as I expected it would and as I believe it is documented:

I can’t get it to work either. mouseEnter and mouseExit works as expected–none of my debuggers fire. I have this modified version of the button:

const go = window.go;

go.GraphObject.defineBuilder("CornerButton", function (args) {
// default brushes for "Button" shape
var buttonFillNormal = go.GraphObject.make(go.Brush, "Linear", { 0: "white", 1: "white" });
var buttonStrokeNormal = "white";

var buttonFillOver = go.GraphObject.make(go.Brush, "Linear", { 0: "white", 1: "white" });
var buttonStrokeOver = "white";

// offset identical to that needed to match the original RoundedRectangle figure, to keep the same size
var offset = 0.001//2.761423749153968;

var button =
  go.GraphObject.make(go.Panel, "Auto",
    {
        isActionable: true,
        fromLinkable: true,
        fromLinkableSelfNode: true,
        fromLinkableDuplicates: true,
        toLinkable: true,
        toLinkableSelfNode: true,
        toLinkableDuplicates: true,
        portId: 'default'
    },  // needed so that the ActionTool intercepts mouse events
    { // save these values for the mouseEnter and mouseLeave event handlers
        "_buttonFillNormal": buttonFillNormal,
        "_buttonStrokeNormal": buttonStrokeNormal,
        "_buttonFillOver": buttonFillOver,
        "_buttonStrokeOver": buttonStrokeOver
    },
    go.GraphObject.make(go.Shape,  // the border
      {
          name: "ButtonBorder",
          figure: "Circle",
          spot1: new go.Spot(0, 0, offset, offset),
          spot2: new go.Spot(1, 1, -offset, -offset),
          fill: buttonFillNormal,
          stroke: null,
          strokeWidth: 0
      }));

// There"s no GraphObject inside the button shape -- it must be added as part of the button definition.
// This way the object could be a TextBlock or a Shape or a Picture or arbitrarily complex Panel.

// mouse-over behavior
button.mouseEnter = function (e, button, prev) {
    var shape = button.findObject("ButtonBorder");  // the border Shape
    if (shape instanceof go.Shape) {
        var brush = button["_buttonFillOver"];
        button["_buttonFillNormal"] = shape.fill;
        shape.fill = brush;
        brush = button["_buttonStrokeOver"];
        button["_buttonStrokeNormal"] = shape.stroke;
        shape.stroke = brush;
    }
};

button.mouseLeave = function (e, button, prev) {
    var shape = button.findObject("ButtonBorder");  // the border Shape
    if (shape instanceof go.Shape) {
        shape.fill = button["_buttonFillNormal"];
        shape.stroke = button["_buttonStrokeNormal"];
    }
};

button.mouseDragEnter = function (event, target) {
    debugger;

};
button.mouseDragLeave = function (event, target) {
    debugger;

};
button.mouseDrop = function (event, target) {
    debugger;

};

button.mouseHold = function (event, target) {
    debugger;

};

return button;

});

I just tried your code, replacing “debugger;” with “console.log(…);”. It worked well for me. I got “mouseDragEnter” events when dragging a Node over the button, and a “mouseDragLeave” when dragging it away from the button. A “mouseDrop” event happened only if I dropped the Node I was dragging onto a button.

One difference in expectations perhaps: I never got a “mouseHold” event, and one shouldn’t, because it’s a button – i.e. GraphObject.isActionable is true, resulting in the ActionTool running instead of the ToolManager, which is what would normally raise the “mouseHold” event.

Thanks for the prompt reply. I don’t want to share all of the details in the public forum, so I’ve sent an email to follow up.

I have very simple template for node
diagram.nodeTemplateMap.add(“myblock”,
go$(go.Node, “Auto”,
{
fromSpot: go.Spot.Right, toSpot: new go.Spot(0.001, 0, 11, 0)
mouseDragEnter: function (e, obj) { alert(‘dragged’); }
},
new go.Binding(“key”, “key”),
new go.Binding(“location”, “loc”,
function (l) { return new go.Point(scaleSegmentWidth(l.x), l.y); }),
new go.Binding(“minLocation”, “minLocation”,
function (l) { return new go.Point(l.x, l.y); }),
new go.Binding(“maxLocation”, “maxLocation”,
function (l) { return new go.Point(l.x, l.y); }),
)

And mouseDragEnter doesn’t fire for me. What’s wrong ? How to get it work ?

Thanks.
Alex.

That template looks incomplete.

If I give it some size (Width, height, background to see it) then it seems to work fine. Drag one node into another and you’ll see the alert:

I see, but is it possbile to fire this event when node is moved(not one into another) just a few pixels left or right ?

If you want it to fire after the selection is done moving you can use:

myDiagram.addDiagramListener('SelectionMoved', function(e) {
  // e.subject is the go.Set() of what moved
});

Otherwise if you want something to fire every time an object’s position changes you could do:

myDiagram.addChangedListener(function(e) {
  // only care about position changes on non-adornments
  if (e.propertyName !== "position" || e.object instanceof Adornment) return;
  // e.object is a Node or link that moved
  console.log(e.toString())
});

Great! It works for me!
But how to get properties from moved node ?
It’s not e.subject as I can see…

Are you using 'SelectionMoved'?

Do something like:

myDiagram.addDiagramListener('SelectionMoved', function(e) {
  var movedObjects = e.subject.iterator;
  while (movedObjects.next()) {
    var obj = movedObjects.value;
    console.log(obj.toString());
    console.log(obj.data); // node data or link data
  }
});

Thanks! It works for me!