@longline/aqua-ui 1.0.48 → 1.0.50

package/containers/Form/elements/BoxWrapper.js

@@ -31,7 +31,7 @@ var BoxWrapperBase = function (props) {
         React.createElement(HintBackground, null, props.hint)));
 };
 var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 22px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"], ["\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 22px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
-var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding-top: 25px;\n  padding-bottom: 25px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding-top: 25px;\n  padding-bottom: 25px;\n"])));
+var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding-top: 23px;\n  padding-bottom: 23px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding-top: 23px;\n  padding-bottom: 23px;\n"])));
 var BoxWrapper = styled(BoxWrapperBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  min-height: 80px;\n  \n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  border: none;\n\n  // Hint/error background:\n  ", " {\n    ", "\n  }\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  &:focus-within {\n    outline: solid 2px ", ";\n  }    \n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 2px;\n    color: ", ";\n  }\n\n  // Error state:\n  ", "\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "\n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  min-height: 80px;\n  \n  // Appearance:\n  border-radius: ", "px;\n  background-color: ", ";\n  border: none;\n\n  // Hint/error background:\n  ", " {\n    ", "\n  }\n\n  // Hover:\n  &:hover {\n    outline: solid 2px ", ";\n  }\n\n  &:focus-within {\n    outline: solid 2px ", ";\n  }    \n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n  }\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    bottom: 2px;\n    color: ", ";\n  }\n\n  // Error state:\n  ", "\n\n  // Disabled state:\n  ", "\n\n  // Ghost state:\n  ", "\n\n  // Fields may provide their weight in relative units to other fields.\n  ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n    "], ["\n      background: ", ";\n    "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    outline: solid 2px ", ";\n    &:hover, &:focus-within {\n      outline: solid 2px ", ";\n    }\n  "], ["\n    outline: solid 2px ", ";\n    &:hover, &:focus-within {\n      outline: solid 2px ", ";\n    }\n  "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    user-select: none;\n    outline: solid 2px ", ";\n    background-color: ", ";\n    pointer-events: none;\n    ", " {\n      color: ", ";\n    }\n    ", " {\n      color: ", ";\n    }\n  "], ["\n    user-select: none;\n    outline: solid 2px ", ";\n    background-color: ", ";\n    pointer-events: none;\n    ", " {\n      color: ", ";\n    }\n    ", " {\n      color: ", ";\n    }\n  "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    pointer-events: none;\n\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "], ["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    pointer-events: none;\n\n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }    \n  "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
 export { BoxWrapper };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/inputs/Dropdown/Body.d.ts

@@ -18,6 +18,8 @@ interface IProps {
     search?: string;
     /** If set, list items will be extra tall. */
     tall?: boolean;
+    /** Minimum body width for narrow dropdowns. */
+    minBodyWidth?: number;
 }
 declare const Body: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;

package/inputs/Dropdown/Body.js

@@ -6,9 +6,15 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { List } from '../../containers/List';
 var BodyBase = React.forwardRef(function (props, ref) {
-    return (React.createElement("div", { className: props.className, tabIndex: -1 },
+    var wrapperRef = React.useRef(null);
+    // Determine if dropdown is on the left or right-hand side of the viewport:
+    var isRight = true;
+    if (wrapperRef.current) {
+        isRight = wrapperRef.current.getBoundingClientRect().left > window.innerWidth / 2;
+    }
+    return (React.createElement("div", { className: "".concat(props.className, " ").concat(isRight ? 'right' : ''), tabIndex: -1, ref: wrapperRef },
         React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children)));
 });
-var Body = styled(BodyBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position:       absolute;\n  z-index:        100;\n  box-sizing:     border-box;\n  outline:        none;\n  visibility: ", ";\n  font: ", ";\n\n  // Width:\n  ", "\n  // Transparent fill be placed over thick FieldWrapper's border.\n  ", "\n\n  // Dropbox can open upwards or downwards. This affects its positioning \n  // relative to the parent.\n  // Transparent Dropdowns have more distance from the selector so that\n  // they appear outside of the FieldWrapper.\n  ", "\n  ", "\n\n  transition: opacity ", "ms ease-in-out,\n              max-height 0ms linear ", "ms;\n  max-height: 0;\n  opacity: 0;\n  ", "\n"], ["\n  position:       absolute;\n  z-index:        100;\n  box-sizing:     border-box;\n  outline:        none;\n  visibility: ", ";\n  font: ", ";\n\n  // Width:\n  ", "\n  // Transparent fill be placed over thick FieldWrapper's border.\n  ", "\n\n  // Dropbox can open upwards or downwards. This affects its positioning \n  // relative to the parent.\n  // Transparent Dropdowns have more distance from the selector so that\n  // they appear outside of the FieldWrapper.\n  ", "\n  ", "\n\n  transition: opacity ", "ms ease-in-out,\n              max-height 0ms linear ", "ms;\n  max-height: 0;\n  opacity: 0;\n  ", "\n"])), function (p) { return p.open ? 'visible' : 'hidden'; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return !p.transparent && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.transparent && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["left: -2px; right: -2px;"], ["left: -2px; right: -2px;"]))); }, function (p) { return p.upwards && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    bottom: calc(100% + ", ");\n  "], ["\n    bottom: calc(100% + ", ");\n  "])), p.transparent ? "30px" : "8px"); }, function (p) { return !p.upwards && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    top: calc(100% + ", ");\n  "], ["\n    top: calc(100% + ", ");\n  "])), p.transparent ? "30px" : "8px"); }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    transition: opacity ", "ms ease-in,\n                max-height 0ms linear;\n    max-height: 1000px;\n    opacity: 1;\n  "], ["\n    transition: opacity ", "ms ease-in,\n                max-height 0ms linear;\n    max-height: 1000px;\n    opacity: 1;\n  "])), function (p) { return p.theme.animation.duration; }); });
+var Body = styled(BodyBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position:       absolute;\n  z-index:        100;\n  box-sizing:     border-box;\n  outline:        none;\n  visibility: ", ";\n  font: ", ";\n\n  // Width:\n  ", "\n  ", "\n  \n  // Transparent fill be placed over thick FieldWrapper's border.\n  ", "\n\n  // In case of minBodyWidth, left or right align the body depending\n  // on where the Dropdown is in the viewport:\n  ", "\n\n  // Dropbox can open upwards or downwards. This affects its positioning \n  // relative to the parent.\n  // Transparent Dropdowns have more distance from the selector so that\n  // they appear outside of the FieldWrapper.\n  ", "\n  ", "\n\n  transition: opacity ", "ms ease-in-out,\n              max-height 0ms linear ", "ms;\n  max-height: 0;\n  opacity: 0;\n  ", "\n"], ["\n  position:       absolute;\n  z-index:        100;\n  box-sizing:     border-box;\n  outline:        none;\n  visibility: ", ";\n  font: ", ";\n\n  // Width:\n  ", "\n  ", "\n  \n  // Transparent fill be placed over thick FieldWrapper's border.\n  ", "\n\n  // In case of minBodyWidth, left or right align the body depending\n  // on where the Dropdown is in the viewport:\n  ", "\n\n  // Dropbox can open upwards or downwards. This affects its positioning \n  // relative to the parent.\n  // Transparent Dropdowns have more distance from the selector so that\n  // they appear outside of the FieldWrapper.\n  ", "\n  ", "\n\n  transition: opacity ", "ms ease-in-out,\n              max-height 0ms linear ", "ms;\n  max-height: 0;\n  opacity: 0;\n  ", "\n"])), function (p) { return p.open ? 'visible' : 'hidden'; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.minBodyWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    min-width: ", "px;\n  "], ["\n    min-width: ", "px;\n  "])), p.minBodyWidth); }, function (p) { return !p.transparent && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (p) { return p.transparent && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["left: -2px; right: -2px;"], ["left: -2px; right: -2px;"]))); }, function (p) { return p.minBodyWidth && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    left: 0;\n    right: auto;\n    &.right {\n      right: 0;\n      left: auto;\n    }\n  "], ["\n    left: 0;\n    right: auto;\n    &.right {\n      right: 0;\n      left: auto;\n    }\n  "]))); }, function (p) { return p.upwards && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    bottom: calc(100% + ", ");\n  "], ["\n    bottom: calc(100% + ", ");\n  "])), p.transparent ? "30px" : "8px"); }, function (p) { return !p.upwards && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    top: calc(100% + ", ");\n  "], ["\n    top: calc(100% + ", ");\n  "])), p.transparent ? "30px" : "8px"); }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.theme.animation.duration * 0; }, function (p) { return p.open && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    transition: opacity ", "ms ease-in,\n                max-height 0ms linear;\n    max-height: 1000px;\n    opacity: 1;\n  "], ["\n    transition: opacity ", "ms ease-in,\n                max-height 0ms linear;\n    max-height: 1000px;\n    opacity: 1;\n  "])), function (p) { return p.theme.animation.duration; }); });
 export { Body };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/inputs/Dropdown/Dropdown.d.ts

@@ -90,6 +90,10 @@ interface IDropdownProps {
      * If set, list items will be extra tall.
      */
     tall?: boolean;
+    /**
+     * A minimum body width can be set for dropdowns that are very narrow.
+     */
+    minBodyWidth?: number;
     /**
      * Fired when the Dropdown value changes.
      */

package/inputs/Dropdown/Dropdown.js

@@ -395,7 +395,7 @@ var DropdownBase = function (props) {
     var children = getBodyChildren();
     return (React.createElement("div", { className: props.className, tabIndex: props.disabled ? -1 : 0, ref: wrapperRef, onKeyDown: handleKeyDown, onClick: handleClickDropdown },
         React.createElement(Selector, { open: open, error: props.error, disabled: props.disabled, upwards: upwards, transparent: props.transparent, ghost: props.ghost, multiple: props.multiple, onClick: handleSelectorClicked, onClear: (props.clearable && !showPlaceholder) ? handleClear : null, placeholder: showPlaceholder }, label),
-        React.createElement(Body, { ref: bodyRef, upwards: upwards, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall }, children)));
+        React.createElement(Body, { ref: bodyRef, upwards: upwards, open: open, transparent: props.transparent, maxItems: props.maxItems, onSearch: props.onSearch ? handleSearch : null, search: search, tall: props.tall, minBodyWidth: props.minBodyWidth }, children)));
 };
 var DropdownStyled = styled(DropdownBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  // Dropdown has a minimum width. \n  width: 250px;\n  // A fluid Dropdown occupies full horizontal width. \n  ", "  \n  outline: none;\n  user-select: none;\n  font: ", ";\n  color: ", ";\n"], ["\n  position: relative;\n  // Dropdown has a minimum width. \n  width: 250px;\n  // A fluid Dropdown occupies full horizontal width. \n  ", "  \n  outline: none;\n  user-select: none;\n  font: ", ";\n  color: ", ";\n"
     /**

package/map/layers/ParticlesLayer/ParticlesFragmentShader.d.ts

@@ -1,2 +1,2 @@
-declare const ParticlesFragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  uniform sampler2D uTexture;\n  uniform sampler2D vTexture;\n  varying vec4 v_color;\n\n  //\n  // Returns texture color at pixelCoord.\n  //\n  /* vec4 texelFetch(sampler2D tex, vec2 pixelCoord) {\n    return texture2D(tex, pixelCoord / u_resolution);\n  }\n\n  vec4 getSpeed(vec2 pixelCoord) {\n    vec4 colorU = texture2D(uTexture, pixelCoord / u_resolution);\n    vec4 colorV = texture2D(vTexture, pixelCoord / u_resolution);\n    if(colorU.w == 0.0 || colorV.w == 0.0) return vec4(0.0, 0.0, 0.0, 0.0);\n    float uRange = maxU - minU;\n    float vRange = maxV - minV;\n    float u = uRange * colorU.x + minU;\n    float v = vRange * colorV.x + minV;\n    float ratio = sqrt(u * u + v * v) / maxUV;\n    \n    return vec4(1.0, 1.0, 1.0, 1.0);\n    return vec4(ratio, 0.0, 0.0, 1.0);\n  } */\n\n  /* void oldmain() {\n    float xMod20 = mod(float(gl_FragCoord.x), 20.0);\n    if(!(xMod20 >= shift && xMod20 <= shift + 1.0)) return;\n    if(mod(float(gl_FragCoord.y), 20.0) >= 3.0) return;\n    // Get input color:\n    //vec4 color = texelFetch(uTexture, gl_FragCoord.xy);\n\n    vec2 pos = gl_FragCoord.xy;\n    vec4 color = getSpeed(pos);\n\n    gl_FragColor = color;\n  } */\n\n  // Half size of box\n  #define SIZE 15\n\n  /* void main() {\n    // Draw box around point.\n    int x = int(gl_PointCoord.x * float(SIZE*2));\n    int y = int(gl_PointCoord.y * float(SIZE*2));  \n    if(x == 0 || y == 0 || x == SIZE*2-1 || y == SIZE*2-1) {\n      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n      return;\n    }\n\n    // Get texture color of point at its center.\n    vec4 color = texelFetch(uTexture, gl_FragCoord.xy - vec2(x, -y));\n    gl_FragColor = color;\n  } */\n\n  void main() {\n    gl_FragColor = v_color;\n  }\n";
+declare const ParticlesFragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  varying vec4 v_color;\n\n  void main() {\n    gl_FragColor = v_color;\n  }\n";
 export { ParticlesFragmentShader };

package/map/layers/ParticlesLayer/ParticlesFragmentShader.js

@@ -1,2 +1,2 @@
-var ParticlesFragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  uniform sampler2D uTexture;\n  uniform sampler2D vTexture;\n  varying vec4 v_color;\n\n  //\n  // Returns texture color at pixelCoord.\n  //\n  /* vec4 texelFetch(sampler2D tex, vec2 pixelCoord) {\n    return texture2D(tex, pixelCoord / u_resolution);\n  }\n\n  vec4 getSpeed(vec2 pixelCoord) {\n    vec4 colorU = texture2D(uTexture, pixelCoord / u_resolution);\n    vec4 colorV = texture2D(vTexture, pixelCoord / u_resolution);\n    if(colorU.w == 0.0 || colorV.w == 0.0) return vec4(0.0, 0.0, 0.0, 0.0);\n    float uRange = maxU - minU;\n    float vRange = maxV - minV;\n    float u = uRange * colorU.x + minU;\n    float v = vRange * colorV.x + minV;\n    float ratio = sqrt(u * u + v * v) / maxUV;\n    \n    return vec4(1.0, 1.0, 1.0, 1.0);\n    return vec4(ratio, 0.0, 0.0, 1.0);\n  } */\n\n  /* void oldmain() {\n    float xMod20 = mod(float(gl_FragCoord.x), 20.0);\n    if(!(xMod20 >= shift && xMod20 <= shift + 1.0)) return;\n    if(mod(float(gl_FragCoord.y), 20.0) >= 3.0) return;\n    // Get input color:\n    //vec4 color = texelFetch(uTexture, gl_FragCoord.xy);\n\n    vec2 pos = gl_FragCoord.xy;\n    vec4 color = getSpeed(pos);\n\n    gl_FragColor = color;\n  } */\n\n  // Half size of box\n  #define SIZE 15\n\n  /* void main() {\n    // Draw box around point.\n    int x = int(gl_PointCoord.x * float(SIZE*2));\n    int y = int(gl_PointCoord.y * float(SIZE*2));  \n    if(x == 0 || y == 0 || x == SIZE*2-1 || y == SIZE*2-1) {\n      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n      return;\n    }\n\n    // Get texture color of point at its center.\n    vec4 color = texelFetch(uTexture, gl_FragCoord.xy - vec2(x, -y));\n    gl_FragColor = color;\n  } */\n\n  void main() {\n    gl_FragColor = v_color;\n  }\n";
+var ParticlesFragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  varying vec4 v_color;\n\n  void main() {\n    gl_FragColor = v_color;\n  }\n";
 export { ParticlesFragmentShader };

package/map/layers/ParticlesLayer/ParticlesLayer.d.ts

@@ -26,8 +26,9 @@ interface IProps {
      */
     density?: number;
     /**
-     * Animation delay factor.
-     * @default 1
+     * Animation delay factor. Animation step is advanced only every `delay` animation frames.
+     * A `delay` of `0` means no delay; a `delay` of `1` means every odd frame is skipped.
+     * @default 0
      */
     delay?: number;
     /**

package/map/layers/ParticlesLayer/ParticlesLayer.js

@@ -59,24 +59,29 @@ var ParticlesLayerBase = function (props) {
     var fboU = React.useRef(null);
     var fboV = React.useRef(null);
     var frame = React.useRef(0);
+    var skip = React.useRef(0);
     // requestAnimationFrame ID:
     var animation = React.useRef(null);
     // Current time is used to force component rerender when props change:
     var _a = React.useState(0), time = _a[0], setTime = _a[1];
     // Force component rerender when props change:
     React.useEffect(function () {
-        setTime(Date.now());
         window.cancelAnimationFrame(animation.current);
+        setTime(Date.now());
         frame.current = 0;
+        skip.current = 0;
         animation.current = window.requestAnimationFrame(draw);
     }, [props.data, props.gradientStops, props.particles, props.density, props.delay, props.pointSize]);
     var draw = function () {
-        frame.current = (frame.current + 1) % (props.particles * props.delay);
-        map.current.triggerRepaint();
+        skip.current++;
+        if (skip.current >= props.delay) {
+            skip.current = 0;
+            frame.current = (frame.current + 1) % props.particles;
+            map.current.triggerRepaint();
+        }
         animation.current = window.requestAnimationFrame(draw);
     };
     React.useEffect(function () {
-        animation.current = window.requestAnimationFrame(draw);
         return function () {
             window.cancelAnimationFrame(animation.current);
         };
@@ -265,7 +270,7 @@ var ParticlesLayerBase = function (props) {
         var colors = props.gradientStops.map(function (s) { return colorToRGBA(s.color); }).flat();
         gl.uniform4fv(gl.getUniformLocation(particlesProgram.current, 'u_gradientColors'), new Float32Array(colors));
         // Current animation frame:
-        gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "u_frame"), Math.floor(frame.current / props.delay));
+        gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "u_frame"), Math.floor(frame.current));
         // Number of point instances - this is the length of each curve:
         gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "u_num_instances"), props.particles);
         // Size of points to be drawn (in pixels).
@@ -326,7 +331,7 @@ var ParticlesLayerBase = function (props) {
         type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
 };
 var ParticlesLayer = function (_a) {
-    var _b = _a.particles, particles = _b === void 0 ? 80 : _b, _c = _a.density, density = _c === void 0 ? 40 : _c, _d = _a.delay, delay = _d === void 0 ? 1 : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? [
+    var _b = _a.particles, particles = _b === void 0 ? 80 : _b, _c = _a.density, density = _c === void 0 ? 40 : _c, _d = _a.delay, delay = _d === void 0 ? 0 : _d, _e = _a.gradientStops, gradientStops = _e === void 0 ? [
         { pos: 0.0, color: '#ffffffff' },
         { pos: 0.25, color: '#5c5cffff' },
         { pos: 0.5, color: '#5c5cff00' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",