drone_view 3.0.18 → 3.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drone_view",
-  "version": "3.0.18",
+  "version": "3.0.20",
   "main": "dist/droneView.js",
   "license": "MIT",
   "scripts": {

package/src/app.interface.ts

@@ -0,0 +1,684 @@
+/* eslint-disable import/no-cycle */
+import type {
+  Cesium3DTileset,
+  Cartesian3,
+  DataSource,
+  Entity,
+  EntityCollection,
+  ImageryLayer,
+} from "cesium";
+
+import type CesiumView from "./droneView";
+
+export type PinType = "Image" | "Text" | "Icon" | "Blank";
+
+export type Anchor =
+  | "center"
+  | "top"
+  | "bottom"
+  | "left"
+  | "right"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
+
+export type EventType =
+  | "mousedown"
+  | "mouseup"
+  | "mouseMove"
+  | "mouseOver"
+  | "mouseOut"
+  | "click"
+  | "rightClick";
+
+export type ViewerObject =
+  | Cesium3DTileset
+  | Entity
+  | EntityCollection
+  | DataSource
+  | ImageryLayer;
+
+export interface Point {
+  /**
+   * Latitude
+   */
+  lat: number | string;
+  /**
+   * Longitudev
+   */
+  long: number | string;
+  /**
+   * Height in 3D view
+   */
+  height?: number | string;
+}
+
+export type BaseMapType = "mapbox" | "esri";
+
+/**
+ * Generic Options for any Layer
+ */
+export type Options = {
+  /** Should the bounds of the map be set to the bounds of the data in the layer */
+  setBounds?: boolean;
+  /** When setBounds is true, should the bounds be set immediately.
+   * If false the map will slowly pan & zoom to the bounds */
+  setBoundsInstant?: boolean;
+  /** Callback function that should be called when a feature is clicked on */
+  onClick?: Function;
+  onPinchEnd?: Function;
+  onHover?: Function;
+  clearHover?: Function;
+  isNoListener?: boolean
+};
+
+/**
+ * Type definition for Marker Icon
+ */
+export type MarkerIcon = {
+  /** name of the icon */
+  name: string;
+  /** url to icon image. image must be png. If allowSVG is true then an
+   *  svg version must exist with the same name and path.
+   * e.g: icons should exist for /icons/marker-icon.png /icons/marker-icon.svg
+   * */
+  src: string;
+  options: {
+    /** Does this icon support svgs. Set to false if only a png version is available */
+    allowSVG?: boolean;
+    /** The ration of pixels in the image to physical pixels on the screen. (see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addimage} ) */
+    pixelRatio?: number | string;
+    deficiency: boolean;
+  };
+};
+
+/**
+ * Type definition for Marker Layer Options, extends {@link Options}
+ * @see Options
+ * @member {Options}
+ */
+export type MarkerOptions = Options & {
+  /** Array of {@link MarkerIcon} to use for the markers */
+  icons: MarkerIcon[];
+  /** Are SVG icons supported by this data layer */
+  allowSVGs?: boolean;
+  /** Rotation of the marker. Default 0 */
+  rotate?: number;
+};
+
+/**
+ * Marker Data
+ */
+export type MarkerData = {
+  point: Array<number>;
+  properties: {
+    [key: string]: any;
+    /** ID of the feature */
+    id?: string | number;
+    /** The icon to use for the marker. Name should match to
+     * a {@link MarkerIcon} specified in the {@link MarkerOptions} */
+    label?: string;
+    icon: string;
+  };
+};
+
+export type NoteIcon = {
+  /** name of the icon */
+  name: string;
+  /** url to icon image. image must be png. If allowSVG is true then an
+   *  svg version must exist with the same name and path.
+   * e.g: icons should exist for /icons/marker-icon.png /icons/marker-icon.svg
+   * */
+  src: string;
+  options: {
+    /** Does this icon support svgs. Set to false if only a png version is available */
+    allowSVG?: boolean;
+    /** The ration of pixels in the image to physical pixels on the screen. (see {@link https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addimage} ) */
+    pixelRatio?: number | string;
+    deficiency: boolean;
+  };
+};
+
+
+/**
+ * Type definition for Note Layer Options, extends {@link Options}
+ * @see Options
+ * @member {Options}
+ */
+export type NoteOptions = Options & {
+  /** Array of {@link NoteIcon} to use for the Note */
+  icons: NoteIcon[];
+  /** Are SVG icons supported by this data layer */
+  allowSVGs?: boolean;
+  /** Rotation of the marker. Default 0 */
+  rotate?: number;
+};
+
+/**
+ * Marker Data
+ */
+export type NoteData = {
+  point: Array<number>;
+  properties: {
+    [key: string]: any;
+    /** ID of the feature */
+    id?: string | number;
+    /** The icon to use for the marker. Name should match to
+     * a {@link NoteIcon} specified in the {@link NoteOptions} */
+    label?: string;
+    icon: string;
+  };
+};
+
+
+
+
+/**
+ * Annotation Data
+ */
+export type AnnotationData = {
+  point: Array<number>;
+  properties: {
+    [key: string]: any;
+    /**
+     * Icon Detail
+     */
+    name: string;
+    /** ID of the feature */
+    id?: string | number;
+  };
+};
+
+/**
+ * Type definition for Line Options, extends {@link Options}
+ * @see Options
+ * @member {Options}
+ */
+export type LineOptions = Options & {
+  /** should a directional arrow be rendered on the line */
+  arrowLine?: boolean;
+};
+
+export type EditPointOption = Options & {
+  /** return new position when drag end */
+  onDragEnd: Function | undefined
+  zoom: boolean;
+}
+
+/**
+ * LineData
+ */
+export type LineData = {
+  /** Points */
+  points: Array<Array<number>>;
+  /** Properties */
+  properties: {
+    [key: string]: any;
+    /** ID of the feature */
+    id?: string | number;
+    /** Color of line (hex or RGB) */
+    color: string;
+  };
+};
+
+/**
+ * Model Data
+ */
+export type ModelData = {
+  /** url of Model data main json file */
+  url: string;
+  /** Color css hex color code */
+  color: string;
+  /** Shadow */
+  shadow: boolean;
+  /** Center */
+  center: Point;
+  /** Rotation X in degree*/
+  rotationX: number;
+  /** Rotation Y in degree*/
+  rotationY: number;
+  /** Rotation Z in degree*/
+  rotationZ: number;
+};
+
+/**
+ * Polygon Data
+ */
+export type PolygonData = {
+  points: Array<Array<number>>;
+  /** General properties of the feature, usually this is for data used code interacting with the data layers */
+  properties: {
+    [key: string]: any;
+    /** ID of the feature */
+    id?: string | number;
+    /** Color of polygon (hex or RGB) */
+    color: string;
+  };
+};
+
+/**
+ * Type definition for Polygon Layer Options, extends {@link Options}
+ * @see Options
+ * @member {Options}
+ */
+export type PolygonOptions = Options & {
+  /** Opacity 0-1 */
+  opacity?: number;
+  /** Minimum zoom level to display the layer polygons */
+  minZoom?: number;
+  /** Maximum zoom level to display the layer polygons */
+  maxZoom?: number;
+  /** Minimum zoom level to display the layer labels */
+  minZoomLabel?: number;
+  /** Maximum zoom level to display the layer labels */
+  maxZoomLabel?: number;
+};
+
+/**
+ * RasterData
+ */
+export type OrthoData = {
+  /* For example: tiles.php?z={z}&x={x}&y={y} */
+  url: string;
+  /** dimensions of tiles, defaults to 256px */
+  tileSize?: number;
+  /** Minimum zoom level to display the layer */
+  minZoom?: number;
+  /** Maximum zoom level to display the layer */
+  maxZoom?: number;
+  /** Credit for tile */
+  credit?: string;
+};
+
+/** Generic Type for Layer Options representing all types of options */
+export type LayerOptions = Options | MarkerOptions | LineOptions | NoteOptions;
+
+/** Generic Type for Layer Data representing all types of data */
+export type LayerData = MarkerData | LineData | ModelData | AnnotationData | NoteData;
+
+/**
+ * Interface for Drawing shape
+ */
+interface EntityConfiguration {
+  id?: string;
+  /**
+   * string css hex color code
+   */
+  fillColor?: string;
+  /**
+   * string css hex color code
+   */
+  lineColor?: string;
+  /**
+   * string css hex color code
+   */
+  strokeColor?: string;
+  opacity?: number;
+  lineWidth?: number;
+  clamp?: boolean;
+  distance?: number;
+  measurement: boolean;
+}
+
+/** Interface for pin configuration  */
+export interface PinConfig {
+  /** Unique Id for pin other wise it will automatically generate one  */
+  id?: string;
+  /** Id of layer */
+  layerId?: string;
+  /** Type of the Pin */
+  type: PinType;
+  /** url of image supports png and svg */
+  imageUrl?: string;
+  /** Words to be shown on pin when PinType is Text */
+  text?: string;
+  /** Icon name when PinType is Icon */
+  iconName?: string;
+  /** Size of pin */
+  size?: number;
+  /** string css hex color code */
+  color?: string;
+  /** Opacity number between 0-1 */
+  opacity?: number;
+  /** Scale size when zoom in or out Boolean */
+  scaleByDistance?: boolean;
+  /** Scale pin size */
+  scale?: number;
+  /** Position where to display Pin */
+  position?: Point;
+  /** Rotation of the marker. Default 0 radians */
+  rotate?: number;
+  /** anchor postion */
+  anchor?: Anchor;
+  /** Offset values in px of the icon to the center point of the marker */
+  iconOffset?: number[];
+}
+
+export type GeojsonFeature = {
+  type: "Feature";
+  geometry: {
+    type: "Point" | "Polygon" | "LineString";
+    coordinates: Array<number> | Array<Array<number>>;
+  };
+  properties?: { [key: string]: string };
+};
+
+/**
+ * For measurement mode types
+ */
+export type Mode = "Draw" | "Edit" | "Delete";
+
+/**
+ * Interface for drawing configuration of shape
+ */
+export interface DrawingConfig extends EntityConfiguration {
+  type: "LineString" | "Polygon" | "Point" | "Cross-Section";
+}
+
+/**
+ * @typedef {function}
+ * @name MouseEventCallback
+ * @description Callback for the Mouse Event listener. Provides a single latitude and longitude of the mouse event triggered.
+ */
+export type MouseEventCallback = (latitude: number, longitude: number) => void;
+
+export type MouseEventOptions = {
+  /** Should the event only be triggered when there are no features beneath the mouse */
+  hasNoFeatures?: boolean;
+  /** Should the event be prevented from bubbling */
+  stopClickPropagation?: boolean;
+};
+
+/**
+ * Layer Listener Type
+ */
+export type LayerListener = {
+  /** Event listener is triggered on */
+  event: string;
+  /** Unique name of listener */
+  id: string;
+  /** Function to call on event triggering */
+  fn: Function;
+};
+
+/**
+ * @typedef {function}
+ * @name EventListenerCallback
+ * @description Callback for the Mouse Event listener. Provides an object containing features interacted with if the listener was added to layers. Always contains the latLng of the mouse event.
+ */
+export type EventListenerCallback = (event: EventListenerEvent) => void;
+
+/**
+ * Interface to respond when converting screen coordinates to Cartesian
+ */
+export type DrawResponse = {
+  id: string;
+  object: any;
+};
+
+export type MapCursor =
+  | "crosshair"
+  | "pointer"
+  | "move"
+  | "grabbing"
+  | "grab"
+  | "default";
+
+export type MapStyle = "default" | "satellite" | "roadmap";
+
+export type MapOptions = {
+  /** Token from cesium ion */
+  token: string;
+  /** Map box access token to load road/ street map (Required for roadMap mapstyle) */
+  mapboxToken: string;
+  /** Which base map style should be initialized with */
+  style?: MapStyle;
+  /** Initial center of the map [longitude, latitude] */
+  center?: Array<number>;
+  /** Initial zoom level of the map */
+  zoom?: number;
+  /** The maximum zoom level the map can go to */
+  maxZoomLevel?: number;
+  /** The minimum zoom level the map can go to */
+  minZoomLevel?: number;
+  /** id of the map element to add the canvas to */
+  mapElementId: string;
+};
+
+/**
+ * Callback function while interacting with mouse
+ */
+export type CallBack = (position: Point) => void;
+
+/**
+ * A Generic Feature comprised of a single location
+ */
+export type SingleLocationFeature = {
+  /** Geometry type */
+  geometry: any;
+  /** Latitude */
+  lat: number | string;
+  /** Longitude */
+  long: number | string;
+  /** Height */
+  height: number | string;
+  /** General properties of the feature, usually this is for data used
+   * code interacting with the data layers */
+  properties: {
+    [key: string]: any;
+    /** ID of the feature */
+    id?: string | number;
+  };
+};
+
+/**
+ * `EventListenerEvent` is a class used the EventListenerCallback
+ * when a mouse event is triggered on the map.
+ * See https://docs.mapbox.com/mapbox-gl-js/api/map/#map#on
+ */
+export type EventListenerEvent = {
+  /**
+   * The type of originating event. For a full list of available events,
+   *  see [`Map` events](/mapbox-gl-js/api/map/#map-events).
+   */
+  type:
+    | "mousedown"
+    | "mouseup"
+    | "preclick"
+    | "click"
+    | "dblclick"
+    | "mousemove"
+    | "mouseover"
+    | "mouseenter"
+    | "mouseleave"
+    | "mouseout"
+    | "contextmenu";
+
+  /**
+   * The `Map` object that fired the event.
+   */
+  target: CesiumView;
+
+  /**
+   * The DOM event which caused the map event.
+   */
+  originalEvent?: MouseEvent;
+
+  /**
+   * The pixel coordinates of the mouse cursor, relative to the map and measured
+   *  from the top left corner.
+   */
+  point: {
+    x: number;
+    y: number;
+  };
+
+  /**
+   * The geographic location on the map of the mouse cursor.
+   */
+  lngLat: {
+    lng: number;
+    lat: number;
+    height?: number;
+  };
+  /**
+   * If a single `layerId`(as a single string) or multiple `layerIds`
+   * (as an array of strings) were specified when adding the event listener with {@link Map#on},
+   * `features` will be an array of [GeoJSON](http://geojson.org/) [Feature objects](https://tools.ietf.org/html/rfc7946#section-3.2).
+   * The array will contain all features from that layer that are rendered at the event's point,
+   * in the order that they are rendered with the topmost feature being at the start of the array.
+   * The `features` are identical to those returned by {@link Map#queryRenderedFeatures}.
+   *
+   * If no `layerId` was specified when adding the event listener, `features` will be `undefined`.
+   * You can get the features at the point with `map.queryRenderedFeatures(e.point)`.
+   *
+   * @example
+   * // logging features for a specific layer (with `e.features`)
+   * map.on('click', 'myLayerId', (e) => {
+   *     console.log(`There are ${e.features.length} features at point ${e.point}`);
+   * });
+   *
+   * @example
+   * // logging features for two layers (with `e.features`)
+   * map.on('click', ['layer1', 'layer2'], (e) => {
+   *     console.log(`There are ${e.features.length} features at point ${e.point}`);
+   * });
+   *
+   * @example
+   * // logging all features for all layers (without `e.features`)
+   * map.on('click', (e) => {
+   *     const features = map.queryRenderedFeatures(e.point);
+   *     console.log(`There are ${features.length} features at point ${e.point}`);
+   * });
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  features: Array<SingleLocationFeature>;
+
+  /**
+   * Prevents subsequent default processing of the event by the map.
+   *
+   * @example
+   * map.on('click', (e) => {
+   *     e.preventDefault();
+   * });
+   */
+  preventDefault?: Function;
+
+  /**
+   * `true` if `preventDefault` has been called.
+   * @private
+   */
+  defaultPrevented?: Function;
+
+  _defaultPrevented?: boolean;
+};
+
+/**
+ * Feature Properties Base Type
+ */
+export type FeatureProperties = {
+  [key: string]: any;
+  /** ID of the feature */
+  id?: string | number;
+};
+
+/**
+ * Supported map types to send data to
+ */
+export type MapType = 'default' | 'compare' | 'all';
+
+/**
+ * Supported layer types
+ */
+export type LayerType =
+  | "polygon"
+  | "line"
+  | "marker"
+  | "marker3d"
+  | "model"
+  | "ortho"
+  | "droneImage"
+  | "editPolygon"
+  | "editLine"
+  | "editPoint"
+  | "annotation"
+  | "note";
+
+/**
+ * Interface for label configuration
+ */
+interface LabelConfig {
+  /**
+   * Id should be unique
+   * If not provided API will generate one
+   */
+  id?: string;
+  /**
+   * Name for this label
+   */
+  name?: string;
+  /**
+   * string css hex color code
+   */
+  fillColor?: string;
+  /**
+   * number Font size
+   */
+  size?: number;
+  /**
+   * To set background
+   */
+  isBackground?: boolean;
+  /**
+   * string css hex color code
+   */
+  backgroundColor?: string;
+  /**
+   * number between 0 to 1
+   */
+  opacity?: number;
+  /**
+   * Callback function to get ID after addition
+   */
+  getId?: (id: string) => void;
+}
+
+/**
+ * Label configuration when position is in latitude and longitude
+ */
+export interface LabelConfigByLatLng extends LabelConfig {
+  text: string;
+  /**
+   * Position where to display tooltip
+   */
+  position: Point;
+}
+
+/**
+ * Label configuration when position is in Cartesian
+ */
+export interface LabelConfigByCartesian extends LabelConfig {
+  /**
+   * Text that will appear on label
+   */
+  text: string;
+  /**
+   * Position in cartesian3
+   */
+  position: Cartesian3;
+}
+
+/**
+ * Interface for tooltip configuration
+ */
+export interface TooltipConfigByLatLng extends LabelConfig {
+  /**
+   * Property json
+   */
+  data?: { [key: string]: string };
+  /**
+   * Position where to display tooltip
+   */
+  position: Cartesian3;
+}