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?: Size

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

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

Optional list of dimensions

Type declaration

  • Optional height?: number
  • Optional width?: number
downloadButtonLabel?: string

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

filename?: string

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

fill?: string

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

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!

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.

labelAttribute?: string

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

labelColor?: string

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

labelStrokeWidth?: string

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

margins?: PointXY

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

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

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

outline?: string

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

path?: Path

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

quality?: number

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

selection?: Selection<Edge | Node | Group>

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

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.

showLabels?: boolean

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

strokeWidth?: number

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

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.

type?: string

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

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.

Version :