gridviz 2.1.16 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "2.1.16",
+    "version": "3.0.0",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -49,10 +49,11 @@
         "src/**/*.js"
     ],
     "dependencies": {
+        "d3-array": "^3.2.4",
         "d3-color": "^3.1.0",
         "d3-fetch": "^3.0.1",
-        "d3-format": "^3.1.0",
         "d3-random": "^3.0.1",
+        "d3-scale": "^4.0.2",
         "d3-selection": "^3.0.0",
         "d3-zoom": "^3.0.0"
     },

package/src/button/Button.js

@@ -16,11 +16,10 @@ export class Button {
      * opts.x
      * opts.y
      */
-    constructor(opts) {
-        opts = opts || {}
+    constructor(opts = {}) {
 
-        this.app = opts.app
-        this.parentNode = opts.parentNode || opts.app.container
+        this.map = opts.map
+        this.parentNode = opts.parentNode || opts.map.container
 
         // the div element
         if (this.id) this.div = select('#' + this.id)
@@ -30,22 +29,22 @@ export class Button {
             if (this.id) this.div.attr('id', this.id)
         }
 
-        if (opts.title) this.div.attr('title',opts.title)
-        if (opts.class) this.div.attr('class',opts.class)
+        if (opts.title) this.div.attr('title', opts.title)
+        if (opts.class) this.div.attr('class', opts.class)
 
         // add events
         if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)
 
         //set styles
-        this.style('box-shadow','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.style('background-color','#ffffff')
-        this.style('position' , 'absolute')
-        this.style('cursor' , 'pointer')
-        this.style('display' , 'flex')
-        this.style('justify-content' , 'center')
-        this.style('align-items' , 'center')
-        this.style('width' , '30px')
-        this.style('height' , '30px')
+        this.style('box-shadow', '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.style('background-color', '#ffffff')
+        this.style('position', 'absolute')
+        this.style('cursor', 'pointer')
+        this.style('display', 'flex')
+        this.style('justify-content', 'center')
+        this.style('align-items', 'center')
+        this.style('width', '30px')
+        this.style('height', '30px')
         // this.style(padding , '4px'
 
 

package/src/button/FullscreenButton.js

@@ -43,9 +43,9 @@ export class FullscreenButton extends Button {
         </svg>
         `
 
-        //save initial app dimensions
-        this.defaultHeight = this.app.h
-        this.defaultWidth = this.app.w
+        //save initial map dimensions
+        this.defaultHeight = this.map.h
+        this.defaultWidth = this.map.w
 
         // event handler
         this.div.on('click', (e) => {
@@ -73,21 +73,21 @@ export class FullscreenButton extends Button {
 
     onClickFunction(e) {
         if (this.isFullscreen) {
-            this.closeFullscreen(this.app.container)
+            this.closeFullscreen(this.map.container)
             //resize canvas to default
-            this.app.h = this.defaultHeight
-            this.app.w = this.defaultWidth
-            this.app.cg.h = this.defaultHeight
-            this.app.cg.w = this.defaultWidth
-            this.app.cg.canvas.setAttribute('width', '' + this.defaultWidth)
-            this.app.cg.canvas.setAttribute('height', '' + this.defaultHeight)
-            this.app.redraw()
+            this.map.h = this.defaultHeight
+            this.map.w = this.defaultWidth
+            this.map.geoCanvas.h = this.defaultHeight
+            this.map.geoCanvas.w = this.defaultWidth
+            this.map.geoCanvas.canvas.setAttribute('width', '' + this.defaultWidth)
+            this.map.geoCanvas.canvas.setAttribute('height', '' + this.defaultHeight)
+            this.map.redraw()
             this.isFullscreen = false
         } else {
-            this.openFullscreen(this.app.container)
+            this.openFullscreen(this.map.container)
             //resize canvas to fullscreen
-            this.app.h = window.screen.height
-            this.app.w = window.screen.width
+            this.map.h = window.screen.height
+            this.map.w = window.screen.width
             this.isFullscreen = true
         }
     }

package/src/button/ZoomButtons.js

@@ -83,13 +83,13 @@ export class ZoomButtons extends Button {
 
     /* Zoom in */
     zoomIn(e) {
-        this.app.setZoomFactor(this.app.getZoomFactor() * (1 - this.delta)).redraw()
+        this.map.setZoom(this.map.getZoom() * (1 - this.delta)).redraw()
         if (this.onZoom) this.onZoom(e)
     }
 
     /* Zoom out */
     zoomOut(e) {
-        this.app.setZoomFactor(this.app.getZoomFactor() * (1 + this.delta)).redraw()
+        this.map.setZoom(this.map.getZoom() * (1 + this.delta)).redraw()
         if (this.onZoom) this.onZoom(e)
     }
 }

package/src/{DatasetComponent.js → core/Dataset.js}

@@ -1,22 +1,33 @@
 //@ts-check
 'use strict'
 
+/**
+ * A grid cell.
+ * @typedef {{x: number, y: number}} Cell */
+
 /**
  * A dataset component, of grid cells.
  * @abstract
  *
  * @author Joseph Davies, Julien Gaffuri
  */
-export class DatasetComponent {
+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(import("./Dataset").Cell):boolean}} opts
+     * @param {{preprocess?:function(Cell):boolean}} opts
      * @abstract
      */
-    constructor(url, resolution, opts = {}) {
+    constructor(map, url, resolution, opts = {}) {
         opts = opts || {}
 
+        /**
+         * The map.
+         * @protected
+         * @type {import("./Map.js").Map} */
+        this.map = map
+
         /**
          * The url of the dataset.
          * @protected
@@ -31,12 +42,12 @@ export class DatasetComponent {
 
         /**
          * 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(import("./Dataset").Cell):boolean )| undefined } */
+         * @type {(function(Cell):boolean )| undefined } */
         this.preprocess = opts.preprocess || undefined
 
         /** The cells within the view
          * @protected
-         * @type {Array.<import("./Dataset").Cell>} */
+         * @type {Array.<Cell>} */
         this.cellsViewCache = []
     }
 
@@ -44,18 +55,17 @@ export class DatasetComponent {
      * Request data within a geographic envelope.
      *
      * @abstract
-     * @param {import("./Dataset").Envelope|undefined} extGeo
-     * @param {function():void} callback
+     * @param {import("./GeoCanvas").Envelope|undefined} extGeo
      * @returns {this}
      */
-    getData(extGeo, callback) {
+    getData(extGeo = undefined) {
         throw new Error('Method getData not implemented.')
     }
 
     /**
      * Fill the view cache with all cells which are within a geographical envelope.
      * @abstract
-     * @param {import("./Dataset").Envelope} extGeo The view geographical envelope.
+     * @param {import("./GeoCanvas").Envelope} extGeo The view geographical envelope.
      * @returns {void}
      */
     updateViewCache(extGeo) {
@@ -66,8 +76,8 @@ export class DatasetComponent {
      * Get a cell under a given position, if any.
      *
      * @param {{x:number,y:number}} posGeo
-     * @param {Array.<import("./Dataset").Cell>} cells Some cells from the dataset (a subset if necessary, usually the view cache).
-     * @returns {import("./Dataset").Cell|undefined}
+     * @param {Array.<Cell>} cells Some cells from the dataset (a subset if necessary, usually the view cache).
+     * @returns {Cell|undefined}
      */
     getCellFromPosition(posGeo, cells) {
         //compute candidate cell position
@@ -106,8 +116,19 @@ export class DatasetComponent {
         return this.resolution
     }
 
-    /** @returns {Array.<import("./Dataset").Cell>} */
+    /** @returns {Array.<Cell>} */
     getViewCache() {
         return this.cellsViewCache
     }
+
+    /**
+     * Return the relevant dataset for a specified zoom.
+     * @param {number} z
+     * @param {number} minPixelsPerCell
+     * @returns {Dataset|undefined}
+     * */
+    getDataset(z, minPixelsPerCell) {
+        return this
+    }
+
 }

package/src/core/Drawable.js

@@ -0,0 +1,60 @@
+//@ts-check
+'use strict'
+
+/**
+ * This is an abstract class used to group elements shared between Layer and Style classes.
+ * 
+ * @abstract
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Drawable {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** A function specifying if the element should be visible or not.
+         * The function parameter is the zoom level.
+        * @type {function(number):boolean} */
+        this.visible = opts.visible
+
+        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
+         *  The function parameter is the zoom level.
+         * (see CanvasRenderingContext2D: globalAlpha property)
+         * @type {(function(number):number)|undefined} */
+        this.alpha = opts.alpha
+
+        /** A function returning the blend operation.
+         * The function parameter is the zoom level.
+         * (see CanvasRenderingContext2D: globalCompositeOperation property)
+         * @type {function(number):GlobalCompositeOperation} */
+        this.blendOperation = opts.blendOperation || (z => "source-over")
+
+        /** @type {(function(number):string)|undefined} */
+        this.filterColor = opts.filterColor // (z) => "#eee7"
+    }
+
+    /**
+     * Draw layer filter.
+     * 
+     * @param {import("./GeoCanvas.js").GeoCanvas} geoCanvas The canvas where to draw the layer.
+     * @returns {void}
+     * @abstract
+     */
+    drawFilter(geoCanvas) {
+        //no filter: return
+        if (!this.filterColor) return
+
+        //get filter
+        const fc = this.filterColor(geoCanvas.view.z)
+
+        //no filter: return
+        if (!fc || fc == 'none') return
+
+        //draw filter
+        geoCanvas.ctx.fillStyle = fc
+        geoCanvas.ctx.fillRect(0, 0, geoCanvas.w, geoCanvas.h)
+    }
+
+}

package/src/{GeoCanvas.js → core/GeoCanvas.js}

@@ -3,8 +3,12 @@
 
 /** @typedef { {xMin: number, xMax: number, yMin: number, yMax: number} } Envelope */
 
+/**
+ * A viewshed.
+ * @typedef {{x: number, y: number, z: number}} View */
+
 import { select } from 'd3-selection'
-import { zoom, zoomIdentity } from 'd3-zoom'
+import { zoom as d3zoom, zoomIdentity } from 'd3-zoom'
 
 /**
  * A HTML canvas for geo data display, enhanced with zoom and pan capabilities.
@@ -15,11 +19,12 @@ export class GeoCanvas {
     /**
      * @constructor
      * @param {HTMLCanvasElement} canvas
-     * @param {object} center Geographical coordinates of the center
-     * @param {number} zf The zoom factor (pixel size, in ground m)
+     * @param {number} x The x coordinate of the view
+     * @param {number} y The y coordinate of the view
+     * @param {number} z The zoom level of the view (pixel size, in ground m)
      * @param {object} opts
      */
-    constructor(canvas, center, zf, opts) {
+    constructor(canvas, x = 0, y = 0, z = 0, opts = undefined) {
         this.opts = opts || {}
 
         /** @type {HTMLCanvasElement} */
@@ -38,24 +43,22 @@ export class GeoCanvas {
         /**@type {CanvasRenderingContext2D} */
         this.ctx = ctx
 
-        // set geo coordinates of the center
-        this.center = center || { x: this.w * 0.5, y: this.h * 0.5 }
-
-        // zoom factor: pixel size, in m/pix
-        /** @type {number} */
-        this.zf = zf
+        /** 
+         * z: pixel size, in m/pix
+         * @type {View}  */
+        this.view = { x: x, y: y, z: z }
 
         /** Background color.
          * @type {string} */
         this.backgroundColor = opts.backgroundColor || 'white'
 
-        /** @type {function():void} */
+        /** @type {function(object|undefined):void} */
         this.onZoomStartFun = opts.onZoomStartFun
 
-        /** @type {function():void} */
+        /** @type {function(object|undefined):void} */
         this.onZoomEndFun = opts.onZoomEndFun
 
-        /** @type {function():void} */
+        /** @type {function(object|undefined):void} */
         this.onZoomFun = opts.onZoomFun
 
         //current extent
@@ -66,7 +69,7 @@ export class GeoCanvas {
         //rely on d3 zoom for pan/zoom
         if (!opts.disableZoom) {
             let tP = zoomIdentity
-            const z = zoom()
+            const z = d3zoom()
                 //to make the zooming a bit faster
                 .wheelDelta((e) => -e.deltaY * (e.deltaMode === 1 ? 0.07 : e.deltaMode ? 1 : 0.004))
                 .on('zoom', (e) => {
@@ -76,7 +79,7 @@ export class GeoCanvas {
                         //pan
                         const dx = tP.x - t.x
                         const dy = tP.y - t.y
-                        this.pan(dx * this.getZf(), -dy * this.getZf())
+                        this.pan(dx * this.view.z, -dy * this.view.z)
                     } else {
                         const se = e.sourceEvent
                         if (se instanceof WheelEvent) {
@@ -106,17 +109,17 @@ export class GeoCanvas {
                 })
                 .on('start', (e) => {
                     this.canvasSave.c = document.createElement('canvas')
-                    this.canvasSave.c.setAttribute('width', '' + this.w)
-                    this.canvasSave.c.setAttribute('height', '' + this.h)
-                    this.canvasSave.c.getContext('2d').drawImage(this.canvas, 0, 0)
-                    this.canvasSave.dx = 0
-                    this.canvasSave.dy = 0
-                    this.canvasSave.f = 1
+                    this.canvasSave.c.setAttribute('width', '' + this.w);
+                    this.canvasSave.c.setAttribute('height', '' + this.h);
+                    this.canvasSave.c.getContext('2d')?.drawImage(this.canvas, 0, 0);
+                    this.canvasSave.dx = 0;
+                    this.canvasSave.dy = 0;
+                    this.canvasSave.f = 1;
 
                     if (this.onZoomStartFun) this.onZoomStartFun(e)
                 })
                 .on('end', (e) => {
-                    this.redraw(true)
+                    this.redraw()
                     this.canvasSave = { c: null, dx: 0, dy: 0, f: 1 }
 
                     if (this.onZoomEndFun) this.onZoomEndFun(e)
@@ -127,39 +130,24 @@ export class GeoCanvas {
 
         /** Zoom extent, to limit zoom in and out
          *  @type {Array.<number>} */
-        this.zfExtent = [0, Infinity]
+        this.zoomExtent = opts.zoomExtent || [0, Infinity]
 
         /** Canvas state, to be used to avoid unnecessary redraws on zoom/pan
          *  @type {{c:HTMLCanvasElement|null,dx:number,dy:number,f:number}} */
         this.canvasSave = { c: null, dx: 0, dy: 0, f: 1 }
     }
 
-    /** @param {{x:number,y:number}} v Geographical coordinates of the center */
-    setCenter(v) {
-        this.center = v
-    }
-    /** @returns {{x:number,y:number}} Geographical coordinates of the center */
-    getCenter() {
-        return this.center
-    }
+    /** @returns {View} */
+    getView() { return this.view }
 
-    /** @param {number} v The zoom factor (pixel size, in ground m) */
-    setZf(v) {
-        this.zf = v
-        if (this.slider) this.slider.attr('value', +this.zf)
-    }
-    /** @returns {number} The zoom factor (pixel size, in ground m) */
-    getZf() {
-        return this.zf
-    }
 
     /** @param {Array.<number>} v */
-    setZfExtent(v) {
-        this.zfExtent = v
+    setZoomExtent(v) {
+        this.zoomExtent = v
     }
     /** @returns {Array.<number>} */
-    getZfExtent() {
-        return this.zfExtent
+    getZoomExtent() {
+        return this.zoomExtent
     }
 
     /** Initialise canvas transform with identity transformation. */
@@ -169,22 +157,21 @@ export class GeoCanvas {
 
     /** Initialise canvas transform with geo to screen transformation, so that geo objects can be drawn directly in geo coordinates. */
     setCanvasTransform() {
-        const k = 1 / this.getZf()
-        const tx = -this.center.x / this.getZf() + this.w * 0.5
-        const ty = this.center.y / this.getZf() + this.h * 0.5
+        const k = 1 / this.view.z
+        const tx = -this.view.x / this.view.z + this.w * 0.5
+        const ty = this.view.y / this.view.z + this.h * 0.5
         this.ctx.setTransform(k, 0, 0, -k, tx, ty)
     }
 
     /** Get the transformation matrix to webGL screen coordinates, within [-1,1]*[-1,1] */
     getWebGLTransform() {
-        const kx = 2.0 / (this.w * this.getZf())
-        const ky = 2.0 / (this.h * this.getZf())
-        return [kx, 0.0, 0.0, 0.0, ky, 0.0, -kx * this.center.x, -ky * this.center.y, 1.0]
+        const kx = 2.0 / (this.w * this.view.z)
+        const ky = 2.0 / (this.h * this.view.z)
+        return [kx, 0.0, 0.0, 0.0, ky, 0.0, -kx * this.view.x, -ky * this.view.y, 1.0]
     }
 
-    /** The function specifying how to draw the map.
-     * @param {boolean} strong */
-    redraw(strong = true) {
+    /** The function specifying how to draw the map. */
+    redraw() {
         throw new Error('Method redraw not implemented.')
     }
 
@@ -207,13 +194,13 @@ export class GeoCanvas {
      */
     pan(dxGeo = 0, dyGeo = 0) {
         //TODO force extend to remain
-        this.center.x += dxGeo
-        this.center.y += dyGeo
+        this.view.x += dxGeo
+        this.view.y += dyGeo
         this.updateExtentGeo()
 
         if (this.canvasSave.c) {
-            this.canvasSave.dx -= dxGeo / this.getZf()
-            this.canvasSave.dy += dyGeo / this.getZf()
+            this.canvasSave.dx -= dxGeo / this.view.z
+            this.canvasSave.dy += dyGeo / this.view.z
             this.clear(this.backgroundColor)
             // this doesnt work on mobile https://github.com/eurostat/gridviz/issues/98
             this.ctx.drawImage(this.canvasSave.c, this.canvasSave.dx, this.canvasSave.dy)
@@ -222,31 +209,29 @@ export class GeoCanvas {
 
     /**
      * Zoom.
-     * @param {number} f The zoom factor, within ]0, Infinity]. 1 is for no change. <1 to zoom-in, >1 to zoom-out.
+     * @param {number} f The , within ]0, Infinity]. 1 is for no change. <1 to zoom-in, >1 to zoom-out.
      * @param {number} xGeo The x geo position fixed in the screen.
      * @param {number} yGeo The y geo position fixed in the screen.
      */
-    zoom(f = 1, xGeo = this.center.x, yGeo = this.center.y) {
+    zoom(f = 1, xGeo = this.view.x, yGeo = this.view.y) {
         //TODO force geo extend to remain
 
         //trying to zoom in/out beyond limit
-        if (this.zfExtent[0] == this.getZf() && f <= 1) return
-        if (this.zfExtent[1] == this.getZf() && f >= 1) return
+        if (this.zoomExtent[0] == this.view.z && f <= 1) return
+        if (this.zoomExtent[1] == this.view.z && f >= 1) return
 
         //ensure zoom extent preserved
-        const newZf = f * this.getZf()
-        if (newZf < this.zfExtent[0]) f = this.zfExtent[0] / this.getZf()
-        if (newZf > this.zfExtent[1]) f = this.zfExtent[1] / this.getZf()
-
-        this.setZf(f * this.getZf())
-        const dxGeo = (xGeo - this.center.x) * (1 - f)
-        this.center.x += dxGeo
-        const dyGeo = (yGeo - this.center.y) * (1 - f)
-        this.center.y += dyGeo
+        const newZf = f * this.view.z
+        if (newZf < this.zoomExtent[0]) f = this.zoomExtent[0] / this.view.z
+        if (newZf > this.zoomExtent[1]) f = this.zoomExtent[1] / this.view.z
+
+        this.view.z *= f
+        const dxGeo = (xGeo - this.view.x) * (1 - f)
+        this.view.x += dxGeo
+        const dyGeo = (yGeo - this.view.y) * (1 - f)
+        this.view.y += dyGeo
         this.updateExtentGeo()
 
-        //TODO
-        //this.redraw(false)
         if (this.canvasSave.c) {
             this.clear(this.backgroundColor)
             this.canvasSave.f /= f
@@ -296,113 +281,38 @@ export class GeoCanvas {
      * @returns {number} Screen x coordinate, in pix.
      */
     geoToPixX(xGeo) {
-        return (xGeo - this.center.x) / this.getZf() + this.w * 0.5
+        return (xGeo - this.view.x) / this.view.z + this.w * 0.5
     }
     /**
      * @param {number} yGeo Geo y coordinate, in m.
      * @returns {number} Screen y coordinate, in pix.
      */
     geoToPixY(yGeo) {
-        return -(yGeo - this.center.y) / this.getZf() + this.h * 0.5
+        return -(yGeo - this.view.y) / this.view.z + this.h * 0.5
     }
     /**
      * @param {number} x Screen x coordinate, in pix.
      * @returns {number} Geo x coordinate, in m.
      */
     pixToGeoX(x) {
-        return (x - this.w * 0.5) * this.getZf() + this.center.x
+        return (x - this.w * 0.5) * this.view.z + this.view.x
     }
     /**
      * @param {number} y Screen y coordinate, in pix.
      * @returns {number} Geo y coordinate, in m.
      */
     pixToGeoY(y) {
-        return -(y - this.h * 0.5) * this.getZf() + this.center.y
+        return -(y - this.h * 0.5) * this.view.z + this.view.y
     }
 
-    /** Get x,y,z elements from URL and assign them to the view center and zoom level. */
+    /** Get x,y,z elements from URL and assign them to the view. */
     setViewFromURL() {
         const x = GeoCanvas.getParameterByName('x'),
             y = GeoCanvas.getParameterByName('y'),
             z = GeoCanvas.getParameterByName('z')
-        const c = this.getCenter()
-        if (x != null && x != undefined && !isNaN(+x)) c.x = +x
-        if (y != null && y != undefined && !isNaN(+y)) c.y = +y
-        if (z != null && z != undefined && !isNaN(+z)) this.setZf(+z)
-    }
-
-    /**
-     *
-     * @param {string} id
-     * @param {object} opts
-     * @returns {this}
-     */
-    addZoomSlider(id, opts) {
-        opts = opts || {}
-        opts.width = opts.width || '30px'
-        opts.height = opts.height || '300px'
-
-        //the div element
-        const div = select('#' + id)
-        if (div.empty()) {
-            console.error('Could not find div element to build zoom slider. Id: ' + id)
-            return this
-        }
-
-        const th = this
-        /** */
-        this.slider = div
-            .append('input')
-            .attr('type', 'range')
-            .attr('min', this.getZfExtent()[0])
-            .attr('max', this.getZfExtent()[1])
-            .attr('value', this.getZf())
-            .on('input', function (d) {
-                if (!this || !this.value) return
-                const v = +this.value
-                select(this).attr('value', v)
-                th.setZf(v)
-                //redraw
-                th.redraw()
-            })
-            .style('width', opts.width)
-            .style('height', opts.height)
-            .style('opacity', 0.7)
-            .on('mouseover', function (d) {
-                select(this).style('opacity', 1)
-            })
-            .on('mouseout', function (d) {
-                select(this).style('opacity', 0.7)
-            })
-            .style('-webkit-appearance', 'slider-vertical') //for chrome
-            .style('writing-mode', 'bt-lr') //for IE/edge
-            .attr('orient', 'vertical') //for firefox
-            .style('background', 'lightgray')
-            .style('outline', 'none')
-            .style('-webkit-transition', '.2s')
-            .style('transition', 'opacity .2s')
-
-        //TODO
-        /*select(".slider::-webkit-slider-thumb")
-            .style("-webkit-appearance", "none")
-            .style("appearance", "none")
-            .style("width", "30px")
-            .style("height", "40px")
-            .style("background", "black")
-            .style("cursor", "pointer")*/
-
-        /*select("slider::-moz-range-thumb")
-            .style("-webkit-appearance", "none")
-            .style("width", "30px")
-            .style("height", "40px")
-            .style("background", "#04AA6D")
-            .style("cursor", "pointer")*/
-        /*
-            .slider::ms-thumb,
-        .slider::-moz-range-thumb {
-        }*/
-
-        return this
+        if (x != null && x != undefined && !isNaN(+x)) this.view.x = +x
+        if (y != null && y != undefined && !isNaN(+y)) this.view.y = +y
+        if (z != null && z != undefined && !isNaN(+z)) this.view.z = +z
     }
 
     /**