Interface: CanvasApi

Defined in: src/diagram/canvasApi.ts:23

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>

Defined in: src/diagram/canvasApi.ts:155

Starts animation for graph elements and links.

Parameters

Parameter	Type	Description
setupChanges	() => void	immediately called function to perform animatable changes on graph
duration?	number	duration animation duration in milliseconds (default is 500)

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);
});

---

centerContent()

centerContent(options?): Promise<void>

Defined in: src/diagram/canvasApi.ts:73

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>

---

centerTo()

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

Defined in: src/diagram/canvasApi.ts:65

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>

---

exportRaster()

exportRaster(options?): Promise<string>

Defined in: src/diagram/canvasApi.ts:130

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>

---

exportSvg()

exportSvg(options?): Promise<string>

Defined in: src/diagram/canvasApi.ts:125

Exports the diagram as a serialized into text SVG document with <foreignObject> HTML layers inside.

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>

---

focus()

focus(): void

Defined in: src/diagram/canvasApi.ts:58

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

Returns

void

---

getScale()

getScale(): number

Defined in: src/diagram/canvasApi.ts:77

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

Returns

number

---

isAnimatingGraph()

isAnimatingGraph(): boolean

Defined in: src/diagram/canvasApi.ts:137

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

Returns

boolean

See

CanvasApi.animateGraph

---

setPointerMode()

setPointerMode(value): void

Defined in: src/diagram/canvasApi.ts:53

Sets default action on moving pointer with pressed main button.

Parameters

Parameter	Type
value	CanvasPointerMode

Returns

void

---

setScale()

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

Defined in: src/diagram/canvasApi.ts:85

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>

---

zoomBy()

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

Defined in: src/diagram/canvasApi.ts:91

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

Parameters

Parameter	Type
value	number
options?	ScaleOptions

Returns

Promise<void>

See

CanvasApi.setScale

---

zoomIn()

zoomIn(scaleOptions?): Promise<void>

Defined in: src/diagram/canvasApi.ts:97

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

Parameters

Parameter	Type
scaleOptions?	ScaleOptions

Returns

Promise<void>

See

CanvasApi.zoomBy

---

zoomOut()

zoomOut(scaleOptions?): Promise<void>

Defined in: src/diagram/canvasApi.ts:103

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

Parameters

Parameter	Type
scaleOptions?	ScaleOptions

Returns

Promise<void>

See

CanvasApi.zoomBy

---

zoomToFit()

zoomToFit(options?): Promise<void>

Defined in: src/diagram/canvasApi.ts:111

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

---

zoomToFitRect()

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

Defined in: src/diagram/canvasApi.ts:117

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