バラバラにみえるかもしれないが動機は全部ほぼ一緒。
最初に一つ前でやったことなのに書き忘れてた wheelSensitivity の件。やってみてわかったが、これ、「必ず設定した方がいい」と思った。
元はと言えばメジャーな SVG ビューワあたりからこの傾向があるんだけど、マウスホイールに「反応し過ぎる」のね。気を抜くと一気にズームアウト/インしちゃって迷子になっちゃう。心当たりあるでしょう。こうなると「リセット」手段が用意されてない場合「ページ(またはフレーム)を再読み込み」するしかない「気分になる」のよね。元に戻す気力をなくすほどの迷子になるでしょ。なので wheelSensitivity を小さめに、ワタシは 0.4 にしてみたが、こうすることで「ズーム速度が遅くな」って、迷子になりにくくなる。
Font Awesome の話は一つ前のヤツに追記の形で書いといたんで、興味あれば見といて。「効果抜群だが非常に簡単過ぎて…」なのであえて書き直すようなもんでもない。
一つ前のノンフィクション部分の話の中心にあったのは、「複雑になってきたので UI をコンパクトにしたい、また、パン・ズームの基本操作くらいはサクっと付けときたい」だったわけよ。なので cytoscape.js-toolbar を使ってみようと思ったわけなんだね。やっと cytoscape.js ドキュメントに慣れてきたんだけど、ここ見るだけで cytoscape.js 本体チーム自身の手によるものか、サードパーティ製なのかアイコンでわかるようになってたんだね。cytoscape.js-toolbar はそしてサードパーティ製。どうりで GitHub ページのノリがほかと違うし、やたらに不案内だったわけだわ。
で、cytoscape.js-panzoom は first party 製。CDN にもいる。cytoscape-navigator と機能が被ってそうなのでどちらを採るか悩むとこなんだけれど、ひとまず cytoscape.js-panzoom がすぐに使えたのでね、こっちだけ。ワタシにとって最も重大な機能は「リセット(fit())」だったりする。正直それだけでもいいくらいなんだけど、でも一撃で追加出来るならそれはそれで嬉しかろう。懸念としては「目立ち過ぎて邪魔になったりしないかしら」なので、とにかくやってみる:
1 <head jang="ja">
2 <meta charset="UTF-8">
3 <!-- ... -->
4
5 <!--
6 panzoom のデフォルトスタイルが Font Awesome に依存している。
7 依存しないことも出来るが依存しちゃえば?
8 (https://github.com/cytoscape/cytoscape.js-panzoom#api 参照。)
9 -->
10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
11 <!-- ... -->
12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-panzoom/2.5.2/cytoscape.js-panzoom.min.css">
13
14 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
15
16 <!-- 使いたければ
17 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
18 -->
19
20 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.7/cytoscape.min.js"></script>
21
22 <!-- dagre レイアウトを使いたいなら
23 <script type="text/javascript" src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
24 <script type="text/javascript" src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
25 -->
26 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape-panzoom/2.5.2/cytoscape-panzoom.min.js"></script>
27 <!-- ... -->
28 </head>
29 <!-- ... -->
30 <script>
31 // ...
32 var cy = window.cy = cytoscape({
33 container: document.getElementById('cy'),
34 /* ... */
35 });
36 cy.panzoom(); // デフォルトで良ければこれだけ
37 // ...
38 </script>
というわけでこうなった:
うん、デフォルトで十分な感じがするね。「目立ち過ぎ」な感じもしないし。ただツールチップは出してくれないんであろうか、そこだけが唯一不満。API を読めばやり方はわかる…、か? icon class names だけ手にしてれば css でなんとか…なるっけか? i エレメントに id が付いてるんなら普通に jQuery で attr("title", ...) 出来ろうが、そういうこと? なんにしてもそんくらいはデフォルトでやって欲しいなぁ。
まぁなんであれ「リセット」が付いただけでも大進化だ。少なくともそうみえる。
