@joint/core/dist/joint.d.ts

JavaScript diagramming library

/*! JointJS v4.1.3 (2025-02-04) - JavaScript diagramming library


This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
// Definitions by:
// Aidan Reel <http://github.com/areel>,
// David Durman <http://github.com/DavidDurman>,
// Ewout Van Gossum <https://github.com/DenEwout>,
// Federico Caselli <https://github.com/CaselIT>,
// Chris Moran <https://github.com/ChrisMoran>
// Michael MacFadden https://github.com/mmacfadden

// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// typings: https://github.com/CaselIT/typings-jointjs

export as namespace joint;

export declare namespace anchors {

    export interface RotateAnchorArguments {
        rotate?: boolean;
    }

    export interface BBoxAnchorArguments extends RotateAnchorArguments {
        dx?: number | string;
        dy?: number | string;
    }

    export interface PaddingAnchorArguments {
        padding?: number;
    }

    export interface MidSideAnchorArguments extends RotateAnchorArguments, PaddingAnchorArguments {

    }

    export interface ModelCenterAnchorArguments {
        dx?: number;
        dy?: number;
    }

    export interface AnchorArgumentsMap {
        'center': BBoxAnchorArguments;
        'top': BBoxAnchorArguments;
        'bottom': BBoxAnchorArguments;
        'left': BBoxAnchorArguments;
        'right': BBoxAnchorArguments;
        'topLeft': BBoxAnchorArguments;
        'topRight': BBoxAnchorArguments;
        'bottomLeft': BBoxAnchorArguments;
        'bottomRight': BBoxAnchorArguments;
        'perpendicular': PaddingAnchorArguments;
        'midSide': MidSideAnchorArguments;
        'modelCenter': ModelCenterAnchorArguments;
        'connectionRatio': linkAnchors.ConnectionLengthAnchorArguments;
        'connectionLength': linkAnchors.ConnectionLengthAnchorArguments;
        'connectionPerpendicular': linkAnchors.ConnectionPerpendicularAnchorArguments;
        'connectionClosest': linkAnchors.ConnectionClosestAnchorArguments;
        [key: string]: { [key: string]: any };
    }

    export type AnchorType = keyof AnchorArgumentsMap;

    export type GenericAnchorArguments<K extends AnchorType> = AnchorArgumentsMap[K];

    export interface GenericAnchor<K extends AnchorType> {
        (
        endView: dia.CellView,
        endMagnet: SVGElement,
        anchorReference: g.Point | SVGElement,
        opt: AnchorArgumentsMap[K],
        endType: dia.LinkEnd,
        linkView: dia.LinkView
        ): g.Point;
    }

    export interface GenericAnchorJSON<K extends AnchorType> {
        name: K;
        args?: AnchorArgumentsMap[K];
    }

    export type AnchorArguments = GenericAnchorArguments<AnchorType>;

    export type Anchor = GenericAnchor<AnchorType>;

    export type AnchorJSON = GenericAnchorJSON<AnchorType>;

    var center: GenericAnchor<'center'>;
    var top: GenericAnchor<'top'>;
    var bottom: GenericAnchor<'bottom'>;
    var left: GenericAnchor<'left'>;
    var right: GenericAnchor<'right'>;
    var topLeft: GenericAnchor<'topLeft'>;
    var topRight: GenericAnchor<'topRight'>;
    var bottomLeft: GenericAnchor<'bottomLeft'>;
    var bottomRight: GenericAnchor<'bottomRight'>;
    var perpendicular: GenericAnchor<'perpendicular'>;
    var midSide: GenericAnchor<'midSide'>;
}

export declare namespace attributes {

    export interface SVGCoreAttributes {
        'id'?: string;
        'xml:base'?: string;
        'xml:lang'?: string;
        'xml:space'?: string;
        'tabindex'?: number;
    }

    export interface SVGConditionalProcessingAttributes {
        'requiredExtensions'?: boolean;
        'requiredFeatures'?: string;
        'systemLanguage'?: string;
    }

    export interface SVGXLinkAttributes {
        'xlink:href'?: string;
        'xlink:type'?: string;
        'xlink:role'?: string;
        'xlink:arcrole'?: string;
        'xlink:title'?: string;
        'xlink:show'?: string;
        'xlink:actuate'?: string;
    }

    export interface SVGPresentationAttributes {
        'alignment-baseline'?: any;
        'baseline-shift'?: any;
        'clip'?: any;
        'clip-path'?: any;
        'clip-rule'?: any;
        'color'?: any;
        'color-interpolation'?: any;
        'color-interpolation-filters'?: any;
        'color-profile'?: any;
        'color-rendering'?: any;
        'cursor'?: any;
        'direction'?: any;
        'display'?: any;
        'dominant-baseline'?: any;
        'enable-background'?: any;
        'fill'?: any;
        'fill-opacity'?: any;
        'fill-rule'?: any;
        'filter'?: any;
        'flood-color'?: any;
        'flood-opacity'?: any;
        'font-family'?: any;
        'font-size'?: any;
        'font-size-adjust'?: any;
        'font-stretch'?: any;
        'font-style'?: any;
        'font-variant'?: any;
        'font-weight'?: any;
        'glyph-orientation-horizontal'?: any;
        'glyph-orientation-vertical'?: any;
        'image-rendering'?: any;
        'kerning'?: any;
        'letter-spacing'?: any;
        'lighting-color'?: any;
        'marker-end'?: any;
        'marker-mid'?: any;
        'marker-start'?: any;
        'mask'?: any;
        'opacity'?: any;
        'overflow'?: any;
        'pointer-events'?: any;
        'shape-rendering'?: any;
        'stop-color'?: any;
        'stop-opacity'?: any;
        'stroke'?: any;
        'stroke-dasharray'?: any;
        'stroke-dashoffset'?: any;
        'stroke-linecap'?: any;
        'stroke-linejoin'?: any;
        'stroke-miterlimit'?: any;
        'stroke-opacity'?: any;
        'stroke-width'?: any;
        'text-anchor'?: any;
        'text-decoration'?: any;
        'text-rendering'?: any;
        'unicode-bidi'?: any;
        'visibility'?: any;
        'word-spacing'?: any;
        'writing-mode'?: any;
    }

    export interface NativeSVGAttributes extends SVGCoreAttributes, SVGPresentationAttributes, SVGConditionalProcessingAttributes, SVGXLinkAttributes {
        'class'?: string;
        'style'?: any;
        'transform'?: string;
        'externalResourcesRequired'?: boolean;

        [key: string]: any;
    }

    export interface SVGAttributeTextWrap {
        width?: string | number | null;
        height?: string | number | null;
        ellipsis?: boolean | string;
        separator?: string;
        hyphen?: string;
        maxLineCount?: number;
        preserveSpaces?: boolean;
        breakText?: util.BreakTextFunction;
        [key: string]: any;
        /**
         * @deprecated use SVGAttributes.text instead
         **/
        text?: string;
    }

    export interface SVGAttributeProps {
        checked?: boolean;
        disabled?: boolean;
        multiple?: boolean;
        readOnly?: boolean;
        selected?: boolean;
        indeterminate?: boolean;
        contentEditable?: boolean;
        value?: any;
    }

    export interface SVGAttributes extends NativeSVGAttributes {
        // Special attributes
        eol?: string;
        filter?: string | dia.SVGFilterJSON;
        fill?: string | dia.SVGPatternJSON | dia.SVGGradientJSON;
        stroke?: string | dia.SVGPatternJSON | dia.SVGGradientJSON;
        sourceMarker?: dia.SVGMarkerJSON;
        targetMarker?: dia.SVGMarkerJSON;
        vertexMarker?: dia.SVGMarkerJSON;
        props?: SVGAttributeProps;
        text?: string;
        textWrap?: SVGAttributeTextWrap;
        lineHeight?: number | string;
        textPath?: any;
        annotations?: any;
        port?: string | { [key: string]: any };
        style?: { [key: string]: any };
        html?: string;
        ref?: string;
        refX?: string | number;
        refY?: string | number;
        refX2?: string | number;
        refY2?: string | number;
        refDx?: string | number;
        refDy?: string | number;
        refWidth?: string | number;
        refHeight?: string | number;
        refRx?: string | number;
        refRy?: string | number;
        refR?: string | number;
        refRInscribed?: string | number; // alias for refR
        refRCircumscribed?: string | number;
        refCx?: string | number;
        refCy?: string | number;
        refD?: string;
        refDResetOffset?: string; // alias for refD
        refDKeepOffset?: string;
        refPoints?: string;
        refPointsResetOffset?: string; // alias for refPoints
        refPointsKeepOffset?: string;
        resetOffset?: boolean;
        displayEmpty?: boolean;
        xAlignment?: 'middle' | 'right' | number | string;
        yAlignment?: 'middle' | 'bottom' | number | string;
        event?: string;
        magnet?: boolean | string;
        title?: string;
        textVerticalAnchor?: 'bottom' | 'top' | 'middle' | number | string;
        connection?: boolean | { stubs?: number };
        atConnectionLength?: number;
        atConnectionLengthKeepGradient?: number; // alias for atConnectionLength
        atConnectionLengthIgnoreGradient?: number;
        atConnectionRatio?: number;
        atConnectionRatioKeepGradient?: number; // alias for atConnectionRatio
        atConnectionRatioIgnoreGradient?: number;
        magnetSelector?: string;
        highlighterSelector?: string;
        containerSelector?: string;
        // CamelCase variants of native attributes
        alignmentBaseline?: any;
        baselineShift?: any;
        clipPath?: any;
        clipRule?: any;
        colorInterpolation?: any;
        colorInterpolationFilters?: any;
        colorProfile?: any;
        colorRendering?: any;
        dominantBaseline?: any;
        enableBackground?: any;
        fillOpacity?: any;
        fillRule?: any;
        floodColor?: any;
        floodOpacity?: any;
        fontFamily?: any;
        fontSize?: any;
        fontSizeAdjust?: any;
        fontStretch?: any;
        fontStyle?: any;
        fontVariant?: any;
        fontWeight?: any;
        glyphOrientationHorizontal?: any;
        glyphOrientationVertical?: any;
        imageRendering?: any;
        letterSpacing?: any;
        lightingColor?: any;
        markerEnd?: any;
        markerMid?: any;
        markerStart?: any;
        pointerEvents?: any;
        shapeRendering?: any;
        stopColor?: any;
        stopOpacity?: any;
        strokeDasharray?: any;
        strokeDashoffset?: any;
        strokeLinecap?: any;
        strokeLinejoin?: any;
        strokeMiterlimit?: any;
        strokeOpacity?: any;
        strokeWidth?: any;
        textAnchor?: any;
        textDecoration?: any;
        textRendering?: any;
        unicodeBidi?: any;
        wordSpacing?: any;
        writingMode?: any;
        xlinkHref?: string;
        xlinkShow?: string;
        xlinkType?: string;
        xlinkRole?: string;
        xlinkArcrole?: string;
        xlinkTitle?: string;
        xlinkActuate?: string;
        xmlSpace?: string;
        xmlBase?: string;
        xmlLang?: string;
        // Backwards compatibility
        'ref-x'?: string | number;
        'ref-y'?: string | number;
        'ref-dx'?: string | number;
        'ref-dy'?: string | number;
        'ref-width'?: string | number;
        'ref-height'?: string | number;
        'x-alignment'?: 'middle' | 'right' | number | string;
        'y-alignment'?: 'middle' | 'bottom' | number | string;
    }

    export interface SVGTextAttributes extends SVGAttributes {
        x?: string | number;
        y?: string | number;
        dx?: string | number;
        dy?: string | number;
        rotate?: string;
        textAnchor?: string;
        textLength?: number;
        lengthAdjust?: string;
        'text-anchor'?: string;
        'text-length'?: number;
        'length-adjust'?: string;
    }

    export interface SVGRectAttributes extends SVGAttributes {
        x?: string | number;
        y?: string | number;
        width?: string | number;
        height?: string | number;
        ry?: string | number;
        rx?: string | number;
    }

    export interface SVGCircleAttributes extends SVGAttributes {
        cx?: string | number;
        cy?: string | number;
        r?: string | number;
    }

    export interface SVGEllipseAttributes extends SVGAttributes {
        cx?: string | number;
        cy?: string | number;
        rx?: string | number;
        ry?: string | number;
    }

    export interface SVGPolygonAttributes extends SVGAttributes {
        points?: string;
    }

    export interface SVGPolylineAttributes extends SVGAttributes {
        points?: string;
    }

    export interface SVGImageAttributes extends SVGAttributes {
        x?: string | number;
        y?: string | number;
        width?: string | number;
        height?: string | number;
        preserveAspectRatio?: string;
    }

    export interface SVGPathAttributes extends SVGAttributes {
        d?: string;
        pathLength?: number;
        'path-length'?: number;
    }

    export interface SVGLineAttributes extends SVGAttributes {
        x1?: number | string;
        x2?: number | string;
        y1?: number | string;
        y2?: number | string;
        pathLength?: number;
        'path-length'?: number;
    }
}

export declare namespace config {
    var useCSSSelectors: boolean;
    var classNamePrefix: string;
    var defaultTheme: string;
    var doubleTapInterval: number;
}

export declare namespace connectionPoints {

    export type ConnectionPointAlignment = 'top' | 'bottom' | 'left' | 'right';

    export interface DefaultConnectionPointArguments {
        offset?: number | dia.Point;
    }

    export interface AlignConnectionPointArguments extends DefaultConnectionPointArguments {
        align?: ConnectionPointAlignment | null;
        alignOffset?: number;
    }

    export interface StrokeConnectionPointArguments extends DefaultConnectionPointArguments {
        stroke?: boolean;
    }

    export interface BoundaryConnectionPointArguments extends StrokeConnectionPointArguments {
        selector?: Array<string | number> | string | false;
        precision?: number;
        extrapolate?: boolean;
        sticky?: boolean;
        insideout?: boolean;
    }

    export interface ConnectionPointArgumentsMap {
        'anchor': DefaultConnectionPointArguments;
        'bbox': StrokeConnectionPointArguments;
        'rectangle': StrokeConnectionPointArguments;
        'boundary': BoundaryConnectionPointArguments;
        [key: string]: { [key: string]: any };
    }

    export type ConnectionPointType = keyof ConnectionPointArgumentsMap;

    export type GenericConnectionPointArguments<K extends ConnectionPointType> = ConnectionPointArgumentsMap[K];

    export interface GenericConnectionPoint<K extends ConnectionPointType> {
        (
        endPathSegmentLine: g.Line,
        endView: dia.CellView,
        endMagnet: SVGElement,
        opt: ConnectionPointArgumentsMap[K],
        endType: dia.LinkEnd,
        linkView: dia.LinkView
        ): g.Point;
    }

    export interface GenericConnectionPointJSON<K extends ConnectionPointType> {
        name: K;
        args?: ConnectionPointArgumentsMap[K];
    }

    export type ConnectionPointArguments = GenericConnectionPointArguments<ConnectionPointType>;

    export type ConnectionPoint = GenericConnectionPoint<ConnectionPointType>;

    export type ConnectionPointJSON = GenericConnectionPointJSON<ConnectionPointType>;

    var anchor: GenericConnectionPoint<'anchor'>;
    var bbox: GenericConnectionPoint<'bbox'>;
    var rectangle: GenericConnectionPoint<'rectangle'>;
    var boundary: GenericConnectionPoint<'boundary'>;
}

export declare namespace connectionStrategies {

    export interface ConnectionStrategy {
        (
        endDefinition: dia.Link.EndJSON,
        endView: dia.CellView,
        endMagnet: SVGElement,
        coords: dia.Point,
        link: dia.Link,
        endType: dia.LinkEnd
        ): dia.Link.EndJSON;
    }

    var useDefaults: ConnectionStrategy;
    var pinAbsolute: ConnectionStrategy;
    var pinRelative: ConnectionStrategy;
}

export declare namespace connectors {

    export interface NormalConnectorArguments {
        raw?: boolean;
    }

    export interface RoundedConnectorArguments {
        raw?: boolean;
        radius?: number;
    }

    export interface SmoothConnectorArguments {
        raw?: boolean;
    }

    export interface JumpOverConnectorArguments {
        raw?: boolean;
        size?: number;
        jump?: 'arc' | 'gap' | 'cubic';
        radius?: number;
    }

    export interface StraightConnectorArguments {
        raw?: boolean;
        cornerType?: 'point' | 'cubic' | 'line' | 'gap';
        cornerRadius?: number;
        cornerPreserveAspectRatio?: boolean;
        precision?: number;
    }

    export enum CurveDirections {
        AUTO = 'auto',
        HORIZONTAL = 'horizontal',
        VERTICAL = 'vertical',
        CLOSEST_POINT = 'closest-point',
        OUTWARDS = 'outwards'
    }

    export enum CurveTangentDirections {
        UP = 'up',
        DOWN = 'down',
        LEFT = 'left',
        RIGHT = 'right',
        AUTO = 'auto',
        CLOSEST_POINT = 'closest-point',
        OUTWARDS = 'outwards'
    }

    export interface CurveConnectorArguments {
        raw?: boolean;
        direction?: CurveDirections;
        sourceDirection?: CurveTangentDirections | dia.Point | number;
        targetDirection?: CurveTangentDirections | dia.Point | number;
        sourceTangent?: dia.Point;
        targetTangent?: dia.Point;
        distanceCoefficient?: number;
        angleTangentCoefficient?: number;
        tension?: number;
        precision?: number;
    }

    export interface ConnectorArgumentsMap {
        'normal': NormalConnectorArguments;
        'rounded': RoundedConnectorArguments;
        'smooth': SmoothConnectorArguments;
        'jumpover': JumpOverConnectorArguments;
        'straight': StraightConnectorArguments;
        'curve': CurveConnectorArguments;
        [key: string]: { [key: string]: any };
    }

    export type ConnectorType = keyof ConnectorArgumentsMap;

    export type GenericConnectorArguments<K extends ConnectorType> = ConnectorArgumentsMap[K];

    export interface GenericConnector<K extends ConnectorType> {
        (
        sourcePoint: dia.Point,
        targetPoint: dia.Point,
        routePoints: dia.Point[],
        args?: GenericConnectorArguments<K>,
        linkView?: dia.LinkView
        ): string | g.Path;
    }

    export interface GenericConnectorJSON<K extends ConnectorType> {
        name: K;
        args?: GenericConnectorArguments<K>;
    }

    export interface CurveConnector extends GenericConnector<'curve'> {
        Directions: typeof CurveDirections;
        TangentDirections: typeof CurveTangentDirections;
    }

    export type ConnectorArguments = GenericConnectorArguments<ConnectorType>;

    export type Connector = GenericConnector<ConnectorType>;

    export type ConnectorJSON = GenericConnectorJSON<ConnectorType>;

    var normal: GenericConnector<'normal'>;
    var rounded: GenericConnector<'rounded'>;
    var smooth: GenericConnector<'smooth'>;
    var jumpover: GenericConnector<'jumpover'>;
    var straight: GenericConnector<'straight'>;
    var curve: CurveConnector;
}

declare type DeepPartial<T> = _DeepPartial<_DeepRequired<T>>;

declare type _DeepPartial<T> = {
    	[P in keyof T]?: T[P] extends object ? _DeepPartial<T[P]> : T[P];
};

declare type _DeepRequired<T> = {
    [P in keyof T]-?: T[P] extends object ? _DeepRequired<T[P]> : T[P];
};

export declare namespace dia {

    export type Event = mvc.TriggeredEvent;

    export type ObjectHash = { [key: string]: any };

    export type Point = g.PlainPoint;

    export type BBox = g.PlainRect;

    export type Size = Pick<BBox, 'width' | 'height'>;

    export type PaddingJSON = {
        left?: number;
        top?: number;
        right?: number;
        bottom?: number;
    };

    export type Padding = number | PaddingJSON;

    export type SidesJSON = {
        left?: number;
        top?: number;
        right?: number;
        bottom?: number;
        horizontal?: number;
        vertical?: number;
    };

    export type LegacyPositionName = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' |
    'topMiddle' | 'bottomMiddle' | 'leftMiddle' | 'rightMiddle' |
    'corner' | 'origin';

    export type PositionName = 'top' | 'left' | 'bottom' | 'right' | 'center' |
    'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' |
    LegacyPositionName;

    export type Sides = number | SidesJSON;

    export type OrthogonalDirection =
    'left' | 'top' | 'right' | 'bottom';

    export type DiagonalDirection =
    'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';

    export type Direction = OrthogonalDirection | DiagonalDirection;

    export type LinkEnd =
    'source' | 'target';

    export type MarkupNodeJSON = {
        tagName: string;
        selector?: string;
        groupSelector?: string | string[];
        namespaceURI?: string;
        className?: string;
        attributes?: attributes.NativeSVGAttributes;
        style?: { [key: string]: any };
        children?: MarkupJSON;
        textContent?: string;
    };

    export type MarkupJSON = Array<MarkupNodeJSON | string>;

    export type Path = string | Array<string | number>;

    export interface ModelSetOptions extends mvc.ModelSetOptions {
        dry?: boolean;
        isolate?: boolean;
        [key: string]: any;
    }

    export interface CollectionAddOptions extends mvc.AddOptions {
        dry?: boolean;
        [key: string]: any;
    }

    export interface SVGPatternJSON {
        id?: string;
        type: 'pattern';
        attrs?: attributes.NativeSVGAttributes;
        markup: string | MarkupJSON;
    }

    export interface SVGGradientJSON {
        id?: string;
        type: 'linearGradient' | 'radialGradient';
        attrs?: attributes.NativeSVGAttributes;
        stops: Array<{
            offset: number | string;
            color: string;
            opacity?: number;
        }>;
    }

    export type SVGMarkerJSON = SVGComplexMarkerJSON | SVGSimpleMarkerJSON;

    export interface SVGComplexMarkerJSON {
        id?: string;
        markup: string | MarkupJSON;
        attrs?: attributes.NativeSVGAttributes;
    }

    export interface SVGSimpleMarkerJSON extends attributes.NativeSVGAttributes {
        id?: string;
        type?: string;
        /**
         * @deprecated use `attrs` instead
         */
        markerUnits?: string;
    }

    export type SVGFilterJSON =
    util.filter.FilterJSON<'outline'> |
    util.filter.FilterJSON<'highlight'> |
    util.filter.FilterJSON<'blur'> |
    util.filter.FilterJSON<'dropShadow'> |
    util.filter.FilterJSON<'grayscale'> |
    util.filter.FilterJSON<'sepia'> |
    util.filter.FilterJSON<'saturate'> |
    util.filter.FilterJSON<'hueRotate'> |
    util.filter.FilterJSON<'invert'> |
    util.filter.FilterJSON<'brightness'> |
    util.filter.FilterJSON<'contrast'>;

    export namespace Graph {

        export interface Options {
            [key: string]: any;
        }

        export interface ConnectionOptions extends Cell.EmbeddableOptions {
            inbound?: boolean;
            outbound?: boolean;
        }

        export interface ExploreOptions extends ConnectionOptions {
            breadthFirst?: boolean;
        }

        export interface FindAtPointOptions extends Options {
            strict?: boolean;
        }

        export interface FindInAreaOptions extends Options {
            strict?: boolean;
        }

        export type SearchByKey = 'bbox' | PositionName;

        export interface FindUnderElementOptions extends FindInAreaOptions, FindAtPointOptions {
            searchBy?: SearchByKey;
        }

        export class Cells extends mvc.Collection<Cell> {
            graph: Graph;
            cellNamespace: any;
        }

        export interface Attributes {
            cells?: Cells;
            [key: string]: any;
        }
    }

    export class Graph<A extends ObjectHash = Graph.Attributes, S = dia.ModelSetOptions> extends mvc.Model<A, S> {

        constructor(attributes?: Graph.Attributes, opt?: { cellNamespace?: any, cellModel?: typeof Cell });

        addCell(cell: Cell.JSON | Cell, opt?: CollectionAddOptions): this;
        addCell(cell: Array<Cell | Cell.JSON>, opt?: CollectionAddOptions): this;

        addCells(cells: Array<Cell | Cell.JSON>, opt?: CollectionAddOptions): this;

        resetCells(cells: Array<Cell | Cell.JSON>, opt?: Graph.Options): this;

        getCell(id: Cell.ID | Cell): Cell;

        getElements(): Element[];

        getLinks(): Link[];

        getCells(): Cell[];

        getFirstCell(): Cell | undefined;

        getLastCell(): Cell | undefined;

        getConnectedLinks(cell: Cell, opt?: Graph.ConnectionOptions): Link[];

        disconnectLinks(cell: Cell, opt?: S): void;

        removeLinks(cell: Cell, opt?: Cell.DisconnectableOptions): void;

        translate(tx: number, ty?: number, opt?: Element.TranslateOptions): this;

        cloneCells(cells: Cell[]): { [id: string]: Cell };

        getSubgraph(cells: Cell[], opt?: Cell.EmbeddableOptions): Cell[];

        cloneSubgraph(cells: Cell[], opt?: Cell.EmbeddableOptions): { [id: string]: Cell };

        dfs(element: Element, iteratee: (element: Element, distance: number) => boolean, opt?: Graph.ConnectionOptions): void;

        bfs(element: Element, iteratee: (element: Element, distance: number) => boolean, opt?: Graph.ConnectionOptions): void;

        search(element: Element, iteratee: (element: Element, distance: number) => boolean, opt?: Graph.ExploreOptions): void;

        getSuccessors(element: Element, opt?: Graph.ExploreOptions): Element[];

        getPredecessors(element: Element, opt?: Graph.ExploreOptions): Element[];

        isSuccessor(elementA: Element, elementB: Element): boolean;

        isPredecessor(elementA: Element, elementB: Element): boolean;

        isSource(element: Element): boolean;

        isSink(element: Element): boolean;

        getSources(): Element[];

        getSinks(): Element[];

        getNeighbors(element: Element, opt?: Graph.ConnectionOptions): Element[];

        isNeighbor(elementA: Element, elementB: Element, opt?: Graph.ConnectionOptions): boolean;

        getCommonAncestor(...cells: Cell[]): Element | undefined;

        toJSON(opt?: { cellAttributes?: dia.Cell.ExportOptions }): any;

        fromJSON(json: any, opt?: S): this;

        clear(opt?: { [key: string]: any }): this;

        findElementsAtPoint(p: Point, opt?: Graph.FindAtPointOptions): Element[];

        findElementsInArea(rect: BBox, opt?: Graph.FindInAreaOptions): Element[];

        findElementsUnderElement(element: Element, opt?: Graph.FindUnderElementOptions): Element[];

        findLinksAtPoint(p: Point, opt?: Graph.FindAtPointOptions): Link[];

        findLinksInArea(rect: BBox, opt?: Graph.FindInAreaOptions): Link[];

        findLinksUnderElement(element: Element, opt?: Graph.FindUnderElementOptions): Link[];

        findCellsAtPoint(p: Point, opt?: Graph.FindAtPointOptions): Cell[];

        findCellsInArea(rect: BBox, opt?: Graph.FindInAreaOptions): Cell[];

        findCellsUnderElement(element: Element, opt?: Graph.FindUnderElementOptions): Cell[];

        protected _getFindUnderElementGeometry(element: Element, searchBy: Graph.SearchByKey): g.Point | g.Rect;

        protected _validateCellsUnderElement<T extends Cell[]>(cells: T, element: Element): T;

        protected _isValidElementUnderElement(el1: Element, el2: Element): boolean;

        protected _isValidLinkUnderElement(link: Link, element: Element): boolean;

        protected _filterCellsUnderElement(cells: Cell[], element: Element, opt: Graph.FindUnderElementOptions): Cell[];

        /** @deprecated use `findElementsAtPoint` instead */
        findModelsFromPoint(p: Point): Element[];

        /** @deprecated use `findElementsInArea` instead */
        findModelsInArea(rect: BBox, opt?: Graph.FindInAreaOptions): Element[];

        /** @deprecated use `findElementsUnderElement` instead */
        findModelsUnderElement(element: Element, opt?: Graph.FindUnderElementOptions): Element[];

        getBBox(): g.Rect | null;

        getCellsBBox(cells: Cell[], opt?: Cell.EmbeddableOptions): g.Rect | null;

        hasActiveBatch(name?: string | string[]): boolean;

        maxZIndex(): number;

        minZIndex(): number;

        removeCells(cells: Cell[], opt?: Cell.DisconnectableOptions): this;

        transferCellEmbeds(sourceCell: Cell, targetCell: Cell, opt?: S): void;

        transferCellConnectedLinks(sourceCell: Cell, targetCell: Cell, opt?: Graph.ConnectionOptions): void;

        resize(width: number, height: number, opt?: S): this;

        resizeCells(width: number, height: number, cells: Cell[], opt?: S): this;

        startBatch(name: string, data?: { [key: string]: any }): this;

        stopBatch(name: string, data?: { [key: string]: any }): this;
    }

    // dia.Cell

    export namespace Cell {

        export type ID = string | number;

        export interface GenericAttributes<T> {
            attrs?: T;
            z?: number;
            [key: string]: any;
        }

        export interface Selectors {
            [selector: string]: attributes.SVGAttributes | undefined;
        }

        export interface Attributes extends GenericAttributes<Selectors> {
        }

        export type JSON<K extends Selectors = Selectors, T extends GenericAttributes<K> = GenericAttributes<K>> = T & {
            [attribute in keyof T]: T[attribute];
        } & {
            id: ID;
            type: string;
        };

        export interface Constructor<T extends mvc.Model> {
            new(opt?: { id?: ID, [key: string]: any }): T;
            define(type: string, defaults?: any, protoProps?: any, staticProps?: any): dia.Cell.Constructor<T>;
        }

        export interface Options {
            [key: string]: any;
        }

        export interface EmbedOptions extends Options {
            reparent?: boolean;
        }

        export interface EmbeddableOptions<T = boolean> extends Options {
            deep?: T;
        }

        export interface DisconnectableOptions extends Options {
            disconnectLinks?: boolean;
        }

        export interface GetEmbeddedCellsOptions extends EmbeddableOptions {
            breadthFirst?: boolean;
            sortSiblings?: boolean;
        }

        export interface ToFrontAndBackOptions extends GetEmbeddedCellsOptions {
            foregroundEmbeds?: boolean;
        }

        export interface TransitionOptions extends Options {
            delay?: number;
            duration?: number;
            timingFunction?: util.timing.TimingFunction;
            valueFunction?: util.interpolate.InterpolateFunction<any>;
        }

        export interface ConstructorOptions extends Graph.Options {
            mergeArrays?: boolean;
        }

        export interface ExportOptions {
            ignoreDefault?: boolean | string[];
            ignoreEmptyAttributes?: boolean;
        }

        export type UnsetCallback<V> = (
        this: V,
        node: DOMElement,
        nodeAttributes: { [name: string]: any },
        cellView: V
        ) => string | Array<string> | null | void;

        export type SetCallback<V> = (
        this: V,
        attributeValue: any,
        refBBox: g.Rect,
        node: DOMElement,
        nodeAttributes: { [name: string]: any },
        cellView: V
        ) => { [key: string]: any } | string | number | void;

        export type PositionCallback<V> = (
        this: V,
        attributeValue: any,
        refBBox: g.Rect,
        node: DOMElement,
        nodeAttributes: { [name: string]: any },
        cellView: V
        ) => dia.Point | null | void;

        export type OffsetCallback<V> = (
        this: V,
        attributeValue: any,
        nodeBBox: g.Rect,
        node: DOMElement,
        nodeAttributes: { [name: string]: any },
        cellView: V
        ) => dia.Point | null | void;

        export interface PresentationAttributeDefinition<V = dia.CellView> {
            set?: SetCallback<V> | string;
            unset?: UnsetCallback<V> | string | Array<string>;
            position?: PositionCallback<V>;
            offset?: OffsetCallback<V>;
        }
    }

    export class Cell<A extends ObjectHash = Cell.Attributes, S extends mvc.ModelSetOptions = dia.ModelSetOptions> extends mvc.Model<A, S> {

        constructor(attributes?: DeepPartial<A>, opt?: Cell.ConstructorOptions);

        id: Cell.ID;
        graph: Graph;
        markup: string | MarkupJSON;
        useCSSSelectors: boolean;

        protected generateId(): string | number;

        protected stopPendingTransitions(path?: string, delim?: string): void;

        protected stopScheduledTransitions(path?: string, delim?: string): void;

        toJSON(opt?: dia.Cell.ExportOptions): Cell.JSON<any, A>;

        remove(opt?: Cell.DisconnectableOptions): this;

        toFront(opt?: Cell.ToFrontAndBackOptions): this;

        toBack(opt?: Cell.ToFrontAndBackOptions): this;

        parent(): string;

        getParentCell(): Cell | null;

        getAncestors(): Cell[];

        getEmbeddedCells(opt?: Cell.GetEmbeddedCellsOptions): Cell[];

        isEmbeddedIn(cell: Cell, opt?: Cell.EmbeddableOptions): boolean;

        isEmbedded(): boolean;

        prop(key: Path): any;
        prop(object: DeepPartial<A>, opt?: Cell.Options): this;
        prop(key: Path, value: any, opt?: Cell.Options): this;

        removeProp(path: Path, opt?: Cell.Options): this;

        attr(key?: Path): any;
        attr(object: Cell.Selectors, opt?: Cell.Options): this;
        attr(key: Path, value: any, opt?: Cell.Options): this;

        clone(): this;
        clone(opt: Cell.EmbeddableOptions<false>): this;
        clone(opt: Cell.EmbeddableOptions<true>): Cell[];

        removeAttr(path: Path, opt?: Cell.Options): this;

        transition(path: string, value?: any, opt?: Cell.TransitionOptions, delim?: string): number;

        getTransitions(): string[];

        stopTransitions(path?: string, delim?: string): this;

        embed(cell: Cell | Cell[], opt?: Cell.EmbedOptions): this;

        unembed(cell: Cell | Cell[], opt?: Graph.Options): this;

        canEmbed(cell: Cell | Cell[]): boolean;

        addTo(graph: Graph, opt?: Graph.Options): this;

        findView(paper: Paper): CellView;

        isLink(): this is Link;

        isElement(): this is Element;

        startBatch(name: string, opt?: Graph.Options): this;

        stopBatch(name: string, opt?: Graph.Options): this;

        position(): g.Point;

        z(): number;

        angle(): number;

        getBBox(): g.Rect;

        getPointFromConnectedLink(link: dia.Link, endType: dia.LinkEnd): g.Point;

        getPointRotatedAroundCenter(angle: number, x: number, y: number): g.Point;
        getPointRotatedAroundCenter(angle: number, point: dia.Point): g.Point;

        getRelativePointFromAbsolute(x: number, y: number): g.Point;
        getRelativePointFromAbsolute(absolutePoint: dia.Point): g.Point;

        getAbsolutePointFromRelative(x: number, y: number): g.Point;
        getAbsolutePointFromRelative(relativePoint: dia.Point): g.Point;

        getChangeFlag(attributes: { [key: string]: number }): number;

        static define(type: string, defaults?: any, protoProps?: any, staticProps?: any): Cell.Constructor<Cell>;

        /**
         * @deprecated
         */
        protected processPorts(): void;
    }

    // dia.Element

    export namespace Element {

        export interface GenericAttributes<T> extends Cell.GenericAttributes<T> {
            markup?: string | MarkupJSON;
            position?: Point;
            size?: Size;
            angle?: number;
            ports?: {
                groups?: { [key: string]: PortGroup };
                items?: Port[];
            };
        }

        export interface Attributes extends GenericAttributes<Cell.Selectors> {
        }

        export type PortPositionCallback = (ports: Port[], bbox: g.Rect) => dia.Point[];

        export interface PortPositionJSON {
            name?: string;
            args?: { [key: string]: any };
        }

        export type PositionType = string | PortPositionCallback | PortPositionJSON;

        export interface PortGroup {
            position?: PositionType;
            markup?: string | MarkupJSON;
            attrs?: Cell.Selectors;
            label?: {
                markup?: string | MarkupJSON;
                position?: PositionType;
            };
        }

        export interface Port {
            id?: string;
            markup?: string | MarkupJSON;
            group?: string;
            attrs?: Cell.Selectors;
            args?: { [key: string]: any };
            label?: {
                markup?: string | MarkupJSON;
                position?: PositionType;
            };
            z?: number | 'auto';
        }

        export interface PortPosition extends Point {
            angle: number;
        }

        export interface TranslateOptions extends Cell.Options {
            restrictedArea?: BBox | Paper.PointConstraintCallback;
            transition?: Cell.TransitionOptions;
        }

        export interface PositionOptions extends TranslateOptions {
            parentRelative?: boolean;
            deep?: boolean;
        }

        export interface ResizeOptions extends Cell.Options {
            direction?: Direction;
        }

        export interface BBoxOptions extends Cell.EmbeddableOptions {
            rotate?: boolean;
        }
    }

    export class Element<A extends ObjectHash = Element.Attributes, S extends mvc.ModelSetOptions = dia.ModelSetOptions> extends Cell<A, S> {

        translate(tx: number, ty?: number, opt?: Element.TranslateOptions): this;

        position(opt?: Element.PositionOptions): g.Point;
        position(x: number, y: number, opt?: Element.PositionOptions): this;

        size(): Size;
        size(size: Partial<Size>, opt?: Element.ResizeOptions): this;
        size(width: number, height: number, opt?: Element.ResizeOptions): this;

        resize(width: number, height: number, opt?: Element.ResizeOptions): this;

        rotate(deg: number, absolute?: boolean, origin?: Point, opt?: { [key: string]: any }): this;

        angle(): number;

        scale(scaleX: number, scaleY: number, origin?: Point, opt?: { [key: string]: any }): this;

        fitEmbeds(opt?: { deep?: boolean, padding?: Padding, expandOnly?: boolean, shrinkOnly?: boolean }): this;
        fitToChildren(opt?: { deep?: boolean, padding?: Padding, expandOnly?: boolean, shrinkOnly?: boolean }): this;

        fitParent(opt?: { deep?: boolean, padding?: Padding, expandOnly?: boolean, shrinkOnly?: boolean, terminator?: Cell | Cell.ID }): this;

        getBBox(opt?: Element.BBoxOptions): g.Rect;

        addPort(port: Element.Port, opt?: S): this;

        addPorts(ports: Element.Port[], opt?: S): this;

        insertPort(before: number | string | Element.Port, port: Element.Port, opt?: S): this;

        removePort(port: string | Element.Port, opt?: S): this;

        removePorts(opt?: S): this;
        removePorts(ports: Array<Element.Port | string>, opt?: S): this;

        hasPorts(): boolean;

        hasPort(id: string): boolean;

        getPorts(): Element.Port[];

        getGroupPorts(groupName: string): Element.Port[];

        getPort(id: string): Element.Port;

        getPortsPositions(groupName: string): { [id: string]: Element.PortPosition };

        getPortIndex(port: string | Element.Port): number;

        getPortGroupNames(): string[];

        portProp(portId: string, path: dia.Path): any;

        portProp(portId: string, path: dia.Path, value?: any, opt?: S): Element;

        protected generatePortId(): string | number;

        static define(type: string, defaults?: any, protoProps?: any, staticProps?: any): Cell.Constructor<Element>;

        static attributes: { [attributeName: string]: Cell.PresentationAttributeDefinition<ElementView> };
    }

    // dia.Link

    export namespace Link {

        export interface EndCellArgs {
            magnet?: string;
            selector?: string;
            port?: string;
            anchor?: anchors.AnchorJSON;
            connectionPoint?: connectionPoints.ConnectionPointJSON;
            priority?: boolean;
        }

        export interface EndJSON extends EndCellArgs {
            id?: Cell.ID;
            x?: number;
            y?: number;
        }

        export interface GenericAttributes<T> extends Cell.GenericAttributes<T> {
            source?: EndJSON;
            target?: EndJSON;
            labels?: Label[];
            vertices?: Point[];
            router?: routers.Router | routers.RouterJSON;
            connector?: connectors.Connector | connectors.ConnectorJSON;
        }

        export interface LinkSelectors extends Cell.Selectors {
            '.connection'?: attributes.SVGPathAttributes;
            '.connection-wrap'?: attributes.SVGPathAttributes;
            '.marker-source'?: attributes.SVGPathAttributes;
            '.marker-target'?: attributes.SVGPathAttributes;
            '.labels'?: attributes.SVGAttributes;
            '.marker-vertices'?: attributes.SVGAttributes;
            '.marker-arrowheads'?: attributes.SVGAttributes;
            '.link-tools'?: attributes.SVGAttributes;
        }

        export interface Attributes extends Cell.GenericAttributes<LinkSelectors> {
        }

        export interface LabelPosition {
            distance?: number; // optional for default labels
            offset?: number | { x: number, y: number };
            angle?: number;
            args?: LinkView.LabelOptions;
        }

        export interface Label {
            markup?: string | MarkupJSON;
            position?: LabelPosition | number; // optional for default labels
            attrs?: Cell.Selectors;
            size?: Size;
        }

        export interface Vertex extends Point {
            [key: string]: any;
        }
    }

    export class Link<A extends ObjectHash = Link.Attributes, S extends mvc.ModelSetOptions = dia.ModelSetOptions> extends Cell<A, S> {

        toolMarkup: string;
        doubleToolMarkup?: string;
        vertexMarkup: string;
        arrowHeadMarkup: string;
        defaultLabel?: Link.Label; // default label props
        /**
         * @deprecated use `defaultLabel.markup` instead
         */
        labelMarkup?: string | MarkupJSON; // default label markup

        disconnect(): this;

        source(): Link.EndJSON;
        source(source: Link.EndJSON, opt?: S): this;
        source(source: Cell, args?: Link.EndCellArgs, opt?: S): this;

        target(): Link.EndJSON;
        target(target: Link.EndJSON, opt?: S): this;
        target(target: Cell, args?: Link.EndCellArgs, opt?: S): this;

        router(): routers.Router | routers.RouterJSON | null;
        router(router: routers.Router | routers.RouterJSON, opt?: S): this;
        router(name: routers.RouterType, args?: routers.RouterArguments, opt?: S): this;

        connector(): connectors.Connector | connectors.ConnectorJSON | null;
        connector(connector: connectors.Connector | connectors.ConnectorJSON, opt?: S): this;
        connector(name: connectors.ConnectorType, args?: connectors.ConnectorArguments, opt?: S): this;

        label(index?: number): Link.Label;
        label(index: number, label: Link.Label, opt?: S): this;

        labels(): Link.Label[];
        labels(labels: Link.Label[], opt?: S): this;

        hasLabels(): boolean;

        insertLabel(index: number, label: Link.Label, opt?: S): Link.Label[];

        appendLabel(label: Link.Label, opt?: S): Link.Label[];

        removeLabel(index?: number, opt?: S): Link.Label[];

        vertex(index?: number): Link.Vertex;
        vertex(index: number, vertex: Link.Vertex, opt?: S): this;

        vertices(): Link.Vertex[];
        vertices(vertices: Link.Vertex[], opt?: S): this;

        insertVertex(index: number, vertex: Link.Vertex, opt?: S): Link.Vertex[];

        removeVertex(index?: number, opt?: S): Link.Vertex[];

        reparent(opt?: S): Element;

        getSourceElement(): null | Element;

        getTargetElement(): null | Element;

        getSourceCell(): null | Cell;

        getTargetCell(): null | Cell;

        getPolyline(): g.Polyline;

        getSourcePoint(): g.Point;

        getTargetPoint(): g.Point;

        getBBox(): g.Rect;

        hasLoop(opt?: Cell.EmbeddableOptions): boolean;

        getRelationshipAncestor(): undefined | Element;

        isRelationshipEmbeddedIn(cell: Cell): boolean;

        applyToPoints(fn: (p: Point) => Point, opt?: S): this;

        scale(sx: number, sy: number, origin?: Point, opt?: S): this;

        translate(tx: number, ty: number, opt?: S): this;

        static define(type: string, defaults?: any, protoProps?: any, staticProps?: any): Cell.Constructor<Link>;

        static attributes: { [attributeName: string]: Cell.PresentationAttributeDefinition<LinkView> };
    }

    // dia.CellView

    export namespace CellView {

        export enum Highlighting {
            DEFAULT = 'default',
            EMBEDDING = 'embedding',
            CONNECTING = 'connecting',
            MAGNET_AVAILABILITY = 'magnetAvailability',
            ELEMENT_AVAILABILITY = 'elementAvailability'
        }

        export interface EventHighlightOptions {
            partial: boolean;
            type: Highlighting;
            [key: string]: any;
        }

        export interface Options<T extends Cell> extends mvc.ViewOptions<T, SVGElement> {
            id?: string;
        }

        export interface InteractivityOptions extends ElementView.InteractivityOptions, LinkView.InteractivityOptions {

        }

        export type FlagLabel = string | string[];
        export type PresentationAttributes = { [key: string]: FlagLabel };

        export type NodeData = { [key: string]: any };

        export type NodeMetrics = {
            data: NodeData;
            boundingRect: g.Rect;
            magnetMatrix: SVGMatrix;
            geometryShape: g.Shape;
        };
    }

    export abstract class CellViewGeneric<T extends Cell> extends mvc.View<T, SVGElement> {

        constructor(opt?: CellView.Options<T>);

        paper: Paper | null;

        initFlag(): CellView.FlagLabel;

        presentationAttributes(): CellView.PresentationAttributes;

        highlight(el?: mvc.$SVGElement, opt?: { [key: string]: any }): this;

        unhighlight(el?: mvc.$SVGElement, opt?: { [key: string]: any }): this;

        can(feature: string): boolean;

        findMagnet(el: mvc.$SVGElement): SVGElement | undefined;

        findNode(selector: string): SVGElement | HTMLElement | null;

        findNodes(groupSelector: string): Array<SVGElement | HTMLElement>;

        findProxyNode(el: SVGElement | null, type: string): SVGElement;

        getSelector(el: SVGElement, prevSelector?: string): string;

        notify(eventName: string, ...eventArguments: any[]): void;

        addTools(tools: dia.ToolsView): this;

        hasTools(name?: string): boolean;

        removeTools(): this;

        showTools(): this;

        hideTools(): this;

        updateTools(opt?: { [key: string]: any }): this;

        mountTools(): this;

        unmountTools(): this;

        getNodeMatrix(node: SVGElement): SVGMatrix;

        getNodeRotateMatrix(node: SVGElement): SVGMatrix;

        getNodeBoundingRect(node: SVGElement): g.Rect;

        getBBox(opt?: { useModelGeometry?: boolean }): g.Rect;

        getNodeBBox(node: SVGElement): g.Rect;

        getNodeUnrotatedBBox(node: SVGElement): g.Rect;

        isNodeConnection(node: SVGElement): boolean;

        getEventTarget(evt: dia.Event, opt?: { fromPoint?: boolean }): DOMElement;

        checkMouseleave(evt: dia.Event): void;

        getFlag(label: CellView.FlagLabel): number;

        requestUpdate(flags: number, opt?: { [key: string]: any }): void;

        dragLinkStart(evt: dia.Event, magnet: SVGElement, x: number, y: number): void;

        dragLink(evt: dia.Event, x: number, y: number): void;

        dragLinkEnd(evt: dia.Event, x: number, y: number): void;

        preventDefaultInteraction(evt: dia.Event): void;

        isDefaultInteractionPrevented(evt: dia.Event): boolean;

        isIntersecting(geometryShape: g.Shape, geometryData?: g.SegmentSubdivisionsOpt | null): boolean;

        protected isEnclosedIn(area: g.Rect): boolean;

        protected isInArea(area: g.Rect, options: g.StrictOpt): boolean;

        protected isAtPoint(point: g.Point, options: g.StrictOpt): boolean;

        protected findBySelector(selector: string, root?: SVGElement): SVGElement[];

        protected removeHighlighters(): void;

        protected updateHighlighters(): void;

        protected transformHighlighters(): void;

        protected hasFlag(flags: number, label: CellView.FlagLabel): boolean;

        protected removeFlag(flags: number, label: CellView.FlagLabel): number;

        protected setFlags(): void;

        protected onToolEvent(eventName: string): void;

        protected pointerdblclick(evt: dia.Event, x: number, y: number): void;

        protected pointerclick(evt: dia.Event, x: number, y: number): void;

        protected contextmenu(evt: dia.Event, x: number, y: number): void;

        protected pointerdown(evt: dia.Event, x: number, y: number): void;

        protected pointermove(evt: dia.Event, x: number, y: number): void;

        protected pointerup(evt: dia.Event, x: number, y: number): void;

        protected mouseover(evt: dia.Event): void;

        protected mouseout(evt: dia.Ev