@longline/aqua-ui 1.0.47 → 1.0.49
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/containers/Form/elements/BoxWrapper.js +4 -3
- package/inputs/Dropdown/Body.js +3 -3
- package/inputs/Slider/Slider.d.ts +11 -6
- package/inputs/Slider/Slider.js +6 -6
- package/map/layers/ParticlesLayer/ParticlesFragmentShader.d.ts +1 -1
- package/map/layers/ParticlesLayer/ParticlesFragmentShader.js +1 -1
- package/map/layers/ParticlesLayer/ParticlesLayer.d.ts +3 -2
- package/map/layers/ParticlesLayer/ParticlesLayer.js +11 -6
- package/package.json +1 -1
|
@@ -27,10 +27,11 @@ var BoxWrapperBase = function (props) {
|
|
|
27
27
|
};
|
|
28
28
|
return (React.createElement("div", { className: props.className, onClick: handleClick, ref: wrapper },
|
|
29
29
|
props.label,
|
|
30
|
-
props.children,
|
|
30
|
+
React.createElement(Control, null, props.children),
|
|
31
31
|
React.createElement(HintBackground, null, props.hint)));
|
|
32
32
|
};
|
|
33
33
|
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; });
|
|
34
|
-
var
|
|
34
|
+
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"])));
|
|
35
|
+
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); });
|
|
35
36
|
export { BoxWrapper };
|
|
36
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
37
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
package/inputs/Dropdown/Body.js
CHANGED
|
@@ -6,9 +6,9 @@ import * as React from 'react';
|
|
|
6
6
|
import styled, { css } from 'styled-components';
|
|
7
7
|
import { List } from '../../containers/List';
|
|
8
8
|
var BodyBase = React.forwardRef(function (props, ref) {
|
|
9
|
-
return React.createElement("div", { className: props.className, tabIndex: -1 },
|
|
10
|
-
React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children));
|
|
9
|
+
return (React.createElement("div", { className: props.className, tabIndex: -1 },
|
|
10
|
+
React.createElement(List, { tall: props.tall, maxItems: props.maxItems, contract: true, onSearch: props.onSearch, ref: ref }, props.children)));
|
|
11
11
|
});
|
|
12
|
-
var Body = styled(BodyBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n z-index: 100;\n box-sizing: border-box;\n
|
|
12
|
+
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; }); });
|
|
13
13
|
export { Body };
|
|
14
14
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -6,6 +6,11 @@ interface IProps {
|
|
|
6
6
|
* Current value.
|
|
7
7
|
*/
|
|
8
8
|
value?: number;
|
|
9
|
+
/**
|
|
10
|
+
* If set, `Slider` will fill all horizontal space available to it.
|
|
11
|
+
* @default false
|
|
12
|
+
*/
|
|
13
|
+
fluid?: boolean;
|
|
9
14
|
/**
|
|
10
15
|
* Minimum value.
|
|
11
16
|
* @default 0
|
|
@@ -27,10 +32,6 @@ interface IProps {
|
|
|
27
32
|
* `delta` will be 10% of the value range.
|
|
28
33
|
*/
|
|
29
34
|
delta?: number;
|
|
30
|
-
/**
|
|
31
|
-
* Event is triggered when slider's value changes.
|
|
32
|
-
*/
|
|
33
|
-
onChange?: (value: number) => void;
|
|
34
35
|
/**
|
|
35
36
|
* Should ticks be displayed? If so, how many?
|
|
36
37
|
* @default 0
|
|
@@ -53,11 +54,15 @@ interface IProps {
|
|
|
53
54
|
* A `Slider` can be in an `error` state.
|
|
54
55
|
*/
|
|
55
56
|
error?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Event is triggered when slider's value changes.
|
|
59
|
+
*/
|
|
60
|
+
onChange?: (value: number) => void;
|
|
56
61
|
}
|
|
57
62
|
/**
|
|
58
63
|
* Sliders allow users to view and select a value (or range) along a track.
|
|
59
|
-
* They
|
|
64
|
+
* They're ideal for adjusting settings such as volume and brightness, or for
|
|
60
65
|
* applying image filters.
|
|
61
66
|
*/
|
|
62
|
-
declare const Slider: ({ min, max, ...props }: IProps) => React.JSX.Element;
|
|
67
|
+
declare const Slider: ({ min, max, fluid, ...props }: IProps) => React.JSX.Element;
|
|
63
68
|
export { Slider, IProps };
|
package/inputs/Slider/Slider.js
CHANGED
|
@@ -177,21 +177,21 @@ var Knob = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateOb
|
|
|
177
177
|
var KnobPosition = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0px;\n z-index: 0; // Required z-offset for Knob::before\n"], ["\n position: absolute;\n left: 0;\n top: 0px;\n z-index: 0; // Required z-offset for Knob::before\n"])));
|
|
178
178
|
var TrackFill = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 50%;\n background-color: ", ";\n ", "\n ", " \n border-radius: 2px;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 50%;\n background-color: ", ";\n ", "\n ", " \n border-radius: 2px;\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.$error && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.negative); }, function (p) { return p.$disabled && css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[30]); });
|
|
179
179
|
var Track = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n position: relative;\n height: 4px;\n border-radius: 2px;\n box-sizing: border-box;\n background-color: ", ";\n\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding-top: 1px;\n padding-left: 2px;\n padding-right: 2px;\n"], ["\n position: relative;\n height: 4px;\n border-radius: 2px;\n box-sizing: border-box;\n background-color: ", ";\n\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding-top: 1px;\n padding-left: 2px;\n padding-right: 2px;\n"])), function (p) { return p.theme.colors.primary[5]; });
|
|
180
|
-
var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: relative;\n min-width:
|
|
180
|
+
var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n position: relative;\n min-width: ", ";\n box-sizing: border-box;\n // Padding above and below to capture mouse-down\n padding-top: 48px;\n padding-bottom: 8px;\n ", "\n cursor: ", ";\n user-select: none;\n outline: none;\n ", "\n\n ", "\n"], ["\n position: relative;\n min-width: ", ";\n box-sizing: border-box;\n // Padding above and below to capture mouse-down\n padding-top: 48px;\n padding-bottom: 8px;\n ", "\n cursor: ", ";\n user-select: none;\n outline: none;\n ", "\n\n ", "\n"
|
|
181
181
|
/**
|
|
182
182
|
* Sliders allow users to view and select a value (or range) along a track.
|
|
183
|
-
* They
|
|
183
|
+
* They're ideal for adjusting settings such as volume and brightness, or for
|
|
184
184
|
* applying image filters.
|
|
185
185
|
*/
|
|
186
|
-
])), function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n padding-left: 12px;\n padding-right: 12px;\n "], ["\n padding-left: 12px;\n padding-right: 12px;\n "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "], ["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "])), Knob, Pulse, Knob, Knob); });
|
|
186
|
+
])), function (p) { return p.fluid == true ? '100%' : '200px'; }, function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n padding-left: 12px;\n padding-right: 12px;\n "], ["\n padding-left: 12px;\n padding-right: 12px;\n "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "], ["\n // Focus ring:\n &:focus ", ":before {\n animation: ", " 2s linear infinite;\n }\n\n &:hover ", ":before {\n animation: none;\n opacity: 0.7;\n } \n\n // Active focus ring:\n &:active ", ":before {\n animation: none;\n opacity: 1;\n }\n "])), Knob, Pulse, Knob, Knob); });
|
|
187
187
|
/**
|
|
188
188
|
* Sliders allow users to view and select a value (or range) along a track.
|
|
189
|
-
* They
|
|
189
|
+
* They're ideal for adjusting settings such as volume and brightness, or for
|
|
190
190
|
* applying image filters.
|
|
191
191
|
*/
|
|
192
192
|
var Slider = function (_a) {
|
|
193
|
-
var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, props = __rest(_a, ["min", "max"]);
|
|
194
|
-
return React.createElement(SliderStyled, __assign({ min: min, max: max }, props));
|
|
193
|
+
var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.fluid, fluid = _d === void 0 ? false : _d, props = __rest(_a, ["min", "max", "fluid"]);
|
|
194
|
+
return React.createElement(SliderStyled, __assign({ min: min, max: max, fluid: fluid }, props));
|
|
195
195
|
};
|
|
196
196
|
export { Slider };
|
|
197
197
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const ParticlesFragmentShader = " \n #ifdef GL_ES\n precision mediump float;\n #endif\n\n
|
|
1
|
+
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";
|
|
2
2
|
export { ParticlesFragmentShader };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var ParticlesFragmentShader = /*glsl*/ " \n #ifdef GL_ES\n precision mediump float;\n #endif\n\n
|
|
1
|
+
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";
|
|
2
2
|
export { ParticlesFragmentShader };
|
|
@@ -26,8 +26,9 @@ interface IProps {
|
|
|
26
26
|
*/
|
|
27
27
|
density?: number;
|
|
28
28
|
/**
|
|
29
|
-
* Animation delay factor.
|
|
30
|
-
*
|
|
29
|
+
* Animation delay factor. Animation step is advanced only every `delay` animation frames.
|
|
30
|
+
* A `delay` of `0` means no delay; a `delay` of `1` means every odd frame is skipped.
|
|
31
|
+
* @default 0
|
|
31
32
|
*/
|
|
32
33
|
delay?: number;
|
|
33
34
|
/**
|
|
@@ -59,24 +59,29 @@ var ParticlesLayerBase = function (props) {
|
|
|
59
59
|
var fboU = React.useRef(null);
|
|
60
60
|
var fboV = React.useRef(null);
|
|
61
61
|
var frame = React.useRef(0);
|
|
62
|
+
var skip = React.useRef(0);
|
|
62
63
|
// requestAnimationFrame ID:
|
|
63
64
|
var animation = React.useRef(null);
|
|
64
65
|
// Current time is used to force component rerender when props change:
|
|
65
66
|
var _a = React.useState(0), time = _a[0], setTime = _a[1];
|
|
66
67
|
// Force component rerender when props change:
|
|
67
68
|
React.useEffect(function () {
|
|
68
|
-
setTime(Date.now());
|
|
69
69
|
window.cancelAnimationFrame(animation.current);
|
|
70
|
+
setTime(Date.now());
|
|
70
71
|
frame.current = 0;
|
|
72
|
+
skip.current = 0;
|
|
71
73
|
animation.current = window.requestAnimationFrame(draw);
|
|
72
74
|
}, [props.data, props.gradientStops, props.particles, props.density, props.delay, props.pointSize]);
|
|
73
75
|
var draw = function () {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
+
skip.current++;
|
|
77
|
+
if (skip.current >= props.delay) {
|
|
78
|
+
skip.current = 0;
|
|
79
|
+
frame.current = (frame.current + 1) % props.particles;
|
|
80
|
+
map.current.triggerRepaint();
|
|
81
|
+
}
|
|
76
82
|
animation.current = window.requestAnimationFrame(draw);
|
|
77
83
|
};
|
|
78
84
|
React.useEffect(function () {
|
|
79
|
-
animation.current = window.requestAnimationFrame(draw);
|
|
80
85
|
return function () {
|
|
81
86
|
window.cancelAnimationFrame(animation.current);
|
|
82
87
|
};
|
|
@@ -265,7 +270,7 @@ var ParticlesLayerBase = function (props) {
|
|
|
265
270
|
var colors = props.gradientStops.map(function (s) { return colorToRGBA(s.color); }).flat();
|
|
266
271
|
gl.uniform4fv(gl.getUniformLocation(particlesProgram.current, 'u_gradientColors'), new Float32Array(colors));
|
|
267
272
|
// Current animation frame:
|
|
268
|
-
gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "u_frame"), Math.floor(frame.current
|
|
273
|
+
gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "u_frame"), Math.floor(frame.current));
|
|
269
274
|
// Number of point instances - this is the length of each curve:
|
|
270
275
|
gl.uniform1i(gl.getUniformLocation(particlesProgram.current, "u_num_instances"), props.particles);
|
|
271
276
|
// Size of points to be drawn (in pixels).
|
|
@@ -326,7 +331,7 @@ var ParticlesLayerBase = function (props) {
|
|
|
326
331
|
type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
|
|
327
332
|
};
|
|
328
333
|
var ParticlesLayer = function (_a) {
|
|
329
|
-
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 ?
|
|
334
|
+
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 ? [
|
|
330
335
|
{ pos: 0.0, color: '#ffffffff' },
|
|
331
336
|
{ pos: 0.25, color: '#5c5cffff' },
|
|
332
337
|
{ pos: 0.5, color: '#5c5cff00' },
|