@mapwhit/tilerenderer 1.0.0 → 1.1.0

package/src/gl/context.js

@@ -1,40 +1,39 @@
-const IndexBuffer = require('./index_buffer');
-
-const VertexBuffer = require('./vertex_buffer');
-const Framebuffer = require('./framebuffer');
-const ColorMode = require('./color_mode');
-const { deepEqual } = require('../util/object');
-const {
+import { deepEqual } from '../util/object.js';
+import ColorMode from './color_mode.js';
+import Framebuffer from './framebuffer.js';
+import IndexBuffer from './index_buffer.js';
+import {
+  ActiveTextureUnit,
+  BindElementBuffer,
+  BindFramebuffer,
+  BindRenderbuffer,
+  BindTexture,
+  BindVertexArrayOES,
+  BindVertexBuffer,
+  Blend,
+  BlendColor,
+  BlendFunc,
   ClearColor,
   ClearDepth,
   ClearStencil,
   ColorMask,
+  CullFace,
+  CullFaceSide,
+  DepthFunc,
   DepthMask,
-  StencilMask,
-  StencilFunc,
-  StencilOp,
-  StencilTest,
   DepthRange,
   DepthTest,
-  DepthFunc,
-  Blend,
-  BlendFunc,
-  BlendColor,
-  CullFace,
-  CullFaceSide,
   FrontFace,
-  Program,
-  ActiveTextureUnit,
-  Viewport,
-  BindFramebuffer,
-  BindRenderbuffer,
-  BindTexture,
-  BindVertexBuffer,
-  BindElementBuffer,
-  BindVertexArrayOES,
   PixelStoreUnpack,
-  PixelStoreUnpackPremultiplyAlpha
-} = require('./value');
+  PixelStoreUnpackPremultiplyAlpha,
+  Program,
+  StencilFunc,
+  StencilMask,
+  StencilOp,
+  StencilTest,
+  Viewport
+} from './value.js';
+import VertexBuffer from './vertex_buffer.js';
 
 class Context {
   constructor(gl) {
@@ -190,4 +189,4 @@ class Context {
   }
 }
 
-module.exports = Context;
+export default Context;

package/src/gl/cull_face_mode.js

@@ -19,4 +19,4 @@ class CullFaceMode {
 CullFaceMode.disabled = new CullFaceMode(false, BACK, CCW);
 CullFaceMode.backCCW = new CullFaceMode(true, BACK, CCW);
 
-module.exports = CullFaceMode;
+export default CullFaceMode;

package/src/gl/depth_mode.js

@@ -15,4 +15,4 @@ DepthMode.ReadWrite = true;
 
 DepthMode.disabled = new DepthMode(ALWAYS, DepthMode.ReadOnly, [0, 1]);
 
-module.exports = DepthMode;
+export default DepthMode;

package/src/gl/framebuffer.js

@@ -1,4 +1,4 @@
-const { ColorAttachment, DepthAttachment } = require('./value');
+import { ColorAttachment, DepthAttachment } from './value.js';
 
 class Framebuffer {
   constructor(context, width, height) {
@@ -16,13 +16,17 @@ class Framebuffer {
     const gl = this.context.gl;
 
     const texture = this.colorAttachment.get();
-    if (texture) gl.deleteTexture(texture);
+    if (texture) {
+      gl.deleteTexture(texture);
+    }
 
     const renderbuffer = this.depthAttachment.get();
-    if (renderbuffer) gl.deleteRenderbuffer(renderbuffer);
+    if (renderbuffer) {
+      gl.deleteRenderbuffer(renderbuffer);
+    }
 
     gl.deleteFramebuffer(this.framebuffer);
   }
 }
 
-module.exports = Framebuffer;
+export default Framebuffer;

package/src/gl/index_buffer.js

@@ -1,4 +1,4 @@
-const assert = require('assert');
+import assert from 'assert';
 
 class IndexBuffer {
   constructor(context, array, dynamicDraw) {
@@ -49,4 +49,4 @@ class IndexBuffer {
   }
 }
 
-module.exports = IndexBuffer;
+export default IndexBuffer;

package/src/gl/stencil_mode.js

@@ -14,4 +14,4 @@ class StencilMode {
 
 StencilMode.disabled = new StencilMode({ func: ALWAYS, mask: 0 }, 0, 0, KEEP, KEEP, KEEP);
 
-module.exports = StencilMode;
+export default StencilMode;

package/src/gl/value.js

@@ -1,6 +1,6 @@
-const { Color } = require('@mapwhit/style-expressions');
+import { Color } from '@mapwhit/style-expressions';
 
-class ClearColor {
+export class ClearColor {
   constructor(context) {
     this.context = context;
     this.current = Color.transparent;
@@ -19,7 +19,7 @@ class ClearColor {
   }
 }
 
-class ClearDepth {
+export class ClearDepth {
   constructor(context) {
     this.context = context;
     this.current = 1;
@@ -37,7 +37,7 @@ class ClearDepth {
   }
 }
 
-class ClearStencil {
+export class ClearStencil {
   constructor(context) {
     this.context = context;
     this.current = 0;
@@ -55,7 +55,7 @@ class ClearStencil {
   }
 }
 
-class ColorMask {
+export class ColorMask {
   constructor(context) {
     this.context = context;
     this.current = [true, true, true, true];
@@ -74,7 +74,7 @@ class ColorMask {
   }
 }
 
-class DepthMask {
+export class DepthMask {
   constructor(context) {
     this.context = context;
     this.current = true;
@@ -92,7 +92,7 @@ class DepthMask {
   }
 }
 
-class StencilMask {
+export class StencilMask {
   constructor(context) {
     this.context = context;
     this.current = 0xff;
@@ -110,7 +110,7 @@ class StencilMask {
   }
 }
 
-class StencilFunc {
+export class StencilFunc {
   constructor(context) {
     this.context = context;
     this.current = {
@@ -133,7 +133,7 @@ class StencilFunc {
   }
 }
 
-class StencilOp {
+export class StencilOp {
   constructor(context) {
     this.context = context;
     const gl = this.context.gl;
@@ -153,7 +153,7 @@ class StencilOp {
   }
 }
 
-class StencilTest {
+export class StencilTest {
   constructor(context) {
     this.context = context;
     this.current = false;
@@ -176,7 +176,7 @@ class StencilTest {
   }
 }
 
-class DepthRange {
+export class DepthRange {
   constructor(context) {
     this.context = context;
     this.current = [0, 1];
@@ -195,7 +195,7 @@ class DepthRange {
   }
 }
 
-class DepthTest {
+export class DepthTest {
   constructor(context) {
     this.context = context;
     this.current = false;
@@ -218,7 +218,7 @@ class DepthTest {
   }
 }
 
-class DepthFunc {
+export class DepthFunc {
   constructor(context) {
     this.context = context;
     this.current = context.gl.LESS;
@@ -236,7 +236,7 @@ class DepthFunc {
   }
 }
 
-class Blend {
+export class Blend {
   constructor(context) {
     this.context = context;
     this.current = false;
@@ -259,7 +259,7 @@ class Blend {
   }
 }
 
-class BlendFunc {
+export class BlendFunc {
   constructor(context) {
     this.context = context;
     const gl = this.context.gl;
@@ -279,7 +279,7 @@ class BlendFunc {
   }
 }
 
-class BlendColor {
+export class BlendColor {
   constructor(context) {
     this.context = context;
     this.current = Color.transparent;
@@ -298,7 +298,7 @@ class BlendColor {
   }
 }
 
-class CullFace {
+export class CullFace {
   constructor(context) {
     this.context = context;
     this.default = false;
@@ -328,7 +328,7 @@ class CullFace {
   }
 }
 
-class CullFaceSide {
+export class CullFaceSide {
   constructor(context) {
     this.context = context;
     const gl = this.context.gl;
@@ -355,7 +355,7 @@ class CullFaceSide {
   }
 }
 
-class FrontFace {
+export class FrontFace {
   constructor(context) {
     this.context = context;
     const gl = this.context.gl;
@@ -382,7 +382,7 @@ class FrontFace {
   }
 }
 
-class Program {
+export class Program {
   constructor(context) {
     this.context = context;
     this.current = null;
@@ -400,7 +400,7 @@ class Program {
   }
 }
 
-class ActiveTextureUnit {
+export class ActiveTextureUnit {
   constructor(context) {
     this.context = context;
     this.current = context.gl.TEXTURE0;
@@ -418,7 +418,7 @@ class ActiveTextureUnit {
   }
 }
 
-class Viewport {
+export class Viewport {
   constructor(context) {
     this.context = context;
     const gl = this.context.gl;
@@ -438,7 +438,7 @@ class Viewport {
   }
 }
 
-class BindFramebuffer {
+export class BindFramebuffer {
   constructor(context) {
     this.context = context;
     this.current = null;
@@ -457,7 +457,7 @@ class BindFramebuffer {
   }
 }
 
-class BindRenderbuffer {
+export class BindRenderbuffer {
   constructor(context) {
     this.context = context;
     this.current = null;
@@ -476,7 +476,7 @@ class BindRenderbuffer {
   }
 }
 
-class BindTexture {
+export class BindTexture {
   constructor(context) {
     this.context = context;
     this.current = null;
@@ -495,7 +495,7 @@ class BindTexture {
   }
 }
 
-class BindVertexBuffer {
+export class BindVertexBuffer {
   constructor(context) {
     this.context = context;
     this.current = null;
@@ -514,7 +514,7 @@ class BindVertexBuffer {
   }
 }
 
-class BindElementBuffer {
+export class BindElementBuffer {
   constructor(context) {
     this.context = context;
     this.current = null;
@@ -532,7 +532,7 @@ class BindElementBuffer {
   }
 }
 
-class BindVertexArrayOES {
+export class BindVertexArrayOES {
   constructor(context) {
     this.context = context;
     this.current = null;
@@ -550,7 +550,7 @@ class BindVertexArrayOES {
   }
 }
 
-class PixelStoreUnpack {
+export class PixelStoreUnpack {
   constructor(context) {
     this.context = context;
     this.current = 4;
@@ -569,7 +569,7 @@ class PixelStoreUnpack {
   }
 }
 
-class PixelStoreUnpackPremultiplyAlpha {
+export class PixelStoreUnpackPremultiplyAlpha {
   constructor(context) {
     this.context = context;
     this.current = false;
@@ -592,7 +592,7 @@ class PixelStoreUnpackPremultiplyAlpha {
  * Framebuffer values
  * @private
  */
-class FramebufferValue {
+export class FramebufferValue {
   constructor(context, parent) {
     this.context = context;
     this.current = null;
@@ -604,7 +604,7 @@ class FramebufferValue {
   }
 }
 
-class ColorAttachment extends FramebufferValue {
+export class ColorAttachment extends FramebufferValue {
   constructor(context, parent) {
     super(context, parent);
     this.dirty = false;
@@ -627,7 +627,7 @@ class ColorAttachment extends FramebufferValue {
   }
 }
 
-class DepthAttachment extends FramebufferValue {
+export class DepthAttachment extends FramebufferValue {
   set(v) {
     if (this.current !== v) {
       const gl = this.context.gl;
@@ -639,38 +639,3 @@ class DepthAttachment extends FramebufferValue {
     }
   }
 }
-
-module.exports = {
-  ClearColor,
-  ClearDepth,
-  ClearStencil,
-  ColorMask,
-  DepthMask,
-  StencilMask,
-  StencilFunc,
-  StencilOp,
-  StencilTest,
-  DepthRange,
-  DepthTest,
-  DepthFunc,
-  Blend,
-  BlendFunc,
-  BlendColor,
-  CullFace,
-  CullFaceSide,
-  FrontFace,
-  Program,
-  ActiveTextureUnit,
-  Viewport,
-  BindFramebuffer,
-  BindRenderbuffer,
-  BindTexture,
-  BindVertexBuffer,
-  BindElementBuffer,
-  BindVertexArrayOES,
-  PixelStoreUnpack,
-  PixelStoreUnpackPremultiplyAlpha,
-  FramebufferValue,
-  ColorAttachment,
-  DepthAttachment
-};

package/src/gl/vertex_buffer.js

@@ -1,4 +1,4 @@
-const assert = require('assert');
+import assert from 'assert';
 
 /**
  * @enum {string} AttributeType
@@ -98,4 +98,4 @@ class VertexBuffer {
   }
 }
 
-module.exports = VertexBuffer;
+export default VertexBuffer;

package/src/index.js

@@ -1,33 +1,56 @@
-require('./util/polyfill');
-
-module.exports = {
-  version: require('../package.json').version,
-  setRTLTextPlugin: require('./source/rtl_text_plugin').setRTLTextPlugin,
-  Map: require('./ui/map'),
-  Style: require('./style/style'),
-  LngLat: require('./geo/lng_lat'),
-  LngLatBounds: require('./geo/lng_lat_bounds'),
-  Point: require('@mapbox/point-geometry').default,
-  Evented: require('@mapwhit/events').Evented,
-  config: require('./util/config'),
-
-  get workerCount() {
-    return this.config.WORKER_COUNT;
-  },
+import './util/polyfill.js';
 
-  set workerCount(count) {
-    this.config.WORKER_COUNT = count;
-  },
+import { default as Point } from '@mapbox/point-geometry';
+import { Evented } from '@mapwhit/events';
+import packageJSON from '../package.json' with { type: 'json' };
+import { default as LngLat } from './geo/lng_lat.js';
+import { default as LngLatBounds } from './geo/lng_lat_bounds.js';
+import { setRTLTextPlugin } from './source/rtl_text_plugin.js';
+import { default as Style } from './style/style.js';
+import { default as Map } from './ui/map.js';
+import config from './util/config.js';
 
-  get workerUrl() {
-    return this.config.WORKER_URL;
-  },
+const { version } = packageJSON;
+
+export { version, config, setRTLTextPlugin, Point, LngLat, LngLatBounds, Style, Map, Evented };
+
+// for commonjs backward compatibility
+const mapwhit = {
+  version,
+  config,
+  setRTLTextPlugin,
+  Point,
+  LngLat,
+  LngLatBounds,
+  Style,
+  Map,
+  Evented
+};
 
-  set workerUrl(url) {
-    this.config.WORKER_URL = url;
+const properties = {
+  workerCount: {
+    get() {
+      return config.WORKER_COUNT;
+    },
+    set(count) {
+      config.WORKER_COUNT = count;
+    }
+  },
+  workerUrl: {
+    get() {
+      return config.WORKER_URL;
+    },
+    set(url) {
+      config.WORKER_URL = url;
+    }
   }
 };
 
+Object.defineProperties(mapwhit, properties);
+Object.defineProperties(config, properties);
+
+export default mapwhit;
+
 /**
  * The version of Mapbox GL JS in use as specified in `package.json`,
  * `CHANGELOG.md`, and the GitHub release.
@@ -48,5 +71,6 @@ module.exports = {
  */
 
 // canary assert: used to confirm that asserts have been removed from production build
-const assert = require('assert');
+import assert from 'assert';
+
 assert(true, 'canary assert');

package/src/render/draw_background.js

@@ -1,26 +1,31 @@
-const StencilMode = require('../gl/stencil_mode');
-const DepthMode = require('../gl/depth_mode');
-const CullFaceMode = require('../gl/cull_face_mode');
-const { backgroundUniformValues, backgroundPatternUniformValues } = require('./program/background_program');
-
-module.exports = drawBackground;
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import { backgroundPatternUniformValues, backgroundUniformValues } from './program/background_program.js';
+export default drawBackground;
 
 function drawBackground(painter, sourceCache, layer) {
   const color = layer._paint.get('background-color');
   const opacity = layer._paint.get('background-opacity');
 
-  if (opacity === 0) return;
+  if (opacity === 0) {
+    return;
+  }
 
   const context = painter.context;
   const gl = context.gl;
   const transform = painter.transform;
   const tileSize = transform.tileSize;
   const image = layer._paint.get('background-pattern');
-  if (painter.isPatternMissing(image)) return;
+  if (painter.isPatternMissing(image)) {
+    return;
+  }
 
   const pass =
     !image && color.a === 1 && opacity === 1 && painter.opaquePassEnabledForLayer() ? 'opaque' : 'translucent';
-  if (painter.renderPass !== pass) return;
+  if (painter.renderPass !== pass) {
+    return;
+  }
 
   const stencilMode = StencilMode.disabled;
   const depthMode = painter.depthModeForSublayer(0, pass === 'opaque' ? DepthMode.ReadWrite : DepthMode.ReadOnly);

package/src/render/draw_circle.js

@@ -1,12 +1,13 @@
-const StencilMode = require('../gl/stencil_mode');
-const DepthMode = require('../gl/depth_mode');
-const CullFaceMode = require('../gl/cull_face_mode');
-const { circleUniformValues } = require('./program/circle_program');
-
-module.exports = drawCircles;
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import { circleUniformValues } from './program/circle_program.js';
+export default drawCircles;
 
 function drawCircles(painter, sourceCache, layer, coords) {
-  if (painter.renderPass !== 'translucent') return;
+  if (painter.renderPass !== 'translucent') {
+    return;
+  }
 
   const opacity = layer._paint.get('circle-opacity');
   const strokeWidth = layer._paint.get('circle-stroke-width');
@@ -30,7 +31,9 @@ function drawCircles(painter, sourceCache, layer, coords) {
 
     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('circle', programConfiguration);

package/src/render/draw_collision_debug.js

@@ -1,9 +1,8 @@
-const DepthMode = require('../gl/depth_mode');
-const StencilMode = require('../gl/stencil_mode');
-const CullFaceMode = require('../gl/cull_face_mode');
-const { collisionUniformValues } = require('./program/collision_program');
-
-module.exports = drawCollisionDebug;
+import CullFaceMode from '../gl/cull_face_mode.js';
+import DepthMode from '../gl/depth_mode.js';
+import StencilMode from '../gl/stencil_mode.js';
+import { collisionUniformValues } from './program/collision_program.js';
+export default drawCollisionDebug;
 
 function drawCollisionDebugGeometry(painter, sourceCache, layer, coords, drawCircles) {
   const context = painter.context;
@@ -14,9 +13,13 @@ function drawCollisionDebugGeometry(painter, sourceCache, layer, coords, drawCir
     const coord = coords[i];
     const tile = sourceCache.getTile(coord);
     const bucket = tile.getBucket(layer);
-    if (!bucket) continue;
+    if (!bucket) {
+      continue;
+    }
     const buffers = drawCircles ? bucket.collisionCircle : bucket.collisionBox;
-    if (!buffers) continue;
+    if (!buffers) {
+      continue;
+    }
 
     program.draw(
       context,