@visuallyjs/browser-ui 1.0.0

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

@@ -0,0 +1,134 @@
+import { EVENT_END_NODE_TRAVERSAL, EVENT_END_OVERLAY_ANIMATION, EVENT_START_NODE_TRAVERSAL, EVENT_START_OVERLAY_ANIMATION } from "./constants";
+import { BrowserElement } from "../../util";
+import { Connection } from "../../../ui";
+import { EventGenerator } from "../../../core";
+/**
+ * Represents the initial phase of an animation, before it has started moving.
+ * @constant
+ */
+export declare const ANIMATION_PHASE_INITIALIZED = "INITIALIZED";
+/**
+ * Represents the phase of an animation where the start vertex is being traversed
+ * @constant
+ */
+export declare const ANIMATION_PHASE_TRAVERSING_START = "TRAVERSING_START";
+/**
+ * Represents the phase of an animation where an edge is being traversed.
+ * @constant
+ */
+export declare const ANIMATION_PHASE_TRAVERSING_EDGE = "TRAVERSING_EDGE";
+/**
+ * Represents the phase of an animation where the end vertex is being traversed.
+ * @constant
+ */
+export declare const ANIMATION_PHASE_TRAVERSING_END = "TRAVERSING_END";
+/**
+ * Represents an animation that has been cancelled
+ * @constant
+ */
+export declare const ANIMATION_PHASE_CANCELLED = "CANCELLED";
+/**
+ * Represents an animation that has run through and finished.
+ * @constant
+ */
+export declare const ANIMATION_PHASE_FINISHED = "FINISHED";
+/**
+ * A phase in an Animation.
+ * @group Components
+ */
+export type AnimationPhase = typeof ANIMATION_PHASE_INITIALIZED | typeof ANIMATION_PHASE_TRAVERSING_START | typeof ANIMATION_PHASE_TRAVERSING_EDGE | typeof ANIMATION_PHASE_TRAVERSING_END | typeof ANIMATION_PHASE_CANCELLED | typeof ANIMATION_PHASE_FINISHED;
+/**
+ * Available animation events.
+ * @group Events
+ */
+export type AnimationEvent = typeof EVENT_START_OVERLAY_ANIMATION | typeof EVENT_END_OVERLAY_ANIMATION | typeof EVENT_START_NODE_TRAVERSAL | typeof EVENT_END_NODE_TRAVERSAL;
+/**
+ * The type defining the object that is passed to all events fired by the `tracePath` method.
+ * @group Events
+ */
+export type AnimationEventCallbackParams = {
+    /**
+     * Connection on which the path is being traced
+     */
+    connection: Connection<Element>;
+    /**
+     * Animation manager
+     */
+    harness: ConnectionOverlayAnimator;
+    /**
+     * The element being animated.
+     */
+    element?: BrowserElement;
+};
+/**
+ * Options for animating an overlay along an edge
+ * @group Components
+ */
+export interface OverlayAnimationOptions {
+    /**
+     * Defaults to true, meaning traverse from the source to the target.
+     */
+    forwards?: boolean;
+    /**
+     * How long, in milliseconds, to dwell on the source before beginning to move. Defaults to 350ms.
+     */
+    dwell?: number;
+    /**
+     * How fast to travel, in pixels per second. Defaults to 100.
+     */
+    speed?: number;
+    /**
+     * Time between frames. Defaults to 30ms.
+     */
+    rate?: number;
+    /**
+     * Optional set of event listeners.
+     */
+    events?: Record<string, (p: AnimationEventCallbackParams) => any>;
+    /**
+     * If true, the animation starts in a paused state.
+     */
+    paused?: boolean;
+    /**
+     * If true, the animation will loop.
+     */
+    loop?: boolean;
+}
+/**
+ * @internal
+ */
+export interface InternalOverlayAnimationOptions extends OverlayAnimationOptions {
+    /**
+     * Used internally to indicate this is the final animation in a series.
+     */
+    isFinal?: boolean;
+    /**
+     * Used internally to chain a set of animations.
+     */
+    previous?: ConnectionOverlayAnimator;
+}
+/**
+ * Definition of the control surface for a specific segment in the tracePath method.
+ */
+export type ConnectionOverlayAnimator = {
+    /**
+     * @internal
+     */
+    eventGenerator: EventGenerator;
+    /**
+     * Play the animation
+     */
+    play: () => any;
+    /**
+     * Pause the animation
+     */
+    pause: () => any;
+    /**
+     * Cancel the animation
+     */
+    cancel: () => any;
+    /**
+     * The connection the overlay is being animated on.
+     */
+    connection: Connection<Element>;
+};

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

@@ -0,0 +1,4 @@
+export * from './anim';
+export * from './path-transport';
+export * from './constants';
+export * from './definitions';

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

@@ -0,0 +1,23 @@
+import { ConnectionOverlayAnimator } from "./definitions";
+import { OptimisticEventGenerator } from "../../../core";
+export type PathTransportListener = (s: string) => any;
+export declare enum PathTransportState {
+    STOPPED = "stopped",
+    FINISHED = "finished",
+    PAUSED = "paused",
+    PLAYING = "playing"
+}
+export type CurrentState = PathTransportState;
+export declare const EVENT_STATE = "state";
+export declare class PathTransport extends OptimisticEventGenerator {
+    components: Array<any>;
+    params: any;
+    pathExists: true;
+    state: CurrentState;
+    currentlyAnimatingConnection: ConnectionOverlayAnimator;
+    constructor(components: Array<any>, params: any);
+    setState(s: CurrentState): void;
+    pause(): void;
+    play(): void;
+    cancel(): void;
+}

package/types/browser-ui/surface-renderer/css-classes.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Assigned to the parent element for one set of icons in the shape library palette
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_PALETTE_SET = "vjs-shape-library-palette-set";
+/**
+ * Assigned to the root element for a shape library palette
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_PALETTE = "vjs-shape-library-palette";
+/**
+ * Assigned to the drop-down that is shown when there are multiple shape sets in the palette
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_PALETTE_SET_FILTER = "vjs-shape-library-palette-filter";
+/**
+ * Assigned to each shape icon in the palette
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_PALETTE_SHAPE = "vjs-shape-library-palette-shape";
+/**
+ * Assigned to the label for each shape icon, if you have `showLabels:true` set.
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_PALETTE_SHAPE_LABEL = "vjs-shape-library-palette-label";
+/**
+ * Assigned to the title element for a set of icons
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_PALETTE_SET_TITLE = "vjs-shape-library-palette-set-title";
+/**
+ * Assigned to the parent element of the shapes in one set of icons
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_PALETTE_SET_SHAPES = "vjs-shape-library-palette-set-shapes";
+/**
+ * When in `tap` mode, this class is added to the lasso used to draw new vertices
+ * @cssClass
+ * @context shapePalette
+ * @group Diagrams
+ * @category CSS Classes
+ */
+export declare const CLASS_PALETTE_VERTEX_DRAWING_LASSO = "vjs-shape-library-palette-lasso";

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

@@ -0,0 +1,162 @@
+import { Surface } from "./surface";
+import { BrowserElement } from "../util";
+import { FixedElement, FixedElementConstraints } from "../fixed-layer";
+import { AbstractLayoutAdapter, AbstractLayout, BOTTOM, BoundingBox, Extents, LEFT, PointXY, RIGHT, TOP, VisuallyJsModel, Constructable } from "../../core";
+/**
+ * Possible values for element horizontal aligment.
+ * @group Components
+ * @category Decorators
+ */
+export type AppendedElementHorizontalAlignment = typeof RIGHT | typeof LEFT;
+/**
+ * Possible values for element vertical aligment.
+ * @group Components
+ * @category Decorators
+ */
+export type AppendedElementVerticalAlignment = typeof TOP | typeof BOTTOM;
+/**
+ * Alignment settings in x and y axes.
+ * @group Components
+ * @category Decorators
+ */
+export type AppendedElementAlignments = {
+    /**
+     * Alignment in X axis
+     */
+    alignX?: AppendedElementHorizontalAlignment;
+    /**
+     * Alignment in Y axis
+     */
+    alignY?: AppendedElementVerticalAlignment;
+};
+/**
+ * Parameters for a decorator. These are the parameters that are passed
+ * in to a Decorator's `decorate` method when it is called.
+ * @group Components
+ * @category Decorators
+ */
+export type DecorateParams = {
+    /**
+     * The underlying Surface
+     */
+    surface: Surface;
+    adapter: AbstractLayoutAdapter<BrowserElement>;
+    /**
+     * The surface's current layout
+     */
+    layout: AbstractLayout<any>;
+    /**
+     * A method you can use to set the absolute position of some element.
+     * @param el
+     * @param xy
+     */
+    setAbsolutePosition: (el: BrowserElement, xy: PointXY) => void;
+    model: VisuallyJsModel;
+    bounds: Extents;
+    positions: Record<string, PointXY>;
+    /**
+     * A method you can use to place some element at a fixed position relative to
+     * the origin of the surface's viewport. The element will remain fixed in that position
+     * if the surface is zoomed or panned.
+     * @param el Element to place
+     * @param pos Position relative to the canvas origin to place the element.
+     * @param constraints
+     * @param id
+     */
+    fixElement: (el: BrowserElement, pos: PointXY, constraints?: FixedElementConstraints, id?: string) => FixedElement;
+    floatElement: (el: BrowserElement, pos: PointXY) => void;
+    appendElement: (el: BrowserElement, pos: PointXY, alignment?: AppendedElementAlignments) => void;
+};
+/**
+ * options passed to the `reset` method on a Decorator.
+ * @group Components
+ * @category Decorators
+ */
+export type DecorateResetParams = {
+    /**
+     * Removes the given element from the canvas.
+     * @param el
+     */
+    remove: (el: BrowserElement) => any;
+};
+/**
+ * Base interface for the methods a decorator needs to provide.
+ * @group Components
+ * @category Surface
+ */
+export interface IDecorator<T> {
+    /**
+     * This method is invoked when the model's graph is cleared. You may or may not want to do anything in response to that -
+     * one option is to call `clear()` on the decorator to remove its elements.
+     * @param params
+     */
+    reset(params: DecorateResetParams): void;
+    decorate(params: DecorateParams): void;
+    id?: string;
+    /**
+     * When true, indicates that this Decorator updates its associated elements incrementally with each call. When false, the
+     * surface will clear everything associated with this decorator prior to invoking `decorate`. The default value for this is false,
+     * meaning the surface will clear everything prior to calling `decorate`.
+     */
+    incremental?: boolean;
+}
+/**
+ * Superclass for decorators. You should extend this class when you create a decorator.
+ * @group Components
+ * @category Surface
+ */
+export declare abstract class Decorator implements IDecorator<BrowserElement> {
+    protected adapter: Surface;
+    protected container: BrowserElement;
+    id: string;
+    protected constructor(params: Record<string, any>, adapter: Surface, container: BrowserElement, id: string);
+    abstract incremental: boolean;
+    abstract reset(params: DecorateResetParams): void;
+    abstract decorate(params: DecorateParams): void;
+    fixedElements: Set<FixedElement>;
+    floatedElements: Set<{
+        el: BrowserElement;
+        constraints: Record<string, any>;
+        pos: PointXY;
+    }>;
+    appendedElements: Set<{
+        el: BrowserElement;
+        constraints: Record<string, any>;
+        pos: PointXY;
+    }>;
+    getFixedElement(id: string): FixedElement;
+    getBounds(): BoundingBox;
+    /**
+     * Removes all elements added by this decorator.
+     */
+    clear(): void;
+}
+/**
+ * Created internally when a decorator is passed in as an object to a render call. You do not need to create these manually.
+ * @internal
+ */
+export declare class SyntheticDecorator extends Decorator {
+    private methods;
+    incremental: boolean;
+    constructor(methods: IDecorator<BrowserElement>, params: Record<string, any>, adapter: Surface, container: BrowserElement, id: string, incremental?: boolean);
+    decorate(params: DecorateParams): void;
+    reset(params: DecorateResetParams): void;
+}
+/**
+ * Decorator factory. Call `register` to add a new decorator type.
+ * @group Components
+ * @category Decorators
+ */
+export declare const Decorators: {
+    /**
+     * @internal
+     */
+    get: (name: string, params: Record<string, any>, adapter: Surface, container: Element, id: string) => Decorator;
+    /**
+     * Register a decorator type, which you can then reference by name.
+     * @param name
+     * @param dec
+     *
+     */
+    register: (name: string, dec: Constructable<Decorator>) => void;
+};

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

@@ -0,0 +1,83 @@
+import { BrowserElement } from "../util";
+import { EVENT_CANVAS_CLICK, EVENT_CANVAS_DBLCLICK, EVENT_EDGE_REDRAW, EVENT_PAN, EVENT_SURFACE_MODE_CHANGED, EVENT_ZOOM, UIObjectInfo, VertexCloneOptions, UISaveData } from "../../ui";
+import { PointXY, Edge, Group, Node, Port, Vertex } from "../../core";
+import { BrowserUIModel } from "../browser-ui";
+import { BrowserUI } from "../browser-visuallyjs-instance";
+/**
+ * Identifies the 'pan' mode in the surface. In this mode the canvas is panned via pointer drag or via wheel events
+ */
+export declare const SURFACE_MODE_PAN = "pan";
+/**
+ * Identifies the 'select' mode in the surface. In this mode, panning is disabled and pointer drag s used to lasso items.
+ */
+export declare const SURFACE_MODE_SELECT = "select";
+/**
+ * Identifies the 'disabled' mode in the surface, in which no interaction may take place with the canvas.
+ */
+export declare const SURFACE_MODE_DISABLED = "disabled";
+/**
+ * Identifies the mode in which pointer drag will cause vertices to be drawn. This surface will only enter this mode if there is a vertex drawing plugin attached.
+ */
+export declare const SURFACE_MODE_VERTEX_DRAWING = "vertexDrawing";
+/**
+ * Possible surface modes.
+ * @group Components
+ * @category Surface
+ */
+export type SurfaceMode = typeof SURFACE_MODE_PAN | typeof SURFACE_MODE_DISABLED | typeof SURFACE_MODE_SELECT | typeof SURFACE_MODE_VERTEX_DRAWING;
+/**
+ * The spec for one model event binding in a surface. Consists of the event name, a CSS selector identifying which elements to listen to, and a callback to invoke.
+ * @group Events
+ * @category Payloads
+ */
+export interface ModelEventSpec {
+    event: string;
+    selector: string;
+    callback: ModelEventCallback<Edge | Node | Group | Port | Vertex>;
+}
+/**
+ * Callback payload for a model event.
+ * @group Events
+ * @typeParam T Maps the type of object the event pertains to - a Node, Group, Edge or Port.
+ * @typeParam E Maps the event class you expect as a return value. Providing this helps you to type things more strictly.
+ */
+export type ModelEventCallbackPayload<T = any, E extends Event = Event> = {
+    event: E;
+    eventTarget: BrowserElement;
+    objectInfo: UIObjectInfo<T, BrowserElement>;
+    model: BrowserUIModel;
+    ui: BrowserUI;
+};
+/**
+ * Callback for a model event.
+ * @group Events
+ * @typeParam T Maps the type of object the event pertains to - a Node, Group, Edge or Port.
+ * @typeParam E Maps the event class you expect as a return value. Providing this helps you to type things more strictly.
+ */
+export type ModelEventCallback<T = any, E extends Event = Event> = (p: ModelEventCallbackPayload<T, E>) => any;
+/**
+ * Events fired by the Surface only.
+ * @group Events
+ * @category Surface
+ */
+export type SurfaceEvents = typeof EVENT_PAN | typeof EVENT_ZOOM | typeof EVENT_SURFACE_MODE_CHANGED | typeof EVENT_CANVAS_CLICK | typeof EVENT_CANVAS_DBLCLICK | typeof EVENT_EDGE_REDRAW;
+/**
+ * Options for a clone operation in a Surface
+ * @group Components
+ * @category Surface
+ */
+export interface SurfaceVertexCloneOptions extends VertexCloneOptions {
+    /**
+     * Defaults to false. If true, briefly flash the new vertex after the clone.
+     */
+    flash?: boolean;
+}
+/**
+ * Definition of the payload returned from the Surface's exportData method.
+ * @group Components
+ * @category Input and Output
+ */
+export interface SurfaceSaveData extends UISaveData {
+    pan: PointXY;
+    transformOrigin: PointXY;
+}

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

@@ -0,0 +1,28 @@
+import { ShapeSet } from "../../shape-library";
+/**
+ * CSS class set on all nodes in a diagram.
+ * @group Diagrams
+ * @category CSS Classes
+ * @cssClass
+ * @context Diagram
+ */
+export declare const CLASS_DIAGRAM_NODE = "vjs-diagram-node";
+/**
+ * CSS class set on all groups in a diagram.
+ * @group Diagrams
+ * @category CSS Classes
+ * @cssClass
+ * @context Diagram
+ */
+export declare const CLASS_DIAGRAM_GROUP = "vjs-diagram-group";
+/**
+ * The default width of a cell in a diagram
+ * @internal
+ */
+export declare const DEFAULT_DIAGRAM_CELL_WIDTH = 100;
+/**
+ * The default height of a cell in a diagram
+ * @internal
+ */
+export declare const DEFAULT_DIAGRAM_CELL_HEIGHT = 80;
+export declare const DEFAULT_SHAPE_SETS: Array<ShapeSet>;