しっかりドキュメントされてるんだからチョロかろ、と思ったら迷走した。

ネタはずっと続けて同じでこれのそのまま続きだが、「PNG としてエクスポート」だけのネタとして。

公式ドキュメントの例はこうしてる:

1 var png64 = cy.png();
2 
3 // put the png data in an img tag
4 $('#png-eg').attr('src', png64);

うーん、いいんだけどさぁ、これを「エクスポートの例」とするのはなぁ…。結構このタイプの「ダウンロードしたけりゃ自分で右クリックして画像の保存れや!」な UI、良く見かけるけれど、そして普段ならこれでもいいかなと思うけれど、だけどさぁ…。

cytoscape.js を使って作った WEB アプリケーションのユーザはさ、「cytoscape.js が描画したグラフ」を今まさに目の前にしてるわけでしょう? それとまったくおんなじ画像を同じ画面に「表示」てさぁ…。まぁユーザがユースケースを見出すことは出来るのはまぁいいとしてもだな、そもそもそういう「UI 画面設計」をどうすりゃぁいいちゅうんだ。

なので「ダウンロード出来る」形を目指したわけだけれど、迷走の理由は「output Whether the output should be ‘base64uri’ (default), ‘base64′, or ‘blob’.」ね。うーん、これだけ書かれてもワタシは不慣れなのでなぁ…。

答えはいつものように StackOverflow。ワタシの例の場合はこうなった:

 1 <input type="button" value="Save as PNG" id="download_png"/>
 2 <input type="text" id="png_scale" />
 3 <input type="text" id="png_bg" maxlength="20" size=5/>
 4 <script>
 5 // cy は上で既に初期化済みとして…
 6 $('#download_png').on("click", function(ev) {
 7         var a = document.createElement('a');
 8         //var blob = new Blob([content], {'type': contentType});
 9         var option = {
10             output: "blob",
11             scale: parseFloat($('#png_scale').val()),
12         };
13         var bg = $('#png_bg').val();
14         if (bg) {
15             option["bg"] = bg;
16         }
17         var blob = new Blob([
18             window.cy.png(option)
19         ], {'type': 'application/octet-stream'});
20         a.href = window.URL.createObjectURL(blob);
21         a.download = "voice_actors.png";
22         a.click();
23     });
24 </script>

まぁこれを「苦労」と言うのかといえばそうでもないわけで、思ったよりは迷走したものの、たかが知れている。想定内だ。なので「是が非でも自分で手を動かしてみねばならんし説明したい」なんて思うのは「実現方式について知っときたいから」ではない。

振る舞いについて詳しく書いてくれてないのよ、なのでやってみないとわからんのだわ。気になってた点:

1. 今目にしてる状態が反映されるのかどうか
2. SVG エクスポートがあってくれたら良かったのにないので、「画質はコントロール出来る?」

一つ目については「ビューポート依存かどうか」の制御はあるのよね。けれど、例えばノードを手で動かしたとしたら、それは反映されるのかどうか、というのが特に気になるわけね。「自動レイアウトのまんまだと読みにくいから少し調整して」画像にしたいのに、それが出来なかったとしたら残念過ぎるからね。

てわけで、まず「画質」だけど、デフォルトはかなりヒドい:

ヒドさはちょっと伝わりにくいと思うけれど、ダウンロードして目一杯拡大してみてくれ。相当粗いよ。

というわけで画質を調整出来る唯一のパラメータ「scale」を 10 にしてみた:

うん、許容範囲だね、と喜びたいところだが無論ファイルサイズはバカでかくなるので注意。

大した面白くはないしちょっと意図に反してる気がするけど bg で背景を変えれる:

では(アタシ的には)本題の、「手でノードを動かしたら反映するの?」の答え:

いいね、これで「いいあんばいにマニュアル調整した絵」を作れるてことだ。

確認したかったのはこれだけ。あと機能的には「ビューボートに依存するかしないか」制御の full があるけど、まぁこれはやってみなくてもいいでしょ。

てわけでこれからのさらに進化版として:

いつものごとく「フレームのソースを表示」もしくは Open Frame ね。

ちなみに、説明してない進化もあるが cytoscape.js とは全然関係ない。(エッジのマウスオーバーと、「キャラクター」ノードをダブルクリックした際に、これまではその声優が演じたキャラとその番組だけを開いてたんだけど、ダブクルクリックした声優以外の既に開いている声優が関連付いたら開くようにした。つまり「共演者」がわかりやすくなったてこと。)