前回 CodePen でトイ・ダイアグラムエディタを作った時は、Konva.js を使っていました。
今回は、JointJS で同様のトイプログラムを書いてみました。
JointJS: Visualize and interact with diagrams and graphs
JointJS 自体は、2014年末ぐらいから知ってはいました。
JointJS 知らなんだ。View only な KineticJS と違い Backbone ぽい MVC フレームワーク。JointJS - the HTML 5 JavaScript diagramming library. http://t.co/6OO1ialrdA
— MH (@kondoumh) 2014年12月23日
当時は、スマートデバイスへの対応が今一つという印象でしたが、3年ぐらい経つと当然のように対応してきて機能的にもかなり進化している印象です。 商用の Rappid というライブラリの基盤となっていて、作図関係の機能は Rappid と遜色ありません。Rappid には Undo / Redo とか Inline TextEditor などアプリ寄りの機能がアドオンされています。
最近 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 で書いてるのでかなり短くなってるのですが。
