JointJS解説 〜Geometry API編〜

Geometry APIとは

Geometry APIは、JointJSに同梱される軽量なライブラリです。主に座標に関する操作を行うための機能が搭載されています。
Geometry APIを使わなくてもJointJSを利用することはできますが、JointJSのメソッドの中にはGeometry APIのオブジェクトを引数にとるものも存在します。ですのでAPIが存在すること

なおGeometry APIのドキュメントはこちらのページで読むことができます。

主要なクラス

Geometry APIのクラスをいくつか紹介します。

Point

Pointはx, yからなる座標点を表します。
Pointはg.Point(x, y)でオブジェクトを生成できます。

const point = g.Point(10, 30);

JointJSではLinkの経由点を設定するメソッドverticesや、Paper内のViewを探すメソッドfindViewsFromPointの等の引数にPointのオブジェクトを指定できます。¹

verticesでの使用例

const link = new joint.shapes.standard.Link();
// 始点・終点の引数にも使用できる
link.source(g.Point(100, 100));
link.target(g.Point(400, 100));

// 経由点を定義
const point1 = g.Point(200, 50);
const point2 = g.Point(300, 150);
link.vertices([point1, point2]);

link.addTo(graph);

実行結果

Line

Lineは直線を表します。
2個のPointを引数にとってインスタンス化します。

const line = new g.Line(new g.Point(10, 20), new g.Point(50, 60));

指定した座標からLine上の最も近い座標を返すclosestPointや、指定した座標が直線上に存在するかを判定するcontainsPointなどのメソッドが用意されています。

以下はclosesPointを応用してLinkに対して垂直な線を引くサンプルです。

コード

// 元となるLink
const link = new joint.shapes.standard.Link();

const start = g.Point(100, 100);
const end = g.Point(400, 200);

link.source(start);
link.target(end);
link.addTo(graph);

const line = new g.Line(start, end);

// 垂直な線を引く
const verticalLink = new joint.shapes.standard.Link();
const point = g.Point(200, 100);
const point2 = line.closestPoint(point);

verticalLink.source(point);
verticalLink.target(point2);

verticalLink.addTo(graph);

実行結果

Rect

Rectは四角形を表します。左上の頂点のx,y座標と、縦横の長さを指定してインスタンス化します。

const rect = new g.Rect(10, 10, 300, 300);

先程のLinkにもありましたが、メソッドのcontainsPointを使用することで指定した座標が領域内に含まれているかを判定できます。マウスイベントの処理判定などに利用できそうです。

const rect = new g.Rect(10, 10, 300, 300);
console.log('判定１:', rect.containsPoint(g.Point(30,30)));
console.log('判定２:', rect.containsPoint(g.Point(311,30)));

実行結果

"判定１:" true
"判定２:" false

まとめ

今回はGeometry APIと、いくつかの利用可能なクラスを紹介しました。JointJSを使う中で、座標に関わる込み入った操作が必要になる場合は、Geometry APIを使用して解決できないかを検討してみてください。

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

1. これらのメソッドは、厳密にはxとyのプロパティを含むオブジェクトであれば何でもOKな仕様になっています。ただ、TypeScriptを利用するプロジェクトの場合では型なしのオブジェクトを使用するよりもPointクラスを使用するほうがしっくり来る場合が多いかと思いますね。 ↩