Skip to content
D
Documentation

Svg — constants

reference
2 min readUpdated

Constants

Import these from @grafloria/renderer.

Constants

BUILTIN_ICONS

Grafloria's line icons, 24×24, stroked (never filled). Drawn by hand for this library — the five Mermaid architecture-beta names. An href icon must be a raster data URI (SVG data URIs are refused: SVG can carry script), so vector icons are these paths, not user data.

ts
const BUILTIN_ICONS: Readonly<Record<string, readonly string[]>>

DEFAULT_ARROW_RADIUS

ts
const DEFAULT_ARROW_RADIUS: 10

DEFAULT_ENDPOINT_RADIUS

ts
const DEFAULT_ENDPOINT_RADIUS: 8

DEFAULT_HTML_LABEL_HEIGHT

ts
const DEFAULT_HTML_LABEL_HEIGHT: 28

DEFAULT_HTML_LABEL_WIDTH

Default box for an HTML / template label (a foreignObject needs a size).

ts
const DEFAULT_HTML_LABEL_WIDTH: 120

DEFAULT_LABEL_HEIGHT

ts
const DEFAULT_LABEL_HEIGHT: 18

DEFAULT_LABEL_WIDTH

ts
const DEFAULT_LABEL_WIDTH: 40

DEFAULT_LINK_HIT_AREA_WIDTH

Default width of the SVG renderer's transparent interaction stroke.

ts
const DEFAULT_LINK_HIT_AREA_WIDTH: 12

DEFAULT_LINK_HIT_TOLERANCE

Grab distance (WORLD units) for a link body — "how close to the line counts as clicking it".

Exported because it is now a CROSS-BACKEND contract, not an implementation detail of one hit path: InteractionController applies it to resolve a link in SVG mode, and the Canvas backend strokes each link's pick region with exactly 2 x this width on the colour-keyed hit canvas. If the two ever disagreed, switching backend would change which link is under the cursor. (It was previously a bare 5 inlined in the controller.)

This is the FLOOR, not the whole contract — see {@link linkBodyHitTolerance}.

ts
const DEFAULT_LINK_HIT_TOLERANCE: 5

DEFAULT_PARALLEL_SPACING

Default gap between adjacent links of a parallel bundle.

ts
const DEFAULT_PARALLEL_SPACING: 16

DEFAULT_SELF_LOOP_SIZE

Default self-loop bulge / lateral span / per-loop growth.

ts
const DEFAULT_SELF_LOOP_SIZE: 40

DEFAULT_SELF_LOOP_SPACING

ts
const DEFAULT_SELF_LOOP_SPACING: 18

GRAFLORIA_BASE_STYLE_ID

Id of the SHARED stylesheet: the theme-independent, var(--grafloria-*)-based rules. Identical for every renderer on the page, so it is injected once and deduped by this id — instances only own their tiny variable block.

ts
const GRAFLORIA_BASE_STYLE_ID: "grafloria-renderer-styles"

GRAFLORIA_INSTANCE_OVERRIDE_PREFIX

Prefix of a renderer's OVERRIDE <style> element — the design-token bridge and the accessibility media queries.

A SEPARATE element from the theme block, and always inserted after it, because the cascade inside the variables is the whole mechanism: theme values < host design tokens < prefers-contrast < forced-colors Same selector, same specificity — so only SOURCE ORDER decides, and source order is only guaranteed if we own it.

ts
const GRAFLORIA_INSTANCE_OVERRIDE_PREFIX: "grafloria-renderer-overrides-"

GRAFLORIA_INSTANCE_STYLE_PREFIX

Prefix of a renderer's own <style> element id (one per instance).

ts
const GRAFLORIA_INSTANCE_STYLE_PREFIX: "grafloria-renderer-theme-"

ROUTE_INFLUENCE_PAD

How far outside a link's routed bounding box an obstacle can still have shaped that route. The router pushes off the port by gapOffset (30), keeps obstacleMargin (20) clearance from every body, and moves on a gridSize (10) lattice — so an obstacle that shaped this route is within ~60 units of it. 80 buys margin over that without pulling in half the diagram.

This is the one approximation in the cache, and it is deliberately generous: being too eager here costs a re-route, being too clever costs a wrong route.

ts
const ROUTE_INFLUENCE_PAD: 80

Was this page helpful?

Svg — constants — Grafloria