@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/connector-editors-orthogonal/orthogonal-editor.d.ts

@@ -0,0 +1,86 @@
+import { EditorBase } from "../connector-editors/editor-base";
+import { Group, Node } from "../../core";
+import { BaseEdgeEditorHandleElement, ConnectorEditorOptions, SegmentEditorInfo } from "../connector-editors/definitions";
+import { InternalOrthogonalConnectorGeometry, IOrthogonalConnector, OrthogonalSegment, Connection } from "../../ui";
+import { BrowserUI } from "../browser-visuallyjs-instance";
+import { BrowserElement } from "../util";
+/** @internal */
+export interface OrthogonalEditorActivationParams {
+}
+/** @internal */
+export interface OrthogonalSegmentEditorInfo extends SegmentEditorInfo<OrthogonalEditorHandleElement, OrthogonalSegment> {
+    vertical: boolean;
+}
+/**
+ * @internal
+ */
+interface OrthogonalEditorHandleElement extends BaseEdgeEditorHandleElement<OrthogonalSegmentEditorInfo> {
+    _vjsDragHandle: OrthogonalSegmentEditorInfo;
+}
+/**
+ * Options for an orthogonal path editor.
+ * @group Edges
+ * @category Path Editors
+ */
+export interface OrthogonalEditorOptions extends ConnectorEditorOptions {
+}
+/**
+ * Path editor for Orthogonal connectors.
+ * @group Edges
+ * @category Path Editors
+ */
+export declare class OrthogonalEditor extends EditorBase<IOrthogonalConnector> {
+    static type: string;
+    segments: Array<OrthogonalSegment>;
+    segmentHandles: Array<OrthogonalSegmentEditorInfo>;
+    geometry: InternalOrthogonalConnectorGeometry;
+    $supportsHoverMode: boolean;
+    constructor(ui: BrowserUI, params: OrthogonalEditorOptions);
+    private _setHandlePosition;
+    /**
+     * Repaint the editor. This may or may not have come
+     * about as the result of a call by this class to `repaintConnection` - if
+     * `internalEditorRepaint` and/or `args` is set, then that is the case.
+     * @override
+     * @param args
+     * @internal
+     */
+    $repaint(args?: {
+        segmentInfo?: OrthogonalSegmentEditorInfo;
+        segmentIndex?: number;
+    }): void;
+    /**
+     * clear all handles, except, optionally, the one provided.
+     * @param excludeHandle
+     * @override
+     * @internal
+     */
+    $clearHandles(excludeHandle?: HTMLElement): void;
+    /**
+     * Activates the editor, on the given connection.
+     * @override
+     * @param conn
+     * @internal
+     */
+    $activate(conn: Connection<BrowserElement>, params?: OrthogonalEditorActivationParams): void;
+    $elementDragged(vertex: Node | Group): void;
+    $elementDragging(vertex: Node | Group): void;
+    /**
+     * updates the current origin of the connector's SVG element (the location of its to left corner wrt
+     * the origin of the UI instance's container). Then updates the offset of the source and target points
+     * from the origin of the SVG element. Finally, extracts the control point information from the connection,
+     * either as geometry (if previously edited or set) or from the computed control points.
+     * @override
+     */
+    private _update;
+    /**
+     * Trims any segments that are now of length zero, then
+     * concatenates subsequent segments that are in the same axis.
+     * then instructs the superclass to repaint (which will
+     * result in this class redrawing all its handles)
+     * @internal
+     */
+    private _trimConnection;
+    private $makeOrthogonalHandle;
+}
+export {};

package/types/browser-ui/connector-editors-straight/auto-split-mode.d.ts

@@ -0,0 +1,24 @@
+import { StraightEditorHandleElement, StraightEditorMode, StraightSegmentEditorInfo } from "./definitions";
+import { BrowserElement } from "../util";
+import { StraightEditor } from "./straight-editor";
+import { Connection } from "../../ui";
+/**
+ * Straight connector editor mode in which the user taps/presses the mouse at the
+ * point they wish to split a segment, and a drag handle is drawn for them.
+ * @internal
+ */
+export declare class AutoSplitMode implements StraightEditorMode {
+    editor: StraightEditor;
+    _edgeMousedown: (p: any) => void;
+    _deleteListener: (e: {
+        target: StraightEditorHandleElement;
+    }) => void;
+    private $segmentToDrag;
+    private $pageEvent;
+    constructor(editor: StraightEditor);
+    $activate(conn: Connection<BrowserElement>, params?: any): void;
+    $appendHandles(info: StraightSegmentEditorInfo): void;
+    $deactivate(e?: Event): void;
+    $repaintEnded(): void;
+    $repaintStarted(): void;
+}

package/types/browser-ui/connector-editors-straight/click-split-mode.d.ts

@@ -0,0 +1,20 @@
+import { StraightEditor } from "./straight-editor";
+import { StraightEditorMode, StraightSegmentEditorInfo } from "./definitions";
+import { Connection } from "../../ui";
+import { BrowserElement } from "../util";
+/**
+ * The operating mode in which a split button is added to the center of each segment, and the user clicks this button to split the segment, which
+ * then converts into a drag handle.
+ * @internal
+ */
+export declare class ClickSplitMode implements StraightEditorMode {
+    editor: StraightEditor;
+    private splitListener;
+    private deleteListener;
+    constructor(editor: StraightEditor);
+    $activate(conn: Connection<BrowserElement>, params?: any): void;
+    $deactivate(e?: Event): void;
+    $appendHandles(info: StraightSegmentEditorInfo): void;
+    $repaintEnded(): void;
+    $repaintStarted(): void;
+}

package/types/browser-ui/connector-editors-straight/css-constants.d.ts

@@ -0,0 +1,30 @@
+/**
+ * CSS class added to all segment handles created by the straight connector editor
+ * @group Edges
+ * @category Path Editors
+ */
+export declare const CLASS_STRAIGHT_HANDLE: string;
+/**
+ * CSS class added to a drag handle by the straight connector editor
+ * @group Edges
+ * @category Path Editors
+ */
+export declare const CLASS_STRAIGHT_DRAG_HANDLE: string;
+/**
+ * CSS class added to a segment split handle by the straight connector editor
+ * @group Edges
+ * @category Path Editors
+ */
+export declare const CLASS_STRAIGHT_SPLIT_HANDLE: string;
+/**
+ * CSS class added to a delete handle by the straight connector editor
+ * @group Edges
+ * @category Path Editors
+ */
+export declare const CLASS_STRAIGHT_DELETE_HANDLE: string;
+/**
+ * CSS class added to an editor guideline by the straight connector editor
+ * @group Edges
+ * @category Path Editors
+ */
+export declare const CLASS_STRAIGHT_EDITOR_GUIDELINE = "vjs-straight-editor-guideline";

package/types/browser-ui/connector-editors-straight/definitions.d.ts

@@ -0,0 +1,69 @@
+import { Connection, StraightConnectorSegment } from "../../ui";
+import { BrowserElement } from "../util";
+import { BaseEdgeEditorHandleElement, ConnectorEditorOptions, SegmentEditorInfo } from "../connector-editors";
+import { PointXY } from "../../core";
+/** @internal */
+export interface StraightEditorMode {
+    $activate(conn: Connection<BrowserElement>, params?: any): void;
+    $deactivate(e?: Event): void;
+    $appendHandles(info: StraightSegmentEditorInfo): void;
+    $repaintEnded(): void;
+    $repaintStarted(): void;
+}
+/**
+ * Added to a connector when the straight connector editor is active on it.
+ * @group Edges
+ * @category Path Editors
+ * @constant
+ */
+export declare const CLASS_STRAIGHT_CONNECTOR_EDIT = "vjs-straight-connector-edit";
+/**
+ * Constant identifying the straight connector editor mode that shows a split button on each segment, which the user clicks to split the segment at its midpoint.
+ * @group Edges
+ * @category Path Editors
+ * @constant
+ */
+export declare const STRAIGHT_CONNECTOR_CLICK_SPLIT = "click";
+/**
+ * Constant identifying the straight connector editor mode in which the user taps/presses the mouse at the point they wish to split a segment, and a drag handle is drawn for them.
+ * @group Edges
+ * @category Path Editors
+ * @constant
+ */
+export declare const STRAIGHT_CONNECTOR_AUTO_SPLIT = "auto";
+/**
+ * Available modes for the Straight connector's split functionality.
+ * @group Edges
+ * @category Path Editors
+ */
+export type StraightConnectorEditorSplitMode = typeof STRAIGHT_CONNECTOR_CLICK_SPLIT | typeof STRAIGHT_CONNECTOR_AUTO_SPLIT;
+/**
+ * Options for a straight connector editor.
+ * @group Edges
+ * @category Path Editors
+ */
+export interface StraightConnectorEditorOptions extends ConnectorEditorOptions {
+    /**
+     * Identifies the mode to use to split segments. {@link STRAIGHT_CONNECTOR_AUTO_SPLIT} creates a new segment handle when the user performs a mousedown or touchstart, at the location of the event. This is the default. {@link STRAIGHT_CONNECTOR_CLICK_SPLIT} displays a button on the midpoint of each segment which the user can click on to split the segment.
+     */
+    splitMode?: StraightConnectorEditorSplitMode;
+    /**
+     * Defaults to true - when the connector is smoothed, show guidelines linking each of the control points in the path.
+     */
+    showGuidelines?: boolean;
+}
+/** @internal */
+export interface StraightSegmentEditorInfo extends SegmentEditorInfo<StraightEditorHandleElement, StraightConnectorSegment> {
+    focus: StraightConnectorSegment;
+    previous: StraightConnectorSegment;
+    index: number;
+    buttons: Array<StraightEditorHandleElement>;
+    originalLocation: PointXY;
+    midPoint: PointXY;
+}
+/**
+ * @internal
+ */
+export interface StraightEditorHandleElement extends BaseEdgeEditorHandleElement<StraightSegmentEditorInfo> {
+    _vjsDragHandle: StraightSegmentEditorInfo;
+}

package/types/browser-ui/connector-editors-straight/index.d.ts

@@ -0,0 +1,11 @@
+export * from './definitions';
+export * from './css-constants';
+export * from './straight-editor';
+export * from './click-split-mode';
+/**
+ * Register the editor with the connector editors modules. It is not necessary for
+ * library users to manually call this method.
+ * @group Factory Methods
+ * @internal
+ */
+export declare function initializeStraightConnectorEditors(): void;

package/types/browser-ui/connector-editors-straight/straight-editor.d.ts

@@ -0,0 +1,42 @@
+import { EditorBase } from "../connector-editors";
+import { Group, Node, PointXY } from "../../core";
+import { InternalStraightConnectorGeometry, StraightConnector, StraightConnectorSegment, Connection } from "../../ui";
+import { BrowserUI } from "../browser-visuallyjs-instance";
+import { BrowserElement } from "../util";
+import { StraightConnectorEditorOptions, StraightSegmentEditorInfo } from "./definitions";
+/**
+ * Path editor for Straight connectors.
+ * @group Edges
+ * @category Path Editors
+ */
+export declare class StraightEditor extends EditorBase<StraightConnector> {
+    private $mode;
+    private $showGuidelines;
+    static type: string;
+    geometry: InternalStraightConnectorGeometry;
+    segments: Array<StraightConnectorSegment>;
+    segmentHandles: Array<StraightSegmentEditorInfo>;
+    guideLine: SVGElement;
+    $supportsHoverMode: boolean;
+    $split(segmentIndex: number, atPoint: PointXY): void;
+    $deleteSegment(segmentInfo: StraightSegmentEditorInfo): void;
+    constructor(ui: BrowserUI, params: StraightConnectorEditorOptions);
+    /**
+     * Called by the superclass upon activation.
+     * @param conn
+     * @param params
+     * @private
+     */
+    $activate(conn: Connection<BrowserElement>, params?: any): void;
+    /**
+     * Removed all the handles, and the guideline, if drawn.
+     * @param excludeIndex
+     * @private
+     */
+    $clearHandles(excludeIndex?: number): void;
+    $elementDragged(vertex: Node | Group): void;
+    $elementDragging(vertex: Node | Group): void;
+    $repaint(args?: any): void;
+    private _maybeDrawGuideline;
+    deactivate(e?: Event): void;
+}

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

@@ -0,0 +1,79 @@
+/**
+ * @internal
+ */
+export declare const ATTRIBUTE_CONTAINER = "data-vjs-container";
+/**
+ * This attribute tells VisuallyJs that the given element is the element inside which the children of a group should be drawn.
+ * @group Nodes and Groups
+ * @category DOM Attributes
+ */
+export declare const ATTRIBUTE_GROUP_CONTENT = "data-vjs-group-content";
+/**
+ * Written onto the part of a group that represents its expanded content, when the group has declared a separate collapsedTemplate.
+ * @internal.
+ */
+export declare const ATTRIBUTE_GROUP_EXPANDED_CONTENT = "data-vjs-expanded-content";
+/**
+ * Written onto the part of a group that represents its collapsed content, when the group has declared a separate collapsedTemplate.
+ * @internal.
+ */
+export declare const ATTRIBUTE_GROUP_COLLAPSED_CONTENT = "data-vjs-collapsed-content";
+/**
+ * Specifies whether or not some drag source/target is enabled.
+ * @group Nodes and Groups
+ * @category DOM Attributes
+ */
+export declare const ATTRIBUTE_VJS_ENABLED = "data-vjs-enabled";
+/**
+ * Specifies the value for 'scope' for an edge dragged from some element. Edges will only be able to be dragged to target elements
+ * that have the same value for `data-vjs-scope`.
+ * @group Nodes and Groups
+ * @category DOM Attributes
+ */
+export declare const ATTRIBUTE_VJS_SCOPE = "data-vjs-scope";
+/**
+ * Used by the palette to indicate that some element, when dragged, represents a Group.
+ * @group Nodes and Groups
+ * @category DOM Attributes
+ */
+export declare const ATTRIBUTE_IS_GROUP = "data-vjs-is-group";
+/**
+ * @internal
+ */
+export declare const ENDPOINT = "endpoint";
+/**
+ * @internal
+ */
+export declare const ELEMENT = "element";
+/**
+ * @internal
+ */
+export declare const CONNECTION = "connection";
+/**
+ * @internal
+ */
+export declare const ELEMENT_DIV = "div";
+/**
+ * @internal
+ */
+export declare const PROPERTY_POSITION = "position";
+/**
+ * @internal
+ */
+export declare const SELECTOR_CONNECTOR: string;
+/**
+ * @internal
+ */
+export declare const SELECTOR_GROUP: string;
+/**
+ * @internal
+ */
+export declare const SELECTOR_GROUP_CONTAINER: string;
+/**
+ * @internal
+ */
+export declare const SELECTOR_OVERLAY: string;
+/**
+ * @internal
+ */
+export declare const SELECTOR_TOGGLE_GROUP_COLLAPSE: string;

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

@@ -0,0 +1,34 @@
+import { EdgeGeometryTransformer } from './transformer';
+import { BrowserUI } from "../browser-visuallyjs-instance";
+import { ClonedSet, CopyDataTransformer, PasteOptions, Clipboard } from "../../ui";
+/**
+ * Extension of paste options for use in a browser.
+ * @group Components
+ * @category Copy/paste
+ */
+export interface BrowserUIPasteOptions extends PasteOptions {
+    /**
+     * Mouse event to use as the location for a paste.
+     */
+    event?: MouseEvent;
+}
+/**
+ * A clipboard to use with a BrowserUI widget, offering methods to copy data and to paste it.
+ * @group Components
+ * @category Copy/paste
+ */
+export declare class BrowserUIClipboard extends Clipboard {
+    private ui;
+    transformer: EdgeGeometryTransformer;
+    constructor(ui: BrowserUI);
+    /**
+     * @internal
+     */
+    $getCopyDataTransformer(): CopyDataTransformer;
+    /**
+     * Paste the clipboard's most recent entry, optionally removing it from the clipboard afterwards.
+     * @param options - Options for the paste.
+     *
+     */
+    paste(options?: BrowserUIPasteOptions): ClonedSet;
+}

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

@@ -0,0 +1,2 @@
+export * from './clipboard';
+export * from './transformer';

package/types/browser-ui/copy-paste/transformer.d.ts

@@ -0,0 +1,14 @@
+import { CopyDataTransformer } from "../../ui";
+import { Geometry, RectangleXY, Edge, Vertex } from "../../core";
+import { BrowserUI } from "../browser-visuallyjs-instance";
+/**
+ * Default implementation of copy data transformer: supports transforming edge geometry, and supports retrieval
+ * of vertex coordinates (relative to canvas root or to the vertex's parent)
+ * @internal
+ */
+export declare class EdgeGeometryTransformer implements CopyDataTransformer {
+    ui: BrowserUI;
+    constructor(ui: BrowserUI);
+    transformGeometry(edge: Edge, dx: number, dy: number): Geometry;
+    getCoordinates(vertex: Vertex, relativeToCanvasRoot?: boolean): RectangleXY;
+}