first pass hover labels!

etpinard · etpinard · commit 65279d937d94 · 2016-05-31T17:48:16.000-04:00
diff --git a/src/plots/mapbox/mapbox.js b/src/plots/mapbox/mapbox.js
@@ -11,8 +11,8 @@
 
 var mapboxgl = require('mapbox-gl');
 
+var Fx = require('../cartesian/graph_interact');
 var constants = require('./constants');
-var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
 
 function Mapbox(opts) {
@@ -31,7 +31,8 @@ function Mapbox(opts) {
 
     // create framework on instantiation for a smoother first plot call
     this.div = null;
-    this.hoverLayer = null;
+    this.xaxis = null;
+    this.yaxis = null;
     this.createFramework(fullLayout);
 
     this.map = null;
@@ -70,7 +71,8 @@ proto.plot = function(fullData, fullLayout, promises) {
 
 proto.createMap = function(fullData, fullLayout, resolve) {
     var self = this,
-        opts = this.opts;
+        gd = self.gd,
+        opts = self.opts;
 
     var map = self.map = new mapboxgl.Map({
         container: self.div,
@@ -104,10 +106,28 @@ proto.createMap = function(fullData, fullLayout, resolve) {
         opts._input.zoom = opts.zoom = map.getZoom();
     });
 
+    map.on('mousemove', function(evt) {
+        var bb = self.div.getBoundingClientRect();
+
+        // some hackery to get Fx.hover to work
+
+        evt.clientX = evt.point.x + bb.left;
+        evt.clientY = evt.point.y + bb.top;
 
-    // TODO hover labels
-    map.on('mousemove', function() {});
+        evt.target.getBoundingClientRect = function() { return bb; };
 
+        self.xaxis.p2c = function() { return evt.lngLat.lng; };
+        self.yaxis.p2c = function() { return evt.lngLat.lat; };
+
+        Fx.hover(gd, evt, self.id);
+    });
+
+    function unhover() {
+        Fx.loneUnhover(fullLayout._toppaper);
+    }
+
+    map.on('dragstart', unhover);
+    map.on('zoomstart', unhover);
 };
 
 proto.updateMap = function(fullData, fullLayout, resolve) {
@@ -185,27 +205,28 @@ proto.updateLayout = function(fullLayout) {
 };
 
 proto.createFramework = function(fullLayout) {
-    var div = this.div = document.createElement('div');
+    var self = this;
 
-    div.id = this.uid;
+    var div = self.div = document.createElement('div');
+
+    div.id = self.uid;
     div.style.position = 'absolute';
 
-    var hoverLayer = this.hoverLayer = document.createElementNS(
-        xmlnsNamespaces.svg, 'svg'
-    );
+    self.container.appendChild(div);
 
-    var hoverStyle = hoverLayer.style;
+    // create mock x/y axes for hover routine
 
-    hoverStyle.position = 'absolute';
-    hoverStyle.top = hoverStyle.left = '0px';
-    hoverStyle.width = hoverStyle.height = '100%';
-    hoverStyle['z-index'] = 20;
-    hoverStyle['pointer-events'] = 'none';
+    self.xaxis = {
+        _id: 'x',
+        c2p: function(v) { return self.project(v).x; }
+    };
 
-    this.container.appendChild(div);
-    this.container.appendChild(hoverLayer);
+    self.yaxis = {
+        _id: 'y',
+        c2p: function(v) { return self.project(v).y; }
+    };
 
-    this.updateFramework(fullLayout);
+    self.updateFramework(fullLayout);
 };
 
 proto.updateFramework = function(fullLayout) {
@@ -214,18 +235,23 @@ proto.updateFramework = function(fullLayout) {
 
     var style = this.div.style;
 
-    // Is this correct? It seems to get the map zoom level wrong?
+    // TODO Is this correct? It seems to get the map zoom level wrong?
 
     style.width = size.w * (domain.x[1] - domain.x[0]) + 'px';
     style.height = size.h * (domain.y[1] - domain.y[0]) + 'px';
     style.left = size.l + domain.x[0] * size.w + 'px';
     style.top = size.t + (1 - domain.y[1]) * size.h + 'px';
+
+    this.xaxis._offset = size.l + domain.x[0] * size.w;
+    this.xaxis._length = size.w * (domain.x[1] - domain.x[0]);
+
+    this.yaxis._offset = size.t + (1 - domain.y[1]) * size.h;
+    this.yaxis._length = size.h * (domain.y[1] - domain.y[0]);
 };
 
 proto.destroy = function() {
     this.map.remove();
     this.container.removeChild(this.div);
-    this.container.removeChild(this.hoverLayer);
 };
 
 proto.toImage = function() {
@@ -255,6 +281,11 @@ proto.createGeoJSONSource = function() {
     return new mapboxgl.GeoJSONSource({data: blank});
 };
 
+// convenience method to project a [lon, lat] array to pixel coords
+proto.project = function(v) {
+    return this.map.project(new mapboxgl.LngLat(v[0], v[1]));
+};
+
 function convertStyleUrl(style) {
     return constants.styleUrlPrefix + style + '-' + constants.styleUrlSuffix;
 }
diff --git a/src/traces/scattermapbox/calc.js b/src/traces/scattermapbox/calc.js
@@ -0,0 +1,45 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var subtypes = require('../scatter/subtypes');
+var arrayToCalcItem = require('../../lib/array_to_calc_item');
+var calcMarkerColorscale = require('../scatter/marker_colorscale_calc');
+
+
+module.exports = function calc(gd, trace) {
+    var len = trace.lon.length,
+        hasMarkers = subtypes.hasMarkers(trace);
+
+    var cd = new Array(len);
+
+    for(var i = 0; i < len; i++) {
+        var cdi = cd[i] = {};
+
+        cdi.lonlat = [trace.lon[i], trace.lat[i]];
+
+        if(hasMarkers) {
+            var marker = trace.marker;
+
+            arrayToCalcItem(marker.color, cdi, 'mc', i);
+            arrayToCalcItem(marker.size, cdi, 'ms', i);
+
+            // TODO handle these for hover !!!
+            // arrayToCalcItem(colorScaleFn(marker.color), cdi, 'mcc', i);
+            // arrayToCalcItem(sizFn(marker.size), cdi, 'mrc', i);
+        }
+
+        arrayToCalcItem(trace.text, cdi, 'tx', i);
+    }
+
+    calcMarkerColorscale(trace);
+
+    return cd;
+};
diff --git a/src/traces/scattermapbox/hover.js b/src/traces/scattermapbox/hover.js
@@ -0,0 +1,91 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var Fx = require('../../plots/cartesian/graph_interact');
+var getTraceColor = require('../scatter/get_trace_color');
+
+
+module.exports = function hoverPoints(pointData, xval, yval) {
+    var cd = pointData.cd,
+        trace = cd[0].trace,
+        xa = pointData.xa,
+        ya = pointData.ya;
+
+    // compute winding number about [-180, 180] globe
+    var winding = (xval >= 0) ?
+            Math.floor((xval + 180) / 360) :
+            Math.ceil((xval - 180) / 360);
+
+    // shift longitude to [-180, 180] to determine closest point
+    var lonShift = winding * 360;
+    var xval2 = xval - lonShift;
+
+    function distFn(d) {
+        var lonlat = d.lonlat,
+            dx = Math.abs(xa.c2p(lonlat) - xa.c2p([xval2, lonlat[1]])),
+            dy = Math.abs(ya.c2p(lonlat) - ya.c2p([lonlat[0], yval])),
+            rad = Math.max(3, d.mrc || 0);
+
+        return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
+    }
+
+    Fx.getClosest(cd, distFn, pointData);
+
+    // skip the rest (for this trace) if we didn't find a close point
+    if(pointData.index === false) return;
+
+    var di = cd[pointData.index],
+        lonlat = di.lonlat,
+        lonlatShifted = [lonlat[0] + lonShift, lonlat[1]];
+
+    // shift labels back to original winded globe
+    var xc = xa.c2p(lonlatShifted),
+        yc = ya.c2p(lonlatShifted),
+        rad = di.mrc || 1;
+
+    pointData.x0 = xc - rad;
+    pointData.x1 = xc + rad;
+    pointData.y0 = yc - rad;
+    pointData.y1 = yc + rad;
+
+    pointData.color = getTraceColor(trace, di);
+    pointData.extraText = getExtraText(trace, di);
+
+    return [pointData];
+};
+
+function getExtraText(trace, di) {
+    var hoverinfo = trace.hoverinfo.split('+'),
+        isAll = (hoverinfo.indexOf('all') !== -1),
+        hasLon = (hoverinfo.indexOf('lon') !== -1),
+        hasLat = (hoverinfo.indexOf('lat') !== -1);
+
+    var lonlat = di.lonlat,
+        text = [];
+
+    // TODO should we use a mock axis to format hover?
+    // If so, we'll need to make precision be zoom-level dependent
+    function format(v) {
+        return v + '\u00B0';
+    }
+
+    if(isAll || (hasLon && hasLat)) {
+        text.push('(' + format(lonlat[0]) + ', ' + format(lonlat[1]) + ')');
+    }
+    else if(hasLon) text.push('lon: ' + format(lonlat[0]));
+    else if(hasLat) text.push('lat: ' + format(lonlat[1]));
+
+    if(isAll || hoverinfo.indexOf('text') !== -1) {
+        text.push(di.tx || trace.text);
+    }
+
+    return text.join('<br>');
+}
diff --git a/src/traces/scattermapbox/index.js b/src/traces/scattermapbox/index.js
@@ -22,7 +22,8 @@ var ScatterMapbox = {};
 ScatterMapbox.attributes = require('./attributes');
 ScatterMapbox.supplyDefaults = require('./defaults');
 ScatterMapbox.colorbar = require('../scatter/colorbar');
-ScatterMapbox.calc = require('../scattergeo/calc');
+ScatterMapbox.calc = require('./calc');
+ScatterMapbox.hoverPoints = require('./hover');
 ScatterMapbox.plot = require('./plot');
 
 ScatterMapbox.moduleType = 'trace';
