Documentation / @ripl/core / Path

Class: Path

Defined in: packages/core/src/elements/path.ts:35

A general-purpose shape rendered by a user-supplied path renderer callback.

Extends

• Shape2D<PathState>

Constructors

Constructor

new Path(options): Path

Defined in: packages/core/src/elements/path.ts:75

Parameters

Parameter	Type
options	object & PathState & object & object

Returns

Path

Overrides

Shape2D.constructor

Properties

Property	Modifier	Type	Default value	Description	Inherited from	Defined in
abstract	public	boolean	false	When true, the element skips transform and drawing-state application during Element.render; used by containers such as Group.	Shape2D.abstract	packages/core/src/core/element.ts:423
autoFill	public	boolean	undefined	When true, the shape is automatically filled after rendering whenever Element.fill is set.	Shape2D.autoFill	packages/core/src/core/shape.ts:59
autoStroke	public	boolean	undefined	When true, the shape's outline is automatically stroked after rendering whenever Element.stroke is set.	Shape2D.autoStroke	packages/core/src/core/shape.ts:57
classList	readonly	Set<string>	undefined	Set of CSS-like class names used for querying and selection.	Shape2D.classList	packages/core/src/core/element.ts:420
clip	public	boolean	undefined	When true, the shape's path is used as a clipping region for descendants instead of being filled or stroked.	Shape2D.clip	packages/core/src/core/shape.ts:61
context?	protected	Context<Element, Record<string, unknown>>	undefined	-	Shape2D.context	packages/core/src/core/element.ts:413
data	public	unknown	undefined	Arbitrary user data bound to the element, typically the datum backing a data-driven visual.	Shape2D.data	packages/core/src/core/element.ts:429
id	public	string	undefined	Unique identifier for this element, defaulting to type:uniqueId when not supplied.	Shape2D.id	packages/core/src/core/element.ts:416
parent?	public	Group<ElementEventMap>	undefined	The parent Group this element is attached to, or undefined when detached.	Shape2D.parent	packages/core/src/core/element.ts:427
path?	protected	ContextPath	undefined	-	Shape2D.path	packages/core/src/core/shape.ts:54
pointerEvents	public	ElementPointerEvents	'all'	Controls which parts of the element respond to pointer hit testing. See ElementPointerEvents.	Shape2D.pointerEvents	packages/core/src/core/element.ts:425
state	protected	PathState	undefined	-	Shape2D.state	packages/core/src/core/element.ts:412
type	readonly	string	undefined	The element type name (e.g. circle, rect, group).	Shape2D.type	packages/core/src/core/element.ts:418
defaultKey	readonly	typeof defaultKey	undefined	The key under which resources are retained when no explicit key is provided.	Shape2D.defaultKey	packages/core/src/core/disposer.ts:11

Accessors

direction

Get Signature

get direction(): TState["direction"]

Defined in: packages/core/src/core/element.ts:434

Text directionality used when rendering text, mirroring the canvas direction drawing-state property (inherit, ltr, or rtl).

Returns

TState["direction"]

Set Signature

set direction(value): void

Defined in: packages/core/src/core/element.ts:438

Parameters

Parameter	Type
value	TState["direction"]

Returns

void

Inherited from

Shape2D.direction

---

fill

Get Signature

get fill(): TState["fill"]

Defined in: packages/core/src/core/element.ts:443

Fill style (colour or gradient) painted inside the element, mirroring the canvas fillStyle drawing-state property.

Returns

TState["fill"]

Set Signature

set fill(value): void

Defined in: packages/core/src/core/element.ts:447

Parameters

Parameter	Type
value	TState["fill"]

Returns

void

Inherited from

Shape2D.fill

---

filter

Get Signature

get filter(): TState["filter"]

Defined in: packages/core/src/core/element.ts:452

Filter effects applied to the element, mirroring the canvas filter drawing-state property.

Returns

TState["filter"]

Set Signature

set filter(value): void

Defined in: packages/core/src/core/element.ts:456

Parameters

Parameter	Type
value	TState["filter"]

Returns

void

Inherited from

Shape2D.filter

---

font

Get Signature

get font(): TState["font"]

Defined in: packages/core/src/core/element.ts:461

Font used for text rendering, mirroring the canvas font drawing-state property.

Returns

TState["font"]

Set Signature

set font(value): void

Defined in: packages/core/src/core/element.ts:465

Parameters

Parameter	Type
value	TState["font"]

Returns

void

Inherited from

Shape2D.font

---

globalCompositeOperation

Get Signature

get globalCompositeOperation(): TState["globalCompositeOperation"]

Defined in: packages/core/src/core/element.ts:479

Compositing/blend mode used to draw the element, mirroring the canvas globalCompositeOperation drawing-state property.

Returns

TState["globalCompositeOperation"]

Set Signature

set globalCompositeOperation(value): void

Defined in: packages/core/src/core/element.ts:483

Parameters

Parameter	Type
value	TState["globalCompositeOperation"]

Returns

void

Inherited from

Shape2D.globalCompositeOperation

---

height

Get Signature

get height(): number

Defined in: packages/core/src/elements/path.ts:67

The height of the path's bounding box.

Returns

number

Set Signature

set height(value): void

Defined in: packages/core/src/elements/path.ts:71

Parameters

Parameter	Type
value	number

Returns

void

---

lineCap

Get Signature

get lineCap(): TState["lineCap"]

Defined in: packages/core/src/core/element.ts:488

Cap style drawn at the ends of stroked lines, mirroring the canvas lineCap drawing-state property (butt, round, or square).

Returns

TState["lineCap"]

Set Signature

set lineCap(value): void

Defined in: packages/core/src/core/element.ts:492

Parameters

Parameter	Type
value	TState["lineCap"]

Returns

void

Inherited from

Shape2D.lineCap

---

lineDash

Get Signature

get lineDash(): TState["lineDash"]

Defined in: packages/core/src/core/element.ts:497

Dash pattern for stroked lines, mirroring the canvas line-dash array set via setLineDash.

Returns

TState["lineDash"]

Set Signature

set lineDash(value): void

Defined in: packages/core/src/core/element.ts:501

Parameters

Parameter	Type
value	TState["lineDash"]

Returns

void

Inherited from

Shape2D.lineDash

---

lineDashOffset

Get Signature

get lineDashOffset(): TState["lineDashOffset"]

Defined in: packages/core/src/core/element.ts:506

Offset into the line-dash pattern, mirroring the canvas lineDashOffset drawing-state property.

Returns

TState["lineDashOffset"]

Set Signature

set lineDashOffset(value): void

Defined in: packages/core/src/core/element.ts:510

Parameters

Parameter	Type
value	TState["lineDashOffset"]

Returns

void

Inherited from

Shape2D.lineDashOffset

---

lineJoin

Get Signature

get lineJoin(): TState["lineJoin"]

Defined in: packages/core/src/core/element.ts:515

Join style drawn where stroked segments meet, mirroring the canvas lineJoin drawing-state property (bevel, miter, or round).

Returns

TState["lineJoin"]

Set Signature

set lineJoin(value): void

Defined in: packages/core/src/core/element.ts:519

Parameters

Parameter	Type
value	TState["lineJoin"]

Returns

void

Inherited from

Shape2D.lineJoin

---

lineWidth

Get Signature

get lineWidth(): TState["lineWidth"]

Defined in: packages/core/src/core/element.ts:524

Width of stroked lines in pixels, mirroring the canvas lineWidth drawing-state property.

Returns

TState["lineWidth"]

Set Signature

set lineWidth(value): void

Defined in: packages/core/src/core/element.ts:528

Parameters

Parameter	Type
value	TState["lineWidth"]

Returns

void

Inherited from

Shape2D.lineWidth

---

miterLimit

Get Signature

get miterLimit(): TState["miterLimit"]

Defined in: packages/core/src/core/element.ts:533

Miter length limit for miter line joins, mirroring the canvas miterLimit drawing-state property.

Returns

TState["miterLimit"]

Set Signature

set miterLimit(value): void

Defined in: packages/core/src/core/element.ts:537

Parameters

Parameter	Type
value	TState["miterLimit"]

Returns

void

Inherited from

Shape2D.miterLimit

---

opacity

Get Signature

get opacity(): TState["opacity"]

Defined in: packages/core/src/core/element.ts:470

Opacity of the element from 0 (transparent) to 1 (opaque), mapping to the canvas globalAlpha drawing-state property.

Returns

TState["opacity"]

Set Signature

set opacity(value): void

Defined in: packages/core/src/core/element.ts:474

Parameters

Parameter	Type
value	TState["opacity"]

Returns

void

Inherited from

Shape2D.opacity

---

rotation

Get Signature

get rotation(): TState["rotation"]

Defined in: packages/core/src/core/element.ts:650

Rotation applied to the element during rendering, in radians or as a CSS-like angle string.

Returns

TState["rotation"]

Set Signature

set rotation(value): void

Defined in: packages/core/src/core/element.ts:654

Parameters

Parameter	Type
value	TState["rotation"]

Returns

void

Inherited from

Shape2D.rotation

---

shadowBlur

Get Signature

get shadowBlur(): TState["shadowBlur"]

Defined in: packages/core/src/core/element.ts:542

Blur radius applied to the element's shadow, mirroring the canvas shadowBlur drawing-state property.

Returns

TState["shadowBlur"]

Set Signature

set shadowBlur(value): void

Defined in: packages/core/src/core/element.ts:546

Parameters

Parameter	Type
value	TState["shadowBlur"]

Returns

void

Inherited from

Shape2D.shadowBlur

---

shadowColor

Get Signature

get shadowColor(): TState["shadowColor"]

Defined in: packages/core/src/core/element.ts:551

Colour of the element's shadow, mirroring the canvas shadowColor drawing-state property.

Returns

TState["shadowColor"]

Set Signature

set shadowColor(value): void

Defined in: packages/core/src/core/element.ts:555

Parameters

Parameter	Type
value	TState["shadowColor"]

Returns

void

Inherited from

Shape2D.shadowColor

---

shadowOffsetX

Get Signature

get shadowOffsetX(): TState["shadowOffsetX"]

Defined in: packages/core/src/core/element.ts:560

Horizontal offset of the element's shadow, mirroring the canvas shadowOffsetX drawing-state property.

Returns

TState["shadowOffsetX"]

Set Signature

set shadowOffsetX(value): void

Defined in: packages/core/src/core/element.ts:564

Parameters

Parameter	Type
value	TState["shadowOffsetX"]

Returns

void

Inherited from

Shape2D.shadowOffsetX

---

shadowOffsetY

Get Signature

get shadowOffsetY(): TState["shadowOffsetY"]

Defined in: packages/core/src/core/element.ts:569

Vertical offset of the element's shadow, mirroring the canvas shadowOffsetY drawing-state property.

Returns

TState["shadowOffsetY"]

Set Signature

set shadowOffsetY(value): void

Defined in: packages/core/src/core/element.ts:573

Parameters

Parameter	Type
value	TState["shadowOffsetY"]

Returns

void

Inherited from

Shape2D.shadowOffsetY

---

stroke

Get Signature

get stroke(): TState["stroke"]

Defined in: packages/core/src/core/element.ts:578

Stroke style (colour or gradient) painted along the element's outline, mirroring the canvas strokeStyle drawing-state property.

Returns

TState["stroke"]

Set Signature

set stroke(value): void

Defined in: packages/core/src/core/element.ts:582

Parameters

Parameter	Type
value	TState["stroke"]

Returns

void

Inherited from

Shape2D.stroke

---

textAlign

Get Signature

get textAlign(): TState["textAlign"]

Defined in: packages/core/src/core/element.ts:587

Horizontal alignment of rendered text, mirroring the canvas textAlign drawing-state property.

Returns

TState["textAlign"]

Set Signature

set textAlign(value): void

Defined in: packages/core/src/core/element.ts:591

Parameters

Parameter	Type
value	TState["textAlign"]

Returns

void

Inherited from

Shape2D.textAlign

---

textBaseline

Get Signature

get textBaseline(): TState["textBaseline"]

Defined in: packages/core/src/core/element.ts:596

Vertical baseline of rendered text, mirroring the canvas textBaseline drawing-state property.

Returns

TState["textBaseline"]

Set Signature

set textBaseline(value): void

Defined in: packages/core/src/core/element.ts:600

Parameters

Parameter	Type
value	TState["textBaseline"]

Returns

void

Inherited from

Shape2D.textBaseline

---

transformOriginX

Get Signature

get transformOriginX(): TState["transformOriginX"]

Defined in: packages/core/src/core/element.ts:659

Horizontal origin about which transforms are applied, as a pixel value or percentage string.

Returns

TState["transformOriginX"]

Set Signature

set transformOriginX(value): void

Defined in: packages/core/src/core/element.ts:663

Parameters

Parameter	Type
value	TState["transformOriginX"]

Returns

void

Inherited from

Shape2D.transformOriginX

---

transformOriginY

Get Signature

get transformOriginY(): TState["transformOriginY"]

Defined in: packages/core/src/core/element.ts:668

Vertical origin about which transforms are applied, as a pixel value or percentage string.

Returns

TState["transformOriginY"]

Set Signature

set transformOriginY(value): void

Defined in: packages/core/src/core/element.ts:672

Parameters

Parameter	Type
value	TState["transformOriginY"]

Returns

void

Inherited from

Shape2D.transformOriginY

---

transformScaleX

Get Signature

get transformScaleX(): TState["transformScaleX"]

Defined in: packages/core/src/core/element.ts:632

Horizontal scale factor applied to the element during rendering (1 is unscaled).

Returns

TState["transformScaleX"]

Set Signature

set transformScaleX(value): void

Defined in: packages/core/src/core/element.ts:636

Parameters

Parameter	Type
value	TState["transformScaleX"]

Returns

void

Inherited from

Shape2D.transformScaleX

---

transformScaleY

Get Signature

get transformScaleY(): TState["transformScaleY"]

Defined in: packages/core/src/core/element.ts:641

Vertical scale factor applied to the element during rendering (1 is unscaled).

Returns

TState["transformScaleY"]

Set Signature

set transformScaleY(value): void

Defined in: packages/core/src/core/element.ts:645

Parameters

Parameter	Type
value	TState["transformScaleY"]

Returns

void

Inherited from

Shape2D.transformScaleY

---

translateX

Get Signature

get translateX(): TState["translateX"]

Defined in: packages/core/src/core/element.ts:614

Horizontal translation applied to the element during rendering, in pixels.

Returns

TState["translateX"]

Set Signature

set translateX(value): void

Defined in: packages/core/src/core/element.ts:618

Parameters

Parameter	Type
value	TState["translateX"]

Returns

void

Inherited from

Shape2D.translateX

---

translateY

Get Signature

get translateY(): TState["translateY"]

Defined in: packages/core/src/core/element.ts:623

Vertical translation applied to the element during rendering, in pixels.

Returns

TState["translateY"]

Set Signature

set translateY(value): void

Defined in: packages/core/src/core/element.ts:627

Parameters

Parameter	Type
value	TState["translateY"]

Returns

void

Inherited from

Shape2D.translateY

---

width

Get Signature

get width(): number

Defined in: packages/core/src/elements/path.ts:58

The width of the path's bounding box.

Returns

number

Set Signature

set width(value): void

Defined in: packages/core/src/elements/path.ts:62

Parameters

Parameter	Type
value	number

Returns

void

---

x

Get Signature

get x(): number

Defined in: packages/core/src/elements/path.ts:40

The x-coordinate of the path's bounding box top-left corner.

Returns

number

Set Signature

set x(value): void

Defined in: packages/core/src/elements/path.ts:44

Parameters

Parameter	Type
value	number

Returns

void

---

y

Get Signature

get y(): number

Defined in: packages/core/src/elements/path.ts:49

The y-coordinate of the path's bounding box top-left corner.

Returns

number

Set Signature

set y(value): void

Defined in: packages/core/src/elements/path.ts:53

Parameters

Parameter	Type
value	number

Returns

void

---

zIndex

Get Signature

get zIndex(): number

Defined in: packages/core/src/core/element.ts:605

Effective stacking order of the element, combining its own z-index with its parent Group's. Higher values render on top.

Returns

number

Set Signature

set zIndex(value): void

Defined in: packages/core/src/core/element.ts:609

Parameters

Parameter	Type
value	number

Returns

void

Inherited from

Shape2D.zIndex

Methods

clone()

clone(): Element<PathState, ElementEventMap>

Defined in: packages/core/src/core/element.ts:762

Creates a shallow clone of this element with the same id, classes, and state.

Returns

Element<PathState, ElementEventMap>

Inherited from

Shape2D.clone

---

closest()

closest<TElement>(selector): TElement | undefined

Defined in: packages/core/src/core/element.ts:776

Returns the closest ancestor (including this element) matching the CSS-like selector, or undefined.

Type Parameters

Type Parameter	Default type
TElement extends Element<Partial<BaseState>, ElementEventMap>	Element<Partial<BaseState>, ElementEventMap>

Parameters

Parameter	Type
selector	string

Returns

TElement | undefined

Inherited from

Shape2D.closest

---

destroy()

destroy(): void

Defined in: packages/core/src/core/element.ts:870

Detaches the element from its parent Group and tears down its event subscriptions.

Returns

void

Inherited from

Shape2D.destroy

---

dispose()

protected dispose(key?): void

Defined in: packages/core/src/core/disposer.ts:25

Disposes all resources under the given key, or all resources if no key is provided.

Parameters

Parameter	Type
key?	PropertyKey

Returns

void

Inherited from

Shape2D.dispose

---

emit()

Call Signature

emit<TEvent>(event): TEvent

Defined in: packages/core/src/core/event-bus.ts:137

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters

Type Parameter	Default type
TEvent extends Event<undefined>	Event<undefined>

Parameters

Parameter	Type
event	TEvent

Returns

TEvent

Inherited from

Shape2D.emit

Call Signature

emit<TEvent>(type, data): Event<ElementEventMap[TEvent]>

Defined in: packages/core/src/core/event-bus.ts:138

Emits an event, invoking all matching handlers and bubbling to the parent if applicable.

Type Parameters

Type Parameter
TEvent extends keyof ElementEventMap

Parameters

Parameter	Type
type	TEvent
data	ElementEventMap[TEvent]

Returns

Event<ElementEventMap[TEvent]>

Inherited from

Shape2D.emit

---

getBoundingBox()

getBoundingBox(local?): Box

Defined in: packages/core/src/core/element.ts:796

Returns this element's bounding box: the on-screen (world) box by default, or the raw local box when local is true. The world box applies this element's own and every ancestor group's transform (mirroring the DOM's getBoundingClientRect); a rotated element yields a conservative axis-aligned box.

Parameters

Parameter	Type	Default value	Description
local	boolean	false	when true, returns the untransformed authored geometry instead of the world box.

Returns

Box

Inherited from

Shape2D.getBoundingBox

---

getComputedStateValue()

protected getComputedStateValue<TKey>(key): PathState[TKey]

Defined in: packages/core/src/core/element.ts:714

Resolves a state value against the parent chain (own value, else the nearest ancestor's) — the effective value an element renders with. Used where the resolved value is needed without a live context, such as computing a transition's start value.

Type Parameters

Type Parameter
TKey extends keyof PathState

Parameters

Parameter	Type
key	TKey

Returns

PathState[TKey]

Inherited from

Shape2D.getComputedStateValue

---

getStateValue()

protected getStateValue<TKey>(key): PathState[TKey]

Defined in: packages/core/src/core/element.ts:705

Reads this element's own state value (no inheritance). Inherited paint now cascades through the render tree — a group applies its paint at its boundary (Context.pushGroup) and descendants pick it up from the context's copied state — so property getters return own values only, mirroring how the browser resolves computed style at paint time. Use Element.getComputedStateValue when the effective (inheritance-resolved) value is required outside a render pass (e.g. animation start values).

Type Parameters

Type Parameter
TKey extends keyof PathState

Parameters

Parameter	Type
key	TKey

Returns

PathState[TKey]

Inherited from

Shape2D.getStateValue

---

has()

has(type): boolean

Defined in: packages/core/src/core/event-bus.ts:94

Returns whether there are any listeners registered for the given event type.

Parameters

Parameter	Type
type	keyof ElementEventMap

Returns

boolean

Inherited from

Shape2D.has

---

interpolate()

interpolate(newState, interpolators?): Interpolator<void>

Defined in: packages/core/src/core/element.ts:810

Creates an interpolator that transitions from the current state towards the target state, supporting keyframes and custom interpolator overrides.

Parameters

Parameter	Type
newState	Partial<ElementInterpolationState<TState>>
interpolators	Partial<ElementInterpolators<TState>>

Returns

Interpolator<void>

Inherited from

Shape2D.interpolate

---

intersectsWith()

intersectsWith(x, y, options?): boolean

Defined in: packages/core/src/core/shape.ts:79

Tests whether a point intersects this shape using path-based fill and stroke hit testing.

Parameters

Parameter	Type
x	number
y	number
options?	Partial<ElementIntersectionOptions>

Returns

boolean

Inherited from

Shape2D.intersectsWith

---

matches()

matches(selector): boolean

Defined in: packages/core/src/core/element.ts:771

Tests whether this element matches the CSS-like selector.

Parameters

Parameter	Type
selector	string

Returns

boolean

Inherited from

Shape2D.matches

---

off()

off<TEvent>(type, handler): void

Defined in: packages/core/src/core/event-bus.ts:112

Removes a previously registered handler for the given event type.

Type Parameters

Type Parameter
TEvent extends keyof ElementEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<ElementEventMap[TEvent]>

Returns

void

Inherited from

Shape2D.off

---

on()

on<TEvent>(event, handler, options?): Disposable

Defined in: packages/core/src/core/element.ts:744

Subscribes a handler to an element event, returning a disposable subscription.

Overrides EventBus.on to additionally invalidate the Context's tracked-element cache for interaction events, keeping hit testing accurate as listeners are added and removed.

Type Parameters

Type Parameter
TEvent extends keyof ElementEventMap

Parameters

Parameter	Type	Description
event	TEvent	The event name to listen for.
handler	EventHandler<ElementEventMap[TEvent]>	Callback invoked when the event is emitted.
options?	EventSubscriptionOptions	Optional subscription options (e.g. self-only filtering).

Returns

Disposable

A disposable used to remove the subscription.

Inherited from

Shape2D.on

---

once()

once<TEvent>(type, handler, options?): Disposable

Defined in: packages/core/src/core/event-bus.ts:127

Subscribes a handler that is automatically removed after it fires once.

Type Parameters

Type Parameter
TEvent extends keyof ElementEventMap

Parameters

Parameter	Type
type	TEvent
handler	EventHandler<ElementEventMap[TEvent]>
options?	EventSubscriptionOptions

Returns

Disposable

Inherited from

Shape2D.once

---

render()

render(context): void

Defined in: packages/core/src/elements/path.ts:102

Renders the path to the provided Context using its path renderer callback.

Parameters

Parameter	Type
context	Context

Returns

void

Overrides

Shape2D.render

---

retain()

protected retain(value, key?): void

Defined in: packages/core/src/core/disposer.ts:14

Registers a disposable resource under an optional key for later cleanup.

Parameters

Parameter	Type	Default value
value	Disposable	undefined
key	PropertyKey	Disposer.defaultKey

Returns

void

Inherited from

Shape2D.retain

---

setPathRenderer()

setPathRenderer(renderer): void

Defined in: packages/core/src/elements/path.ts:87

Replaces the current path renderer callback.

Parameters

Parameter	Type
renderer	PathRenderer

Returns

void

---

setStateValue()

protected setStateValue<TKey>(key, value): void

Defined in: packages/core/src/core/element.ts:725

Sets a state value and emits an updated event.

Type Parameters

Type Parameter
TKey extends keyof PathState

Parameters

Parameter	Type
key	TKey
value	PathState[TKey]

Returns

void

Inherited from

Shape2D.setStateValue