gridviz 3.0.36 → 3.0.38

package/src/dataset/TiledGrid.js

@@ -55,22 +55,43 @@ export class TiledGrid extends Dataset {
      */
     loadInfo() {
         if (!this.info && this.infoLoadingStatus === 'notLoaded') {
+            // marked before the request, so the redraws that happen while it's under way
+            // don't request it again
+            this.infoLoadingStatus = 'loading'
             ;(async () => {
                 try {
                     const data = await json(this.url + 'info.json')
                     this.info = data
                     this.resolution = data.resolutionGeo
                     this.infoLoadingStatus = 'loaded'
-                    this.map.redraw()
+                    // all the resolutions of a multi-resolution dataset load their info at
+                    // once: only the one currently shown needs a redraw
+                    if (this.isShown()) this.map.redraw()
                 } catch (error) {
                     //mark as failed
                     this.infoLoadingStatus = 'failed'
                 }
             })()
-        } else if (this.infoLoadingStatus === 'loaded' || this.infoLoadingStatus === 'failed') this.map.redraw()
+        }
+        // (no redraw for a failed info.json: every redraw would ask again - an endless loop)
         return this
     }
 
+    /**
+     * True when a visible layer of the map shows this dataset at the current zoom.
+     * @returns {boolean}
+     */
+    isShown() {
+        if (!this.map || !this.map.layers) return false
+        const z = this.map.getZoom()
+        for (const lay of this.map.layers) {
+            if (lay.visible && !lay.visible(z)) continue
+            if (!lay.getDataset) continue
+            if (lay.getDataset(z) == this) return true
+        }
+        return false
+    }
+
     /**
      * Compute a tiling envelope from a geographical envelope.
      * This is the function to use to know which tiles to download for a geographical view.
@@ -197,19 +218,7 @@ export class TiledGrid extends Dataset {
         // Check if any visible layer depends on this dataset
         // check if redraw is really needed, that is if:
         // 1. the dataset belongs to a layer which is visible at the current zoom level
-        let needsRedraw = false
-        //go through the layers
-        const z = this.map.getZoom()
-        for (const lay of this.map.layers) {
-            if (lay.visible && !lay.visible(z)) continue
-            if (!lay.getDataset) continue
-            if (lay.getDataset(z) != this) continue
-            //found one layer. No need to seek more.
-            needsRedraw = true
-            break
-        }
-
-        if (!needsRedraw) return
+        if (!this.isShown()) return
 
         // Check if tile intersects the current view
         const env = this.map.updateExtentGeo()

package/src/layer/GridLayer.js

@@ -68,6 +68,9 @@ export class GridLayer extends Layer {
             if (this.blendOperation) ctx.globalCompositeOperation = this.blendOperation(z)
         }
 
+        // tell the legends where they are drawn, so that they can fit it (width:'fill')
+        if (legend) for (const s of this.styles) GridLayer.setLegendContainer(legend.node(), s.legends, s['styles'])
+
         //draw cells, style by style
         for (const s of this.styles) {
             //check if style is visible
@@ -102,14 +105,14 @@ export class GridLayer extends Layer {
             for (const s of this.styles) {
                 //check if style is visible
                 if (s.visible && !s.visible(z)) continue
-                GridLayer.addLegends(legend, s.legends)
+                GridLayer.addLegends(legend, s.legends, s, geoCanvas)
 
                 //case for styles of styles, like kernel smoothing
                 //TODO do better
                 if (s['styles']) {
                     for (const s2 of s['styles']) {
                         if (s2.visible && !s2.visible(z)) continue
-                        GridLayer.addLegends(legend, s2.legends)
+                        GridLayer.addLegends(legend, s2.legends, s2, geoCanvas)
                     }
                 }
             }
@@ -117,9 +120,25 @@ export class GridLayer extends Layer {
     }
 
     /** @private */
-    static addLegends(legendComp, lg) {
-        if (Array.isArray(lg)) for (const lg_ of lg) this.addLegends(legendComp, lg_)
-        else legendComp.node().append(lg.div.node())
+    static setLegendContainer(container, legends, subStyles) {
+        // legends can be nested in arrays, like in Style.updateLegendsRecursive
+        const set = (lg) => {
+            if (Array.isArray(lg)) lg.forEach(set)
+            else if (lg) lg.container = container
+        }
+        set(legends)
+        for (const s2 of subStyles || []) GridLayer.setLegendContainer(container, s2.legends, undefined)
+    }
+
+    /** @private */
+    static addLegends(legendComp, lg, style, geoCanvas) {
+        if (Array.isArray(lg)) for (const lg_ of lg) this.addLegends(legendComp, lg_, style, geoCanvas)
+        else {
+            // 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())
+        }
     }
 
     /**

package/src/legend/ColorCategoryLegend.js

@@ -28,6 +28,7 @@ export class ColorCategoryLegend extends Legend {
         this.dimension = opts.dimension || { r: 8 }
         this.strokeColor = opts.strokeColor || 'gray'
         this.strokeWidth = opts.strokeWidth || 1
+        this.setType('category')
     }
 
     /**
@@ -47,7 +48,12 @@ export class ColorCategoryLegend extends Legend {
             const cat = this.colorLabel[i]
 
             //make div for category
-            const d = this.div.append('div')
+            const d = this.div.append('div').classed('gridviz-legend-category', true)
+            // hovering a category shows only its cells on the map
+            this.bindHover(d, cat[0], {
+                enter: () => d.classed('gridviz-legend-category--active', true).select('svg').select('rect, circle').style('stroke', 'red'),
+                leave: () => d.classed('gridviz-legend-category--active', false).select('svg').select('rect, circle').style('stroke', this.strokeColor),
+            })
             //to enable vertical centering
             //.style("position", "relative")
 
@@ -65,6 +71,7 @@ export class ColorCategoryLegend extends Legend {
                     .attr('height', h + 2 * sw)
 
                     .append('rect')
+                    .classed('gridviz-legend-swatch', true)
                     .attr('x', sw)
                     .attr('y', sw)
                     .attr('width', w)
@@ -83,6 +90,7 @@ export class ColorCategoryLegend extends Legend {
                     .attr('height', h)
 
                     .append('circle')
+                    .classed('gridviz-legend-swatch', true)
                     .attr('cx', r + sw)
                     .attr('cy', r + sw)
                     .attr('r', r)
@@ -94,16 +102,20 @@ export class ColorCategoryLegend extends Legend {
             }
 
             //write label text
-            d.append('div')
-                //show on right of graphic
-                .style('display', 'inline')
+            this.setText(
+                d
+                    .append('div')
+                    //show on right of graphic
+                    .style('display', 'inline')
 
-                //center vertically
-                //.style("position", "absolute").style("top", "0").style("bottom", "0")
+                    //center vertically
+                    //.style("position", "absolute").style("top", "0").style("bottom", "0")
 
-                .style('padding-left', '5px')
-                .style('font-size', this.labelFontSize)
-                .text(cat[1])
+                    .classed('gridviz-legend-label', true)
+                    .style('padding-left', '5px')
+                    .style('font-size', this.labelFontSizeCSS()),
+                cat[1]
+            )
         }
     }
 }

package/src/legend/ColorDiscreteLegend.js

@@ -21,8 +21,10 @@ export class ColorDiscreteLegend extends Legend {
         /** @private @type {function(import('../core/Style').ViewScale):Array.<number>} */
         this.breaks = opts.breaks
 
-        this.width = opts.width || 300
+        // a number of pixels, or 'fill' for the width of the container
+        this.width = opts.width === 'fill' ? 300 : opts.width || 300
         this.height = opts.height || 15
+        this.setType('discrete')
 
         this.tickSize = opts.tickSize || 3
 
@@ -48,27 +50,37 @@ export class ColorDiscreteLegend extends Legend {
         //classes
         const nb = colors.length
         if (nb == 0) return
-        const w = this.width / nb
+        const width = this.availableWidth(this.width)
+        const w = width / nb
 
         //make svg element
         const svg = this.div
             .append('svg')
-            .attr('width', this.width)
+            .attr('width', width)
             .attr('height', this.height + this.tickSize + 2 + 10)
 
         //draw graphic elements
         for (let i = 0; i < nb; i++) {
-            svg.append('rect')
+            const rect = svg
+                .append('rect')
+                .classed('gridviz-legend-swatch', true)
                 .attr('x', i * w)
                 .attr('y', 0)
                 .attr('width', w)
                 .attr('height', this.height)
                 .style('fill', colors[i])
+            // hovering a class shows only its cells on the map
+            this.bindHover(rect, colors[i], {
+                // a presentation attribute, so that a stylesheet can restyle the active swatch
+                enter: () => rect.classed('gridviz-legend-swatch--active', true).attr('stroke', 'red'),
+                leave: () => rect.classed('gridviz-legend-swatch--active', false).attr('stroke', null),
+            })
         }
 
         //tick line
         for (let i = 1; i < nb; i++) {
             svg.append('line')
+                .classed('gridviz-legend-tick', true)
                 .attr('x1', w * i)
                 .attr('y1', 0)
                 .attr('x2', w * i)
@@ -84,10 +96,11 @@ export class ColorDiscreteLegend extends Legend {
 
             //label
             svg.append('text')
+                .classed('gridviz-legend-label', true)
                 .attr('id', 'ticklabel_' + i)
                 .attr('x', w * i)
                 .attr('y', this.height + this.tickSize + 2)
-                .style('font-size', this.labelFontSize)
+                .style('font-size', this.labelFontSizeCSS())
                 //.style("font-weight", "bold")
                 //.style("font-family", "Arial")
                 .style('text-anchor', 'middle')

package/src/legend/ColorLegend.js

@@ -35,8 +35,10 @@ export class ColorLegend extends Legend {
         this.fontSize = opts.fontSize || '0.8em'
         this.invert = opts.invert
 
-        this.width = opts.width || 300
+        // a number of pixels, or 'fill' for the width of the container
+        this.width = opts.width === 'fill' ? 300 : opts.width || 300
         this.height = opts.height || 15
+        this.setType('color')
     }
 
     /**
@@ -49,7 +51,8 @@ export class ColorLegend extends Legend {
         //title
         this.makeTitle()
 
-        const svgW = this.width + 2 * this.margin
+        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)
         //  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
@@ -57,13 +60,14 @@ export class ColorLegend extends Legend {
         const g = svg.append('g').attr('transform', 'translate(' + this.margin + ' ' + 0 + ')')
 
         //draw color bar
-        const w = this.width,
+        const w = width,
             h = this.height
         const step = 5
         for (let i = 0; i < w; i += step) {
             let t = i / (w - 1)
             if (this.invert) t = 1 - t
             g.append('rect')
+                .classed('gridviz-legend-swatch', true)
                 .attr('x', i)
                 .attr('y', 0)
                 .attr('width', step)
@@ -76,6 +80,7 @@ export class ColorLegend extends Legend {
 
             //tick line
             g.append('line')
+                .classed('gridviz-legend-tick', true)
                 .attr('x1', w * t)
                 .attr('y1', 0)
                 .attr('x2', w * t)
@@ -84,6 +89,7 @@ export class ColorLegend extends Legend {
 
             //prepare tick label
             g.append('text')
+                .classed('gridviz-legend-label', true)
                 .attr('id', 'ticklabel_' + i)
                 .attr('x', w * t)
                 .attr('y', h + this.tickSize + 2)

package/src/legend/OrientationLegend.js

@@ -13,6 +13,7 @@ export class OrientationLegend extends Legend {
     /** @param {Object} opts */
     constructor(opts) {
         super(opts)
+        this.setType('orientation')
         opts = opts || {}
 
         //orientation
@@ -38,7 +39,7 @@ export class OrientationLegend extends Legend {
         //title
         this.makeTitle()
 
-        const d = this.div.append('div')
+        const d = this.div.append('div').classed('gridviz-legend-category', true)
 
         //compute segment color, width and length
         const color = this.color(opts.resolution, opts.z, opts.viewScale)
@@ -63,9 +64,10 @@ export class OrientationLegend extends Legend {
 
         //label
         d.append('div')
+            .classed('gridviz-legend-label', true)
             .style('display', 'inline')
             .style('padding-left', '5px')
-            .style('font-size', this.labelFontSize)
+            .style('font-size', this.labelFontSizeCSS())
             .text(this.label + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
     }
 }

package/src/legend/SizeLegend.js

@@ -15,6 +15,7 @@ export class SizeLegend extends Legend {
     /** @param {Object} opts */
     constructor(opts) {
         super(opts)
+        this.setType('size')
         opts = opts || {}
 
         /** A function returning the text label, from the view scale and list of cells, resolution and zoom
@@ -62,7 +63,7 @@ export class SizeLegend extends Legend {
         //format label, if specified and possible
         if (this.labelFormat && !isNaN(+label)) label = this.labelFormat(label)
 
-        const d = this.div.append('div')
+        const d = this.div.append('div').classed('gridviz-legend-category', true)
         //to enable vertical centering
         //.style("position", "relative")
 
@@ -127,9 +128,10 @@ export class SizeLegend extends Legend {
 
         //label
         d.append('div')
+            .classed('gridviz-legend-label', true)
             .style('display', 'inline')
             .style('padding-left', '5px')
-            .style('font-size', this.labelFontSize)
+            .style('font-size', this.labelFontSizeCSS())
             .text(label + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
     }
 }

package/src/legend/TernaryLegend.js

@@ -28,6 +28,7 @@ export class TernaryLegend extends Legend {
         this.rightText = opts.rightText || 'Category 2'
 
         this.centerCoefficient = opts.centerCoefficient || this.classifier.centerCoefficient
+        this.setType('ternary')
     }
 
     /**
@@ -51,6 +52,7 @@ export class TernaryLegend extends Legend {
 
         const padding = 2
         const fontSize = 12
+        const legend = this
 
         //make svg element
         const svg = this.div
@@ -62,6 +64,7 @@ export class TernaryLegend extends Legend {
         svg.append('text')
             .attr('x', w / 2)
             .attr('y', padding + fontSize)
+            .classed('gridviz-legend-label', true)
             .text(this.topText)
             .attr('font-size', fontSize)
             .attr('text-anchor', 'middle')
@@ -69,6 +72,7 @@ export class TernaryLegend extends Legend {
         svg.append('text')
             .attr('x', 0)
             .attr('y', 3 * padding + 2 * fontSize + h)
+            .classed('gridviz-legend-label', true)
             .text(this.leftText)
             .attr('font-size', fontSize)
             .attr('text-anchor', 'start')
@@ -76,6 +80,7 @@ export class TernaryLegend extends Legend {
         svg.append('text')
             .attr('x', w)
             .attr('y', 3 * padding + 2 * fontSize + h)
+            .classed('gridviz-legend-label', true)
             .text(this.rightText)
             .attr('font-size', fontSize)
             .attr('text-anchor', 'end')
@@ -96,12 +101,16 @@ export class TernaryLegend extends Legend {
         const setAttributes = (elt, color, text) => {
             //elt.raise();
             elt.attr('fill', color)
+                .classed('gridviz-legend-swatch', true)
                 //.attr("stroke", colorOver)
                 //.attr("stroke-width", 0)
                 //.attr("stroke-linejoin", "round")
+                .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)
+                    // show only the cells of this class on the map
+                    legend.highlight([color])
                     if (!tt || !text) return
                     tt.html(text)
                     tt.setPosition(e)
@@ -110,6 +119,7 @@ export class TernaryLegend extends Legend {
                 .on('mouseout', function () {
                     /*select(this).attr("stroke-width", 0);*/
                     select(this).attr('fill', color)
+                    legend.highlight(null)
                     if (tt) tt.hide()
                 })
             if (tt && text)

package/src/style/DotDensityStyle.js

@@ -3,7 +3,7 @@
 
 import { Style } from '../core/Style.js'
 import { randomNormal } from 'd3-random'
-import { checkWebGLSupport, makeWebGLCanvas } from '../utils/webGLUtils.js'
+import { checkWebGLSupport, getSharedWebGLCanvas } from '../utils/webGLUtils.js'
 import { WebGLSquareColoring } from '../utils/WebGLSquareColoring.js'
 import { color } from 'd3-color'
 
@@ -62,8 +62,8 @@ export class DotDensityStyle extends Style {
         const ctx = geoCanvas.offscreenCtx
 
         if (checkWebGLSupport()) {
-            //create canvas and webgl renderer
-            const cvWGL = makeWebGLCanvas(geoCanvas.w + '', geoCanvas.h + '')
+            //the shared webgl canvas (one context for all styles, instead of a new one per draw)
+            const cvWGL = getSharedWebGLCanvas(geoCanvas.w, geoCanvas.h)
             if (!cvWGL) {
                 console.error('No webGL')
                 return

package/src/style/ShapeColorSizeStyle.js

@@ -45,6 +45,9 @@ export class ShapeColorSizeStyle extends Style {
 
         const r2 = resolution * 0.5
 
+        // the legend swatch hovered, if any: only the cells of its colour are drawn
+        const highlight = this.highlightColors
+
         // Precompute if color, size, and shape are functions, for efficiency
         const isColorFunction = typeof this.color === 'function'
         const isSizeFunction = typeof this.size === 'function'
@@ -64,6 +67,7 @@ export class ShapeColorSizeStyle extends Style {
             //@ts-ignore
             const col = colorFunction ? colorFunction(c, resolution, z, viewScale) : defaultColor
             if (!col || col === 'none') continue
+            if (highlight && !this.isHighlighted(col)) continue
 
             // Determine size
             //@ts-ignore