@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/render/image_manager.js

@@ -1,9 +1,8 @@
-const { default: potpack } = require('potpack');
-
-const { RGBAImage } = require('../util/image');
-const { ImagePosition } = require('./image_atlas');
-const Texture = require('./texture');
-const assert = require('assert');
+import assert from 'assert';
+import potpack from 'potpack';
+import { RGBAImage } from '../util/image.js';
+import { ImagePosition } from './image_atlas.js';
+import Texture from './texture.js';
 
 // When copied into the atlas texture, image data is padded by one pixel on each side. Icon
 // images are padded with fully transparent pixels, while pattern images are padded with a
@@ -21,12 +20,13 @@ const padding = 1;
     data-driven support for `*-pattern`, we'll likely use per-bucket pattern atlases, and that would be a good time
     to refactor this.
 */
-class ImageManager {
+export default class ImageManager {
   #loadedState = Promise.withResolvers();
+  #imageQueue = new Map();
   constructor() {
-    this.images = {};
+    this.images = new Map();
 
-    this.patterns = {};
+    this.patterns = new Map();
     this.atlasImage = new RGBAImage({ width: 1, height: 1 });
     this.dirty = true;
   }
@@ -44,22 +44,31 @@ class ImageManager {
   }
 
   getImage(id) {
-    return this.images[id];
+    return this.images.get(id);
   }
 
   addImage(id, image) {
-    assert(!this.images[id]);
-    this.images[id] = image;
+    assert(!(this.images.has(id) || this.#imageQueue.has(id)));
+    if (image.promise) {
+      this.#imageQueue.set(id, image.promise);
+      image.promise.then(image => {
+        this.#imageQueue.delete(id);
+        this.images.set(id, image);
+      });
+      return;
+    }
+    this.images.set(id, image);
   }
 
   removeImage(id) {
-    assert(this.images[id]);
-    delete this.images[id];
-    delete this.patterns[id];
+    assert(this.images.has(id) || this.#imageQueue.has(id));
+    this.images.delete(id);
+    this.#imageQueue.delete(id);
+    this.patterns.delete(id);
   }
 
   listImages() {
-    return Object.keys(this.images);
+    return Array.from(this.images.keys());
   }
 
   async getImages(ids) {
@@ -67,11 +76,16 @@ class ImageManager {
 
     const response = {};
     for (const id of ids) {
-      const image = this.images[id];
+      let image = this.images.get(id);
+      if (!image) {
+        if (!this.#imageQueue.has(id)) {
+          continue;
+        }
+        image = await this.#imageQueue.get(id);
+      }
       if (image) {
-        // Clone the image so that our own copy of its ArrayBuffer doesn't get transferred.
         response[id] = {
-          data: image.data.clone(),
+          data: image.data,
           pixelRatio: image.pixelRatio,
           sdf: image.sdf
         };
@@ -88,7 +102,7 @@ class ImageManager {
   }
 
   getPattern(id) {
-    const pattern = this.patterns[id];
+    const pattern = this.patterns.get(id);
     if (pattern) {
       return pattern.position;
     }
@@ -102,7 +116,7 @@ class ImageManager {
     const h = image.data.height + padding * 2;
     const bin = { w, h, x: 0, y: 0 };
     const position = new ImagePosition(bin, image);
-    this.patterns[id] = { bin, position };
+    this.patterns.set(id, { bin, position });
     this._updatePatternAtlas();
 
     return position;
@@ -122,8 +136,8 @@ class ImageManager {
 
   _updatePatternAtlas() {
     const bins = [];
-    for (const id in this.patterns) {
-      bins.push(this.patterns[id].bin);
+    for (const { bin } of this.patterns.values()) {
+      bins.push(bin);
     }
 
     const { w, h } = potpack(bins);
@@ -131,11 +145,10 @@ class ImageManager {
     const dst = this.atlasImage;
     dst.resize({ width: w ?? 1, height: h ?? 1 });
 
-    for (const id in this.patterns) {
-      const { bin } = this.patterns[id];
+    for (const [id, { bin }] of this.patterns) {
       const x = bin.x + padding;
       const y = bin.y + padding;
-      const src = this.images[id].data;
+      const src = this.images.get(id).data;
       const w = src.width;
       const h = src.height;
 
@@ -151,5 +164,3 @@ class ImageManager {
     this.dirty = true;
   }
 }
-
-module.exports = ImageManager;

package/src/render/line_atlas.js

@@ -1,4 +1,4 @@
-const warn = require('../util/warn');
+import warn from '../util/warn.js';
 
 /**
  * A LineAtlas lets us reuse rendered dashed lines
@@ -136,4 +136,4 @@ class LineAtlas {
   }
 }
 
-module.exports = LineAtlas;
+export default LineAtlas;

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;
@@ -83,8 +83,8 @@ class Painter {
     this.context.viewport.set([0, 0, this.width, this.height]);
 
     if (this.style) {
-      for (const layerId of this.style._order) {
-        this.style._layers[layerId].resize();
+      for (const layer of this.style._layers.values()) {
+        layer.resize();
       }
     }
 
@@ -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]);
   }
@@ -284,8 +288,7 @@ class Painter {
 
     this.symbolFadeChange = style.placement.symbolFadeChange(browser.now());
 
-    const layerIds = this.style._order;
-    const sourceCaches = this.style.sourceCaches;
+    const sourceCaches = style._sources;
 
     for (const id in sourceCaches) {
       const sourceCache = sourceCaches[id];
@@ -308,16 +311,21 @@ 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);
     }
 
+    const layers = Array.from(style._layers.values());
+
     this.opaquePassCutoff = Number.POSITIVE_INFINITY;
-    for (let i = 0; i < layerIds.length; i++) {
-      const layerId = layerIds[i];
-      if (this.style._layers[layerId].is3D()) {
+    for (let i = 0; i < layers.length; i++) {
+      if (layers[i].is3D()) {
         this.opaquePassCutoff = i;
         break;
       }
@@ -330,12 +338,15 @@ class Painter {
     this.renderPass = 'offscreen';
     this.depthRboNeedsClear = true;
 
-    for (const layerId of layerIds) {
-      const layer = this.style._layers[layerId];
-      if (!layer.hasOffscreenPass() || layer.isHidden(this.transform.zoom)) continue;
+    for (const layer of layers) {
+      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);
     }
@@ -349,14 +360,14 @@ class Painter {
     this.clearStencil();
 
     this._showOverdrawInspector = options.showOverdrawInspector;
-    this.depthRangeFor3D = [0, 1 - (style._order.length + 2) * this.numSublayers * this.depthEpsilon];
+    this.depthRangeFor3D = [0, 1 - (style._layers.size + 2) * this.numSublayers * this.depthEpsilon];
 
     // Opaque pass ===============================================
     // Draw opaque layers top-to-bottom first.
     this.renderPass = 'opaque';
 
-    for (this.currentLayer = layerIds.length - 1; this.currentLayer >= 0; this.currentLayer--) {
-      const layer = this.style._layers[layerIds[this.currentLayer]];
+    for (this.currentLayer = layers.length - 1; this.currentLayer >= 0; this.currentLayer--) {
+      const layer = layers[this.currentLayer];
       const sourceCache = sourceCaches[layer.source];
       const coords = coordsAscending[layer.source];
 
@@ -368,8 +379,8 @@ class Painter {
     // Draw all other layers bottom-to-top.
     this.renderPass = 'translucent';
 
-    for (this.currentLayer = 0; this.currentLayer < layerIds.length; this.currentLayer++) {
-      const layer = this.style._layers[layerIds[this.currentLayer]];
+    for (this.currentLayer = 0; this.currentLayer < layers.length; this.currentLayer++) {
+      const layer = layers[this.currentLayer];
       const sourceCache = sourceCaches[layer.source];
 
       // For symbol layers in the translucent pass, we add extra tiles to the renderable set
@@ -398,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);
@@ -411,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'
@@ -458,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;
@@ -479,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,12 +9,12 @@ 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;
   let extrudeScale;
-  if (layer.paint.get('circle-pitch-alignment') === 'map') {
+  if (layer._paint.get('circle-pitch-alignment') === 'map') {
     const pixelRatio = pixelsToTileUnits(tile, 1, transform.zoom);
     pitchWithMap = true;
     extrudeScale = [pixelRatio, pixelRatio];
@@ -25,16 +25,14 @@ const circleUniformValues = (painter, coord, tile, layer) => {
 
   return {
     u_camera_to_center_distance: transform.cameraToCenterDistance,
-    u_scale_with_map: +(layer.paint.get('circle-pitch-scale') === 'map'),
+    u_scale_with_map: +(layer._paint.get('circle-pitch-scale') === 'map'),
     u_matrix: painter.translatePosMatrix(
       coord.posMatrix,
       tile,
-      layer.paint.get('circle-translate'),
-      layer.paint.get('circle-translate-anchor')
+      layer._paint.get('circle-translate'),
+      layer._paint.get('circle-translate-anchor')
     ),
     u_pitch_with_map: +pitchWithMap,
     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,8 +29,8 @@ const fillExtrusionPatternUniforms = (context, locations) => ({
   u_opacity: new Uniform1f(context, locations.u_opacity)
 });
 
-const fillExtrusionUniformValues = (matrix, painter, shouldUseVerticalGradient, opacity) => {
-  const light = painter.style.light;
+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];
   const lightMat = mat3.create();
@@ -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
-};