# ImageMarkPengent

VSCodeで画像に赤丸マークや注釈を直感的に描き込める拡張機能です。

![logo](readme/images/logo.png)

---

## 主な特徴

- PNG/JPG画像をVSCode上で直接開いて赤丸マークを描画
- マークの色・太さ変更、移動、拡大縮小、削除、Undo/Redo
- 画像として保存（元画像サイズで赤マーク合成）
- 直感的なUI・ショートカット

---

## スクリーンショット

![トップ画面](readme/images/top.png)

---

## 使い方

### 1. 画像を開く
- エクスプローラーでPNG/JPG画像を右クリック → `Open in ImageMarkPengent`
- またはコマンドパレットで `ImageMarkPengent: Open in ImageMarkPengent` を実行

### 2. マークを描く
- 「マーク追加」ボタンを押す（またはCtrlを押しながらドラッグ）
- 画像上でドラッグして赤丸を描画

### 3. マークの編集
- 「選択モード」ボタンでマークを選択
- 選択したマークは：
    - ドラッグで移動
    - 四隅のハンドルをドラッグで拡大縮小
    - 色・太さをツールバーで変更
    - Deleteキーで削除
- Undo（Ctrl+Z）、Redo（Ctrl+Y）も可能

### 4. 画像の保存
- 「保存」ボタンを押す
- ファイル名・保存先を選択し、元画像サイズで赤マーク付き画像をPNGで保存

---

## ツールバーの説明

- **移動モード**：画像のスクロールやズーム
- **選択モード**：マークの選択・編集
- **マーク追加**：赤丸マークを新規追加
- **太さ・色**：マークの線の太さ・色を変更
- **保存**：加工画像を保存

---

## ショートカット

- Ctrl+ドラッグ：一時的にマーク追加
- Delete/Backspace：選択中マーク削除
- Ctrl+Z：Undo（元に戻す）
- Ctrl+Y：Redo（やり直し）
- Esc：移動モードに戻る

---

## よくある質問

- **Q. 元画像は上書きされますか？**
  - A. 保存時は新しいファイル名を指定できます。元画像は変更されません。
- **Q. 複数のマークを同時に編集できますか？**
  - A. 複数選択には未対応ですが、今後拡張予定です。

---

## サンプル画像

![サンプル画像](examples/sample_640x480.png)

---

## インストール・ビルド

1. 依存パッケージインストール
   ```sh
   yarn install
   ```
2. ビルド
   ```sh
   yarn compile
   ```
3. F5キーでデバッグ実行

---

## ライセンス
MIT License