# Drag & Drop Panel Package

再利用可能な Drag & Drop パネルレイアウトコンポーネントパッケージです。

## パッケージ情報

- **名前**: `@aiquants/drag-drop-panels`
- **バージョン**: 0.1.0
- **場所**: `/workspace/packages/drag-drop-panels`

## 機能

- 複数カラムのドラッグ&ドロップレイアウト
- パネルの並び替え
- カラム間でのパネル移動
- カラム幅のリサイズ
- パネルの表示/非表示切り替え
- カスタムドラッグハンドラーのサポート
- FLIP アニメーション
- エッジスクロール機能
- デバッグオーバーレイ

## インストール

```json
{
  "dependencies": {
  "@aiquants/drag-drop-panels": "workspace:*"
  }
}
```

```bash
pnpm install
```

## 使用方法

### 基本的な使用例

```tsx
import { DragDropLayout } from "@aiquants/drag-drop-panels"
import type { ColumnConfig, DragOverPosition } from "@aiquants/drag-drop-panels"
import "@aiquants/drag-drop-panels/dist/drag-drop-panels.css"

function MyApp() {
  // カラム設定
  const columns: ColumnConfig[] = [
    {
      id: "column-1",
      key: "column1",
      initialWidth: 400,
      minWidth: 300,
      maxWidth: 600,
      resizable: true,
    },
  ]

  // カラムごとのパネルID配置
  const [columnPanels, setColumnPanels] = useState({
    column1: ["panel1", "panel2"],
  })

  // パネルの可視性
  const [panelVisibility, setPanelVisibility] = useState({
    panel1: true,
    panel2: true,
  })

  // パネルコンポーネントのマッピング
  const panelComponentMap = {
    panel1: { component: MyPanel1, title: "Panel 1" },
    panel2: { component: MyPanel2, title: "Panel 2" },
  }

  return (
    <DragDropLayout
      columns={columns}
      columnPanels={columnPanels}
      onColumnPanelsChange={setColumnPanels}
      panelVisibility={panelVisibility}
      onPanelVisibilityChange={setPanelVisibility}
      panelComponentMap={panelComponentMap}
      enableResize={true}
    />
  )
}
```

## デモページ

`quants-react-router` アプリケーションでデモページを確認できます。

### デモページへのアクセス

1. `quants-react-router` を起動:

```bash
cd /workspace/apps/quants-react-router
pnpm dev
```

2. ブラウザで以下の URL にアクセス:

```
http://localhost:5173/drag-drop-demo
```

### デモページの機能

- 3 カラムのレイアウト
- 4 つのサンプルパネル
- ドラッグ&ドロップによるパネル移動
- カラム幅のリサイズ
- パネルの表示/非表示切り替え

## API リファレンス

### DragDropLayout Props

| プロパティ | 型 | 必須 | 説明 |
|-----------|-----|------|------|
| `columns` | `ColumnConfig[]` | ✓ | カラムの設定配列 |
| `columnPanels` | `Record<string, string[]>` | ✓ | カラムごとのパネル ID 配列 |
| `onColumnPanelsChange` | `(panels: Record<string, string[]>) => void` | ✓ | パネル配置変更時のコールバック |
| `panelVisibility` | `Record<string, boolean>` | ✓ | パネルの可視性 |
| `onPanelVisibilityChange` | `(visibility: Record<string, boolean>) => void` | ✓ | 可視性変更時のコールバック |
| `panelComponentMap` | `Record<string, PanelConfig>` | ✓ | パネルコンポーネントのマッピング |
| `columnWidths` | `Record<string, number>` | - | カラム幅 |
| `onColumnWidthsChange` | `(widths: Record<string, number>) => void` | - | カラム幅変更時のコールバック |
| `enableResize` | `boolean` | - | リサイズ機能の有効化 (デフォルト: false) |
| `debugConfig` | `DebugConfig` | - | デバッグ設定 |

### ColumnConfig

```typescript
interface ColumnConfig {
  id: string              // カラムの一意な ID
  key: string             // カラムのキー (columnPanels で使用)
  initialWidth?: number   // 初期幅 (px)
  minWidth?: number       // 最小幅 (px)
  maxWidth?: number       // 最大幅 (px)
  resizable?: boolean     // リサイズ可能かどうか
  className?: string      // カスタム CSS クラス
}
```

### PanelConfig

```typescript
interface PanelConfig {
  component: ComponentType  // パネルのコンポーネント
  title: string            // パネルのタイトル
  props?: Record<string, unknown>  // コンポーネントに渡す props
}
```

## ビルド

```bash
cd /workspace/packages/drag-drop-panels
pnpm build
```

ビルド出力:

- `dist/index.es.js` - ES モジュール
- `dist/index.umd.js` - UMD モジュール
- `dist/index.d.ts` - TypeScript 型定義
- `dist/drag-drop-panels.css` - スタイルシート

## 開発

### パッケージの修正

1. `/workspace/packages/drag-drop-panels/src` でソースを編集
2. ビルド: `pnpm build`
3. `quants-react-router` でテスト

### 既知の問題

現時点では特にありません。

## ライセンス

MIT