@aiquants/drag-drop-panels 0.7.2 → 0.8.0

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

@@ -0,0 +1,333 @@
+/**
+ * @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,
+    }
+}