gridviz 2.1.11 → 2.1.13

package/src/button/Button.js

@@ -0,0 +1,54 @@
+/**
+ * Parent class for button elements used to interact with the gridviz viewer.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Button {
+    /**
+     * @param {Object} opts
+     * opts.parentNode
+     * opts.id
+     * opts.title
+     * opts.class
+     * opts.onClickFunction
+     * opts.x
+     * opts.y
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        this.app = opts.app
+        this.parentNode = opts.parentNode || opts.app.container
+        this.id = opts.id || 'button-' + Math.random()
+
+        // create HTML node
+        this.node = document.createElement('div')
+        this.node.id = this.id
+        if (opts.title) this.node.title = opts.title
+        if (opts.class) this.node.classList.add(opts.class) 
+
+        // add events
+        if (opts.onClickFunction) this.node.addEventListener('onclick', opts.onClickFunction)
+        this.node.addEventListener('mouseover', (e)=>{this.node.style.backgroundColor = 'lightgrey'})
+        this.node.addEventListener('mouseout', (e)=>{this.node.style.backgroundColor = '#ffffff'})
+
+        //set styles
+        this.node.classList.add(opts.class)
+        this.node.style.boxShadow =
+            '0 7px 8px rgba(0,47,103,.08), 0 0 22px rgba(0,47,103,.04), 0 12px 17px rgba(0,47,103,.04), 0 -4px 4px rgba(0,47,103,.04)' //.ecl-u-shadow-3
+        this.node.style.backgroundColor = '#ffffff' //.ecl-u-bg-white
+        this.node.style.position = 'absolute'
+        this.node.style.cursor = 'pointer'
+         this.node.style.display = 'flex'
+        this.node.style.justifyContent = 'center'
+        this.node.style.alignItems = 'center'
+        this.node.style.width = '30px'
+        this.node.style.height = '30px'
+        // this.node.style.padding = '4px'
+        this.node.style.top = opts.y + 'px'
+        this.node.style.left = opts.x + 'px'
+
+        // append to parent
+        this.parentNode.appendChild(this.node)
+    }
+}

package/src/button/FullscreenButton.js

@@ -0,0 +1,98 @@
+import { Button } from './Button.js'
+
+/**
+ * Button for toggling fullscreen mode
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class FullscreenButton extends Button {
+    /**
+     * @param {Object} opts
+     * opts.parentNode - the node that the button is appended to
+     * opts.canvas - the gridviz canvas
+     * opts.id
+     * opts.title - HTML title attribute
+     * opts.class - css class
+     * opts.onClickFunction
+     * opts.x - x position of the button
+     * opts.y - y position of the button
+     */
+
+    // default state
+    isFullscreen = false
+
+    constructor(opts) {
+        super(opts)
+
+        // append fullscreen icon to button container
+        this.node.innerHTML = `
+        <svg
+            style="height: 1.2rem; width: 1.2rem; fill:black; margin:0;"
+            focusable="false"
+            aria-hidden="true"
+        >
+            <svg fill="#000000" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
+            <title/>
+            <g>
+            <path d="M30,0H6A5.9966,5.9966,0,0,0,0,6V30a6,6,0,0,0,12,0V12H30A6,6,0,0,0,30,0Z"/>
+            <path d="M90,0H66a6,6,0,0,0,0,12H84V30a6,6,0,0,0,12,0V6A5.9966,5.9966,0,0,0,90,0Z"/>
+            <path d="M30,84H12V66A6,6,0,0,0,0,66V90a5.9966,5.9966,0,0,0,6,6H30a6,6,0,0,0,0-12Z"/>
+            <path d="M90,60a5.9966,5.9966,0,0,0-6,6V84H66a6,6,0,0,0,0,12H90a5.9966,5.9966,0,0,0,6-6V66A5.9966,5.9966,0,0,0,90,60Z"/>
+            </g>
+            </svg>
+        </svg>
+        `
+
+        //save initial app dimensions
+        this.defaultHeight = this.app.h
+        this.defaultWidth = this.app.w
+
+        // event handler
+        this.node.addEventListener('click', (e) => {
+            this.onClickFunction(e)
+        })
+
+    }
+
+    onClickFunction(e) {
+        if (this.isFullscreen) {
+            this.closeFullscreen(containerDiv)
+            //resize canvas to default
+            this.app.h = this.defaultHeight
+            this.app.w = this.defaultWidth
+            this.isFullscreen = false
+        } else {
+            this.openFullscreen(containerDiv)
+            //resize canvas to fullscreen
+            this.app.h = window.screen.height
+            this.app.w = window.screen.width
+            this.isFullscreen = true
+        }
+    }
+
+    /* Open fullscreen */
+    openFullscreen(elem) {
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen()
+        } else if (elem.webkitRequestFullscreen) {
+            /* Safari */
+            elem.webkitRequestFullscreen()
+        } else if (elem.msRequestFullscreen) {
+            /* IE11 */
+            elem.msRequestFullscreen()
+        }
+    }
+
+    /* Close fullscreen */
+    closeFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen()
+        } else if (document.webkitExitFullscreen) {
+            /* Safari */
+            document.webkitExitFullscreen()
+        } else if (document.msExitFullscreen) {
+            /* IE11 */
+            document.msExitFullscreen()
+        }
+    }
+}

package/src/button/ZoomButtons.js

@@ -0,0 +1,72 @@
+import { Button } from './Button.js'
+
+
+/**
+ * Button for toggling fullscreen mode
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ZoomButtons extends Button {
+    /**
+     * @param {Object} opts
+     */
+    constructor(opts) {
+        super(opts)
+
+        this.onZoom = opts.onZoom // custom user event handler
+        this.delta = opts.delta || 0.2
+
+        // zoom in btn
+        this.zoomInBtn = document.createElement('a')
+        this.zoomInBtn.innerHTML = `<a id="zoomin" class="gridviz-zoom-button" title="Zoom in">+</a>`
+        this.zoomInBtn.title = 'Zoom in';
+        this.zoomInBtn.addEventListener('click', (e)=>{this.zoomIn(e)})
+        this.zoomInBtn.addEventListener('mouseover', (e)=>{this.zoomInBtn.style.backgroundColor = 'lightgrey'})
+        this.zoomInBtn.addEventListener('mouseout', (e)=>{this.zoomInBtn.style.backgroundColor = '#ffffff'})
+
+        // zoom out btn
+        this.zoomOutBtn = document.createElement('a')
+        this.zoomOutBtn.innerHTML = `<a id="zoomin" class="gridviz-zoom-button" title="Zoom out">-</a>`
+        this.zoomOutBtn.title = 'Zoom out';
+        this.zoomOutBtn.addEventListener('click', (e)=>{this.zoomOut(e)})
+        this.zoomOutBtn.addEventListener('mouseover', (e)=>{this.zoomOutBtn.style.backgroundColor = 'lightgrey'})
+        this.zoomOutBtn.addEventListener('mouseout', (e)=>{this.zoomOutBtn.style.backgroundColor = '#ffffff'})
+
+        //set styles
+        let btns = [this.zoomInBtn, this.zoomOutBtn]
+        btns.forEach((btn, i)=>{
+            btn.style.alignItems = 'center';
+            btn.style.justifyContent = 'center';
+            btn.style.display = 'flex';
+            btn.style.border = 'none';
+            btn.style.color = 'black';
+            btn.style.textAlign = 'center';
+            btn.style.textDecoration = 'none';
+            btn.style.padding = '4px';
+            btn.style.fontSize = '20px';
+            btn.style.fontWeight = 'bold';
+            btn.style.userSelect = 'none';
+            if (i==0) btn.style.borderBottom = '1px solid grey'
+        })
+
+        // unset parent class height
+        this.node.style.height="unset"
+        this.node.style.display="unset"
+
+        // append to button container
+        this.node.appendChild(this.zoomInBtn)
+        this.node.appendChild(this.zoomOutBtn)
+    }
+
+    /* Zoom in */
+    zoomIn(e) {
+        this.app.setZoomFactor(this.app.getZoomFactor() * (1 - this.delta)).redraw()
+        if (this.onZoom) this.onZoom(e)
+    }
+
+    /* Zoom out */
+    zoomOut(e) {
+        this.app.setZoomFactor(this.app.getZoomFactor() * (1 + this.delta)).redraw()
+        if (this.onZoom) this.onZoom(e)
+    }
+}

package/src/dataset/COGeo.js

@@ -1,24 +1,24 @@
-//@ts-check
-'use strict'
-
-import { DatasetComponent } from '../DatasetComponent.js'
-
-/**
- * @todo
- * A dataset composed of a COGeo file.
- * @see https://www.cogeo.org/
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class COGeo extends DatasetComponent {
-    /**
-     *
-     * @param {String} url
-     * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
-     */
-    constructor(url, opts = {}) {
-        super(url, 0, opts)
-    }
-
-    //TODO Use https://geotiffjs.github.io/
-}
+//@ts-check
+'use strict'
+
+import { DatasetComponent } from '../DatasetComponent.js'
+
+/**
+ * @todo
+ * A dataset composed of a COGeo file.
+ * @see https://www.cogeo.org/
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class COGeo extends DatasetComponent {
+    /**
+     *
+     * @param {String} url
+     * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
+     */
+    constructor(url, opts = {}) {
+        super(url, 0, opts)
+    }
+
+    //TODO Use https://geotiffjs.github.io/
+}

package/src/dataset/CSVGrid.js

@@ -1,104 +1,104 @@
-//@ts-check
-'use strict'
-
-/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset").Envelope }} GridInfo */
-
-import { csv } from 'd3-fetch'
-import { DatasetComponent } from '../DatasetComponent.js'
-
-/**
- * A dataset composed of a single CSV file (not tiled).
- *
- * @author Joseph Davies, Julien Gaffuri
- */
-export class CSVGrid extends DatasetComponent {
-    /**
-     * @param {string} url The URL of the dataset.
-     * @param {number} resolution The dataset resolution in geographical unit.
-     * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
-     */
-    constructor(url, resolution, opts = {}) {
-        super(url, resolution, opts)
-
-        /**
-         * @private
-         * @type {Array.<import("../Dataset").Cell>} */
-        this.cells = []
-
-        /**
-         * @type {string}
-         * @private  */
-        this.infoLoadingStatus = 'notLoaded'
-    }
-
-    /**
-     * Request data within a geographic envelope.
-     *
-     * @param {import("../Dataset").Envelope|undefined} e
-     * @param {function():void} redraw
-     */
-    getData(e, redraw) {
-        //check if data already loaded
-        if (this.infoLoadingStatus != 'notLoaded') return this
-
-        //load data
-        this.infoLoadingStatus = 'loading'
-        ;(async () => {
-            try {
-                const data = await csv(this.url)
-
-                //convert coordinates in numbers
-                for (const c of data) {
-                    c.x = +c.x
-                    c.y = +c.y
-                }
-
-                //preprocess/filter
-                if (this.preprocess) {
-                    this.cells = []
-                    for (const c of data) {
-                        const b = this.preprocess(c)
-                        if (b == false) continue
-                        this.cells.push(c)
-                    }
-                } else {
-                    this.cells = data
-                }
-
-                //TODO check if redraw is necessary
-                //that is if the dataset belongs to a layer which is visible at the current zoom level
-
-                //execute the callback, usually a draw function
-                if (redraw) redraw()
-
-                this.infoLoadingStatus = 'loaded'
-            } catch (error) {
-                //mark as failed
-                this.infoLoadingStatus = 'failed'
-                this.cells = []
-            }
-        })()
-
-        return this
-    }
-
-    /**
-     * Fill the view cache with all cells which are within a geographical envelope.
-     *
-     * @param {import("../Dataset").Envelope} extGeo
-     * @returns {void}
-     */
-    updateViewCache(extGeo) {
-        //data not loaded yet
-        if (!this.cells) return
-
-        this.cellsViewCache = []
-        for (const cell of this.cells) {
-            if (+cell.x + this.resolution < extGeo.xMin) continue
-            if (+cell.x - this.resolution > extGeo.xMax) continue
-            if (+cell.y + this.resolution < extGeo.yMin) continue
-            if (+cell.y - this.resolution > extGeo.yMax) continue
-            this.cellsViewCache.push(cell)
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset").Envelope }} GridInfo */
+
+import { csv } from 'd3-fetch'
+import { DatasetComponent } from '../DatasetComponent.js'
+
+/**
+ * A dataset composed of a single CSV file (not tiled).
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class CSVGrid extends DatasetComponent {
+    /**
+     * @param {string} url The URL of the dataset.
+     * @param {number} resolution The dataset resolution in geographical unit.
+     * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
+     */
+    constructor(url, resolution, opts = {}) {
+        super(url, resolution, opts)
+
+        /**
+         * @private
+         * @type {Array.<import("../Dataset").Cell>} */
+        this.cells = []
+
+        /**
+         * @type {string}
+         * @private  */
+        this.infoLoadingStatus = 'notLoaded'
+    }
+
+    /**
+     * Request data within a geographic envelope.
+     *
+     * @param {import("../Dataset").Envelope|undefined} e
+     * @param {function():void} redraw
+     */
+    getData(e, redraw) {
+        //check if data already loaded
+        if (this.infoLoadingStatus != 'notLoaded') return this
+
+        //load data
+        this.infoLoadingStatus = 'loading'
+        ;(async () => {
+            try {
+                const data = await csv(this.url)
+
+                //convert coordinates in numbers
+                for (const c of data) {
+                    c.x = +c.x
+                    c.y = +c.y
+                }
+
+                //preprocess/filter
+                if (this.preprocess) {
+                    this.cells = []
+                    for (const c of data) {
+                        const b = this.preprocess(c)
+                        if (b == false) continue
+                        this.cells.push(c)
+                    }
+                } else {
+                    this.cells = data
+                }
+
+                //TODO check if redraw is necessary
+                //that is if the dataset belongs to a layer which is visible at the current zoom level
+
+                //execute the callback, usually a draw function
+                if (redraw) redraw()
+
+                this.infoLoadingStatus = 'loaded'
+            } catch (error) {
+                //mark as failed
+                this.infoLoadingStatus = 'failed'
+                this.cells = []
+            }
+        })()
+
+        return this
+    }
+
+    /**
+     * Fill the view cache with all cells which are within a geographical envelope.
+     *
+     * @param {import("../Dataset").Envelope} extGeo
+     * @returns {void}
+     */
+    updateViewCache(extGeo) {
+        //data not loaded yet
+        if (!this.cells) return
+
+        this.cellsViewCache = []
+        for (const cell of this.cells) {
+            if (+cell.x + this.resolution < extGeo.xMin) continue
+            if (+cell.x - this.resolution > extGeo.xMax) continue
+            if (+cell.y + this.resolution < extGeo.yMin) continue
+            if (+cell.y - this.resolution > extGeo.yMax) continue
+            this.cellsViewCache.push(cell)
+        }
+    }
+}