gridviz 2.1.17 → 3.0.1

package/src/style/DotDensityStyle.js

@@ -1,12 +1,11 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
 import { randomNormal } from 'd3-random'
 import { checkWebGLSupport, makeWebGLCanvas } from '../utils/webGLUtils.js'
 import { WebGLSquareColoring } from '../utils/WebGLSquareColoring.js'
 import { color } from 'd3-color'
-import { monitor, monitorDuration } from '../utils/Utils.js'
 
 /**
  *
@@ -18,139 +17,117 @@ export class DotDensityStyle extends Style {
         super(opts)
         opts = opts || {}
 
-        /** The name of the column/attribute of the tabular data where to retrieve the variable for dot number.
-         * @type {string} */
-        this.nbCol = opts.nbCol
-
         /** A function returning the number of dots for a cell value.
-         * @type {function(number,number,import("../Style").Stat,number):number} */
-        this.nb = opts.nb || ((v, r, s, zf) => (((0.3 * r * r) / (zf * zf)) * v) / s.max)
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.dotNumber = opts.dotNumber || ((cell, resolution) => resolution / 100)//(c,r,z,vs) => {}
 
         /** The color of the dots. Same color for all dots within a cell.
-         * @type {function(import("../Dataset").Cell):string} */
-        this.color = opts.color || (() => '#FF5733')
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.color = opts.color || (() => '#FF5733') //(c,r,z,vs) => {}
 
-        /** A function returning the size of the dots, in geo unit.
-         * @type {function(number,number):number} */
-        this.dotSize = opts.dotSize //|| ((r, zf) => ...
+        /** A function returning the size of the dots, in geo unit. Same size for all cells.
+         * @type {function(number, number,object):number} */
+        this.dotSize = opts.dotSize || ((resolution, z) => 1.5 * z) //(c,r,z,vs) => {}
 
-        /** A function returning the sigma of the distribution from the resolution, in geo unit.
-         * @type {function(number,number):number} */
-        this.sigma = opts.sigma //|| ((r,zf) => ...
+        /** A function returning the sigma of the dots distribution. Same value for all cells.
+         * @type {function(number, number,object):number} */
+        this.sigma = opts.sigma || ((resolution, z) => resolution / 2)//(c,r,z,vs) => {}
     }
 
     /**
      * Draw cells as text.
      *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset").Cell>} cells
+     * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
+     * @param {number} resolution
      */
-    draw(cells, r, cg) {
-        if (monitor) monitorDuration('*** DotDensityStyle draw')
+    draw(cells, geoCanvas, resolution) {
 
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        //zoom factor
-        const zf = cg.getZf()
+        //
+        const z = geoCanvas.view.z
 
-        let stat
-        if (this.nbCol) stat = Style.getStatistics(cells, (c) => c[this.nbCol], true)
-        if (!stat) return
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
-        //size of the dots
-        const sGeo = this.dotSize ? this.dotSize(r, zf) : 2 * zf
+        //get size
+        const sGeo = this.dotSize ? this.dotSize(resolution, z, viewScale) : z
 
         //make random function
-        const sig = this.sigma ? this.sigma(r, zf) : r * 0.4
+        const sig = this.sigma ? this.sigma(resolution, z, viewScale) : resolution * 0.4
         const rand = randomNormal(0, sig)
 
-        if (monitor) monitorDuration(' preparation')
-
         if (checkWebGLSupport()) {
             //create canvas and webgl renderer
-            const cvWGL = makeWebGLCanvas(cg.w + '', cg.h + '')
+            const cvWGL = makeWebGLCanvas(geoCanvas.w + '', geoCanvas.h + '')
             if (!cvWGL) {
                 console.error('No webGL')
                 return
             }
 
             //create webGL program
-            const prog = new WebGLSquareColoring(cvWGL.gl, sGeo / zf)
+            const prog = new WebGLSquareColoring(cvWGL.gl, sGeo / z)
 
-            if (monitor) monitorDuration(' webgl creation')
+            const r2 = resolution / 2
 
-            const r2 = r / 2
-
-            let col, offset, nb, cx, cy, cc
-            for (let c of cells) {
+            for (let cell of cells) {
                 //get color
-                col = this.color(c)
+                const col = this.color(cell, resolution, z, viewScale)
                 if (!col || col === 'none') continue
 
-                //get offset
-                offset = this.offset(c, r, zf)
-
                 //number of dots
-                nb = this.nb(c[this.nbCol], r, stat, zf)
+                const dotNumber = this.dotNumber(cell, resolution, z, viewScale)
+
+                //get offset
+                const offset = this.offset(cell, resolution, z)
 
                 //cell center
-                cx = c.x + offset.dx + r2
-                cy = c.y + offset.dy + r2
+                const cx = cell.x + offset.dx + r2
+                const cy = cell.y + offset.dy + r2
 
                 //convert color
-                cc = color(col)
+                const cc = color(col)
                 if (!cc) return
 
                 //random points
-                for (let i = 0; i <= nb; i++)
+                for (let i = 0; i <= dotNumber; i++)
                     prog.addPointData2(cx + rand(), cy + rand(), cc.r, cc.g, cc.b, cc.opacity)
             }
 
-            if (monitor) monitorDuration(' data preparation')
-
             //draw
-            prog.draw(cg.getWebGLTransform())
-
-            if (monitor) monitorDuration(' webgl drawing')
+            prog.draw(geoCanvas.getWebGLTransform())
 
             //draw in canvas geo
-            cg.initCanvasTransform()
-            cg.ctx.drawImage(cvWGL.canvas, 0, 0)
+            geoCanvas.initCanvasTransform()
+            geoCanvas.ctx.drawImage(cvWGL.canvas, 0, 0)
 
-            if (monitor) monitorDuration(' canvas drawing')
         } else {
-            //draw with HTML canvas
-
-            //draw in geo coordinates
-            cg.setCanvasTransform()
+            for (let cell of cells) {
 
-            for (let c of cells) {
                 //get color
-                const col = this.color(c)
+                const col = this.color(cell, resolution, z, viewScale)
                 if (!col || col === 'none') continue
                 //set color
-                cg.ctx.fillStyle = col
-
-                //get offset
-                const offset = this.offset(c, r, zf)
+                geoCanvas.ctx.fillStyle = col
 
                 //number of dots
-                const nb = this.nb(c[this.nbCol], r, stat, zf)
+                const dotNumber = this.dotNumber(cell, resolution, z, viewScale)
+
+                //get offset
+                const offset = this.offset(cell, resolution, z)
 
                 //draw random dots
-                const cx = c.x + offset.dx + r / 2,
-                    cy = c.y + offset.dy + r / 2
-                for (let i = 0; i <= nb; i++) {
-                    cg.ctx.fillRect(cx + rand(), cy + rand(), sGeo, sGeo)
+                const cx = cell.x + offset.dx + resolution / 2,
+                    cy = cell.y + offset.dy + resolution / 2
+                for (let i = 0; i <= dotNumber; i++) {
+                    geoCanvas.ctx.fillRect(cx + rand(), cy + rand(), sGeo, sGeo)
                 }
             }
         }
 
         //update legends
-        this.updateLegends({ style: this, r: r, zf: zf })
-
-        if (monitor) monitorDuration('*** DotDensityStyle end draw')
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
     }
 }

package/src/style/IsoFenceStyle.js

@@ -1,9 +1,10 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
+import { SideStyle } from './SideStyle.js'
 
-/** @typedef {{x:number,y:number,or:"v"|"h",c1:import('../Dataset.js').Cell|undefined,c2:import('../Dataset.js').Cell|undefined}} Side */
+/** @typedef {{x:number,y:number,or:"v"|"h",c1:import('../core/Dataset.js').Cell|undefined,c2:import('../core/Dataset.js').Cell|undefined}} Side */
 
 /**
  * @author Julien Gaffuri
@@ -20,25 +21,21 @@ export class IsoFenceStyle extends Style {
          * @type {object} */
         this.color = opts.color
 
-        /** The column where to get the height values.
-         * @type {string} */
-        this.heightCol = opts.heightCol
-
-        /** A function returning the height of a cell.
-         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        this.height = opts.height || ((v, r, s, zf) => r * 0.4)
+        /** A function returning the height of a cell in geographical unit.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.height = opts.height || ((cell, resolution, z, viewScale) => resolution * 0.4)
 
         /** The perspective angle, in degree, within [-180,180], from [O,x] axis.
          * @type {number} */
         this.angle = opts.angle != undefined ? opts.angle : 50
 
         /** A function returning the corner line stroke style.
-         * @type {function(import('../Dataset.js').Cell,number,number,number):string} */
-        this.cornerLineStrokeColor = opts.cornerLineStrokeColor || ((c, r, zf, angle) => "#999")
+         * @type {function(import('../core/Dataset.js').Cell,number,number,number):string} */
+        this.cornerLineStrokeColor = opts.cornerLineStrokeColor || ((c, r, z, angle) => "#999")
 
         /** A function returning the corner line width.
-        * @type {function(import('../Dataset.js').Cell,number,number,number):number} */
-        this.cornerLineWidth = opts.cornerLineWidth || ((c, r, zf, angle) => (angle % 90 == 0 ? 0 : 0.8 * zf))
+        * @type {function(import('../core/Dataset.js').Cell,number,number,number):number} */
+        this.cornerLineWidth = opts.cornerLineWidth || ((c, r, z, angle) => (angle % 90 == 0 ? 0 : 0.8 * z))
 
         /**
         * Show vertical cross-sections.
@@ -52,44 +49,39 @@ export class IsoFenceStyle extends Style {
     }
 
     /**
-     * Draw cells as segments.
-     *
-     * @param {Array.<import("../Dataset.js").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas.js").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     * @override
      */
-    draw(cells, r, cg) {
+    draw(cells, geoCanvas, resolution) {
+
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        //zoom factor
-        const zf = cg.getZf()
+        //
+        const z = geoCanvas.view.z
 
-        let stat
-        if (this.heightCol) {
-            //if size is used, sort cells by size so that the biggest are drawn first
-            cells.sort((c1, c2) => c2[this.heightCol] - c1[this.heightCol])
-            //and compute statistics
-            stat = Style.getStatistics(cells, (c) => c[this.heightCol], true)
-        }
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
         //nb categories - used for radar and agepyramid
         const cats = Object.keys(this.color)
 
         //half resolution
-        const r2 = r / 2
+        const r2 = resolution / 2
 
         //get offset
         // @ts-ignore
-        const offset = this.offset(undefined, r, zf), dx = offset.dx, dy = offset.dy
-
-        //height
-        /** @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        let h_ = this.height
+        const offset = this.offset(undefined, resolution, z), dx = offset.dx, dy = offset.dy
 
         //make sides
         /**  @type {Array.<Side>} */
-        const sides = []
+        const sides = SideStyle.buildSides(cells, resolution, this.angle % 180 != 90 && this.sVert, this.angle % 180 != 0 && this.sHor, true)
+
+
+
+        /*const sides = []
 
         //make horizontal sides - except when angle%180=0
         //sort cells by x and y
@@ -99,14 +91,14 @@ export class IsoFenceStyle extends Style {
             for (let i = 1; i < cells.length; i++) {
                 let c2 = cells[i]
 
-                if ((c1.y + r == c2.y) && (c1.x == c2.x))
+                if ((c1.y + resolution == c2.y) && (c1.x == c2.x))
                     //cells in same column and touch along horizontal side
                     //make shared side
                     sides.push({ x: c1.x + r2, y: c2.y, or: 'h', c1: c1, c2: c2 })
                 else {
                     //cells do not touch along horizontal side
                     //make two sides: top one for c1, bottom for c2
-                    sides.push({ x: c1.x + r2, y: c1.y + r, or: 'h', c1: c1, c2: undefined })
+                    sides.push({ x: c1.x + r2, y: c1.y + resolution, or: 'h', c1: c1, c2: undefined })
                     sides.push({ x: c2.x + r2, y: c2.y, or: 'h', c1: undefined, c2: c2 })
                 }
 
@@ -122,20 +114,20 @@ export class IsoFenceStyle extends Style {
             for (let i = 1; i < cells.length; i++) {
                 let c2 = cells[i]
 
-                if ((c1.x + r == c2.x) && (c1.y == c2.y))
+                if ((c1.x + resolution == c2.x) && (c1.y == c2.y))
                     //cells in same row and touch along vertical side
                     //make shared side
                     sides.push({ x: c2.x, y: c1.y + r2, or: 'v', c1: c1, c2: c2 })
                 else {
                     //cells do not touch along vertical side
                     //make two sides: right one for c1, left for c2
-                    sides.push({ x: c1.x + r, y: c1.y + r2, or: 'v', c1: c1, c2: undefined })
+                    sides.push({ x: c1.x + resolution, y: c1.y + r2, or: 'v', c1: c1, c2: undefined })
                     sides.push({ x: c2.x, y: c2.y + r2, or: 'v', c1: undefined, c2: c2 })
                 }
 
                 c1 = c2
             }
-        }
+        }*/
 
         //
         if (sides.length == 0) return
@@ -145,40 +137,37 @@ export class IsoFenceStyle extends Style {
 
         //sort sides so that the back ones are drawn first. This depends on the angle.
         //depending on distance to the reference corner point
-        const xCorner = Math.abs(this.angle) < 90 ? cg.extGeo.xMin : cg.extGeo.xMax
-        const yCorner = this.angle < 0 ? cg.extGeo.yMax : cg.extGeo.yMin
+        const xCorner = Math.abs(this.angle) < 90 ? geoCanvas.extGeo.xMin : geoCanvas.extGeo.xMax
+        const yCorner = this.angle < 0 ? geoCanvas.extGeo.yMax : geoCanvas.extGeo.yMin
         sides.sort((s1, s2) => (Math.hypot(s2.x - xCorner, s2.y - yCorner) - Math.hypot(s1.x - xCorner, s1.y - yCorner)))
 
         //prepare function to draw corner line for a cell *c*
-        const drawCornerLine = (c) => {
+        const drawCornerLine = (cell) => {
 
-            if (!c) return
+            if (!cell) return
             //line style
-            const lw = this.cornerLineWidth ? this.cornerLineWidth(c, r, zf, this.angle) : 0.8 * zf
+            const lw = this.cornerLineWidth ? this.cornerLineWidth(cell, resolution, z, this.angle) : 0.8 * z
             if (lw == 0) return
-            cg.ctx.strokeStyle = this.cornerLineStrokeColor ? this.cornerLineStrokeColor(c, r, zf, this.angle) : "#333"
-            cg.ctx.lineWidth = lw
+            geoCanvas.ctx.strokeStyle = this.cornerLineStrokeColor ? this.cornerLineStrokeColor(cell, resolution, z, this.angle) : "#333"
+            geoCanvas.ctx.lineWidth = lw
 
             //height - in geo
-            const hG = h_(c[this.heightCol], r, stat, zf)
+            const hG = this.height(cell, resolution, z, viewScale)
 
             //draw line
-            cg.ctx.beginPath()
-            cg.ctx.moveTo(c.x + r2 + dx, c.y + r2 + dy)
-            cg.ctx.lineTo(c.x + r2 + hG * cos + dx, c.y + r2 + hG * sin + dy)
-            cg.ctx.stroke()
+            geoCanvas.ctx.beginPath()
+            geoCanvas.ctx.moveTo(cell.x + r2 + dx, cell.y + r2 + dy)
+            geoCanvas.ctx.lineTo(cell.x + r2 + hG * cos + dx, cell.y + r2 + hG * sin + dy)
+            geoCanvas.ctx.stroke()
         }
 
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
         //draw sides
-        cg.ctx.lineCap = "round";
+        geoCanvas.ctx.lineCap = "round";
         for (let s of sides) {
 
             //heights - in geo
-            const hG1 = s.c1 ? h_(s.c1[this.heightCol], r, stat, zf) : 0,
-                hG2 = s.c2 ? h_(s.c2[this.heightCol], r, stat, zf) : 0
+            const hG1 = s.c1 ? this.height(s.c1, resolution, z, viewScale) : 0,
+                hG2 = s.c2 ? this.height(s.c2, resolution, z, viewScale) : 0
 
             //compute totals for both cells
             const total1 = computeTotal(s.c1, cats),
@@ -201,33 +190,33 @@ export class IsoFenceStyle extends Style {
                 const h2n = hG2 * (cumul2 + v2) / total2 || 0
 
                 //make path
-                cg.ctx.beginPath()
+                geoCanvas.ctx.beginPath()
                 if (s.or == "h") {
                     //horizontal side - vertical section
                     //bottom left
-                    cg.ctx.moveTo(s.x + h1 * cos + dx, s.y - r2 + h1 * sin + dy)
+                    geoCanvas.ctx.moveTo(s.x + h1 * cos + dx, s.y - r2 + h1 * sin + dy)
                     //top left
-                    cg.ctx.lineTo(s.x + h2 * cos + dx, s.y + r2 + h2 * sin + dy)
+                    geoCanvas.ctx.lineTo(s.x + h2 * cos + dx, s.y + r2 + h2 * sin + dy)
                     //top right
-                    cg.ctx.lineTo(s.x + h2n * cos + dx, s.y + r2 + h2n * sin + dy)
+                    geoCanvas.ctx.lineTo(s.x + h2n * cos + dx, s.y + r2 + h2n * sin + dy)
                     //bottom right
-                    cg.ctx.lineTo(s.x + h1n * cos + dx, s.y - r2 + h1n * sin + dy)
+                    geoCanvas.ctx.lineTo(s.x + h1n * cos + dx, s.y - r2 + h1n * sin + dy)
                 } else {
                     //vertical side - horizontal section
                     //bottom left
-                    cg.ctx.moveTo(s.x - r2 + h1 * cos + dx, s.y + h1 * sin + dy)
+                    geoCanvas.ctx.moveTo(s.x - r2 + h1 * cos + dx, s.y + h1 * sin + dy)
                     //bottom right
-                    cg.ctx.lineTo(s.x + r2 + h2 * cos + dx, s.y + h2 * sin + dy)
+                    geoCanvas.ctx.lineTo(s.x + r2 + h2 * cos + dx, s.y + h2 * sin + dy)
                     //top right
-                    cg.ctx.lineTo(s.x + r2 + h2n * cos + dx, s.y + h2n * sin + dy)
+                    geoCanvas.ctx.lineTo(s.x + r2 + h2n * cos + dx, s.y + h2n * sin + dy)
                     //top left
-                    cg.ctx.lineTo(s.x - r2 + h1n * cos + dx, s.y + h1n * sin + dy)
+                    geoCanvas.ctx.lineTo(s.x - r2 + h1n * cos + dx, s.y + h1n * sin + dy)
                 }
                 //cg.ctx.closePath()
 
                 //fill
-                cg.ctx.fillStyle = color
-                cg.ctx.fill()
+                geoCanvas.ctx.fillStyle = color
+                geoCanvas.ctx.fill()
 
                 cumul1 += v1
                 cumul2 += v2
@@ -244,7 +233,7 @@ export class IsoFenceStyle extends Style {
         }
 
         //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, sSize: stat })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
     }
 }
 

package/src/style/JoyPlotStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
 
 /**
  *
@@ -13,43 +13,38 @@ export class JoyPlotStyle extends Style {
         super(opts)
         opts = opts || {}
 
-        /** The cell column where to get the value to represent.
-         * @type {string} */
-        this.heightCol = opts.heightCol
-
-        /** A function returning the height of a cell.
-         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        this.height = opts.height || ((v) => Math.sqrt(v))
+        /** A function returning the height of a cell in geographical unit.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.height = opts.height || ((c, r) => r * Math.random()) //(c,r,z,vs) => {}
 
         /**
          * @type {function(number,{min:number, max:number},number,number):string} */
-        this.lineColor = opts.lineColor || ((y, ys, r, zf) => '#BBB')
+        this.lineColor = opts.lineColor || ((y, ys, r, z) => '#BBB')
         /**
          * @type {function(number,{min:number, max:number},number,number):number} */
-        this.lineWidth = opts.lineWidth || ((y, ys, r, zf) => zf)
+        this.lineWidth = opts.lineWidth || ((y, ys, r, z) => z)
         /**
          * @type {function(number,{min:number, max:number},number,number):string} */
-        this.fillColor = opts.fillColor || ((y, ys, r, zf) => '#c08c5968')
+        this.fillColor = opts.fillColor || ((y, ys, r, z) => '#c08c5968')
     }
 
+
     /**
-     * Draw cells as squares depending on their value.
-     *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
-     * */
-    draw(cells, r, cg) {
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     * @override
+     */
+    draw(cells, geoCanvas, resolution) {
+
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        cg.ctx.lineJoin = 'round'
+        //
+        const z = geoCanvas.view.z
 
-        //zoom factor
-        const zf = cg.getZf()
-
-        //compute statistics
-        const stat = Style.getStatistics(cells, (c) => c[this.heightCol], true)
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
         //index cells by y and x
         /**  @type {object} */
@@ -60,25 +55,23 @@ export class JoyPlotStyle extends Style {
                 row = {}
                 ind[cell.y] = row
             }
-            row[cell.x] = this.height(cell[this.heightCol], r, stat, zf)
+            row[cell.x] = this.height(cell, resolution, z, viewScale)
         }
 
         //compute extent
-        const e = cg.extGeo
+        const e = geoCanvas.extGeo
         if (!e) return
-        const xMin = Math.floor(e.xMin / r) * r
-        const xMax = Math.floor(e.xMax / r) * r
-        const yMin = Math.floor(e.yMin / r) * r
-        const yMax = Math.floor(e.yMax / r) * r
+        const xMin = Math.floor(e.xMin / resolution) * resolution
+        const xMax = Math.floor(e.xMax / resolution) * resolution
+        const yMin = Math.floor(e.yMin / resolution) * resolution
+        const yMax = Math.floor(e.yMax / resolution) * resolution
 
         /**  @type {{min:number, max:number}} */
         const ys = { min: yMin, max: yMax }
 
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
         //draw lines, row by row, stating from the top
-        for (let y = yMax; y >= yMin; y -= r) {
+        geoCanvas.ctx.lineJoin = 'round'
+        for (let y = yMax; y >= yMin; y -= resolution) {
             //get row
             const row = ind[y]
 
@@ -86,15 +79,15 @@ export class JoyPlotStyle extends Style {
             if (!row) continue
 
             //place first point
-            cg.ctx.beginPath()
-            cg.ctx.moveTo(xMin - r / 2, y)
+            geoCanvas.ctx.beginPath()
+            geoCanvas.ctx.moveTo(xMin - resolution / 2, y)
 
             //store the previous height
             /** @type {number|undefined} */
             let hG_
 
             //go through the line cells
-            for (let x = xMin; x <= xMax; x += r) {
+            for (let x = xMin; x <= xMax; x += resolution) {
                 //get column value
                 /** @type {number} */
                 let hG = row[x]
@@ -103,32 +96,32 @@ export class JoyPlotStyle extends Style {
                 if (hG || hG_) {
                     //draw line only when at least one of both values is non-null
                     //TODO test bezierCurveTo
-                    cg.ctx.lineTo(x + r / 2, y + hG)
+                    geoCanvas.ctx.lineTo(x + resolution / 2, y + hG)
                 } else {
                     //else move the point
-                    cg.ctx.moveTo(x + r / 2, y)
+                    geoCanvas.ctx.moveTo(x + resolution / 2, y)
                 }
                 //store the previous value
                 hG_ = hG
             }
 
             //last point
-            if (hG_) cg.ctx.lineTo(xMax + r / 2, y)
+            if (hG_) geoCanvas.ctx.lineTo(xMax + resolution / 2, y)
 
             //draw fill
-            const fc = this.fillColor(y, ys, r, zf)
+            const fc = this.fillColor(y, ys, resolution, z)
             if (fc && fc != 'none') {
-                cg.ctx.fillStyle = fc
-                cg.ctx.fill()
+                geoCanvas.ctx.fillStyle = fc
+                geoCanvas.ctx.fill()
             }
 
             //draw line
-            const lc = this.lineColor(y, ys, r, zf)
-            const lw = this.lineWidth(y, ys, r, zf)
+            const lc = this.lineColor(y, ys, resolution, z)
+            const lw = this.lineWidth(y, ys, resolution, z)
             if (lc && lc != 'none' && lw > 0) {
-                cg.ctx.strokeStyle = lc
-                cg.ctx.lineWidth = lw
-                cg.ctx.stroke()
+                geoCanvas.ctx.strokeStyle = lc
+                geoCanvas.ctx.lineWidth = lw
+                geoCanvas.ctx.stroke()
             }
         }
     }

package/src/style/LegoStyle.js

@@ -3,8 +3,8 @@
 
 import { TanakaStyle } from './TanakaStyle.js'
 import { StrokeStyle } from './StrokeStyle.js'
-import { SquareColorCatWGLStyle } from './SquareColorCatWGLStyle.js'
-import { Style } from '../Style.js'
+import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.js'
+import { Style } from '../core/Style.js'
 
 /**
  * @author Julien Gaffuri
@@ -67,7 +67,7 @@ export class LegoStyle {
         opts.colBright = opts.colBright || '#aaa'
 
         //
-        const s = new SquareColorCatWGLStyle({ colorCol: col, color: opts.color })
+        const s = new SquareColorCategoryWebGLStyle({ colorCol: col, color: opts.color })
         //style to show limits between pieces
         const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (v, r, s, z) => 0.2 * z })
 
@@ -91,7 +91,7 @@ class LegoTopStyle extends Style {
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        cg.ctx.lineWidth = 0.6 * cg.getZf()
+        cg.ctx.lineWidth = 0.6 * cg.view.z
 
         //dark part
         cg.ctx.strokeStyle = this.colDark