# Data Binding Properties (property)

[Data binding](./data-binding.md) refers to the attributes of the target component to which data values will be propagated.

## Properties (property)

- text
  - Reflects in the text of the target component.
- fill style (fillStyle)
  - Reflects in the background color of the target component.
  - eg. 'red', 'navy', '#275394', '#777'
- stroke style (strokeStyle)
  - Reflects in the border color of the target component.
  - eg. 'red', 'navy', '#275394', '#777'
- font color (fontColor)
  - Reflects in the text color of the target component.
  - eg. 'red', 'navy', '#275394', '#777'
- value
  - Reflects in the primary property of the target component.
    - Each component has its primary property. In most cases, the 'text' property serves as the primary property.
    - The 'value' property serves the same function as the primary property of each component.
    - For example, in the case of the 'rect' component, the 'value' and 'text' properties have the same effect because the primary property of 'rect' is 'text.'
    - In the case of the 'scenario-run' component, the 'value' functions similarly to the 'variables' property and is used as parameters passed during scenario execution.
    - Please refer to the documentation of each component to determine its primary property.
- data
  - Reflects in the data property of the target component.
  - This property is present in all components for data propagation. When there is a change in the component's data, the configured data binding is executed.
  - Typically, this property does not directly affect the appearance or functionality of the component.
- source
  - Reflects in the source property of the target component.
  - This property can be used when the target component has a source property.
- hidden
  - Reflects in the hidden property of the target component.
  - true, false
- started
  - Allows starting or stopping animations registered in the target component.
  - true, false
- play
  - Reflects in the play property of the target component.
  - This property can be used when the target component has a play property (e.g., for videos, sounds, gifs).
  - true, false
- reference (ref)
  - Reflects in the ref property of the target component.
  - This property can be used when the target component has a ref property.
- options
  - Reflects in the options property of the target component.
  - This property can be used when the target component has an options property (e.g., select).
- rotate
  - Reflects in the rotate property of the target component.
  - Allows specifying the angle at which the component rotates around its x, y, or z-axis in its default form.
  - Represents rotation in 3D space, so it should be bound as an object with 'radian' values, e.g., { x: 0, y: 0, z: -3.14 }.
  - In 2D space, rotation around the z-axis can be provided, e.g., { z: -1.57 }, which rotates counterclockwise by 90 degrees (negative direction is counterclockwise).
- dimension
  - Reflects in the size properties of the target component based on its x, y, and z-axes.
  - Represents size in 3D space, so it should be bound as an object, e.g., { width: 100, height: 100, depth: 100 }.
  - In 2D space, size can be adjusted using width and height properties, e.g., { width: 100, height: 100, depth: 1 } resizes to a width of 100 and height of 100.
- location
  - Moves the target component to the specified position based on its center.
  - Allows specifying x, y, and z positions for the target component.
  - In 2D space, position is determined with x and y coordinates, e.g., { x: 100, y: 100 } moves the center of the component to the logical coordinates (100, 100).
- accessor
  - Reflects in the accessor property of the target component.
  - This property can be used when the target component has an accessor property.
- (tap)
  - Triggers the tap event of the target component.
  - Consequently, the functionality configured for the component's tap event effect will be executed.
- (action)
  - Not applied to any properties of the target component(s).
  - (action) is primarily used when you want to trigger script actions during data propagation.