JointJSでHello World #jointjs

はじめに

JointJSでHello Worldする方法は、JointJS公式チュートリアルのInstallationのページに載っています。こちらのページの内容およびサンプルコードをベースにポイントとなる部分の説明を書いていきます。

準備①：依存ライブラリの読み込み

以下の記載の通り、JointJSを使用するためにはJointJS本体の他にjQuery, Lodash, Backboneをそれぞれ読み込む必要があります。

For your JointJS application to run, the JointJS library and its dependencies have to be included in the source HTML of your page. Our initial example used a CDN to link to the required source files for JointJS, jQuery, Lodash and Backbone:

これらはすべてCDNで提供されているため、ベタのHTMLでJointJSを実行する場合は以下のように書いておけばひとまず使えるようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.7/joint.js"></script>

npmを使っているプロジェクトであれば、npmでjointjsパッケージをインストールすれば依存関係のライブラリも含めてインストールしてくれます。

$ npm install --save jointjs

準備②：GraphとPaperの定義

JointJSで図や表を作成するためには、GraphとPaperを先に定義する必要があります。GraphとPaperについては別の記事で細かく調べた上で解説を書くつもりですが、一言で説明すると以下のようなイメージになります。

Graph：描画する対象を定義して保持しておく場所
Paper：実際に描画を行う領域

GraphとPaperの両方がないとJointJSで描画を行うことができないため、コードの最初の処理でこれらをインスタンス化します。

var namespace = joint.shapes;

var graph = new joint.dia.Graph({}, { cellNamespace: namespace });

var paper = new joint.dia.Paper({
  el: document.getElementById('myholder'),
  model: graph,
  width: 600,
  height: 100,
  gridSize: 1,
  cellViewNamespace: namespace
});

図形の生成

図形のオブジェクトをインスタンス化することで図形を生成します。インスタンス化した図形のオブジェクトは、準備②で用意したgraphにaddすることで描画対象となります。

// 1つ目の四角形
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
    body: {
        fill: 'blue'
    },
    label: {
        text: 'Hello',
        fill: 'white'
    }
});
rect.addTo(graph);

// 2つ目の四角形
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);

Linkの追加

Linkを使うことで、図形同士を線でつなぐことができます。インタラクティブな操作を許可する場合、Linkで繋いだ線は、図形を移動したときに追随して伸び縮みします。

var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);

以上が、JointJSを利用して図を作成する流れとなります。各要素の詳細については別の記事で一つ一つ解説する予定です。

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