gridviz 3.1.0 → 3.1.1

package/src/legend/OrientationLegend.js

@@ -1,92 +1,94 @@
-//@ts-check
-'use strict'
-
-import { Legend } from '../core/Legend.js'
-
-/**
- * A legend element for segment orientation.
- *
- * @module legend
- * @author Joseph Davies, Julien Gaffuri
- */
-export class OrientationLegend extends Legend {
-    /** @param {Object} opts */
-    constructor(opts) {
-        super(opts)
-        this.setType('orientation')
-        opts = opts || {}
-
-        //orientation
-        this.orientation = opts.orientation || 0
-        //color
-        this.color = opts.color || ((resolution, z, viewScale) => 'gray')
-        //width
-        this.width = opts.width || ((resolution, z, viewScale) => 3 * z)
-        //length
-        this.length = opts.length || ((resolution, z, viewScale) => resolution)
-
-        //label
-        this.label = opts.label || '-'
-    }
-
-    /**
-     * @param {{ style: import("../style/SegmentStyle.js").SegmentStyle, resolution: number, z: number, viewScale:object }} opts
-     */
-    update(opts) {
-        //clear
-        this.div.selectAll('*').remove()
-
-        //title
-        this.makeTitle()
-
-        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)
-        const widthPix = this.width(opts.resolution, opts.z, opts.viewScale) / opts.z
-        const lengthPix = this.length(opts.resolution, opts.z, opts.viewScale) / opts.z
-
-        //draw SVG segment
-        const svgS = Math.max(lengthPix, widthPix)
-        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)
-            .attr('y2', dc + sin * l2)
-            .style('stroke', color)
-            .style('stroke-width', widthPix)
-
-        //label
-        d.append('div')
-            .classed('gridviz-legend-label', true)
-            .style('display', 'inline')
-            .style('padding-left', '5px')
-            .style('font-size', this.labelFontSizeCSS())
-            .text(this.label + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
-    }
-}
-
-/**
- *
- * @param {Array.<number>} orientations
- * @param {Array.<string>} labels
- * @param {object} opts
- * @returns  { Array.<OrientationLegend> }
- */
-export function orientationLegend(orientations, labels, opts = {}) {
-    const legends = []
-    for (let i = 0; i < orientations.length; i++) {
-        opts.title = i == 0 ? opts.title : undefined
-        opts.orientation = orientations[i]
-        opts.label = labels[i]
-        legends.push(new OrientationLegend(opts))
-    }
-    return legends
-}
+//@ts-check
+'use strict'
+
+import { Legend } from '../core/Legend.js'
+
+/**
+ * A legend element for segment orientation.
+ *
+ * @module legend
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class OrientationLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        this.setType('orientation')
+        opts = opts || {}
+
+        //orientation
+        this.orientation = opts.orientation || 0
+        //color
+        this.color = opts.color || ((resolution, z, viewScale) => 'gray')
+        //width
+        this.width = opts.width || ((resolution, z, viewScale) => 3 * z)
+        //length
+        this.length = opts.length || ((resolution, z, viewScale) => resolution)
+
+        //label
+        this.label = opts.label || '-'
+    }
+
+    /**
+     * @param {{ style: import("../style/SegmentStyle.js").SegmentStyle, resolution: number, z: number, viewScale:object }} opts
+     */
+    update(opts) {
+        //clear
+        this.div.selectAll('*').remove()
+
+        //title
+        this.makeTitle()
+
+        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)
+        const widthPix = this.width(opts.resolution, opts.z, opts.viewScale) / opts.z
+        const lengthPix = this.length(opts.resolution, opts.z, opts.viewScale) / opts.z
+
+        //draw SVG segment
+        const svgS = Math.max(lengthPix, widthPix)
+        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)
+            .attr('y2', dc + sin * l2)
+            .style('stroke', color)
+            .style('stroke-width', widthPix)
+
+        //label
+        d.append('div')
+            .classed('gridviz-legend-label', true)
+            .style('display', 'inline')
+            .style('padding-left', '5px')
+            .style('font-size', this.labelFontSizeCSS())
+            .style('fill', this.labelColorCSS())
+            .style('color', this.labelColorCSS())
+            .text(this.label + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
+    }
+}
+
+/**
+ *
+ * @param {Array.<number>} orientations
+ * @param {Array.<string>} labels
+ * @param {object} opts
+ * @returns  { Array.<OrientationLegend> }
+ */
+export function orientationLegend(orientations, labels, opts = {}) {
+    const legends = []
+    for (let i = 0; i < orientations.length; i++) {
+        opts.title = i == 0 ? opts.title : undefined
+        opts.orientation = orientations[i]
+        opts.label = labels[i]
+        legends.push(new OrientationLegend(opts))
+    }
+    return legends
+}

package/src/legend/SizeLegend.js

@@ -26,6 +26,11 @@ export class SizeLegend extends Legend {
          *  @type { function(object, number, number):number } */
         this.size = opts.size || undefined
 
+        /** When the symbol size is not given with `size`, it is the scale returned by this function, from the view scale of the style, applied to the value of the label.
+         * For a style with a view scale for its size and another for its color, combined with viewScaleCombination: `(viewScale) => viewScale.size`
+         *  @type { function(object):function(number):number } */
+        this.viewScaleFun = opts.viewScaleFun || ((viewScale) => viewScale)
+
         //symbol
         /**  @type {(import("../core/Style").Shape)|"line"} */
         this.shape = opts.shape || 'circle'
@@ -57,7 +62,7 @@ export class SizeLegend extends Legend {
         //compute size of symbol, in pix
         let sizePix
         if (this.size) sizePix = this.size(opts.viewScale, opts.resolution, opts.z) / opts.z
-        else sizePix = opts.viewScale(+label) / opts.z
+        else sizePix = this.viewScaleFun(opts.viewScale)(+label) / opts.z
         if (!sizePix) return
 
         //format label, if specified and possible
@@ -137,6 +142,8 @@ export class SizeLegend extends Legend {
             .style('display', 'inline')
             .style('padding-left', '5px')
             .style('font-size', this.labelFontSizeCSS())
+            .style('fill', this.labelColorCSS())
+            .style('color', this.labelColorCSS())
             .text(label + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
     }
 }