gridviz 3.0.30 → 3.0.32
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/dist/gridviz.js +324 -242
- package/dist/gridviz.min.js +1 -1
- package/package.json +1 -1
- package/src/core/Map.js +5 -1
- package/src/style/ShadingStyle.js +15 -4
- package/src/style/SideStyle.js +8 -3
- package/src/style/SideTanakaStyle.js +3 -1
- package/src/style/SquareColorCategoryWebGLStyle.js +218 -30
- package/src/utils/WebGLSquareColoringAdvanced.js +46 -49
- package/src/utils/scale.js +22 -0
- package/src/utils/webGLUtils.js +5 -4
- package/src/style/SideTanakaStyle___OLD.js +0 -66
- package/src/utils/WebGLSquareColoringCatAdvanced.js +0 -133
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
//@ts-check
|
|
2
|
-
'use strict'
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* @see https://manifold.net/doc/mfd9/example__tanaka_contours.htm
|
|
7
|
-
*
|
|
8
|
-
* @module style
|
|
9
|
-
* @author Julien Gaffuri
|
|
10
|
-
*/
|
|
11
|
-
export class TanakaStyle {
|
|
12
|
-
/**
|
|
13
|
-
* @param {function(import('../core/Dataset.js').Cell):number} value Function that returns the value of a cell
|
|
14
|
-
* @param {Array.<number>} breaks The break values
|
|
15
|
-
* @param {Array.<string>} colors The colors, one more than the break values
|
|
16
|
-
* @param {object} opts
|
|
17
|
-
* @returns {Array.<import("../core/Style.js").Style>}
|
|
18
|
-
*/
|
|
19
|
-
static get(value, breaks, colors, opts = {}) {
|
|
20
|
-
//shadow colors
|
|
21
|
-
opts.colorDark = opts.colorDark || '#111'
|
|
22
|
-
opts.colorBright = opts.colorBright || '#ddd'
|
|
23
|
-
|
|
24
|
-
/** @type { function(number, number):number } */
|
|
25
|
-
opts.width =
|
|
26
|
-
opts.width ||
|
|
27
|
-
((sideValue, resolution, z) => {
|
|
28
|
-
const minWG = 1 * z
|
|
29
|
-
const maxWG = 4 * z
|
|
30
|
-
const step = (maxWG - minWG) / 3
|
|
31
|
-
return Math.min(minWG + (sideValue - 1) * step, maxWG)
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
-
//make classifier
|
|
35
|
-
const classifier = clFun(breaks)
|
|
36
|
-
//make colors table
|
|
37
|
-
const colorsDict = {}
|
|
38
|
-
for (let i = 0; i < colors.length; i++) colorsDict[i + ''] = colors[i]
|
|
39
|
-
|
|
40
|
-
const cellStyle = new SquareColorCategoryWebGLStyle({
|
|
41
|
-
code: (cell) => classifier(value(cell)),
|
|
42
|
-
color: colorsDict,
|
|
43
|
-
})
|
|
44
|
-
|
|
45
|
-
const getSideValue = (side) => {
|
|
46
|
-
const cl1 = side.c1 ? classifier(value(side.c1)) : -1
|
|
47
|
-
const cl2 = side.c2 ? classifier(value(side.c2)) : -1
|
|
48
|
-
return cl1 - cl2
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
/** The side style, for the shadow effect */
|
|
52
|
-
const sideStyle = new SideStyle({
|
|
53
|
-
//white or black, depending on orientation and value
|
|
54
|
-
color: (side) => {
|
|
55
|
-
const v = getSideValue(side)
|
|
56
|
-
if (v === 0) return
|
|
57
|
-
if (side.or === 'v') return v < 0 ? opts.colorBright : opts.colorDark
|
|
58
|
-
return v < 0 ? opts.colorDark : opts.colorBright
|
|
59
|
-
},
|
|
60
|
-
//width depends on the value, that is the number of classes of difference
|
|
61
|
-
width: (side, resolution, z) => opts.width(Math.abs(getSideValue(side)), resolution, z),
|
|
62
|
-
})
|
|
63
|
-
|
|
64
|
-
return [cellStyle, sideStyle]
|
|
65
|
-
}
|
|
66
|
-
}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
//@ts-check
|
|
2
|
-
'use strict'
|
|
3
|
-
|
|
4
|
-
import { initShaderProgram, createShader } from './webGLUtils.js'
|
|
5
|
-
import { color } from 'd3-color'
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Everything to easily draw colored squares with webGL.
|
|
9
|
-
* All the same size, but different fill color.
|
|
10
|
-
* Color based on categories.
|
|
11
|
-
*/
|
|
12
|
-
export class WebGLSquareColoringCatAdvanced {
|
|
13
|
-
/**
|
|
14
|
-
* @param {Array.<string>} colors
|
|
15
|
-
*/
|
|
16
|
-
constructor(colors) {
|
|
17
|
-
/**
|
|
18
|
-
* @type {Array.<string>} */
|
|
19
|
-
this.colors = colors
|
|
20
|
-
|
|
21
|
-
/** Vector shader program
|
|
22
|
-
* @type {string} */
|
|
23
|
-
this.vshString = `
|
|
24
|
-
attribute vec2 pos;
|
|
25
|
-
uniform float sizePix;
|
|
26
|
-
uniform mat3 mat;
|
|
27
|
-
|
|
28
|
-
attribute float i;
|
|
29
|
-
varying float vi;
|
|
30
|
-
|
|
31
|
-
void main() {
|
|
32
|
-
gl_Position = vec4(mat * vec3(pos, 1.0), 1.0);
|
|
33
|
-
gl_PointSize = sizePix;
|
|
34
|
-
vi = i;
|
|
35
|
-
}
|
|
36
|
-
`
|
|
37
|
-
|
|
38
|
-
//prepare fragment shader code
|
|
39
|
-
//declare the uniform and other variables
|
|
40
|
-
const out = []
|
|
41
|
-
out.push('precision mediump float;\nvarying float vi;\n')
|
|
42
|
-
//add color uniforms
|
|
43
|
-
out.push('uniform vec4')
|
|
44
|
-
for (let i = 0; i < colors.length; i++) {
|
|
45
|
-
if (i > 0) out.push(',')
|
|
46
|
-
out.push(' c' + i)
|
|
47
|
-
}
|
|
48
|
-
out.push(';\n')
|
|
49
|
-
//start the main function
|
|
50
|
-
out.push('void main(void) {\n')
|
|
51
|
-
//choose color i
|
|
52
|
-
for (let i = 0; i < colors.length; i++) {
|
|
53
|
-
if (i > 0) out.push('else ')
|
|
54
|
-
out.push('if(vi==')
|
|
55
|
-
out.push(i)
|
|
56
|
-
out.push('.0) gl_FragColor = vec4(c')
|
|
57
|
-
out.push(i)
|
|
58
|
-
out.push('[0], c')
|
|
59
|
-
out.push(i)
|
|
60
|
-
out.push('[1], c')
|
|
61
|
-
out.push(i)
|
|
62
|
-
out.push('[2], c')
|
|
63
|
-
out.push(i)
|
|
64
|
-
out.push('[3]);\n')
|
|
65
|
-
}
|
|
66
|
-
out.push('else gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n}')
|
|
67
|
-
/** Fragment shader program
|
|
68
|
-
* @type {string} */
|
|
69
|
-
this.fshString = out.join('')
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
/** */
|
|
73
|
-
draw(gl, verticesBuffer, iBuffer, transfoMat, sizePix = 10) {
|
|
74
|
-
/** @type {WebGLShader} */
|
|
75
|
-
const vShader = createShader(gl, gl.VERTEX_SHADER, this.vshString)
|
|
76
|
-
|
|
77
|
-
/** @type {WebGLShader} */
|
|
78
|
-
const fShader = createShader(gl, gl.FRAGMENT_SHADER, this.fshString)
|
|
79
|
-
|
|
80
|
-
/** @type {WebGLProgram} */
|
|
81
|
-
const program = initShaderProgram(gl, vShader, fShader)
|
|
82
|
-
gl.useProgram(program)
|
|
83
|
-
|
|
84
|
-
//set uniforms
|
|
85
|
-
|
|
86
|
-
//sizePix
|
|
87
|
-
gl.uniform1f(gl.getUniformLocation(program, 'sizePix'), 1.0 * sizePix)
|
|
88
|
-
|
|
89
|
-
//colors
|
|
90
|
-
for (let i = 0; i < this.colors.length; i++) {
|
|
91
|
-
const c = color(this.colors[i])
|
|
92
|
-
gl.uniform4fv(gl.getUniformLocation(program, 'c' + i), [
|
|
93
|
-
+c.r / 255.0,
|
|
94
|
-
+c.g / 255.0,
|
|
95
|
-
+c.b / 255.0,
|
|
96
|
-
+c.opacity,
|
|
97
|
-
])
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
//vertice data
|
|
101
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
|
|
102
|
-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticesBuffer), gl.STATIC_DRAW)
|
|
103
|
-
const position = gl.getAttribLocation(program, 'pos')
|
|
104
|
-
gl.vertexAttribPointer(
|
|
105
|
-
position,
|
|
106
|
-
2, //numComponents
|
|
107
|
-
gl.FLOAT, //type
|
|
108
|
-
false, //normalise
|
|
109
|
-
0, //stride
|
|
110
|
-
0 //offset
|
|
111
|
-
)
|
|
112
|
-
gl.enableVertexAttribArray(position)
|
|
113
|
-
|
|
114
|
-
//i data
|
|
115
|
-
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
|
|
116
|
-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(iBuffer), gl.STATIC_DRAW)
|
|
117
|
-
const i = gl.getAttribLocation(program, 'i')
|
|
118
|
-
gl.vertexAttribPointer(i, 1, gl.FLOAT, false, 0, 0)
|
|
119
|
-
gl.enableVertexAttribArray(i)
|
|
120
|
-
|
|
121
|
-
//transformation
|
|
122
|
-
gl.uniformMatrix3fv(gl.getUniformLocation(program, 'mat'), false, new Float32Array(transfoMat))
|
|
123
|
-
|
|
124
|
-
// Enable the depth test
|
|
125
|
-
//gl.enable(gl.DEPTH_TEST);
|
|
126
|
-
// Clear the color buffer bit
|
|
127
|
-
gl.clear(gl.COLOR_BUFFER_BIT)
|
|
128
|
-
// Set the view port
|
|
129
|
-
//gl.viewport(0, 0, cg.w, cg.h);
|
|
130
|
-
|
|
131
|
-
gl.drawArrays(gl.POINTS, 0, verticesBuffer.length / 2)
|
|
132
|
-
}
|
|
133
|
-
}
|