評価未確定…。
Contents
前置き
ワタシはこれとこれ書いた時点で、この動画のせいで誤解してしまっていたんだけれど、つまり navigator は panzoom を内包してるもんだと思い込んでしまったんだけど、別々なのね、なので両方欲しければ両方取り込まないといけない。
で、どうしても navigator が欲しいのか、と言う話としては、これは「最終的にはいらないようにしたい」のだけれど、今絶賛悩み中のpan, zoom の問題を試行錯誤してると、迷子頻度が非常に高いのよ。ほんととんでもないとこにぶっ飛んでっちゃうんだから。なので「今は欲しい、これ」という感じ。
どうも cytoscape.js の拡張は CDN にいたりいなかったりがバラバラなんだけど、この子はいない模様。なので仕方なくダウンロードしてワタシのサーバに置いて使うことに。で、「どの程度残念なのか」の致命傷っぷりがまだ「評価未確定」なのですわ。
順に説明。
デフォルトのまま使えないアプリケーションは多いような気がする
まず、「デフォルトのまま」だと、アタシのヤツはもうダメなのよ:
というわけで「デフォルトがあかん」が残念ポイント1 なんだけれど、それ以上に「位置そのものを変更するオプションが存在しない」ということこそが、残念ポイント1 の本質なのだわ。
しかも位置移動もサイズ変更も出来ない。ユーザとしてはこれはかなりストレスがたまる。残念ポイント2。
救世主。「container: can be a HTML or jQuery element or jQuery selector」。すなわち「コンテナに包むつもりがないなら逃げ道がないけれどコンテナを変えちゃうのがその逃げ道」ということ。なれば変えちまえ、と。
コンテナで包むとして…
ワタシのヤツは既に jquery-ui 依存なので、だったら Dialog で包んでしまえ、と。これならサイズ変更も移動も出来るし快適だぜっ、と:
1 <style>
2 #cy {
3 width: 100%%; /* MUST */
4 height: 64%%; /* MUST */
5 }
6 button {
7 background-color: transparent;
8 border: none;
9 font-size: 16px;
10 }
11 small {
12 font-size: xx-small;
13 }
14 .dialog {
15 display: none;
16 font-size: small;
17 }
18 .ui-dialog {
19 background-color: rgba(240, 240, 240, 0.8);
20 }
21 i:hover {
22 cursor: pointer;
23 }
24 </style>
25 <!-- ... -->
26
27 <!-- ### -->
28 <button type="submit" id="open-navigator">
29 <i class="fa fa-eye fa-1x" aria-hidden="true" title="Open navigator"></i>
30 </button>
31 <div id="navigator" class="dialog" title="Navigator">
32 </div>
33
34 <!-- ... -->
35 <!-- ###### -->
36 <div id="cy"></div>
37
38 <!-- ... -->
39
40 <script>
41 // ... cy は初期化済みとして…
42 cy.panzoom();
43 var nav = cy.navigator({
44 container: $("#navigator"),
45 });
46 $("#open-navigator").on("click", function() {
47 $("#navigator").dialog({
48 width: 440,
49 height: 420,
50 position: {
51 at: "right top",
52 },
53 close: function(event, ui) {
54 }
55 });
56 });
57 </script>
既にこの時点ですら注意事項が二つあってなぁ。一つが「dialog のサイズは最低でも 400 x 400 ないといけない」らしい、ということ。これより小さいとどうも表示しないか出来ないか、とにかく「うまく動かない模様」。(400 x 400 というのはブラウザの「検証」でサイズを調べて出した値。)二つ目が、「実は可変サイズ」のように振舞ってしまうため、上でやってるようにサイズを指定してもスクロールバーは避けられない、ということ。キャンバスのサイズが自在に拡縮するのに動的に反応するのでどうしてもこうなる。さすがに画面いっぱい使って navigator を使おうとは思わないだろうから、「微」調整はこれはもうイタチごっこ。
というのが残念ポイント3ね。
実際に動くヤツはこれね:
問題かもしれないし問題じゃないかもしれない懸念
ドキュメントからはわからない不安がありましてな。
少なくとも API としては「一時停止」機能は公開されていないわけね。けどね、これって「タイマーで追従しながら静止画を撮り続ける」という作りなのですよ。無論この手のはみなそうだけれど。つまり不安は、さっきの例で「navigator を使わない状態で閉じて」いたとしても元気に静止画撮り続けてくれちゃったら困るでしょう? (ちなみに navigator.destory は解決にならない。ほんとに全部綺麗さっぱり消してしまうから。)
ドキュメントに明示的に書かれてないからにはデバッグするかソースコード解析するしかなくて、そこまではまだやってない。今時点でも結構性能問題は怪しい状態なので、よっぽどなら使わないつもり。あるいは改変前提…、かもね。
この「問題があるかもしれない」が問題あるかないかで結構評価は違うと思う。この問題がないなら他の残念ポイントは比較的許容範囲だと思う。そもそも「迷子にならない」のだけは確かなんだから。
