Path and Polygon Layers

/**
 * Layer for rendering paths with variable width and per-segment styling
 */
class PathLayer<DataT = any> extends Layer<PathLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<PathLayerProps<any>>;
}

interface PathLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Units for path width */
  widthUnits?: Unit;
  /** Scaling multiplier for width */
  widthScale?: number;
  /** Minimum width in pixels */
  widthMinPixels?: number;
  /** Maximum width in pixels */
  widthMaxPixels?: number;
  
  /** Use rounded line joints */
  jointRounded?: boolean;
  /** Use rounded line caps */
  capRounded?: boolean;
  /** Miter limit for sharp joints */
  miterLimit?: number;
  /** Render in screen space vs world space */
  billboard?: boolean;
  
  /** Experimental path type optimization */
  _pathType?: null | 'loop' | 'open';
  
  /** Accessor for path geometry - array of positions */
  getPath?: AccessorFunction<DataT, PathGeometry>;
  /** Accessor for path color - supports per-segment colors */
  getColor?: Accessor<DataT, Color | Color[]>;
  /** Accessor for path width - supports per-segment widths */
  getWidth?: Accessor<DataT, number | number[]>;
}

type PathGeometry = Position[] | {positions: Position[], closed?: boolean};

import { PathLayer } from "@deck.gl/layers";

const layer = new PathLayer({
  id: 'paths',
  data: [
    {
      path: [[0, 0], [1, 1], [2, 0]], 
      color: [255, 0, 0], 
      width: 10
    }
  ],
  getPath: d => d.path,
  getColor: d => d.color,
  getWidth: d => d.width,
  widthUnits: 'pixels',
  jointRounded: true,
  capRounded: true
});

/**
 * Layer for rendering filled and stroked polygons with optional 3D extrusion
 */
class PolygonLayer<DataT = any> extends CompositeLayer<PolygonLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<PolygonLayerProps<any>>;
}

interface PolygonLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Draw filled polygon surfaces */
  filled?: boolean;
  /** Draw polygon outlines */
  stroked?: boolean;
  /** Extrude polygons to 3D */
  extruded?: boolean;
  /** Render as wireframe */
  wireframe?: boolean;
  
  /** Height scaling multiplier for extrusion */
  elevationScale?: number;
  /** Use flat shading */
  flatShading?: boolean;
  /** Material properties for 3D rendering */
  material?: Material;
  
  /** Units for line width */
  lineWidthUnits?: Unit;
  /** Scaling multiplier for stroke width */
  lineWidthScale?: number;
  /** Minimum stroke width in pixels */
  lineWidthMinPixels?: number;
  /** Maximum stroke width in pixels */
  lineWidthMaxPixels?: number;
  
  /** Accessor for polygon geometry */
  getPolygon?: AccessorFunction<DataT, PolygonGeometry>;
  /** Accessor for fill color [r,g,b,a] (0-255) */
  getFillColor?: Accessor<DataT, Color>;
  /** Accessor for stroke color [r,g,b,a] (0-255) */
  getLineColor?: Accessor<DataT, Color>;
  /** Accessor for stroke width */
  getLineWidth?: Accessor<DataT, number>;
  /** Accessor for extrusion height */
  getElevation?: Accessor<DataT, number>;
}

type PolygonGeometry = Position[] | Position[][] | {positions: Position[], holes?: Position[][]};

import { PolygonLayer } from "@deck.gl/layers";

const layer = new PolygonLayer({
  id: 'polygons',
  data: [
    {
      polygon: [[0, 0], [1, 0], [1, 1], [0, 1]],
      fillColor: [255, 0, 0, 128],
      elevation: 100
    }
  ],
  getPolygon: d => d.polygon,
  getFillColor: d => d.fillColor,
  getElevation: d => d.elevation,
  filled: true,
  extruded: true
});

/**
 * High-performance layer for rendering solid polygons with optional extrusion
 */
class SolidPolygonLayer<DataT = any> extends Layer<SolidPolygonLayerProps<DataT>> {
  static layerName: string;
  static defaultProps: DefaultProps<SolidPolygonLayerProps<any>>;
}

interface SolidPolygonLayerProps<DataT> extends LayerProps {
  data: LayerDataSource<DataT>;
  
  /** Draw filled polygon surfaces */
  filled?: boolean;
  /** Extrude polygons to 3D */
  extruded?: boolean;
  /** Render as wireframe */
  wireframe?: boolean;
  
  /** Height scaling multiplier for extrusion */
  elevationScale?: number;
  /** Use flat shading */
  flatShading?: boolean;
  
  /** Enable full 3D tesselation (experimental) */
  _full3d?: boolean;
  /** Normalize polygon winding (experimental) */
  _normalize?: boolean;
  /** Use binary data format (experimental) */
  _windingOrder?: 'CW' | 'CCW';
  
  /** Accessor for polygon geometry */
  getPolygon?: AccessorFunction<DataT, PolygonGeometry>;
  /** Accessor for fill color [r,g,b,a] (0-255) */
  getFillColor?: Accessor<DataT, Color>;
  /** Accessor for extrusion height */
  getElevation?: Accessor<DataT, number>;
}

// Simple polygon (outer ring only)
type SimplePolygon = Position[];

// Complex polygon with holes
type ComplexPolygon = Position[][];

// Polygon with explicit structure
interface PolygonObject {
  positions: Position[];
  holes?: Position[][];
}

// Union type for all polygon formats
type PolygonGeometry = SimplePolygon | ComplexPolygon | PolygonObject;

// Simple polygon (triangle)
const triangle: Position[] = [
  [0, 0], [1, 0], [0.5, 1], [0, 0]
];

// Complex polygon with hole (donut shape)
const donut: Position[][] = [
  // Outer ring
  [[0, 0], [2, 0], [2, 2], [0, 2], [0, 0]],
  // Inner hole
  [[0.5, 0.5], [1.5, 0.5], [1.5, 1.5], [0.5, 1.5], [0.5, 0.5]]
];

// Polygon object format
const polygonObj = {
  positions: [[0, 0], [2, 0], [2, 2], [0, 2], [0, 0]],
  holes: [
    [[0.5, 0.5], [1.5, 0.5], [1.5, 1.5], [0.5, 1.5], [0.5, 0.5]]
  ]
};

interface Material {
  ambient?: number;
  diffuse?: number;
  shininess?: number;
  specularColor?: [number, number, number];
}