gridviz 3.0.37 → 3.0.38

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/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

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -86,6 +86,8 @@ export class SquareColorCategoryWebGLStyle extends Style {
         this.y = undefined
         this.z = undefined
         this.cellsNb = undefined
+        /** The highlight (see Style.setHighlight) the vertices were bound with @private */
+        this.highlightKey = ''
     }
 
     /**
@@ -149,6 +151,8 @@ export class SquareColorCategoryWebGLStyle extends Style {
             nb = cells.length
         const verticesBuffer = new Float32Array(2 * nb)
         const iBuffer = new Float32Array(nb)
+        // categories shown while a legend swatch is hovered: those drawn in the colour of the swatch
+        const shown = this.highlightColors ? this.colors.map((c) => this.isHighlighted(c)) : null
         let n = 0
         for (let i = 0; i < nb; i++) {
             c = cells[i]
@@ -162,6 +166,7 @@ export class SquareColorCategoryWebGLStyle extends Style {
                 console.log('Unexpected category index: ' + cat + ' ' + i_)
                 continue
             }
+            if (shown && !shown[+i_]) continue
             verticesBuffer[2 * n] = c.x + r2
             verticesBuffer[2 * n + 1] = c.y + r2
             iBuffer[n] = +i_
@@ -228,7 +233,10 @@ export class SquareColorCategoryWebGLStyle extends Style {
         // x/y/z and cell count alone. The upload is also needed when the shared buffers
         // hold another style's data (bufferOwner), or the context is new to this style
         // (e.g. replaced after being lost).
-        const contentChanged = this.mapContentChanged(geoCanvas.view, cells.length)
+        const highlightKey = this.highlightColors ? this.highlightColors.join('|') : ''
+        const highlightChanged = highlightKey !== this.highlightKey
+        this.highlightKey = highlightKey
+        const contentChanged = this.mapContentChanged(geoCanvas.view, cells.length) || highlightChanged
         if (contentChanged || contextChanged || bufferOwner(gl, POSITION_BUFFER) !== this)
             this.pointsNb = this.bindVertices(cells, resolution, z, viewScale)
         this.bindAttributes()