@aiquants/drag-drop-panels 0.8.3 → 0.8.4

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

@@ -1,333 +0,0 @@
-/**
- * @fileoverview This file defines the `useCustomDragHandlers` custom hook.
- * This hook encapsulates the complex logic for a custom drag-and-drop implementation
- * that does not rely on the standard HTML5 Drag and Drop API. It manages drag initiation,
- * movement, and completion using mouse events (`mousedown`, `mousemove`, `mouseup`).
- *
- * このファイルは `useCustomDragHandlers` カスタムフックを定義します。
- * このフックは、標準のHTML5ドラッグ＆ドロップAPIに依存しない、カスタムのドラッグ＆ドロップ実装の
- * 複雑なロジックをカプセル化します。マウスイベント（`mousedown`, `mousemove`, `mouseup`）を
- * 使用して、ドラッグの開始、移動、完了を管理します。
- */
-import { type DragEvent, type MouseEvent, useCallback, useEffect, useRef } from "react"
-import { debugLog } from "../DebugComponents"
-import type { ClickState, CustomDragState, DebugConfig, DragOverPosition, DragState, OriginalPanelPosition } from "../types"
-import { DEFAULT_EDGE_SCROLL_CONFIG, EdgeScrollManager } from "../utils/edgeScrollUtils"
-
-interface UseCustomDragHandlersProps {
-    debugConfig: DebugConfig
-    dragState: DragState
-    customDrag: CustomDragState
-    clickState: ClickState
-    dragModes: Record<string, "normal" | "custom">
-    isMouseDown: boolean
-    originalPanelPosition: OriginalPanelPosition | null
-    dragOverPosition: DragOverPosition | null
-    setCustomDrag: (state: CustomDragState) => void
-    setDragState: (state: DragState | ((prev: DragState) => DragState)) => void
-    setDragOverPosition: (position: DragOverPosition | null) => void
-    setOriginalPanelPosition: (position: OriginalPanelPosition | null) => void
-    setClickState: (state: ClickState) => void
-    setIsMouseDown: (isDown: boolean) => void
-    findPanelPosition: (panelId: string) => OriginalPanelPosition | null
-    performPanelMove: (panelId: string, targetColumn: string, insertIndex: number) => void
-    showMousePosition: (x: number, y: number) => void
-    updateMousePosition: (x: number, y: number) => void
-    recordMouseDown: (x: number, y: number) => void
-    recordClickPosition: (x: number, y: number) => void
-    isVirtualClick: (x: number, y: number, maxTime?: number, maxDistance?: number) => boolean
-    calculateMoveDistance: (x: number, y: number) => number
-    clearMouseTracking: () => void
-    resetDragState: () => void
-    resetClickState: () => void
-    createDragImage: (panelId: string, offsetX: number, offsetY: number) => void
-    updateDragImagePosition: (x: number, y: number) => void
-    removeDragImage: () => void
-    handlePlaceholderDragEnter: (columnIndex: number, insertIndex: number) => void
-    handlePlaceholderDragLeave: (e?: DragEvent<Element>, columnIndex?: number, insertIndex?: number) => void
-}
-
-export const useCustomDragHandlers = ({
-    debugConfig,
-    dragState,
-    customDrag,
-    clickState,
-    dragModes,
-    isMouseDown,
-    dragOverPosition,
-    setCustomDrag,
-    setDragState,
-    setDragOverPosition,
-    setOriginalPanelPosition,
-    setClickState,
-    setIsMouseDown,
-    findPanelPosition,
-    performPanelMove,
-    showMousePosition,
-    updateMousePosition,
-    recordMouseDown,
-    recordClickPosition,
-    isVirtualClick,
-    calculateMoveDistance,
-    clearMouseTracking,
-    resetDragState,
-    resetClickState,
-    createDragImage,
-    updateDragImagePosition,
-    removeDragImage,
-    handlePlaceholderDragEnter,
-    handlePlaceholderDragLeave,
-}: UseCustomDragHandlersProps) => {
-    const debugConfigRef = useRef(debugConfig)
-    debugConfigRef.current = debugConfig
-
-    const clickStateTimeoutRef = useRef<number | null>(null)
-    const dragStartMouseCoordRef = useRef<{ x: number; y: number } | null>(null)
-    const clickCountRef = useRef(0)
-
-    const edgeScrollManagerRef = useRef<EdgeScrollManager>(new EdgeScrollManager(DEFAULT_EDGE_SCROLL_CONFIG))
-
-    useEffect(() => {
-        // DragDropLayout が出力する data 属性で特定する (クラスセレクタは utility 変更で壊れるため禁止)
-        const scrollElement = document.querySelector<HTMLElement>("main[data-aqdd-scroll-root]")
-        if (scrollElement) {
-            edgeScrollManagerRef.current.setScrollElement(scrollElement)
-        }
-    }, [])
-
-    const dragOverPositionRef = useRef(dragOverPosition)
-    useEffect(() => {
-        dragOverPositionRef.current = dragOverPosition
-        debugLog(debugConfigRef.current, 2, "dragOverPositionRef更新:", dragOverPosition)
-    }, [dragOverPosition])
-
-    const handleGlobalMouseMove = useCallback(
-        (e: globalThis.MouseEvent) => {
-            if (customDrag.isActive || clickState.isClicked) {
-                e.preventDefault()
-                const selection = window.getSelection()
-                if (selection && selection.rangeCount > 0) {
-                    selection.removeAllRanges()
-                }
-            }
-
-            if (customDrag.isActive) {
-                updateMousePosition(e.clientX, e.clientY)
-                updateDragImagePosition(e.clientX, e.clientY)
-                edgeScrollManagerRef.current.update(e.clientX, e.clientY)
-
-                const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY)
-                const dropZone = elementAtPoint?.closest<HTMLElement>("[data-drop-zone]")
-
-                if (dropZone) {
-                    document.body.classList.add("droppable")
-                    const columnIndexAttr = dropZone.getAttribute("data-column-index")
-                    const columnIndex = columnIndexAttr ? parseInt(columnIndexAttr, 10) : null
-
-                    if (columnIndex !== null && columnIndex !== dragState.dragOverColumn) {
-                        setDragState((prev) => ({ ...prev, dragOverColumn: columnIndex }))
-                    }
-
-                    const placeholder = elementAtPoint?.closest<HTMLElement>("[data-placeholder-index]")
-                    if (placeholder) {
-                        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)
-                            handlePlaceholderDragEnter(targetColumnIndex, insertIndex)
-                        }
-                    } else {
-                        handlePlaceholderDragLeave()
-                    }
-                } else {
-                    document.body.classList.remove("droppable")
-                    setDragOverPosition(null)
-                    setDragState((prev) => ({ ...prev, dragOverColumn: null }))
-                }
-            } else if (isMouseDown && clickState.isClicked && clickState.panelId) {
-                if (dragModes[clickState.panelId] !== "custom") return
-
-                const distance = calculateMoveDistance(e.clientX, e.clientY)
-                if (distance < 10) return
-
-                debugLog(debugConfigRef.current, 1, "🚀 カスタムドラッグ開始 -", clickState.panelId)
-
-                const element = document.querySelector<HTMLElement>(`[data-panel-id="${clickState.panelId}"]`)
-                if (element && dragStartMouseCoordRef.current) {
-                    const rect = element.getBoundingClientRect()
-                    const offsetX = dragStartMouseCoordRef.current.x - rect.left
-                    const offsetY = dragStartMouseCoordRef.current.y - rect.top
-
-                    createDragImage(clickState.panelId, offsetX, offsetY)
-                    document.body.classList.add("custom-dragging")
-
-                    setCustomDrag({
-                        isActive: true,
-                        panelId: clickState.panelId,
-                        startX: offsetX,
-                        startY: offsetY,
-                    })
-                }
-
-                setDragState({ isDragging: true, draggedPanel: clickState.panelId, dragOverColumn: null })
-                setOriginalPanelPosition(findPanelPosition(clickState.panelId))
-                showMousePosition(e.clientX, e.clientY)
-
-                setClickState({ isClicked: false, panelId: null })
-                setIsMouseDown(false)
-                clearMouseTracking()
-                dragStartMouseCoordRef.current = null
-
-                if (clickStateTimeoutRef.current) {
-                    clearTimeout(clickStateTimeoutRef.current)
-                    clickStateTimeoutRef.current = null
-                }
-            }
-        },
-        [
-            customDrag.isActive,
-            clickState,
-            dragState.dragOverColumn,
-            dragModes,
-            isMouseDown,
-            updateMousePosition,
-            setDragState,
-            setDragOverPosition,
-            calculateMoveDistance,
-            findPanelPosition,
-            setCustomDrag,
-            setOriginalPanelPosition,
-            showMousePosition,
-            setClickState,
-            setIsMouseDown,
-            clearMouseTracking,
-            createDragImage,
-            updateDragImagePosition,
-            handlePlaceholderDragEnter,
-            handlePlaceholderDragLeave,
-        ],
-    )
-
-    const handleGlobalMouseUp = useCallback(
-        (e: globalThis.MouseEvent) => {
-            debugLog(debugConfigRef.current, 1, "🐭 カスタムドラッグハンドラー - グローバルマウスアップ", {
-                isActive: customDrag.isActive,
-                panelId: customDrag.panelId,
-                dragMode: customDrag.panelId ? dragModes[customDrag.panelId] : "unknown",
-            })
-
-            if (customDrag.isActive) {
-                edgeScrollManagerRef.current.stop()
-
-                const currentDragOverPosition = dragOverPositionRef.current
-                if (currentDragOverPosition) {
-                    const elementUnderMouse = document.elementFromPoint(e.clientX, e.clientY)
-                    const dropZone = elementUnderMouse?.closest<HTMLElement>("[data-drop-zone]")
-
-                    if (dropZone) {
-                        const targetColumnKey = dropZone.getAttribute("data-column-key")
-                        if (targetColumnKey && dragModes[customDrag.panelId] === "custom") {
-                            debugLog(debugConfigRef.current, 1, "🔄 カスタムドラッグパネル移動実行:", customDrag.panelId, "→", targetColumnKey)
-                            performPanelMove(customDrag.panelId, targetColumnKey, currentDragOverPosition.insertIndex)
-                        } else {
-                            debugLog(debugConfigRef.current, 1, "🚫 カスタムドラッグパネル移動スキップ:", customDrag.panelId, "モード:", dragModes[customDrag.panelId])
-                        }
-                    }
-                }
-                removeDragImage()
-                document.body.classList.remove("custom-dragging", "droppable")
-                resetDragState()
-                clickCountRef.current = 0
-            } else if (isVirtualClick(e.clientX, e.clientY)) {
-                const elementUnderMouse = document.elementFromPoint(e.clientX, e.clientY)
-                const panelElement = elementUnderMouse?.closest<HTMLElement>("[data-panel-id]")
-                const panelId = panelElement?.getAttribute("data-panel-id") ?? null
-
-                if (!(panelElement && panelId) || dragModes[panelId] !== "custom") {
-                    if (clickStateTimeoutRef.current) {
-                        clearTimeout(clickStateTimeoutRef.current)
-                        clickStateTimeoutRef.current = null
-                    }
-                    resetClickState()
-                    dragStartMouseCoordRef.current = null
-                    clickCountRef.current = 0
-                    return
-                }
-
-                clickCountRef.current += 1
-
-                if (clickState.isClicked === false && clickCountRef.current === 1) {
-                    debugLog(debugConfigRef.current, 1, "🖱️ 仮想クリック検出 - ドラッグ待機状態へ:", panelId)
-                    setClickState({ isClicked: true, panelId })
-                    clickStateTimeoutRef.current = window.setTimeout(() => {
-                        debugLog(debugConfigRef.current, 1, "⏳ クリック待機状態を自動解除:", panelId)
-                        resetClickState()
-                        dragStartMouseCoordRef.current = null
-                        clickCountRef.current = 0
-                    }, 2000)
-                } else {
-                    debugLog(debugConfigRef.current, 1, "🚫 クリック待機状態を解除 - 仮想クリック検出停止:", panelId)
-                    if (clickStateTimeoutRef.current) {
-                        clearTimeout(clickStateTimeoutRef.current)
-                        clickStateTimeoutRef.current = null
-                    }
-                    resetClickState()
-                    dragStartMouseCoordRef.current = null
-                    clickCountRef.current = 0
-                    clickStateTimeoutRef.current = window.setTimeout(() => {
-                        debugLog(debugConfigRef.current, 1, "⏳ 仮想クリック検出再開:", panelId)
-                    }, 2000)
-                }
-            } else if (clickState.isClicked) {
-                resetClickState()
-                dragStartMouseCoordRef.current = null
-                clickCountRef.current = 0
-            }
-
-            if (isMouseDown) {
-                setIsMouseDown(false)
-            }
-        },
-        [customDrag.isActive, customDrag.panelId, clickState, dragModes, isMouseDown, performPanelMove, resetDragState, resetClickState, isVirtualClick, setClickState, setIsMouseDown, removeDragImage],
-    )
-
-    const handleMouseDown = useCallback(
-        (e: MouseEvent, panelId: string) => {
-            if (dragModes[panelId] !== "custom") {
-                debugLog(debugConfigRef.current, 1, "🚫 カスタムドラッグモードではない - スキップ:", panelId)
-                return
-            }
-
-            recordMouseDown(e.clientX, e.clientY)
-
-            if (clickState.isClicked && clickState.panelId === panelId) {
-                setIsMouseDown(true)
-
-                if (clickStateTimeoutRef.current !== null) {
-                    clearTimeout(clickStateTimeoutRef.current)
-                    clickStateTimeoutRef.current = null
-                }
-                recordClickPosition(e.clientX, e.clientY)
-                dragStartMouseCoordRef.current = { x: e.clientX, y: e.clientY }
-            }
-        },
-        [clickState, dragModes, recordMouseDown, setIsMouseDown, recordClickPosition],
-    )
-
-    useEffect(() => {
-        return () => {
-            if (clickStateTimeoutRef.current !== null) {
-                clearTimeout(clickStateTimeoutRef.current)
-            }
-            edgeScrollManagerRef.current.stop()
-        }
-    }, [])
-
-    return {
-        handleGlobalMouseMove,
-        handleGlobalMouseUp,
-        handleMouseDown,
-    }
-}