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
Six and a half ridiculous things to do with Quarkus
hollycummins
0
200
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
Webサーバーサイド言語としてのRustについて
kouyuume
0
2.7k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
220
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Devoxx BE - Local Development in the AI Era
kdubois
0
130
iOSでSVG画像を扱う
kishikawakatsumi
0
140
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
15
6.4k
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
350
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
YesSQL, Process and Tooling at Scale
rocio
173
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
A designer walks into a library…
pauljervisheath
209
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
For a Future-Friendly Web
brad_frost
180
10k
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