Drag & Drop Panel Package

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

パッケージ情報

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

機能

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

インストール

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

pnpm install

使用方法

基本的な使用例

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 を起動:

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

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

PanelConfig

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

ビルド

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