@longline/aqua-ui 1.0.165 → 1.0.166

package/controls/View/ScrollingContent.d.ts

@@ -6,8 +6,8 @@ interface IProps {
     children?: React.ReactNode;
     /** Is this View in `ghost` mode? */
     ghost?: boolean;
-    /** Height of the view, in pixels. */
-    height: number;
+    /** Height of the view, in CSS units. */
+    height: string;
 }
 declare const ScrollingContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 export { ScrollingContent };

package/controls/View/ScrollingContent.js

@@ -17,6 +17,6 @@ var ScrollingContentBase = function (props) {
                 overflowY: "auto",
             } }, !props.ghost && props.children));
 };
-var ScrollingContent = styled(ScrollingContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: calc(", "px - 44px);\n"], ["\n  position: relative;\n  height: calc(", "px - 44px);\n"])), function (p) { return p.height; });
+var ScrollingContent = styled(ScrollingContentBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: calc(", " - 44px);\n"], ["\n  position: relative;\n  height: calc(", " - 44px);\n"])), function (p) { return p.height; });
 export { ScrollingContent };
 var templateObject_1;

package/controls/View/View.d.ts

@@ -22,24 +22,28 @@ interface IProps {
     /**
      * By default, content is ellipsized to one line. If `height` is set,
      * content is allowed to grow, and a scrollbar is added. Height is in
-     * pixels.
+     * CSS units, e.g. `300px` or `30vh`.
      */
-    height?: number;
+    height?: string;
     /**
      * Views may provide their weight in relative units to other Views,
      * for flexbox alignment, e.g. `2`.
      */
     weight?: number;
     /**
-     * Is this `View` in ghost mode? Value (i.e. `children`) will not be
+     * Is this `View` in ghost mode? Its value (i.e. `children`) will not be
      * displayed.
      * @default false
      */
     ghost?: boolean;
 }
 /**
- * A `View` is used to display static (read-only) data. A `View` has a label, and its
- * children are its value.
+ * A `View` is used to display static (read-only) data. A `View` has a label,
+ * and its children are its value. Optionally, a hint can be shown at the
+ * bottom of the `View`. By default, a `View` ellipsizes its content to a
+ * single line, and all views are the same height. A custom height can be set
+ * with the `height` attribute, and a scrollbar will then be added to the
+ * content.
  *
  * ```tsx
  * <View label="Email address">{email}</View>

package/controls/View/View.js

@@ -41,17 +41,25 @@ var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateO
 var HintContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3px;\n  left: 12px;\n  right: 12px;\n\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"], ["\n  position: absolute;\n  bottom: 3px;\n  left: 12px;\n  right: 12px;\n\n  font: ", ";\n  color: ", ";\n  user-select: none;\n  // Hints don't wrap and are ellipsized:\n  white-space: nowrap;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.theme.colors.neutral[80]; });
 var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  \n  ", "\n  z-index: 0; // for :before\n  padding-left: 12px;\n  padding-right: 12px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  overflow: hidden;\n\n  // Hint background:\n  ", "\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n    user-select: none;\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"], ["\n  // Position & size:\n  position: relative;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  \n  ", "\n  z-index: 0; // for :before\n  padding-left: 12px;\n  padding-right: 12px;\n\n  // Appearance:\n  border-radius: ", "px;\n  background-color: rgb(from ", " r g b / 30%);\n  border: none;\n  font: ", ";\n  color: ", ";\n\n  // Content:\n  overflow: hidden;\n\n  // Hint background:\n  ", "\n\n  ", " {\n    position: absolute;\n    left: 12px;\n    right: 12px;\n    top: 10px;\n    color: ", ";\n    user-select: none;\n  }\n\n  // Ghost state:\n  ", "\n\n  // Views may provide their weight in relative units to other fields.\n  ", "\n"
     /**
-     * A `View` is used to display static (read-only) data. A `View` has a label, and its
-     * children are its value.
+     * A `View` is used to display static (read-only) data. A `View` has a label,
+     * and its children are its value. Optionally, a hint can be shown at the
+     * bottom of the `View`. By default, a `View` ellipsizes its content to a
+     * single line, and all views are the same height. A custom height can be set
+     * with the `height` attribute, and a scrollbar will then be added to the
+     * content.
      *
      * ```tsx
      * <View label="Email address">{email}</View>
      * ```
      */
-])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", "px;"], ["height: ", "px;"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "], ["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    color: transparent;\n    text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    pointer-events: none;\n    user-select: none;\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    color: transparent;\n    text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    pointer-events: none;\n    user-select: none;\n    \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n  "])), p.theme.colors.primary[2], function (p) { return p.theme.colors.neutral[100]; }, Label, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
+])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "], ["\n    &:before {\n      z-index: -1;\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 22px;\n      background-color: rgb(from ", " r g b / 30%);\n    }\n  "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    outline: dashed 1px ", ";\n    background-color: transparent;\n    color: transparent;\n    text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    pointer-events: none;\n    user-select: none;\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    color: transparent;\n    text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    pointer-events: none;\n    user-select: none;\n    \n    ", " {\n      color: transparent;\n      text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n    }  \n  "])), p.theme.colors.primary[2], function (p) { return p.theme.colors.neutral[100]; }, Label, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
 /**
- * A `View` is used to display static (read-only) data. A `View` has a label, and its
- * children are its value.
+ * A `View` is used to display static (read-only) data. A `View` has a label,
+ * and its children are its value. Optionally, a hint can be shown at the
+ * bottom of the `View`. By default, a `View` ellipsizes its content to a
+ * single line, and all views are the same height. A custom height can be set
+ * with the `height` attribute, and a scrollbar will then be added to the
+ * content.
  *
  * ```tsx
  * <View label="Email address">{email}</View>

package/map/layers/InterpolationLayer/DotsFragmentShader.d.ts

@@ -0,0 +1,2 @@
+declare const DotsFragmentShader = " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  void main() {\n    gl_FragColor = vec4(1.0, 1.0, 1.0, 0.5);\n  }\n";
+export { DotsFragmentShader };

package/map/layers/InterpolationLayer/DotsFragmentShader.js

@@ -0,0 +1,2 @@
+var DotsFragmentShader = /*glsl*/ " \n  #ifdef GL_ES\n  precision mediump float;\n  #endif\n\n  void main() {\n    gl_FragColor = vec4(1.0, 1.0, 1.0, 0.5);\n  }\n";
+export { DotsFragmentShader };

package/map/layers/InterpolationLayer/DotsVertexShader.d.ts

@@ -0,0 +1,2 @@
+declare const DotsVertexShader = "\n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n\n  void main() {\n    gl_PointSize = 1.0;\n    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n  }\n";
+export { DotsVertexShader };

package/map/layers/InterpolationLayer/DotsVertexShader.js

@@ -0,0 +1,2 @@
+var DotsVertexShader = /*glsl*/ "\n  uniform   mat4 u_matrix;\n  attribute vec2 a_pos;\n\n  void main() {\n    gl_PointSize = 1.0;\n    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);\n  }\n";
+export { DotsVertexShader };

package/map/layers/InterpolationLayer/InterpolationLayer.d.ts

@@ -35,11 +35,16 @@ interface IProps {
      * @default 99
      */
     maxZoom?: number;
+    /**
+     * If set, renders a dot for each data point.
+     * @default false
+     */
+    dots?: boolean;
 }
 /**
  * An `InterpolationLayer` takes a data array of the form `{ latitude, longitude, value }`. It performs triangulation
  * and draws the data in an OpenGL layer. Optionally, a number of contour `levels` can be set to draw contour lines.
  * Gradient colors are configurable using `gradientStops`.
  */
-declare const InterpolationLayer: ({ levels, contourColor, gradientStops, minZoom, maxZoom, ...props }: IProps) => React.JSX.Element;
+declare const InterpolationLayer: ({ levels, contourColor, gradientStops, minZoom, maxZoom, dots, ...props }: IProps) => React.JSX.Element;
 export { InterpolationLayer };

package/map/layers/InterpolationLayer/InterpolationLayer.js

@@ -39,12 +39,15 @@ import { LevelsVertexShader } from './LevelsVertexShader';
 import { LevelsFragmentShader } from './LevelsFragmentShader';
 import { ContoursVertexShader } from './ContoursVertexShader';
 import { ContoursFragmentShader } from './ContoursFragmentShader';
+import { DotsVertexShader } from './DotsVertexShader';
+import { DotsFragmentShader } from './DotsFragmentShader';
 var TEXTURE_WIDTH = 1024;
 var TEXTURE_HEIGHT = 1024;
 var InterpolationLayerBase = function (props) {
     var map = useMap();
     var levelsProgram = React.useRef(null);
     var contoursProgram = React.useRef(null);
+    var dotsProgram = React.useRef(null);
     var levelsBuffer = React.useRef(null);
     var contoursBuffer = React.useRef(null);
     var fbo = React.useRef(null);
@@ -69,6 +72,45 @@ var InterpolationLayerBase = function (props) {
             return point([dp.longitude, dp.latitude], { 'v': dp.value });
         }));
         var polys = tin(points, 'v');
+        /* // Calculate average side length of triangles.
+        let total = 0;
+        polys.features.forEach(p => {
+          const a = p.geometry.coordinates[0][0];
+          const b = p.geometry.coordinates[0][1];
+          const c = p.geometry.coordinates[0][2];
+          const d1 = Math.sqrt((a[0] - b[0])*(a[0]-b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
+          const d2 = Math.sqrt((b[0] - c[0])*(b[0]-c[0]) + (b[1] - c[1]) * (b[1] - c[1]));
+          const d3 = Math.sqrt((a[0] - c[0])*(a[0]-c[0]) + (a[1] - c[1]) * (a[1] - c[1]));
+          const avg = (d1 + d2 + d3) / 3;
+          total += avg;
+        });
+        const avg = total / polys.features.length;
+        
+        // Remove any triangles with a side of more than 2x avg
+        const factor = 4;
+        polys.features = polys.features.filter(p => {
+          const a = p.geometry.coordinates[0][0];
+          const b = p.geometry.coordinates[0][1];
+          const c = p.geometry.coordinates[0][2];
+          const d1 = Math.sqrt((a[0] - b[0])*(a[0]-b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
+          const d2 = Math.sqrt((b[0] - c[0])*(b[0]-c[0]) + (b[1] - c[1]) * (b[1] - c[1]));
+          const d3 = Math.sqrt((a[0] - c[0])*(a[0]-c[0]) + (a[1] - c[1]) * (a[1] - c[1]));
+          if(d1 > factor * avg || d2 > factor * avg || d3 > factor * avg) return false;
+          return true;
+        });
+    
+        // Remove any triangles with a long side:
+        const sidefactor = 4;
+        polys.features = polys.features.filter(p => {
+          const a = p.geometry.coordinates[0][0];
+          const b = p.geometry.coordinates[0][1];
+          const c = p.geometry.coordinates[0][2];
+          const d1 = Math.sqrt((a[0] - b[0])*(a[0]-b[0]) + (a[1] - b[1]) * (a[1] - b[1]));
+          const d2 = Math.sqrt((b[0] - c[0])*(b[0]-c[0]) + (b[1] - c[1]) * (b[1] - c[1]));
+          const d3 = Math.sqrt((a[0] - c[0])*(a[0]-c[0]) + (a[1] - c[1]) * (a[1] - c[1]));
+          if(d1 > sidefactor * d2 || d1 > sidefactor * d3 || d2 > sidefactor * d3) return false;
+          return true;
+        });*/
         return polys;
     };
     //
@@ -131,6 +173,21 @@ var InterpolationLayerBase = function (props) {
         gl.attachShader(contoursProgram.current, fragmentShader);
         gl.linkProgram(contoursProgram.current);
     };
+    var createDotsProgram = function (gl) {
+        // create a vertex shader
+        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        gl.shaderSource(vertexShader, DotsVertexShader);
+        gl.compileShader(vertexShader);
+        // create a fragment shader
+        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        gl.shaderSource(fragmentShader, DotsFragmentShader);
+        gl.compileShader(fragmentShader);
+        // link the two shaders into a WebGL program
+        dotsProgram.current = gl.createProgram();
+        gl.attachShader(dotsProgram.current, vertexShader);
+        gl.attachShader(dotsProgram.current, fragmentShader);
+        gl.linkProgram(dotsProgram.current);
+    };
     var onAddLayer = function (map, gl) {
         // AddLayer is only called once.
         if (!gl)
@@ -146,6 +203,7 @@ var InterpolationLayerBase = function (props) {
         }
         createLevelsProgram(gl);
         createContoursProgram(gl);
+        createDotsProgram(gl);
         createTexture(gl);
         createFrameBuffer(gl);
         // Convert dataset to triangle geometry.
@@ -224,6 +282,18 @@ var InterpolationLayerBase = function (props) {
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         gl.drawArrays(gl.TRIANGLES, 0, 6);
     };
+    var renderDots = function (gl, matrix) {
+        gl.useProgram(dotsProgram.current);
+        // Pass a matrix uniform in: 
+        gl.uniformMatrix4fv(gl.getUniformLocation(dotsProgram.current, 'u_matrix'), false, matrix);
+        var aPos = gl.getAttribLocation(dotsProgram.current, 'a_pos');
+        gl.bindBuffer(gl.ARRAY_BUFFER, levelsBuffer.current);
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 12, 0);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        gl.drawArrays(gl.POINTS, 0, numTriangles.current * 3);
+    };
     var onRender = function (gl, matrix, zoom, width, height) {
         // Render is called many times while the map is panned/zoomed.
         // You cannot have access to the map though.
@@ -244,6 +314,8 @@ var InterpolationLayerBase = function (props) {
         // Reset the viewport size to equal the map size:
         gl.viewport(0, 0, width * window.devicePixelRatio, height * window.devicePixelRatio);
         renderContours(gl, matrix, width, height);
+        if (props.dots)
+            renderDots(gl, matrix);
     };
     return (React.createElement(Layer, { id: null, type: "custom", beforeId: "overlay", key: time, onAdd: onAddLayer, render: function (gl, matrix) { return onRender(gl, matrix, map.current.getZoom(), map.current.getContainer().clientWidth, map.current.getContainer().clientHeight); } }));
 };
@@ -256,7 +328,7 @@ var InterpolationLayer = function (_a) {
     var _b = _a.levels, levels = _b === void 0 ? 0 : _b, _c = _a.contourColor, contourColor = _c === void 0 ? '#35ABE2' : _c, _d = _a.gradientStops, gradientStops = _d === void 0 ? [
         { pos: 0.0, color: '#0000ffff' },
         { pos: 1.0, color: '#000000ff' }
-    ] : _d, _e = _a.minZoom, minZoom = _e === void 0 ? 0 : _e, _f = _a.maxZoom, maxZoom = _f === void 0 ? 99 : _f, props = __rest(_a, ["levels", "contourColor", "gradientStops", "minZoom", "maxZoom"]);
-    return React.createElement(InterpolationLayerBase, __assign({ levels: levels, contourColor: contourColor, gradientStops: gradientStops, minZoom: minZoom, maxZoom: maxZoom }, props));
+    ] : _d, _e = _a.minZoom, minZoom = _e === void 0 ? 0 : _e, _f = _a.maxZoom, maxZoom = _f === void 0 ? 99 : _f, _g = _a.dots, dots = _g === void 0 ? false : _g, props = __rest(_a, ["levels", "contourColor", "gradientStops", "minZoom", "maxZoom", "dots"]);
+    return React.createElement(InterpolationLayerBase, __assign({ levels: levels, contourColor: contourColor, gradientStops: gradientStops, minZoom: minZoom, maxZoom: maxZoom, dots: dots }, props));
 };
 export { InterpolationLayer };

package/package.json

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