sourav-das/stem-separator

1/**2 * @deprecated Use createDragStream from './reactive/drag-stream.js' instead.3 * This function is maintained for backward compatibility but will be removed in a future version.4 */5export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mouseButton = 0, touchDelay = 100) {6    if (!element)7        return () => void 0;8    const activePointers = new Map();9    const isTouchDevice = matchMedia('(pointer: coarse)').matches;10    let unsubscribeDocument = () => void 0;11    const onPointerDown = (event) => {12        if (event.button !== mouseButton)13            return;14        activePointers.set(event.pointerId, event);15        if (activePointers.size > 1) {16            return;17        }18        let startX = event.clientX;19        let startY = event.clientY;20        let isDragging = false;21        const touchStartTime = Date.now();22        const onPointerMove = (event) => {23            if (event.defaultPrevented || activePointers.size > 1) {24                return;25            }26            if (isTouchDevice && Date.now() - touchStartTime < touchDelay)27                return;28            const x = event.clientX;29            const y = event.clientY;30            const dx = x - startX;31            const dy = y - startY;32            if (isDragging || Math.abs(dx) > threshold || Math.abs(dy) > threshold) {33                event.preventDefault();34                event.stopPropagation();35                const rect = element.getBoundingClientRect();36                const { left, top } = rect;37                if (!isDragging) {38                    onStart === null || onStart === void 0 ? void 0 : onStart(startX - left, startY - top);39                    isDragging = true;40                }41                onDrag(dx, dy, x - left, y - top);42                startX = x;43                startY = y;44            }45        };46        const onPointerUp = (event) => {47            activePointers.delete(event.pointerId);48            if (isDragging) {49                const x = event.clientX;50                const y = event.clientY;51                const rect = element.getBoundingClientRect();52                const { left, top } = rect;53                onEnd === null || onEnd === void 0 ? void 0 : onEnd(x - left, y - top);54            }55            unsubscribeDocument();56        };57        const onPointerLeave = (e) => {58            activePointers.delete(e.pointerId);59            if (!e.relatedTarget || e.relatedTarget === document.documentElement) {60                onPointerUp(e);61            }62        };63        const onClick = (event) => {64            if (isDragging) {65                event.stopPropagation();66                event.preventDefault();67            }68        };69        const onTouchMove = (event) => {70            if (event.defaultPrevented || activePointers.size > 1) {71                return;72            }73            if (isDragging) {74                event.preventDefault();75            }76        };77        document.addEventListener('pointermove', onPointerMove);78        document.addEventListener('pointerup', onPointerUp);79        document.addEventListener('pointerout', onPointerLeave);80        document.addEventListener('pointercancel', onPointerLeave);81        document.addEventListener('touchmove', onTouchMove, { passive: false });82        document.addEventListener('click', onClick, { capture: true });83        unsubscribeDocument = () => {84            document.removeEventListener('pointermove', onPointerMove);85            document.removeEventListener('pointerup', onPointerUp);86            document.removeEventListener('pointerout', onPointerLeave);87            document.removeEventListener('pointercancel', onPointerLeave);88            document.removeEventListener('touchmove', onTouchMove);89            setTimeout(() => {90                document.removeEventListener('click', onClick, { capture: true });91            }, 10);92        };93    };94    element.addEventListener('pointerdown', onPointerDown);95    return () => {96        unsubscribeDocument();97        element.removeEventListener('pointerdown', onPointerDown);98        activePointers.clear();99    };100}101