JointJS解説 ～Link編～

今回はJointJSの描画要素であるLinkについて解説します。

Linkとは

Linkは図形と図形をつなぐ線です。つなぐ対象の図形の位置から自動的に計算された座標で描画されます。

Linkの使い方

Linkに対してsourceとtargetを設定します。sourceとtargetにはつなぐ対象の図形をそれぞれ設定します。

コード例

// つなぐ対象の四角形の生成（設定は省略）
const rectangle1 = new joint.shapes.standard.Rectangle();
const rectangle2 = new joint.shapes.standard.Rectangle();

// Linkの生成
const link = new joint.shapes.standard.Link();
link.source(rectangle1);
link.target(rectangle2);
link.addTo(graph);

実行結果

インタラクティブな操作を許可している場合、要素の移動に追随してLinkも移動します。

sourceとtargetには座標を指定することもできます。引数はxとyを含むJSONであればOKですが、JointJSのAPI群に「Geometry API」があり、その中のPointクラスを使用すると確実です。

// JSONを使用
link.source({x: 100, y: 30});

// Geometry APIのPointクラスを使用
link.target(new g.Point(300, 40));

経由点の追加

vertices(verticesArray)メソッドを使用すると、Linkの経由点を追加できます。引数のverticesArrayにはGeometry APIのPointの配列を指定します。

コード例

const point1 = new g.Point(20, 70);
const point2 = new g.Point(500, 100);

link.vertices([point1, point2]);
link.addTo(graph);

実行結果

Ancherの指定

Anchorを指定すると、Linkの端点の位置を調整することができます。例えば以下のコード例だと、source側の要素のは左下の点から、targetの要素の右上の点へLinkが描画されます。さらにtarget側ではdx,dyでの座標調整があり、右上の点からズレた位置が端点となります。

コード例

link.source(rectangle1, {
  anchor: {
    name: 'bottomLeft'
  }
});
link.target(rectangle2, {
  anchor: {
    name: 'topRight',
    args: {
      dx: 20,
      dy: -10
    }
  }
});

実行結果

まとめ

Linkを使用すると座標を意識せずに簡単に要素同士をつなぐことができます。要素をつなぐような要件がある場合は積極的にLinkを使うようにしましょう。

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