push to prod

package.json

@@ -32,6 +32,7 @@
     "fast-xml-parser": "^4.4.0",
     "geojson": "^0.5.0",
     "hammerjs": "^2.0.8",
+    "kdbush": "^4.0.2",
     "opentype.js": "^1.3.4",
     "pbf": "^3.2.1",
     "stats.js": "^0.17.0"
@@ -49,6 +50,7 @@
     "@types/jest-environment-puppeteer": "^5.0.4",
     "@types/jest-image-snapshot": "^6.2.1",
     "@types/jsdom": "^21.1.3",
+    "@types/kdbush": "^3.0.5",
     "@types/mapbox__tilebelt": "^1.0.3",
     "@types/mapbox__vector-tile": "^1.3.0",
     "@types/opentype.js": "^1.3.7",

src/demo/enabled_features.ts

@@ -5,4 +5,5 @@ export const ENABLED_FEATURE_FLAGS: MapFeatureFlags = {
   webglRendererDebug: false,
   enableObjectSelection: false,
   fontManagerDebugModeEnabled: false,
+  enableTextGrouping: false,
 };

src/demo/map_demo.ts

@@ -137,7 +137,7 @@ export function renderMap() {
     projection: ProjectionType.Mercator,
     tileStyles: selectedStyleConfig.styles,
     tileBuffer: 1,
-    tileCacheSize: 256,
+    tileCacheSize: 1024,
     workerPool: 4,
     featureFlags: ENABLED_FEATURE_FLAGS,
     controls: {

src/demo/map_styles.ts

@@ -270,7 +270,7 @@ export const MapTilerVectorTileStyles: DataTileStyles = {
         color: ['$rgba', 250, 185, 57, 1],
         show: ['$and', ['$lte', ['$get', 'properties.rank'], 5], ['$notEmpty', ['$get', 'properties.name']]],
         borderColor: ['$rgba', 0, 0, 0, 1],
-        borderWidth: 1,
+        borderWidth: 2,
       },
       maxzoom: 18,
       minzoom: 12,
@@ -549,8 +549,8 @@ export const MapboxVectorTileStyles: DataTileStyles = {
         type: MapFeatureType.line,
         show: ['$lte', ['$get', 'properties.admin_level'], 7],
         color: ['$rgba', 120, 123, 140, 1],
-        width: 4,
-        borderWidth: 2,
+        width: 2,
+        borderWidth: 0,
         borderColor: ['$rgba', 0, 0, 0, 1],
       },
       maxzoom: 16,
@@ -575,12 +575,12 @@ export const MapboxVectorTileStyles: DataTileStyles = {
         width: [
           '$switch',
           ['$get', 'properties.class'],
-          ['primary', 16],
-          ['secondary', 12],
-          ['motorway', 12],
-          ['$default', 6],
+          ['primary', 8],
+          ['secondary', 6],
+          ['motorway', 6],
+          ['$default', 4],
         ],
-        borderWidth: 4,
+        borderWidth: 2,
         borderColor: ['$rgba', 0, 0, 0, 1],
         joinStyle: LineJoinStyle.round,
       },
@@ -693,7 +693,7 @@ export const MapboxVectorTileStyles: DataTileStyles = {
         type: MapFeatureType.point,
         radius: 10,
         color: ['$rgba', 255, 0, 0, 1],
-        borderWidth: 1,
+        borderWidth: 2,
         borderColor: ['$rgba', 0, 0, 0, 1],
         show: [
           '$and',
@@ -828,7 +828,7 @@ export const SateliteTilesStyles: DataTileStyles = {
           ['motorway', ['$rgba', 233, 201, 43, 1]],
           ['$default', ['$rgba', 215, 218, 226, 1]],
         ],
-        width: ['$switch', ['$get', 'properties.class'], ['primary', 12], ['$default', 6]],
+        width: ['$switch', ['$get', 'properties.class'], ['primary', 6], ['$default', 3]],
         borderWidth: 2,
         borderColor: ['$rgba', 0, 0, 0, 1],
         joinStyle: LineJoinStyle.round,

src/demo/webgl/webgl_line.ts

@@ -49,6 +49,7 @@ export async function renderWebglLineExample() {
     fill: LineFillStyle.solid,
     join: LineJoinStyle.round,
     cap: LineCapStyle.round,
+    visible: true,
   });
 
   scene.addObject({
@@ -65,6 +66,7 @@ export async function renderWebglLineExample() {
     fill: LineFillStyle.solid,
     join: LineJoinStyle.round,
     cap: LineCapStyle.round,
+    visible: true,
   });
 
   // scene.addObject({

src/demo/webgl/webgl_point.ts

@@ -22,6 +22,7 @@ export async function renderWebglPointExample() {
     radius: 10,
     borderWidth: 2,
     borderColor: [0.0, 0.0, 0.0, 1.0],
+    visible: true,
   });
 
   scene.render({

src/map/evented.ts

@@ -29,7 +29,7 @@ export class Evented<EventType> {
     this.eventListeners = this.eventListeners.filter(l => !(l.eventType === eventType && l.handler === handler));
   }
 
-  protected fire(eventType: EventType, ...eventArgs: unknown[]) {
+  public fire(eventType: EventType, ...eventArgs: unknown[]) {
     const listeners = [...this.eventListeners];
 
     for (const listener of listeners) {

src/map/flags.ts

@@ -10,4 +10,6 @@ export interface MapFeatureFlags {
 
   // Renders textures and attaches it to the html dom.
   fontManagerDebugModeEnabled?: boolean;
+
+  enableTextGrouping?: boolean;
 }

src/map/map.ts

@@ -110,7 +110,7 @@ export class InstantMap extends Evented<MapEventType> {
   private projection: Projection;
   private mapOptions: MapOptions;
   private stats: Stats;
-  private pixelRatio: number;
+  private devicePixelRatio: number;
   private width: number;
   private height: number;
   private minZoom: number;
@@ -209,7 +209,7 @@ export class InstantMap extends Evented<MapEventType> {
   ) {
     this.minZoom = mapOptions.tileStyles.minzoom || 1;
     this.maxZoom = mapOptions.tileStyles.maxzoom || 15;
-    this.pixelRatio = mapOptions.devicePixelRatio || window.devicePixelRatio;
+    this.devicePixelRatio = mapOptions.devicePixelRatio || window.devicePixelRatio;
     this.styles = styles;
     this.renderQueue = new RenderQueue();
     this.fontManager = new FontManager(featureFlags, styles.fonts || {});
@@ -233,7 +233,7 @@ export class InstantMap extends Evented<MapEventType> {
       mapOptions.tileBuffer || 1,
       mapOptions.workerPool || 2,
       styles.tileSize,
-      this.pixelRatio,
+      this.devicePixelRatio,
       this.maxZoom,
       this.projection.getType(),
       this.fontManager,
@@ -441,7 +441,7 @@ export class InstantMap extends Evented<MapEventType> {
           this.rootEl,
           this.featureFlags,
           MapTileRendererType.webgl,
-          this.pixelRatio,
+          this.devicePixelRatio,
           this.fontManager,
           this.glyphsManager,
         );
@@ -450,7 +450,7 @@ export class InstantMap extends Evented<MapEventType> {
           this.rootEl,
           this.featureFlags,
           MapTileRendererType.webgl2,
-          this.pixelRatio,
+          this.devicePixelRatio,
           this.fontManager,
           this.glyphsManager,
         );

src/map/renderer/webgl/helpers/webgl_buffer.ts

@@ -21,6 +21,7 @@ export interface WebGlBuffer {
  */
 export function createWebGlBuffer(gl: ExtendedWebGLRenderingContext, params: CreateWebGlBufferParams): WebGlBuffer {
   const buffer = gl.createBuffer();
+  let currentBufferedDataLength = 0;
 
   gl.enableVertexAttribArray(params.location);
   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
@@ -39,7 +40,12 @@ export function createWebGlBuffer(gl: ExtendedWebGLRenderingContext, params: Cre
     location: params.location,
     bufferData(data: Float32Array) {
       gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-      gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+      if (currentBufferedDataLength > data.length) {
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, data);
+      } else {
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
+        currentBufferedDataLength = data.length;
+      }
       gl.bindBuffer(gl.ARRAY_BUFFER, null);
     },
   };

src/map/renderer/webgl/helpers/weblg_texture.ts

@@ -33,18 +33,35 @@ export interface WebGlTexture {
   setPixels(texturePixels: ArrayBufferTextureSource): void;
   bind(): void;
   unbind(): void;
+  destroy(): void;
 }
 
 let CURRENT_TEXTURE_INDEX = 0;
-
 export function resetTextureIndex() {
   CURRENT_TEXTURE_INDEX = 0;
 }
 
+let FREE_TEXTURE_INDECIES = new Set();
+function getNextTextureIndex(): number {
+  if (FREE_TEXTURE_INDECIES.size) {
+    const arr = [...FREE_TEXTURE_INDECIES] as number[];
+    const result = arr.shift();
+    FREE_TEXTURE_INDECIES = new Set(arr);
+
+    return result;
+  }
+
+  return CURRENT_TEXTURE_INDEX++;
+}
+
+function releaseTextureIndex(index: number) {
+  FREE_TEXTURE_INDECIES.add(index);
+}
+
 export function createWebGlTexture(gl: ExtendedWebGLRenderingContext, options: CreateTextureOptions): WebGlTexture {
   const texture = gl.createTexture();
   const level = options.level || 0;
-  const textureIndex = options.textureIndex !== undefined ? options.textureIndex : CURRENT_TEXTURE_INDEX++;
+  const textureIndex = options.textureIndex !== undefined ? options.textureIndex : getNextTextureIndex();
 
   gl.activeTexture(gl.TEXTURE0 + textureIndex);
   gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -128,6 +145,9 @@ export function createWebGlTexture(gl: ExtendedWebGLRenderingContext, options: C
         texturePixels.data,
       );
     },
+    destroy() {
+      releaseTextureIndex(textureIndex);
+    },
     bind() {
       gl.activeTexture(gl.TEXTURE0 + textureIndex);
       gl.bindTexture(gl.TEXTURE_2D, texture);