gridviz 3.0.15 → 3.0.17

package/src/legend/ColorDiscreteLegend.js

@@ -1,102 +1,100 @@
-//@ts-check
-'use strict'
-
-import { Legend } from '../core/Legend.js'
-
-/**
- * A legend element for discrete color style.
- * Inspiration: https://observablehq.com/@d3/color-legend
- *
- * @module legend
- * @author Julien Gaffuri
- */
-export class ColorDiscreteLegend extends Legend {
-    /** @param {Object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** @private @type {function(import('../core/Style').ViewScale):Array.<string>} */
-        this.colors = opts.colors
-        /** @private @type {function(import('../core/Style').ViewScale):Array.<number>} */
-        this.breaks = opts.breaks
-
-        this.width = opts.width || 300
-        this.height = opts.height || 15
-
-        this.tickSize = opts.tickSize || 3
-
-        //label
-        this.invert = opts.invert
-    }
-
-    /**
-     * @param {{viewScale:import('../core/Style').ViewScale} } opts
-     */
-    update(opts) {
-
-        //clear
-        this.div.selectAll('*').remove()
-
-        //title
-        this.makeTitle()
-
-        //get colors and breaks
-        const colors = this.colors(opts.viewScale)
-        const breaks = this.breaks(opts.viewScale)
-        if (!breaks) return
-
-        //classes
-        const nb = colors.length
-        if (nb == 0) return
-        const w = this.width / nb
-
-        //make svg element
-        const svg = this.div
-            .append('svg')
-            .attr('width', this.width)
-            .attr('height', this.height + this.tickSize + 2 + 10)
-
-        //draw graphic elements
-        for (let i = 0; i < nb; i++) {
-            svg.append('rect')
-                .attr('x', i * w)
-                .attr('y', 0)
-                .attr('width', w)
-                .attr('height', this.height)
-                .style('fill', colors[i])
-        }
-
-        //tick line
-        for (let i = 1; i < nb; i++) {
-            svg.append('line')
-                .attr('x1', w * i)
-                .attr('y1', 0)
-                .attr('x2', w * i)
-                .attr('y2', this.height + this.tickSize)
-                .style('stroke', 'black')
-        }
-
-        //labels
-        for (let i = 1; i < nb; i++) {
-
-            let label = breaks[i - 1]
-            if (isNaN(label) || label == undefined) continue
-            if(this.labelFormat) label = this.labelFormat(label)
-
-            //label
-            svg.append('text')
-                .attr('id', 'ticklabel_' + i)
-                .attr('x', w * i)
-                .attr('y', this.height + this.tickSize + 2)
-                .style('font-size', this.labelFontSize)
-                //.style("font-weight", "bold")
-                //.style("font-family", "Arial")
-                .style('text-anchor', 'middle')
-                .style('alignment-baseline', 'top')
-                .style('dominant-baseline', 'hanging')
-                .style('pointer-events', 'none')
-                .text(label)
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { Legend } from '../core/Legend.js'
+
+/**
+ * A legend element for discrete color style.
+ * Inspiration: https://observablehq.com/@d3/color-legend
+ *
+ * @module legend
+ * @author Julien Gaffuri
+ */
+export class ColorDiscreteLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** @private @type {function(import('../core/Style').ViewScale):Array.<string>} */
+        this.colors = opts.colors
+        /** @private @type {function(import('../core/Style').ViewScale):Array.<number>} */
+        this.breaks = opts.breaks
+
+        this.width = opts.width || 300
+        this.height = opts.height || 15
+
+        this.tickSize = opts.tickSize || 3
+
+        //label
+        this.invert = opts.invert
+    }
+
+    /**
+     * @param {{viewScale:import('../core/Style').ViewScale} } opts
+     */
+    update(opts) {
+        //clear
+        this.div.selectAll('*').remove()
+
+        //title
+        this.makeTitle()
+
+        //get colors and breaks
+        const colors = this.colors(opts.viewScale)
+        const breaks = this.breaks(opts.viewScale)
+        if (!breaks) return
+
+        //classes
+        const nb = colors.length
+        if (nb == 0) return
+        const w = this.width / nb
+
+        //make svg element
+        const svg = this.div
+            .append('svg')
+            .attr('width', this.width)
+            .attr('height', this.height + this.tickSize + 2 + 10)
+
+        //draw graphic elements
+        for (let i = 0; i < nb; i++) {
+            svg.append('rect')
+                .attr('x', i * w)
+                .attr('y', 0)
+                .attr('width', w)
+                .attr('height', this.height)
+                .style('fill', colors[i])
+        }
+
+        //tick line
+        for (let i = 1; i < nb; i++) {
+            svg.append('line')
+                .attr('x1', w * i)
+                .attr('y1', 0)
+                .attr('x2', w * i)
+                .attr('y2', this.height + this.tickSize)
+                .style('stroke', 'black')
+        }
+
+        //labels
+        for (let i = 1; i < nb; i++) {
+            let label = breaks[i - 1]
+            if (isNaN(label) || label == undefined) continue
+            if (this.labelFormat) label = this.labelFormat(label)
+
+            //label
+            svg.append('text')
+                .attr('id', 'ticklabel_' + i)
+                .attr('x', w * i)
+                .attr('y', this.height + this.tickSize + 2)
+                .style('font-size', this.labelFontSize)
+                //.style("font-weight", "bold")
+                //.style("font-family", "Arial")
+                .style('text-anchor', 'middle')
+                .style('alignment-baseline', 'top')
+                .style('dominant-baseline', 'hanging')
+                .style('pointer-events', 'none')
+                .text(label)
+        }
+    }
+}

package/src/legend/ColorLegend.js

@@ -1,118 +1,115 @@
-//@ts-check
-'use strict'
-
-import { Legend } from '../core/Legend.js'
-
-/**
- * A legend element for continuous color style.
- * Inspiration: https://observablehq.com/@d3/color-legend
- *
- * @module legend
- * @author Joseph Davies, Julien Gaffuri
- */
-export class ColorLegend extends Legend {
-    /** @param {Object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        //a function [0,1]->color for continuous colors.
-        //it can take as second argument the viewscale.
-        this.colorScale = opts.colorScale
-
-        //function (t[0,1]) -> value (for label text)
-        //it can take as second argument the viewscale.
-        this.textScale = opts.textScale || (t => t)
-
-        this.margin = opts.margin || 5
-
-        //replace with labels ?
-        this.tickSize = opts.tickSize || 6
-        this.ticks = opts.ticks || Math.floor(this.width / 50)
-        this.tickFormat = opts.tickFormat
-        this.tickUnit = opts.tickUnit
-
-        this.fontSize = opts.fontSize || '0.8em'
-        this.invert = opts.invert
-
-        this.width = opts.width || 300
-        this.height = opts.height || 15
-    }
-
-    /**
-     * @param {{viewScale:import('../core/Style').ViewScale} } opts
-     */
-    update(opts) {
-
-        //clear
-        this.div.selectAll('*').remove()
-
-        //title
-        this.makeTitle()
-
-        const svgW = this.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)" />
-
-        const g = svg
-            .append('g')
-            .attr('transform', 'translate(' + this.margin + ' ' + 0 + ')')
-
-        //draw color bar
-        const w = this.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')
-                .attr('x', i)
-                .attr('y', 0)
-                .attr('width', step)
-                .attr('height', h)
-                .style('fill', this.colorScale(t, opts.viewScale))
-        }
-
-        for (let i = 0; i < this.ticks; i++) {
-            let t = i / (this.ticks - 1)
-
-            //tick line
-            g.append('line')
-                .attr('x1', w * t)
-                .attr('y1', 0)
-                .attr('x2', w * t)
-                .attr('y2', h + this.tickSize)
-                .style('stroke', 'black')
-
-            //prepare tick label
-            g.append('text')
-                .attr('id', 'ticklabel_' + i)
-                .attr('x', w * t)
-                .attr('y', h + this.tickSize + 2)
-                .style('font-size', this.fontSize)
-                //.style("font-weight", "bold")
-                //.style("font-family", "Arial")
-                .style('text-anchor', i == 0 ? 'start' : i == this.ticks - 1 ? 'end' : 'middle')
-                .style('alignment-baseline', 'top')
-                .style('dominant-baseline', 'hanging')
-                .style('pointer-events', 'none')
-            //.text("-")
-        }
-
-        //update tick labels
-
-        //label text format
-        const f = this.tickFormat && this.tickFormat != 'text' ? this.tickFormat : (v) => v
-        for (let i = 0; i < this.ticks; i++) {
-            let t = i / (this.ticks - 1)
-
-            const v = this.textScale(t, opts.viewScale)
-            const text = (v ? f(v) : '0') + (this.tickUnit ? this.tickUnit : '')
-            if (text == undefined) continue
-
-            //tick label
-            this.div.select('#' + 'ticklabel_' + i).text(text)
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { Legend } from '../core/Legend.js'
+
+/**
+ * A legend element for continuous color style.
+ * Inspiration: https://observablehq.com/@d3/color-legend
+ *
+ * @module legend
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ColorLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        //a function [0,1]->color for continuous colors.
+        //it can take as second argument the viewscale.
+        this.colorScale = opts.colorScale
+
+        //function (t[0,1]) -> value (for label text)
+        //it can take as second argument the viewscale.
+        this.textScale = opts.textScale || ((t) => t)
+
+        this.margin = opts.margin || 5
+
+        //replace with labels ?
+        this.tickSize = opts.tickSize || 6
+        this.ticks = opts.ticks || Math.floor(this.width / 50)
+        this.tickFormat = opts.tickFormat
+        this.tickUnit = opts.tickUnit
+
+        this.fontSize = opts.fontSize || '0.8em'
+        this.invert = opts.invert
+
+        this.width = opts.width || 300
+        this.height = opts.height || 15
+    }
+
+    /**
+     * @param {{viewScale:import('../core/Style').ViewScale} } opts
+     */
+    update(opts) {
+        //clear
+        this.div.selectAll('*').remove()
+
+        //title
+        this.makeTitle()
+
+        const svgW = this.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)" />
+
+        const g = svg.append('g').attr('transform', 'translate(' + this.margin + ' ' + 0 + ')')
+
+        //draw color bar
+        const w = this.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')
+                .attr('x', i)
+                .attr('y', 0)
+                .attr('width', step)
+                .attr('height', h)
+                .style('fill', this.colorScale(t, opts.viewScale))
+        }
+
+        for (let i = 0; i < this.ticks; i++) {
+            let t = i / (this.ticks - 1)
+
+            //tick line
+            g.append('line')
+                .attr('x1', w * t)
+                .attr('y1', 0)
+                .attr('x2', w * t)
+                .attr('y2', h + this.tickSize)
+                .style('stroke', 'black')
+
+            //prepare tick label
+            g.append('text')
+                .attr('id', 'ticklabel_' + i)
+                .attr('x', w * t)
+                .attr('y', h + this.tickSize + 2)
+                .style('font-size', this.fontSize)
+                //.style("font-weight", "bold")
+                //.style("font-family", "Arial")
+                .style('text-anchor', i == 0 ? 'start' : i == this.ticks - 1 ? 'end' : 'middle')
+                .style('alignment-baseline', 'top')
+                .style('dominant-baseline', 'hanging')
+                .style('pointer-events', 'none')
+            //.text("-")
+        }
+
+        //update tick labels
+
+        //label text format
+        const f = this.tickFormat && this.tickFormat != 'text' ? this.tickFormat : (v) => v
+        for (let i = 0; i < this.ticks; i++) {
+            let t = i / (this.ticks - 1)
+
+            const v = this.textScale(t, opts.viewScale)
+            const text = (v ? f(v) : '0') + (this.tickUnit ? this.tickUnit : '')
+            if (text == undefined) continue
+
+            //tick label
+            this.div.select('#' + 'ticklabel_' + i).text(text)
+        }
+    }
+}

package/src/legend/OrientationLegend.js

@@ -1,91 +1,89 @@
-//@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)
-        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')
-
-        //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').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')
-            .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')
-            .style('display', 'inline')
-            .style('padding-left', '5px')
-            .style('font-size', this.labelFontSize)
-            .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)
+        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')
+
+        //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').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')
+            .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')
+            .style('display', 'inline')
+            .style('padding-left', '5px')
+            .style('font-size', this.labelFontSize)
+            .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
+}