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
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
520
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
チームの境界をブチ抜いていけ
tokai235
0
150
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
260
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
490
CSC305 Lecture 04
javiergs
PRO
0
260
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
210
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
140
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
660
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Context Engineering - Making Every Token Count
addyosmani
5
220
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Building Adaptive Systems
keathley
43
2.8k
Bash Introduction
62gerente
615
210k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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