Interface SurfaceRenderOptions

This interface defines the allowed parameters on a render call that will create a new Surface.

interface SurfaceRenderOptions {
    addToDragSelectionOnSelect?: boolean;
    autoExitSelectMode?: boolean;
    clamp?: boolean;
    clampToBackground?: boolean;
    clampToBackgroundExtents?: boolean;
    consumeRightClick?: boolean;
    debug?: boolean;
    decorators?: DecoratorSpec[];
    defaults?: JsPlumbDefaults<{
        E: Element;
    }>;
    directRender?: boolean;
    dragOptions?: SurfaceDragOptions;
    editablePaths?: boolean;
    elementsDraggable?: boolean;
    enableAnimation?: boolean;
    enablePan?: boolean;
    enhancedView?: boolean;
    events?: Record<string, ((value, event?) => any)>;
    grid?: SurfaceGridOptions;
    id?: string;
    layout?: {
        options?: LayoutParameters;
        type: string;
    };
    logicalPorts?: boolean;
    mode?: SurfaceMode;
    modelEvents?: {
        callback: ModelEventCallback<Edge | Vertex | Node | Group | Port>;
        event: string;
        selector: string;
    }[];
    modelHeightAttribute?: string;
    modelLeftAttribute?: string;
    modelTopAttribute?: string;
    modelWidthAttribute?: string;
    objectFilter?: ((b) => boolean);
    panFilter?: ((el) => boolean);
    panWithMetaKey?: boolean;
    plugins?: SurfacePluginSpec[];
    propertyMappings?: PropertyMappings;
    refreshAutomatically?: boolean;
    refreshLayoutOnEdgeConnect?: boolean;
    relayoutOnGroupUpdate?: boolean;
    selection?: Function | Selection<Edge | Node | Group>;
    shapes?: {
        labelAttribute?: string;
        library?: ShapeLibrary<ObjectData>;
        showLabels?: boolean;
        strokeWidth?: number;
        tagName?: string;
    };
    simpleEdgeStyles?: boolean;
    storePositionsInModel?: boolean;
    templates?: Record<string, string>;
    useModelForSizes?: boolean;
    view?: SurfaceViewOptions;
    wheel?: SurfaceWheelOptions;
    zoom?: number;
    zoomRange?: ZoomRange;
    zoomToFit?: boolean;
    zoomToFitIfNecessary?: boolean;
}

Hierarchy (view full)

Properties

addToDragSelectionOnSelect?: boolean

When true, vertices that are added to the underlying Toolkit's selection will be added to the current drag selection. Prior to 5.10.2 this flag's true state was the default behaviour, but the flag now defaults to false, and the Surface uses the concept of "drag groups" to manage dragging the set of selected elements together. For more information check out the Toolkit docs, specifically the section on element dragging.

autoExitSelectMode?: boolean

Whether or not to automatically exit from 'select' mode after a lasso operation. A future version of the Toolkit will move this flag into the lasso plugin.

clamp?: boolean

Whether or not to limit the canvas movement when dragging or zooming so that some part of the dataset is always visible. Defaults to true.

clampToBackground?: boolean

When a background is in use, whether or not to clamp movement of the canvas so that some portion of the background is always visible.

clampToBackgroundExtents?: boolean

When a background is in use, whether or not to clamp movement of the canvas so that the entire background is always visible.

consumeRightClick?: boolean

Whether or not to consume right clicks, which ordinarily will cause a browser to show a context menu with some native browser functions. This defaults to true.

debug?: boolean

Defaults to false. When true, the Surface will console log a few specific pieces of activity in the lifecycle of rendering a vertex.

decorators?: DecoratorSpec[]

Optional list of decorators to attach to the Surface.

defaults?: JsPlumbDefaults<{
    E: Element;
}>

Optional defaults to use for the underlying renderer.

Type declaration

  • E: Element
directRender?: boolean

Direct rendering is a mode in which the Surface disables pan/zoom, and adjusts its content so that the origin of the content is [0,0]. This mode can be used to embed the Surface into a read only UI (while still maintaining its dynamic connection to the underlying dataset)

dragOptions?: SurfaceDragOptions

Options for dragging vertices.

editablePaths?: boolean

If true, an EdgePathEditor will be registered on the Surface, with which you can interact via the startEditingPath(..) and stopEditingPath() methods on the Surface.

elementsDraggable?: boolean

Whether or not the elements in the Surface should be draggable. Defaults to true.

enableAnimation?: boolean

Whether or not to support animation of pan/zoom operations.

enablePan?: boolean

Whether or not to enable panning of the canvas. Defaults to true.

enhancedView?: boolean

Defaults to true, meaning node/group/edge definitions support parameters in their declarations, where the final values at render time are extracted from the data for the object being rendered.

events?: Record<string, ((value, event?) => any)>

Optional map of handlers for various events generated by the Surface.

Type declaration

    • (value, event?): any
    • Parameters

      • value: any
      • Optional event: any

      Returns any

Options for imposing a grid onto the elements in the Surface.

id?: string

Optional ID for the Surface. Allows you to retrieve this Surface from a toolkit instance's getRenderer(id) method.

layout?: {
    options?: LayoutParameters;
    type: string;
}

Defines the layout to use.

Type declaration

logicalPorts?: boolean

Defaults to false. When true, if a port is added to a vertex programmatically, the surface treats the vertex's DOM element as the DOM element for the port if it cannot find a specific element for the port.

Mode to start in. Defaults to 'pan'.

modelEvents?: {
    callback: ModelEventCallback<Edge | Vertex | Node | Group | Port>;
    event: string;
    selector: string;
}[]

Optional map of event handlers. Each entry consists of the event name, a CSS selector to target, and a callback function. Supplying this is equivalent to calling bindModelEvent(..) on a Surface.

Type declaration

  • callback: ModelEventCallback<Edge | Vertex | Node | Group | Port>
  • event: string
  • selector: string
modelHeightAttribute?: string

Defines the name of the attribute in a given vertex's backing data that provides its height. Defaults to "height". If you have a UI with multiple renderers you can use this parameter to store multiple sets of sizes for a given vertex inside its data.

modelLeftAttribute?: string

Defines the name of the attribute in a given vertex's backing data that provides its location in the X axis. Defaults to "left". If you have a UI with multiple renderers you can use this parameter to store multiple sets of locations for a given vertex inside its data.

modelTopAttribute?: string

Defines the name of the attribute in a given vertex's backing data that provides its location in the Y axis. Defaults to "top". If you have a UI with multiple renderers you can use this parameter to store multiple sets of locations for a given vertex inside its data.

modelWidthAttribute?: string

Defines the name of the attribute in a given vertex's backing data that provides its width. Defaults to "width". If you have a UI with multiple renderers you can use this parameter to store multiple sets of sizes for a given vertex inside its data.

objectFilter?: ((b) => boolean)

Optional filter that can decide whether or not the Surface renders a specific node or group. By default all nodes and groups in the underlying dataset are rendered.

Type declaration

    • (b): boolean
    • Parameters

      • b: Base

      Returns boolean

panFilter?: ((el) => boolean)

Optional function which is called at the start of panning and can return false to reject pan starting.

Type declaration

    • (el): boolean
    • Parameters

      • el: Element

      Returns boolean

panWithMetaKey?: boolean

Optional, defaults to false. When true, the user must hold down the meta key (ctrl on windows) in order to pan.

plugins?: SurfacePluginSpec[]

Optional list of plugins to attach to the Surface.

propertyMappings?: PropertyMappings

Optional set of mappings from property values to edge definitions.

refreshAutomatically?: boolean

Whether or not the automatically refresh the layout when model data changes. Defaults to true.

refreshLayoutOnEdgeConnect?: boolean

When true, the Surface will run a refresh of the underlying layout whenever a new edge is established. This defaults to false, but you might want to set this to true if you're using the Hierarchical or Hierarchy layouts, because it has a bearing on the way they paint. However, if your users are able to drag vertices around, you may not wish for the layout to move things that they have placed, which is why this defaults to false.

relayoutOnGroupUpdate?: boolean

Defaults to false. When true, changes to a group cause the entire surface to perform a relayout.

selection?: Function | Selection<Edge | Node | Group>

Optional Selection - or generator - to use as the dataset to render. If you supply this the Surface will render the contents of the selection, or the list of vertices that the given function returns. This is useful for such things as inspector windows for parts of your UI.

shapes?: {
    labelAttribute?: string;
    library?: ShapeLibrary<ObjectData>;
    showLabels?: boolean;
    strokeWidth?: number;
    tagName?: string;
}

Optional shape library that can render SVG shapes into node elements. When you provide a shape library to a surface, two things happen:

  1. The surface registers a jtk-shape tag that your templates can use. The type of each node is used to extract an appropriate SVG shape definition from the shape library.
  2. The 'exportToSvg()' method becomes available. Note that as of 6.5.1 SVG export is experimental, and has a few constraints/requirements - see the Toolkit docs for a discussion.

Type declaration

  • Optional labelAttribute?: string
  • Optional library?: ShapeLibrary<ObjectData>
  • Optional showLabels?: boolean
  • Optional strokeWidth?: number
  • Optional tagName?: string
simpleEdgeStyles?: boolean

From 6.2.0, defaults to true. Prior versions default this flag to false. Instructs the Surface to automatically extract color, lineWidth, outlineWidth and outlineColor values from the backing data for edges, and to use these to set the appearance of a connection for that edge.

storePositionsInModel?: boolean

Whether or not to store vertex positions in the middle after running a layout. Defaults to false. A future release of the Toolkit will set this flag to true by default.

templates?: Record<string, string>

When using 'vanilla' Toolkit, you can provide a map of templates here rather than including them somewhere in the HTML of the page.

useModelForSizes?: boolean

Defaults to false. When true, newly created nodes are sized according to values in their backing data, using the modelWidthAttribute and modelHeightAttribute as keys.

Mappings of vertex/edge types to their rendering and behaviour.

wheel?: SurfaceWheelOptions

Options for the behaviour of the mousewheel (which also covers two finger scrolling on a mac trackpad)

zoom?: number

Starting zoom for the Surface. Defaults to 1.

zoomRange?: ZoomRange

The zoom range for the Surface - minimum and maximum values, expressed as decimals. Defaults to [0.05, 3].

zoomToFit?: boolean

If true, zoom the display so that the dataset is entirely visible after initialisation.

zoomToFitIfNecessary?: 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.