Vue + SVG

動機

タッチUIとか、直感的なオブジェクト操作UIみたいなの作ることが増えてきたので、SVGでやりたい

機が熟してきた

iOS13でPointer Eventsが実装！

これでようやくタッチとマウスの統合がなされ、click以外のイベントも手軽に扱える様になった

積極的に使うべきだが、Web開発者はまだD&D実装に慣れていない

サンプルを作るのがいいかもしれない

ドラッグ＆ドロップ

勉強完了

ドラッグ＆ドロップ出来るSVG要素

リサイズ出来るrect

近づくとサイズが変わる要素

クリックすると跳ねる要素

勉強したい

パスの編集

ズーム後もマウス座標が壊れないように

図形の拡大縮小

viewboxやtransformでの変換は、線幅も拡大されてしまう

circle, path, polylineやpolygon, rectなどを同じインターフェースで拡大縮小できる必要がある

グラフィカルなコンポーネントを作るためにみんな苦労してきた

canvas

divやimgを貼り付けて頑張る

SVGがほとんどのブラウザで動くようになっている

SVGだけにしか出来ないことがあるわけではない

しかし、今まで頑張ってきたことをSVGでスキップすることができる

SVGでなくてもいいもの

円と四角だけで構成されているUI

divとborder-radiusで実現可能

画像処理を含むもの

canvasの方が向いている

テキストが大半を占めるもの

SVGのテキスト対応は弱い（複数行テキストがない）

3D

WebGL

掴んで動かせるUIを作る

SVGは「掴んで動かす」UIを手頃にする

「オブジェクトの直接操作」をするUIは、実装コストの高さから、B2Bでは採用されないことが多かった

データバインディング

グラフィック要素の多用

いままでのやり方

canvasでゴリゴリやる

jQuery UIなどの利用（divとCSSでやる）

DOMにデータを持たせることが多く、スパゲッティコードの原因になっていた

直接操作のUI

VueとSVGは、オブジェクトの直接操作UIを作るにあたって必要なピースであって、広まれば「直接操作のUIをコモディティ化する」と言っていいと思う。（誰かの作ったjQuery pluginに頼らなくて済むということ）

無論、C#やJavaなどのデスクトップGUI作成ではもともと出来ていたことで、Webに複雑なUIがようやくやってくるぞということ

最近のフロントエンドは、何故か開発スタックとかデータフローの観点からばかり語られがちだったけど、フロントエンドってそもそもUI切り口なのに語られることが少ない。なぜ誰もバウンディングボックスとかの話をしないのか

SPAかどうかよりも、MPAでいいから画面遷移なしで直接編集できるUIを作ろうとか、そういうのが大事だと思うのだが。。。

Flashで出来ていた、複雑なUIの構築がHTML5で多少実現できるようになったのに、あまりそれをやる人がおらず、でもFlashをdisる人が結構いるのなんかバランスが悪いと思う

つらみについて

マウス位置を取得するのがめんどい

SVGはFFとChromeでoffsetXの解釈が違う（もともとFFにはoffsetXがなかった）

boundingから取得するのが一番安全

pixelRatio > 1のときどうなるのか？

clientX / Yのみでやるのが平和そう

x, yが統一されていない

rectとpathとcircleとかで座標指定の方法がばらばら

（色々言いたいけどここには書けない）

group要素を使ってtranslateするのが一番？

group要素は一切使わず、translateを一切しないという手がある。結局安易な手段に走らない方がいいかもしれない