/**
 * Font size settings.
 */
interface FontSize {
    /**
     * Number of {@link units}.
     */
    value: number;
    /**
     * Units the {@link value} represents.
     */
    units: string;
    /**
     * Value increment/decrement step for controls cycling through the size values.
     */
    step: number;
}

/**
 * Color type marks the kind of color property a color is referring to.
 */
declare type ColorType = 'text' | 'stroke' | 'fill' | 'background';

/**
 * Diagram settings represent a collection of core and custom settings
 * for a diagram.
 */
declare class DiagramSettings {
    /**
     * Stores arbitrary string settings grouped by context (eg. some module, stencil type, etc.).
     */
    protected _contextStrings: Map<string, Map<string, string>>;
    /**
     * Returns an arbitrary string setting for provided context and setting name.
     * @param context type or module name (or other context collection)
     * @param name setting name
     * @returns string setting for context-name pair or undefined, if not found.
     *
     * @example
     * ```ts
     * dashhArray = settings.getContextString('DiamondStencil', 'strokeDashArray');
     * ```
     */
    getContextString(context: string, name: string): string | undefined;
    /**
     * Sets an arbitrary string setting for some context (type or module name) and setting name.
     * @param context type or module name (or some other context)
     * @param name setting name
     * @param value setting value
     */
    setContextString(context: string, name: string, value: string): void;
    /**
     * Default color.
     */
    defaultColor: string;
    /**
     * Default text (font) color.
     */
    defaultTextColor: string;
    /**
     * Default stroke (line) color.
     */
    defaultStrokeColor: string;
    /**
     * Default fill color.
     */
    defaultFillColor: string;
    /**
     * Default background color.
     */
    defaultBackgroundColor: string;
    /**
     * Stores a collection of color settings grouped by context (type or module name).
     */
    protected _colors: Map<string, Map<ColorType, string>>;
    /**
     * Returns a color setting by provided context and type of color.
     * @param context type or module name
     * @param type color kind (text, fill, stroke, etc.)
     * @returns CSS color string for the context-type pair or the default color for the type.
     */
    getColor(context: string, type: ColorType): string;
    /**
     * Sets contextual color setting value.
     * @param context setting group (stencil or connector type, etc.)
     * @param type type of color (text, stroke, fill, etc.)
     * @param color string color value.
     */
    setContextColor(context: string, type: ColorType, color: string): void;
    /**
     * Default stroke dash array.
     *
     * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
     * docs for details.
     */
    defaultStrokeDasharray: string;
    /**
     * Gets the stroke dash array setting for the provided type (context) or the default stroke dash array, if not found.
     * @param context type or module name (or other context)
     * @returns stroke dash array for the context or the {@link defaultStrokeDasharray}.
     */
    getDashArray(context: string): string;
    /**
     * Sets custom dash array for the provided context (type or module name).
     * @param context type or module name
     * @param value dash array value
     */
    setContextDashArray(context: string, value: string): void;
    /**
     * Default stroke width.
     */
    defaultStrokeWidth: string;
    /**
     * Returns stroke width for the specified context (type or module name) or the default stroke width.
     * @param context type or module name
     * @returns stroke width for the context or {@link defaultStrokeWidth}
     */
    getStrokeWidth(context: string): string;
    /**
     * Sets custom stroke width for the provided context (type or module name).
     * @param context type or module name
     * @param value stroke width value
     */
    setContextStrokeWidth(context: string, value: string): void;
    /**
     * Default font family.
     */
    defaultFontFamily: string;
    /**
     * A collection of font family settings for different contexts (type or module names).
     */
    protected _fontFamily: Map<string, string>;
    /**
     * Returns special font family for the provided context or the default font family.
     * @param context type or module name (or other context)
     * @returns custom font family for the context or {@link defaultFontFamily}
     */
    getFontFamily(context: string): string;
    /**
     * Sets custom font family for the specified context.
     * @param context type or module name
     * @param value font family string
     */
    setContextFontFamily(context: string, value: string): void;
    /**
     * Default font size.
     */
    defaultFontSize: FontSize;
    /**
     * A collection of contextual font sizes.
     */
    private _fontSizes;
    /**
     * Returns a custom font size for the specified context or the default font size.
     * @param context type or module name
     * @returns custom font size or {@link defaultFontSize}
     */
    getFontSize(context: string): FontSize;
    /**
     * Sets custom font size for the supplied context.
     * @param context type or module name
     * @param value font size value
     */
    setContextFontSize(context: string, value: FontSize): void;
}

/**
 * Describes point objects used internally
 */
interface IPoint {
    /**
     * Horizontal (X) coordinate.
     */
    x: number;
    /**
     * Vertical (Y) coordinate.
     */
    y: number;
}

/**
 * Represents a location of a port on a rectangular stencil frame.
 */
declare type PortLocation = 'topleft' | 'topcenter' | 'topright' | 'leftcenter' | 'rightcenter' | 'bottomleft' | 'bottomcenter' | 'bottomright';
/**
 * Port is where connectors connects to a stencil.
 */
declare class Port {
    /**
     * Location of the port on the stencils frame.
     */
    location: PortLocation;
    /**
     * Is this port enabled. When set to false the port will not be visible in the connection mode
     * in the {@link editor!DiagramEditor}.
     */
    enabled: boolean;
    /**
     * Connecrtors connected to the port.
     */
    connectors: ConnectorBase[];
    /**
     * Horizontal coordinate of the port within the stencil.
     */
    x: number;
    /**
     * Vertical coordinate of the port within the stencil.
     */
    y: number;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(location: PortLocation);
    /**
     * Removes the supplied connector from the port.
     * @param connector connector to remove
     */
    removeConnector(connector: ConnectorBase): void;
}

/**
 * Describes a size
 */
interface ISize {
    width: number;
    height: number;
}

/**
 * Represents state (configuration) of a stencil.
 * Used to save and restore stencils as well as for undo/redo operations.
 */
interface StencilBaseState {
    /**
     * String representation of the stencil's type name.
     */
    typeName: string;
    /**
     * Internal stencil id. Used to refer to the stencil in connectors, etc.
     */
    iid: number;
    /**
     * Arbitrary string data that can be saved along with the stencil's state.
     */
    notes?: string;
    /**
     * Horizontal coordinate of the stencil.
     */
    left: number;
    /**
     * Vertical coordinate of the stencil.
     */
    top: number;
    /**
     * Stencil's width.
     */
    width?: number;
    /**
     * Stencil's height.
     */
    height?: number;
    /**
     * Fill color.
     */
    fillColor?: string;
    /**
     * Stroke color.
     */
    strokeColor?: string;
    /**
     * Stroke width in pixels.
     */
    strokeWidth?: number;
    /**
     * Stroke dash array.
     * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
     * docs for details.
     */
    strokeDasharray?: string;
}

/**
 * The `StencilBase` class is the base class for all stencil types in MJS Diagram.
 *
 * It covers the basic functionality and APIs for all other stencil types.
 */
declare class StencilBase {
    /**
     * A string representation of the type used
     * in diagram configuration (state) JSON.
     */
    static typeName: string;
    /**
    * A string representation of the type used
    * in diagram configuration (state) JSON.
    *
    * @remarks
    * Instance accessor returning the value of static {@link typeName}.
    */
    get typeName(): string;
    /**
     * Default name of the stencil.
     */
    static title: string;
    /**
     * Returns the main SVG path of the stencil's visual.
     * It is used in thumbnails in  the editor and, potentially, other places.
     * @param width target width
     * @param height target height
     * @returns SVG path string
     */
    protected static getPathD(width: number, height: number): string;
    private _iid;
    /**
     * Internal stencil identifier used in state/configuration JSON
     * as reference to this stencil.
     */
    get IId(): number;
    /**
     * Top level SVG container (group) encapsulating all the visual elements of this stencil.
     */
    protected _container: SVGGElement;
    /**
     * {@inheritDoc _container}
     */
    get container(): SVGGElement;
    private _settings;
    /**
     * Settings for the whole diagram.
     */
    protected get settings(): DiagramSettings;
    /**
     * Store any arbitrary string information associated with this stencil in this field.
     */
    notes?: string;
    /**
     * Fired when the stencil creation is completed.
     * @group Events
     */
    onStencilCreated?: (stencil: StencilBase) => void;
    /**
     * Default size of the stencil when created.
     *
     * @remarks
     * Override in the descendant stencils to set a size that makes sense for the stencil type.
     */
    protected _defaultSize: ISize;
    /**
     * Returns the default size of the stencil.
     */
    get defaultSize(): ISize;
    /**
     * Sets the default and updates the current stencil size.
     */
    set defaultSize(value: ISize);
    /**
     * Left (x) coordinate of the stencil.
     */
    left: number;
    /**
     * Top (y) coordinate of the stencil.
     */
    top: number;
    /**
     * Stencil width.
     */
    width: number;
    /**
     * Stencil height.
     */
    height: number;
    /**
     * Returns the right edge (x) coordinate (calculated).
     */
    get right(): number;
    /**
     * Returns the bottom edge (y) coordinate (calculated)
     */
    get bottom(): number;
    /**
     * Returns the stencil center X coordinate (calculated).
     */
    protected get centerX(): number;
    /**
     * Returns the stencil center Y coordinate (calculated).
     */
    protected get centerY(): number;
    /**
     * Stencil's frame path for selection. Usually an extended (wider) version of the {@link _frame}.
     */
    protected _selectorFrame?: SVGElement;
    /**
     * Stencil's frame path. Usually the main stencil visual.
     */
    protected _frame?: SVGElement;
    private _visual;
    /**
     * Returns the SVG group holding the stencil's visual.
     */
    protected get visual(): SVGGraphicsElement;
    /**
     * Sets the stencil's visual.
     */
    protected set visual(value: SVGGraphicsElement);
    /**
     * Stencil's fill color.
     */
    protected _fillColor: string;
    /**
     * Returns stencil's fill color.
     */
    get fillColor(): string;
    /**
     * Stencil's outline (stroke) color.
     */
    protected _strokeColor: string;
    /**
     * Returns stencil's outline (stroke) color.
     */
    get strokeColor(): string;
    /**
     * Stencil's outline (stroke) width in pixels.
     */
    protected _strokeWidth: number;
    /**
     * Returns stencil's outline (stroke) width in pixels.
     */
    get strokeWidth(): number;
    /**
     * Stencil's outline dash array.
     *
     * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
     * docs for details.
     */
    protected _strokeDasharray: string;
    /**
     * Returns stencil's outline dash array.
     *
     * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
     * docs for details.
     */
    get strokeDasharray(): string;
    /**
     * Holds a collection of connector ports for this stencil.
     */
    ports: Map<PortLocation, Port>;
    /**
     * Specifies whether stencil's fill can be changed by the user.
     */
    fillEditable: boolean;
    /**
     * Specifies whether stencil's stroke properties can be changed by the user.
     */
    strokeEditable: boolean;
    /**
     * Creates a stencil object.
     * @param iid internal stencil identifier
     * @param container SVG container for all the stencil's visuals
     * @param settings settings for the whole diagram
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    /**
     * Returns the base thumbnail SVG image scaffolding (SVG image element).
     * @param width image width
     * @param height image height
     * @returns SVG image element
     */
    protected static getThumbnailSVG(width: number, height: number): SVGSVGElement;
    /**
     * Returns a simplified thumbnail representation of the stencil as an SVG image.
     * It is used by the editor and can potentially be used in other places.
     * @param width image width
     * @param height image height
     * @returns thumbnail as an SVG image
     */
    static getThumbnail(width: number, height: number): SVGSVGElement;
    /**
     * Returns true if supplied element is a part of this stencil.
     * @param el target element
     * @returns `true` if the element if part of this stencil, `false` otherwise.
     */
    ownsTarget(el: EventTarget): boolean;
    dispose(): void;
    /**
     * Scales the stencil according to supplied scale factors.
     * @param scaleX horizontal scale factor
     * @param scaleY vertical scale factor
     */
    scale(scaleX: number, scaleY: number): void;
    /**
     * Disables connector ports in specified locations
     * @remarks
     * By default all ports are enabled. Depending on the stencil type it makes
     * sense to disable some (or even all) of the ports.
     *
     * For example {@link core!DiamondStencil} has all the corner ports disabled
     * as the stencil visual has no visible parts there.
     * @param portLocations locations of the ports to disable.
     */
    disablePorts(...portLocations: PortLocation[]): void;
    /**
     * Instance method for getting the stencil path. Calls the static {@link getPathD}.
     * @param width bounding width
     * @param height bounding height
     * @returns stencil's SVG path string
     */
    protected getPathD(width: number, height: number): string;
    /**
     * Gets stencil's SVG path for the purpose of reacting to pointer and other events.
     *
     * @remarks
     * Some stencil types may have a visual that is very narrow or otherwise hard
     * to hit with a pointer. This method provides a way to get an alternative invisible
     * path that is easier to hit resulting in better user experience.
     *
     * By default it returns the same path as the {@link core!StencilBase#getPathD | main stencil path} though.
     * @param width target width
     * @param height target height
     * @returns SVG path string
     */
    getSelectorPathD(width: number, height: number): string;
    /**
     * Creates an invisible visual that acts as a more pronounced hit target
     * that is easier to hit with a pointer.
     */
    protected createSelector(): void;
    /**
     * Creates the main stencil's visual.
     */
    createVisual(): void;
    /**
     * Inserts the supplied element as the first child of the container.
     * @param element SVG element to insert
     */
    protected addVisualToContainer(element: SVGElement): void;
    /**
     * Moves the stencil visual to the specified coordinates.
     * @param point new stencil coordinates
     */
    moveVisual(point: IPoint): void;
    /**
     * Adjusts selector visual based on current stencil dimensions.
     */
    protected adjustSelector(): void;
    /**
     * Adjusts stencil visual based on current dimensions.
     */
    protected adjustVisual(): void;
    /**
     * Adjusts the stencil to current size and location.
     */
    setSize(): void;
    /**
     * Sets the stencil's outline (stroke) color.
     * @param color new color
     */
    setStrokeColor(color: string): void;
    /**
     * Sets the stencil's fill color.
     * @param color new color
     */
    setFillColor(color: string): void;
    /**
     * Sets the stencil's outline (stroke) width in pixels
     * @param width new width
     */
    setStrokeWidth(width: number | string): void;
    /**
     * Sets the stencil outline's dash array.
     *
     * @param dashes new dash array
     * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
     * docs for details.
     */
    setStrokeDasharray(dashes: string): void;
    /**
     * Returns coordinates for the port in specified location
     * @param location port location
     * @returns port center coordinates
     */
    getPortPosition(location: PortLocation): IPoint;
    /**
     * Positions all ports in their respective locations.
     */
    positionPorts(): void;
    /**
     * Positions the supplied port in specified location.
     * @param port port to position
     * @param x horizontal position
     * @param y vertical position
     */
    private positionPort;
    /**
     * Returns stencil state (configuration) used to save the whole diagram for future use
     * as well as for undo/redo operations.
     * @returns stencil state object
     */
    getState(): StencilBaseState;
    /**
     * Restores stencil configuration (settings) from a previously saved state.
     * @param state previously saved state object.
     */
    restoreState(state: StencilBaseState): void;
}

/**
 * TextBlock represents a block of text used across all text-based stencils and connector labels.
 */
declare class TextBlock {
    /**
     * Fired when text size changes.
     *
     * @group Events
     */
    onTextSizeChanged?: (textBlock: TextBlock) => void;
    private _text;
    /**
     * Returns the text block's text
     */
    get text(): string;
    /**
     * Sets the text block's text.
     */
    set text(value: string);
    /**
     * Text block's horizontal offset from the automatically calculated position.
     */
    offsetX: number;
    /**
     * Text block's vertical offset from the automatically calculated position.
     */
    offsetY: number;
    private _boundingBox;
    /**
     * Returns the bounding box where text should fit and/or be anchored.
     */
    get boundingBox(): DOMRect;
    /**
     * Sets the bounding box where text should fit and/or be anchored.
     */
    set boundingBox(value: DOMRect);
    private _labelBackground;
    /**
     * Returns the background rectangle (behind the text).
     */
    get labelBackground(): SVGRectElement;
    private _textElement;
    /**
     * Returns the text block's text element.
     */
    get textElement(): SVGTextElement;
    private _color;
    /**
     * Sets the text color.
     */
    set color(value: string);
    /**
     * Returns the text color.
     */
    get color(): string;
    private _fontFamily;
    /**
     * Returns the text's font family.
     */
    get fontFamily(): string;
    /**
     * Sets the text's font family.
     */
    set fontFamily(value: string);
    private _fontSize;
    /**
     * Returns the text's font size.
     */
    get fontSize(): FontSize;
    /**
     * Sets the text's font size.
     */
    set fontSize(value: FontSize);
    /**
     * Creates a text block
     * @param text initial text
     */
    constructor(text?: string);
    /**
     * Returns true if the text block contains the supplied element.
     * @param el element to test.
     * @returns true if the element belongs to the text block, false otherwise.
     */
    ownsTarget(el: EventTarget): boolean;
    private setupTextElement;
    /**
     * Renders text within the text block according to its settings.
     */
    renderText(): void;
    private applyFontStyles;
    private _textSize?;
    /**
     * Returns the size of the rectangle containing the text block's text.
     */
    get textSize(): DOMRect | undefined;
    /**
     * Positions the text within the text block.
     * @param textBlock
     */
    positionText(textBlock?: TextBlock): void;
    /**
     * Makes the text block content visible.
     */
    show(): void;
    /**
     * Hides the text block content.
     */
    hide(): void;
    /**
     * Shows the text block's dashed outline.
     */
    showControlBox(): void;
    /**
     * Hides the text block's dashed outline.
     */
    hideControlBox(): void;
}

/**
 * Defines location of arrows on a connector.
 *
 * - `both` - arrows displayed on both ends of a connector.
 * - `start` - arrow displayend on the start side of a connector.
 * - `end` - arrow displayed on the end side of a connector.
 * - `none` - no arrows are displayed.
 */
declare type ArrowType = 'both' | 'start' | 'end' | 'none';
/**
 * Represents the base type for all connectors in MJS Diagram.
 */
declare class ConnectorBase {
    /**
     * A string representation of the type used
     * in diagram configuration (state) JSON.
     */
    static typeName: string;
    /**
    * A string representation of the type used
    * in diagram configuration (state) JSON.
    *
    * @remarks
    * Instance accessor returning the value of static {@link typeName}.
    */
    get typeName(): string;
    private _iid;
    /**
     * Internal connector identifier used in state/configuration JSON
     * as reference to this connector.
     */
    get IId(): number;
    /**
     * SVG group containing all the SVG elements for this connector.
     */
    container: SVGGElement;
    /**
     * Reference to the stencil at the start tip of this connector.
     */
    startStencil?: StencilBase;
    /**
     * Reference to the stencil connector port and the start tip of this connector.
     */
    startPort?: Port;
    /**
     * Reference to the stencil at the end tip of this connector.
     */
    endStencil?: StencilBase;
    /**
     * Reference to the stencil connector port and the end tip of this connector.
     */
    endPort?: Port;
    /**
     * X coordinate of the start tip.
     */
    x1: number;
    /**
     * Y coordinate of the start tip.
     */
    y1: number;
    /**
     * X coordinate of the end tip.
     */
    x2: number;
    /**
     * Y coordinate of the end tip.
     */
    y2: number;
    /**
     * The top level SVG element (group) of the connector's visual.
     */
    visual: SVGGraphicsElement;
    /**
     * Visible connector line.
     */
    visibleLine: SVGLineElement | SVGPathElement;
    /**
     * Invisible wider connector line used to improve selection accuracy.
     */
    selectorLine: SVGLineElement | SVGPathElement;
    /**
     * Connector line color.
     */
    strokeColor: string;
    /**
     * Connector line width.
     */
    strokeWidth: number;
    /**
     * Connector line dash array.
     */
    strokeDasharray: string;
    _labelText: string;
    /**
     * Gets label text for the connector.
     */
    get labelText(): string;
    /**
     * Sets label text for the connector.
     */
    set labelText(value: string);
    /**
     * Text block displaying the connector label.
     */
    textBlock: TextBlock;
    /**
     * Bounding box for the label text.
     */
    textBoundingBox: DOMRect;
    /**
     * SVG polygon for the start tip arrow.
     */
    protected arrow1: SVGPolygonElement;
    /**
     * SVG polygon for the end tip arrow.
     */
    protected arrow2: SVGPolygonElement;
    /**
     * {@inheritDoc core!ArrowType}
     */
    arrowType: ArrowType;
    /**
     * Arrow height.
     */
    protected arrowBaseHeight: number;
    /**
     * Arrow width.
     */
    protected arrowBaseWidth: number;
    /**
     * Returns connector thumbnail used to define the shape of the connector in the {@link editor!DiagramEditor}.
     * @param width - thumbnail image width
     * @param height - thumbnail image height
     * @returns SVG image of the thumbnail.
     */
    static getThumbnail(width: number, height: number): SVGSVGElement;
    private _settings;
    /**
     * {@link core!DiagramSettings} of the whole diagram.
     */
    protected get settings(): DiagramSettings;
    /**
     * Creates a connector.
     * @param iid - connector identifier.
     * @param container - SVG container to contain all the connector visuals.
     * @param settings - whole diagram settings.
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    /**
     * Returns true if manipulation target belongs to this connector.
     */
    ownsTarget(el: EventTarget): boolean;
    /**
     * Creates visual elements of the connector.
     */
    createVisual(): void;
    /**
     * Creates the main visual of the connector.
     */
    createCoreVisual(): void;
    /**
     * Adds an element to the connector's container.
     * The elements are inserted in the beggining (lowest layer) of the stack.
     * @param element - element to add.
     */
    addVisualToContainer(element: SVGElement): void;
    private getArrowPoints;
    private createTips;
    /**
     * Adjusts layout of the connector.
     */
    adjust(): void;
    /**
     * Adjusts connector's end pointis.
     */
    adjustPoints(): void;
    /**
     * Gets coordinates of connector's line ending depending on the
     * arrow types and other factors.
     * @param baseEnding - base connector ending (as if there were no arrows, etc.)
     * @param port - port to which the connector is connected.
     * @returns - adjusted coordinates of connector line ending.
     */
    protected getEnding(baseEnding: IPoint, port?: Port): IPoint;
    /**
     * Gets coordinates of connector line endings adjusted based on arrow types
     * and other factors
     * @returns connector ending coordinates.
     */
    protected getEndings(): [IPoint, IPoint];
    /**
     * Adjusts connector visual based on updated position and other
     * circumnstances.
     */
    adjustVisual(): void;
    /**
     * Adjust connector tips (arrows).
     */
    adjustTips(): void;
    /**
     * Rotates arrows based on the connector tip position, connected ports, etc.
     */
    protected rotateArrows(): void;
    /**
     * Sets start tip position to supplied coordinates.
     * @param point new tip position.
     */
    setStartPosition(point: IPoint): void;
    /**
     * Sets end tip position to supplied coordinates.
     * @param point new tip position.
     */
    setEndPosition(point: IPoint): void;
    /**
     * Moves label to supplied offset coordinates.
     * @param offsetX horizontal offset from the auto-calculated position
     * @param offsetY vertical offset from the auto-calculated position.
     */
    moveLabel(offsetX?: number, offsetY?: number): void;
    /**
     * Calculates and sets the bounding box for the connector's label.
     */
    protected setTextBoundingBox(): void;
    /**
     * Sets the color of the connector's visual
     * @param color CSS compatible color.
     */
    setStrokeColor(color: string): void;
    /**
     * Sets the dash array of the connector's visual
     * @param dashes stroke dash array values.
     */
    setStrokeDasharray(dashes: string): void;
    /**
     * Sets the stroke width of the connector's visual
     * @param width stroke (line) width.
     */
    setStrokeWidth(width: number | string): void;
    /**
     * Sets connector's arrow type.
     * @param arrowType arrow type.
     */
    setArrowType(arrowType: ArrowType): void;
    /**
     * Scales the connector based on supplied scale factors.
     * @param scaleX horizontal scale factor.
     * @param scaleY vertical scale factor.
     */
    scale(scaleX: number, scaleY: number): void;
    /**
     * Returns connector's state (configuration) used for storing the diagram
     * and for undo/redo operations.
     * @returns connector state object.
     */
    getState(): ConnectorBaseState;
    /**
     * Restores connector settings from a previously saved state (configuration).
     * @param state previously saved or created state.
     * @param endPoints stencils and ports the connector is connecting.
     */
    restoreState(state: ConnectorBaseState, endPoints: ConnectorEndPoints): void;
}

/**
 * Represents a state (configuration) of a connector.
 * Used when storing and restoring connector state externally and for undo/redo operations.
 */
interface ConnectorBaseState {
    /**
     * Text representation of connector's type name.
     */
    typeName: string;
    /**
     * Internal connector identifier.
     */
    iid: number;
    /**
     * Identifier of the stencil at the start tip of the connector.
     */
    startStencilId?: number;
    /**
     * Location of the stencil connector port on the start tip of the connector.
     */
    startPortLocation?: PortLocation;
    /**
     * Identifier of the stencil at the end tip of the connector.
     */
    endStencilId?: number;
    /**
     * Location of the stencil connector port on the end tip of the connector.
     */
    endPortLocation?: PortLocation;
    /**
     * Horizontal offset of the connector's text label (as measured from the automatic position).
     */
    labelOffsetX?: number;
    /**
     * Vertical offset of the connector's text label (as measured from the automatic position).
     */
    labelOffsetY?: number;
    /**
     * Color of the connector line.
     */
    strokeColor?: string;
    /**
     * Width of the connector line (in pixels).
     */
    strokeWidth?: number;
    /**
     * Dash array for the connector line.
     *
     * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
     * docs for details.
     */
    strokeDasharray?: string;
    /**
     * Describes which tips of the connector end in arrows.
     */
    arrowType?: ArrowType;
    /**
     * Text of the connector's label.
     */
    labelText?: string;
}
/**
 * Describes connector's end point properties.
 */
interface ConnectorEndPoints {
    /**
     * Stencil at the start tip of the connector.
     */
    startStencil: StencilBase;
    /**
     * Port at the start tip of the connector.
     */
    startPort: Port;
    /**
     * Stencil at the end tip of the connector.
     */
    endStencil: StencilBase;
    /**
     * Port at the end tip of the connector.
     */
    endPort: Port;
}

/**
 * Represents diagram's state (configuration) used to save and restore
 * diagrams. It can also be used to construct diagrams from code.
 */
interface DiagramState {
    /**
     * Diagram document width.
     */
    width?: number;
    /**
     * Diagram document height.
     */
    height?: number;
    /**
     * Page background color.
     */
    backgroundColor?: string;
    /**
     * A collection of stencils.
     */
    stencils?: StencilBaseState[];
    /**
     * A collection of connectors.
     */
    connectors?: ConnectorBaseState[];
}

/**
 * Represents configuration (state) of stencils extending the {@link core!TextStencil}.
 */
interface TextStencilState extends StencilBaseState {
    /**
     * Text color.
     */
    color?: string;
    /**
     * Font family string.
     */
    fontFamily?: string;
    /**
     * Font size.
     */
    fontSize?: FontSize;
    /**
     * Text pading.
     */
    padding?: number;
    /**
     * Text content.
     */
    text?: string;
}

/**
 * TextStencil is the base type for all stencils with text in them.
 */
declare class TextStencil extends StencilBase {
    static typeName: string;
    static title: string;
    /**
     * Default text for the newly created stencil.
     */
    protected static DEFAULT_TEXT: string;
    private _color;
    /**
     * Returns stencil's text color.
     */
    get color(): string;
    /**
     * Sets the stencil's text color.
     */
    set color(value: string);
    private _fontFamily;
    /**
     * Returns the stencil's font family.
     */
    get fontFamily(): string;
    /**
     * Sets the stencil's font family.
     */
    set fontFamily(value: string);
    private _fontSize;
    /**
     * Returns the stencil's font size.
     */
    get fontSize(): FontSize;
    /**
     * Sets the stencil's font size.
     */
    set fontSize(value: FontSize);
    /**
     * Returns the default text for the stencil type.
     * @returns stencil type's default text.
     */
    protected getDefaultText(): string;
    private _text;
    /**
     * Returns the stencil's text.
     */
    get text(): string;
    /**
     * Sets the stencil's text.
     */
    set text(value: string);
    /**
     * Text padding from the bounding box.
     */
    protected padding: number;
    /**
     * Text's bounding box where text should fit and/or be anchored to.
     */
    textBoundingBox: DOMRect;
    /**
     * Text block handling the text rendering.
     */
    textBlock: TextBlock;
    /**
     * {@inheritDoc core!StencilBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    static getThumbnail(width: number, height: number): SVGSVGElement;
    ownsTarget(el: EventTarget): boolean;
    /**
     * Adds the text element to the stencil's visual.
     */
    protected addTextElement(): void;
    createVisual(): void;
    /**
     * Sets (adjusts) the text bounding box for the stencil.
     */
    protected setTextBoundingBox(): void;
    /**
     * Sets (adjusts) the stencil's size.
     */
    setSize(): void;
    /**
     * Sets the text color.
     * @param color text color
     */
    setColor(color: string): void;
    /**
     * Sets the font family.
     * @param font font family string
     */
    setFont(font: string): void;
    /**
     * Sets the font size.
     * @param fontSize font size
     */
    setFontSize(fontSize: FontSize): void;
    getState(): TextStencilState;
    restoreState(state: TextStencilState): void;
    scale(scaleX: number, scaleY: number): void;
}

/**
 * Rectangle text stencil is a common stencil type displaying a text string inside a rectangle.
 */
declare class RectangleTextStencil extends TextStencil {
    static typeName: string;
    static title: string;
    protected static getPathD(width: number, height: number): string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
}

/**
 * Ellipse stencil represents a generic ellipse (or a circle) that
 * can be used and extended in various diagram types.
 */
declare class EllipseStencil extends RectangleTextStencil {
    static typeName: string;
    static title: string;
    protected static getPathD(width: number, height: number): string;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    protected setTextBoundingBox(): void;
}

/**
 * Diamond (or rhombus) stencil is a common shape used in many diagram types.
 * For example, it represents a decision stencil in a Flowchart.
 */
declare class DiamondStencil extends RectangleTextStencil {
    static typeName: string;
    static title: string;
    protected static getPathD(width: number, height: number): string;
    /**
     * {@inheritDoc core!StencilBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    protected setTextBoundingBox(): void;
}

declare type ImageType = 'svg' | 'bitmap';
declare type TextLabelLocation = 'top' | 'right' | 'bottom' | 'left' | 'hidden';
interface ImageStencilState extends TextStencilState {
    imageType?: ImageType;
    imageSrc?: string;
    labelLocation?: TextLabelLocation;
}

/**
 * Base stencil type for stencils defined by a drawing or a raster image.
 */
declare class ImageStencil extends TextStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    /**
     * Inner SVG string content of an SVG image (w/o the SVG tags).
     */
    protected static svgString?: string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
    /**
     * Main SVG or image element of the stencil.
     */
    protected SVGImage?: SVGSVGElement | SVGImageElement;
    protected imageType: ImageType;
    protected _imageSrc?: string;
    get imageSrc(): string | undefined;
    set imageSrc(value: string | undefined);
    private _isImageSet;
    /**
     * Natural (real) width of the image.
     */
    protected naturalWidth: number;
    /**
     * Natural (real) height of the image.
     */
    protected naturalHeight: number;
    labelLocation: TextLabelLocation;
    /**
     * {@inheritDoc core!StencilBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    private _textBlockChangeProcessed;
    private textSizeChanged;
    protected setTextBoundingBox(): void;
    getSelectorPathD(width: number, height: number): string;
    ownsTarget(el: EventTarget): boolean;
    protected createImage(): void;
    createVisual(): void;
    adjustImage(): void;
    setStrokeColor(color: string): void;
    setFillColor(color: string): void;
    setStrokeWidth(width: number | string): void;
    setStrokeDasharray(dashes: string): void;
    setLabelLocation(location: TextLabelLocation): void;
    private toggleLabelVisibility;
    getState(): ImageStencilState;
    restoreState(state: ImageStencilState): void;
}

/**
 * Lightbulb icon stencil is an icon stencil displaying a lightbulb.
 * It's main purpose is to serve as a sample for creating icon/clipart
 * stencils by extending the {@link core!ImageStencil}.
 */
declare class LightbulbIconStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Label stencil is a simple text stencil with no outline or background.
 */
declare class LabelStencil extends TextStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

declare class CustomImageStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static getPathD(width: number, height: number): string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    setImageSrc(imageSrc?: string): void;
}

declare class BitmapImageStencil extends CustomImageStencil {
    static typeName: string;
    static title: string;
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Represents a curved connector.
 */
declare class CurvedConnector extends ConnectorBase {
    static typeName: string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
    /**
     * When set to `true` the last segment connected to the corner ports is drawn
     * at a 45 degree angle.
     */
    protected andgledCorners: boolean;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    private getPathD;
    protected rotateArrows(): void;
    protected getEnding(baseEnding: IPoint, port?: Port): IPoint;
    createCoreVisual(): void;
    adjustVisual(): void;
}

/**
 * Angled connector is a type of connector comprised of vertical and horizontal lines only.
 */
declare class AngledConnector extends ConnectorBase {
    static typeName: string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    private startLineDir;
    private endLineDir;
    private stepPoints;
    private getPathD;
    protected rotateArrows(): void;
    protected getEnding(baseEnding: IPoint, port?: Port): IPoint;
    createCoreVisual(): void;
    adjustVisual(): void;
    protected setTextBoundingBox(): void;
}

/**
 * Arrow connector is a type of simple straight connector with an arrow pre-enabled on the end tip.
 */
declare class ArrowConnector extends ConnectorBase {
    static typeName: string;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Represents a curved connector with an arrow pre-enabled on the end tip.
 */
declare class CurvedArrowConnector extends CurvedConnector {
    static typeName: string;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Represents an angled connector with an arrow pointer pre-set.
 */
declare class AngledArrowConnector extends AngledConnector {
    static typeName: string;
    /**
     * {@inheritDoc core!ConnectorBase.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Stencil type descriptor containing stencil type and its display name.
 */
interface IStencilProperties {
    /**
     * Stencil type.
     */
    stencilType: typeof StencilBase;
    /**
     * Stencil type's display name (if different from the original/default).
     */
    displayName?: string;
}
/**
 * Connector type descriptor.
 */
interface IConnectorProperties {
    /**
     * Connector type.
     */
    connectorType: typeof ConnectorBase;
    /**
     * Contextual connector type display name (if different from the original/default).
     */
    displayName?: string;
}
/**
 * Stencil set descriptor.
 */
interface IStencilSet {
    /**
     * Stencil set identifier
     */
    id: string;
    /**
     * Stencil set display name
     */
    displayName: string;
    /**
     * Stencil types available in the stencil set.
     */
    stencilTypes: IStencilProperties[];
    /**
     * Connector types available in the stencil set.
     */
    connectorTypes: IConnectorProperties[];
    /**
     * Returns contextual properties for the supplied stencil type within a stencil set.
     * @param stencilType stencil type
     */
    getStencilProperties(stencilType: typeof StencilBase | string): IStencilProperties | undefined;
    /**
     * Returns contextual connector type properties for the supplied connecter type within a stencil set.
     * @param connectorType connector type
     */
    getConnectorProperties(connectorType: typeof ConnectorBase | string): IConnectorProperties | undefined;
}
/**
 * Represents a collection of stencils and connectors defining a particular diagram type.
 *
 * To define some diagram type you would create a `StencilSet` containing stencil and connector types
 * that make sense in the context of a particular diagram type.
 */
declare class StencilSet implements IStencilSet {
    id: string;
    displayName: string;
    stencilTypes: IStencilProperties[];
    connectorTypes: IConnectorProperties[];
    /**
     * Creates a new `StencilSet`.
     */
    constructor(id: string, displayName?: string);
    getStencilProperties(stencilType: typeof StencilBase | string): IStencilProperties | undefined;
    getConnectorProperties(connectorType: typeof ConnectorBase | string): IConnectorProperties | undefined;
}

/**
 * Basic stencil set includes all the core stencils and connectors
 * available in MJS Diagram that are not special to any particular
 * diagram type.
 */
declare const basicStencilSet: StencilSet;

/**
 * Utility class to simplify SVG operations.
 */
declare class SvgHelper {
    /**
     * Creates SVG "defs".
     */
    static createDefs(): SVGDefsElement;
    /**
     * Sets attributes on an arbitrary SVG element
     * @param el - target SVG element.
     * @param attributes - set of name-value attribute pairs.
     */
    static setAttributes(el: SVGElement, attributes: Array<[string, string]>): void;
    /**
     * Creates an SVG rectangle with the specified width and height.
     * @param width
     * @param height
     * @param attributes - additional attributes.
     */
    static createRect(width: number | string, height: number | string, attributes?: Array<[string, string]>): SVGRectElement;
    /**
     * Creates an SVG line with specified end-point coordinates.
     * @param x1
     * @param y1
     * @param x2
     * @param y2
     * @param attributes - additional attributes.
     */
    static createLine(x1: number | string, y1: number | string, x2: number | string, y2: number | string, attributes?: Array<[string, string]>): SVGLineElement;
    /**
     * Creates an SVG polygon with specified points.
     * @param points - points as string.
     * @param attributes - additional attributes.
     */
    static createPolygon(points: string, attributes?: Array<[string, string]>): SVGPolygonElement;
    /**
     * Creates an SVG circle with the specified radius.
     * @param radius
     * @param attributes - additional attributes.
     */
    static createCircle(radius: number, attributes?: Array<[string, string]>): SVGCircleElement;
    /**
     * Creates an SVG ellipse with the specified horizontal and vertical radii.
     * @param rx
     * @param ry
     * @param attributes - additional attributes.
     */
    static createEllipse(rx: number, ry: number, attributes?: Array<[string, string]>): SVGEllipseElement;
    /**
     * Creates an SVG group.
     * @param attributes - additional attributes.
     */
    static createGroup(attributes?: Array<[string, string]>): SVGGElement;
    /**
     * Creates an SVG transform.
     */
    static createTransform(): SVGTransform;
    /**
     * Creates an SVG marker.
     * @param id
     * @param orient
     * @param markerWidth
     * @param markerHeight
     * @param refX
     * @param refY
     * @param markerElement
     */
    static createMarker(id: string, orient: string, markerWidth: number | string, markerHeight: number | string, refX: number | string, refY: number | string, markerElement: SVGGraphicsElement): SVGMarkerElement;
    /**
     * Creaes an SVG text element.
     * @param attributes - additional attributes.
     */
    static createText(attributes?: Array<[string, string]>): SVGTextElement;
    /**
     * Creates an SVG TSpan.
     * @param text - inner text.
     * @param attributes - additional attributes.
     */
    static createTSpan(text: string, attributes?: Array<[string, string]>): SVGTSpanElement;
    /**
     * Creates an SVG image element.
     * @param attributes - additional attributes.
     */
    static createImage(attributes?: Array<[string, string]>): SVGImageElement;
    /**
     * Creates an SVG point with the specified coordinates.
     * @param x
     * @param y
     */
    static createPoint(x: number, y: number): SVGPoint;
    /**
     * Creates an SVG path with the specified shape (d).
     * @param d - path shape
     * @param attributes - additional attributes.
     */
    static createPath(d: string, attributes?: Array<[string, string]>): SVGPathElement;
    /**
     * Creaes an SVG text element.
     * @param attributes - additional attributes.
     */
    static createForeignObject(attributes?: Array<[string, string]>): SVGForeignObjectElement;
    /**
     * Returns local coordinates relative to the provided `localRoot` of a client (screen) point.
     * @param localRoot relative coordinate root
     * @param x horizontal client coordinate
     * @param y vertical client coordinate
     * @param zoomLevel zoom level
     * @returns local coordinates relative to `localRoot`
     */
    static clientToLocalCoordinates(localRoot: SVGElement | undefined, x: number, y: number, zoomLevel?: number): IPoint;
    /**
     * Creates an SVG image element from a supplied inner SVG markup string.
     * @param stringSvg SVG markup (without the root svg tags)
     * @returns SVG image element
     */
    static createSvgFromString(stringSvg: string): SVGSVGElement;
}

/**
 * Manages commercial licenses.
 * @ignore
 */
declare class Activator {
    private static keys;
    private static keyAddListeners;
    /**
     * Add a license key
     * @param product product identifier.
     * @param key license key sent to you after purchase.
     */
    static addKey(product: string, key: string): void;
    /**
     * Add a function to be called when license key is added.
     * @param listener
     */
    static addKeyAddListener(listener: () => void): void;
    /**
     * Remove a function called when key is added.
     * @param listener
     */
    static removeKeyAddListener(listener: () => void): void;
    /**
     * Returns true if the product is commercially licensed.
     * @param product product identifier.
     */
    static isLicensed(product: string): boolean;
}

/**
 * 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(): StencilSet;
    /**
     * Sets current {@link core!StencilSet}.
     */
    set stencilSet(value: 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;
}

/**
 * Location of the resize grip in relation to the stencil.
 */
declare type GripLocation = 'topleft' | 'topcenter' | 'topright' | 'leftcenter' | 'rightcenter' | 'bottomleft' | 'bottomcenter' | 'bottomright';
/**
 * Represents a single resize-manipulation grip used in marker's manipulation controls.
 */
declare class ResizeGrip {
    enabled: boolean;
    /**
     * Grip's visual element.
     */
    visual: SVGGraphicsElement;
    /**
     * Grip's size (raduis).
     */
    readonly GRIP_SIZE = 10;
    /**
     * Creates a new grip.
     */
    constructor();
    /**
     * Returns true if passed SVG element belongs to the grip. False otherwise.
     *
     * @param el - target element.
     */
    ownsTarget(el: EventTarget): boolean;
}

/**
 * String name value pairs.
 */
declare class StringSet extends Map<string, string> {
}
/**
 * Collection of string sets by language.
 */
declare class LangStringSet extends Map<string, StringSet> {
}
/**
 * Collection of language strings for a module.
 */
declare class ModuleStringSet extends Map<string, LangStringSet> {
}
/**
 * Simple language (localization) subsystem.
 */
declare class Language {
    private stringStore;
    /**
     * Default language.
     *
     * Used when strings are requested without specifying a language.
     */
    defaultLang: string;
    /**
     * Default module name.
     *
     * Used when strings are requested without specifying a module.
     */
    defaultModule: string;
    /**
     * Add strings for a module and language.
     * @param module module name.
     * @param lang language identifier.
     * @param strings string setting values.
     */
    addStrings(module: string, lang: string, strings: StringSet | Array<[string, string]>): void;
    /**
     * Gets a string for specified key, module and language.
     * @param key identifier of the string.
     * @param module module name.
     * @param lang language identifier.
     * @returns localized string.
     */
    getString(key: string, module?: string, lang?: string): string | undefined;
}

/**
 * Base class for all property panels.
 */
declare abstract class PropertyPanelBase {
    /**
     * Panel title.
     */
    title: string;
    /**
     * Language (localization) subsystem.
     */
    protected language: Language;
    /**
     * Creates a new panel.
     * @param title
     * @param language
     */
    constructor(title: string, language: Language);
    /**
     * Returns panel UI.
     */
    abstract getUi(): HTMLDivElement;
}

/**
 * Color class represents a color used in swatches in the editor UI.
 * In addition to the CSS color value it allows for a custom label to present the color
 * to the user.
 */
declare class Color {
    /**
     * CSS-compatible color value.
     */
    value: string;
    private _label?;
    /**
     * Returns the label for the color.
     * If custom label isn't set it returns the real color value.
     */
    get label(): string;
    /**
     * Sets a custom label (name) for the color.
     */
    set label(value: string | undefined);
    /**
     * Creates a Color object based on supplied value and optional custom label.
     * @param value
     * @param label
     */
    constructor(value: string, label?: string);
}

/**
 * Represents a collection of colors.
 *
 * @see {@link Color}
 */
declare class ColorSet extends Array<Color> {
    /**
     * Creates a new ColorSet from a list of colors.
     * @param colors comma-separated list of colors.
     */
    constructor(...colors: (Color | string)[]);
}

/**
 * Represents a font family (for text properties).
 */
declare class FontFamily {
    /**
     * CSS font family string.
     */
    value: string;
    private _label?;
    /**
     * Get the display label for the font family value.
     */
    get label(): string;
    /**
     * Sets the display label for the font family value.
     */
    set label(value: string | undefined);
    /**
     * Creates a new font family object.
     * @param value CSS font-family setting value.
     * @param label optional label describing the font family.
     */
    constructor(value: string, label?: string);
}

/**
 * Editor settings is a class for holding the default and custom settings for
 * stencils and connector types.
 */
declare class EditorSettings extends DiagramSettings {
    private _contextStringArrays;
    /**
     * Returns a string array setting for provided context and setting name.
     * @param context setting group (stencil or connector type, etc.)
     * @param name setting name.
     * @returns string array setting value.
     */
    getContextStringArray(context: string, name: string): string[] | undefined;
    /**
     * Sets the contextual string array setting.
     * @param context setting group (stencil or connector type, etc.)
     * @param name setting name.
     * @param value string array setting value.
     */
    setContextStringArray(context: string, name: string, value: string[]): void;
    /**
     * Default colors for text.
     */
    defaultTextColorSet: ColorSet;
    /**
     * Default stroke (line, outline) color set.
     */
    defaultStrokeColorSet: ColorSet;
    /**
     * Default fill color set.
     */
    defaultFillColorSet: ColorSet;
    /**
     * Default background color set.
     */
    defaultBackgroundColorSet: ColorSet;
    private _colorSets;
    /**
     * Returns a contextual color set.
     * @param context setting group (stencil or connector type, etc.)
     * @param type type of color (fill, stroke, text, etc.)
     * @returns contextual color set.
     */
    getColorSet(context: string, type: ColorType): ColorSet;
    /**
     * Sets a contextual color set.
     * @param context setting group (stencil or connector type, etc.)
     * @param type type of color (fill, stroke, text, etc.)
     * @param colorSet color set value.
     */
    setContextColorSet(context: string, type: ColorType, colorSet: ColorSet): void;
    /**
     * Default stroke dash array collection.
     *
     * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
     * docs for details.
     */
    defaultStrokeDasharrays: string[];
    /**
     * Returns a contextual dash array.
     *
     * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
     * docs for details.
     *
     * @param context setting group (stencil or connector type, etc.)
     * @returns dash array.
     */
    getDashArrays(context: string): string[];
    /**
     * Sets a contextual dash array setting.
     *
     * @see MDN [stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)
     * docs for details.
     *
     * @param context setting group (stencil or connector type, etc.)
     * @param value dash array value
     */
    setContextDashArrays(context: string, value: string[]): void;
    /**
     * Array of default stroke width options (in pixels).
     */
    defaultStrokeWidths: string[];
    /**
     * Returns a contextual stroke width collection setting.
     * @param context setting group (stencil or connector type, etc.)
     * @returns stroke width collection (in pixels)
     */
    getStrokeWidths(context: string): string[];
    /**
     * Sets a contextual stroke width collection setting.
     * @param context setting group (stencil or connector type, etc.)
     * @param value stroke width array.
     */
    setContextStrokeWidths(context: string, value: string[]): void;
    /**
     * Default collection of font families.
     */
    defaultFontFamilies: FontFamily[];
    private _fontFamilies;
    /**
     * Returns a contextual collection of font families.
     * @param context setting group (stencil or connector type, etc.)
     * @returns collection of font families for the context.
     */
    getFontFamilies(context: string): FontFamily[];
    /**
     * Sets a contextual collection of font families.
     * @param context setting group (stencil or connector type, etc.)
     * @param value array of font families.
     */
    setContextFontFamilies(context: string, value: FontFamily[]): void;
}

/**
 * Represents properties passed to the connector editor constructor.
 *
 * @see {@link editor!ConnectorBaseEditor}
 */
interface ConnectorEditorProperties {
    /**
     * Internal identifier for the connector.
     */
    iid: number;
    /**
     * SVG container for the connector and editor elements.
     */
    container: SVGGElement;
    /**
     * HTML overlay container for editor's elements (such as label text editor).
     */
    overlayContainer: HTMLDivElement;
    /**
     * Settings for the editor.
     */
    settings: EditorSettings;
    /**
     * Language (localization) subsystem.
     */
    language: Language;
    /**
     * Type of the connector [to create].
     */
    connectorType: typeof ConnectorBase;
    /**
     * Previously created connector to edit.
     */
    connector?: ConnectorBase;
}

/**
 * Represents the state of the connector editor.
 */
declare type ConnectorState = 'new' | 'creating' | 'select' | 'move' | 'edit' | 'move-label';
/**
 * ConnectorBaseEditor covers basic connector creating and editing features.
 * It is used to edit most of the common connector types that don't require
 * some special editor treatment.
 */
declare class ConnectorBaseEditor {
    /**
     * Current state of the connector editor.
     */
    protected _state: ConnectorState;
    /**
     * Returns current state of the connector editor.
     */
    get state(): ConnectorState;
    /**
     * Fired when the connector creation is completed.
     * @group Events
     */
    onConnectorCreated?: (connector: ConnectorBaseEditor) => void;
    /**
     * Fired when the connector is changed (moved, edited, etc.).
     * @group Events
     */
    onConnectorUpdated?: (connector: ConnectorBaseEditor) => void;
    /**
     * Initial X coordinate where pointer manipulation has started.
     */
    protected manipulationStartX: number;
    /**
     * Initial Y coordinate where pointer manipulation has started.
     */
    protected manipulationStartY: number;
    /**
     * Pointer's X coordinate after the previous pointer event.
     */
    protected prevX: number;
    /**
     * Pointer's Y coordinate after the previous pointer event.
     */
    protected prevY: number;
    private manipulationStartX1;
    private manipulationStartY1;
    private manipulationStartX2;
    private manipulationStartY2;
    private isDraggingLabel;
    private textBlockEditor;
    /**
     * Container for control elements.
     */
    protected controlBox: SVGGElement;
    /**
     * First manipulation grip
     */
    protected grip1: ResizeGrip;
    /**
     * Second manipulation grip.
     */
    protected grip2: ResizeGrip;
    /**
     * Active manipulation grip.
     */
    protected activeGrip?: ResizeGrip;
    /**
     * Connector being edited by this connector editor.
     */
    connector: ConnectorBase;
    /**
     * Reference to the port being moved.
     */
    movingPort?: Port;
    /**
     * SVG group container encapsulating all the connector's elements.
     */
    protected _container: SVGGElement;
    /**
     * Returns the SVG group container for the connector's elements.
     */
    get container(): SVGGElement;
    /**
     * HTML overlay container for editor elements like text editor, etc.
     */
    protected overlayContainer: HTMLDivElement;
    private strokePanel;
    private arrowTypePanel;
    private lineStylePanel;
    private lineWidthPanel;
    private _settings;
    /**
     * Returns editor settings.
     */
    protected get settings(): EditorSettings;
    /**
     * Language (localization) subsystem instance.
     */
    protected _language: Language;
    /**
     * Creates a new instance of the connector editor.
     * @param properties connector editor properties.
     */
    constructor(properties: ConnectorEditorProperties);
    /**
     * Returns true if the supplied element (event target) belongs to this connector
     * or connector editor.
     * @param el target element.
     * @returns true if the element belongs to the connector or editor.
     */
    ownsTarget(el: EventTarget | null): boolean;
    /**
     * Is connector selected?
     */
    protected _isSelected: boolean;
    /**
     * Returns true if the connector is currently selected.
     */
    get isSelected(): boolean;
    /**
     * Selects the connector.
     */
    select(): void;
    /**
     * Deselects the connector.
     */
    deselect(): void;
    /**
     * Hides the connector editor controls.
     */
    protected hideControlBox(): void;
    /**
     * Shows the connector editor controls.
     */
    protected showControlBox(): void;
    /**
     * Handles `pointerdown` event on the connector editor.
     * @param point pointer location.
     * @param target immediate pointer event target.
     */
    pointerDown(point: IPoint, target?: EventTarget): void;
    /**
     * Handles double-click event on the connector - opens the text editor for the label.
     * @param point pointer location.
     * @param target immediate event target.
     */
    dblClick(point: IPoint, target?: EventTarget): void;
    /**
     * Handles pointer manipulation depending on the editor's state (movement, resizing, etc.)
     * @param point pointer location.
     */
    manipulate(point: IPoint): void;
    /**
     * Resizes the connector.
     * @param point pointer location.
     */
    protected resize(point: IPoint): void;
    /**
     * Creates the control box for the editor.
     */
    protected setupControlBox(): void;
    private adjustControlBox;
    /**
     * Adds control grips to the editor.
     */
    protected addControlGrips(): void;
    /**
     * Creates a control grip (for resizing).
     * @returns created grip.
     */
    protected createGrip(): ResizeGrip;
    /**
     * Positions control grips according to the connector's position.
     */
    protected positionGrips(): void;
    /**
     * Positions a control grip at specified location.
     * @param grip grip to position.
     * @param x horizontal coordinate.
     * @param y vertical coordinate.
     */
    protected positionGrip(grip: SVGGraphicsElement, x: number, y: number): void;
    /**
     * Handles the `pointerup` event.
     * @param point pointer location.
     */
    pointerUp(point: IPoint): void;
    private showTextEditor;
    private positionTextEditor;
    private textChanged;
    /**
     * Returns diagram editor property panels for the connector.
     */
    get propertyPanels(): PropertyPanelBase[];
    /**
     * Disposes of the editor.
     */
    dispose(): void;
    /**
     * Scales the connector and editor.
     * @param scaleX horizontal scale factor.
     * @param scaleY vertical scale factor.
     */
    scale(scaleX: number, scaleY: number): void;
    /**
     * Restores the connector's state and adjusts the editor accordingly.
     * @param state connector's state.
     * @param endPoints connector's end points.
     */
    restoreState(state: ConnectorBaseState, endPoints: ConnectorEndPoints): void;
}

/**
 * Visual representation of a port for connectors.
 *
 * @see {@link core!Port}
 */
declare class PortConnector {
    /**
     * Port the visual represents.
     */
    port: Port;
    /**
     * Port connector visual element.
     */
    visual: SVGGraphicsElement;
    /**
     * Visual size.
     */
    readonly PORT_SIZE = 5;
    /**
     * Creates a new visual for the port.
     * @param port underlying port.
     */
    constructor(port: Port);
    /**
     * Returns true if supplied element belongs to the port connector.
     * @param el target element.
     * @returns true if the element belongs to this port connector.
     */
    ownsTarget(el: EventTarget): boolean;
    /**
     * Updates the visual.
     */
    adjustVisual(): void;
}

/**
 * Describes the properties object passed to the {@link StencilBaseEditor} constructor.
 */
interface StencilEditorProperties {
    /**
     * Internal identifier for the stencil.
     */
    iid: number;
    /**
     * SVG container for the stencil and editor elements.
     */
    container: SVGGElement;
    /**
     * HTML overlay container for editor's HTML elements (such as label text editor).
     */
    overlayContainer: HTMLDivElement;
    /**
     * Settings for the editor.
     */
    settings: EditorSettings;
    /**
     * Language (localization) subsystem.
     */
    language: Language;
    /**
     * Type of stencil to create.
     */
    stencilType: typeof StencilBase;
    /**
     * Previously created stencil to edit.
     */
    stencil?: StencilBase;
}

/**
 * The state of the stencil editor.
 */
declare type StencilEditorState = 'new' | 'creating' | 'select' | 'focus' | 'move' | 'resize' | 'edit' | 'connect';
/**
 * The core stencil editor class for most stencil types.
 */
declare class StencilBaseEditor {
    /**
     * Type of the edited stencil.
     */
    protected _stencilType: typeof StencilBase;
    /**
     * Stencil being edited.
     */
    protected _stencil: StencilBase;
    /**
     * Returns the stencil being edited.
     */
    get stencil(): StencilBase;
    /**
     * SVG container for the stencil's and editor's visual elements.
     */
    protected _container: SVGGElement;
    /**
     * Returns the SVG container for the stencil's and editor's visual elements.
     */
    get container(): SVGGElement;
    /**
     * Overlay container for HTML elements like text editors, etc.
     */
    protected _overlayContainer: HTMLDivElement;
    /**
     * Overlay container for HTML elements like text editors, etc.
     */
    get overlayContainer(): HTMLDivElement;
    /**
     * Editor's state.
     */
    protected _state: StencilEditorState;
    /**
     * Gets editor's state.
     */
    get state(): StencilEditorState;
    /**
     * Sets editor's state.
     */
    set state(value: StencilEditorState);
    private _settings;
    /**
     * Editor settings and contextual settings manager.
     */
    protected get settings(): EditorSettings;
    /**
     * Resize grips.
     */
    protected resizeGrips: Map<GripLocation, ResizeGrip>;
    /**
     * Currently active grip.
     */
    protected activeGrip?: ResizeGrip;
    /**
     * Collection of ports.
     */
    protected portConnectors: Map<PortLocation, PortConnector>;
    /**
     * SVG group holding editor's control box.
     */
    protected _controlBox: SVGGElement;
    /**
     * SVG group holding resize grips.
     */
    protected _gripBox: SVGGElement;
    private readonly CB_DISTANCE;
    private _controlRect?;
    /**
     * SVG group for holding connector ports.
     */
    protected _portBox: SVGGElement;
    /**
     * Outline displayed in "connect" mode.
     */
    protected _connectorOutline?: SVGPathElement;
    private shapePanel;
    /**
     * Language (localization) subsystem.
     */
    protected _language: Language;
    /**
     * Creates a new stencil editor.
     * @param properties stencil editor properties.
     */
    constructor(properties: StencilEditorProperties);
    /**
     * Returns true if the element belongs to the stencil or the editor.
     * @param el target element.
     * @returns true if the element belongs to the stencil or editor.
     */
    ownsTarget(el: EventTarget | null): boolean;
    /**
     * Returns a port under the current pointer.
     * @param ev pointer event.
     * @param exact if true, returns the port exactly under the pointer, otherwise - closest.
     * @param zoomLevel current zoom level.
     * @returns target port.
     */
    getTargetPort(ev: PointerEvent | null, exact?: boolean, zoomLevel?: number): PortConnector | undefined;
    /**
     * Fired when stencil is created.
     */
    onStencilCreated?: (stencilEditor: StencilBaseEditor) => void;
    /**
     * Fired when stencil changes.
     */
    onStencilChanged?: (stencilEditor: StencilBaseEditor) => void;
    /**
     * Creates visuals for the stencil and editor.
     */
    protected setupVisuals(): void;
    private setupControlBox;
    private setupPortBox;
    private addResizeGrips;
    private addPorts;
    private positionGrips;
    private positionPorts;
    private positionGrip;
    /**
     * Hides the control box.
     */
    protected hideControlBox(): void;
    /**
     * Shows the control box.
     */
    protected showControlBox(): void;
    /**
     * Hides the port box.
     */
    protected hidePortBox(): void;
    /**
     * Shows the port box.
     */
    protected showPortBox(): void;
    private adjustControlBox;
    private adjustPortBox;
    /**
     * Switches the stencil editor to connect mode.
     */
    switchToConnectMode(): void;
    /**
     * Switches the stencil editor out of the connect mode.
     */
    switchConnectModeOff(): void;
    /**
     * Scales the editor and stencil.
     * @param scaleX horizontal scale factor.
     * @param scaleY vertical scale factor.
     */
    scale(scaleX: number, scaleY: number): void;
    /**
     * x coordinate of the top-left corner at the start of manipulation.
     */
    protected manipulationStartLeft: number;
    /**
     * y coordinate of the top-left corner at the start of manipulation.
     */
    protected manipulationStartTop: number;
    /**
     * Width at the start of manipulation.
     */
    protected manipulationStartWidth: number;
    /**
     * Height at the start of manipulation.
     */
    protected manipulationStartHeight: number;
    /**
     * x coordinate of the pointer at the start of manipulation.
     */
    protected manipulationStartX: number;
    /**
     * y coordinate of the pointer at the start of manipulation.
     */
    protected manipulationStartY: number;
    /**
     * Pointer's horizontal distance from the top left corner.
     */
    protected offsetX: number;
    /**
     * Pointer's vertical distance from the top left corner.
     */
    protected offsetY: number;
    /**
     * Initial actions when manipulation starts.
     * @param point pointer location
     */
    initManipulation(point: IPoint): void;
    /**
     * Handles a `pointerdown` event.
     * @param point pointer location.
     * @param target event target element.
     */
    pointerDown(point: IPoint, target?: EventTarget): void;
    /**
     * Handles a double-click event.
     * @param point pointer location.
     * @param target pointer event target.
     */
    dblClick(point: IPoint, target?: EventTarget): void;
    /**
     * Finds a resize grip by the target visual.
     * @param target event target.
     * @returns resize grip or undefined if not found.
     */
    protected findGripByVisual(target: SVGGraphicsElement): ResizeGrip | undefined;
    /**
     * Moves the stencil to specified location.
     * @param x horizontal location.
     * @param y vertical location.
     */
    moveStencilTo(x?: number, y?: number): void;
    /**
     * Handles manipulation.
     * @param point pointer location.
     */
    manipulate(point: IPoint): void;
    /**
     * Resizes the stencil.
     * @param point pointer location.
     */
    protected resize(point: IPoint): void;
    /**
     * Adjusts stencil and editor size.
     */
    protected setSize(): void;
    /**
     * When set to true `stencilcreate` event isn't fired.
     */
    protected _suppressStencilCreateEvent: boolean;
    pointerUp(point: IPoint): void;
    /**
     * Creates a stencil at specified location.
     * @param point location at which to create the stencil.
     */
    create(point: IPoint): void;
    /**
     * Is stencil selected?
     */
    protected _isSelected: boolean;
    /**
     * Returns true if the stencil is selected.
     */
    get isSelected(): boolean;
    /**
     * Is stencil in focus?
     */
    protected _isFocused: boolean;
    /**
     * Returns true if the stencil is in focus.
     */
    get isFocused(): boolean;
    /**
     * Select the stencil.
     */
    select(): void;
    /**
     * Deselect the stencil.
     */
    deselect(): void;
    /**
     * Puts the stencil editor in focus.
     */
    focus(): void;
    /**
     * Unfocus the stencil.
     */
    blur(): void;
    /**
     * Returns property panels for the UI for this stencil.
     */
    get propertyPanels(): PropertyPanelBase[];
    /**
     * Restores the stencil from previously saved state.
     * @param state stencil state (configuration)
     */
    restoreState(state: StencilBaseState): void;
}

/**
 * Stencil editor set descriptor.
 */
interface IStencilEditorSet {
    /**
     * Editor set identifier.
     */
    id: string;
    /**
     * {@link core!StencilSet} covered by the editor set.
     */
    stencilSet: StencilSet;
    /**
     * Display name for the editor set.
     */
    displayName?: string;
    /**
     * Localization strings.
     */
    defaultStringSet?: StringSet;
    /**
     * A mapping collection of stencils and corresponding editors.
     */
    stencilEditorTypes: Map<typeof StencilBase, typeof StencilBaseEditor>;
    /**
     * A mapping collection of connectors and corresponding editors.
     */
    connectorEditorTypes: Map<typeof ConnectorBase, typeof ConnectorBaseEditor>;
    /**
     * Connector types available in this stencil editor set.
     */
    availableConnectorTypes: typeof ConnectorBase[];
    /**
     * The default selected connector type.
     */
    defaultConnectorType: typeof ConnectorBase;
    /**
     * Returns the editor type for the supplied stencil type.
     * @param stencilType stencil type for editing.
     */
    getStencilEditor(stencilType: typeof StencilBase): typeof StencilBaseEditor;
    /**
     * Returns the connector editor type for the supplied connector type.
     * @param connectorType connector type for editing.
     */
    getConnectorEditor(connectorType: typeof ConnectorBase): typeof ConnectorBaseEditor;
}
/**
 * Represents a collection of stencil and connector types and respective editors
 * for a specific diagram type creation and editing.
 */
declare class StencilEditorSet implements IStencilEditorSet {
    id: string;
    stencilSet: IStencilSet;
    displayName?: string;
    defaultStringSet?: StringSet;
    defaultStencilEditor: typeof StencilBaseEditor;
    defaultConnectorEditor: typeof ConnectorBaseEditor;
    stencilEditorTypes: Map<typeof StencilBase, typeof StencilBaseEditor>;
    connectorEditorTypes: Map<typeof ConnectorBase, typeof ConnectorBaseEditor>;
    availableConnectorTypes: typeof ConnectorBase[];
    defaultConnectorType: typeof ConnectorBase;
    /**
     * The default document to load when creating a new diagram for this set.
     */
    newDocumentTemplate?: DiagramState;
    /**
     * Creates a new stencil editor set.
     * @param id editor set identifier.
     * @param stencilSet stencil set.
     */
    constructor(id: string, stencilSet: IStencilSet);
    /**
     * Returns an editor type for the provided stencil type.
     * @param stencilType stencil type.
     * @returns if specified returns a custom editor type for the supplied stencil type,
     * otherwise returns the default editor type for this stencil editor set.
     */
    getStencilEditor(stencilType: typeof StencilBase): typeof StencilBaseEditor;
    /**
     * Returns an editor type for the provided connector type.
     * @param connectorType connector type.
     * @returns if specified returns a custom editor type for the supplied connector type,
     * otherwise returns the default editor type for this stencil editor set.
     */
    getConnectorEditor(connectorType: typeof ConnectorBase): typeof ConnectorBaseEditor;
    /**
     * Adds an editor type for one or more stencil types.
     * @param editorType editor type.
     * @param stencilTypes list of stencil types to be edited by this editor.
     */
    addStencilEditor(editorType: typeof StencilBaseEditor, ...stencilTypes: (typeof StencilBase)[]): void;
    /**
     * Adds an editor type for one or more connector types.
     * @param editorType editor type.
     * @param connectorTypes list of connector types to be edited by this editor.
     */
    addConnectorEditor(editorType: typeof ConnectorBaseEditor, ...connectorTypes: (typeof ConnectorBase)[]): void;
}

/**
 * Diagram editor operation mode:
 *
 * - `select` - editor primarily treats pointer events for stencil/connector selection
 * - `connect` - editor primarily treats pointer events for connecting stencils
 */
declare type DiagramEditorMode = 'select' | 'connect';
/**
 * {@link editor!DiagramEditor} events.
 */
interface DiagramEditorEventMap {
    /**
     * Save button clicked.
     */
    saveclick: CustomEvent<RenderEventData>;
    /**
     * Editor initialized.
     */
    editorinit: CustomEvent<DiagramEditorEventData>;
    /**
     * Diagram loaded (restored).
     */
    diagramload: CustomEvent<DiagramEditorEventData>;
    /**
     * Diagram state changed.
     *
     * Fired on every stencil/connector creation, edit, deletion.
     */
    statechange: CustomEvent<DiagramEditorEventData>;
    /**
     * Pointer entered stencil space.
     */
    stencilpointerenter: CustomEvent<StencilEditorEventData>;
    /**
     * Pointer left stencil space.
     */
    stencilpointerleave: CustomEvent<StencilEditorEventData>;
    /**
     * Stencil clicked.
     */
    stencilclick: CustomEvent<StencilEditorEventData>;
    /**
     * Pointer entered connector space.
     */
    connectorpointerenter: CustomEvent<ConnectorEditorEventData>;
    /**
     * Pointer left connector space.
     */
    connectorpointerleave: CustomEvent<ConnectorEditorEventData>;
    /**
     * Connector clicked.
     */
    connectorclick: CustomEvent<ConnectorEditorEventData>;
}
/**
 * Defines the data object for the editor's render event.
 *
 * @see {@link editor!DiagramEditorEventMap.saveclick}
 */
interface RenderEventData {
    /**
     * Diagram's state (configuration).
     */
    state: DiagramState;
}
/**
 * Defines the data object for {@link DiagramEditor} level events.
 *
 * @see
 * - {@link DiagramEditorEventMap.editorinit}
 * - {@link DiagramEditorEventMap.diagramload}
 * - {@link DiagramEditorEventMap.statechange}
 */
interface DiagramEditorEventData {
    /**
     * {@link DiagramEditor} instance.
     */
    editor: DiagramEditor;
}
/**
 * Defines the data object for stencil related events.
 *
 * @see
 * - {@link DiagramEditorEventMap.stencilpointerenter}
 * - {@link DiagramEditorEventMap.stencilpointerleave}
 * - {@link DiagramEditorEventMap.stencilclick}
 */
interface StencilEditorEventData {
    /**
     * Diagram editor instance.
     */
    diagramEditor: DiagramEditor;
    /**
     * Stencil editor for the affected stencil.
     */
    stencilEditor: StencilBaseEditor;
}
/**
 * Defines the data object for connector releated events.
 *
 * @see
 * - {@link DiagramEditorEventMap.connectorpointerenter}
 * - {@link DiagramEditorEventMap.connectorpointerleave}
 * - {@link DiagramEditorEventMap.connectorclick}
 */
interface ConnectorEditorEventData {
    /**
     * Diagram editor instance.
     */
    diagramEditor: DiagramEditor;
    /**
     * Connector editor for the affected connector.
     */
    connectorEditor: ConnectorBaseEditor;
}
/**
 * DiagramEditor is the main diagram editing web component of the MJS Diagram library.
 *
 * You add an instance of DiagramEditor to your page to enable diagram editing.
 *
 * You can add it in your HTML markup as a custom element with something like this:
 *
 * ```html
 * <mjs-diagram-editor id="mjsDiaEditor"></mjs-diagram-editor>
 * ```
 *
 * Or you can add it in code.
 *
 * One important thing to set when the component loads is the {@link editor!StencilEditorSet} you want to use.
 *
 * Here we add a Flowchart stencil set:
 *
 * ```ts
 * let editor = document.getElementById('mjsDiaEditor');
 * editor.stencilEditorSet = flowchartStencilEditorSet;
 * ```
 *
 * You may want to add a previously saved state via the {@link DiagramEditor#restoreState}.
 *
 * Finally, you most probably want to handle the {@link editor!DiagramEditorEventMap.saveclick} event
 * to store the editing results:
 *
 * ```ts
 * editor.addEventListener('saveclick', (ev) => {
 *   // process state (represents the created diagram)
 *   console.log(ev.detail.state);
 * });
 * ```
 *
 * @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 DiagramEditor extends HTMLElement {
    private _container?;
    private _toolbarContainer?;
    private _contentContainer?;
    private _canvasContainer?;
    private _toolboxContainer?;
    private _overlayContainer;
    private _overlayContentContainer;
    private _internalUiContainer;
    private _logoUI?;
    private mode;
    private _isInitialized;
    private _mainCanvas?;
    private _groupLayer?;
    private _connectorLayer?;
    private _objectLayer?;
    private _currentStencilEditor?;
    private _selectedStencilEditors;
    private _stencilEditors;
    private _currentConnectorType;
    private _currentConnectorEditor?;
    private _connectorEditors;
    private _connectorTypePanel;
    private _newStencilPanel;
    private _alignPanel;
    private _arrangePanel;
    private _documentBackgroundPanel;
    private _documentDimensionsPanel;
    private _newStencilOutline;
    private _marqueeSelectOutline;
    private _marqueeSelectRect;
    /**
     * Steps zoom in/out buttons go through.
     */
    zoomSteps: number[];
    private _zoomLevel;
    /**
     * Returns the current zoom level.
     */
    get zoomLevel(): number;
    /**
     * Sets the current zoom level.
     */
    set zoomLevel(value: number);
    private _stencilEditorSet;
    /**
     * Returns the current stencil editor set.
     */
    get stencilEditorSet(): StencilEditorSet;
    /**
     * Sets the current stencil editor set.
     *
     * @remarks
     * Note that all the current edits are lost when new stencil set is set.
     */
    set stencilEditorSet(value: StencilEditorSet);
    private _toolboxPanel;
    private _toolbar?;
    protected _manipulationStartX: number;
    protected _manipulationStartY: number;
    private undoRedoManager;
    /**
     * Editor settings.
     *
     * Control available colors, font families, etc. through this property.
     */
    readonly settings: EditorSettings;
    /**
     * Enables multi-language support.
     */
    readonly languageManager: Language;
    set language(value: string);
    get language(): string;
    private _resizeObserver?;
    /**
     * Creates the new instance of the editor.
     */
    constructor();
    private _iid;
    /**
     * Generates a new internal identifier used to identify stencils and connectors when
     * serialized to the state JSON.
     * @returns new internally unique identifier.
     */
    getNewIId(): number;
    private setupPanels;
    private addStyles;
    private createLayout;
    private addToolbar;
    private addToolbox;
    private _currentToolboxPanels;
    private addToolboxPanel;
    private addToolboxPanels;
    private removeToolboxPanels;
    private _isToolboxVisible;
    private toggleToolbox;
    private toolbarButtonClicked;
    private showAddPanel;
    private toggleConnectMode;
    private showDocumentPropertiesPanel;
    private setDocumentBgColor;
    private setDocumentSize;
    private switchToConnectMode;
    private switchConnectModeOff;
    private deleteSelected;
    private findConnectorEditor;
    private deleteStencilEditor;
    private deleteConnector;
    private width;
    private height;
    private documentWidth;
    private documentHeight;
    private documentBgColor;
    private addMainCanvas;
    private setMainCanvasSize;
    private initOverlay;
    private initUiLayer;
    private connectedCallback;
    private disconnectedCallback;
    private applyStencilSet;
    private attachEvents;
    private attachWindowEvents;
    private detachEvents;
    private detachWindowEvents;
    private setupResizeObserver;
    private touchPoints;
    private isDragging;
    private isSelecting;
    private connectionStartPort?;
    private connectionEndPort?;
    private selectHitEditor;
    private pushToConnectorLayer;
    private popFromConnectorLayer;
    private deselectCurrentConnector;
    private selectHitConnector;
    private selectConnector;
    private onCanvasPointerDown;
    private onDblClick;
    private onPointerMove;
    private onCanvasPointerMove;
    private removeConnectorFromPort;
    private onCanvasPointerUp;
    private onCanvasPointerOut;
    private _currentHitEditor?;
    private getHitEditor;
    private getHitConnector;
    private onPointerUp;
    private onPointerOut;
    private onKeyUp;
    /**
     * Creates a new stencil of the specified type
     * @param stencilType stencil type as either type or its string representation
     */
    createNewStencil(stencilType: typeof StencilBase | string | undefined): void;
    private stencilCreated;
    private stencilChanged;
    private connectorCreated;
    private connectorUpdated;
    /**
     * Sets the currently active stencil editor. If multiple stencils are selected then
     * there's no "current" stencil. Passing nothing/undefined unsets the current stencil.
     * @param stencilEditor stencil editor to make active.
     */
    setCurrentStencil(stencilEditor?: StencilBaseEditor): void;
    /**
     * Selects a stencil. If there already is a selected stencil then the
     * supplied stencil is added to the selection.
     * @param stencilEditor stencil editor to select.
     */
    selectStencil(stencilEditor: StencilBaseEditor): void;
    /**
     * Removes the supplied stencil editor from selection. If no stencil editor is supplied,
     * all selected stencils are unselected.
     * @param stencilEditor stencil editor to select.
     */
    deselectStencil(stencilEditor?: StencilBaseEditor): void;
    private addNewStencil;
    private addNewConnector;
    private changeConnectorType;
    private finishMarqueeSelection;
    addEventListener<T extends keyof DiagramEditorEventMap>(type: T, listener: (this: DiagramEditor, ev: DiagramEditorEventMap[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 DiagramEditorEventMap>(type: T, listener: (this: DiagramEditor, ev: DiagramEditorEventMap[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;
    /**
     * Hides toolbar buttons for provided commands.
     *
     * Available buttons/commands:
     *
     * `select`, `delete`, `save`, `undo`, `redo`, `add`, `connect`, `document-setup`,
     * `zoomout`, `zoomin`, `zoomreset`, `properties`.
     *
     * This method can be used to both remove buttons to preserve space and simplify
     * user experience by removing unnecessary functions and to remove access to
     * certain functions. For example, you may constantly auto-save the diagram in your
     * code so the `save` button isn't necessary and misleading.
     *
     * @param commands list of commands
     *
     * @example
     * The code below hides `zoomreset` and `redo` buttons.
     *
     * ```typescript
     * editor.hideToolbarButtons('zoomreset', 'redo');
     * ```
     * @since 1.1.0
     */
    hideToolbarButtons(...commands: string[]): void;
    /**
     * Returns the diagram configration state object. Use it to store the state in databases, files, etc.
     * @returns diagram configuration as a serializable object.
     */
    getState(): DiagramState;
    private restoreConnector;
    /**
     * Restores (loads) previous saved (or manually created) diagram.
     * @param state diagram configuration object.
     */
    restoreState(state: DiagramState): void;
    /**
     * Zooms in or out to the supplied zoom level (1 = 100%).
     * @param factor zoom level.
     */
    zoom(factor: number): void;
    /**
     * Use this method to reneder the current diagram as a static raster image.
     * @param width target width
     * @param height target height
     * @param imageType image type (image/png, image/jpeg, etc.)
     * @param quality render quality for lossy codecs (1=100% for jpeg).
     * @returns rendered image as a [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs).
     */
    render(width?: number, height?: number, imageType?: string, quality?: number): Promise<string | undefined>;
    /**
     * Returns true if undo operation can be performed (undo stack is not empty).
     */
    get isUndoPossible(): boolean;
    /**
     * Returns true if redo operation can be performed (redo stack is not empty).
     */
    get isRedoPossible(): boolean;
    private addUndoStep;
    /**
     * Undo last action.
     */
    undo(): void;
    private undoStep;
    /**
     * Redo previously undone action.
     */
    redo(): void;
    private redoStep;
    /**
     * NOTE:
     *
     * before removing or modifying this method please consider supporting MJS Diagram
     * by visiting https://markerjs.com/buy for details
     *
     * thank you!
     */
    private toggleLogo;
    private addLogo;
    private removeLogo;
    private positionLogo;
    private readonly PAGE_MARGIN;
    private alignHorizontally;
    private alignVertically;
    private arrange;
}

/**
 * Color change event handler type.
 */
declare type ColorChangeHandler = (newColor: string) => void;
/**
 * Color picker tooblox panel.
 */
declare class ColorPickerPanel extends PropertyPanelBase {
    /**
     * Available colors.
     */
    colors: ColorSet;
    /**
     * Selected color.
     */
    currentColor?: string;
    private colorBoxes;
    /**
     * Color change event handler.
     */
    onColorChanged?: ColorChangeHandler;
    /**
     * {@inheritDoc editor!PropertyPanelBase.constructor}
     */
    constructor(title: string, language: Language, colors: ColorSet, currentColor?: string);
    getUi(): HTMLDivElement;
    private getColorBox;
    private setCurrentColor;
}

/**
 * Font family change event handler type.
 */
declare type FontFamilyChangeHandler = (newStyle: string) => void;
/**
 * Font size change event handler type.
 */
declare type FontSizeChangeHandler = (newSize: FontSize) => void;
/**
 * Font properties toolbox panel.
 */
declare class FontPanel extends PropertyPanelBase {
    /**
     * Available font families.
     */
    fontFamilies: FontFamily[];
    /**
     * Currently selected font family.
     */
    currentFontFamily?: string;
    /**
     * Current font size.
     */
    currentFontSize: FontSize;
    /**
     * Font family change event handler.
     */
    onFontFamilyChanged?: FontFamilyChangeHandler;
    /**
     * Font size change event handler.
     */
    onFontSizeChanged?: FontSizeChangeHandler;
    /**
     * Creates a new font properties panel
     * @param title panel title
     * @param language language (localization) subsystem
     * @param fontFamilies available font families
     * @param currentFontFamily select font family
     * @param currentFontSize current font size
     */
    constructor(title: string, language: Language, fontFamilies: FontFamily[], currentFontFamily?: string, currentFontSize?: FontSize);
    getUi(): HTMLDivElement;
    private setFontFamily;
    private setFontSize;
}

/**
 * Text properties panel controlled properties.
 */
interface TextPropertiesPanelProperties {
    /**
     * Available text colors.
     */
    textColors: ColorSet;
    /**
     * Selected text color.
     */
    textColor?: string;
    /**
     * Available font families.
     */
    fontFamilies: FontFamily[];
    /**
     * Selected font family.
     */
    fontFamily?: string;
    /**
     * Current font size.
     */
    fontSize?: FontSize;
}
/**
 * Toolbox meta-panel for text properties.
 */
declare class TextPropertiesPanel extends PropertyPanelBase {
    private colorPanel;
    private fontPanel;
    /**
     * Font color change event handler.
     */
    onColorChanged?: ColorChangeHandler;
    /**
     * Font family change event handler.
     */
    onFontFamilyChanged?: FontFamilyChangeHandler;
    /**
     * Font size change event handler.
     */
    onFontSizeChanged?: FontSizeChangeHandler;
    /**
     * Current text color.
     */
    textColor?: string;
    /**
     * Current font family.
     */
    fontFamily?: string;
    /**
     * Current font size.
     */
    fontSize?: FontSize;
    /**
     * Creates a new text properties panel.
     * @param title panel title
     * @param language language (localization) subsystem
     * @param properties panel properties
     */
    constructor(title: string, language: Language, properties: TextPropertiesPanelProperties);
    getUi(): HTMLDivElement;
    private colorChanged;
    private fontFamilyChanged;
    private fontSizeChanged;
}

/**
 * The default editor for the text-based stencils.
 */
declare class TextStencilEditor extends StencilBaseEditor {
    /**
     * Panel for the text-related editor properties.
     */
    protected textPanel: TextPropertiesPanel;
    /**
     * Returns the stencil being edited.
     */
    get stencil(): RectangleTextStencil;
    private textBlockEditor;
    private isMoved;
    private pointerDownPoint?;
    private pointerDownTimestamp;
    /**
     * Creates a new text stencil editor instance.
     * @param properties editor properties.
     */
    constructor(properties: StencilEditorProperties);
    get propertyPanels(): PropertyPanelBase[];
    pointerDown(point: IPoint, target?: EventTarget): void;
    dblClick(point: IPoint, target?: EventTarget): void;
    manipulate(point: IPoint): void;
    protected resize(point: IPoint): void;
    pointerUp(point: IPoint): void;
    private showTextEditor;
    private positionTextEditor;
    private textChanged;
    create(point: IPoint): void;
    select(): void;
    deselect(): void;
    protected setColor(color: string): void;
    protected setFont(font: string): void;
    protected hideVisual(): void;
    protected showVisual(): void;
    scale(scaleX: number, scaleY: number): void;
    restoreState(state: StencilBaseState): void;
}

/**
 * Specialized stencil editor for image stencils.
 *
 * @see {@link core!ImageStencil}
 */
declare class ImageStencilEditor extends TextStencilEditor {
}

/**
 * Text changed event handler type.
 */
declare type TextChangedHandler = (text: string) => void;
/**
 * Represents a text block editor element.
 */
declare class TextBlockEditor {
    private textEditor;
    private isInFocus;
    private _width;
    /**
     * Returns editor width in pixels.
     */
    get width(): number;
    /**
     * Sets editor width in pixels.
     */
    set width(value: number);
    private _height;
    /**
     * Returns editor height in pixels.
     */
    get height(): number;
    /**
     * Sets editor height in pixels.
     */
    set height(value: number);
    private _left;
    /**
     * Returns the horizontal (X) location of the editor's left corner (in pixels).
     */
    get left(): number;
    /**
     * Sets the horizontal (X) location of the editor's left corner (in pixels).
     */
    set left(value: number);
    private _top;
    /**
     * Returns the vertical (Y) location of the editor's top left corner (in pixels).
     */
    get top(): number;
    /**
     * Sets the vertical (Y) location of the editor's top left corner (in pixels).
     */
    set top(value: number);
    private _text;
    /**
     * Returns the text block text.
     */
    get text(): string;
    /**
     * Sets the text block text.
     */
    set text(value: string);
    private _fontFamily;
    /**
     * Returns text block's font family.
     */
    get fontFamily(): string;
    /**
     * Sets the text block's font family.
     */
    set fontFamily(value: string);
    private _fontSize;
    /**
     * Returns text block's font size.
     */
    get fontSize(): string;
    /**
     * Sets text block's font size.
     */
    set fontSize(value: string);
    private _textColor;
    /**
     * Returns text block's font color.
     */
    get textColor(): string;
    /**
     * Returns text block's font color.
     */
    set textColor(value: string);
    /**
     * Text changed event handler.
     */
    onTextChanged?: TextChangedHandler;
    /**
     * Creates a new text block editor instance.
     */
    constructor();
    private isSetupCompleted;
    private setup;
    /**
     * Returns editor's UI,
     * @returns UI in a div element.
     */
    getEditorUi(): HTMLDivElement;
    /**
     * Focuses text editing in the editor.
     */
    focus(): void;
    /**
     * Unfocuses the editor.
     */
    blur(): void;
}

/**
 * Horizontal alignment options.
 */
declare type HorizontalAlignment = 'left' | 'center' | 'right';
/**
 * Vertical alignment options.
 */
declare type VerticalAlignment = 'top' | 'middle' | 'bottom';
/**
 * Horizontal alignment change event handler type.
 */
declare type HorizontalAlignmentClickHandler = (alignment: HorizontalAlignment) => void;
/**
 * Vertical alignment change event handler type.
 */
declare type VerticalAlignmentClickHandler = (alignment: VerticalAlignment) => void;
/**
 * Toolbox panel for editing object and text alignment.
 */
declare class AlignPanel extends PropertyPanelBase {
    /**
     * Horizontal alignmen change event handler.
     */
    onHorizontalAlignmentClicked?: HorizontalAlignmentClickHandler;
    /**
     * Vertical alignment change event handler.
     */
    onVerticalAlignmentClicked?: VerticalAlignmentClickHandler;
    /**
     * {@inheritDoc editor!PropertyPanelBase.constructor}
     */
    constructor(title: string, language: Language);
    getUi(): HTMLDivElement;
    private horizontalAlignmentClicked;
    private verticalAlignmentClicked;
}

/**
 * Arrangement options.
 */
declare type ArrangementType = 'front' | 'forward' | 'backward' | 'back';
/**
 * Arrange event handler type.
 */
declare type ArrangeClickHandler = (arrange: ArrangementType) => void;
/**
 * Object arrangemen panel.
 */
declare class ArrangePanel extends PropertyPanelBase {
    /**
     * Handler for the arrange event.
     */
    onArrangeClicked?: ArrangeClickHandler;
    /**
     * {@inheritDoc editor!PropertyPanelBase.constructor}
     */
    constructor(title: string, language: Language);
    getUi(): HTMLDivElement;
    private arrangeClicked;
}

/**
 * Arrow type change event handler type.
 */
declare type ArrowTypeChangeHandler = (newType: ArrowType) => void;
/**
 * Arrow type toolbox panel.
 */
declare class ArrowTypePanel extends PropertyPanelBase {
    private currentType?;
    private typeBoxes;
    /**
     * Arrow type change event handler.
     */
    onArrowTypeChanged?: ArrowTypeChangeHandler;
    /**
     * {@inheritDoc editor!PropertyPanelBase.constructor}
     */
    constructor(title: string, language: Language, currentType?: ArrowType);
    getUi(): HTMLDivElement;
    private setCurrentType;
}

/**
 * Connector type change event handler type.
 */
declare type ConnectorTypeChangeHandler = (newType: typeof ConnectorBase) => void;
/**
 * Connector type selection toolbox panel.
 */
declare class ConnectorTypePanel extends PropertyPanelBase {
    /**
     * Avalable connector types.
     */
    connectorTypes: typeof ConnectorBase[];
    private currentType?;
    private typeBoxes;
    /**
     * Connector type event handler.
     */
    onConnectorTypeChanged?: ConnectorTypeChangeHandler;
    /**
     * {@inheritDoc editor!PropertyPanelBase.constructor}
     */
    constructor(title: string, language: Language, connectorTypes: typeof ConnectorBase[], currentType?: typeof ConnectorBase);
    getUi(): HTMLDivElement;
    private getTypeBox;
    private setCurrentType;
    /**
     * Selects connector type based on the supplied name.
     * @param typeName connector type name
     */
    selectType(typeName: string): void;
}

/**
 * Dimensions change event handler type.
 */
declare type DimensionsChangeHandler = (newWidth: number, newHeight: number) => void;
/**
 * Dimensions toolbox panel.
 */
declare class DimensionsPanel extends PropertyPanelBase {
    /**
     * Current width.
     */
    currentWidth: number;
    /**
     * Current height.
     */
    currentHeight: number;
    private widthInput;
    private heightInput;
    /**
     * Dimension change event handler.
     */
    onDimensionsChanged?: DimensionsChangeHandler;
    /**
     * {@inheritDoc editor!PropertyPanelBase.constructor}
     */
    constructor(title: string, language: Language, currentWidth: number, currentHeight: number);
    getUi(): HTMLDivElement;
    private setCurrentDimensions;
}

/**
 * Line style change event handler type.
 */
declare type LineStyleChangeHandler = (newStyle: string) => void;
/**
 * Line style toolbox panel.
 * Can be [re]used to control different line attributes.
 */
declare class LineStylePanel extends PropertyPanelBase {
    /**
     * Available line styles.
     */
    lineStyles: string[];
    /**
     * Selected line style.
     */
    currentStyle?: string;
    private typeBoxes;
    /**
     * Common line attributes.
     */
    lineAttributes: Array<[string, string]>;
    /**
     * Panel controlled attribute name.
     */
    lineStyleAttribute: string;
    /**
     * Line style change event handler.
     */
    onLineStyleChanged?: LineStyleChangeHandler;
    /**
     * Creates a new line style panel.
     * @param title panel title
     * @param language language (localization) subsystem
     * @param lineStyleAttribute name of the line attribute to edit
     * @param lineStyles available styles
     * @param currentStyle currently selected style
     */
    constructor(title: string, language: Language, lineStyleAttribute: string, lineStyles: string[], currentStyle?: string);
    getUi(): HTMLDivElement;
    private getTypeBox;
    private setCurrentType;
    /**
     * Selects supplied style box.
     * @param style current style to select.
     */
    selectStyle(style: string): void;
}

/**
 * New stencil type selected event handler type.
 */
declare type CreateNewStencilHandler = (stencilType?: typeof StencilBase) => void;
/**
 * Toolbox panel displaying available stencil types.
 */
declare class NewStencilPanel extends PropertyPanelBase {
    /**
     * Available stencil types.
     */
    stencilTypes: IStencilProperties[];
    private currentType?;
    private typeBoxes;
    /**
     * New type selected event handler.
     */
    onCreateNewStencil?: CreateNewStencilHandler;
    /**
     * Creates a new stencil toolbox panel.
     * @param title panel title
     * @param language language (localization) subsystem
     * @param stencilTypes available stencil types
     * @param currentType selected stencil type
     */
    constructor(title: string, language: Language, stencilTypes: IStencilProperties[], currentType?: typeof StencilBase);
    getUi(): HTMLDivElement;
    private getTypeBox;
    private setCurrentType;
    /**
     * Deselects selected stencil type.
     */
    deselectType(): void;
}

/**
 * Shape panel controlled properties.
 */
interface ShapePropertiesPanelProperties {
    /**
     * Available fill colors.
     */
    fillColors: ColorSet;
    /**
     * Selected fill color.
     */
    fillColor?: string;
    /**
     * Available stroke colors.
     */
    strokeColors: ColorSet;
    /**
     * Selected stroke color.
     */
    strokeColor?: string;
    /**
     * Available line styles.
     */
    lineStyles: string[];
    /**
     * Selected line style.
     */
    lineStyle?: string;
    /**
     * Available line widths.
     */
    lineWidths: string[];
    /**
     * Current line width.
     */
    lineWidth: string;
}
/**
 * Toolbox meta-panel for editing shape properties.
 */
declare class ShapePropertiesPanel extends PropertyPanelBase {
    private strokePanel;
    private fillPanel;
    private lineStylePanel;
    private lineWidthPanel;
    /**
     * Stroke color change event handler.
     */
    onStrokeColorChanged?: ColorChangeHandler;
    /**
     * Fill color change event handler.
     */
    onFillColorChanged?: ColorChangeHandler;
    /**
     * Line style change event handler.
     */
    onLineStyleChanged?: LineStyleChangeHandler;
    /**
     * Line width change event handler.
     */
    onLineWidthChanged?: LineStyleChangeHandler;
    /**
     * Current stroke color.
     */
    strokeColor?: string;
    /**
     * Current fill color.
     */
    fillColor?: string;
    /**
     * Current line style.
     */
    lineStyle?: string;
    /**
     * Current line width.
     */
    lineWidth?: string;
    /**
     * If set to `false` the fill related panels are hidden.
     */
    fillPanelsEnabled: boolean;
    /**
     * If set to 'false` the stroke related panels are hidden.
     */
    strokePanelsEnabled: boolean;
    /**
     * Creates a shape properties panel.
     * @param title panel title
     * @param language language (localization) subsystem
     * @param properties panel properties
     */
    constructor(title: string, language: Language, properties: ShapePropertiesPanelProperties);
    getUi(): HTMLDivElement;
    private strokeColorChanged;
    private fillColorChanged;
    private lineStyleChanged;
    private lineWidthChanged;
}

/**
 * Basic stencil editor set sets up editing capabilities for creating
 * diagrams with the {@link core!basicStencilSet}.
 */
declare const basicStencilEditorSet: StencilEditorSet;

/**
 * Mind Map related stencils and connectors.
 */
declare const mindMapStencilSet: StencilSet;

/**
 * Mind Map editor set.
 */
declare const mindMapStencilEditorSet: StencilEditorSet;

/**
 * Central Mind Map topic stencil.
 */
declare class CentralTopicStencil extends EllipseStencil {
    static typeName: string;
}

/**
 * Mind Map leaf item stencil.
 */
declare class ItemStencil extends RectangleTextStencil {
    static typeName: string;
    protected static getPathD(width: number, height: number): string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
    /**
     * {@inheritDoc core!RectangleTextStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    getSelectorPathD(width: number, height: number): string;
}

/**
 * Second level Mind Map topic stencil.
 */
declare class SubTopicStencil extends RectangleTextStencil {
    static typeName: string;
    protected static getPathD(width: number, height: number): string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
    /**
     * {@inheritDoc core!RectangleTextStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Mind Map connector.
 */
declare class MindMapConnector extends CurvedConnector {
    static typeName: string;
    /**
     * {@inheritDoc core!CurvedConnector.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Stencils and connectors for Flowchart diagrams.
 */
declare const flowchartStencilSet: StencilSet;

/**
 * Editor set for editing Flowchart diagrams.
 */
declare const flowchartStencilEditorSet: StencilEditorSet;

/**
 * Decision Flowchart stencil.
 */
declare class DecisionStencil extends DiamondStencil {
    static typeName: string;
}

/**
 * I/O Flowchart stencil.
 */
declare class IOStencil extends RectangleTextStencil {
    static typeName: string;
    static title: string;
    protected static getPathD(width: number, height: number): string;
    /**
     * {@inheritDoc core!RectangleTextStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
    protected setTextBoundingBox(): void;
}

/**
 * Process Flowchart stencil.
 */
declare class ProcessStencil extends RectangleTextStencil {
    static typeName: string;
    /**
     * {@inheritDoc core!RectangleTextStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Terminal Flowchart stencil.
 */
declare class TerminalStencil extends RectangleTextStencil {
    static typeName: string;
    static title: string;
    protected static getPathD(width: number, height: number): string;
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Cloud image stencil.
 */
declare class CloudStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Database image stencil
 */
declare class DatabaseStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Desktop computer image stencil.
 */
declare class DesktopStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Notebook (laptop computer) image stencil.
 */
declare class NotebookStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Printer image stencil.
 */
declare class PrinterStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Network router image stencil.
 */
declare class RouterStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Server image stencil.
 */
declare class ServerStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * WiFi router image stencil.
 */
declare class WiFiRouterStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Camera image stencil.
 */
declare class CameraStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Smartphone image stencil.
 */
declare class SmartphoneStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Tablet image stencil.
 */
declare class TabletStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * TV image stencil.
 */
declare class TVStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * User image stencil.
 */
declare class UserStencil extends ImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    protected static svgString: string;
    /**
     * {@inheritDoc core!ImageStencil.constructor}
     */
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Network diagram stencil and connectors.
 */
declare const networkStencilSet: StencilSet;

/**
 * Network diagram editor set.
 */
declare const networkStencilEditorSet: StencilEditorSet;

declare class OrganizationStencil extends CustomImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

declare class TeamStencil extends CustomImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

declare class PersonStencil extends CustomImageStencil {
    static typeName: string;
    static title: string;
    protected static DEFAULT_TEXT: string;
    static getThumbnail(width: number, height: number): SVGSVGElement;
    constructor(iid: number, container: SVGGElement, settings: DiagramSettings);
}

/**
 * Organizational chart stencils and connectors.
 */
declare const orgchartStencilSet: StencilSet;

/**
 * Organizational chart editor set.
 */
declare const orgchartStencilEditorSet: StencilEditorSet;

export { Activator, AlignPanel, AngledArrowConnector, AngledConnector, ArrangeClickHandler, ArrangePanel, ArrangementType, ArrowConnector, ArrowType, ArrowTypeChangeHandler, ArrowTypePanel, AutoScaleDirection, BitmapImageStencil, CameraStencil, CentralTopicStencil, CloudStencil, Color, ColorChangeHandler, ColorPickerPanel, ColorSet, ColorType, ConnectorBase, ConnectorBaseEditor, ConnectorBaseState, ConnectorEditorEventData, ConnectorEditorProperties, ConnectorEndPoints, ConnectorEventData, ConnectorState, ConnectorTypeChangeHandler, ConnectorTypePanel, CreateNewStencilHandler, CurvedArrowConnector, CurvedConnector, CustomImageStencil, DatabaseStencil, DecisionStencil, DesktopStencil, DiagramEditor, DiagramEditorEventData, DiagramEditorEventMap, DiagramEditorMode, DiagramSettings, DiagramState, DiagramViewer, DiagramViewerEventData, DiagramViewerEventMap, DiamondStencil, DimensionsChangeHandler, DimensionsPanel, EditorSettings, EllipseStencil, FontFamily, FontFamilyChangeHandler, FontPanel, FontSize, FontSizeChangeHandler, GripLocation, HorizontalAlignment, HorizontalAlignmentClickHandler, IConnectorProperties, IOStencil, IPoint, ISize, IStencilEditorSet, IStencilProperties, IStencilSet, ImageStencil, ImageStencilEditor, ImageStencilState, ImageType, ItemStencil, LabelStencil, LangStringSet, Language, LightbulbIconStencil, LineStyleChangeHandler, LineStylePanel, MindMapConnector, ModuleStringSet, NewStencilPanel, NotebookStencil, OrganizationStencil, PersonStencil, Port, PortConnector, PortLocation, PrinterStencil, ProcessStencil, PropertyPanelBase, RectangleTextStencil, RenderEventData, ResizeGrip, RouterStencil, ServerStencil, ShapePropertiesPanel, ShapePropertiesPanelProperties, SmartphoneStencil, StencilBase, StencilBaseEditor, StencilBaseState, StencilEditorEventData, StencilEditorProperties, StencilEditorSet, StencilEditorState, StencilEventData, StencilSet, StringSet, SubTopicStencil, SvgHelper, TVStencil, TabletStencil, TeamStencil, TerminalStencil, TextBlock, TextBlockEditor, TextChangedHandler, TextLabelLocation, TextPropertiesPanel, TextPropertiesPanelProperties, TextStencil, TextStencilEditor, TextStencilState, UserStencil, VerticalAlignment, VerticalAlignmentClickHandler, WiFiRouterStencil, basicStencilEditorSet, basicStencilSet, flowchartStencilEditorSet, flowchartStencilSet, mindMapStencilEditorSet, mindMapStencilSet, networkStencilEditorSet, networkStencilSet, orgchartStencilEditorSet, orgchartStencilSet };