素朴なスナップの実装
平凡なスナップの実装やってみたmiyamonz.icon https://gyazo.com/c7d7db7150ab8d20dbe2ff14cda33c42
@_baku89: #複雑GUI会 のお題でスナッピング/スマートガイド機能の一般化について頭の片隅で考えてたんだけど、この実装が凄まじすぎて超えられない https://www.youtube.com/watch?v=jIDDWJ1xptE
これを見て、ハンドルからの操作をやってみるかと思って書いたmiyamonz.icon
実装した
オブジェクト
rectとcircle
cmd c, cmd vでコピペ
追加ボタン？そんなものはないよ
cmd a で全選択
選択
cmd deleteで選択したものを削除
ドラッグで範囲選択
view
トラックパッドでパンとズーム
スナップ
中心でスナップ
スナップを掴んでくっついてるオブジェクトも移動
やりたかった
オブジェクトごとのsnap positionを複数にする
現状centerだけある。実装的には複数想定に書き換えてるところでタイムアップ
反省
最初に雑にオブジェクトのスナップ位置を考慮しない実装をすると、あとから直すのが面倒
あんまテスト考えられてない
snapさせるところの計算とかミスるとガタガタするので、単体テストかけたら嬉しいな
ハンドル部分の実装が変
あとから追加しようとしたらなんかキモい感じになっている
それ以外は結構気に入ってる
コード量
1500行くらい
code:log
───────────────────────────────────────────────────────────────────────────────
Language Files Lines Blanks Comments Code Complexity
───────────────────────────────────────────────────────────────────────────────
TypeScript 23 1515 127 57 1331 185
CSS 1 19 2 1 16 0
SVG 1 1 0 0 1 0
TypeScript Typings 1 1 0 1 0 0
───────────────────────────────────────────────────────────────────────────────
Total 26 1536 129 59 1348 185
その他の話題や実験
雑に作ってたらこういう挙動ができた
https://gyazo.com/fde782dd7cd14349fc206c3f3029fb3c
これはちょっと楽しい
けど実用性はないかも
複数選択してスナップ線に近づけたら、両方くっついてほしいと思うmiyamonz.icon
連続的なスナップ
https://gyazo.com/39009513c77b23c842ac02a92c0de742
スナップしたいけどオフセットは取りたいときは便利かもしれない
実装は
easingの仕方はいろいろあるだろうが
今回はスナップとの距離を閾値で1として正規化して、べき乗して縮める
つまりべき乗のeasing
@_baku89: @moyaminC この連続的なスナッピングの挙動について、最近こんな先行研究を見つけました… （出来ないでしょうが）PointerLock APIがカーソルの座標を書き換えできるようになれば、この挙動はジャンプするタイプのスナッピングより実用的...? と思ったりもします snap-and-go
https://gyazo.com/c3eb67544a514ad843e6e9844b8b9278
snap対象のライン上に見えない空間を圧縮している感じ。なるほどmiyamonz.icon
スナップハンドルで移動
https://gyazo.com/b347a23bcafe63ec267c784bbe0347e8
ハンドル選択時に、そのハンドルに乗ってる図形をfilterして一緒に移動するだけ。実装は難しくない
全体的な実装面
React, svg, jotai
これ今までやったことなかったが、良いと感じたmiyamonz.icon
stete -> action -> stateのようなreducerで書くより楽ちん
viewBoxを使ったタッチパッドズームとパン
素朴な複数選択
jotaiのatomでコマンドとクエリを分けた
これは前から思っていたがやっぱり良い