Skip to content

Documentation / @ripl/vue / RiplSceneProps

Interface: RiplSceneProps ​

Defined in: adapters/vue/src/components/scene.ts:74

Props accepted by RiplScene.

Extends ​

Properties ​

PropertyTypeDescriptionInherited fromDefined in
class?unknownClass names used for querying, in any of Vue's class binding forms.RiplElementOptionProps.classadapters/vue/src/types.ts:92
data?unknownArbitrary user data bound to the element, typically the datum backing it.RiplElementOptionProps.dataadapters/vue/src/types.ts:94
direction?DirectionDirectionality used when rendering text.Partial.directionpackages/core/src/context/types.ts:229
fill?stringFill style (CSS color, gradient, or pattern) used to paint filled regions.Partial.fillpackages/core/src/context/types.ts:225
filter?stringCSS filter string applied to subsequent drawing operations (e.g. blur(4px)).Partial.filterpackages/core/src/context/types.ts:227
font?stringCSS font shorthand used when rendering text.Partial.fontpackages/core/src/context/types.ts:231
fontKerning?FontKerningWhether font kerning is applied when rendering text.Partial.fontKerningpackages/core/src/context/types.ts:233
globalCompositeOperation?unknownCompositing operation controlling how new drawing is blended with existing content.Partial.globalCompositeOperationpackages/core/src/context/types.ts:237
id?stringStable id used for querying and for matching an element across renders.RiplElementOptionProps.idadapters/vue/src/types.ts:90
interpolators?ElementInterpolators<Partial<BaseState>>Interpolator overrides for individual state properties, layered over the defaults the element type declares. Read once, when the element is constructed.RiplElementOptionProps.interpolatorsadapters/vue/src/types.ts:101
lineCap?LineCapCap style drawn at the endpoints of stroked lines.Partial.lineCappackages/core/src/context/types.ts:239
lineDash?number[]Dash pattern as alternating stroke and gap lengths; empty for a solid line.Partial.lineDashpackages/core/src/context/types.ts:241
lineDashOffset?numberDistance into the line dash pattern at which dashing begins.Partial.lineDashOffsetpackages/core/src/context/types.ts:243
lineJoin?LineJoinJoin style drawn where two stroked segments meet.Partial.lineJoinpackages/core/src/context/types.ts:245
lineWidth?numberWidth, in pixels, of stroked lines.Partial.lineWidthpackages/core/src/context/types.ts:247
miterLimit?numberMiter length limit ratio applied to miter line joins.Partial.miterLimitpackages/core/src/context/types.ts:249
onAttached?RiplListener<Group<ElementEventMap>>Fired when the element is added to a group, with the group it joined.RiplElementListeners.onAttachedadapters/vue/src/types.ts:80
onClick?RiplListener<RiplPointerPayload>Fired when the pointer is pressed and released without an intervening drag.RiplElementListeners.onClickadapters/vue/src/types.ts:54
onDestroyed?RiplListener<null>Fired when the element is destroyed.RiplElementListeners.onDestroyedadapters/vue/src/types.ts:78
onDetached?RiplListener<Group<ElementEventMap>>Fired when the element is removed from a group, with the group it left.RiplElementListeners.onDetachedadapters/vue/src/types.ts:82
onDrag?RiplListener<RiplDragPayload>Fired on each pointer move during a drag gesture.RiplElementListeners.onDragadapters/vue/src/types.ts:68
onDragend?RiplListener<RiplDragPayload>Fired when a drag gesture ends.RiplElementListeners.onDragendadapters/vue/src/types.ts:70
onDragstart?RiplListener<RiplDragPayload>Fired once the pointer has moved past the drag threshold with the button held.RiplElementListeners.onDragstartadapters/vue/src/types.ts:66
onGraph?RiplListener<null>Fired when the shape of the scene graph at or below this element changes.RiplElementListeners.onGraphadapters/vue/src/types.ts:84
onMousedown?RiplListener<RiplPointerPayload>Fired when the pointer is pressed down.RiplElementListeners.onMousedownadapters/vue/src/types.ts:56
onMouseenter?RiplListener<null>Fired when the pointer enters.RiplElementListeners.onMouseenteradapters/vue/src/types.ts:62
onMouseleave?RiplListener<null>Fired when the pointer leaves.RiplElementListeners.onMouseleaveadapters/vue/src/types.ts:64
onMousemove?RiplListener<RiplPointerPayload>Fired as the pointer moves.RiplElementListeners.onMousemoveadapters/vue/src/types.ts:60
onMouseup?RiplListener<RiplPointerPayload>Fired when the pointer is released.RiplElementListeners.onMouseupadapters/vue/src/types.ts:58
onUpdated?RiplListener<RiplUpdatedPayload>Fired whenever one of the element's state properties changes.RiplElementListeners.onUpdatedadapters/vue/src/types.ts:76
opacity?numberGlobal alpha applied to everything drawn, from 0 to 1.Partial.opacitypackages/core/src/context/types.ts:235
pointerEvents?ElementPointerEventsWhich parts of the element respond to pointer hit testing. Defaults to all.RiplElementOptionProps.pointerEventsadapters/vue/src/types.ts:96
renderOnResize?booleanWhether the scene re-renders automatically when its context is resized. Defaults to true.-adapters/vue/src/components/scene.ts:76
rotation?RotationRotation applied to the element's transform, as radians or a deg/rad string.Partial.rotationpackages/core/src/context/types.ts:275
shadowBlur?numberGaussian blur radius applied to drawn shadows.Partial.shadowBlurpackages/core/src/context/types.ts:251
shadowColor?stringColor of drawn shadows.Partial.shadowColorpackages/core/src/context/types.ts:253
shadowOffsetX?numberHorizontal offset, in pixels, of drawn shadows.Partial.shadowOffsetXpackages/core/src/context/types.ts:255
shadowOffsetY?numberVertical offset, in pixels, of drawn shadows.Partial.shadowOffsetYpackages/core/src/context/types.ts:257
stroke?stringStroke style (CSS color, gradient, or pattern) used to paint outlines.Partial.strokepackages/core/src/context/types.ts:259
textAlign?TextAlignmentHorizontal alignment of text relative to the drawing position.Partial.textAlignpackages/core/src/context/types.ts:261
textBaseline?TextBaselineVertical baseline used when positioning text.Partial.textBaselinepackages/core/src/context/types.ts:263
transformOriginX?TransformOriginHorizontal origin about which rotation and scaling are applied.Partial.transformOriginXpackages/core/src/context/types.ts:277
transformOriginY?TransformOriginVertical origin about which rotation and scaling are applied.Partial.transformOriginYpackages/core/src/context/types.ts:279
transformScaleX?numberHorizontal scale factor applied to the element's transform.Partial.transformScaleXpackages/core/src/context/types.ts:271
transformScaleY?numberVertical scale factor applied to the element's transform.Partial.transformScaleYpackages/core/src/context/types.ts:273
translateX?numberHorizontal translation, in pixels, applied to the element's transform.Partial.translateXpackages/core/src/context/types.ts:267
translateY?numberVertical translation, in pixels, applied to the element's transform.Partial.translateYpackages/core/src/context/types.ts:269
zIndex?numberStacking order used to sort elements during rendering; higher values draw on top.Partial.zIndexpackages/core/src/context/types.ts:265