Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VS Code extension: ドラッグ&ドロップでファイルを並び替える
Search
Taiyo Fujii
September 30, 2024
Programming
0
350
VS Code extension: ドラッグ&ドロップでファイルを並び替える
VS Code機能拡張で拡張したサイドバーに、ドラッグ&ドロップでファイルの順番を並び替えるツリービューを実装し、VS Code meetupで発表しました。
Taiyo Fujii
September 30, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
640
オープンソースソフトウェアへの解像度🔬
utam0k
12
2.5k
CSC305 Lecture 06
javiergs
PRO
0
210
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
Devvox Belgium - Agentic AI Patterns
kdubois
1
110
All About Angular's New Signal Forms
manfredsteyer
PRO
0
110
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
280
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.8k
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.6k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Code Reviewing Like a Champion
maltzj
525
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Context Engineering - Making Every Token Count
addyosmani
5
220
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
BBQ
matthewcrist
89
9.8k
The Language of Interfaces
destraynor
162
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Faster Mobile Websites
deanohume
310
31k
Transcript
speaker: Taiyo Fujii Drag and Drop for Tree View Drag
and Drop for Tree View
小説執筆 長いファイルを分割して書きたい 長編小説は 100メートル そもそも何で? そもそも何で?
機能拡張を作りました 機能拡張を作りました
テキスト結合 青空文庫注記 原稿用紙プレビュー 品詞ハイライティング 文字数カウント etc...
原稿ファイルだけを表示 フォルダごとの字数集計 連番も拡張子も非表示 原稿ツリー 原稿ツリー
ドラッグ &ドロップで変えたい! 順番を変えたい 順番を変えたい
大変なのはわかっている 大変なのはわかっている
VS Code Treeview Provider TreeDragAndDropController
自由度が低かった …… 自由度が低かった ……
Dropノードは決められるが、挿入する場所が決められない!
GPTに聞けばなんとかなるじゃろ …… WebViewだ、 Reactだ! WebViewだ、 Reactだ!
なんとかなるか? return ( <div ref={(node: HTMLDivElement) => dragRef(dropRef(node))} className={`tree-node ${expanded
? "expanded" : ""} ${ highlightedNode === node.dir ? "highlighted" : "" }`} onClick={handleNodeClick} > <div className={`tree-label ${!node.children ? "text" : ""}`}> <span className="triangle" onClick={toggleExpand}> > </span> <span className="item-name"> {node.name.replace(/^(?:\d+[-_\s]*)*(.+?)(?:\.(txt|md))?$/, "$1")} </span> <span className="chars">{node.length.toLocaleString()}文字</span> </div> {node.children && ( <div className="tree-node-children"> {node.children.map((child) => ( <TreeView ... /> ))} </div> )} </div> );
しかし イベント駆動で挿入エレメントを挿入 キーイベントでリネーム用の inputを増やす ドラッグのイベントパブリングを絶妙に制御 ドラッグ中は hoverしたときは キーイベントがあった時は ... やばい、状態が多すぎる、ついていけない
設計は自分でやろう 設計は自分でやろう
Demo Demo
Windows対応は、 vscode.workspace.fsPathと pathに注意! VS Code API VS Code API
vscode.workspace.fs.rename("2-はじまり.txt", "1-はじまり.txt", { overwrite: true }) まずい、まずいぞ …… まずい、まずいぞ ……
Demo Demo
novel-writer 3.0.0 novel-writer 3.0.0
None