読者です 読者をやめる 読者になる 読者になる

ネタ出し: Atomでグリッドレスなエディタ配置を作れないか

LL diverのエディタ対決のディスカッション中に思い出したのだけど、昔こういうネタがあった。

Coding Bubblesの生みの親、 Andrew Bragdon氏とのインタビュー

http://www.infoq.com/resource/news/2010/03/coding-bubbles/en/resources/bubbles.png

これを今の時代にAtomで実装できないか。エディタをグリッドレスに表示して、かつそれぞれの関係をグラフィカルに表示する、みたいなことやりたい。具体的に言うとrequire先をダブルクリックでポップアップしたり、ちょっと飛躍するけどファイル単位無視してクラス単位で編集したりできないだろうか。

ハックしてみる

ちょっと調べたところ、Atom複数のタブを束ねてpaneというクラス単位で管理している。CSSセレクタも.paneだ。じゃあpaneをposition: absolute; にすればグリッドレスな配置できるのは?と思ってワンライナーで書いた非常に雑なコードをatomのシェルの中で実行した。

require('underscore-plus').map(document.querySelectorAll('.pane'),function(pane, i){
pane.style.left = (i*300)+'px';
pane.style.top = (i*300) + 'px';
pane.style.height = 300 + 'px';
pane.style.width = 300 + 'px';
pane.style.position = 'absolute'}) ;

うん、まあアイデア上は動くことは確認した。しかし本気でいじろうとすると本体に手をいれないといけない気はするが… 適当ハックでもリサイズ、ドラッグできる程度の拡張として実装することはできそうだ。