Flickering on mouseover

GoJS
1

I followed the Data Visualization example pretty closely to get this up:

http://www.screenr.com/qgFH

The problem I’m having is that, when I move my mouse from node to node, the box flickers.

The frame rate of the screen cast is pretty low, so I’m not sure if it’s obvious, but the flickering happens 0:04

There’s no flicker if

  1. I move my mouse slowly
  2. my mouse is moving from bottom up

The flicker happens only when I’m moving my mouse from a higher node to a lower node

Here’s part of my code involving the mouse over box

        myDiagram.mouseOver = function(e) {
            var doc = e.documentPoint;
            var list = myDiagram.findObjectsNear(
                doc,
                100,
                null,
                function(x) { return x instanceof go.Node; });
            var closest = null;
            var closestDist = 999999999;
            var itr = list.iterator;
            while (itr.next()) {
                var val = itr.value;
                var dist = doc.distanceSquaredPoint(val.getDocumentPoint(go.Spot.Center));
                if (dist < closestDist) {
                    closestDist = dist;
                    closest = val;
                }
            }
            highlightNode(e, closest);
        };


        var infoBoxH = document.getElementById("infoBoxHolder");
        infoBoxH.addEventListener("mousemove", function() {
            var box = document.getElementById("infoBoxHolder");
            box.style.left = parseInt(box.style.left) + "px";
            box.style.top = parseInt(box.style.top) + 30 + "px";
        }, false);

        var infoBox = document.getElementById("infoBox");
        var diagramDiv = document.getElementById("myDiagram");
        // Make sure the infoBox is hidden when the mouse is not over the Diagram
        diagramDiv.addEventListener("mouseout", function(e) {
            if (lastStroked !== null) lastStroked.stroke = null;
            lastStroked = null;

            if (document.elementFromPoint(e.clientX, e.clientY) === infoBox) {
                var box = document.getElementById("infoBoxHolder");
                box.style.left = parseInt(box.style.left) + "px";
                box.style.top = parseInt(box.style.top) + 30 + "px";
            } else {
                infoBoxH.innerHTML = "";
            }
        }, false);


    function highlightNode(e, node) {
        if (node !== null) {
            var shape = node.findObject("backgroundLayer");
            if (shape != null) {
                shape.stroke = "grey";
            }
            if (lastStroked !== null && lastStroked !== shape) lastStroked.stroke = null;
            lastStroked = shape;
            updateInfoBox(e.viewPoint, node.data);
        } else {
            if (lastStroked !== null) lastStroked.stroke = null;
            lastStroked = null;
            document.getElementById("infoBoxHolder").innerHTML = "";

        }
    }

All of which are very similar to http://www.gojs.net/latest/samples/dataVisualization.html as I followed the example very closely.

How can I prevent the flickering?

The flickering is way more intense than it appears on the screen cast.

2

Can you reproduce it on the dataVisualization sample by rapidly moving the mouse up and down?

If so, it’s doing that due to the mouse momentarily hovering over the HTML element. When that happens, the mouse leaves the Diagram, triggering a “mouseout” event, so the code in dataVisualization.html that begins with this listener runs:

// Make sure the infoBox is hidden when the mouse is not over the Diagram
diagramDiv.addEventListener(“mouseout”, function(e) {
…

And when that code runs, the infoBox is hidden from view (infoBoxH.innerHTML = “”;)

Then, on the next mouse move (which happens rapidly), the infoBox is put back on the screen and placed slightly away from the mouse. This momentary hiding and un-hiding causes a flicker.

If you take that code out, then you’ll encounter another problem: You’ll be able to move the mouse over the info box and the info box will no long “follow” the mouse, because Diagram mouseOver events will no longer occur when the mouse is over the HTML infoBox.

So now you see why it is happening. What to do about it is up to you. There are probably a few easy ways of remedying it with HTML and JavaScript, and I can think of one way that will probably work, so I’ve prepared that solution for you to try. Here’s a slightly modified dataVisualization sample:

First, pull out the mouseOver code so that we can call it from more than one place:

// !!! replaces the old mouseOver

myDiagram.mouseOver = function(e) {
doMouseOver(e);
}


// !!! new!
function doMouseOver(e) {
if (e === undefined) e = myDiagram.lastInput;
var doc = e.documentPoint;
var list = myDiagram.findObjectsNear(
doc,
100,
null,
function(x) { return x instanceof go.Part; });
var closest = null;
var closestDist = 999999999;
var itr = list.iterator;
while (itr.next()) {
var val = itr.value;
var dist = doc.distanceSquaredPoint(val.getDocumentPoint(go.Spot.Center));
if (dist < closestDist) {
closestDist = dist;
closest = val;
}
}
highlightNode(e, closest);
}

In the mouseout listener, change the bolded lines:

diagramDiv.addEventListener(“mouseout”, function(e) {
if (lastStroked !== null) lastStroked.stroke = null;
lastStroked = null;


if (document.elementFromPoint(e.clientX, e.clientY) === infoBox) {
var box = document.getElementById(“infoBoxHolder”);
box.style.left = parseInt(box.style.left) + “px”;
box.style.top = parseInt(box.style.top)+30 + “px”;
} else {
doMouseOver(); // !!! new
// !!! used to be: infoBoxH.innerHTML = “”;
}
}, false);

This stops the flickering in dataVisualization (and will be the new data viz code for future releases), and will probably fix your issue.

Let me know if it works.