Interface PaperProps<ElementItem>

The props for the Paper component. Extend the dia.Paper.Options interface. For more information, see the JointJS documentation.

See

https://docs.jointjs.com/api/dia/Paper

interface PaperProps<ElementItem extends GraphElement = GraphElement> {
    afterRender?: AfterRenderCallback;
    allowLink?: ((linkView: LinkView, paper: Paper) => boolean) | null;
    anchorNamespace?: any;
    async?: boolean;
    attributes?: Record<string, any>;
    autoFreeze?: boolean;
    background?: BackgroundOptions;
    beforeRender?: BeforeRenderCallback;
    cellModel?: typeof Cell;
    cellNamespace?: unknown;
    cellViewNamespace?: any;
    cellVisibility?: CellVisibilityCallback | null;
    children?: ReactNode;
    cid?: string;
    className?: string;
    clickThreshold?: number;
    collection?: Collection<any>;
    connectionPointNamespace?: any;
    connectionStrategy?: ConnectionStrategy;
    connectorNamespace?: any;
    defaultAnchor?: AnchorJSON | Anchor;
    defaultConnectionPoint?:
        | ConnectionPointJSON
        | ConnectionPoint
        | ((...args: any[]) => ConnectionPoint);
    defaultConnector?: Connector | ConnectorJSON;
    defaultLink?:
        | Link<Attributes, ModelSetOptions>
        | ((cellView: CellView, magnet: SVGElement) => Link);
    defaultLinkAnchor?: AnchorJSON | Anchor;
    defaultRouter?: Router | RouterJSON;
    drawGrid?: boolean | GridOptions | GridOptions[];
    drawGridSize?: number | null;
    el?: unknown;
    elementSelector?: (item: GraphElement) => ElementItem;
    elementView?:
        | typeof ElementView
        | ((element: Element) => typeof ElementView);
    embeddingMode?: boolean;
    events?: _Result<EventsHash>;
    findParentBy?: FindParentByType | FindParentByCallback;
    frontParentOnly?: boolean;
    graph?: Graph<Attributes, ModelSetOptions>;
    gridSize?: number;
    guard?: (evt: Event, view: CellView) => boolean;
    height?: Dimension;
    highlighterNamespace?: any;
    highlighting?: boolean | Record<string, boolean | HighlighterJSON>;
    id?: string;
    initialElements?: (GraphElement | Element<Attributes, ModelSetOptions>)[];
    initialLinks?: (GraphLink<string> | Link<Attributes, ModelSetOptions>)[];
    interactive?:
        | boolean
        | ((cellView: CellView, event: string) => boolean | InteractivityOptions)
        | InteractivityOptions;
    labelsLayer?: string | boolean;
    layerViewNamespace?: any;
    linkAnchorNamespace?: any;
    linkPinning?: boolean;
    linkView?: typeof LinkView | ((link: Link) => typeof LinkView);
    magnetThreshold?: string | number;
    markAvailable?: boolean;
    measureNode?: MeasureNodeCallback;
    model?: Graph<Attributes, ModelSetOptions>;
    moveThreshold?: number;
    multiLinks?: boolean;
    onBlankContextMenu?: (
        args: { event: Event; paper: Paper; x: number; y: number },
    ) => void;
    onBlankMouseEnter?: (args: { event: Event; paper: Paper }) => void;
    onBlankMouseLeave?: (args: { event: Event; paper: Paper }) => void;
    onBlankMouseOut?: (args: { event: Event; paper: Paper }) => void;
    onBlankMouseOver?: (args: { event: Event; paper: Paper }) => void;
    onBlankMouseWheel?: (
        args: {
            delta: number;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onBlankPointerClick?: (
        args: { event: Event; paper: Paper; x: number; y: number },
    ) => void;
    onBlankPointerDblClick?: (
        args: { event: Event; paper: Paper; x: number; y: number },
    ) => void;
    onBlankPointerDown?: (
        args: { event: Event; paper: Paper; x: number; y: number },
    ) => void;
    onBlankPointerMove?: (
        args: { event: Event; paper: Paper; x: number; y: number },
    ) => void;
    onBlankPointerUp?: (
        args: { event: Event; paper: Paper; x: number; y: number },
    ) => void;
    onCellContextMenu?: (
        args: {
            cellView: CellView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onCellHighlight?: (
        args: {
            cellView: CellView;
            node: SVGElement;
            options: EventHighlightOptions;
            paper: Paper;
        },
    ) => void;
    onCellHighlightInvalid?: (
        args: {
            cellView: CellView;
            highlighter: HighlighterView;
            highlighterId: string;
            paper: Paper;
        },
    ) => void;
    onCellMouseEnter?: (
        args: { cellView: CellView; event: Event; paper: Paper },
    ) => void;
    onCellMouseLeave?: (
        args: { cellView: CellView; event: Event; paper: Paper },
    ) => void;
    onCellMouseOut?: (
        args: { cellView: CellView; event: Event; paper: Paper },
    ) => void;
    onCellMouseOver?: (
        args: { cellView: CellView; event: Event; paper: Paper },
    ) => void;
    onCellMouseWheel?: (
        args: {
            cellView: CellView;
            delta: number;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onCellPointerClick?: (
        args: {
            cellView: CellView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onCellPointerDblClick?: (
        args: {
            cellView: CellView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onCellPointerDown?: (
        args: {
            cellView: CellView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onCellPointerMove?: (
        args: {
            cellView: CellView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onCellPointerUp?: (
        args: {
            cellView: CellView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onCellUnhighlight?: (
        args: {
            cellView: CellView;
            node: SVGElement;
            options: EventHighlightOptions;
            paper: Paper;
        },
    ) => void;
    onCustomEvent?: (
        args: { args: any[]; eventName: string; paper: Paper },
    ) => void;
    onElementContextMenu?: (
        args: {
            elementView: ElementView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementMagnetContextMenu?: (
        args: {
            elementView: ElementView;
            event: Event;
            magnetNode: SVGElement;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementMagnetPointerClick?: (
        args: {
            elementView: ElementView;
            event: Event;
            magnetNode: SVGElement;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementMagnetPointerDblClick?: (
        args: {
            elementView: ElementView;
            event: Event;
            magnetNode: SVGElement;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementMouseEnter?: (
        args: { elementView: ElementView; event: Event; paper: Paper },
    ) => void;
    onElementMouseLeave?: (
        args: { elementView: ElementView; event: Event; paper: Paper },
    ) => void;
    onElementMouseOut?: (
        args: { elementView: ElementView; event: Event; paper: Paper },
    ) => void;
    onElementMouseOver?: (
        args: { elementView: ElementView; event: Event; paper: Paper },
    ) => void;
    onElementMouseWheel?: (
        args: {
            delta: number;
            elementView: ElementView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementPointerClick?: (
        args: {
            elementView: ElementView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementPointerDblClick?: (
        args: {
            elementView: ElementView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementPointerDown?: (
        args: {
            elementView: ElementView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementPointerMove?: (
        args: {
            elementView: ElementView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementPointerUp?: (
        args: {
            elementView: ElementView;
            event: Event;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onElementsSizeChange?: (options: OnLoadOptions) => void;
    onElementsSizeReady?: (options: OnLoadOptions) => void;
    onLinkConnect?: (
        args: {
            arrowhead: LinkEnd;
            event: Event;
            linkView: LinkView;
            newCellView: CellView;
            newCellViewMagnet: SVGElement;
            paper: Paper;
        },
    ) => void;
    onLinkContextMenu?: (
        args: {
            event: Event;
            linkView: LinkView;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onLinkDisconnect?: (
        args: {
            arrowhead: LinkEnd;
            event: Event;
            linkView: LinkView;
            paper: Paper;
            previousCellView: CellView;
            previousCellViewMagnet: SVGElement;
        },
    ) => void;
    onLinkMouseEnter?: (
        args: { event: Event; linkView: LinkView; paper: Paper },
    ) => void;
    onLinkMouseLeave?: (
        args: { event: Event; linkView: LinkView; paper: Paper },
    ) => void;
    onLinkMouseOut?: (
        args: { event: Event; linkView: LinkView; paper: Paper },
    ) => void;
    onLinkMouseOver?: (
        args: { event: Event; linkView: LinkView; paper: Paper },
    ) => void;
    onLinkMouseWheel?: (
        args: {
            delta: number;
            event: Event;
            linkView: LinkView;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onLinkPointerClick?: (
        args: {
            event: Event;
            linkView: LinkView;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onLinkPointerDblClick?: (
        args: {
            event: Event;
            linkView: LinkView;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onLinkPointerDown?: (
        args: {
            event: Event;
            linkView: LinkView;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onLinkPointerMove?: (
        args: {
            event: Event;
            linkView: LinkView;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onLinkPointerUp?: (
        args: {
            event: Event;
            linkView: LinkView;
            paper: Paper;
            x: number;
            y: number;
        },
    ) => void;
    onLinkSnapConnect?: (
        args: {
            arrowhead: LinkEnd;
            event: Event;
            linkView: LinkView;
            newCellView: CellView;
            newCellViewMagnet: SVGElement;
            paper: Paper;
        },
    ) => void;
    onLinkSnapDisconnect?: (
        args: {
            arrowhead: LinkEnd;
            event: Event;
            linkView: LinkView;
            paper: Paper;
            previousCellView: CellView;
            previousCellViewMagnet: SVGElement;
        },
    ) => void;
    onPan?: (
        args: { deltaX: number; deltaY: number; event: Event; paper: Paper },
    ) => void;
    onPaperMouseEnter?: (args: { event: Event; paper: Paper }) => void;
    onPaperMouseLeave?: (args: { event: Event; paper: Paper }) => void;
    onPinch?: (
        args: {
            event: Event;
            paper: Paper;
            scale: number;
            x: number;
            y: number;
        },
    ) => void;
    onRenderDone?: (
        args: { opt: unknown; paper: Paper; stats: UpdateStats },
    ) => void;
    onResize?: (
        args: { data: unknown; height: number; paper: Paper; width: number },
    ) => void;
    onScale?: (
        args: { data: unknown; paper: Paper; sx: number; sy: number },
    ) => void;
    onTransform?: (
        args: { data: unknown; matrix: DOMMatrix; paper: Paper },
    ) => void;
    onTranslate?: (
        args: { data: unknown; paper: Paper; tx: number; ty: number },
    ) => void;
    onViewPostponed?: (
        view: View<any, any>,
        flag: number,
        paper: Paper,
    ) => boolean;
    onViewUpdate?: (
        view: View<any, any>,
        flag: number,
        priority: number,
        opt: { [key: string]: any },
        paper: Paper,
    ) => void;
    overflow?: boolean;
    overwriteDefaultPaperElement?: (
        paperCtx: PaperContext,
    ) => SVGElement | HTMLElement;
    preventContextMenu?: boolean;
    preventDefaultBlankAction?: boolean;
    preventDefaultViewAction?: boolean;
    renderElement?: RenderElement<ElementItem>;
    restrictTranslate?: boolean | PlainRect | RestrictTranslateCallback;
    routerNamespace?: any;
    scale?: number;
    snapLabels?: boolean;
    snapLinks?: boolean | SnapLinksOptions;
    snapLinksSelf?: boolean | { distance: number };
    sorting?: sorting;
    store?: Store;
    style?: CSSProperties;
    tagName?: string;
    theme?: string;
    useHTMLOverlay?: boolean;
    validateConnection?: (
        cellViewS: CellView,
        magnetS: SVGElement,
        cellViewT: CellView,
        magnetT: SVGElement,
        end: LinkEnd,
        linkView: LinkView,
    ) => boolean;
    validateEmbedding?: (
        this: Paper,
        childView: ElementView,
        parentView: ElementView,
    ) => boolean;
    validateMagnet?: (
        cellView: CellView,
        magnet: SVGElement,
        evt: Event,
    ) => boolean;
    validateUnembedding?: (this: Paper, childView: ElementView) => boolean;
    viewManagement?: boolean | ViewManagementOptions;
    viewport?: ViewportCallback | null;
    width?: Dimension;
}

Type Parameters

ElementItem extends GraphElement = GraphElement

Hierarchy (View Summary)

ReactPaperOptions
GraphProps
PaperEvents
- PaperProps

Index

Properties

afterRender? allowLink? anchorNamespace? async? attributes? autoFreeze? background? beforeRender? cellModel? cellNamespace? cellViewNamespace? cellVisibility? children? cid? className? clickThreshold? collection? connectionPointNamespace? connectionStrategy? connectorNamespace? defaultAnchor? defaultConnectionPoint? defaultConnector? defaultLink? defaultLinkAnchor? defaultRouter? drawGrid? drawGridSize? el? elementSelector? elementView? embeddingMode? events? findParentBy? frontParentOnly? graph? gridSize? guard? height? highlighterNamespace? highlighting? id? initialElements? initialLinks? interactive? labelsLayer? layerViewNamespace? linkAnchorNamespace? linkPinning? linkView? magnetThreshold? markAvailable? measureNode? model? moveThreshold? multiLinks? onBlankContextMenu? onBlankMouseEnter? onBlankMouseLeave? onBlankMouseOut? onBlankMouseOver? onBlankMouseWheel? onBlankPointerClick? onBlankPointerDblClick? onBlankPointerDown? onBlankPointerMove? onBlankPointerUp? onCellContextMenu? onCellHighlight? onCellHighlightInvalid? onCellMouseEnter? onCellMouseLeave? onCellMouseOut? onCellMouseOver? onCellMouseWheel? onCellPointerClick? onCellPointerDblClick? onCellPointerDown? onCellPointerMove? onCellPointerUp? onCellUnhighlight? onCustomEvent? onElementContextMenu? onElementMagnetContextMenu? onElementMagnetPointerClick? onElementMagnetPointerDblClick? onElementMouseEnter? onElementMouseLeave? onElementMouseOut? onElementMouseOver? onElementMouseWheel? onElementPointerClick? onElementPointerDblClick? onElementPointerDown? onElementPointerMove? onElementPointerUp? onElementsSizeChange? onElementsSizeReady? onLinkConnect? onLinkContextMenu? onLinkDisconnect? onLinkMouseEnter? onLinkMouseLeave? onLinkMouseOut? onLinkMouseOver? onLinkMouseWheel? onLinkPointerClick? onLinkPointerDblClick? onLinkPointerDown? onLinkPointerMove? onLinkPointerUp? onLinkSnapConnect? onLinkSnapDisconnect? onPan? onPaperMouseEnter? onPaperMouseLeave? onPinch? onRenderDone? onResize? onScale? onTransform? onTranslate? onViewPostponed? onViewUpdate? overflow? overwriteDefaultPaperElement? preventContextMenu? preventDefaultBlankAction? preventDefaultViewAction? renderElement? restrictTranslate? routerNamespace? scale? snapLabels? snapLinks? snapLinksSelf? sorting? store? style? tagName? theme? useHTMLOverlay? validateConnection? validateEmbedding? validateMagnet? validateUnembedding? viewManagement? viewport? width?

Properties

`Optional`afterRender

afterRender?: AfterRenderCallback

`Optional`allowLink

allowLink?: ((linkView: LinkView, paper: Paper) => boolean) | null

`Optional`anchorNamespace

anchorNamespace?: any

`Optional`async

async?: boolean

`Optional`attributes

attributes?: Record<string, any>

`Optional`autoFreeze

autoFreeze?: boolean

`Optional`background

background?: BackgroundOptions

`Optional`beforeRender

beforeRender?: BeforeRenderCallback

`Optional` `Readonly`cellModel

cellModel?: typeof Cell

Custom cell model to use. It's loaded just once, so it cannot be used as React state.

See

https://docs.jointjs.com/api/dia/Cell

`Optional` `Readonly`cellNamespace

cellNamespace?: unknown

Namespace for cell models. It's loaded just once, so it cannot be used as React state. When added new shape, it will not remove existing ones, it will just add new ones. So { ...shapes, ReactElement } elements are still available.

Default

{ ...shapes, ReactElement }

See

https://docs.jointjs.com/api/shapes

`Optional`cellViewNamespace

cellViewNamespace?: any

`Optional`cellVisibility

cellVisibility?: CellVisibilityCallback | null

`Optional` `Readonly`children

children?: ReactNode

Children to render. Paper automatically wrap the children with the PaperContext, if there is no PaperContext in the parent tree.

`Optional`cid

cid?: string

`Optional` `Readonly`className

className?: string

Class name of the paper element.

`Optional` `Readonly`clickThreshold

clickThreshold?: number

The threshold for click events in pixels. If the mouse moves more than this distance, it will be considered a drag event.

Default

`Optional`collection

collection?: Collection<any>

`Optional`connectionPointNamespace

connectionPointNamespace?: any

`Optional`connectionStrategy

connectionStrategy?: ConnectionStrategy

`Optional`connectorNamespace

connectorNamespace?: any

`Optional`defaultAnchor

defaultAnchor?: AnchorJSON | Anchor

`Optional`defaultConnectionPoint

defaultConnectionPoint?:
    | ConnectionPointJSON
    | ConnectionPoint
    | ((...args: any[]) => ConnectionPoint)

`Optional`defaultConnector

defaultConnector?: Connector | ConnectorJSON

`Optional`defaultLink

defaultLink?:
| Link<Attributes, ModelSetOptions>
| ((cellView: CellView, magnet: SVGElement) => Link)

`Optional`defaultLinkAnchor

defaultLinkAnchor?: AnchorJSON | Anchor

`Optional`defaultRouter

defaultRouter?: Router | RouterJSON

`Optional`drawGrid

drawGrid?: boolean | GridOptions | GridOptions[]

`Optional`drawGridSize

drawGridSize?: number | null

`Optional`el

el?: unknown

`Optional` `Readonly`elementSelector

elementSelector?: (item: GraphElement) => ElementItem

A function that selects the elements to be rendered. It defaults to the GraphElement elements because dia.Element is not a valid React element (it do not change reference after update).

Default

(item: dia.Cell) => BaseElement

See

GraphElement

`Optional`elementView

elementView?: typeof ElementView | ((element: Element) => typeof ElementView)

`Optional`embeddingMode

embeddingMode?: boolean

`Optional`events

events?: _Result<EventsHash>

`Optional`findParentBy

findParentBy?: FindParentByType | FindParentByCallback

`Optional`frontParentOnly

frontParentOnly?: boolean

`Optional` `Readonly`graph

graph?: Graph<Attributes, ModelSetOptions>

Graph instance to use. If not provided, a new graph instance will be created.

See

https://docs.jointjs.com/api/dia/Graph

Default

new dia.Graph({}, { cellNamespace: shapes })

`Optional`gridSize

gridSize?: number

`Optional`guard

guard?: (evt: Event, view: CellView) => boolean

`Optional`height

height?: Dimension

`Optional`highlighterNamespace

highlighterNamespace?: any

`Optional`highlighting

highlighting?: boolean | Record<string, boolean | HighlighterJSON>

`Optional`id

id?: string

`Optional` `Readonly`initialElements

initialElements?: (GraphElement | Element<Attributes, ModelSetOptions>)[]

Initial elements to be added to graph It's loaded just once, so it cannot be used as React state.

`Optional` `Readonly`initialLinks

initialLinks?: (GraphLink<string> | Link<Attributes, ModelSetOptions>)[]

Initial links to be added to graph It's loaded just once, so it cannot be used as React state.

`Optional`interactive

interactive?:
    | boolean
    | ((cellView: CellView, event: string) => boolean | InteractivityOptions)
    | InteractivityOptions

`Optional`labelsLayer

labelsLayer?: string | boolean

`Optional`layerViewNamespace

layerViewNamespace?: any

`Optional`linkAnchorNamespace

linkAnchorNamespace?: any

`Optional`linkPinning

linkPinning?: boolean

`Optional`linkView

linkView?: typeof LinkView | ((link: Link) => typeof LinkView)

`Optional`magnetThreshold

magnetThreshold?: string | number

`Optional`markAvailable

markAvailable?: boolean

`Optional`measureNode

measureNode?: MeasureNodeCallback

`Optional`model

model?: Graph<Attributes, ModelSetOptions>

`Optional`moveThreshold

moveThreshold?: number

`Optional`multiLinks

multiLinks?: boolean

`Optional`onBlankContextMenu

onBlankContextMenu?: (
args: { event: Event; paper: Paper; x: number; y: number },
) => void

`Optional`onBlankMouseEnter

onBlankMouseEnter?: (args: { event: Event; paper: Paper }) => void

`Optional`onBlankMouseLeave

onBlankMouseLeave?: (args: { event: Event; paper: Paper }) => void

`Optional`onBlankMouseOut

onBlankMouseOut?: (args: { event: Event; paper: Paper }) => void

`Optional`onBlankMouseOver

onBlankMouseOver?: (args: { event: Event; paper: Paper }) => void

`Optional`onBlankMouseWheel

onBlankMouseWheel?: (
    args: {
        delta: number;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onBlankPointerClick

onBlankPointerClick?: (
args: { event: Event; paper: Paper; x: number; y: number },
) => void

`Optional`onBlankPointerDblClick

onBlankPointerDblClick?: (
args: { event: Event; paper: Paper; x: number; y: number },
) => void

`Optional`onBlankPointerDown

onBlankPointerDown?: (
args: { event: Event; paper: Paper; x: number; y: number },
) => void

`Optional`onBlankPointerMove

onBlankPointerMove?: (
args: { event: Event; paper: Paper; x: number; y: number },
) => void

`Optional`onBlankPointerUp

onBlankPointerUp?: (
args: { event: Event; paper: Paper; x: number; y: number },
) => void

`Optional`onCellContextMenu

onCellContextMenu?: (
    args: {
        cellView: CellView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onCellHighlight

onCellHighlight?: (
    args: {
        cellView: CellView;
        node: SVGElement;
        options: EventHighlightOptions;
        paper: Paper;
    },
) => void

`Optional`onCellHighlightInvalid

onCellHighlightInvalid?: (
    args: {
        cellView: CellView;
        highlighter: HighlighterView;
        highlighterId: string;
        paper: Paper;
    },
) => void

`Optional`onCellMouseEnter

onCellMouseEnter?: (
args: { cellView: CellView; event: Event; paper: Paper },
) => void

`Optional`onCellMouseLeave

onCellMouseLeave?: (
args: { cellView: CellView; event: Event; paper: Paper },
) => void

`Optional`onCellMouseOut

onCellMouseOut?: (
args: { cellView: CellView; event: Event; paper: Paper },
) => void

`Optional`onCellMouseOver

onCellMouseOver?: (
args: { cellView: CellView; event: Event; paper: Paper },
) => void

`Optional`onCellMouseWheel

onCellMouseWheel?: (
    args: {
        cellView: CellView;
        delta: number;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onCellPointerClick

onCellPointerClick?: (
    args: {
        cellView: CellView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onCellPointerDblClick

onCellPointerDblClick?: (
    args: {
        cellView: CellView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onCellPointerDown

onCellPointerDown?: (
    args: {
        cellView: CellView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onCellPointerMove

onCellPointerMove?: (
    args: {
        cellView: CellView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onCellPointerUp

onCellPointerUp?: (
    args: {
        cellView: CellView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onCellUnhighlight

onCellUnhighlight?: (
    args: {
        cellView: CellView;
        node: SVGElement;
        options: EventHighlightOptions;
        paper: Paper;
    },
) => void

`Optional`onCustomEvent

onCustomEvent?: (args: { args: any[]; eventName: string; paper: Paper }) => void

`Optional`onElementContextMenu

onElementContextMenu?: (
    args: {
        elementView: ElementView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onElementMagnetContextMenu

onElementMagnetContextMenu?: (
    args: {
        elementView: ElementView;
        event: Event;
        magnetNode: SVGElement;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onElementMagnetPointerClick

onElementMagnetPointerClick?: (
    args: {
        elementView: ElementView;
        event: Event;
        magnetNode: SVGElement;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onElementMagnetPointerDblClick

onElementMagnetPointerDblClick?: (
    args: {
        elementView: ElementView;
        event: Event;
        magnetNode: SVGElement;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onElementMouseEnter

onElementMouseEnter?: (
args: { elementView: ElementView; event: Event; paper: Paper },
) => void

`Optional`onElementMouseLeave

onElementMouseLeave?: (
args: { elementView: ElementView; event: Event; paper: Paper },
) => void

`Optional`onElementMouseOut

onElementMouseOut?: (
args: { elementView: ElementView; event: Event; paper: Paper },
) => void

`Optional`onElementMouseOver

onElementMouseOver?: (
args: { elementView: ElementView; event: Event; paper: Paper },
) => void

`Optional`onElementMouseWheel

onElementMouseWheel?: (
    args: {
        delta: number;
        elementView: ElementView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onElementPointerClick

onElementPointerClick?: (
    args: {
        elementView: ElementView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onElementPointerDblClick

onElementPointerDblClick?: (
    args: {
        elementView: ElementView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onElementPointerDown

onElementPointerDown?: (
    args: {
        elementView: ElementView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onElementPointerMove

onElementPointerMove?: (
    args: {
        elementView: ElementView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onElementPointerUp

onElementPointerUp?: (
    args: {
        elementView: ElementView;
        event: Event;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional` `Readonly`onElementsSizeChange

onElementsSizeChange?: (options: OnLoadOptions) => void

Event called when the paper is resized. It is useful for like onLoad event to do some layout or other operations with graph or paper.

`Optional` `Readonly`onElementsSizeReady

onElementsSizeReady?: (options: OnLoadOptions) => void

Event called when all elements are properly measured (has all elements width and height greater than 1 - default). In react, we cannot detect jointjs paper render:done event properly, so we use this special event to check if all elements are measured. It is useful for like onLoad event to do some layout or other operations with graph or paper.

`Optional`onLinkConnect

onLinkConnect?: (
    args: {
        arrowhead: LinkEnd;
        event: Event;
        linkView: LinkView;
        newCellView: CellView;
        newCellViewMagnet: SVGElement;
        paper: Paper;
    },
) => void

`Optional`onLinkContextMenu

onLinkContextMenu?: (
    args: {
        event: Event;
        linkView: LinkView;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onLinkDisconnect

onLinkDisconnect?: (
    args: {
        arrowhead: LinkEnd;
        event: Event;
        linkView: LinkView;
        paper: Paper;
        previousCellView: CellView;
        previousCellViewMagnet: SVGElement;
    },
) => void

`Optional`onLinkMouseEnter

onLinkMouseEnter?: (
args: { event: Event; linkView: LinkView; paper: Paper },
) => void

`Optional`onLinkMouseLeave

onLinkMouseLeave?: (
args: { event: Event; linkView: LinkView; paper: Paper },
) => void

`Optional`onLinkMouseOut

onLinkMouseOut?: (
args: { event: Event; linkView: LinkView; paper: Paper },
) => void

`Optional`onLinkMouseOver

onLinkMouseOver?: (
args: { event: Event; linkView: LinkView; paper: Paper },
) => void

`Optional`onLinkMouseWheel

onLinkMouseWheel?: (
    args: {
        delta: number;
        event: Event;
        linkView: LinkView;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onLinkPointerClick

onLinkPointerClick?: (
    args: {
        event: Event;
        linkView: LinkView;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onLinkPointerDblClick

onLinkPointerDblClick?: (
    args: {
        event: Event;
        linkView: LinkView;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onLinkPointerDown

onLinkPointerDown?: (
    args: {
        event: Event;
        linkView: LinkView;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onLinkPointerMove

onLinkPointerMove?: (
    args: {
        event: Event;
        linkView: LinkView;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onLinkPointerUp

onLinkPointerUp?: (
    args: {
        event: Event;
        linkView: LinkView;
        paper: Paper;
        x: number;
        y: number;
    },
) => void

`Optional`onLinkSnapConnect

onLinkSnapConnect?: (
    args: {
        arrowhead: LinkEnd;
        event: Event;
        linkView: LinkView;
        newCellView: CellView;
        newCellViewMagnet: SVGElement;
        paper: Paper;
    },
) => void

`Optional`onLinkSnapDisconnect

onLinkSnapDisconnect?: (
    args: {
        arrowhead: LinkEnd;
        event: Event;
        linkView: LinkView;
        paper: Paper;
        previousCellView: CellView;
        previousCellViewMagnet: SVGElement;
    },
) => void

`Optional`onPan

onPan?: (
args: { deltaX: number; deltaY: number; event: Event; paper: Paper },
) => void

`Optional`onPaperMouseEnter

onPaperMouseEnter?: (args: { event: Event; paper: Paper }) => void

`Optional`onPaperMouseLeave

onPaperMouseLeave?: (args: { event: Event; paper: Paper }) => void

`Optional`onPinch

onPinch?: (
    args: {
        event: Event;
        paper: Paper;
        scale: number;
        x: number;
        y: number;
    },
) => void

`Optional`onRenderDone

onRenderDone?: (
args: { opt: unknown; paper: Paper; stats: UpdateStats },
) => void

`Optional`onResize

onResize?: (
args: { data: unknown; height: number; paper: Paper; width: number },
) => void

`Optional`onScale

onScale?: (
args: { data: unknown; paper: Paper; sx: number; sy: number },
) => void

`Optional`onTransform

onTransform?: (args: { data: unknown; matrix: DOMMatrix; paper: Paper }) => void

`Optional`onTranslate

onTranslate?: (
args: { data: unknown; paper: Paper; tx: number; ty: number },
) => void

`Optional`onViewPostponed

onViewPostponed?: (view: View<any, any>, flag: number, paper: Paper) => boolean

`Optional`onViewUpdate

onViewUpdate?: (
    view: View<any, any>,
    flag: number,
    priority: number,
    opt: { [key: string]: any },
    paper: Paper,
) => void

`Optional`overflow

overflow?: boolean

`Optional` `Readonly`overwriteDefaultPaperElement

overwriteDefaultPaperElement?: (
paperCtx: PaperContext,
) => SVGElement | HTMLElement

On load custom element. If provided, it must return valid HTML or SVG element and it will be replaced with the default paper element. So it overwrite default paper rendering. It is used internally for example to render PaperScroller from joint plus package.

Type Declaration

- (paperCtx: PaperContext): SVGElement | HTMLElement
- Parameters
  - paperCtx: PaperContext
    The paper context
  Returns SVGElement | HTMLElement

`Optional`preventContextMenu

preventContextMenu?: boolean

`Optional`preventDefaultBlankAction

preventDefaultBlankAction?: boolean

`Optional`preventDefaultViewAction

preventDefaultViewAction?: boolean

`Optional` `Readonly`renderElement

renderElement?: RenderElement<ElementItem>

A function that renders the element.

Note: Jointjs works by default with SVG's so by default renderElement is append inside the SVGElement node. To use HTML elements, you need to use the HTMLNode component or foreignObject element.

This is called when the data from elementSelector changes.

Example

Example with global component:

type BaseElementWithData = InferElement<typeof initialElements>
function RenderElement({ label }: BaseElementWithData) {
 return <HTMLElement className="node">{label}</HTMLElement>
}

Example

Example with local component:


type BaseElementWithData = InferElement<typeof initialElements>
const renderElement: RenderElement<BaseElementWithData> = useCallback(
   (element) => <HTMLElement className="node">{element.label}</HTMLElement>,
   []
)

`Optional`restrictTranslate

restrictTranslate?: boolean | PlainRect | RestrictTranslateCallback

`Optional`routerNamespace

routerNamespace?: any

`Optional` `Readonly`scale

scale?: number

The scale of the paper. It's useful to create for example a zoom feature or minimap Paper.

`Optional`snapLabels

snapLabels?: boolean

`Optional`snapLinks

snapLinks?: boolean | SnapLinksOptions

`Optional`snapLinksSelf

snapLinksSelf?: boolean | { distance: number }

`Optional`sorting

sorting?: sorting

`Optional` `Readonly`store

store?: Store

Store is build around graph, it handles react updates and states, it can be created separately and passed to the provider via createStore function.

See

createStore

`Optional` `Readonly`style

style?: CSSProperties

The style of the paper element.

`Optional`tagName

tagName?: string

`Optional`theme

theme?: string

`Optional` `Readonly`useHTMLOverlay

useHTMLOverlay?: boolean

Enabled if renderElements is render to pure HTML elements. By default, joint/react renderElements to SVG elements, so for using HTML elements without this prop, you need to use foreignObject element.

Default

false

`Optional`validateConnection

validateConnection?: (
    cellViewS: CellView,
    magnetS: SVGElement,
    cellViewT: CellView,
    magnetT: SVGElement,
    end: LinkEnd,
    linkView: LinkView,
) => boolean

`Optional`validateEmbedding

validateEmbedding?: (
    this: Paper,
    childView: ElementView,
    parentView: ElementView,
) => boolean

`Optional`validateMagnet

validateMagnet?: (cellView: CellView, magnet: SVGElement, evt: Event) => boolean

`Optional`validateUnembedding

validateUnembedding?: (this: Paper, childView: ElementView) => boolean

`Optional`viewManagement

viewManagement?: boolean | ViewManagementOptions

`Optional`viewport

viewport?: ViewportCallback | null

Deprecated

disable legacyMode and use cellVisibility instead

`Optional`width

width?: Dimension

Interface PaperProps<ElementItem>

See

Type Parameters

Hierarchy (View Summary)

Index

Properties

Properties

OptionalafterRender

OptionalallowLink

OptionalanchorNamespace

Optionalasync

Optionalattributes

OptionalautoFreeze

Optionalbackground

OptionalbeforeRender

Optional ReadonlycellModel

See

Optional ReadonlycellNamespace

Default

See

OptionalcellViewNamespace

OptionalcellVisibility

Optional Readonlychildren

Optionalcid

Optional ReadonlyclassName

Optional ReadonlyclickThreshold

Default

Optionalcollection

OptionalconnectionPointNamespace

OptionalconnectionStrategy

OptionalconnectorNamespace

OptionaldefaultAnchor

OptionaldefaultConnectionPoint

OptionaldefaultConnector

OptionaldefaultLink

OptionaldefaultLinkAnchor

OptionaldefaultRouter

OptionaldrawGrid

OptionaldrawGridSize

Optionalel

Optional ReadonlyelementSelector

Default

See

OptionalelementView

OptionalembeddingMode

Optionalevents

OptionalfindParentBy

OptionalfrontParentOnly

Optional Readonlygraph

See

Default

OptionalgridSize

Optionalguard

Optionalheight

OptionalhighlighterNamespace

Optionalhighlighting

Optionalid

Optional ReadonlyinitialElements

Optional ReadonlyinitialLinks

Optionalinteractive

OptionallabelsLayer

OptionallayerViewNamespace

OptionallinkAnchorNamespace

OptionallinkPinning

OptionallinkView

OptionalmagnetThreshold

OptionalmarkAvailable

OptionalmeasureNode

Optionalmodel

OptionalmoveThreshold

OptionalmultiLinks

OptionalonBlankContextMenu

OptionalonBlankMouseEnter

OptionalonBlankMouseLeave

OptionalonBlankMouseOut

OptionalonBlankMouseOver

OptionalonBlankMouseWheel

OptionalonBlankPointerClick

OptionalonBlankPointerDblClick

OptionalonBlankPointerDown

`Optional`afterRender

`Optional`allowLink

`Optional`anchorNamespace

`Optional`async

`Optional`attributes

`Optional`autoFreeze

`Optional`background

`Optional`beforeRender

`Optional` `Readonly`cellModel

`Optional` `Readonly`cellNamespace

`Optional`cellViewNamespace

`Optional`cellVisibility

`Optional` `Readonly`children

`Optional`cid

`Optional` `Readonly`className

`Optional` `Readonly`clickThreshold

`Optional`collection

`Optional`connectionPointNamespace

`Optional`connectionStrategy

`Optional`connectorNamespace

`Optional`defaultAnchor

`Optional`defaultConnectionPoint

`Optional`defaultConnector

`Optional`defaultLink

`Optional`defaultLinkAnchor

`Optional`defaultRouter

`Optional`drawGrid

`Optional`drawGridSize

`Optional`el

`Optional` `Readonly`elementSelector

`Optional`elementView

`Optional`embeddingMode

`Optional`events

`Optional`findParentBy

`Optional`frontParentOnly

`Optional` `Readonly`graph

`Optional`gridSize

`Optional`guard

`Optional`height

`Optional`highlighterNamespace

`Optional`highlighting

`Optional`id

`Optional` `Readonly`initialElements

`Optional` `Readonly`initialLinks

`Optional`interactive

`Optional`labelsLayer

`Optional`layerViewNamespace

`Optional`linkAnchorNamespace

`Optional`linkPinning

`Optional`linkView

`Optional`magnetThreshold

`Optional`markAvailable

`Optional`measureNode

`Optional`model

`Optional`moveThreshold

`Optional`multiLinks

`Optional`onBlankContextMenu

`Optional`onBlankMouseEnter

`Optional`onBlankMouseLeave

`Optional`onBlankMouseOut

`Optional`onBlankMouseOver

`Optional`onBlankMouseWheel

`Optional`onBlankPointerClick

`Optional`onBlankPointerDblClick

`Optional`onBlankPointerDown

`Optional`onBlankPointerMove

`Optional`onBlankPointerUp

`Optional`onCellContextMenu

`Optional`onCellHighlight

`Optional`onCellHighlightInvalid

`Optional`onCellMouseEnter

`Optional`onCellMouseLeave

`Optional`onCellMouseOut

`Optional`onCellMouseOver

`Optional`onCellMouseWheel

`Optional`onCellPointerClick

`Optional`onCellPointerDblClick

`Optional`onCellPointerDown

`Optional`onCellPointerMove

`Optional`onCellPointerUp