Skip to main content

component-Rescaler

Rescaler​

type Rescaler = {
  id?: string;
  child: Component;
  mode?: "fit" | "fill";
  horizontal_align?: "left" | "right" | "justified" | "center";
  vertical_align?: "top" | "center" | "bottom" | "justified";
  width?: f32;
  height?: f32;
  top?: f32;
  left?: f32;
  bottom?: f32;
  right?: f32;
  rotation?: f32;
  transition?: Transition;
}

Properties​

  • id - Id of a component.
  • child - List of component's children.
  • mode - (default="fit") Resize mode:
    • "fit" - Resize the component proportionally, so one of the dimensions is the same as its parent, but it still fits inside it.
    • "fill" - Resize the component proportionally, so one of the dimensions is the same as its parent and the entire area of the parent is covered. Parts of a child that do not fit inside the parent are not rendered.
  • horizontal_align - (default="center") Horizontal alignment.
  • vertical_align - (default="center") Vertical alignment.
  • width - Width of a component in pixels. Exact behavior might be different based on the parent component:
    • If the parent component is a layout, check sections "Absolute positioning" and "Static positioning" of that component.
    • If the parent component is not a layout, then this field is required.
  • height - Height of a component in pixels. Exact behavior might be different based on the parent component:
    • If the parent component is a layout, check sections "Absolute positioning" and "Static positioning" of that component.
    • If the parent component is not a layout, then this field is required.
  • top - Distance in pixels between this component's top edge and its parent's top edge. If this field is defined, then the component will ignore a layout defined by its parent.
  • left - Distance in pixels between this component's left edge and its parent's left edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent.
  • bottom - Distance in pixels between this component's bottom edge and its parent's bottom edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent.
  • right - Distance in pixels between this component's right edge and its parent's right edge. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent.
  • rotation - Rotation of a component in degrees. If this field is defined, this element will be absolutely positioned, instead of being laid out by its parent.
  • transition - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a Rescaler component with the same id.

Transition​

type Transition = {
  duration_ms: f64;
  easing_function?: EasingFunction;
}

Properties​

  • duration_ms - Duration of a transition in milliseconds.
  • easing_function - (default="linear") Easing function to be used for the transition.

EasingFunction​

type EasingFunction = 
  | { function_name: "linear"; }
  | { function_name: "bounce"; }
  | {
      function_name: "cubic_bezier";
      points: [f64, f64, f64, f64];
    }

Easing functions are used to interpolate between two values over time.

Custom easing functions can be implemented with cubic Bézier. The control points are defined with points field by providing four numerical values: x1, y1, x2 and y2. The x1 and x2 values have to be in the range [0; 1]. The cubic Bézier result is clamped to the range [0; 1]. You can find example control point configurations here.