@visuallyjs/browser-ui 1.0.0

package/types/ui/connector-straight/operations.d.ts

@@ -0,0 +1,55 @@
+import { InternalStraightConnectorGeometry, SegmentedConnectorCurvedSegment, StraightConnector, StraightConnectorGeometry, StraightConnectorSegment } from "./straight-connector";
+import { ConnectorComputeParams, PaintGeometry } from "../core/connector/abstract-connector";
+import { Connection } from "../core/connector/connection-impl";
+import { PointXY } from "../../core";
+/**
+ * Trim the segments of any that have zero length, then either smooth them and apply, or just apply.
+ * @param conn
+ * @param segments
+ * @private
+ * @internal
+ */
+export declare function _writeSegmentedConnectorSegments(conn: StraightConnector, segments: Array<StraightConnectorSegment>): Array<StraightConnectorSegment>;
+/**
+ * Compute the line angle for the given segment.
+ * @param cs
+ * @internal
+ */
+export declare function segmentLineAngle(cs: StraightConnectorSegment): number;
+/**
+ * @internal
+ * @private
+ */
+export declare function connectorSegmentLength(s: StraightConnectorSegment): number;
+export declare function _mapToSpline(points: Array<PointXY>, smoothing: number): Array<{
+    type: string;
+    segment: SegmentedConnectorCurvedSegment;
+}>;
+/**
+ * Default straight path compute writes a segment for each stub and a segment joining them. If the stubs have 0 length they are trimmed.
+ * @param sc
+ * @param paintInfo
+ * @param params
+ * @internal
+ */
+export declare function $defaultStraightPathCompute(sc: StraightConnector, paintInfo: PaintGeometry, params: ConnectorComputeParams): Array<StraightConnectorSegment>;
+export declare function updateStraightConnector(connection: Connection<any>, paintInfo: PaintGeometry, params: ConnectorComputeParams, sourceMoved: boolean, targetMoved: boolean): InternalStraightConnectorGeometry;
+/**
+ * @param connection
+ * @param paintInfo
+ * @param params
+ * @internal
+ */
+export declare function computeStraightConnector(connection: Connection<any>, paintInfo: PaintGeometry, params: ConnectorComputeParams): InternalStraightConnectorGeometry;
+/**
+ * @param g
+ * @param dx
+ * @param dy
+ * @internal
+ */
+export declare function transformSegmentedGeometry(g: StraightConnectorGeometry, dx: number, dy: number): StraightConnectorGeometry;
+/**
+ * @param s
+ * @internal
+ */
+export declare function _trimSegments(s: Array<StraightConnectorSegment>): Array<StraightConnectorSegment>;

package/types/ui/connector-straight/straight-connector.d.ts

@@ -0,0 +1,121 @@
+import { Connector, ConnectorOptions, ConnectorPathConstrainment } from "../common";
+import { DiagonalAxis, OrthogonalAxis, Geometry, PointXY } from "../../core";
+/**
+ * Default amount to smooth the curve by in a smoothed straight connector.
+ * @internal
+ * @group Edges
+ * @category Connectors
+ */
+export declare const DEFAULT_SMOOTHING = 0.15;
+/**
+ * Straight connector type.
+ * @group Edges
+ * @category Connectors
+ * @constant
+ */
+export declare const CONNECTOR_TYPE_STRAIGHT = "Straight";
+/**
+ * Options for a straight connector.
+ * @group Edges
+ * @category Connectors
+ */
+export interface StraightConnectorOptions extends ConnectorOptions {
+    /**
+     * Whether or not to smooth the connector. Defaults to false. It is not recommended to use this in conjunction with `orthogonal` or `diagonal` constrain, as the line tends to take on a bit of a hand-drawn appearance. It's not without charm but it's also not for everyone.
+     */
+    smooth?: boolean;
+    /**
+     * The amount of smoothing to apply. The default is 0.15.  Values that deviate too much from the default will make your lines look weird.
+     */
+    smoothing?: number;
+    /**
+     * Optional radius to apply to corners. If you have set `smooth:true` this will be ignored.
+     */
+    cornerRadius?: number;
+    /**
+     * Optional constraint on the direction path segments can travel in. Options are PATH_CONSTRAIN_NONE, PATH_CONSTRAIN_ORTHOGONAL (segments are vertical and/or horizontal lines) and PATH_CONSTRAIN_DIAGONAL (segments are vertical, horizontal, or 45 degree lines). You can also use PATH_CONSTRAIN_MANHATTAN as an alias for PATH_CONSTRAIN_ORTHOGONAL or PATH_CONSTRAIN_METRO as an alias for PATH_CONSTRAIN_DIAGONAL.
+     */
+    constrain?: ConnectorPathConstrainment;
+    /**
+     * For a loopback connection (when constrain is set to orthogonal), the size of the loop.
+     */
+    loopbackRadius?: number;
+    /**
+     * The point to use as the halfway point between the source and target when constrain is set to orthogonal. Defaults to 0.5.
+     */
+    midpoint?: number;
+    /**
+     * Defaults to true, meaning always draw a stub of the desired length, even when the source and target elements are very close together. This only applies when constrain is set to PATH_CONSTRAIN_ORTHOGONAL.
+     */
+    alwaysRespectStubs?: boolean;
+    /**
+     * If true, and a cornerRadius is set, the lines are drawn in such a way that they look slightly hand drawn.
+     */
+    slightlyWonky?: boolean;
+}
+/**
+ * segment connector segment
+ * @internal
+ * @group Edges
+ * @category Connectors
+ */
+export interface StraightConnectorSegment {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    o?: OrthogonalAxis | DiagonalAxis;
+}
+/**
+ * @internal
+ */
+export declare function segmentedConnectorSegmentLength(s: StraightConnectorSegment): number;
+/**
+ * curved segment, as generated by the smoothing algorithm.
+ * @internal
+ * @private
+ */
+export interface SegmentedConnectorCurvedSegment extends StraightConnectorSegment {
+    cp1: PointXY;
+    cp2: PointXY;
+}
+/**
+ * The format used internally to store a straight connector's geometry.
+ * @internal
+ * @private
+ */
+export interface InternalStraightConnectorGeometry extends Geometry {
+    segments: Array<StraightConnectorSegment>;
+    quadrant?: number;
+}
+/**
+ * The format used to load/export straight connector geometry
+ * @group Edges
+ * @category Connectors
+ */
+export interface StraightConnectorGeometry extends Geometry {
+}
+/**
+ * A straight connector consists of a set of segments between 2 points. It may be constrained to be orthogonal, ie. that the segments are vertical or horizontal lines only. It also may be "smoothed", in which the segments are approximated by a series of Bézier curves.
+ */
+export interface StraightConnector extends Connector {
+    smooth: boolean;
+    smoothing: number;
+    geometry: InternalStraightConnectorGeometry;
+    cornerRadius: number;
+    loopbackRadius: number;
+    isLoopbackCurrently: boolean;
+    constrain: ConnectorPathConstrainment;
+    $pathSegments: Array<StraightConnectorSegment>;
+    midpoint: number;
+    alwaysRespectStubs: boolean;
+    lastx: number;
+    lasty: number;
+    lastOrientation: number;
+    slightlyWonky: boolean;
+}
+/**
+ * Straight connector.
+ * @group Edges
+ * @category Connectors
+ */

package/types/ui/copy-paste/clipboard.d.ts

@@ -0,0 +1,45 @@
+import { ClonedSet, CopyDataTransformer, PasteOptions } from "./copy-data";
+import { VisuallyJsModel } from "../../core/toolkit";
+import { Base } from "../../core/model/graph";
+import { Path } from "../../core/model/path";
+import { VisuallyJsSelection } from '../../core/selection';
+/**
+ * Offers methods to copy and paste data from/to a VisuallyJs model instance. This class is abstract and is subclassed to concrete implementations by UI specific packages. In the future if alternate renderers are written for the VisuallyJs model it is expected that an implementation of the Clipboard would be one of the inclusions.
+ *
+ * @group Components
+ * @category Copy/paste
+ */
+export declare abstract class Clipboard {
+    instance: VisuallyJsModel;
+    private stack;
+    protected constructor(instance: VisuallyJsModel);
+    /**
+     * Copy some set of objects into the clipboard.
+     * @param obj - The object, or objects, to copy in to the clipboard.
+     *
+     */
+    copy(obj: Base | Array<Base> | Path | VisuallyJsSelection): void;
+    /**
+     * Paste the clipboard's most recent entry, optionally removing it from the clipboard afterwards.
+     * @param options - Options for the paste.
+     *
+     */
+    paste(options?: PasteOptions): ClonedSet;
+    /**
+     * Removes all entries from the clipboard.
+     */
+    clear(): void;
+    /**
+     * Copies the contents of the associated model instance's current selection into the clipboard.
+     */
+    copyCurrentSelection(): void;
+    /**
+     * Copies and pastes the contents of the associated model instance's current selection into the clipboard. This method is equivalent to calling `copyCurrentSelection()` first and then calling `paste(..)`.
+     * @param options - Options for the paste.
+     */
+    pasteCurrentSelection(options?: PasteOptions): ClonedSet;
+    /**
+     * @internal
+     */
+    abstract $getCopyDataTransformer(): CopyDataTransformer;
+}

package/types/ui/copy-paste/copy-data.d.ts

@@ -0,0 +1,93 @@
+import { PointXY, RectangleXY, VisuallyJsModel, VisuallyJsSelection, AddEdgeOptions, Edge, Group, ObjectData, Vertex, Node, Geometry } from "../../core";
+/**
+ * Options to use when pasting data.
+ * @group Components
+ * @category Copy/paste
+ */
+export interface PasteOptions {
+    /**
+     * Origin to use when pasting the data. Each item's location will be translated when copied accordingly.
+     */
+    origin?: PointXY;
+    /**
+     Indicates that the paste should only paste edges whose source and target vertex are in the CopyData object that is being pasted. When this is set to false - which is the default- , all edges in the CopyData will be pasted, but edges to/from some vertex not in the CopyData will attach to the pasted vertex from the CopyData on one end, and the existing original vertex outside the CopyData on the other.
+     */
+    hermetic?: boolean;
+    /**
+     * Defaults to false. If true, nested nodes/groups will not be copied when their parents are copied.
+     */
+    shallow?: boolean;
+    /**
+     * If true, the clipboard will be cleared after this paste operation. Defaults to false.
+     */
+    clear?: boolean;
+}
+/**
+ * The return value from a paste. Contains a list of nodes, groups and edges that were pasted, as well as a map of previous edge/vertex ids to their new ids, the computed origin of the copied vertices, and the amount by which the set of objects was translated for the paste (so the paste location is origin + transform).
+ * @group Components
+ * @category Copy/paste
+ */
+export interface ClonedSet {
+    /**
+     * List of nodes that were pasted.
+     */
+    nodes: Array<ObjectData>;
+    /**
+     * List of groups that were pasted.
+     */
+    groups: Array<ObjectData>;
+    /**
+     * List of edges that were pasted.
+     */
+    edges: Array<AddEdgeOptions>;
+    /**
+     * Map of nodes/groups that were pasted, keyed by id
+     */
+    vertexMap: Map<string, string>;
+    /**
+     * Map of edges that were pasted, keyed by id
+     */
+    edgeMap: Map<string, string>;
+    /**
+     * The computed origin of the set of pasted objects, prior to pasting
+     */
+    origin: PointXY;
+    /**
+     * The transformation applied to the content origin when pasting.
+     */
+    transform: PointXY;
+}
+/**
+ * Provides helper methods to transform geometry and to retrieve coordinates.
+ * @internal
+ */
+export interface CopyDataTransformer {
+    transformGeometry(edge: Edge, dx: number, dy: number): Geometry;
+    getCoordinates(vertex: Vertex, relativeToCanvasRoot?: boolean): RectangleXY;
+}
+/**
+ * A set of data to be copied.
+ * @internal
+ */
+export declare class CopyData {
+    instance: VisuallyJsModel;
+    _nodes: Array<Node>;
+    _groups: Array<Group>;
+    _edges: Array<Edge>;
+    static from(selection: VisuallyJsSelection): CopyData;
+    constructor(instance: VisuallyJsModel);
+    /**
+     * @internal
+     * @param transformer
+     * @param options
+     */
+    paste(transformer: CopyDataTransformer, options?: PasteOptions): ClonedSet;
+    /**
+     * @internal
+     * @param transformer
+     * @param newOrigin
+     * @param hermetic
+     * @param shallow
+     */
+    private _cloneEntries;
+}

package/types/ui/copy-paste/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./copy-data";
+export * from './clipboard';

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

@@ -0,0 +1,48 @@
+import { Connection } from "./connector/connection-impl";
+import { Edge } from "../../core/model/graph";
+import { ConnectReason } from "../../core/params";
+/**
+ * Definition of the parameters passed to a listener for the `connection` event.
+ * @group Events
+ */
+export interface ConnectionEstablishedParams<E = any> {
+    connection: Connection<E>;
+    reason: ConnectReason;
+    edge: Edge;
+}
+/**
+ * Definition of the parameters passed to a listener for the `connection:detach` event.
+ * @group Events
+ */
+export interface ConnectionDetachedParams<E = any> extends ConnectionEstablishedParams<E> {
+}
+/**
+ * Definition of the parameters passed to a listener for the `connection:move` event.
+ * @group Events
+ */
+export interface ConnectionMovedParams<E = any> {
+    connection: Connection<E>;
+    index: number;
+    originalSourceId: string;
+    newSourceId: string;
+    originalTargetId: string;
+    newTargetId: string;
+}
+/**
+ * Definition of the parameters passed to the `beforeDrop` interceptor.
+ * @group Events
+ */
+export interface BeforeDropParams {
+    sourceId: string;
+    targetId: string;
+    scope: string;
+    connection: Connection<any>;
+}
+/**
+ * Payload for an element managed event
+ *
+ */
+/**
+ * Payload for an element unmanaged event.
+ *
+ */

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

@@ -0,0 +1,115 @@
+import { CompiledTypeDescriptor } from '../type-descriptors';
+import { UICore } from "../core";
+import { PaintStyle } from "../../common";
+import { Connection } from "../connector/connection-impl";
+import { PointXY } from "../../../core";
+export declare function isConnection(c: any): c is Connection<any>;
+export declare const COMPONENT_TYPE_CONNECTION = "connection";
+/**
+ * @internal
+ */
+export declare function _removeTypeCssHelper<EL>(component: ComponentBase<EL>, typeId: string): void;
+/**
+ * helper method to update the hover style whenever it, or paintStyle, changes.
+ * we use paintStyle as the foundation and merge hoverPaintStyle over the top.
+ * @internal
+*/
+export declare function _updateHoverStyle<EL>(component: ComponentBase<EL>): void;
+/**
+ * @internal
+ */
+export interface ComponentOptions {
+    hoverClass?: string;
+    scope?: string;
+    cssClass?: string;
+    data?: any;
+    id?: string;
+}
+/**
+ * @internal
+ */
+export declare const ADD_CLASS_ACTION = "add";
+/**
+ * @internal
+ */
+export declare const REMOVE_CLASS_ACTION = "remove";
+/**
+ * @internal
+ */
+export type ClassAction = typeof ADD_CLASS_ACTION | typeof REMOVE_CLASS_ACTION;
+export declare function getComponentXY<EL>(c: ComponentBase<EL>): PointXY;
+/**
+ * Base class for components. Perhaps this will disappear over time.
+ * @internal
+ */
+export interface ComponentBase<EL> {
+    id: string;
+    deleted: boolean;
+    instance: UICore<EL>;
+    /**
+     * @internal
+     */
+    $typeCache: Record<string, Record<string, any>>;
+    objectType: string;
+    visible: boolean;
+    /**
+     * @internal
+     */
+    paintStyle: PaintStyle;
+    /**
+     * @internal
+     */
+    hoverPaintStyle: PaintStyle;
+    /**
+     * @internal
+     */
+    paintStyleInUse: PaintStyle;
+    $hover: boolean;
+    hoverClass: string;
+    cssClass: string;
+    $types: Set<string>;
+    $defaultType: CompiledTypeDescriptor;
+}
+export declare function createComponent<EL>(instance: UICore<EL>, objectType: string, params?: ComponentOptions): ComponentBase<EL>;
+/**
+ * @internal
+ */
+export declare const Components: {
+    create<EL>(instance: UICore<EL>, idPrefix: string, params?: ComponentOptions): ComponentBase<EL>;
+    addClass<EL>(c: ComponentBase<EL>, clazz: string): void;
+    /**
+     * Removes a css class from the component
+     * @param c
+     * @param clazz Class to remove. May be a space separated list.
+     * @param cascade This is for subclasses to use, if they wish to. For instance, a Connection might want to optionally cascade a css class
+     * removal down to its endpoints.
+     *
+     */
+    removeClass<EL>(c: ComponentBase<EL>, clazz: string, cascade?: boolean): void;
+    cacheTypeItem<EL>(c: ComponentBase<EL>, key: string, item: any, typeId: string): void;
+    /**
+     * @internal
+     */
+    hasType<EL>(c: ComponentBase<EL>, typeId: string): boolean;
+    removeType<EL>(c: ComponentBase<EL>, typeId: string, params?: any): void;
+    /**
+     * @internal
+     */
+    addType<EL>(c: ComponentBase<EL>, typeId: string, params?: any): void;
+    /**
+     * @internal
+     */
+    getCachedTypeItem<EL>(c: ComponentBase<EL>, key: string, typeId: string): any;
+    setPaintStyle<EL>(c: ComponentBase<EL>, style: PaintStyle): void;
+    /**
+     * @internal
+     */
+    setHoverPaintStyle<EL>(c: ComponentBase<EL>, style: PaintStyle): void;
+    getType<EL>(c: ComponentBase<EL>): string[];
+    clearTypes<EL>(c: ComponentBase<EL>, params?: any): void;
+    setType<EL>(c: ComponentBase<EL>, typeId: string, params?: any): Record<string, any>;
+    applyType<EL>(c: ComponentBase<EL>, t: any, params?: any): void;
+    appendToDefaultType<EL>(c: ComponentBase<EL>, obj: Record<string, any>): void;
+    destroy<EL>(c: ComponentBase<EL>): void;
+    setVisible<EL>(c: ComponentBase<EL>, v: boolean): void;
+};

package/types/ui/core/connector/abstract-connector.d.ts

@@ -0,0 +1,66 @@
+import { Connection } from './connection-impl';
+import { ViewportElement } from "../viewport";
+import { Connector, ConnectorOptions, PaintAxis, Orientation } from "../../common";
+import { Quadrant, AnchorPlacement } from "../../../core";
+export type ConnectorComputeParams = {
+    sourcePos: AnchorPlacement;
+    targetPos: AnchorPlacement;
+    strokeWidth: number;
+    sourceInfo: ViewportElement<any>;
+    targetInfo: ViewportElement<any>;
+};
+/**
+ * @internal
+ */
+export interface PaintGeometry {
+    sx: number;
+    sy: number;
+    tx: number;
+    ty: number;
+    so: Orientation;
+    to: Orientation;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    quadrant: Quadrant;
+    startStubX: number;
+    startStubY: number;
+    endStubX: number;
+    endStubY: number;
+    isXGreaterThanStubTimes2: boolean;
+    isYGreaterThanStubTimes2: boolean;
+    opposite: boolean;
+    perpendicular: boolean;
+    orthogonal: boolean;
+    sourceAxis: PaintAxis;
+    stubs: [number, number];
+    anchorOrientation?: string;
+}
+export declare function emptyPaintGeometry(): PaintGeometry;
+/**
+ * Helper method for connectors - AnchorPlacement is a common component of a connector geometry.
+ * @internal
+ * @param a
+ * @param dx
+ * @param dy
+ * @internal
+ */
+export declare function transformAnchorPlacement(a: AnchorPlacement, dx: number, dy: number): AnchorPlacement;
+/**
+ * Base method to use when creating Connectors.
+ * @param type
+ * @param connection
+ * @param params
+ * @param defaultStubs
+ * @private
+ */
+export declare function _createConnectorBase(type: string, connection: Connection<any>, params: ConnectorOptions, defaultStubs: [number, number]): Connector;
+/**
+ * This is only ever called when setting an anchor location from geometry.
+ * @param loc
+ * @param connection
+ * @param endpointIndex
+ * @internal
+ */
+export declare function _setAnchorLocation(loc: AnchorPlacement, connection: Connection<any>, endpointIndex: number): void;

package/types/ui/core/connector/arc-segment.d.ts

@@ -0,0 +1,39 @@
+import { Segment, SegmentHandler, SegmentParams } from "../../common";
+/**
+ * @internal
+ * @private
+ */
+export interface ArcSegmentParams extends SegmentParams {
+    cx: number;
+    cy: number;
+    r: number;
+    ac: boolean;
+    startAngle?: number;
+    endAngle?: number;
+}
+/**
+ * @internal
+ * @private
+ */
+export declare const SEGMENT_TYPE_ARC = "Arc";
+/**
+ * @internal
+ * @private
+ */
+export interface ArcSegment extends Segment {
+    cx: number;
+    cy: number;
+    radius: number;
+    anticlockwise: boolean;
+    startAngle: number;
+    endAngle: number;
+    sweep: number;
+    length: number;
+    circumference: number;
+    frac: number;
+}
+/**
+ * @internal
+ * @private
+ */
+export declare const ArcSegmentHandler: SegmentHandler<ArcSegment, ArcSegmentParams>;

package/types/ui/core/connector/connection-impl.d.ts

@@ -0,0 +1,81 @@
+import { UICore } from "../core";
+import { ConnectParams } from '../params';
+import { ComponentBase } from "../component/component";
+import { Overlay, OverlayPaintParams } from "../overlay/overlay";
+import { Connector, AnchorSpec, LightweightAnchor } from "../../common";
+import { PointXY, Edge, ProxyLocation } from "../../../core";
+import { ViewportElement } from "../viewport";
+/**
+ * @internal
+ */
+export type ConnectionOptions<E = any> = ConnectParams<E> & {
+    source?: E;
+    target?: E;
+    previousConnection?: Connection<E>;
+    geometry?: any;
+};
+/**
+ * The information stored when we proxy an edge.
+ * @internal
+ */
+export interface ConnectionProxy<E> {
+    originalElement: ViewportElement<E>;
+    element: ViewportElement<E>;
+    originalAnchor: LightweightAnchor;
+    originallyVisible: boolean;
+}
+/**
+ * The visual representation of an edge.
+ */
+export interface Connection<EL> extends ComponentBase<EL> {
+    edge: Edge;
+    avoidVertices: boolean;
+    lastPaintedAt: string;
+    suspendedElement: EL;
+    suspendedElementId: string;
+    suspendedElementType: string;
+    suspendedIndex: number;
+    sourceId: string;
+    targetId: string;
+    sourceElement: EL;
+    targetElement: EL;
+    detachable: boolean;
+    reattach: boolean;
+    anchorDefs: {
+        source: AnchorSpec;
+        target: AnchorSpec;
+    };
+    anchors: {
+        source: LightweightAnchor;
+        target: LightweightAnchor;
+    };
+    instance: UICore<EL>;
+    /**
+     * @internal
+     */
+    overlays: Record<string, Overlay<EL>>;
+    /**
+     * @internal
+     */
+    overlayPositions: Record<string, PointXY>;
+    /**
+     * @internal
+     */
+    overlayPlacements: Record<string, OverlayPaintParams>;
+    sourceMarker: Overlay<EL>;
+    targetMarker: Overlay<EL>;
+    /**
+     * @internal
+     */
+    connector: Connector;
+    /** @internal */
+    proxies: Record<ProxyLocation, Array<ConnectionProxy<EL>>>;
+    scope: string;
+}
+export declare const DEFAULT_LABEL_LOCATION = 0.5;
+/**
+ * @internal
+ * @param instance
+ * @param params
+ */
+export declare function $createConnection<EL>(instance: UICore<EL, any>, params: ConnectionOptions<EL>): Connection<EL>;