gridviz 3.0.2 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.2",
+    "version": "3.0.4",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/core/Dataset.js

@@ -17,7 +17,7 @@ export class Dataset {
      * @param {import("./Map.js").Map} map The map.
      * @param {string} url The URL of the dataset.
      * @param {number} resolution The dataset resolution, in the CRS geographical unit.
-     * @param {{preprocess?:function(Cell):boolean}} opts
+     * @param {{preprocess?:function(Cell):boolean, mixedResolution?:function(Cell):number}} opts
      * @abstract
      */
     constructor(map, url, resolution, opts = {}) {
@@ -40,6 +40,13 @@ export class Dataset {
          * @type {number} */
         this.resolution = resolution
 
+        /**
+        * In case the dataset is a dataset with cells having different resolution,
+        * this is the function returning the resolution of each cell.
+        * @protected
+        * @type {(function(Cell):number )| undefined } */
+        this.mixedResolution = opts.mixedResolution
+
         /**
          * A preprocess to run on each cell after loading. It can be used to apply some specific treatment before or compute a new column. And also to determine which cells to keep after loading.
          * @type {(function(Cell):boolean )| undefined } */
@@ -96,6 +103,22 @@ export class Dataset {
         }
         return undefined*/
 
+        //rare case of mixed resolution dataset
+        if (this.mixedResolution) {
+            for (const c of cells) {
+                /** @type {number} */
+                const r = this.mixedResolution(c)
+                if (posGeo.x < c.x) continue
+                else if (c.x + r < posGeo.x) continue
+                else if (posGeo.y < c.y) continue
+                else if (c.y + r < posGeo.y) continue
+                else return c
+            }
+            return undefined
+        }
+
+        //common case
+
         /** @type {number} */
         const r = this.getResolution()
         for (const cell of cells) {

package/src/core/Map.js

@@ -171,7 +171,8 @@ export class Map {
 
             //set layer alpha and blend mode
             this.geoCanvas.ctx.globalAlpha = layer.alpha ? layer.alpha(z) : 1.0
-            this.geoCanvas.ctx.globalCompositeOperation = layer.blendOperation(z)
+            if (layer.blendOperation)
+                this.geoCanvas.ctx.globalCompositeOperation = layer.blendOperation(z)
 
             //set affin transform to draw with geographical coordinates
             this.geoCanvas.setCanvasTransform()
@@ -300,6 +301,15 @@ export class Map {
             const cell = dsc.getCellFromPosition(posGeo, dsc.getViewCache())
             //console.log(cell, dsc.resolution)
             if (!cell) return undefined
+
+            //rare case for a dataset with mixed resolutions
+            if (dsc.mixedResolution) {
+                const r = dsc.mixedResolution(cell)
+                const html = layer.cellInfoHTML(cell, r)
+                if (!html) return undefined
+                return { cell: cell, html: html, resolution: r }
+            }
+
             const html = layer.cellInfoHTML(cell, dsc.getResolution())
             if (!html) return undefined
             return { cell: cell, html: html, resolution: dsc.getResolution() }

package/src/core/Style.js

@@ -3,7 +3,7 @@
 
 import { Drawable } from "./Drawable.js"
 
-/** @typedef {"square"|"circle"|"diamond"|"donut"|"none"} Shape */
+/** @typedef {"square"|"circle"|"diamond"|"donut"|"triangle_up"|"triangle_down"|"triangle_left"|"triangle_right"|"none"} Shape */
 
 /**
  * viewScale type
@@ -78,10 +78,16 @@ export class Style extends Drawable {
      * @param {object} opts
      * @returns {this} */
     updateLegends(opts) {
-        for (const lg of this.legends) lg.update(opts)
+        Style.updateLegendsRecursive(this.legends, opts)
         return this
     }
 
+    /** @private */
+    static updateLegendsRecursive(lg, opts) {
+        if (Array.isArray(lg)) for (const lg_ of lg) this.updateLegendsRecursive(lg_, opts)
+        else lg.update(opts)
+    }
+
     /**
      * @param {Array.<import("./Legend").Legend>} legends
      * @returns {this} */

package/src/index.js

@@ -33,6 +33,7 @@ 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 additional layers
 export { GridLayer } from './layer/GridLayer.js'
@@ -47,11 +48,14 @@ 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 { TrivariateLegend } from './legend/TrivariateLegend.js'
 
 // export { goToStraight, zoomTo } from "./utils/zoomUtils"
 export * from './utils/stretching.js'
 export * from './utils/scale.js'
-export { nice } from './utils/utils.js'
+export * from './utils/trivariate.js'
+export * from './utils/chernoff.js'
+export { nice, loadImage } from './utils/utils.js'
 
 import { GeoCanvas } from './core/GeoCanvas.js'
 export const getParameterByName = GeoCanvas.getParameterByName

package/src/layer/GridLayer.js

@@ -68,7 +68,8 @@ export class GridLayer extends Layer {
             //set style alpha and blend mode
             //TODO: multiply by layer alpha ?
             geoCanvas.ctx.globalAlpha = s.alpha ? s.alpha(z) : 1.0
-            geoCanvas.ctx.globalCompositeOperation = s.blendOperation(z)
+            if (s.blendOperation)
+                geoCanvas.ctx.globalCompositeOperation = s.blendOperation(z)
 
             //set affin transform to draw with geographical coordinates
             geoCanvas.setCanvasTransform()
@@ -86,24 +87,14 @@ export class GridLayer extends Layer {
             for (const s of this.styles) {
                 //check if style is visible
                 if (s.visible && !s.visible(z)) continue
-                for (const lg of s.legends) {
-                    //console.log(s, lg)
-                    //this.legend.append(lg.div)
-                    //s1.node().appendChild(s2.node())
-                    legend.node().append(lg.div.node())
-                }
+                GridLayer.addLegends(legend, s.legends)
 
                 //case for styles of styles, like kernel smoothing
                 //TODO do better
                 if (s['styles']) {
                     for (const s2 of s['styles']) {
                         if (s2.visible && !s2.visible(z)) continue
-                        for (const lg of s2.legends) {
-                            //console.log(s, lg)
-                            //this.legend.append(lg.div)
-                            //s1.node().appendChild(s2.node())
-                            legend.node().append(lg.div.node())
-                        }
+                        GridLayer.addLegends(legend, s2.legends)
                     }
                 }
             }
@@ -111,6 +102,11 @@ export class GridLayer extends Layer {
 
     }
 
+    /** @private */
+    static addLegends(legendComp, lg) {
+        if (Array.isArray(lg)) for (const lg_ of lg) this.addLegends(legendComp, lg_)
+        else legendComp.node().append(lg.div.node())
+    }
 
 
     /**

package/src/legend/SizeLegend.js

@@ -17,12 +17,12 @@ export class SizeLegend extends Legend {
         super(opts)
         opts = opts || {}
 
-        /** A function returning the text label
-         *  @type { function(object, Array.<import('../core/Dataset.js').Cell>):(number|string) } */
+        /** A function returning the text label, from the view scale and list of cells, resolution and zoom
+         *  @type { function(object, Array.<import('../core/Dataset.js').Cell>, number, number):(number|string) } */
         this.label = opts.label || undefined
 
-        /** A function returning the size of the legend symbol
-         *  @type { function(object):number } */
+        /** A function returning the size of the legend symbol, in geo UoM, from the viewscale, resolution and zoom
+         *  @type { function(object, number, number):number } */
         this.size = opts.size || undefined
 
         //symbol
@@ -52,12 +52,12 @@ export class SizeLegend extends Legend {
         this.makeTitle()
 
         //get label. May not be a number (!)
-        let label = this.label(opts.viewScale, opts.cells)
+        let label = this.label(opts.viewScale, opts.cells, opts.resolution, opts.z)
 
         //compute size of symbol, in pix
         let sizePix
         if (this.size)
-            sizePix = this.size(opts.viewScale) / opts.z
+            sizePix = this.size(opts.viewScale, opts.resolution, opts.z) / opts.z
         else
             sizePix = opts.viewScale(+label) / opts.z
         if (!sizePix) return

package/src/legend/TrivariateLegend.js

@@ -0,0 +1,210 @@
+//@ts-check
+'use strict'
+
+import { select } from 'd3-selection'
+import { Legend } from '../core/Legend.js'
+
+/**
+ *
+ * @module legend
+ * @author Julien Gaffuri
+ */
+export class TrivariateLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        //classifier
+        this.classifier = opts.classifier
+
+        this.width = opts.width || 150
+        this.selectionColor = this.selectionColor || "red"
+        this.tooltip = opts.tooltip
+        this.texts = opts.texts
+
+        this.leftText = opts.leftText || "Category 0"
+        this.topText = opts.topText || "Category 1"
+        this.rightText = opts.rightText || "Category 2"
+
+        this.centerCoefficient = opts.centerCoefficient || this.classifier.centerCoefficient
+    }
+
+    /**
+     * @param {{} } opts
+     */
+    update(opts) {
+
+        //clear
+        this.div.selectAll('*').remove()
+
+        //title
+        this.makeTitle()
+
+        const sqrt3over2 = 0.866025
+        const w = this.width, h = w * sqrt3over2
+        const classifier = this.classifier
+        const selectionColor = this.selectionColor
+        const selectionStrokeWidth = 0
+        const tt = this.tooltip
+        const texts = this.texts || {}
+
+        const padding = 2
+        const fontSize = 12
+
+        //make svg element
+        const svg = this.div
+            .append('svg')
+            .attr('width', w + selectionStrokeWidth)
+            .attr('height', h + 4 * padding + 2 * fontSize)
+
+        //top label
+        svg.append("text").attr("x", w / 2).attr("y", padding + fontSize).text(this.topText).attr("font-size", fontSize)
+            .attr("text-anchor", "middle")
+        //left label
+        svg.append("text").attr("x", 0).attr("y", 3 * padding + 2 * fontSize + h).text(this.leftText).attr("font-size", fontSize)
+            .attr("text-anchor", "start")
+        //right label
+        svg.append("text").attr("x", w).attr("y", 3 * padding + 2 * fontSize + h).text(this.rightText).attr("font-size", fontSize)
+            .attr("text-anchor", "end")
+
+
+
+        //triangle group
+        const g = svg.append("g").attr("transform", "translate(" + (selectionStrokeWidth / 2) + " " + (selectionStrokeWidth / 2 + (2 * padding + fontSize)) + ")")
+
+        //common function for triangle patches
+        const setAttributes = (elt, color, text) => {
+            //elt.raise();
+            elt.attr('fill', color)
+                //.attr("stroke", colorOver)
+                //.attr("stroke-width", 0)
+                //.attr("stroke-linejoin", "round")
+                .on("mouseover", function (e) {
+                    /*this.parentNode.appendChild(this); select(this).attr("stroke-width", selectionStrokeWidth);*/
+                    select(this).attr('fill', selectionColor);
+                    if (!tt || !text) return;
+                    tt.html(text);
+                    tt.setPosition(e);
+                    tt.show()
+                })
+                .on("mouseout", function () {
+                    /*select(this).attr("stroke-width", 0);*/
+                    select(this).attr('fill', color);
+                    if (tt) tt.hide()
+                })
+            if (tt && text) elt.on("mousemove", function (e) { tt.setPosition(e) })
+        }
+
+        //const [c0, c1, c2] = classifier.center
+
+        //trapezium s0
+        const t0 = g.append('polygon')
+            .attr('points', "0," + h + " " + w / 3 + "," + h + " " + w / 2 + "," + h * 2 / 3 + " " + w / 6 + "," + h * 2 / 3)
+        setAttributes(t0, classifier.colors[0], texts["0"])
+        //trapezium s1
+        const t1 = g.append('polygon')
+            .attr('points', w / 2 + ",0 " + w * 2 / 3 + "," + h / 3 + " " + w / 2 + "," + h * 2 / 3 + " " + w / 3 + "," + h / 3)
+        setAttributes(t1, classifier.colors[1], texts["1"])
+        //trapezium s2
+        const t2 = g.append('polygon')
+            .attr('points', w + "," + h + " " + w * 5 / 6 + "," + 2 * h / 3 + " " + w / 2 + "," + h * 2 / 3 + " " + w * 2 / 3 + "," + h)
+        setAttributes(t2, classifier.colors[2], texts["2"])
+        //triangle s0
+        const t0_ = g.append('polygon')
+            .attr('points', w / 2 + "," + h * 2 / 3 + " " + w * 5 / 6 + "," + h * 2 / 3 + " " + w * 2 / 3 + "," + h / 3)
+        setAttributes(t0_, classifier.mixColors[0], texts["12"])
+        //triangle s1
+        const t1_ = g.append('polygon')
+            .attr('points', w / 2 + "," + h * 2 / 3 + " " + w / 3 + "," + h + " " + w * 2 / 3 + "," + h)
+        setAttributes(t1_, classifier.mixColors[1], texts["02"])
+        //triangle s2
+        const t2_ = g.append('polygon')
+            .attr('points', w / 2 + "," + h * 2 / 3 + " " + w / 6 + "," + h * 2 / 3 + " " + w / 3 + "," + h / 3)
+        setAttributes(t2_, classifier.mixColors[2], texts["01"])
+
+        //center
+        if (this.centerCoefficient) {
+            //TODO make it an hexagon !
+            const center = g.append('circle')
+                .attr('cx', w / 2).attr('cy', h * 2 / 3)
+                .attr('r', this.centerCoefficient * h / 3)
+            setAttributes(center, classifier.centerColor, texts["center"])
+        }
+
+
+        /*
+        let middle, left, top, right, left_, bottom_, right_
+        if (!this.real) {
+
+            //0 left triangle
+            left = g.append('polygon')
+                .attr('points', "0," + h + " " + (w / 3) + "," + h + " " + (w / 6) + "," + (2 * h / 3))
+            //1 top triangle
+            top = g.append('polygon')
+                .attr('points', (w / 3) + "," + (h / 3) + " " + (w * 2 / 3) + "," + (h / 3) + " " + (w / 2) + ",0")
+            //2 right triangle
+            right = g.append('polygon')
+                .attr('points', (w * 2 / 3) + "," + h + " " + w + "," + h + " " + (w * 5 / 6) + "," + (2 * h / 3))
+            //middle triangle
+            middle = g.append('polygon')
+                .attr('points', (w / 2) + "," + (h / 3) + " " + (w / 4) + "," + (h * 5 / 6) + " " + (3 * w / 4) + "," + (h * 5 / 6))
+            //01 left trapezium
+            left_ = g.append('polygon')
+                .attr('points', (w / 6) + "," + (h * 2 / 3) + " " + (w / 4) + "," + (h * 5 / 6) + " " + (w / 2) + "," + (h / 3) + " " + (w / 3) + "," + (h / 3))
+            //02 bottom trapezium
+            bottom_ = g.append('polygon')
+                .attr('points', (w / 3) + "," + (h) + " " + (2 * w / 3) + "," + (h) + " " + (w * 3 / 4) + "," + (h * 5 / 6) + " " + (w / 4) + "," + (h * 5 / 6))
+            //12 right trapezium
+            right_ = g.append('polygon')
+                .attr('points', (w / 2) + "," + (h / 3) + " " + (w * 3 / 4) + "," + (h * 5 / 6) + " " + (w * 5 / 6) + "," + (h * 2 / 3) + " " + (w * 2 / 3) + "," + (h / 3))
+
+        } else {
+
+            //middle triangle
+            middle = g.append('polygon')
+                .attr('points', (w / 2) + ",0 0," + h + " " + w + "," + h)
+
+            //draw trapezium
+            //draw large trapezium first
+            for (let i_ = 2; i_ >= 0; i_--) {
+                const i = this.classifier.lowIndex[i_]
+                const r = this.classifier.lowThreshold[i]
+                if (i == 2)
+                    //01 left trapezium
+                    left_ = g.append('polygon')
+                        .attr('points', w / 2 + ",0 0," + h + " " + w * r + "," + h + " " + w * (1 + r) / 2 + "," + r * h)
+                else if (i == 1)
+                    //02 bottom trapezium
+                    bottom_ = g.append('polygon')
+                        .attr('points', "0," + h + " " + w + "," + h + " " + w * (1 - r / 2) + "," + h * (1 - r) + " " + r * w / 2 + "," + h * (1 - r))
+                else
+                    //12 right trapezium
+                    right_ = g.append('polygon')
+                        .attr('points', w + "," + h + " " + w / 2 + ",0 " + w * (1 - r) / 2 + "," + h * r + " " + w * (1 - r) + "," + h)
+            }
+
+            //draw triangles
+            //draw large triangles first
+            for (let i_ = 2; i_ >= 0; i_--) {
+                const i = this.classifier.highIndex[i_]
+                const r = this.classifier.highThreshold[i]
+
+                if (i == 2)
+                    //2 right triangle
+                    right = g.append('polygon')
+                        .attr('points', w + "," + h + " " + w * r + "," + h + " " + w * (1 + r) / 2 + "," + h * r)
+                else if (i == 1)
+                    //1 top triangle
+                    top = g.append('polygon')
+                        .attr('points', (w / 2) + ",0 " + w * r / 2 + "," + h * (1 - r) + " " + w * (1 - r / 2) + "," + h * (1 - r))
+                else
+                    //0 left triangle
+                    left = g.append('polygon')
+                        .attr('points', "0," + h + " " + w * (1 - r) + "," + h + " " + w * (1 - r) / 2 + "," + h * r)
+            }
+
+        }*/
+
+    }
+}

package/src/style/ImageStyle.js

@@ -0,0 +1,81 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class ImageStyle extends Style {
+
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the image code of a cell.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.imageCode = opts.imageCode || (() => '') //(c,r,z,vs) => {}
+
+        /** The dictionnary code -> image
+         *  @type {object}        */
+        this.images = opts.images || {}
+
+        /** The image size in ground meters
+         *  @type {function(import('../core/Dataset.js').Cell, number, number, object):number}        */
+        this.size = opts.size || ((cell, resolution) => resolution)
+    }
+
+    /**
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     * @override
+     */
+    draw(cells, geoCanvas, resolution) {
+
+        //
+        const z = geoCanvas.view.z,
+            resolutionPix = resolution / z
+
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
+
+        //draw in screen coordinates
+        geoCanvas.initCanvasTransform()
+
+        //
+        for (let cell of cells) {
+
+            //get cell image code
+            const code = this.imageCode(cell, resolution, z, viewScale)
+
+            //get image
+            const image = this.images[code]
+            if (!image) continue
+
+            //size and position values
+            let sizePix = this.size(cell, resolution, z, viewScale) / z
+            if (!sizePix) continue
+            const d = (resolutionPix - sizePix) / 2
+
+            try {
+                geoCanvas.ctx.drawImage(image, geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d -resolutionPix, sizePix, sizePix)
+
+                /*/red color filter
+                geoCanvas.ctx.globalCompositeOperation = 'source-in';
+                geoCanvas.ctx.fillStyle = 'red';
+                geoCanvas.ctx.fillRect(geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d, sizePix, sizePix);
+                geoCanvas.ctx.globalCompositeOperation = 'source-over';*/
+            } catch (error) {
+                console.error(error)
+            }
+
+        }
+
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+}

package/src/style/PillarStyle.js

@@ -107,7 +107,7 @@ export class PillarStyle extends Style {
             //set width
             geoCanvas.ctx.lineWidth = wG
 
-            //compute cell centre postition
+            //compute cell center postition
             const cx = cell.x + resolution / 2
             const cy = cell.y + resolution / 2
             const ls = hG * this.shadowFactor
@@ -152,7 +152,7 @@ export class PillarStyle extends Style {
             //TODO use that
             //const offset = this.offset(c, resolution, z)
 
-            //compute cell centre postition
+            //compute cell center postition
             const cx = cell.x + resolution / 2
             const cy = cell.y + resolution / 2
 

package/src/style/SegmentStyle.js

@@ -84,7 +84,7 @@ export class SegmentStyle extends Style {
             geoCanvas.ctx.strokeStyle = col
             geoCanvas.ctx.lineWidth = wG
 
-            //compute segment centre postition
+            //compute segment center postition
             const cx = cell.x + resolution / 2 + offset.dx
             const cy = cell.y + resolution / 2 + offset.dy
 

package/src/style/ShapeColorSizeStyle.js

@@ -93,6 +93,34 @@ export class ShapeColorSizeStyle extends Style {
                 geoCanvas.ctx.lineTo(c.x + r2 + s2, c.y + r2)
                 geoCanvas.ctx.lineTo(c.x + r2, c.y + r2 - s2)
                 geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_up') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_down') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_left') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_right') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.fill()
             } else {
                 throw new Error('Unexpected shape:' + shape)
             }

package/src/style/SideStyle.js

@@ -125,14 +125,14 @@ export class SideStyle extends Style {
      * @param {number} resolution The cells resolution
      * @param {boolean} withHorizontal Set to true to build horizontal sides, false otherwise.
      * @param {boolean} withVertical Set to true to build vertical sides, false otherwise.
-     * @param {boolean} centre Set to true so that the side coordinate are those of its center point rather than its left/bottom point (the side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides)
+     * @param {boolean} center Set to true so that the side coordinate are those of its center point rather than its left/bottom point (the side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides)
      * @returns { Array.<Side> }
      */
-    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, centre = true) {
+    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = true) {
         /** @type { Array.<Side> } */
         const sides = []
 
-        const r2 = centre ? resolution / 2 : 0
+        const r2 = center ? resolution / 2 : 0
 
         //make horizontal sides
         //sort cells by x and y