線を引くUI
二つの要素の間に線を引き、要素が移動されてもつながり続けて欲しい、というユースケースをどうやって実現するか
Kozanebaの線を引くUIを改善しようと考えているnishio.icon
一旦内部の設計の都合は置いといて「線を引くUI」にはどのようなものがあるか考える
実装方法1:
線を引くモードを導入する
要素Aと要素Bをクリックすると線が引かれる
実装方法2:
線を引くモードを導入する
要素Aでポインターダウン、要素Bでポインターアップすると線が引かれる
実装方法3:
複数の要素を選択する
コンテキストメニューが現れる
メニューから「線を引く」を選ぶ
実装方法4:
グローバルのメニューで「線を追加」
両端がnullの線ができる
それを要素A、要素Bにドラッグドロップすると接続される
実装方法5:
要素Aのクリックでハンドルが現れる
ハンドルを要素Bにドラッグドロップすると線が引かれる
考察
線を引くモードについて
まとめて線を引くならモードに入るのが楽
線を引いて要素を動かして、が頻繁に切り替わるならその度にモード切り替えが必要になって手間
「いま自分がどのモードか」を把握する必要がある
要素を動かそうとして線を引いてしまう人が出る
Google Slideは実装方法2
ドラッグドロップの対象は要素自身ではなくハンドル
実装方法3
現状のKozanebaの実装
二要素間の関係に限らず表現できることがメリット
近いものに線を引くなら許容できる
遠くのものに線を引こうとした時や入り組んだ配置の時に「範囲選択」で他のものを巻き込んでしまう
運用による回避手段
対象要素を近くに移動する
線を引く
元の場所に戻す
これは面倒！
線の機能を作って使ってみているうちに、思っていた以上にこういう状況が多発して面倒だと気づいた
多項関係を掛けるメリットを上回るデメリットだと思うようになった
実装方法4
Keynoteは線のボタンを押した時点で線が追加される
要素に接続はしない？
Google Slideも「線を引くモード」でクリックをするとこれになる
一時的に「どこにもつながっていない線」ができるので「線とは要素を繋ぐものである」と定義していると問題が起きる
実装方法5
Miroの実装
現状のKozanebaも要素をクリックするとコンテキストメニューが出るので「一時的なモードに入っている」という点では同じ
ハンドルを出すことはできる
ハンドルでポインターダウンした時点で「一時的なメニューを出すモード」が「一時的な線を引くモード」に切り替わる必要がある