# Block Drag Select

WordPressのGutenbergエディタで、マウスドラッグによる複数ブロックの直感的な選択を可能にするプラグインです。

## 概要

WindowsエクスプローラーやMacのFinderのように、マウスでドラッグして選択矩形を表示し、範囲内の複数ブロックを一度に選択できます。

## 特徴

- **直感的な操作**: 空白領域をドラッグするだけで複数ブロックを選択
- **自動スクロール**: マウスが画面端に近づくと自動的にスクロールして画面外のブロックも選択可能
- **競合回避**: ブロックの並び替えや編集機能と干渉しない設計
- **高パフォーマンス**: 大量のブロックでもスムーズに動作
- **ネストされたブロックに対応**: グループブロック内のブロックも選択可能
- **視覚的フィードバック**: 選択範囲とハイライトをリアルタイム表示

## インストール方法

### 方法1: 手動インストール

1. このフォルダ全体（`block-drag-select`）をWordPressの `wp-content/plugins/` ディレクトリにコピー
2. WordPressの管理画面で「プラグイン」メニューを開く
3. 「Block Drag Select」を見つけて「有効化」をクリック

### 方法2: ZIPファイルからアップロード

1. このフォルダをZIPファイルに圧縮
2. WordPressの管理画面で「プラグイン」→「新規追加」→「プラグインのアップロード」
3. ZIPファイルを選択してアップロード
4. 「今すぐインストール」→「有効化」

## 使い方

### 基本的な使い方

1. 投稿または固定ページの編集画面を開く
2. **空白領域**（ブロックとブロックの間など）でマウスボタンを押す
3. そのままドラッグして選択矩形を表示
4. 選択したいブロックを範囲に含める
5. マウスボタンを離すと、範囲内のブロックが選択される

### 自動スクロール機能

- ドラッグ中にマウスを**画面の上下左右の端**（80px以内）に近づけると、自動的にスクロールが開始されます
- 端に近づくほどスクロール速度が速くなります
- 画面外のブロックも選択範囲に含めることができます
- マウスを端から離すと、自動スクロールが停止します

### 使用上の注意

- **空白領域から開始**: ブロック上でドラッグを開始すると、既存の機能（ブロック移動など）が優先されます
- **複数選択後**: 選択されたブロックは、通常の複数選択と同様に、削除、移動、コピーなどが可能です

## 技術仕様

### 主な機能

1. **空白領域検出**
   - ブロック要素を避けて、エディタの空白領域のみでドラッグを開始
   - `isEmptySpace()` メソッドでブロック要素を判定

2. **選択矩形の表示**
   - リアルタイムでドラッグ範囲を視覚的に表示
   - CSS の `fixed` ポジショニングで全画面対応

3. **交差判定**
   - `getBoundingClientRect()` を使用した高精度な位置計算
   - 選択矩形とブロックの交差を効率的に判定

4. **自動スクロール（オートスクロール）**
   - 画面端80px以内でマウス位置を検出
   - 端からの距離に応じた段階的なスクロール速度（5-25px/frame）
   - iframeエディタと通常エディタの両方に対応
   - `requestAnimationFrame` による滑らかなスクロール
   - スクロール中も選択範囲をリアルタイム更新

5. **パフォーマンス最適化**
   - マウス移動イベントのスロットリング（~60fps）
   - ブロック要素のキャッシング
   - スクロール中のブロック位置の再キャッシング（100msデバウンス）
   - 必要最小限のDOM操作

6. **WordPress統合**
   - `@wordpress/data` API を使用したブロック選択
   - `dispatch('core/block-editor').multiSelect()` による複数選択

### 対応環境

- WordPress 6.0以上
- PHP 7.4以上
- モダンブラウザ（Chrome, Firefox, Safari, Edge）

### エディタ対応

- クラシックGutenbergエディタ
- iframeベースのエディタ（WordPress 6.3以降）
- フルサイト編集（FSE）

## カスタマイズ

プラグインファイルの `wp_localize_script` セクションで設定を変更できます：

```php
wp_localize_script(
    'block-drag-select-js',
    'blockDragSelectConfig',
    array(
        'selectionColor' => '#0073aa',      // 選択矩形の色
        'selectionOpacity' => '0.2',        // 選択矩形の透明度
        'minDragDistance' => 5,             // 選択開始までの最小ドラッグ距離（px）
        'autoScrollEdgeSize' => 80,         // 自動スクロールを開始する画面端からの距離（px）
        'autoScrollMinSpeed' => 5,          // 最小スクロール速度（px/frame）
        'autoScrollMaxSpeed' => 25,         // 最大スクロール速度（px/frame）
    )
);
```

### オートスクロールの調整

- **autoScrollEdgeSize**: 値を大きくすると、画面端から遠くても自動スクロールが開始されます
- **autoScrollMinSpeed**: 最小速度を上げると、ゆっくりスクロールしにくくなります
- **autoScrollMaxSpeed**: 最大速度を下げると、高速スクロールを抑制できます

## トラブルシューティング

### 選択が動作しない

- ブロック上ではなく、**空白領域**からドラッグを開始しているか確認
- ブラウザのコンソールでエラーが出ていないか確認
- プラグインが正しく有効化されているか確認

### 既存の機能と競合する

- このプラグインは空白領域でのみ動作するため、ブロック上での既存機能には影響しません
- 他のカスタマイズプラグインとの競合がある場合は、一時的に無効化して確認

### パフォーマンスが遅い

- 非常に大量のブロック（1000個以上）がある場合、わずかな遅延が発生する可能性があります
- `mouseMoveThrottle` の値を増やすことで改善できます（drag-select.js内）

## 開発者向け情報

### ファイル構成

```
block-drag-select/
├── block-drag-select.php          # メインプラグインファイル
├── assets/
│   ├── js/
│   │   └── drag-select.js         # ドラッグ選択のメインロジック
│   └── css/
│       └── drag-select.css        # スタイル定義
└── README.md                       # このファイル
```

### 主要クラスとメソッド

- `BlockDragSelect`: メインクラス
  - `isEmptySpace(element)`: 空白領域判定
  - `startSelection()`: 選択開始
  - `updateSelection()`: 選択矩形の更新
  - `updateSelectedBlocks()`: 選択されたブロックの更新
  - `selectBlocksInEditor()`: WordPressエディタでブロックを選択
  - `getScrollContainer()`: スクロール対象の取得（iframe/通常エディタ対応）
  - `checkAutoScroll()`: エッジ検出とスクロール速度計算
  - `performAutoScroll()`: 自動スクロールの実行
  - `stopAutoScroll()`: 自動スクロールの停止

### フック

現在、カスタムフックは提供していませんが、必要に応じて追加できます。

## ライセンス

GPL v2 or later

## サポート

問題が発生した場合や機能リクエストがある場合は、GitHubのIssuesでお知らせください。

## 更新履歴

### 1.1.0
- **新機能**: 自動スクロール（オートスクロール）機能を追加
  - マウスが画面端に近づくと自動的にスクロール
  - 端からの距離に応じた段階的な速度調整
  - iframeエディタと通常エディタの両方に対応
- スクロール中のブロック位置の動的な再キャッシング
- スクロールオフセットを考慮した選択矩形の座標計算
- パフォーマンスの改善

### 1.0.0
- 初回リリース
- 基本的なドラッグ選択機能
- 空白領域検出
- パフォーマンス最適化
- ネストされたブロックのサポート
