Views and Cameras

/**
 * Base class for all view types
 * Defines camera behavior and viewport creation
 */
abstract class View {
  constructor(props?: ViewProps);
  /** Create a viewport instance for this view */
  makeViewport(props: ViewportProps): Viewport;
  /** Get the view state identifier */
  getViewStateId(): string;
  /** Check if view state matches this view */
  matches(viewState: ViewState): boolean;
}

interface ViewProps {
  /** Unique identifier for this view */
  id?: string;
  /** Controller type or instance */
  controller?: boolean | Controller;
  /** X position in canvas */
  x?: number | string;
  /** Y position in canvas */
  y?: number | string;
  /** Width of view */
  width?: number | string;
  /** Height of view */
  height?: number | string;
  /** Clear background */
  clear?: boolean | {color?: Color; depth?: boolean; stencil?: boolean};
}

/**
 * 2D map view with Web Mercator projection
 * Standard view for geographic data visualization
 */
class MapView extends View {
  constructor(props?: MapViewProps);
}

interface MapViewProps extends ViewProps {
  /** Enable repeat rendering at world boundaries */
  repeat?: boolean;
  /** Maximum zoom level */
  maxZoom?: number;
  /** Minimum zoom level */
  minZoom?: number;
  /** Maximum pitch angle in degrees */
  maxPitch?: number;
  /** Minimum pitch angle in degrees */
  minPitch?: number;
  /** Far clipping plane distance */
  farZMultiplier?: number;
  /** Near clipping plane distance */
  nearZMultiplier?: number;
}

interface MapViewState {
  /** Center longitude */
  longitude: number;
  /** Center latitude */
  latitude: number;
  /** Zoom level */
  zoom: number;
  /** Bearing/rotation in degrees */
  bearing?: number;
  /** Pitch/tilt in degrees */
  pitch?: number;
  /** Transition settings */
  transitionDuration?: number;
  transitionInterpolator?: TransitionInterpolator;
  transitionInterruption?: number;
}

import { Deck, MapView } from "deck.gl";

const deck = new Deck({
  views: new MapView({
    id: 'map',
    controller: true
  }),
  initialViewState: {
    longitude: -122.4,
    latitude: 37.8,
    zoom: 10,
    bearing: 0,
    pitch: 30
  }
});

/**
 * 3D orbit view for object examination
 * Camera orbits around a target point
 */
class OrbitView extends View {
  constructor(props?: OrbitViewProps);
}

interface OrbitViewProps extends ViewProps {
  /** Field of view in degrees */
  fov?: number;
  /** Near clipping plane */
  near?: number;
  /** Far clipping plane */
  far?: number;
  /** Enable orthographic projection */
  orbitAxis?: 'Y' | 'Z';
}

interface OrbitViewState {
  /** Target point X coordinate */
  target: [number, number, number];
  /** Distance from target */
  distance: number;
  /** Rotation around X axis in degrees */
  rotationX: number;
  /** Rotation around orbit axis in degrees */
  rotationOrbit: number;
  /** Camera zoom level */
  zoom: number;
  /** Minimum distance */
  minDistance?: number;
  /** Maximum distance */
  maxDistance?: number;
  /** Minimum rotation X */
  minRotationX?: number;
  /** Maximum rotation X */
  maxRotationX?: number;
}

/**
 * First-person view for immersive navigation
 * Camera moves through 3D space like a person walking
 */
class FirstPersonView extends View {
  constructor(props?: FirstPersonViewProps);
}

interface FirstPersonViewProps extends ViewProps {
  /** Field of view in degrees */
  fov?: number;
  /** Near clipping plane */
  near?: number;
  /** Far clipping plane */
  far?: number;
}

interface FirstPersonViewState {
  /** Camera position */
  position: [number, number, number];
  /** Bearing/yaw in degrees */
  bearing: number;
  /** Pitch in degrees */
  pitch: number;
  /** Maximum pitch angle */
  maxPitch?: number;
  /** Minimum pitch angle */
  minPitch?: number;
}

/**
 * Orthographic view without perspective distortion
 * Ideal for technical drawings and 2D visualizations
 */
class OrthographicView extends View {
  constructor(props?: OrthographicViewProps);
}

interface OrthographicViewProps extends ViewProps {
  /** Left boundary */
  left?: number;
  /** Right boundary */
  right?: number;
  /** Top boundary */
  top?: number;
  /** Bottom boundary */
  bottom?: number;
  /** Near clipping plane */
  near?: number;
  /** Far clipping plane */
  far?: number;
}

interface OrthographicViewState {
  /** Target center X */
  target: [number, number, number];
  /** Zoom level */
  zoom: number;
  /** Minimum zoom */
  minZoom?: number;
  /** Maximum zoom */
  maxZoom?: number;
}

interface MultiViewConfiguration {
  /** Array of view instances */
  views: View[];
  /** View state for each view */
  viewState: {[viewId: string]: ViewState};
  /** Global controller settings */
  controller?: boolean;
}

import { Deck, MapView, OrbitView } from "deck.gl";

const deck = new Deck({
  views: [
    new MapView({
      id: 'map',
      x: '0%',
      y: '0%', 
      width: '50%',
      height: '100%',
      controller: true
    }),
    new OrbitView({
      id: 'orbit',
      x: '50%',
      y: '0%',
      width: '50%', 
      height: '100%',
      controller: true
    })
  ],
  viewState: {
    map: {
      longitude: -122.4,
      latitude: 37.8,
      zoom: 10
    },
    orbit: {
      target: [0, 0, 0],
      distance: 100,
      rotationX: 0,
      rotationOrbit: 0,
      zoom: 1
    }
  }
});

interface ViewStateChangeParameters {
  /** New view state */
  viewState: ViewState;
  /** View identifier for multi-view setups */
  viewId?: string;
  /** Current interaction state */
  interactionState?: InteractionState;
  /** Previous view state */
  oldViewState?: ViewState;
}

interface InteractionState {
  /** Is currently panning */
  isPanning?: boolean;
  /** Is currently rotating */
  isRotating?: boolean;
  /** Is currently zooming */
  isZooming?: boolean;
}

/** Transition interpolators for smooth view state changes */
class TransitionInterpolator {
  constructor(props?: any);
  /** Interpolate between view states */
  interpolateProps(startProps: any, endProps: any, t: number): any;
  /** Calculate transition duration */
  getDuration(startProps: any, endProps: any): number;
}

class LinearInterpolator extends TransitionInterpolator {
  constructor(transitionProps?: string[]);
}

class FlyToInterpolator extends TransitionInterpolator {
  constructor(props?: FlyToInterpolatorProps);
}

interface FlyToInterpolatorProps {
  /** Curve parameter */
  curve?: number;
  /** Speed parameter */
  speed?: number;
  /** Screen speed parameter */
  screenSpeed?: number;
  /** Maximum duration in milliseconds */
  maxDuration?: number;
}

interface ProjectOptions {
  /** Use top-left origin instead of bottom-left */
  topLeft?: boolean;
}

interface UnprojectOptions {
  /** Use top-left origin instead of bottom-left */
  topLeft?: boolean;
  /** Target height for unprojection */
  targetZ?: number;
}

/** Project world coordinates to screen coordinates */
function project(lngLat: Position, options?: ProjectOptions): [number, number];

/** Unproject screen coordinates to world coordinates */
function unproject(xy: [number, number], options?: UnprojectOptions): Position;

/** Get distance scales at current view */
function getDistanceScales(): {
  unitsPerMeter: [number, number, number];
  metersPerUnit: [number, number, number];
  unitsPerDegree: [number, number, number];
  degreesPerUnit: [number, number, number];
};

import { View } from "deck.gl";

class CustomView extends View {
  constructor(props) {
    super(props);
  }
  
  makeViewport(props) {
    // Return custom viewport instance
    return new CustomViewport(props);
  }
}

const onViewStateChange = ({viewId, viewState}) => {
  if (viewId === 'map') {
    // Update other views based on map changes
    deck.setProps({
      viewState: {
        map: viewState,
        orbit: {
          ...orbitViewState,
          target: [viewState.longitude, viewState.latitude, 0]
        }
      }
    });
  }
};