import * as __core from './core';
import { StencilBase, ConnectorBase, DiagramSettings, DiagramState } from './core';

/**
 * Defines event data for the {@link DiagramViewer} events.
 */
interface DiagramViewerEventData {
    /**
     * {@link DiagramViewer} instance.
     */
    viewer: DiagramViewer;
}
/**
 * Defines event data for stencil-related events in {@link DiagramViewer}.
 */
interface StencilEventData {
    /**
     * {@link DiagramViewer} instance.
     */
    viewer: DiagramViewer;
    /**
     * Stencil target of the event.
     */
    stencil: StencilBase;
}
/**
 * Defines event data for connector-related events in {@link DiagramViewer}.
 */
interface ConnectorEventData {
    /**
     * {@link DiagramViewer} instance.
     */
    viewer: DiagramViewer;
    /**
     * Connector target of the event.
     */
    connector: ConnectorBase;
}
/**
 * {@link DiagramViewer} events.
 */
interface DiagramViewerEventMap {
    /**
     * Viewer initialized.
     */
    viewerinit: CustomEvent<DiagramViewerEventData>;
    /**
     * Diagram loaded.
     */
    diagramload: CustomEvent<DiagramViewerEventData>;
    /**
     * Pointer entered stencil.
     */
    stencilpointerenter: CustomEvent<StencilEventData>;
    /**
     * Pointer left stencil.
     */
    stencilpointerleave: CustomEvent<StencilEventData>;
    /**
     * Stencil clicked.
     */
    stencilclick: CustomEvent<StencilEventData>;
    /**
     * Pointer entered connector.
     */
    connectorpointerenter: CustomEvent<ConnectorEventData>;
    /**
     * Pointer left connector.
     */
    connectorpointerleave: CustomEvent<ConnectorEventData>;
    /**
     * Connector clicked.
     */
    connectorclick: CustomEvent<ConnectorEventData>;
}
/**
 * Describes desired auto-scaling behavior.
 * @since 1.1.0
 */
declare type AutoScaleDirection = 'none' | 'down' | 'up' | 'both';
/**
 * DiagramViewer is the main diagram viewing web component of the MJS Diagram library.
 *
 * You add an instance of DiagramViewer to your page to display dynamic and interactive diagrams
 * created either with {@link editor!DiagramEditor} or in code.
 *
 * You can add it in your HTML markup as a custom element with something like this:
 *
 * ```html
 * <mjs-diagram-viewer id="mjsDiaViewer"></mjs-diagram-viewer>
 * ```
 *
 * Or you can add it in code.
 *
 * One important thing to set when the component loads is the {@link core!StencilSet} you want to use.
 *
 * Here we add a Flowchart stencil set:
 *
 * ```ts
 * let viewer = document.getElementById('mjsDiaViewer');
 * viewer.stencilSet = flowchartStencilSet;
 * ```
 *
 * You display previously saved or created state by passing it to the {@link DiagramViewer.show} method.
 *
 * ```ts
 * viewer.show(myState);
 * ```
 *
 * @see
 * Check out MJS Diagram [docs](https://markerjs.com/docs/diagram/getting-started)
 * and [demos](https://markerjs.com/demos/diagram/getting-started/) for more details.
 */
declare class DiagramViewer extends HTMLElement {
    private _container?;
    private _contentContainer?;
    private _canvasContainer?;
    private _toolbarAreaContainer?;
    private _toolbarContainer?;
    private _mainCanvas?;
    private _groupLayer?;
    private _connectorLayer?;
    private _objectLayer?;
    private _stencils;
    private _connectors;
    private _resizeObserver?;
    /**
     * Zoom level steps the interactive zoom controls go through.
     */
    zoomSteps: number[];
    private _zoomLevel;
    /**
     * Gets the current zoom level of the control (1 is 100%).
     */
    get zoomLevel(): number;
    /**
     * Set the zoom level of the contrl (1 is 100%).
     */
    set zoomLevel(value: number);
    private _autoScaling;
    /**
     * Configures auto-scaling behavior.
     *
     * - `none` - no auto-scaling
     * - `down` (default) - auto-scales the diagram down when it doesn't fit into the control
     * - `up` - auto-scales the diagram to the largest size fitting into the control but not smaller than 100%
     * - `both` - keeps diagram at maximum size that fits into the control
     *
     * @since 1.1.0
     */
    get autoScaling(): AutoScaleDirection;
    set autoScaling(value: AutoScaleDirection);
    private _stencilSet;
    /**
     * Returns currently active {@link core!StencilSet}.
     */
    get stencilSet(): __core.StencilSet;
    /**
     * Sets current {@link core!StencilSet}.
     */
    set stencilSet(value: __core.StencilSet);
    /**
     * Diagram settings.
     */
    readonly settings: DiagramSettings;
    private _toolbarVisible;
    /**
     * Returns whether toolbar is visible (enabled)
     *
     * @default true
     * @since 1.2.0
     */
    get toolbarVisible(): boolean;
    /**
     * Sets whether toolbar is visible (enabled)
     *
     * @since 1.2.0
     */
    set toolbarVisible(value: boolean);
    private _loadAnimationEnabled;
    /**
     * Returns whether diagram stencils should fade in after loading
     *
     * @default true
     * @since 1.2.0
     */
    get loadAnimationEnabled(): boolean;
    /**
     * Sets whether diagram stencils should fade in after loading
     *
     * @since 1.2.0
     */
    set loadAnimationEnabled(value: boolean);
    /**
     * Creates a new instance of the Diagram Viewer.
     */
    constructor();
    private _iid;
    /**
     * Returns a new internal object identifier.
     * @returns
     */
    getNewIId(): number;
    private createLayout;
    private addToolbar;
    private toolbarButtonClicked;
    /**
     * Zooms in or out to the supplied zoom level (1 = 100%).
     * @param factor zoom level.
     */
    zoom(factor: number): void;
    /**
     * Scales the diagram inside the viewer according to the {@link autoScaling} setting.
     * @since 1.1.0
     */
    autoScale(): void;
    private width;
    private height;
    private documentWidth;
    private documentHeight;
    private documentBgColor;
    private addMainCanvas;
    private connectedCallback;
    private disconnectedCallback;
    private attachEvents;
    private attachWindowEvents;
    private detachEvents;
    private detachWindowEvents;
    private setupResizeObserver;
    private clientToLocalCoordinates;
    private touchPoints;
    private isDragging;
    private onPointerDown;
    private onPointerMove;
    private onStencilPointerUp;
    private onPointerUp;
    private onPointerOut;
    private addNewStencil;
    private addNewConnector;
    private setDocumentBgColor;
    private setMainCanvasSize;
    private setDocumentSize;
    private addStyles;
    /**
     * Displays a previously saved diagram.
     *
     * @remarks
     * Make sure to set the correct corresponding {@link DiagramViewer.stencilSet} before
     * calling `show()`.
     *
     * @param state diagram configration object.
     */
    show(state: DiagramState): void;
    /**
     * NOTE:
     *
     * before removing or modifying this method please consider supporting marker.js
     * by visiting https://markerjs.com/buy for details
     *
     * thank you!
     */
    private _logoUI?;
    private toggleLogo;
    private addLogo;
    private removeLogo;
    private positionLogo;
    addEventListener<T extends keyof DiagramViewerEventMap>(type: T, listener: (this: DiagramViewer, ev: DiagramViewerEventMap[T]) => void, options?: boolean | AddEventListenerOptions): void;
    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions | undefined): void;
    removeEventListener<T extends keyof DiagramViewerEventMap>(type: T, listener: (this: DiagramViewer, ev: DiagramViewerEventMap[T]) => void, options?: boolean | EventListenerOptions): void;
    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | EventListenerOptions | undefined): void;
}

export { AutoScaleDirection, ConnectorEventData, DiagramViewer, DiagramViewerEventData, DiagramViewerEventMap, StencilEventData };