@aiquants/drag-drop-panels 0.7.2 → 0.8.0

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

@@ -0,0 +1,48 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react"
+
+/** これ以上縮小しても実用にならない下限 (25%) */
+const DEFAULT_MIN_FIT_SCALE = 0.25
+
+/**
+ * 初回計測を paint 前に行い「等倍で一瞬描画→縮小へスナップ」のフラッシュを防ぐため layout effect を使う。
+ * ただし SSR では useLayoutEffect が警告を出す (サーバーでは何もしない) ため、クライアントのみ layout、
+ * サーバーでは通常 effect にフォールバックする。
+ */
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect
+
+/**
+ * コンテンツ領域の幅を ResizeObserver で監視し、requiredWidth に満たない場合に
+ * ワークスペース全体を視覚縮小するための scale (minScale 〜 1) を返すフック。
+ *
+ * @param {number} requiredWidth - 等倍表示に必要な最小幅
+ * @param {number} [minScale] - 縮小の下限値
+ */
+export const useFitScale = (requiredWidth: number, minScale: number = DEFAULT_MIN_FIT_SCALE) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const [scale, setScale] = useState(1)
+
+    useIsomorphicLayoutEffect(() => {
+        const element = containerRef.current
+        if (!element || requiredWidth <= 0) {
+            setScale(1)
+            return
+        }
+
+        const update = () => {
+            const width = element.clientWidth
+            if (width <= 0) {
+                return
+            }
+            const next = width >= requiredWidth ? 1 : Math.max(width / requiredWidth, minScale)
+            // サブピクセルの揺れで再レンダーしないよう 0.5% 未満の変化は無視する
+            setScale((previous) => (Math.abs(previous - next) < 0.005 ? previous : next))
+        }
+
+        update()
+        const observer = new ResizeObserver(update)
+        observer.observe(element)
+        return () => observer.disconnect()
+    }, [requiredWidth, minScale])
+
+    return { containerRef, scale }
+}

package/src/drag-drop/hooks/useMouseTracking.tsx

@@ -0,0 +1,102 @@
+/**
+ * @fileoverview This file defines the `useMouseTracking` custom hook, which provides
+ * utilities for tracking mouse position, click events, and gestures like virtual clicks.
+ * It's essential for implementing custom drag-and-drop behavior.
+ *
+ * このファイルは `useMouseTracking` カスタムフックを定義します。これは、マウスの位置、
+ * クリックイベント、および仮想クリックのようなジェスチャーを追跡するためのユーティリティを提供します。
+ * カスタムのドラッグ＆ドロップ動作を実装するために不可欠です。
+ */
+import { useCallback, useRef, useState } from "react"
+import type { MousePosition } from "../types"
+
+export const useMouseTracking = () => {
+    const [mousePosition, setMousePosition] = useState<MousePosition>({
+        x: 0,
+        y: 0,
+        isVisible: false,
+    })
+
+    const lastClickPositionRef = useRef<{ x: number; y: number } | null>(null)
+    const mouseDownTimeRef = useRef<number>(0)
+    const mouseDownPositionRef = useRef<{ x: number; y: number } | null>(null)
+
+    const showMousePosition = useCallback((x: number, y: number) => {
+        setMousePosition({ x, y, isVisible: true })
+    }, [])
+
+    const hideMousePosition = useCallback(() => {
+        setMousePosition((prev) => ({ ...prev, isVisible: false }))
+    }, [])
+
+    const updateMousePosition = useCallback((x: number, y: number) => {
+        setMousePosition((prevPosition) => {
+            if (prevPosition.x === x && prevPosition.y === y) {
+                return prevPosition
+            }
+
+            return {
+                x,
+                y,
+                isVisible: prevPosition.isVisible,
+            }
+        })
+    }, [])
+
+    const recordMouseDown = useCallback((x: number, y: number) => {
+        mouseDownTimeRef.current = Date.now()
+        mouseDownPositionRef.current = { x, y }
+    }, [])
+
+    const recordClickPosition = useCallback((x: number, y: number) => {
+        lastClickPositionRef.current = { x, y }
+    }, [])
+
+    const isVirtualClick = useCallback((x: number, y: number, maxTime = 500, maxDistance = 5): boolean => {
+        const currentTime = Date.now()
+        const timeSinceMouseDown = currentTime - (mouseDownTimeRef.current || 0)
+
+        if (timeSinceMouseDown >= maxTime) {
+            return false
+        }
+
+        if (!mouseDownPositionRef.current) {
+            return false
+        }
+
+        const distance = Math.sqrt((x - mouseDownPositionRef.current.x) ** 2 + (y - mouseDownPositionRef.current.y) ** 2)
+
+        return distance < maxDistance
+    }, [])
+
+    const calculateMoveDistance = useCallback((x: number, y: number): number => {
+        if (!lastClickPositionRef.current) {
+            return 0
+        }
+
+        const dx = Math.abs(x - lastClickPositionRef.current.x)
+        const dy = Math.abs(y - lastClickPositionRef.current.y)
+        return Math.sqrt(dx * dx + dy * dy)
+    }, [])
+
+    const clearMouseTracking = useCallback(() => {
+        lastClickPositionRef.current = null
+        mouseDownTimeRef.current = 0
+        mouseDownPositionRef.current = null
+    }, [])
+
+    return {
+        mousePosition,
+        lastClickPosition: lastClickPositionRef.current,
+        mouseDownTime: mouseDownTimeRef.current,
+        mouseDownPosition: mouseDownPositionRef.current,
+        showMousePosition,
+        hideMousePosition,
+        updateMousePosition,
+        recordMouseDown,
+        recordClickPosition,
+        isVirtualClick,
+        calculateMoveDistance,
+        clearMouseTracking,
+    }
+}

package/src/drag-drop/hooks/useNormalDragHandlers.tsx

@@ -0,0 +1,427 @@
+/**
+ * @fileoverview `useNormalDragHandlers` カスタムフックの定義。
+ *
+ * 標準的なHTML5のドラッグ＆ドロップ操作に関連する全てのイベントハンドリングロジックをカプセル化。
+ * ドラッグの開始、終了、オーバー、ドロップといった一連のイベントを管理し、
+ * `useCustomDragHandlers` と連携して一貫性のあるD&D体験の提供を責務とする。
+ *
+ * @fileoverview Defines the `useNormalDragHandlers` custom hook。
+ *
+ * Encapsulates all event handling logic for standard HTML5 drag-and-drop operations。
+ * This hook is responsible for managing the sequence of events like drag start, end, over,
+ * and drop, working in concert with `useCustomDragHandlers` to provide a consistent D&D experience.
+ */
+import { useCallback, useEffect, useRef } from "react"
+import { debugLog } from "../DebugComponents"
+import type { CustomDragState, DebugConfig, DragOverPosition, DragState, OriginalPanelPosition } from "../types"
+import { DEFAULT_EDGE_SCROLL_CONFIG, EdgeScrollManager } from "../utils/edgeScrollUtils"
+
+/**
+ * `useNormalDragHandlers` フックが受け取るプロパティの型定義。
+ * Defines the props structure for the `useNormalDragHandlers` hook.
+ */
+interface UseNormalDragHandlersProps {
+    debugConfig: DebugConfig
+    dragState: DragState
+    customDrag: CustomDragState
+    dragModes: Record<string, "normal" | "custom">
+    columnPanels: Record<string, string[]>
+    dragOverPosition: DragOverPosition | null
+    originalPanelPosition: OriginalPanelPosition | null
+
+    // State update functions / 状態更新関数
+    setDragState: (state: DragState | ((prev: DragState) => DragState)) => void
+    setDragOverPosition: (position: DragOverPosition | null) => void
+    setOriginalPanelPosition: (position: OriginalPanelPosition | null) => void
+
+    // Other functions / その他の関数
+    performPanelMove: (panelId: string, targetColumn: string, insertIndex: number) => void
+    showMousePosition: (x: number, y: number) => void
+    updateMousePosition: (x: number, y: number) => void
+    resetDragState: () => void
+    handlePlaceholderDragEnter: (columnIndex: number, insertIndex: number) => void
+    handlePlaceholderDragLeave: (e?: React.DragEvent<Element>, columnIndex?: number, insertIndex?: number) => void
+
+    // 表示倍率
+    scale?: number
+}
+
+/**
+ * 標準HTML5 D&Dイベントハンドラを提供するカスタムフック。
+ *
+ * `useCallback` でメモ化されたイベントハンドラ群を返す。
+ * パフォーマンス向上のため、頻繁に更新される値は `useRef` を介して参照し、
+ * コールバック関数の再生成を最小限に抑える。
+ *
+ * A custom hook that provides memoized event handlers for standard HTML5 drag-and-drop。
+ *
+ * It returns a set of event handlers memoized with `useCallback`。
+ * For performance optimization, frequently updated values are accessed via `useRef`
+ * to minimize the re-creation of callback functions。
+ */
+export const useNormalDragHandlers = ({
+    debugConfig,
+    dragState,
+    customDrag,
+    dragModes,
+    columnPanels,
+    dragOverPosition,
+    originalPanelPosition,
+    setDragState,
+    setDragOverPosition,
+    setOriginalPanelPosition,
+    performPanelMove,
+    showMousePosition,
+    updateMousePosition,
+    resetDragState,
+    handlePlaceholderDragEnter,
+    handlePlaceholderDragLeave,
+    scale = 1,
+}: UseNormalDragHandlersProps) => {
+    // --- Refs for Stable Callbacks ---
+    // useCallbackの依存配列から頻繁に更新される値（stateやprops）を排除するため、
+    // refに格納して最新値を参照する。これにより、コールバック関数のインスタンスが安定し、
+    // 不要な再レンダリングを防止する。
+    //
+    // To prevent re-creating callbacks on every render, we store frequently changing
+    // state and props in refs. This allows us to access their latest values inside
+    // `useCallback` without adding them to the dependency array, thus stabilizing the callbacks。
+
+    const debugConfigRef = useRef(debugConfig)
+    debugConfigRef.current = debugConfig
+
+    const columnPanelsRef = useRef(columnPanels)
+    columnPanelsRef.current = columnPanels
+
+    const dragStateRef = useRef(dragState)
+    dragStateRef.current = dragState
+    const dragOverPositionRef = useRef(dragOverPosition)
+    dragOverPositionRef.current = dragOverPosition
+    const originalPanelPositionRef = useRef(originalPanelPosition)
+    originalPanelPositionRef.current = originalPanelPosition
+
+    // 表示倍率は render 毎に更新されるため、安定した handleDragStart から最新値を読むために ref 化する。
+    // (scale を useCallback の依存に入れるとハンドラが毎回再生成され、他の ref 化した値と設計が不整合になる)
+    const scaleRef = useRef(scale)
+    scaleRef.current = scale
+
+    // エッジスクロール管理用のインスタンス
+    const edgeScrollManagerRef = useRef<EdgeScrollManager>(new EdgeScrollManager(DEFAULT_EDGE_SCROLL_CONFIG))
+
+    // スクロール対象の要素を設定（パネルエリアのmain要素。クラスセレクタ禁止のため data 属性で特定）
+    useEffect(() => {
+        const scrollElement = document.querySelector<HTMLElement>("main[data-aqdd-scroll-root]")
+        if (scrollElement) {
+            edgeScrollManagerRef.current.setScrollElement(scrollElement)
+        }
+    }, [])
+
+    // --- Event Handlers ---
+
+    /**
+     * `dragstart` イベントのハンドラ。
+     *
+     * ドラッグ操作の初期化、ドラッグ対象パネルの元の位置の記録、
+     * `dataTransfer` オブジェクトへのデータ設定を行う。
+     *
+     * Handles the `dragstart` event。
+     *
+     * Initializes the drag operation, records the original position of the dragged panel,
+     * and sets data on the `dataTransfer` object。
+     */
+    const handleDragStart = useCallback(
+        (e: React.DragEvent, panelId: string) => {
+            // カスタムドラッグがアクティブ、またはパネルがカスタムモードの場合、標準ドラッグをキャンセル。
+            // Cancel standard drag if a custom drag is active or the panel is in 'custom' mode。
+            if (customDrag.isActive) {
+                debugLog(debugConfigRef.current, 2, "カスタムドラッグアクティブ中 - 通常ドラッグを無効化:", panelId)
+                e.preventDefault()
+                return
+            }
+            if (dragModes[panelId] === "custom") {
+                debugLog(debugConfigRef.current, 2, "カスタムドラッグモード - 通常ドラッグを無効化:", panelId)
+                e.preventDefault()
+                return
+            }
+
+            debugLog(debugConfigRef.current, 1, "ドラッグ開始:", panelId)
+
+            // ドロップ時に元の位置と同じか判定するため、ドラッグ開始時の位置を保存。
+            // Record the panel's original position to prevent dropping it back in the same spot。
+            const columns = Object.keys(columnPanelsRef.current)
+            let originalPos: OriginalPanelPosition | null = null
+            for (let columnIndex = 0; columnIndex < columns.length; columnIndex++) {
+                const columnKey = columns[columnIndex]
+                const panelIndex = columnPanelsRef.current[columnKey].indexOf(panelId)
+                if (panelIndex !== -1) {
+                    originalPos = { columnIndex, panelIndex }
+                    break
+                }
+            }
+            setOriginalPanelPosition(originalPos)
+
+            // ドラッグ操作に必要なデータを設定。
+            // Set data for the drag operation。
+            if (e.dataTransfer) {
+                e.dataTransfer.setData("text/plain", panelId)
+                e.dataTransfer.effectAllowed = "move"
+
+                // 縮小表示中はドラッグゴースト画像も同じ倍率で縮小する。
+                // If the workspace is scaled down, shrink the native drag ghost to match.
+                //
+                // setDragImage のスナップショットは要素の「レイアウト境界ボックス」を基準に生成される。
+                // そのため縮小後サイズの外枠 (overflow:hidden) の中へ、自然サイズの等倍クローンを
+                // transform:scale で入れる。これで raster キャンバス自体が縮小後サイズになり、余白のない
+                // 綺麗な縮小ゴーストが得られる (単にクローンへ transform:scale を掛けるだけだと境界ボックスは
+                // 原寸のままで、内容が左上 1/scale 象限に描かれる)。ドラッグ元パネルは data-panel-id を持つ
+                // 祖先なので、dragHandle="header" でもパネル全体をゴースト化する。
+                const currentScale = scaleRef.current
+                if (currentScale < 1) {
+                    const panelElement = (e.currentTarget as HTMLElement).closest<HTMLElement>("[data-panel-id]") ?? (e.currentTarget as HTMLElement)
+                    const rect = panelElement.getBoundingClientRect()
+                    const naturalWidth = panelElement.offsetWidth
+                    const naturalHeight = panelElement.offsetHeight
+
+                    // 自然サイズの等倍クローン (内部レイアウトを元パネルと一致させるため width/height は原寸)
+                    const inner = panelElement.cloneNode(true) as HTMLElement
+                    // 同一性属性を除去 (画面外に一瞬存在するクローンが [data-panel-id]/id の重複を作らないように)
+                    inner.removeAttribute("data-panel-id")
+                    inner.removeAttribute("id")
+                    inner.style.margin = "0"
+                    inner.style.width = `${naturalWidth}px`
+                    inner.style.height = `${naturalHeight}px`
+                    inner.style.transform = `scale(${currentScale})`
+                    inner.style.transformOrigin = "top left"
+
+                    // 縮小後サイズの外枠 (raster キャンバスを縮小後サイズに一致させる)。
+                    // 画面外 (left:-10000px) に置きスナップショット取得中のちらつきを避ける。
+                    const ghost = document.createElement("div")
+                    ghost.style.position = "fixed"
+                    ghost.style.top = "0"
+                    ghost.style.left = "-10000px"
+                    ghost.style.width = `${naturalWidth * currentScale}px`
+                    ghost.style.height = `${naturalHeight * currentScale}px`
+                    ghost.style.overflow = "hidden"
+                    ghost.style.opacity = "0.8"
+                    ghost.style.pointerEvents = "none"
+                    ghost.appendChild(inner)
+                    document.body.appendChild(ghost)
+
+                    // ホットスポットは画面上 (縮小後) の要素内カーソル位置。ghost は縮小後サイズなので直接渡せる
+                    e.dataTransfer.setDragImage(ghost, e.clientX - rect.left, e.clientY - rect.top)
+
+                    // スナップショットは dragstart 完了時に同期取得されるため、次フレームで撤去する
+                    requestAnimationFrame(() => ghost.remove())
+                }
+            }
+
+            // マウス位置の追跡を開始。
+            // Set initial mouse position for tracking。
+            showMousePosition(e.clientX, e.clientY)
+
+            // requestAnimationFrameを使用して、ブラウザの描画サイクルに合わせて状態を更新。
+            // これにより、ドラッグ開始時の視覚効果がスムーズに適用される。
+            // Update the global drag state, using requestAnimationFrame to ensure
+            // visual updates are synchronized with the browser's rendering cycle。
+            requestAnimationFrame(() => {
+                setDragState({
+                    isDragging: true,
+                    draggedPanel: panelId,
+                    dragOverColumn: null,
+                })
+            })
+        },
+        [dragModes, customDrag.isActive, setOriginalPanelPosition, showMousePosition, setDragState],
+    )
+
+    /**
+     * `dragend` イベントのハンドラ。
+     *
+     * ドラッグ操作の終了時に、関連する全ての状態をリセットする。
+     *
+     * Handles the `dragend` event。
+     *
+     * Resets all drag-related states upon completion of the drag operation。
+     */
+    const handleDragEnd = useCallback(() => {
+        debugLog(debugConfigRef.current, 1, "ドラッグ終了")
+
+        // エッジスクロールを停止
+        edgeScrollManagerRef.current.stop()
+
+        resetDragState()
+    }, [resetDragState])
+
+    /**
+     * カラム上での `dragover` イベントのハンドラ。
+     *
+     * `document.elementFromPoint` を使用してカーソル直下の要素を特定し、
+     * プレースホルダーのハイライト処理を制御する。`useCustomDragHandlers` とロジックを統一済み。
+     *
+     * Handles the `dragover` event on a column。
+     *
+     * Uses `document.elementFromPoint` to identify the element directly under the cursor,
+     * controlling the placeholder highlighting. The logic is unified with `useCustomDragHandlers`。
+     */
+    const handleDragOverWithInsert = useCallback(
+        (e: React.DragEvent, columnIndex: number) => {
+            e.preventDefault()
+            e.dataTransfer.dropEffect = "move"
+
+            if (!dragStateRef.current.isDragging) return
+
+            updateMousePosition(e.clientX, e.clientY)
+
+            // ドラッグオーバー中のカラムIDを状態に保存。
+            // Update the column being dragged over。
+            if (columnIndex !== dragStateRef.current.dragOverColumn) {
+                setDragState((prev) => ({ ...prev, dragOverColumn: columnIndex }))
+            }
+
+            // --- 統一ロジック: elementFromPoint を使用して挿入位置を特定 ---
+            // --- Unified Logic: Identify insertion point using elementFromPoint ---
+            const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY)
+            const placeholder = elementAtPoint?.closest<HTMLElement>("[data-placeholder-index]")
+
+            if (placeholder) {
+                // ケース1: カーソル直下にプレースホルダー要素が存在する場合。
+                // Case 1: A placeholder element is found directly under the cursor。
+                const placeholderIndexAttr = placeholder.getAttribute("data-placeholder-index")
+                const placeholderColumnAttr = placeholder.getAttribute("data-placeholder-column")
+
+                if (placeholderIndexAttr && placeholderColumnAttr) {
+                    const insertIndex = parseInt(placeholderIndexAttr, 10)
+                    const targetColumnIndex = parseInt(placeholderColumnAttr, 10)
+                    // 親コンポーネントのハイライト処理を呼び出す。
+                    // Trigger the highlight by calling the parent component's handler。
+                    handlePlaceholderDragEnter(targetColumnIndex, insertIndex)
+                }
+            } else {
+                const dropZone = elementAtPoint?.closest<HTMLElement>("[data-drop-zone]")
+                if (dropZone) {
+                    // ケース2: ドロップゾーン上ではあるが、特定のプレースホルダー上ではない場合。
+                    // (例: パネル自体のコンテンツ上など)
+                    // この場合、ハイライトは維持したいため、何もしない。
+                    // カラムから完全に離れた際の `handleColumnDragLeave` が後処理を担当する。
+                    //
+                    // Case 2: Over a drop zone, but not a specific placeholder (e.g., over panel content)。
+                    // Do nothing here to maintain the current highlight. The `handleColumnDragLeave`
+                    // will handle the cleanup when the cursor leaves the column entirely。
+                } else {
+                    // ケース3: ドロップゾーン外にカーソルがある場合。
+                    // ハイライトをクリアする。
+                    // Case 3: Cursor is outside of any drop zone。
+                    // Clear the highlight。
+                    handlePlaceholderDragLeave()
+                }
+            }
+        },
+        [updateMousePosition, setDragState, handlePlaceholderDragEnter, handlePlaceholderDragLeave],
+    )
+
+    /**
+     * `drop` イベントのハンドラ。
+     *
+     * パネルの移動を確定し、関連する状態をリセットする。
+     *
+     * Handles the `drop` event。
+     *
+     * Finalizes the panel move and resets related states。
+     */
+    const handleDropWithInsert = useCallback(
+        (e: React.DragEvent, targetColumn: string) => {
+            e.preventDefault()
+            const draggedPanel = e.dataTransfer.getData("text/plain")
+            const currentOverPos = dragOverPositionRef.current
+
+            if (!(draggedPanel && currentOverPos)) return
+
+            debugLog(debugConfigRef.current, 1, "🎯 ドロップ完了:", {
+                draggedPanel,
+                targetColumn,
+                insertPosition: `カラム${currentOverPos.columnIndex} - 位置${currentOverPos.insertIndex}`,
+            })
+
+            // 親コンポーネントにパネル移動の実行を依頼。
+            // Perform the actual panel move in the layout state。
+            performPanelMove(draggedPanel, targetColumn, currentOverPos.insertIndex)
+
+            // ドラッグ状態をリセット。
+            // Reset drag states。
+            setDragOverPosition(null)
+            handleDragEnd()
+        },
+        [performPanelMove, setDragOverPosition, handleDragEnd],
+    )
+
+    /**
+     * カラムでの `dragleave` イベントのハンドラ。
+     *
+     * マウスがカラムエリア全体から離れた場合にのみ、ドラッグオーバー関連の状態をクリアする。
+     *
+     * Handles the `dragleave` event on a column。
+     *
+     * Clears drag-over related states only when the mouse leaves the entire column area,
+     * not when moving between child elements within it。
+     */
+    const handleColumnDragLeave = useCallback(
+        (e: React.DragEvent) => {
+            const dropZone = e.currentTarget
+            const relatedTarget = e.relatedTarget as Node | null
+
+            // `relatedTarget` が dropZone の子要素でないことを確認し、カラムから完全に出たことを判定。
+            // If `relatedTarget` doesn't exist or is not a descendant of the `dropZone`,
+            // we conclude the mouse has truly left the column area。
+            if (!(relatedTarget && dropZone.contains(relatedTarget))) {
+                setDragOverPosition(null)
+                setDragState((prev) => ({ ...prev, dragOverColumn: null }))
+            }
+        },
+        [setDragOverPosition, setDragState],
+    )
+
+    // --- Global Event Listener ---
+    /**
+     * ドラッグ操作中、`document` にグローバルな `dragover` リスナーをアタッチする。
+     *
+     * これにより、カーソルが特定のドロップゾーン上にない場合でもマウス位置の追跡を継続できる。
+     *
+     * Attaches a global `dragover` listener to the `document` during a drag operation。
+     *
+     * This ensures continuous tracking of the mouse position, even when the cursor
+     * is not over a specific drop zone。
+     */
+    useEffect(() => {
+        const handleDragOver = (e: globalThis.DragEvent) => {
+            if (!dragStateRef.current.isDragging) return
+            updateMousePosition(e.clientX, e.clientY)
+
+            // エッジスクロールの処理
+            edgeScrollManagerRef.current.update(e.clientX, e.clientY)
+        }
+
+        if (dragState.isDragging) {
+            document.addEventListener("dragover", handleDragOver)
+            return () => {
+                document.removeEventListener("dragover", handleDragOver)
+                // ドラッグ終了時にエッジスクロールを停止
+                edgeScrollManagerRef.current.stop()
+            }
+        }
+    }, [dragState.isDragging, updateMousePosition])
+
+    // コンポーネントのアンマウント時にエッジスクロールを停止
+    useEffect(() => {
+        return () => {
+            edgeScrollManagerRef.current.stop()
+        }
+    }, [])
+
+    return {
+        handleDragStart,
+        handleDragEnd,
+        handleDragOverWithInsert,
+        handleDropWithInsert,
+        handleColumnDragLeave,
+    }
+}