kondoumh のブログ

- とあるソフトウェアエンジニアのめったに更新されないブログ -

JointJS でトイ・ダイアグラムエディタ

前回 CodePen でトイ・ダイアグラムエディタを作った時は、Konva.js を使っていました。

blog.kondoumh.com

今回は、JointJS で同様のトイプログラムを書いてみました。

JointJS: Visualize and interact with diagrams and graphs

f:id:kondoumh:20180708083705g:plain

JointJS 自体は、2014年末ぐらいから知ってはいました。

当時は、スマートデバイスへの対応が今一つという印象でしたが、3年ぐらい経つと当然のように対応してきて機能的にもかなり進化している印象です。 商用の Rappid というライブラリの基盤となっていて、作図関係の機能は Rappid と遜色ありません。Rappid には Undo / Redo とか Inline TextEditor などアプリ寄りの機能がアドオンされています。

Rappid and JointJS Comparison

最近 Node-RED Spring Flo などのパイプラインエディタを調査していて、Node-RED はエディタ機能を自前で作り込んでいてかなりコード規模が大きくなっているのに対し、Spring Flo のコードはシンプルなのでよく見たら JointJS を採用していたので、その存在を思い出しました。

Backbone.js に依存しているというのが時代を感じますが、使いやすい API を提供している機能豊富なライブラリに仕上がっています。

ダイアグラムエディタの JointJS 版は Konva.js 版と比べても 1/3 ぐらいのコード量でした*1。ノードやリンクの管理をお任せできてしまうので楽できます。

See the Pen JointJS-dia by kondoumh (@kondoumh) on CodePen.

*1:Konva.js 版は CoffeeScript で書いてるのでかなり短くなってるのですが。