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

package/dist/dist.dev.js

@@ -2736,7 +2736,7 @@ vec4 project_position_to_clipspace(
   var Fp64Extension = class extends import_core6.LayerExtension {
     getShaders() {
       const { coordinateSystem } = this.props;
-      if (coordinateSystem !== import_core6.COORDINATE_SYSTEM.LNGLAT && coordinateSystem !== import_core6.COORDINATE_SYSTEM.DEFAULT) {
+      if (coordinateSystem !== "lnglat" && coordinateSystem !== "default") {
         throw new Error("fp64: coordinateSystem must be LNGLAT");
       }
       return {
@@ -2825,6 +2825,209 @@ in float vDashOffset;
       }
     }
   }
+`
+    }
+  };
+  var 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);
+  }
+`
+    }
+  };
+  var 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);
+  }
 `
     }
   };
@@ -2869,13 +3072,41 @@ in float instanceOffsets;
     } = {}) {
       super({ dash: dash || highPrecisionDash, offset, highPrecisionDash });
     }
+    getLayerType(layer) {
+      if ("pathTesselator" in layer.state) {
+        return "path";
+      }
+      const layerName = layer.constructor.layerName;
+      if (layerName === "ScatterplotLayer") {
+        return "scatterplot";
+      }
+      if (layerName === "TextBackgroundLayer") {
+        return "textBackground";
+      }
+      return null;
+    }
     isEnabled(layer) {
-      return "pathTesselator" in layer.state;
+      return this.getLayerType(layer) !== null;
     }
     getShaders(extension) {
-      if (!extension.isEnabled(this)) {
+      const layerType = extension.getLayerType(this);
+      if (!layerType) {
         return null;
       }
+      if (layerType === "scatterplot" || layerType === "textBackground") {
+        if (!extension.opts.dash) {
+          return null;
+        }
+        const inject7 = layerType === "scatterplot" ? scatterplotDashShaders.inject : textBackgroundDashShaders.inject;
+        const pathStyle2 = {
+          name: "pathStyle",
+          inject: inject7,
+          uniformTypes: {
+            dashGapPickable: "i32"
+          }
+        };
+        return { modules: [pathStyle2] };
+      }
       let result = {};
       const defines = {};
       if (extension.opts.dash) {
@@ -2903,13 +3134,14 @@ in float instanceOffsets;
     }
     initializeState(context, extension) {
       const attributeManager = this.getAttributeManager();
-      if (!attributeManager || !extension.isEnabled(this)) {
+      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,
               accessor: "getPath",
@@ -2918,7 +3150,7 @@ in float instanceOffsets;
           } : {}
         });
       }
-      if (extension.opts.offset) {
+      if (layerType === "path" && extension.opts.offset) {
         attributeManager.addInstanced({
           instanceOffsets: { size: 1, accessor: "getOffset" }
         });
@@ -2929,11 +3161,19 @@ in float instanceOffsets;
         return;
       }
       if (extension.opts.dash) {
-        const 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 = {
+            dashGapPickable: Boolean(this.props.dashGapPickable)
+          };
+          this.setShaderModuleProps({ pathStyle: pathStyleProps });
+        } else {
+          const pathStyleProps = {
+            dashAlignMode: this.props.dashJustified ? 1 : 0,
+            dashGapPickable: Boolean(this.props.dashGapPickable)
+          };
+          this.setShaderModuleProps({ pathStyle: pathStyleProps });
+        }
       }
     }
     getDashOffsets(path) {

package/dist/fp64/fp64-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fp64-extension.d.ts","sourceRoot":"","sources":["../../src/fp64/fp64-extension.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAoB,MAAM,eAAe,CAAC;AAGhE,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEzC,yEAAyE;AACzE,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,cAAc;IACvD,MAAM,CAAC,aAAa,SAAmB;IAEvC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,GAAG;IAc5B,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI;CAItD"}
+{"version":3,"file":"fp64-extension.d.ts","sourceRoot":"","sources":["../../src/fp64/fp64-extension.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAG7C,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAEzC,yEAAyE;AACzE,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,cAAc;IACvD,MAAM,CAAC,aAAa,SAAmB;IAEvC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,GAAG;IAW5B,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI;CAItD"}

package/dist/fp64/fp64-extension.js

@@ -1,14 +1,13 @@
 // deck.gl
 // 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.js";
 /** @deprecated Adds the legacy 64-bit precision to geospatial layers. */
 class Fp64Extension extends LayerExtension {
     getShaders() {
         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');
         }
         return {

package/dist/fp64/fp64-extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"fp64-extension.js","sourceRoot":"","sources":["../../src/fp64/fp64-extension.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,OAAO,EAAC,cAAc,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAChE,OAAO,SAAS,uBAAoB;AAIpC,yEAAyE;AACzE,MAAqB,aAAc,SAAQ,cAAc;IAGvD,UAAU;QACR,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,IACE,gBAAgB,KAAK,iBAAiB,CAAC,MAAM;YAC7C,gBAAgB,KAAK,iBAAiB,CAAC,OAAO,EAC9C,CAAC;YACD,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAC3D,CAAC;QAED,OAAO;YACL,OAAO,EAAE,CAAC,SAAS,CAAC;SACrB,CAAC;IACJ,CAAC;IAED,IAAI,CAAc,MAAW,EAAE,SAAe;QAC5C,MAAM,EAAC,QAAQ,EAAC,GAAG,MAAM,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,oBAAoB,CAAC,EAAC,SAAS,EAAE,EAAC,QAAQ,EAAC,EAAC,CAAC,CAAC;IACrD,CAAC;;AAnBM,2BAAa,GAAG,eAAe,CAAC;eADpB,aAAa"}
+{"version":3,"file":"fp64-extension.js","sourceRoot":"","sources":["../../src/fp64/fp64-extension.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,SAAS,uBAAoB;AAIpC,yEAAyE;AACzE,MAAqB,aAAc,SAAQ,cAAc;IAGvD,UAAU;QACR,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,gBAAgB,KAAK,QAAQ,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;YACpE,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;QAC3D,CAAC;QAED,OAAO;YACL,OAAO,EAAE,CAAC,SAAS,CAAC;SACrB,CAAC;IACJ,CAAC;IAED,IAAI,CAAc,MAAW,EAAE,SAAe;QAC5C,MAAM,EAAC,QAAQ,EAAC,GAAG,MAAM,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,oBAAoB,CAAC,EAAC,SAAS,EAAE,EAAC,QAAQ,EAAC,EAAC,CAAC,CAAC;IACrD,CAAC;;AAhBM,2BAAa,GAAG,eAAe,CAAC;eADpB,aAAa"}

package/dist/index.cjs

@@ -1012,7 +1012,7 @@ function calculateUniforms({ viewProjectionMatrix, scale }) {
 var Fp64Extension = class extends import_core5.LayerExtension {
   getShaders() {
     const { coordinateSystem } = this.props;
-    if (coordinateSystem !== import_core5.COORDINATE_SYSTEM.LNGLAT && coordinateSystem !== import_core5.COORDINATE_SYSTEM.DEFAULT) {
+    if (coordinateSystem !== "lnglat" && coordinateSystem !== "default") {
       throw new Error("fp64: coordinateSystem must be LNGLAT");
     }
     return {
@@ -1100,6 +1100,188 @@ discard;
 `
   }
 };
+var 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);
+}
+`
+  }
+};
+var 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
+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;
+}
+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);
+}
+`
+  }
+};
 var offsetShaders = {
   inject: {
     "vs:#decl": `
@@ -1137,13 +1319,41 @@ var PathStyleExtension = class extends import_core6.LayerExtension {
   constructor({ dash = false, offset = false, highPrecisionDash = false } = {}) {
     super({ dash: dash || highPrecisionDash, offset, highPrecisionDash });
   }
+  getLayerType(layer) {
+    if ("pathTesselator" in layer.state) {
+      return "path";
+    }
+    const layerName = layer.constructor.layerName;
+    if (layerName === "ScatterplotLayer") {
+      return "scatterplot";
+    }
+    if (layerName === "TextBackgroundLayer") {
+      return "textBackground";
+    }
+    return null;
+  }
   isEnabled(layer) {
-    return "pathTesselator" in layer.state;
+    return this.getLayerType(layer) !== null;
   }
   getShaders(extension) {
-    if (!extension.isEnabled(this)) {
+    const layerType = extension.getLayerType(this);
+    if (!layerType) {
       return null;
     }
+    if (layerType === "scatterplot" || layerType === "textBackground") {
+      if (!extension.opts.dash) {
+        return null;
+      }
+      const inject7 = layerType === "scatterplot" ? scatterplotDashShaders.inject : textBackgroundDashShaders.inject;
+      const pathStyle2 = {
+        name: "pathStyle",
+        inject: inject7,
+        uniformTypes: {
+          dashGapPickable: "i32"
+        }
+      };
+      return { modules: [pathStyle2] };
+    }
     let result = {};
     const defines = {};
     if (extension.opts.dash) {
@@ -1171,13 +1381,14 @@ var PathStyleExtension = class extends import_core6.LayerExtension {
   }
   initializeState(context, extension) {
     const attributeManager = this.getAttributeManager();
-    if (!attributeManager || !extension.isEnabled(this)) {
+    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,
             accessor: "getPath",
@@ -1186,7 +1397,7 @@ var PathStyleExtension = class extends import_core6.LayerExtension {
         } : {}
       });
     }
-    if (extension.opts.offset) {
+    if (layerType === "path" && extension.opts.offset) {
       attributeManager.addInstanced({
         instanceOffsets: { size: 1, accessor: "getOffset" }
       });
@@ -1197,11 +1408,19 @@ var PathStyleExtension = class extends import_core6.LayerExtension {
       return;
     }
     if (extension.opts.dash) {
-      const 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 = {
+          dashGapPickable: Boolean(this.props.dashGapPickable)
+        };
+        this.setShaderModuleProps({ pathStyle: pathStyleProps });
+      } else {
+        const pathStyleProps = {
+          dashAlignMode: this.props.dashJustified ? 1 : 0,
+          dashGapPickable: Boolean(this.props.dashGapPickable)
+        };
+        this.setShaderModuleProps({ pathStyle: pathStyleProps });
+      }
     }
   }
   getDashOffsets(path) {