@geogirafe/lib-geoportal/components/map-grid/component.d.ts

GeoGirafe is a flexible application to build online geoportals.

import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
import { LayoutCell } from '../../tools/state/layout.js';
/** A splitter, placed on the boundary between two columns or two rows of the Grid. */
type Splitter = {
    /** Whether the splitter is dragged left/right (vertical) or up/down (horizontal). */
    orientation: 'vertical' | 'horizontal';
    /** Index of the column (vertical) or of the row (horizontal) placed before the splitter. */
    index: number;
    /** Position of the splitter, in percent of the Grid. */
    position: number;
    /**
     * Index of the first and of the last row (vertical) or column (horizontal) the splitter goes along:
     * a splitter only goes along the Cells that share its boundary.
     */
    from: number;
    to: number;
    /** Start and end of the splitter along its boundary, in percent of the Grid. */
    start: number;
    end: number;
};
/**
 * The Grid in which the Map Components are displayed.
 *
 * The Components are written as children of this Element in the HTML of the application
 * and are moved into the Cells of the Grid, depending on <code>state.layout</code>.
 * A Component that is not placed in any Cell is not slotted, and therefore not displayed.
 */
declare class MapGridComponent extends GirafeHTMLElement {
    protected templateUrl: string | null;
    protected styleUrls: string[] | null;
    template: () => import("uhtml").Hole;
    /** The Cells of the current Layout, used to render them and their slots. */
    cells: LayoutCell[];
    /** The splitters between the Cells of the current Layout. */
    splitters: Splitter[];
    /** The splitter that is currently dragged, if any. */
    private draggedSplitter;
    constructor();
    private get layout();
    private get grid();
    protected connectedCallback(): void;
    private registerEvents;
    /**
     * Rebuilds the Cells and the splitters of the Grid for the current Layout,
     * then places the Components and applies the sizes.
     */
    private applyLayout;
    /**
     * Creates one splitter for each boundary between two columns and between two rows.
     * The columns and the rows keep the same sizes in every Cell of the Grid: a vertical splitter
     * goes along all the rows that have a Cell ending on its boundary, and a horizontal splitter
     * goes along all the columns.
     */
    private createSplitters;
    getCellArea(cell: LayoutCell): string;
    /**
     * Moves each Component into the Cell it is configured for, by setting the name of the slot
     * it must be displayed in. Components that are not placed in any Cell get no slot,
     * which means that they are not displayed at all.
     */
    private applyCells;
    private applySizes;
    /** Applies the sizes of the columns and of the rows to the Grid and to the splitters. */
    private applyGridSizes;
    private sumOf;
    private applySplitterPosition;
    getSplitterId(splitter: Splitter): string;
    onSplitterPointerDown(event: PointerEvent, splitter: Splitter): void;
    /**
     * Resizes the two columns (or the two rows) around the dragged splitter.
     * While dragging, the new sizes are only applied to the DOM: the state is updated
     * at the end of the drag, to prevent flooding it with intermediate values.
     */
    onSplitterPointerMove(event: PointerEvent, splitter: Splitter): void;
    onSplitterPointerUp(event: PointerEvent, splitter: Splitter): void;
    /**
     * Computes the new sizes of the columns (or of the rows) when the splitter is moved
     * to the given position, in percent of the Grid. The two resized columns (or rows) are
     * kept between MIN_CELL_SIZE and MAX_CELL_SIZE, the other ones keep their size.
     */
    private getResizedSizes;
    render(): void;
}
export default MapGridComponent;