@vcmap/ui 5.1.7 → 5.2.0

package/src/manager/panel/panelManager.d.ts

@@ -0,0 +1,338 @@
+/**
+ * @typedef {Object} PanelComponentOptions
+ * @property {string} [id] - Optional id, which will be set as HTML container ID. If not provided an uuid will be generated.
+ * @property {import("vue").Component} [component] Optional component to be rendered in the panel.
+ * @property {Partial<PanelState>} [state]
+ * @property {Partial<VerticalPanelPositionOptions|HorizontalPanelPositionOptions>} [position] Will be merged with default position for panel
+ * @property {Object} [props]
+ * @property {Object} [provides]
+ */
+/**
+ * @typedef {Object} PanelState
+ * @property {string} id
+ * @property {string|vcsAppSymbol} owner Owner of the panel, set by panelManager on add
+ * @property {PanelLocation} location Location of the panel, set by panelManager on add
+ * @property {boolean} [resizable=true] Whether size of panel can be adapted
+ * @property {Object<string, string>} [styles] Can be used to add additional styles to the root PanelComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+ * @property {Array<string>|Object<string,string>} [classes] Can be used to add additional classes to the root PanelComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+ */
+/**
+ * @typedef {Object} PanelComponent
+ * @property {string} id
+ * @property {import("vue").Component} component
+ * @property {Partial<PanelState>} state
+ * @property {Object} props
+ * @property {Object} provides
+ */
+/**
+ * @param {Partial<PanelComponent>} panelComponent
+ * @returns {PanelPosition|undefined}
+ */
+export function getPanelPosition(panelComponent: Partial<PanelComponent>): PanelPosition | undefined;
+/**
+ * @param {PanelComponent} panelComponent
+ * @param {Partial<PanelPosition>} panelPosition
+ */
+export function setPanelPosition(panelComponent: PanelComponent, panelPosition: Partial<PanelPosition>): void;
+export const panelLocationSymbol: unique symbol;
+export const panelPositionSymbol: unique symbol;
+/**
+ * *
+ */
+export type PanelLocation = string;
+export namespace PanelLocation {
+    let LEFT: string;
+    let RIGHT: string;
+    let BOTTOM: string;
+}
+/**
+ * *
+ */
+export type DefaultPanelPositions = Partial<PanelPosition>;
+/**
+ * @typedef {Object} VerticalPanelPositionOptions
+ * @property {string} [width] Can be a css position string (e.g. '320px' or '50%')
+ * @property {string} [maxWidth] Can be a css position string (e.g. '320px' or '50%')
+ * @property {string} [minWidth] Can be a css position string (e.g. '320px' or '50%')
+ */
+/**
+ * @typedef {Object} HorizontalPanelPositionOptions
+ * @property {string} [height] Can be a css position string (e.g. '320px' or '50%')
+ * @property {string} [maxHeight] Can be a css position string (e.g. '320px' or '50%')
+ * @property {string} [minHeight] Can be a css position string (e.g. '320px' or '50%')
+ */
+/**
+ * @typedef {Object} PanelPosition
+ * @property {string?} left - The left CSS property participates in specifying the horizontal position of a panel.
+ * @property {string?} top - The top CSS property participates in specifying the vertical position of a panel.
+ * @property {string?} right - The right CSS property participates in specifying the horizontal position of a panel.
+ * @property {string?} bottom - The bottom CSS property participates in specifying the vertical position of a panel.
+ * @property {string} width - The width CSS property sets an element's width.
+ * @property {string} height - The height CSS property sets an element's height.
+ * @property {string} maxHeight - The maxHeight CSS property sets an element's maximal height.
+ * @property {string} maxWidth - The maxWidth CSS property sets an element's maximal width.
+ * @property {string} minHeight - The minHeight CSS property sets an element's minimal height.
+ * @property {string} minWidth - The minWidth CSS property sets an element's minimal width.
+ */
+/**
+ * @readonly
+ * @enum {Partial<PanelPosition>}
+ * @private
+ */
+export const DefaultPanelPositions: {
+    [x: string]: {
+        left: string;
+        width: string;
+        minWidth: string;
+        height: string;
+        right?: undefined;
+        bottom?: undefined;
+        minHeight?: undefined;
+        maxHeight?: undefined;
+    } | {
+        right: string;
+        width: string;
+        minWidth: string;
+        height: string;
+        left?: undefined;
+        bottom?: undefined;
+        minHeight?: undefined;
+        maxHeight?: undefined;
+    } | {
+        bottom: string;
+        width: string;
+        height: string;
+        minHeight: string;
+        maxHeight: string;
+        left?: undefined;
+        minWidth?: undefined;
+        right?: undefined;
+    };
+};
+export default PanelManager;
+export type PanelComponentOptions = {
+    /**
+     * - Optional id, which will be set as HTML container ID. If not provided an uuid will be generated.
+     */
+    id?: string | undefined;
+    /**
+     * Optional component to be rendered in the panel.
+     */
+    component?: import("vue").Component<import("vue/types/options.js").DefaultData<never>, import("vue/types/options.js").DefaultMethods<never>, import("vue/types/options.js").DefaultComputed, import("vue/types/options.js").DefaultProps, {}> | undefined;
+    state?: Partial<PanelState> | undefined;
+    /**
+     * Will be merged with default position for panel
+     */
+    position?: Partial<VerticalPanelPositionOptions | HorizontalPanelPositionOptions> | undefined;
+    props?: Object | undefined;
+    provides?: Object | undefined;
+};
+export type PanelState = {
+    id: string;
+    /**
+     * Owner of the panel, set by panelManager on add
+     */
+    owner: string | symbol;
+    /**
+     * Location of the panel, set by panelManager on add
+     */
+    location: PanelLocation;
+    /**
+     * Whether size of panel can be adapted
+     */
+    resizable?: boolean | undefined;
+    /**
+     * Can be used to add additional styles to the root PanelComponent. Use Vue Style Bindings Object Syntax https://vuejs.org/v2/guide/class-and-style.html
+     */
+    styles?: {
+        [x: string]: string;
+    } | undefined;
+    /**
+     * Can be used to add additional classes to the root PanelComponent. Use Vue Class Bindings Syntax https://vuejs.org/v2/guide/class-and-style.html
+     */
+    classes?: string[] | {
+        [x: string]: string;
+    } | undefined;
+};
+export type PanelComponent = {
+    id: string;
+    component: import("vue").Component;
+    state: Partial<PanelState>;
+    props: Object;
+    provides: Object;
+};
+export type VerticalPanelPositionOptions = {
+    /**
+     * Can be a css position string (e.g. '320px' or '50%')
+     */
+    width?: string | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%')
+     */
+    maxWidth?: string | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%')
+     */
+    minWidth?: string | undefined;
+};
+export type HorizontalPanelPositionOptions = {
+    /**
+     * Can be a css position string (e.g. '320px' or '50%')
+     */
+    height?: string | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%')
+     */
+    maxHeight?: string | undefined;
+    /**
+     * Can be a css position string (e.g. '320px' or '50%')
+     */
+    minHeight?: string | undefined;
+};
+export type PanelPosition = {
+    /**
+     * - The left CSS property participates in specifying the horizontal position of a panel.
+     */
+    left: string | null;
+    /**
+     * - The top CSS property participates in specifying the vertical position of a panel.
+     */
+    top: string | null;
+    /**
+     * - The right CSS property participates in specifying the horizontal position of a panel.
+     */
+    right: string | null;
+    /**
+     * - The bottom CSS property participates in specifying the vertical position of a panel.
+     */
+    bottom: string | null;
+    /**
+     * - The width CSS property sets an element's width.
+     */
+    width: string;
+    /**
+     * - The height CSS property sets an element's height.
+     */
+    height: string;
+    /**
+     * - The maxHeight CSS property sets an element's maximal height.
+     */
+    maxHeight: string;
+    /**
+     * - The maxWidth CSS property sets an element's maximal width.
+     */
+    maxWidth: string;
+    /**
+     * - The minHeight CSS property sets an element's minimal height.
+     */
+    minHeight: string;
+    /**
+     * - The minWidth CSS property sets an element's minimal width.
+     */
+    minWidth: string;
+};
+export type IPanelManager = import("../../vcsUiApp.js").VcsComponentManager<PanelComponent, PanelComponentOptions>;
+/**
+ * @typedef {import("../../vcsUiApp.js").VcsComponentManager<PanelComponent,PanelComponentOptions>} IPanelManager
+ */
+/**
+ * @class PanelManager
+ * @description Manages a set of Panels
+ * @implements {IPanelManager}
+ */
+declare class PanelManager implements IPanelManager {
+    /**
+     * @type {import("@vcmap/core").VcsEvent<PanelComponent>}
+     */
+    added: import("@vcmap/core").VcsEvent<PanelComponent>;
+    /**
+     * @type {import("@vcmap/core").VcsEvent<PanelComponent>}
+     */
+    removed: import("@vcmap/core").VcsEvent<PanelComponent>;
+    /**
+     * reactive ordered array of ids,
+     * @type {Array<string>}
+     */
+    componentIds: Array<string>;
+    /**
+     * @type {Map<PanelLocation, string>}
+     * @private
+     */
+    private _panelLocations;
+    /**
+     * @type {Map<string, PanelComponent>}
+     * @private
+     */
+    private _panelComponents;
+    /**
+     * @type {Map<string, PanelPosition>}
+     * @private
+     */
+    private _panelPositionsCache;
+    /**
+     * @param {string} id
+     * @returns {PanelComponent}
+     */
+    get(id: string): PanelComponent;
+    /**
+     * @param {string} id
+     * @returns {boolean}
+     */
+    has(id: string): boolean;
+    /**
+     *
+     * @param {PanelLocation} location
+     * @returns {PanelComponent}
+     */
+    getLocation(location: PanelLocation): PanelComponent;
+    /**
+     *
+     * @param {PanelLocation} location
+     * @returns {boolean}
+     */
+    hasLocation(location: PanelLocation): boolean;
+    /**
+     *
+     * @param {PanelLocation} location
+     */
+    removePanelAtLocation(location: PanelLocation): void;
+    /**
+     * @param {string} id
+     * @returns {Partial<PanelPosition>|undefined}
+     */
+    getCachedPosition(id: string): Partial<PanelPosition> | undefined;
+    /**
+     * removes a panel, Component will not be rendered anymore and will be destroyed. Add PanelComponent again
+     * to show the component again
+     * @param {string} id
+     */
+    remove(id: string): void;
+    /**
+     * Set width for LEFT and RIGHT or height for BOTTOM panels
+     * @param {string} id
+     * @param {VerticalPanelPositionOptions|HorizontalPanelPositionOptions} panelPositionOptions
+     */
+    setPanelPosition(id: string, panelPositionOptions: VerticalPanelPositionOptions | HorizontalPanelPositionOptions): void;
+    /**
+     * adds a panelComponent to the PanelManager and renders the Panel
+     * @param {PanelComponentOptions|PanelComponent} panelComponentOptions
+     * @param {string|symbol} owner pluginName or vcsAppSymbol
+     * @param {PanelLocation} location panel render position
+     * @returns {PanelComponent}
+     */
+    // @ts-ignore
+add(panelComponentOptions: PanelComponentOptions | PanelComponent, owner: string | symbol, location: PanelLocation): PanelComponent;
+    /**
+     * removes all panelComponents of a specific owner (plugin) and fires removed Events
+     * @param {string|vcsAppSymbol} owner
+     */
+    removeOwner(owner: string | symbol): void;
+    /**
+     * removes all panelComponents and fires removed Events
+     */
+    clear(): void;
+    /**
+     * destroys the panelManager;
+     */
+    destroy(): void;
+}