VueでJointJSを使用する

今回はVue.jsでJointJSを使う方法を紹介します。

サンプルとして、Vueで定義したボタンをクリックすると四角形が追加されていくアプリを作成しました。

ソースはこちら。

導入方法

今回はVue-cliで作成したアプリケーションにJointJSを導入していきます。
以下コマンドでJointJSを導入します。

npm install --save jointjs

使用方法

Vue.jsで使うと言っても、基本的な使用方法はこれまでに紹介してきた方法と変わりません。
今までの紹介内容と異なる部分をかいつまんで紹介します。

モジュールのimport

Vue.jsというよりもnpm経由で導入した場合の話になりますが、ソース内でJointJSの機能を参照できるようにモジュールのインポートを行います。

import { dia, shapes } from 'jointjs';

Graph, Paperの扱い

Vueのコンポーネント内でJointJSを使用する場合は、VueからGraphやPaperを参照できる必要があります。
ですのでVueのdataにGraphとPaperを含めてあげるようにしましょう。

export default {
  data() {
    return {
      graph: null,
      paper: null,
      startPos: 20,
    }
  },
  // 以下省略

GraphとPaperは初期化しないと使えませんが、コンポーネントの要素が生成されていないとPaperのelを指定することができません。ですので、Vueのライフサイクルmountedで初期化を行います。

  mounted() {
    this.graph = new dia.Graph({}, { cellNamespace: namespace });
    this.paper = new dia.Paper({
      el: document.getElementById('paper'),
      model: this.graph,
      width: 600,
      height: 600,
      drawGrid: "mesh",
      gridSize: 10,
      cellViewNamespace: namespace,
      defaultLink: () => new shapes.standard.Link(),
      linkPinning: false,
      defaultAnchor: {
        name: 'bottomLeft',
      }
    });
  }

Cellの追加

GraphはVueのdataで定義しているため、this.graphでアクセスすることができます。アクセスさえできれば後はVueを使わないJointJSと変わりなく使用することができます。

const rect = new shapes.standard.Rectangle({
    // 省略
});
this.graph.addCell(rect);

まとめ

今回はVue.jsのアプリケーションでJointJSを導入・使用する方法を紹介しました。
フレームワーク内で使用するとデータの扱いはVue側に任せ、図の描画をJointJSに寄せるといった使い分けができ、非常に便利です。VueプロジェクトでJointJSの利用を検討されている方は、こちらの方法を参考に導入してみてはいかがでしょうか。

余談：JointJS+を利用している場合

有料版のJointJS+を利用している場合、Vue.jsとJointJSを利用しやすくするためのrappidというライブラリが使用できるみたいです。私は使ったことがなく解説ができませんので、使用方法を知りたい方は公式ドキュメントを参照してください。

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