@mapwhit/tilerenderer 1.0.0 → 1.1.0

package/src/render/draw_debug.js

@@ -1,18 +1,18 @@
-const { mat4 } = require('@mapbox/gl-matrix');
-const EXTENT = require('../data/extent');
-const { PosArray } = require('../data/array_types');
-const { LineIndexArray } = require('../data/index_array_type');
-const posAttributes = require('../data/pos_attributes');
-const SegmentVector = require('../data/segment');
-const DepthMode = require('../gl/depth_mode');
-const StencilMode = require('../gl/stencil_mode');
-const CullFaceMode = require('../gl/cull_face_mode');
-const { debugUniformValues } = require('./program/debug_program');
-const { Color } = require('@mapwhit/style-expressions');
+import glMatrix from '@mapbox/gl-matrix';
+import { Color } from '@mapwhit/style-expressions';
+import { PosArray } from '../data/array_types.js';
+import EXTENT from '../data/extent.js';
+import { LineIndexArray } from '../data/index_array_type.js';
+import posAttributes from '../data/pos_attributes.js';
+import SegmentVector from '../data/segment.js';
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import { debugUniformValues } from './program/debug_program.js';
 
-module.exports = drawDebug;
+const { mat4 } = glMatrix;
 
-function drawDebug(painter, sourceCache, coords) {
+export default function drawDebug(painter, sourceCache, coords) {
   for (let i = 0; i < coords.length; i++) {
     drawDebugTile(painter, sourceCache, coords[i]);
   }
@@ -407,7 +407,9 @@ function createTextVertices(text, left, baseline, scale) {
 
   for (i = 0, len = text.length; i < len; i++) {
     glyph = simplexFont[text[i]];
-    if (!glyph) continue;
+    if (!glyph) {
+      continue;
+    }
     prev = null;
 
     for (j = 0, len2 = glyph[1].length; j < len2; j += 2) {

package/src/render/draw_fill.js

@@ -1,14 +1,15 @@
-const { Color } = require('@mapwhit/style-expressions');
-const DepthMode = require('../gl/depth_mode');
-const CullFaceMode = require('../gl/cull_face_mode');
-const {
-  fillUniformValues,
-  fillPatternUniformValues,
+import { Color } from '@mapwhit/style-expressions';
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+
+import {
+  fillOutlinePatternUniformValues,
   fillOutlineUniformValues,
-  fillOutlinePatternUniformValues
-} = require('./program/fill_program');
+  fillPatternUniformValues,
+  fillUniformValues
+} from './program/fill_program.js';
 
-module.exports = drawFill;
+export default drawFill;
 
 function drawFill(painter, sourceCache, layer, coords) {
   const color = layer._paint.get('fill-color');
@@ -79,10 +80,14 @@ function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode
 
   for (const coord of coords) {
     const tile = sourceCache.getTile(coord);
-    if (image && !tile.patternsLoaded()) continue;
+    if (image && !tile.patternsLoaded()) {
+      continue;
+    }
 
     const bucket = tile.getBucket(layer);
-    if (!bucket) continue;
+    if (!bucket) {
+      continue;
+    }
 
     const programConfiguration = bucket.programConfigurations.get(layer.id);
     const program = painter.useProgram(programName, programConfiguration);
@@ -97,7 +102,9 @@ function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode
     if (constantPattern && tile.imageAtlas) {
       const posTo = tile.imageAtlas.patternPositions[constantPattern.to];
       const posFrom = tile.imageAtlas.patternPositions[constantPattern.from];
-      if (posTo && posFrom) programConfiguration.setConstantPatternPositions(posTo, posFrom);
+      if (posTo && posFrom) {
+        programConfiguration.setConstantPatternPositions(posTo, posFrom);
+      }
     }
 
     const tileMatrix = painter.translatePosMatrix(

package/src/render/draw_fill_extrusion.js

@@ -1,10 +1,9 @@
-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 { fillExtrusionUniformValues, fillExtrusionPatternUniformValues } = require('./program/fill_extrusion_program');
-
-module.exports = draw;
+import ColorMode from '../gl/color_mode.js';
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import { fillExtrusionPatternUniformValues, fillExtrusionUniformValues } from './program/fill_extrusion_program.js';
+export default draw;
 
 function draw(painter, source, layer, coords) {
   const opacity = layer._paint.get('fill-extrusion-opacity');
@@ -51,7 +50,9 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
   for (const coord of coords) {
     const tile = source.getTile(coord);
     const bucket = tile.getBucket(layer);
-    if (!bucket) continue;
+    if (!bucket) {
+      continue;
+    }
 
     const programConfiguration = bucket.programConfigurations.get(layer.id);
     const program = painter.useProgram(image ? 'fillExtrusionPattern' : 'fillExtrusion', programConfiguration);
@@ -66,7 +67,9 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
     if (constantPattern && tile.imageAtlas) {
       const posTo = tile.imageAtlas.patternPositions[constantPattern.to];
       const posFrom = tile.imageAtlas.patternPositions[constantPattern.from];
-      if (posTo && posFrom) programConfiguration.setConstantPatternPositions(posTo, posFrom);
+      if (posTo && posFrom) {
+        programConfiguration.setConstantPatternPositions(posTo, posFrom);
+      }
     }
 
     const matrix = painter.translatePosMatrix(

package/src/render/draw_heatmap.js

@@ -1,12 +1,11 @@
-const Texture = require('./texture');
-const { Color } = require('@mapwhit/style-expressions');
-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 { heatmapUniformValues, heatmapTextureUniformValues } = require('./program/heatmap_program');
-
-module.exports = drawHeatmap;
+import { Color } from '@mapwhit/style-expressions';
+import ColorMode from '../gl/color_mode.js';
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import { heatmapTextureUniformValues, heatmapUniformValues } from './program/heatmap_program.js';
+import Texture from './texture.js';
+export default drawHeatmap;
 
 function drawHeatmap(painter, sourceCache, layer, coords) {
   if (layer._paint.get('heatmap-opacity') === 0) {
@@ -34,11 +33,15 @@ function drawHeatmap(painter, sourceCache, layer, coords) {
       // Skip tiles that have uncovered parents to avoid flickering; we don't need
       // to use complex tile masking here because the change between zoom levels is subtle,
       // so it's fine to simply render the parent until all its 4 children are loaded
-      if (sourceCache.hasRenderableParent(coord)) continue;
+      if (sourceCache.hasRenderableParent(coord)) {
+        continue;
+      }
 
       const tile = sourceCache.getTile(coord);
       const bucket = tile.getBucket(layer);
-      if (!bucket) continue;
+      if (!bucket) {
+        continue;
+      }
 
       const programConfiguration = bucket.programConfigurations.get(layer.id);
       const program = painter.useProgram('heatmap', programConfiguration);
@@ -128,7 +131,9 @@ function renderTextureToMap(painter, layer) {
   // heatmaps: the kernel texture, prepared in the offscreen pass, and a
   // color ramp texture.
   const fbo = layer.heatmapFbo;
-  if (!fbo) return;
+  if (!fbo) {
+    return;
+  }
   context.activeTexture.set(gl.TEXTURE0);
   gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
 

package/src/render/draw_hillshade.js

@@ -1,13 +1,14 @@
-const Texture = require('./texture');
-const StencilMode = require('../gl/stencil_mode');
-const DepthMode = require('../gl/depth_mode');
-const CullFaceMode = require('../gl/cull_face_mode');
-const { hillshadeUniformValues, hillshadeUniformPrepareValues } = require('./program/hillshade_program');
-
-module.exports = drawHillshade;
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import { hillshadeUniformPrepareValues, hillshadeUniformValues } from './program/hillshade_program.js';
+import Texture from './texture.js';
+export default drawHillshade;
 
 function drawHillshade(painter, sourceCache, layer, tileIDs) {
-  if (painter.renderPass !== 'offscreen' && painter.renderPass !== 'translucent') return;
+  if (painter.renderPass !== 'offscreen' && painter.renderPass !== 'translucent') {
+    return;
+  }
 
   const context = painter.context;
   const sourceMaxZoom = sourceCache.getSource().maxzoom;
@@ -32,7 +33,9 @@ function renderHillshade(painter, tile, layer, depthMode, stencilMode, colorMode
   const context = painter.context;
   const gl = context.gl;
   const fbo = tile.fbo;
-  if (!fbo) return;
+  if (!fbo) {
+    return;
+  }
 
   const program = painter.useProgram('hillshade');
 

package/src/render/draw_line.js

@@ -1,19 +1,23 @@
-const DepthMode = require('../gl/depth_mode');
-const Texture = require('./texture');
-const CullFaceMode = require('../gl/cull_face_mode');
-const {
-  lineUniformValues,
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import {
+  lineGradientUniformValues,
   linePatternUniformValues,
   lineSDFUniformValues,
-  lineGradientUniformValues
-} = require('./program/line_program');
+  lineUniformValues
+} from './program/line_program.js';
+import Texture from './texture.js';
 
-module.exports = function drawLine(painter, sourceCache, layer, coords) {
-  if (painter.renderPass !== 'translucent') return;
+export default function drawLine(painter, sourceCache, layer, coords) {
+  if (painter.renderPass !== 'translucent') {
+    return;
+  }
 
   const opacity = layer._paint.get('line-opacity');
   const width = layer._paint.get('line-width');
-  if (opacity.constantOr(1) === 0 || width.constantOr(1) === 0) return;
+  if (opacity.constantOr(1) === 0 || width.constantOr(1) === 0) {
+    return;
+  }
 
   const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
   const colorMode = painter.colorModeForRenderPass();
@@ -35,18 +39,26 @@ module.exports = function drawLine(painter, sourceCache, layer, coords) {
     context.activeTexture.set(gl.TEXTURE0);
 
     let gradientTexture = layer.gradientTexture;
-    if (!layer.gradient) return;
-    if (!gradientTexture) gradientTexture = layer.gradientTexture = new Texture(context, layer.gradient, gl.RGBA);
+    if (!layer.gradient) {
+      return;
+    }
+    if (!gradientTexture) {
+      gradientTexture = layer.gradientTexture = new Texture(context, layer.gradient, gl.RGBA);
+    }
     gradientTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
   }
 
   for (const coord of coords) {
     const tile = sourceCache.getTile(coord);
 
-    if (image && !tile.patternsLoaded()) continue;
+    if (image && !tile.patternsLoaded()) {
+      continue;
+    }
 
     const bucket = tile.getBucket(layer);
-    if (!bucket) continue;
+    if (!bucket) {
+      continue;
+    }
 
     const programConfiguration = bucket.programConfigurations.get(layer.id);
     const prevProgram = painter.context.program.get();
@@ -57,7 +69,9 @@ module.exports = function drawLine(painter, sourceCache, layer, coords) {
     if (constantPattern && tile.imageAtlas) {
       const posTo = tile.imageAtlas.patternPositions[constantPattern.to];
       const posFrom = tile.imageAtlas.patternPositions[constantPattern.from];
-      if (posTo && posFrom) programConfiguration.setConstantPatternPositions(posTo, posFrom);
+      if (posTo && posFrom) {
+        programConfiguration.setConstantPatternPositions(posTo, posFrom);
+      }
     }
 
     const uniformValues = dasharray
@@ -96,4 +110,4 @@ module.exports = function drawLine(painter, sourceCache, layer, coords) {
     firstTile = false;
     // once refactored so that bound texture state is managed, we'll also be able to remove this firstTile/programChanged logic
   }
-};
+}

package/src/render/draw_raster.js

@@ -1,17 +1,19 @@
-const { clamp } = require('../util/util');
-
-const ImageSource = require('../source/image_source');
-const browser = require('../util/browser');
-const StencilMode = require('../gl/stencil_mode');
-const DepthMode = require('../gl/depth_mode');
-const CullFaceMode = require('../gl/cull_face_mode');
-const { rasterUniformValues } = require('./program/raster_program');
-
-module.exports = drawRaster;
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import ImageSource from '../source/image_source.js';
+import browser from '../util/browser.js';
+import { clamp } from '../util/util.js';
+import { rasterUniformValues } from './program/raster_program.js';
+export default drawRaster;
 
 function drawRaster(painter, sourceCache, layer, coords) {
-  if (painter.renderPass !== 'translucent') return;
-  if (layer._paint.get('raster-opacity') === 0) return;
+  if (painter.renderPass !== 'translucent') {
+    return;
+  }
+  if (layer._paint.get('raster-opacity') === 0) {
+    return;
+  }
 
   const context = painter.context;
   const gl = context.gl;
@@ -131,7 +133,9 @@ function getFadeValues(tile, parentTile, sourceCache, layer, transform) {
     // once they're old enough to pass the crossfading threshold
     // (fadeDuration), unset the `refreshedUponExpiration` flag so we don't
     // incorrectly fail to crossfade them when zooming
-    if (tile.refreshedUponExpiration && sinceTile >= 1) tile.refreshedUponExpiration = false;
+    if (tile.refreshedUponExpiration && sinceTile >= 1) {
+      tile.refreshedUponExpiration = false;
+    }
 
     if (parentTile) {
       return {

package/src/render/draw_symbol.js

@@ -1,21 +1,22 @@
-const drawCollisionDebug = require('./draw_collision_debug');
-
-const pixelsToTileUnits = require('../source/pixels_to_tile_units');
-const symbolProjection = require('../symbol/projection');
-const symbolSize = require('../symbol/symbol_size');
-const { mat4 } = require('@mapbox/gl-matrix');
+import glMatrix from '@mapbox/gl-matrix';
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import pixelsToTileUnits from '../source/pixels_to_tile_units.js';
+import properties from '../style/style_layer/symbol_style_layer_properties.js';
+import * as symbolProjection from '../symbol/projection.js';
+import * as symbolSize from '../symbol/symbol_size.js';
+import drawCollisionDebug from './draw_collision_debug.js';
+import { symbolIconUniformValues, symbolSDFUniformValues } from './program/symbol_program.js';
+
+const { mat4 } = glMatrix;
 const identityMat4 = mat4.identity(new Float32Array(16));
-const properties = require('../style/style_layer/symbol_style_layer_properties');
 const symbolLayoutProperties = properties.layout;
-const StencilMode = require('../gl/stencil_mode');
-const DepthMode = require('../gl/depth_mode');
-const CullFaceMode = require('../gl/cull_face_mode');
-const { symbolIconUniformValues, symbolSDFUniformValues } = require('./program/symbol_program');
-
-module.exports = drawSymbols;
 
-function drawSymbols(painter, sourceCache, layer, coords) {
-  if (painter.renderPass !== 'translucent') return;
+export default function drawSymbols(painter, sourceCache, layer, coords) {
+  if (painter.renderPass !== 'translucent') {
+    return;
+  }
 
   // Disable the stencil test so that labels aren't clipped to tile boundaries.
   const stencilMode = StencilMode.disabled;
@@ -94,9 +95,13 @@ function drawLayerSymbols(
   for (const coord of coords) {
     const tile = sourceCache.getTile(coord);
     const bucket = tile.getBucket(layer);
-    if (!bucket) continue;
+    if (!bucket) {
+      continue;
+    }
     const buffers = isText ? bucket.text : bucket.icon;
-    if (!buffers || !buffers.segments.get().length) continue;
+    if (!buffers || !buffers.segments.get().length) {
+      continue;
+    }
     const programConfiguration = buffers.programConfigurations.get(layer.id);
 
     const isSDF = isText || bucket.sdfIcons;

package/src/render/glyph_atlas.js

@@ -1,5 +1,5 @@
-const { AlphaImage } = require('../util/image');
-const { default: potpack } = require('potpack');
+import potpack from 'potpack';
+import { AlphaImage } from '../util/image.js';
 
 const padding = 1;
 
@@ -14,7 +14,9 @@ class GlyphAtlas {
 
       for (const id in glyphs) {
         const src = glyphs[+id];
-        if (!src || src.bitmap.width === 0 || src.bitmap.height === 0) continue;
+        if (!src || src.bitmap.width === 0 || src.bitmap.height === 0) {
+          continue;
+        }
 
         const bin = {
           x: 0,
@@ -35,7 +37,9 @@ class GlyphAtlas {
 
       for (const id in glyphs) {
         const src = glyphs[+id];
-        if (!src || src.bitmap.width === 0 || src.bitmap.height === 0) continue;
+        if (!src || src.bitmap.width === 0 || src.bitmap.height === 0) {
+          continue;
+        }
         const bin = positions[stack][id].rect;
         AlphaImage.copy(src.bitmap, image, { x: 0, y: 0 }, { x: bin.x + padding, y: bin.y + padding }, src.bitmap);
       }
@@ -46,4 +50,4 @@ class GlyphAtlas {
   }
 }
 
-module.exports = GlyphAtlas;
+export default GlyphAtlas;

package/src/render/glyph_manager.js

@@ -12,4 +12,4 @@ class GlyphManager {
   }
 }
 
-module.exports = GlyphManager;
+export default GlyphManager;

package/src/render/image_atlas.js

@@ -1,9 +1,9 @@
-const { RGBAImage } = require('../util/image');
-const { default: potpack } = require('potpack');
+import potpack from 'potpack';
+import { RGBAImage } from '../util/image.js';
 
 const padding = 1;
 
-class ImagePosition {
+export class ImagePosition {
   constructor(paddedRect, { pixelRatio }) {
     this.paddedRect = paddedRect;
     this.pixelRatio = pixelRatio;
@@ -26,7 +26,7 @@ class ImagePosition {
   }
 }
 
-class ImageAtlas {
+export default class ImageAtlas {
   constructor(icons, patterns) {
     const iconPositions = {};
     const patternPositions = {};
@@ -85,6 +85,3 @@ class ImageAtlas {
     this.patternPositions = patternPositions;
   }
 }
-
-ImageAtlas.ImagePosition = ImagePosition;
-module.exports = ImageAtlas;

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,7 +20,7 @@ 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() {
@@ -165,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;