@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/event-manager.d.ts

@@ -0,0 +1,50 @@
+import { PointXY } from "../core";
+/**
+ * @internal
+ */
+export declare function isTouchDevice(): boolean;
+/**
+ * @internal
+ */
+export declare function isMouseDevice(): boolean;
+/**
+ * Force VisuallyJs to act as if touch events are available.
+ * @internal
+ * @param value
+ */
+export declare function setForceTouchEvents(value: boolean): void;
+/**
+ * force VisuallyJs to act is if pointer events are available.
+ * @internal
+ * @param value
+ */
+export declare function setForceMouseEvents(value: boolean): void;
+export declare function pageLocation(e: Event): PointXY;
+export declare function getTouch(touches: TouchList, idx: number): Touch;
+export declare function touches(e: any): TouchList;
+export declare function touchCount(e: Event): number;
+/**
+ * Gets the page location for the given event, abstracting out differences between touch and mouse events.
+ * @param e
+ * @internal
+ */
+export declare function getPageLocation(e: any): PointXY;
+export interface EventManagerOptions {
+    clickThreshold?: number;
+    dblClickThreshold?: number;
+}
+export declare class EventManager {
+    clickThreshold: number;
+    dblClickThreshold: number;
+    private readonly tapHandler;
+    private readonly mouseEnterExitHandler;
+    constructor(params?: EventManagerOptions);
+    private _doBind;
+    on(el: any, event: string, children?: string | Function, fn?: Function, options?: {
+        passive?: boolean;
+        capture?: boolean;
+        once?: boolean;
+    }): this;
+    off(el: any, event: string, fn: any): this;
+    trigger(el: any, event: string, originalEvent: any, payload?: any, detail?: number): this;
+}

package/types/browser-ui/fixed-layer.d.ts

@@ -0,0 +1,107 @@
+import { PanZoom } from "./pan-zoom";
+import { BrowserElement } from "./util";
+import { PointXY, TOP, BOTTOM, LEFT, RIGHT } from "../core";
+/**
+ * Definition of a fixed element.
+ * @group Components
+ * @category Surface
+ * @internal
+ */
+export type FixedElement = {
+    /**
+     * Element that is fixed
+     */
+    el: BrowserElement;
+    /**
+     * Whether or not the element's left position is fixed
+     */
+    left: boolean;
+    /**
+     * Whether or not the element's top position is fixed
+     */
+    top: boolean;
+    /**
+     * Position of the fixed element
+     */
+    pos: PointXY;
+    /**
+     * Alignment in the x axis
+     */
+    alignX: FixedElementHorizontalAlignment;
+    /**
+     * Alignment in the Y axis
+     */
+    alignY: FixedElementVerticalAlignment;
+    /**
+     * Position the element is currently at
+     */
+    currentPosition: PointXY;
+    /**
+     * Ideal position for the element
+     */
+    requestedPosition: PointXY;
+    /**
+     * Handle for the element.
+     */
+    id?: string;
+};
+/**
+ * Constraint for a fixed element
+ * @group Components
+ * @category Surface
+ */
+export type FixedElementConstraint = typeof LEFT | typeof TOP;
+/**
+ * Possible constraints for a fixed element.
+ * @group Components
+ * @category Surface
+ */
+export type FixedElementConstraints = {
+    /**
+     * Whether or not the element's left position is fixed
+     */
+    [LEFT]?: boolean;
+    /**
+     * Whether or not the element's top position is fixed
+     */
+    [TOP]?: boolean;
+    /**
+     * Alignment in the x axis
+     */
+    alignX?: FixedElementHorizontalAlignment;
+    /**
+     * Alignment in the y axis
+     */
+    alignY?: FixedElementVerticalAlignment;
+};
+/**
+ * Horizontal alignments for a fixed element.
+ * @group Components
+ * @category Surface
+ */
+export type FixedElementHorizontalAlignment = typeof LEFT | typeof RIGHT;
+/**
+ * Vertical alignments for a fixed element.
+ * @group Components
+ * @category Surface
+ */
+export type FixedElementVerticalAlignment = typeof TOP | typeof BOTTOM;
+/**
+ * @internal
+ */
+export declare class FixedLayer {
+    panZoom: PanZoom;
+    private elementPositionSetter;
+    fixedElements: Record<string, FixedElement>;
+    constructor(panZoom: PanZoom, elementPositionSetter: (el: BrowserElement, p: PointXY) => void);
+    private _findRequestedPosition;
+    private _fixElements;
+    pan(): void;
+    append(el: BrowserElement, pos: PointXY, constraints: FixedElementConstraints, id: string, onTop: boolean): FixedElement;
+    /**
+     * @internal
+     * @param el
+     */
+    remove(el: Element): void;
+    destroy(): void;
+}

package/types/browser-ui/group-layout-adapter.d.ts

@@ -0,0 +1,19 @@
+import { Base, Group, Node } from "../core/model/graph";
+import { UICore } from "../ui/core";
+import { BaseDomUiLayoutAdapter } from "./base-dom-ui-layout-adapter";
+/**
+ * Layout adapter that operates on a single group. `getElements` returns member of this group. `filter` filters out
+ * vertices that are not children of this group.
+ *
+ * TODO why exactly does `filter` have to exist here? If `getElements` only returns group members, what's the
+ * filter for?
+ *
+ * @internal
+ */
+export declare class GroupLayoutAdapter extends BaseDomUiLayoutAdapter {
+    protected group: Group;
+    protected ui: UICore<any, any>;
+    constructor(group: Group, ui: UICore<any, any>);
+    getElements(): Array<Node | Group>;
+    filter(obj: Base): boolean;
+}

package/types/browser-ui/html-element-overlay.d.ts

@@ -0,0 +1,32 @@
+import { VisuallyJSDOMElement } from './element-facade';
+import { Overlay, UICore, OverlayPaintParams, Connection } from "../ui";
+import { PointXY, Size } from "../core";
+import { BrowserElement } from "./util";
+/**
+ * @internal
+ * @param o
+ */
+export declare function isHTMLLabelOverlay(o: Overlay<any>): o is HTMLElementOverlayHolder;
+/**
+ * @internal
+ */
+export interface HTMLElementOverlayHolder extends Overlay<BrowserElement> {
+    contentElement: VisuallyJSDOMElement;
+    cachedDimensions: Size;
+}
+export interface HTMLElementOverlayPaintParams extends OverlayPaintParams {
+    d: {
+        minx: number;
+        miny: number;
+        td: Size;
+        cxy: PointXY;
+    };
+}
+export declare class HTMLElementOverlay {
+    instance: UICore<BrowserElement>;
+    overlay: Overlay<BrowserElement>;
+    protected htmlElementOverlay: HTMLElementOverlayHolder;
+    constructor(instance: UICore<BrowserElement>, overlay: Overlay<BrowserElement>);
+    static getElement(instance: UICore<BrowserElement>, o: HTMLElementOverlayHolder, component?: Connection<BrowserElement>, elementCreator?: (c: Connection<BrowserElement>) => Element): Element;
+    static destroy(o: HTMLElementOverlayHolder): void;
+}

package/types/browser-ui/icons/definitions.d.ts

@@ -0,0 +1,59 @@
+import { RectangleXY } from "../../core";
+/**
+ * A link icon
+ * @icon
+ */
+export declare const ICON_LINK = "link";
+/**
+ * Icon for the clone tool
+ * @icon
+ */
+export declare const ICON_CLONE = "clone";
+/**
+ * Icon for the trash tool
+ * @icon
+ */
+export declare const ICON_TRASH = "trash";
+/**
+ * An 'x' icon
+ * @icon
+ */
+export declare const ICON_CROSS = "cross";
+/**
+ * A plus sign icon
+ * @icon
+ */
+export declare const ICON_PLUS = "plus";
+/**
+ * A circle icon
+ * @icon
+ */
+export declare const ICON_CIRCLE = "circle";
+/**
+ * a 12 point gear icon
+ * @icon
+ */
+export declare const ICON_GEAR = "gear";
+/**
+ * Definition of an icon that can be rendered into an SVG element.
+ */
+export interface IconDefinition {
+    id: string;
+    viewBox: RectangleXY;
+    label?: string;
+    atts?: Record<string, any>;
+    shapes: Array<{
+        tag: string;
+        atts?: Record<string, any>;
+    }>;
+}
+/**
+ * Map of default icons that ship with VisuallyJs
+ */
+export declare const defaultIcons: Record<string, IconDefinition>;
+/**
+ * Clone a default icon definition and give it a new ID.
+ * @param iconOrId
+ * @param newId
+ */
+export declare function cloneIcon(iconOrId: string | IconDefinition, newId: string): IconDefinition;

package/types/browser-ui/icons/icon-renderer.d.ts

@@ -0,0 +1,43 @@
+import { IconDefinition } from "./definitions";
+import { BrowserElement } from "../util";
+/**
+ * Render the given icon.
+ * @internal
+ * @param icon Definition of the icon to render
+ * @param width Width to use for the SVG
+ * @param height Height to use for the SVG
+ * @param classes Optional list of CSS classes to set on the SVG
+ * @param atts Optional map of attributes to set on the SVG
+ * @param parent Optional parent element to append the SVG to
+ * @param shapeAtts Optional extra attributes to merge with the shape's declared attributes at render time.
+ */
+export declare function renderIcon(icon: IconDefinition, width: number, height: number, classes?: Array<string>, atts?: Record<string, any>, parent?: BrowserElement, shapeAtts?: Record<string, any>): any;
+/**
+ * Render the icon with the given name from the default set of icons shipped with VisuallyJs.
+ * @param id ID of the icon to render
+ * @param width Width to use for the SVG
+ * @param height Height to use for the SVG
+ * @param classes Optional list of CSS classes to set on the SVG
+ * @param atts Optional map of attributes to set on the SVG
+ * @param parent Optional parent element to append the SVG to
+ * @param shapeAtts Optional extra attributes to merge with the shape's declared attributes at render time.
+ * @internal
+ */
+export declare function renderNamedIcon(id: string, width: number, height: number, classes?: Array<string>, atts?: Record<string, any>, parent?: BrowserElement, shapeAtts?: Record<string, any>): any;
+/**
+ * Provides a base class you can use to create a web component that can render an icon anywhere in your markup. An example of this is in our BPMN starter application, where we extend this component to create a component that can render BPMN icons in the object inspector.
+ *
+ * This class expects an `icon-id` attribute, which identifies the icon you wish to render. By default this class will look for the icon in the defaultIcons map. Subclasses can override the `findIcon` method to implement custom behaviour. When a subclass returns null, the defaultIcons are tested.
+ * @group Web Components
+ */
+export declare class IconElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    /**
+     * Finds an icon by ID. Subclasses will want to extend this. If a subclass returns null, the defaultIcons map is tested for the icon.
+     * @param id
+     */
+    findIcon(id: string): IconDefinition | null;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    render(): void;
+}

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

@@ -0,0 +1,2 @@
+export * from "./definitions";
+export * from "./icon-renderer";

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

@@ -0,0 +1,48 @@
+export { addWheelListener, removeWheelListener } from "./wheel-listener";
+export * from './definitions';
+export * from './paper-renderer';
+export * from './surface-renderer';
+export * from './base-dom-ui-layout-adapter';
+export * from './browser-visuallyjs-instance';
+export * from './browser-util';
+export * from './canvas-layout-adapter';
+export * from './collicat';
+export * from './connector-editor';
+export * from './constants';
+export * from './css-constants';
+export * from './edge-mappings';
+export * from './shape-library';
+export * from './plugins';
+export * from './copy-paste';
+export * from './storage';
+export * from './icons';
+export * from './svg-export';
+export * from './edge-handler-base';
+export * from './edge-input-handler';
+export * from './edge-relocate-handler';
+export * from './element-drag-handler-2';
+export * from './element-dragger';
+export * from './element-facade';
+export { EventManager, pageLocation, touches, touchCount, getTouch, getPageLocation, setForceTouchEvents, setForceMouseEvents, isTouchDevice, isMouseDevice } from './event-manager';
+export * from './fixed-layer';
+export * from './group-layout-adapter';
+export * from './html-element-overlay';
+export * from "./pan-zoom";
+export * from "./pan-zoom-options";
+export * from "./pinch-listener";
+export * from "./positioning-and-sizing-utils";
+export * from './svg-component';
+export * from './svg-element-connector';
+export * from './svg-element-overlay';
+export * from './svg-util';
+export * from './util';
+export * from "./wheel-listener";
+export * from './components';
+export * from './templating';
+export * from './dialogs';
+export * from './browser-ui';
+export * from './connector-editors';
+export * from './connector-editors-bezier';
+export * from './connector-editors-orthogonal';
+export * from './connector-editors-straight';
+export declare function ready(f: Function): void;

package/types/browser-ui/pan-zoom-options.d.ts

@@ -0,0 +1,262 @@
+import { Viewport } from "../ui";
+import { PointXY, Size, ZoomRange } from "../core";
+import { BrowserElement } from "./util";
+import { Background } from "./definitions";
+/**
+ * Axes in which the canvas can be panned - x, y, or both. Used with the {@link WheelOptions} interface.
+ */
+export type PanAxis = "both" | "x" | "y";
+/**
+ * Options to control how a user manages zoom on the canvas.
+ */
+export interface ZoomOptions {
+    /**
+     * Whether or not zoom is enabled. Defaults to true.
+     */
+    /**
+     * When true - which is the default - the wheel will be used for zoom.
+     */
+    wheel?: boolean;
+    /**
+     * Zoom range to support. The default is [0.05, 3]
+     */
+    range?: ZoomRange;
+    /**
+     * Initial zoom value. Defaults to 1.
+     */
+    initialValue?: number;
+    /**
+     * Optional fixed transform origin for the canvas. Defaults to null.When this is supplied the zoom function does not change the transform origin You can still zoom and pan but the zoom/pan is applied relative to the top/left corner of the content.
+     */
+    fixedTransformOrigin?: PointXY;
+    /**
+     * When zooming by step, this defines the change in zoom for each step. Defaults to 0.25.
+     */
+    step?: number;
+}
+/**
+ * Options to control how a user pans the canvas.
+ */
+export interface PanOptions {
+    /**
+     * Defaults to true, meaning panning is enabled.
+     */
+    enabled?: boolean;
+    /**
+     * Defaults to false, meaning panning works via canvas drag. If you set this to true, the mousewheel (or move events on a touchpad) will pan the canvas. This will also override any zoom wheel flag.
+     */
+    wheel?: boolean;
+    /**
+     * Optional axes in which to constrain pan - 'x', 'y' or 'both'. Defaults to 'both'.
+     */
+    axis?: PanAxis;
+    /**
+     * Optional function which is called at the start of panning and can return false to reject pan starting.
+     */
+    filter?: (el: Element) => boolean;
+    /**
+     * Optional, defaults to false. When true, the user must hold down the meta key (ctrl on windows) in order to pan.
+     */
+    useMetaKey?: boolean;
+}
+/**
+ * Options for how to respond to wheel events.
+ */
+export interface WheelOptions {
+    /**
+     * Optional function to call to check if wheel zooming should be enabled for the current event target.
+     * @param e Mouse event for the wheel
+     */
+    filter?: (e: MouseEvent) => boolean;
+    /**
+     * If true, the "meta" key (CMD on Mac, Ctrl on windows/linux) must be pressed in order for wheel zoom to operate. This can be useful if your UI fills the screen in one or more axes and your users would not be able to scroll past the Surface widget.
+     */
+    useMetaKey?: boolean;
+    /**
+     * How sensitive the wheel should be.
+     */
+    sensitivity?: number;
+    /**
+     * Defaults to false. If true, the zoom direction is reversed: wheel up zooms out, and wheel down zooms in.
+     */
+    reverse?: boolean;
+    /**
+     * Optional CSS 3 selector to check if the wheel should be enabled for the current event target.
+     */
+    cssFilter?: string;
+}
+/**
+ * @internal
+ */
+export interface PanZoomWheelOptions extends WheelOptions {
+    /**
+     * Whether or not wheel zoom is enabled. Defaults to true. You cannot set this and also `pan`.
+     */
+    zoom?: boolean;
+    /**
+     * Whether or not to pan the display when the wheel is moved. Defaults to false. You cannot set this and also `zoom`.
+     */
+    pan?: boolean;
+    /**
+     * For use with pan:true - defines the axes in which the widget will pan in response to the wheel
+     */
+    axis?: PanAxis;
+}
+/**
+ * Options for the PanZoom widget. This widget is used internally by VisuallyJs and is not something users of the library will need to interact with.
+ * @internal
+ */
+export interface PanZoomOptions {
+    /**
+     * The element to apply pan/zoom to.
+     */
+    canvasElement: BrowserElement;
+    /**
+     * The element that will act as the viewport for the canvas.
+     */
+    viewportElement: BrowserElement;
+    /**
+     * A function that can return the x,y location of the given element, relative to the origin of the canvas the pan zoom
+     * is controlling.
+     * @param el
+     */
+    getOffset: (el: BrowserElement) => PointXY;
+    /**
+     * A function that can return the x,y location of the given element, relative to the document origin
+     * @param el
+     */
+    getOffsetRelativeToRoot: (el: BrowserElement) => PointXY;
+    /**
+     * Gets the size of some element
+     */
+    getSize: (el: BrowserElement) => Size;
+    /**
+     * Helper function to set the position of some element.
+     */
+    elementPositionSetter: (el: BrowserElement, p: PointXY) => void;
+    /**
+     * Initial zoom for the widget. Defaults to 1.
+     */
+    zoom?: number;
+    /**
+     * Zoom range for the widget. Defaults to [0.05, 3].
+     */
+    zoomRange?: ZoomRange;
+    /**
+     * Delta for zoom when stepping in/out. Defaults to 0.25
+     */
+    zoomStep?: number;
+    /**
+     * Whether to clamp when panning such that there is always content visible. Defaults to true.
+     */
+    clamp?: boolean;
+    /**
+     * Whether to clamp when zooming such that there is always content visible. Defaults to true.
+     */
+    clampZoom?: boolean;
+    /**
+     * Whether or not to clamp to the background image. This flag means the widget will always ensure at least some
+     * of the background is visible. See `clampToBackgroundExtents` for a variant of this. Defaults to false.
+     */
+    clampToBackground?: boolean;
+    /**
+     * Clamps movement so that when zoomed out, the background image always fills the viewport. Defaults to false.
+     */
+    clampToBackgroundExtents?: boolean;
+    /**
+     * How far, in pixels, to pan on pan nudge. Defaults to 50 pixels.
+     */
+    panDistance?: number;
+    /**
+     * Whether or not pan is enabled. Defaults to true.
+     */
+    enablePan?: boolean;
+    /**
+     * Optional function which is called at the start of panning and can return false
+     * to reject pan starting.
+     */
+    panFilter?: (el: Element) => boolean;
+    /**
+     * Defaults to false. When true, user must hold down meta key (ctrl on windows) to pan.
+     */
+    panWithMetaKey?: boolean;
+    /**
+     * Enable animations for panning. Defaults to true.
+     */
+    enableAnimation?: boolean;
+    viewport: Viewport<BrowserElement>;
+    /**
+     * Function the widget can use to derive an ID for the given element.
+     * @param e
+     */
+    idFunction: (e: Element) => string;
+    /**
+     * Options for the wheel.
+     */
+    wheel: PanZoomWheelOptions;
+    /**
+     * Optional map of event handlers
+     */
+    events?: {
+        /**
+         * Optional function callback for when zoom changes.
+         */
+        zoom?: Function;
+        /**
+         * Optional function callback for when pan changes.
+         */
+        pan?: Function;
+        /**
+         * Optional callback for when pan starts
+         */
+        panStart?: Function;
+        /**
+         * Optional function callback for mouseup event.
+         */
+        mouseup?: Function;
+        /**
+         * Optional function callback for mousedown event.
+         */
+        mousedown?: Function;
+        /**
+         * Optional interceptor for zoom. Returning false prevents zoom from occurring.
+         */
+        maybeZoom?: Function;
+        /**
+         * Optional function callback for mousemove event.
+         */
+        mousemove?: Function;
+        /**
+         * Optional function callback for transform origin change. This is given the [x,y] (in percent) of the new
+         * origin, and the [left, top] (in absolute values) of the canvas.
+         */
+        transformOrigin?: Function;
+    };
+    /**
+     * Useful for development: set this to false if you don't want the widget to consume context menu clicks.
+     */
+    consumeRightClick?: boolean;
+    /**
+     * NOT IMPLEMENTED. This is a placeholder for possible future functionality, which will mean that the lower zoom
+     * bound refers to a multiple of the content bounds, not the viewport.
+     */
+    smartMinimumZoom?: boolean;
+    /**
+     * Whether or not the widget is enabled, ie. responding to mouse input. Defaults to true.
+     */
+    enabled?: boolean;
+    /**
+     * Optional filter that will be called on down event, with the event target and the event. Returning true
+     * from this function means the widget should respond to the event.
+     */
+    filter?: Function;
+    /**
+     * Optional background. Can also be set via setBackground(..)
+     */
+    background?: Background;
+    /**
+     * Optional fixed transform origin. When this is supplied the zoom function does not change the transform origin, and neither
+     * does the pan. You can still zoom and pan but the zoom is applied relative to the top/left corner of the content.
+     */
+    fixedTransformOrigin?: PointXY;
+}