imagemarkpengent/docs/pg_task.md

ImageMarkPengent 実装タスク

0. チュートリアル：現状の拡張機能をビルド・実行する

1. 依存パッケージのインストール（初回のみ）

   yarn install
   

2. ビルド

   yarn compile
   

3. VSCodeでこのプロジェクト（imagemarkpengent）を開く
4. F5キー（または「実行とデバッグ」→「拡張機能のデバッグ」）で新しいVSCodeウィンドウが起動し、拡張機能が有効化される
5. コマンドパレット（Ctrl+Shift+P）で Hello World コマンドを実行できる

---

概要

VSCode拡張機能「ImageMarkPengent」の実装タスク一覧です。

---

実装ステップ

1. コマンド登録と右クリックメニュー対応

• package.json にコマンドを登録する
• explorer/context メニューに「Open in ImageMarkPengent」を追加
• 対象拡張子を .png / .jpg / .jpeg に限定

2. WebViewで画像表示

• コマンド実行時にWebViewパネルを開く
• 画像ファイルを <img> または <canvas> で表示
• 画像の上に描き込み可能な canvas を重ねる

3. 赤丸マーク描画機能

• WebView内でJavaScriptにより <canvas> へ赤丸を描画
• クリック座標を取得し、赤丸を描画・保持
• 複数マークの描画・再描画に対応

4. 加工画像の保存機能

• WebViewに「保存」ボタンを設置
• canvas.toDataURL() で画像データを取得
• vscode.postMessage() で拡張機能側に送信
• 拡張機能側でファイル保存（別名保存も対応）