１．概要
パネルコレクションは、1つ以上のパネルを収容し、それらを並べて配置する機能を担う。WebページのDOM要素（div要素など）に紐づけらることで、ページ上にHuTimeが表示される。また、複数のパネルコレクションを、それぞれWebページ内の別々の要素に紐づけることで、1つのWebページ内に複数のパネルコレクションを置くこともできる。この場合、1つのパネルコレクションでユーザが表示範囲を変更すると、他のパネルコレクションの表示範囲も連動して同様に変更される。
２．オブジェクトの生成
コンストラクタ
HuTime.PanelCollection([vBreadth [, tLength]])
- vBreadth
- 型：数値
- 既定値：null
- v軸方向の長さ（単位：px）。vBreadthの設定値は、vBreadthModeなどの他の設定値と関連して、v軸の長さに反映される。
- tLength
- 型：数値
- 既定値：600
- t軸方向の長さ（単位：px）。tLengthの設定値は、tLengthModeなどの他の設定値と関連して、t軸の長さに反映される。
３．パネルコレクションの追加
パネルコレクションは、アプリケーションルートオブジェクトのappendPanelCollectionメソッドにより追加される。
ht.appendPanelCollection(panelCollection, targetElement)
- 返値
- なし
- ht
- 型：HuTime
- パネルコレクションを追加するHuTimeルートオブジェクト。
- panelCollection
- 型：HuTime.PanelCollection
- HuTimeルートオブジェクトに追加するパネルコレクション。
- targetElement
- 型：HTMLElement
- パネルコレクションを紐づけるページ内のDOM要素。
サンプルコード（実行例はこちら）。アプリケーションルートオブジェクト（変数ht）にパネルコレクション（変数pnls）を追加している。この過程で、id="timeline"であるdiv要素がパネルコレクションを紐付けるページ内のDOM要素として指定されている。後述の書式指定により、パネルコレクションの背景をピンク色にしている。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
<title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
var ht = new HuTime();
var pnls = new HuTime.PanelCollection();
ht.appendPanelCollection(pnls, document.getElementById("timeline"));
pnls.style.backgroundColor = "pink";
ht.redraw();
</script>
</body>
</html>
４．表示方向の設定
表示方向は、パネルコレクションのdisplayModeプロパティにより指定する。
- displayMode
- 型：数値
- 既定値：0
- 反映：再描画後
-
displayModeの値 t軸の方向 0 左から右 1 右から左 2 上から下 3 下から上
５．サイズの設定
パネルコレクションの表示サイズは、パネルコレクションがアプリケーションルートに追加される過程で紐づけられたDOM要素(以下、「親要素」）の位置と大きさ、および、以下のプロパティが関連する。また、表示方向により、各プロパティの反映のされ方が異なる。
プロパティ
- tLengthMode
- 型：数値
- 既定値：1
-
t軸方向の表示幅（px）の決定方法。
0 設定された値。 1 紐づけられたDOM要素の幅に合わせる。 - vBreadthMode
- 型：数値
- 既定値：2
-
v軸方向の表示幅（px）の決定方法。
0 設定された値。 1 紐づけられたDOM要素の幅に合わせる。 2 内包しているパネルに合わせる。
ヨコ表示の場合
t軸の幅(px)
| tLengthMode | tLength | 親要素の幅設定 | t軸の幅 |
|---|---|---|---|
| 0 | null | あり | 既定値（600） |
| なし | 既定値（600） | ||
| 値 | あり | tLengthの値 | |
| なし | tLengthの値 | ||
| 1 | null | あり | 親要素の幅 |
| なし | 親要素の幅（ウィンドウサイズの変更による親要素の幅の変化に連動） | ||
| 値 | あり | 親要素の幅 | |
| なし | 親要素の幅（ウィンドウサイズの変更による親要素の幅の変化に連動） |
v軸の幅(px)
| vBreadthMode | vBreadth | 親要素の高さ設定 | v軸の幅 |
|---|---|---|---|
| 0 | null | あり | 既定値（150） |
| なし | 既定値（150） | ||
| 値 | あり | vBreadthの値 | |
| なし | vBreadthの値 | ||
| 1 | null | あり | 親要素の高さ |
| なし | 既定値（150） | ||
| 値 | あり | 親要素の高さ | |
| なし | 既定値（150） | ||
| 2 | null | あり | 内包するパネルの高さ* |
| なし | 内包するパネルの高さ* | ||
| 値 | あり | 内包するパネルの高さ* | |
| なし | 内包するパネルの高さ* |
*内包するパネルが無い場合は、既定値（150）となる。
タテ表示の場合
t軸の幅(px)
| tLengthMode | tLength | 親要素の高さ設定 | t軸の幅 |
|---|---|---|---|
| 0 | null | あり | 既定値（600） |
| なし | 既定値（600） | ||
| 値 | あり | tLengthの値 | |
| なし | tLengthの値 | ||
| 1 | null | あり | 親要素の高さ |
| なし | 既定値（600） | ||
| 値 | あり | 親要素の高さ | |
| なし | 既定値（600） |
v軸の幅(px)
| vBreadthMode | vBreadth | 親要素の幅設定 | v軸の幅 |
|---|---|---|---|
| 0 | null | あり | 既定値（150） |
| なし | 既定値（150） | ||
| 値 | あり | vBreadthの値 | |
| なし | vBreadthの値 | ||
| 1 | null | あり | 親要素の幅 |
| なし | 親要素の幅（ウィンドウサイズの変更による親要素の幅の変化に連動） | ||
| 値 | あり | 親要素の幅 | |
| なし | 親要素の幅（ウィンドウサイズの変更による親要素の幅の変化に連動） | ||
| 2 | null | あり | 内包するパネルの幅* |
| なし | 内包するパネルの幅* | ||
| 値 | あり | 内包するパネルの幅* | |
| なし | 内包するパネルの幅* |
*内包するパネルが無い場合は、既定値（150）となる。
６．書式設定
styleプロパティにより、パネルコレクションの書式を設定することができる。styleプロパティの設定内容は、パネルコレクションが持つDOM要素（div要素）のstyle属性に反映される。「３．パネルコレクションの追加」で示した例では、背景色（style.backgroundColor）にピンク色を指定している。通常は、パネルコレクションの上にパネルが表示されるため、パネルコレクションの書式は見えない。パネルが配置されてない部分がある場合のみ、パネルコレクションの書式を確認することができる（サンプルコードはパネルが配置されていないため、全面が確認できる）。
７．その他の主要なプロパティとメソッド
パネルコレクションでは、パネルコレクション内のパネルの動作を統括するためのプロパティがある。
プロパティ
- id
- 型：文字列
- 既定値：null
- パネルコレクションを一意に識別するためのID。
- name
- 型：文字列
- 既定値：null
- パネルコレクションの名称。
- visible
- 型：真偽値
- 既定値：true
- 反映：再描画後
- パネルコレクションの可視/不可視の設定。trueの場合に可視。
- mouseEventCapture
- 型：数値
- 既定値：3
- マウスイベントをキャプチャする範囲。0:なし, 1:パネルコレクション本体のみ, 2:収容されたパネルのみ, 3:パネルコレクション本体と収容されたパネルの両方。
- dragSensitivity
- 型：数値
- 既定値：5
- ドラッグされたと判断するためのマウスの最小移動量（単位:px）。
- vScrollable
- 型：真偽値
- 既定値：true
- 反映：即時
- パネルのv軸方向へのスクロールの可否。trueの場合にスクロール可能。
- wheelZoomRatio
- 型：数値
- 既定値：0.02
- ホイール操作1カウントあたりのt軸の拡大/縮小率。0以下の値を設定すると、ホイールの回転方向と拡大・縮小操作との関係が逆になる。
メソッド
redraw()
パネルコレクションの再描画。収容されているパネルも再帰的に再描画される。
- 返値
- なし
clear()
パネルコレクションの表示内容の消去。
- 返値
- なし
