Skip to content

Documentation / @ripl/core / RectState

Interface: RectState ​

Defined in: packages/core/src/elements/rect.ts:30

State interface for a rectangle element, defining position, dimensions, and optional border radius.

Extends ​

Properties ​

PropertyTypeDescriptionInherited fromDefined in
borderRadius?number | BorderRadiusThe corner radius of the rectangle, uniform or per-corner.-packages/core/src/elements/rect.ts:40
direction?DirectionDirectionality used when rendering text.BaseState.directionpackages/core/src/context/types.ts:229
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
heightnumberThe height of the rectangle.-packages/core/src/elements/rect.ts:38
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
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
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
widthnumberThe width of the rectangle.-packages/core/src/elements/rect.ts:36
xnumberThe x-coordinate of the rectangle's top-left corner.-packages/core/src/elements/rect.ts:32
ynumberThe y-coordinate of the rectangle's top-left corner.-packages/core/src/elements/rect.ts:34
zIndex?numberStacking order used to sort elements during rendering; higher values draw on top.BaseState.zIndexpackages/core/src/context/types.ts:265