@arcgis/core/views/layers/MediaLayerView.d.ts

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

import type MediaLayer from "../../layers/MediaLayer.js";
import type MediaLayerInteractionOptions from "../3d/layers/support/MediaLayerInteractionOptions.js";
import type LayerView from "./LayerView.js";
import type { ResourceHandle } from "../../core/Handles.js";
import type { MediaElement } from "../../layers/media/types.js";
import type { LayerViewHighlightOptions } from "./types.js";
import type { LayerViewProperties } from "./LayerView.js";

export interface MediaLayerViewProperties extends LayerViewProperties, Partial<Pick<MediaLayerView, "interactionOptions" | "interactive" | "selectedElement">> {}

/**
 * Represents the [LayerView](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/) of a [MediaLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/)
 * after it has been added to a [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) in either a [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/), [Map component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/),
 * [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/) or [Scene component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
 *
 * ## Keyboard shortcuts
 *
 * Various keyboard shortcuts are available when enabling interactive manipulation of media elements in the layer view.
 *
 * Shortcut | Action |
 * ---------|---------|
 * Z | Incrementally undo actions recorded in the stack. The undo/redo stack is for an individual operation, meaning you can redo/undo actions while updating a single element. |
 * R | Incrementally redo actions recorded in the stack. The undo/redo stack is for an individual operation, meaning you can redo/undo actions while updating a single element. |
 * Shift (resize) | Enable uniform scaling when resizing an element. |
 * Shift (rotate) | Enable rotation with 5 degree increments. |
 * Shift+Arrow | Move an element by a single pixel. |
 * Shift+Primary+Arrow | Move an element by 10 pixels. The primary key is the Cmd key on macos or Ctrl on other OS. |
 * Alt | Hold to move the source point when dragging a control point in the `reshape` tool. |
 * T | Toggle transparency of the element. |
 *
 * @since 4.30
 * @see [MediaLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/)
 */
export default abstract class MediaLayerView extends LayerView {
  /**
   * Options for when the layer view is interactive.
   *
   * > [!WARNING]
   * >
   * > Interactivity for 2D [MapViews](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) was added at version 4.31.
   *
   * @since 4.30
   * @see [interactive](https://developers.arcgis.com/javascript/latest/references/core/views/layers/MediaLayerView/#interactive)
   */
  accessor interactionOptions: MediaLayerInteractionOptions;
  /**
   * Enables interactivity for the [layer](https://developers.arcgis.com/javascript/latest/references/core/views/layers/MediaLayerView/#layer). When set to `true`, any elements in the
   * layer's [MediaLayer.source](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/#source) become selectable and editable.
   *
   * > [!WARNING]
   * >
   * > Interactivity for 2D [MapViews](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) was added at version 4.31.
   *
   * @default false
   * @since 4.30
   * @see [selectedElement](https://developers.arcgis.com/javascript/latest/references/core/views/layers/MediaLayerView/#selectedElement)
   * @see [interactionOptions](https://developers.arcgis.com/javascript/latest/references/core/views/layers/MediaLayerView/#interactionOptions)
   * @example
   * view.whenLayerView(mediaLayer).then((mediaLayerView) => {
   *   // Enable interactivity and select first element
   *   mediaLayerView.interactive = true;
   *
   *   mediaLayerView.selectedElement = mediaLayer.source.elements.at(0);
   * });
   */
  accessor interactive: boolean;
  /**
   * The layer being viewed.
   *
   * @since 5.0
   */
  get layer(): MediaLayer;
  /**
   * The selected element. If [interactive](https://developers.arcgis.com/javascript/latest/references/core/views/layers/MediaLayerView/#interactive) is `true`, any element in the
   * [layer](https://developers.arcgis.com/javascript/latest/references/core/views/layers/MediaLayerView/#layer) can be selected by clicking on it in the view. As long as [interactive](https://developers.arcgis.com/javascript/latest/references/core/views/layers/MediaLayerView/#interactive)
   * remains `true`, the properties of the selected element can be edited by interacting with
   * manipulators in the view.
   *
   * > [!WARNING]
   * >
   * > Interactivity for 2D [MapViews](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) was added at version 4.31.
   *
   * @since 4.30
   * @see [interactive](https://developers.arcgis.com/javascript/latest/references/core/views/layers/MediaLayerView/#interactive)
   * @example
   * view.whenLayerView(mediaLayer).then((mediaLayerView) => {
   *   // Enable interactivity and select first element
   *   mediaLayerView.interactive = true;
   *
   *   mediaLayerView.selectedElement = mediaLayer.source.elements.at(0);
   * });
   */
  accessor selectedElement: MediaElement | null | undefined;
  /**
   * Highlights the given media element(s) in a MediaLayerView. Highlights are only supported in
   * [3D SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/) or [Scene component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
   *
   * @param target - The media element(s) to highlight.
   * @param options - An object with the following properties.
   * @returns Returns a highlight handler with a `remove()` method that
   * can be called to remove the highlight.
   * @since 5.0
   * @see [SceneView.highlights](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#highlights)
   * @see [Sample: Highlight SceneLayer](https://developers.arcgis.com/javascript/latest/sample-code/highlight-scenelayer/)
   * @example
   * // Add a new set of highlight options to the highlights collection
   * const highlightName = "mark";
   * view.highlights.push({ name: highlightName, color: "red", fillOpacity: 0.5 });
   *
   * // Highlight a specific media element
   * view.whenLayerView(layer).then((layerView) => {
   *   let element = layer.source.elements.getItemAt(0);
   *   layerView.highlight(element, { name: highlightName } );
   * });
   */
  highlight(target: MediaElement | Iterable<MediaElement>, options?: LayerViewHighlightOptions): ResourceHandle;
}