@visuallyjs/browser-ui 1.0.0

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

@@ -0,0 +1,118 @@
+import { ImageBackgroundOptions, TilingStrategy } from "./background-options";
+import { Size } from "../../../core";
+import { VisuallyJSDOMElement } from "../../element-facade";
+import { PanZoom } from "../../pan-zoom";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+import { ImageBackground, InternalBackgroundOptions } from "../../definitions";
+/**
+ * The class that is added to each tile element in a tiled background
+ * @cssClass
+ * @context imageBackground
+ */
+export declare const CLASS_BACKGROUND_TILE = "vjs-background-tile";
+export type TileSpecs = {
+    xCount: number;
+    xSize: number;
+    yCount: number;
+    ySize: number;
+};
+declare class Layer {
+    scaledImageSize: number;
+    scaledImageSizeH: number;
+    container: any;
+    zoom: number;
+    specs: TileSpecs;
+    url: string;
+    urlGenerator: (z: number, x: number, y: number) => string;
+    apparentZoom: number;
+    xTiles: number;
+    yTiles: number;
+    private _images;
+    constructor(background: TiledBackground, params: InternalBackgroundOptions<TiledBackgroundOptions>, zoom: number);
+    private _url;
+    private _resolver;
+    setActive(a: boolean): void;
+    private _load;
+    ensureLoaded(xo: number, yo: number, xf: number, yf: number): void;
+}
+export interface TiledBackgroundOptions extends ImageBackgroundOptions {
+    /**
+     * For tiled backgrounds, an optional function you can supply to generate the URL for a given tile. See `url` for
+     * an explanation of the default syntax for urls when using a tiled background.
+     * @param z
+     * @param x
+     * @param y
+     */
+    urlGenerator?: (z: number, x: number, y: number) => string;
+    /**
+     * For tiled backgrounds, provides the width and height of tiles. Every tile is assumed to have these dimensions,
+     * even if the tile has whitespace in it. You must supply this if you set `type` to BackgroundTypes.tiled`.
+     */
+    tileSize?: Size;
+    /**
+     * Required for tiled backgrounds. Indicates the width of the full image.
+     */
+    width?: number;
+    /**
+     * Required for tiled backgrounds. Indicates the height of the full image.
+     */
+    height?: number;
+    /**
+     * Required for tiled backgrounds. Indicates the maximum zoom level. Zoom starts at 0 - fully zoomed out - and
+     * increases in integer values from there. Each successive zoom level is twice the zoom of the previous level,
+     * meaning two times as many tiles in each direction.
+     */
+    maxZoom?: number;
+    /**
+     * Default is TilingStrategies.logarithmic. See notes for `TilingStrategies` enum.
+     */
+    tiling?: TilingStrategy;
+    /**
+     * For tiled backgrounds, how long to wait after a pan before reloading tiles.
+     */
+    panDebounceTimeout?: number;
+    /**
+     * For tiled backgrounds, how long to wait after a zoom before reloading tiles.
+     */
+    zoomDebounceTimeout?: number;
+}
+export declare class TiledBackground implements ImageBackground {
+    static type: string;
+    type: string;
+    canvas: VisuallyJSDOMElement;
+    viewport: VisuallyJSDOMElement;
+    private layers;
+    private currentLayer;
+    widgetZoom: number;
+    zoomWidget: PanZoom;
+    width: number;
+    height: number;
+    tileSize: Size;
+    panDebounceTimeout: number;
+    zoomDebounceTimeout: number;
+    maxZoom: number;
+    ui: BrowserUI;
+    tiling: TilingStrategy;
+    urlGenerator: (z: number, x: number, y: number) => string;
+    _debounceUpdateZoom: Function;
+    _doEnsureVisibleTiles: Function;
+    constructor(params: InternalBackgroundOptions<TiledBackgroundOptions>);
+    private _mapZoomToLayer;
+    private _calculateScale;
+    private _ensureVisibleTiles;
+    getCurrentLayer(): Layer;
+    private debounce;
+    private _doUpdateZoom;
+    setZoom(z: number, doNotDebounce?: boolean): void;
+    pan(): void;
+    owns(el: any): boolean;
+    getHeight(): number;
+    getWidth(): number;
+    destroy(): void;
+    setUrl(url: string): void;
+    getTileSpecs(zoom: number): TileSpecs;
+    private _$_getTileSpecsAbsolute;
+    private _$_getTileSpecsLogarithmic;
+    _setVisible(v: boolean): void;
+}
+export {};

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

@@ -0,0 +1,90 @@
+import { BrowserElement } from "../util";
+import { BrowserUI } from "../browser-visuallyjs-instance";
+import { GroupResizeResult, UIPlugin, UIPluginOptions, ViewportElement, ViewportGroupElement } from "../../ui";
+import { Edge, Size, Vertex, VertexUpdatedReason } from "../../core";
+/**
+ * Base interface for BrowserUI plugin options.
+ * @group Plugins
+ * @category Definitions
+ */
+export interface BrowserUIPluginOptions extends UIPluginOptions {
+}
+/**
+ * Defines a BrowserUI plugin
+ * @group Plugins
+ * @category Definitions
+ */
+export interface BrowserUIPlugin<O extends UIPluginOptions> extends UIPlugin<BrowserElement, O, BrowserUI> {
+    $groupMemberRemoved: (element: ViewportElement<BrowserElement>) => any;
+    $groupMemberAdded: (element: ViewportElement<BrowserElement>) => any;
+}
+/**
+ * Base implementation of UI plugin that provides stubs for interface methods.
+ * @group Plugins
+ * @category Definitions
+ */
+export declare abstract class BaseBrowserUIPlugin {
+    /**
+     * Empty implementation of $groupMemberAdded.
+     */
+    $groupMemberAdded(element: ViewportElement<BrowserElement>): void;
+    /**
+     * Empty implementation of $groupMemberRemoved.
+     */
+    $groupMemberRemoved(element: ViewportElement<BrowserElement>): void;
+    /**
+     * Empty implementation of $nodeRemoved.
+     */
+    $nodeRemoved(element: ViewportElement<BrowserElement>): void;
+    /**
+     * Empty implementation of $groupRemoved.
+     */
+    $groupRemoved(element: ViewportGroupElement<BrowserElement>): void;
+    /**
+     * Empty implementation of $groupResized.
+     */
+    $groupResized(params: GroupResizeResult<BrowserElement>): void;
+    /**
+     * Empty implementation of $groupCollapsed
+     */
+    $groupCollapsed(element: ViewportGroupElement<BrowserElement>): void;
+    /**
+     * Empty implementation of $groupExpanded.
+     */
+    $groupExpanded(element: ViewportGroupElement<BrowserElement>): void;
+    /**
+     * Empty implementation of $vertexRotated.
+     */
+    $vertexRotated(element: ViewportElement<BrowserElement>, rotation: number): void;
+    /**
+     * Empty implementation of $vertexResized
+     */
+    $vertexResized(element: ViewportElement<BrowserElement>, width: number, height: number): void;
+    /**
+     * Empty implementation of $vertexRerendered.
+     */
+    $vertexRerendered(p: {
+        el: BrowserElement;
+        id: string;
+        vertex: Vertex;
+        size: Size;
+    }): void;
+    /**
+     * Empty implementation of $vertexUpdated
+     */
+    $vertexUpdated(element: ViewportElement<BrowserElement>, reason: VertexUpdatedReason): void;
+    /**
+     * Empty implementation of $vertexSynced
+     */
+    $vertexSynced(element: ViewportElement<BrowserElement>): void;
+    /**
+     * Invoked when an edge has been removed
+     * @param edge
+     */
+    $edgeRemoved(edge: Edge): void;
+    /**
+     * Invoked when an edge has been updated
+     * @param edge
+     */
+    $edgeUpdated(edge: Edge): void;
+}

package/types/browser-ui/plugins/edge-routing/index.d.ts

@@ -0,0 +1,66 @@
+import { RelayoutParams } from "../../../ui";
+import { VisuallyJsModel, HierarchyLayout, EdgeRouterOptions, OrthogonalRouterMode } from "../../../core";
+import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../browser-ui-plugin";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+/**
+ * Identifies the direct line routing mode.
+ * @group Plugins
+ * @category Edge Routing
+ */
+export declare const EDGE_ROUTING_PLUGIN_MODE_DIRECT = "direct";
+/**
+ * Identifies the orthogonal line routing mode.
+ * @group Plugins
+ * @category Edge Routing
+ */
+export declare const EDGE_ROUTING_PLUGIN_MODE_ORTHOGONAL = "orthogonal";
+/**
+ * Available modes for the edge routing plugin.
+ * @group Plugins
+ * @category Edge Routing
+ */
+export type EdgeRoutingPluginMode = typeof EDGE_ROUTING_PLUGIN_MODE_DIRECT | typeof EDGE_ROUTING_PLUGIN_MODE_ORTHOGONAL;
+/**
+ * Options for the edge routing plugin.
+ * @group Plugins
+ * @category Edge Routing
+ */
+export interface EdgeRoutingPluginOptions extends BrowserUIPluginOptions {
+    /**
+     * Mode to use to draw edges. 'orthogonal' is like the orthogonal connector - segments that are either vertical or horizontal.
+     * `direct` draws straight lines through regions. Both modes assign a separate anchor point to each edge.
+     */
+    mode: EdgeRoutingPluginMode;
+    /**
+     * When mode is 'orthogonal' this instructs VisuallyJs whether to group edges in buses, or to route each edge separately.
+     */
+    orthogonalMode?: OrthogonalRouterMode;
+    /**
+     * How much space to leave between stacked orthogonal edges. Defaults to 10 pixels.
+     */
+    orthogonalPadding?: number;
+}
+/**
+ * A plugin that can ingest the RoutingInformation created by a HierarchyLayout, and then route edges according to the data.
+ * You must be using a `Straight` connector if you use this plugin (which is the default connector).
+ *
+ * @group Plugins
+ * @category Edge Routing
+ */
+export declare class EdgeRoutingPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<EdgeRoutingPluginOptions> {
+    static type: string;
+    id: "edgeRouting";
+    ui: BrowserUI;
+    instance: VisuallyJsModel;
+    mode: 'direct' | 'orthogonal';
+    orthogonalMode: OrthogonalRouterMode;
+    orthogonalPadding: number;
+    layoutListener: (rp: RelayoutParams<HierarchyLayout>, e: Event) => void;
+    _routingInformation: Array<EdgeRouterOptions>;
+    private _positions;
+    private _sizes;
+    destroy(): void;
+    private _route;
+    initialise(ui: BrowserUI, options: EdgeRoutingPluginOptions): boolean;
+    reset(): void;
+}

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

@@ -0,0 +1,5 @@
+export * from './browser-ui-plugin';
+export * from './background';
+export * from './ui-states';
+export * from './edge-routing';
+export * from './selected-edge-highlight';

package/types/browser-ui/plugins/selected-edge-highlight/index.d.ts

@@ -0,0 +1 @@
+export * from './selected-edge-highlight-plugin';

package/types/browser-ui/plugins/selected-edge-highlight/selected-edge-highlight-plugin.d.ts

@@ -0,0 +1,36 @@
+import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../browser-ui-plugin";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+import { Edge, VertexUpdatedReason } from "../../../core";
+import { PaintStyle, ViewportElement } from "../../../ui";
+import { BrowserElement } from "../../util";
+export interface SelectedEdgeHighlightPluginOptions extends BrowserUIPluginOptions {
+    className?: string;
+    paintStyle?: PaintStyle;
+}
+export declare class SelectedEdgeHighlightPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<SelectedEdgeHighlightPluginOptions> {
+    static type: string;
+    id: string;
+    private _highlights;
+    private _className;
+    private _style;
+    private _ui;
+    initialise(ui: BrowserUI, options: SelectedEdgeHighlightPluginOptions): boolean;
+    destroy(): void;
+    reset(): void;
+    private _handleSelect;
+    private _addUpdateListeners;
+    private _cleanupUpdateListeners;
+    $edgeRemoved(edge: Edge): void;
+    $edgeUpdated(edge: Edge): void;
+    $vertexUpdated(element: ViewportElement<BrowserElement>, reason: VertexUpdatedReason): void;
+    private _handleDeselect;
+    private _handleSelectionCleared;
+    private _handleEdgeGeometryUpdated;
+    private _handleEdgePathEdited;
+    private __handleVertex;
+    private _handleVertexMove;
+    private _drawHighlight;
+    private _updateHighlight;
+    private _removeHighlight;
+    private _applyBounds;
+}

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

@@ -0,0 +1,2 @@
+export * from './ui-state';
+export * from "./ui-states-plugin";

package/types/browser-ui/plugins/ui-states/ui-state.d.ts

@@ -0,0 +1,14 @@
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+import { TypeDescriptorBase, UICore } from "../../../ui";
+import { DataSource, FilterableDataset } from "../../../core";
+/**
+ * @internal
+ */
+export declare class UIState<EL> {
+    id: string;
+    state: Record<string, TypeDescriptorBase>;
+    ui: UICore<EL, any>;
+    constructor(id: string, state: Record<string, TypeDescriptorBase>, ui: UICore<EL, any>);
+    activate(target: FilterableDataset, renderer: BrowserUI, datasource: DataSource): void;
+    deactivate(target: FilterableDataset, renderer: BrowserUI, dataSource: DataSource): void;
+}

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

@@ -0,0 +1,69 @@
+import { UIState } from './ui-state';
+import { ViewSpec } from "../../../ui";
+import { BrowserElement } from "../../util";
+import { VisuallyJsModel, Path } from "../../../core";
+import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../browser-ui-plugin";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+export interface UiStatesPluginOptions extends BrowserUIPluginOptions {
+}
+export interface UIStatesSurfaceViewOptions extends ViewSpec<BrowserElement> {
+    states?: Record<string, any>;
+}
+export declare class UiStatesBrowserUIModel {
+    private ui;
+    private _states;
+    private model;
+    private currentStates;
+    private viewOptions;
+    constructor(ui: BrowserUI);
+    getState(id: string): UIState<BrowserElement>;
+    /**
+     * Activates the UI state with the given ID on the objects contained in the given target. If target is not supplied, the state is
+     * activated against the entire dataset.
+     * @param stateId ID of the state to activate. States are defined inside a `states` member of your `view` definition.
+     * @param target Set of objects to activate the state on. If null, the entire dataset (Nodes, Edges, Groups and Ports) is used. If you provide an Element here, a Selection is created that consists of the Node representing the element, plus all Edges to and from the given Node.
+     *
+     */
+    activateState(stateId: string, target: Selection | Path | VisuallyJsModel | BrowserElement): void;
+    /**
+     * Deactivates the UI state with the given ID on the objects contained in the given target. If target is not supplied, the state is
+     * deactivated against the entire dataset.
+     * @param stateId ID of the state to deactivate. States are defined inside a `states` member of your `view` definition.
+     * @param target Set of objects to deactivate the state on. If null, the entire dataset (Nodes, Edges and Ports) is used.
+     *
+     */
+    deactivateState(stateId: string, target: any): void;
+    /**
+     * Resets (clears) the UI state of all objects in the current dataset.
+     */
+    resetState(): void;
+    private _getStateTarget;
+}
+export declare class UiStatesPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<UiStatesPluginOptions> {
+    static type: string;
+    id: "ui-states";
+    model: UiStatesBrowserUIModel;
+    destroy(): void;
+    initialise(ui: BrowserUI, options: UiStatesPluginOptions): boolean;
+    reset(): void;
+    /**
+     * Activates the UI state with the given ID on the objects contained in the given target. If target is not supplied, the state is
+     * activated against the entire dataset.
+     * @param stateId ID of the state to activate. States are defined inside a `states` member of your `view` definition.
+     * @param target Set of objects to activate the state on. If null, the entire dataset (Nodes, Edges, Groups and Ports) is used. If you provide an Element here, a Selection is created that consists of the Node representing the element, plus all Edges to and from the given Node.
+     *
+     */
+    activateState(stateId: string, target: Selection | Path | VisuallyJsModel | BrowserElement): void;
+    /**
+     * Deactivates the UI state with the given ID on the objects contained in the given target. If target is not supplied, the state is
+     * deactivated against the entire dataset.
+     * @param stateId ID of the state to deactivate. States are defined inside a `states` member of your `view` definition.
+     * @param target Set of objects to deactivate the state on. If null, the entire dataset (Nodes, Edges and Ports) is used.
+     *
+     */
+    deactivateState(stateId: string, target: any): void;
+    /**
+     * Resets (clears) the UI state of all objects in the current dataset.
+     */
+    resetState(): void;
+}

package/types/browser-ui/positioning-and-sizing-utils.d.ts

@@ -0,0 +1,103 @@
+import { BrowserElement } from "./util";
+import { PointXY, Size } from "../core";
+/**
+ * @internal
+ */
+export declare const ATTRIBUTE_TRANSFORM = "transform";
+/**
+ * Gets the size of the element, which is calculated in various different ways depending on what sort of element is
+ * passed in. This method is the one we use most often.
+ * padding et
+ * @param el
+ * @internal
+ */
+export declare function getElementSize(el: Element): Size;
+export declare function getPosition(el: BrowserElement, knownElementSize?: Size): PointXY;
+export declare function setPosition(el: BrowserElement, p: PointXY): void;
+/**
+ * Sets the position of the given element in the X axis.
+ * @param el
+ * @param x
+ * @internal
+ */
+export declare function setXPosition(el: BrowserElement, x: number): void;
+/**
+ * Sets the position of the given element in the Y axis.
+ * @param el
+ * @param y
+ * @internal
+ */
+export declare function setYPosition(el: BrowserElement, y: number): void;
+/**
+ * Sets the size of the element, which is executed in various different ways depending on what sort of element is
+ * passed in.
+ * @param el
+ * @param w
+ * @param h
+ * @internal
+ */
+export declare function setElementSize(el: BrowserElement, w: number, h: number): void;
+/**
+ * Sets the width of the element, which is executed in various different ways depending on what sort of element is
+ * passed in.
+ * @param el
+ * @param w
+ * @internal
+ */
+export declare function setElementWidth(el: BrowserElement, w: number): void;
+/**
+ * Sets the height of the element, which is executed in various different ways depending on what sort of element is
+ * passed in.
+ * @param el
+ * @param h
+ * @internal
+ */
+export declare function setElementHeight(el: BrowserElement, h: number): void;
+/**
+ * Gets the position of the given element as calculated by reading its `left` and `top` from its style.
+ * @param el
+ * @internal
+ */
+export declare function getAbsolutePosition(el: any): PointXY;
+/**
+ * Sets the position of the given element by writing values to its `left` and `top`
+ * style properties. This can be used if the parent element is definitely an HTML
+ * element, such as for the palette, because its elements are added to the document body.
+ * @param el
+ * @param p
+ * @internal
+ */
+export declare function setAbsolutePosition(el: BrowserElement, p: PointXY): void;
+/**
+ * Returns the position of the given element as calculated by reading its `translate` attribute (or style property?).
+ * @internal
+ * @param el
+ */
+export declare function getSvgTranslatePosition(el: SVGElement, knownElementSize?: Size): PointXY;
+/**
+ * Sets the rotation of the given element. If an HTML element, or an SVG element whose parent is an HTML element, this method sets the `rotation` of the element's transform, inside its style object, and ensures the transform origin is set to the element's center. If the element's parent is an SVG element, we instead set a `rotate` value in the element's transform attribute, retaining any `translate` value that the transform may have. Elements whose parent is an SVG element their `translate` value as the transform origin. By default this is 0,0, meaning elements rotate around the SVG origin. But if you want to spin an element around its own center, you first have to translate the element. This method does NOT do that for you. The translation required is not entirely intuitive: the element gets rotated by its top left corner, so you have to move it to a place where rotating by its top left corner results in it appearing where you want it. In practice this point is computed by taking the element's top left corner and rotating it around the element's center. But like I said, that occurs upstream of this method.
+ *
+ * An example of this method being called on an svg element is this:
+ *
+ *  - first rotate the element's by its around its center
+ * const translatedOrigin = rotatePoint(mel, mel.c, mel.r)
+ * - maybe adjust for group
+ *  adjustForGroup(translatedOrigin)
+ *  - set this rotated pos as the origin
+ * setSvgTranslatePosition(_el as any, translatedOrigin)
+ * - now apply rotation.
+ * setElementRotation(_el, mel.r)
+ *
+ * @internal
+ * @param el
+ * @param rotation
+ */
+export declare function setElementRotation(el: BrowserElement, rotation: number): void;
+/**
+ * Sets the position of some SVG element by setting a `translate` in the transform of the element. This method retains
+ * any `rotation` that was already set in the element's transform.
+ * @internal
+ * @param el
+ * @param p
+ */
+export declare function setSvgTranslatePosition(el: SVGElement, p: PointXY): void;

package/types/browser-ui/shape-library/index.d.ts

@@ -0,0 +1,4 @@
+export * from './shape-library-definitions';
+export * from './shape-library';
+export * from './shapes-flowchart';
+export * from './shapes-basic';