autumnplot-gl 3.1.0 → 3.2.0

package/lib/TextCollection.js

@@ -1,4 +1,5 @@
 import { isWebGL2Ctx } from "./AutumnTypes";
+import { Color } from "./Color";
 import { LngLat } from "./Map";
 import { Cache, normalizeOptions } from "./utils";
 import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
@@ -45,8 +46,8 @@ varying highp vec2 v_tex_coord;
 uniform sampler2D u_sdf_sampler;
 uniform int u_is_halo;
 
-uniform lowp vec3 u_text_color;
-uniform lowp vec3 u_halo_color;
+uniform lowp vec4 u_text_color;
+uniform lowp vec4 u_halo_color;
 
 #define SDF_FILL 0.75
 #define SDF_HALO 0.45
@@ -57,18 +58,21 @@ void main() {
     lowp float step_width = 0.08;
     lowp float alpha = smoothstep(SDF_FILL - step_width, SDF_FILL + step_width, sdf_val);
 
-    lowp vec3 color = u_is_halo == 1 ? u_halo_color : u_text_color;
+    lowp vec4 color = u_is_halo == 1 ? u_halo_color : u_text_color;
 
     if (u_is_halo == 1) {
         alpha = min(smoothstep(SDF_HALO - step_width, SDF_HALO + step_width, sdf_val), 1.0 - alpha);
     }
 
-    gl_FragColor = vec4(color, alpha);
+    color.a *= alpha;
+    gl_FragColor = color;
 }`
 const program_cache = new Cache((gl) => new WGLProgram(gl, text_vertex_shader_src, text_fragment_shader_src));
 const PADDING = 3;
 function parseFontPBF(data) {
     const readGlyph = (tag, glyph, pbf) => {
+        if (pbf === undefined)
+            return;
         switch (tag) {
             case 1:
                 glyph.id = pbf.readVarint();
@@ -94,12 +98,16 @@ function parseFontPBF(data) {
         }
     };
     const readFontStack = (tag, glyphs, pbf) => {
+        if (glyphs === undefined || pbf === undefined)
+            return;
         if (tag == 3) {
             const glyph = pbf.readMessage(readGlyph, {});
             glyphs.push(glyph);
         }
     };
     const readFontStacks = (tag, glyphs, pbf) => {
+        if (pbf === undefined)
+            return;
         if (tag == 1) {
             pbf.readMessage(readFontStack, glyphs);
         }
@@ -119,6 +127,8 @@ function createAtlas(pbf_glyphs) {
     const glyphs = {};
     glyph_bins.forEach(glyph_bin => {
         const { bin, glyph } = glyph_bin;
+        if (bin.x === undefined || bin.y === undefined)
+            throw `Potpack couldn't pack this pot, I guess?`;
         glyphs[glyph.id] = {
             id: glyph.id, width: glyph.width, height: glyph.height, left: glyph.left, top: glyph.top,
             atlas_i: bin.x, atlas_j: bin.y, advance: glyph.advance
@@ -149,8 +159,8 @@ const text_collection_opt_defaults = {
     horizontal_align: 'left',
     vertical_align: 'baseline',
     font_size: 12,
-    text_color: [0, 0, 0],
-    halo_color: [0, 0, 0],
+    text_color: new Color([0, 0, 0, 1]),
+    halo_color: new Color([0, 0, 0, 1]),
     halo: false
 };
 class TextCollection {
@@ -229,22 +239,22 @@ class TextCollection {
                 tc_data[i_tc++] = glyph_info.atlas_j / font_atlas.atlas_height;
                 x_offset += glyph_info.advance - glyph_info.left;
             }
-            if (opts.horizontal_align == 'center') {
+            if (this.opts.horizontal_align == 'center') {
                 for (let i = init_i_off; i < init_i_off + text.length * 12; i += 2) {
                     offset_data[i] -= x_offset / 2;
                 }
             }
-            else if (opts.horizontal_align == 'right') {
+            else if (this.opts.horizontal_align == 'right') {
                 for (let i = init_i_off; i < init_i_off + text.length * 12; i += 2) {
                     offset_data[i] -= x_offset;
                 }
             }
-            if (opts.vertical_align == 'top') {
+            if (this.opts.vertical_align == 'top') {
                 for (let i = init_i_off + 1; i < init_i_off + text.length * 12; i += 2) {
                     offset_data[i] -= (font_atlas.baseline - font_atlas.top);
                 }
             }
-            else if (opts.vertical_align == 'middle') {
+            else if (this.opts.vertical_align == 'middle') {
                 for (let i = init_i_off + 1; i < init_i_off + text.length * 12; i += 2) {
                     offset_data[i] -= (font_atlas.baseline - font_atlas.top) / 2;
                 }
@@ -261,7 +271,7 @@ class TextCollection {
     render(gl, matrix, [map_width, map_height], map_zoom) {
         const uniforms = {
             'u_matrix': matrix, 'u_map_width': map_width, 'u_map_height': map_height, 'u_map_zoom': map_zoom, 'u_font_size': this.opts.font_size,
-            'u_text_color': this.opts.text_color, 'u_halo_color': this.opts.halo_color, 'u_offset': 0
+            'u_text_color': this.opts.text_color.toRGBATuple(), 'u_halo_color': this.opts.halo_color.toRGBATuple(), 'u_offset': 0
         };
         uniforms['u_is_halo'] = this.opts.halo ? 1 : 0;
         this.program.use({ 'a_pos': this.anchors, 'a_offset': this.offsets, 'a_tex_coord': this.texcoords }, uniforms, { 'u_sdf_sampler': this.texture });

package/lib/index.d.ts

@@ -7,8 +7,10 @@ import Hodographs, { HodographOptions } from './Hodographs';
 import { PlotLayer, MultiPlotLayer } from './PlotLayer';
 import { WindProfile, WebGLAnyRenderingContext, TypedArray, ContourData } from "./AutumnTypes";
 import { MapLikeType } from "./Map";
-import { ColorMap, ColorMapOptions, Color } from './Colormap';
+import { ColorMap, ColorMapOptions } from './Colormap';
+import { Color } from "./Color";
 import { makeColorBar, makePaintballKey, ColorbarOrientation, ColorbarTickDirection, ColorBarOptions, PaintballKeyOptions } from "./ColorBar";
+import { LineStyle } from "./PolylineCollection";
 import { RawScalarField, RawVectorField, RawProfileField, VectorRelativeTo, RawVectorFieldOptions } from "./RawField";
 import { Grid, GridType, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid } from './Grid';
 import { FieldContourOpts } from './ContourCreator';
@@ -27,4 +29,4 @@ declare const colormaps: {
  * first, you can prevent races when you contour a bunch of fields at once.
  */
 declare function initAutumnPlot(): void;
-export { PlotComponent, Barbs, BarbsOptions, Contour, ContourOptions, ContourLabels, ContourLabelOptions, ContourFill, Raster, ContourFillOptions, RasterOptions, Paintball, PaintballOptions, Hodographs, HodographOptions, WindProfile, PlotLayer, MultiPlotLayer, MapLikeType, ColorMap, ColorMapOptions, colormaps, makeColorBar, makePaintballKey, Color, ColorbarOrientation, ColorbarTickDirection, ColorBarOptions, PaintballKeyOptions, RawScalarField, RawVectorField, RawProfileField, Grid, GridType, VectorRelativeTo, RawVectorFieldOptions, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid, WebGLAnyRenderingContext, TypedArray, ContourData, initAutumnPlot, FieldContourOpts };
+export { PlotComponent, Barbs, BarbsOptions, Contour, ContourOptions, ContourLabels, ContourLabelOptions, ContourFill, Raster, ContourFillOptions, RasterOptions, Paintball, PaintballOptions, Hodographs, HodographOptions, WindProfile, PlotLayer, MultiPlotLayer, MapLikeType, LineStyle, ColorMap, ColorMapOptions, colormaps, makeColorBar, makePaintballKey, Color, ColorbarOrientation, ColorbarTickDirection, ColorBarOptions, PaintballKeyOptions, RawScalarField, RawVectorField, RawProfileField, Grid, GridType, VectorRelativeTo, RawVectorFieldOptions, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid, WebGLAnyRenderingContext, TypedArray, ContourData, initAutumnPlot, FieldContourOpts };

package/lib/index.js

@@ -6,6 +6,7 @@ import Paintball from "./Paintball";
 import Hodographs from './Hodographs';
 import { PlotLayer, MultiPlotLayer } from './PlotLayer';
 import { ColorMap, bluered, redblue, pw_speed500mb, pw_speed850mb, pw_cape, pw_t2m, pw_td2m, nws_storm_clear_refl } from './Colormap';
+import { Color } from "./Color";
 import { makeColorBar, makePaintballKey } from "./ColorBar";
 import { RawScalarField, RawVectorField, RawProfileField } from "./RawField";
 import { Grid, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid } from './Grid';
@@ -27,4 +28,4 @@ const colormaps = {
 function initAutumnPlot() {
     initMSModule();
 }
-export { PlotComponent, Barbs, Contour, ContourLabels, ContourFill, Raster, Paintball, Hodographs, PlotLayer, MultiPlotLayer, ColorMap, colormaps, makeColorBar, makePaintballKey, RawScalarField, RawVectorField, RawProfileField, Grid, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid, initAutumnPlot };
+export { PlotComponent, Barbs, Contour, ContourLabels, ContourFill, Raster, Paintball, Hodographs, PlotLayer, MultiPlotLayer, ColorMap, colormaps, makeColorBar, makePaintballKey, Color, RawScalarField, RawVectorField, RawProfileField, Grid, PlateCarreeGrid, PlateCarreeRotatedGrid, LambertGrid, initAutumnPlot };

package/lib/utils.d.ts

@@ -1,12 +1,6 @@
-declare const hex2rgba: (hexstr: string, out_type?: string) => [number, number, number, number];
-declare const rgba2hex: (rgba: [number, number, number, number], in_type?: string) => string;
-declare const hex2rgb: (hexstr: string, out_type?: string) => [number, number, number];
-declare const rgb2hex: (rgb: [number, number, number], in_type?: string) => string;
-declare const rgb2hsv: (rgb: [number, number, number]) => [number, number, number];
-declare const hsv2rgb: (hsv: [number, number, number]) => [number, number, number];
 declare function getMinZoom(jlat: number, ilon: number, thin_fac_base: number): number;
 declare function zip(...args: any[]): Generator<any[], void, unknown>;
-declare function getOS(): string;
+declare function getOS(): string | null;
 declare class Cache<A extends unknown[], R> {
     private cached_values;
     private readonly compute_value;
@@ -15,4 +9,4 @@ declare class Cache<A extends unknown[], R> {
     getValue(...args: A): R;
 }
 declare function normalizeOptions<Type extends Record<string, any>>(opts: Type | undefined, defaults: Required<Type>): Required<Type>;
-export { hex2rgba, rgba2hex, hex2rgb, rgb2hex, rgb2hsv, hsv2rgb, zip, getMinZoom, getOS, Cache, normalizeOptions };
+export { zip, getMinZoom, getOS, Cache, normalizeOptions };

package/lib/utils.js

@@ -1,85 +1,3 @@
-const hex2rgba = (hexstr, out_type) => {
-    out_type = out_type === undefined ? 'float' : out_type;
-    const match = hexstr.match(/#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?/i);
-    if (match === null) {
-        throw `Got '${hexstr}' in hex2rgba, which does not look like a hex color`;
-    }
-    let rgba = match.slice(1).filter(c => c !== undefined).map(c => parseInt(c, 16));
-    if (out_type == 'float') {
-        rgba = rgba.map(c => c / 255);
-    }
-    return rgba[3] === undefined ? [rgba[0], rgba[1], rgba[2], 1] : [rgba[0], rgba[1], rgba[2], rgba[3]];
-};
-const rgba2hex = (rgba, in_type) => {
-    in_type = in_type === undefined ? 'float' : in_type;
-    let rgba_ = rgba;
-    if (in_type == 'float') {
-        rgba_ = rgba_.map(c => Math.round(c * 255));
-    }
-    return '#' + rgba_.map(c => c.toString(16).padStart(2, '0').toUpperCase()).join('');
-};
-const hex2rgb = (hexstr, out_type) => {
-    const [r, g, b, a] = hex2rgba(hexstr, out_type);
-    return [r, g, b];
-};
-const rgb2hex = (rgb, in_type) => {
-    const [r, g, b] = rgb;
-    return rgba2hex([r, g, b, 0], in_type).slice(0, -2);
-};
-const rgb2hsv = (rgb) => {
-    const [r, g, b] = rgb;
-    const Cmax = Math.max(r, g, b);
-    const Cmin = Math.min(r, g, b);
-    const Delta = Cmax - Cmin;
-    let H;
-    if (Delta == 0) {
-        H = 0;
-    }
-    else if (Cmax == r) {
-        H = 60 * ((g - b) / Delta) % 6;
-    }
-    else if (Cmax == g) {
-        H = 60 * ((b - r) / Delta + 2);
-    }
-    else if (Cmax == b) {
-        H = 60 * ((r - g) / Delta + 4);
-    }
-    let S = Cmax == 0 ? 0 : Delta / Cmax;
-    let V = Cmax;
-    return [H, S, V];
-};
-const hsv2rgb = (hsv) => {
-    const [H, S, V] = hsv;
-    const C = V * S;
-    const X = C * (1 - Math.abs(H / 60 % 2 - 1));
-    const m = V - C;
-    let r_prime, g_prime, b_prime;
-    if (0 <= H && H < 60) {
-        r_prime = C;
-        g_prime = X, b_prime = 0;
-    }
-    else if (60 <= H && H < 120) {
-        r_prime = X;
-        g_prime = C, b_prime = 0;
-    }
-    else if (120 <= H && H < 180) {
-        r_prime = 0;
-        g_prime = C, b_prime = X;
-    }
-    else if (180 <= H && H < 240) {
-        r_prime = 0;
-        g_prime = X, b_prime = C;
-    }
-    else if (240 <= H && H < 300) {
-        r_prime = X;
-        g_prime = 0, b_prime = C;
-    }
-    else if (300 <= H && H < 360) {
-        r_prime = C;
-        g_prime = 0, b_prime = X;
-    }
-    return [r_prime + m, g_prime + m, b_prime + m];
-};
 function getMinZoom(jlat, ilon, thin_fac_base) {
     const zoom_base = 1;
     let zoom = zoom_base;
@@ -143,4 +61,4 @@ function normalizeOptions(opts, defaults) {
     }
     return ret;
 }
-export { hex2rgba, rgba2hex, hex2rgb, rgb2hex, rgb2hsv, hsv2rgb, zip, getMinZoom, getOS, Cache, normalizeOptions };
+export { zip, getMinZoom, getOS, Cache, normalizeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "autumnplot-gl",
-    "version": "3.1.0",
+    "version": "3.2.0",
     "description": "",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -34,7 +34,7 @@
     },
     "dependencies": {
         "@petamoriken/float16": "^3.8.4",
-        "autumn-wgl": "^1.4.0",
+        "autumn-wgl": "^1.4.1",
         "comlink": "^4.3.1",
         "kd-tree-javascript": "^1.0.3",
         "pbf": "^3.2.1",