# データ バインディング プロパティ (property)

[データバインディング](./data-binding.md) で伝播されるデータの値が適用される対象コンポーネントのプロパティを意味します。

## プロパティ (property)

- text
  - 対象コンポーネントのテキストに反映されます。
- fill style(fillStyle)
  - 対象コンポーネントの背景色に反映されます。
  - 例： 'red'、'navy'、'#275394'、'#777'
- stroke style(strokeStyle)
  - 対象コンポーネントのストロークの色に反映されます。
  - 例： 'red'、'navy'、'#275394'、'#777'
- font color(fontColor)
  - 対象コンポーネントのテキストの色に反映されます。
  - 例： 'red'、'navy'、'#275394'、'#777'
- value
  - 対象コンポーネントの代表プロパティに反映されます。
    - 各コンポーネントはそれぞれの代表プロパティを持っています。ほとんどのコンポーネントは 'text' プロパティが代表プロパティです。
    - value プロパティは各コンポーネントの代表プロパティと同じ機能を持っています。
    - たとえば、 'rect' コンポーネントの場合、 'value' プロパティと 'text' プロパティは同じ効果を持ちます。 'rect' の代表プロパティは 'text' であるためです。
    - 'scenario-run' コンポーネントの場合、 'value' は 'variables' プロパティと同様の機能をします。このプロパティはシナリオの呼び出し時にパラメーターとして使用されます。
    - 各コンポーネントの代表プロパティが何であるかは、各コンポーネントのヘルプを参照してください。
- data
  - 対象コンポーネントの data プロパティに反映されます。
  - すべてのコンポーネントはデータ伝播のために持っているプロパティです。 (コンポーネントの data に変更が加えられると、設定されたデータバインディングが実行されます)
  - 通常、このプロパティはコンポーネントの外観や機能に直接影響を与えません。
- source
  - 対象コンポーネントの source プロパティに反映されます。
  - 対象コンポーネントに source プロパティがある場合にのみ使用できます。
- hidden
  - 対象コンポーネントの hidden プロパティに反映されます。
  - true、false
- started
  - 対象コンポーネントに登録されたアニメーションの開始または停止を制御できます。
  - true、false
- play
  - 対象コンポーネントの play プロパティに反映されます。
  - 対象コンポーネントに play プロパティがある場合にのみ使用できます。 (動画、サウンド、gif など)
  - true、false
- reference(ref)
  - 対象コンポーネントの ref プロパティに反映されます。
  - 対象コンポーネントに ref プロパティがある場合にのみ使用できます。
- options
  - 対象コンポーネントの options プロパティに反映されます。
  - 対象コンポーネントに options プロパティがある場合にのみ使用できます。 (select)
- rotate
  - 対象コンポーネントの rotate プロパティに反映されます。
  - 基本的な形状から、コンポーネントの x、y、z 軸を中心に回転する角度を指定できます。
  - 3 次元空間での回転値を表すため、{ x: 0, y: 0, z: -3.14 } のように各々の 'radian' 値としてオブジェクトにバインドする必要があります。
  - 2 次元空間での回転は、z 軸の値を提供することで行われ、{ z: -1.57 } をバインドすると、時計回りに 90 度回転します。 (マイナス方向が時計回りです。)
- dimension
  - 対象コンポーネントの寸法ごとのサイズプロパティに反映されます。
  - 基本的な形状から、コンポーネントの x、y、z 軸を基準にサイズを指定できます。
  - 3 次元空間でのサイズを表すため、{ width: 100, height: 100, depth: 100 } のように各々のオブジェクトにバインドする必要があります。
  - 2 次元空間でのサイズは、width、height 軸の値を提供することで行われ、{ width: 100, height: 100, depth: 1 } をバインドすると、幅 100、高さ 100 のサイズに変更されます。
- location

  - 対象コンポーネントの中心位置を基準に指定された位置に移動します。
  - 対象コンポーネントの x、y、z 位置を指定できます。
  - 2 次元空間での位置は、x、y 軸の値を提供することで設定でき、{ x: 100, y: 100 } をバインドすると、コンポーネントの中心が論理的な座標上の 100、100 の位置に移動します。

- accessor
  - 対象コンポーネントの accessor プロパティに反映されます。
  - 対象コンポーネントに accessor プロパティがある場合にのみ使用できます。
- (tap)
  - 対象コンポーネントのタップイベントを発生させます。
  - したがって、コンポーネントのタップイベント効果に設定された機能が動作します。
- (action)
  - ターゲットコンポーネント（たち）のどのプロパティにも適用されません。
  - (action) プロパティは通常、データ伝播のタイミングでスクリプトを実行する場合に使用されます。
