【JointJS】LinkToolsを使ってLinkを操作できるようにする

LinkToolsとは

Linkに対して、ユーザーが操作可能なツールを表示できる機能です。例えばツールチップを表示するためのアイコンをLink上に表示することができます。

利用可能なLinkToolsの例

Remove

対象のLinkを削除できるボタンを配置します。

Segments

Linkを縦・横方向に並行移動させるためのバーを表示します。

SourceAnchor / TargetAnchor

Linkの端点の基点を動かすことができるツマミを表示します。sourceとtargetが別々にあるため、両方必要な場合は2つとも有効にします。

Button

カスタムのボタンを配置します。ボタンの描画情報は引数のJSONのmarkupで指定します。markupが指定されないと何も描画されません。JSONのactionでクリック時の動作を指定できます。

コード例

const button = new joint.linkTools.Button({
  markup: [
    {
      tagName: 'rect',
      selector: 'button',
      attributes: {
        width: 50,
        height: 20,
        fill: '#001DFF',
        cursor: 'pointer'
      },
    },
    {
      tagName: 'text',
      selector: 'inner-text',
      attributes: {
        fill: '#FFF',
        x: 14,
        y: 13,
        'font-size': 8,
        cursor: 'pointer'
      },
      children: [
        'ボタン'
      ]
    },
  ],
  distance: 60,
  offset: -10,
  
  // ボタンがクリックされたらLinkの色を変更する
  action: function(evt) {
    this.model.attr('line/stroke', 'red');
  }
});

実行結果

LinkToolsの使い方

LinkToolsは以下の手順でLinkに追加します。

1. 使用するLinkToolsのインスタンスを生成する
2. 1のLinkToolsをToolsViewにまとめる
3. LinkToolsを追加したいLinkのViewに対してToolsViewを追加する

1, 2で複数のLinkToolsをまとめることで、1つのLinkに対して複数のLinkToolsを使用できます。

コード例

// 使用するLinkToolsを生成
const removeButton = new joint.linkTools.Remove();
const segments = new joint.linkTools.Segments();

// LinkToolsをToolsViewにまとめる
const toolsView = new joint.dia.ToolsView({
    tools: [
      removeButton,
      segments
    ]
});

// LinkのViewに対してToolsViewを追加する
const linkView = link.findView(paper);
linkView.addTools(toolsView);

LinkToolsの位置調整

RemoveButtonやButton等のボタン系のLinkToolsでは、distance, offsetを使用することでボタンの位置を調整することができます。

distance

Linkの起点（または終点）からどれくらい離れた位置にボタンを配置するかを設定します。実数値指定と百分率指定ができます。

• 実数値指定：Linkの起点から、指定された数値の座標分離れた位置にボタンを配置する。負数を指定することもでき、その場合はLinkの終点から指定されたの座標分となる。
• 百分率指定：Linkの起点を0%、終点を100%としたときに配置する位置の百分率を指定します。

offset

distanceで決定した位置からLinkの垂直方向にどれだけずらすかを指定します。ずらす座標の距離を実数値で指定します。

コード例

const removeButton = new joint.linkTools.Remove({
  distance: '10%',
  offset: -10,  
});

const button = new joint.linkTools.Button({
  markup: [
    // 中略
  ],
  distance: -20,
  offset: -10,  
});

実行結果

まとめ

今回はLinkを操作できるようにするためのLinkToolsを紹介しました。
リッチなLinkの動作が必要になるときは、LinkToolsの使用を検討してみてください。

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