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

以前、【JointJS】LinkToolsを使ってLinkを操作できるようにするという記事を書きましたが、今回はそれのElement版になります。

ElementToosとは

LinkToolsのElement版です。
LinkToolsがLinkにツールを表示する機能だったのに対して、ElementToolsはElementにツールを表示する機能です。

利用可能なElementToolsの例

Remove

対象のElementを削除できるボタンを追加します。

Control

図形を操作するためのハンドラーを追加します。操作時の挙動はgetPosition/setPosition等のメソッドでカスタマイズする必要があります。

以下はgetPosition/setPositionで角丸を変化させるカスタマイズを行った場合の動作になります。

Button

LinkToolsと同様に、カスタムのボタンを追加します。カスタムの内容を

コード例

const button = new joint.elementTools.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: -20,
  offset: -10,  
  action: function(evt) {
    this.model.attr('body/stroke', 'red');
  }
});

注意：ToolsViewは使いまわしできない

複数のElementに対して同じElementToolsを適用したい場合、ToolsViewに設定する全てのElementToolsをElementごとに生成し直して、別々のインスタンスを割り当てる必要があります。同じインスタンスを使いまわそうとした場合、最後に追加したElementのみにElementToolsが適用される仕様になっています。

良い例.js

// ToolsViewのインスタンスを生成する
function createToolsView() {
  const removeButton = new joint.elementTools.Remove();
  const toolsView = new joint.dia.ToolsView({
      tools: [
        removeButton,
      ]
  });
  
  return toolsView;
}

// (中略)

// ElementごとにToolsViewのインスタンスを生成しているので、両方に表示される
rect1View.addTools(createToolsView());
rect2View.addTools(createToolsView());

悪い例.js

const removeButton = new joint.elementTools.Remove();
const toolsView = new joint.dia.ToolsView({
  tools: [
    removeButton,
  ]
});

// (中略)

// 同じtoolsViewインスタンスを流用しているため片方にしかボタンが表示されないrect1View.addTools(toolsView);
rect2View.addTools(toolsView);

表示制御

ElementのViewからshowTools(), hideTools()メソッドを呼び出すことで、ElementToolsの表示を制御できます。
例えば、イベントと組み合わせることで「ホバー時のみにElementToolsを表示する」といった制御も可能になります。

コード例

paper.on('element:mouseover', function(elementView) {
  elementView.showTools();
})

paper.on('element:mouseout', function(elementView) {
  elementView.hideTools();
})

実行結果

まとめ

今回はElementを操作させるためのElementToolsを紹介しました。基本的にはLinkToolsの使い方と変わりません。リッチな操作感が求められるUIを作成する場合は導入を検討してみても良いのではないでしょうか。

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