@omicrxn/mercury/dist/mercury/gestures/drag.js

Mercury is a Svelte animation library using AnimeJS under the hood. It simplifies complex animations with Svelte actions, provides layout and exit animations, and integrates seamlessly with Svelte features.

import { animate as motionAnimate, motionValue, styleEffect, MotionValue } from 'motion';
import { DragGesture } from '@use-gesture/vanilla';
function runInertia(mv, to, velocity, bounds) {
    return motionAnimate(mv, to, {
        type: 'inertia',
        velocity,
        ...(bounds ? { min: bounds[0], max: bounds[1] } : {})
    });
}
export const handleDrag = (element, params) => {
    if (params?.drag === true) {
        element.style.touchAction = 'none';
        element.style.cursor = 'pointer';
        let x = motionValue(0);
        let y = motionValue(0);
        styleEffect(element, { x, y });
        const { bounds } = params.whileDrag || {};
        return new DragGesture(element, ({ _bounds, event, first, last, offset: [ox, oy], velocity: [vx, vy], direction: [dx, dy] }) => {
            if (first) {
                params.onDragStart?.(event);
            }
            if (last) {
                params.onDragEnd?.(event);
            }
            if (last) {
                runInertia(x, ox, vx * dx * 100, _bounds?.[0]);
                runInertia(y, oy, vy * dy * 100, _bounds?.[1]);
            }
            else {
                x.jump(ox);
                y.jump(oy);
            }
        }, {
            from: () => [x.get(), y.get()],
            bounds: bounds,
            ...params.whileDrag
        });
    }
};