feat(extensions): add StrokeStyleExtension for dashed strokes on SDF layers

[chrisgervang]

Summary

Implements feature request #9864 - adds StrokeStyleExtension to enable dashed strokes on SDF-based layers.

Supported Layers

• ScatterplotLayer: Dashed circle strokes using angle-based calculation around the circumference
• TextBackgroundLayer: Dashed rectangle strokes using perimeter-based calculation (including rounded corners)

New Props (via extension)

• getDashArray: [dashSize, gapSize] relative to stroke width
• dashGapPickable: Whether gaps are pickable (default: false)

Usage

import {ScatterplotLayer} from '@deck.gl/layers';
import {StrokeStyleExtension} from '@deck.gl/extensions';

new ScatterplotLayer({
  stroked: true,
  getDashArray: [3, 2],
  extensions: [new StrokeStyleExtension({dash: true})]
});

https://claude.ai/code/session_01KsGs1v7AGFNXyvMUhjaiFm

---

Note

Medium Risk
Opt-in shader injection adds new dashed-stroke rendering/picking paths for ScatterplotLayer and TextBackgroundLayer, which could introduce subtle visual or picking regressions for layers using the extension. Changes are otherwise additive with new docs/tests/examples to validate output.

Overview
Adds a new StrokeStyleExtension that enables dashed strokes for SDF-based stroked layers, exposing getDashArray and dashGapPickable and injecting layer-specific shader code for ScatterplotLayer (angle-based dashes) and TextBackgroundLayer (perimeter/rounded-corner dashes).

Exports the extension from @deck.gl/extensions, documents it in the extensions API reference and TOC, and adds an example app plus new unit and golden-image render tests covering dashed filled and stroked-only scatterplots.

^{Written by Cursor Bugbot for commit ffa78a6. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

[cursor]

TextBackgroundLayer dash gaps discard fill color

High Severity

The textBackgroundDashShaders unconditionally discards fragments in dash gaps, but TextBackgroundLayer always has a fill. This creates transparent holes at the rectangle's edge where the fill color should show through. The scatterplot shader correctly handles this by setting a strokeStyle_inDashGap flag and overriding the color with vFillColor in an fs:#main-end injection, but the TextBackgroundLayer shader has no such fs:#main-end injection — it just discards.

Additional Locations (1)

• modules/extensions/src/stroke-style/shaders.glsl.ts#L57-L68

 

[cursor]

Layer detection uses minifiable constructor.name instead of layerName

Medium Severity

getLayerType reads layer.constructor.name for detection, but JavaScript class names get mangled in minified production builds. deck.gl layers provide a static layerName property (e.g. 'ScatterplotLayer') specifically to survive minification — the framework's own toString() method uses (this.constructor as typeof Layer).layerName for this reason. The prop-based fallback ('radiusScale' in layer.props) mitigates this but is less reliable and could match unintended layers.