SVG勉強した流れを残したよ
SVGのベジェ曲線の基礎から試しながらだんだん応用して進化していく様子をステップごとに区切って残しました。 その中身はこの Zenn の記事にまかせて、ここでは苦労ポイントみたいなのを書いておきます。
こういうのをつくりたい
懐かしの QuartzComposer …。こういうのを使ってできるインタラクティブグラフィックやゲームではなく、このGUI自体をつくりたい、というお話です。
どうやるか
このワイヤーというかコネクターの曲線をどう実現するかが一番悩ましかった。 とりあえず慣れてるVueでノードコンポーネントのところだけ作ってみたりしたけど、配置するにはキャンバスみたいな概念が必要そう。 いろいろ試行錯誤したりしていると、やっぱりSVGじゃね？となって久方ぶりのD3.jsも試してみたけどなんか違う。途方に暮れて調べてたらこの記事に行き着いた。 まさにコレや！
ご丁寧にソースコードも公開してくださっているので、わたくしも公開そして紹介しようかと。
ありがとう id:hashrock さん！
SVGとVueは相性が良い
Reactもいっしょだと思うけど。グラフィックがリアクティブに動作すると面白い。グリグリ動かせます。試したい人はZennの記事からね。手が込んだ作りになってないので、雑なドラッグにはご注意。
SVGではGUIをつくりにくい
SVGには丸とか四角とか線とかテキストみたいなプリミティブなものしかなくて、複雑に組み合わせれば凝った表現はできるんだろうけど、それはSVGの役割ではないな～という考えに至った。Vueでコンポーネントを構築して、それをレイアウトするためにSVGが使えないかなと悩んだところ、hashrockさんの付箋サンプルを見たら答えがあった。<foreignObject>だ。コレや！
ところで細かい工夫点なのですが、Vueコンポーネントとコネクタは繋がってるように見えて実は独立しています。赤枠はSVGで、その中がVueでサイズを合わせてるんですね。左側インプットの点も、うまいこと箇条書きの位置に合わせているだけです。つまり、中のテキストが改行されると崩れてしまいます…！
ビューの移動(パン)、ズームを取り入れると激ムズ
こういうGUIはドラッグできなきゃ使い物にならないですよね。今回もちゃんと組み込みました。便利なライブラリ svg-pan-zoom で一発解決！
と思いきや、パン＆ズームしたキャンバスにマウスカーソルポジションをそのまま適用できるはずもなく……。
うまくやるためには、移動したり拡大縮小した分を絡めて計算して、歪んだ世界と同期をとるしかないんですね。
こんなの見てもなにもワカランので、こちらの記事を見ながら小一時間試行錯誤したらなんかできました。これはCSSのやつだけど、まぁ一緒っぽいね！
今回はこのあたりで。
望んでいるものにはまだ程遠いけど、コアなところの技術検証はできたかも？ ノードコンポーネントの右肩に 100% とか書いたままにしちゃったけど、、勘のいい人はわかるんじゃないかな。 そう、そういうものを実現したいんですよ。完成したら革命が起きる！
