Class UIDrawUtilities

Shared drawing utility functions for UICustomElement-based controls.

These functions replicate the common drawing patterns from the C++ UIDrawables class, adapted for CSS-driven ComputedStyle and the TypeScript Path/Paint API. Functions are composable: call them in sequence on the same Path and UIDrawContent.

Constructors

constructor

Properties

defaults

Methods

computeContentRect computeStrokeInsetRect drawBackground drawDropShadow drawFocusRing drawLuminanceGradient drawText hasState mapTextAlignment mapVerticalAlignment

Constructors

constructor

Properties

Static Readonlydefaults

defaults: {
    focusRing: {
        alpha: number;
        inset: number;
        strokeWidth: number;
    };
    spotlightRadius: number;
}

Default style constants for all CSS-driven controls.

Type declaration

  • focusRing: {
        alpha: number;
        inset: number;
        strokeWidth: number;
    }

    Focus ring rendering parameters.

    • alpha: number

      Stroke opacity.

    • inset: number

      Inset from the element's bounding rect (in points).

    • strokeWidth: number

      Stroke width (in points).

  • spotlightRadius: number

    Fixed outer radius for interactive spotlight radial gradients (in points).

Methods

StaticcomputeContentRect

  • computeContentRect(bounds, style): Rect2

  • Computes the content rectangle by subtracting padding from the element bounds. This is the region inside the background where text, images and sub-elements are drawn.

    Parameters

    Returns Rect2

    A Rect2 inset by the style's padding values.

StaticcomputeStrokeInsetRect

  • computeStrokeInsetRect(bounds, style): Rect2

  • Computes the stroke-inset rectangle so that the border stroke stays within element bounds. Insets by half the border width on each side.

    Parameters

    Returns Rect2

    The inset rectangle, or bounds unchanged if no stroke is needed.

StaticdrawBackground

  • drawBackground(path, bounds, style, state?, mousePositionLocal?, radiusTopLeft?, radiusTopRight?, radiusBottomLeft?, radiusBottomRight?): void

  • Draws a rounded rectangle background with fill and optional border stroke onto the given path. The rectangle is inset by half the border width so the stroke remains within the original bounds.

    When state and mousePositionLocal are provided and the element is Hover or Active, both fill and stroke use radial gradient paints centered at the cursor (matching the C++ CreateButtonPath pattern with CreateInteractiveGradientFill/Stroke). Otherwise solid paints are used.

    Parameters

    • path: Path

      The path to append draw commands to.

    • bounds: Immutable<Rect2>

      The element's full bounds from UIDrawContent.

    • style: Immutable<ComputedStyle>

      The resolved CSS style providing background, border, and border-radius values.

    • Optionalstate: EnumValue<UIElementState, number>

      Optional element state bitfield for interactive gradient.

    • OptionalmousePositionLocal: Immutable<Vector2>

      Optional mouse position in local coordinates for interactive gradient.

    • OptionalradiusTopLeft: number
    • OptionalradiusTopRight: number
    • OptionalradiusBottomLeft: number
    • OptionalradiusBottomRight: number

    Returns void

StaticdrawDropShadow

  • drawDropShadow(content, bounds, style, shadowOffset?, shadowAlpha?, depth?, radiusTopLeft?, radiusTopRight?, radiusBottomLeft?, radiusBottomRight?): void

  • Draws a drop shadow below the given bounds. The caller must shrink the effective bounds by shadowOffset so both the element and its shadow stay within the bounding rect.

    Parameters

    • content: UIDrawContent

      The UIDrawContent to add the shadow path to.

    • bounds: Immutable<Rect2>

      The effective (inset) bounds the element is drawn at.

    • style: Immutable<ComputedStyle>

      The resolved CSS style for corner radii.

    • OptionalshadowOffset: number

      The vertical point offset for the shadow. Defaults to 1.

    • OptionalshadowAlpha: number

      The opacity of the shadow. Defaults to 0.25.

    • Optionaldepth: number

      The draw depth for the shadow path. Defaults to -1.

    • OptionalradiusTopLeft: number
    • OptionalradiusTopRight: number
    • OptionalradiusBottomLeft: number
    • OptionalradiusBottomRight: number

    Returns void

StaticdrawFocusRing

  • drawFocusRing(path, bounds, style, state, accentColor, focusInset?, radiusTopLeft?, radiusTopRight?, radiusBottomLeft?, radiusBottomRight?): void

  • Draws a focus ring around the element. Only draws if the Focused bit is set in state. The ring is a stroke rendered slightly outside the element bounds using a semi-transparent accent color.

    Parameters

    • path: Path

      The path to append draw commands to.

    • bounds: Immutable<Rect2>

      The element's full bounds.

    • style: Immutable<ComputedStyle>

      The resolved CSS style for corner radii.

    • state: EnumValue<UIElementState, number>

      The current element state bitfield.

    • accentColor: Immutable<SRGBColor>

      The accent color to use for the focus ring.

    • OptionalfocusInset: number

      Optional inward inset in points. Defaults to 2.

    • OptionalradiusTopLeft: number
    • OptionalradiusTopRight: number
    • OptionalradiusBottomLeft: number
    • OptionalradiusBottomRight: number

    Returns void

StaticdrawLuminanceGradient

  • drawLuminanceGradient(content, bounds, style, vertical?, radiusTopLeft?, radiusTopRight?, radiusBottomLeft?, radiusBottomRight?): void

  • Draws a luminance gradient fill inside the track area of a control. The gradient goes from transparent to the accent color (style.textColor), left-to-right for horizontal or bottom-to-top for vertical orientation.

    Parameters

    • content: UIDrawContent

      The UIDrawContent to add the gradient path to.

    • bounds: Immutable<Rect2>

      The element's full bounds.

    • style: Immutable<ComputedStyle>

      The resolved CSS style providing borderWidth, borderRadius, and textColor.

    • Optionalvertical: boolean

      Whether to draw the gradient vertically (bottom-to-top) instead of horizontally.

    • OptionalradiusTopLeft: number
    • OptionalradiusTopRight: number
    • OptionalradiusBottomLeft: number
    • OptionalradiusBottomRight: number

    Returns void

StaticdrawText

  • drawText(content, text, contentRect, style, font?): void

  • Draws text inside the content rect using CSS style properties for font, color, and alignment.

    Parameters

    • content: UIDrawContent

      The UIDrawContent to add the text element to.

    • text: string

      The string to display.

    • contentRect: Immutable<Rect2>

      The area within which text is positioned, typically from computeContentRect().

    • style: Immutable<ComputedStyle>

      The resolved CSS style for font, color, and alignment.

    • Optionalfont: Font

      Optional font override. Pass a bold font for font-weight >= 700.

    Returns void

StatichasState

  • hasState(state, flag): boolean

  • Returns true if the given state bitfield contains the specified UIElementState flag.

    Parameters

    Returns boolean

    True if the flag is set.

StaticmapTextAlignment

StaticmapVerticalAlignment

Settings

Member Visibility

On This Page

Constructors
Properties
Methods