@visuallyjs/browser-ui 1.0.0

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

@@ -0,0 +1,34 @@
+import { Decorator } from "./decorators";
+import { BrowserElement } from "../util";
+import { ModelOptions, Constructable } from "../../core";
+import { SurfaceOptions } from "./surface-render-options";
+export * from './definitions';
+export * from './plugins';
+export * from './anim';
+export * from './decorators';
+export * from './elastic-group-manager';
+export * from './params';
+export * from './shape-palette';
+export * from './shape-palette-options';
+export * from './surface';
+export * from './surface-decorator';
+export * from './surface-events';
+export * from './surface-render-options';
+export * from './diagrams';
+export * from './css-classes';
+/**
+ * Register a new decorator for use with the {@link Surface} component.
+ * @param name Name to use when registering the decorator.
+ * @param dec Decorator function.
+ * @group Components
+ * @category Decorators
+ */
+export declare function registerDecorator(name: string, dec: Constructable<Decorator>): void;
+/**
+ * Creates a Surface, rendering to the given container, with the given surface options and model options. This method provides a shortcut to the standard procedure of creating a model first and then rendering it to a Surface. The Surface created by this method uses the default template mechanism for rendering vertices.
+ * @param container
+ * @param options
+ * @param modelOptions
+ * @group Factory Methods
+ */
+export declare function createSurface(container: BrowserElement, options?: SurfaceOptions, modelOptions?: ModelOptions): import("./surface").Surface;

package/types/browser-ui/surface-renderer/params.d.ts

@@ -0,0 +1,175 @@
+import { Geometry, PointXY, Size, Edge, Group, Port, Vertex, Node, GroupMemberAddedParams, GroupMemberRemovedParams } from "../../core";
+import { Connection } from "../../ui";
+import { Surface } from './surface';
+import { BrowserElement } from "../util";
+/**
+ * Payload for a `port:removed` event from a Surface.
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfacePortRemovedParams {
+    vertex: Node | Group;
+    port: Port;
+    portEl: Element;
+    vertexEl: Element;
+}
+/**
+ * Payload for a group:resize event from a surface.
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfaceGroupResizedParams {
+    group: Group;
+    el: Element;
+    w: number;
+    h: number;
+}
+/**
+ * Payload for an edge:added event from a surface.
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfaceEdgeAddedParams {
+    /**
+     * Source vertex for the new edge
+     */
+    source: Vertex;
+    /**
+     * Target vertex for the new edge
+     */
+    target: Vertex;
+    /**
+     * Connection representing the edge in the UI
+     */
+    connection: Connection<BrowserElement>;
+    /**
+     * The edge that was added
+     */
+    edge: Edge;
+    /**
+     * Associated geometry, may be null
+     */
+    geometry: Geometry;
+    /**
+     * True if the edge was added via the mouse (or touch events), false if added programmatically
+     */
+    addedByMouse: boolean;
+}
+/**
+ * Payload for a `node:added` or `group:added` event from the Surface.
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfaceVertexAddedParams {
+    /**
+     * DOM element representing the vertex
+     */
+    el: BrowserElement;
+    /**
+     * ID of the vertex that was added
+     */
+    id: string;
+    /**
+     * Vertex that was added
+     */
+    vertex: Node | Group;
+    /**
+     * Optional position the vertex was added at.
+     */
+    pos?: PointXY;
+    /**
+     * can be set if not currently bulk loading.
+     */
+    size?: Size;
+}
+/**
+ * Payload for a `node:added` event from the Surface.
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfaceNodeAddedParams extends SurfaceVertexAddedParams {
+}
+/**
+ * Payload for a `group:added` event from the Surface.
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfaceGroupAddedParams extends SurfaceVertexAddedParams {
+}
+/**
+ * Payload for a `group:member:added` event from the Surface.
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfaceGroupMemberAddedParams extends GroupMemberAddedParams {
+    /**
+     * DOM element representing the member that was added to the group
+     */
+    el: Element;
+    /**
+     * DOM element representing the group
+     */
+    groupEl: Element;
+}
+/**
+ * Payload for a `group:member:removed` event from the Surface.
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfaceGroupMemberRemovedParams extends GroupMemberRemovedParams {
+    /**
+     * DOM element representing the member that was added to the group
+     */
+    el: Element;
+    /**
+     * DOM element representing the group
+     */
+    groupEl: Element;
+    /**
+     * Position the member that was removed was located at.
+     */
+    pos: PointXY;
+}
+/**
+ * Payload for a pan/zoom event from a surface.
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface PanZoomEventPayload {
+    /**
+     * Current x pan value
+     */
+    x: number;
+    /**
+     * Current y pan value
+     */
+    y: number;
+    /**
+     * current zoom
+     */
+    zoom: number;
+    /**
+     * previous zoom
+     */
+    oldZoom: number;
+    /**
+     * Event that caused the pan. May be null.
+     */
+    event?: Event;
+}
+/**
+ * Payload for a group:collapse event from a surface
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfaceGroupCollapsedParams {
+    group: Group;
+    renderer: Surface;
+}
+/**
+ * Payload for a group:expand event from a surface
+ * @group Events
+ * @category UI Event Payloads
+ */
+export interface SurfaceGroupExpandedParams extends SurfaceGroupCollapsedParams {
+}

package/types/browser-ui/surface-renderer/plugins/controls/controls-plugin.d.ts

@@ -0,0 +1,26 @@
+import { BaseBrowserUIPlugin, BrowserUIPlugin } from "../../../plugins";
+import { ControlsComponent, ControlsComponentOptions } from "../../../components";
+import { BrowserElement } from "../../../util";
+import { BrowserUI } from "../../../browser-visuallyjs-instance";
+/**
+ * Options for the controls plugin.
+ */
+export interface ControlsPluginOptions extends ControlsComponentOptions {
+    /**
+     * The element that will host the controls
+     */
+    container: BrowserElement;
+}
+/**
+ * Controls component plugin wrapper.
+ * @group Plugins
+ * @category Controls
+ */
+export declare class ControlsPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<ControlsPluginOptions> {
+    static type: string;
+    id: "controls";
+    $component: ControlsComponent;
+    initialise(ui: BrowserUI, options: ControlsPluginOptions): boolean;
+    destroy(): void;
+    reset(): void;
+}

package/types/browser-ui/surface-renderer/plugins/controls/index.d.ts

@@ -0,0 +1 @@
+export * from "./controls-plugin";

package/types/browser-ui/surface-renderer/plugins/drag-groups/drag-groups-plugin.d.ts

@@ -0,0 +1,78 @@
+import { ObjectData, Vertex, Node } from "../../../../core";
+import { DragGroupSpec } from "../../../definitions";
+import { Surface } from "../../surface";
+import { BrowserElement } from "../../../util";
+import { VisuallyJSDOMElement } from "../../../element-facade";
+import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../../../plugins";
+/**
+ * Options for the drag groups plugin.
+ * @group Plugins
+ * @category Drag Groups
+ */
+export interface DragGroupsPluginOptions extends BrowserUIPluginOptions {
+    /**
+     * Function to call to assign a drag group for the given vertex. May return null, meaning no drag group.
+     * @param v
+     */
+    assignDragGroup: (v: Vertex) => DragGroupSpec;
+}
+/**
+ * Provides the ability to assign elements to groups for dragging purposes: when a member of some group is dragged, the other elements of the group can be dragged along with it.
+ *
+ * The core concept is of the "DragGroup", which is basically just a tag. Each member of a group can belong to the group in one of two roles:
+ *
+ * - **active** The element, when dragged, causes all of the other members of the group to be dragged too.
+ * - **passive** The element, when dragged, will not cause any of the other members of the group to be dragged. But when an active member of the group is dragged, passive elements are dragged at the same time.
+ *
+ * When you configure this plugin you are required to provide an `assignDragGroup` function, whose signature is:
+ *
+ * assignDragGroup:(v:Vertex) => DragGroupSpec
+ *
+ * The return value `DragGroupSpec` may be either:
+ *
+ * - a string, in which case the element is added to the drag group with the given name in an active role
+ * - an object containing `id` and `active` which you can specify the active/passive role
+ * - null, in which case the element is not added to a drag group.
+ *
+ * @group Plugins
+ * @category Drag Groups
+ */
+export declare class DragGroupsPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<DragGroupsPluginOptions> {
+    static type: string;
+    id: "dragGroups";
+    surface: Surface;
+    private _pendingDragGroupAssignments;
+    dragGroupAssigner: (v: Vertex) => DragGroupSpec;
+    initialise(surface: Surface, options: DragGroupsPluginOptions): boolean;
+    destroy(): void;
+    reset(): void;
+    /**
+     * Runs each of the given objects through the code that automatically assigns them to a drag group.
+     * @param objects
+     *
+     */
+    assignToDragGroup(...objects: Array<string | Node | ObjectData | VisuallyJSDOMElement>): void;
+    /**
+      * Removes the given object(s) from any drag group they may belong to. You don't need to specify the name of the drag group since an object may belong to only one at a time.
+      * @param objects
+      *
+      */
+    removeFromDragGroup(...objects: Array<string | Node | ObjectData | BrowserElement>): void;
+    /**
+     * Adds the given objects to the given drag group.
+     * @param spec Spec for the drag group. If you supply a string, then all objects are added to the drag group with that name, and they are marked "active". If you supply an object in the form `{ id:string, active?:boolean }` then all the objects are added to the drag group with the active state you provide.
+     * @param objects Objects to add.
+     *
+     */
+    addToDragGroup(spec: DragGroupSpec, ...objects: Array<string | Node | ObjectData | VisuallyJSDOMElement>): void;
+    /**
+     * @internal
+     * @param el
+     * @param v
+     */
+    private _doAssignDragGroup;
+    /**
+     * @internal
+     */
+    private _assignPendingDragGroups;
+}

package/types/browser-ui/surface-renderer/plugins/drag-groups/index.d.ts

@@ -0,0 +1 @@
+export * from "./drag-groups-plugin";

package/types/browser-ui/surface-renderer/plugins/export-controls/export-controls-plugin.d.ts

@@ -0,0 +1,25 @@
+import { BaseBrowserUIPlugin, BrowserUIPlugin } from "../../../plugins";
+import { SvgExportComponent, SvgExportComponentOptions } from "../../../components";
+import { BrowserElement } from "../../../util";
+import { BrowserUI } from "../../../browser-visuallyjs-instance";
+/**
+ * Options for the export controls plugin
+ */
+export interface ExportControlsPluginOptions extends SvgExportComponentOptions {
+    /**
+     * The element that will host the controls
+     */
+    container: BrowserElement;
+}
+/**
+ * Export Controls component plugin wrapper.
+ * @group Plugins
+ * @category Controls
+ */
+export declare class ExportControlsPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<ExportControlsPluginOptions> {
+    $component: SvgExportComponent;
+    initialise(ui: BrowserUI, options: ExportControlsPluginOptions): boolean;
+    id: "exportControls";
+    destroy(): void;
+    reset(): void;
+}

package/types/browser-ui/surface-renderer/plugins/export-controls/index.d.ts

@@ -0,0 +1 @@
+export * from "./export-controls-plugin";

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

@@ -0,0 +1,10 @@
+export * from './lasso';
+export * from './miniview';
+export * from './controls';
+export * from './export-controls';
+export * from './drag-groups';
+export * from './snaplines';
+export * from './palette';
+export * from './pan-buttons';
+export * from './vertex-drawing';
+export * from './resizing-tools';

package/types/browser-ui/surface-renderer/plugins/lasso/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lasso';
+export * from './lasso-plugin';

package/types/browser-ui/surface-renderer/plugins/lasso/lasso-plugin.d.ts

@@ -0,0 +1,78 @@
+import { Edge, Vertex, PointXY } from "../../../../core";
+import { Surface } from "../../surface";
+import { SurfaceMode } from "../../definitions";
+import { BrowserElement } from "../../../util";
+import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../../../plugins";
+/**
+ * @group Plugins
+ * @category Lasso
+ */
+export interface LassoPluginOptions extends BrowserUIPluginOptions {
+    /**
+     * Optional function to call when lasso selection starts.
+     */
+    onStart?: Function;
+    /**
+     * Optional function to call when lasso selection ends.
+     */
+    onEnd?: Function;
+    /**
+     * Optional function to call when one or more objects has been selected by the lasso.
+     */
+    onSelect?: (vertices: Array<Vertex>) => any;
+    /**
+     * Defaults to false, meaning the lasso is drawn as a rectangle. If true, the lasso is drawn as a set of masks,
+     * with the lasso area drawn as a "hole" in the masks.
+     */
+    invert?: boolean;
+    /**
+     * Optional CSS3 filter identifying elements you do not want to lasso
+     */
+    filter?: ((e: MouseEvent) => boolean) | string;
+    /**
+     * Defaults to false. If true, edges are included in the lasso selection.
+     */
+    includeEdges?: boolean;
+    /**
+     * Optional filter that is passed every vertex/edge that the lasso would ordinarily select, and if this function returns false
+     * then the vertex/edge is not added to the selection
+     * @param o - Edge or Vertex to possibly filter.
+     */
+    selectionFilter?: (o: Edge | Vertex) => boolean;
+    /**
+     * When true (which is the default) the lasso exits after a selection has been made.
+     */
+    autoExit?: boolean;
+    /**
+     * Extra class(es) to add to the lasso's DOM element
+     */
+    cssClass?: string;
+    /**
+     * Optional function that generates the DOM element for the lasso to use. This is
+     * for advanced usage scenarios and most users will not need to supply this.
+     * @param origin
+     * @param e
+     */
+    generateLassoContent?: (origin: PointXY, e: MouseEvent) => BrowserElement;
+}
+/**
+ * A Surface plugin that allows the user to select multiple elements with the mouse.
+ * @group Plugins
+ * @category Lasso
+ */
+export declare class LassoPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<LassoPluginOptions> {
+    static type: string;
+    id: "lasso";
+    surfaceMode: SurfaceMode;
+    surface: Surface;
+    private lasso;
+    onStart: Function;
+    onEnd: Function;
+    onSelect: (vertices: Array<Vertex>) => any;
+    selectionFilter: (o: Edge | Vertex) => boolean;
+    autoExit: boolean;
+    lassoSelections: Array<any>;
+    destroy(): void;
+    initialise(surface: Surface, options: LassoPluginOptions): boolean;
+    reset(): void;
+}

package/types/browser-ui/surface-renderer/plugins/lasso/lasso.d.ts

@@ -0,0 +1,74 @@
+import { Surface } from "../../surface";
+import { BrowserElement } from "../../../util";
+import { PointXY, Size } from "../../../../core";
+export interface LassoOptions {
+    canvas: Element;
+    onStart?: (pagePosition: PointXY, canvasPosition: PointXY, shiftKey: boolean, e: MouseEvent) => any;
+    onEnd?: (visibleOrigin: PointXY, size: Size) => any;
+    onSelect?: (pagePosition: PointXY, pageSize: Size, canvasPosition: PointXY, canvasSize: Size, axesPositive: [boolean, boolean], shiftKey: boolean) => any;
+    /**
+     * Will be invoked if the user does mousedown then mouseup without moving in between. Used by the vertex drawing plugin
+     * @param p
+     * @param e
+     */
+    onClick?: (p: PointXY, e: MouseEvent) => any;
+    invert?: boolean;
+    surface: Surface;
+    filter?: ((e: MouseEvent) => boolean) | string;
+    cssClass?: string;
+    /** optionally users of the lasso can impose a grid on its movement. used internally by the vertex drawing plugin. */
+    mapToGrid?: (p: PointXY) => PointXY;
+    /**
+     * Optional method that can return an element to inject as the lasso's child.
+     * @private
+     */
+    generateLassoContent?: (origin: PointXY, e: MouseEvent) => BrowserElement;
+}
+export declare class Lasso {
+    visibleOrigin: PointXY;
+    size: Size;
+    _generateLassoContent: (origin: PointXY, e: MouseEvent) => BrowserElement;
+    el: HTMLElement;
+    masks: Record<string, HTMLElement>;
+    origin: PointXY;
+    canvasOrigin: PointXY;
+    onStart: (origin: PointXY, canvasPosition: PointXY, shiftKey: boolean, e: MouseEvent) => any;
+    onEnd: (visibleOrigin: PointXY, size: Size) => any;
+    onSelect: (pagePosition: PointXY, pageSize: Size, canvasPosition: PointXY, canvasSize: Size, axesPositive: [boolean, boolean], shiftKey: boolean, lassoContent?: BrowserElement) => any;
+    onClick: (p: PointXY, e: MouseEvent) => any;
+    hasMoved: boolean;
+    down: boolean;
+    moving: boolean;
+    invert: boolean;
+    surface: Surface;
+    private _filter;
+    private eventManager;
+    private readonly _mapToGrid;
+    downListener: Function;
+    upListener: Function;
+    moveListener: Function;
+    downEvent: string;
+    upEvent: string;
+    moveEvent: string;
+    enabled: boolean;
+    _generatedLassoContent: BrowserElement;
+    constructor(options: LassoOptions);
+    private _prepareFilter;
+    private _position;
+    private _setVisible;
+    private _mapPoint;
+    private _downListener;
+    private _moveListener;
+    private _upListener;
+    private _createMasks;
+    /**
+     * Returns whether or not the lasso is active.
+          * @returns true if active, false otherwise.
+     */
+    isActive(): boolean;
+    /**
+     * Sets whether or not the lasso responds to mouse events.
+          * @param e Enabled state.
+     */
+    setEnabled(e: boolean): void;
+}

package/types/browser-ui/surface-renderer/plugins/miniview/index.d.ts

@@ -0,0 +1 @@
+export * from "./miniview-plugin";