@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/paper-renderer/definitions.d.ts

@@ -0,0 +1,83 @@
+import { BrowserUIDefaults, BrowserUIOptions } from "../definitions";
+/**
+ * Css class added to a Paper component's container element
+ * @cssClass
+ * @context paper
+ */
+export declare const CLASS_PAPER = "vjs-paper";
+/**
+ * Css class added to the DOM element used to render a Paper object.
+ * @group Components
+ * @category Paper
+ * @cssClass
+ * @context paper
+ */
+export declare const CLASS_PAPER_CANVAS = "vjs-paper-canvas";
+/**
+ * Default margin to leave around content in a Paper object.
+ * @group Components
+ * @category Paper
+ */
+export declare const DEFAULT_PAPER_MARGIN = 20;
+/**
+ * Css class added to elements used to render nodes in a Paper object.
+ * @group Components
+ * @category Paper
+ * @cssClass
+ * @context paper
+ */
+export declare const CLASS_PAPER_NODE = "vjs-paper-node";
+/**
+ * Constant used to specify that a paper should be left/top aligned.
+ * @group Components
+ * @category Paper
+ */
+export declare const PAPER_ALIGN_START = "start";
+/**
+ * Constant used to specify that a paper should be center aligned.
+ * @group Components
+ * @category Paper
+ */
+export declare const PAPER_ALIGN_CENTER = "center";
+/**
+ * Constant used to specify that a paper should be right/bottom aligned.
+ * @group Components
+ * @category Paper
+ */
+export declare const PAPER_ALIGN_END = "end";
+/**
+ * Defines how to align the content in a Paper object. In most situations, the dimensions of the paper's content is not square, and the dimensions of the paper itself is not square either. When this is the case, there is one axis in which there is more whitespace than the other. This type identifies the strategies available for aligning the Paper content with respect to the whitespace. The default is to center it, in each axis.
+ * @group Components
+ * @category Paper
+ */
+export type PaperAlignment = typeof PAPER_ALIGN_START | typeof PAPER_ALIGN_CENTER | typeof PAPER_ALIGN_END;
+/**
+ * Options specific to the Paper UI.
+ * @group Components
+ * @category Paper
+ */
+export interface PaperOptions extends BrowserUIOptions<PaperDefaults> {
+    /**
+     * Margin to leave around content
+     */
+    margin?: number;
+    /**
+     * Strategy to use to place content within whitespace. This applies to both axes; use horizontalAlign and/or verticalAlign to set axes differently.
+     */
+    align?: PaperAlignment;
+    /**
+     * Strategy to use to place content within whitespace in the horizontal axis.
+     */
+    horizontalAlign?: PaperAlignment;
+    /**
+     * Strategy to use to place content within whitespace in the vertical axis.
+     */
+    verticalAlign?: PaperAlignment;
+}
+/**
+ * Defaults for a Paper renderer
+ * @group Components
+ * @category Defaults
+ */
+export interface PaperDefaults extends BrowserUIDefaults {
+}

package/types/browser-ui/paper-renderer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './definitions';
+export * from './paper';

package/types/browser-ui/paper-renderer/paper.d.ts

@@ -0,0 +1,50 @@
+import { BrowserUI } from "../browser-visuallyjs-instance";
+import { ModelOptions, DataSource, PointXY, RectangleXY } from "../../core";
+import { BrowserElement } from "../util";
+import { ViewportBounds } from "../../ui";
+import { BrowserUIModel, TemplateRenderer } from "../browser-ui";
+import { PaperDefaults, PaperAlignment, PaperOptions } from "./definitions";
+import { Background } from "../definitions";
+/**
+ * Provides a canvas on which nodes, groups and edges can be rendered, with support for layouts and various plugins. This is not a class that API users should instantiate directly: for users of a library integration, a Paper will be created internally by the appropriate component; for users of vanilla VisuallyJs, a Paper is created either via the {@link createPaper} factory method, or via a `renderPaper` call on an instance of the {@link BrowserUIModel}.
+ * @group Components
+ */
+export declare class Paper extends BrowserUI {
+    model: BrowserUIModel;
+    private $canvas;
+    $margin: number;
+    $horizontalAlign: PaperAlignment;
+    $verticalAlign: PaperAlignment;
+    /**
+     * @internal
+     * @param model
+     * @param dataSource
+     * @param container
+     * @param options
+     * @param templateRenderer
+     * @param defaults
+     */
+    constructor(model: BrowserUIModel, dataSource: DataSource, container: BrowserElement, options: PaperOptions, templateRenderer: TemplateRenderer<BrowserElement>, defaults: PaperDefaults);
+    $getCanvasElement(): HTMLElement | SVGElement;
+    /**
+     * Synchronises the view with the dataset, ensuring all the content is visible.
+     */
+    syncView(): void;
+    /**
+     * Sets the margin to be used and synchronises the view.
+     * @param m
+     */
+    setMargin(m: number): void;
+    toPageLocation(left: number, top: number): PointXY;
+    fromPageLocation(left: number, top: number, roundValues?: boolean): PointXY;
+    fromWindowLocation(left: number, top: number, roundValues?: boolean): PointXY;
+    mapEventLocation(event: MouseEvent): PointXY;
+    getViewportBoundsInfo(): ViewportBounds;
+    getApparentCanvasLocation(): PointXY;
+    addBackground(background: Background): void;
+    removeBackground(background: Background): void;
+    zoomOut(canvasLoc?: PointXY): void;
+    zoomIn(canvasLoc?: PointXY): void;
+    getVisibleCanvasBounds(): RectangleXY;
+}
+export declare function createPaper(container: BrowserElement, options?: PaperOptions, modelOptions?: ModelOptions, data?: any): Paper;

package/types/browser-ui/pinch-listener.d.ts

@@ -0,0 +1,33 @@
+import { EventManager } from "./event-manager";
+import { PointXY } from "../core/util";
+/**
+ * Pinch listener for all touch browsers - ipad, android, and windows laptops/surfaces. Needless to say,
+ * every browser does it differently. IE10+ uses PointerEvents; ipad safari/windows chrome/ipad chrome/
+ * android chrome use TouchEvents.  The listener posts pinchstart, pinch happening, and pinch end events.
+ * @internal
+ */
+export interface PinchListenerOptions {
+    el: any;
+    onPinchStart?: Function;
+    onPinch?: Function;
+    onPinchEnd?: Function;
+    enableWheelZoom?: boolean;
+}
+export declare class PinchListener {
+    isPointerDevice: boolean;
+    isTouchDevice: boolean;
+    center: PointXY;
+    radius: number;
+    startRadius: number;
+    onPinchStart: Function;
+    onPinch: Function;
+    onPinchEnd: Function;
+    eventManager: EventManager;
+    constructor(params: PinchListenerOptions);
+    private _fire;
+    private _fireEnd;
+    private bind;
+    private unbind;
+    listenerTypes: Record<string, (p: PinchListenerOptions) => void>;
+    destroy(): void;
+}

package/types/browser-ui/plugins/background/available-backgrounds.d.ts

@@ -0,0 +1,12 @@
+import { Background } from "../../definitions";
+import { Constructable } from "../../../core";
+/**
+ *
+ * background factory.
+ *
+ * @internal
+ */
+export declare const AvailableBackgrounds: {
+    get: (name: string) => Constructable<Background>;
+    register: (name: string, b: Constructable<Background>) => void;
+};

package/types/browser-ui/plugins/background/background-options.d.ts

@@ -0,0 +1,62 @@
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+import { Background } from "../../definitions";
+/**
+ * Defines the `logarithmic` tiling strategy
+ */
+export declare const TILING_STRATEGY_LOGARITHMIC = "logarithmic";
+/**
+ * Defines the `absolute` tiling strategy
+ */
+export declare const TILING_STRATEGY_ABSOLUTE = "absolute";
+/**
+ * Defines how the tiles are arranged in a tiled background layer. With `TILING_STRATEGY_LOGARITHMIC` each layer is assumed to have a maximum of (2^level+1) tiles in each axis (for instance at level 0, 2 tiles). This setup is how apps like Google maps arrange their tiles. With `TILING_STRATEGY_ABSOLUTE` tiling, the number of tiles in each axis is computed as the size of the image in that axis divided by the tile size in that axis. Thus, for each zoom level, there are the same number of tiles.
+ *
+ * @group Plugins
+ * @category Background
+ */
+export type TilingStrategy = typeof TILING_STRATEGY_ABSOLUTE | typeof TILING_STRATEGY_LOGARITHMIC;
+/**
+ * Callback from the {@link SimpleBackground} when the background image has loaded.
+ * @group Plugins
+ * @category Background
+ */
+export type OnBackgroundReadyCallback = (bg: Background, ui: BrowserUI) => any;
+/**
+ * Base options for a background
+ * @group Plugins
+ * @category Background
+ */
+export interface BackgroundOptions {
+    /**
+     * Type of background to render.
+     */
+    type: string;
+    /**
+     * Optional function to call when the image has loaded (or otherwise claims to be ready)
+     */
+    onBackgroundReady?: OnBackgroundReadyCallback;
+    /**
+     * Whether or not the background should initially be visible. Defaults to true.
+     */
+    visible?: boolean;
+}
+/**
+ * Options for an {@link ImageBackground}
+ * @group Plugins
+ * @category Background
+ */
+export interface ImageBackgroundOptions extends BackgroundOptions {
+    /**
+     * URL for the background. When `type` is set to `BackgroundTypes.simple` you can supply either this, or an Image. When `type` is set to `BackgroundTypes.tiled`, you can supply this, or you can supply a `urlGenerator` function instead. If you supply `url` and no `urlGenerator`, the url you supply is treated as a template for the url for any given tile, and is expected to contain `{z}`, `{x}` and `{y}` placeholders. The form of the URL can be anything you like as long as it has the placeholders for z, x and y.  For instance:
+     *
+     * `http://foo.com/{z}/{x}/{y}`
+     * `https://bar.com?zoom={z}&x={x}&y={y}`
+     *
+     * etc
+     */
+    url?: string;
+    /**
+     * For `simple` backgrounds, the image to use. Optional; you can also supply a url.
+     */
+    img?: HTMLImageElement;
+}

package/types/browser-ui/plugins/background/background-plugin.d.ts

@@ -0,0 +1,62 @@
+import { BackgroundOptions } from "./background-options";
+import { InternalBackgroundOptions } from "../../definitions";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+import { Background } from "../../definitions";
+import { BaseBrowserUIPlugin, BrowserUIPlugin } from "../browser-ui-plugin";
+/**
+ * Offers a means to manage backgrounds for a browser UI.
+ * @group Plugins
+ * @category Background
+ */
+export declare class BackgroundPlugin<T extends BackgroundOptions> extends BaseBrowserUIPlugin implements BrowserUIPlugin<InternalBackgroundOptions<T>> {
+    static type: string;
+    id: "background";
+    /**
+     * Exposed for exporter to use
+     * @internal
+     */
+    background: Background;
+    private _visible;
+    ui: BrowserUI;
+    /**
+     * @internal
+     * @param ui
+     * @param backgroundOptions
+     */
+    initialise<T extends BackgroundOptions>(ui: BrowserUI, backgroundOptions: InternalBackgroundOptions<T>): boolean;
+    /**
+     * @internal
+     */
+    destroy(): void;
+    /**
+     * @internal
+     */
+    reset(): void;
+    /**
+     * Sets the current image url.
+     *
+     * @param url
+     */
+    setUrl(url: string): void;
+    /**
+     * Sets the background to be visible.
+     *
+     */
+    show(): void;
+    /**
+     * Sets the background to be invisible
+     *
+     */
+    hide(): void;
+    /**
+     * Toggles the visible state of the background.
+     *
+     */
+    toggle(): void;
+    /**
+     * Sets the visible state of the background
+     * @param v
+     *
+     */
+    setVisible(v: boolean): void;
+}

package/types/browser-ui/plugins/background/generated-grid-background.d.ts

@@ -0,0 +1,230 @@
+import { BackgroundOptions } from "./background-options";
+import { ViewportBounds } from "../../../ui";
+import { Grid } from "../../../core";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+import { Background, InternalBackgroundOptions } from "../../definitions";
+export declare enum GridTypes {
+    dotted = "dotted",
+    lines = "lines"
+}
+/**
+ * Defines the 'dotted' grid type
+ * @group Plugins
+ * @category Background
+ * @constant
+ */
+export declare const GRID_TYPE_DOTTED = "dotted";
+/**
+ * Defines the 'lines' grid type
+ * @group Plugins
+ * @category Background
+ * @constant
+ */
+export declare const GRID_TYPE_LINES = "lines";
+/**
+ * Grid type for grid background.
+ * @group Plugins
+ * @category Background
+ */
+export type GridType = typeof GRID_TYPE_DOTTED | typeof GRID_TYPE_LINES;
+/**
+ * Options for the generated grid background.
+ * @group Plugins
+ * @category Background
+ */
+export interface GeneratedGridBackgroundOptions extends BackgroundOptions {
+    /**
+     * The grid to use. This is optional; if you do not supply one the background will attempt to read the grid definition from the Surface. If that is also not set then a default grid of 50x50 pixels will be used.
+     */
+    grid?: Grid;
+    /**
+     * Whether or not to show a thick border around the entire background. Defaults to false.
+     */
+    showBorder?: boolean;
+    /**
+     * The minimum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minWidth / 2) - (minWidth / 2). Defaults to 20 000.
+     */
+    minWidth?: number;
+    /**
+     * The minimum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to always at least span the range of (-minHeight / 2) - (minHeight / 2). Defaults to 20 000.
+     */
+    minHeight?: number;
+    /**
+     * Defaults to false. If true, the grid will also draw tick marks between the grid lines.
+     */
+    showTickMarks?: boolean;
+    /**
+     * Number of tick marks to draw per cell. Defaults to 2.
+     */
+    tickMarksPerCell?: number;
+    /**
+     * The maximum width for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxWidth / 2) - (maxWidth / 2).  maxWidth takes precedence over minWidth.
+     */
+    maxWidth?: number;
+    /**
+     * The maximum height for the grid. The value you provided is divided by 2 and then the grid is guaranteed to never exceed the range of (-maxHeight / 2) - (maxHeight / 2).  maxHeight takes precedence over minHeight.
+     */
+    maxHeight?: number;
+    /**
+     * Defaults to true, and instructs the grid that if the grid has grown beyond any minimum value set in either axis, if the content bounds subsequently shrink in that axis below the minimum, the grid should shrink back to the minimum. If you set this to false the grid will never shrink back to its minimum values once they have been exceeded.
+     */
+    autoShrink?: boolean;
+    /**
+     * Type of grid - lines or dots. Defaults to lines.
+     */
+    gridType?: GridType;
+    /**
+     * The radius for dots representing grid positions (when gridType id GridTypes.dotted). Defaults to 2.
+     */
+    dotRadius?: number;
+    /**
+     * The radius for dots representing grid tick marks (when gridType id GridTypes.dotted). Defaults to 1.
+     */
+    tickDotRadius?: number;
+    /**
+     * Whether or not the background is initially visible. Defaults to true.
+     */
+    visible?: boolean;
+}
+/**
+ * The grid that will be used in the absence of a grid in the background options or a grid set on the surface.
+ * @internal
+ */
+export declare const DEFAULT_GRID: Grid;
+/**
+ * The default number of tick marks per cell.
+ * @internal
+ */
+export declare const DEFAULT_TICK_MARKS_PER_CELL = 2;
+/**
+ * The default width of tick marks
+ * @internal
+ */
+export declare const DEFAULT_TICK_LINE_STROKE = "#ddd";
+/**
+ * The default stroke color of tick marks.
+ * @internal
+ */
+export declare const DEFAULT_LINE_STROKE = "#ddd";
+/**
+ * The css class that will be added to a grid background's main element
+ * @group Plugins
+ * @category Background
+ * @cssClass
+ * @context generatedGrid
+ */
+export declare const CLASS_BACKGROUND = "vjs-background";
+/**
+ * The css class that will be added to a grid background's border
+ * @group Plugins
+ * @category Background
+ * @cssClass
+ * @context generatedGrid
+ */
+export declare const CLASS_BACKGROUND_BORDER = "vjs-background-border";
+/**
+ * The css class that will be added to the major and minor dots/lines in a grid background
+ * @group Plugins
+ * @category Background
+ * @cssClass
+ * @context generatedGrid
+ */
+export declare const CLASS_BACKGROUND_GRID = "vjs-background-grid";
+/**
+ * The class that will be added to the lines representing a grid background's tick marks (when gridType is GridTypes.lines)
+ * @group Plugins
+ * @category Background
+ * @cssClass
+ * @context generatedGrid
+ */
+export declare const CLASS_BACKGROUND_GRID_MINOR = "vjs-background-grid-minor";
+/**
+ * The class that will be added to the lines representing a grid background's grid lines (when gridType is GridTypes.lines)
+ * @group Plugins
+ * @category Background
+ * @cssClass
+ * @context generatedGrid
+ */
+export declare const CLASS_BACKGROUND_GRID_MAJOR = "vjs-background-grid-major";
+/**
+ * The class that will be added to the dots representing a grid background's grid lines (when gridType is GridTypes.dotted)
+ * @group Plugins
+ * @category Background
+ * @cssClass
+ * @context generatedGrid
+ */
+export declare const CLASS_BACKGROUND_GRID_DOT_MAJOR = "vjs-background-grid-dotted-major";
+/**
+ * The class that will be added to the dots representing a grid background's grid tick marks (when gridType is GridTypes.dotted)
+ * @group Plugins
+ * @category Background
+ * @cssClass
+ * @context generatedGrid
+ */
+export declare const CLASS_BACKGROUND_GRID_DOT_MINOR = "vjs-background-grid-dotted-minor";
+/**
+ * A background that generates an SVG grid based upon the current content bounds,
+ * ensuring that there is always a grid visible underneath the content. The grid may consist of
+ * lines or dots - control this via the `gridType` option.
+ *
+ * The size of the grid can be mandated in the options for the background, or
+ * it can be extracted from the surface.
+ *
+ * You can hide/show the background grid via the `hide()`, `show()`, `toggle()` or `setVisible(boolean)`
+ * methods.
+ *
+ * @group Plugins
+ * @category Background
+ */
+export declare class GeneratedGridBackground implements Background {
+    _suspended: boolean;
+    static type: string;
+    type: string;
+    grid: Grid;
+    ui: BrowserUI;
+    showBorder: boolean;
+    minWidth: number;
+    minHeight: number;
+    maxWidth: number;
+    maxHeight: number;
+    showTickMarks: boolean;
+    tickMarksPerCell: number;
+    autoShrink: boolean;
+    dotRadius: number;
+    tickDotRadius: number;
+    gridType: GridType;
+    currentBounds: ViewportBounds;
+    _maximumExtentsReached: {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    };
+    backgroundContainer: SVGElement;
+    private readonly _$_majorGridId;
+    private readonly _$_minorGridId;
+    constructor(params: InternalBackgroundOptions<GeneratedGridBackgroundOptions>);
+    owns(el: any): boolean;
+    getWidth(): number;
+    getHeight(): number;
+    setZoom(zoom: number, doNotDebounce?: boolean): void;
+    pan(): void;
+    destroy(): void;
+    private _recompute;
+    private _$_minorLinesGrid;
+    private _$_majorLinesGrid;
+    private _$_minorDotsGrid;
+    private _$_majorDotsGrid;
+    private _$_generateGridPattern;
+    /**
+     * Generates the SVG markup for the grid. Exposed as a public method for use by the exporter but not part of the public API.
+     * @internal
+     */
+    generateGrid(): string;
+    /**
+     * Sets the visible state of the grid
+     * @param v
+     *
+     */
+    _setVisible(v: boolean): void;
+}

package/types/browser-ui/plugins/background/index.d.ts

@@ -0,0 +1,6 @@
+export * from './background-options';
+export * from './simple-background';
+export * from './tiled-background';
+export * from './generated-grid-background';
+export * from './available-backgrounds';
+export * from './background-plugin';

package/types/browser-ui/plugins/background/simple-background.d.ts

@@ -0,0 +1,33 @@
+import { ImageBackgroundOptions, OnBackgroundReadyCallback } from "./background-options";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+import { ImageBackground, InternalBackgroundOptions } from "../../definitions";
+/**
+ * @internal
+ */
+export interface SimpleBackgroundOptions extends ImageBackgroundOptions {
+}
+/**
+ * A background consisting of a single image.
+ * @group Plugins
+ * @category Background
+ */
+export declare class SimpleBackground implements ImageBackground {
+    static type: string;
+    type: string;
+    canvas: HTMLElement;
+    onBackgroundReady: OnBackgroundReadyCallback;
+    imagePlaceholder: HTMLImageElement;
+    ui: BrowserUI;
+    protected image: HTMLImageElement;
+    protected url: string;
+    constructor(params: InternalBackgroundOptions<SimpleBackgroundOptions>);
+    protected _init(params: SimpleBackgroundOptions): void;
+    setUrl(url: string): void;
+    owns(el: any): boolean;
+    getWidth(): number;
+    getHeight(): number;
+    setZoom(zoom: number, doNotDebounce?: boolean): void;
+    pan(): void;
+    destroy(): void;
+    _setVisible(v: boolean): void;
+}