【JointJS】Anchor設定でLinkの端点位置を指定する

Anchorとは

ElementをLinkでつなぐとき、デフォルトではLinkの始点と終点はElementの位置によって自動で決定されます。
ですが、図形によっては始点・終点の位置が自動で決まってしまうと不都合な場合があります。
AnchorはElementの始点・終点の方向を指定できる設定です。始点・終点を意図した位置に設置できます。

Anchorの指定方法

Paper全体のデフォルトを指定

PaperのdefaultAnchorを指定することで、Anchorのデフォルト値を設定できます。

var paper = new joint.dia.Paper({

    // （中略）
    
    defaultAnchor: {
    name: 'midSide',
  }
});

Linkごとに指定

LinkごとにAnchorを指定することで、個別に設定ができます。

link.source(rectangle1, {
  anchor: {
    name: 'topRight',
  }
});
link.target(rectangle2, {
  anchor: {
    name: 'bottomLeft',
  }
});

Anchorのnameに指定できる値

center / modelCenter

Elementの中央が基準になります。centerはViewの中央、modelCenterはmodelの中央、という差があります。

perpendicular

垂直に線を引ける場合は垂直のルートになります。

midSide

領域の外周の中央の点からLinkが引かれます。

top / bottom / left / right

それぞれ領域の上・下・左・右の辺の中央が基準となります。
以下はtopを設定したときの挙動です。

topLeft / topRight / bottomLeft / bottomRight

それぞれ領域の左上・右上・左下・右下の点が基準となります。
以下はbottomLeftを設定したときの挙動です。

まとめ

Anchorを設定することでLinkの端点位置を調整することができました。もう少し細かい設定もできるのですが、今回はここまでの紹介とさせてください。

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