@arcgis/map-components/dist/components/arcgis-grid-controls/customElement.d.ts

ArcGIS Map Components

/// <reference types="@arcgis/core/interfaces.d.ts" />
/// <reference types="../../index.d.ts" />
import { ArcgisReferenceElement } from '../../utils/component-utils';
import { Nil } from '@arcgis/components-utils';
import { Use } from '@arcgis/lumina/controllers';
import { GridPlacementState, GridTheme } from './interfaces';
import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
import { default as Color } from '@arcgis/core/Color.js';
import { default as GridControlsViewModel } from '@arcgis/core/widgets/support/GridControls/GridControlsViewModel.js';

declare const useGridControlsViewModel: (component: LitElement & Pick<GridControlsViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<GridControlsViewModel>) => GridControlsViewModel;
/**
 * The Grid Controls component provides a user interface (UI) for configuring and displaying a two-dimensional grid.
 * The grid displayed provides a network of horizontal and vertical lines used to divide the view into equal cells.
 * With support for snapping, the grid lines can be used as a reference when drawing features.
 * Note: grid controls are embedded in snapping controls for Sketch and Editor by default.
 *
 * **Known limitations**
 *
 * - Grid Controls is only supported in a 2D Map component.
 * - The grid spacing does not correspond to real world measurements. Distortion will be minimized when used in conjunction with an equal area basemap.
 * - The grid spacing input will be hidden when working with Web Mercator and Geographic Coordinate Systems.
 *
 * [Read more...](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-grid-controls/)
 */
export declare class ArcgisGridControls extends LitElement {
    /**
     * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
     *
     * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
     */
    referenceElement?: ArcgisReferenceElement | string;
    /** @default "bottom-right" */
    position: __esri.UIPosition;
    /**
     * Icon which represents the component.
     * Typically used when the component is controlled by another component (e.g. by the Expand component).
     *
     * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
     * @default "grid-unit"
     */
    icon?: string;
    /** The custom color used for drawing the grid, if any. */
    customColor?: Color;
    /**
     * The [SnappingOptions](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-interactive-snapping-SnappingOptions.html)
     * that will be controlled by this component if the snapping toggle is enabled for display.
     * If SnappingOptions are provided, grid display will be automatically enabled or disabled to match snapping state.
     */
    snappingOptions: nullish | __esri.SnappingOptions;
    /**
     * The color scheme used to display the grid. This will be light, dark, or custom. When theme is set to custom,
     * the [customColor](#customColor) is shown, otherwise a default light or dark theme color is used.
     *
     * @default "dark"
     */
    get theme(): GridTheme | Nil;
    set theme(theme: GridTheme | Nil);
    /**
     * Controls display of the color and theme selection options.
     *
     * @default false
     */
    hideColorSelection: boolean;
    /**
     * Controls display of the dynamic scaling toggle. Dynamic scaling adjusts the size of the grid to work
     * well regardless of view scale.
     *
     * @default false
     */
    hideDynamicScaleToggle: boolean;
    /**
     * Controls display of the grid enabled toggle. This toggle controls whether the grid is displayed.
     *
     * @default false
     */
    hideGridEnabledToggle: boolean;
    /**
     * Controls display of the numeric input fields for setting grid spacing and rotation.
     *
     * @default false
     */
    hideNumericInputs: boolean;
    /**
     * Controls display of the grid snapping enabled toggle. This toggle controls whether snapping is enabled.
     *
     * @default false
     */
    hideGridSnapEnabledToggle: boolean;
    /**
     * Controls display of the line interval input field for setting the interval between major grid lines.
     *
     * @default false
     */
    hideLineIntervalInput: boolean;
    /**
     * Controls display of the out of scale warning. This warning is displayed when the grid is not shown
     * because it would be too small at the current scale and dynamic scaling is disabled.
     *
     * @default false
     */
    hideOutOfScaleWarning: boolean;
    /**
     * Controls display of the grid placement buttons. These buttons allow the user to start interactive
     * configuration of the grid.
     *
     * @default false
     */
    hidePlacementButtons: boolean;
    /**
     * Controls display of the rotate with map toggle. This toggle controls whether the grid rotates with the map.
     *
     * @default false
     */
    hideRotateWithMapToggle: boolean;
    /** Rotation of the grid in radians. NOTE: UI controls convert to and from degrees automatically. */
    rotation: number;
    /**
     * Controls whether the grid rotates with the map, or stays fixed to the screen.
     *
     * @default true
     */
    rotateWithMap: boolean;
    /**
     * Length of a grid cell. Grid cells are always square. Defined in [unit](#unit).
     *
     * @default 1
     */
    spacing: number;
    /**
     * Controls the number of grid cells shown between major grid lines. Can be anything between 1 and 15.
     * No minor grid lines are shown when this is set to 1.
     *
     * @default 10
     */
    majorLineInterval: number;
    /** Controls the color of the major grid lines. Minor grid lines are a slightly transparent version of this color. */
    gridColor: Color | Nil;
    /**
     * Returns `true` if the grid is enabled for display.
     * Use [trySetDisplayEnabled](#trySetDisplayEnabled) to enable or disable grid display.
     *
     * @default false
     */
    readonly displayEnabled: boolean;
    /**
     * True if the grid is currently not displayed (and therefore also not a valid snap target),
     * because [dynamicScaling](#dynamicScaling) is off and the grid cells are too small
     * to render at the current scale.
     *
     * @default false
     */
    readonly gridOutOfScale: boolean;
    /**
     * Unit of measure (foot, meter, etc) used when defining the [spacing](#spacing) grid cell.
     * Note that units are defined relatively to the map's spatial reference length unit,
     * which will not correspond to geographic distance unless using a special-purpose basemap
     * within a supported target area.
     *
     * When using Web Mercator, the projection defines the length of a meter in projection system units;
     * this length is equal to a geographic meter only at the equator. On screen, the size of the grid cells is constant
     * from the equator to the poles, but the real-world size of the grid cell is much larger further from the equator.
     *
     * The length of the grid cells can usefully correspond to a geographic length when the Grid is used with an
     * appropriate spatial reference (for example a local system or a State Plane system) within the reference's area of interest.
     */
    unit: nullish | __esri.LengthUnit;
    /**
     * Returns `true` if the grid is set to scale dynamically. When dynamic scaling is enabled,
     * grid cells are added or removed to ensure that grid cells are a reasonable size on screen as the user zooms.
     * The way additional grid lines are shown is controlled by the [majorLineInterval](#majorLineInterval) property.
     *
     * @default false
     */
    dynamicScaling: boolean;
    /**
     * Returns `true` if the grid is in a valid state for manually setting grid properties or starting an interactive placement.
     *
     * @default false
     */
    readonly gridControlsEnabled: boolean;
    /**
     * Sets the interactive placement state, either starting or ending a draw operation that implicitly adjusts the grid.
     * Interactive placement allows the user to define the center of the grid, then the scale and rotation of the grid by
     * drawing a second point. Setting this to "place" allows the user to move the grid center only. Setting this to "rotate"
     * keeps the scale and center of the grid constant while rotating the grid by defining a second point.
     *
     * @default null
     */
    interactivePlacementState: nullish | "rotate" | "place" | "interactive";
    /**
     * Controls snapping behavior if [snappingOptions](#snappingOptions) has been defined.
     * If [snappingOptions](#snappingOptions) have been defined, disabling or enabling grid snapping will
     * also disable or enable grid display.
     *
     * @default false
     */
    snappingEnabled: boolean;
    /** Returns the actual spacing of grid lines after dynamic scaling has been applied at the current scale. */
    readonly effectiveSpacingAfterDynamicScaling: number | nullish;
    /**
     * Use this property to disable the interactive grid placement buttons as needed.
     * An example use case might be to block interaction while another interactive operation
     * (e.g. sketching) is in progress.
     *
     * @default false
     */
    placementDisabled: boolean;
    /**
     * If true, the component will not be destroyed automatically when it is
     * disconnected from the document. This is useful when you want to move the
     * component to a different place on the page, or temporarily hide it. If this
     * is set, make sure to call the [destroy](https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-grid-controls/#destroy) method when you are done to
     * prevent memory leaks.
     *
     * @default false
     */
    autoDestroyDisabled: boolean;
    /**
     * Replace localized message strings with your own strings.
     *
     * _**Note**: Individual message keys may change between releases._
     */
    messageOverrides?: typeof this._messages._overrides;
    /** The component's default label. */
    label?: string;
    /** Permanently destroy the component. */
    destroy(): Promise<void>;
    /**
     * Call this to turn the grid on/off.
     *
     * @param enabled Desired end state for grid display.
     */
    trySetDisplayEnabled(enabled: boolean): void;
    /** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
    readonly arcgisPropertyChange: TargetedEvent<this, {
        name: "rotation" | "theme" | "customColor" | "rotateWithMap" | "spacing" | "majorLineInterval" | "gridColor" | "displayEnabled" | "gridOutOfScale" | "dynamicScaling" | "gridControlsEnabled" | "interactivePlacementState" | "snappingEnabled" | "effectiveSpacingAfterDynamicScaling";
    }>;
    /** Emitted when the component associated with a map or scene view is is ready to be interacted with. */
    readonly arcgisReady: TargetedEvent<this, void>;
    private _messages: Partial<{
        componentLabel: string;
        placementOptions: string;
        gridLineColorPopoverLabel: string;
        switchLabel: {
            rotateWithMap: string;
            scaling: string;
            display: string;
            snap: string;
        };
        inputLabel: {
            spacing: string;
            interval: string;
            angle: string;
            theme: string;
        };
        gridTheme: {
            light: string;
            dark: string;
            custom: string;
        };
        placementState: {
            interactive: string;
            place: string;
            scale: string;
            rotate: string;
        };
        warnings: {
            dynamicSpacing: string;
            outOfScale: string;
            interactivePlaceDisabled: string;
        };
    }> & import('@arcgis/lumina/controllers').T9nMeta<{
        componentLabel: string;
        placementOptions: string;
        gridLineColorPopoverLabel: string;
        switchLabel: {
            rotateWithMap: string;
            scaling: string;
            display: string;
            snap: string;
        };
        inputLabel: {
            spacing: string;
            interval: string;
            angle: string;
            theme: string;
        };
        gridTheme: {
            light: string;
            dark: string;
            custom: string;
        };
        placementState: {
            interactive: string;
            place: string;
            scale: string;
            rotate: string;
        };
        warnings: {
            dynamicSpacing: string;
            outOfScale: string;
            interactivePlaceDisabled: string;
        };
    }>;
}
export {};