@visuallyjs/browser-ui 1.0.0

package/types/ui/core/event-constants.d.ts

@@ -0,0 +1,510 @@
+export declare const EVENT_INTERNAL_CONNECTION = "internal.connection";
+/**
+ * Fired by an UI when its updateContext method has been invoked. The callback gets a JS object with key and value for the update.
+ * @group Events
+ * @constant
+ */
+export declare const EVENT_CONTEXT_UPDATE = "context:update";
+/**
+ * Fired by the model when a group is collapsed
+ * @group Events
+ * @category Model
+ * @constant
+ */
+export declare const EVENT_GROUP_COLLAPSE = "group:collapse";
+/**
+ * Fired by the model when a group is expanded
+ * @group Events
+ * @category Model
+ * @constant
+ */
+export declare const EVENT_GROUP_EXPAND = "group:expand";
+/**
+ * Fired when the zoom changes in the UI
+ * @event
+ * @category UI Events
+ * @payload PanZoomEventPayload
+ * @constant
+ * @context canvas
+ */
+export declare const EVENT_ZOOM = "zoom";
+/**
+ * @internal
+ */
+export declare const EVENT_RENDER_START = "render:start";
+/**
+ * @internal
+ */
+export declare const EVENT_RENDER_END = "render:end";
+/**
+ * Fired after the UI runs an adhoc layout.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context layout
+ */
+export declare const EVENT_ADHOC_LAYOUT = "adhocLayout";
+/**
+ * Fired after the UI runs a layout refresh.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context layout
+ */
+export declare const EVENT_AFTER_LAYOUT_REFRESH = "afterLayoutRefresh";
+/**
+ * Fired after a group's layout is re-run.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context layout
+ */
+export declare const EVENT_GROUP_RELAYOUT = "group:relayout";
+/**
+ * Fired after a group has been rendered
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context rendering
+ */
+export declare const EVENT_GROUP_RENDERED = "group:render";
+/**
+ * @internal
+ */
+export declare const EVENT_INTERNAL_VERTEX_UPDATED = "internal.vertex:updated";
+/**
+ * Fired after a node has been rendered
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context rendering
+ */
+export declare const EVENT_NODE_RENDERED = "node:render";
+/**
+ * Fired when the visibility of a vertex changes. used internally.
+ * @internal
+ */
+export declare const EVENT_NODE_VISIBILITY = "node:visibility";
+/**
+ * Fired by the UI when a new plugin has been added
+ * @group Events
+ * @category UI
+ * @internal
+ */
+export declare const EVENT_PLUGIN_ADDED = "plugin:added";
+/**
+ * Fired by the UI when a plugin has been removed
+ * @group Events
+ * @category UI
+ * @internal
+ */
+export declare const EVENT_PLUGIN_REMOVED = "plugin:removed";
+/**
+ * Fired by the UI when the layout has been re-run
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context layout
+ */
+export declare const EVENT_RELAYOUT = "relayout";
+/**
+ * @internal
+ */
+export declare const EVENT_OBJECT_REPAINTED = "objectRepainted";
+/**
+ * A click event.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_CLICK = "click";
+/**
+ * A context menu (right click) event.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_CONTEXTMENU = "contextmenu";
+/**
+ * A double click event.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_DBLCLICK = "dblclick";
+/**
+ * A double tap event. See discussion of {@link EVENT_TAP}.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_DBLTAP = "dbltap";
+/**
+ * A focus event.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_FOCUS = "focus";
+/**
+ * A mousedown event.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_MOUSEDOWN = "mousedown";
+/**
+ * A mouseenter event
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_MOUSEENTER = "mouseenter";
+/**
+ * A mouseexit event.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_MOUSEEXIT = "mouseexit";
+/**
+ * A mousemove event
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_MOUSEMOVE = "mousemove";
+/**
+ * A mouseleave event
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_MOUSELEAVE = "mouseleave";
+/**
+ * A mouseup event
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_MOUSEUP = "mouseup";
+/**
+ * A mouseout event
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_MOUSEOUT = "mouseout";
+/**
+ * A mouseover event
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_MOUSEOVER = "mouseover";
+/**
+ * A tap event is a synthesized event in which VisuallyJs captures a mousedown/touchstart followed by, within some time period, a mouseup/touchend. If the event target's position has not changed between the two events, a tap event is fired. It is generally preferable to bind to this event rather than EVENT_CLICK, because a browser will fire a click event even if the event target has changed position between mousedown and mouseup. So you can get spurious click events reported while dragging elements, for example.
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context pointer-events
+ */
+export declare const EVENT_TAP = "tap";
+/**
+ * A touch start event
+ * @group Events
+ * @category UI
+ * @constant
+ * @internal
+ */
+export declare const EVENT_TOUCHSTART = "touchstart";
+/**
+ * A touch end event
+ * @group Events
+ * @category UI
+ * @constant
+ * @internal
+ */
+export declare const EVENT_TOUCHEND = "touchend";
+/**
+ * @group Events
+ * @category UI
+ * @internal
+ */
+export declare const EVENT_TOUCHMOVE = "touchmove";
+/**
+ * A click event on a vertex
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_CLICK = "vertex:click";
+/**
+ * A double click event on a vertex
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_DBLCLICK = "vertex:dblclick";
+/**
+ * A double tap event on a vertex
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_DBLTAP = "vertex:dbltap";
+/**
+ * A mouseout event on a vertex
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_MOUSEOUT = "vertex:mouseout";
+/**
+ * A mouseover event on a vertex
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_MOUSEOVER = "vertex:mouseover";
+/**
+ * A mousemove event on a vertex
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_MOUSEMOVE = "vertex:mousemove";
+/**
+ * A mouseup event on a vertex
+ * @group Events
+ * @category UI
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_MOUSEUP = "vertex:mouseup";
+/**
+ * A mousedown event on a vertex
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_MOUSEDOWN = "vertex:mousedown";
+/**
+ * A context menu (right click) event on a vertex
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_CONTEXTMENU = "vertex:contextmenu";
+/**
+ * A tap event on a vertex
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_VERTEX_TAP = "vertex:tap";
+/**
+ * A click event on an edge
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_EDGE_CLICK = "edge:click";
+/**
+ * A double click event on an edge
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_EDGE_DBLCLICK = "edge:dblclick";
+/**
+ * A double tap event on an edge
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_EDGE_DBLTAP = "edge:dbltap";
+/**
+ * A mouseout event on an edge
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_EDGE_MOUSEOUT = "edge:mouseout";
+/**
+ * A mouseover event on an edge
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_EDGE_MOUSEOVER = "edge:mouseover";
+/**
+ * A mouseup event on an edge
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_EDGE_MOUSEUP = "edge:mouseup";
+/**
+ * A mousedown event on an edge
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_EDGE_MOUSEDOWN = "edge:mousedown";
+/**
+ * A context menu (right click) event on an edge
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_EDGE_CONTEXTMENU = "edge:contextmenu";
+/**
+ * A tap event on an edge
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_EDGE_TAP = "edge:tap";
+/**
+ * Fired when the user clicks/taps on the whitespace of a canvas.
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_CANVAS_CLICK = "canvasClick";
+/**
+ * Fired when the user double clicks/double taps on the whitespace of a canvas.
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context model-pointer-events
+ */
+export declare const EVENT_CANVAS_DBLCLICK = "canvasDblClick";
+/**
+ * Fired under certain specific conditions when an edge is being relocated.
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @internal
+ */
+export declare const EVENT_EDGE_REDRAW = "edge:redraw";
+/**
+ * Fired at the end of a lasso operation.
+ * @group Events
+ * @category UI Events
+ * @constant
+ * @event
+ * @context lasso
+ */
+export declare const EVENT_LASSO_END = "lasso:end";
+/**
+ * Fired when a surface pans. This event is fired continuously as the surface is panning.
+ * @payload PanZoomEventPayload
+ * @constant
+ * @event
+ * @context canvas
+ */
+export declare const EVENT_PAN = "pan";
+/**
+ * @internal
+ */
+export declare const EVENT_SURFACE_MODE_CHANGED = "modeChanged";
+/**
+ * @internal
+ */
+export declare const ALL_GROUPS_RELAYOUT = "allGroupsRelayout";
+/**
+ * @internal
+ */
+export declare const GROUP_RELAYOUT_ADHOC = "groupRelayoutAdhoc";
+/**
+ * @internal
+ */
+export declare const GROUP_RELAYOUT_MEMBER_REMOVED = "groupMemberRemoved";
+/**
+ * @internal
+ */
+export declare const GROUP_RELAYOUT_NEW_VERTEX_ADDED = "newVertexAddedToGroup";
+/**
+ * @internal
+ */
+export declare const GROUP_RELAYOUT_EXISTING_VERTEX_ADDED = "existingVertexAddedToGroup";
+/**
+ * Reasons for a group layout being run.
+ * @internal
+ */
+export type GroupRelayoutReason = typeof GROUP_RELAYOUT_MEMBER_REMOVED | typeof GROUP_RELAYOUT_NEW_VERTEX_ADDED | typeof GROUP_RELAYOUT_EXISTING_VERTEX_ADDED | typeof GROUP_RELAYOUT_ADHOC | typeof ALL_GROUPS_RELAYOUT;

package/types/ui/core/factory/anchor-record-factory.d.ts

@@ -0,0 +1,17 @@
+import { AnchorRecord, AnchorSpec, LightweightAnchor } from "../../common";
+import { PointXY } from "../../../core";
+/**
+ * @internal
+ * @param type
+ * @param locations
+ * @param params
+ * @private
+ */
+export declare function _createAnchor(type: string, locations: Array<AnchorRecord>, params: Record<string, any>, fixedLocation: AnchorRecord): LightweightAnchor;
+export declare function makeLightweightAnchorFromArraySpec(specs: Array<AnchorSpec>, selectedAnchor?: number, currentPosition?: PointXY): LightweightAnchor;
+/**
+ * @internal
+ * @param spec
+ * @param fixedLocation
+ */
+export declare function makeLightweightAnchorFromSpec(spec: AnchorSpec | Array<AnchorSpec> | LightweightAnchor, fixedLocation?: AnchorRecord): LightweightAnchor;

package/types/ui/core/factory/continuous-anchors.d.ts

@@ -0,0 +1,27 @@
+import { Face, LightweightContinuousAnchor } from "../../common";
+/**
+ *
+ * @param a
+ * @internal
+ */
+export declare function getDefaultFace(a: LightweightContinuousAnchor): Face;
+/**
+ * @internal
+ * @param a
+ * @param face
+ * @private
+ */
+export declare function _isFaceAvailable(a: LightweightContinuousAnchor, face: Face): boolean;
+/**
+ * Determines whether the given face is supported on the given anchor at some
+ * point in time.
+ * @internal
+ * @param a
+ * @param face
+ * @param occupiedCheck
+ */
+export declare function isEdgeSupported(a: LightweightContinuousAnchor, face: Face, occupiedCheck: (edge: string) => boolean): boolean;
+export declare function _createContinuousAnchor(type: string, faces: Array<Face>, params: Record<string, any>): LightweightContinuousAnchor;
+export declare const namedContinuousValues: Record<string, {
+    faces: Array<string>;
+}>;

package/types/ui/core/factory/overlay-factory.d.ts

@@ -0,0 +1,8 @@
+import { Overlay } from '../overlay/overlay';
+import { Connection } from "../connector/connection-impl";
+import { UICore } from "../core";
+import { Constructable } from "../../../core";
+export declare const OverlayFactory: {
+    get: <E>(instance: UICore<E, any>, name: string, component: Connection<E>, params: any) => Overlay<E>;
+    register: (name: string, overlay: Constructable<Overlay<any>>) => void;
+};

package/types/ui/core/grid-profile.d.ts

@@ -0,0 +1,28 @@
+import { Grid } from "../../core/util";
+/**
+ * Options for a grid in the UI
+ */
+export interface GridOptions {
+    /**
+     * Width/height of the grid cells
+     */
+    size?: Grid;
+    /**
+     * Whether or not to snap elements to the grid when dragging. Defaults to false.
+     */
+    snap?: boolean;
+    /**
+     * Whether or not to ensure calculated group sizes (from auto sized groups) are a multiple of the grid size in each axis. Defaults to false.
+     */
+    fitGroupsToGrid?: boolean;
+}
+/**
+ * models the behaviour of the grid.
+ * @internal
+ */
+export declare class GridProfile {
+    grid: Grid;
+    snap: boolean;
+    fitGroupsToGrid: boolean;
+    constructor(opts: GridOptions);
+}

package/types/ui/core/group-collapse-expand.d.ts

@@ -0,0 +1,23 @@
+import { Edge, ProxyLocation, ObjectAnchorSpec } from "../../core";
+import { UICore } from "./core";
+import { LightweightAnchor } from "../common";
+import { CoreUIEvent } from "./core-events";
+import { ViewportElement } from "./viewport";
+/**
+ * @internal
+ * @param instance
+ * @param e
+ * @param index
+ * @param newAnchorSpec
+ * @private
+ */
+export declare function $__unproxyEdge<EL, EVT = CoreUIEvent>(instance: UICore<EL, EVT>, e: Edge, index: ProxyLocation, newAnchorSpec?: ObjectAnchorSpec): ViewportElement<EL> | null;
+/**
+ * Proxy the given edge such that its source/target is on the given element. This is used when collapsing
+ * groups and also when relocating edges
+ * @internal
+ * @param instance
+ * @param e
+ * @param index
+ */
+export declare function $__proxyEdge<EL, EVT = CoreUIEvent>(instance: UICore<EL, EVT>, e: Edge, index: ProxyLocation, managedElement: ViewportElement<EL>, anchor?: LightweightAnchor): void;

package/types/ui/core/group-sizer.d.ts

@@ -0,0 +1,9 @@
+import { GridProfile } from "./grid-profile";
+import { Extents, Size } from "../../core/util";
+import { GroupMapping } from "./view";
+export declare function computeGroupSize<EL>(extents: Extents, groupDef: GroupMapping<EL>, allowOriginShift: boolean, shrink: boolean, grow: boolean, gridProfile: GridProfile, minSize?: Size): {
+    width: number;
+    height: number;
+    layoutShiftX: number;
+    layoutShiftY: number;
+};

package/types/ui/core/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * This package is the core of the VisuallyJs UI.
+ *
+ * @packageDocumentation
+ */
+export * from './context';
+export * from './definitions';
+export * from "./constants";
+export * from "./css-constants";
+export * from "./event-constants";
+export * from './params';
+export * from "./callbacks";
+export * from "./type-descriptors";
+export * from './view';
+export * from './ui-model';
+export * from './core-events';
+export * from "./core";
+export * from "./defaults";
+export * from './viewport';
+export * from "./group-sizer";
+export * from "./group-collapse-expand";
+export * from "./component/component";
+export * from "./connector/segments";
+export * from "./connector/abstract-connector";
+export * from "./connector/arc-segment";
+export * from "./connector/connection-impl";
+export * from "./connector/connectors";
+export * from "./connector/connections";
+export * from "./connector/straight-segment";
+export * from './grid-profile';
+export * from './magnetize-profile';
+export * from "./overlay/overlay";
+export * from "./overlay/label-overlay";
+export * from "./overlay/arrow-overlay";
+export * from "./overlay/plain-arrow-overlay";
+export * from "./overlay/diamond-overlay";
+export * from "./overlay/custom-overlay";
+export * from "./overlay/dot-overlay";
+export * from "./overlay/rectangle-overlay";
+export * from "./overlay/ellipse-overlay";
+export * from "./factory/overlay-factory";
+export * from './router/router';
+export * from "./factory/continuous-anchors";
+export * from "./factory/anchor-record-factory";
+export * from './router';