@argdown/map-views/dist/index.d.ts

Browser-based map views for Argdown data using dagre-d3 and viz.js

import { DefaultSettings } from '@argdown/core';
import { Graphviz } from '@hpcc-js/wasm-graphviz';
import { IMap } from '@argdown/core';
import { IVizSettings } from '@argdown/core';
import { Selection as Selection_2 } from 'd3-selection';
import { ZoomBehavior } from 'd3-zoom';

export declare interface CanSelectNode {
    selectNode(id: string): void;
    deselectNode(): void;
}

export declare const convertCoordsL2L: (svg: SVGSVGElement, fromElem: SVGGraphicsElement, toElem: SVGGraphicsElement) => DOMPoint;

export declare const dagreDefaultSettings: DefaultSettings<IDagreSettings>;

export declare class DagreMap implements CanSelectNode {
    svgElement: SVGSVGElement;
    zoomManager: ZoomManager;
    selectedElement?: SVGGraphicsElement | null;
    onSelectionChanged?: OnSelectionChangedHandler;
    constructor(svgElement: SVGSVGElement, onZoomChanged?: OnZoomChangedHandler, onSelectionChanged?: OnSelectionChangedHandler);
    render(props: IDagreMapProps): void;
    deselectNode(): void;
    private _deselectNode;
    selectNode(id: string): void;
}

export declare interface IDagreLabelSettings {
    bold?: boolean;
    font?: string;
    fontSize?: number;
    charactersInLine?: number;
}

export declare interface IDagreMapProps {
    settings?: IDagreSettings;
    map: IMap;
    selectedNode?: string | null;
    position?: {
        x?: number;
        y?: number;
    };
    scale?: number;
}

export declare interface IDagreNodeSettings {
    lineWidth?: number;
    rx?: number;
    ry?: number;
    title?: IDagreLabelSettings;
    text?: IDagreLabelSettings;
}

export declare interface IDagreSettings {
    rankDir?: string;
    rankSep?: number;
    nodeSep?: number;
    measureLineWidth?: boolean;
    argument?: IDagreNodeSettings;
    statement?: IDagreNodeSettings;
    group?: {
        lineWidth?: number;
        title?: IDagreLabelSettings;
    };
}

declare interface IMapState {
    size: {
        width: number;
        height: number;
    };
    position: {
        x: number;
        y: number;
    };
    scale: number;
    selectedNode?: string | null;
}

export declare interface IVizJsSettingsExtended extends IVizSettings {
    images?: Array<{
        path: string;
        width: number;
        height: number;
    }>;
}

export declare type OnSelectionChangedHandler = (id: string | null) => void;

export declare type OnZoomChangedHandler = (data: {
    size: {
        width: number;
        height: number;
    };
    scale: number;
    position: {
        x: number;
        y: number;
    };
}) => void;

/**
 * Provide an SVG container and optional onZoomChanged and onSelectionChanged handlers to create an SvgMapView.
 *
 * If you call the render method with an SVG string the svg will get rendered inside the container and zoom/pan
 * functionality will be added.
 *
 * Using the selectNode and deselectNode methods you can programmatically select and deselect nodes inside the SVG.
 */
export declare class SvgMapView implements CanSelectNode {
    private zoomManager;
    private svgContainer;
    private selectedElement?;
    private selectedElementStrokeWidth?;
    private onSelectionChanged?;
    constructor(svgContainer: HTMLElement, onZoomChanged?: OnZoomChangedHandler, onSelectionChanged?: OnSelectionChangedHandler);
    render(svgString: string, props: {
        position?: {
            x?: number;
            y?: number;
        };
        scale?: number;
        selectedNode?: string | null;
    }): void;
    getNodeWithArgdownId(id: string): SVGGraphicsElement | undefined;
    getArgdownId(node: SVGGraphicsElement): string;
    deselectNode(): void;
    private _deselectNode;
    selectNode(id: string): void;
}

export declare const vizJsDefaultSettings: {};

export declare class VizJsMap implements CanSelectNode {
    viz: Graphviz | undefined;
    zoomManager: ZoomManager;
    svgContainer: HTMLElement;
    selectedElement?: SVGGraphicsElement | null;
    selectedElementStrokeWidth?: string;
    onSelectionChanged?: OnSelectionChangedHandler;
    constructor(svgContainer: HTMLElement, onZoomChanged?: OnZoomChangedHandler, onSelectionChanged?: OnSelectionChangedHandler);
    renderAsync(dot: string, options: IVizSettings): Promise<string>;
    render(props: VizJsMapProps): Promise<void>;
    getNodeWithArgdownId(id: string): SVGGraphicsElement | undefined;
    getArgdownId(node: SVGGraphicsElement): string;
    deselectNode(): void;
    /**
     *
     * Because we cannot override inline styles, we have to save original inline stroke and strokeWidth attributes and put them back in on deselection.
     */
    private _deselectNode;
    selectNode(id: string): void;
}

export declare interface VizJsMapProps {
    dot: string;
    settings?: IVizJsSettingsExtended;
    scale?: number;
    position?: {
        x?: number;
        y?: number;
    };
    selectedNode?: string | null;
}

export declare class ZoomManager {
    zoom?: ZoomBehavior<SVGSVGElement, Record<string, never>>;
    svg?: Selection_2<SVGSVGElement, Record<string, never>, null | HTMLElement, any>;
    svgGraph?: Selection_2<SVGGraphicsElement, Record<string, never>, null | HTMLElement, any>;
    state: IMapState;
    moveToDuration: number;
    onZoomChanged?: OnZoomChangedHandler;
    graphIsBottomAligned: boolean;
    constructor(onZoomChanged?: OnZoomChangedHandler, graphIsBottomAligned?: boolean, moveToDuration?: number);
    init(svg: Selection_2<SVGSVGElement, any, null | HTMLElement, any>, svgGraph: Selection_2<SVGGraphicsElement, any, null | HTMLElement, any>, width: number, height: number): void;
    showAllAndCenterMap(): void;
    resetZoom(): void;
    moveTo(x: number, y: number): void;
    moveToElement(element: SVGGraphicsElement): void;
    setZoom: (x: number, y: number, scale: number, duration: number) => void;
}

export { }