gridviz 3.1.0 → 3.1.1

package/src/core/Tooltip.js

@@ -1,185 +1,191 @@
-//@ts-check
-'use strict'
-
-import { select } from 'd3-selection'
-//import { transition } from "d3-transition";
-
-/**
- * A generic class to make a tooltip.
- * It is a div element, which can be moved under the mouse pointer and filled with some information in html.
- * @module core
- */
-export class Tooltip {
-    /**
-     * @param {object} opts
-     */
-    constructor(opts) {
-        opts = opts || {}
-
-        /** @type {string} */
-        this.maxWidth = opts.maxWidth || '20em'
-        /** @type {string} */
-        this.fontSize = opts.fontSize || '1.2em'
-        /** @type {string} */
-        this.background = opts.background || 'white'
-        /** @type {string} */
-        this.padding = opts.padding || '5px'
-        /** @type {string} */
-        this.border = opts.border || '0px'
-        /** @type {string} */
-        this['border-radius'] = opts['border-radius'] || '0px'
-        /** @type {string} */
-        this['box-shadow'] = opts['box-shadow'] || '5px 5px 5px grey'
-        /** @type {string} */
-        this['font-family'] = opts['font-family'] || 'Helvetica, Arial, sans-serif'
-
-        /** @type {number} */
-        this.transitionDuration = opts.transitionDuration || 100
-        /** @type {number} */
-        this.xOffset = opts.xOffset || 30
-        /** @type {number} */
-        this.yOffset = opts.yOffset || 20
-        /** @type {number} */ // e.g. to prevent mouse cursor covering cell being highlighted
-        this.yMouseOffset = opts.yMouseOffset || 0
-        /** @type {number} */
-        this.xMouseOffset = opts.xMouseOffset || 0
-        /** @type {HTMLElement} */
-        this.parentElement = opts.parentElement || document.body
-        /** @type {HTMLElement} */
-        this.tooltipElement = opts.tooltipElement || null
-
-        /**
-         * @public
-         * @type {import("d3-selection").Selection} */
-        this.tooltip = opts.tooltipElement
-            ? select(opts.tooltipElement) // Wrap the provided HTML node in a D3 selection
-            : select(this.parentElement).append('div').attr('id', 'gridviz-tooltip').attr('class', 'gridviz-tooltip') // create default element
-
-        //initialise
-        this.tooltip.style('max-width', this.maxWidth)
-        this.tooltip.style('overflow', 'hidden')
-        this.tooltip.style('font-size', this.fontSize)
-        this.tooltip.style('background', this.background)
-        this.tooltip.style('padding', this.padding)
-        this.tooltip.style('border', this.border)
-        this.tooltip.style('border-radius', this['border-radius'])
-        this.tooltip.style('box-shadow', this['box-shadow'])
-        this.tooltip.style('font-family', this['font-family'])
-        this.tooltip.style('position', 'absolute')
-        this.tooltip.style('pointer-events', 'none')
-        this.tooltip.style('opacity', '0')
-        this.tooltip.style('text-wrap', 'nowrap')
-        this.tooltip.style('z-index', 99999999) // important for leaflet-gridviz etc
-
-        // these placeholders are needed to prevent an infinite DOM resizeObserver loop:
-        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')
-    }
-
-    /** Show the tooltip */
-    show() {
-        // @ts-ignore
-        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 1)
-    }
-
-    /** Hide the tooltip */
-    hide() {
-        // @ts-ignore
-        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 0)
-    }
-
-    /**
-     * Set the content of the tooltip.
-     * @param {string} html
-     */
-    html(html) {
-        this.tooltip.html(html)
-    }
-
-    /**
-     * Set the position of the tooltip at the mouse event position.
-     * @param {MouseEvent} event
-     */
-    setPosition(event) {
-        // Get the bounding rect of the parent container (map2)
-        let parentRect = this.parentElement.getBoundingClientRect()
-
-        // Get the mouse position (relative to the parent container)
-        let x = event.clientX - parentRect.left + this.xOffset // Relative to parent
-        let y = event.clientY - parentRect.top - this.yOffset // Relative to parent
-
-        // Now, apply the position to the tooltip
-        this.tooltip.style('left', x + 'px').style('top', y + 'px')
-
-        // Ensure the tooltip stays inside the parent container
-        this.ensureTooltipInsideContainer(event, parentRect, this.tooltip.node())
-    }
-    /**
-     * @function ensureTooltipInsideContainer
-     * @description Prevents the tooltip from overflowing out of the App container (ensures that the tooltip is inside the gridviz container)
-     * @param {MouseEvent} event
-     * @param {DOMRect} parentRect
-     * @param {HTMLElement} tooltipNode
-     */
-    ensureTooltipInsideContainer(event, parentRect, tooltipNode) {
-        let node = tooltipNode
-        let parentWidth = parentRect.width
-        let parentHeight = parentRect.height
-
-        // Ensure tooltip doesn't go beyond the right edge
-        if (node.offsetLeft + node.clientWidth > parentWidth) {
-            let left = event.clientX - node.clientWidth - this.xOffset
-            node.style.left = left + 'px'
-        }
-
-        // Ensure tooltip doesn't go beyond the bottom edge
-        if (node.offsetTop + node.clientHeight > parentHeight) {
-            node.style.top = parentHeight - node.clientHeight + 'px'
-        }
-
-        // Ensure tooltip doesn't go above the top edge
-        if (node.offsetTop < 0) {
-            node.style.top = 0 + 'px'
-        }
-
-        // Ensure tooltip doesn't go beyond the left edge
-        if (node.offsetLeft < 0) {
-            node.style.left = 0 + 'px'
-        }
-    }
-
-    /*
-	my.mouseover = function (event, html) {
-		if (html) my.html(html);
-		my.setPosition(event);
-		my.show()
-		//this.ensureTooltipInsideContainer();
-	};
-	
-	my.mousemove = function (event) {
-		my.setPosition(event);
-		//this.ensureTooltipInsideContainer();
-	};
-	
-	my.mouseout = function () {
-		my.hide();
-	};*/
-
-    style(k, v) {
-        if (arguments.length == 1) return this.tooltip.style(k)
-        this.tooltip.style(k, v)
-        return this
-    }
-
-    attr(k, v) {
-        if (arguments.length == 1) return this.tooltip.attr(k)
-        this.tooltip.attr(k, v)
-        return this
-    }
-}
+//@ts-check
+'use strict'
+
+import { select } from 'd3-selection'
+//import { transition } from "d3-transition";
+
+/**
+ * A generic class to make a tooltip.
+ * It is a div element, which can be moved under the mouse pointer and filled with some information in html.
+ * @module core
+ */
+export class Tooltip {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** @type {string} */
+        this.maxWidth = opts.maxWidth || '20em'
+        /** @type {string} */
+        this.fontSize = opts.fontSize || '1rem'
+        /** @type {string} */
+        this.color = opts.color || '#171a22'
+        /** @type {string} */
+        this.lineHeight = opts.lineHeight || '1.5'
+        /** @type {string} */
+        this.background = opts.background || 'white'
+        /** @type {string} */
+        this.padding = opts.padding || '4px'
+        /** @type {string} */
+        this.border = opts.border || '1px solid #d5d5d5'
+        /** @type {string} */
+        this['border-radius'] = opts['border-radius'] || '6px'
+        /** @type {string} */
+        this['box-shadow'] = opts['box-shadow'] || '0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08)'
+        /** @type {string} */
+        this['font-family'] = opts['font-family'] || "'Helvetica Neue', Arial, Helvetica, sans-serif"
+
+        /** @type {number} */
+        this.transitionDuration = opts.transitionDuration || 100
+        /** @type {number} */
+        this.xOffset = opts.xOffset || 30
+        /** @type {number} */
+        this.yOffset = opts.yOffset || 20
+        /** @type {number} */ // e.g. to prevent mouse cursor covering cell being highlighted
+        this.yMouseOffset = opts.yMouseOffset || 0
+        /** @type {number} */
+        this.xMouseOffset = opts.xMouseOffset || 0
+        /** @type {HTMLElement} */
+        this.parentElement = opts.parentElement || document.body
+        /** @type {HTMLElement} */
+        this.tooltipElement = opts.tooltipElement || null
+
+        /**
+         * @public
+         * @type {import("d3-selection").Selection} */
+        this.tooltip = opts.tooltipElement
+            ? select(opts.tooltipElement) // Wrap the provided HTML node in a D3 selection
+            : select(this.parentElement).append('div').attr('id', 'gridviz-tooltip').attr('class', 'gridviz-tooltip') // create default element
+
+        //initialise
+        this.tooltip.style('max-width', this.maxWidth)
+        this.tooltip.style('overflow', 'hidden')
+        this.tooltip.style('font-size', this.fontSize)
+        this.tooltip.style('color', this.color)
+        this.tooltip.style('line-height', this.lineHeight)
+        this.tooltip.style('background', this.background)
+        this.tooltip.style('padding', this.padding)
+        this.tooltip.style('border', this.border)
+        this.tooltip.style('border-radius', this['border-radius'])
+        this.tooltip.style('box-shadow', this['box-shadow'])
+        this.tooltip.style('font-family', this['font-family'])
+        this.tooltip.style('position', 'absolute')
+        this.tooltip.style('pointer-events', 'none')
+        this.tooltip.style('opacity', '0')
+        this.tooltip.style('text-wrap', 'nowrap')
+        this.tooltip.style('z-index', 99999999) // important for leaflet-gridviz etc
+
+        // these placeholders are needed to prevent an infinite DOM resizeObserver loop:
+        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')
+    }
+
+    /** Show the tooltip */
+    show() {
+        // @ts-ignore
+        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 1)
+    }
+
+    /** Hide the tooltip */
+    hide() {
+        // @ts-ignore
+        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 0)
+    }
+
+    /**
+     * Set the content of the tooltip.
+     * @param {string} html
+     */
+    html(html) {
+        this.tooltip.html(html)
+    }
+
+    /**
+     * Set the position of the tooltip at the mouse event position.
+     * @param {MouseEvent} event
+     */
+    setPosition(event) {
+        // Get the bounding rect of the parent container (map2)
+        let parentRect = this.parentElement.getBoundingClientRect()
+
+        // Get the mouse position (relative to the parent container)
+        let x = event.clientX - parentRect.left + this.xOffset // Relative to parent
+        let y = event.clientY - parentRect.top - this.yOffset // Relative to parent
+
+        // Now, apply the position to the tooltip
+        this.tooltip.style('left', x + 'px').style('top', y + 'px')
+
+        // Ensure the tooltip stays inside the parent container
+        this.ensureTooltipInsideContainer(event, parentRect, this.tooltip.node())
+    }
+    /**
+     * @function ensureTooltipInsideContainer
+     * @description Prevents the tooltip from overflowing out of the App container (ensures that the tooltip is inside the gridviz container)
+     * @param {MouseEvent} event
+     * @param {DOMRect} parentRect
+     * @param {HTMLElement} tooltipNode
+     */
+    ensureTooltipInsideContainer(event, parentRect, tooltipNode) {
+        let node = tooltipNode
+        let parentWidth = parentRect.width
+        let parentHeight = parentRect.height
+
+        // Ensure tooltip doesn't go beyond the right edge
+        if (node.offsetLeft + node.clientWidth > parentWidth) {
+            let left = event.clientX - node.clientWidth - this.xOffset
+            node.style.left = left + 'px'
+        }
+
+        // Ensure tooltip doesn't go beyond the bottom edge
+        if (node.offsetTop + node.clientHeight > parentHeight) {
+            node.style.top = parentHeight - node.clientHeight + 'px'
+        }
+
+        // Ensure tooltip doesn't go above the top edge
+        if (node.offsetTop < 0) {
+            node.style.top = 0 + 'px'
+        }
+
+        // Ensure tooltip doesn't go beyond the left edge
+        if (node.offsetLeft < 0) {
+            node.style.left = 0 + 'px'
+        }
+    }
+
+    /*
+	my.mouseover = function (event, html) {
+		if (html) my.html(html);
+		my.setPosition(event);
+		my.show()
+		//this.ensureTooltipInsideContainer();
+	};
+	
+	my.mousemove = function (event) {
+		my.setPosition(event);
+		//this.ensureTooltipInsideContainer();
+	};
+	
+	my.mouseout = function () {
+		my.hide();
+	};*/
+
+    style(k, v) {
+        if (arguments.length == 1) return this.tooltip.style(k)
+        this.tooltip.style(k, v)
+        return this
+    }
+
+    attr(k, v) {
+        if (arguments.length == 1) return this.tooltip.attr(k)
+        this.tooltip.attr(k, v)
+        return this
+    }
+}

package/src/index.js

@@ -1,79 +1,82 @@
-//@ts-check
-'use strict'
-
-// the application
-export { Map } from './core/Map.js'
-export { GeoCanvas } from './core/GeoCanvas.js'
-export { Style } from './core/Style.js'
-export { Layer } from './core/Layer.js'
-export { Dataset } from './core/Dataset.js'
-export { MultiResolutionDataset } from './core/MultiResolutionDataset.js'
-
-// export dataset types
-export { TiledGrid } from './dataset/TiledGrid.js'
-export { CSVGrid } from './dataset/CSVGrid.js'
-export { JSGrid } from './dataset/JSGrid.js'
-
-// export styles
-export { ShapeColorSizeStyle } from './style/ShapeColorSizeStyle.js'
-export { StrokeStyle } from './style/StrokeStyle.js'
-export { JoyPlotStyle } from './style/JoyPlotStyle.js'
-export { CompositionStyle } from './style/CompositionStyle.js'
-export { SegmentStyle } from './style/SegmentStyle.js'
-export { TextStyle } from './style/TextStyle.js'
-export { PillarStyle } from './style/PillarStyle.js'
-export { SideStyle } from './style/SideStyle.js'
-export { ShadingRayStyle } from './style/ShadingRayStyle.js'
-export { ShadingStyle } from './style/ShadingStyle.js'
-export { SideCategoryStyle } from './style/SideCategoryStyle.js'
-export { DotDensityStyle } from './style/DotDensityStyle.js'
-export { SideTanakaStyle } from './style/SideTanakaStyle.js'
-export { LegoStyle } from './style/LegoStyle.js'
-export { SquareColorWebGLStyle } from './style/SquareColorWebGLStyle.js'
-export { SquareColorCategoryWebGLStyle } from './style/SquareColorCategoryWebGLStyle.js'
-export { MosaicStyle } from './style/MosaicStyle.js'
-export { NinjaStarStyle } from './style/NinjaStarStyle.js'
-export { TimeSeriesStyle } from './style/TimeSeriesStyle.js'
-export { IsoFenceStyle } from './style/IsoFenceStyle.js'
-export { ImageStyle } from './style/ImageStyle.js'
-export { Interpolator } from './style/Interpolator.js'
-
-// export additional layers
-export { GridLayer } from './layer/GridLayer.js'
-export { BackgroundLayer } from './layer/BackgroundLayer.js'
-export { BackgroundLayerWMS } from './layer/BackgroundLayerWMS.js'
-export { BackgroundLayerImage } from './layer/BackgroundLayerImage.js'
-export { LabelLayer } from './layer/LabelLayer.js'
-export { GeoJSONLayer } from './layer/GeoJSONLayer.js'
-
-// export legends
-export { ColorLegend } from './legend/ColorLegend.js'
-export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend.js'
-export { ColorCategoryLegend } from './legend/ColorCategoryLegend.js'
-export {
-    SizeLegend,
-    sizeLegend,
-    sizeLegendViewScale,
-    sizeDiscreteLegend,
-    sizeDiscreteViewScaleLegend,
-} from './legend/SizeLegend.js'
-export { OrientationLegend, orientationLegend } from './legend/OrientationLegend.js'
-export { TernaryLegend } from './legend/TernaryLegend.js'
-
-// export { goToStraight, zoomTo } from "./utils/zoomUtils"
-export * from './utils/stretching.js'
-export * from './utils/scale.js'
-export * from './utils/ternary.js'
-export { nice, cellsToMatrix } from './utils/utils.js'
-
-import { GeoCanvas } from './core/GeoCanvas.js'
-export const getParameterByName = GeoCanvas.getParameterByName
-
-// set default d3 locale
-import { formatDefaultLocale } from 'd3-format'
-formatDefaultLocale({
-    decimal: '.',
-    thousands: ' ',
-    grouping: [3],
-    currency: ['', '€'],
-})
+//@ts-check
+'use strict'
+
+// the application
+export { Map } from './core/Map.js'
+export { GeoCanvas } from './core/GeoCanvas.js'
+export { Style } from './core/Style.js'
+export { Layer } from './core/Layer.js'
+export { Dataset } from './core/Dataset.js'
+export { MultiResolutionDataset } from './core/MultiResolutionDataset.js'
+
+// export dataset types
+export { TiledGrid } from './dataset/TiledGrid.js'
+export { CSVGrid } from './dataset/CSVGrid.js'
+export { JSGrid } from './dataset/JSGrid.js'
+
+// export styles
+export { ShapeColorSizeStyle } from './style/ShapeColorSizeStyle.js'
+export { StrokeStyle } from './style/StrokeStyle.js'
+export { JoyPlotStyle } from './style/JoyPlotStyle.js'
+export { CompositionStyle } from './style/CompositionStyle.js'
+export { SegmentStyle } from './style/SegmentStyle.js'
+export { TextStyle } from './style/TextStyle.js'
+export { PillarStyle } from './style/PillarStyle.js'
+export { SideStyle } from './style/SideStyle.js'
+export { ShadingRayStyle } from './style/ShadingRayStyle.js'
+export { ShadingStyle } from './style/ShadingStyle.js'
+export { SideCategoryStyle } from './style/SideCategoryStyle.js'
+export { DotDensityStyle } from './style/DotDensityStyle.js'
+export { SideTanakaStyle } from './style/SideTanakaStyle.js'
+export { LegoStyle } from './style/LegoStyle.js'
+export { SquareColorWebGLStyle } from './style/SquareColorWebGLStyle.js'
+export { SquareColorCategoryWebGLStyle } from './style/SquareColorCategoryWebGLStyle.js'
+export { CircleColorSizeWebGLStyle } from './style/CircleColorSizeWebGLStyle.js'
+export { MosaicStyle } from './style/MosaicStyle.js'
+export { NinjaStarStyle } from './style/NinjaStarStyle.js'
+export { TimeSeriesStyle } from './style/TimeSeriesStyle.js'
+export { IsoFenceStyle } from './style/IsoFenceStyle.js'
+export { ImageStyle } from './style/ImageStyle.js'
+export { Interpolator } from './style/Interpolator.js'
+export { RandomWalkInterpolator } from './style/RandomWalkInterpolator.js'
+
+// export additional layers
+export { GridLayer } from './layer/GridLayer.js'
+export { BackgroundLayer } from './layer/BackgroundLayer.js'
+export { BackgroundLayerWMS } from './layer/BackgroundLayerWMS.js'
+export { BackgroundLayerImage } from './layer/BackgroundLayerImage.js'
+export { LabelLayer } from './layer/LabelLayer.js'
+export { GeoJSONLayer } from './layer/GeoJSONLayer.js'
+
+// export legends
+export { ColorLegend } from './legend/ColorLegend.js'
+export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend.js'
+export { ColorCategoryLegend } from './legend/ColorCategoryLegend.js'
+export {
+    SizeLegend,
+    sizeLegend,
+    sizeLegendViewScale,
+    sizeDiscreteLegend,
+    sizeDiscreteViewScaleLegend,
+} from './legend/SizeLegend.js'
+export { OrientationLegend, orientationLegend } from './legend/OrientationLegend.js'
+export { TernaryLegend } from './legend/TernaryLegend.js'
+export { VennLegend } from './legend/VennLegend.js'
+
+// export { goToStraight, zoomTo } from "./utils/zoomUtils"
+export * from './utils/stretching.js'
+export * from './utils/scale.js'
+export * from './utils/ternary.js'
+export { nice, cellsToMatrix } from './utils/utils.js'
+
+import { GeoCanvas } from './core/GeoCanvas.js'
+export const getParameterByName = GeoCanvas.getParameterByName
+
+// set default d3 locale
+import { formatDefaultLocale } from 'd3-format'
+formatDefaultLocale({
+    decimal: '.',
+    thousands: ' ',
+    grouping: [3],
+    currency: ['', '€'],
+})

package/src/layer/GridLayer.js

@@ -106,7 +106,7 @@ export class GridLayer extends Layer {
             for (const s of this.styles) {
                 //check if style is visible
                 if (!isVisibleAt(s, z)) continue
-                GridLayer.addLegends(legend, s.legends, s, geoCanvas)
+                GridLayer.addLegends(legend, s.legends, s, geoCanvas, this.styles)
 
                 //case for styles of styles, like kernel smoothing
                 //TODO do better
@@ -132,11 +132,12 @@ export class GridLayer extends Layer {
     }
 
     /** @private */
-    static addLegends(legendComp, lg, style, geoCanvas) {
-        if (Array.isArray(lg)) for (const lg_ of lg) this.addLegends(legendComp, lg_, style, geoCanvas)
+    static addLegends(legendComp, lg, style, geoCanvas, layerStyles) {
+        if (Array.isArray(lg)) for (const lg_ of lg) this.addLegends(legendComp, lg_, style, geoCanvas, layerStyles)
         else {
             // so that hovering a swatch can highlight the cells of the style on the map
             lg.style_ = style
+            lg.layerStyles = layerStyles
             lg.redraw = () => (geoCanvas.redraw ? geoCanvas.redraw() : undefined)
             // The legends go in the order they are drawn, after the one placed before them. A hovered legend is
             // still in the container (see Map.redrawNow) and is left where it is: moving it would lose its mouseleave,

package/src/layer/LabelLayer.js

@@ -110,14 +110,17 @@ export class LabelLayer extends Layer {
         geoCanvas.initCanvasTransform()
 
         //draw labels, one by one
+        //The font, the colors... are not set again when they do not change from a label to the next one: the browser parses
+        //them at each assignment, which is slow.
+        let font
         for (const lb of this.labels) {
+            //check label within the view, to be drawn. First: there are many labels (180000 for Europe), a few are in the view.
+            if (!geoCanvas.toDraw(lb)) continue
+
             //get label style
             const st = this.style(lb, z)
             if (!st) continue
-            ctx.font = st
-
-            //check label within the view, to be drawn
-            if (!geoCanvas.toDraw(lb)) continue
+            if (st !== font) ctx.font = font = st
 
             //position
             const xP = geoCanvas.geoToPixX(lb.x) + this.offsetPix[0]