Skip to content

Documentation / @ripl/core / ArcState

Interface: ArcState ​

Defined in: packages/core/src/elements/arc.ts:48

State interface for an arc element, defining center, angles, radii, padding, and border radius.

Extends ​

Properties ​

PropertyTypeDescriptionInherited fromDefined in
borderRadius?numberThe corner radius applied to the arc's corners, clamped to half the band thickness and to what the sector's span allows. An annular sector rounds all four corners; an open arc rounds the two outer corners and keeps a sharp center point. A non-zero value on an open arc also closes the path through the center, turning a chord-closed segment into a wedge and so changing its filled area, hit region and stroke — do not animate it up from 0 on an open arc.-packages/core/src/elements/arc.ts:66
cxnumberThe x-coordinate of the arc's center.-packages/core/src/elements/arc.ts:50
cynumberThe y-coordinate of the arc's center.-packages/core/src/elements/arc.ts:52
direction?DirectionDirectionality used when rendering text.BaseState.directionpackages/core/src/context/types.ts:229
endAnglenumberThe end angle of the arc, in radians.-packages/core/src/elements/arc.ts:56
fill?stringFill style (CSS color, gradient, or pattern) used to paint filled regions.BaseState.fillpackages/core/src/context/types.ts:225
filter?stringCSS filter string applied to subsequent drawing operations (e.g. blur(4px)).BaseState.filterpackages/core/src/context/types.ts:227
font?stringCSS font shorthand used when rendering text.BaseState.fontpackages/core/src/context/types.ts:231
fontKerning?FontKerningWhether font kerning is applied when rendering text.BaseState.fontKerningpackages/core/src/context/types.ts:233
globalCompositeOperation?unknownCompositing operation controlling how new drawing is blended with existing content.BaseState.globalCompositeOperationpackages/core/src/context/types.ts:237
innerRadius?numberThe inner radius of the arc, producing an annular sector when set.-packages/core/src/elements/arc.ts:60
lineCap?LineCapCap style drawn at the endpoints of stroked lines.BaseState.lineCappackages/core/src/context/types.ts:239
lineDash?number[]Dash pattern as alternating stroke and gap lengths; empty for a solid line.BaseState.lineDashpackages/core/src/context/types.ts:241
lineDashOffset?numberDistance into the line dash pattern at which dashing begins.BaseState.lineDashOffsetpackages/core/src/context/types.ts:243
lineJoin?LineJoinJoin style drawn where two stroked segments meet.BaseState.lineJoinpackages/core/src/context/types.ts:245
lineWidth?numberWidth, in pixels, of stroked lines.BaseState.lineWidthpackages/core/src/context/types.ts:247
miterLimit?numberMiter length limit ratio applied to miter line joins.BaseState.miterLimitpackages/core/src/context/types.ts:249
opacity?numberGlobal alpha applied to everything drawn, from 0 to 1.BaseState.opacitypackages/core/src/context/types.ts:235
padAngle?numberThe angular padding between the arc and its neighbors, in radians. Produces a wedge-shaped gap that widens with radius; use ArcState.padWidth for a gap of constant width. Ignored whenever padWidth is provided, 0 included. A padAngle wider than the sector collapses it onto its endAngle, where an oversized padWidth collapses it onto its mid-angle.-packages/core/src/elements/arc.ts:62
padWidth?numberThe padding between the arc and its neighbors, in logical pixels. Each radius is inset by asin(padWidth / 2r), so an annular sector holds the gap constant and faces its neighbors with parallel edges, its inner radius floored at the radius where those edges would meet so that an innerRadius of 0 still carries the gap to the center rather than tapering it away; an open arc has no inner edge to inset, so the gap becomes a single trim at the outer radius and adjacent edges converge to nothing at the center. Takes precedence over ArcState.padAngle whenever it is provided — padWidth: 0 means no padding rather than a fall back to padAngle, so animating it up from 0 is continuous. Negative values are treated as 0.-packages/core/src/elements/arc.ts:64
radiusnumberThe outer radius of the arc.-packages/core/src/elements/arc.ts:58
rotation?RotationRotation applied to the element's transform, as radians or a deg/rad string.BaseState.rotationpackages/core/src/context/types.ts:275
shadowBlur?numberGaussian blur radius applied to drawn shadows.BaseState.shadowBlurpackages/core/src/context/types.ts:251
shadowColor?stringColor of drawn shadows.BaseState.shadowColorpackages/core/src/context/types.ts:253
shadowOffsetX?numberHorizontal offset, in pixels, of drawn shadows.BaseState.shadowOffsetXpackages/core/src/context/types.ts:255
shadowOffsetY?numberVertical offset, in pixels, of drawn shadows.BaseState.shadowOffsetYpackages/core/src/context/types.ts:257
startAnglenumberThe start angle of the arc, in radians.-packages/core/src/elements/arc.ts:54
stroke?stringStroke style (CSS color, gradient, or pattern) used to paint outlines.BaseState.strokepackages/core/src/context/types.ts:259
textAlign?TextAlignmentHorizontal alignment of text relative to the drawing position.BaseState.textAlignpackages/core/src/context/types.ts:261
textBaseline?TextBaselineVertical baseline used when positioning text.BaseState.textBaselinepackages/core/src/context/types.ts:263
transformOriginX?TransformOriginHorizontal origin about which rotation and scaling are applied.BaseState.transformOriginXpackages/core/src/context/types.ts:277
transformOriginY?TransformOriginVertical origin about which rotation and scaling are applied.BaseState.transformOriginYpackages/core/src/context/types.ts:279
transformScaleX?numberHorizontal scale factor applied to the element's transform.BaseState.transformScaleXpackages/core/src/context/types.ts:271
transformScaleY?numberVertical scale factor applied to the element's transform.BaseState.transformScaleYpackages/core/src/context/types.ts:273
translateX?numberHorizontal translation, in pixels, applied to the element's transform.BaseState.translateXpackages/core/src/context/types.ts:267
translateY?numberVertical translation, in pixels, applied to the element's transform.BaseState.translateYpackages/core/src/context/types.ts:269
zIndex?numberStacking order used to sort elements during rendering; higher values draw on top.BaseState.zIndexpackages/core/src/context/types.ts:265