JointJSのViewとは何なのか

今回の記事ではJointJSのViewについて書きます。

JointJSのView

JointJSで描画されるすべてのCellには、Cellに対するViewがそれぞれ存在します。
このViewはBackbone.jsのViewを継承しています。

JointJSのdia.CellViewのドキュメントによると、Viewは以下の役割を担っていると記載があります

• Paper内の要素のレンダリング
• Cellのポインタイベント処理
• Cell操作のための方法を提供する

つまり、JointJSでのSVGの描画やユーザー操作への対応の実装のためにBackbone.jsのViewを利用している、というだと思います。

Viewの使い方

JointJSのViewは様々な使い方ができます。ここでは個人的に使用頻度が高いと感じるものを紹介します。

Paperからの検索

PaperからCellを探すとき、直接Cellを探すことができないためViewを経由して検索を行います。

例えば以下のコード例では、座標を元にCellを探すことができますが、findViewsFromPointから直接取得できるのはViewになります。

const views = paper.findViewsFromPoint({x: 110, y: 50});

イベントの引数

各種イベントにロジックを組むとき、イベントで呼び出すメソッド内でViewを参照することができます。

paper.on("cell:pointerdown", function(cellView) {
  // cellViewからアクセスしてCellを利用した処理を行う
})

要素のオブジェクトへのアクセス

Viewに含まれるmodelプロパティにはGraphへ登録されているCellの参照が登録されています。そのため、Viewさえ見つけられればmodel経由で要素の情報の取得や、編集を行うことができます。

// Cellをクリックしたらテキストを変更するサンプル
paper.on("cell:pointerdown", function(cellView) {
  cellView.model.attr('label/text', 'view経由で変更');
})

まとめ

今回はJointJSのViewについて簡単に紹介しました。View自体は描画されているわけではなく掴みどころが難しい概念ですが、実際の処理の中で扱っていくうちに便利さを感じることができます。

※この記事は JointJS Advent Calendar 2023 の記事です。他の記事を読む場合はカレンダーのページを参照してください。