@aiquants/drag-drop-panels 0.7.2 → 0.8.0

package/src/drag-drop/hooks/dragGhostScale.spec.tsx

@@ -0,0 +1,153 @@
+import { act, renderHook } from "@testing-library/react"
+import type { DragEvent } from "react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import { DEFAULT_DEBUG_CONFIG } from "../types"
+import { useNormalDragHandlers } from "./useNormalDragHandlers"
+import { usePanelManagement } from "./usePanelManagement"
+
+/**
+ * 縮小表示 (scale < 1) 時にドラッグゴーストが同倍率で縮小されることの回帰テスト。
+ *
+ * 過去バグ: scale をコールバックのクロージャで参照し useCallback 依存にも ref にも入れていなかったため、
+ * 初回 render の値 (=1) で凍結し `if (scale < 1)` ブロックが恒久 dead code 化していた。
+ * → 本テストは「mount 時 scale=1 → rerender で 0.5」に変え、かつ scale 以外の props 参照を固定して
+ *   ハンドラが再生成されない状況を作る。旧実装ではゴーストが生成されず fail する。
+ */
+
+const NATURAL_W = 360
+const NATURAL_H = 200
+
+const mockRect = (left: number, top: number, w: number, h: number): DOMRect => ({ left, top, width: w, height: h, right: left + w, bottom: top + h, x: left, y: top, toJSON: () => ({}) }) as DOMRect
+
+const makePanel = (id: string, rect: DOMRect): HTMLElement => {
+    const el = document.createElement("div")
+    el.setAttribute("data-panel-id", id)
+    Object.defineProperty(el, "offsetWidth", { value: NATURAL_W, configurable: true })
+    Object.defineProperty(el, "offsetHeight", { value: NATURAL_H, configurable: true })
+    el.getBoundingClientRect = () => rect
+    document.body.appendChild(el)
+    return el
+}
+
+beforeEach(() => {
+    document.body.innerHTML = ""
+})
+
+describe("useNormalDragHandlers — native drag ghost scaling", () => {
+    // scale 以外は参照を固定する (これらが変わるとハンドラが再生成され、旧バグでも scale を拾えてしまい回帰検出にならない)
+    const stable = {
+        debugConfig: DEFAULT_DEBUG_CONFIG,
+        dragState: { isDragging: false, draggedPanel: null, dragOverColumn: null },
+        customDrag: { isActive: false, panelId: "", startX: 0, startY: 0 },
+        dragModes: {} as Record<string, "normal" | "custom">,
+        columnPanels: { col1: ["p1"] },
+        dragOverPosition: null,
+        originalPanelPosition: null,
+        setDragState: vi.fn(),
+        setDragOverPosition: vi.fn(),
+        setOriginalPanelPosition: vi.fn(),
+        performPanelMove: vi.fn(),
+        showMousePosition: vi.fn(),
+        updateMousePosition: vi.fn(),
+        resetDragState: vi.fn(),
+        handlePlaceholderDragEnter: vi.fn(),
+        handlePlaceholderDragLeave: vi.fn(),
+    }
+    // biome-ignore lint/suspicious/noExplicitAny: テスト用の緩い props 型
+    const props = (scale: number): any => ({ ...stable, scale })
+
+    const fireDragStart = (handleDragStart: (e: DragEvent, id: string) => void, panel: HTMLElement) => {
+        const captured: { img?: HTMLElement; x?: number; y?: number } = {}
+        const event = {
+            currentTarget: panel,
+            clientX: 90,
+            clientY: 15,
+            preventDefault: vi.fn(),
+            dataTransfer: {
+                setData: vi.fn(),
+                effectAllowed: "",
+                setDragImage: vi.fn((img: HTMLElement, x: number, y: number) => {
+                    captured.img = img
+                    captured.x = x
+                    captured.y = y
+                }),
+            },
+        }
+        handleDragStart(event as unknown as DragEvent, "p1")
+        return captured
+    }
+
+    it("does NOT build a custom ghost at scale = 1 (browser default is used)", () => {
+        const panel = makePanel("p1", mockRect(0, 0, NATURAL_W, NATURAL_H))
+        const { result } = renderHook((p) => useNormalDragHandlers(p), { initialProps: props(1) })
+        const captured = fireDragStart(result.current.handleDragStart, panel)
+        expect(captured.img).toBeUndefined()
+    })
+
+    it("REGRESSION: builds a ghost sized to natural × scale after scale updates post-mount (no stale closure)", () => {
+        // 画面上 (縮小後) の rect は 180×100、レイアウト原寸は 360×200
+        const panel = makePanel("p1", mockRect(0, 0, NATURAL_W * 0.5, NATURAL_H * 0.5))
+        const { result, rerender } = renderHook((p) => useNormalDragHandlers(p), { initialProps: props(1) })
+        const handlerBefore = result.current.handleDragStart
+        rerender(props(0.5)) // scale だけ変更 (他 props は参照固定)
+
+        // ハンドラは再生成されない = scale を ref 経由で読んでいる証拠。
+        // scale を useCallback 依存に入れると再生成され、この安定性が壊れる (= 本テストの回帰検出条件を固定する)
+        expect(result.current.handleDragStart).toBe(handlerBefore)
+
+        const captured = fireDragStart(result.current.handleDragStart, panel)
+
+        // 外枠 = 縮小後サイズ (raster キャンバスを縮小後に一致させる)
+        expect(captured.img).toBeDefined()
+        expect(captured.img?.style.width).toBe(`${NATURAL_W * 0.5}px`) // 180px
+        expect(captured.img?.style.height).toBe(`${NATURAL_H * 0.5}px`) // 100px
+
+        // 内側クローン = 原寸 + transform:scale(0.5) / origin top-left
+        const inner = captured.img?.firstElementChild as HTMLElement
+        expect(inner.style.width).toBe(`${NATURAL_W}px`)
+        expect(inner.style.transform).toBe("scale(0.5)")
+        expect(inner.style.transformOrigin).toBe("top left")
+        // 同一性属性は除去 (画面外クローンが [data-panel-id] を重複させない)
+        expect(inner.getAttribute("data-panel-id")).toBeNull()
+
+        // ホットスポット = 画面上 (縮小後) 要素内のカーソル位置
+        expect(captured.x).toBe(90)
+        expect(captured.y).toBe(15)
+    })
+})
+
+describe("usePanelManagement — custom drag ghost scaling", () => {
+    it("REGRESSION: custom ghost uses offsetWidth (no scale²) and reads live scale after update", () => {
+        const panel = makePanel("p1", mockRect(50, 60, NATURAL_W * 0.5, NATURAL_H * 0.5))
+        // createDragImage/updateDragImagePosition は元々安定参照。rerender で scale だけ 1 → 0.5 に更新する
+        const { result, rerender } = renderHook((scale: number) => usePanelManagement({}, scale), { initialProps: 1 })
+        const createBefore = result.current.createDragImage
+        const updateBefore = result.current.updateDragImagePosition
+        rerender(0.5)
+
+        // 両ハンドラは安定参照のまま (scale は ref 経由)。依存に scale を入れると再生成され壊れる
+        expect(result.current.createDragImage).toBe(createBefore)
+        expect(result.current.updateDragImagePosition).toBe(updateBefore)
+
+        act(() => {
+            result.current.createDragImage("p1", 10, 10)
+        })
+
+        const clone = document.getElementById("drag-image-p1")
+        expect(clone).not.toBeNull()
+        // 幅は offsetWidth(360) を使う。rect.width(180) を使うと transform:scale(0.5) で二重縮小 (scale²) になる
+        expect(clone?.style.width).toBe(`${NATURAL_W}px`)
+        expect(clone?.style.transformOrigin).toBe("top left")
+        expect(clone?.style.transform).toContain("scale(0.5)")
+        // data-panel-id は除去済 (getPanelElement の querySelector がクローンを誤検出しない)
+        expect(clone?.getAttribute("data-panel-id")).toBeNull()
+        // 元パネルは残っている (クローンに奪われていない)
+        expect(document.querySelector('[data-panel-id="p1"]')).toBe(panel)
+
+        act(() => {
+            result.current.updateDragImagePosition(100, 100)
+        })
+        // 移動中は掴んだ倍率 × 1.05。旧実装 (stale/固定 1) なら scale(1.05) になり fail する
+        expect(clone?.style.transform).toContain(`scale(${0.5 * 1.05})`)
+    })
+})

package/src/drag-drop/hooks/useColumnLayout.ts

@@ -0,0 +1,457 @@
+/**
+ * @fileoverview This file defines the `useColumnLayout` custom hook, which is the core logic for managing
+ * the state and interactions of a dynamic, multi-column, drag-and-drop layout system.
+ * It handles column and panel management, resizing, and responsive adjustments.
+ *
+ * このファイルは `useColumnLayout` カスタムフックを定義します。これは、動的な複数カラムの
+ * ドラッグ＆ドロップレイアウトシステムの、状態とインタラクションを管理するためのコアロジックです。
+ * カラムとパネルの管理、リサイズ、レスポンシブ調整などを扱います。
+ */
+import { useCallback, useEffect, useRef, useState } from "react"
+import { debugLog } from "../DebugComponents"
+import type { DebugConfig } from "../types"
+import { DEFAULT_COLUMN_ID_CONFIG, generateColumnIds, normalizeColumnPanels } from "../utils/columnIdUtils"
+
+export interface ColumnConfig {
+    id: string
+    title: string
+    minWidth?: number
+    maxWidth?: number
+    initialWidth?: number
+    resizable?: boolean
+    collapsible?: boolean
+}
+
+export interface ColumnLayoutState {
+    columns: ColumnConfig[]
+    columnWidths: Record<string, number>
+    isResizing: boolean
+    resizingColumn: string | null
+    columnPanels: Record<string, string[]>
+    showInsertPlaceholders: boolean
+}
+
+export interface UseColumnLayoutProps {
+    initialColumns: ColumnConfig[]
+    initialPanels: Record<string, string[]>
+    debug?: DebugConfig
+    onLayoutChange?: (layout: ColumnLayoutState) => void
+}
+
+export interface UseColumnLayoutReturn {
+    layoutState: ColumnLayoutState
+    addColumn: (config: ColumnConfig, position?: number) => void
+    removeColumn: (columnId: string) => void
+    moveColumn: (fromIndex: number, toIndex: number) => void
+    startResize: (columnId: string, startX: number) => void
+    handleResize: (currentX: number) => void
+    endResize: () => void
+    setColumnWidth: (columnId: string, width: number) => void
+    resetColumnWidths: () => void
+    movePanel: (panelId: string, fromColumn: string, toColumn: string, insertIndex: number) => void
+    addPanel: (panelId: string, columnId: string, insertIndex?: number) => void
+    removePanel: (panelId: string) => void
+    updateColumnCount: (count: number) => void
+    autoBalanceColumns: () => void
+    getColumnById: (columnId: string) => ColumnConfig | undefined
+    getTotalWidth: () => number
+    getColumnElement: (columnId: string) => HTMLElement | null
+    setShowInsertPlaceholders: (show: boolean) => void
+}
+
+export const useColumnLayout = ({ initialColumns, initialPanels, debug = {}, onLayoutChange }: UseColumnLayoutProps): UseColumnLayoutReturn => {
+    const [layoutState, setLayoutState] = useState<ColumnLayoutState>(() => {
+        const initialWidths: Record<string, number> = {}
+        for (const col of initialColumns) {
+            initialWidths[col.id] = col.initialWidth || 400
+        }
+
+        return {
+            columns: initialColumns,
+            columnWidths: initialWidths,
+            isResizing: false,
+            resizingColumn: null,
+            columnPanels: initialPanels,
+            showInsertPlaceholders: false,
+        }
+    })
+
+    const resizeStartX = useRef<number>(0)
+    const initialColumnWidth = useRef<number>(0)
+
+    useEffect(() => {
+        onLayoutChange?.(layoutState)
+    }, [layoutState, onLayoutChange])
+
+    const addColumn = useCallback(
+        (config: ColumnConfig, position?: number) => {
+            debugLog(debug, 1, "カラム追加:", config.id, "at position:", position)
+
+            setLayoutState((prev) => {
+                const newColumns = [...prev.columns]
+                const insertPos = position ?? newColumns.length
+                newColumns.splice(insertPos, 0, config)
+
+                const newColumnWidths = {
+                    ...prev.columnWidths,
+                    [config.id]: config.initialWidth || 400,
+                }
+
+                const newColumnPanels = {
+                    ...prev.columnPanels,
+                    [config.id]: [],
+                }
+
+                return {
+                    ...prev,
+                    columns: newColumns,
+                    columnWidths: newColumnWidths,
+                    columnPanels: newColumnPanels,
+                }
+            })
+        },
+        [debug],
+    )
+
+    const removeColumn = useCallback(
+        (columnId: string) => {
+            debugLog(debug, 1, "カラム削除:", columnId)
+
+            setLayoutState((prev) => {
+                const panelsToMove = prev.columnPanels[columnId] || []
+                const remainingColumns = prev.columns.filter((col) => col.id !== columnId)
+
+                if (remainingColumns.length === 0) {
+                    debugLog(debug, 1, "警告: 最後のカラムを削除しようとしています")
+                    return prev
+                }
+
+                const firstColumnId = remainingColumns[0].id
+                const newColumnPanels = { ...prev.columnPanels }
+
+                if (panelsToMove.length > 0) {
+                    newColumnPanels[firstColumnId] = [...newColumnPanels[firstColumnId], ...panelsToMove]
+                }
+
+                delete newColumnPanels[columnId]
+
+                const newColumnWidths = { ...prev.columnWidths }
+                delete newColumnWidths[columnId]
+
+                return {
+                    ...prev,
+                    columns: remainingColumns,
+                    columnWidths: newColumnWidths,
+                    columnPanels: newColumnPanels,
+                }
+            })
+        },
+        [debug],
+    )
+
+    const moveColumn = useCallback(
+        (fromIndex: number, toIndex: number) => {
+            debugLog(debug, 1, "カラム移動:", fromIndex, "->", toIndex)
+
+            setLayoutState((prev) => {
+                const newColumns = [...prev.columns]
+                const [movedColumn] = newColumns.splice(fromIndex, 1)
+                newColumns.splice(toIndex, 0, movedColumn)
+
+                return {
+                    ...prev,
+                    columns: newColumns,
+                }
+            })
+        },
+        [debug],
+    )
+
+    const startResize = useCallback(
+        (columnId: string, startX: number) => {
+            debugLog(debug, 2, "リサイズ開始:", columnId, "at X:", startX)
+
+            resizeStartX.current = startX
+            initialColumnWidth.current = layoutState.columnWidths[columnId] || 300
+
+            setLayoutState((prev) => ({
+                ...prev,
+                isResizing: true,
+                resizingColumn: columnId,
+            }))
+        },
+        [debug, layoutState.columnWidths],
+    )
+
+    const handleResize = useCallback(
+        (currentX: number) => {
+            const { resizingColumn, isResizing } = layoutState
+            if (!(isResizing && resizingColumn)) return
+
+            const deltaX = currentX - resizeStartX.current
+            const newWidth = Math.max(100, Math.min(800, initialColumnWidth.current + deltaX))
+
+            debugLog(debug, 2, "リサイズ中:", resizingColumn, "new width:", newWidth)
+
+            setLayoutState((prev) => ({
+                ...prev,
+                columnWidths: {
+                    ...prev.columnWidths,
+                    [resizingColumn]: newWidth,
+                },
+            }))
+        },
+        [debug, layoutState],
+    )
+
+    const endResize = useCallback(() => {
+        debugLog(debug, 2, "リサイズ終了")
+
+        setLayoutState((prev) => ({
+            ...prev,
+            isResizing: false,
+            resizingColumn: null,
+        }))
+    }, [debug])
+
+    const setColumnWidth = useCallback(
+        (columnId: string, width: number) => {
+            debugLog(debug, 2, "カラム幅設定:", columnId, width)
+
+            setLayoutState((prev) => ({
+                ...prev,
+                columnWidths: {
+                    ...prev.columnWidths,
+                    [columnId]: Math.max(100, Math.min(800, width)),
+                },
+            }))
+        },
+        [debug],
+    )
+
+    const resetColumnWidths = useCallback(() => {
+        debugLog(debug, 1, "カラム幅リセット")
+
+        setLayoutState((prev) => {
+            const resetWidths: Record<string, number> = {}
+            for (const col of prev.columns) {
+                resetWidths[col.id] = col.initialWidth || 400
+            }
+
+            return {
+                ...prev,
+                columnWidths: resetWidths,
+            }
+        })
+    }, [debug])
+
+    const movePanel = useCallback(
+        (panelId: string, fromColumn: string, toColumn: string, insertIndex: number) => {
+            debugLog(debug, 1, "パネル移動:", panelId, "from", fromColumn, "to", toColumn, "at", insertIndex)
+
+            setLayoutState((prev) => {
+                const newColumnPanels = { ...prev.columnPanels }
+
+                if (fromColumn in newColumnPanels) {
+                    newColumnPanels[fromColumn] = newColumnPanels[fromColumn].filter((id) => id !== panelId)
+                }
+
+                if (toColumn in newColumnPanels) {
+                    const targetPanels = [...newColumnPanels[toColumn]]
+                    targetPanels.splice(insertIndex, 0, panelId)
+                    newColumnPanels[toColumn] = targetPanels
+                }
+
+                return {
+                    ...prev,
+                    columnPanels: newColumnPanels,
+                }
+            })
+        },
+        [debug],
+    )
+
+    const addPanel = useCallback(
+        (panelId: string, columnId: string, insertIndex?: number) => {
+            debugLog(debug, 1, "パネル追加:", panelId, "to column:", columnId)
+
+            setLayoutState((prev) => {
+                const newColumnPanels = { ...prev.columnPanels }
+
+                if (!(columnId in newColumnPanels)) {
+                    newColumnPanels[columnId] = []
+                }
+
+                const targetPanels = [...newColumnPanels[columnId]]
+                const index = insertIndex ?? targetPanels.length
+                targetPanels.splice(index, 0, panelId)
+                newColumnPanels[columnId] = targetPanels
+
+                return {
+                    ...prev,
+                    columnPanels: newColumnPanels,
+                }
+            })
+        },
+        [debug],
+    )
+
+    const removePanel = useCallback(
+        (panelId: string) => {
+            debugLog(debug, 1, "パネル削除:", panelId)
+
+            setLayoutState((prev) => {
+                const newColumnPanels: Record<string, string[]> = {}
+
+                for (const [columnId, panels] of Object.entries(prev.columnPanels)) {
+                    newColumnPanels[columnId] = panels.filter((id) => id !== panelId)
+                }
+
+                return {
+                    ...prev,
+                    columnPanels: newColumnPanels,
+                }
+            })
+        },
+        [debug],
+    )
+
+    const updateColumnCount = useCallback(
+        (count: number) => {
+            debugLog(debug, 1, "カラム数更新:", count)
+
+            setLayoutState((prev) => {
+                const currentCount = prev.columns.length
+
+                if (count === currentCount) return prev
+
+                const normalizedColumnPanels = normalizeColumnPanels(prev.columnPanels, count, DEFAULT_COLUMN_ID_CONFIG)
+
+                const columnIds = generateColumnIds(count, DEFAULT_COLUMN_ID_CONFIG)
+
+                const shouldForceEndResize = prev.isResizing && prev.resizingColumn && !columnIds.includes(prev.resizingColumn)
+
+                if (shouldForceEndResize) {
+                    debugLog(debug, 1, "リサイズ中のカラムが削除されるためリサイズを強制終了:", prev.resizingColumn)
+                }
+                const newColumns = columnIds.map((columnId: string, index: number) => ({
+                    id: columnId,
+                    title: `カラム ${index + 1}`,
+                    minWidth: 350,
+                    maxWidth: 800,
+                    initialWidth: 400,
+                    resizable: !(index === 1 && count === 3),
+                }))
+
+                const newColumnWidths: Record<string, number> = {}
+                const existingWidths = Object.entries(prev.columnWidths)
+                const hasCustomWidths = existingWidths.some(([, width]) => width !== 400)
+
+                if (hasCustomWidths) {
+                    columnIds.forEach((columnId: string) => {
+                        const existingWidth = prev.columnWidths[columnId]
+                        if (existingWidth && existingWidth !== 400) {
+                            newColumnWidths[columnId] = existingWidth
+                        } else {
+                            newColumnWidths[columnId] = 400
+                        }
+                    })
+                } else {
+                    const redistributeWidth = currentCount > count ? Object.values(prev.columnWidths).reduce((sum, w) => sum + w, 0) : count * 400
+                    const evenWidth = Math.max(redistributeWidth / count, 350)
+
+                    columnIds.forEach((columnId: string) => {
+                        newColumnWidths[columnId] = evenWidth
+                    })
+                }
+
+                return {
+                    ...prev,
+                    columns: newColumns,
+                    columnPanels: normalizedColumnPanels,
+                    columnWidths: newColumnWidths,
+                    isResizing: shouldForceEndResize ? false : prev.isResizing,
+                    resizingColumn: shouldForceEndResize ? null : prev.resizingColumn,
+                }
+            })
+        },
+        [debug],
+    )
+
+    const autoBalanceColumns = useCallback(() => {
+        debugLog(debug, 1, "カラム自動バランス調整")
+
+        setLayoutState((prev) => {
+            const panelList: string[] = []
+            for (const columnId of Object.keys(prev.columnPanels)) {
+                for (const panelId of prev.columnPanels[columnId]) {
+                    panelList.push(panelId)
+                }
+            }
+
+            const newColumnPanels: Record<string, string[]> = {}
+            for (const column of prev.columns) {
+                newColumnPanels[column.id] = []
+            }
+
+            let currentColumnIndex = 0
+            for (const panelId of panelList) {
+                const columnId = prev.columns[currentColumnIndex % prev.columns.length].id
+                newColumnPanels[columnId].push(panelId)
+                currentColumnIndex += 1
+            }
+
+            return {
+                ...prev,
+                columnPanels: newColumnPanels,
+            }
+        })
+    }, [debug])
+
+    const getColumnById = useCallback(
+        (columnId: string) => {
+            return layoutState.columns.find((col) => col.id === columnId)
+        },
+        [layoutState.columns],
+    )
+
+    const getTotalWidth = useCallback(() => {
+        let total = 0
+        for (const width of Object.values(layoutState.columnWidths)) {
+            total += width
+        }
+        return total
+    }, [layoutState.columnWidths])
+
+    const getColumnElement = useCallback((columnId: string) => {
+        return document.querySelector(`[data-column-id="${columnId}"]`) as HTMLElement | null
+    }, [])
+
+    const setShowInsertPlaceholders = useCallback((show: boolean) => {
+        setLayoutState((prev) => ({
+            ...prev,
+            showInsertPlaceholders: show,
+        }))
+    }, [])
+
+    return {
+        layoutState,
+        addColumn,
+        removeColumn,
+        moveColumn,
+        startResize,
+        handleResize,
+        endResize,
+        setColumnWidth,
+        resetColumnWidths,
+        movePanel,
+        addPanel,
+        removePanel,
+        updateColumnCount,
+        autoBalanceColumns,
+        getColumnById,
+        getTotalWidth,
+        getColumnElement,
+        setShowInsertPlaceholders,
+    }
+}