Class HTML5Canvas

Hierarchy

InteractiveCanvas
- HTML5Canvas

Implements

Canvas

Index

Constructors

constructor

Properties

Accessors

Methods

Constructors

constructor

new HTML5Canvas(element: HTMLCanvasElement): HTML5Canvas

Overrides InteractiveCanvas.constructor
- Defined in canvas/HTML5Canvas.ts:43
Parameters
- element: HTMLCanvasElement
Returns HTML5Canvas

Properties

Private _clickedElement

_clickedElement: DiagramElement<any> | null

Protected _ctx

_ctx: CanvasRenderingContext2D

Private _element

_element: HTMLCanvasElement

Private _isMoving

_isMoving: boolean

Private _startedX

_startedX: number

Private _startedY

_startedY: number

Accessors

background

get background(): string | any
set background(value: string | any): void

Inherited from AbstractCanvas.background
- Defined in canvas/AbstractCanvas.ts:80
Returns string | any
Inherited from AbstractCanvas.background
- Defined in canvas/AbstractCanvas.ts:84
Parameters
- value: string | any
Returns void

cursor

get cursor(): Cursor
set cursor(cursor: Cursor): void

Overrides InteractiveCanvas.cursor
- Defined in canvas/HTML5Canvas.ts:37
Returns Cursor
Overrides InteractiveCanvas.cursor
- Defined in canvas/HTML5Canvas.ts:41
Parameters
- cursor: Cursor
Returns void

diagram

get diagram(): Diagram | null
set diagram(val: Diagram | null): void

Inherited from AbstractCanvas.diagram
- Defined in canvas/AbstractCanvas.ts:52
Returns Diagram | null
Inherited from AbstractCanvas.diagram
- Defined in canvas/AbstractCanvas.ts:47
Parameters
- val: Diagram | null
Returns void

grid

get grid(): boolean
set grid(val: boolean): void

Inherited from AbstractCanvas.grid
- Defined in canvas/AbstractCanvas.ts:43
Returns boolean
Inherited from AbstractCanvas.grid
- Defined in canvas/AbstractCanvas.ts:38
Parameters
- val: boolean
Returns void

gridX

get gridX(): number

Inherited from AbstractCanvas.gridX
- Defined in canvas/AbstractCanvas.ts:56
Returns number

gridY

get gridY(): number

Inherited from AbstractCanvas.gridY
- Defined in canvas/AbstractCanvas.ts:60
Returns number

height

get height(): number

Overrides AbstractCanvas.height
- Defined in canvas/HTML5Canvas.ts:33
Returns number

hoveredElement

get hoveredElement(): DiagramElement<any> | null
set hoveredElement(element: DiagramElement<any> | null): void

Inherited from InteractiveCanvas.hoveredElement
- Defined in canvas/InteractiveCanvas.ts:32
Sets the element being hovered over

Returns DiagramElement<any> | null
Inherited from InteractiveCanvas.hoveredElement
- Defined in canvas/InteractiveCanvas.ts:19
Sets the element being hovered over

Parameters
- element: DiagramElement<any> | null
  
  The new element
Returns void

offsetX

get offsetX(): number

Inherited from AbstractCanvas.offsetX
- Defined in canvas/AbstractCanvas.ts:64
Returns number

offsetY

get offsetY(): number

Inherited from AbstractCanvas.offsetY
- Defined in canvas/AbstractCanvas.ts:68
Returns number

selectedElements

get selectedElements(): Set<DiagramElement<any>>

Inherited from InteractiveCanvas.selectedElements
- Defined in canvas/InteractiveCanvas.ts:36
Returns Set<DiagramElement<any>>

width

get width(): number

Overrides AbstractCanvas.width
- Defined in canvas/HTML5Canvas.ts:29
Returns number

zoom

get zoom(): number
set zoom(value: number): void

Inherited from AbstractCanvas.zoom
- Defined in canvas/AbstractCanvas.ts:72
Returns number
Inherited from AbstractCanvas.zoom
- Defined in canvas/AbstractCanvas.ts:76
Parameters
- value: number
Returns void

zoomHeight

get zoomHeight(): number

Inherited from AbstractCanvas.zoomHeight
- Defined in canvas/AbstractCanvas.ts:93
Returns number

zoomWidth

get zoomWidth(): number

Inherited from AbstractCanvas.zoomWidth
- Defined in canvas/AbstractCanvas.ts:89
Returns number

Methods

addSelection

addSelection(element: DiagramElement<any>): void

Inherited from InteractiveCanvas.addSelection
- Defined in canvas/InteractiveCanvas.ts:86
Selects a given element

Parameters
- element: DiagramElement<any>
Returns void

clearSelection

clearSelection(): void

Inherited from InteractiveCanvas.clearSelection
- Defined in canvas/InteractiveCanvas.ts:135
Clears the selection of all canvas elements

Returns void

clipRectangle

clipRectangle(bounds: Bounds): void

Inherited from AbstractCanvas.clipRectangle
- Defined in canvas/AbstractCanvas.ts:190
Clips the canvas to a rectangle

Parameters
- bounds: Bounds
Returns void

deleteSelection

deleteSelection(element: DiagramElement<any>): boolean

Inherited from InteractiveCanvas.deleteSelection
- Defined in canvas/InteractiveCanvas.ts:102
Deselects a given element

Parameters
- element: DiagramElement<any>
Returns boolean

drawLine

drawLine(line: Line, stroke: Stroke, targetTip: LineTip, sourceTip: LineTip): void

Implementation of Canvas.drawLine

Inherited from AbstractCanvas.drawLine
- Defined in canvas/AbstractCanvas.ts:206
Parameters
- line: Line
- stroke: Stroke
- targetTip: LineTip
- sourceTip: LineTip
Returns void

drawRectangle

drawRectangle(bounds: Bounds): void

Inherited from AbstractCanvas.drawRectangle
- Defined in canvas/AbstractCanvas.ts:128
Draws a rectangle within the given bounds

Parameters
- bounds: Bounds
Returns void

drawSimpleLine

drawSimpleLine(x1: number, y1: number, x2: number, y2: number, stroke: Stroke): void

Implementation of Canvas.drawSimpleLine

Inherited from AbstractCanvas.drawSimpleLine
- Defined in canvas/AbstractCanvas.ts:198
Draws a simple line from four coordinates

Parameters
- x1: number
- y1: number
- x2: number
- y2: number
- stroke: Stroke
Returns void

drawText

drawText(text: string, x: number, y: number, font: Font, maxWidth?: undefined | number, hAlign?: TextAlign, vAlign?: Baseline): void

Implementation of Canvas.drawText

Inherited from AbstractCanvas.drawText
- Defined in canvas/AbstractCanvas.ts:166
Draws a text

Parameters
- text: string
  
  The text to draw
- x: number
  
  The text X position
- y: number
  
  The text Y position
- font: Font
  
  The font to use
- Optional maxWidth: undefined | number
  
  The maximum width of the text
- Default value hAlign: TextAlign = "left"
  
  The horizontal alignment
- Default value vAlign: Baseline = "middle"
  
  The vertical alignment
Returns void

Private extractNewEdgeWaypoint

extractNewEdgeWaypoint(edge: Edge<any>, px: number, py: number): void

- Defined in canvas/HTML5Canvas.ts:324
Extracts a new edge waypoint

Parameters
- edge: Edge<any>
  
  The edge who receives the new waypoint
- px: number
  
  X position
- py: number
  
  Y position
Returns void

fillRectangle

fillRectangle(bounds: Bounds, fill: Fill): void

Implementation of Canvas.fillRectangle

Inherited from AbstractCanvas.fillRectangle
- Defined in canvas/AbstractCanvas.ts:138
Fills a rectangle

Parameters
- bounds: Bounds
  
  The rectangle's bounds
- fill: Fill
  
  The fill to use
Returns void

generateImage

generateImage(zoom: number, format?: string, quality?: undefined | number): string

- Defined in canvas/HTML5Canvas.ts:252
Generates an image data URL from the canvas

Parameters
- zoom: number
  
  The zoom factor used for the generated image
- Default value format: string = "image/png"
  
  The format as mime type. By default this is image/png
- Optional quality: undefined | number
  
  If JPEG, a quality can be specified
Returns string

A data URL covering the image data

generatePDF

generatePDF(zoom: number): string

- Defined in canvas/HTML5Canvas.ts:307
Generates an SVG data URL from the canvas

Parameters
- zoom: number
  
  The zoom factor used for the generated image
Returns string

A data URL covering the image data

generateSVG

generateSVG(zoom: number): string

- Defined in canvas/HTML5Canvas.ts:291
Generates an SVG data URL from the canvas

Parameters
- zoom: number
  
  The zoom factor used for the generated image
Returns string

A data URL covering the image data

getElementByPosition

getElementByPosition(x: number, y: number): DiagramElement<any> | null

Inherited from InteractiveCanvas.getElementByPosition
- Defined in canvas/InteractiveCanvas.ts:62
Returns the element at the given position

Parameters
- x: number
- y: number
Returns DiagramElement<any> | null

Protected getElementCoordinates

getElementCoordinates(target: DiagramElement<any>): [number, number]

Inherited from AbstractCanvas.getElementCoordinates
- Defined in canvas/AbstractCanvas.ts:276
Converts global coordinates to element based coordinates

Parameters
- target: DiagramElement<any>
Returns [number, number]

getHandleByPosition

getHandleByPosition(x: number, y: number): Handle | null

Inherited from InteractiveCanvas.getHandleByPosition
- Defined in canvas/InteractiveCanvas.ts:74
Returns the handle at the given position

Parameters
- x: number
- y: number
Returns Handle | null

Protected invalidate

invalidate(): void

Inherited from AbstractCanvas.invalidate
- Defined in canvas/AbstractCanvas.ts:255
Invalidates the canvas by emptying it

Returns void

isSelected

isSelected(element: DiagramElement<any>): boolean

Inherited from InteractiveCanvas.isSelected
- Defined in canvas/InteractiveCanvas.ts:128
Tests whether an element is selected

Parameters
- element: DiagramElement<any>
Returns boolean

labelLine

labelLine(line: Line, font: Font, label: string, position?: number): void

Inherited from AbstractCanvas.labelLine
- Defined in canvas/AbstractCanvas.ts:210
Parameters
- line: Line
- font: Font
- label: string
- Default value position: number = 0
Returns void

measureTextWidth

measureTextWidth(text: string, font: Font): number

Implementation of Canvas.measureTextWidth

Inherited from AbstractCanvas.measureTextWidth
- Defined in canvas/AbstractCanvas.ts:178
Measures the width of a text

Parameters
- text: string
  
  The text to measure
- font: Font
  
  The font to use
Returns number

moveElement

moveElement(element: DiagramElement<any>, dx: number, dy: number): void

Inherited from InteractiveCanvas.moveElement
- Defined in canvas/InteractiveCanvas.ts:117
Moves an element on the canvas

Parameters
- element: DiagramElement<any>
  
  The element to move
- dx: number
  
  Movement in X direction
- dy: number
  
  Movement in Y direction
Returns void

moveOffset

moveOffset(dx: number, dy: number): void

Inherited from AbstractCanvas.moveOffset
- Defined in canvas/AbstractCanvas.ts:233
Move the offset point of the canvas

Parameters
- dx: number
- dy: number
Returns void

onContextMenu

onContextMenu(event: Event): void

- Defined in canvas/HTML5Canvas.ts:172
Handles context menu events on the element

Parameters
- event: Event
Returns void

onKeyPress

onKeyPress(event: KeyboardEvent): void

- Defined in canvas/HTML5Canvas.ts:76
Parameters
- event: KeyboardEvent
Returns void

onLeftClick

onLeftClick(clickedElement: DiagramElement<any> | null, event: MouseEvent): void

- Defined in canvas/HTML5Canvas.ts:194
Handles a left click in the canvas

Parameters
- clickedElement: DiagramElement<any> | null
  
  The clicked element or null, if no element was hit
- event: MouseEvent
  
  The mouse event triggered
Returns void

onMiddleClick

onMiddleClick(clickedElement: DiagramElement<any> | null, event: MouseEvent): void

- Defined in canvas/HTML5Canvas.ts:220
Handles a middle click in the canvas

Parameters
- clickedElement: DiagramElement<any> | null
  
  The clicked element or null, if no element was hit
- event: MouseEvent
  
  The mouse event triggered
Returns void

onMouseDown

onMouseDown(event: MouseEvent): void

- Defined in canvas/HTML5Canvas.ts:85
Handles when a mouse button is pushed down on the canvas

Parameters
- event: MouseEvent
Returns void

onMouseMove

onMouseMove(event: MouseEvent): void

- Defined in canvas/HTML5Canvas.ts:118
Handles when a mouse is moved over the canvas

Parameters
- event: MouseEvent
Returns void

onMouseUp

onMouseUp(event: MouseEvent): void

- Defined in canvas/HTML5Canvas.ts:96
Handles when a mouse button is released on the canvas

Parameters
- event: MouseEvent
Returns void

onMouseWheel

onMouseWheel(delta: number, x: number, y: number): void

- Defined in canvas/HTML5Canvas.ts:180
Handles when the mouse wheel is scrolled over the canvas

Parameters
- delta: number
- x: number
- y: number
Returns void

onRightClick

onRightClick(clickedElement: DiagramElement<any> | null, event: MouseEvent): void

- Defined in canvas/HTML5Canvas.ts:229
Handles a right click in the canvas

Parameters
- clickedElement: DiagramElement<any> | null
  
  The clicked element or null, if no element was hit
- event: MouseEvent
  
  The mouse event triggered
Returns void

popCanvasStack

popCanvasStack(): void

Implementation of Canvas.popCanvasStack

Inherited from AbstractCanvas.popCanvasStack
- Defined in canvas/AbstractCanvas.ts:117
Pops the canvas stack

Returns void

pushCanvasStack

pushCanvasStack(): void

Implementation of Canvas.pushCanvasStack

Inherited from AbstractCanvas.pushCanvasStack
- Defined in canvas/AbstractCanvas.ts:110
Pushes the canvas stack

Returns void

Protected render

render(): this

Inherited from InteractiveCanvas.render

Overrides AbstractCanvas.render
- Defined in canvas/InteractiveCanvas.ts:166
Renders the canvas

Returns this

rerender

rerender(): this

Inherited from AbstractCanvas.rerender
- Defined in canvas/AbstractCanvas.ts:225
Invalidates and renders the canvas

Returns this

resize

resize(width: number, height: number): this

Overrides AbstractCanvas.resize
- Defined in canvas/HTML5Canvas.ts:70
Parameters
- width: number
- height: number
Returns this

Private snapToGrid

snapToGrid(px: number, py: number): [number, number]

- Defined in canvas/HTML5Canvas.ts:343
Snaps coordinates to the grid

Parameters
- px: number
  
  Original X coordinate
- py: number
  
  Original Y coordinate
Returns [number, number]

Coordinates on the grid

strokeRectangle

strokeRectangle(bounds: Bounds, stroke: Stroke): void

Implementation of Canvas.strokeRectangle

Inherited from AbstractCanvas.strokeRectangle
- Defined in canvas/AbstractCanvas.ts:149
Strokes a rectangle

Parameters
- bounds: Bounds
  
  The rectangle's outer bounds
- stroke: Stroke
  
  The fill to use
Returns void

translate

translate(offset: Point): void

Implementation of Canvas.translate

Inherited from AbstractCanvas.translate
- Defined in canvas/AbstractCanvas.ts:121
Parameters
- offset: Point
Returns void

Protected updateHandles

updateHandles(element: DiagramElement<any>): void

Inherited from InteractiveCanvas.updateHandles
- Defined in canvas/InteractiveCanvas.ts:181
Updates the handles of a given element

Parameters
- element: DiagramElement<any>
  
  The element who's handles are updated
Returns void

zoom100

zoom100(x?: undefined | number, y?: undefined | number): void

Inherited from InteractiveCanvas.zoom100
- Defined in canvas/InteractiveCanvas.ts:159
Zooms 100%

Parameters
- Optional x: undefined | number
- Optional y: undefined | number
Returns void

Protected zoomCanvas

zoomCanvas(newZoom: number, x?: undefined | number, y?: undefined | number): void

Inherited from AbstractCanvas.zoomCanvas
- Defined in canvas/AbstractCanvas.ts:264
Parameters
- newZoom: number
- Optional x: undefined | number
- Optional y: undefined | number
Returns void

zoomIn

zoomIn(x?: undefined | number, y?: undefined | number): void

Inherited from InteractiveCanvas.zoomIn
- Defined in canvas/InteractiveCanvas.ts:145
Zooms into the diagram

Parameters
- Optional x: undefined | number
- Optional y: undefined | number
Returns void

zoomOut

zoomOut(x?: undefined | number, y?: undefined | number): void

Inherited from InteractiveCanvas.zoomOut
- Defined in canvas/InteractiveCanvas.ts:152
Zooms out of the diagram

Parameters
- Optional x: undefined | number
- Optional y: undefined | number
Returns void

Generated using TypeDoc