Plotly onmousedown and onmouseup

plotly.js
1

I need to capture mouse down and mouse up events in a Plotly graph.

I was using the mouse down and mouse up events of the div containing the Plotly graph (the one that I called Plotly.newPlot(div, traces))

this.div.onmousedown = function() {
    console.log("mouse down in Plotly");
};

this.div.onmouseup = function() {
    console.log("mouse up in Plotly");
}

However only mousedown event fires up. How could I make mouse up event fire?

2

Yeah. That’s not going to work.

We generate a cover slip transparent <div> that takes up the whole document on mousedown to catch mouse interactions beyond the graph. See relevant code here.

Maybe there’s a hacky way to go around this, but I can’t think of one right now.

Can I ask, why don’t you use plotly_click instead?

3

My app visualize and display time series according to a common timer. It uses publish-subscribe pattern. The publisher is a timer. Subscribers are a bunch of Plotly plots. Whenever the publisher send a message, all subscribers are updated.

pop = Popcorn("#video");
pop.on("timeupdate", function(){
    var absoluteTime = cameraToAbsoluteTime(this.currentTime());

    if (!pop.paused()) {
        pubsubz.publish('timeMarker', {'timeMarker': absoluteTime,
                                        'minTime': absoluteTime - boundRange/4,
                                        'maxTime': absoluteTime + 3*boundRange/4
                                });
    }
});

TimeSeries.createUI('data/sensor.csv', 'necklace', ['Top', 'Bottom'], 
        function(elem) {
            elem.setSubscription(pubsubz.subscribe('timeMarker', TimeSeries.updateTime.bind(elem)));
            console.log(elem);
        });

LabelData.createUI('data/swallow.csv', 'gt', 
        function(elem) {
            var sub = pubsubz.subscribe('timeMarker', LabelData.updateTime.bind(elem));
        });

I’m adding a feature to have the Plotly plots modify the timer.

To be able to do this, when a range slider is changed, the subscriber should unsubscribe itself. Otherwise there will be an infinite loop: Plotly modify publisher, publisher send a message and in turns create another relayout event.

this.div.onmousedown = function() {
    console.log("mouse down in Plotly");
    pubsubz.unsubscribe(that.subscriptionID);
};

this.div.onmouseup = function() {
    console.log("mouse up in Plotly");
    that.setSubscription(pubsubz.subscribe('timeMarker', TimeSeries.updateTime.bind(that)));
};

Are there any other events could be used in this scenario? It seems that plotly_click works in the plot area, but not on the range slider.

4

Ok, in this case, I would recommend something like: https://codepen.io/etpinard/pen/ZyjZmp

Adding events to the document object isn’t great, but I can’t think of any other solution.