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
330
VS Code extension: ドラッグ&ドロップでファイルを並び替える
VS Code機能拡張で拡張したサイドバーに、ドラッグ&ドロップでファイルの順番を並び替えるツリービューを実装し、VS Code meetupで発表しました。
Taiyo Fujii
September 30, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
print("Hello, World")
eddie
2
530
Swift Updates - Learn Languages 2025
koher
2
470
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
RDoc meets YARD
okuramasafumi
4
170
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
260
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.4k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
510
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
220
旅行プランAIエージェント開発の裏側
ippo012
2
900
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
GitHub's CSS Performance
jonrohan
1032
460k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Embracing the Ebb and Flow
colly
87
4.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
RailsConf 2023
tenderlove
30
1.2k
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