More

frontend/src/lib/MarchingAntsExtension.ts

@@ -0,0 +1,53 @@
+import { LayerExtension } from '@deck.gl/core';
+
+/** Animates a marching-ants border on PathLayer sublayers (alternating white/green dashes). */
+export class MarchingAntsExtension extends LayerExtension {
+  static extensionName = 'MarchingAntsExtension';
+  static defaultProps = {
+    marchTime: { type: 'number', value: 0 },
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  isEnabled(layer: any): boolean {
+    return 'pathTesselator' in layer.state;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getShaders(extension: any): any {
+    if (!extension.isEnabled(this)) return null;
+    return {
+      modules: [
+        {
+          name: 'marchingAnts',
+          inject: {
+            'fs:#decl': `\
+uniform marchingAntsUniforms {
+  float marchTime;
+} marchingAnts;`,
+            'fs:DECKGL_FILTER_COLOR': `\
+float marchSegLen = 4.0;
+float marchPos = mod(vPathPosition.y - marchingAnts.marchTime, marchSegLen * 2.0);
+if (marchPos < marchSegLen) {
+  color = vec4(1.0, 1.0, 1.0, color.a);
+} else {
+  color = vec4(0.114, 0.894, 0.765, color.a);
+}`,
+          },
+          uniformTypes: {
+            marchTime: 'f32',
+          },
+        },
+      ],
+    };
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  updateState(_params: any, extension: any): void {
+    if (!extension.isEnabled(this)) return;
+    // @ts-expect-error setShaderModuleProps exists on Layer
+    this.setShaderModuleProps({
+      // @ts-expect-error marchTime is a custom prop from this extension
+      marchingAnts: { marchTime: this.props.marchTime || 0 },
+    });
+  }
+}