@mapwhit/tilerenderer 1.0.0 → 1.1.0

package/src/render/painter.js

@@ -1,37 +1,37 @@
-const browser = require('../util/browser');
-
-const { mat4 } = require('@mapbox/gl-matrix');
-const SourceCache = require('../source/source_cache');
-const EXTENT = require('../data/extent');
-const pixelsToTileUnits = require('../source/pixels_to_tile_units');
-const SegmentVector = require('../data/segment');
-const { RasterBoundsArray, PosArray, TriangleIndexArray, LineStripIndexArray } = require('../data/array_types');
-const rasterBoundsAttributes = require('../data/raster_bounds_attributes');
-const posAttributes = require('../data/pos_attributes');
-const ProgramConfiguration = require('../data/program_configuration');
-const CrossTileSymbolIndex = require('../symbol/cross_tile_symbol_index');
-const shaders = require('../shaders');
-const Program = require('./program');
-const { programUniforms } = require('./program/program_uniforms');
-const Context = require('../gl/context');
-const DepthMode = require('../gl/depth_mode');
-const StencilMode = require('../gl/stencil_mode');
-const ColorMode = require('../gl/color_mode');
-const CullFaceMode = require('../gl/cull_face_mode');
-const updateTileMasks = require('./tile_mask');
-const { clippingMaskUniformValues } = require('./program/clipping_mask_program');
-const { Color } = require('@mapwhit/style-expressions');
-const symbol = require('./draw_symbol');
-const circle = require('./draw_circle');
-const heatmap = require('./draw_heatmap');
-const line = require('./draw_line');
-const fill = require('./draw_fill');
-const fillExtrusion = require('./draw_fill_extrusion');
-const hillshade = require('./draw_hillshade');
-const raster = require('./draw_raster');
-const background = require('./draw_background');
-const debug = require('./draw_debug');
-
+import glMatrix from '@mapbox/gl-matrix';
+import { Color } from '@mapwhit/style-expressions';
+import { LineStripIndexArray, PosArray, RasterBoundsArray, TriangleIndexArray } from '../data/array_types.js';
+import EXTENT from '../data/extent.js';
+import posAttributes from '../data/pos_attributes.js';
+import ProgramConfiguration from '../data/program_configuration.js';
+import rasterBoundsAttributes from '../data/raster_bounds_attributes.js';
+import SegmentVector from '../data/segment.js';
+import ColorMode from '../gl/color_mode.js';
+import Context from '../gl/context.js';
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import shaders from '../shaders/index.js';
+import pixelsToTileUnits from '../source/pixels_to_tile_units.js';
+import SourceCache from '../source/source_cache.js';
+import CrossTileSymbolIndex from '../symbol/cross_tile_symbol_index.js';
+import browser from '../util/browser.js';
+import background from './draw_background.js';
+import circle from './draw_circle.js';
+import debug from './draw_debug.js';
+import fill from './draw_fill.js';
+import fillExtrusion from './draw_fill_extrusion.js';
+import heatmap from './draw_heatmap.js';
+import hillshade from './draw_hillshade.js';
+import line from './draw_line.js';
+import raster from './draw_raster.js';
+import symbol from './draw_symbol.js';
+import { clippingMaskUniformValues } from './program/clipping_mask_program.js';
+import { programUniforms } from './program/program_uniforms.js';
+import Program from './program.js';
+import updateTileMasks from './tile_mask.js';
+
+const { mat4 } = glMatrix;
 const draw = {
   symbol,
   circle,
@@ -51,7 +51,7 @@ const draw = {
  * @param {Canvas} gl an experimental-webgl drawing context
  * @private
  */
-class Painter {
+export default class Painter {
   constructor(gl, transform) {
     this.context = new Context(gl);
     this.transform = transform;
@@ -182,7 +182,9 @@ class Painter {
   }
 
   _renderTileClippingMasks(layer, tileIDs) {
-    if (this.currentStencilSource === layer.source || !layer.isTileClipped() || !tileIDs || !tileIDs.length) return;
+    if (this.currentStencilSource === layer.source || !layer.isTileClipped() || !tileIDs || !tileIDs.length) {
+      return;
+    }
 
     this.currentStencilSource = layer.source;
 
@@ -258,7 +260,9 @@ class Painter {
   }
 
   depthModeForSublayer(n, mask, func) {
-    if (!this.opaquePassEnabledForLayer()) return DepthMode.disabled;
+    if (!this.opaquePassEnabledForLayer()) {
+      return DepthMode.disabled;
+    }
     const depth = 1 - ((1 + this.currentLayer) * this.numSublayers + n) * this.depthEpsilon;
     return new DepthMode(func || this.context.gl.LEQUAL, mask, [depth, depth]);
   }
@@ -307,9 +311,13 @@ class Painter {
     for (const id in sourceCaches) {
       const sourceCache = sourceCaches[id];
       const source = sourceCache.getSource();
-      if (source.type !== 'raster' && source.type !== 'raster-dem') continue;
+      if (source.type !== 'raster' && source.type !== 'raster-dem') {
+        continue;
+      }
       const visibleTiles = [];
-      for (const coord of coordsAscending[id]) visibleTiles.push(sourceCache.getTile(coord));
+      for (const coord of coordsAscending[id]) {
+        visibleTiles.push(sourceCache.getTile(coord));
+      }
       updateTileMasks(visibleTiles, this.context);
     }
 
@@ -331,10 +339,14 @@ class Painter {
     this.depthRboNeedsClear = true;
 
     for (const layer of layers) {
-      if (!layer.hasOffscreenPass() || layer.isHidden(this.transform.zoom)) continue;
+      if (!layer.hasOffscreenPass() || layer.isHidden(this.transform.zoom)) {
+        continue;
+      }
 
       const coords = coordsDescending[layer.source];
-      if (!coords.length) continue;
+      if (!coords.length) {
+        continue;
+      }
 
       this.renderLayer(this, sourceCaches[layer.source], layer, coords);
     }
@@ -397,8 +409,12 @@ class Painter {
   }
 
   renderLayer(painter, sourceCache, layer, coords) {
-    if (layer.isHidden(this.transform.zoom)) return;
-    if (layer.type !== 'background' && !coords.length) return;
+    if (layer.isHidden(this.transform.zoom)) {
+      return;
+    }
+    if (layer.type !== 'background' && !coords.length) {
+      return;
+    }
     this.id = layer.id;
 
     draw[layer.type](painter, sourceCache, layer, coords);
@@ -410,7 +426,9 @@ class Painter {
    * @returns {Float32Array} matrix
    */
   translatePosMatrix(matrix, tile, translate, translateAnchor, inViewportPixelUnitsUnits) {
-    if (!translate[0] && !translate[1]) return matrix;
+    if (!translate[0] && !translate[1]) {
+      return matrix;
+    }
 
     const angle = inViewportPixelUnitsUnits
       ? translateAnchor === 'map'
@@ -457,7 +475,9 @@ class Painter {
    * @returns true if a needed image is missing and rendering needs to be skipped.
    */
   isPatternMissing(image) {
-    if (!image) return false;
+    if (!image) {
+      return false;
+    }
     const imagePosA = this.imageManager.getPattern(image.from);
     const imagePosB = this.imageManager.getPattern(image.to);
     return !imagePosA || !imagePosB;
@@ -478,5 +498,3 @@ class Painter {
     return this.cache[key];
   }
 }
-
-module.exports = Painter;

package/src/render/program/background_program.js

@@ -1,13 +1,13 @@
-const { bgPatternUniformValues } = require('./pattern');
-const { Uniform1i, Uniform1f, Uniform2f, UniformColor, UniformMatrix4f } = require('../uniform_binding');
+import { Uniform1f, Uniform1i, Uniform2f, UniformColor, UniformMatrix4f } from '../uniform_binding.js';
+import { bgPatternUniformValues } from './pattern.js';
 
-const backgroundUniforms = (context, locations) => ({
+export const backgroundUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_opacity: new Uniform1f(context, locations.u_opacity),
   u_color: new UniformColor(context, locations.u_color)
 });
 
-const backgroundPatternUniforms = (context, locations) => ({
+export const backgroundPatternUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_opacity: new Uniform1f(context, locations.u_opacity),
   u_image: new Uniform1i(context, locations.u_image),
@@ -26,21 +26,14 @@ const backgroundPatternUniforms = (context, locations) => ({
   u_tile_units_to_pixels: new Uniform1f(context, locations.u_tile_units_to_pixels)
 });
 
-const backgroundUniformValues = (matrix, opacity, color) => ({
+export const backgroundUniformValues = (matrix, opacity, color) => ({
   u_matrix: matrix,
   u_opacity: opacity,
   u_color: color
 });
 
-const backgroundPatternUniformValues = (matrix, opacity, painter, image, tile, crossfade) =>
+export const backgroundPatternUniformValues = (matrix, opacity, painter, image, tile, crossfade) =>
   Object.assign(bgPatternUniformValues(image, crossfade, painter, tile), {
     u_matrix: matrix,
     u_opacity: opacity
   });
-
-module.exports = {
-  backgroundUniforms,
-  backgroundPatternUniforms,
-  backgroundUniformValues,
-  backgroundPatternUniformValues
-};

package/src/render/program/circle_program.js

@@ -1,7 +1,7 @@
-const { Uniform1i, Uniform1f, Uniform2f, UniformMatrix4f } = require('../uniform_binding');
-const pixelsToTileUnits = require('../../source/pixels_to_tile_units');
+import pixelsToTileUnits from '../../source/pixels_to_tile_units.js';
+import { Uniform1f, Uniform1i, Uniform2f, UniformMatrix4f } from '../uniform_binding.js';
 
-const circleUniforms = (context, locations) => ({
+export const circleUniforms = (context, locations) => ({
   u_camera_to_center_distance: new Uniform1f(context, locations.u_camera_to_center_distance),
   u_scale_with_map: new Uniform1i(context, locations.u_scale_with_map),
   u_pitch_with_map: new Uniform1i(context, locations.u_pitch_with_map),
@@ -9,7 +9,7 @@ const circleUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix)
 });
 
-const circleUniformValues = (painter, coord, tile, layer) => {
+export const circleUniformValues = (painter, coord, tile, layer) => {
   const transform = painter.transform;
 
   let pitchWithMap;
@@ -36,5 +36,3 @@ const circleUniformValues = (painter, coord, tile, layer) => {
     u_extrude_scale: extrudeScale
   };
 };
-
-module.exports = { circleUniforms, circleUniformValues };

package/src/render/program/clipping_mask_program.js

@@ -1,11 +1,9 @@
-const { UniformMatrix4f } = require('../uniform_binding');
+import { UniformMatrix4f } from '../uniform_binding.js';
 
-const clippingMaskUniforms = (context, locations) => ({
+export const clippingMaskUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix)
 });
 
-const clippingMaskUniformValues = matrix => ({
+export const clippingMaskUniformValues = matrix => ({
   u_matrix: matrix
 });
-
-module.exports = { clippingMaskUniforms, clippingMaskUniformValues };

package/src/render/program/collision_program.js

@@ -1,7 +1,7 @@
-const { Uniform1f, Uniform2f, UniformMatrix4f } = require('../uniform_binding');
-const pixelsToTileUnits = require('../../source/pixels_to_tile_units');
+import pixelsToTileUnits from '../../source/pixels_to_tile_units.js';
+import { Uniform1f, Uniform2f, UniformMatrix4f } from '../uniform_binding.js';
 
-const collisionUniforms = (context, locations) => ({
+export const collisionUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_camera_to_center_distance: new Uniform1f(context, locations.u_camera_to_center_distance),
   u_pixels_to_tile_units: new Uniform1f(context, locations.u_pixels_to_tile_units),
@@ -9,7 +9,7 @@ const collisionUniforms = (context, locations) => ({
   u_overscale_factor: new Uniform1f(context, locations.u_overscale_factor)
 });
 
-const collisionUniformValues = (matrix, transform, tile) => {
+export const collisionUniformValues = (matrix, transform, tile) => {
   const pixelRatio = pixelsToTileUnits(tile, 1, transform.zoom);
   const scale = 2 ** (transform.zoom - tile.tileID.overscaledZ);
   const overscaleFactor = tile.tileID.overscaleFactor();
@@ -24,5 +24,3 @@ const collisionUniformValues = (matrix, transform, tile) => {
     u_overscale_factor: overscaleFactor
   };
 };
-
-module.exports = { collisionUniforms, collisionUniformValues };

package/src/render/program/debug_program.js

@@ -1,13 +1,11 @@
-const { UniformColor, UniformMatrix4f } = require('../uniform_binding');
+import { UniformColor, UniformMatrix4f } from '../uniform_binding.js';
 
-const debugUniforms = (context, locations) => ({
+export const debugUniforms = (context, locations) => ({
   u_color: new UniformColor(context, locations.u_color),
   u_matrix: new UniformMatrix4f(context, locations.u_matrix)
 });
 
-const debugUniformValues = (matrix, color) => ({
+export const debugUniformValues = (matrix, color) => ({
   u_matrix: matrix,
   u_color: color
 });
-
-module.exports = { debugUniforms, debugUniformValues };

package/src/render/program/fill_extrusion_program.js

@@ -1,9 +1,10 @@
-const { patternUniformValues } = require('./pattern');
-const { Uniform1i, Uniform1f, Uniform2f, Uniform3f, Uniform4f, UniformMatrix4f } = require('../uniform_binding');
+import glMatrix from '@mapbox/gl-matrix';
+import { Uniform1f, Uniform1i, Uniform2f, Uniform3f, Uniform4f, UniformMatrix4f } from '../uniform_binding.js';
+import { patternUniformValues } from './pattern.js';
 
-const { mat3, vec3 } = require('@mapbox/gl-matrix');
+const { mat3, vec3 } = glMatrix;
 
-const fillExtrusionUniforms = (context, locations) => ({
+export const fillExtrusionUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_lightpos: new Uniform3f(context, locations.u_lightpos),
   u_lightintensity: new Uniform1f(context, locations.u_lightintensity),
@@ -12,7 +13,7 @@ const fillExtrusionUniforms = (context, locations) => ({
   u_opacity: new Uniform1f(context, locations.u_opacity)
 });
 
-const fillExtrusionPatternUniforms = (context, locations) => ({
+export const fillExtrusionPatternUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_lightpos: new Uniform3f(context, locations.u_lightpos),
   u_lightintensity: new Uniform1f(context, locations.u_lightintensity),
@@ -28,7 +29,7 @@ const fillExtrusionPatternUniforms = (context, locations) => ({
   u_opacity: new Uniform1f(context, locations.u_opacity)
 });
 
-const fillExtrusionUniformValues = (matrix, painter, shouldUseVerticalGradient, opacity) => {
+export const fillExtrusionUniformValues = (matrix, painter, shouldUseVerticalGradient, opacity) => {
   const light = painter.style._light;
   const _lp = light.properties.get('position');
   const lightPos = [_lp.x, _lp.y, _lp.z];
@@ -50,7 +51,7 @@ const fillExtrusionUniformValues = (matrix, painter, shouldUseVerticalGradient,
   };
 };
 
-const fillExtrusionPatternUniformValues = (
+export const fillExtrusionPatternUniformValues = (
   matrix,
   painter,
   shouldUseVerticalGradient,
@@ -67,10 +68,3 @@ const fillExtrusionPatternUniformValues = (
     }
   );
 };
-
-module.exports = {
-  fillExtrusionUniforms,
-  fillExtrusionPatternUniforms,
-  fillExtrusionUniformValues,
-  fillExtrusionPatternUniformValues
-};

package/src/render/program/fill_program.js

@@ -1,11 +1,11 @@
-const { patternUniformValues } = require('./pattern');
-const { Uniform1i, Uniform1f, Uniform2f, Uniform4f, UniformMatrix4f } = require('../uniform_binding');
+import { Uniform1f, Uniform1i, Uniform2f, Uniform4f, UniformMatrix4f } from '../uniform_binding.js';
+import { patternUniformValues } from './pattern.js';
 
-const fillUniforms = (context, locations) => ({
+export const fillUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix)
 });
 
-const fillPatternUniforms = (context, locations) => ({
+export const fillPatternUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_image: new Uniform1i(context, locations.u_image),
   u_texsize: new Uniform2f(context, locations.u_texsize),
@@ -15,12 +15,12 @@ const fillPatternUniforms = (context, locations) => ({
   u_fade: new Uniform1f(context, locations.u_fade)
 });
 
-const fillOutlineUniforms = (context, locations) => ({
+export const fillOutlineUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_world: new Uniform2f(context, locations.u_world)
 });
 
-const fillOutlinePatternUniforms = (context, locations) => ({
+export const fillOutlinePatternUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_world: new Uniform2f(context, locations.u_world),
   u_image: new Uniform1i(context, locations.u_image),
@@ -31,30 +31,19 @@ const fillOutlinePatternUniforms = (context, locations) => ({
   u_fade: new Uniform1f(context, locations.u_fade)
 });
 
-const fillUniformValues = matrix => ({
+export const fillUniformValues = matrix => ({
   u_matrix: matrix
 });
 
-const fillPatternUniformValues = (matrix, painter, crossfade, tile) =>
+export const fillPatternUniformValues = (matrix, painter, crossfade, tile) =>
   Object.assign(fillUniformValues(matrix), patternUniformValues(crossfade, painter, tile));
 
-const fillOutlineUniformValues = (matrix, drawingBufferSize) => ({
+export const fillOutlineUniformValues = (matrix, drawingBufferSize) => ({
   u_matrix: matrix,
   u_world: drawingBufferSize
 });
 
-const fillOutlinePatternUniformValues = (matrix, painter, crossfade, tile, drawingBufferSize) =>
+export const fillOutlinePatternUniformValues = (matrix, painter, crossfade, tile, drawingBufferSize) =>
   Object.assign(fillPatternUniformValues(matrix, painter, crossfade, tile), {
     u_world: drawingBufferSize
   });
-
-module.exports = {
-  fillUniforms,
-  fillPatternUniforms,
-  fillOutlineUniforms,
-  fillOutlinePatternUniforms,
-  fillUniformValues,
-  fillPatternUniformValues,
-  fillOutlineUniformValues,
-  fillOutlinePatternUniformValues
-};

package/src/render/program/heatmap_program.js

@@ -1,15 +1,16 @@
-const { mat4 } = require('@mapbox/gl-matrix');
+import glMatrix from '@mapbox/gl-matrix';
+import pixelsToTileUnits from '../../source/pixels_to_tile_units.js';
+import { Uniform1f, Uniform1i, Uniform2f, UniformMatrix4f } from '../uniform_binding.js';
 
-const { Uniform1i, Uniform1f, Uniform2f, UniformMatrix4f } = require('../uniform_binding');
-const pixelsToTileUnits = require('../../source/pixels_to_tile_units');
+const { mat4 } = glMatrix;
 
-const heatmapUniforms = (context, locations) => ({
+export const heatmapUniforms = (context, locations) => ({
   u_extrude_scale: new Uniform1f(context, locations.u_extrude_scale),
   u_intensity: new Uniform1f(context, locations.u_intensity),
   u_matrix: new UniformMatrix4f(context, locations.u_matrix)
 });
 
-const heatmapTextureUniforms = (context, locations) => ({
+export const heatmapTextureUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_world: new Uniform2f(context, locations.u_world),
   u_image: new Uniform1i(context, locations.u_image),
@@ -17,13 +18,13 @@ const heatmapTextureUniforms = (context, locations) => ({
   u_opacity: new Uniform1f(context, locations.u_opacity)
 });
 
-const heatmapUniformValues = (matrix, tile, zoom, intensity) => ({
+export const heatmapUniformValues = (matrix, tile, zoom, intensity) => ({
   u_matrix: matrix,
   u_extrude_scale: pixelsToTileUnits(tile, 1, zoom),
   u_intensity: intensity
 });
 
-const heatmapTextureUniformValues = (painter, layer, textureUnit, colorRampUnit) => {
+export const heatmapTextureUniformValues = (painter, layer, textureUnit, colorRampUnit) => {
   const matrix = mat4.create();
   mat4.ortho(matrix, 0, painter.width, painter.height, 0, 0, 1);
 
@@ -37,10 +38,3 @@ const heatmapTextureUniformValues = (painter, layer, textureUnit, colorRampUnit)
     u_opacity: layer._paint.get('heatmap-opacity')
   };
 };
-
-module.exports = {
-  heatmapUniforms,
-  heatmapTextureUniforms,
-  heatmapUniformValues,
-  heatmapTextureUniformValues
-};

package/src/render/program/hillshade_program.js

@@ -1,11 +1,12 @@
-const assert = require('assert');
-const { mat4 } = require('@mapbox/gl-matrix');
+import glMatrix from '@mapbox/gl-matrix';
+import assert from 'assert';
+import EXTENT from '../../data/extent.js';
+import Coordinate from '../../geo/coordinate.js';
+import { Uniform1f, Uniform1i, Uniform2f, UniformColor, UniformMatrix4f } from '../uniform_binding.js';
 
-const { Uniform1i, Uniform1f, Uniform2f, UniformColor, UniformMatrix4f } = require('../uniform_binding');
-const EXTENT = require('../../data/extent');
-const Coordinate = require('../../geo/coordinate');
+const { mat4 } = glMatrix;
 
-const hillshadeUniforms = (context, locations) => ({
+export const hillshadeUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_image: new Uniform1i(context, locations.u_image),
   u_latrange: new Uniform2f(context, locations.u_latrange),
@@ -15,7 +16,7 @@ const hillshadeUniforms = (context, locations) => ({
   u_accent: new UniformColor(context, locations.u_accent)
 });
 
-const hillshadePrepareUniforms = (context, locations) => ({
+export const hillshadePrepareUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_image: new Uniform1i(context, locations.u_image),
   u_dimension: new Uniform2f(context, locations.u_dimension),
@@ -23,7 +24,7 @@ const hillshadePrepareUniforms = (context, locations) => ({
   u_maxzoom: new Uniform1f(context, locations.u_maxzoom)
 });
 
-const hillshadeUniformValues = (painter, tile, layer) => {
+export const hillshadeUniformValues = (painter, tile, layer) => {
   const shadow = layer._paint.get('hillshade-shadow-color');
   const highlight = layer._paint.get('hillshade-highlight-color');
   const accent = layer._paint.get('hillshade-accent-color');
@@ -45,7 +46,7 @@ const hillshadeUniformValues = (painter, tile, layer) => {
   };
 };
 
-const hillshadeUniformPrepareValues = (tile, maxzoom) => {
+export const hillshadeUniformPrepareValues = (tile, maxzoom) => {
   assert(tile.dem);
   const stride = tile.dem.stride;
   const matrix = mat4.create();
@@ -68,10 +69,3 @@ function getTileLatRange(painter, tileID) {
   const coordinate1 = new Coordinate(coordinate0.column, coordinate0.row + 1, coordinate0.zoom);
   return [painter.transform.coordinateLocation(coordinate0).lat, painter.transform.coordinateLocation(coordinate1).lat];
 }
-
-module.exports = {
-  hillshadeUniforms,
-  hillshadePrepareUniforms,
-  hillshadeUniformValues,
-  hillshadeUniformPrepareValues
-};

package/src/render/program/line_program.js

@@ -1,21 +1,21 @@
-const { Uniform1i, Uniform1f, Uniform2f, Uniform4f, UniformMatrix4f } = require('../uniform_binding');
-const pixelsToTileUnits = require('../../source/pixels_to_tile_units');
-const browser = require('../../util/browser');
+import pixelsToTileUnits from '../../source/pixels_to_tile_units.js';
+import browser from '../../util/browser.js';
+import { Uniform1f, Uniform1i, Uniform2f, Uniform4f, UniformMatrix4f } from '../uniform_binding.js';
 
-const lineUniforms = (context, locations) => ({
+export const lineUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_ratio: new Uniform1f(context, locations.u_ratio),
   u_gl_units_to_pixels: new Uniform2f(context, locations.u_gl_units_to_pixels)
 });
 
-const lineGradientUniforms = (context, locations) => ({
+export const lineGradientUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_ratio: new Uniform1f(context, locations.u_ratio),
   u_gl_units_to_pixels: new Uniform2f(context, locations.u_gl_units_to_pixels),
   u_image: new Uniform1i(context, locations.u_image)
 });
 
-const linePatternUniforms = (context, locations) => ({
+export const linePatternUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_texsize: new Uniform2f(context, locations.u_texsize),
   u_ratio: new Uniform1f(context, locations.u_ratio),
@@ -25,7 +25,7 @@ const linePatternUniforms = (context, locations) => ({
   u_fade: new Uniform1f(context, locations.u_fade)
 });
 
-const lineSDFUniforms = (context, locations) => ({
+export const lineSDFUniforms = (context, locations) => ({
   u_matrix: new UniformMatrix4f(context, locations.u_matrix),
   u_ratio: new Uniform1f(context, locations.u_ratio),
   u_gl_units_to_pixels: new Uniform2f(context, locations.u_gl_units_to_pixels),
@@ -38,7 +38,7 @@ const lineSDFUniforms = (context, locations) => ({
   u_mix: new Uniform1f(context, locations.u_mix)
 });
 
-const lineUniformValues = (painter, tile, layer) => {
+export const lineUniformValues = (painter, tile, layer) => {
   const transform = painter.transform;
 
   return {
@@ -48,13 +48,13 @@ const lineUniformValues = (painter, tile, layer) => {
   };
 };
 
-const lineGradientUniformValues = (painter, tile, layer) => {
+export const lineGradientUniformValues = (painter, tile, layer) => {
   return Object.assign(lineUniformValues(painter, tile, layer), {
     u_image: 0
   });
 };
 
-const linePatternUniformValues = (painter, tile, layer, crossfade) => {
+export const linePatternUniformValues = (painter, tile, layer, crossfade) => {
   const transform = painter.transform;
   const tileZoomRatio = calculateTileRatio(tile, transform);
   return {
@@ -70,7 +70,7 @@ const linePatternUniformValues = (painter, tile, layer, crossfade) => {
   };
 };
 
-const lineSDFUniformValues = (painter, tile, layer, dasharray, crossfade) => {
+export const lineSDFUniformValues = (painter, tile, layer, dasharray, crossfade) => {
   const transform = painter.transform;
   const lineAtlas = painter.lineAtlas;
   const tileRatio = calculateTileRatio(tile, transform);
@@ -106,14 +106,3 @@ function calculateMatrix(painter, tile, layer) {
     layer._paint.get('line-translate-anchor')
   );
 }
-
-module.exports = {
-  lineUniforms,
-  lineGradientUniforms,
-  linePatternUniforms,
-  lineSDFUniforms,
-  lineUniformValues,
-  lineGradientUniformValues,
-  linePatternUniformValues,
-  lineSDFUniformValues
-};

package/src/render/program/pattern.js

@@ -1,8 +1,8 @@
-const assert = require('assert');
-const browser = require('../../util/browser');
-const pixelsToTileUnits = require('../../source/pixels_to_tile_units');
+import assert from 'assert';
+import pixelsToTileUnits from '../../source/pixels_to_tile_units.js';
+import browser from '../../util/browser.js';
 
-function patternUniformValues(crossfade, painter, tile) {
+export function patternUniformValues(crossfade, painter, tile) {
   const tileRatio = 1 / pixelsToTileUnits(tile, 1, painter.transform.tileZoom);
 
   const numTiles = 2 ** tile.tileID.overscaledZ;
@@ -23,7 +23,7 @@ function patternUniformValues(crossfade, painter, tile) {
   };
 }
 
-function bgPatternUniformValues(image, crossfade, painter, tile) {
+export function bgPatternUniformValues(image, crossfade, painter, tile) {
   const imagePosA = painter.imageManager.getPattern(image.from);
   const imagePosB = painter.imageManager.getPattern(image.to);
   assert(imagePosA && imagePosB);
@@ -53,5 +53,3 @@ function bgPatternUniformValues(image, crossfade, painter, tile) {
     u_pixel_coord_lower: [pixelX & 0xffff, pixelY & 0xffff]
   };
 }
-
-module.exports = { bgPatternUniformValues, patternUniformValues };