@deck.gl/carto 9.0.33 → 9.0.35

package/dist/cartoRasterTile-worker.js

@@ -1008,7 +1008,7 @@
   }
 
   // src/layers/schema/carto-raster-tile-loader.ts
-  var VERSION = true ? "9.0.33" : "latest";
+  var VERSION = true ? "9.0.35" : "latest";
   var id = "cartoRasterTile";
   var DEFAULT_OPTIONS = {
     cartoRasterTile: {

package/dist/cartoSpatialTile-worker.js

@@ -1397,7 +1397,7 @@
   }
 
   // src/layers/schema/carto-spatial-tile-loader.ts
-  var VERSION = true ? "9.0.33" : "latest";
+  var VERSION = true ? "9.0.35" : "latest";
   var id = "cartoSpatialTile";
   var DEFAULT_OPTIONS = {
     cartoSpatialTile: {

package/dist/cartoVectorTile-worker.js

@@ -1625,7 +1625,7 @@
   }
 
   // src/layers/schema/carto-vector-tile-loader.ts
-  var VERSION = true ? "9.0.33" : "latest";
+  var VERSION = true ? "9.0.35" : "latest";
   var id = "cartoVectorTile";
   var DEFAULT_OPTIONS = {
     cartoVectorTile: {

package/dist/dist.dev.js

@@ -7001,7 +7001,10 @@ var __exports__ = (() => {
     VectorTileLayer: () => VectorTileLayer,
     _GOOGLE_BASEMAPS: () => GOOGLE_BASEMAPS,
     _PointLabelLayer: () => PointLabelLayer,
+    _QuadbinLayer: () => QuadbinLayer,
+    _RasterLayer: () => RasterLayer,
     _STYLE_LAYER_GROUPS: () => STYLE_LAYER_GROUPS,
+    _SpatialIndexTileLayer: () => SpatialIndexTileLayer,
     _applyLayerGroupFilters: () => applyLayerGroupFilters,
     _fetchStyle: () => fetchStyle,
     _getStyleUrl: () => getStyleUrl,
@@ -8268,17 +8271,16 @@ var __exports__ = (() => {
           getHexagonResolution({ zoom: this.props.maxZoom, latitude: 0 }, this.props.tileSize)
         );
       }
-      return [
-        new SpatialIndexTileLayer(this.props, {
-          id: `h3-tile-layer-${this.props.id}`,
-          data,
-          TilesetClass: H3Tileset2D,
-          renderSubLayers,
-          minZoom: minresolution,
-          maxZoom: maxresolution,
-          loadOptions: this.getLoadOptions()
-        })
-      ];
+      const SubLayerClass = this.getSubLayerClass("spatial-index-tile", SpatialIndexTileLayer);
+      return new SubLayerClass(this.props, {
+        id: `h3-tile-layer-${this.props.id}`,
+        data,
+        TilesetClass: H3Tileset2D,
+        renderSubLayers,
+        minZoom: minresolution,
+        maxZoom: maxresolution,
+        loadOptions: this.getLoadOptions()
+      });
     }
   };
   H3TileLayer.layerName = "H3TileLayer";
@@ -8292,44 +8294,17 @@ var __exports__ = (() => {
   var glsl = (s) => `${s}`;
   var fs = glsl`\
 uniform heatmapUniforms {
-  vec2 delta;
-  float radiusPixels;
   vec2 colorDomain;
-  vec3 color1;
-  vec3 color2;
-  vec3 color3;
-  vec3 color4;
-  vec3 color5;
-  vec3 color6;
+  vec2 delta;
   float intensity;
   float opacity;
+  float radiusPixels;
 } heatmap;
 
-const vec4 STOPS = vec4(0.2, 0.4, 0.6, 0.8);
+uniform sampler2D colorTexture;
 
 vec3 colorGradient(float value) {
-  vec3 c1;
-  vec3 c2;
-  vec2 range;
-  if (value < STOPS.x) {
-    range = vec2(0.0, STOPS.x);
-    c1 = heatmap.color1; c2 = heatmap.color2;
-  } else if (value < STOPS.y) {
-    range = STOPS.xy;
-    c1 = heatmap.color2; c2 = heatmap.color3;
-  } else if (value < STOPS.z) {
-    range = STOPS.yz;
-    c1 = heatmap.color3; c2 = heatmap.color4;
-  } else if (value < STOPS.w) {
-    range = STOPS.zw;
-    c1 = heatmap.color4; c2 = heatmap.color5;
-  } else {
-    range = vec2(STOPS.w, 1.0);
-    c1 = heatmap.color5; c2 = heatmap.color6;
-  }
-
-  float f = (clamp(value, 0.0, 1.0) - range.x) / (range.y - range.x);
-  return mix(c1, c2, f) / 255.0;
+  return texture(colorTexture, vec2(value, 0.5)).rgb;
 }
 
 const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
@@ -8395,64 +8370,40 @@ vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
   return color;
 }
 `;
-  var defaultColorRange = [
-    [255, 255, 178],
-    [254, 217, 118],
-    [254, 178, 76],
-    [253, 141, 60],
-    [240, 59, 32],
-    [189, 0, 38]
-  ];
   var heatmap = {
     name: "heatmap",
     uniformPropTypes: {
-      delta: { value: [0, 1] },
-      radiusPixels: { value: 20, min: 0, softMax: 100 },
       colorDomain: { value: [0, 1] },
-      color1: { value: [0, 0, 0] },
-      color2: { value: [0, 0, 0] },
-      color3: { value: [0, 0, 0] },
-      color4: { value: [0, 0, 0] },
-      color5: { value: [0, 0, 0] },
-      color6: { value: [0, 0, 0] },
+      delta: { value: [0, 1] },
       intensity: { value: 1, min: 0.1, max: 10 },
-      opacity: { value: 1, min: 0, max: 1 }
+      opacity: { value: 1, min: 0, max: 1 },
+      radiusPixels: { value: 20, min: 0, softMax: 100 }
     },
     uniformTypes: {
-      delta: "vec2<f32>",
-      radiusPixels: "f32",
       colorDomain: "vec2<f32>",
-      color1: "vec3<f32>",
-      color2: "vec3<f32>",
-      color3: "vec3<f32>",
-      color4: "vec3<f32>",
-      color5: "vec3<f32>",
-      color6: "vec3<f32>",
+      delta: "vec2<f32>",
       intensity: "f32",
-      opacity: "f32"
+      opacity: "f32",
+      radiusPixels: "f32"
     },
     getUniforms: (opts) => {
+      if (!opts)
+        return {};
       const {
-        delta = [1, 0],
-        colorRange = defaultColorRange,
-        radiusPixels = 20,
         colorDomain = [0, 1],
+        colorTexture,
+        delta = [1, 0],
         intensity = 1,
-        opacity = 1
+        opacity = 1,
+        radiusPixels = 20
       } = opts;
-      const [color1, color2, color3, color4, color5, color6] = colorRange;
       return {
-        delta,
-        color1,
-        color2,
-        color3,
-        color4,
-        color5,
-        color6,
-        radiusPixels,
         colorDomain,
+        colorTexture,
+        delta,
         intensity,
-        opacity
+        opacity,
+        radiusPixels
       };
     },
     fs,
@@ -8627,26 +8578,55 @@ vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
       if (!tileJSON)
         return null;
       const { tiles: data, maxresolution: maxZoom } = tileJSON;
-      return [
-        new SpatialIndexTileLayer(this.props, {
-          id: `quadbin-tile-layer-${this.props.id}`,
-          data,
-          TilesetClass: QuadbinTileset2D,
-          renderSubLayers: renderSubLayers2,
-          maxZoom,
-          loadOptions: this.getLoadOptions()
-        })
-      ];
+      const SubLayerClass = this.getSubLayerClass("spatial-index-tile", SpatialIndexTileLayer);
+      return new SubLayerClass(this.props, {
+        id: `quadbin-tile-layer-${this.props.id}`,
+        data,
+        TilesetClass: QuadbinTileset2D,
+        renderSubLayers: renderSubLayers2,
+        maxZoom,
+        loadOptions: this.getLoadOptions()
+      });
     }
   };
   QuadbinTileLayer.layerName = "QuadbinTileLayer";
   QuadbinTileLayer.defaultProps = defaultProps5;
 
   // src/layers/heatmap-tile-layer.ts
+  var defaultColorRange = [
+    [255, 255, 178],
+    [254, 217, 118],
+    [254, 178, 76],
+    [253, 141, 60],
+    [240, 59, 32],
+    [189, 0, 38]
+  ];
+  var TEXTURE_PROPS2 = {
+    format: "rgba8unorm",
+    mipmaps: false,
+    sampler: {
+      minFilter: "linear",
+      magFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge"
+    }
+  };
   function unitDensityForCell(cell) {
     const cellResolution = Number(getResolution(cell));
     return Math.pow(4, cellResolution);
   }
+  function colorRangeToFlatArray(colorRange) {
+    const flatArray = new Uint8Array(colorRange.length * 4);
+    let index2 = 0;
+    for (let i = 0; i < colorRange.length; i++) {
+      const color2 = colorRange[i];
+      flatArray[index2++] = color2[0];
+      flatArray[index2++] = color2[1];
+      flatArray[index2++] = color2[2];
+      flatArray[index2++] = Number.isFinite(color2[3]) ? color2[3] : 255;
+    }
+    return flatArray;
+  }
   var RTTSolidPolygonLayer = class extends RTTModifier(import_layers2.SolidPolygonLayer) {
     getShaders(type) {
       const shaders = super.getShaders(type);
@@ -8692,6 +8672,7 @@ uniform float densityFactor;
     getWeight: { type: "accessor", value: 1 },
     onMaxDensityChange: { type: "function", optional: true, value: null },
     colorDomain: { type: "array", value: [0, 1] },
+    colorRange: defaultColorRange,
     intensity: { type: "number", value: 1 },
     radiusPixels: { type: "number", min: 0, max: 100, value: 20 }
   };
@@ -8708,12 +8689,18 @@ uniform float densityFactor;
       this.setState({ viewportChanged });
       return changeFlags.somethingChanged;
     }
+    updateState(opts) {
+      const { props, oldProps } = opts;
+      super.updateState(opts);
+      if (props.colorRange !== oldProps.colorRange) {
+        this._updateColorTexture(opts);
+      }
+    }
     renderLayers() {
       const {
         data,
         getWeight,
         colorDomain,
-        colorRange,
         intensity,
         radiusPixels,
         _subLayerProps,
@@ -8761,11 +8748,11 @@ uniform float densityFactor;
           getElevation: getWeight,
           elevationScale: maxDensity,
           colorDomain,
-          colorRange,
           radiusPixels,
           intensity,
           _subLayerProps: subLayerProps,
           refinementStrategy: "no-overlap",
+          colorTexture: this.state.colorTexture,
           extruded: false,
           stroked: false,
           updateTriggers: {
@@ -8802,6 +8789,23 @@ uniform float densityFactor;
         })
       );
     }
+    _updateColorTexture(opts) {
+      const { colorRange } = opts.props;
+      let { colorTexture } = this.state;
+      const colors = colorRangeToFlatArray(colorRange);
+      if (colorTexture && colorTexture?.width === colorRange.length) {
+        colorTexture.setSubImageData({ data: colors });
+      } else {
+        colorTexture?.destroy();
+        colorTexture = this.context.device.createTexture({
+          ...TEXTURE_PROPS2,
+          data: colors,
+          width: colorRange.length,
+          height: 1
+        });
+      }
+      this.setState({ colorTexture });
+    }
   };
   HeatmapTileLayer.layerName = "HeatmapTileLayer";
   HeatmapTileLayer.defaultProps = defaultProps6;
@@ -9020,7 +9024,7 @@ void main(void) {
 
   int yIndex = - (gl_InstanceID / BLOCK_WIDTH);
   int xIndex = gl_InstanceID + (yIndex * BLOCK_WIDTH);
-  common_position += scale * vec2(float(xIndex), float(yIndex));
+  common_position += scale * vec2(float(xIndex), float(yIndex - 1));
 
   vec4 color = isStroke ? instanceLineColors : instanceFillColors;
 
@@ -9128,6 +9132,9 @@ void main(void) {
     }
   };
   RasterColumnLayer.layerName = "RasterColumnLayer";
+  function wrappedDataComparator(oldData, newData) {
+    return oldData.data === newData.data && oldData.length === newData.length;
+  }
   var RasterLayer = class extends import_core13.CompositeLayer {
     renderLayers() {
       const {
@@ -9161,6 +9168,7 @@ void main(void) {
             data,
             length: blockSize * blockSize
           },
+          dataComparator: wrappedDataComparator,
           offset,
           highlightedObjectIndex,
           highlightColor
@@ -9233,17 +9241,16 @@ void main(void) {
       if (!tileJSON)
         return null;
       const { tiles: data, minzoom: minZoom, maxzoom: maxZoom } = tileJSON;
-      return [
-        new import_geo_layers7.TileLayer(this.props, {
-          id: `raster-tile-layer-${this.props.id}`,
-          data,
-          TilesetClass: QuadbinTileset2D,
-          renderSubLayers: renderSubLayers3,
-          minZoom,
-          maxZoom,
-          loadOptions: this.getLoadOptions()
-        })
-      ];
+      const SubLayerClass = this.getSubLayerClass("tile", import_geo_layers7.TileLayer);
+      return new SubLayerClass(this.props, {
+        id: `raster-tile-layer-${this.props.id}`,
+        data,
+        TilesetClass: QuadbinTileset2D,
+        renderSubLayers: renderSubLayers3,
+        minZoom,
+        maxZoom,
+        loadOptions: this.getLoadOptions()
+      });
     }
   };
   RasterTileLayer.layerName = "RasterTileLayer";
@@ -10218,7 +10225,7 @@ ${formatErrorKey(key)}: ${errorContext[key]}`;
   }
 
   // ../../node_modules/d3-color/src/color.js
-  function Color2() {
+  function Color3() {
   }
   var darker = 0.7;
   var brighter = 1 / darker;
@@ -10382,7 +10389,7 @@ ${formatErrorKey(key)}: ${errorContext[key]}`;
     yellow: 16776960,
     yellowgreen: 10145074
   };
-  define_default(Color2, color, {
+  define_default(Color3, color, {
     copy(channels) {
       return Object.assign(new this.constructor(), this, channels);
     },
@@ -10422,7 +10429,7 @@ ${formatErrorKey(key)}: ${errorContext[key]}`;
     return new Rgb(r, g, b, a);
   }
   function rgbConvert(o) {
-    if (!(o instanceof Color2))
+    if (!(o instanceof Color3))
       o = color(o);
     if (!o)
       return new Rgb();
@@ -10438,7 +10445,7 @@ ${formatErrorKey(key)}: ${errorContext[key]}`;
     this.b = +b;
     this.opacity = +opacity;
   }
-  define_default(Rgb, rgb, extend(Color2, {
+  define_default(Rgb, rgb, extend(Color3, {
     brighter(k) {
       k = k == null ? brighter : Math.pow(brighter, k);
       return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
@@ -10494,7 +10501,7 @@ ${formatErrorKey(key)}: ${errorContext[key]}`;
   function hslConvert(o) {
     if (o instanceof Hsl)
       return new Hsl(o.h, o.s, o.l, o.opacity);
-    if (!(o instanceof Color2))
+    if (!(o instanceof Color3))
       o = color(o);
     if (!o)
       return new Hsl();
@@ -10525,7 +10532,7 @@ ${formatErrorKey(key)}: ${errorContext[key]}`;
     this.l = +l;
     this.opacity = +opacity;
   }
-  define_default(Hsl, hsl, extend(Color2, {
+  define_default(Hsl, hsl, extend(Color3, {
     brighter(k) {
       k = k == null ? brighter : Math.pow(brighter, k);
       return new Hsl(this.h, this.s, this.l * k, this.opacity);