@arcgis/core/effects/FocusAreas.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type Collection from "../core/Collection.js";
import type FocusArea from "./FocusArea.js";
import type { Clonable } from "../core/Clonable.js";
import type { JSONSupportMixin } from "../core/JSONSupport.js";
import type { FocusAreaProperties } from "./FocusArea.js";
import type { FocusAreaStyle } from "./types.js";
import type { ReadonlyArrayOrCollection } from "../core/Collection.js";

export interface FocusAreasProperties extends Partial<Pick<FocusAreas, "style">> {
  /** A collection containing all focus areas. */
  areas?: ReadonlyArrayOrCollection<FocusAreaProperties>;
}

/**
 * A collection of focus areas in a [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/).
 *
 * A [focus area](https://developers.arcgis.com/javascript/latest/references/core/effects/FocusArea/) highlights a region of the map by de-emphasizing parts outside
 * the area of interest. Two predefined styles, dark or bright are available, to choose a visualization with good
 * contrast for scenes with different coloring. A focus area can have a colored outline, which is helpful to
 * distinguish different focus areas in a map. Focus areas can be captured in slides and shared as part of a webscene.
 *
 * [![webscene](https://developers.arcgis.com/javascript/latest/assets/references/core/effects/focusarea-bd.png)](https://developers.arcgis.com/javascript/latest/sample-code/focus-area/)
 *
 * > [!WARNING]
 * >
 * > **Known Limitations**
 * >
 * > Focus areas are only supported in [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/).
 *
 * @since 4.33
 * @see [Sample - Focus Area](https://developers.arcgis.com/javascript/latest/sample-code/focus-area/)
 * @see [FocusArea](https://developers.arcgis.com/javascript/latest/references/core/effects/FocusArea/)
 * @see [Map.focusAreas](https://developers.arcgis.com/javascript/latest/references/core/Map/#focusAreas)
 * @example
 * // Adding a focus area to map.
 * const focusAreaPolygon = new Polygon({
 *  spatialReference: { wkid: 102100 },
 *  rings: [[
 *   [1288603, 6130075],
 *   [1288415, 6130021],
 *   [1288459, 6130133],
 *   [1288603, 6130075],
 *  ]],
 * });
 *
 * const focusArea = new FocusArea({
 *  outline: { color: [255, 128, 128, 0.55] },
 *  geometries: new Collection([focusAreaPolygon]),
 * });
 *
 * map.focusAreas.areas.add(focusArea);
 * map.focusAreas.style = "dark";
 */
export default class FocusAreas extends FocusAreasSuperclass {
  constructor(properties?: FocusAreasProperties);
  /** A collection containing all focus areas. */
  get areas(): Collection<FocusArea>;
  set areas(value: ReadonlyArrayOrCollection<FocusAreaProperties>);
  /**
   * The rendering style of the map, applied outside of all enabled focus areas.
   *
   * This property can be either "bright" or "dark", with the default value set to "bright". When there is no enabled
   * focus area on the map, the view renders normally.
   *
   * @default "bright"
   */
  accessor style: FocusAreaStyle;
}
declare const FocusAreasSuperclass: typeof Clonable & typeof JSONSupportMixin