@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/shape-library/shape-library-definitions.d.ts

@@ -0,0 +1,243 @@
+import { Size, Group, Node, ObjectData, AbstractEntry, CustomTagOptions } from "../../core";
+import { BrowserElement } from "../util";
+import { IconDefinition } from "../icons";
+import { FontSpec } from "../definitions";
+/**
+ * Default fill/stroke/text color for items in ShapeLibrary.
+ * @internal
+ */
+export declare const ShapeLibraryDefaults: {
+    FILL: string;
+    STROKE: string;
+    TEXT_COLOR: string;
+    STROKE_WIDTH: number;
+};
+/**
+ * The object type for some shape - a node or a group.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export type ShapeObjectType = typeof Group.objectType | typeof Node.objectType;
+/**
+ * Defines a shape type. If you wish to supply custom shape types you should extend this interface.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export interface ShapeType {
+    /**
+     * The shape's type.
+     */
+    type: string;
+    /**
+     * Template representing the shape
+     */
+    template: string;
+    /**
+     * Template representing the shape when it is collapsed - only relevant when objectType is Group
+     */
+    collapsedTemplate?: string;
+    /**
+     * Label to use for the shape type when displayed in a palette
+     */
+    label?: string;
+    /**
+     * Can be shown in a palette to give a user more information about a shape
+     */
+    description?: string;
+    square?: boolean;
+    /**
+     * Defaults to `Node.objectType`. Indicates the object type - Node or Group - to create in the UI when a shape of this type is dragged.
+     */
+    objectType?: ShapeObjectType;
+    /**
+     * Initial size for this specific shape. If not provided defaults will be used.
+     */
+    initialSize?: Size;
+    /**
+     * Size for this shape when it is collapsed - only relevant when objectType is Group.
+     */
+    collapsedSize?: Size;
+    /**
+     * Optional initial payload to set on model objects that are dragged from a palette onto the canvas.
+     */
+    payload?: ObjectData;
+    /**
+     * Optional shape-specific settings for font. This will override library wide font settings.
+     */
+    font?: FontSpec;
+    /**
+     * Optional data to use when showing a preview of this shape - some shapes, such as Labels, will not display anything unless provided with a dataset. This config lets you provide the data that will be used when rendering a preview of the shape, for instance in a palette, or when drawing via the vertex drawing plugin.
+     */
+    previewData?: ObjectData;
+    /**
+     * Optional icon to use in the shape palette instead of rendering the template.
+     */
+    icon?: string;
+    /**
+     * A list of configurable properties exposed by this shape's template.
+     * An inspector can read this array to automatically generate an editing UI.
+     */
+    properties?: Array<ShapePropertyDefinition>;
+    /**
+     * If true, instructs the inspector to merge this ShapeType's properties onto any defined by its ShapeSet.
+     */
+    mergeProperties?: boolean;
+    /**
+     * Where to place the label for this type. Most shapes default to center but sometimes you might want to specify where a particular shape's label should be.
+     */
+    labelPosition?: LabelPosition;
+    /**
+     * optional name of the group to which the shape belongs.
+     */
+    group?: string;
+}
+/**
+ * Start placement for shape icon - in x axis this means the left; in y axis it means the top.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export declare const ICON_ORIGIN_START = "start";
+/**
+ * Center placement for shape icon, x and y axis
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export declare const ICON_ORIGIN_CENTER = "center";
+/**
+ * End placement for shape icon - in x axis this means the right; in y axis it means the bottom.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export declare const ICON_ORIGIN_END = "end";
+/**
+ * Possible values for shape icon placement, x axis and y axis
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export type IconOrigin = typeof ICON_ORIGIN_START | typeof ICON_ORIGIN_CENTER | typeof ICON_ORIGIN_END;
+/**
+ * Defines a set of shapes. This is the interface you should extend if you wish to supply custom shape sets to the widget.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export interface ShapeSet {
+    id: string;
+    name: string;
+    shapes: Array<ShapeType>;
+    icons?: Array<IconDefinition>;
+    defs?: Record<string, string>;
+    children?: Array<ShapeSet>;
+    /**
+     * A list of configurable properties exposed by shapes in this set.
+     */
+    properties?: Array<ShapePropertyDefinition>;
+}
+/**
+ * @internal
+ */
+export interface RenderedShapeSet extends ShapeSet {
+    children: Array<RenderedShapeSet>;
+    parent?: string;
+}
+/**
+ * Defines a library that acts as a factory for shapes.
+ * @internal
+ */
+export interface ShapeLibrary<T extends ObjectData> {
+    $getShapeDefinitionForObject(o: ObjectData, typeParameter?: string, categoryParameter?: string): ShapeType;
+    getShapeDefinition(type: string, set?: string): ShapeType;
+    renderCompiledShape(data: T, strokeWidth?: number): BrowserElement;
+    renderShapeLabel(data: ObjectData, labelProperty: string, strokeWidth: string, label: string, fill: string, stroke: string, font: FontSpec): SVGTextElement;
+    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string): CustomTagOptions;
+    getShapeSet(id: string): RenderedShapeSet;
+    rootSet: RenderedShapeSet;
+    getDefsElements(): Array<Element>;
+    getSvgDefsElement(): SVGElement;
+    parseDefs(): Array<Array<AbstractEntry>>;
+    useMultilineLabels(): boolean;
+    $applyMultilineLabel(el: Element, data: ObjectData, labelAttribute: string): void;
+    typeParameter: string;
+    categoryParameter: string;
+    defaultCategoryId: string;
+    /**
+     * Refreshes the given element by rendering any icons and applying multiline labels.
+     * @param el The element to refresh.
+     * @param data The data associated with the element.
+     * @param labelAttribute The attribute to use for the label.
+     */
+    refresh(el: BrowserElement, data: T, labelAttribute?: string): void;
+}
+/**
+ * Defines a function that can take a vertex's data object and return a document fragment with it rendered.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export type ShapeGeneratorFunction = (data: ObjectData) => DocumentFragment;
+/**
+ * Name of the default shape set
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export declare const DEFAULT_SET_NAME = "Default";
+/**
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export declare const DEFAULT_SET_DESCRIPTION = "Default shapes";
+/**
+ * The HTML element used for the SVG shape element.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export declare const TAG_SHAPE = "vjs-shape";
+/**
+ * This class is assigned to svg text elements serving as shape labels.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context shape-library
+ */
+export declare const CLASS_SHAPE_LABEL = "vjs-shape-label";
+/**
+ * This class is assigned to the parent SVG elements for shapes.
+ * @group Nodes and Groups
+ * @category CSS Classes
+ * @cssClass
+ * @context shape-library
+ */
+export declare const CLASS_SHAPE = "vjs-shape";
+/**
+ * Supported data types for shape properties.
+ */
+export type ShapePropertyType = "string" | "number" | "boolean" | "color" | "font";
+/**
+ * Defines a single configurable property exposed by a shape.
+ */
+export interface ShapePropertyDefinition {
+    /**
+     * The internal variable name used in the template (e.g., "backgroundColor", "width").
+     */
+    id: string;
+    /**
+     * The human-readable name to display in the inspector UI (e.g., "Background Color").
+     */
+    label: string;
+    /**
+     * The data type of the property, telling the inspector which UI control to render.
+     */
+    type: ShapePropertyType;
+    /**
+     * The default value for this property if it hasn't been explicitly set.
+     */
+    defaultValue?: any;
+    /**
+     * Optional description or tooltip to help the user understand what this property does.
+     */
+    description?: string;
+    /**
+     * For "number" types, optional min/max constraints.
+     */
+    min?: number;
+    max?: number;
+}
+export type LabelPosition = "top" | "bottom" | "center";

package/types/browser-ui/shape-library/shape-library.d.ts

@@ -0,0 +1,266 @@
+import { RenderedShapeSet, ShapeGeneratorFunction, ShapeLibrary, ShapeSet, ShapeType, LabelPosition } from "./shape-library-definitions";
+import { BrowserElement } from "../util";
+import { CustomTagOptions, Recado, AbstractEntry, ObjectData } from "../../core";
+import { IconDefinition } from "../icons";
+import { FontSpec } from "../definitions";
+export declare const ATTRIBUTE_ORIGIN = "origin";
+export declare const ATTRIBUTE_ORIGIN_X = "originX";
+export declare const ATTRIBUTE_ORIGIN_Y = "originY";
+export declare const ATTRIBUTE_ORIENTATION = "orientation";
+export declare const ATTRIBUTE_ICON_SIZE = "size";
+export declare const ATTRIBUTE_ICON_KEY = "key";
+export declare const ATTRIBUTE_ICON_ID = "iconId";
+/**
+ * Indicates that the icons in a `vjs-incude-icons` element should be arranged in a horizontal line - this is the default.
+ */
+export declare const ICONS_ORIENTATION_HORIZONTAL = "horizontal";
+/**
+ * Indicates that the icons in a `vjs-include-icons` element should be arranged in a vertical line.
+ */
+export declare const ICONS_ORIENTATION_VERTICAL = "vertical";
+/**
+ * This class is assigned to SVG elements serving as icons  (via `vjs-icon` or `vjs-icons` in a shape template)
+ * @cssClass
+ * @context shape-library, shape-icon
+ */
+export declare const CLASS_SHAPE_ICON = "vjs-shape-icon";
+/**
+ * Tag identifying an icon inclusion in a shape template.
+ */
+export declare const ELEMENT_INCLUDE_ICON = "vjs-include-icon";
+/**
+ * Tag identifying a set of icon inclusions in a shape template.
+ */
+export declare const ELEMENT_INCLUDE_ICONS = "vjs-include-icons";
+/**
+ * @internal
+ */
+export declare const ROOT_SHAPE_SET = "__vjsRootSet";
+/**
+ * The default property name containing a vertex's label
+ * @internal
+ */
+export declare const DEFAULT_LABEL_PROPERTY = "label";
+/**
+ * The default property containing a vertex's fill color
+ * @internal
+ */
+export declare const DEFAULT_FILL_PROPERTY = "fill";
+/**
+ * The default property containing a vertex's outline color
+ * @internal
+ */
+export declare const DEFAULT_OUTLINE_PROPERTY = "outline";
+/**
+ * The default property containing a vertex's outline width color
+ * @internal
+ */
+export declare const DEFAULT_OUTLINE_WIDTH_PROPERTY = "outlineWidth";
+/**
+ * The default property containing a vertex's label color
+ * @internal
+ */
+export declare const DEFAULT_COLOR_PROPERTY = "color";
+/**
+ * Default fill color
+ * @internal
+ */
+export declare const DEFAULT_FILL_COLOR = "#FFFFFF";
+/**
+ * Default outline color
+ * @internal
+ */
+export declare const DEFAULT_OUTLINE_COLOR = "#000000";
+/**
+ * Default outline width
+ * @internal
+ */
+export declare const DEFAULT_OUTLINE_WIDTH = 2;
+/**
+ * Default label color
+ * @internal
+ */
+export declare const DEFAULT_COLOR = "#000000";
+/**
+ * For multiline labels, the proportion of the width of the shape that the longest line can take up.
+ * @internal
+ */
+export declare const DEFAULT_LABEL_FILL_RATIO = 0.8;
+/**
+ * Options for a shape library.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export interface ShapeLibraryOptions {
+    /**
+     * The property to use to map an object's type. Defaults to "type".
+     */
+    typeParameter?: string;
+    /**
+     * The property to use to map an object's category (ie which shape set to use). Defaults to "category".
+     */
+    categoryParameter?: string;
+    /**
+     * Defaults to true - labels are split across multiple lines to fit inside their shape. Set this to false if you want labels to always be a single line.
+     */
+    multilineLabels?: boolean;
+    /**
+     * How much of the width of a shape a multiline label will take up before wrapping. Defaults to 0.8. You can set this to a number greater than 1, if you like, but that will allow the label to overflow.
+     */
+    labelFillRatio?: number;
+    /**
+     * Default position for labels (will be overridden by a shape that defines its own position. Defaults to "center"
+     */
+    labelPosition?: LabelPosition;
+    /**
+     * Optional default for fill color. If not provided, fill is set to #FFFFFF.
+     */
+    defaultFillColor?: string;
+    /**
+     * Optional default for outline color. If not provided, outline is set to #000000.
+     */
+    defaultOutlineColor?: string;
+}
+/**
+ * Default ShapeLibrary implementation. Use one of these to manage a set of shapes for rendering into your vertices and/or for rendering as a palette from which the user can drag new objects.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibrary<T> {
+    compiledShapes: Map<string, ShapeGeneratorFunction>;
+    templateRenderer: Recado;
+    shapeSets: Map<string, RenderedShapeSet>;
+    defaultCategoryId: string;
+    private labelPosition;
+    rootSet: RenderedShapeSet;
+    iconContainerTemplate: string;
+    iconContainerAst: Array<AbstractEntry>;
+    /**
+     * map of icons specs. the keys of this map are set IDs. The values are maps of icon ids to icon definitions.
+     * @internal
+     */
+    iconSpecs: Map<string, Map<string, IconDefinition>>;
+    /**
+     * Also we keep a list of all icons defs, but here we've stripped the category out. we use this in the event that some data doesn't have a category. then it's a lucky dip. the user gets the first icon with a matching id.
+     * @internal
+     */
+    iconList: Array<IconDefinition>;
+    typeParameter: string;
+    categoryParameter: string;
+    /**
+     * @internal
+     */
+    private readonly multilineLabels;
+    private readonly labelFillRatio;
+    /**
+     * @internal
+     */
+    useMultilineLabels(): boolean;
+    /**
+     * ShapeLibrary constructor.
+     * @param shapeSets One or more shape sets to include in the library.
+     * @param options Options for the library.
+     */
+    constructor(shapeSets: ShapeSet | Array<ShapeSet>, options?: ShapeLibraryOptions);
+    /**
+     * Renders any icons found and applies multiline labels, if necessary.
+     * @param el
+     * @param data
+     * @param labelAttribute
+     */
+    refresh(el: BrowserElement, data: ObjectData, labelAttribute?: string): void;
+    private _processShapeSets;
+    getShapeSet(id: string): RenderedShapeSet;
+    /**
+     * Gets the definition for some combination of type and category. May return null.
+     * @param type
+     * @param set
+     */
+    getShapeDefinition(type: string, set?: string): ShapeType;
+    /**
+     * Gets the definition for some data object, using the default type/category parameters, or specific ones that you supply. May return null.
+     * @internal
+     */
+    $getShapeDefinitionForObject(o: ObjectData, typeParameter?: string, categoryParameter?: string): ShapeType;
+    /**
+     * Gets the template for the given shape type in the given set. If no template is resolved then we return
+     * DEFAULT_TEMPLATE (and log the issue to the console).
+     * @param type Shape type
+     * @param set Name of set. If not provided, the value of `DEFAULT_SET` is used as the set name.
+     */
+    getShapeTemplate(type: string, set: string): string;
+    /**
+     * Gets a compiled version of the given shape, creating and caching it if it does not already exist.
+     * @param type Shape type.
+     * @param category Category to use. Defaults to the ID of the first category provided in the shape list.
+     */
+    getCompiledShape(type: string, category?: string): ShapeGeneratorFunction;
+    /**
+     * TODO would this be better done via css?  or would that br a problem for headless scenarios?
+     * @param el
+     * @private
+     */
+    private _applyVectorEffect;
+    /**
+     * Render the given data with the appropriate template. A `fill` value is set on the resulting element, and the `vector-effect` attribute is set to 'non scaling stroke', ie. when the shape is scaled due to the element dimensions differing from the viewbox, the stroke does not change.
+     * @param data
+     * @param strokeWidth Stroke width to use. This is passed to the underlying template and is taken into account by the shape template (or at least, it should be, because it has a bearing on the quality of the result)
+     * @param typeParameter Optional key to use to look up an object's type. When not provided, the `typeParameter` from the class is used.
+     * @param categoryParameter Optional key to use to look up an object's category. When not provided, the `categoryParameter` from the class is used.
+     */
+    renderCompiledShape(data: ObjectData, strokeWidth?: number, typeParameter?: string, categoryParameter?: string): HTMLElement | SVGElement;
+    /**
+     * Render a label element for the given data - an SVG text element. Used by library integrations.
+     * @param data Data to extract label from
+     * @param labelProperty Name of the property that provides the label. Defaults to "label"
+     * @param strokeWidth Optional stroke width, defaults to `0.25px`
+     * @param label Optional label to use, overrides extracting label from the data.
+     * @internal
+     */
+    renderShapeLabel(data: ObjectData, labelProperty: string, strokeWidth: string, label: string, fill: string, stroke: string, font: FontSpec): SVGTextElement;
+    /**
+     * @internal
+     * @param type
+     * @param category
+     * @return {string}
+     */
+    _shapeKey(type: string, category?: string): string;
+    private _getLabelPositionAttributes;
+    private _shapesToFragments;
+    /**
+     * Returns a tag definition that can be used in a Surface's `tags` declaration. Note that this method returns an object containing the tag's implementation, but not the name of the tag. You can call the tag whatever you like.
+     * @internal
+     */
+    getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string, defaultOutlineWidth?: number): CustomTagOptions;
+    /**
+     * @internal
+     */
+    _defaultTemplate(): string;
+    /**
+     * Resolve an icon by its id and set id. If set id is null we just look for the first icon in our list
+     * from all sets with the given id. May return null.
+     * @param id
+     * @param setId
+     * @internal
+     */
+    private _resolveIcon;
+    /**
+     * Converts text element labels to multiline tspans, if multilineLabels is set to true (which is
+     * the default).
+     * @param labelElement
+     * @param data
+     * @param labelAttribute
+     * @internal
+     */
+    $applyMultilineLabel(labelElement: SVGTextElement, data: ObjectData, labelAttribute: string): void;
+    /**
+     * Check for any icons that were declared and render them.
+     * @param el
+     * @param data
+     * @internal
+     */
+    private _maybeRenderIcons;
+    parseDefs(): Array<Array<AbstractEntry>>;
+    getDefsElements(): Array<Element>;
+    getSvgDefsElement(): SVGElement;
+}

package/types/browser-ui/shape-library/shapes-basic.d.ts

@@ -0,0 +1,7 @@
+import { ShapeSet } from "./shape-library-definitions";
+/**
+ * Shapefile for basic shapes.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export declare const BASIC_SHAPES: ShapeSet;

package/types/browser-ui/shape-library/shapes-flowchart.d.ts

@@ -0,0 +1,7 @@
+import { ShapeSet } from "./shape-library-definitions";
+/**
+ * Shapefile for flowchart shapes.
+ * @group Nodes and Groups
+ * @category Shape Libraries
+ */
+export declare const FLOWCHART_SHAPES: ShapeSet;

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

@@ -0,0 +1,8 @@
+export declare const Storage: {
+    set: (key: string, value: any) => void;
+    get: (key: string) => any;
+    clear: (key: string) => void;
+    clearAll: () => void;
+    setJSON: (key: string, value: any) => void;
+    getJSON: (key: string) => any;
+};

package/types/browser-ui/surface-renderer/anim/anim.d.ts

@@ -0,0 +1,64 @@
+import { PathTransport, PathTransportListener } from './path-transport';
+import { Surface } from "../surface";
+import { Edge, Group, Vertex, Node, Path, OptimisticEventGenerator } from "../../../core";
+import { BrowserElement } from "../../util";
+import { OverlayAnimationOptions } from "./definitions";
+import { OverlaySpec } from "../../../ui";
+/**
+ * Offers several methods for animating parts of a Surface widget
+ * @group Components
+ * @category Surface
+ */
+export declare class SurfaceAnimator extends OptimisticEventGenerator {
+    surface: Surface;
+    constructor(surface: Surface);
+    /**
+     * Animate the given vertex to the given [x,y] location.
+     * @param el
+     * @param x
+     * @param y
+     * @param animateOptions
+     *
+     */
+    animateToPosition(el: Node | Group | string | BrowserElement, x: number, y: number, animateOptions?: {
+        duration?: number;
+        start?: Function;
+        step?: Function;
+        complete?: Function;
+    }): void;
+    /**
+     * Traces an overlay along an edge.
+     * @param params Overlay tracing options
+     * @param params.edge Edge, or edge id, to trace the overlay along
+     * @param params.overlay Definition of the overlay to trace along the edge.
+     *
+     */
+    traceEdge(params: {
+        edge: Edge | string;
+        overlay: OverlaySpec;
+        options?: OverlayAnimationOptions;
+        start?: Function;
+        complete?: Function;
+    }): void;
+    /**
+     * Traces an overlay along a path.
+     * @param params Path tracing options
+     * @param params.path The path to trace. Provide this, or provide `source` and `target`
+     * @param params.overlay Definition of the overlay to trace along the path
+     * @param params.source Source vertex to trace Path from. Provide this and `target`, or `path`.
+     * @param params.target Target vertex to trace Path to. Provide this and `source`, or `path`.
+     * @param params.options Options for the animation.
+     * @param params.paused If true, the animation will start in a paused state.
+     * @param params.listener Optional listener for events.
+     *
+     */
+    tracePath(params: {
+        path?: Path;
+        source?: Vertex | string;
+        target: Vertex | string;
+        options?: OverlayAnimationOptions;
+        overlay: OverlaySpec;
+        paused?: boolean;
+        listener?: PathTransportListener;
+    }): PathTransport;
+}

package/types/browser-ui/surface-renderer/anim/constants.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Fired at the start of an animated path traversal.
+ * @group Paths
+ * @category Events
+ */
+export declare const EVENT_START_OVERLAY_ANIMATION = "startOverlayAnimation";
+/**
+ * Fired at the end of an animated path traversal.
+ * @group Paths
+ * @category Events
+ */
+export declare const EVENT_END_OVERLAY_ANIMATION = "endOverlayAnimation";
+/**
+ * Fired when entering a vertex during a path traversal
+ * @group Paths
+ * @category Events
+ */
+export declare const EVENT_START_NODE_TRAVERSAL = "startNodeTraversal";
+/**
+ * Fired when exiting a vertex during a path traversal
+ * @group Paths
+ * @category Events
+ */
+export declare const EVENT_END_NODE_TRAVERSAL = "endNodeTraversal";
+/**
+ * Assigned to the element that is the source of a path traversal animation.
+ * @group Paths
+ * @category CSS Classes
+ */
+export declare const CLASS_VJS_ANIMATE_SOURCE = "vjs-animate-source";
+/**
+ * Assigned to the element that is the target of a path traversal animation.
+ * @group Paths
+ * @category CSS Classes
+ */
+export declare const CLASS_VJS_ANIMATE_TARGET = "vjs-animate-target";
+/**
+ * Assigned to an element that a path traversal is currently passing through. The class is removed once the path traversal
+ * moves to the next edge, or finishes.
+ * @group Paths
+ * @category CSS Classes
+ */
+export declare const CLASS_VJS_ANIMATE_VERTEX_TRAVERSING = "vjs-animate-node-traversing";
+/**
+ * Assigned to an edge that a path traversal is currently travelling along. The class is removed once the path traversal
+ * moves to the next vertex, or finishes.
+ * @group Paths
+ * @category CSS Classes
+ */
+export declare const CLASS_VJS_ANIMATE_EDGE_TRAVERSING = "vjs-animate-edge-traversing";
+/**
+ * Assigned to all elements that will be traversed by a path traversal. The class is removed at the end of the animation.
+ * @group Paths
+ * @category CSS Classes
+ */
+export declare const CLASS_VJS_ANIMATE_VERTEX_TRAVERSABLE = "vjs-animate-node-traversable";
+/**
+ * Assigned to all edges that will be travelled along by a path traversal. The class is removed at the end of the animation.
+ * @group Paths
+ * @category CSS Classes
+ */
+export declare const CLASS_VJS_ANIMATE_EDGE_TRAVERSABLE = "vjs-animate-edge-traversable";
+/**
+ * Assigned to an element that has been traversed by a path traversal. The class is removed at the end of the animation.
+ * @group Paths
+ * @category CSS Classes
+ */
+export declare const CLASS_VJS_ANIMATE_VERTEX_TRAVERSED = "vjs-animate-node-traversed";
+/**
+ * Assigned to an edge that has been traversed by a path traversal. The class is removed at the end of the animation.
+ * @group Paths
+ * @category CSS Classes
+ */
+export declare const CLASS_VJS_ANIMATE_EDGE_TRAVERSED = "vjs-animate-edge-traversed";