TreeViewとContextMenuを追加 - VRエンジン作成日記

vue.jsでTreeViewとContextMenuを追加した。Unityのヒエラルキービューっぽく表示しようと思ったら、ul、liタグを組み合わせてCSSで行選択するのが意外に難しかった。liでインデントしてしまうと行選択時に背景の色が端まで塗られず、liのインデントを使わないと段数ごとに違うpadding-leftを指定しないといけないという状況に陥ってしまった。インデントの段数をvue.jsで変数に格納するようにして、タグごとにstyleを付けることで結構強引な感じで解決した。

ContextMenuは右クリック時に表示する。Electron上で動かすのであればネイティブのコンテキストメニューを表示できそうだけど、vue.jsの使い方を覚えるために自力で作ってみた。UI関連のクラスだけ別のプロジェクトに切り分けた方が良いのかもしれない。