Interface ImageExportUIOptions

Options for the image export UI.

interface ImageExportUIOptions {
    defaultSize?: Size;
    dimensions?: {
        height?: number;
        width?: number;
    }[];
    downloadButtonLabel?: string;
    filename?: string;
    fill?: string;
    gridPaddingCells?: number;
    height?: number;
    labelAttribute?: string;
    labelColor?: string;
    labelStrokeWidth?: string;
    margins?: PointXY;
    onDimensionsChanged?: ((width, height, url) => any);
    onShow?: ((el, width, height, url) => any);
    outline?: string;
    path?: Path;
    quality?: number;
    selection?: Selection<Edge | Node | Group>;
    showGrid?: boolean;
    showLabels?: boolean;
    strokeWidth?: number;
    style?: string | Record<string, any>;
    type?: string;
    width?: number;
}

Hierarchy (view full)

Properties

defaultSize? dimensions? downloadButtonLabel? filename? fill? gridPaddingCells? height? labelAttribute? labelColor? labelStrokeWidth? margins? onDimensionsChanged? onShow? outline? path? quality? selection? showGrid? showLabels? strokeWidth? style? type? width?

Properties

Optional defaultSize

defaultSize?: Size

Default size to use for nodes if their data does not have width/height properties.

Optional dimensions

dimensions?: {
    height?: number;
    width?: number;
}[]

Optional list of dimensions

Type declaration

  • Optional height?: number
  • Optional width?: number

Optional downloadButtonLabel

downloadButtonLabel?: string

Optional label to use on the download button. Defaults to "Download".

Optional filename

filename?: string

Optional filename to use - defaults to jsplumbtoolkit-export. You do not need to provide the extension.

Optional fill

fill?: string

Default fill color to use for vertices. Will be overridden by individual fill values in each node. Default value is white.

Optional gridPaddingCells

gridPaddingCells?: number

Optional, defaults to 1. If a grid is being included in the output JsPlumb will draw this number of blank grid cells around the content. You can set this to 0, but we wouldn't recommend setting it to a negative number!

Optional height

height?: number

Optional height for the export. The exported image's aspect ratio will always be honoured so if you provide both this and width, this will be ignored. If you don't provide this the natural height of the underlying SVG will be used.

Optional labelAttribute

labelAttribute?: string

If showing labels, the name of the property in each node that defines the label. Defaults to label.

Optional labelColor

labelColor?: string

If showing labels, the default color to use. Will be overridden by individual textColor values in each node. Default value is black.

Optional labelStrokeWidth

labelStrokeWidth?: string

If showing labels, the stroke width to use when rendering them. Defaults to 0.25px.

Optional margins

margins?: PointXY

Optional whitespace to place around the export. Defaults to 50px in x and y.

Optional onDimensionsChanged

onDimensionsChanged?: ((width, height, url) => any)

Optional function to invoke when the user changes the selected dimensions.

Type declaration

    • (width, height, url): any

    • Parameters

      • width: number
      • height: number
      • url: string

      Returns any

Optional onShow

onShow?: ((el, width, height, url) => any)

Optional function to invoke after the UI has been displayed.

Type declaration

    • (el, width, height, url): any

    • Parameters

      • el: Element
      • width: number
      • height: number
      • url: string

      Returns any

Optional outline

outline?: string

Default outline color to use for vertices. Will be overridden by individual outline values in each node. Default value is black.

Optional path

path?: Path

Optional path to render. If null, and selection is null, the whole dataset is exported.

Optional quality

quality?: number

Optional quality of the resulting image - only used for jpeg. Defaults to 1.0.

Optional selection

selection?: Selection<Edge | Node | Group>

Optional selection to render. If null, and path is null, the whole dataset is exported.

Optional showGrid

showGrid?: boolean

Optional, defaults to true. When a generated grid background is in use in the Surface whose contents are being exported, by default the exported SVG (or PNG/JPG) will include the grid. This flag allows you to hide the grid if you wish.

Optional showLabels

showLabels?: boolean

Whether or not to display labels (using an SVG text element) on nodes. Defaults to false.

Optional strokeWidth

strokeWidth?: number

Default stroke width to use for nodes. Will be overridden by individual outlineWidth values in each node. Default value is 2.

Optional style

style?: string | Record<string, any>

Optional style to set in a style element in the SVG header. You can provide the CSS for the style element as a string, or you can provide a JS object.

Optional type

type?: string

Content type for the export. Defaults to image/png. Most modern browsers also support image/jpeg.

Optional width

width?: number

Optional width for the export. The exported image's aspect ratio will always be honoured so if you provide both this and height, height will be ignored. If you don't provide this the natural width of the underlying SVG will be used.

Settings

Member Visibility

Theme

On This Page

defaultSizedimensionsdownloadButtonLabelfilenamefillgridPaddingCellsheightlabelAttributelabelColorlabelStrokeWidthmarginsonDimensionsChangedonShowoutlinepathqualityselectionshowGridshowLabelsstrokeWidthstyletypewidth