gridviz 2.1.17 → 3.0.1

package/src/{LabelLayer.js → layer/LabelLayer.js}

@@ -1,6 +1,7 @@
 //@ts-check
 'use strict'
 
+import { Layer } from '../core/Layer.js'
 import { csv } from 'd3-fetch'
 
 /** A label. The name is the text to show. (x,y) are the coordinates in the same CRS as the grid.
@@ -14,11 +15,12 @@ import { csv } from 'd3-fetch'
  *
  * @author Joseph Davies, Julien Gaffuri
  */
-export class LabelLayer {
+export class LabelLayer extends Layer {
     /**
      * @param {object} opts
      */
     constructor(opts) {
+        super(opts)
         opts = opts || {}
 
         /**
@@ -82,60 +84,60 @@ export class LabelLayer {
     /**
      * Draw the label layer.
      *
-     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas The canvas where to draw the layer.
      * @returns {void}
      */
-    draw(cg) {
+    draw(geoCanvas) {
         //load labels, if not done yet.
         if (!this.labels) {
-            this.load(cg.redraw)
+            this.load(geoCanvas.redraw)
             return
         }
 
-        //zoom factor
-        const zf = cg.getZf()
+        //
+        const z = geoCanvas.view.z
 
         //text align
-        cg.ctx.textAlign = this.textAlign || 'start'
+        geoCanvas.ctx.textAlign = this.textAlign || 'start'
 
         //line join and cap
-        cg.ctx.lineJoin = 'bevel' //|| "round" || "miter";
-        cg.ctx.lineCap = 'butt' //|| "round" || "square";
+        geoCanvas.ctx.lineJoin = 'bevel' //|| "round" || "miter";
+        geoCanvas.ctx.lineCap = 'butt' //|| "round" || "square";
 
         //draw in pix coordinates
-        cg.initCanvasTransform()
+        geoCanvas.initCanvasTransform()
 
         //draw labels, one by one
         for (const lb of this.labels) {
             //get label style
-            const st = this.style(lb, zf)
+            const st = this.style(lb, z)
             if (!st) continue
-            cg.ctx.font = st
+            geoCanvas.ctx.font = st
 
             //check label within the view, to be drawn
-            if (!cg.toDraw(lb)) continue
+            if (!geoCanvas.toDraw(lb)) continue
 
             //position
-            const xP = cg.geoToPixX(lb.x) + this.offsetPix[0]
-            const yP = cg.geoToPixY(lb.y) - this.offsetPix[1]
+            const xP = geoCanvas.geoToPixX(lb.x) + this.offsetPix[0]
+            const yP = geoCanvas.geoToPixY(lb.y) - this.offsetPix[1]
 
             //label stroke, for the halo
             if (this.haloColor && this.haloWidth) {
-                const hc = this.haloColor(lb, zf)
-                const hw = this.haloWidth(lb, zf)
+                const hc = this.haloColor(lb, z)
+                const hw = this.haloWidth(lb, z)
                 if (hc && hw && hw > 0) {
-                    cg.ctx.strokeStyle = hc
-                    cg.ctx.lineWidth = hw
-                    cg.ctx.strokeText(lb.name, xP, yP)
+                    geoCanvas.ctx.strokeStyle = hc
+                    geoCanvas.ctx.lineWidth = hw
+                    geoCanvas.ctx.strokeText(lb.name, xP, yP)
                 }
             }
 
             //label fill
             if (this.color) {
-                const col = this.color(lb, zf)
+                const col = this.color(lb, z)
                 if (col) {
-                    cg.ctx.fillStyle = col
-                    cg.ctx.fillText(lb.name, xP, yP)
+                    geoCanvas.ctx.fillStyle = col
+                    geoCanvas.ctx.fillText(lb.name, xP, yP)
                 }
             }
         }

package/src/legend/ColorCategoryLegend.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Legend } from '../Legend.js'
+import { Legend } from '../core/Legend.js'
 
 /**
  * A legend element for color categrories.
@@ -17,49 +17,34 @@ export class ColorCategoryLegend extends Legend {
         //col/categories array, in display order
         /**
          * @private
-         * @type {Array.<Array.<string>>} */
-        this.colCat = opts.colCat || [['gray', '-']]
+         * @type {Array.<[string,string]>} */
+        this.colorLabel = opts.colorLabel || [['gray', '-']]
 
         /**
          * @private
-         * @type {import("../Style").Shape} */
+         * @type {import("../core/Style.js").Shape} */
         this.shape = opts.shape || 'circle'
         this.dimension = opts.dimension || { r: 8 }
         this.strokeColor = opts.strokeColor || 'gray'
         this.strokeWidth = opts.strokeWidth || 1
-
-        this.title = opts.title
-        this.titleFontSize = opts.titleFontSize || '0.8em'
-        this.titleFontWeight = opts.titleFontWeight || 'bold'
-
-        //label
-        this.labelFontSize = opts.labelFontSize || '0.8em'
     }
 
     /**
-     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
      */
-    update(opts) {
+    update() {
+
         //clear
         this.div.selectAll('*').remove()
 
-        //build
-
         //title
-        if (this.title)
-            this.div
-                .append('div')
-                .style('font-size', this.titleFontSize)
-                .style('font-weight', this.titleFontWeight)
-                .style('margin-bottom', '7px')
-                .text(this.title)
+        this.makeTitle()
 
         //categories
-        const nb = this.colCat.length
+        const nb = this.colorLabel.length
         if (nb == 0) return
 
         for (let i = 0; i < nb; i++) {
-            const cat = this.colCat[i]
+            const cat = this.colorLabel[i]
 
             //make div for category
             const d = this.div.append('div')

package/src/legend/ColorDiscreteLegend.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Legend } from '../Legend.js'
+import { Legend } from '../core/Legend.js'
 
 /**
  * A legend element for discrete color style.
@@ -15,45 +15,37 @@ export class ColorDiscreteLegend extends Legend {
         super(opts)
         opts = opts || {}
 
-        /** @private @type {Array.<Array.<string>>} */
+        /** @private @type {function(import('../core/Style').ViewScale):Array.<string>} */
         this.colors = opts.colors
-        /** @private @type {Array.<Array.<string>>} */
-        this.breaksText = opts.breaksText
+        /** @private @type {function(import('../core/Style').ViewScale):Array.<number>} */
+        this.breaks = opts.breaks
 
         this.width = opts.width || 300
         this.height = opts.height || 15
 
-        this.title = opts.title
-        this.titleFontSize = opts.titleFontSize || '0.8em'
-        this.titleFontWeight = opts.titleFontWeight || 'bold'
-
         this.tickSize = opts.tickSize || 3
 
         //label
-        this.labelFontSize = opts.labelFontSize || '0.8em'
         this.invert = opts.invert
     }
 
     /**
-     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
+     * @param {{viewScale:import('../core/Style').ViewScale} } opts
      */
     update(opts) {
+
         //clear
         this.div.selectAll('*').remove()
 
-        //build
-
         //title
-        if (this.title)
-            this.div
-                .append('div')
-                .style('font-size', this.titleFontSize)
-                .style('font-weight', this.titleFontWeight)
-                .style('margin-bottom', '7px')
-                .text(this.title)
+        this.makeTitle()
+
+        //get colors and breaks
+        const colors = this.colors(opts.viewScale)
+        const breaks = this.breaks(opts.viewScale)
 
         //classes
-        const nb = this.colors.length
+        const nb = colors.length
         if (nb == 0) return
         const w = this.width / nb
 
@@ -70,7 +62,7 @@ export class ColorDiscreteLegend extends Legend {
                 .attr('y', 0)
                 .attr('width', w)
                 .attr('height', this.height)
-                .style('fill', this.colors[i])
+                .style('fill', colors[i])
         }
 
         //tick line
@@ -85,7 +77,11 @@ export class ColorDiscreteLegend extends Legend {
 
         //labels
         for (let i = 1; i < nb; i++) {
-            //prepare label
+
+            let label = breaks[i - 1]
+            if (isNaN(label) || label == undefined) continue
+
+            //label
             svg.append('text')
                 .attr('id', 'ticklabel_' + i)
                 .attr('x', w * i)
@@ -93,11 +89,11 @@ export class ColorDiscreteLegend extends Legend {
                 .style('font-size', this.labelFontSize)
                 //.style("font-weight", "bold")
                 //.style("font-family", "Arial")
-                .style('text-anchor', i == 0 ? 'start' : i == this.ticks - 1 ? 'end' : 'middle')
+                .style('text-anchor', 'middle')
                 .style('alignment-baseline', 'top')
                 .style('dominant-baseline', 'hanging')
                 .style('pointer-events', 'none')
-                .text(this.breaksText[i - 1])
+                .text(label)
         }
     }
 }

package/src/legend/ColorLegend.js

@@ -1,8 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Legend } from '../Legend.js'
-import { format } from 'd3-format'
+import { Legend } from '../core/Legend.js'
 
 /**
  * A legend element for continuous color style.
@@ -16,58 +15,47 @@ export class ColorLegend extends Legend {
         super(opts)
         opts = opts || {}
 
-        this.colorRamp = opts.colorRamp
+        //a function [0,1]->color for continuous colors
+        //or array of colors for discrete colors
+        this.colorScale = opts.colorScale
 
-        //function (t[0,1], r, s) -> v (for label text)
-        this.fun = opts.fun
+        //function (t[0,1]) -> value (for label text)
+        this.textScale = opts.textScale || (t => t)
 
-        this.title = opts.title
-        this.tickSize = opts.tickSize || 6
-        this.width = opts.width || 300
-        this.height = opts.height || 15
         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 || ',.0f'
+        this.tickFormat = opts.tickFormat
         this.tickUnit = opts.tickUnit
 
         this.fontSize = opts.fontSize || '0.8em'
         this.invert = opts.invert
 
-        //to be used as opts => opts.sAlpha to show legend on alpha channel
-        this.getStats = opts.getStats || (opts => opts.sColor)
+        this.width = opts.width || 300
+        this.height = opts.height || 15
     }
 
     /**
-     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat, sAlpha: import("../Style").Stat }} opts
+     * @param {{viewScale:import('../core/Style').ViewScale} } opts
      */
     update(opts) {
-        //could happen when data is still loading
-        if (!opts.sColor) return
 
         //clear
         this.div.selectAll('*').remove()
 
-        const titleHeight = 12
+        //title
+        this.makeTitle()
 
         const svgW = this.width + 2 * this.margin
-        const svgH = this.height + 3 * this.margin + titleHeight + this.tickSize + 10
+        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)" />
 
-        //title
-        svg.append('text')
-            .attr('x', this.margin)
-            .attr('y', this.margin)
-            .style('font-size', '0.8em')
-            .style('font-weight', 'bold')
-            .style('alignment-baseline', 'top')
-            .style('dominant-baseline', 'hanging')
-            .style('pointer-events', 'none')
-            .text(this.title)
-
         const g = svg
             .append('g')
-            .attr('transform', 'translate(' + this.margin + ' ' + (2 * this.margin + titleHeight) + ')')
+            .attr('transform', 'translate(' + this.margin + ' ' + 0 + ')')
 
         //draw color bar
         const w = this.width,
@@ -81,7 +69,7 @@ export class ColorLegend extends Legend {
                 .attr('y', 0)
                 .attr('width', step)
                 .attr('height', h)
-                .style('fill', this.colorRamp(t))
+                .style('fill', this.colorScale(t, opts.viewScale))
         }
 
         for (let i = 0; i < this.ticks; i++) {
@@ -113,13 +101,13 @@ export class ColorLegend extends Legend {
         //update tick labels
 
         //label text format
-        const f = this.tickFormat && this.tickFormat != 'text' ? format(this.tickFormat) : (v) => v
-        const stat = this.getStats(opts)
+        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.fun(t, opts.r, stat)
+            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

@@ -0,0 +1,90 @@
+//@ts-check
+'use strict'
+
+import { Legend } from '../core/Legend.js'
+
+/**
+ * A legend element for segment orientation.
+ *
+ * @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
+}