この記事は JointJS Advent Calendar 2023 の 3日目の記事です。
この記事ではJointJSの重要な要素 Graph について書きます。
Graphとは
Graphは、JointJSで描画する図の中にあるすべてのCell1を保持するモデルです。JointJSで描画したい要素はすべてGraphに登録されている必要があります。
Graphは別で紹介するPaperに紐づけを行います。一度インスタンス化したGraphはJointJSでの描画が終わるまで保持しておく必要があります。
const graph = new joint.dia.Graph({}, {cellNamespace: joint.shapes});
Graphへの登録方法
要素をGraphへ追加する方法は2つあります。1つ目はGraphクラスのaddCell()メソッドを呼び出す方法、2つ目は要素側のクラスからaddTo()メソッドを呼び出す方法です。どちらも同じ動作となるため、コードの都合で使いやすい方を選択して使用しましょう。2
const graph = new joint.dia.Graph({}, {cellNamespace: joint.shapes});
const rect = new joint.shapes.standard.Rectangle();
// 以下は同じ挙動になる
graph.addCell(rect);
rect.addTo(graph);
Graph生成時に指定できるオプション
Graphのコンストラクターでは、第2引数に指定するJSONのcellNamespaceに、Graphに追加する図形の名前空間を指定します。JointJSの基本図形はjoint.shapesに定義されているため、カスタマイズの図形を使用しない場合はこの値を指定しておけばOKです。
const graph = new joint.dia.Graph({}, {cellNamespace: joint.shapes});
Graphの代表的なメソッド
Graphオブジェクトの中でも使用頻度の高いメソッドを紹介します。
addCell(cell[, opt])
第1引数の要素をGraphに登録します。optの指定は任意です。optにはJSON形式で以下のパラーメーターを指定できますが、多くの場合は指定不要です。
| キー名 | 意味 |
|---|---|
| dry |
trueを指定すると、追加したCellに対してグラフの参照を保持しなくなります。…なんですが、正直使い所がよくわかりませんでした。デフォルト値はfalse。 |
| async |
falseを指定すると、追加したCellを同期でレンダリングします。基本は未指定で非同期でレンダリングしたほうがパフォーマンス的に良いです。デフォルト値はtrue。どうしても要素の生成順をコントロールしなければならないなどの特殊な状況以外では指定しないほうが無難です。 |
| sort |
falseを指定すると、追加対象の要素をGraph内で保持するCellのコレクションの最後に追加されます。3デフォルト値はtrue。 |
addCells(cells[, opt]) / addCells(cell, cell, ..[, opt])
addCell()の複数バージョンです。
clear([options)
Graphに登録された要素をすべて削除します。再描画が必要なときなどに使用します。
findModelsFromPoint(point)
pointで指定した座標に存在する要素を取得します。
getBBox(cell)
引数に指定したCellのBounding Box(＝領域の座標情報）を取得します。
getCell(id)
引数に指定したidを持つCellを取得します。メソッドを呼び出す前にJointJSが内部的に生成したidを特定する必要があるため、使い所は限られるかもしれません。
getCells()
Graphに登録されたすべてのCellを取得します。Element（要素）のみを取得するgetElements()、Link（要素を繋ぐ線）のみを取得するgetLinks()も用意されています。
まとめ
JointJSを使用する上で必ず必要になるGraphについての解説でした。次の記事ではもう１つの重要要素「Paper」について解説していきます。