gridviz 3.0.35 → 3.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +129 -129
- package/dist/gridviz.js +17486 -17486
- package/dist/gridviz.min.js +2 -2
- package/package.json +73 -73
- package/src/button/Button.js +67 -67
- package/src/button/FullscreenButton.js +121 -121
- package/src/button/ZoomButtons.js +103 -103
- package/src/core/Dataset.js +154 -154
- package/src/core/Drawable.js +78 -78
- package/src/core/GeoCanvas.js +443 -443
- package/src/core/Layer.js +23 -23
- package/src/core/Legend.js +108 -108
- package/src/core/Map.js +568 -568
- package/src/core/MultiResolutionDataset.js +93 -93
- package/src/core/Style.js +98 -98
- package/src/core/Tooltip.js +182 -182
- package/src/dataset/COGeo.js +25 -25
- package/src/dataset/CSVGrid.js +112 -112
- package/src/dataset/GeoTIFF.js +122 -122
- package/src/dataset/JSGrid.js +55 -55
- package/src/dataset/TiledGrid.js +302 -302
- package/src/dataset/worker.js +18 -18
- package/src/index.js +79 -79
- package/src/layer/BackgroundLayer.js +173 -173
- package/src/layer/BackgroundLayerImage.js +81 -81
- package/src/layer/BackgroundLayerWMS.js +104 -104
- package/src/layer/GeoJSONLayer.js +276 -276
- package/src/layer/GridLayer.js +166 -166
- package/src/layer/LabelLayer.js +194 -194
- package/src/legend/ColorCategoryLegend.js +109 -109
- package/src/legend/ColorDiscreteLegend.js +100 -100
- package/src/legend/ColorLegend.js +115 -115
- package/src/legend/OrientationLegend.js +89 -89
- package/src/legend/SizeLegend.js +224 -224
- package/src/legend/TernaryLegend.js +302 -302
- package/src/style/CompositionStyle.js +291 -291
- package/src/style/DotDensityStyle.js +133 -133
- package/src/style/ImageStyle.js +100 -100
- package/src/style/Interpolator.js +258 -258
- package/src/style/IsoFenceStyle.js +217 -217
- package/src/style/JoyPlotStyle.js +180 -180
- package/src/style/LegoStyle.js +132 -132
- package/src/style/MosaicStyle.js +99 -99
- package/src/style/NinjaStarStyle.js +102 -102
- package/src/style/PillarStyle.js +207 -207
- package/src/style/SegmentStyle.js +105 -105
- package/src/style/ShadingRayStyle.js +280 -280
- package/src/style/ShadingStyle.js +72 -72
- package/src/style/ShapeColorSizeStyle.js +147 -147
- package/src/style/SideCategoryStyle.js +112 -112
- package/src/style/SideStyle.js +217 -217
- package/src/style/SideTanakaStyle.js +154 -154
- package/src/style/SquareColorCategoryWebGLStyle.js +307 -294
- package/src/style/SquareColorWebGLStyle.js +126 -126
- package/src/style/StrokeStyle.js +135 -135
- package/src/style/TextStyle.js +110 -110
- package/src/style/TimeSeriesStyle.js +222 -222
- package/src/utils/WebGLRectangleColoring.js +106 -106
- package/src/utils/WebGLSquareColoring.js +118 -118
- package/src/utils/WebGLSquareColoringAdvanced.js +227 -227
- package/src/utils/WebGLSquareColoringKS.js +153 -153
- package/src/utils/scale.js +255 -255
- package/src/utils/stretching.js +120 -120
- package/src/utils/ternary.js +208 -208
- package/src/utils/utils.js +125 -125
- package/src/utils/webGLUtils.js +73 -73
- package/src/utils/zoomUtils.js +142 -142
package/package.json
CHANGED
|
@@ -1,74 +1,74 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "gridviz",
|
|
3
|
-
"version": "3.0.
|
|
4
|
-
"description": "Visualization tool for gridded statistics",
|
|
5
|
-
"keywords": [
|
|
6
|
-
"statistics",
|
|
7
|
-
"grid",
|
|
8
|
-
"gridded",
|
|
9
|
-
"grids",
|
|
10
|
-
"gridded statistics",
|
|
11
|
-
"dataviz",
|
|
12
|
-
"csv",
|
|
13
|
-
"GIS",
|
|
14
|
-
"WebGL",
|
|
15
|
-
"d3",
|
|
16
|
-
"cartography",
|
|
17
|
-
"bertin",
|
|
18
|
-
"geospatial",
|
|
19
|
-
"mapping"
|
|
20
|
-
],
|
|
21
|
-
"homepage": "https://github.com/eurostat/gridviz",
|
|
22
|
-
"author": "Joseph Davies, Julien Gaffuri",
|
|
23
|
-
"license": "EUPL-1.2",
|
|
24
|
-
"repository": {
|
|
25
|
-
"type": "git",
|
|
26
|
-
"url": "git+https://github.com/eurostat/gridviz.git"
|
|
27
|
-
},
|
|
28
|
-
"bugs": {
|
|
29
|
-
"url": "https://github.com/eurostat/gridviz/issues",
|
|
30
|
-
"email": "Joseph.DAVIES@ext.ec.europa.eu"
|
|
31
|
-
},
|
|
32
|
-
"type": "module",
|
|
33
|
-
"main": "dist/gridviz.min.js",
|
|
34
|
-
"module": "dist/gridviz.min.js",
|
|
35
|
-
"exports": {
|
|
36
|
-
"umd": "./dist/gridviz.min.js",
|
|
37
|
-
"default": "./src/index.js"
|
|
38
|
-
},
|
|
39
|
-
"scripts": {
|
|
40
|
-
"start": "webpack --config webpack.config.dev.cjs",
|
|
41
|
-
"server": "webpack serve -c webpack.config.dev.cjs",
|
|
42
|
-
"doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
|
|
43
|
-
"build-prod": "webpack --config webpack.config.prod.cjs",
|
|
44
|
-
"test": "jest",
|
|
45
|
-
"format": "prettier --write ."
|
|
46
|
-
},
|
|
47
|
-
"files": [
|
|
48
|
-
"dist/**/*.js",
|
|
49
|
-
"src/**/*.js"
|
|
50
|
-
],
|
|
51
|
-
"dependencies": {
|
|
52
|
-
"d3-array": "^3.2.4",
|
|
53
|
-
"d3-color": "^3.1.0",
|
|
54
|
-
"d3-fetch": "^3.0.1",
|
|
55
|
-
"d3-random": "^3.0.1",
|
|
56
|
-
"d3-scale": "^4.0.2",
|
|
57
|
-
"d3-selection": "^3.0.0",
|
|
58
|
-
"d3-zoom": "^3.0.0",
|
|
59
|
-
"jsdoc": "^4.0.4"
|
|
60
|
-
},
|
|
61
|
-
"devDependencies": {
|
|
62
|
-
"@babel/preset-env": "^7.25.4",
|
|
63
|
-
"babel-loader": "^8.1.0",
|
|
64
|
-
"jshint": "^2.12.0",
|
|
65
|
-
"prettier": "^2.8.8",
|
|
66
|
-
"webpack": "^5.96.1",
|
|
67
|
-
"webpack-cli": "^5.1.4",
|
|
68
|
-
"webpack-dev-server": "^5.1.0",
|
|
69
|
-
"webpack-livereload-plugin": "^3.0.2"
|
|
70
|
-
},
|
|
71
|
-
"engines": {
|
|
72
|
-
"node": ">=14"
|
|
73
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "gridviz",
|
|
3
|
+
"version": "3.0.36",
|
|
4
|
+
"description": "Visualization tool for gridded statistics",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"statistics",
|
|
7
|
+
"grid",
|
|
8
|
+
"gridded",
|
|
9
|
+
"grids",
|
|
10
|
+
"gridded statistics",
|
|
11
|
+
"dataviz",
|
|
12
|
+
"csv",
|
|
13
|
+
"GIS",
|
|
14
|
+
"WebGL",
|
|
15
|
+
"d3",
|
|
16
|
+
"cartography",
|
|
17
|
+
"bertin",
|
|
18
|
+
"geospatial",
|
|
19
|
+
"mapping"
|
|
20
|
+
],
|
|
21
|
+
"homepage": "https://github.com/eurostat/gridviz",
|
|
22
|
+
"author": "Joseph Davies, Julien Gaffuri",
|
|
23
|
+
"license": "EUPL-1.2",
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "git+https://github.com/eurostat/gridviz.git"
|
|
27
|
+
},
|
|
28
|
+
"bugs": {
|
|
29
|
+
"url": "https://github.com/eurostat/gridviz/issues",
|
|
30
|
+
"email": "Joseph.DAVIES@ext.ec.europa.eu"
|
|
31
|
+
},
|
|
32
|
+
"type": "module",
|
|
33
|
+
"main": "dist/gridviz.min.js",
|
|
34
|
+
"module": "dist/gridviz.min.js",
|
|
35
|
+
"exports": {
|
|
36
|
+
"umd": "./dist/gridviz.min.js",
|
|
37
|
+
"default": "./src/index.js"
|
|
38
|
+
},
|
|
39
|
+
"scripts": {
|
|
40
|
+
"start": "webpack --config webpack.config.dev.cjs",
|
|
41
|
+
"server": "webpack serve -c webpack.config.dev.cjs",
|
|
42
|
+
"doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
|
|
43
|
+
"build-prod": "webpack --config webpack.config.prod.cjs",
|
|
44
|
+
"test": "jest",
|
|
45
|
+
"format": "prettier --write ."
|
|
46
|
+
},
|
|
47
|
+
"files": [
|
|
48
|
+
"dist/**/*.js",
|
|
49
|
+
"src/**/*.js"
|
|
50
|
+
],
|
|
51
|
+
"dependencies": {
|
|
52
|
+
"d3-array": "^3.2.4",
|
|
53
|
+
"d3-color": "^3.1.0",
|
|
54
|
+
"d3-fetch": "^3.0.1",
|
|
55
|
+
"d3-random": "^3.0.1",
|
|
56
|
+
"d3-scale": "^4.0.2",
|
|
57
|
+
"d3-selection": "^3.0.0",
|
|
58
|
+
"d3-zoom": "^3.0.0",
|
|
59
|
+
"jsdoc": "^4.0.4"
|
|
60
|
+
},
|
|
61
|
+
"devDependencies": {
|
|
62
|
+
"@babel/preset-env": "^7.25.4",
|
|
63
|
+
"babel-loader": "^8.1.0",
|
|
64
|
+
"jshint": "^2.12.0",
|
|
65
|
+
"prettier": "^2.8.8",
|
|
66
|
+
"webpack": "^5.96.1",
|
|
67
|
+
"webpack-cli": "^5.1.4",
|
|
68
|
+
"webpack-dev-server": "^5.1.0",
|
|
69
|
+
"webpack-livereload-plugin": "^3.0.2"
|
|
70
|
+
},
|
|
71
|
+
"engines": {
|
|
72
|
+
"node": ">=14"
|
|
73
|
+
}
|
|
74
74
|
}
|
package/src/button/Button.js
CHANGED
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
import { select } from 'd3-selection'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Parent class for button elements used to interact with the gridviz viewer.
|
|
5
|
-
*
|
|
6
|
-
* @module button
|
|
7
|
-
* @author Joseph Davies, Julien Gaffuri
|
|
8
|
-
*/
|
|
9
|
-
export class Button {
|
|
10
|
-
/**
|
|
11
|
-
* @param {Object} opts
|
|
12
|
-
* opts.parentNode
|
|
13
|
-
* opts.id
|
|
14
|
-
* opts.title
|
|
15
|
-
* opts.class
|
|
16
|
-
* opts.onClickFunction
|
|
17
|
-
* opts.x
|
|
18
|
-
* opts.y
|
|
19
|
-
*/
|
|
20
|
-
constructor(opts = {}) {
|
|
21
|
-
this.map = opts.map
|
|
22
|
-
this.parentNode = opts.parentNode || opts.map.container
|
|
23
|
-
|
|
24
|
-
// the div element
|
|
25
|
-
if (opts.id) this.div = select('#' + opts.id)
|
|
26
|
-
|
|
27
|
-
if (!this.div || this.div.empty()) {
|
|
28
|
-
this.div = select(document.createElement('div'))
|
|
29
|
-
if (opts.id) this.div.attr('id', opts.id)
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
if (opts.title) this.div.attr('title', opts.title)
|
|
33
|
-
if (opts.class) this.div.attr('class', opts.class)
|
|
34
|
-
|
|
35
|
-
// add events
|
|
36
|
-
if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)
|
|
37
|
-
|
|
38
|
-
//set styles
|
|
39
|
-
this.style(
|
|
40
|
-
'box-shadow',
|
|
41
|
-
'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)'
|
|
42
|
-
) //.ecl-u-shadow-3
|
|
43
|
-
this.style('background-color', '#ffffff')
|
|
44
|
-
this.style('position', 'absolute')
|
|
45
|
-
this.style('cursor', 'pointer')
|
|
46
|
-
this.style('display', 'flex')
|
|
47
|
-
this.style('justify-content', 'center')
|
|
48
|
-
this.style('align-items', 'center')
|
|
49
|
-
this.style('width', '35px')
|
|
50
|
-
this.style('height', '30px')
|
|
51
|
-
// this.style(padding , '4px'
|
|
52
|
-
|
|
53
|
-
// append to parent
|
|
54
|
-
this.parentNode.appendChild(this.div.node())
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* Apply a style to the button div.
|
|
59
|
-
* @param {string} k
|
|
60
|
-
* @param {string} v
|
|
61
|
-
* @returns {this}
|
|
62
|
-
*/
|
|
63
|
-
style(k, v) {
|
|
64
|
-
this.div.style(k, v)
|
|
65
|
-
return this
|
|
66
|
-
}
|
|
67
|
-
}
|
|
1
|
+
import { select } from 'd3-selection'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Parent class for button elements used to interact with the gridviz viewer.
|
|
5
|
+
*
|
|
6
|
+
* @module button
|
|
7
|
+
* @author Joseph Davies, Julien Gaffuri
|
|
8
|
+
*/
|
|
9
|
+
export class Button {
|
|
10
|
+
/**
|
|
11
|
+
* @param {Object} opts
|
|
12
|
+
* opts.parentNode
|
|
13
|
+
* opts.id
|
|
14
|
+
* opts.title
|
|
15
|
+
* opts.class
|
|
16
|
+
* opts.onClickFunction
|
|
17
|
+
* opts.x
|
|
18
|
+
* opts.y
|
|
19
|
+
*/
|
|
20
|
+
constructor(opts = {}) {
|
|
21
|
+
this.map = opts.map
|
|
22
|
+
this.parentNode = opts.parentNode || opts.map.container
|
|
23
|
+
|
|
24
|
+
// the div element
|
|
25
|
+
if (opts.id) this.div = select('#' + opts.id)
|
|
26
|
+
|
|
27
|
+
if (!this.div || this.div.empty()) {
|
|
28
|
+
this.div = select(document.createElement('div'))
|
|
29
|
+
if (opts.id) this.div.attr('id', opts.id)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
if (opts.title) this.div.attr('title', opts.title)
|
|
33
|
+
if (opts.class) this.div.attr('class', opts.class)
|
|
34
|
+
|
|
35
|
+
// add events
|
|
36
|
+
if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)
|
|
37
|
+
|
|
38
|
+
//set styles
|
|
39
|
+
this.style(
|
|
40
|
+
'box-shadow',
|
|
41
|
+
'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)'
|
|
42
|
+
) //.ecl-u-shadow-3
|
|
43
|
+
this.style('background-color', '#ffffff')
|
|
44
|
+
this.style('position', 'absolute')
|
|
45
|
+
this.style('cursor', 'pointer')
|
|
46
|
+
this.style('display', 'flex')
|
|
47
|
+
this.style('justify-content', 'center')
|
|
48
|
+
this.style('align-items', 'center')
|
|
49
|
+
this.style('width', '35px')
|
|
50
|
+
this.style('height', '30px')
|
|
51
|
+
// this.style(padding , '4px'
|
|
52
|
+
|
|
53
|
+
// append to parent
|
|
54
|
+
this.parentNode.appendChild(this.div.node())
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Apply a style to the button div.
|
|
59
|
+
* @param {string} k
|
|
60
|
+
* @param {string} v
|
|
61
|
+
* @returns {this}
|
|
62
|
+
*/
|
|
63
|
+
style(k, v) {
|
|
64
|
+
this.div.style(k, v)
|
|
65
|
+
return this
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -1,121 +1,121 @@
|
|
|
1
|
-
import { Button } from './Button.js'
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Button for toggling fullscreen mode
|
|
5
|
-
*
|
|
6
|
-
* @module button
|
|
7
|
-
* @author Joseph Davies, Julien Gaffuri
|
|
8
|
-
*/
|
|
9
|
-
export class FullscreenButton extends Button {
|
|
10
|
-
/**
|
|
11
|
-
* @param {Object} opts
|
|
12
|
-
* opts.parentNode - the node that the button is appended to
|
|
13
|
-
* opts.canvas - the gridviz canvas
|
|
14
|
-
* opts.id
|
|
15
|
-
* opts.title - HTML title attribute
|
|
16
|
-
* opts.class - css class
|
|
17
|
-
* opts.onClickFunction
|
|
18
|
-
* opts.x - x position of the button
|
|
19
|
-
* opts.y - y position of the button
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
// default state
|
|
23
|
-
isFullscreen = false
|
|
24
|
-
|
|
25
|
-
constructor(opts) {
|
|
26
|
-
super(opts)
|
|
27
|
-
|
|
28
|
-
// append fullscreen icon to button container
|
|
29
|
-
this.div.node().innerHTML = `
|
|
30
|
-
<svg
|
|
31
|
-
style="height: 1.2rem; width: 1.2rem; fill:black; margin:0;"
|
|
32
|
-
focusable="false"
|
|
33
|
-
aria-hidden="true"
|
|
34
|
-
>
|
|
35
|
-
<svg fill="#000000" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
|
|
36
|
-
<title/>
|
|
37
|
-
<g>
|
|
38
|
-
<path d="M30,0H6A5.9966,5.9966,0,0,0,0,6V30a6,6,0,0,0,12,0V12H30A6,6,0,0,0,30,0Z"/>
|
|
39
|
-
<path d="M90,0H66a6,6,0,0,0,0,12H84V30a6,6,0,0,0,12,0V6A5.9966,5.9966,0,0,0,90,0Z"/>
|
|
40
|
-
<path d="M30,84H12V66A6,6,0,0,0,0,66V90a5.9966,5.9966,0,0,0,6,6H30a6,6,0,0,0,0-12Z"/>
|
|
41
|
-
<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"/>
|
|
42
|
-
</g>
|
|
43
|
-
</svg>
|
|
44
|
-
</svg>
|
|
45
|
-
`
|
|
46
|
-
|
|
47
|
-
//save initial map dimensions
|
|
48
|
-
this.defaultHeight = this.map.h
|
|
49
|
-
this.defaultWidth = this.map.w
|
|
50
|
-
|
|
51
|
-
// event handler
|
|
52
|
-
this.div.on('click', (e) => {
|
|
53
|
-
this.onClickFunction(e)
|
|
54
|
-
})
|
|
55
|
-
this.div.on('mouseover', (e) => {
|
|
56
|
-
this.style('background-color', 'lightgrey')
|
|
57
|
-
})
|
|
58
|
-
this.div.on('mouseout', (e) => {
|
|
59
|
-
this.style('background-color', '#ffffff')
|
|
60
|
-
})
|
|
61
|
-
|
|
62
|
-
//set position
|
|
63
|
-
if (opts.x) {
|
|
64
|
-
this.style('left', opts.x + 'px')
|
|
65
|
-
} else {
|
|
66
|
-
this.style('right', '10px')
|
|
67
|
-
}
|
|
68
|
-
if (opts.y) {
|
|
69
|
-
this.style('top', opts.y + 'px')
|
|
70
|
-
} else {
|
|
71
|
-
this.style('top', '90px')
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
onClickFunction(e) {
|
|
76
|
-
if (this.isFullscreen) {
|
|
77
|
-
this.closeFullscreen(this.map.container)
|
|
78
|
-
//resize canvas to default
|
|
79
|
-
this.map.h = this.defaultHeight
|
|
80
|
-
this.map.w = this.defaultWidth
|
|
81
|
-
this.map.geoCanvas.h = this.defaultHeight
|
|
82
|
-
this.map.geoCanvas.w = this.defaultWidth
|
|
83
|
-
this.map.geoCanvas.canvas.setAttribute('width', '' + this.defaultWidth)
|
|
84
|
-
this.map.geoCanvas.canvas.setAttribute('height', '' + this.defaultHeight)
|
|
85
|
-
this.map.redraw()
|
|
86
|
-
this.isFullscreen = false
|
|
87
|
-
} else {
|
|
88
|
-
this.openFullscreen(this.map.container)
|
|
89
|
-
//resize canvas to fullscreen
|
|
90
|
-
this.map.h = window.screen.height
|
|
91
|
-
this.map.w = window.screen.width
|
|
92
|
-
this.isFullscreen = true
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
/* Open fullscreen */
|
|
97
|
-
openFullscreen(elem) {
|
|
98
|
-
if (elem.requestFullscreen) {
|
|
99
|
-
elem.requestFullscreen()
|
|
100
|
-
} else if (elem.webkitRequestFullscreen) {
|
|
101
|
-
/* Safari */
|
|
102
|
-
elem.webkitRequestFullscreen()
|
|
103
|
-
} else if (elem.msRequestFullscreen) {
|
|
104
|
-
/* IE11 */
|
|
105
|
-
elem.msRequestFullscreen()
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
/* Close fullscreen */
|
|
110
|
-
closeFullscreen() {
|
|
111
|
-
if (document.exitFullscreen) {
|
|
112
|
-
document.exitFullscreen()
|
|
113
|
-
} else if (document.webkitExitFullscreen) {
|
|
114
|
-
/* Safari */
|
|
115
|
-
document.webkitExitFullscreen()
|
|
116
|
-
} else if (document.msExitFullscreen) {
|
|
117
|
-
/* IE11 */
|
|
118
|
-
document.msExitFullscreen()
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
1
|
+
import { Button } from './Button.js'
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Button for toggling fullscreen mode
|
|
5
|
+
*
|
|
6
|
+
* @module button
|
|
7
|
+
* @author Joseph Davies, Julien Gaffuri
|
|
8
|
+
*/
|
|
9
|
+
export class FullscreenButton extends Button {
|
|
10
|
+
/**
|
|
11
|
+
* @param {Object} opts
|
|
12
|
+
* opts.parentNode - the node that the button is appended to
|
|
13
|
+
* opts.canvas - the gridviz canvas
|
|
14
|
+
* opts.id
|
|
15
|
+
* opts.title - HTML title attribute
|
|
16
|
+
* opts.class - css class
|
|
17
|
+
* opts.onClickFunction
|
|
18
|
+
* opts.x - x position of the button
|
|
19
|
+
* opts.y - y position of the button
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
// default state
|
|
23
|
+
isFullscreen = false
|
|
24
|
+
|
|
25
|
+
constructor(opts) {
|
|
26
|
+
super(opts)
|
|
27
|
+
|
|
28
|
+
// append fullscreen icon to button container
|
|
29
|
+
this.div.node().innerHTML = `
|
|
30
|
+
<svg
|
|
31
|
+
style="height: 1.2rem; width: 1.2rem; fill:black; margin:0;"
|
|
32
|
+
focusable="false"
|
|
33
|
+
aria-hidden="true"
|
|
34
|
+
>
|
|
35
|
+
<svg fill="#000000" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
|
|
36
|
+
<title/>
|
|
37
|
+
<g>
|
|
38
|
+
<path d="M30,0H6A5.9966,5.9966,0,0,0,0,6V30a6,6,0,0,0,12,0V12H30A6,6,0,0,0,30,0Z"/>
|
|
39
|
+
<path d="M90,0H66a6,6,0,0,0,0,12H84V30a6,6,0,0,0,12,0V6A5.9966,5.9966,0,0,0,90,0Z"/>
|
|
40
|
+
<path d="M30,84H12V66A6,6,0,0,0,0,66V90a5.9966,5.9966,0,0,0,6,6H30a6,6,0,0,0,0-12Z"/>
|
|
41
|
+
<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"/>
|
|
42
|
+
</g>
|
|
43
|
+
</svg>
|
|
44
|
+
</svg>
|
|
45
|
+
`
|
|
46
|
+
|
|
47
|
+
//save initial map dimensions
|
|
48
|
+
this.defaultHeight = this.map.h
|
|
49
|
+
this.defaultWidth = this.map.w
|
|
50
|
+
|
|
51
|
+
// event handler
|
|
52
|
+
this.div.on('click', (e) => {
|
|
53
|
+
this.onClickFunction(e)
|
|
54
|
+
})
|
|
55
|
+
this.div.on('mouseover', (e) => {
|
|
56
|
+
this.style('background-color', 'lightgrey')
|
|
57
|
+
})
|
|
58
|
+
this.div.on('mouseout', (e) => {
|
|
59
|
+
this.style('background-color', '#ffffff')
|
|
60
|
+
})
|
|
61
|
+
|
|
62
|
+
//set position
|
|
63
|
+
if (opts.x) {
|
|
64
|
+
this.style('left', opts.x + 'px')
|
|
65
|
+
} else {
|
|
66
|
+
this.style('right', '10px')
|
|
67
|
+
}
|
|
68
|
+
if (opts.y) {
|
|
69
|
+
this.style('top', opts.y + 'px')
|
|
70
|
+
} else {
|
|
71
|
+
this.style('top', '90px')
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
onClickFunction(e) {
|
|
76
|
+
if (this.isFullscreen) {
|
|
77
|
+
this.closeFullscreen(this.map.container)
|
|
78
|
+
//resize canvas to default
|
|
79
|
+
this.map.h = this.defaultHeight
|
|
80
|
+
this.map.w = this.defaultWidth
|
|
81
|
+
this.map.geoCanvas.h = this.defaultHeight
|
|
82
|
+
this.map.geoCanvas.w = this.defaultWidth
|
|
83
|
+
this.map.geoCanvas.canvas.setAttribute('width', '' + this.defaultWidth)
|
|
84
|
+
this.map.geoCanvas.canvas.setAttribute('height', '' + this.defaultHeight)
|
|
85
|
+
this.map.redraw()
|
|
86
|
+
this.isFullscreen = false
|
|
87
|
+
} else {
|
|
88
|
+
this.openFullscreen(this.map.container)
|
|
89
|
+
//resize canvas to fullscreen
|
|
90
|
+
this.map.h = window.screen.height
|
|
91
|
+
this.map.w = window.screen.width
|
|
92
|
+
this.isFullscreen = true
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Open fullscreen */
|
|
97
|
+
openFullscreen(elem) {
|
|
98
|
+
if (elem.requestFullscreen) {
|
|
99
|
+
elem.requestFullscreen()
|
|
100
|
+
} else if (elem.webkitRequestFullscreen) {
|
|
101
|
+
/* Safari */
|
|
102
|
+
elem.webkitRequestFullscreen()
|
|
103
|
+
} else if (elem.msRequestFullscreen) {
|
|
104
|
+
/* IE11 */
|
|
105
|
+
elem.msRequestFullscreen()
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Close fullscreen */
|
|
110
|
+
closeFullscreen() {
|
|
111
|
+
if (document.exitFullscreen) {
|
|
112
|
+
document.exitFullscreen()
|
|
113
|
+
} else if (document.webkitExitFullscreen) {
|
|
114
|
+
/* Safari */
|
|
115
|
+
document.webkitExitFullscreen()
|
|
116
|
+
} else if (document.msExitFullscreen) {
|
|
117
|
+
/* IE11 */
|
|
118
|
+
document.msExitFullscreen()
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|