gridviz 3.0.24 → 3.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.24",
+    "version": "3.0.26",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -71,4 +71,4 @@
     "engines": {
         "node": ">=14"
     }
-}
+}

package/src/core/GeoCanvas.js

@@ -30,6 +30,7 @@ export class GeoCanvas {
 
         /** @type {HTMLCanvasElement} */
         this.canvas = canvas
+        this.canvas.style.cursor = 'grab'          // default shown when hover
 
         /** @type {number} */
         this.w = this.canvas.offsetWidth
@@ -85,6 +86,7 @@ export class GeoCanvas {
                 // to make the zooming a bit faster
                 .wheelDelta((e) => -e.deltaY * (e.deltaMode === 1 ? 0.07 : e.deltaMode ? 1 : 0.004))
                 .on('zoom', (e) => {
+                    this._isZooming = true;
                     const t = e.transform
                     const zoomFactor = tP.k / t.k
                     if (zoomFactor == 1) {
@@ -101,7 +103,9 @@ export class GeoCanvas {
                 })
                 .on('start', (e) => {
                     // start of zoom event
-                     this._isZooming = true;
+                    // show grabbing during pan/zoom
+                    try { this.canvas.style.cursor = 'grabbing' } catch (err) { }
+                    this._isZooming = true;
                     // save the current canvas state to keep onscreen during pan/zoom before redrawing
                     this.canvasSave.c = document.createElement('canvas')
                     this.canvasSave.c.setAttribute('width', '' + this.w)
@@ -114,11 +118,13 @@ export class GeoCanvas {
                 })
                 .on('end', (e) => {
                     // end of pan/zoom event
+                    // restore cursor
+                    try { this.canvas.style.cursor = 'grab' } catch (err) { }
                     this._isZooming = false;
                     this.redraw()
                     this.canvasSave = { c: null, dx: 0, dy: 0, f: 1 }
                     if (this.onZoomEndFun) this.onZoomEndFun(e)
-                        
+
                 })
             // @ts-ignore
             z(select(this.canvas))

package/src/core/Map.js

@@ -276,6 +276,7 @@ export class Map {
         }
 
         if (focus) {
+            this.geoCanvas.canvas.style.cursor = 'pointer';
             this.tooltip.html(focus.html)
             this.tooltip.setPosition(e)
             this.tooltip.show()
@@ -309,6 +310,7 @@ export class Map {
             ctx.stroke()
             this.geoCanvas.ctx.drawImage(this.geoCanvas.offscreenCanvas, 0, 0)
         } else {
+            this.geoCanvas.canvas.style.cursor = 'default';
             this.tooltip.hide()
             if (this.canvasSave) this.geoCanvas.ctx.drawImage(this.canvasSave, 0, 0)
         }