miyanokomiya
最近作っているもの
SVGベースのボーンアニメーション作成ソフト
これすごい

前回の成果
野望
切断面を再結合させていきたい(頓挫中)
作りかけなもの
生SVGで作るリッチアイコン集
動きが気持ち良いですね。特に鍵がかかった事がわかりやすくて良い

停滞中なもの
前回から継続中のマインドマップサービス
GUI無関係の環境整備をやり遂げて力尽きる
gitlab -> github移植、依存パッケージアプデ、firebase関連アプデ、CI整備、デプロイ整備
課題
大量にノードがあるとスクロールが重くなってくる(特にモバイル)
ブラウザネイティブのスクロール、ズーム挙動からの劣化が激しい
今回の話題
無限平面実現方法
SVG平面が基準
SVG平面の一部を切り取る窓としてwindow平面(造語)を作る
SVG平面上における窓の始点 { x: number, y: number }
SVG平面とwindow平面の単位比率 scale: number
html <div class="svg-canvas-wrapper" :style="{ width: `${width}px`, height: `${height}px` }">
<svg :viewBox="`${x} ${y} ${width / scale} ${height / scale}`">
スクロールの挙動
ドラッグ追従型 -> 簡単
すっとぶ型
方法模索中
パフォーマンス改善案

Vueのupdatedが発火しすぎてるのが一番影響大きそう
改善案
頻度が高いイベントはVueのstateを更新させずに直接viewboxを変更
debounce待ってからVueのstateを更新
これはSTUDIOでも使ってます!

そもそも無限平面である必要があったのか・・?
ブラウザネイティブのスクロールに任せるが正義かもしれない
ズームは?