@visuallyjs/browser-ui 1.0.0

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

@@ -0,0 +1,149 @@
+/**
+ * Assigned to the SVG element that is the parent of the path element used to draw an edge. A common setup using this class is to assign it a z-index which is lower than the z-index set for `.vjs-node` and `.vjs-group`.
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context edges
+ */
+export declare const CLASS_CONNECTOR = "vjs-connector";
+/**
+ * Assigned to the SVG path element used to draw an edge. You can use this, for instance, for setting a `stroke-width` or `stroke`, but note that styling edges with CSS is not compatible with generating output via an SVG/PNG/JPG exporter.
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context edges
+ */
+export declare const CLASS_CONNECTOR_PATH = "vjs-connector-path";
+/**
+ * Assigned to the SVG path element used to draw an edge's outline.
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context edges
+ */
+export declare const CLASS_CONNECTOR_OUTLINE = "vjs-connector-outline";
+/**
+ * Assigned to the connector for a new edge that is being dragged.
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context edges
+ */
+export declare const CLASS_CONNECTOR_TRANSIENT = "vjs-connector-transient";
+/**
+ * Assigned to node/group/port element when the vertex it represents has one or more edges attached.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context nodes,groups
+ */
+export declare const CLASS_CONNECTED = "vjs-connected";
+/**
+ * Assigned to a group element when the group is collapsed.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context surface,paper,groups
+ */
+export declare const CLASS_GROUP_COLLAPSED = "vjs-group-collapsed";
+/**
+ * Assigned to a group element when the group is not collapsed.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context surface,paper,groups
+ */
+export declare const CLASS_GROUP_EXPANDED = "vjs-group-expanded";
+/**
+ * You can put this class on an element inside a group template, and VisuallyJs will listen for tap events on it, toggling the group's collapsed state in response
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context surface,paper,groups
+ */
+export declare const CLASS_TOGGLE_GROUP_COLLAPSE = "vjs-toggle-group-collapse";
+/**
+ * Assigned to all overlay elements
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context overlays
+ */
+export declare const CLASS_OVERLAY = "vjs-overlay";
+/**
+ * Assigned to an overlay this is currently hidden
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context overlays
+ */
+export declare const CLASS_OVERLAY_HIDE = "vjs-overlay-hide";
+/**
+ * Assigned to all label overlay elements
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context overlays
+ */
+export declare const CLASS_LABEL_OVERLAY = "vjs-label-overlay";
+/**
+ * Assigned by the UI to an element that represents a node.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context vertices
+ */
+export declare const CLASS_NODE = "vjs-node";
+/**
+ * Assigned by the UI to an element that represents a port.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context vertices
+ */
+export declare const CLASS_PORT = "vjs-port";
+/**
+ * Assigned by the UI to an element that represents a group.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context vertices, groups
+ */
+export declare const CLASS_GROUP = "vjs-group";
+/**
+ * Assigned by the UI to an element that represents a dummy vertex (such as is used for a edge with source and/or target that is not attached to a vertex)
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context nodes-and-groups
+ */
+export declare const CLASS_DUMMY_VERTEX = "vjs-dummy-vertex";
+/**
+ * Assigned by the UI to an element representing an edge in the model's current selection.
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context edges
+ */
+export declare const CLASS_UI_SELECTED_CONNECTION = "vjs-selected-connection";
+/**
+ * Assigned by the UI to an element representing a vertex in the model's current selection.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context nodes-and-groups
+ */
+export declare const CLASS_UI_SELECTED_ELEMENT = "vjs-selected-element";
+/**
+ * Assigned to the optional delete button overlay that the edge path editor can add
+ * @group Edges
+ * @category CSS Classes
+ * @cssClass
+ * @context edges
+ */
+export declare const CLASS_EDGE_DELETE_BUTTON = "vjs-edge-delete";
+/**
+ * Written by the UI when an edge def requests a deleteButton.
+ * @internal
+ */
+export declare const CLASS_EDGE_DELETE_BUTTON_INTERNAL = "vjs-edge-delete-i";

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

@@ -0,0 +1,242 @@
+import { AnchorSpec, OverlaySpec, PaintStyle, ConnectorSpec } from "../common";
+import { ConnectionEstablishedParams } from "./callbacks";
+import { ViewSpec } from "./view";
+import { Base, Size, LayoutSpec, Group, ObjectData } from "../../core";
+import { GridOptions } from "./grid-profile";
+import { MagnetizeOptions } from "./magnetize-profile";
+import { UIPluginSpec } from "../plugins";
+/**
+ * Default key used to instruct VisuallyJs whether or not nested groups are allowed. Defaults to true.
+ * @group Nodes and Groups
+ * @category Constants
+ */
+export declare const DEFAULT_KEY_ALLOW_NESTED_GROUPS = "allowNestedGroups";
+/**
+ * Default key used to define the default anchor to use on the source and target of connections. You can use the name of an anchor here as a string,
+ * or an entry from {@link AnchorLocations}, or an {@link AnchorSpec}.
+ * @group Edges
+ * @category Constants
+ */
+export declare const DEFAULT_KEY_ANCHOR = "anchor";
+/**
+ * Default key used to define the default anchors to use for the source and target of connections. The value you provide for this key should be an array
+ * containing the source anchor at index 0 and the target anchor at index 1.
+ * @group Edges
+ * @category Constants
+ */
+export declare const DEFAULT_KEY_ANCHORS = "anchors";
+/** @internal */
+export declare const DEFAULT_KEY_ASTAR_GRID_CELL_SIZE = "astarGridCellSize";
+/** @internal */
+export declare const DEFAULT_KEY_ASTAR_VERTEX_BORDER = "astarVertexBorder";
+/** @internal */
+export declare const DEFAULT_KEY_ASTAR_VERTEX_BUFFER = "astarVertexBuffer";
+/** @internal */
+export declare const DEFAULT_KEY_OVERLAYS = "overlays";
+/**
+ * Default key used to instruct the UI whether or not connections should be detachable via mouse/touch events. Defaults to true.
+ * @group Edges
+ * @category Constants
+ */
+export declare const DEFAULT_KEY_EDGES_DETACHABLE = "edgesDetachable";
+/**
+ * Default key used to define the default connector to use to represent edges. This may be the name of a connector, or a spec in
+ * {@link ConnectorSpec} format.
+ * @group Edges
+ * @category Constants
+ */
+export declare const DEFAULT_KEY_CONNECTOR = "connector";
+export declare const DEFAULT_KEY_CSS_CLASS = "cssClass";
+export declare const DEFAULT_KEY_EDGE_RELOCATE_HANDLE_SIZE = "edgeRelocateHandleSize";
+export declare const DEFAULT_KEY_ENSURE_ANCHORS_IN_WHITESPACE = "ensureAnchorsInWhitespace";
+/**
+ * When `useModelForSizes` is set on a Surface, this key can be used to define the default size for groups.
+ * @group Nodes and Groups
+ * @category Constants
+ */
+export declare const DEFAULT_KEY_GROUP_SIZE = "groupSize";
+export declare const DEFAULT_KEY_HOVER_CLASS = "hoverClass";
+export declare const DEFAULT_KEY_HOVER_PAINT_STYLE = "hoverPaintStyle";
+export declare const DEFAULT_KEY_MAX_CONNECTIONS = "maxConnections";
+/**
+ * When `useModelForSizes` is set on a Surface, this key can be used to define the default size for nodes.
+ * @group Nodes and Groups
+ * @category Constants
+ */
+export declare const DEFAULT_KEY_NODE_SIZE = "nodeSize";
+export declare const DEFAULT_KEY_PAINT_STYLE = "paintStyle";
+/**
+ * Default key used to instruct the UI to reattach edges that a user has detached via mouse/touch and dropped in whitespace.
+ * @group Edges
+ * @category Constants
+ */
+export declare const DEFAULT_KEY_REATTACH_EDGES = "reattachEdges";
+/**
+ * Default key used to define the default scope to use for edges. Scope is used when dragging new edges as a means of determining what can be connected to what. You can override scope in individual port/node definitions.
+ * @group Edges
+ * @category Constants
+ */
+export declare const DEFAULT_KEY_SCOPE = "scope";
+export interface UIEdgeOptions {
+    /**
+     * Defaults to true. Instructs the Surface to automatically extract `color`, `lineWidth`, `outlineWidth`, `outlineColor`, and `dashArray` values from the backing data for edges, and to use these to set the appearance of a connection for that edge.
+     */
+    simpleEdgeStyles?: boolean;
+    /**
+     * Defaults to false. When true, dragging either the source or target of some edge that has edits will cause those edits to be discarded. When false - the default value - Visually JS attempts to retain as many of the edits as possible while still catering for the fact that the source or target has moved.
+     */
+    discardEditsOnDrag?: boolean;
+    /**
+     * If true, edges will attempt to avoid vertices.
+     */
+    avoidVertices?: boolean;
+    /**
+     * Size of each cell in the grid that the AStar routine uses to calculate paths that avoid vertices. This defaults to 10 pixels and is not something you'll really need to change. If you do change it, keep in mind that a) a smaller grid size increases the runtime of the routine, and b) a large grid size will render the UI unusable.
+     */
+    astarGridCellSize?: number;
+    /**
+     * Number of cells to pad each vertex with that act as its border: edges will be routed around the border wherever possible. Defaults to 2
+     *
+     */
+    astarVertexBorder?: number;
+    /**
+     * Number of cells to pad each vertex with that act as its buffer: edges will be routed around the buffer wherever possible. Defaults to 2 - but note this value is added the vertex border, whose default is 2, so the computed default is 4 grid cells.
+     *
+     */
+    astarVertexBuffer?: number;
+    /**
+     * Whether or not to allow edges whose source and/or target is not connected to a vertex but is anchored to some point on the canvas. If you need more fine-grained control (such as some edge types should support this and others should not), use the `allowUnattached` flag of an edge type. Defaults to false.
+     */
+    allowUnattached?: boolean;
+    /**
+     * Whether or not edges should be detachable via pointer/touch events by default. The default value for this is true. This behaviour can be overridden by individual edge type definitions.
+     */
+    detachable?: boolean;
+    /**
+     * Whether or not edges that have been detached from their source or target via pointer/touch events should be reattached if they are dropped into whitespace. The default value for this is false: edges dropped in whitespace are discarded. This behaviour can be overridden in individual edge type definitions.
+     */
+    reattach?: boolean;
+    /**
+     * Default connector to use for edges. This will be used in the event that VisuallyJs does not find a connector spec for a given edge in its type definition.
+     */
+    connector?: ConnectorSpec;
+    /**
+     * Default anchor to use for both source and target of edges.
+     */
+    anchor?: AnchorSpec;
+    /**
+     * Anchors to use as source, target of edges. This will take precedence over `anchor`.
+     */
+    anchors?: [AnchorSpec, AnchorSpec];
+    /**
+     * Default overlays to draw on each edge.
+     */
+    overlays?: Array<OverlaySpec>;
+    /**
+     * Shorthand for adding an overlay at location 0, with direction set to -1.
+     */
+    sourceMarker?: OverlaySpec;
+    /**
+     * Shorthand for adding an overlay at location 1
+     */
+    targetMarker?: OverlaySpec;
+    /**
+     * Defaults to true. Paints an outline path behind the path drawn for an edge, which makes it easier for users to interact with the element on the canvas. The default width of the outline is specified by the `outlineWidth` setting.
+     */
+    paintOutline?: boolean;
+    /**
+     * Default width to paint the outline path behind edge paths. Defaults to 20 pixels. Can be overridden on a per-edge basis via the `outlineWidth` setting.
+     */
+    outlineWidth?: number;
+    /**
+     * The default color to paint a connector's outline path. Defaults to `"transparent"`. Can be overridden on a per-edge basis via the `outlineColor` setting.
+     */
+    outlineColor?: string;
+}
+/**
+ * Base options for a renderer.
+ * @group Components
+ */
+export interface UICoreOptions<E, O extends UICoreDefaults<E>> {
+    id?: string;
+    /**
+     * Optional list of plugins to attach to the UI.
+     */
+    plugins?: Array<UIPluginSpec<any>>;
+    /**
+     * Optional default settings
+     */
+    defaults?: O;
+    view?: ViewSpec<E>;
+    connectionEstablished?: (payload: ConnectionEstablishedParams) => void;
+    grid?: GridOptions;
+    logicalPorts?: boolean;
+    objectFilter?: (b: Base) => boolean;
+    magnetizer?: MagnetizeOptions;
+    layout?: LayoutSpec;
+    refreshLayoutOnEdgeConnect?: boolean;
+    /**
+     * Default options for edges - these will apply to all edge types in the UI.
+     */
+    edges?: UIEdgeOptions;
+    /**
+     * Defaults to false. When true, newly created nodes are sized according to values in their backing data, using the modelWidthAttribute and modelHeightAttribute as keys. NOTE: when this flag is set, VisuallyJs will write the size onto each element as it is created. Depending on your app, you may not need it to do this - if you know your node sizes are set via css, for instance, or you know the template rendering your vertices writes out the size in an element's style or an SVG element's width/height. If that is the case, you can set {@link writeSizeToElements} to be false, and you'll get a performance boost.
+     */
+    useModelForSizes?: boolean;
+    /**
+     * When {@link useModelForSizes} is true, VisuallyJs will write out the model size onto each element rendered. But if you know your node sizes are set via css, or you know the template rendering your vertices writes out the size in an element's style or an SVG element's width/height, you can instruct VisuallyJs not to bother writing out the size to the element itself, by setting this flag to true (the default is false). This can provide a performance boost.
+     */
+    writeSizeToElements?: boolean;
+    /**
+     * Defaults to true - we get positions for elements from our layout. In some use cases you may wish to use element positions retrieved from the DOM.
+     */
+    useModelForPositions?: boolean;
+    /**
+     * If true, zoom the display so that the dataset is entirely visible after initialisation.
+     */
+    zoomToFit?: boolean;
+    /**
+     * If true, zoom the display so that the dataset is entirely visible after initialisation, but only adjust the zoom level if the dataset is not already visible at the default zoom level.
+     */
+    zoomToFitIfNecessary?: boolean;
+    /**
+     * Optional function to determine the size of a collapsed group. This is given precedence over any default
+     * or per-type specification for a collapsed group's size.
+     * @param group - The group that is being collapsed.
+     * @returns The size for the collapsed group.
+     */
+    getCollapsedGroupSize?: (group: Group, currentSize: Size) => Size;
+    canCollapseGroup?: (group: Group, currentSize: Size) => boolean | ObjectData;
+    canExpandGroup?: (group: Group, currentSize: Size) => boolean | ObjectData;
+    /**
+     * Optional default size for a collapsed group. Defaults to 200x150.
+     */
+    defaultCollapsedGroupSize?: Size;
+}
+/** @internal */
+export declare const DEFAULT_ZOOM_RANGE: [number, number];
+/**
+ * Defaults for a UI instance.
+ * @group Components
+ * @category Defaults
+ */
+export interface UICoreDefaults<E> {
+    /**
+     * Default style to use to paint edges.
+     */
+    paintStyle?: PaintStyle;
+    /**
+     * Default style to use to paint edges when mouse is hovering over them.
+     */
+    hoverPaintStyle?: PaintStyle;
+    scope?: string;
+    maxConnections?: number;
+    hoverClass?: string;
+    allowNestedGroups?: boolean;
+    nodeSize?: Size;
+    groupSize?: Size;
+    /**
+     * Width/height of the SVG element with which a user can drag to relocate the source or target of some edge. Defaults to 20.
+     */
+    edgeRelocateHandleSize?: number;
+}