@longline/aqua-ui 1.0.48 → 1.0.49

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/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.49",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",