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
260
VS Code extension: ドラッグ&ドロップでファイルを並び替える
VS Code機能拡張で拡張したサイドバーに、ドラッグ&ドロップでファイルの順番を並び替えるツリービューを実装し、VS Code meetupで発表しました。
Taiyo Fujii
September 30, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
WebDriver BiDiとは何なのか
yotahada3
1
140
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
チームリードになって変わったこと
isaka1022
0
190
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Thoughts on Productivity
jonyablonski
69
4.5k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Visualization
eitanlees
146
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
GraphQLとの向き合い方2022年版
quramy
44
13k
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