Skip to content
Caps0.4.0
API reference

components/rough-drawing

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/rough-drawing";

Exports

Section titled “Exports”
Kind Export Description
type alias RoughMark A hand-drawn mark around, under or behind an element.
type alias RoughTone Theme ink (currentColor by default) or the theme’s primary accent.
type alias RoughSpec Parsed data-rough-* settings for one element.
function parseRoughPoints() Read 0,100 40,20 100,0 as percent points, dropping malformed pairs.
function readRoughSpec() Parse an element’s data-caps-rough and data-rough-* attributes.
function drawRough() 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.

RoughMarktype alias

Section titled “RoughMark”
Signature
type RoughMark =
  "box" | "underline" | "circle" | "highlight" | "bubble" | "line";

A hand-drawn mark around, under or behind an element.

RoughTonetype alias

Section titled “RoughTone”
Signature
type RoughTone = "ink" | "primary";

Theme ink (currentColor by default) or the theme’s primary accent.

RoughSpectype alias

Section titled “RoughSpec”
Signature
type 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.

parseRoughPoints()function

Section titled “parseRoughPoints()”
Signature
function parseRoughPoints(value): readonly (readonly [number, number][]);

Read 0,100 40,20 100,0 as percent points, dropping malformed pairs.

Parameters

Section titled “Parameters”
Parameter Type
value string | undefined

Returns

Section titled “Returns”

readonly readonly [number, number][]

readRoughSpec()function

Section titled “readRoughSpec()”
Signature
function 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”
Parameter Type
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()function

Section titled “drawRough()”
Signature
function 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”
Parameter Type Default value
root ParentNode document

Returns

Section titled “Returns”

() => void