@deck.gl/aggregation-layers 9.3.0-alpha.5 → 9.3.0-alpha.6

package/dist.min.js

@@ -523,6 +523,6 @@ fragColor.g = outTexture.r / max(1.0, outTexture.a);
 `,Co={name:"weight",vs:Lr,uniformTypes:{commonBounds:"vec4<f32>",radiusPixels:"f32",textureWidth:"f32",weightsScale:"f32"}},bo={name:"maxWeight",vs:`layout(std140) uniform maxWeightUniforms {
   float textureSize;
 } maxWeight;
-`,uniformTypes:{textureSize:"f32"}};var Pr=2,fe={format:"rgba8unorm",dimension:"2d",width:1,height:1,sampler:{minFilter:"linear",magFilter:"linear",addressModeU:"clamp-to-edge",addressModeV:"clamp-to-edge"}},Eo=[0,0],wr={SUM:0,MEAN:1},Nr={getPosition:{type:"accessor",value:n=>n.position},getWeight:{type:"accessor",value:1},intensity:{type:"number",min:0,value:1},radiusPixels:{type:"number",min:1,max:100,value:50},colorRange:G,threshold:{type:"number",min:0,max:1,value:.05},colorDomain:{type:"array",value:null,optional:!0},aggregation:"SUM",weightsTextureSize:{type:"number",min:128,max:2048,value:2048},debounceTimeout:{type:"number",min:0,max:1e3,value:500}},Or=["float32-renderable-webgl","texture-blend-float-webgl"],Rr={data:{props:["radiusPixels"]}},At=class extends yo{getShaders(t){let e=[V.project32];return t.modules&&(e=[...e,...t.modules]),super.getShaders({...t,modules:e})}initializeState(){super.initializeAggregationLayer(Rr),this.setState({colorDomain:Eo}),this._setupTextureParams(),this._setupAttributes(),this._setupResources()}shouldUpdateState({changeFlags:t}){return t.somethingChanged}updateState(t){super.updateState(t),this._updateHeatmapState(t)}_updateHeatmapState(t){let{props:e,oldProps:o}=t,r=this._getChangeFlags(t);if((r.dataChanged||r.viewportChanged)&&(r.boundsChanged=this._updateBounds(r.dataChanged),this._updateTextureRenderingBounds()),r.dataChanged||r.boundsChanged){if(clearTimeout(this.state.updateTimer),this.setState({isWeightMapDirty:!0}),r.dataChanged){let i=this.getShaders({vs:Jt,fs:te});this._createWeightsTransform(i)}}else r.viewportZoomChanged&&this._debouncedUpdateWeightmap();e.colorRange!==o.colorRange&&this._updateColorTexture(t),this.state.isWeightMapDirty&&this._updateWeightmap(),this.setState({zoom:t.context.viewport.zoom})}renderLayers(){let{weightsTexture:t,triPositionBuffer:e,triTexCoordBuffer:o,maxWeightsTexture:r,colorTexture:i,colorDomain:s}=this.state,{updateTriggers:a,intensity:c,threshold:g,aggregation:h}=this.props,f=this.getSubLayerClass("triangle",vo);return new f(this.getSubLayerProps({id:"triangle-layer",updateTriggers:a}),{coordinateSystem:V.COORDINATE_SYSTEM.DEFAULT,data:{attributes:{positions:e,texCoords:o}},vertexCount:4,maxTexture:r,colorTexture:i,aggregationMode:wr[h]||0,weightsTexture:t,intensity:c,threshold:g,colorDomain:s})}finalizeState(t){super.finalizeState(t);let{weightsTransform:e,weightsTexture:o,maxWeightTransform:r,maxWeightsTexture:i,triPositionBuffer:s,triTexCoordBuffer:a,colorTexture:c,updateTimer:g}=this.state;e?.destroy(),o?.destroy(),r?.destroy(),i?.destroy(),s?.destroy(),a?.destroy(),c?.destroy(),g&&clearTimeout(g)}_getAttributeManager(){return new V.AttributeManager(this.context.device,{id:this.props.id,stats:this.context.stats})}_getChangeFlags(t){let e={},{dimensions:o}=this.state;e.dataChanged=this.isAttributeChanged()&&"attribute changed"||this.isAggregationDirty(t,{compareAll:!0,dimension:o.data})&&"aggregation is dirty",e.viewportChanged=t.changeFlags.viewportChanged;let{zoom:r}=this.state;return(!t.context.viewport||t.context.viewport.zoom!==r)&&(e.viewportZoomChanged=!0),e}_createTextures(){let{textureSize:t,format:e}=this.state;this.setState({weightsTexture:this.context.device.createTexture({...fe,width:t,height:t,format:e}),maxWeightsTexture:this.context.device.createTexture({...fe,width:1,height:1,format:e})})}_setupAttributes(){this.getAttributeManager().add({positions:{size:3,type:"float64",accessor:"getPosition"},weights:{size:1,accessor:"getWeight"}}),this.setState({positionAttributeName:"positions"})}_setupTextureParams(){let{device:t}=this.context,{weightsTextureSize:e}=this.props,o=Math.min(e,t.limits.maxTextureDimension2D),r=Or.every(a=>t.features.has(a)),i=r?"rgba32float":"rgba8unorm",s=r?1:1/255;this.setState({textureSize:o,format:i,weightsScale:s}),r||V.log.warn(`HeatmapLayer: ${this.id} rendering to float texture not supported, falling back to low precision format`)()}_createWeightsTransform(t){let{weightsTransform:e}=this.state,{weightsTexture:o}=this.state,r=this.getAttributeManager();e?.destroy(),e=new de.TextureTransform(this.context.device,{id:`${this.id}-weights-transform`,bufferLayout:r.getBufferLayouts(),vertexCount:1,targetTexture:o,parameters:{depthWriteEnabled:!1,blend:!0,blendColorOperation:"add",blendColorSrcFactor:"one",blendColorDstFactor:"one",blendAlphaSrcFactor:"one",blendAlphaDstFactor:"one"},topology:"point-list",...t,modules:[...t.modules,Co]}),this.setState({weightsTransform:e})}_setupResources(){this._createTextures();let{device:t}=this.context,{textureSize:e,weightsTexture:o,maxWeightsTexture:r}=this.state,i=this.getShaders({vs:Jt,fs:te});this._createWeightsTransform(i);let s=this.getShaders({vs:So,fs:Ao,modules:[bo]}),a=new de.TextureTransform(t,{id:`${this.id}-max-weights-transform`,targetTexture:r,...s,vertexCount:e*e,topology:"point-list",parameters:{depthWriteEnabled:!1,blend:!0,blendColorOperation:"max",blendAlphaOperation:"max",blendColorSrcFactor:"one",blendColorDstFactor:"one",blendAlphaSrcFactor:"one",blendAlphaDstFactor:"one"}}),c={inTexture:o,textureSize:e};a.model.shaderInputs.setProps({maxWeight:c}),this.setState({weightsTexture:o,maxWeightsTexture:r,maxWeightTransform:a,zoom:null,triPositionBuffer:t.createBuffer({byteLength:48}),triTexCoordBuffer:t.createBuffer({byteLength:48})})}updateShaders(t){this._createWeightsTransform({vs:Jt,fs:te,...t})}_updateMaxWeightValue(){let{maxWeightTransform:t}=this.state;t.run({parameters:{viewport:[0,0,1,1]},clearColor:[0,0,0,0]})}_updateBounds(t=!1){let{viewport:e}=this.context,o=[e.unproject([0,0]),e.unproject([e.width,0]),e.unproject([0,e.height]),e.unproject([e.width,e.height])].map(a=>a.map(Math.fround)),r=co(o),i={visibleWorldBounds:r,viewportCorners:o},s=!1;if(t||!this.state.worldBounds||!lo(this.state.worldBounds,r)){let a=this._worldToCommonBounds(r),c=this._commonToWorldBounds(a);this.props.coordinateSystem===V.COORDINATE_SYSTEM.LNGLAT&&(c[1]=Math.max(c[1],-85.051129),c[3]=Math.min(c[3],85.051129),c[0]=Math.max(c[0],-360),c[2]=Math.min(c[2],360));let g=this._worldToCommonBounds(c);i.worldBounds=c,i.normalizedCommonBounds=g,s=!0}return this.setState(i),s}_updateTextureRenderingBounds(){let{triPositionBuffer:t,triTexCoordBuffer:e,normalizedCommonBounds:o,viewportCorners:r}=this.state,{viewport:i}=this.context;t.write(pe(r,3));let s=r.map(a=>ho(i.projectPosition(a),o));e.write(pe(s,2))}_updateColorTexture(t){let{colorRange:e}=t.props,{colorTexture:o}=this.state,r=re(e,!1,Uint8Array);o?.destroy(),o=this.context.device.createTexture({...fe,data:r,width:e.length,height:1}),this.setState({colorTexture:o})}_updateWeightmap(){let{radiusPixels:t,colorDomain:e,aggregation:o}=this.props,{worldBounds:r,textureSize:i,weightsScale:s,weightsTexture:a}=this.state,c=this.state.weightsTransform;this.state.isWeightMapDirty=!1;let g=this._worldToCommonBounds(r,{useLayerCoordinateSystem:!0});if(e&&o==="SUM"){let{viewport:M}=this.context,C=M.distanceScales.metersPerUnit[2]*(g[2]-g[0])/i;this.state.colorDomain=[e[0]*C*s,e[1]*C*s]}else this.state.colorDomain=e||Eo;let f=this.getAttributeManager().getAttributes(),p=this.getModuleSettings();this._setModelAttributes(c.model,f),c.model.setVertexCount(this.getNumInstances());let d={radiusPixels:t,commonBounds:g,textureWidth:i,weightsScale:s,weightsTexture:a},{viewport:x,devicePixelRatio:v,coordinateSystem:y,coordinateOrigin:b}=p,{modelMatrix:E}=this.props;c.model.shaderInputs.setProps({project:{viewport:x,devicePixelRatio:v,modelMatrix:E,coordinateSystem:y,coordinateOrigin:b},weight:d}),c.run({parameters:{viewport:[0,0,i,i]},clearColor:[0,0,0,0]}),this._updateMaxWeightValue()}_debouncedUpdateWeightmap(t=!1){let{updateTimer:e}=this.state,{debounceTimeout:o}=this.props;t?(e=null,this._updateBounds(!0),this._updateTextureRenderingBounds(),this.setState({isWeightMapDirty:!0})):(this.setState({isWeightMapDirty:!1}),clearTimeout(e),e=setTimeout(this._debouncedUpdateWeightmap.bind(this,!0),o)),this.setState({updateTimer:e})}_worldToCommonBounds(t,e={}){let{useLayerCoordinateSystem:o=!1}=e,[r,i,s,a]=t,{viewport:c}=this.context,{textureSize:g}=this.state,{coordinateSystem:h}=this.props,f=o&&(h===V.COORDINATE_SYSTEM.LNGLAT_OFFSETS||h===V.COORDINATE_SYSTEM.METER_OFFSETS),p=f?c.projectPosition(this.props.coordinateOrigin):[0,0],d=g*Pr/c.scale,x,v;return o&&!f?(x=this.projectPosition([r,i,0]),v=this.projectPosition([s,a,0])):(x=c.projectPosition([r,i,0]),v=c.projectPosition([s,a,0])),go([x[0]-p[0],x[1]-p[1],v[0]-p[0],v[1]-p[1]],d,d)}_commonToWorldBounds(t){let[e,o,r,i]=t,{viewport:s}=this.context,a=s.unprojectPosition([e,o]),c=s.unprojectPosition([r,i]);return a.slice(0,2).concat(c.slice(0,2))}};At.layerName="HeatmapLayer";At.defaultProps=Nr;var To=At;return _o(Ct);})();
+`,uniformTypes:{textureSize:"f32"}};var Pr=2,fe={format:"rgba8unorm",dimension:"2d",width:1,height:1,sampler:{minFilter:"linear",magFilter:"linear",addressModeU:"clamp-to-edge",addressModeV:"clamp-to-edge"}},Eo=[0,0],wr={SUM:0,MEAN:1},Nr={getPosition:{type:"accessor",value:n=>n.position},getWeight:{type:"accessor",value:1},intensity:{type:"number",min:0,value:1},radiusPixels:{type:"number",min:1,max:100,value:50},colorRange:G,threshold:{type:"number",min:0,max:1,value:.05},colorDomain:{type:"array",value:null,optional:!0},aggregation:"SUM",weightsTextureSize:{type:"number",min:128,max:2048,value:2048},debounceTimeout:{type:"number",min:0,max:1e3,value:500}},Or=["float32-renderable-webgl","texture-blend-float-webgl"],Rr={data:{props:["radiusPixels"]}},At=class extends yo{getShaders(t){let e=[V.project32];return t.modules&&(e=[...e,...t.modules]),super.getShaders({...t,modules:e})}initializeState(){super.initializeAggregationLayer(Rr),this.setState({colorDomain:Eo}),this._setupTextureParams(),this._setupAttributes(),this._setupResources()}shouldUpdateState({changeFlags:t}){return t.somethingChanged}updateState(t){super.updateState(t),this._updateHeatmapState(t)}_updateHeatmapState(t){let{props:e,oldProps:o}=t,r=this._getChangeFlags(t);if((r.dataChanged||r.viewportChanged)&&(r.boundsChanged=this._updateBounds(r.dataChanged),this._updateTextureRenderingBounds()),r.dataChanged||r.boundsChanged){if(clearTimeout(this.state.updateTimer),this.setState({isWeightMapDirty:!0}),r.dataChanged){let i=this.getShaders({vs:Jt,fs:te});this._createWeightsTransform(i)}}else r.viewportZoomChanged&&this._debouncedUpdateWeightmap();e.colorRange!==o.colorRange&&this._updateColorTexture(t),this.state.isWeightMapDirty&&this._updateWeightmap(),this.setState({zoom:t.context.viewport.zoom})}renderLayers(){let{weightsTexture:t,triPositionBuffer:e,triTexCoordBuffer:o,maxWeightsTexture:r,colorTexture:i,colorDomain:s}=this.state,{updateTriggers:a,intensity:c,threshold:g,aggregation:h}=this.props,f=this.getSubLayerClass("triangle",vo);return new f(this.getSubLayerProps({id:"triangle-layer",updateTriggers:a}),{coordinateSystem:V.COORDINATE_SYSTEM.DEFAULT,data:{attributes:{positions:e,texCoords:o}},vertexCount:4,maxTexture:r,colorTexture:i,aggregationMode:wr[h]||0,weightsTexture:t,intensity:c,threshold:g,colorDomain:s})}finalizeState(t){super.finalizeState(t);let{weightsTransform:e,weightsTexture:o,maxWeightTransform:r,maxWeightsTexture:i,triPositionBuffer:s,triTexCoordBuffer:a,colorTexture:c,updateTimer:g}=this.state;e?.destroy(),o?.destroy(),r?.destroy(),i?.destroy(),s?.destroy(),a?.destroy(),c?.destroy(),g&&clearTimeout(g)}_getAttributeManager(){return new V.AttributeManager(this.context.device,{id:this.props.id,stats:this.context.stats})}_getChangeFlags(t){let e={},{dimensions:o}=this.state;e.dataChanged=this.isAttributeChanged()&&"attribute changed"||this.isAggregationDirty(t,{compareAll:!0,dimension:o.data})&&"aggregation is dirty",e.viewportChanged=t.changeFlags.viewportChanged;let{zoom:r}=this.state;return(!t.context.viewport||t.context.viewport.zoom!==r)&&(e.viewportZoomChanged=!0),e}_createTextures(){let{textureSize:t,format:e}=this.state;this.setState({weightsTexture:this.context.device.createTexture({...fe,width:t,height:t,format:e}),maxWeightsTexture:this.context.device.createTexture({...fe,width:1,height:1,format:e})})}_setupAttributes(){this.getAttributeManager().add({positions:{size:3,type:"float64",accessor:"getPosition"},weights:{size:1,accessor:"getWeight"}}),this.setState({positionAttributeName:"positions"})}_setupTextureParams(){let{device:t}=this.context,{weightsTextureSize:e}=this.props,o=Math.min(e,t.limits.maxTextureDimension2D),r=Or.every(a=>t.features.has(a)),i=r?"rgba32float":"rgba8unorm",s=r?1:1/255;this.setState({textureSize:o,format:i,weightsScale:s}),r||V.log.warn(`HeatmapLayer: ${this.id} rendering to float texture not supported, falling back to low precision format`)()}_createWeightsTransform(t){let{weightsTransform:e}=this.state,{weightsTexture:o}=this.state,r=this.getAttributeManager();e?.destroy(),e=new de.TextureTransform(this.context.device,{id:`${this.id}-weights-transform`,...t,bufferLayout:r.getBufferLayouts(),vertexCount:1,targetTexture:o,parameters:{depthWriteEnabled:!1,blend:!0,blendColorOperation:"add",blendColorSrcFactor:"one",blendColorDstFactor:"one",blendAlphaSrcFactor:"one",blendAlphaDstFactor:"one"},topology:"point-list",modules:[...t.modules,Co]}),this.setState({weightsTransform:e})}_setupResources(){this._createTextures();let{device:t}=this.context,{textureSize:e,weightsTexture:o,maxWeightsTexture:r}=this.state,i=this.getShaders({vs:Jt,fs:te});this._createWeightsTransform(i);let s=this.getShaders({vs:So,fs:Ao,modules:[bo]}),a=new de.TextureTransform(t,{id:`${this.id}-max-weights-transform`,targetTexture:r,...s,vertexCount:e*e,topology:"point-list",parameters:{depthWriteEnabled:!1,blend:!0,blendColorOperation:"max",blendAlphaOperation:"max",blendColorSrcFactor:"one",blendColorDstFactor:"one",blendAlphaSrcFactor:"one",blendAlphaDstFactor:"one"}}),c={inTexture:o,textureSize:e};a.model.shaderInputs.setProps({maxWeight:c}),this.setState({weightsTexture:o,maxWeightsTexture:r,maxWeightTransform:a,zoom:null,triPositionBuffer:t.createBuffer({byteLength:48}),triTexCoordBuffer:t.createBuffer({byteLength:48})})}updateShaders(t){this._createWeightsTransform({vs:Jt,fs:te,...t})}_updateMaxWeightValue(){let{maxWeightTransform:t}=this.state;t.run({parameters:{viewport:[0,0,1,1]},clearColor:[0,0,0,0]})}_updateBounds(t=!1){let{viewport:e}=this.context,o=[e.unproject([0,0]),e.unproject([e.width,0]),e.unproject([0,e.height]),e.unproject([e.width,e.height])].map(a=>a.map(Math.fround)),r=co(o),i={visibleWorldBounds:r,viewportCorners:o},s=!1;if(t||!this.state.worldBounds||!lo(this.state.worldBounds,r)){let a=this._worldToCommonBounds(r),c=this._commonToWorldBounds(a);this.props.coordinateSystem===V.COORDINATE_SYSTEM.LNGLAT&&(c[1]=Math.max(c[1],-85.051129),c[3]=Math.min(c[3],85.051129),c[0]=Math.max(c[0],-360),c[2]=Math.min(c[2],360));let g=this._worldToCommonBounds(c);i.worldBounds=c,i.normalizedCommonBounds=g,s=!0}return this.setState(i),s}_updateTextureRenderingBounds(){let{triPositionBuffer:t,triTexCoordBuffer:e,normalizedCommonBounds:o,viewportCorners:r}=this.state,{viewport:i}=this.context;t.write(pe(r,3));let s=r.map(a=>ho(i.projectPosition(a),o));e.write(pe(s,2))}_updateColorTexture(t){let{colorRange:e}=t.props,{colorTexture:o}=this.state,r=re(e,!1,Uint8Array);o?.destroy(),o=this.context.device.createTexture({...fe,data:r,width:e.length,height:1}),this.setState({colorTexture:o})}_updateWeightmap(){let{radiusPixels:t,colorDomain:e,aggregation:o}=this.props,{worldBounds:r,textureSize:i,weightsScale:s,weightsTexture:a}=this.state,c=this.state.weightsTransform;this.state.isWeightMapDirty=!1;let g=this._worldToCommonBounds(r,{useLayerCoordinateSystem:!0});if(e&&o==="SUM"){let{viewport:M}=this.context,C=M.distanceScales.metersPerUnit[2]*(g[2]-g[0])/i;this.state.colorDomain=[e[0]*C*s,e[1]*C*s]}else this.state.colorDomain=e||Eo;let f=this.getAttributeManager().getAttributes(),p=this.getModuleSettings();this._setModelAttributes(c.model,f),c.model.setVertexCount(this.getNumInstances());let d={radiusPixels:t,commonBounds:g,textureWidth:i,weightsScale:s,weightsTexture:a},{viewport:x,devicePixelRatio:v,coordinateSystem:y,coordinateOrigin:b}=p,{modelMatrix:E}=this.props;c.model.shaderInputs.setProps({project:{viewport:x,devicePixelRatio:v,modelMatrix:E,coordinateSystem:y,coordinateOrigin:b},weight:d}),c.run({parameters:{viewport:[0,0,i,i]},clearColor:[0,0,0,0]}),this._updateMaxWeightValue()}_debouncedUpdateWeightmap(t=!1){let{updateTimer:e}=this.state,{debounceTimeout:o}=this.props;t?(e=null,this._updateBounds(!0),this._updateTextureRenderingBounds(),this.setState({isWeightMapDirty:!0})):(this.setState({isWeightMapDirty:!1}),clearTimeout(e),e=setTimeout(this._debouncedUpdateWeightmap.bind(this,!0),o)),this.setState({updateTimer:e})}_worldToCommonBounds(t,e={}){let{useLayerCoordinateSystem:o=!1}=e,[r,i,s,a]=t,{viewport:c}=this.context,{textureSize:g}=this.state,{coordinateSystem:h}=this.props,f=o&&(h===V.COORDINATE_SYSTEM.LNGLAT_OFFSETS||h===V.COORDINATE_SYSTEM.METER_OFFSETS),p=f?c.projectPosition(this.props.coordinateOrigin):[0,0],d=g*Pr/c.scale,x,v;return o&&!f?(x=this.projectPosition([r,i,0]),v=this.projectPosition([s,a,0])):(x=c.projectPosition([r,i,0]),v=c.projectPosition([s,a,0])),go([x[0]-p[0],x[1]-p[1],v[0]-p[0],v[1]-p[1]],d,d)}_commonToWorldBounds(t){let[e,o,r,i]=t,{viewport:s}=this.context,a=s.unprojectPosition([e,o]),c=s.unprojectPosition([r,i]);return a.slice(0,2).concat(c.slice(0,2))}};At.layerName="HeatmapLayer";At.defaultProps=Nr;var To=At;return _o(Ct);})();
       return __exports__;
       });

package/package.json

@@ -3,7 +3,7 @@
   "description": "deck.gl layers that aggregate the input data into alternative representations",
   "license": "MIT",
   "type": "module",
-  "version": "9.3.0-alpha.5",
+  "version": "9.3.0-alpha.6",
   "publishConfig": {
     "access": "public"
   },
@@ -38,7 +38,7 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/shadertools": "^9.3.0-alpha.10",
+    "@luma.gl/shadertools": "^9.3.2",
     "@math.gl/core": "^4.1.0",
     "@math.gl/web-mercator": "^4.1.0",
     "d3-hexbin": "^0.2.1"
@@ -46,8 +46,8 @@
   "peerDependencies": {
     "@deck.gl/core": "~9.3.0-alpha.1",
     "@deck.gl/layers": "~9.3.0-alpha.1",
-    "@luma.gl/core": "~9.3.0-alpha.10",
-    "@luma.gl/engine": "~9.3.0-alpha.10"
+    "@luma.gl/core": "~9.3.2",
+    "@luma.gl/engine": "~9.3.2"
   },
-  "gitHead": "c3ad1cee357af674cc31df37979d61325baf9d7a"
+  "gitHead": "6aff0d4eccd01a06a388ab1c07042a94daa3eb31"
 }

package/src/heatmap-layer/heatmap-layer.ts

@@ -408,6 +408,7 @@ export default class HeatmapLayer<
     weightsTransform?.destroy();
     weightsTransform = new TextureTransform(this.context.device, {
       id: `${this.id}-weights-transform`,
+      ...shaders,
       bufferLayout: attributeManager.getBufferLayouts(),
       vertexCount: 1,
       targetTexture: weightsTexture!,
@@ -421,7 +422,6 @@ export default class HeatmapLayer<
         blendAlphaDstFactor: 'one'
       },
       topology: 'point-list',
-      ...shaders,
       modules: [...shaders.modules, weightUniforms]
     } as TextureTransformProps);