Class RoughJsRenderer

Hierarchy

Renderer
- RoughJsRenderer

Index

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:67

Properties

`Private` `Optional` backgroundElement

backgroundElement?: SVGRectElement

`Protected` `Optional` container

container?: string | HTMLElement

`Private` `Optional` containerNode

containerNode?: HTMLElement

`Private` doc

doc: Document

`Private` randomState

randomState: number = SEED

`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:292

background

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

`Private` bbox

bbox(element: SVGGraphicsElement): DOMRect
Browsers return an empty bounding box for elements that are not part of the document, so a detached (headless) diagram is briefly attached to the document while it's being measured.
Parameters
- element: SVGGraphicsElement
Returns DOMRect
- Defined in renderer/roughjs/roughjs-renderer.ts:456

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:145

clear

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

`Private` embedDefs

embedDefs(): void
Embeds the font into the SVG so that the text always looks correct.

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

fontsLoading

fontsLoading(): undefined | Promise<unknown>
A promise that resolves once the fonts used by this renderer have loaded, or undefined if they already have (or can't be loaded in this environment).

Returns undefined | Promise<unknown>
Overrides Renderer.fontsLoading
- Defined in renderer/roughjs/roughjs-renderer.ts:187

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:216

`Private` nextSeed

nextSeed(): number
rough.js varies a shape based on its seed, so every shape gets its own seed. Otherwise all shapes of the same size would wobble identically. The seeds are generated with a Lehmer RNG, which never yields 0 (a seed of 0 makes rough.js fall back to Math.random()).

Returns number
- Defined in renderer/roughjs/roughjs-renderer.ts:196

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:342

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:243

remove

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

size

size(width: number, height: number, x?: number, y?: number): void
Parameters
- width: number
- height: number
- x: number = 0
- y: number = 0
Returns void
Overrides Renderer.size
- Defined in renderer/roughjs/roughjs-renderer.ts:366

text

text(text: string | TextSegment[], x: number, y: number, fontSize: number, color: string, fontFamily: string, alignment: Alignment, classes?: string | string[], plain?: boolean): GraphcisElement
Parameters
- text: string | TextSegment[]
- 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:386

title

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

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:206

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:319

`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:510

`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:161

`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:471

`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:137

`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:481

`Static` `Protected` textSpans

textSpans(segments: TextSegment[], fontSize: number): {
    dy: number;
    fontSize: number;
    text: string;
}[]
Parameters
- segments: TextSegment[]
- fontSize: number
Returns {
    dy: number;
    fontSize: number;
    text: string;
}[]
Inherited from Renderer.textSpans
- Defined in renderer/renderer.ts:230

`Static` `Private` toClassArray

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

`Static` `Protected` toClassName

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

`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:133

Class RoughJsRenderer

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Optional container: string | HTMLElement

Returns RoughJsRenderer

Properties

Private Optional backgroundElement

Protected Optional container

Private Optional containerNode

Private doc

Private randomState

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

Private bbox

Parameters

element: SVGGraphicsElement

Returns DOMRect

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

fontsLoading

Returns undefined | Promise<unknown>

line

Parameters

x1: number

y1: number

x2: number

y2: number

strokeWidth: number

color: string

Optional classes: string | string[]

Returns void

Private nextSeed

Returns number

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

`Optional` container: string | HTMLElement

`Private` `Optional` backgroundElement

`Protected` `Optional` container

`Private` `Optional` containerNode

`Private` doc

`Private` randomState

`Private` rc

`Private` svgNode

`Optional` classes: string | string[]

`Optional` fill: string

`Private` bbox

`Optional` fill: string

`Optional` classes: string | string[]

`Private` embedDefs

`Optional` classes: string | string[]

`Private` nextSeed

`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