components/rough-drawing
Type Aliases
Section titled “Type Aliases”RoughMark
Section titled “RoughMark”RoughMark =
"box"|"underline"|"circle"|"highlight"|"bubble"|"line"
A hand-drawn mark around, under or behind an element.
RoughTone
Section titled “RoughTone”RoughTone =
"ink"|"coral"
Theme ink (currentColor by default) or the theme’s coral accent.
RoughSpec
Section titled “RoughSpec”RoughSpec =
Readonly<{mark:RoughMark;seed:number;weight:number;roughness:number;fill:"none"|"solid"|"hachure";tail:"left"|"right"|"none";points: readonly readonly [number,number][]; }>
Parsed data-rough-* settings for one element.
Functions
Section titled “Functions”parseRoughPoints()
Section titled “parseRoughPoints()”parseRoughPoints(
value): readonly readonly [number,number][]
Read 0,100 40,20 100,0 as percent points, dropping malformed pairs.
Parameters
Section titled “Parameters”string | undefined
Returns
Section titled “Returns”readonly readonly [number, number][]
readRoughSpec()
Section titled “readRoughSpec()”readRoughSpec(
element):Readonly<{mark:RoughMark;seed:number;weight:number;roughness:number;fill:"none"|"solid"|"hachure";tail:"none"|"left"|"right";points: readonly readonly [number,number][]; }> |null
Parse an element’s data-caps-rough and data-rough-* attributes.
Parameters
Section titled “Parameters”element
Section titled “element”HTMLElement
Returns
Section titled “Returns”Readonly<{ mark: RoughMark; seed: number; weight:
number; roughness: number; fill: "none" | "solid" | "hachure";
tail: "none" | "left" | "right"; points: readonly readonly
[number, number][]; }> | null
drawRough()
Section titled “drawRough()”drawRough(
root?): () =>void
Draw every [data-caps-rough] element inside root (and root itself),
loading Rough.js on first use, and redraw each one when its size changes.
Returns a function that stops watching sizes. If Rough.js cannot load, the CSS
fallback stays.
Parameters
Section titled “Parameters”ParentNode = document
Returns
Section titled “Returns”() => void