@deck.gl/extensions 9.3.0-alpha.6 → 9.3.0-beta.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Plug-and-play functionalities for deck.gl layers",
   "license": "MIT",
   "type": "module",
-  "version": "9.3.0-alpha.6",
+  "version": "9.3.0-beta.2",
   "publishConfig": {
     "access": "public"
   },
@@ -47,5 +47,5 @@
     "@luma.gl/core": "~9.3.2",
     "@luma.gl/engine": "~9.3.2"
   },
-  "gitHead": "6aff0d4eccd01a06a388ab1c07042a94daa3eb31"
+  "gitHead": "f150e74afeba9a692974ba41110a5b865ac4787b"
 }

package/src/fp64/fp64-extension.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {LayerExtension, COORDINATE_SYSTEM} from '@deck.gl/core';
+import {LayerExtension} from '@deck.gl/core';
 import project64 from './project64';
 
 import type {Layer} from '@deck.gl/core';
@@ -13,10 +13,7 @@ export default class Fp64Extension extends LayerExtension {
 
   getShaders(this: Layer): any {
     const {coordinateSystem} = this.props;
-    if (
-      coordinateSystem !== COORDINATE_SYSTEM.LNGLAT &&
-      coordinateSystem !== COORDINATE_SYSTEM.DEFAULT
-    ) {
+    if (coordinateSystem !== 'lnglat' && coordinateSystem !== 'default') {
       throw new Error('fp64: coordinateSystem must be LNGLAT');
     }
 

package/src/path-style/path-style-extension.ts

@@ -4,7 +4,13 @@
 
 import {LayerExtension, _mergeShaders as mergeShaders} from '@deck.gl/core';
 import {vec3} from '@math.gl/core';
-import {dashShaders, Defines, offsetShaders} from './shaders.glsl';
+import {
+  dashShaders,
+  Defines,
+  offsetShaders,
+  scatterplotDashShaders,
+  textBackgroundDashShaders
+} from './shaders.glsl';
 
 import type {Accessor, Layer, LayerContext, UpdateParameters} from '@deck.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
@@ -21,6 +27,10 @@ type PathStyleProps = {
   dashGapPickable: boolean;
 };
 
+type SDFDashStyleProps = {
+  dashGapPickable: boolean;
+};
+
 export type PathStyleExtensionProps<DataT = any> = {
   /**
    * Accessor for the dash array to draw each path with: `[dashSize, gapSize]` relative to the width of the path.
@@ -63,7 +73,9 @@ export type PathStyleExtensionOptions = {
   highPrecisionDash: boolean;
 };
 
-/** Adds selected features to the `PathLayer` and composite layers that render the `PathLayer`. */
+type LayerType = 'path' | 'scatterplot' | 'textBackground';
+
+/** Adds selected features to the `PathLayer`, `ScatterplotLayer`, `TextBackgroundLayer`, and composite layers that render them. */
 export default class PathStyleExtension extends LayerExtension<PathStyleExtensionOptions> {
   static defaultProps = defaultProps;
   static extensionName = 'PathStyleExtension';
@@ -76,16 +88,49 @@ export default class PathStyleExtension extends LayerExtension<PathStyleExtensio
     super({dash: dash || highPrecisionDash, offset, highPrecisionDash});
   }
 
+  private getLayerType(layer: Layer): LayerType | null {
+    if ('pathTesselator' in layer.state) {
+      return 'path';
+    }
+    const layerName = (layer.constructor as any).layerName;
+    if (layerName === 'ScatterplotLayer') {
+      return 'scatterplot';
+    }
+    if (layerName === 'TextBackgroundLayer') {
+      return 'textBackground';
+    }
+    return null;
+  }
+
   isEnabled(layer: Layer<PathStyleExtensionProps>): boolean {
-    return 'pathTesselator' in layer.state;
+    return this.getLayerType(layer) !== null;
   }
 
   getShaders(this: Layer<PathStyleExtensionProps>, extension: this): any {
-    if (!extension.isEnabled(this)) {
+    const layerType = extension.getLayerType(this);
+    if (!layerType) {
       return null;
     }
 
-    // Merge shader injection
+    if (layerType === 'scatterplot' || layerType === 'textBackground') {
+      if (!extension.opts.dash) {
+        return null;
+      }
+      const inject =
+        layerType === 'scatterplot'
+          ? scatterplotDashShaders.inject
+          : textBackgroundDashShaders.inject;
+      const pathStyle: ShaderModule<SDFDashStyleProps> = {
+        name: 'pathStyle',
+        inject,
+        uniformTypes: {
+          dashGapPickable: 'i32'
+        }
+      };
+      return {modules: [pathStyle]};
+    }
+
+    // PathLayer: existing logic
     let result = {} as {inject: Record<string, string>};
     const defines: Defines = {};
     if (extension.opts.dash) {
@@ -115,15 +160,15 @@ export default class PathStyleExtension extends LayerExtension<PathStyleExtensio
 
   initializeState(this: Layer<PathStyleExtensionProps>, context: LayerContext, extension: this) {
     const attributeManager = this.getAttributeManager();
-    if (!attributeManager || !extension.isEnabled(this)) {
-      // This extension only works with the PathLayer
+    const layerType = extension.getLayerType(this);
+    if (!attributeManager || !layerType) {
       return;
     }
 
     if (extension.opts.dash) {
       attributeManager.addInstanced({
         instanceDashArrays: {size: 2, accessor: 'getDashArray'},
-        ...(extension.opts.highPrecisionDash
+        ...(layerType === 'path' && extension.opts.highPrecisionDash
           ? {
               instanceDashOffsets: {
                 size: 1,
@@ -134,7 +179,7 @@ export default class PathStyleExtension extends LayerExtension<PathStyleExtensio
           : {})
       });
     }
-    if (extension.opts.offset) {
+    if (layerType === 'path' && extension.opts.offset) {
       attributeManager.addInstanced({
         instanceOffsets: {size: 1, accessor: 'getOffset'}
       });
@@ -151,11 +196,19 @@ export default class PathStyleExtension extends LayerExtension<PathStyleExtensio
     }
 
     if (extension.opts.dash) {
-      const pathStyleProps: PathStyleProps = {
-        dashAlignMode: this.props.dashJustified ? 1 : 0,
-        dashGapPickable: Boolean(this.props.dashGapPickable)
-      };
-      this.setShaderModuleProps({pathStyle: pathStyleProps});
+      const layerType = extension.getLayerType(this);
+      if (layerType === 'scatterplot' || layerType === 'textBackground') {
+        const pathStyleProps: SDFDashStyleProps = {
+          dashGapPickable: Boolean(this.props.dashGapPickable)
+        };
+        this.setShaderModuleProps({pathStyle: pathStyleProps});
+      } else {
+        const pathStyleProps: PathStyleProps = {
+          dashAlignMode: this.props.dashJustified ? 1 : 0,
+          dashGapPickable: Boolean(this.props.dashGapPickable)
+        };
+        this.setShaderModuleProps({pathStyle: pathStyleProps});
+      }
     }
   }
 

package/src/path-style/shaders.glsl.ts

@@ -88,6 +88,219 @@ in float vDashOffset;
   }
 };
 
+export const scatterplotDashShaders = {
+  inject: {
+    'vs:#decl': `
+in vec2 instanceDashArrays;
+out vec2 vDashArray;
+`,
+
+    'vs:#main-end': `
+vDashArray = instanceDashArrays;
+`,
+
+    'fs:#decl': `
+layout(std140) uniform pathStyleUniforms {
+  bool dashGapPickable;
+} pathStyle;
+
+in vec2 vDashArray;
+
+#define PI 3.141592653589793
+`,
+
+    'fs:#main-start': `
+  bool inDashGap = false;
+  float dashUnitLength = vDashArray.x + vDashArray.y;
+  if (dashUnitLength > 0.0 && scatterplot.stroked > 0.5) {
+    float _distToCenter = length(unitPosition) * outerRadiusPixels;
+    float innerRadius = innerUnitRadius * outerRadiusPixels;
+    if (_distToCenter >= innerRadius) {
+      float strokeWidth = (1.0 - innerUnitRadius) * outerRadiusPixels;
+      float midStrokeRadius = (innerUnitRadius + 1.0) * 0.5 * outerRadiusPixels;
+      float angle = atan(unitPosition.y, unitPosition.x) + PI;
+      float circumference = 2.0 * PI * midStrokeRadius;
+      float posAlongStroke = (angle / (2.0 * PI)) * circumference / strokeWidth;
+      float unitOffset = mod(posAlongStroke, dashUnitLength);
+      if (unitOffset > vDashArray.x) {
+        if (scatterplot.filled > 0.5) {
+          inDashGap = true;
+        } else {
+          if (!(pathStyle.dashGapPickable && bool(picking.isActive))) {
+            discard;
+          }
+        }
+      }
+    }
+  }
+`,
+
+    'fs:#main-end': `
+  if (inDashGap) {
+    float alphaFactor = fragColor.a / max(vLineColor.a, 0.001);
+    fragColor = vec4(vFillColor.rgb, vFillColor.a * alphaFactor);
+    fragColor = picking_filterPickingColor(fragColor);
+    fragColor = picking_filterHighlightColor(fragColor);
+  }
+`
+  }
+};
+
+export const textBackgroundDashShaders = {
+  inject: {
+    'vs:#decl': `
+in vec2 instanceDashArrays;
+out vec2 vDashArray;
+`,
+
+    'vs:#main-end': `
+vDashArray = instanceDashArrays;
+`,
+
+    'fs:#decl': `
+layout(std140) uniform pathStyleUniforms {
+  bool dashGapPickable;
+} pathStyle;
+
+in vec2 vDashArray;
+
+#define PI 3.141592653589793
+
+// Calculate position along rounded rectangle perimeter in stroke-width units
+float getPerimeterPosition(vec2 fragUV, vec2 dims, vec4 radii, float lineWidth) {
+  float width = dims.x;
+  float height = dims.y;
+
+  float maxRadius = min(width, height) * 0.5;
+  float rBL = min(radii.w, maxRadius);
+  float rTL = min(radii.z, maxRadius);
+  float rTR = min(radii.x, maxRadius);
+  float rBR = min(radii.y, maxRadius);
+
+  vec2 p = fragUV * dims;
+
+  float leftLen = height - rBL - rTL;
+  float topLen = width - rTL - rTR;
+  float rightLen = height - rTR - rBR;
+  float bottomLen = width - rBR - rBL;
+
+  float arcBL = PI * 0.5 * rBL;
+  float arcTL = PI * 0.5 * rTL;
+  float arcTR = PI * 0.5 * rTR;
+  float arcBR = PI * 0.5 * rBR;
+
+  float pos = 0.0;
+
+  float distLeft = p.x;
+  float distRight = width - p.x;
+  float distBottom = p.y;
+  float distTop = height - p.y;
+  float minDist = min(min(distLeft, distRight), min(distBottom, distTop));
+
+  if (p.x < rBL && p.y < rBL) {
+    vec2 c = vec2(rBL, rBL);
+    vec2 d = p - c;
+    float angle = atan(-d.x, -d.y);
+    pos = angle / (PI * 0.5) * arcBL;
+  } else if (p.x < rTL && p.y > height - rTL) {
+    vec2 c = vec2(rTL, height - rTL);
+    vec2 d = p - c;
+    float angle = atan(d.y, -d.x);
+    pos = arcBL + leftLen + angle / (PI * 0.5) * arcTL;
+  } else if (p.x > width - rTR && p.y > height - rTR) {
+    vec2 c = vec2(width - rTR, height - rTR);
+    vec2 d = p - c;
+    float angle = atan(d.x, d.y);
+    pos = arcBL + leftLen + arcTL + topLen + angle / (PI * 0.5) * arcTR;
+  } else if (p.x > width - rBR && p.y < rBR) {
+    vec2 c = vec2(width - rBR, rBR);
+    vec2 d = p - c;
+    float angle = atan(-d.y, d.x);
+    pos = arcBL + leftLen + arcTL + topLen + arcTR + rightLen + angle / (PI * 0.5) * arcBR;
+  } else if (minDist == distLeft) {
+    pos = arcBL + clamp(p.y - rBL, 0.0, leftLen);
+  } else if (minDist == distTop) {
+    pos = arcBL + leftLen + arcTL + clamp(p.x - rTL, 0.0, topLen);
+  } else if (minDist == distRight) {
+    pos = arcBL + leftLen + arcTL + topLen + arcTR + clamp(height - rTR - p.y, 0.0, rightLen);
+  } else {
+    pos = arcBL + leftLen + arcTL + topLen + arcTR + rightLen + arcBR + clamp(width - rBR - p.x, 0.0, bottomLen);
+  }
+
+  return pos / lineWidth;
+}
+
+// Simple rectangular perimeter calculation (no rounded corners)
+float getRectPerimeterPosition(vec2 fragUV, vec2 dims, float lineWidth) {
+  float width = dims.x;
+  float height = dims.y;
+
+  float distLeft = fragUV.x * width;
+  float distRight = (1.0 - fragUV.x) * width;
+  float distBottom = fragUV.y * height;
+  float distTop = (1.0 - fragUV.y) * height;
+
+  float minDist = min(min(distLeft, distRight), min(distBottom, distTop));
+
+  float pos = 0.0;
+  if (minDist == distLeft) {
+    pos = fragUV.y * height;
+  } else if (minDist == distTop) {
+    pos = height + fragUV.x * width;
+  } else if (minDist == distRight) {
+    pos = height + width + (1.0 - fragUV.y) * height;
+  } else {
+    pos = 2.0 * height + width + (1.0 - fragUV.x) * width;
+  }
+
+  return pos / lineWidth;
+}
+`,
+
+    'fs:#main-start': `
+  bool inDashGap = false;
+  float dashUnitLength = vDashArray.x + vDashArray.y;
+  if (dashUnitLength > 0.0 && textBackground.stroked) {
+    float distToEdge;
+    bool hasRoundedCorners = textBackground.borderRadius != vec4(0.0);
+    if (hasRoundedCorners) {
+      distToEdge = round_rect(uv, dimensions, textBackground.borderRadius);
+    } else {
+      distToEdge = rect(uv, dimensions);
+    }
+
+    if (distToEdge <= vLineWidth && distToEdge >= 0.0) {
+      float posAlongStroke;
+      if (hasRoundedCorners) {
+        posAlongStroke = getPerimeterPosition(uv, dimensions, textBackground.borderRadius, vLineWidth);
+      } else {
+        posAlongStroke = getRectPerimeterPosition(uv, dimensions, vLineWidth);
+      }
+      float unitOffset = mod(posAlongStroke, dashUnitLength);
+      if (unitOffset > vDashArray.x) {
+        if (vFillColor.a > 0.0) {
+          inDashGap = true;
+        } else {
+          if (!(pathStyle.dashGapPickable && bool(picking.isActive))) {
+            discard;
+          }
+        }
+      }
+    }
+  }
+`,
+
+    'fs:#main-end': `
+  if (inDashGap) {
+    float alphaFactor = fragColor.a / max(vLineColor.a, 0.001);
+    fragColor = vec4(vFillColor.rgb, vFillColor.a * alphaFactor);
+    fragColor = picking_filterPickingColor(fragColor);
+    fragColor = picking_filterHighlightColor(fragColor);
+  }
+`
+  }
+};
+
 export const offsetShaders = {
   inject: {
     'vs:#decl': `