gridviz 3.0.38 → 3.0.39

package/package.json

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

package/src/button/Button.js

@@ -30,7 +30,8 @@ export class Button {
         }
 
         if (opts.title) this.div.attr('title', opts.title)
-        if (opts.class) this.div.attr('class', opts.class)
+        this.div.classed('gridviz-button', true)
+        if (opts.class) for (const c of String(opts.class).split(/\s+/)) if (c) this.div.classed(c, true)
 
         // add events
         if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)

package/src/button/FullscreenButton.js

@@ -24,10 +24,12 @@ export class FullscreenButton extends Button {
 
     constructor(opts) {
         super(opts)
+        this.div.classed('gridviz-fullscreen-button', true)
 
         // append fullscreen icon to button container
         this.div.node().innerHTML = `
         <svg
+            class="gridviz-fullscreen-icon"
             style="height: 1.2rem; width: 1.2rem; fill:black; margin:0;"
             focusable="false"
             aria-hidden="true"

package/src/button/ZoomButtons.js

@@ -15,11 +15,12 @@ export class ZoomButtons extends Button {
 
         this.onZoom = opts.onZoom // custom user event handler
         this.delta = opts.delta || 0.2
+        this.div.classed('gridviz-zoom-buttons', true)
 
         // Create zoom in button
         this.zoomInBtn = document.createElement('a')
         this.zoomInBtn.id = 'zoom-in'
-        this.zoomInBtn.className = 'gridviz-zoom-button'
+        this.zoomInBtn.className = 'gridviz-zoom-button gridviz-zoom-button--in'
         this.zoomInBtn.title = 'Zoom in'
         this.zoomInBtn.textContent = '+'
         this.zoomInBtn.addEventListener('click', (e) => {
@@ -35,7 +36,7 @@ export class ZoomButtons extends Button {
         // Create zoom out button
         this.zoomOutBtn = document.createElement('a')
         this.zoomOutBtn.id = 'zoom-out'
-        this.zoomOutBtn.className = 'gridviz-zoom-button'
+        this.zoomOutBtn.className = 'gridviz-zoom-button gridviz-zoom-button--out'
         this.zoomOutBtn.title = 'Zoom out'
         this.zoomOutBtn.textContent = '-'
         this.zoomOutBtn.addEventListener('click', (e) => {

package/src/core/GeoCanvas.js

@@ -114,6 +114,7 @@ export class GeoCanvas {
                     this.canvasSave.dx = 0
                     this.canvasSave.dy = 0
                     this.canvasSave.f = 1
+                    this.canvasSave.view = { x: this.view.x, y: this.view.y, z: this.view.z }
                     if (this.onZoomStartFun) this.onZoomStartFun(e)
                 })
                 .on('end', (e) => {
@@ -179,7 +180,7 @@ export class GeoCanvas {
         this.zoomExtent = opts.zoomExtent || [0, Infinity]
 
         /** Canvas state, to be used to avoid unnecessary redraws on zoom/pan
-         *  @type {{c:HTMLCanvasElement|null,dx:number,dy:number,f:number}} */
+         *  @type {{c:HTMLCanvasElement|null,dx:number,dy:number,f:number,view?:{x:number,y:number,z:number}}} */
         this.canvasSave = { c: null, dx: 0, dy: 0, f: 1 }
     }
 
@@ -200,21 +201,7 @@ export class GeoCanvas {
         this.updateExtentGeo()
 
         if (this.canvasSave.c) {
-            const scale = 1 / this.view.z
-
-            // Update saved canvas offset
-            this.canvasSave.dx -= dxGeo * scale
-            this.canvasSave.dy += dyGeo * scale
-
-            // clear canvas
-            this.clear(this.backgroundColor)
-
-            // this doesnt work on mobile https://github.com/eurostat/gridviz/issues/98
-            //this.ctx.drawImage(this.canvasSave.c, this.canvasSave.dx, this.canvasSave.dy)
-            this.offscreenCtx.drawImage(this.canvasSave.c, this.canvasSave.dx, this.canvasSave.dy)
-
-            // Render the offscreen canvas to the visible context
-            this.ctx.drawImage(this.offscreenCtx.canvas, 0, 0)
+            this._drawSnapshot()
         } else {
             console.log('no canvas save')
         }
@@ -258,29 +245,38 @@ export class GeoCanvas {
         this._drawZoomFrame(f, xGeo, yGeo)
     }
 
-    _drawZoomFrame(f, xGeo, yGeo) {
+    _drawZoomFrame() {
         // zoom in on the current canvas state
-        if (this.canvasSave.c) {
-            this.clear(this.backgroundColor)
-            this.canvasSave.f /= f
-            this.canvasSave.dx = this.geoToPixX(xGeo) * (1 - this.canvasSave.f)
-            this.canvasSave.dy = this.geoToPixY(yGeo) * (1 - this.canvasSave.f)
-            this.clear(this.backgroundColor)
-            this.offscreenCtx.drawImage(
-                this.canvasSave.c,
-                this.canvasSave.dx,
-                this.canvasSave.dy,
-                this.canvasSave.f * this.canvasSave.c.width,
-                this.canvasSave.f * this.canvasSave.c.height
-            )
-            this.ctx.drawImage(
-                this.offscreenCanvas, // Use offscreen canvas as the source
-                0,
-                0, // Position the offscreen canvas at the top-left corner of the main canvas
-                this.canvas.width, // The width of the visible canvas
-                this.canvas.height // The height of the visible canvas
-            )
-        }
+        if (this.canvasSave.c) this._drawSnapshot()
+    }
+
+    /**
+     * Draw the canvas saved when the pan/zoom started where it belongs in the current view.
+     * It is placed from the two views (the one it was taken at and the current one) rather than
+     * accumulated from each step: the zoom anchor follows the mouse, and an accumulation that
+     * assumes it stays put leaves the picture away from where the final redraw puts it.
+     * @private
+     */
+    _drawSnapshot() {
+        const sv = this.canvasSave.view
+        const f = sv ? sv.z / this.view.z : 1
+        // where the saved canvas' top left corner is in the current view
+        const dx = sv ? (sv.x - (this.w * 0.5) * sv.z - this.view.x) / this.view.z + this.w * 0.5 : 0
+        const dy = sv ? this.h * 0.5 - (sv.y + (this.h * 0.5) * sv.z - this.view.y) / this.view.z : 0
+        this.canvasSave.f = f
+        this.canvasSave.dx = dx
+        this.canvasSave.dy = dy
+
+        this.clear(this.backgroundColor)
+        // this doesnt work on mobile https://github.com/eurostat/gridviz/issues/98 : drawn on the offscreen canvas first
+        this.offscreenCtx.drawImage(
+            this.canvasSave.c,
+            dx,
+            dy,
+            f * this.canvasSave.c.width,
+            f * this.canvasSave.c.height
+        )
+        this.ctx.drawImage(this.offscreenCanvas, 0, 0, this.canvas.width, this.canvas.height)
     }
 
     /**

package/src/core/Legend.js

@@ -127,6 +127,9 @@ export class Legend {
     highlight(colors) {
         if (!this.interactive || !this.style_) return
         const before = this.style_.highlightColors
+        // flag the legend while hovered, so that the map's redraw leaves its element in place:
+        // a hovered element that is detached and appended again never gets its mouseleave
+        if (this.div) this.div.attr('data-gridviz-hovered', colors && colors.length ? '' : null)
         this.style_.setHighlight(colors)
         // nothing to redraw when the highlight didn't change (mouse moving between a swatch's parts)
         if (before === null && this.style_.highlightColors === null) return

package/src/core/Map.js

@@ -46,6 +46,7 @@ export class Map {
             console.error('Cannot find gridviz container element.')
             return
         }
+        this.container.classList.add('gridviz-map')
 
         //https://css-tricks.com/absolute-positioning-inside-relative-positioning/
         this.container.style.position = 'relative' // container element must have relative positioning
@@ -174,6 +175,7 @@ export class Map {
      */
     initialiseCanvas() {
         const canvas = document.createElement('canvas')
+        canvas.classList.add('gridviz-canvas')
         canvas.setAttribute('width', '' + this.w)
         canvas.setAttribute('height', '' + this.h)
         this.container.appendChild(canvas)
@@ -184,6 +186,7 @@ export class Map {
         this.legend = select(this.container)
             .append('div') // Create a new container
             .attr('id', 'gridviz-legend')
+            .classed('gridviz-legends', true)
             .style('position', 'absolute')
             .style('width', 'auto')
             .style('height', 'auto')
@@ -241,7 +244,8 @@ export class Map {
 
         //remove legend elements: the legends themselves only, not what is inside them
         //(a legend keeps its content while one of its swatches is hovered, see Style.updateLegends)
-        if (this.legend) this.legend.selectAll(':scope > *').remove()
+        //except the one being hovered, which would lose its mouseleave (see Legend.highlight)
+        if (this.legend) this.legend.selectAll(':scope > *:not([data-gridviz-hovered])').remove()
 
         //clear
         this.geoCanvas.initCanvasTransform()

package/src/core/Tooltip.js

@@ -75,6 +75,9 @@ export class Tooltip {
         this.tooltip.style('left', '0')
         this.tooltip.style('top', '0')
 
+        // a tooltip element given by the user gets the class too
+        this.tooltip.classed('gridviz-tooltip', true)
+
         // aria-labels (thanks to wahlatlas)
         this.tooltip.attr('role', 'tooltip').attr('aria-live', 'polite')
     }

package/src/layer/GridLayer.js

@@ -137,7 +137,8 @@ export class GridLayer extends Layer {
             // so that hovering a swatch can highlight the cells of the style on the map
             lg.style_ = style
             lg.redraw = () => (geoCanvas.redraw ? geoCanvas.redraw() : undefined)
-            legendComp.node().append(lg.div.node())
+            // a hovered legend is still in place (see Map.redrawNow): moving it would lose its mouseleave
+            if (lg.div.node().parentNode !== legendComp.node()) legendComp.node().append(lg.div.node())
         }
     }
 

package/src/legend/ColorCategoryLegend.js

@@ -64,9 +64,11 @@ export class ColorCategoryLegend extends Legend {
                 const h = this.dimension.h || 15
                 const w = this.dimension.w || 20
                 d.append('div')
+                    .classed('gridviz-legend-symbol-wrapper', true)
                     .style('display', 'inline')
 
                     .append('svg')
+                    .classed('gridviz-legend-graphic', true)
                     .attr('width', w + 2 * sw)
                     .attr('height', h + 2 * sw)
 
@@ -83,9 +85,11 @@ export class ColorCategoryLegend extends Legend {
                 const r = this.dimension.r || 8
                 const h = 2 * r + 2 * sw
                 d.append('div')
+                    .classed('gridviz-legend-symbol-wrapper', true)
                     .style('display', 'inline')
 
                     .append('svg')
+                    .classed('gridviz-legend-graphic', true)
                     .attr('width', h)
                     .attr('height', h)
 

package/src/legend/ColorDiscreteLegend.js

@@ -56,6 +56,7 @@ export class ColorDiscreteLegend extends Legend {
         //make svg element
         const svg = this.div
             .append('svg')
+            .classed('gridviz-legend-graphic', true)
             .attr('width', width)
             .attr('height', this.height + this.tickSize + 2 + 10)
 

package/src/legend/ColorLegend.js

@@ -54,10 +54,10 @@ export class ColorLegend extends Legend {
         const width = this.availableWidth(this.width)
         const svgW = width + 2 * this.margin
         const svgH = this.height + this.margin + this.tickSize + 10
-        const svg = this.div.append('svg').attr('width', svgW).attr('height', svgH)
+        const svg = this.div.append('svg').classed('gridviz-legend-graphic', true).attr('width', svgW).attr('height', svgH)
         //  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
 
-        const g = svg.append('g').attr('transform', 'translate(' + this.margin + ' ' + 0 + ')')
+        const g = svg.append('g').classed('gridviz-legend-bar', true).attr('transform', 'translate(' + this.margin + ' ' + 0 + ')')
 
         //draw color bar
         const w = width,

package/src/legend/OrientationLegend.js

@@ -48,13 +48,14 @@ export class OrientationLegend extends Legend {
 
         //draw SVG segment
         const svgS = Math.max(lengthPix, widthPix)
-        const svg = d.append('svg').attr('width', svgS).attr('height', svgS).style('', 'inline-block')
+        const svg = d.append('svg').classed('gridviz-legend-graphic', true).attr('width', svgS).attr('height', svgS).style('', 'inline-block')
 
         const cos = Math.cos((-this.orientation * Math.PI) / 180)
         const sin = Math.sin((-this.orientation * Math.PI) / 180)
         const dc = svgS * 0.5,
             l2 = lengthPix * 0.5
         svg.append('line')
+            .classed('gridviz-legend-symbol', true)
             .attr('x1', dc - cos * l2)
             .attr('y1', dc - sin * l2)
             .attr('x2', dc + cos * l2)

package/src/legend/SizeLegend.js

@@ -71,6 +71,7 @@ export class SizeLegend extends Legend {
         const svg = () =>
             d
                 .append('svg')
+                .classed('gridviz-legend-graphic', true)
                 .attr('width', sizePix + this.strokeWidth + 2)
                 .attr('height', sizePix + this.strokeWidth + 2)
                 .style('', 'inline-block')
@@ -78,6 +79,7 @@ export class SizeLegend extends Legend {
         if (this.shape === 'square') {
             svg()
                 .append('rect')
+                .classed('gridviz-legend-symbol', true)
                 .attr('x', 0)
                 .attr('y', 0)
                 .attr('width', sizePix)
@@ -90,6 +92,7 @@ export class SizeLegend extends Legend {
             const r = (sizePix + this.strokeWidth) * 0.5
             svg()
                 .append('circle')
+                .classed('gridviz-legend-symbol', true)
                 .attr('cx', r + 1)
                 .attr('cy', r + 1)
                 .attr('r', r)
@@ -109,6 +112,7 @@ export class SizeLegend extends Legend {
 
             const svg = d
                 .append('svg')
+                .classed('gridviz-legend-graphic', true)
                 .attr('width', lengthPix)
                 .attr('height', sizePix)
                 .style('', 'inline-block')
@@ -116,6 +120,7 @@ export class SizeLegend extends Legend {
             //TODO orientation
             //<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
             svg.append('line')
+                .classed('gridviz-legend-symbol', true)
                 .attr('x1', 0)
                 .attr('y1', sizePix / 2)
                 .attr('x2', lengthPix)

package/src/legend/TernaryLegend.js

@@ -57,6 +57,7 @@ export class TernaryLegend extends Legend {
         //make svg element
         const svg = this.div
             .append('svg')
+            .classed('gridviz-legend-graphic', true)
             .attr('width', w + selectionStrokeWidth)
             .attr('height', h + 4 * padding + 2 * fontSize)
 
@@ -88,6 +89,7 @@ export class TernaryLegend extends Legend {
         //triangle group
         const g = svg
             .append('g')
+            .classed('gridviz-legend-triangle', true)
             .attr(
                 'transform',
                 'translate(' +
@@ -108,7 +110,7 @@ export class TernaryLegend extends Legend {
                 .style('cursor', this.interactive ? 'pointer' : null)
                 .on('mouseover', function (e) {
                     /*this.parentNode.appendChild(this); select(this).attr("stroke-width", selectionStrokeWidth);*/
-                    select(this).attr('fill', selectionColor)
+                    select(this).classed('gridviz-legend-swatch--active', true).attr('fill', selectionColor)
                     // show only the cells of this class on the map
                     legend.highlight([color])
                     if (!tt || !text) return
@@ -118,7 +120,7 @@ export class TernaryLegend extends Legend {
                 })
                 .on('mouseout', function () {
                     /*select(this).attr("stroke-width", 0);*/
-                    select(this).attr('fill', color)
+                    select(this).classed('gridviz-legend-swatch--active', false).attr('fill', color)
                     legend.highlight(null)
                     if (tt) tt.hide()
                 })

package/src/utils/scale.js

@@ -16,10 +16,33 @@ import { scaleQuantile } from 'd3-scale'
  * @module utils
  */
 
+/**
+ * The inverse of a stretching function, within [0,1]: its own invert function if it has one,
+ * else found by bisection (a stretching is increasing).
+ * @param {function(number):number} stretching
+ * @param {number} t
+ * @returns {number}
+ */
+const invertStretching = (stretching, t) => {
+    // @ts-ignore
+    if (stretching.invert) return stretching.invert(t)
+    let lo = 0,
+        hi = 1
+    for (let i = 0; i < 50; i++) {
+        const mid = (lo + hi) / 2
+        if (stretching(mid) < t) lo = mid
+        else hi = mid
+    }
+    return (lo + hi) / 2
+}
+
 /**
  * Generic function for view scale - continuous or discrete
  *
  * @param {{ valueFunction:function(import("../core/Dataset").Cell):number, minValue?:number, minSizePix?:number, maxSizeFactor?:number, range?:[number, number], domain?:[number, number], stretching?:function(number):number, classNumber?:number}} opts
+ * The scale has an invert(t) function, like the one of viewScaleColor: it returns the value of the domain
+ * for a t within [0,1] (what a legend needs to write its labels).
+ *
  * @returns {function(Array.<import("../core/Dataset").Cell>):Scale}
  */
 export const viewScale = (opts) => {
@@ -38,7 +61,7 @@ export const viewScale = (opts) => {
             domainMin = domain[0]
         const rangeSize = range[1] - range[0],
             rangeMin = range[0]
-        return (t) => {
+        const scale = (t) => {
             //scale to [0,1]
             t = (t - domainMin) / domainSize
             //stretch
@@ -48,6 +71,12 @@ export const viewScale = (opts) => {
             //scale to range
             return rangeMin + t * rangeSize
         }
+        //the domain value for a position t within [0,1], as the invert of viewScaleColor
+        scale.invert = (t) => {
+            if (stretching) t = invertStretching(stretching, t)
+            return domainMin + t * domainSize
+        }
+        return scale
     }
 }