Interface: CanvasApi

Describes an API to interact with a scrollable graph canvas.

Properties

Property	Modifier	Type	Description
events	readonly	Events<CanvasEvents>	Events for the scrollable graph canvas.
metrics	readonly	CanvasMetrics	Live state for the current viewport size and transformation. Allows to convert between different canvas coordinate types. This state can be captured to provide freezed state via CanvasMetrics.snapshot.
pointerMode	readonly	CanvasPointerMode	Default action on moving pointer with pressed main button. Initial mode is panning.
renderingState	readonly	RenderingState	Canvas-specific state for rendering graph content (elements, links, etc).
zoomOptions	readonly	Required<ZoomOptions>	Options for the scale-affecting operations on the canvas.

Methods

animateGraph()

animateGraph(setupChanges, duration?): Promise<void>

Starts animation for graph elements and links.

Parameters

Parameter	Type	Description
setupChanges	() => void	immediately called function to perform animatable changes on graph
duration?	number	animation duration in milliseconds (requires custom CSS to override)

Returns

Promise<void>

promise which resolves when this animation ends

Example:

// Animate element movement by 200px (in paper coordinates) on the x-axis
const target = model.getElement(...);
canvas.animateGraph(() => {
    const {x, y} = target.position;
    target.setPosition(x + 200, y);
});

Defined in

diagram/canvasApi.ts:148

---

centerContent()

centerContent(options?): Promise<void>

Changes the viewport such that center of the bounding box for the graph content is aligned to the viewport center.

Parameters

Parameter	Type
options?	ViewportOptions

Returns

Promise<void>

Defined in

diagram/canvasApi.ts:67

---

centerTo()

centerTo(paperPosition?, options?): Promise<void>

Changes the viewport such that its center is aligned to specified point in paper coordinates.

If no point is specified, aligns the viewport center with the canvas center instead.

Parameters

Parameter	Type
paperPosition?	Vector
options?	CenterToOptions

Returns

Promise<void>

Defined in

diagram/canvasApi.ts:59

---

exportRaster()

exportRaster(options?): Promise<string>

Exports the diagram as a rendered raster image (e.g. PNG, JPEG, etc) serialized into base64-encoded data URL.

Parameters

Parameter	Type
options?	ExportRasterOptions

Returns

Promise<string>

Defined in

diagram/canvasApi.ts:123

---

exportSvg()

exportSvg(options?): Promise<string>

Exports the diagram as a serialized SVG document (XML text content).

Exported SVG document would include all diagram content as well as every CSS rule which applies to any DOM element from the diagram content.

Parameters

Parameter	Type
options?	ExportSvgOptions

Returns

Promise<string>

Defined in

diagram/canvasApi.ts:118

---

focus()

focus(): void

Sets the focus on the graph canvas itself to be able to handle keyboard interaction within its layers.

Returns

void

Defined in

diagram/canvasApi.ts:52

---

getScale()

getScale(): number

Returns the current scale of the graph content in relation to the viewport.

Returns

number

Defined in

diagram/canvasApi.ts:71

---

isAnimatingGraph()

isAnimatingGraph(): boolean

Returns true if there is an active animation for graph or links on the canvas; otherwise false.

Returns

boolean

See

CanvasApi.animateGraph

Defined in

diagram/canvasApi.ts:130

---

setPointerMode()

setPointerMode(value): void

Sets default action on moving pointer with pressed main button.

Parameters

Parameter	Type
value	CanvasPointerMode

Returns

void

Defined in

diagram/canvasApi.ts:47

---

setScale()

setScale(value, options?): Promise<void>

Changes the viewport to set specific scale of the graph content.

If pivot is specified, the viewport is changed as if the canvas was zoomed-in or zoomed-out at that point of the canvas (e.g. by mouse wheel or pinch-zoom at the pivot).

Parameters

Parameter	Type
value	number
options?	ScaleOptions

Returns

Promise<void>

Defined in

diagram/canvasApi.ts:79

---

zoomBy()

zoomBy(value, options?): Promise<void>

Same as setScale() but relative to the current scale value.

Parameters

Parameter	Type
value	number
options?	ScaleOptions

Returns

Promise<void>

See

CanvasApi.setScale

Defined in

diagram/canvasApi.ts:85

---

zoomIn()

zoomIn(scaleOptions?): Promise<void>

Same as zoomBy() with a positive zoom step value.

Parameters

Parameter	Type
scaleOptions?	ScaleOptions

Returns

Promise<void>

See

CanvasApi.zoomBy

Defined in

diagram/canvasApi.ts:91

---

zoomOut()

zoomOut(scaleOptions?): Promise<void>

Same as zoomBy() with a negative zoom step value.

Parameters

Parameter	Type
scaleOptions?	ScaleOptions

Returns

Promise<void>

See

CanvasApi.zoomBy

Defined in

diagram/canvasApi.ts:97

---

zoomToFit()

zoomToFit(options?): Promise<void>

Changes the viewport to fit the whole graph content if possible.

If the diagram is empty, centers the viewport at the middle of the canvas.

Parameters

Parameter	Type
options?	ViewportOptions

Returns

Promise<void>

See

CanvasApi.zoomToFitRect

Defined in

diagram/canvasApi.ts:105

---

zoomToFitRect()

zoomToFitRect(paperRect, options?): Promise<void>

Changes the viewport to fit specified rectangle area in paper coordinates if possible.

Parameters

Parameter	Type
paperRect	Rect
options?	ViewportOptions

Returns

Promise<void>

See

CanvasApi.zoomToFit

Defined in

diagram/canvasApi.ts:111