Class Canvas

Class handling the visualization of the graph.

Superclass: BaseClass

Used By:

  • app

  • DrawingVertex

  • Embedder

Attributes

_instance

src/fe/canvas.ts
private static _instance: Canvas

_canvas

src/fe/canvas.ts
private _canvas: HTMLElement

_graph

src/fe/canvas.ts
private _graph: Graph<DrawingVertex>

_edgeMap

src/fe/canvas.ts
private readonly _edgeMap: Map<DrawingVertex, Map<DrawingVertex, DrawingEdge>>

_pointerDown

src/fe/canvas.ts
private _pointerDown: boolean

_domPoint

src/fe/canvas.ts
private _domPoint: DOMPointReadOnly

For zooming and panning the distance between two points, while considering the viewBox, needs to be calculated. Using DOMPointReadOnly objects for this makes it easier, because this object is affected by the viewBox too.

Getter Methods

height

src/fe/canvas.ts
public get height(): number

width

src/fe/canvas.ts
public get width(): number

center

src/fe/canvas.ts
public get center(): Point

Static Methods

getInstance

public static getInstance(): Canvas

Methods

getDomPoint

private getDomPoint(event: PointerEvent | WheelEvent): DOMPointReadOnly

onPointerDown

private onPointerDown(event: PointerEvent): void

onPointerUp

private onPointerUp(): void

onPointerMove

private onPointerMove(event: PointerEvent): void

onScroll

private onScroll(event: WheelEvent): void

addDrawing

private addDrawing(drawing: SVGElement): voi

getDrawingEdge

private getDrawingEdge(vertexA: DrawingVertex, vertexB: DrawingVertex): DrawingEdge

drawEdge

private drawEdge(vertexA: DrawingVertex, vertexB: DrawingVertex): void

animate

private animate(): void

draw

public draw(graph: Graph<DrawingVertices>): void

Behaviours

The Canvas only supports two behaviours: Panning and zooming. Both are implemented by the CanvasEvents module.