gridviz 2.1.8 → 2.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "2.1.8",
+    "version": "2.1.10",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/App.js

@@ -248,9 +248,9 @@ export class App {
             // transparent background (e.g. leaflet) 'red painting' fix
             if (opts.transparentBackground) {
                 if (focus) {
+                    this.tooltip.html(focus.html)
                     this.tooltip.setPosition(e)
                     this.tooltip.show()
-                    this.tooltip.html(focus.html)
                 } else {
                     this.tooltip.hide()
                 }
@@ -263,9 +263,9 @@ export class App {
             }
 
             if (focus) {
+                this.tooltip.html(focus.html)
                 this.tooltip.setPosition(e)
                 this.tooltip.show()
-                this.tooltip.html(focus.html)
 
                 //show cell position as a rectangle
                 if (!this.canvasSave) {

package/src/DatasetComponent.js

@@ -72,19 +72,31 @@ export class DatasetComponent {
     getCellFromPosition(posGeo, cells) {
         //compute candidate cell position
         /** @type {number} */
-        const r = this.getResolution()
+        //const r = this.getResolution()
         /** @type {number} */
-        const cellX = r * Math.floor(posGeo.x / r)
+        //const cellX = r * Math.floor(posGeo.x / r)
         /** @type {number} */
-        const cellY = r * Math.floor(posGeo.y / r)
+        //const cellY = r * Math.floor(posGeo.y / r)
 
-        //get cell
+        /*/get cell
         for (const cell of cells) {
             if (cell.x != cellX) continue
             if (cell.y != cellY) continue
             return cell
         }
+        return undefined*/
+
+        /** @type {number} */
+        const r = this.getResolution()
+        for (const cell of cells) {
+            if (posGeo.x < cell.x) continue
+            else if (cell.x + r < posGeo.x) continue
+            else if (posGeo.y < cell.y) continue
+            else if (cell.y + r < posGeo.y) continue
+            else return cell
+        }
         return undefined
+
     }
 
     //getters and setters

package/src/Tooltip.js

@@ -73,6 +73,7 @@ export class Tooltip {
         this.tooltip.style('position', 'absolute')
         this.tooltip.style('pointer-events', 'none')
         this.tooltip.style('opacity', '0')
+        this.tooltip.style('text-wrap', 'nowrap')
 
         // aria-labels (thanks to wahlatlas)
         this.tooltip.attr('role', 'tooltip').attr('aria-live', 'polite')
@@ -105,9 +106,10 @@ export class Tooltip {
     setPosition(event) {
         let parentRect = this.parentElement.getBoundingClientRect()
 
-        this.tooltip
-            .style('left', event.pageX - parentRect.left + this.xOffset + 'px')
-            .style('top', event.pageY - parentRect.top - this.yOffset + 'px')
+        let x = event.pageX + this.xOffset
+        let y = event.pageY - this.yOffset
+
+        this.tooltip.style('left', x + 'px').style('top', y + 'px')
 
         this.ensureTooltipInsideContainer(event, parentRect)
     }
@@ -148,25 +150,31 @@ export class Tooltip {
      * @param {DOMRect} parentRect
      */
     ensureTooltipInsideContainer = function (event, parentRect) {
-        let ttNode = this.tooltip.node()
+        let node = this.tooltip.node()
+        let parentWidth = parentRect.width
+        let parentHeight = parentRect.height
 
         //too far right
-        let maxRight = parentRect.width
-        let ttRight = ttNode.offsetLeft + ttNode.clientWidth
-        if (ttRight > maxRight) {
-            let left = event.pageX - parentRect.left - ttNode.clientWidth - this.xOffset
-            ttNode.style.left = left + 'px'
+        if (node.offsetLeft > parentRect.left + parentWidth - node.clientWidth) {
+            let left = event.x - node.clientWidth - this.xOffset
+            node.style.left = left + 'px'
             // check if mouse covers tooltip
-            if (ttNode.offsetLeft + ttNode.clientWidth + parentRect.left > event.pageX) {
+            if (node.offsetLeft + node.clientWidth > event.x) {
                 //move tooltip left so it doesnt cover mouse
-                let left2 = event.pageX - (ttNode.clientWidth + this.xOffset + parentRect.left)
-                ttNode.style.left = left2 + 'px'
+                let left2 = event.x - node.clientWidth - this.xOffset
+                node.style.left = left2 + 'px'
             }
+            // node.style.top = node.offsetTop + config.yOffset + "px";
         }
 
         //too far down
-        if (ttNode.offsetTop + ttNode.clientHeight > parentRect.height) {
-            ttNode.style.top = ttNode.offsetTop - ttNode.clientHeight + 'px'
+        if (node.offsetTop + node.clientHeight > parentRect.top + parentHeight) {
+            node.style.top = node.offsetTop - node.clientHeight + 'px'
+        }
+
+        //too far up
+        if (node.offsetTop < parentRect.top) {
+            node.style.top = parentRect.top + this.yOffset + 'px'
         }
     }
 }