gridviz 2.1.10 → 2.1.11

package/package.json

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

package/src/style/IsoFenceStyle.js

@@ -28,7 +28,7 @@ export class IsoFenceStyle extends Style {
          * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
         this.height = opts.height || ((v, r, s, zf) => r * 0.4)
 
-        /** The perspective angle.
+        /** The perspective angle, in degree, within [-180,180], from [O,x] axis.
          * @type {number} */
         this.angle = opts.angle != undefined ? opts.angle : 50
 
@@ -76,9 +76,6 @@ export class IsoFenceStyle extends Style {
         //nb categories - used for radar and agepyramid
         const cats = Object.keys(this.color)
 
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
         //half resolution
         const r2 = r / 2
 
@@ -146,32 +143,46 @@ export class IsoFenceStyle extends Style {
         //angle in radians
         const aRad = this.angle * Math.PI / 180, cos = Math.cos(aRad), sin = Math.sin(aRad)
 
+        //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
+        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) => {
+
+            if (!c) return
+            //line style
+            const lw = this.cornerLineWidth ? this.cornerLineWidth(c, r, zf, this.angle) : 0.8 * zf
+            if (lw == 0) return
+            cg.ctx.strokeStyle = this.cornerLineStrokeColor ? this.cornerLineStrokeColor(c, r, zf, this.angle) : "#333"
+            cg.ctx.lineWidth = lw
+
+            //height - in geo
+            const hG = h_(c[this.heightCol], r, stat, zf)
+
+            //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()
+        }
+
         //draw in geo coordinates
         cg.setCanvasTransform()
 
-        //sort sides so that the back ones are drawn first. This depends on the angle
-        if (Math.abs(this.angle) <= 90)
-            //north east ones are drown first
-            sides.sort((s1, s2) => (Math.hypot(s2.x, s2.y) - Math.hypot(s1.x, s1.y)))
-        else if (this.angle > 90)
-            //north west ones are drown first
-            sides.sort((s1, s2) => (Math.hypot(s2.x - cg.extGeo.xMax, s2.y) - Math.hypot(s1.x - cg.extGeo.xMax, s1.y)))
-        else if (this.angle < 90)
-            //south west ones are drown first
-            sides.sort((s1, s2) => (Math.hypot(s2.x - cg.extGeo.xMax, s2.y - cg.extGeo.yMax) - Math.hypot(s1.x - cg.extGeo.xMax, s1.y - cg.extGeo.yMax)))
-
         //draw sides
+        cg.ctx.lineCap = "round";
         for (let s of sides) {
 
             //heights - in geo
-            /** @type {number} */
-            const hG1 = s.c1 ? h_(s.c1[this.heightCol], r, stat, zf) : 0
-            /** @type {number} */
-            const hG2 = s.c2 ? h_(s.c2[this.heightCol], r, stat, zf) : 0
+            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
 
             //compute totals for both cells
-            const total1 = computeTotal(s.c1, cats)
-            const total2 = computeTotal(s.c2, cats)
+            const total1 = computeTotal(s.c1, cats),
+                total2 = computeTotal(s.c2, cats)
             if (total1 == 0 && total2 == 0) continue
 
             let cumul1 = 0, cumul2 = 0
@@ -184,10 +195,10 @@ export class IsoFenceStyle extends Style {
                 if (v1 == 0 && v2 == 0) continue
 
                 //compute heights
-                const h1 = total1 > 0 ? hG1 * cumul1 / total1 : 0
-                const h1n = total1 > 0 ? hG1 * (cumul1 + v1) / total1 : 0
-                const h2 = total2 > 0 ? hG2 * cumul2 / total2 : 0
-                const h2n = total2 > 0 ? hG2 * (cumul2 + v2) / total2 : 0
+                const h1 = hG1 * cumul1 / total1 || 0
+                const h1n = hG1 * (cumul1 + v1) / total1 || 0
+                const h2 = hG2 * cumul2 / total2 || 0
+                const h2n = hG2 * (cumul2 + v2) / total2 || 0
 
                 //make path
                 cg.ctx.beginPath()
@@ -212,7 +223,7 @@ export class IsoFenceStyle extends Style {
                     //top left
                     cg.ctx.lineTo(s.x - r2 + h1n * cos + dx, s.y + h1n * sin + dy)
                 }
-                cg.ctx.closePath()
+                //cg.ctx.closePath()
 
                 //fill
                 cg.ctx.fillStyle = color
@@ -220,27 +231,16 @@ export class IsoFenceStyle extends Style {
 
                 cumul1 += v1
                 cumul2 += v2
-                //break
-            }
-        }
-
-        //draw corner lines
-        for (let c of cells) {
-
-            //line style
-            const lw = this.cornerLineWidth ? this.cornerLineWidth(c, r, zf, this.angle) : 0.8 * zf
-            if (lw == 0) continue
-            cg.ctx.strokeStyle = this.cornerLineStrokeColor ? this.cornerLineStrokeColor(c, r, zf, this.angle) : "#333"
-            cg.ctx.lineWidth = lw
 
-            //height - in geo
-            const hG = h_(c[this.heightCol], r, stat, zf)
-
-            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.closePath()
-            cg.ctx.stroke()
+                //TODO draw only one line
+                //draw corner line
+                //if (s.or == "h") {
+                drawCornerLine(s.c1)
+                drawCornerLine(s.c2)
+                //if (this.angle > 0 && s.or == "h") drawCornerLine(s.c2)
+                //else drawCornerLine(s.c2)
+                //}
+            }
         }
 
         //update legends