Class RoughJsRenderer

Hierarchy

Renderer
- RoughJsRenderer

Index

Constructors

constructor

Properties

container? containerNode doc rc svgNode

Constructors

constructor

new RoughJsRenderer(container?: string | HTMLElement): RoughJsRenderer
Parameters
- Optional container: string | HTMLElement
Returns RoughJsRenderer
Overrides Renderer.constructor
- Defined in renderer/roughjs/roughjs-renderer.ts:27

Properties

`Protected` `Optional` container

container?: string | HTMLElement

`Private` containerNode

containerNode: HTMLElement

`Private` doc

doc: Document

`Private` rc

rc: RoughSVG

`Private` svgNode

svgNode: SVGSVGElement

Methods

arc

arc(x: number, y: number, width: number, height: number, direction: ArcDirection, strokeWidth: number, strokeColor: string, classes?: string | string[], fill?: string): GraphcisElement
Parameters
- x: number
- y: number
- width: number
- height: number
- direction: ArcDirection
- strokeWidth: number
- strokeColor: string
- Optional classes: string | string[]
- Optional fill: string
Returns GraphcisElement
Overrides Renderer.arc
- Defined in renderer/roughjs/roughjs-renderer.ts:237

background

background(color: string): void
Parameters
- color: string
Returns void
Overrides Renderer.background
- Defined in renderer/roughjs/roughjs-renderer.ts:312

circle

circle(x: number, y: number, diameter: number, strokeWidth: number, strokeColor: string, fill?: string, classes?: string | string[]): GraphcisElement
Parameters
- x: number
- y: number
- diameter: number
- strokeWidth: number
- strokeColor: string
- Optional fill: string
- Optional classes: string | string[]
Returns GraphcisElement
Overrides Renderer.circle
- Defined in renderer/roughjs/roughjs-renderer.ts:111

clear

clear(): void
Returns void
Overrides Renderer.clear
- Defined in renderer/roughjs/roughjs-renderer.ts:141

`Private` embedDefs

embedDefs(): void
This will embed all defs defined in the defs.html file. Specifically this is used to embed the base64 encoded font into the SVG so that the font always looks correct.

Returns void
- Defined in renderer/roughjs/roughjs-renderer.ts:76

line

line(x1: number, y1: number, x2: number, y2: number, strokeWidth: number, color: string, classes?: string | string[]): void
Parameters
- x1: number
- y1: number
- x2: number
- y2: number
- strokeWidth: number
- color: string
- Optional classes: string | string[]
Returns void
Overrides Renderer.line
- Defined in renderer/roughjs/roughjs-renderer.ts:164

pentagon

pentagon(x: number, y: number, size: number, strokeWidth: number, strokeColor: string, fill?: string, classes?: string | string[], spikes?: number): GraphcisElement
Parameters
- x: number
- y: number
- size: number
- strokeWidth: number
- strokeColor: string
- Optional fill: string
- Optional classes: string | string[]
- spikes: number = 5
Returns GraphcisElement
Overrides Renderer.pentagon
- Defined in renderer/roughjs/roughjs-renderer.ts:285

rect

rect(x: number, y: number, width: number, height: number, strokeWidth: number, strokeColor: string, classes?: string | string[], fill?: string, radius?: number): GraphcisElement
Parameters
- x: number
- y: number
- width: number
- height: number
- strokeWidth: number
- strokeColor: string
- Optional classes: string | string[]
- Optional fill: string
- Optional radius: number
Returns GraphcisElement
Overrides Renderer.rect
- Defined in renderer/roughjs/roughjs-renderer.ts:190

remove

remove(): void
Returns void
Overrides Renderer.remove
- Defined in renderer/roughjs/roughjs-renderer.ts:150

size

size(width: number, height: number): void
Parameters
- width: number
- height: number
Returns void
Overrides Renderer.size
- Defined in renderer/roughjs/roughjs-renderer.ts:308

text

text(text: string, x: number, y: number, fontSize: number, color: string, fontFamily: string, alignment: Alignment, classes?: string | string[], plain?: boolean): GraphcisElement
Parameters
- text: string
- x: number
- y: number
- fontSize: number
- color: string
- fontFamily: string
- alignment: Alignment
- Optional classes: string | string[]
- Optional plain: boolean
Returns GraphcisElement
Overrides Renderer.text
- Defined in renderer/roughjs/roughjs-renderer.ts:322

title

title(title: string): void
Parameters
- title: string
Returns void
Overrides Renderer.title
- Defined in renderer/roughjs/roughjs-renderer.ts:105

toSvgString

toSvgString(): string
Serialize the current state of the diagram to an SVG string. The returned string is a standalone <svg> document (including the xmlns attribute) and can be written to a file or used without ever attaching it to the DOM.

Returns string
Overrides Renderer.toSvgString
- Defined in renderer/roughjs/roughjs-renderer.ts:154

triangle

triangle(x: number, y: number, size: number, strokeWidth: number, strokeColor: string, classes?: string | string[], fill?: string): GraphcisElement
Parameters
- x: number
- y: number
- size: number
- strokeWidth: number
- strokeColor: string
- Optional classes: string | string[]
- Optional fill: string
Returns GraphcisElement
Overrides Renderer.triangle
- Defined in renderer/roughjs/roughjs-renderer.ts:263

`Static` `Private` addClasses

addClasses(element: Element, classes?: string | string[]): void
Adds classes to an SVG element via the "class" attribute rather than the classList API, since classList isn't implemented by svgdom (used to render server-side / in tests).
Parameters
- element: Element
- Optional classes: string | string[]
Returns void
- Defined in renderer/roughjs/roughjs-renderer.ts:415

`Static` `Protected` arcBarrePath

arcBarrePath(x: number, y: number, width: number, height: number, direction: ArcDirection): string
Parameters
- x: number
- y: number
- width: number
- height: number
- direction: ArcDirection
Returns string
Inherited from Renderer.arcBarrePath
- Defined in renderer/renderer.ts:146

`Static` `Private` boxToElement

boxToElement(box: DOMRect, remove: (() => void)): GraphcisElement
Parameters
- box: DOMRect
- remove: (() => void)
  - - (): void
    - Returns void
Returns GraphcisElement
- Defined in renderer/roughjs/roughjs-renderer.ts:376

`Static` `Protected` ngonPath

ngonPath(x: number, y: number, size: number, edges: number): string
Parameters
- x: number
- y: number
- size: number
- edges: number
Returns string
Inherited from Renderer.ngonPath
- Defined in renderer/renderer.ts:122

`Static` `Private` roundedRectData

roundedRectData(w: number, h: number, tlr: number, trr: number, brr: number, blr: number): string
Parameters
- w: number
- h: number
- tlr: number
- trr: number
- brr: number
- blr: number
Returns string
- Defined in renderer/roughjs/roughjs-renderer.ts:386

`Static` `Private` toClassArray

toClassArray(classes?: string | string[]): string[]
Parameters
- Optional classes: string | string[]
Returns string[]
- Defined in renderer/roughjs/roughjs-renderer.ts:403

`Static` `Protected` toClassName

toClassName(classes?: string | string[]): string
Parameters
- Optional classes: string | string[]
Returns string
Inherited from Renderer.toClassName
- Defined in renderer/renderer.ts:200

`Static` `Protected` trianglePath

trianglePath(x: number, y: number, size: number): string
Parameters
- x: number
- y: number
- size: number
Returns string
Inherited from Renderer.trianglePath
- Defined in renderer/renderer.ts:118

Class RoughJsRenderer

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Optional container: string | HTMLElement

Returns RoughJsRenderer

Properties

Protected Optional container

Private containerNode

Private doc

Private rc

Private svgNode

Methods

arc

Parameters

x: number

y: number

width: number

height: number

direction: ArcDirection

strokeWidth: number

strokeColor: string

Optional classes: string | string[]

Optional fill: string

Returns GraphcisElement

background

Parameters

color: string

Returns void

circle

Parameters

x: number

y: number

diameter: number

strokeWidth: number

strokeColor: string

Optional fill: string

Optional classes: string | string[]

Returns GraphcisElement

clear

Returns void

Private embedDefs

Returns void

line

Parameters

x1: number

y1: number

x2: number

y2: number

strokeWidth: number

color: string

Optional classes: string | string[]

Returns void

pentagon

Parameters

x: number

y: number

size: number

strokeWidth: number

strokeColor: string

Optional fill: string

Optional classes: string | string[]

spikes: number = 5

Returns GraphcisElement

rect

Parameters

x: number

y: number

width: number

height: number

strokeWidth: number

strokeColor: string

Optional classes: string | string[]

Optional fill: string

Optional radius: number

`Optional` container: string | HTMLElement

`Protected` `Optional` container

`Private` containerNode

`Private` doc

`Private` rc

`Private` svgNode

`Optional` classes: string | string[]

`Optional` fill: string

`Optional` fill: string

`Optional` classes: string | string[]

`Private` embedDefs

`Optional` classes: string | string[]

`Optional` fill: string

`Optional` classes: string | string[]

`Optional` classes: string | string[]

`Optional` fill: string

`Optional` radius: number

`Optional` classes: string | string[]

`Optional` plain: boolean

`Optional` classes: string | string[]

`Optional` fill: string

`Static` `Private` addClasses

`Optional` classes: string | string[]

`Static` `Protected` arcBarrePath

`Static` `Private` boxToElement

`Static` `Protected` ngonPath

`Static` `Private` roundedRectData