@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/render/draw_fill_extrusion.js

@@ -1,13 +1,12 @@
-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');
+  const opacity = layer._paint.get('fill-extrusion-opacity');
   if (opacity === 0) {
     return;
   }
@@ -15,7 +14,7 @@ function draw(painter, source, layer, coords) {
   if (painter.renderPass === 'translucent') {
     const depthMode = new DepthMode(painter.context.gl.LEQUAL, DepthMode.ReadWrite, painter.depthRangeFor3D);
 
-    if (opacity === 1 && !layer.paint.get('fill-extrusion-pattern').constantOr(1)) {
+    if (opacity === 1 && !layer._paint.get('fill-extrusion-pattern').constantOr(1)) {
       const colorMode = painter.colorModeForRenderPass();
       drawExtrusionTiles(painter, source, layer, coords, depthMode, StencilMode.disabled, colorMode);
     } else {
@@ -43,15 +42,17 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
   const context = painter.context;
   const gl = context.gl;
 
-  const patternProperty = layer.paint.get('fill-extrusion-pattern');
+  const patternProperty = layer._paint.get('fill-extrusion-pattern');
   const image = patternProperty.constantOr(1);
   const crossfade = layer.getCrossfadeParameters();
-  const opacity = layer.paint.get('fill-extrusion-opacity');
+  const opacity = layer._paint.get('fill-extrusion-opacity');
 
   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,17 +67,19 @@ 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(
       coord.posMatrix,
       tile,
-      layer.paint.get('fill-extrusion-translate'),
-      layer.paint.get('fill-extrusion-translate-anchor')
+      layer._paint.get('fill-extrusion-translate'),
+      layer._paint.get('fill-extrusion-translate-anchor')
     );
 
-    const shouldUseVerticalGradient = layer.paint.get('fill-extrusion-vertical-gradient');
+    const shouldUseVerticalGradient = layer._paint.get('fill-extrusion-vertical-gradient');
     const uniformValues = image
       ? fillExtrusionPatternUniformValues(matrix, painter, shouldUseVerticalGradient, opacity, coord, crossfade, tile)
       : fillExtrusionUniformValues(matrix, painter, shouldUseVerticalGradient, opacity);
@@ -93,7 +96,7 @@ function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMo
       bucket.layoutVertexBuffer,
       bucket.indexBuffer,
       bucket.segments,
-      layer.paint,
+      layer._paint,
       painter.transform.zoom,
       programConfiguration
     );

package/src/render/draw_heatmap.js

@@ -1,15 +1,14 @@
-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) {
+  if (layer._paint.get('heatmap-opacity') === 0) {
     return;
   }
 
@@ -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);
@@ -51,12 +54,12 @@ function drawHeatmap(painter, sourceCache, layer, coords) {
         stencilMode,
         colorMode,
         CullFaceMode.disabled,
-        heatmapUniformValues(coord.posMatrix, tile, zoom, layer.paint.get('heatmap-intensity')),
+        heatmapUniformValues(coord.posMatrix, tile, zoom, layer._paint.get('heatmap-intensity')),
         layer.id,
         bucket.layoutVertexBuffer,
         bucket.indexBuffer,
         bucket.segments,
-        layer.paint,
+        layer._paint,
         painter.transform.zoom,
         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());
 
@@ -153,7 +158,7 @@ function renderTextureToMap(painter, layer) {
       painter.viewportBuffer,
       painter.quadTriangleIndexBuffer,
       painter.viewportSegments,
-      layer.paint,
+      layer._paint,
       painter.transform.zoom
     );
 }

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,27 +1,31 @@
-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;
+  const opacity = layer._paint.get('line-opacity');
+  const width = layer._paint.get('line-width');
+  if (opacity.constantOr(1) === 0 || width.constantOr(1) === 0) {
+    return;
+  }
 
   const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
   const colorMode = painter.colorModeForRenderPass();
 
-  const dasharray = layer.paint.get('line-dasharray');
-  const patternProperty = layer.paint.get('line-pattern');
+  const dasharray = layer._paint.get('line-dasharray');
+  const patternProperty = layer._paint.get('line-pattern');
   const image = patternProperty.constantOr(1);
-  const gradient = layer.paint.get('line-gradient');
+  const gradient = layer._paint.get('line-gradient');
   const crossfade = layer.getCrossfadeParameters();
 
   const programId = dasharray ? 'lineSDF' : image ? 'linePattern' : gradient ? 'lineGradient' : 'line';
@@ -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
@@ -88,7 +102,7 @@ module.exports = function drawLine(painter, sourceCache, layer, coords) {
       bucket.layoutVertexBuffer,
       bucket.indexBuffer,
       bucket.segments,
-      layer.paint,
+      layer._paint,
       painter.transform.zoom,
       programConfiguration
     );
@@ -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;
@@ -27,14 +29,14 @@ function drawRaster(painter, sourceCache, layer, coords) {
     // Use gl.LESS to prevent double drawing in areas where tiles overlap.
     const depthMode = painter.depthModeForSublayer(
       coord.overscaledZ - minTileZ,
-      layer.paint.get('raster-opacity') === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly,
+      layer._paint.get('raster-opacity') === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly,
       gl.LESS
     );
 
     const tile = sourceCache.getTile(coord);
     const posMatrix = painter.transform.calculatePosMatrix(coord.toUnwrapped(), align);
 
-    tile.registerFadeDuration(layer.paint.get('raster-fade-duration'));
+    tile.registerFadeDuration(layer._paint.get('raster-fade-duration'));
 
     const parentTile = sourceCache.findLoadedParent(coord, 0);
     const fade = getFadeValues(tile, parentTile, sourceCache, layer, painter.transform);
@@ -42,7 +44,7 @@ function drawRaster(painter, sourceCache, layer, coords) {
     let parentScaleBy;
     let parentTL;
 
-    const textureFilter = layer.paint.get('raster-resampling') === 'nearest' ? gl.NEAREST : gl.LINEAR;
+    const textureFilter = layer._paint.get('raster-resampling') === 'nearest' ? gl.NEAREST : gl.LINEAR;
 
     context.activeTexture.set(gl.TEXTURE0);
     tile.texture.bind(textureFilter, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
@@ -86,7 +88,7 @@ function drawRaster(painter, sourceCache, layer, coords) {
         tile.maskedBoundsBuffer,
         tile.maskedIndexBuffer,
         tile.segments,
-        layer.paint,
+        layer._paint,
         painter.transform.zoom
       );
     } else {
@@ -108,7 +110,7 @@ function drawRaster(painter, sourceCache, layer, coords) {
 }
 
 function getFadeValues(tile, parentTile, sourceCache, layer, transform) {
-  const fadeDuration = layer.paint.get('raster-fade-duration');
+  const fadeDuration = layer._paint.get('raster-fade-duration');
 
   if (fadeDuration > 0) {
     const now = browser.now();
@@ -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,55 +1,56 @@
-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;
   const colorMode = painter.colorModeForRenderPass();
 
-  if (layer.paint.get('icon-opacity').constantOr(1) !== 0) {
+  if (layer._paint.get('icon-opacity').constantOr(1) !== 0) {
     drawLayerSymbols(
       painter,
       sourceCache,
       layer,
       coords,
       false,
-      layer.paint.get('icon-translate'),
-      layer.paint.get('icon-translate-anchor'),
-      layer.layout.get('icon-rotation-alignment'),
-      layer.layout.get('icon-pitch-alignment'),
-      layer.layout.get('icon-keep-upright'),
+      layer._paint.get('icon-translate'),
+      layer._paint.get('icon-translate-anchor'),
+      layer._layout.get('icon-rotation-alignment'),
+      layer._layout.get('icon-pitch-alignment'),
+      layer._layout.get('icon-keep-upright'),
       stencilMode,
       colorMode
     );
   }
 
-  if (layer.paint.get('text-opacity').constantOr(1) !== 0) {
+  if (layer._paint.get('text-opacity').constantOr(1) !== 0) {
     drawLayerSymbols(
       painter,
       sourceCache,
       layer,
       coords,
       true,
-      layer.paint.get('text-translate'),
-      layer.paint.get('text-translate-anchor'),
-      layer.layout.get('text-rotation-alignment'),
-      layer.layout.get('text-pitch-alignment'),
-      layer.layout.get('text-keep-upright'),
+      layer._paint.get('text-translate'),
+      layer._paint.get('text-translate-anchor'),
+      layer._layout.get('text-rotation-alignment'),
+      layer._layout.get('text-pitch-alignment'),
+      layer._layout.get('text-keep-upright'),
       stencilMode,
       colorMode
     );
@@ -80,7 +81,7 @@ function drawLayerSymbols(
 
   const rotateWithMap = rotationAlignment === 'map';
   const pitchWithMap = pitchAlignment === 'map';
-  const alongLine = rotateWithMap && layer.layout.get('symbol-placement') !== 'point';
+  const alongLine = rotateWithMap && layer._layout.get('symbol-placement') !== 'point';
   // Line label rotation happens in `updateLineLabels`
   // Pitched point labels are automatically rotated by the labelPlaneMatrix projection
   // Unpitched point labels need to have their rotation applied after projection
@@ -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;
@@ -119,7 +124,7 @@ function drawLayerSymbols(
       tile.glyphAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
       texSize = tile.glyphAtlasTexture.size;
     } else {
-      const iconScaled = layer.layout.get('icon-size').constantOr(0) !== 1 || bucket.iconsNeedLinear;
+      const iconScaled = layer._layout.get('icon-size').constantOr(0) !== 1 || bucket.iconsNeedLinear;
       const iconTransformed = pitchWithMap || tr.pitch !== 0;
 
       tile.imageAtlasTexture.bind(
@@ -167,7 +172,7 @@ function drawLayerSymbols(
 
     let uniformValues;
     if (isSDF) {
-      const hasHalo = layer.paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;
+      const hasHalo = layer._paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;
 
       uniformValues = symbolSDFUniformValues(
         sizeData.functionType,
@@ -222,7 +227,7 @@ function drawSymbolElements(buffers, layer, painter, program, depthMode, stencil
     buffers.layoutVertexBuffer,
     buffers.indexBuffer,
     buffers.segments,
-    layer.paint,
+    layer._paint,
     painter.transform.zoom,
     buffers.programConfigurations.get(layer.id),
     buffers.dynamicLayoutVertexBuffer,

package/src/render/glyph_atlas.js

@@ -1,6 +1,5 @@
-const { AlphaImage } = require('../util/image');
-const { register } = require('../util/transfer_registry');
-const { default: potpack } = require('potpack');
+import potpack from 'potpack';
+import { AlphaImage } from '../util/image.js';
 
 const padding = 1;
 
@@ -15,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,
@@ -36,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);
       }
@@ -47,6 +50,4 @@ class GlyphAtlas {
   }
 }
 
-register('GlyphAtlas', GlyphAtlas);
-
-module.exports = GlyphAtlas;
+export default GlyphAtlas;

package/src/render/glyph_manager.js

@@ -8,9 +8,8 @@ class GlyphManager {
   async loadGlyphRange(stack, range) {
     this.#cache[stack] ??= {};
     const promise = (this.#cache[stack][range] ??= this.loader(stack, range));
-    const response = await promise;
-    return response.slice();
+    return await promise;
   }
 }
 
-module.exports = GlyphManager;
+export default GlyphManager;

package/src/render/image_atlas.js

@@ -1,10 +1,9 @@
-const { RGBAImage } = require('../util/image');
-const { register } = require('../util/transfer_registry');
-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;
@@ -27,7 +26,7 @@ class ImagePosition {
   }
 }
 
-class ImageAtlas {
+export default class ImageAtlas {
   constructor(icons, patterns) {
     const iconPositions = {};
     const patternPositions = {};
@@ -86,9 +85,3 @@ class ImageAtlas {
     this.patternPositions = patternPositions;
   }
 }
-
-ImageAtlas.ImagePosition = ImagePosition;
-module.exports = ImageAtlas;
-
-register('ImagePosition', ImagePosition);
-register('ImageAtlas', ImageAtlas);