@longline/aqua-ui 1.0.16 → 1.0.18

package/modules/ParticleGlobe/ParticleGlobe.js

@@ -0,0 +1,508 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { mat4 } from 'gl-matrix';
+import { GL } from './GL';
+import { PointsVertexShader, PointsFragmentShader } from './PointsShader';
+import { TextureVertexShader, TextureFragmentShader } from './TextureShader';
+import { OutputVertexShader, OutputFragmentShader } from './OutputShader';
+import { FadeVertexShader, FadeFragmentShader } from './FadeShader';
+import { OutlineVertexShader, OutlineFragmentShader } from './OutlineShader';
+import { SphereVertexShader, SphereFragmentShader } from './SphereShader';
+import { RgbColor } from '../../helper/RgbColor';
+var VERTEX_TEXTURE_SIZE = 2048; // horizontal and vertical resolution
+var UV_TEXTURE_SIZE = 1024;
+var OUTPUT_TEXTURE_SIZE = 2048;
+var ParticleGlobeBase = function (props) {
+    var wrapperRef = React.useRef(null);
+    var canvasRef = React.useRef(null);
+    var gl = React.useRef(null);
+    // Programs:
+    var textureProgram = React.useRef(null);
+    var pointsProgram = React.useRef(null);
+    var outputProgram = React.useRef(null);
+    var fadeProgram = React.useRef(null);
+    var outlineProgram = React.useRef(null);
+    var sphereProgram = React.useRef(null);
+    // Textures:
+    var texture1 = React.useRef(null);
+    var texture2 = React.useRef(null);
+    var textureOut = React.useRef(null);
+    var textureUV = React.useRef(null);
+    var textureLandmass = React.useRef(null);
+    var textureSphere = React.useRef(null);
+    // Frame buffers:
+    var fbo1 = React.useRef(null);
+    var fbo2 = React.useRef(null);
+    var fboOut = React.useRef(null);
+    var fboSphere = React.useRef(null);
+    // Data buffers:
+    var squareBuffer = React.useRef(null);
+    var pointsBuffer = React.useRef(null);
+    var sphereVerticesBuffer = React.useRef(null);
+    var sphereNormalsBuffer = React.useRef(null);
+    var sphereTexCoordsBuffer = React.useRef(null);
+    var sphereElementCount = React.useRef(0);
+    // Other:
+    var animationID = React.useRef(null);
+    var angleX = React.useRef(props.angleX);
+    var angleY = React.useRef(props.angleY);
+    var frame = React.useRef(0);
+    var swap = React.useRef(false);
+    var mouseX = React.useRef(0);
+    var mouseY = React.useRef(0);
+    var createSourceTexture = function (gl, size) {
+        // Prepare x,y positions for vertices;
+        // Reserve 2 bytes for X-position, and 2 bytes for Y-position,
+        // so a total of 4 bytes per vertex.
+        var arr = new Uint8Array(VERTEX_TEXTURE_SIZE * VERTEX_TEXTURE_SIZE * 4);
+        arr.fill(255);
+        for (var i = 0; i < props.numParticles; i++) {
+            var x = Math.random();
+            var y = Math.random();
+            // Multiply this by 65536 to occupy two bytes.
+            var xx = Math.floor(x * 32768) + 16384; // 655
+            var yy = Math.floor(y * 32768) + 16384; // 655
+            arr[i * 4 + 0] = xx >> 8; // 2
+            arr[i * 4 + 1] = xx & 255; // 143
+            arr[i * 4 + 2] = yy >> 8; // 2
+            arr[i * 4 + 3] = yy & 255; // 143
+        }
+        return GL.createRGBATexture(gl, VERTEX_TEXTURE_SIZE, arr, false);
+    };
+    var createEmptyTexture = function (gl, size) {
+        return GL.createRGBATexture(gl, size, null, false);
+    };
+    var createUVTexture = function (gl, image) {
+        return GL.createImageTexture(gl, image, false);
+    };
+    var createLandmassTexture = function (gl, image) {
+        return GL.createImageTexture(gl, image, true);
+    };
+    var createPointsBuffer = function (gl) {
+        pointsBuffer.current = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer.current);
+        var positions = [];
+        // Create vertex indices: 0, 1, 2, ...
+        for (var i = 0; i < props.numParticles; i++)
+            positions.push(i);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+    };
+    var createSquareBuffer = function (gl) {
+        // Create 6 vertices that form 2 triangles, with texture coordinates
+        // so that a texture exactly covers the rectangle formed by the
+        // triangles.
+        squareBuffer.current = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer.current);
+        var a = 1.0;
+        var positions = [
+            // Triangle 1:
+            // coords, tcoords
+            -a, -a, 0.0, 1.0,
+            -a, a, 0.0, 0.0,
+            a, a, 1.0, 0.0,
+            // coords, tcoords
+            // Triangle 2:
+            -a, -a, 0.0, 1.0,
+            a, -a, 1.0, 1.0,
+            a, a, 1.0, 0.0
+        ];
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+    };
+    var createSphere = function (gl, radius, latBands, longBands) {
+        var positions = [];
+        var normals = [];
+        var textureCoords = [];
+        for (var lat = 0; lat < latBands; ++lat) {
+            for (var long = 0; long < longBands; ++long) {
+                var theta = lat * Math.PI / latBands;
+                var phi = long * 2 * Math.PI / longBands;
+                var x1 = Math.cos(phi) * Math.sin(theta);
+                var y1 = Math.cos(theta);
+                var z1 = Math.sin(phi) * Math.sin(theta);
+                var u1 = long / longBands; // Horizontal texture coordinate
+                var v1 = 1 - (lat / latBands); // Vertical texture coordinate (inverted for proper mapping)
+                var x2 = Math.cos(phi) * Math.sin(theta + Math.PI / latBands);
+                var y2 = Math.cos(theta + Math.PI / latBands);
+                var z2 = Math.sin(phi) * Math.sin(theta + Math.PI / latBands);
+                var u2 = long / longBands; // Same horizontal texture coordinate
+                var v2 = 1 - ((lat + 1) / latBands); // Next latitude for the next triangle
+                var x3 = Math.cos(phi + (2 * Math.PI / longBands)) * Math.sin(theta);
+                var y3 = Math.cos(theta);
+                var z3 = Math.sin(phi + (2 * Math.PI / longBands)) * Math.sin(theta);
+                var u3 = (long + 1) / longBands; // Next longitude
+                var v3 = 1 - (lat / latBands); // Same vertical texture coordinate
+                // Push the first triangle
+                positions.push(radius * x1, radius * y1, radius * z1);
+                normals.push(x1, y1, z1);
+                textureCoords.push(u1, v1);
+                positions.push(radius * x2, radius * y2, radius * z2);
+                normals.push(x2, y2, z2);
+                textureCoords.push(u2, v2);
+                positions.push(radius * x3, radius * y3, radius * z3);
+                normals.push(x3, y3, z3);
+                textureCoords.push(u3, v3);
+                // Push the second triangle
+                positions.push(radius * x2, radius * y2, radius * z2);
+                normals.push(x2, y2, z2);
+                textureCoords.push(u2, v2);
+                positions.push(radius * x3, radius * y3, radius * z3);
+                normals.push(x3, y3, z3);
+                textureCoords.push(u3, v3);
+                var x4 = Math.cos(phi + (2 * Math.PI / longBands)) * Math.sin(theta + Math.PI / latBands);
+                var y4 = Math.cos(theta + Math.PI / latBands);
+                var z4 = Math.sin(phi + (2 * Math.PI / longBands)) * Math.sin(theta + Math.PI / latBands);
+                var u4 = (long + 1) / longBands; // Next longitude
+                var v4 = 1 - ((lat + 1) / latBands); // Next latitude for the next triangle
+                positions.push(radius * x4, radius * y4, radius * z4);
+                normals.push(x4, y4, z4);
+                textureCoords.push(u4, v4);
+            }
+        }
+        sphereVerticesBuffer.current = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, sphereVerticesBuffer.current);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+        sphereNormalsBuffer.current = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, sphereNormalsBuffer.current);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
+        sphereTexCoordsBuffer.current = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, sphereTexCoordsBuffer.current);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
+        sphereElementCount.current = positions.length / 3;
+    };
+    var drawVertices = function (gl, sourceTexture) {
+        var program = pointsProgram.current;
+        gl.useProgram(program);
+        // Random seed:
+        gl.uniform1i(gl.getUniformLocation(program, "u_frame"), frame.current);
+        gl.uniform1f(gl.getUniformLocation(program, "u_seed"), Math.random());
+        // Particle lifetime:
+        gl.uniform1f(gl.getUniformLocation(program, "u_minlifetime"), props.minLifetime);
+        gl.uniform1f(gl.getUniformLocation(program, "u_maxlifetime"), props.maxLifetime);
+        // Speed factor:
+        gl.uniform1f(gl.getUniformLocation(program, "u_speedfactor"), props.speedFactor);
+        // Texture:
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, sourceTexture);
+        gl.uniform1i(gl.getUniformLocation(program, "u_texture"), 0);
+        gl.uniform1f(gl.getUniformLocation(program, "u_resolution"), VERTEX_TEXTURE_SIZE);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, textureUV.current);
+        gl.uniform1i(gl.getUniformLocation(program, "u_uvtexture"), 1);
+        gl.uniform1f(gl.getUniformLocation(program, "u_uvresolution"), UV_TEXTURE_SIZE);
+        var aIndex = gl.getAttribLocation(program, "a_index");
+        gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer.current);
+        gl.vertexAttribPointer(aIndex, 1, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(aIndex);
+        gl.disable(gl.BLEND);
+        gl.drawArrays(gl.POINTS, 0, props.numParticles);
+    };
+    var drawTexture = function (gl, texture, blend, flip, brightness) {
+        if (blend === void 0) { blend = true; }
+        if (flip === void 0) { flip = false; }
+        if (brightness === void 0) { brightness = 1.0; }
+        var program = textureProgram.current;
+        gl.useProgram(program);
+        // Bind the texture:
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.uniform1i(gl.getUniformLocation(program, "u_texture"), 0);
+        // Is the texture flipped vertically?
+        gl.uniform1i(gl.getUniformLocation(program, "u_flip"), flip ? 1 : 0);
+        // Texture brightness
+        gl.uniform1f(gl.getUniformLocation(program, "u_brightness"), brightness);
+        // Bind vertices and texture coordinates:
+        var aPos = gl.getAttribLocation(program, "a_pos");
+        var aTexPos = gl.getAttribLocation(program, "a_texpos");
+        gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer.current);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aTexPos, 2, gl.FLOAT, false, 16, 8);
+        gl.enableVertexAttribArray(aTexPos);
+        if (blend) {
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.ONE, gl.ONE);
+        }
+        else {
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        }
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    };
+    var drawOutput = function (gl, texture) {
+        var program = outputProgram.current;
+        gl.useProgram(program);
+        // Stops - fill up to 12 stops by using values > 1 for filler stops.
+        // e.g. [0.0, 0.5, 1.0, 2.0....] means that only the first 3 stops are used.
+        var stops = __spreadArray([], props.gradientStops.map(function (s) { return s.pos; }), true);
+        while (stops.length < 12)
+            stops.push(2.0);
+        gl.uniform1fv(gl.getUniformLocation(program, 'u_gradientStops'), new Float32Array(stops));
+        var colors = props.gradientStops.map(function (s) { return RgbColor.toRGBA(s.color); }).flat();
+        gl.uniform4fv(gl.getUniformLocation(program, 'u_gradientColors'), new Float32Array(colors));
+        // The vertex atlas texture goes in:
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.uniform1i(gl.getUniformLocation(program, "u_texture"), 0);
+        gl.uniform1f(gl.getUniformLocation(program, "u_resolution"), VERTEX_TEXTURE_SIZE);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, textureUV.current);
+        gl.uniform1i(gl.getUniformLocation(program, "u_uvtexture"), 1);
+        gl.uniform1f(gl.getUniformLocation(program, "u_uvresolution"), UV_TEXTURE_SIZE);
+        // Point size:
+        gl.uniform1f(gl.getUniformLocation(program, "u_pointsize"), props.pointSize);
+        // Vertex indices:
+        var aIndex = gl.getAttribLocation(program, "a_index");
+        gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer.current);
+        gl.vertexAttribPointer(aIndex, 1, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(aIndex);
+        // Draw points:
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.drawArrays(gl.POINTS, 0, props.numParticles);
+    };
+    var drawOutline = function (gl) {
+        var program = outlineProgram.current;
+        gl.useProgram(program);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, textureUV.current);
+        gl.uniform1i(gl.getUniformLocation(program, "u_texture"), 0);
+        var aPos = gl.getAttribLocation(program, "a_pos");
+        var aTexPos = gl.getAttribLocation(program, "a_texpos");
+        gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer.current);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aTexPos, 2, gl.FLOAT, false, 16, 8);
+        gl.enableVertexAttribArray(aTexPos);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    };
+    var drawSphere = function (gl) {
+        var program = sphereProgram.current;
+        gl.useProgram(program);
+        gl.clearDepth(1.0); // Clear everything
+        gl.enable(gl.DEPTH_TEST); // Enable depth testing
+        gl.depthFunc(gl.LEQUAL); // Near things obscure far things    
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        //gl.enable(gl.CULL_FACE);
+        //gl.cullFace(gl.BACK);
+        var fieldOfView = (45 * Math.PI) / 180; // in radians
+        var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+        var zNear = 1.0;
+        var zFar = 100.0;
+        var projectionMatrix = mat4.create();
+        // note: glmatrix.js always has the first argument
+        // as the destination to receive the result.
+        mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
+        // Set the drawing position to the "identity" point, which is
+        // the center of the scene.
+        var modelViewMatrix = mat4.create();
+        // Now move the drawing position a bit to where we want to
+        // start drawing the square.
+        mat4.translate(modelViewMatrix, // destination matrix
+        modelViewMatrix, // matrix to translate
+        [0.0, 0.0, -2.61]); // amount to translate    
+        mat4.rotate(modelViewMatrix, modelViewMatrix, angleX.current * Math.PI / 180 + (props.responsive ? mouseY.current / 10.0 : 0), [1, 0, 0]);
+        mat4.rotate(modelViewMatrix, modelViewMatrix, angleY.current * Math.PI / 180 + (props.responsive ? mouseX.current / 10.0 : 0), [0, 1, 0]);
+        gl.uniformMatrix4fv(gl.getUniformLocation(program, "uProjectionMatrix"), false, projectionMatrix);
+        gl.uniformMatrix4fv(gl.getUniformLocation(program, "uModelViewMatrix"), false, modelViewMatrix);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, textureSphere.current);
+        gl.uniform1i(gl.getUniformLocation(program, "uTexture"), 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, sphereVerticesBuffer.current);
+        var aPosition = gl.getAttribLocation(program, "aPosition");
+        gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(aPosition);
+        gl.bindBuffer(gl.ARRAY_BUFFER, sphereNormalsBuffer.current);
+        var aNormal = gl.getAttribLocation(program, "aNormal");
+        gl.vertexAttribPointer(aNormal, 3, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(aNormal);
+        gl.bindBuffer(gl.ARRAY_BUFFER, sphereTexCoordsBuffer.current);
+        var aTexCoord = gl.getAttribLocation(program, "aTexCoord");
+        gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(aTexCoord);
+        gl.disable(gl.BLEND);
+        gl.drawArrays(gl.TRIANGLES, 0, sphereElementCount.current);
+    };
+    var drawFade = function (gl) {
+        var program = fadeProgram.current;
+        gl.useProgram(program);
+        var aPos = gl.getAttribLocation(program, "a_pos");
+        gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer.current);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 16, 0);
+        gl.enableVertexAttribArray(aPos);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    };
+    var draw = function (gl) {
+        frame.current++;
+        swap.current = !swap.current;
+        // Draw into swapping framebuffer:
+        gl.viewport(0, 0, VERTEX_TEXTURE_SIZE, VERTEX_TEXTURE_SIZE);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, swap.current ? fbo2.current : fbo1.current);
+        gl.clearColor(0.0, 0.0, 0.0, 1.0); // clear to transparent
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        drawVertices(gl, swap.current ? texture1.current : texture2.current);
+        // Draw result into "out" framebuffer:
+        gl.viewport(0, 0, OUTPUT_TEXTURE_SIZE, OUTPUT_TEXTURE_SIZE);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, fboOut.current);
+        if (props.trails == 0) {
+            gl.clearColor(0.0, 0.0, 0.0, 0.0); // clear to transparent
+            gl.clear(gl.COLOR_BUFFER_BIT);
+        }
+        else {
+            if (frame.current % props.trails == 0)
+                drawFade(gl);
+        }
+        drawOutput(gl, swap.current ? texture2.current : texture1.current);
+        if (props.outlines) {
+            drawOutline(gl);
+        }
+        if (props.globe == true) {
+            // Sphere view: draw to sphere fbo
+            gl.viewport(0, 0, OUTPUT_TEXTURE_SIZE, OUTPUT_TEXTURE_SIZE);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, fboSphere.current);
+            gl.clearColor(0.0, 0.0, 0.0, 1.0); // clear to black
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            if (props.landmass != 'none')
+                drawTexture(gl, textureLandmass.current, false, false, props.brightness);
+            drawTexture(gl, textureOut.current, true, true, 1.0);
+            // Sphere view: draw sphere texture to screen
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.viewport(0, 0, 1024, 768);
+            gl.clearColor(0.0, 0.0, 0.0, 0.0); // clear to transparent
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+            drawSphere(gl);
+        }
+        else {
+            // Map view: draw directly to screen:
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.viewport(0, 0, 1024 * 2, 768 * 2);
+            gl.clearColor(0.0, 0.0, 0.0, 0.0); // clear to transparent
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+            if (props.landmass != 'none')
+                drawTexture(gl, textureLandmass.current, false);
+            drawTexture(gl, textureOut.current, true, true);
+        }
+    };
+    var handleMouseMove = function (e) {
+        mouseX.current = e.clientX / wrapperRef.current.clientWidth * 2.0 - 1.0;
+        mouseY.current = e.clientY / wrapperRef.current.clientHeight * 2.0 - 1.0;
+    };
+    var animate = function () {
+        draw(gl.current);
+        angleX.current = (angleX.current + props.deltaX) % 360;
+        angleY.current = (angleY.current + props.deltaY) % 360;
+        animationID.current = requestAnimationFrame(animate);
+    };
+    var setup = function (uvImage, nightImage) {
+        if (!canvasRef.current)
+            return;
+        gl.current = canvasRef.current.getContext("webgl");
+        pointsProgram.current = GL.createProgram(gl.current, PointsVertexShader, PointsFragmentShader);
+        outputProgram.current = GL.createProgram(gl.current, OutputVertexShader, OutputFragmentShader);
+        fadeProgram.current = GL.createProgram(gl.current, FadeVertexShader, FadeFragmentShader);
+        outlineProgram.current = GL.createProgram(gl.current, OutlineVertexShader, OutlineFragmentShader);
+        sphereProgram.current = GL.createProgram(gl.current, SphereVertexShader, SphereFragmentShader);
+        textureProgram.current = GL.createProgram(gl.current, TextureVertexShader, TextureFragmentShader);
+        createPointsBuffer(gl.current);
+        createSquareBuffer(gl.current);
+        createSphere(gl.current, 1, 60, 60);
+        texture1.current = createSourceTexture(gl.current, VERTEX_TEXTURE_SIZE);
+        texture2.current = createEmptyTexture(gl.current, VERTEX_TEXTURE_SIZE);
+        textureUV.current = createUVTexture(gl.current, uvImage);
+        textureOut.current = createEmptyTexture(gl.current, OUTPUT_TEXTURE_SIZE);
+        if (props.landmass != 'none')
+            textureLandmass.current = createLandmassTexture(gl.current, nightImage);
+        textureSphere.current = createEmptyTexture(gl.current, OUTPUT_TEXTURE_SIZE);
+        fbo1.current = GL.createFrameBuffer(gl.current, texture1.current);
+        fbo2.current = GL.createFrameBuffer(gl.current, texture2.current);
+        fboOut.current = GL.createFrameBuffer(gl.current, textureOut.current);
+        fboSphere.current = GL.createFrameBuffer(gl.current, textureSphere.current);
+        animationID.current = window.requestAnimationFrame(animate);
+    };
+    var step2 = function (image) {
+        if (props.landmass != 'none') {
+            var img_1 = new Image();
+            img_1.onload = function () { return setup(image, img_1); };
+            img_1.src = props.landmass == 'day' ? "resources/color-2048.jpg" : "resources/night-2048.jpg";
+        }
+        else {
+            setup(image, null);
+        }
+    };
+    var start = function () {
+        var img = new Image();
+        img.onload = function () { return step2(img); };
+        img.src = "resources/normals-currents.png";
+    };
+    React.useEffect(function () {
+        start();
+        if (props.responsive)
+            document.addEventListener('mousemove', handleMouseMove);
+        return function () {
+            window.cancelAnimationFrame(animationID.current);
+            document.removeEventListener('mousemove', handleMouseMove);
+        };
+    }, []);
+    return (React.createElement("div", { className: props.className, ref: wrapperRef },
+        React.createElement("canvas", { ref: canvasRef, width: "1024", height: "768" })));
+};
+var ParticleGlobeStyled = styled(ParticleGlobeBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  ", "\n  canvas {\n    width: 100%;\n    height: 100%;\n  }\n  ", "\n"], ["\n  position: relative;\n  z-index: 0;\n  width: 100%;\n  height: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  ", "\n  canvas {\n    width: 100%;\n    height: 100%;\n  }\n  ", "\n"])), function (p) { return p.globe && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding: ", "px;\n  "], ["\n    padding: ", "px;\n  "])), p.glow); }, function (p) { return p.globe && css(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n    &:before {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      left: 0;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      background: radial-gradient(circle closest-side at center, black 0%, black calc(100% - ", "px), white calc(100% - ", "px), transparent 100%);\n    }\n  "], [" \n    &:before {\n      position: absolute;\n      z-index: -1;\n      content: '';\n      left: 0;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      background: radial-gradient(circle closest-side at center, black 0%, black calc(100% - ", "px), white calc(100% - ", "px), transparent 100%);\n    }\n  "])), p.glow + 2, p.glow + 2); });
+var ParticleGlobeWrapper = function (props) {
+    return React.createElement(ParticleGlobeStyled, __assign({}, props));
+};
+var ParticleGlobe = function (_a) {
+    var _b = _a.numParticles, numParticles = _b === void 0 ? 100000 : _b, _c = _a.globe, globe = _c === void 0 ? false : _c, _d = _a.trails, trails = _d === void 0 ? 0 : _d, _e = _a.pointSize, pointSize = _e === void 0 ? 1 : _e, _f = _a.angleX, angleX = _f === void 0 ? 15 : _f, _g = _a.angleY, angleY = _g === void 0 ? 0 : _g, _h = _a.deltaX, deltaX = _h === void 0 ? 0 : _h, _j = _a.deltaY, deltaY = _j === void 0 ? 0.02 : _j, _k = _a.outlines, outlines = _k === void 0 ? false : _k, _l = _a.minLifetime, minLifetime = _l === void 0 ? 60 : _l, _m = _a.maxLifetime, maxLifetime = _m === void 0 ? 1000 : _m, _o = _a.glow, glow = _o === void 0 ? 0 : _o, _p = _a.landmass, landmass = _p === void 0 ? 'none' : _p, _q = _a.brightness, brightness = _q === void 0 ? 1.0 : _q, _r = _a.speedFactor, speedFactor = _r === void 0 ? 1000.0 : _r, _s = _a.responsive, responsive = _s === void 0 ? false : _s, _t = _a.gradientStops, gradientStops = _t === void 0 ? [
+        { pos: 0.0, color: '#2c425300' },
+        { pos: 0.01, color: '#2c425300' },
+        { pos: 0.1, color: '#2c4253ff' },
+        { pos: 0.30, color: '#3c698aff' },
+        { pos: 0.50, color: '#35abe2ff' },
+        { pos: 1.0, color: '#ffffffff' }
+    ] : _t, props = __rest(_a, ["numParticles", "globe", "trails", "pointSize", "angleX", "angleY", "deltaX", "deltaY", "outlines", "minLifetime", "maxLifetime", "glow", "landmass", "brightness", "speedFactor", "responsive", "gradientStops"]);
+    var _u = React.useState(0), time = _u[0], setTime = _u[1];
+    React.useEffect(function () {
+        setTime(Date.now());
+    }, [numParticles, globe, trails, pointSize]);
+    return (React.createElement(ParticleGlobeWrapper, __assign({ key: time, numParticles: numParticles, gradientStops: gradientStops, globe: globe, trails: trails, pointSize: pointSize, angleX: angleX, angleY: angleY, deltaX: deltaX, deltaY: deltaY, outlines: outlines, minLifetime: minLifetime, maxLifetime: maxLifetime, glow: glow, landmass: landmass, brightness: brightness, speedFactor: speedFactor, responsive: responsive }, props)));
+};
+export { ParticleGlobe };
+var templateObject_1, templateObject_2, templateObject_3;
+// MARCH, SEPTEMBER

package/modules/ParticleGlobe/PointsShader.d.ts

@@ -0,0 +1,3 @@
+declare const PointsVertexShader = "\n\n  attribute float a_index;\n  uniform mat4 uModelViewMatrix;\n  uniform mat4 uProjectionMatrix;\n  uniform sampler2D u_texture;\n  uniform float u_resolution;\n  uniform sampler2D u_uvtexture;\n  uniform float u_uvresolution;\n  uniform float u_seed;\n  varying vec4 v_color;\n  uniform float u_minlifetime;\n  uniform float u_maxlifetime;\n  uniform float u_speedfactor;\n\n  // Current animation frame. 0+\n  uniform int u_frame;\n\n  float random (vec2 uv) {\n    return fract(sin(dot(uv.xy,\n        vec2(12.9898,78.233))) * 43758.5453123);\n  }\n\n  //\n  // Given a vertex index, calculate its texture coordinates in the source\n  // texture. Texture coordinates are 0..1, 0..1. \n  // For vertex #1 and a texture of 10x10, this will return vec2(0.1, 0.0).\n  // For vertex #1 and a texture of 16,16, this will return vec2(0.0625, 0.0).\n  //\n  vec2 indexToTexCoords(float index) {\n    float yIndex = floor(index / u_resolution); // 0..1\n    float xIndex = mod(index, u_resolution);    // 0..1\n    return vec2(xIndex, yIndex) / u_resolution;\n  }\n\n  const float BASE = 255.0;\n  const float SCALE = 32768.0;\n  const float OFFSET = 16384.0;\n  \n  float decodeValue(vec2 channels) {\n    return (dot(channels, vec2(BASE * BASE, BASE)) - OFFSET) / SCALE;\n  }\n  \n  vec2 encodeValue(float value) {\n    value = value * SCALE + OFFSET;\n    float y = mod(value, BASE);\n    float x = floor(value / BASE);\n    return vec2(x, y) / BASE;\n  }\n\n  // Decode a pixel value into x,y coordinates (0..1, 0..1)\n  vec2 decode(vec4 pixel) {\n    return vec2(\n      decodeValue(pixel.xy),\n      decodeValue(pixel.zw)\n    );\n  }\n\n  // Encode (x,y) coordinates into a pixel value.\n  vec4 encode(vec2 coord) {\n    return vec4(encodeValue(coord.x), encodeValue(coord.y));\n  }\n\n  \n  //\n  // Given a vertex coordinate (0..1, 0..1), find UV from texture.\n  // Returns (-0.5..0.5,-0.5..0.5)\n  //\n  vec2 decodeSpeed(vec2 coord) {\n    vec2 invcoord = vec2(coord.x, 1.0 - coord.y);\n    vec4 pixel = texture2D(u_uvtexture, invcoord + 0.5/u_uvresolution);\n    if(pixel.x == 0.0 && pixel.y == 0.0 && pixel.z == 0.0 && pixel.w == 0.0) return vec2(99.0, 99.0);\n    // x-coordinate is RG, y-coordinate is BA:\n    float u = dot(pixel.xy, vec2(255.0 * 255.0, 255.0)) / 65536.0;\n    float v = dot(pixel.zw, vec2(255.0 * 255.0, 255.0)) / 65536.0;\n    return vec2(u - 0.5, v - 0.5);\n  }\n\n\n\n  vec2 getRandomPos(vec2 pos) {\n    return vec2(random(pos * u_seed), random(pos * u_seed * 3.314));\n  }\n\n  void main() {\n    // From the vertex's index, get the coordinates in the texture where its\n    // position is stored.\n    vec2 texCoord = indexToTexCoords(a_index);\n\n    // A particle's lifetime is its index mod MAX (MAX classes), plus a constant (MIN).\n    int lifetime = int(mod(a_index, u_maxlifetime) + u_minlifetime); \n    // v0 = 1.0\n    // v1 = 2.0\n    // ..\n    // v99 = 100.0\n    // v100 = 1.0\n    // v101 = 2.0\n    // ..\n    // v199 = 100.0\n\n    // Use the vertex's index to get its current position from the texture,\n    // in the 0..1, 0..1 range.    \n    vec2 pos = decode(texture2D(u_texture, texCoord + 0.5/u_resolution));\n\n    // Check lifetime.\n    if(int(mod(float(u_frame), u_maxlifetime) + u_minlifetime) == lifetime) {\n      pos = getRandomPos(pos);\n    }\n\n    // Move particle with speed:\n    vec2 speed = decodeSpeed(pos);\n\n    if(speed.x == 99.0) {\n      pos = getRandomPos(pos);\n      speed = decodeSpeed(pos);\n    } else {\n      pos += speed / u_speedfactor;\n      // Wrap coords:\n      if(pos.x >= 1.0) pos.x -= 1.0;\n      if(pos.x < 0.0) pos.x += 1.0;\n      if(pos.y < 0.0) pos.y += 1.0;\n      if(pos.y >= 1.0) pos.y -= 1.0;\n    }\n\n    gl_Position = vec4(\n      texCoord.x * 2.0 - 1.0 + 0.5/u_resolution, // Add half pixelsize to center pixel.\n      texCoord.y * 2.0 - 1.0 + 0.5/u_resolution, // Add half pixelsize to center pixel.\n      0.0, 1.0);\n\n    // Set size & color:\n    gl_PointSize = 1.0;\n    v_color = vec4(encode(pos));\n  }\n";
+declare const PointsFragmentShader = "\n  precision mediump float;\n  varying vec4 v_color;\n\n  void main() {\n    gl_FragColor = v_color;\n  }\n";
+export { PointsVertexShader, PointsFragmentShader };

package/modules/ParticleGlobe/PointsShader.js

@@ -0,0 +1,4 @@
+import { DecodeSpeed } from "./include/decodeSpeed.include";
+var PointsVertexShader = /*glsl*/ "\n\n  attribute float a_index;\n  uniform mat4 uModelViewMatrix;\n  uniform mat4 uProjectionMatrix;\n  uniform sampler2D u_texture;\n  uniform float u_resolution;\n  uniform sampler2D u_uvtexture;\n  uniform float u_uvresolution;\n  uniform float u_seed;\n  varying vec4 v_color;\n  uniform float u_minlifetime;\n  uniform float u_maxlifetime;\n  uniform float u_speedfactor;\n\n  // Current animation frame. 0+\n  uniform int u_frame;\n\n  float random (vec2 uv) {\n    return fract(sin(dot(uv.xy,\n        vec2(12.9898,78.233))) * 43758.5453123);\n  }\n\n  //\n  // Given a vertex index, calculate its texture coordinates in the source\n  // texture. Texture coordinates are 0..1, 0..1. \n  // For vertex #1 and a texture of 10x10, this will return vec2(0.1, 0.0).\n  // For vertex #1 and a texture of 16,16, this will return vec2(0.0625, 0.0).\n  //\n  vec2 indexToTexCoords(float index) {\n    float yIndex = floor(index / u_resolution); // 0..1\n    float xIndex = mod(index, u_resolution);    // 0..1\n    return vec2(xIndex, yIndex) / u_resolution;\n  }\n\n  const float BASE = 255.0;\n  const float SCALE = 32768.0;\n  const float OFFSET = 16384.0;\n  \n  float decodeValue(vec2 channels) {\n    return (dot(channels, vec2(BASE * BASE, BASE)) - OFFSET) / SCALE;\n  }\n  \n  vec2 encodeValue(float value) {\n    value = value * SCALE + OFFSET;\n    float y = mod(value, BASE);\n    float x = floor(value / BASE);\n    return vec2(x, y) / BASE;\n  }\n\n  // Decode a pixel value into x,y coordinates (0..1, 0..1)\n  vec2 decode(vec4 pixel) {\n    return vec2(\n      decodeValue(pixel.xy),\n      decodeValue(pixel.zw)\n    );\n  }\n\n  // Encode (x,y) coordinates into a pixel value.\n  vec4 encode(vec2 coord) {\n    return vec4(encodeValue(coord.x), encodeValue(coord.y));\n  }\n\n  ".concat(DecodeSpeed, "\n\n  vec2 getRandomPos(vec2 pos) {\n    return vec2(random(pos * u_seed), random(pos * u_seed * 3.314));\n  }\n\n  void main() {\n    // From the vertex's index, get the coordinates in the texture where its\n    // position is stored.\n    vec2 texCoord = indexToTexCoords(a_index);\n\n    // A particle's lifetime is its index mod MAX (MAX classes), plus a constant (MIN).\n    int lifetime = int(mod(a_index, u_maxlifetime) + u_minlifetime); \n    // v0 = 1.0\n    // v1 = 2.0\n    // ..\n    // v99 = 100.0\n    // v100 = 1.0\n    // v101 = 2.0\n    // ..\n    // v199 = 100.0\n\n    // Use the vertex's index to get its current position from the texture,\n    // in the 0..1, 0..1 range.    \n    vec2 pos = decode(texture2D(u_texture, texCoord + 0.5/u_resolution));\n\n    // Check lifetime.\n    if(int(mod(float(u_frame), u_maxlifetime) + u_minlifetime) == lifetime) {\n      pos = getRandomPos(pos);\n    }\n\n    // Move particle with speed:\n    vec2 speed = decodeSpeed(pos);\n\n    if(speed.x == 99.0) {\n      pos = getRandomPos(pos);\n      speed = decodeSpeed(pos);\n    } else {\n      pos += speed / u_speedfactor;\n      // Wrap coords:\n      if(pos.x >= 1.0) pos.x -= 1.0;\n      if(pos.x < 0.0) pos.x += 1.0;\n      if(pos.y < 0.0) pos.y += 1.0;\n      if(pos.y >= 1.0) pos.y -= 1.0;\n    }\n\n    gl_Position = vec4(\n      texCoord.x * 2.0 - 1.0 + 0.5/u_resolution, // Add half pixelsize to center pixel.\n      texCoord.y * 2.0 - 1.0 + 0.5/u_resolution, // Add half pixelsize to center pixel.\n      0.0, 1.0);\n\n    // Set size & color:\n    gl_PointSize = 1.0;\n    v_color = vec4(encode(pos));\n  }\n");
+var PointsFragmentShader = /*glsl*/ "\n  precision mediump float;\n  varying vec4 v_color;\n\n  void main() {\n    gl_FragColor = v_color;\n  }\n";
+export { PointsVertexShader, PointsFragmentShader };

package/modules/ParticleGlobe/SphereShader.d.ts

@@ -0,0 +1,3 @@
+declare const SphereVertexShader = "\n  attribute vec4 aPosition;\n  attribute vec3 aNormal;\n  attribute vec2 aTexCoord;\n  uniform sampler2D uTexture;\n  uniform mat4 uModelViewMatrix;\n  uniform mat4 uProjectionMatrix;  \n\n  varying vec2 vTexCoord;\n  varying vec3 vNormal;\n  \n\n  void main() {\n    vec4 rotatedPosition = uModelViewMatrix * aPosition;\n    float z = (rotatedPosition.z + 4.0) / 2.0;\n    gl_Position = uProjectionMatrix * rotatedPosition;  \n\n    vNormal = aNormal;\n    vTexCoord = aTexCoord;\n  }\n";
+declare const SphereFragmentShader = "\n  precision mediump float;\n  uniform sampler2D uTexture;\n\n  varying vec3 vNormal;\n  varying vec2 vTexCoord;\n\n  void main() {\n    gl_FragColor = vec4(vTexCoord, 0.5, 1.0); // Simple color based on texture coordinates\n    gl_FragColor = texture2D(uTexture, vec2(1.0 - vTexCoord.x, vTexCoord.y));\n  }\n";
+export { SphereVertexShader, SphereFragmentShader };

package/modules/ParticleGlobe/SphereShader.js

@@ -0,0 +1,3 @@
+var SphereVertexShader = /*glsl*/ "\n  attribute vec4 aPosition;\n  attribute vec3 aNormal;\n  attribute vec2 aTexCoord;\n  uniform sampler2D uTexture;\n  uniform mat4 uModelViewMatrix;\n  uniform mat4 uProjectionMatrix;  \n\n  varying vec2 vTexCoord;\n  varying vec3 vNormal;\n  \n\n  void main() {\n    vec4 rotatedPosition = uModelViewMatrix * aPosition;\n    float z = (rotatedPosition.z + 4.0) / 2.0;\n    gl_Position = uProjectionMatrix * rotatedPosition;  \n\n    vNormal = aNormal;\n    vTexCoord = aTexCoord;\n  }\n";
+var SphereFragmentShader = /*glsl*/ "\n  precision mediump float;\n  uniform sampler2D uTexture;\n\n  varying vec3 vNormal;\n  varying vec2 vTexCoord;\n\n  void main() {\n    gl_FragColor = vec4(vTexCoord, 0.5, 1.0); // Simple color based on texture coordinates\n    gl_FragColor = texture2D(uTexture, vec2(1.0 - vTexCoord.x, vTexCoord.y));\n  }\n";
+export { SphereVertexShader, SphereFragmentShader };

package/modules/ParticleGlobe/TextureShader.d.ts

@@ -0,0 +1,3 @@
+declare const TextureVertexShader = "\n  attribute vec2 a_pos;\n  attribute vec2 a_texpos;\n  uniform sampler2D u_texture;\n  varying vec2 v_texpos;\n\n  void main() {\n    gl_Position = vec4(a_pos, 0.0, 1.0);\n    v_texpos = a_texpos;\n  }\n";
+declare const TextureFragmentShader = "\n  precision mediump float;\n  \n  uniform sampler2D u_texture;\n  varying vec2 v_texpos;\n  uniform int u_flip;\n  uniform float u_brightness;\n  \n  void main() {\n    gl_FragColor = texture2D(u_texture, u_flip == 1 ? vec2(v_texpos.x, 1.0 - v_texpos.y) : v_texpos) * u_brightness;\n  }\n";
+export { TextureVertexShader, TextureFragmentShader };

package/modules/ParticleGlobe/TextureShader.js

@@ -0,0 +1,3 @@
+var TextureVertexShader = /*glsl*/ "\n  attribute vec2 a_pos;\n  attribute vec2 a_texpos;\n  uniform sampler2D u_texture;\n  varying vec2 v_texpos;\n\n  void main() {\n    gl_Position = vec4(a_pos, 0.0, 1.0);\n    v_texpos = a_texpos;\n  }\n";
+var TextureFragmentShader = /*glsl*/ "\n  precision mediump float;\n  \n  uniform sampler2D u_texture;\n  varying vec2 v_texpos;\n  uniform int u_flip;\n  uniform float u_brightness;\n  \n  void main() {\n    gl_FragColor = texture2D(u_texture, u_flip == 1 ? vec2(v_texpos.x, 1.0 - v_texpos.y) : v_texpos) * u_brightness;\n  }\n";
+export { TextureVertexShader, TextureFragmentShader };

package/modules/ParticleGlobe/include/decodeSpeed.include.d.ts

@@ -0,0 +1,2 @@
+declare const DecodeSpeed = "\n  //\n  // Given a vertex coordinate (0..1, 0..1), find UV from texture.\n  // Returns (-0.5..0.5,-0.5..0.5)\n  //\n  vec2 decodeSpeed(vec2 coord) {\n    vec2 invcoord = vec2(coord.x, 1.0 - coord.y);\n    vec4 pixel = texture2D(u_uvtexture, invcoord + 0.5/u_uvresolution);\n    if(pixel.x == 0.0 && pixel.y == 0.0 && pixel.z == 0.0 && pixel.w == 0.0) return vec2(99.0, 99.0);\n    // x-coordinate is RG, y-coordinate is BA:\n    float u = dot(pixel.xy, vec2(255.0 * 255.0, 255.0)) / 65536.0;\n    float v = dot(pixel.zw, vec2(255.0 * 255.0, 255.0)) / 65536.0;\n    return vec2(u - 0.5, v - 0.5);\n  }\n\n";
+export { DecodeSpeed };

package/modules/ParticleGlobe/include/decodeSpeed.include.js

@@ -0,0 +1,2 @@
+var DecodeSpeed = /*glsl*/ "\n  //\n  // Given a vertex coordinate (0..1, 0..1), find UV from texture.\n  // Returns (-0.5..0.5,-0.5..0.5)\n  //\n  vec2 decodeSpeed(vec2 coord) {\n    vec2 invcoord = vec2(coord.x, 1.0 - coord.y);\n    vec4 pixel = texture2D(u_uvtexture, invcoord + 0.5/u_uvresolution);\n    if(pixel.x == 0.0 && pixel.y == 0.0 && pixel.z == 0.0 && pixel.w == 0.0) return vec2(99.0, 99.0);\n    // x-coordinate is RG, y-coordinate is BA:\n    float u = dot(pixel.xy, vec2(255.0 * 255.0, 255.0)) / 65536.0;\n    float v = dot(pixel.zw, vec2(255.0 * 255.0, 255.0)) / 65536.0;\n    return vec2(u - 0.5, v - 0.5);\n  }\n\n";
+export { DecodeSpeed };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",
@@ -35,6 +35,7 @@
     "@storybook/test": "^8.2.9",
     "@storybook/theming": "^8.2.9",
     "copy-webpack-plugin": "^12.0.2",
+    "pngjs": "^7.0.0",
     "storybook": "^8.2.9",
     "svg-spritemap-webpack-plugin": "^4.5.1",
     "typescript": "^5.5.4",
@@ -55,6 +56,7 @@
     "@types/react-transition-group": "^4.4.11",
     "awesome-debounce-promise": "^2.1.0",
     "date-fns": "^4.1.0",
+    "gl-matrix": "^3.4.3",
     "mapbox-gl": "^3.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/services/Auth/Auth.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+}
+/**
+ * `Auth` serves as an authentication and authorization context. It wraps an application,
+ * providing it with the `useAuth` hook. This hook is used to determine if a user is currently
+ * authenticated, and redirect to a different route if necessary.
+ *
+ * Wrap an application:
+ *
+ * ```tsx
+ * <Auth>
+ *   ...
+ * </Auth>
+ * ```
+ *
+ * In the application, use `useAuth`:
+ *
+ * ```tsx
+ * const auth = useAuth();
+ * auth.signin("access", "refresh");
+ * ```
+ */
+declare const Auth: (props: IProps) => React.JSX.Element;
+export { Auth };